:root{--font-family-sans:"Geist", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;--font-family-mono:"Geist Mono", "SFMono-Regular", Menlo, monospace;font-family:var(--font-family-sans);color:#15171a;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;font-feature-settings:"cv01", "ss03";--surface-canvas:#f7f8fa;--surface-panel:#fff;--surface-elevated:#f0f2f5;--surface-stage:#fff;--surface-deep:#e6e9ee;--surface-control:#fff;--surface-control-hover:#eef0f4;--text-primary:#15171a;--text-secondary:#4b5563;--text-muted:#667085;--text-on-accent:#fff;--border-default:#0f172a26;--border-subtle:#0f172a17;--border-success:#147a4b73;--accent-primary:#5146e5;--accent-hover:#4338ca;--status-success:#147a4b;--status-warning:#8a5a00;--status-error:#c63845;--stage-text:#36383b;--cube-black:#111315;--cube-up:#f2c94c;--cube-down:#f4f0df;--cube-front:#27ae60;--cube-right:#f28b30;--cube-back:#3f7cff;--cube-left:#e84545;--font-display:clamp(1.75rem, 3.5vw, 3rem);--font-display-mobile:2rem;--font-heading:1.125rem;--font-subheading:1rem;--font-body:.9375rem;--font-ui:.8125rem;--font-label:.75rem;--font-caption:.6875rem;--font-micro:.625rem;--font-tiny:.5625rem;--font-metric:clamp(var(--font-subheading), 2vw, 1.35rem);--line-display:1.02;--line-body:1.55;--line-label:1.35;--line-ui:1.4;--weight-emphasis:590;--weight-ui:510;--tracking-display:-.035em;--tracking-label:.06em;--tracking-brand:.12em;--tracking-heading:-.015em;--tracking-metric:.09em;--tracking-progress:.04em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--radius-control:6px;--radius-card:10px;--radius-key:4px;--size-touch:44px;--size-topbar:60px;--size-topbar-mobile:56px;--size-brand-mark:22px;--size-key-small:22px;--size-keycap:26px;--size-key-column:max-content;--size-face-label-min:46px;--size-input:88px;--size-solution-strip:112px;--size-solution-move:64px;--size-solution-move-width:58px;--size-playback:72px;--size-stage-desktop:620px;--size-stage-tablet:520px;--size-stage-mobile:390px;--size-learning-stage:520px;--size-drill-stage:480px;--size-drill-stage-mobile:360px;--measure-copy:410px;--measure-copy-mobile:34rem;--measure-app:var(--measure-site,1180px);--measure-page-min:320px;--measure-face-label-mobile:34px;--measure-fallback:36rem;background:#f7f8fa}*{box-sizing:border-box}html{min-width:var(--measure-page-min);background:var(--surface-canvas);scroll-behavior:smooth}body{min-width:var(--measure-page-min);min-height:100vh;margin:0;overflow-x:hidden}button,input,textarea{font:inherit}button{color:inherit}.no-break{white-space:nowrap}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.38}.app-shell{width:min(100%, var(--measure-app));padding:0 clamp(var(--space-4), 3vw, var(--space-10)) var(--space-10);margin:0 auto}.topbar{height:var(--size-topbar);border-bottom:1px solid var(--border-subtle);align-items:center;display:flex}.brand{align-items:center;gap:var(--space-3);color:var(--text-primary);font-family:var(--font-family-mono);font-size:var(--font-label);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-brand);text-decoration:none;display:inline-flex}.brand-mark{width:var(--size-brand-mark);aspect-ratio:1;gap:calc(var(--space-1) / 2);grid-template-columns:repeat(2,1fr);display:grid;transform:rotate(45deg)}.brand-mark i{background:var(--text-primary);border-radius:1px;display:block}.brand-mark i:nth-child(2){background:var(--accent-primary)}.drills-app{width:min(100%, var(--measure-app));padding:var(--space-6) clamp(var(--space-4), 3vw, var(--space-10)) var(--space-10);margin:0 auto}.drills-intro,.drills-run-heading{margin-bottom:var(--space-6)}.drills-intro h1,.drills-run-heading h1{font-size:var(--font-display);line-height:var(--line-display);letter-spacing:var(--tracking-display);margin:0}.drills-intro p{max-width:var(--measure-copy);color:var(--text-secondary);line-height:var(--line-body)}.drills-run-heading{align-items:flex-start;gap:var(--space-4);display:flex}.drill-catalog{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.solve-app{width:min(var(--measure-site), calc(100% - var(--space-8)));padding:var(--space-6) 0 var(--space-10);margin:0 auto}.solve-heading,.solve-options,.solve-actions{gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.solve-heading h1,.solve-controls h2{margin:0}.solve-heading p{margin:var(--space-2) 0 0}.solve-stage-rail,.solve-mode-tabs{gap:var(--space-2);margin-top:var(--space-5);padding-bottom:var(--space-1);display:flex;overflow-x:auto}.solve-stage-rail button,.solve-mode-tabs button{min-height:var(--size-touch);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-primary);padding:0 var(--space-3);font:inherit;white-space:nowrap}.solve-stage-rail button.is-current,.solve-mode-tabs button[aria-selected=true]{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-on-accent)}.solve-workspace{gap:var(--space-5);margin-top:var(--space-5);grid-template-columns:minmax(0,1fr) minmax(280px,360px);display:grid}.solve-controls{border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel);padding:var(--space-5)}.solve-controls>*+*{margin-top:var(--space-3)}.solve-case{font-weight:var(--weight-emphasis)}.solve-controls .move-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.solve-pairs{gap:var(--space-2);padding-left:var(--space-5);margin:0;display:grid}.solve-pairs li{gap:var(--space-1);display:grid}.solve-controls .move-token.is-current{outline:2px solid var(--accent-primary);outline-offset:2px}@media (width<=700px){.solve-app{width:min(100% - var(--space-4), var(--measure-site))}.solve-workspace{grid-template-columns:1fr}}.drill-card,.drill-control,.drill-result,.drill-settings{border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel)}.drill-card{align-content:start;gap:var(--space-3);min-height:260px;padding:var(--space-5);display:grid}.drill-card h2,.drill-control h2,.drill-result h2{font-size:var(--font-heading);margin:0}.drill-card p{color:var(--text-secondary);line-height:var(--line-body);margin:0}.drill-card .site-button{place-self:end start}.drill-bests{gap:var(--space-1);color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-caption);display:grid}.drill-workspace{min-height:var(--size-drill-stage);border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel);grid-template-columns:minmax(0,1fr) minmax(280px,340px);display:grid;overflow:clip}.drill-stage{min-height:var(--size-drill-stage);background:var(--surface-stage)}.drill-control{align-content:start;gap:var(--space-5);padding:var(--space-5);border:0;border-left:1px solid var(--border-subtle);border-radius:0;display:grid}.drill-metric{gap:var(--space-1);color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0;display:grid}.drill-metric strong{color:var(--text-primary);letter-spacing:var(--tracking-display);font-size:clamp(1.5rem,3vw,2.5rem)}.drill-expected{gap:var(--space-2);flex-wrap:wrap;max-height:225px;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.drill-expected li{border-radius:var(--radius-key);padding:2px}.drill-expected li.is-current{background:var(--accent-primary);animation:.18s ease-out drill-current-shake}.drill-expected li.is-current .move-token{border-color:#0000}.drill-keyboard{width:min(100%,760px);margin:var(--space-6) auto}.drill-touch-hint{margin:0 0 var(--space-3);color:var(--text-muted);font-size:var(--font-ui)}.drill-keyboard-rows{gap:var(--space-2);display:grid}.drill-keyboard-row{gap:var(--space-2);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.drill-keycap{min-width:var(--size-touch);min-height:var(--size-touch);padding:var(--space-1);border:1px solid var(--border-default);border-bottom:3px solid var(--surface-deep);border-radius:var(--radius-key);background:var(--surface-control);color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-caption);place-items:center;gap:1px;display:grid}button.drill-keycap{cursor:pointer;color:var(--text-primary)}.drill-keycap .move-token{min-width:26px;font-size:var(--font-micro);padding:1px 3px}.drill-keycap.is-unbound{opacity:.38}button.drill-keycap:hover{border-color:var(--accent-primary)}button.drill-keycap.is-pressed{background:var(--surface-deep);border-bottom-width:1px;transform:translateY(2px)}.drill-result{width:min(100%,560px);margin:var(--space-6) auto;padding:var(--space-5)}.drill-result p{color:var(--text-secondary)}.drill-leaderboard{border-top:1px solid var(--border-subtle)}.drill-leaderboard summary{min-height:var(--size-touch);color:var(--text-secondary);cursor:pointer;font-size:var(--font-ui);font-weight:var(--weight-emphasis);align-items:center;display:flex}.drill-leaderboard-content{gap:var(--space-3);padding-top:var(--space-3);display:grid}.drill-leaderboard-content>p{color:var(--text-muted);font-size:var(--font-caption);margin:0}.drill-leaderboard-tabs{gap:var(--space-2);display:flex}.drill-leaderboard-tabs button{min-height:var(--size-touch);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-secondary);cursor:pointer;font-size:var(--font-caption);font-weight:var(--weight-emphasis);flex:1}.drill-leaderboard-tabs button[aria-selected=true]{border-color:var(--accent-primary);background:var(--surface-elevated);color:var(--accent-hover)}.drill-leaderboard-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.drill-leaderboard-list li{grid-template-columns:var(--size-touch) minmax(0, 1fr) auto auto;gap:var(--space-2);min-height:var(--size-touch);padding:0 var(--space-2);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-family:var(--font-family-mono);font-size:var(--font-caption);align-items:center;display:grid}.drill-leaderboard-list strong{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.drill-leaderboard-list time{color:var(--text-primary)}.drill-score-submission{gap:var(--space-2);margin:var(--space-5) 0;grid-template-columns:minmax(0,1fr) auto;display:grid}.drill-score-submission label{color:var(--text-secondary);font-size:var(--font-label);font-weight:var(--weight-emphasis);grid-column:1/-1}.drill-score-submission input{min-width:0;min-height:var(--size-touch);padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-primary);font:inherit}.drill-score-submission input:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}.drill-score-submission p{color:var(--text-muted);font-size:var(--font-caption);grid-column:1/-1;margin:0}.drill-score-submission p[role=alert]{color:var(--status-error)}.drill-settings{margin-top:var(--space-6);padding:var(--space-4)}.drill-settings summary{min-height:var(--size-touch);cursor:pointer;font-weight:var(--weight-emphasis);align-items:center;display:flex}.drill-settings>div{gap:var(--space-2);margin-bottom:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(100px,1fr));display:grid}.drill-binding{min-height:var(--size-touch);justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-key);background:var(--surface-control);cursor:pointer;display:flex}.drill-binding:hover{border-color:var(--accent-primary)}.drill-binding kbd{color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-caption)}.drill-conflict{color:var(--status-error)}.drill-live-status{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes drill-current-shake{0%,to{transform:translate(0)}35%{transform:translate(-3px)}70%{transform:translate(3px)}}@media (width<=700px){.drill-workspace{grid-template-columns:1fr}.drill-stage{min-height:var(--size-drill-stage-mobile)}.drill-control{border-top:1px solid var(--border-subtle);border-left:0}}@media (width<=480px){.drill-keyboard-row{gap:var(--space-1);grid-template-columns:repeat(3,minmax(0,1fr))}.drill-leaderboard-list li{grid-template-columns:var(--size-touch) minmax(0, 1fr) auto}.drill-leaderboard-list li>span:last-child{display:none}.drill-score-submission{grid-template-columns:1fr}.drill-score-submission .site-button{width:100%}}@media (prefers-reduced-motion:reduce){.drill-expected li.is-current{animation:none}}.intro{gap:var(--space-6);padding:var(--space-6) 0 var(--space-4);grid-template-columns:minmax(0,1fr) auto;align-items:end;display:grid}.intro h1{font-size:var(--font-display);font-weight:var(--weight-emphasis);line-height:var(--line-display);letter-spacing:var(--tracking-display);margin:0}.trainer-eyebrow{margin:0 0 var(--space-2);color:var(--accent-hover);font-family:var(--font-family-mono);font-size:var(--font-micro);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-label)}.intro-copy{margin:var(--space-2) 0 0;max-width:var(--measure-copy);color:var(--text-secondary);font-size:var(--font-body);line-height:var(--line-body);word-break:keep-all}.trainer-learn-link{min-height:var(--size-touch);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-control);color:var(--text-secondary);font-size:var(--font-ui);font-weight:var(--weight-ui);align-items:center;text-decoration:none;display:inline-flex}.trainer-learn-link:hover{background:var(--surface-elevated);color:var(--text-primary)}[role=tablist]{gap:var(--space-1);margin-bottom:var(--space-3);padding:var(--space-1);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-panel);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}[role=tablist] button{min-height:var(--size-touch);border-radius:var(--radius-control);color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-label);font-weight:var(--weight-emphasis);cursor:pointer;background:0 0;border:0}[role=tablist] button[aria-selected=true]{background:var(--surface-elevated);color:var(--text-primary)}[role=tabpanel]{min-width:0}.workspace{min-height:var(--size-stage-desktop);border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel);grid-template-columns:minmax(0,1fr) minmax(330px,370px);display:grid;overflow:clip}.stage-wrap{background:var(--surface-stage);min-width:0}.stage-loading{min-height:var(--size-stage-desktop);padding:var(--space-6);color:var(--text-muted);font-size:var(--font-ui);place-content:center;display:grid}.stage{width:100%;height:var(--size-stage-desktop);min-height:var(--size-stage-desktop);position:relative;overflow:hidden}.stage canvas{touch-action:none;display:block}.stage-fallback{place-content:center;gap:var(--space-2);width:100%;height:100%;padding:var(--space-6);color:var(--stage-text);text-align:center;display:grid}.stage-fallback strong{font-size:var(--font-subheading)}.stage-fallback span{max-width:var(--measure-fallback);color:var(--stage-text);font-size:var(--font-ui);line-height:var(--line-body);word-break:keep-all;text-wrap:pretty}.stage-fallback span.no-break,.solution-strip span.no-break{white-space:nowrap;text-wrap:nowrap}.stage-hint{right:var(--space-5);bottom:var(--space-4);color:var(--stage-text);font-size:var(--font-caption);pointer-events:none;margin:0;position:absolute}.control-rail{border-left:1px solid var(--border-default);background:var(--surface-panel)}.panel{padding:var(--space-6)}.panel+.panel{border-top:1px solid var(--border-subtle)}.panel-heading{margin-bottom:var(--space-5)}.panel-heading.compact{margin-bottom:var(--space-4)}.panel-heading h2,.result-head h2{font-size:var(--font-heading);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-heading);margin:0}.field-label{margin-bottom:var(--space-2);color:var(--text-secondary);font-size:var(--font-label);font-weight:var(--weight-emphasis);display:block}.input-row{gap:var(--space-2);grid-template-columns:minmax(0,1fr) auto;display:grid}.input-row textarea{min-width:0;min-height:var(--size-input);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-elevated);color:var(--text-primary);font-family:var(--font-family-mono);font-size:var(--font-ui);line-height:var(--line-body);overflow-wrap:anywhere;resize:vertical}.input-row>.button{align-self:start}.input-row.has-error textarea{border-color:var(--status-error)}.field-help,.field-error{margin:var(--space-2) 0 0;color:var(--text-muted);font-size:var(--font-caption);word-break:keep-all;text-wrap:pretty}.field-error{color:var(--status-error)}.sequence-option{align-items:start;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);cursor:pointer;grid-template-columns:auto 1fr;display:grid}.sequence-option input{width:var(--space-4);height:var(--space-4);margin:calc(var(--space-1) / 2) 0 0;accent-color:var(--accent-primary)}.sequence-option span{gap:var(--space-1);display:grid}.sequence-option strong{color:var(--text-primary);font-size:var(--font-label)}.sequence-option small{color:var(--text-muted);font-size:var(--font-micro);line-height:var(--line-body)}.sequence-option:has(input:focus-visible){outline:2px solid var(--accent-hover);outline-offset:2px}.sequence-option:has(input:disabled){cursor:default;opacity:.62}.scramble-progress{color:var(--status-warning);font-family:var(--font-family-mono);font-size:var(--font-micro);letter-spacing:var(--tracking-progress);margin:0}.scramble-stepper{gap:var(--space-2);margin-top:var(--space-3);display:grid}.scramble-step-actions{gap:var(--space-2);display:flex}.scramble-step-actions .button{flex:1}.scramble-step-actions kbd{min-width:auto;height:var(--size-key-small);margin-left:var(--space-1);padding:0 var(--space-2)}.speed-control{margin-top:var(--space-4)}.speed-control>div{gap:var(--space-2) var(--space-3);grid-template-columns:1fr auto;align-items:center;display:grid}.speed-control label{color:var(--text-secondary);font-size:var(--font-label);font-weight:var(--weight-emphasis)}.speed-control input{width:100%;accent-color:var(--accent-primary);cursor:pointer;grid-column:1/-1}.speed-control output{color:var(--text-primary);font-family:var(--font-family-mono);font-size:var(--font-ui)}.speed-control p{color:var(--text-muted);font-size:var(--font-micro);grid-column:1/-1;margin:0}.share-row{gap:var(--space-2);margin-top:var(--space-3);display:grid}.share-row .button{width:100%}.share-row p{color:var(--status-success);font-size:var(--font-caption);word-break:keep-all;margin:0}.button{min-height:var(--size-touch);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-secondary);font-size:var(--font-label);font-weight:var(--weight-emphasis);cursor:pointer;white-space:nowrap;transition:transform .12s ease-out,background-color .12s ease-out,color .12s ease-out}.button:hover:not(:disabled){background:var(--surface-control-hover);color:var(--text-primary)}.button:active:not(:disabled){transform:scale(.98)}.button.primary,.button.solve{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-on-accent)}.button.primary:hover:not(:disabled),.button.solve:hover:not(:disabled){background:var(--accent-hover)}.button.quiet{min-height:var(--size-touch);flex:1}.utility-row{gap:var(--space-2);margin-top:var(--space-4);display:flex}.move-grid{gap:var(--space-2);display:grid}.move-row{grid-template-columns:var(--size-key-column) minmax(var(--size-face-label-min), 1fr) repeat(3, var(--size-touch));align-items:center;gap:var(--space-2);display:grid}kbd{min-width:var(--size-keycap);height:var(--size-keycap);border:1px solid var(--border-default);border-radius:var(--radius-key);background:var(--surface-elevated);color:var(--text-secondary);font-family:var(--font-family-mono);font-size:var(--font-caption);box-shadow:0 2px 0 var(--surface-deep);place-items:center;display:inline-grid}.move-row>span{color:var(--text-muted);font-size:var(--font-caption)}.move-row button,.move-row>kbd{border:1px solid var(--border-default);border-radius:var(--radius-key);background:linear-gradient(180deg, var(--surface-control) 0%, var(--surface-elevated) 100%);box-shadow:0 2px 0 var(--surface-deep), 0 3px 6px #0f172a14;font-family:var(--font-family-mono);transition:transform 80ms ease-out,box-shadow 80ms ease-out,background-color 80ms ease-out}.move-row button{width:var(--size-touch);height:var(--size-touch);color:var(--text-secondary);font-size:var(--font-caption);cursor:pointer}.move-row button:hover:not(:disabled){border-color:var(--border-accent);color:var(--text-primary)}.move-row button:active:not(:disabled),.move-row button.is-pressed,.move-row>kbd.is-pressed{box-shadow:0 0 0 var(--surface-deep), inset 0 1px 2px #0f172a1f;background:var(--surface-deep);transform:translateY(2px)}.shortcut-note{gap:var(--space-4);margin-top:var(--space-4);color:var(--text-muted);font-size:var(--font-caption);display:flex}.shortcut-note span{align-items:center;gap:var(--space-2);display:flex}.shortcut-note kbd{min-width:auto;height:var(--size-key-small);padding:0 var(--space-2)}.extended-moves{gap:var(--space-5);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);display:grid}.extended-moves>h3,.move-subgroup h4{color:var(--text-primary);font-size:var(--font-label);font-weight:var(--weight-emphasis);margin:0}.extended-moves>p{margin:calc(-1 * var(--space-3)) 0 0;color:var(--text-muted);font-size:var(--font-caption);line-height:var(--line-body);word-break:keep-all}.move-subgroup{gap:var(--space-3);display:grid}.move-subgroup h4{color:var(--text-secondary);letter-spacing:var(--tracking-label)}.result-panel{margin-top:var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel);overflow:hidden}.method-switch{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.method-switch .button[aria-pressed=true]{border-color:var(--accent-primary);color:var(--accent-hover)}.result-head{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-6);border-bottom:1px solid var(--border-subtle);display:flex}.result-note{margin:var(--space-2) 0 0;color:var(--text-muted);font-size:var(--font-caption)}.metrics{border-bottom:1px solid var(--border-subtle);display:grid}.metrics.is-cross{grid-template-columns:repeat(3,1fr)}.metrics.is-compact{grid-template-columns:repeat(2,1fr)}.metrics>div{padding:var(--space-5) var(--space-6)}.metrics>div+div{border-left:1px solid var(--border-subtle)}.metrics span{margin-bottom:var(--space-2);color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-micro);letter-spacing:var(--tracking-metric);display:block}.metrics strong{font-family:var(--font-family-mono);font-size:var(--font-metric);font-weight:var(--weight-ui)}.solution-strip{min-height:var(--size-solution-strip);align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-6);display:flex;overflow-x:auto}.solution-strip>p{color:var(--text-muted);font-size:var(--font-ui);word-break:keep-all;margin:0}.solution-strip button{flex:0 0 var(--size-solution-move-width);height:var(--size-solution-move);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-secondary);font-family:var(--font-family-mono);font-size:var(--font-subheading);cursor:pointer}.solution-strip button span{margin-bottom:var(--space-1);color:var(--text-muted);font-size:var(--font-tiny);display:block}.solution-strip button.is-done{border-color:var(--border-success);color:var(--status-success)}.solution-strip button.is-current{border-color:var(--accent-primary);color:var(--text-primary)}.playback-bar{min-height:var(--size-playback);align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);border-top:1px solid var(--border-subtle);grid-template-columns:1fr auto;display:grid}.playback-bar p{color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-caption);letter-spacing:var(--tracking-label);margin:0}.playback-bar>div{gap:var(--space-2);display:flex}.playback-bar .button{min-height:var(--size-touch)}@media (width>=981px){.workspace{grid-template-rows:var(--size-stage-desktop) auto}.stage-wrap{grid-area:1/1}.control-rail{display:contents}.input-panel{border-left:1px solid var(--border-default);grid-area:1/2}.move-panel{gap:var(--space-5) var(--space-8);border-top:1px solid var(--border-default);grid-area:2/1/auto/-1;grid-template-columns:minmax(300px,.65fr) minmax(0,1.35fr);display:grid}.move-panel>.panel-heading{grid-column:1/-1;margin-bottom:0}.move-panel>.move-grid{grid-area:2/1}.move-panel>.shortcut-note{grid-area:3/1;margin-top:0}.move-panel>.extended-moves{border-top:0;grid-area:2/2/span 2;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;padding-top:0}.extended-moves>h3,.extended-moves>p{grid-column:1/-1}.move-subgroup .move-row{grid-template-columns:var(--size-keycap) minmax(var(--measure-face-label-mobile), 1fr) repeat(3, var(--size-touch))}}@media (width<=980px){.workspace{grid-template-columns:1fr}.stage,.workspace{min-height:var(--size-stage-tablet)}.stage{height:var(--size-stage-tablet)}.stage-loading{min-height:var(--size-stage-tablet)}.control-rail{border-left:0;border-top:1px solid var(--border-default);grid-template-columns:1fr 1fr;display:grid}.control-rail:not(:has(.move-panel)){grid-template-columns:minmax(0,1fr)}.panel+.panel{border-top:0;border-left:1px solid var(--border-subtle)}}@media (width<=700px){.app-shell{padding-inline:var(--space-3)}.topbar{height:var(--size-topbar-mobile)}.intro{gap:var(--space-3);padding-block:var(--space-5) var(--space-4);grid-template-columns:1fr}.trainer-learn-link{justify-self:start}.intro h1{font-size:var(--font-display-mobile)}.intro-copy{max-width:var(--measure-copy-mobile);font-size:var(--font-body)}.workspace,.stage,.stage-loading{min-height:var(--size-stage-mobile)}.stage{height:47svh}.control-rail{grid-template-columns:minmax(0,1fr)}.panel{padding:var(--space-5) var(--space-4)}.panel+.panel{border-left:0;border-top:1px solid var(--border-subtle)}.stage-hint{left:var(--space-4);right:auto}.metrics{grid-template-columns:repeat(2,1fr)}.metrics>div:nth-child(3){border-left:0;border-top:1px solid var(--border-subtle)}.metrics>div:nth-child(4){border-top:1px solid var(--border-subtle)}.metrics>div{padding:var(--space-4)}.result-head{padding:var(--space-5) var(--space-4);align-items:stretch}.result-head .button{flex:none}.solution-strip,.playback-bar{padding-inline:var(--space-4)}}@media (width<=430px){.input-row{grid-template-columns:1fr}.utility-row,.result-head{flex-direction:column}.result-head .button{width:100%}.move-row{grid-template-columns:var(--size-key-column) minmax(var(--measure-face-label-mobile), 1fr) repeat(3, var(--size-touch));gap:var(--space-2)}.shortcut-note{justify-content:space-between;gap:var(--space-2)}.playback-bar{grid-template-columns:1fr}.playback-bar>p{text-align:center}.playback-bar>div{justify-content:stretch}.playback-bar .button{padding-inline:var(--space-2);flex:1}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.move-row button,.move-row>kbd{transition:none!important}}.notation-explorer{inline-size:min(100%, var(--measure-site));padding-block:var(--space-8);margin-inline:auto}.notation-explorer [hidden]{display:none!important}.notation-explorer-entry,.notation-explorer-root{border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel)}.notation-explorer-entry{padding:clamp(var(--space-5), 4vw, var(--space-8))}.notation-explorer-intro,.notation-explorer-start{justify-content:space-between;align-items:flex-start;gap:var(--space-6);display:flex}.notation-explorer-intro h2{letter-spacing:var(--tracking-heading);margin:0;font-size:clamp(1.4rem,3vw,2rem)}.notation-explorer-intro p,.notation-group-overview p,.notation-move-group p{color:var(--text-secondary)}.notation-beginner-rule{max-inline-size:var(--measure-copy);padding:var(--space-3) var(--space-4);border-inline-start:3px solid var(--accent-primary);background:var(--surface-elevated);margin:0}.notation-direction-key{gap:var(--space-3);margin-block:var(--space-6);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.notation-direction-key>div{align-items:center;gap:var(--space-3);min-inline-size:0;padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-control);display:flex}.notation-direction-key code,.notation-move-row>code{font-family:var(--font-family-mono);font-weight:var(--weight-emphasis)}.notation-group-overview{gap:var(--space-3);margin-block:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.notation-group-overview article{padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-control)}.notation-group-overview h3,.notation-group-overview p{margin:0}.notation-group-overview p{margin-block-start:var(--space-2)}.notation-explorer-start{align-items:center}.notation-explorer-start [data-notation-status]{min-block-size:1.4em;color:var(--text-secondary);margin:0}.notation-explorer-root{margin-block-start:var(--space-5);overflow:clip}.notation-explorer-runtime{grid-template-columns:minmax(0,1fr) minmax(320px,360px);min-inline-size:0;display:grid}.notation-explorer-stage{min-inline-size:0;padding:var(--space-4);border-inline-end:1px solid var(--border-default)}.notation-explorer-stage .stage{min-block-size:var(--size-stage-tablet)}.notation-current-move{margin:var(--space-3) 0 0;font-family:var(--font-family-mono);color:var(--text-secondary)}.notation-explorer-controls{align-content:start;gap:var(--space-5);min-inline-size:0;padding:var(--space-5);display:grid}.notation-move-group{border:0;min-inline-size:0;margin:0;padding:0}.notation-move-group legend{font-size:var(--font-heading);font-weight:var(--weight-emphasis);padding:0}.notation-move-group>p{margin:var(--space-2) 0 var(--space-3);font-size:var(--font-ui)}.notation-move-grid{gap:var(--space-2);display:grid}.notation-move-row{grid-template-columns:minmax(var(--size-face-label-min), 1fr) repeat(3, var(--size-touch));align-items:center;gap:var(--space-2);min-inline-size:0;display:grid}.notation-move-key{inline-size:var(--size-touch);block-size:var(--size-touch);border:1px solid var(--border-default);border-radius:var(--radius-key);background:var(--surface-control);color:var(--text-primary);font-family:var(--font-family-mono);font-weight:var(--weight-emphasis);place-items:center;padding:0;transition:border-color 80ms ease-out,background-color 80ms ease-out,color 80ms ease-out;display:inline-grid}.notation-move-key:hover:not(:disabled){background:var(--surface-control-hover)}.notation-move-key.is-pressed{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--text-on-accent)}.notation-move-key:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.notation-move-key:disabled{cursor:not-allowed;opacity:.58}.notation-reset{justify-self:start}@media (width<=980px){.notation-explorer-runtime{grid-template-columns:minmax(0,1fr)}.notation-explorer-stage{border-inline-end:0;border-block-end:1px solid var(--border-default)}.notation-explorer-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.notation-reset{grid-column:1/-1}}@media (width<=700px){.notation-explorer{padding-block:var(--space-6)}.notation-explorer-intro,.notation-explorer-start{align-items:stretch;gap:var(--space-4);flex-direction:column}.notation-direction-key,.notation-group-overview,.notation-explorer-controls{grid-template-columns:minmax(0,1fr)}.notation-direction-key>div{align-items:flex-start;gap:var(--space-1);flex-direction:column}.notation-explorer-stage .stage{min-block-size:max(320px,47svh)}.notation-explorer-stage,.notation-explorer-controls{padding:var(--space-4)}}@media (prefers-reduced-motion:reduce){.notation-move-key{transition:none}}:root{--measure-site:1180px;--measure-article:720px;--measure-lead:680px;--size-site-header:68px;--size-hero-art:420px;--surface-article:#fff;--surface-soft:#f0f2f5;--surface-header:#fffffff0;--surface-cube-highlight:#fff;--surface-cube-mid:#e9ebef;--surface-cube-shadow:#b9bec8;--border-accent:#5146e552;--border-cube-tile:#00000038;--shadow-stage:0 32px 80px #0f172a29;--shadow-cube-tile:inset 0 1px 1px #ffffff29}.skip-link{z-index:20;top:var(--space-3);left:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);background:var(--accent-primary);color:var(--text-on-accent);font-weight:var(--weight-emphasis);position:fixed;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header{z-index:10;border-bottom:1px solid var(--border-subtle);background:var(--surface-header);position:relative}.site-header-inner,.site-footer-inner{width:min(calc(100% - (2 * var(--space-8))), var(--measure-site));margin:0 auto}.site-header-inner{min-height:var(--size-site-header);justify-content:space-between;align-items:center;gap:var(--space-6);display:flex}.site-nav,.site-footer nav{align-items:center;gap:var(--space-1);display:flex}.site-header-actions{align-items:center;gap:var(--space-5);display:flex}.keymap-gear{width:var(--size-touch);height:var(--size-touch);border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-secondary);cursor:pointer;place-items:center;padding:0;display:inline-grid}.keymap-gear:hover{background:var(--surface-elevated);color:var(--text-primary)}.keymap-gear svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:18px;height:18px}.keymap-dialog{width:min(calc(100% - (2 * var(--space-4))), 560px);max-height:min(720px, calc(100dvh - (2 * var(--space-6))));border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-panel);color:var(--text-primary);box-shadow:var(--shadow-stage);padding:0;overflow:auto}.keymap-dialog::backdrop{background:#0f172a5c}.keymap-settings{gap:var(--space-4);padding:var(--space-5);display:grid}.keymap-settings-heading{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.keymap-settings-heading h2{font-size:var(--font-heading);margin:0}.keymap-close{width:var(--size-touch);height:var(--size-touch);border-radius:var(--radius-control);color:var(--text-secondary);cursor:pointer;background:0 0;border:0;font-size:1.5rem}.keymap-close:hover{background:var(--surface-elevated);color:var(--text-primary)}.keymap-schemes{gap:var(--space-2);display:grid}.keymap-schemes button{gap:var(--space-1);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-secondary);text-align:left;cursor:pointer;display:grid}.keymap-schemes button strong{color:var(--text-primary);font-size:var(--font-ui)}.keymap-schemes button span{font-size:var(--font-caption);line-height:var(--line-body)}.keymap-schemes button.is-selected{border-color:var(--accent-primary);background:var(--surface-elevated)}.keymap-instruction,.keymap-conflict{font-size:var(--font-ui);margin:0}.keymap-instruction{color:var(--text-muted)}.keymap-conflict{color:var(--status-error)}.keymap-bindings{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(84px,1fr));display:grid}.keymap-binding{min-height:var(--size-touch);justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-key);background:var(--surface-control);cursor:pointer;display:flex}.keymap-binding:hover{border-color:var(--accent-primary)}.keymap-binding kbd{min-width:26px;padding:2px var(--space-1);border:1px solid var(--border-default);border-radius:var(--radius-key);background:var(--surface-elevated);font-family:var(--font-family-mono);font-size:var(--font-caption);text-align:center}.language-switcher{padding-left:var(--space-4);border-left:1px solid var(--border-subtle);position:relative}.language-switcher summary{min-height:var(--size-touch);align-items:center;gap:var(--space-2);padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--text-muted);font-size:var(--font-label);font-weight:var(--weight-ui);cursor:pointer;list-style:none;display:inline-flex}.language-switcher summary::-webkit-details-marker{display:none}.language-switcher summary:after{content:"▾";font-size:.7em}.language-switcher[open] summary:after{transform:rotate(180deg)}.language-switcher summary:hover,.language-switcher[open] summary{background:var(--surface-elevated);color:var(--text-primary)}.language-switcher nav{z-index:30;top:calc(100% + var(--space-2));min-width:170px;padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-article);box-shadow:var(--shadow-stage);display:grid;position:absolute;right:0}.language-switcher a{min-height:var(--size-touch);padding:0 var(--space-3);border-radius:var(--radius-key);color:var(--text-secondary);font-size:var(--font-ui);align-items:center;text-decoration:none;display:flex}.language-switcher a:hover,.language-switcher a[aria-current=page]{background:var(--surface-elevated);color:var(--text-primary)}.site-nav a,.site-footer a{min-height:var(--size-touch);padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--text-secondary);font-size:var(--font-ui);font-weight:var(--weight-ui);align-items:center;text-decoration:none;display:inline-flex}.site-nav a:hover,.site-footer a:hover,.site-nav a[aria-current=page]{background:var(--surface-elevated);color:var(--text-primary)}.site-section{width:min(calc(100% - (2 * var(--space-8))), var(--measure-site));padding:var(--space-10) 0;margin:0 auto}.hero{min-height:calc(100dvh - var(--size-site-header));align-items:center;gap:clamp(var(--space-8), 7vw, 88px);padding-top:clamp(var(--space-10), 8vw, 104px);padding-bottom:clamp(var(--space-10), 8vw, 104px);grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);display:grid}.section-label{margin:0 0 var(--space-4);color:var(--accent-hover);font-family:var(--font-family-mono);font-size:var(--font-label);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-label);text-transform:uppercase}.hero h1,.article-hero h1{max-width:13ch;color:var(--text-primary);font-size:clamp(2.5rem,7vw,5.5rem);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-display);word-break:keep-all;text-wrap:balance;margin:0;line-height:.98}.hero-lead,.article-lead{max-width:var(--measure-lead);margin:var(--space-6) 0 0;color:var(--text-secondary);font-size:clamp(var(--font-body), 2vw, var(--font-subheading));word-break:keep-all;text-wrap:pretty;line-height:1.7}.hero-actions{gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap;display:flex}.site-button{min-height:var(--size-touch);padding:0 var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-primary);font-size:var(--font-ui);font-weight:var(--weight-emphasis);justify-content:center;align-items:center;text-decoration:none;transition:transform .12s ease-out,background-color .12s ease-out;display:inline-flex}.site-button:hover{background:var(--surface-control-hover)}.site-button:active{transform:scale(.98)}.site-button.primary{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--text-on-accent)}.site-button.primary:hover{background:var(--accent-hover)}.cross-art{width:min(100%, var(--size-hero-art));aspect-ratio:1;justify-self:center;gap:var(--space-2);padding:clamp(var(--space-5), 5vw, var(--space-10));border:1px solid var(--border-default);border-radius:var(--radius-card);background:radial-gradient(circle at 42% 24%, var(--surface-cube-highlight) 0, var(--surface-cube-mid) 52%, var(--surface-cube-shadow) 100%);box-shadow:var(--shadow-stage);grid-template-columns:repeat(3,1fr);display:grid;transform:perspective(800px)rotateX(7deg)rotateY(-8deg)}.cross-art span{border:1px solid var(--border-cube-tile);border-radius:var(--radius-key);background:var(--cube-black);box-shadow:var(--shadow-cube-tile)}.cross-art span:nth-child(2){background:var(--cube-back)}.cross-art span:nth-child(4){background:var(--cube-left)}.cross-art span:nth-child(5){background:var(--cube-down)}.cross-art span:nth-child(6){background:var(--cube-right)}.cross-art span:nth-child(8){background:var(--cube-front)}.section-heading{max-width:var(--measure-article);margin-bottom:var(--space-8)}.section-heading h2,.article-body h2{color:var(--text-primary);letter-spacing:var(--tracking-heading);word-break:keep-all;text-wrap:balance;margin:0;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2}.section-heading p{margin:var(--space-3) 0 0;color:var(--text-secondary);line-height:var(--line-body);word-break:keep-all}.learning-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.learning-card,.principle-card{padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-article)}.learning-card h3,.principle-card h3{color:var(--text-primary);font-size:var(--font-heading);margin:0}.learning-card p,.principle-card p{margin:var(--space-3) 0 var(--space-5);color:var(--text-secondary);line-height:var(--line-body);word-break:keep-all}.learning-card a{color:var(--accent-hover);font-weight:var(--weight-ui);text-decoration:none}.article-hero{padding-top:clamp(var(--space-10), 8vw, 96px);padding-bottom:var(--space-10)}.article-hero h1{max-width:17ch;font-size:clamp(2.25rem,6vw,4.5rem)}.article-body{max-width:var(--measure-article);padding-top:0}.article-body section+section{margin-top:var(--space-10)}.article-body h2{font-size:clamp(1.35rem,3vw,1.85rem)}.article-body h3{margin:var(--space-6) 0 var(--space-2);font-size:var(--font-heading)}.article-body p,.article-body li{color:var(--text-secondary);font-size:var(--font-body);word-break:keep-all;text-wrap:pretty;line-height:1.75}.article-body ul,.article-body ol{padding-left:var(--space-6)}.article-body li+li{margin-top:var(--space-3)}.notation-table{border-collapse:collapse;width:100%;margin-top:var(--space-5)}.notation-table th,.notation-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-default);color:var(--text-secondary);text-align:left}.notation-table th{color:var(--text-primary);font-size:var(--font-label)}.notation-table code{color:var(--accent-hover);font-family:var(--font-family-mono)}.callout{margin-top:var(--space-6);padding:var(--space-5);border-left:3px solid var(--accent-primary);background:var(--surface-soft)}.next-step{justify-content:space-between;align-items:center;gap:var(--space-5);margin-top:var(--space-10);padding:var(--space-6);border:1px solid var(--border-accent);border-radius:var(--radius-card);background:var(--surface-article);display:flex}.next-step p{color:var(--text-secondary);word-break:keep-all;margin:0}.ad-slot{align-content:center;gap:var(--space-2);min-height:280px;margin-top:var(--space-10);border-top:1px solid var(--border-subtle);display:grid}.ad-slot>span{color:var(--text-muted);font-size:var(--font-tiny);letter-spacing:var(--tracking-label)}.site-footer{margin-top:var(--space-10);border-top:1px solid var(--border-subtle)}.site-footer-inner{justify-content:space-between;align-items:center;gap:var(--space-6);min-height:104px;display:flex}.site-footer p{color:var(--text-muted);font-size:var(--font-ui);margin:0}.site-footer strong{color:var(--text-secondary)}.trainer-entry{min-height:calc(100dvh - var(--size-site-header) - 144px);max-width:var(--measure-article);align-content:center;justify-items:start;display:grid}.trainer-entry[hidden]{display:none}.trainer-entry h1{max-width:12ch;color:var(--text-primary);letter-spacing:var(--tracking-display);word-break:keep-all;text-wrap:balance;margin:0;font-size:clamp(2.75rem,7vw,5rem);line-height:.98}.trainer-entry>p:not(.trainer-entry-status){max-width:var(--measure-lead);margin:var(--space-6) 0 var(--space-8);color:var(--text-secondary);font-size:var(--font-subheading);word-break:keep-all;line-height:1.7}.trainer-entry-status{min-height:1.5em;margin:var(--space-3) 0 0;color:var(--text-muted);font-size:var(--font-ui)}.trainer-page .app-shell .topbar{display:none}.trainer-page .app-shell{padding-top:var(--space-5)}.learning-hero{padding-top:clamp(var(--space-10), 8vw, 96px);padding-bottom:var(--space-8)}.learning-hero h1{max-width:16ch;color:var(--text-primary);font-size:clamp(2.5rem,7vw,5rem);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-display);word-break:keep-all;text-wrap:balance;margin:0;line-height:.98}.level-jumps{gap:var(--space-2);margin-top:var(--space-8);flex-wrap:wrap;display:flex}.level-jumps a{min-height:var(--size-touch);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-control);color:var(--text-secondary);font-size:var(--font-ui);font-weight:var(--weight-ui);align-items:center;text-decoration:none;display:inline-flex}.level-jumps a:hover{border-color:var(--border-accent);background:var(--surface-elevated);color:var(--text-primary)}.topic-filter{gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.topic-filter[hidden]{display:none}.topic-filter button{min-height:var(--size-touch);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-control);color:var(--text-secondary);font-size:var(--font-ui);font-weight:var(--weight-ui);cursor:pointer}.topic-filter button:hover:not([aria-pressed=true]){border-color:var(--border-accent);background:var(--surface-elevated);color:var(--text-primary)}.topic-filter button[aria-pressed=true]{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--text-on-accent)}.case-stage{aspect-ratio:4/3;width:100%;margin:var(--space-4) 0;border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-stage);position:relative;overflow:hidden}.case-stage>img,.case-stage [data-case-canvas]{position:absolute;inset:0}.case-stage>img{z-index:2;object-fit:cover;opacity:1;pointer-events:none;width:100%;height:100%;transition:opacity .2s ease-out}.case-stage>img[hidden]{display:none}.case-stage [data-case-canvas]{z-index:1}.case-start{z-index:3;width:var(--size-touch);min-width:var(--size-touch);min-height:var(--size-touch);border:1px solid var(--accent-primary);background:var(--accent-primary);color:var(--text-on-accent);font-size:var(--font-subheading);cursor:pointer;border-radius:50%;place-items:center;transition:transform .12s ease-out,background-color .12s ease-out;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.case-start:hover{background:var(--accent-hover)}.case-start:active{transform:translate(-50%,-50%)scale(.96)}.case-start[hidden]{display:none}.case-player-error{z-index:4;right:var(--space-3);bottom:var(--space-3);left:var(--space-3);padding:var(--space-3);border:1px solid var(--border-accent);border-radius:var(--radius-control);background:var(--surface-article);color:var(--text-primary);font-size:var(--font-ui);line-height:var(--line-body);text-align:center;margin:0;position:absolute}.case-card-player,.case-card-player-stage,.case-card-player .stage{width:100%;height:100%;min-height:0}.case-player-controls-row{align-items:center;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-article);display:flex}.case-controls{align-items:center;gap:var(--space-2);margin-top:var(--space-2);display:flex}.case-controls>.case-player-controls-row{flex:1}.case-controls[hidden]{display:none}.case-player-controls-row .button{min-width:var(--size-touch);padding:0 var(--space-3);flex:none}.case-player-controls-row output{min-width:0;color:var(--text-secondary);font-family:var(--font-family-mono);font-size:var(--font-ui);white-space:nowrap;margin-left:auto}.learning-levels,.learning-level+.learning-level{border-top:1px solid var(--border-subtle)}.learning-level-heading{gap:var(--space-5);margin-bottom:var(--space-6);grid-template-columns:minmax(0,1fr) auto;display:grid}.level-progress{padding:var(--space-1) var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-key);color:var(--status-success);white-space:nowrap;align-self:start}.level-progress[hidden]{display:none}.learning-level-heading h2{letter-spacing:var(--tracking-heading);margin:0;font-size:clamp(1.5rem,3vw,2.25rem)}.learning-level-heading p{margin:var(--space-2) 0 0;color:var(--text-secondary);line-height:var(--line-body)}.case-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.case-card{padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-article)}.case-card-topline{align-items:center;gap:var(--space-3);display:flex}.case-card-topline>span:last-child{color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-caption);margin-left:auto}.topic-chip{min-height:1.75rem;padding:0 var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-key);background:var(--surface-soft);color:var(--text-secondary);font-size:var(--font-label);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-label);align-items:center;display:inline-flex}.topic-chip.is-f2l{border-color:var(--border-accent);background:var(--surface-elevated);color:var(--accent-primary)}.case-done-badge{padding:var(--space-1) var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-key);color:var(--status-success);font-size:var(--font-micro);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-label);white-space:nowrap;align-items:center;display:inline-flex}.case-done-badge[hidden]{display:none}.case-card h3{margin:var(--space-5) 0 var(--space-2);font-size:var(--font-heading)}.case-situation-label{color:var(--text-muted);font-size:var(--font-micro);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-label)}.case-card>p{color:var(--text-secondary);line-height:var(--line-body);word-break:keep-all}.case-notation{gap:var(--space-2);margin:var(--space-5) 0;padding:var(--space-4);background:var(--surface-soft);border-radius:var(--radius-control);display:grid}.case-notation>span{gap:var(--space-3);color:var(--text-secondary);font-size:var(--font-caption);grid-template-columns:minmax(88px,auto) minmax(0,1fr);display:grid}.move-tokens{display:inline}.move-token{min-width:26px;height:24px;padding:0 var(--space-1);border:1px solid var(--border-default);border-radius:var(--radius-key);background:var(--surface-control);color:var(--text-primary);font-family:var(--font-family-mono);font-size:var(--font-caption);font-weight:var(--weight-ui);box-shadow:0 1px 0 var(--surface-deep);place-items:center;margin-block:1px;display:inline-grid}.case-card .case-cue{color:var(--text-muted);font-size:var(--font-ui)}.learning-next{padding-top:0}.learning-next>.site-button{margin-bottom:var(--space-4)}.learning-catalog-link{margin-top:var(--space-4)}.catalog-groups{border-top:1px solid var(--border-subtle)}.catalog-group{padding-top:var(--space-8);padding-bottom:var(--space-8)}.catalog-group+.catalog-group{border-top:1px solid var(--border-subtle)}.catalog-group h2{margin:0 0 var(--space-6);letter-spacing:var(--tracking-heading);font-size:clamp(1.5rem,3vw,2.25rem)}.catalog-description{margin:var(--space-5) 0 var(--space-4);color:var(--text-secondary);font-size:var(--font-ui);line-height:var(--line-body)}.catalog-case-card .case-stage{margin-top:0}html[lang=ja] main :where(h1,h2,h3,p,li),html[lang=zh-Hans] main :where(h1,h2,h3,p,li){word-break:auto-phrase;overflow-wrap:normal;line-break:strict}@media (width<=760px){.site-header-inner,.site-footer-inner,.site-section{width:min(calc(100% - (2 * var(--space-4))), var(--measure-site))}.site-header-inner{align-items:flex-start;gap:var(--space-2);padding:var(--space-4) 0 var(--space-2);flex-direction:column}.site-header-actions{align-items:stretch;gap:var(--space-1);flex-direction:column;width:100%}.site-nav{width:100%;overflow-x:auto}.site-nav a{padding:0 var(--space-2);white-space:nowrap;flex:none;justify-content:center}.language-switcher{border-left:0;align-self:flex-end;padding-left:0}.keymap-gear{align-self:flex-end}.hero{gap:var(--space-10);grid-template-columns:1fr;min-height:auto}.hero h1{font-size:clamp(2.75rem,15vw,4.5rem)}.cross-art{max-width:340px}.learning-grid{grid-template-columns:minmax(0,1fr)}.next-step,.site-footer-inner{flex-direction:column;align-items:flex-start}.site-footer-inner{padding:var(--space-6) 0}.site-footer nav{flex-wrap:wrap}.notation-table{font-size:var(--font-ui)}.notation-table th,.notation-table td{padding:var(--space-3) var(--space-2)}.learning-level-heading{grid-template-columns:minmax(0,1fr)}.learning-level-heading .level-progress{justify-self:start}.case-grid{grid-template-columns:minmax(0,1fr)}.case-card{padding:var(--space-5) var(--space-4)}}@media (prefers-reduced-motion:reduce){.site-button,.skip-link,.case-stage>img,.case-start{transition:none}.cross-art{transform:none}}