:root{--bg:#04050a;--fg:#e8f6ff;--dim:#6f7a86;--accent:#ff4a2a;--cyan:#5ef0e6;--clip:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));--sans:"Host Grotesk", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--gut:clamp(16px, 5.25vw, 105px)}*{box-sizing:border-box;margin:0}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--sans);overflow:hidden}canvas{display:block}#scene{cursor:grab;touch-action:none;width:100%;height:100%;position:fixed;inset:0}#scene:active{cursor:grabbing}.swatch{vertical-align:middle;border-radius:50%;width:7px;height:7px;margin-right:8px;display:inline-block}.swatch.pick{background:#5ef0e6}.swatch.bow{background:#9d7bff}.swatch.bell{background:#8dff6a}.swatch.bass{background:#ff8a1f}.swatch.stab{background:#ff3b3b}.swatch.kick{background:#ff4a2a}.swatch.hat{background:#b8fff6}.swatch.impact{background:#ff2a2a;border-radius:0;transform:rotate(45deg)scale(.8)}.swatch.burst{background:0 0;box-shadow:inset 0 0 0 1.5px #ffd9a0}#intro{background:var(--bg);z-index:2;position:fixed;inset:0;overflow-y:auto}#intro.gone{display:none}.bar{z-index:1;height:60px;padding:0 var(--gut);background:var(--bg);border-bottom:1px solid #f3eee31a;align-items:center;display:flex;position:sticky;top:0}.title{font:400 22px/1 var(--sans);letter-spacing:.06em;align-items:center;gap:8px;display:flex}.pill{color:#a3a8b0;font:400 11px/1 var(--sans);text-transform:uppercase;border:1px solid;border-radius:999px;padding:4px 9px 3px}.page{min-height:calc(100dvh - 60px);padding:clamp(24px, 7vh, 120px) var(--gut) 24px;flex-direction:column;display:flex}.lede{font:300 clamp(26px, min(3.4vw, 6vh), 64px)/1.08 var(--sans);letter-spacing:-.035em;color:var(--dim);max-width:18em}.lede b{font-weight:inherit;color:var(--fg)}.lower{grid-template-columns:1fr;gap:40px;margin-top:auto;padding-top:48px;display:grid}@media (width>=960px){.lower{grid-template-columns:2fr 1fr;align-items:end}}.keys{grid-template-columns:1fr;gap:24px 40px;display:grid}@media (width>=640px){.keys{grid-template-columns:1fr 1fr}}.keys h2{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}.keys table+h2{margin-top:20px}.keys table{border-collapse:collapse;width:100%;font:400 13px/1.3 var(--sans);color:var(--dim)}.keys td{padding:4px 0}.keys td:first-child{white-space:nowrap;padding-right:20px}.keys td:last-child{color:#a3a8b0}kbd{min-width:20px;height:20px;font:500 10px/1 var(--mono);color:var(--fg);border:1px solid #f3eee340;border-radius:4px;place-items:center;margin-right:2px;padding:0 5px;display:inline-grid}.ways{gap:10px;display:grid}.ways button{height:48px;color:var(--fg);font:400 15px/1 var(--sans);cursor:pointer;background:0 0;border:1px solid #f3eee340;border-radius:999px;transition:background .2s,border-color .2s}.ways button:hover{border-color:var(--fg)}.ways button{clip-path:var(--clip);border-radius:0}.ways button.primary{background:var(--accent);border-color:var(--accent);color:#0b0b0d}.ways button.primary:hover{background:#ff6a4d}.ways button:disabled{opacity:.5;cursor:progress}.note{font:400 12px/1.4 var(--sans);color:var(--dim)}#hud{pointer-events:none;z-index:1;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);position:fixed;inset:0}.corner{border:0 solid #e8f6ff73;width:18px;height:18px;position:absolute}.corner.tl{border-width:1px 0 0 1px;top:10px;left:10px}.corner.tr{border-width:1px 1px 0 0;top:10px;right:10px}.corner.bl{border-width:0 0 1px 1px;bottom:10px;left:10px}.corner.br{border-width:0 1px 1px 0;bottom:10px;right:10px}.status{gap:8px;display:grid;position:absolute;top:24px;left:24px}#status-text{color:var(--fg)}#status-text:before{content:"";background:var(--accent);vertical-align:1px;width:6px;height:6px;margin-right:8px;display:inline-block}#chord-text{color:var(--cyan)}#songs,#views{pointer-events:auto;gap:4px;display:flex}#songs{margin-top:6px}#views{position:absolute;top:20px;right:24px}#songs button,#views button{height:24px;clip-path:var(--clip);color:var(--dim);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;background:#04050ab3;border:1px solid #e8f6ff29;border-radius:0;padding:0 10px}#songs button:hover,#views button:hover{color:var(--fg)}#songs button[aria-pressed=true],#views button[aria-pressed=true]{color:#04050a;background:var(--cyan);border-color:var(--cyan)}#songs button.off[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.ruler{color:#ff4a2abf;background:repeating-linear-gradient(90deg,#ff4a2a73 0 1px,#0000 1px 14px) 50%/calc(100% - 20px) 5px no-repeat;border-left:1px solid #ff4a2a99;border-right:1px solid #ff4a2a99;justify-content:space-between;align-items:center;width:min(36vw,420px);height:18px;padding:0 10px;display:flex;position:absolute;top:22px;left:50%;transform:translate(-50%)}.ruler b{color:var(--fg);background:var(--bg);padding:0 8px;font-weight:500}#legend[hidden]{display:none}#legend{gap:7px;padding:0;font-size:9px;list-style:none;display:grid;position:absolute;bottom:64px;left:24px}#camera{aspect-ratio:4/3;width:200px;clip-path:var(--clip);pointer-events:auto;background:#000;border:1px solid #5ef0e640;position:absolute;bottom:64px;right:24px;overflow:hidden}#camera video,#camera canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}#camera video{opacity:.25;filter:grayscale()contrast(1.2)}#camera-handle{cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,#e8f6ffb3 0 2px,#0000 2px) 5px 5px/12px 12px no-repeat,linear-gradient(135deg,#0000 5px,#e8f6ff80 5px 6px,#0000 6px) 5px 5px/12px 12px no-repeat;border:0;width:22px;height:22px;padding:0;position:absolute;top:0;left:0}#progress{grid-template-columns:auto auto 1fr auto;align-items:end;gap:14px;height:34px;display:grid;position:absolute;bottom:18px;left:24px;right:24px}#merge{border:1px solid var(--accent);height:24px;clip-path:var(--clip);color:var(--fg);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;pointer-events:auto;background:#ff4a2a1f;border-radius:0;padding:0 12px}#merge:hover{background:#ff4a2a40}#merge[aria-pressed=true]{background:var(--accent);color:#04050a}#merge[hidden]{display:none}#progress-canvas{width:100%;height:34px}#clock{color:var(--fg);padding-bottom:2px}#tempo{padding-bottom:2px}