:root{--bg: #0A1220;--surface: #101B2C;--surface2: #1A2744;--border: rgba(212,192,144,.14);--text: #dcdcdc;--text-dim: #6a6a72;--text-bright: #f2f2f2;--accent: #d4c090;--accent-dim: #b8a470;--green: #6aaa84;--yellow: #d4b064;--red: #d08070;--blue: #7aaac8;--purple: #9a8ec0;--orange: #d4944a;--sky: #a0c4e0;--sky-dim: #7a9eb8;--glow-sky: rgba(160,196,224,.2);--glow-sky-strong: rgba(160,196,224,.35);--font: Georgia, "Times New Roman", "Noto Serif", serif;--font-mono: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--drawer-height: 0px;--sidebar-width: 0px;--bg-depth: radial-gradient(ellipse 120% 40% at 50% 100%, rgba(50,80,45,.07) 0%, transparent 50%);--shadow-color: rgba(4,8,20,.3);--shadow-color-strong: rgba(4,8,20,.45);--shadow-color-soft: rgba(4,8,20,.18);--border-subtle: rgba(212,192,144,.16);--border-subtle-dim: rgba(212,192,144,.08);--glow-green: rgba(106,170,132,.18);--glow-green-strong: rgba(106,170,132,.35);--glow-green-dot: rgba(106,170,132,.55);--glow-red: rgba(208,128,112,.18);--glow-red-strong: rgba(208,128,112,.35);--glow-red-dot: rgba(208,128,112,.55);--glow-blue: rgba(122,170,200,.18);--glow-blue-strong: rgba(122,170,200,.35);--glow-blue-dot: rgba(122,170,200,.55);--glow-amber: rgba(212,192,144,.18);--glow-amber-strong: rgba(212,192,144,.3);--glow-yellow-dot: rgba(212,176,100,.55);--glow-purple-dot: rgba(154,142,192,.55);--accent-tint-faint: rgba(212,192,144,.04);--accent-tint-subtle: rgba(212,192,144,.06);--accent-tint: rgba(212,192,144,.1);--error-bg: rgba(208,128,112,.06);--hover-highlight: rgba(140,170,210,.06);--overlay-bg: rgba(6,12,24,.7);--inset-highlight: rgba(140,170,210,.04);--canvas-waveform: rgba(212,192,144,.7);--canvas-waveform-bg: rgba(212,192,144,.5);--canvas-baseline: rgba(120,140,170,.3);--canvas-highlight: rgba(140,170,210,.06);--canvas-highlight-border: rgba(140,170,210,.1);--canvas-analysis-region: rgba(106,170,132,.16);--canvas-analysis-region-border: rgba(106,170,132,.75);--canvas-grid-line: rgba(140,170,210,.08);--canvas-grid-beat: rgba(140,170,210,.15);--canvas-grid-bar: rgba(212,176,100,.7);--canvas-grid-phrase: rgba(106,170,132,.9);--canvas-playhead: rgba(106,170,132,.8);--canvas-cue-marker: #5aa8ff;--canvas-phase-anchor: rgba(212,176,100,1);--canvas-time-label: #6a6a72;--canvas-text: rgba(184,196,212,.4);--canvas-text-dim: rgba(184,196,212,.3);--canvas-tooltip-bg: rgba(6,12,24,.92);--canvas-tooltip-border: rgba(140,170,210,.15);--canvas-tooltip-text: rgba(232,237,245,.85)}:root[data-theme=day]{--bg: #e8eef5;--surface: #dce4ef;--surface2: #cfd8e6;--border: rgba(168,144,80,.15);--text: #2a2a2a;--text-dim: #888888;--text-bright: #111111;--accent: #a89050;--accent-dim: #8e7a40;--green: #4d9068;--yellow: #b89840;--red: #b86050;--blue: #5a90b0;--purple: #7a70a5;--orange: #b87a35;--sky: #7aa0c0;--sky-dim: #6088a0;--glow-sky: rgba(122,160,192,.22);--glow-sky-strong: rgba(122,160,192,.35);--bg-depth: radial-gradient(ellipse 120% 40% at 50% 100%, rgba(50,80,45,.04) 0%, transparent 50%);--shadow-color: rgba(0,20,60,.08);--shadow-color-strong: rgba(0,20,60,.12);--shadow-color-soft: rgba(0,20,60,.04);--border-subtle: rgba(168,144,80,.18);--border-subtle-dim: rgba(168,144,80,.1);--glow-green: rgba(77,144,104,.22);--glow-green-strong: rgba(77,144,104,.38);--glow-green-dot: rgba(77,144,104,.55);--glow-red: rgba(184,96,80,.22);--glow-red-strong: rgba(184,96,80,.38);--glow-red-dot: rgba(184,96,80,.55);--glow-blue: rgba(90,144,176,.22);--glow-blue-strong: rgba(90,144,176,.38);--glow-blue-dot: rgba(90,144,176,.55);--glow-amber: rgba(168,144,80,.22);--glow-amber-strong: rgba(168,144,80,.32);--glow-yellow-dot: rgba(184,152,64,.55);--glow-purple-dot: rgba(122,112,165,.55);--accent-tint-faint: rgba(168,144,80,.05);--accent-tint-subtle: rgba(168,144,80,.07);--accent-tint: rgba(168,144,80,.1);--error-bg: rgba(184,96,80,.06);--hover-highlight: rgba(60,80,120,.06);--overlay-bg: rgba(20,30,50,.4);--inset-highlight: rgba(60,80,120,.04);--canvas-waveform: rgba(140,120,65,.7);--canvas-waveform-bg: rgba(140,120,65,.5);--canvas-baseline: rgba(80,90,110,.3);--canvas-highlight: rgba(0,20,60,.05);--canvas-highlight-border: rgba(0,20,60,.08);--canvas-analysis-region: rgba(77,144,104,.18);--canvas-analysis-region-border: rgba(77,144,104,.72);--canvas-grid-line: rgba(0,20,60,.06);--canvas-grid-beat: rgba(0,20,60,.12);--canvas-grid-bar: rgba(184,152,64,.7);--canvas-grid-phrase: rgba(77,144,104,.8);--canvas-playhead: rgba(77,144,104,.7);--canvas-cue-marker: #006ee6;--canvas-phase-anchor: rgba(184,152,64,1);--canvas-time-label: #888888;--canvas-text: rgba(42,52,68,.4);--canvas-text-dim: rgba(42,52,68,.3);--canvas-tooltip-bg: rgba(232,238,245,.95);--canvas-tooltip-border: rgba(0,20,60,.12);--canvas-tooltip-text: rgba(20,28,40,.85)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--bg-depth),var(--bg);color:var(--text);font-family:var(--font);line-height:1.5;min-height:100vh;transition:background-color .4s ease,color .3s ease}@media(prefers-reduced-motion:reduce){body{transition:none}.conn-sinking,.conn-rising{animation-duration:.01ms!important}}a{color:var(--accent);text-decoration:none}.container{max-width:1600px;margin:0 auto;padding:1rem 3.5rem;padding-bottom:calc(var(--drawer-height) + 2rem)}.status-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:var(--text-dim)}.status-badge:before{content:"";width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--text-dim);opacity:.4}.status-unknown:before{background:var(--text-dim);opacity:.3}.status-confirmed:before{background:var(--green);opacity:1;box-shadow:0 0 6px var(--glow-green-dot)}.status-overridden:before{background:var(--purple);opacity:1;box-shadow:0 0 6px var(--glow-purple-dot)}.bpm-val{font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums}.bpm-src{font-size:.65rem;color:var(--text-dim);margin-left:.25rem}.actions{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:1px solid var(--border-subtle);border-radius:4px;background:var(--surface2);color:var(--text);font-size:.75rem;font-family:var(--font);cursor:pointer;white-space:nowrap;box-shadow:0 1px 3px var(--shadow-color-soft);transition:box-shadow .3s ease,color .3s ease,border-color .3s ease}.btn:hover{box-shadow:0 1px 8px var(--glow-sky),0 1px 3px var(--shadow-color-soft);color:var(--text-bright);border-color:var(--border-subtle-dim)}.btn:active{box-shadow:0 0 2px var(--glow-sky-strong)}.btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;border-color:var(--border-subtle-dim)}.btn-listen{box-shadow:0 1px 3px var(--shadow-color-soft),0 0 6px var(--glow-green)}.btn-listen:hover{box-shadow:0 1px 8px var(--glow-green-strong),0 0 12px var(--glow-green)}.btn-listen.active{box-shadow:0 0 4px var(--glow-green-strong)}.btn-confirm{box-shadow:0 1px 3px var(--shadow-color-soft),0 0 6px var(--glow-green)}.btn-confirm:hover{box-shadow:0 1px 8px var(--glow-green-strong),0 0 12px var(--glow-green)}.btn-cancel{box-shadow:0 1px 3px var(--shadow-color-soft),0 0 6px var(--glow-red)}.btn-cancel:hover{box-shadow:0 1px 8px var(--glow-red-strong),0 0 12px var(--glow-red)}.btn-live{box-shadow:0 1px 3px var(--shadow-color-soft),0 0 6px var(--glow-blue)}.btn-live:hover{box-shadow:0 1px 8px var(--glow-blue-strong),0 0 12px var(--glow-blue)}.control-panel{position:relative;background:var(--surface);border:1px solid var(--border);border-top-color:#d4c0901a;border-radius:8px;padding:1.25rem;margin-top:0;margin-bottom:1.25rem}.control-panel:before{content:"";position:absolute;top:-24px;left:15%;right:15%;height:48px;pointer-events:none;z-index:2;background:radial-gradient(ellipse 70% 60% at center 40%,rgba(180,180,120,.1) 0%,rgba(160,170,110,.04) 40%,transparent 75%);filter:blur(10px)}.control-panel-title{text-align:center;font-size:.8rem;font-weight:600;color:var(--text-dim);margin-bottom:1.25rem;letter-spacing:.05em}.diagnostics-section{margin-bottom:1.25rem}.diagnostics-section summary{font-size:.9rem;font-weight:600;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem 0;list-style:none;display:flex;align-items:center;gap:.4rem;transition:color .15s}.diagnostics-section summary:hover{color:var(--text)}.diagnostics-section summary::-webkit-details-marker{display:none}.diagnostics-section summary:before{content:"▸";font-size:.7rem;color:var(--text-dim);transition:transform .15s}.diagnostics-section[open] summary:before{transform:rotate(90deg)}@keyframes connSink{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.98)}}@keyframes connRise{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.conn-sinking{animation:connSink .4s cubic-bezier(.55,0,1,.45) both;transform-origin:top center;pointer-events:none}.conn-rising{animation:connRise .5s cubic-bezier(.22,1.1,.36,1) both;transform-origin:top center}.empty{text-align:center;padding:2rem;color:var(--text-dim)}:root[data-theme=day] .control-panel{border-top-color:#a890501f}:root[data-theme=day] .control-panel:before{background:radial-gradient(ellipse 70% 60% at center 40%,rgba(140,140,80,.06) 0%,rgba(130,140,75,.02) 40%,transparent 75%)}