:root{--bg:#0b0b0f;--fg:#f3f3f6;--accent:#6fd3ff;--gutter-w:2.75rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{color:var(--fg);background:var(--bg);margin:0;font-family:system-ui,sans-serif;overflow:hidden}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}header{z-index:2;position:absolute;inset:.5rem auto auto .5rem}header a{color:var(--fg);opacity:.6;font-size:.85rem;text-decoration:none}header a:focus-visible{opacity:1;outline:2px solid var(--accent)}main{grid-template-rows:auto 2fr 1fr;gap:.5rem;height:100dvh;padding:.5rem;display:grid}.tempo{align-items:center;height:3.75rem;padding:0 .5rem;display:flex;position:relative}.tempo input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:100%}.tempo input[type=range]::-webkit-slider-runnable-track{background:#ffffff26;border-radius:.25rem;height:.5rem}.tempo input[type=range]::-moz-range-track{background:#ffffff26;border-radius:.25rem;height:.5rem}.tempo input[type=range]::-moz-range-progress{background:0 0}.tempo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);opacity:.35;border-radius:50%;width:1.25rem;height:1.25rem;margin-top:-.375rem;transition:opacity .12s ease-out}.tempo input[type=range]::-moz-range-thumb{background:var(--accent);opacity:.35;border:none;border-radius:50%;width:1.25rem;height:1.25rem;transition:opacity .12s ease-out}.tempo input[type=range].tempo-slider--lit::-webkit-slider-thumb{opacity:1}.tempo input[type=range].tempo-slider--lit::-moz-range-thumb{opacity:1}@media (prefers-reduced-motion:reduce){.tempo input[type=range]::-webkit-slider-thumb{transition:opacity .4s ease-out}.tempo input[type=range]::-moz-range-thumb{transition:opacity .4s ease-out}}.piano-frame{grid-template-columns:1fr var(--gutter-w);gap:.35rem;min-height:0;display:grid;position:relative}.hint{top:50%;left:0;right:var(--gutter-w);text-align:center;color:#000000a6;text-shadow:0 1px 3px #fff6;pointer-events:none;margin:0;padding:0 1rem;font-size:1rem;transition:opacity .3s ease-out;position:absolute;transform:translateY(-50%)}.hint--gone{opacity:0}.piano{touch-action:none;cursor:pointer;background:linear-gradient(90deg,#ee2b2b,#eede2b,#22c33d,#306ee8,#bf4de6) 0 0/130% 100%;border-radius:.5rem;animation:9s ease-in-out infinite piano-breathe;position:relative;overflow:hidden}@keyframes piano-breathe{0%,to{background-position:0 0}50%{background-position:100% 0}}@media (prefers-reduced-motion:reduce){.piano{animation:none}}.piano:after{content:"";top:0;bottom:0;left:calc(var(--playhead,0) * 100%);pointer-events:none;background:#00000073;width:2px;position:absolute}.piano:focus-visible{outline:3px solid var(--fg);outline-offset:-3px}.piano-bars{position:absolute;inset:0}.piano-bar{border-top:1px solid #00000040;position:absolute;left:0;right:0}.piano-bar--c{border-top:2px solid #ffffffd9}.timbre-marker{pointer-events:none;background:#ffffffb3;width:2px;position:absolute;top:0;bottom:0;left:50%}.scrollbar{cursor:grab;background:#ffffff14;border-radius:.5rem;position:relative}.scrollbar:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.scrollbar-thumb{background:var(--fg);opacity:.6;border-radius:.4rem;position:absolute;top:0;left:2px;right:2px}.pads{grid-template-rows:auto auto;grid-template-columns:repeat(4,1fr);align-content:start;gap:.5rem;display:grid}.pad{aspect-ratio:1;width:100%;min-height:44px;color:var(--fg);cursor:pointer;background:#303241;border:none;transition:background-color .1s ease-out;display:block;position:relative}.pad:hover{background:#d1d1d1}.pad:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.pad--circle{border-radius:50%}.pad--square{border-radius:.5rem}.pad--diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}.pad--triangle{clip-path:polygon(50% 0%,100% 100%,0% 100%)}.pad--flash{animation:.18s ease-out pad-flash}@keyframes pad-flash{0%{filter:brightness(2.2)}to{filter:brightness()}}@media (prefers-reduced-motion:reduce){.pad--flash{filter:brightness(1.6);animation:none}}.pad-badges{pointer-events:none;justify-content:center;gap:.2rem;padding-top:.35rem;display:flex}.pad-badge{background:#fff3;border-radius:50%;width:.4rem;height:.4rem}.pad-badge--armed{background:#ffffffd9}.pad-badge--current{outline:1px solid var(--accent)}a{color:var(--accent)}