@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap";:root{--ink: #050505;--paper: #f7f7f3;--acid: #ffed2f;--orange: #ff4d12;--red: #ef0000;--green: #2fbd4a;--blue: #145cff;--shadow: 5px 5px 0 var(--ink);color:var(--ink);background:var(--paper);font-family:Space Grotesk,Arial,sans-serif;font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--paper)}button{font:inherit;color:inherit}.app-shell{min-height:100vh;background:linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),var(--paper);background-size:28px 28px}.page-transition{animation:page-pop .26s ease-out both}.topbar{min-height:72px;padding:10px 24px 14px;border-bottom:3px solid var(--ink);background:#fff}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:120px;width:min(1180px,100%);margin:0 auto}.brand-lockup{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:12px;min-width:260px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--orange);background:var(--orange);box-shadow:3px 3px 0 var(--ink);font-size:1.05rem;font-weight:950}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.4rem,2.5vw,1.75rem);line-height:.9;font-weight:950;letter-spacing:0}.brand-lockup p,footer,.filter-label,.answer-label,.stat-box span,.challenge-meta small{color:#253044;font-family:Space Grotesk,Arial,sans-serif;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.top-actions{display:flex;align-items:center;gap:12px}.nav-button,.filter-buttons button,.panel-button,.next-button,.hint-button,.start-session-button{min-height:36px;padding:0 16px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-weight:950;letter-spacing:.08em;text-transform:uppercase;transition:transform .12s ease,box-shadow .12s ease,background-color .16s ease,opacity .16s ease}.nav-button:hover,.filter-buttons button:hover,.panel-button:hover,.next-button:hover,.answer-button:hover,.hint-button:hover,.start-session-button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.nav-button:active,.filter-buttons button:active,.panel-button:active,.next-button:active,.answer-button:active,.hint-button:active,.start-session-button:active,.practice-link:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.nav-button.primary,.panel-button.orange,.start-session-button{background:var(--orange)}.nav-button.primary{cursor:default}.nav-button.primary:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}.nav-button.primary.is-clickable{cursor:pointer}.nav-button.primary.is-clickable:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.nav-button.peach{background:#ffa27f}.nav-button.danger{color:#fff;background:var(--red)}.stat-box{display:grid;place-items:center;width:58px;height:46px;border:2px solid var(--ink);background:#fff}.stat-box.hot{background:var(--orange)}.stat-box strong{font-size:1.1rem;line-height:.9;font-weight:950}.stat-box span{font-size:.58rem;font-weight:900}.filter-band{padding:18px 24px 16px;border-bottom:3px solid var(--ink);background:var(--acid)}.filter-inner{display:flex;justify-content:space-between;gap:120px;width:min(1180px,100%);margin:0 auto}.filter-group{display:grid;gap:10px}.training-filter{width:100%}.filter-buttons{display:flex;flex-wrap:wrap;gap:9px}.filter-buttons button.active{color:#fff;background:var(--ink);box-shadow:4px 4px #fff}.filter-buttons button:disabled{cursor:not-allowed;opacity:.72}.filter-buttons button:disabled:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}.filter-buttons button.active:disabled:hover{box-shadow:4px 4px #fff}.training-workspace{display:grid;grid-template-columns:280px 810px;justify-content:center;gap:34px;max-width:1180px;margin:0 auto;padding:42px 18px 38px}.lesson-list{display:grid;align-content:start;gap:10px}.lesson-list .filter-label{margin-bottom:4px;font-weight:950}.lesson-list button{display:grid;gap:4px;min-height:68px;padding:12px 14px;border:3px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-align:left}.lesson-list button.active{background:var(--orange)}.lesson-list small{color:#253044;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.lesson-list strong{font-size:.98rem;line-height:1.15}.training-card{border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);padding:34px}.challenge-meta-label{display:inline-flex;min-height:28px;align-items:center;margin-bottom:22px;padding:0 14px;color:#fff;background:var(--ink);font-weight:950;letter-spacing:.08em;text-transform:uppercase}.lesson-example{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;margin-bottom:30px}.lesson-steps{display:grid;gap:12px}.lesson-step{padding:18px;border:3px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}.lesson-step h3{margin-bottom:8px;font-size:1.1rem;font-weight:950}.lesson-step p{line-height:1.45}.lesson-actions{display:flex;align-items:center;gap:12px;margin:28px 0}.lesson-progress{margin-left:auto;color:#253044;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.pro-tricks{padding:24px;border:3px solid var(--ink);background:var(--acid);box-shadow:5px 5px 0 var(--ink)}.pro-tricks h3{margin-bottom:12px;font-size:1.35rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.pro-tricks ul{display:grid;gap:8px;margin:0 0 22px;padding-left:20px}.practice-link{min-height:48px;padding:0 24px;border:3px solid var(--ink);background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--ink);cursor:pointer;font-weight:950}.workspace{display:grid;grid-template-columns:750px 320px;justify-content:center;gap:34px;max-width:1180px;margin:0 auto;padding:38px 18px 34px}.challenge-card,.info-card{border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);animation:card-rise .24s ease-out both}.challenge-card{padding:clamp(20px,3.2vw,34px)}.challenge-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.challenge-meta span{display:inline-flex;min-height:28px;align-items:center;padding:0 14px;color:#fff;background:var(--ink);font-weight:950;letter-spacing:.08em;text-transform:uppercase}h2{max-width:700px;font-size:clamp(1.65rem,2.6vw,2.35rem);line-height:.95;font-weight:950;letter-spacing:0}.prompt-line{margin-top:10px;font-family:Space Grotesk,Arial,sans-serif;font-size:.96rem}.session-start-grid{display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:14px;margin-top:30px;margin-bottom:24px}.session-start-grid div{display:grid;gap:5px;min-height:92px;align-content:center;padding:16px;border:3px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink)}.session-start-grid strong{font-size:1.45rem;font-weight:950}.session-start-grid span{color:#253044;font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.start-session-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px}.pattern-board{margin-top:30px;margin-bottom:28px}.sequence-board{display:grid;grid-auto-flow:column;grid-auto-columns:74px;justify-content:start;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}.grid-board{display:grid;grid-template-columns:repeat(var(--columns),74px);gap:0;width:max-content;border:5px solid var(--ink)}.grid-board .tile-cell{border-width:0 3px 3px 0}.grid-board .tile-cell:nth-child(3n){border-right:0}.grid-board .tile-cell:nth-last-child(-n+3){border-bottom:0}.tile-cell{display:grid;place-items:center;width:74px;height:74px;border:3px solid var(--ink);background:#fff;animation:tile-in .22s ease-out both}.tile-cell:nth-child(2){animation-delay:35ms}.tile-cell:nth-child(3){animation-delay:70ms}.tile-cell:nth-child(4){animation-delay:105ms}.tile-cell:nth-child(5){animation-delay:.14s}.tile-cell:nth-child(6){animation-delay:175ms}.tile-cell:nth-child(7){animation-delay:.21s}.tile-cell:nth-child(8){animation-delay:245ms}.tile-cell:nth-child(9){animation-delay:.28s}.text-glyph{font-size:1.75rem;font-weight:950;line-height:1}.color-glyph{display:block;width:42px;height:42px;border:2px solid var(--ink);background:var(--swatch-color)}.tile-question,.mystery{color:var(--orange);font-size:2rem;font-weight:950}.shape-wrap{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:5px;width:58px;height:58px;transform:rotate(var(--tile-rotation));transform-origin:center}.shape-wrap.is-hidden{transform:none}.shape{display:block;width:100%;height:100%;background:var(--tile-color);transform-origin:center}.shape-shell{display:block;width:min(var(--tile-size),38px);height:min(var(--tile-size),38px);padding:2px;background:var(--ink);transform-origin:center}.shape-wrap:has(.shape-shell:nth-child(4)) .shape-shell{width:18px;height:18px}.shape-shell.circle,.shape.circle{border-radius:50%}.shape-shell.square,.shape.square{border-radius:0}.shape-shell.triangle,.shape.triangle{clip-path:polygon(50% 4%,96% 94%,4% 94%)}.shape-shell.diamond,.shape.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.shape-shell.hexagon,.shape.hexagon{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}.shape.striped{background:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 7px,transparent 7px 14px),var(--tile-color)}.answer-label{margin-bottom:14px;font-weight:900}.answers{display:flex;flex-wrap:wrap;gap:12px}.answer-button{display:grid;place-items:center;position:relative;width:74px;height:74px;min-height:74px;padding:0;border:3px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-family:Space Grotesk,Arial,sans-serif;font-size:.98rem;font-weight:850;text-align:left;animation:tile-in .22s ease-out both;transition:transform .12s ease,box-shadow .12s ease,background-color .16s ease,color .16s ease,opacity .16s ease}.answer-button:nth-child(2){animation-delay:55ms}.answer-button:nth-child(3){animation-delay:.11s}.answer-button:nth-child(4){animation-delay:165ms}.answer-button:nth-child(5){animation-delay:.22s}.answer-button svg{position:absolute;right:5px;top:5px;padding:2px;background:#fff;border:2px solid var(--ink)}.answer-button.correct,.answer-button.show-answer{background:var(--green)}.answer-button.wrong{color:#fff;background:var(--red)}.answer-button:disabled{cursor:default}.hint-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:max-content;min-height:32px;margin-top:26px;background:#fff}.hint-panel,.result-panel{margin-top:30px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);animation:panel-slam .22s ease-out both}.hint-panel{padding:14px 18px;background:#efefef}.hint-panel strong{display:block;margin-bottom:6px;color:#253044;font-size:.82rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.result-panel{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-height:96px;padding:18px 20px}.result-panel.correct{background:var(--green)}.result-panel.wrong{color:#fff;background:var(--red)}.result-panel strong{display:block;margin-bottom:8px;font-size:1.25rem;font-weight:950;text-transform:uppercase}.result-panel p,.hint-panel p{max-width:56ch;font-family:Space Grotesk,Arial,sans-serif;line-height:1.35}.result-panel p+p{margin-top:10px}.result-panel hr{width:min(520px,100%);height:2px;margin:14px 0;border:0;background:currentColor;opacity:.55}.text-button{padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-decoration:underline}.next-button{flex:0 0 auto;background:#fff}.side-panel{display:grid;align-content:start;gap:20px}.info-card{padding:18px}.info-card.orange{background:var(--orange)}.info-card h3{margin-bottom:12px;font-size:1rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.info-card p{font-family:Space Grotesk,Arial,sans-serif;line-height:1.4}.info-card p+p{margin-top:8px}.panel-button{width:100%;min-height:44px;background:#fff}.save-message{font-size:.85rem;line-height:1.3}.profile-workspace{max-width:1180px;margin:0 auto;padding:42px 24px}.profile-heading{margin-bottom:30px}.profile-heading h2{margin-bottom:10px;text-transform:uppercase}.profile-heading p{color:#253044;letter-spacing:.08em;text-transform:uppercase}.profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:34px}.profile-stat{display:grid;gap:8px;min-height:106px;padding:22px;border:3px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink)}.profile-stat.hot{background:var(--orange)}.profile-stat strong{font-size:2rem;line-height:1}.profile-stat span{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.profile-panel{padding:24px;border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow)}.profile-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.profile-panel-heading h3{text-transform:uppercase}.session-table{border:3px solid var(--ink);overflow-x:auto}.session-row{display:grid;grid-template-columns:1.8fr 1fr 1fr .8fr .7fr .7fr .7fr;min-width:860px}.session-row span{padding:12px 14px;border-bottom:1px solid #b8b8b8}.session-row.header{color:#fff;background:var(--ink);font-weight:950;letter-spacing:.06em;text-transform:uppercase}.session-row.header span{border-bottom:0}.profile-actions{display:flex;gap:12px;margin-top:24px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;background:#05050557;animation:fade-in .16s ease-out both}.confirm-dialog{width:min(430px,100%);padding:24px;border:3px solid var(--ink);background:#fff;box-shadow:7px 7px 0 var(--ink);animation:modal-pop .18s ease-out both}.confirm-dialog h2{margin-bottom:12px;font-size:1.8rem}.confirm-dialog p{line-height:1.4}.confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.auth-dialog{width:min(500px,100%)}.auth-form{display:grid;gap:14px}.auth-form label{display:grid;gap:6px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}.auth-form input{min-height:44px;padding:8px 10px;border:3px solid var(--ink);font:inherit}.auth-message{padding:10px;border:2px solid var(--ink);background:var(--acid)}.auth-switches{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.auth-switches button{border:0;background:transparent;cursor:pointer;font:inherit;text-decoration:underline}.nav-button:disabled{opacity:.65;cursor:wait}.panel-button:disabled{opacity:.55;cursor:not-allowed;transform:none}.panel-button:disabled:hover{box-shadow:3px 3px 0 var(--ink);transform:none}footer{padding:24px;border-top:3px solid var(--ink);background:#fff;text-align:center}@keyframes page-pop{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes card-rise{0%{opacity:0;transform:translate(4px,8px)}to{opacity:1;transform:translate(0)}}@keyframes tile-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes panel-slam{0%{opacity:0;transform:translateY(10px);box-shadow:0 0 0 var(--ink)}to{opacity:1;transform:translateY(0);box-shadow:4px 4px 0 var(--ink)}}@keyframes modal-pop{0%{opacity:0;transform:translateY(10px) scale(.97);box-shadow:0 0 0 var(--ink)}to{opacity:1;transform:translateY(0) scale(1);box-shadow:7px 7px 0 var(--ink)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}@media(max-width:940px){.workspace{padding-right:18px;padding-left:18px}.topbar-inner,.filter-inner{align-items:stretch;flex-direction:column}.top-actions{flex-wrap:wrap}.workspace{grid-template-columns:1fr;max-width:720px}.training-workspace{grid-template-columns:1fr;max-width:820px}.lesson-list{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-list .filter-label{grid-column:1 / -1}.side-panel,.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.brand-lockup{min-width:0}.top-actions,.filter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stat-box,.nav-button,.filter-buttons button{width:100%}.workspace{padding-top:24px}.challenge-card{padding:18px}.sequence-board{grid-auto-columns:72px}.grid-board{grid-template-columns:repeat(var(--columns),minmax(58px,72px))}.tile-cell{width:72px;height:72px}.answers,.side-panel,.lesson-list{grid-template-columns:1fr}.training-card{padding:18px}.lesson-actions{align-items:flex-start;flex-direction:column}.lesson-progress{margin-left:0}.confirm-actions{align-items:stretch;flex-direction:column}.profile-grid{grid-template-columns:1fr}.profile-panel-heading,.profile-actions{align-items:stretch;flex-direction:column}.result-panel{flex-direction:column}}
