:root{--bg: #0b0d1c;--surface: #151a33;--line: #2a3057;--ink: #eef1ff;--muted: #9aa3cc;--accent: #7c8cff;--accent-ink: #0b0d1c;color-scheme:dark}@media(prefers-color-scheme:light){:root{--bg: #f5f6fb;--surface: #ffffff;--line: #dfe3f2;--ink: #161a2e;--muted: #5d6488;--accent: #4353d6;--accent-ink: #ffffff;color-scheme:light}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;touch-action:manipulation}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}.back{color:var(--muted);text-decoration:none;font-size:.95rem}.back:hover{color:var(--ink)}.hud{margin:0;font-variant-numeric:tabular-nums;font-weight:700}main{position:relative;flex:1;min-height:0;margin:0 max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right))}canvas{display:block;width:100%;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:16px}.overlay[hidden]{display:none}.card{max-width:22rem;padding:24px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px #00000059}.card h1{margin:0 0 8px;font-size:1.6rem}.card p{margin:0 0 16px;color:var(--muted)}.best{font-weight:700;color:var(--ink)}button{font:inherit;font-weight:700;padding:12px 28px;color:var(--accent-ink);background:var(--accent);border:0;border-radius:999px;cursor:pointer}button:hover{filter:brightness(1.08)}.links{display:flex;justify-content:center;gap:16px;margin:16px 0 0}.link{padding:0;color:var(--muted);background:none;font-weight:400;text-decoration:underline}.link:hover{color:var(--ink)}.hud{display:flex;gap:14px}.hud span:empty{display:none}#lesson-name{color:var(--muted);font-weight:400}canvas{background:#244f27;outline:none}.card.wide{max-width:40rem}.card .eyebrow{margin:0 0 4px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.card .pars{color:var(--ink);font-variant-numeric:tabular-nums;white-space:pre}.card .small{font-size:.85rem}.card .big{margin:0;font-size:2.6rem;line-height:1.2}.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}a.button{display:inline-block;font-weight:700;padding:12px 28px;color:var(--accent-ink);background:var(--accent);border-radius:999px;text-decoration:none}button.secondary{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}.lessons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 18px;text-align:left}button.lesson{display:grid;grid-template-columns:1.6em 1fr auto;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}button.lesson.next{box-shadow:inset 0 0 0 2px var(--accent)}button.lesson .name{text-align:left}button.lesson .n{color:var(--muted);font-variant-numeric:tabular-nums}button.lesson .medal{color:var(--muted);font-weight:400;font-size:.9rem;font-variant-numeric:tabular-nums}.settings{display:grid;gap:10px}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);text-align:left}.segmented{display:inline-flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}.segmented button{padding:6px 14px;color:var(--muted);background:transparent;font-weight:600;font-size:.9rem}.segmented button[aria-checked=true]{color:var(--accent-ink);background:var(--accent)}.keyboard{--u: clamp(36px, 4.2vw, 58px);position:absolute;z-index:2;left:16px;bottom:16px;width:calc(var(--u) * 7);height:calc(var(--u) * var(--rows, 2));pointer-events:none;transition:opacity .6s}.keyboard.right{left:auto;right:16px}.keyboard.gone{opacity:0}.key{position:absolute;left:calc(var(--u) * var(--x));top:calc(var(--u) * var(--y));width:calc(var(--u) * var(--w) - 4px);height:calc(var(--u) - 4px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:7px;background:#f7f3e8;color:#2b2a26;box-shadow:0 3px #b9b19c,0 4px 10px #0000004d;transition:opacity .4s,transform .05s,box-shadow .05s}.key b{font-size:calc(var(--u) * .36);line-height:1}.key small{font-size:calc(var(--u) * .24);font-weight:600;line-height:1.1;margin-top:2px;color:#6a6250;white-space:nowrap}.key.down{transform:translateY(3px);background:#ffe69a;box-shadow:0 0 #b9b19c,0 1px 4px #0000004d}.key.ghost{background:#f7f3e859;box-shadow:none}.key.ghost b{color:#2b2a2699}.key.ghost.wrong{background:#ff8a7a}.key.ghost.wrong b{color:#2b2a26}.hotbar{position:absolute;left:50%;bottom:16px;z-index:2;transform:translate(-50%);display:flex;gap:6px;pointer-events:none;transition:opacity .3s}.hotbar.faded{opacity:.3}.hotbar[hidden]{display:none}.slot{position:relative;display:grid;justify-items:center;width:70px;padding:6px 4px 4px;border-radius:10px;background:#141e14b3;box-shadow:inset 0 0 0 2px #ffffff26;color:#eef1e6;font-size:.7rem}.slot i{font-style:normal;font-size:1.5rem;line-height:1.2}.slot.on{background:#3c5a32e6;box-shadow:inset 0 0 0 2px #ffe69a}.slot kbd{position:absolute;top:-8px;left:-6px;min-width:20px;padding:1px 5px;border-radius:5px;background:#f7f3e8;color:#2b2a26;font:700 .75rem system-ui,sans-serif;box-shadow:0 2px #b9b19c}.list{position:absolute;top:16px;right:16px;min-width:15rem;padding:12px 16px;border-radius:12px;background:#0f190fd9;color:#eef1e6;pointer-events:none}.list[hidden]{display:none}.list h2{margin:0 0 6px;font-size:1rem}.list p{margin:2px 0}.list p.done{opacity:.5;text-decoration:line-through}.hint{position:absolute;top:14px;left:50%;max-width:min(36rem,calc(100% - 32px));margin:0;padding:10px 16px;border-radius:12px;background:#fff8dcf5;color:#2b2a26;font-weight:600;text-align:center;transform:translate(-50%,-8px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}.hint.on{opacity:1;transform:translate(-50%)}.pause-hint{position:absolute;top:12px;left:18px;margin:0;color:#eef1e6;font-size:.85rem;opacity:0;pointer-events:none}@media(max-width:560px){.lessons{grid-template-columns:1fr}}#overlay{background:#08140a80;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}