@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url('../../fonts/inter-latin-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('../../fonts/plex-mono-latin-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('../../fonts/plex-mono-latin-500.woff2') format('woff2')}
:root{color-scheme:dark;--bg:#1a1612;--panel:#241e17;--line:#4a3f31;--ink:#efe8da;--soft:#cfc6b4;--gold:#d4a24a;--focus:#f6dfa6;
  --ui:"Inter",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--ui)}
main{max-width:980px;margin:0 auto;padding:18px 14px 28px;display:grid;gap:14px}
h1{margin:0;font:600 clamp(1.5rem,4.5vw,2.1rem)/1.15 var(--ui);letter-spacing:-.01em}
.lede{margin:0;color:var(--soft);max-width:64ch}
.status{margin:0;font:400 13px/1.5 var(--mono);color:var(--gold)}
.stage{display:grid;gap:6px}
canvas{width:100%;aspect-ratio:16/9;min-height:220px;display:block;background:var(--bg);border:1px solid var(--line);border-radius:6px;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}
.hint,.note{margin:0;color:var(--soft);font-size:14px;max-width:70ch}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.readout__label{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.readout__num{font:500 clamp(2rem,8vw,2.8rem)/1 var(--mono);color:var(--gold);min-width:5ch}
.readout__unit{font:400 14px var(--mono);color:var(--soft)}
.readout__note{font-size:14px;color:var(--soft);margin-left:auto}
.announce{margin:0;min-height:1.5em;font:400 13px/1.5 var(--mono);color:var(--soft)}
.controls,.strings,.sliders{display:flex;flex-wrap:wrap;gap:10px}
.strings{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.btn{min-height:44px;min-width:44px;padding:8px 16px;font:500 15px var(--ui);color:var(--ink);background:transparent;border:1px solid var(--gold);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:#2f261b}
.btn[aria-pressed="true"]{background:var(--gold);color:#17130d}
.btn--primary{background:var(--gold);color:#17130d;font-weight:600}
.btn--primary:hover{background:#e3b45e}
.btn--on{background:transparent;color:var(--gold)}
kbd{font:400 12px var(--mono);padding:1px 6px;border:1px solid currentColor;border-radius:3px;opacity:.9}
.sliders{gap:10px 24px}
.slider{display:flex;align-items:center;gap:10px;min-height:44px;flex:1 1 220px;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.slider input{flex:1;min-height:44px;accent-color:var(--gold)}
.alt{border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.alt summary{min-height:44px;padding:10px 14px;cursor:pointer;color:var(--gold);font-weight:600;display:flex;align-items:center}
.alt table{width:calc(100% - 28px);margin:0 14px 12px;border-collapse:collapse;font:400 14px var(--mono)}
.alt caption{text-align:left;color:var(--soft);padding:0 0 8px;font:400 13px var(--ui)}
.alt th,.alt td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.alt th{color:var(--soft);font-weight:500}
.alt .note{padding:0 14px 12px}
@media (max-width:520px){.readout__note{margin-left:0;flex-basis:100%}canvas{aspect-ratio:4/3}.alt table{font-size:12.5px}}