:root{--night:#15111f;--panel:#1e1930;--raise:#29223f;--line:#3a3258;--ink:#f1ebf8;--dim:#a59cc0;--faint:#6f6790;--sun:#ffb35c;--c0:#ff9070;--c1:#f4c75b;--c2:#6fd4f1;--c3:#bba2f7;--drum:#f283b5;--pad:#8fe3b9;--bass:#82abff;--eighths:#ffb35c;--glow:var(--line);--f-display:"Unbounded", "Arial Black", system-ui, sans-serif;--f-body:"Golos Text", "Segoe UI", system-ui, sans-serif;--f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}[hidden]:not([hidden=until-found i]){display:none!important}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{background:var(--night);color:var(--ink);font:14px/1.4 var(--f-body);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;overflow:hidden}body:before{content:"";height:env(safe-area-inset-top,0px);z-index:10;background:var(--night);position:fixed;inset:0 0 auto}button{font:inherit;color:inherit;cursor:pointer;touch-action:none;background:0 0;border:0;padding:0}:focus-visible{outline:2px solid var(--sun);outline-offset:2px}.app{max-width:480px;height:100%;padding-left:max(12px, env(safe-area-inset-left,0px));padding-right:max(12px, env(safe-area-inset-right,0px));touch-action:none;flex-direction:column;gap:8px;margin:0 auto;padding-block:8px 10px;display:flex;position:relative}.app:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 50% 35%, color-mix(in oklab, var(--glow) 32%, transparent), transparent 70%);transition:background .6s;position:absolute;inset:0 0 45%}.sw.down,.chord.down,.act.down{transform:scale(.95)}.top{align-items:center;gap:8px;min-height:44px;display:flex}.play{background:var(--sun);width:44px;height:44px;color:var(--night);border-radius:50%;flex:none;place-items:center;display:grid}.play svg{width:18px;height:18px}.play[aria-pressed=true]{background:var(--ink)}.clock{gap:3px;min-width:0;display:grid}.leds{gap:5px;display:flex}.led{background:var(--raise);border:1px solid var(--line);border-radius:50%;width:11px;height:11px;transition:background 50ms}.led.on{background:var(--ink);border-color:var(--ink)}.led.on.one{background:var(--sun);border-color:var(--sun)}.bars{font:500 10.5px/1 var(--f-mono);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}.mid{flex-direction:column;flex:auto;gap:8px;min-height:0;display:flex}.grp{gap:4px;display:grid}.gl{font:700 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);justify-content:space-between;align-items:baseline;padding:0 2px;display:flex}.gl em{color:var(--dim);letter-spacing:.02em;text-transform:none;font-style:normal;font-weight:500}.row{gap:5px;display:grid}.r2{grid-template-columns:repeat(2,minmax(0,1fr))}.r3{grid-template-columns:repeat(3,minmax(0,1fr))}.r4{grid-template-columns:repeat(4,minmax(0,1fr))}.sw{--hue:var(--dim);background:var(--panel);border:1px solid var(--line);text-align:center;min-height:42px;color:var(--ink);border-radius:11px;padding:6px 4px 8px;font-size:13px;font-weight:600;line-height:1.1;transition:transform 60ms,background 80ms;position:relative}.sw:after{content:"";background:var(--hue);opacity:.6;border-radius:2px;height:3px;position:absolute;bottom:4px;left:30%;right:30%}.sw.on{background:color-mix(in oklab, var(--hue) 84%, var(--night));border-color:var(--hue);color:var(--night)}.sw.on:after{opacity:0}.sw.off.on{background:var(--raise);color:var(--ink);border-color:var(--dim)}.sw.armed{outline:2px dashed var(--hue);outline-offset:1px;animation:.5s steps(2,end) infinite blink}@keyframes blink{50%{outline-color:#0000}}.xy{background:var(--panel);border:1px solid var(--line);touch-action:none;border-radius:14px;flex:90px;min-height:84px;position:relative;overflow:hidden}.xy canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.xy .cap{font:500 10.5px/1.2 var(--f-mono);color:var(--dim);pointer-events:none;position:absolute}.xy .cx{bottom:8px;left:10px}.xy .val{color:var(--ink);bottom:8px;right:10px}.chords{grid-template-columns:1fr 1fr;gap:7px;display:grid}.chord{--hue:var(--dim);background:var(--panel);border:1px solid var(--line);text-align:left;border-radius:16px;align-content:center;justify-items:start;min-height:clamp(58px,10.5vh,86px);padding:8px 14px;transition:transform 60ms,background .1s;display:grid;position:relative;overflow:hidden}.chord b{font:800 clamp(22px, 6.4vw, 30px)/1 var(--f-display);color:var(--hue)}.chord span{font:500 11px/1.2 var(--f-mono);color:var(--dim);margin-top:6px}.chord:before{content:"";background:var(--hue);width:4px;position:absolute;top:0;bottom:0;left:0}.chord.on{background:linear-gradient(135deg, var(--hue), color-mix(in oklab, var(--hue) 60%, var(--night)));border-color:var(--hue)}.chord.on b,.chord.on span{color:var(--night)}.acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.act{background:var(--panel);border:1px solid var(--line);border-radius:14px;place-items:center;min-height:50px;font-size:14px;font-weight:700;transition:transform 60ms;display:grid;position:relative;overflow:hidden}.act small{font:500 10px/1.2 var(--f-mono);color:var(--dim);margin-top:2px;font-weight:500;display:block}.act.on{background:var(--ink);border-color:var(--ink);color:var(--night)}.act.on small{color:var(--night)}@media (orientation:landscape) and (height<=520px){.app{grid-template-rows:auto 1fr auto;grid-template-columns:1.15fr 1fr;column-gap:12px;max-width:920px;display:grid}.top{grid-column:1/-1}.mid{grid-area:2/1/span 2}.chords{grid-area:2/2;align-content:stretch}.chord{min-height:0}.acts{grid-area:3/2}.sw{min-height:34px;padding:4px 4px 7px;font-size:12px}.gl{display:none}}@media (height<=640px) and (orientation:portrait){.sw{min-height:36px;padding:4px 3px 7px;font-size:12px}.gl{font-size:9px}.grp{gap:3px}.mid,.app{gap:6px}.act{min-height:44px}}@media (prefers-reduced-motion:reduce){.sw.armed{animation:none}.app:before{transition:none}}