: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:28px;--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;--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)}.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{width:var(--size-touch);height:var(--size-touch);border:1px solid var(--border-subtle);border-radius:var(--radius-key);background:var(--surface-control);color:var(--text-secondary);font-family:var(--font-family-mono);font-size:var(--font-caption);cursor:pointer}.move-row button:hover{border-color:var(--border-default);background:var(--surface-elevated);color:var(--text-primary)}.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-keycap) 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}}: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}.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}.eyebrow{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(.eyebrow,.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)}.learning-player-shell{scroll-margin-top:var(--space-4);padding-top:0;padding-bottom:var(--space-8)}.learning-player-shell[hidden]{display:none}.learning-player-loading{min-height:var(--space-6);color:var(--text-muted);font-size:var(--font-ui)}.case-player{min-height:var(--size-learning-stage);border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-article);grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);display:grid;overflow:clip}.case-player-stage{min-width:0;min-height:var(--size-learning-stage)}.case-player-stage .stage{min-height:var(--size-learning-stage)}.case-player-controls{padding:var(--space-8);border-left:1px solid var(--border-default)}.case-player-controls>p:not(.eyebrow){color:var(--text-secondary);font-size:var(--font-ui);line-height:var(--line-body)}.case-player-heading{justify-content:space-between;align-items:flex-start;gap:var(--space-4);display:flex}.case-player-heading h2{margin:var(--space-3) 0 0;font-size:var(--font-heading);line-height:1.3}.case-player-heading>strong{color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-ui);white-space:nowrap}.topic-chip{min-height:var(--space-6);padding:0 var(--space-2);border:1px solid var(--border-accent);border-radius:var(--radius-key);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);align-items:center;display:inline-flex}.topic-chip.is-f2l{border-color:var(--border-default);background:var(--surface-elevated);color:var(--text-secondary)}.case-player-meta{gap:var(--space-3);margin:var(--space-6) 0;display:grid}.case-player-meta>div{gap:var(--space-3);grid-template-columns:minmax(88px,auto) 1fr;align-items:baseline;display:grid}.case-player-meta dt{color:var(--text-muted);font-size:var(--font-caption)}.case-player-meta dd{color:var(--text-primary);font-size:var(--font-ui);margin:0}.case-player-meta code{font-family:var(--font-family-mono);font-weight:var(--weight-ui)}.case-player-actions{gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.case-player-timeline{gap:var(--space-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.case-player-timeline button{min-width:var(--space-8);min-height:var(--space-6);padding:0 var(--space-2);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-ui);font-weight:var(--weight-ui);cursor:pointer;transition:background-color .12s ease-out,border-color .12s ease-out}.case-player-timeline button:hover:not(:disabled){border-color:var(--border-accent);background:var(--surface-elevated)}.case-player-timeline button:disabled{cursor:default}.case-player-timeline button.is-done{border-color:var(--border-subtle);background:var(--surface-elevated);color:var(--text-muted)}.case-player-timeline button.is-current{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--text-on-accent)}.case-player-casenav{gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle);grid-template-columns:repeat(2,1fr);display:grid}.case-player-hint{margin:var(--space-4) 0 0;color:var(--text-muted);font-size:var(--font-caption)}.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:auto minmax(0,1fr) auto;display:grid}.learning-level-heading>span{color:var(--text-muted);font-family:var(--font-family-mono);font-size:var(--font-label);letter-spacing:var(--tracking-label)}.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[data-selected=true]{border-color:var(--accent-primary);background:var(--surface-panel)}.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}.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) 1fr;display:grid}.case-notation code{color:var(--text-primary);font-family:var(--font-family-mono);font-size:var(--font-ui);overflow-wrap:anywhere}.case-card .case-cue{color:var(--text-muted);font-size:var(--font-ui)}.case-card .site-button[aria-pressed=true]{border-color:var(--accent-primary);background:var(--surface-elevated);color:var(--accent-hover)}.learning-next{padding-top:0}.learning-next>.site-button{margin-bottom:var(--space-4)}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}.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)}.case-player{grid-template-columns:minmax(0,1fr)}.case-player-stage,.case-player-stage .stage{min-height:var(--size-stage-mobile);height:47svh}.case-player-controls{padding:var(--space-5) var(--space-4);border-left:0;border-top:1px solid var(--border-default)}.case-player-hint{display:none}.learning-level-heading{grid-template-columns:auto minmax(0,1fr)}.learning-level-heading .level-progress{grid-column:2;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{transition:none}.cross-art{transform:none}}