:root{--ink:#e7e9f5;--void:#05060f;--panel:#0c0f20d1;--hairline:#ffffff1f;--accent:#8fd8ff;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{background:var(--void);color:var(--ink);margin:0;font-family:system-ui,sans-serif;overflow:hidden}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}main{width:100%;height:100dvh;position:relative}#constellation,#constellation-guides{width:100%;height:100%;display:block;position:absolute;inset:0}#constellation-guides{background:var(--void);pointer-events:none}#constellation{touch-action:none;background:0 0}.hud{pointer-events:none;flex-wrap:wrap;align-items:flex-start;gap:1rem;display:flex;position:absolute;inset:.9rem 1rem auto}.hud-group{pointer-events:auto;flex-direction:column;gap:.35rem;display:flex}.hud-right{text-align:right;align-items:flex-end;margin-left:auto}.toggle{appearance:none;min-width:3.4rem;font:inherit;color:#e7e9f5a6;background:var(--panel);border:1px solid var(--hairline);cursor:pointer;backdrop-filter:blur(8px);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;transition:background-color .18s,color .18s,transform .18s}.toggle:hover{color:var(--ink);background:#ffffff1f;transform:translateY(-1px)}.toggle[aria-pressed=true]{color:#061019;background:var(--accent);border-color:#0000}.loop-controls{align-items:center;gap:.4rem;display:flex}.loop-button{appearance:none;min-width:6.5rem;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--hairline);cursor:pointer;backdrop-filter:blur(8px);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;transition:background-color .18s,color .18s,transform .18s}.loop-button:hover{background:#ffffff1f;transform:translateY(-1px)}.loop-button[data-state=recording],.loop-button[data-state=overdubbing]{color:#1a0509;background:#ff6b81;border-color:#0000}.loop-button[data-state=playing]{color:#061019;background:var(--accent);border-color:#0000}.ghost{appearance:none;font:inherit;color:#e7e9f5b3;border:1px solid var(--hairline);cursor:pointer;background:0 0;border-radius:999px;padding:.4rem .75rem;font-size:.8rem;transition:background-color .18s,color .18s,opacity .18s}.ghost:disabled{opacity:.35;cursor:default}.ghost:hover:not(:disabled){color:var(--ink);background:#ffffff1a}.loop-status{letter-spacing:.06em;color:#e7e9f580;font-size:.72rem}.loop-progress{z-index:2;background:var(--accent);transform-origin:0;pointer-events:none;height:2px;position:absolute;inset:0 0 auto;transform:scaleX(0)}.loop-progress[data-state=overdubbing]{background:#ff6b81}.hud-label{letter-spacing:.14em;text-transform:uppercase;color:#e7e9f573;font-size:.65rem}.segmented{background:var(--panel);border:1px solid var(--hairline);backdrop-filter:blur(8px);border-radius:999px;padding:.2rem;display:flex}.segmented button{appearance:none;min-width:3.4rem;font:inherit;color:#e7e9f599;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.35rem .75rem;font-size:.8rem;transition:background-color .18s,color .18s,transform .18s}.segmented button:hover{color:var(--ink);background:#ffffff14}.segmented button[aria-pressed=true]{color:#061019;background:var(--accent);transform:translateY(-1px)}.readout{font-variant-numeric:tabular-nums;letter-spacing:.06em;min-height:1.6rem;color:var(--accent);background:var(--panel);border:1px solid var(--hairline);backdrop-filter:blur(8px);border-radius:.6rem;margin:0;padding:.2rem .7rem;font-size:.95rem}.help-toggle{pointer-events:auto;width:2.2rem;height:2.2rem;font:inherit;color:#e7e9f5b3;background:var(--panel);border:1px solid var(--hairline);cursor:pointer;border-radius:50%;margin-top:1.05rem;font-size:1rem;transition:background-color .18s,color .18s,transform .18s}.help-toggle:hover{color:var(--ink);background:#ffffff1f;transform:translateY(-1px)}.intro{text-align:center;color:#d3d7ef;background:var(--panel);border:1px solid var(--hairline);backdrop-filter:blur(8px);pointer-events:none;opacity:1;border-radius:999px;width:calc(100% - 3rem);max-width:32rem;margin:0;padding:.75rem 1.1rem;font-size:.9rem;line-height:1.6;transition:opacity .2s,transform .2s;position:absolute;bottom:3.4rem;left:50%;transform:translate(-50%)}.intro[data-dismissed=true]{opacity:0;transform:translate(-50%)translateY(.4rem)}.help-panel{border:1px solid var(--hairline);backdrop-filter:blur(12px);visibility:hidden;opacity:0;background:#0a0d1cf5;border-radius:1rem;width:min(30rem,100% - 2.5rem);max-height:min(32rem,100dvh - 6rem);padding:1.4rem 1.5rem 1.2rem;transition:opacity .2s,transform .2s,visibility .2s;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)translateY(.5rem);box-shadow:0 1.5rem 3rem #00000073}.help-panel[data-open=true]{visibility:visible;opacity:1;transform:translate(-50%,-50%)}.help-panel h2{letter-spacing:.01em;margin:0 0 .9rem;font-size:1.05rem}.help-panel dl{margin:0}.help-panel dt{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:.85rem;font-size:.7rem}.help-panel dd{color:#e7e9f5d1;margin:.3rem 0 0;font-size:.88rem;line-height:1.65}.help-note{color:#e7e9f59e;border-top:1px solid var(--hairline);margin:1.1rem 0 0;padding-top:.9rem;font-size:.85rem;line-height:1.6}.help-close{font:inherit;color:var(--ink);border:1px solid var(--hairline);cursor:pointer;background:#ffffff1a;border-radius:.5rem;margin-top:1.1rem;padding:.45rem 1.1rem;font-size:.85rem;transition:background-color .18s,transform .18s}.help-close:hover{background:#ffffff2e;transform:translateY(-1px)}kbd{text-align:center;background:#ffffff1f;border:1px solid #fff3;border-radius:.3rem;min-width:1.35rem;margin:0 .1rem;padding:.05rem .35rem;font-family:inherit;font-size:.82em;display:inline-block}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=30rem){.hud{gap:.6rem}.segmented button{min-width:2.8rem;padding:.35rem .5rem}.intro{font-size:.82rem;bottom:3rem}.keys-hint{display:none}}@media (prefers-reduced-motion:reduce){.intro,.help-panel,.segmented button,.help-toggle,.help-close{transition-duration:1ms}.segmented button[aria-pressed=true],.help-toggle:hover,.help-close:hover{transform:none}}