@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101316;--panel:#181d21;--line:#30383e;--text:#f1f2ee;--muted:#a2abb2;--lime:#d4ed9c;--ink:#172018;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input{ -webkit-tap-highlight-color:transparent}button,select{color:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button{border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:#22292e;min-height:42px;transition:background .16s}button:hover:not(:disabled){background:#303b42}button.primary,.mode-switch .selected{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:600}button.primary:hover{background:#e1f6b5}[hidden]{display:none!important}.muted{color:var(--muted)}.topbar{max-width:1440px;margin:auto;padding:22px 36px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:1.5px;font-weight:600}.brand-mark{font-family:'Space Grotesk',sans-serif;font-size:26px;color:var(--lime)}.back{font-size:13px;color:var(--muted)}main{max-width:1440px;margin:auto;padding:36px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.8px;color:var(--muted)}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,5vw,60px);letter-spacing:-2px;margin:7px 0 4px;font-weight:500}h1 span{color:var(--lime)}.intro p{color:var(--muted);margin:0;font-size:14px}.mode-switch{display:flex;border:1px solid var(--line);padding:4px;border-radius:12px;gap:3px}.mode-switch button{border:0;background:none;padding:9px 22px}.method-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.method-tabs button{background:transparent;min-width:82px}.method-tabs button[aria-pressed=true]{background:#2b3529;border-color:#7e916d;color:var(--lime)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}.studio{min-width:0;background:radial-gradient(ellipse at 50% 43%,#29323b 0%,#1b2228 48%,#161b20 100%);border:1px solid #333d45;border-radius:20px;overflow:hidden;position:relative}.studio-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 20px;position:relative;z-index:1}.studio-top>span{font-size:10px;letter-spacing:1.3px;color:#bcc5cc;font-weight:600}.tools{display:flex;gap:5px}.tools button{font-size:11px;padding:7px 10px;min-height:34px;background:#1a222ac9}.studio #viewport{height:clamp(340px,44vw,550px);position:relative;touch-action:none}.studio canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.studio canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:30px;color:var(--muted);line-height:1.7}.view-presets{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.view-presets button{background:#222c35;font-size:12px;padding:7px 17px;min-height:36px}.studio-hint{text-align:center;color:#a9b6c1;font-size:12px;padding:16px 10px 18px}.studio-hint span{padding:0 5px}.display-options{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;border-top:1px solid #303a42;padding:16px;color:#b8c3ca;font-size:12px}.display-options label{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:22px}input[type=checkbox]{accent-color:var(--lime);width:16px;height:16px}.lesson-panel{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.step-badge{font-size:11px;white-space:nowrap;color:var(--muted)}select{border:1px solid var(--line);border-radius:8px;background:#20272c;padding:10px;max-width:100%}#stage{width:100%;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:500;margin-top:18px;padding:12px 8px}.goal{font-size:13px;line-height:1.8;color:#b7c0c7;min-height:67px;margin:16px 0}.move-display{display:flex;align-items:center;flex-direction:column;padding:20px 0;gap:8px;border-top:1px solid var(--line)}.move-display strong{font-family:'Space Grotesk',sans-serif;font-size:54px;line-height:1.2;color:var(--lime);font-weight:500}.move-display>span:last-child{font-size:12px;color:var(--muted);text-align:center;min-height:30px}.play-controls{display:grid;grid-template-columns:42px 1fr 42px;gap:8px}.play-controls button{padding:10px}.progress-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin-top:13px}.text-button{border:0;background:none;padding:0;min-height:30px;font-size:11px;color:var(--muted)}.seek{width:100%;accent-color:var(--lime);cursor:pointer;margin:8px 0 16px}.algorithm{display:flex;gap:5px;flex-wrap:wrap}.algorithm button{font-family:monospace;padding:5px 8px;font-size:13px;min-height:33px;border-color:transparent;background:#22292e;min-width:29px}.algorithm button.done{color:#b2bcbf;background:#2a3436}.algorithm button.current{color:var(--ink);background:var(--lime)}.playback-settings{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;margin:22px 0 14px}.playback-settings select{font-size:11px;padding:8px}.next-stage{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;padding:13px 15px}.next-stage:hover{border-color:#667b58}.status{font-size:12px;line-height:1.6;color:var(--lime);margin:14px 0 0;min-height:19px}.reference{margin-top:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;align-items:start}.reference details{border-top:1px solid var(--line);padding:17px 3px}.reference summary{font-size:13px;color:#c0c9cf;cursor:pointer}.reference-body{font-size:12px;line-height:1.9;color:var(--muted);padding:10px 0}.reference-body b{color:var(--text)}.reference-body a{text-decoration:underline;text-underline-offset:3px;color:var(--lime)}code{display:block;overflow-wrap:anywhere;color:#d1d9df;line-height:1.8;font-size:12px;margin:12px 0}footer{max-width:1440px;margin:20px auto 0;padding:24px 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.lesson-panel h2{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:500;margin:20px 0 0}.practice-stats{display:flex;gap:40px;padding:18px 0 24px}.practice-stats div{display:flex;flex-direction:column;gap:8px}.practice-stats small{font-size:10px;color:var(--muted);letter-spacing:1.5px}.practice-stats strong{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}.practice-actions{display:flex;gap:8px}.practice-actions button{font-size:12px;flex:1}.turn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0}.turn-grid button{font-family:monospace;min-height:44px}.keyboard-hint{font-size:12px;color:var(--muted);line-height:1.8;margin-top:18px}#practice-panel details{font-size:12px;color:var(--muted);margin-top:16px}#practice-panel summary{cursor:pointer}.studio:fullscreen{border:0;border-radius:0;display:flex;flex-direction:column;height:100dvh}.studio:fullscreen #viewport{flex:1;min-height:0;height:auto}.notice{padding:30px;color:var(--lime)}
@media(min-width:1440px){main{padding-top:44px}}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 315px}.lesson-panel{padding:20px}.studio-top{padding:14px}.tools button{font-size:10px}.reference{grid-template-columns:1fr}}
@media(max-width:780px){.topbar{padding:15px 20px}main{padding:24px 16px}.intro{align-items:flex-end;gap:12px}.eyebrow{font-size:9px;letter-spacing:1.2px}.mode-switch button{font-size:12px;padding:8px 13px}.back{font-size:11px}.brand{font-size:10px;gap:8px}.workspace{grid-template-columns:1fr;gap:14px}.studio #viewport{height:380px}.lesson-panel{padding:20px}.goal{min-height:0}.move-display{padding:15px 0}.reference{gap:0}.reference details{padding:17px 0}.method-tabs{gap:6px}.method-tabs button{font-size:12px;min-width:65px;padding:10px 13px}.intro p{font-size:12px}.studio-top>span{max-width:42%;line-height:1.6}.move-display>span:last-child{min-height:0}.move-display strong{font-size:44px}footer{padding:20px;flex-direction:column}.turn-grid{grid-template-columns:repeat(6,1fr)}.turn-grid button{padding:8px}.reference-body{font-size:13px}}
@media(max-width:400px){.intro{align-items:flex-start;flex-direction:column}.intro .mode-switch{align-self:flex-start}.studio #viewport{height:310px}.studio-top{padding:12px 10px}.tools button{padding:7px}.display-options{gap:12px}.studio-hint{font-size:11px}.turn-grid{grid-template-columns:repeat(3,1fr)}.back{max-width:90px;text-align:right}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}