:root{--page: #000000;--hair: #1f1f1f;--panel-line: #242424;--panel-line-active: #555555;--ink: #e8e4dc;--ink-emphasis: #ffffff;--ink-dim: #8a8a8a;--ink-label: #666666;--ink-faint: #555555;--canvas: #ffffff;--canvas-grid: #e6e6e6;--ref-bg: #141414;--ref-svg-bg: #1b1b1b;--ref-grid: #242424;--ref-pixel: #909090;--ref-opacity: .75;--spec-0: #ff2d55;--spec-1: #ff9500;--spec-2: #ffe000;--spec-3: #34c759;--spec-4: #00c7be;--spec-5: #0a84ff;--spec-6: #bf5af2;--wrong: #ff2d55;--highlight: #ffe000;--pass: #34c759;--warn: #ffe000;--empty: #333333;--font-display: "Press Start 2P", ui-monospace, monospace;--font-body: "Pixelify Sans", ui-sans-serif, sans-serif;--btn-shadow: #4a4a4a;--btn-edge: 4px}*{box-sizing:border-box}html,body{margin:0}body{background:var(--page);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;padding:20px 16px 64px;min-height:100vh}.wrap{max-width:980px;margin:0 auto}h1,h2,h3,h4{font-weight:500;margin:0}#screen-frame{position:relative;overflow:hidden}#flash{position:absolute;inset:0;pointer-events:none;background:var(--ink);opacity:0;z-index:60}[data-icon]{display:inline-flex;vertical-align:middle}[data-icon] svg{width:18px;height:18px;display:block}.iconbtn,.tool{background:var(--ink-emphasis);border:0;border-radius:0;width:38px;height:38px;cursor:pointer;color:var(--page);display:grid;place-items:center;box-shadow:var(--btn-edge) var(--btn-edge) 0 0 var(--btn-shadow)}.iconbtn:active,.tool:active{transform:translate(var(--btn-edge),var(--btn-edge));box-shadow:none}.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}.logo{font-family:var(--font-display);font-size:16px}.logo .dot{color:var(--ink-faint)}.hud{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}.stat{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-dim)}.stat .stat-val{font-family:var(--font-display);font-size:14px;color:var(--ink)}#stat-level i,#stat-streak i{color:var(--ink-dim)}.xpbar{display:flex;gap:2px;align-items:center}.xpbar i{width:7px;height:14px;border-radius:0;background:var(--empty);transition:background .3s}.xpbar i.on{background:var(--ink)}.tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--page);border:2px solid var(--hair);border-radius:0;padding:4px;width:fit-content}.tabs button{font-family:var(--font-display);font-size:14px;padding:9px 14px;border:none;border-radius:0;background:transparent;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:7px}.tabs button[aria-current=true]{background:var(--ink);color:var(--page)}.tabs button[aria-current=true] i{color:var(--page)}.view{display:none}.view.is-active{display:block}:root{--grid-line: var(--canvas-grid, #e6e6e6)}.pr-cta{display:flex;align-items:baseline;gap:12px;margin:4px 0 10px}.pr-cta-mark{font-family:var(--font-display);font-size:14px;color:var(--ink-faint);flex-shrink:0}.pr-cta-text{font-family:var(--font-display);font-size:clamp(27px,4.5vw,34px);line-height:1.35;color:var(--ink-emphasis);margin:0}.pr-objective{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-family:var(--font-body);font-size:15px;color:var(--ink-dim)}.pr-objective[hidden]{display:none}.pr-objective svg{width:14px;height:14px}.pr-obj-key{color:var(--ink-label)}.pr-studio{position:relative;display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:16px;align-items:start}.pr-studio.solo{grid-template-columns:1fr}@media(max-width:720px){.pr-studio{grid-template-columns:1fr}}.pr-sidebar{display:flex;flex-direction:column;gap:12px;min-width:0}.pr-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-family:var(--font-body);font-size:14px;min-height:32px}.pr-head-left{display:inline-flex;align-items:center;gap:8px}.pr-ref{background:var(--ref-bg);border:2px solid var(--panel-line);border-radius:0;display:flex;flex-direction:column}.pr-ref[hidden]{display:none}.pr-ref.is-rest{opacity:var(--ref-opacity)}.pr-ref.is-playing{opacity:1}.pr-ref .pr-panel-head{color:var(--ink-faint)}.pr-ref-head-right{display:inline-flex;align-items:center;gap:10px}.pr-lookonly{display:inline-flex;align-items:center;gap:6px;color:var(--ink-faint)}.pr-lookonly[hidden]{display:none}.pr-lookonly svg{width:14px;height:14px}.pr-ref-collapse{background:transparent;border:0;border-radius:0;color:var(--ink-faint);cursor:pointer;display:inline-flex;padding:0}.pr-ref-collapse svg{width:14px;height:14px}.pr-ref-body{padding:10px;display:grid;place-items:center}.pr-ref.collapsed .pr-ref-body{display:none}.pr-ref-svg{width:100%;height:auto;display:block;image-rendering:pixelated}.pr-replay{font-size:14px;padding:4px 8px;gap:4px}.pr-replay[hidden]{display:none}.pr-canvas{background:var(--page);border:2px solid var(--panel-line-active);border-radius:0;display:flex;flex-direction:column}.pr-canvas .pr-panel-head{color:var(--ink)}.pr-canvas-toggles{display:inline-flex;gap:6px}.pr-canvas-body{padding:10px;display:grid;place-items:center;background:var(--page)}.pr-stage-wrap{position:relative;line-height:0;display:inline-block;max-width:100%}canvas.board{touch-action:none;-webkit-touch-callout:none;user-select:none;cursor:crosshair;image-rendering:pixelated;background:var(--canvas);max-width:100%;height:auto;display:block;border-radius:0}canvas.trace,canvas.highlight{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}canvas.trace{opacity:.35}.pr-canvas-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px}.pr-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.pr-sep{width:2px;height:22px;background:var(--panel-line);margin:0 2px;align-self:center}.pr-preview{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-faint);font-family:var(--font-body)}.pr-preview canvas{image-rendering:pixelated;width:40px;height:40px;border:2px solid var(--panel-line);background:var(--canvas)}.pr-tool,.pr-toggle{background:transparent;border:2px solid var(--panel-line);border-radius:0;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 var(--page)}.pr-tool{width:36px;height:36px}.pr-toggle{height:34px;padding:0 10px;gap:6px;font-family:var(--font-body);font-size:14px}.pr-tool:active,.pr-toggle:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--page)}.pr-tool[aria-pressed=true],.pr-toggle[aria-pressed=true]{background:var(--ink);color:var(--page);border-color:var(--ink)}.pr-tool[hidden],.pr-toggle[hidden]{display:none}.pr-tool svg,.pr-toggle svg{width:16px;height:16px}.pr-swatch-row{margin-top:14px}.pr-swatches{display:grid;grid-template-columns:repeat(9,28px);gap:4px;width:fit-content}.pr-sw{width:28px;height:28px;border:2px solid transparent;border-radius:0;cursor:pointer;padding:0;box-shadow:2px 2px 0 var(--page)}.pr-sw[aria-pressed=true]{border-color:var(--ink)}.pr-etq{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.pr-etq[hidden]{display:none}.pr-etile{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--panel-line);border-radius:0;font-family:var(--font-body);font-size:14px;color:var(--ink-dim)}.pr-etile-mark{color:var(--ink);display:inline-flex}.pr-etile-mark svg{width:14px;height:14px}.pr-diag{width:26px;height:26px;background:var(--ref-svg-bg);display:block}.pr-diag rect{fill:var(--ink)}.pr-etile-label{color:var(--ink-dim)}.pr-rainbow{display:flex;gap:2px;height:8px;margin-top:16px}.pr-seg{flex:1;height:100%;transform:scaleY(0);transform-origin:bottom}.pr-stars{display:flex;gap:8px}.pr-star{display:inline-flex}.pr-star svg{width:22px;height:22px}.pr-stamp{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5;font-family:var(--font-display)}.pr-grade{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid var(--hair);margin-top:16px;padding-top:14px}.pr-grade-actions{display:flex;align-items:center;gap:10px}.pr-save{background:transparent;color:var(--ink-dim);border:2px solid var(--panel-line);border-radius:0;font-family:var(--font-body);font-size:14px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:2px 2px 0 var(--page)}.pr-save:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--page)}.pr-save svg{width:14px;height:14px}.pr-status{font-family:var(--font-body);font-size:14px;color:var(--ink-label);margin-right:auto}.pr-status[hidden]{display:none}.pr-check{background:var(--ink-emphasis);color:var(--page);border:0;border-radius:0;box-shadow:4px 4px #4a4a4a;font-family:var(--font-display);font-size:14px;line-height:1;padding:14px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.pr-check:active{transform:translate(4px,4px);box-shadow:0 0 #4a4a4a}.pr-check svg{width:14px;height:14px}.pr-check-label{letter-spacing:1px}.pr-lesson-replay{display:inline-flex;align-items:center;gap:6px;background:transparent;border:2px solid var(--panel-line);border-radius:0;color:var(--ink-dim);cursor:pointer;font-family:var(--font-body);font-size:15px;padding:8px 12px}.pr-lesson-replay:hover{border-color:var(--panel-line-active);color:var(--ink)}.pr-lesson-replay svg{width:14px;height:14px}.pr-redo{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#0000009e}.pr-redo[hidden]{display:none}.pr-redo-card{background:var(--page);border:2px solid var(--panel-line-active);border-radius:0;padding:22px 24px;max-width:420px;margin:0 16px;text-align:center}.pr-redo-title{font-family:var(--font-body);font-size:18px;color:var(--ink);margin:0 0 18px;line-height:1.4}.pr-redo-actions{display:flex;align-items:center;justify-content:center;gap:14px}.pr-redo-next{background:var(--spec-2);color:var(--page)}.pr-redo-next:active{transform:translate(4px,4px);box-shadow:0 0 #4a4a4a}.pr-nudge{margin-top:14px;border:2px solid var(--panel-line);border-radius:0;padding:12px 14px;background:var(--ref-bg)}.pr-nudge[hidden]{display:none}.pr-nudge-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.pr-nudge-list li{color:var(--ink-dim);font-size:14px;line-height:1.5;padding-left:12px;border-left:2px solid var(--panel-line)}.pr-nudge-actions{margin-top:12px}#view-practice :focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:0}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.pcard{background:var(--page);border:2px solid var(--panel-line);border-radius:0;padding:14px;cursor:pointer;text-align:left;font-family:var(--font-body);color:var(--ink)}.pcard:hover{border-color:var(--panel-line-active)}.pcard.locked{opacity:.5;cursor:not-allowed}.pcard .n{font-family:var(--font-display);font-size:14px;color:var(--ink-faint);display:flex;align-items:center;gap:6px}.pcard h3{margin:3px 0 6px;font-size:16px}.pcard .st{display:flex;gap:3px;color:var(--ink);margin-bottom:4px}.pcard .st i.off{color:var(--empty)}.pcard .best{font-size:14px;color:var(--ink-dim)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.gitem{background:var(--page);border:2px solid var(--panel-line);border-radius:0;padding:10px;text-align:center}.gitem canvas{image-rendering:pixelated;border-radius:0;width:100%;border:1px solid var(--panel-line);background:var(--canvas)}.gitem .gm{font-size:14px;color:var(--ink-dim);margin-top:6px;display:flex;justify-content:space-between;align-items:center}.gitem .sc{font-family:var(--font-display);font-size:14px;color:var(--ink)}.gitem .del{background:none;border:none;color:var(--ink-dim);cursor:pointer;display:grid;place-items:center}.gitem .del:hover{color:var(--ink)}.empty{color:var(--ink-dim);font-size:14px;padding:30px 0;text-align:center}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%) translateY(20px);background:var(--page);border:2px solid var(--panel-line);color:var(--ink);padding:11px 18px;border-radius:0;font-family:var(--font-display);font-size:14px;opacity:0;transition:.3s;z-index:50;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.foot{margin-top:24px;font-size:14px;color:var(--ink-faint);text-align:center}.foot button{background:none;border:none;color:var(--ink-faint);text-decoration:underline;cursor:pointer;font-size:14px}.foot button:hover{color:var(--ink)}.sr-live,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0}.conf{position:fixed;width:9px;height:9px;pointer-events:none;z-index:40;border-radius:0}@media(prefers-reduced-motion:reduce){.conf,.mx-shake,.mx-flash,.mx-stamp-pop,.mx-star-pop,.mx-bar-pop,.mx-confetti,.mx-unlock-pop,.mx-tool-drop{animation:none!important;transition:none!important}}:root{--mx-spring: cubic-bezier(.34, 1.56, .64, 1)}.mx-shake{animation:mx-shake .28s steps(5,end) both}@keyframes mx-shake{0%{transform:translate(0)}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-4px)}60%{transform:translate(-3px,5px)}80%{transform:translate(5px,-2px)}to{transform:translate(0)}}.mx-flash{background:#fff;pointer-events:none;animation:mx-flash .22s steps(3,end) both}@keyframes mx-flash{0%{opacity:.85;visibility:visible}to{opacity:0;visibility:visible}}.mx-stamp{display:inline-block;font-family:"Press Start 2P",ui-monospace,monospace;font-size:27px;letter-spacing:2px}.mx-stamp-small{font-size:16px;letter-spacing:1px}.mx-stamp-tool{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;background:var(--page);border:3px solid currentColor;text-align:center}.mx-tool-kicker{font-family:"Press Start 2P",ui-monospace,monospace;font-size:14px;letter-spacing:2px;color:var(--ink-emphasis)}.mx-tool-name{font-family:"Press Start 2P",ui-monospace,monospace;font-size:22px;letter-spacing:2px}.mx-stamp-pop{animation:mx-stamp-pop .42s var(--mx-spring) both}@keyframes mx-stamp-pop{0%{transform:scale(.2)}to{transform:scale(1)}}.mx-star-pop{animation:mx-star-pop .26s var(--mx-spring) both}@keyframes mx-star-pop{0%{transform:scale(1)}45%{transform:scale(1.7)}to{transform:scale(1)}}.mx-bar-pop{visibility:visible;transform-origin:50% 100%;animation:mx-bar-pop .24s var(--mx-spring) both}@keyframes mx-bar-pop{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.mx-confetti{position:fixed;border-radius:0;pointer-events:none;z-index:9999;animation:mx-confetti-fly .7s steps(8,end) forwards}@keyframes mx-confetti-fly{0%{transform:translate(0);opacity:1}to{transform:translate(var(--mx-dx, 0px),var(--mx-dy, -80px));opacity:0}}.mx-unlock-pop{animation:mx-unlock-pop .38s var(--mx-spring) both}@keyframes mx-unlock-pop{0%{transform:scale(.4);box-shadow:0 0 0 3px var(--mx-unlock-color, var(--spec-2))}60%{transform:scale(1.15);box-shadow:0 0 0 3px var(--mx-unlock-color, var(--spec-2))}to{transform:scale(1);box-shadow:0 0 0 0 transparent}}.mx-tool-drop{position:relative;z-index:3;animation:mx-tool-drop .52s var(--mx-spring) both}@keyframes mx-tool-drop{0%{transform:scale(.2);box-shadow:0 0 0 4px var(--mx-unlock-color, var(--spec-2))}55%{transform:scale(1.4);box-shadow:0 0 0 4px var(--mx-unlock-color, var(--spec-2))}to{transform:scale(1);box-shadow:0 0 0 0 transparent}}:root{--lx-spring: cubic-bezier(.34, 1.56, .64, 1)}.lesson{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:32px}.lesson-svg{display:block;width:min(42vw,380px);max-height:min(56vh,380px);height:auto;flex-shrink:0}.lesson--compact{flex-direction:column;gap:8px}.lesson--compact .lesson-svg{width:min(100%,220px);max-height:none}.lesson-cell{visibility:hidden;transform-box:fill-box;transform-origin:50% 50%}.lesson-cell.is-placed{visibility:visible;animation:lx-place .17s var(--lx-spring) both}@keyframes lx-place{0%{transform:scale(1.6)}to{transform:scale(1)}}.lesson-err{visibility:hidden;transform-box:fill-box;transform-origin:50% 50%}.lesson-err.is-error-in{visibility:visible;stroke:var(--wrong);stroke-width:2;animation:lx-error-in .22s var(--lx-spring) both}@keyframes lx-error-in{0%{transform:scale(1.9)}to{transform:scale(1)}}.lesson-err.is-erasing{animation:lx-erase .26s steps(4,end) both}@keyframes lx-erase{0%{transform:scale(1)}to{transform:scale(0)}}.lesson-err.is-gone{visibility:hidden}.lesson-captions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0;font-family:var(--font-body);font-size:18px;line-height:1.35;color:var(--ink);text-align:left}.lesson--compact .lesson-captions{flex:initial;align-items:center;text-align:center;font-size:16px;gap:4px}.lesson-caption{margin:0;visibility:hidden}.lesson-caption.is-in{visibility:visible;animation:lx-caption-pop .26s var(--lx-spring) both}@keyframes lx-caption-pop{0%{transform:translateY(7px) scale(.75,.55)}60%{transform:translateY(-2px) scale(1.04,1.1)}to{transform:translateY(0) scale(1)}}.lesson-vocab{font-weight:700;color:var(--highlight)}.lesson-wrong{font-weight:700;color:var(--wrong)}.lesson--static .lesson-cell.is-placed,.lesson--static .lesson-caption.is-in{animation:none}