:root{color:#f3f5f7;font-synthesis:none;text-rendering:optimizelegibility;background:#0d0f13;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top,#202632 0%,#0d0f13 46%);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.app-shell{width:min(100%,820px);margin:0 auto;padding:28px 16px 72px}.hero{padding:28px 6px 22px}.eyebrow{color:#9aa7b7;letter-spacing:.18em;margin:0 0 8px;font-size:.72rem;font-weight:800}h1{letter-spacing:-.055em;margin:0;font-size:clamp(2rem,9vw,4.2rem);line-height:1.02}h2{margin:0;font-size:1.25rem}.hero-copy{color:#bdc6d0;max-width:620px;margin:18px 0 0;line-height:1.7}.panel,.metric-card{background:#181c23eb;border:1px solid #ffffff17;border-radius:22px;box-shadow:0 18px 50px #0000003d}.panel{padding:20px}.setup-panel{gap:20px;display:grid}.level-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.level-controls label{color:#aab4c0;background:#11151b;border:1px solid #ffffff14;border-radius:14px;gap:8px;padding:14px;font-size:.85rem;font-weight:700;display:grid}.level-controls label span{justify-content:space-between;gap:12px;display:flex}.level-controls label strong{color:#fff;font-variant-numeric:tabular-nums}.level-controls input[type=range]{accent-color:#70d59c;width:100%}.level-controls small{color:#687383}.level-note{color:#8792a0;margin:-8px 0 0;font-size:.78rem;line-height:1.5}.level-result{margin-top:16px}.level-result p:last-child{color:#bdc6d0;margin-bottom:0}.level-good{border-color:#70d59c66}.level-too-quiet,.level-too-high{border-color:#ffb45f66}.level-clipped{border-color:#ff696180}.control-group{gap:10px;display:grid}.control-group label,.label{color:#aab4c0;font-size:.85rem;font-weight:700}.bpm-control{grid-template-columns:52px 1fr 52px;gap:10px;display:grid}.bpm-control button,.segmented-control button{color:#fff;background:#242a34;border:1px solid #ffffff1a;border-radius:14px;min-height:48px}.bpm-control input{color:#fff;text-align:center;background:#11151b;border:1px solid #ffffff1a;border-radius:16px;width:100%;min-height:58px;font-size:2rem;font-weight:800}.segmented-control{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.segmented-control button.active{color:#11151b;background:#f0f4f8}.session-status{color:#d5dbe2;background:#11151b;border-radius:15px;align-items:center;gap:10px;min-height:54px;padding:0 14px;display:flex}.status-dot{background:#687383;border-radius:999px;width:10px;height:10px}.status-recording .status-dot{background:#ff6961;box-shadow:0 0 0 6px #ff69611f}.status-complete .status-dot{background:#70d59c}.primary-button{color:#0d1015;background:#f4f7fa;border:0;border-radius:18px;min-height:60px;font-size:1rem;font-weight:900}.privacy-note{color:#8792a0;text-align:center;margin:-8px 0 0;font-size:.78rem}.error-panel{border-color:#ff696159;margin-top:16px}.error-panel p{color:#c8d0d8;margin-bottom:0}.results-stack{gap:16px;margin-top:18px;display:grid}.metric-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.metric-card{gap:7px;padding:18px;display:grid}.metric-card span{color:#9aa7b7;font-size:.78rem}.metric-card strong{font-size:clamp(1.35rem,5vw,2rem)}.metric-card small{color:#778290;line-height:1.4}.section-heading{justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;display:flex}audio{width:100%;max-width:240px}.waveform-card{background:#0e1217;border:1px solid #ffffff0f;border-radius:16px;overflow:hidden}.waveform-card svg{cursor:crosshair;touch-action:manipulation;width:100%;min-height:240px;display:block}.timeline-toolbar{border-bottom:1px solid #ffffff0f;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;padding:14px;display:grid}.timeline-toolbar label{color:#8f9baa;gap:5px;font-size:.72rem;display:grid}.timeline-toolbar label strong{color:#fff;font-variant-numeric:tabular-nums}.timeline-toolbar input{accent-color:#70d59c;width:100%}.timeline-toolbar button{color:#fff;background:#242a34;border:1px solid #ffffff1f;border-radius:10px;align-self:end;min-height:38px;padding:0 12px}.playback-follow{color:#aab4c0;align-items:center;gap:7px;padding:10px 14px 0;font-size:.78rem;display:inline-flex}.playback-follow input{accent-color:#70d59c}.playback-options{flex-wrap:wrap;gap:14px;display:flex}.level-controls select{color:#fff;background:#11151b;border:1px solid #ffffff1f;border-radius:10px;min-height:40px;padding:0 10px}.timeline-readout{color:#aab4c0;font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:16px;padding:10px 14px 0;font-size:.72rem;display:flex}.timeline-background{fill:#090c10}.countin-region{fill:#ffb45f12}.analysis-region{fill:#70d59c0e}.timeline-grid{stroke:#ffffff0f;stroke-width:1px}.timeline-label,.boundary-label{fill:#7f8b99;font-family:ui-monospace,monospace;font-size:12px}.boundary-label{font-size:10px;font-weight:700}.waveform-axis{stroke:#2d3540;stroke-width:1px}.waveform-fill{fill:#d9e1e89e;stroke:#ffffffdb;stroke-width:.7px}.raw-click-marker{stroke:#679aff8c;stroke-width:1.2px;stroke-dasharray:5 4}.corrected-click-marker{stroke:#70d59cb8;stroke-width:1.5px}.countin-boundary{stroke:#ffb45f;stroke-width:2.5px}.analysis-boundary{stroke:#70d59c;stroke-width:2.2px}.cursor-marker{stroke:#fff;stroke-width:1px}.onset-marker{fill:#ffb45f}.waveform-card audio{width:calc(100% - 28px);max-width:none;margin:10px 14px 0;display:block}.waveform-legend{color:#9aa7b7;flex-wrap:wrap;gap:14px;padding:12px 14px;font-size:.72rem;display:flex}.waveform-legend span{align-items:center;gap:7px;display:inline-flex}.waveform-legend i{border-radius:50%;width:10px;height:10px;display:block}.legend-countin{opacity:.55;background:#ffb45f}.legend-analysis{opacity:.55;background:#70d59c}.legend-raw{background:#679aff}.legend-corrected{background:#70d59c}.legend-onset{background:#ffb45f}.debug-list{gap:0;margin:14px 0 0;display:grid}.debug-list div{border-bottom:1px solid #ffffff0f;justify-content:space-between;gap:16px;padding:11px 0;display:flex}.debug-list dt{color:#8f9baa}.debug-list dd{text-align:right;margin:0}.export-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.export-actions button{color:#fff;background:#242a34;border:1px solid #ffffff1f;border-radius:10px;padding:10px 12px}.export-actions .primary-button{color:#0d1015;background:#f4f7fa;min-height:auto}.latency-panel{margin-top:18px}.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.comparison-grid article{background:#11151b;border:1px solid #ffffff12;border-radius:16px;padding:16px}.comparison-grid h3{margin:0 0 8px}.comparison-grid p{color:#aab4c0;line-height:1.55}.comparison-grid audio{max-width:none}.warning-copy{font-size:.8rem}.live-meter{background:#0f141b;border:1px solid #344152;border-radius:12px;margin:18px 0;padding:16px}.meter-scale{color:#8f9bad;justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.meter-track{background:linear-gradient(90deg,#17202b 0 50%,#242414 50% 85%,#321818 85%);border-radius:5px;height:22px;overflow:hidden}.meter-fill{background:#52c788;min-width:2px;height:100%;transition:width .1s linear}.meter-too-quiet{background:#7891ae}.meter-too-high{background:#e1a93a}.meter-clipped{background:#ef5e5e}@media (width<=560px){.metric-grid{grid-template-columns:1fr}.section-heading{flex-direction:column;align-items:flex-start}audio{max-width:none}.comparison-grid,.level-controls,.timeline-toolbar{grid-template-columns:1fr}}