:root{--bg:#0b1315;--bg-2:#0e1a1d;--spot:#16292c;--panel:#e9f7f409;--panel-2:#e9f7f40f;--line:#ceece51c;--line-2:#ceece52e;--ink:#eaf3f1;--ink-dim:#9fb2ae;--ink-faint:#7b8c89;--chrome-hi:#f2f7f8;--chrome-1:#cfdadd;--chrome-2:#93a1a6;--chrome-3:#5b666b;--chrome-4:#2c3539;--chrome-5:#161d20;--pad-edge:#ffffff29;--amber:#f6b23c;--amber-2:#ffcf74;--amber-deep:#d9861a;--teal:#2ad4c4;--teal-2:#7ff0e4;--good:#57d98a;--bad:#f5726f;--shadow:0 24px 60px -24px #000000b3}@media (prefers-color-scheme:light){:root{--bg:#efe7d8;--bg-2:#f6f0e4;--spot:#f8e6c9;--panel:#1c282a0b;--panel-2:#1c282a14;--line:#28373724;--line-2:#2837373d;--ink:#1c2b2c;--ink-dim:#45524d;--ink-faint:#52605d;--chrome-hi:#fff;--chrome-1:#dfe7e9;--chrome-2:#a9b6ba;--chrome-3:#6f7c81;--chrome-4:#3c474b;--chrome-5:#232b2e;--pad-edge:#ffffff8c;--amber:#d98410;--amber-2:#f0a52e;--amber-deep:#b96a06;--teal:#0a8f83;--teal-2:#12b4a5;--shadow:0 24px 55px -26px #3c2d0a73;--accent-text:#84510a;--guide-text:#076860;--good:#1f6a42;--bad:#9b413a}}:root[data-theme=dark]{--bg:#0b1315;--bg-2:#0e1a1d;--spot:#16292c;--panel:#e9f7f409;--panel-2:#e9f7f40f;--line:#ceece51c;--line-2:#ceece52e;--ink:#eaf3f1;--ink-dim:#9fb2ae;--ink-faint:#7b8c89;--chrome-hi:#f2f7f8;--chrome-1:#cfdadd;--chrome-2:#93a1a6;--chrome-3:#5b666b;--chrome-4:#2c3539;--chrome-5:#161d20;--pad-edge:#ffffff29;--amber:#f6b23c;--amber-2:#ffcf74;--amber-deep:#d9861a;--teal:#2ad4c4;--teal-2:#7ff0e4;--good:#57d98a;--bad:#f5726f;--shadow:0 24px 60px -24px #000000b3;--accent-text:var(--amber);--guide-text:var(--teal)}:root[data-theme=light]{--bg:#efe7d8;--bg-2:#f6f0e4;--spot:#f8e6c9;--panel:#1c282a0b;--panel-2:#1c282a14;--line:#28373724;--line-2:#2837373d;--ink:#1c2b2c;--ink-dim:#45524d;--ink-faint:#52605d;--chrome-hi:#fff;--chrome-1:#dfe7e9;--chrome-2:#a9b6ba;--chrome-3:#6f7c81;--chrome-4:#3c474b;--chrome-5:#232b2e;--pad-edge:#ffffff8c;--amber:#d98410;--amber-2:#f0a52e;--amber-deep:#b96a06;--teal:#0a8f83;--teal-2:#12b4a5;--shadow:0 24px 55px -26px #3c2d0a73;--accent-text:#84510a;--guide-text:#076860;--good:#1f6a42;--bad:#9b413a}:root{--accent:var(--amber);--accent-2:var(--amber-2);--accent-ink:#241603;--guide:var(--teal);--guide-2:var(--teal-2);--guide-ink:#04211e;--page-bg:radial-gradient(120% 90% at 50% -10%, var(--spot), transparent 55%), radial-gradient(100% 120% at 50% 120%, var(--bg-2), transparent 60%), var(--bg)}h1.title{background:linear-gradient(178deg,var(--chrome-hi) 4%,var(--chrome-1) 26%,var(--chrome-3) 52%,var(--chrome-1) 74%,var(--chrome-hi) 100%);color:#0000;filter:drop-shadow(0 1px #ffffff40)drop-shadow(0 2px 3px #00000080);-webkit-background-clip:text;background-clip:text}.title .accent{background:linear-gradient(178deg,var(--amber-2),var(--amber) 55%,var(--amber-deep));color:#0000;-webkit-background-clip:text;background-clip:text}.theme-toggle{font-family:var(--font-ui);min-height:44px;color:var(--ink-dim);background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:0 16px;font-size:13px;font-weight:600;transition:border-color .2s,color .2s,background .2s;display:inline-flex}.theme-toggle:hover{color:var(--ink);border-color:var(--line-2)}.theme-toggle:focus-visible{outline:2px solid var(--guide);outline-offset:2px}.theme-toggle svg{width:16px;height:16px}.stage{background:radial-gradient(80% 70% at 50% 30%, color-mix(in srgb,var(--amber) 12%, transparent), transparent 60%), var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:clamp(14px,3vw,30px);position:relative;overflow:hidden}.stage:after{content:"";background:radial-gradient(60% 100% at 50% 100%, color-mix(in srgb,var(--amber) 10%, transparent), transparent 70%);pointer-events:none;height:38%;position:absolute;bottom:0;left:10%;right:10%}.pan-wrap{aspect-ratio:1;width:min(100%,600px);margin:0 auto;position:relative}.pan{background:radial-gradient(circle at 50% 34%, var(--chrome-1), var(--chrome-3) 46%, var(--chrome-4) 74%, var(--chrome-5) 100%);border-radius:50%;transition:box-shadow .18s;position:absolute;inset:0;box-shadow:inset 0 3px 6px #ffffff47,inset 0 -18px 40px #0009,inset 0 0 0 2px #00000059,0 30px 60px -18px #000000b3}.pan:before{content:"";background:conic-gradient(from 210deg, var(--chrome-4), var(--chrome-1) 12%, var(--chrome-4) 27%, var(--chrome-2) 44%, var(--chrome-4) 62%, var(--chrome-1) 80%, var(--chrome-4));opacity:.7;pointer-events:none;border-radius:50%;position:absolute;inset:2.5%;-webkit-mask:radial-gradient(circle,#0000 0 90%,#000 90.5%);mask:radial-gradient(circle,#0000 0 90%,#000 90.5%)}.pan:after{content:"";pointer-events:none;mix-blend-mode:screen;background:radial-gradient(46% 30% at 34% 20%,#ffffff6b,#0000 70%),radial-gradient(30% 18% at 74% 76%,#ffffff1f,#0000 70%);border-radius:50%;position:absolute;inset:0}.pan.lit{box-shadow:inset 0 3px 6px #ffffff47, inset 0 -18px 40px #0009, inset 0 0 44px color-mix(in srgb,var(--amber) 42%, transparent), 0 30px 60px -18px #000000b3}.pads{position:absolute;inset:0}.pad{cursor:pointer;color:var(--ink);background:radial-gradient(circle at 42% 30%, var(--chrome-hi), var(--chrome-1) 30%, var(--chrome-3) 72%, var(--chrome-4) 100%);box-shadow:inset 0 2px 3px #ffffff80, inset 0 -5px 10px #00000073, inset 0 0 0 1px var(--pad-edge), 0 2px 4px #00000059;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:none;border-radius:50%;place-items:center;padding:0;transition:transform 70ms,box-shadow .12s,filter .12s;display:grid;position:absolute;overflow:hidden;transform:translate(-50%,-50%)}.pad:before{content:"";border-radius:inherit;pointer-events:none;opacity:.5;background:radial-gradient(circle at 30% 30%,#ffffff29 0 12%,#0000 13%),radial-gradient(circle at 68% 40%,#00000024 0 10%,#0000 11%),radial-gradient(circle at 50% 72%,#0000001f 0 12%,#0000 13%),radial-gradient(circle at 40% 58%,#ffffff1a 0 8%,#0000 9%);position:absolute;inset:0}.pad .lbl{z-index:2;font-family:var(--font-mono);letter-spacing:.02em;color:#20272a;text-shadow:0 1px #ffffff8c;opacity:0;user-select:none;pointer-events:none;text-align:center;font-size:clamp(9px,1.9vw,13px);font-weight:600;line-height:1.05;transition:opacity .18s;position:relative}.pad .key{z-index:2;font-family:var(--font-mono);color:#3a4448;opacity:0;text-transform:uppercase;letter-spacing:.05em;pointer-events:none;margin-top:1px;font-size:10px;transition:opacity .18s;position:relative}.show-names .pad .lbl{opacity:.92}.show-keys .pad .key{opacity:.7}.pad:hover{filter:brightness(1.08)}.pad:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.pad.struck{filter:brightness(1.22)saturate(1.1);box-shadow:inset 0 2px 3px #ffffff80, inset 0 -4px 9px #0006, inset 0 0 0 1px var(--amber), 0 0 22px color-mix(in srgb,var(--amber) 75%, transparent), 0 0 44px color-mix(in srgb,var(--amber) 40%, transparent);transform:translate(-50%,-50%)scale(.955)}.pad.target{box-shadow:inset 0 2px 3px #ffffff80, inset 0 -5px 10px #0006, inset 0 0 0 2px var(--teal), 0 0 0 2px color-mix(in srgb,var(--teal) 55%, transparent), 0 0 26px color-mix(in srgb,var(--teal) 55%, transparent);animation:1.15s ease-in-out infinite targetPulse}.pad.target .lbl{opacity:.95}.pad.wrong{animation:.32s shake}@keyframes targetPulse{0%,to{box-shadow:inset 0 2px 3px #ffffff80,inset 0 -5px 10px #0006,inset 0 0 0 2px var(--teal),0 0 0 2px color-mix(in srgb,var(--teal) 30%,transparent),0 0 16px color-mix(in srgb,var(--teal) 40%,transparent)}50%{box-shadow:inset 0 2px 3px #ffffff80,inset 0 -5px 10px #0006,inset 0 0 0 2px var(--teal-2),0 0 0 4px color-mix(in srgb,var(--teal) 45%,transparent),0 0 34px color-mix(in srgb,var(--teal) 70%,transparent)}}@keyframes shake{0%,to{margin-left:0}20%{margin-left:-5px}40%{margin-left:5px}60%{margin-left:-4px}80%{margin-left:3px}}.ripple{pointer-events:none;z-index:1;border:2px solid color-mix(in srgb,var(--amber) 80%, transparent);border-radius:50%;width:8%;height:8%;animation:.55s ease-out forwards ripple;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.4)}@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%)scale(3.4)}}