*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0c0f1a;--surface:#151929;--surface-hover:#1c2137;--border:#252b42;--text:#e8eaf0;--text-dim:#7a8199;--accent:#f76e5c;--accent-glow:hsla(7,91%,66%,.25);--green:#4ade80;--green-dim:rgba(74,222,128,.15);--yellow:#facc15;--yellow-dim:rgba(250,204,21,.15);--red:#f87171;--red-dim:hsla(0,91%,71%,.15);--blue:#60a5fa;--blue-dim:rgba(96,165,250,.15);--radius:16px}body{font-family:Inter,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center}.container{width:100%;max-width:640px;padding:24px 20px}.header{text-align:center;margin-bottom:40px;padding-top:20px}.logo{font-family:Space Grotesk,sans-serif;font-size:32px;font-weight:700;letter-spacing:-1px;margin-bottom:8px}.logo span{color:var(--accent)}.tagline{color:var(--text-dim);font-size:15px}.record-section{flex-direction:column;margin-bottom:32px}.record-btn,.record-section{display:flex;align-items:center}.record-btn{width:120px;height:120px;border-radius:50%;border:3px solid var(--border);background:var(--surface);cursor:pointer;justify-content:center;transition:all .3s ease}.record-btn:hover{border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow)}.record-btn.recording{border-color:var(--accent);box-shadow:0 0 40px var(--accent-glow);animation:pulse-ring 2s ease-in-out infinite}@keyframes pulse-ring{0%,to{box-shadow:0 0 20px var(--accent-glow)}50%{box-shadow:0 0 50px var(--accent-glow),0 0 80px hsla(7,91%,66%,.1)}}.mic-icon{width:40px;height:40px;fill:var(--text-dim);transition:fill .3s ease}.record-btn.recording .mic-icon{fill:var(--accent);display:none}.stop-icon{width:28px;height:28px;background:var(--accent);border-radius:6px;display:none}.record-btn.recording .stop-icon{display:block}.record-label{margin-top:16px;font-size:14px;color:var(--text-dim);font-weight:500}.timer{font-family:Space Grotesk,sans-serif;font-size:22px;color:var(--accent);margin-top:8px}.waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:40px;margin-top:16px;opacity:0;transition:opacity .3s}.waveform.active{opacity:1}.waveform .bar{width:4px;height:8px;background:var(--accent);border-radius:2px;transition:height .1s ease}.transcript-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:32px;min-height:80px}.transcript-box .label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:10px;font-weight:600}.transcript-box .text{font-size:15px;line-height:1.7;color:var(--text);word-wrap:break-word}.filler{color:var(--accent);background:var(--accent-glow);padding:1px 5px;border-radius:4px;font-weight:600}.error-msg{background:var(--red-dim);border:1px solid hsla(0,91%,71%,.3);border-radius:var(--radius);padding:16px 20px;color:var(--red);font-size:14px;text-align:center;margin-bottom:20px}.scorecard{animation:slideUp .5s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.overall-score{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;text-align:center;margin-bottom:16px}.overall-score .score-label{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);font-weight:600;margin-bottom:8px}.overall-score .score-number{font-family:Space Grotesk,sans-serif;font-size:72px;font-weight:700;line-height:1}.overall-score .score-max{font-size:24px;color:var(--text-dim)}.overall-score .score-verdict{font-size:16px;font-weight:600;margin-top:8px}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-bottom:16px}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.metric-card .metric-icon{font-size:20px;margin-bottom:8px}.metric-card .metric-value{font-family:Space Grotesk,sans-serif;font-size:28px;font-weight:700;margin-bottom:2px}.metric-card .metric-label{font-size:12px;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.metric-badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}.badge-green{color:var(--green);background:var(--green-dim)}.badge-yellow{color:var(--yellow);background:var(--yellow-dim)}.badge-red{color:var(--red);background:var(--red-dim)}.badge-blue{color:var(--blue);background:var(--blue-dim)}.tips-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}.tips-card .tips-title{font-size:14px;font-weight:700;margin-bottom:12px}.tip{display:flex;gap:10px;align-items:baseline;margin-bottom:8px;font-size:14px;color:var(--text-dim);line-height:1.5}.tip .dot{width:6px;height:6px;min-width:6px;background:var(--accent);border-radius:50%;margin-top:7px}.try-again-btn{width:100%;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;margin-bottom:40px}.try-again-btn:hover{background:var(--surface-hover);border-color:var(--accent)}.browser-note{text-align:center;font-size:12px;color:var(--text-dim);margin-top:8px}@media (max-width:480px){.metrics-grid{grid-template-columns:1fr}.overall-score .score-number{font-size:56px}.logo{font-size:26px}}