:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{--bg: #0a0a0a;--surface: #111;--border: #222;--accent: #c8ff00;--accent2: #ff4d6d;--text: #f0f0f0;--muted: #555;--card: #141414}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.4}header{padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.logo{font-family:Bebas Neue,sans-serif;font-size:2rem;letter-spacing:.12em;color:var(--accent)}.logo span{color:var(--text)}.badge{font-family:Space Mono,monospace;font-size:.65rem;color:var(--muted);border:1px solid var(--border);padding:.3rem .7rem;letter-spacing:.1em;text-transform:uppercase}main{max-width:960px;margin:0 auto;padding:3rem 2rem}.upload-zone{border:1px dashed var(--border);background:var(--card);padding:4rem 2rem;text-align:center;cursor:pointer;position:relative;transition:border-color .2s,background .2s;overflow:hidden}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:#151a00}.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.upload-icon{font-size:3rem;margin-bottom:1rem;display:block;line-height:1}.upload-title{font-family:Bebas Neue,sans-serif;font-size:2rem;letter-spacing:.08em;color:var(--text);margin-bottom:.5rem}.upload-sub{color:var(--muted);font-size:.85rem;font-family:Space Mono,monospace}.file-bar{display:none;align-items:center;gap:1rem;padding:1rem 1.5rem;background:#151a00;border:1px solid var(--accent);border-top:none;font-family:Space Mono,monospace;font-size:.8rem;color:var(--accent)}.file-bar.show{display:flex}.file-bar .fname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analyze-btn{display:none;width:100%;margin-top:1.5rem;padding:1.2rem;background:var(--accent);color:#000;border:none;font-family:Bebas Neue,sans-serif;font-size:1.5rem;letter-spacing:.15em;cursor:pointer;transition:background .15s,transform .1s}.analyze-btn:hover{background:#d9ff1a;transform:translateY(-1px)}.analyze-btn:active{transform:translateY(0)}.analyze-btn.show{display:block}.analyze-btn:disabled{background:var(--muted);color:#333;cursor:not-allowed;transform:none}.progress-wrap{display:none;margin-top:1.5rem}.progress-wrap.show{display:block}.progress-label{font-family:Space Mono,monospace;font-size:.75rem;color:var(--muted);margin-bottom:.5rem;display:flex;justify-content:space-between}.progress-bar{height:2px;background:var(--border);overflow:hidden}.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .3s ease}.progress-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1rem}.step{padding:.6rem;border:1px solid var(--border);font-family:Space Mono,monospace;font-size:.65rem;color:var(--muted);text-align:center;transition:all .3s;text-transform:uppercase;letter-spacing:.05em}.step.active{border-color:var(--accent);color:var(--accent);background:#151a00}.step.done{border-color:#333;color:#444}.step.done:before{content:"✓ "}.results{display:none;margin-top:2.5rem;animation:fadeUp .5s ease forwards}.results.show{display:block}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.results-header{font-family:Space Mono,monospace;font-size:.7rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}.results-header:after{content:"";flex:1;height:1px;background:var(--border)}.metrics-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);margin-bottom:1px}.metric{background:var(--card);padding:2rem 1.5rem;position:relative;overflow:hidden}.metric:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s ease .2s}.results.show .metric:before{transform:scaleX(1)}.metric-label{font-family:Space Mono,monospace;font-size:.65rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.8rem}.metric-value{font-family:Bebas Neue,sans-serif;font-size:3.5rem;line-height:1;color:var(--text);letter-spacing:.05em}.metric-unit{font-family:Space Mono,monospace;font-size:.8rem;color:var(--muted);margin-top:.3rem}.metric-confidence{position:absolute;bottom:1rem;right:1rem;font-family:Space Mono,monospace;font-size:.6rem;color:var(--muted)}.chord-section{background:var(--card);padding:1.5rem;margin-top:1px}.chord-section-title{font-family:Space Mono,monospace;font-size:.65rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.2rem}.chord-timeline{display:flex;flex-wrap:wrap;gap:.4rem}.chord-chip{font-family:Space Mono,monospace;font-size:.8rem;padding:.4rem .8rem;border:1px solid var(--border);color:var(--text);background:var(--bg);transition:all .2s;cursor:default;white-space:nowrap}.chord-chip:hover{border-color:var(--accent);color:var(--accent)}.chord-chip.root{border-color:var(--accent2);color:var(--accent2)}.extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:1px}.extra-metric{background:var(--card);padding:1.2rem}.extra-label{font-family:Space Mono,monospace;font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}.extra-value{font-family:Bebas Neue,sans-serif;font-size:1.8rem;color:var(--text);letter-spacing:.05em}.waveform-section{margin-top:1px;background:var(--card);padding:1.5rem}.waveform-title{font-family:Space Mono,monospace;font-size:.65rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}canvas#waveform{width:100%;height:80px;display:block}.performer-note{margin-top:1px;background:#0d1a00;border:1px solid #2a3d00;padding:1.5rem}.performer-note-title{font-family:Bebas Neue,sans-serif;font-size:1.1rem;color:var(--accent);letter-spacing:.1em;margin-bottom:.8rem}.performer-note p{font-size:.9rem;color:#aaa;line-height:1.7}.performer-note strong{color:var(--text)}.error-msg{display:none;margin-top:1rem;padding:1rem 1.5rem;background:#1a0005;border:1px solid #5c0018;font-family:Space Mono,monospace;font-size:.8rem;color:var(--accent2)}.error-msg.show{display:block}footer{margin-top:4rem;padding:2rem 3rem;border-top:1px solid var(--border);font-family:Space Mono,monospace;font-size:.65rem;color:var(--muted);display:flex;justify-content:space-between;letter-spacing:.05em}@media(max-width:600px){header{padding:1.5rem}main{padding:1.5rem 1rem}.metrics-grid{grid-template-columns:1fr 1fr}.extra-grid{grid-template-columns:repeat(2,1fr)}.metric-value{font-size:2.5rem}}