:root { --bg: #f7f7f4; --fg: #15151a; --muted: #6b6b75; --band: rgba(80, 110, 255, 0.28); --faint: rgba(80, 110, 255, 0.1); --pen: #15151a; --escape: #e5484d; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #101014; --fg: #f1f1f4; --muted: #9a9aa6; --band: rgba(120, 150, 255, 0.32); --faint: rgba(120, 150, 255, 0.12); --pen: #f1f1f4; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, sans-serif; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
h1 { margin: 0; font-size: 28px; }
.muted { color: var(--muted); }
.bar { display: flex; gap: 16px; font-variant-numeric: tabular-nums; }
canvas.play { width: 100%; height: min(60vh, 520px); touch-action: none; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
canvas.strip { width: 100%; height: 160px; border-radius: 12px; }
button { font: inherit; padding: 10px 16px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); background: transparent; color: inherit; cursor: pointer; }
button.primary { background: var(--fg); color: var(--bg); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
progress { width: 100%; }
.headline { font-size: 32px; font-weight: 700; }