:root{color-scheme:light;--bg: #f5f1ea;--panel: #fff8ef;--ink: #1c1b1a;--muted: #6c6761;--accent: #e84a5f;--accent-soft: rgba(232, 74, 95, .25);--wave: #2f2a24;--grid: rgba(28, 27, 26, .1);font-family:Space Grotesk,Avenir Next,Gill Sans,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,#fff5e2,transparent 55%),radial-gradient(circle at 20% 20%,#ffe8d6,transparent 45%),var(--bg);color:var(--ink)}html,body{height:100%}#app{width:100%;height:100%;margin:0;padding:20px 24px;display:flex;flex-direction:column;min-height:100vh}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:16px;background:var(--panel);box-shadow:0 12px 30px #00000014}.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}button{border:none;border-radius:999px;padding:10px 18px;font-weight:600;background:var(--ink);color:#fff;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}button:disabled{opacity:.5;cursor:not-allowed}button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 16px #0000002e}.metronome-controls{gap:10px}.select-wrap{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--grid);font-size:.9rem}select{border:none;background:transparent;font:inherit;color:var(--ink);outline:none}.status{color:var(--muted);font-size:.95rem}.layout{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px;align-items:stretch;flex:1;height:100%;min-height:0}.wave-area{position:relative;padding:16px;border-radius:18px;background:#fff;box-shadow:0 14px 28px #00000014;min-height:360px;min-width:0;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}#waveform{flex:1;height:auto;width:100%;min-width:0;min-height:0}#minimap{height:70px;margin-top:10px;border-top:1px solid var(--grid)}.hint{margin-top:12px;font-size:.9rem;color:var(--muted)}.wave-area .ws-region,.wave-area .wavesurfer-region,.wave-area [class*=region]{background:transparent!important;border-left:2px solid var(--accent);border-right:none;z-index:5}.wave-area .ws-region.downbeat,.wave-area .wavesurfer-region.downbeat{border-left-width:3px;border-left-color:#1c1b1a}.wave-area .ws-region .measure-label,.wave-area .wavesurfer-region .measure-label{position:absolute;top:-18px;left:6px;padding:2px 6px;border-radius:999px;font-size:.7rem;background:#1c1b1a;color:#fff;letter-spacing:.04em}.wave-area .ws-region.selected{border-left-color:var(--ink)}