:root{--ink: #08110d;--panel: rgba(8, 18, 14, .93);--edge: rgba(150, 206, 178, .18);--edge-strong: rgba(150, 206, 178, .42);--bone: #e7f0e8;--bone-dim: #9db3a7;--mint: #7ee8b0;--gold: #e8ce8a;--brass: #c39a45;--warn: #e8a06a;--mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--bone);font-family:var(--serif);overflow:hidden;-webkit-text-size-adjust:100%}#app{position:relative;width:100%;height:100%;overflow:hidden}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}[hidden]{display:none!important}.label,.eyebrow,.key,.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin:0}.label--accent{color:var(--gold)}.label b{color:var(--bone);font-weight:600;letter-spacing:.06em}button{font:inherit;color:var(--bone);background:transparent;border:1px solid var(--edge);border-radius:3px;padding:9px 14px;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}button:hover{border-color:var(--edge-strong);background:#7ee8b017}button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.primary{border-color:var(--mint);background:var(--mint);color:#04140d;font-weight:700;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:13px 26px}.primary:hover{background:#9bf3c6;color:#04140d}.ghost{font-family:var(--mono);font-size:11px;letter-spacing:.1em}.icon{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;color:var(--bone-dim)}.icon[aria-pressed=true]{color:var(--gold);border-color:#e8ce8a80}.hud{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-content:space-between;padding:clamp(8px,1.4vw,20px);gap:10px;pointer-events:none}.panel--chord{grid-row:1}.hud__gap{grid-row:2}.panel--scope{grid-row:3}.dock{grid-row:4}@media(min-width:900px)and (min-aspect-ratio:5/4){.hud{grid-template-columns:minmax(330px,384px) 1fr;grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;gap:14px}.panel--chord{grid-column:1;grid-row:1}.hud__gap{display:none}.dock{grid-column:1;grid-row:2;align-self:end}.panel--scope{grid-column:1 / -1;grid-row:3}#scope{height:74px}}.panel{pointer-events:auto;background:#08120eed;border:1px solid var(--edge);border-radius:6px;padding:12px 14px}.panel--chord{width:100%}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.panel-head__id{display:grid;gap:2px}.panel-head__score{text-align:right}.panel-head__score .score{margin:3px 0 0;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--gold);line-height:1.16}.panel-head__buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}#chord-name{margin:8px 0 2px;font-size:22px;line-height:1.1;letter-spacing:-.01em}.chord-line{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--bone-dim)}.slots{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}.slots li{display:grid;grid-template-columns:18px 74px 1fr;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11px;padding:5px 7px;border-radius:3px;border:1px solid rgba(150,206,178,.12);background:#060e0b80}.slots .idx{color:var(--bone-dim)}.slots .pitch{color:var(--gold);font-weight:700;font-size:12px}.slots .hint{color:var(--bone-dim);font-size:10px;line-height:1.4}.slots li[data-done=true]{border-color:#7ee8b08c;background:#14362680}.slots li[data-done=true] .pitch{color:var(--mint)}.meters{display:flex;gap:10px;margin-bottom:8px}.meter{display:grid;gap:4px;flex:1 1 0;min-width:0}.meter--window{margin-bottom:8px}.track{position:relative;height:6px;border-radius:3px;background:#040c09d9;border:1px solid rgba(150,206,178,.16);overflow:hidden}.track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:var(--mint);transition:width 90ms linear}.track .bar--lock{background:var(--gold)}.track .bar--window{background:var(--brass)}.track u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--bone);opacity:.85}.track u.gate--band{width:6px;background:repeating-linear-gradient(to right,var(--bone) 0 2px,transparent 2px 4px)}.status{margin:0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--bone);min-height:1.5em}.dock{width:100%;display:grid;gap:8px}.panel--scope{padding:5px 7px}#scope{display:block;width:100%;height:68px;border-radius:3px}.rail{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.rail button{padding:6px 2px;display:grid;gap:2px;justify-items:center;font-family:var(--mono);font-size:12px;border-color:#96ceb229;position:relative}.rail .sub{font-size:9px;color:var(--bone-dim);letter-spacing:.06em}.rail button[aria-pressed=true]{border-color:var(--mint);background:#7ee8b024;color:var(--bone)}.rail .dot{width:100%;height:3px;border-radius:2px;background:#96ceb233;overflow:hidden}.rail .dot i{display:block;height:100%;background:var(--brass)}.rail .live{position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 6px var(--mint)}.ladder{margin:8px 0 0;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--bone-dim)}.ladder b{color:var(--bone);font-weight:600}.ladder .on{color:var(--mint)}.panel--controls{display:grid;gap:8px}.pad{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:8px}.pad .label{line-height:1.25}.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.seg button{padding:8px 2px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--bone-dim)}.seg button[aria-pressed=true]{border-color:var(--gold);background:#e8ce8a29;color:var(--bone)}.pad--keys{grid-template-columns:1fr auto}.strike{border-color:var(--mint);color:var(--mint);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 12px}.strike:hover{background:#7ee8b029}.strike .key{display:inline-block;margin-left:8px;color:var(--bone-dim);letter-spacing:.1em;white-space:nowrap}.strike:active{background:#7ee8b04d}.screen{position:fixed;inset:0;display:grid;place-content:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,#08110d9e,#040907ed);overflow-y:auto}.card{width:min(100%,560px);display:grid;gap:14px;justify-items:start;background:#08120ef0;border:1px solid var(--edge);border-radius:8px;padding:clamp(20px,4vw,34px)}.card--wide{width:min(100%,620px)}.card .eyebrow{color:var(--gold)}.card h1{margin:0;font-size:clamp(2.6rem,8vw,4.2rem);line-height:.95;letter-spacing:-.03em}.card h2{margin:0;font-size:clamp(1.5rem,4vw,2rem);line-height:1.1}.lede{margin:0;font-size:14px;line-height:1.62;color:var(--bone-dim);max-width:46ch}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;margin:4px 0 0;width:100%}.facts div{display:grid;gap:2px}.facts dt{color:var(--gold)}.facts dd{margin:0;font-family:var(--mono);font-size:11px;color:var(--bone)}.rules{display:grid;gap:9px;margin:0}.rules p{margin:0;font-size:13px;line-height:1.6;color:var(--bone-dim)}.rules b{color:var(--gold)}.rules code{font-family:var(--mono);font-size:12px;color:var(--mint)}.keys{display:grid;gap:4px;padding:12px 0 4px;border-top:1px solid var(--edge)}.keyrow{font-family:var(--mono);font-size:11px;color:var(--bone-dim)}.keyrow b{color:var(--bone);display:inline-block;min-width:96px;font-weight:600}.tally{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:0;width:100%}.tally div{display:grid;gap:2px;border-top:1px solid var(--edge);padding-top:6px}.tally dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}.tally dd{margin:0;font-family:var(--mono);font-size:17px;color:var(--gold)}.row{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:560px){.hud{padding:8px;gap:8px}.panel{padding:8px 9px}#chord-name{font-size:17px;margin:6px 0 1px}.chord-line{font-size:11.5px;line-height:1.4;margin-bottom:7px}.slots{gap:3px;margin-bottom:7px}.slots li{grid-template-columns:13px 62px 1fr;font-size:9.5px;gap:5px;padding:4px 5px}.slots .pitch{font-size:10.5px}.slots .hint{font-size:8.5px}.meters{gap:6px;margin-bottom:6px}.meter--window{margin-bottom:6px}.status{font-size:10px}.panel-head__score .score{font-size:17px}.icon{padding:6px 7px;font-size:9px}#scope{height:46px}.rail{gap:3px}.rail button{font-size:10.5px;padding:4px 1px}.rail .sub{font-size:8px}.ladder{font-size:9px;margin-top:6px}.panel--controls{gap:6px}.pad{grid-template-columns:58px 1fr;gap:5px}.pad .label{font-size:8.5px;letter-spacing:.1em}.seg{gap:3px}.seg button{font-size:9px;padding:7px 1px}.pad--keys{grid-template-columns:1fr}.pad--keys .ghost{width:100%}.strike{padding:12px 10px;font-size:12px}.ghost{padding:9px 10px}.facts{grid-template-columns:repeat(2,1fr)}.card h1{font-size:clamp(2.2rem,12vw,3rem)}}@media(prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}