:root{--bg-primary: #090d16;--bg-surface: #131b2e;--bg-surface-elevated: #1a243d;--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--accent-cyan: #38bdf8;--accent-purple: #818cf8;--accent-indigo: #6366f1;--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--glow-cyan: 0 0 25px rgba(56, 189, 248, .4);--glow-purple: 0 0 25px rgba(129, 140, 248, .4);--glow-emerald: 0 0 25px rgba(16, 185, 129, .4);--glow-amber: 0 0 25px rgba(245, 158, 11, .4);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-sans);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;background-image:radial-gradient(circle at 50% 10%,rgba(99,102,241,.12) 0%,transparent 60%),radial-gradient(circle at 80% 80%,rgba(56,189,248,.08) 0%,transparent 50%)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(19,27,46,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}.logo-group{display:flex;align-items:center;gap:.75rem}.logo-badge{font-size:.75rem;font-weight:700;letter-spacing:.08em;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-indigo));padding:.25rem .6rem;border-radius:6px;color:#fff;text-transform:uppercase}.app-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--text-main)}.header-actions{display:flex;align-items:center;gap:1rem}.btn-icon{background:var(--bg-surface);border:1px solid rgba(255,255,255,.1);color:var(--text-muted);width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.btn-icon:hover{background:var(--bg-surface-elevated);color:var(--text-main);border-color:#fff3}.main-container{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:1.5rem 1.5rem 3rem;display:flex;flex-direction:column;gap:1.5rem}.pitch-hero-card{background:var(--bg-surface);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:2rem;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000004d}.pitch-hero-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-cyan),var(--accent-purple),transparent)}.status-badge-container{position:absolute;top:1.25rem;left:1.5rem;display:flex;align-items:center;gap:.5rem}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-dim);transition:all .3s ease}.status-text{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.status-dot.idle{background:var(--text-dim)}.status-dot.calibrating{background:var(--accent-amber);box-shadow:var(--glow-amber)}.status-dot.silence{background:var(--accent-cyan)}.status-dot.noise{background:var(--accent-amber)}.status-dot.voice{background:var(--accent-emerald);box-shadow:var(--glow-emerald)}.pitch-main-value{font-family:var(--font-sans);font-size:5.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--text-main);margin-top:.5rem;min-height:5.5rem;display:flex;align-items:center;transition:color .2s ease,transform .2s ease}.pitch-main-value.active{color:var(--accent-cyan);text-shadow:var(--glow-cyan)}.pitch-details{display:flex;align-items:center;gap:1.5rem;margin-top:.5rem}.frequency-value{font-family:var(--font-mono);font-size:1.35rem;color:var(--text-muted);font-weight:600}.cents-value{font-family:var(--font-mono);font-size:1.35rem;font-weight:700;color:var(--text-muted);padding:.2rem .75rem;border-radius:8px;background:rgba(255,255,255,.05)}.cents-value.in-tune{color:var(--accent-emerald);background:rgba(16,185,129,.15)}.cents-value.sharp{color:var(--accent-amber)}.cents-value.flat{color:var(--accent-cyan)}.cents-meter-container{width:100%;max-width:480px;margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}.cents-scale-track{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:4px;position:relative}.cents-center-mark{position:absolute;top:-4px;left:50%;transform:translate(-50%);width:2px;height:16px;background:rgba(255,255,255,.4);border-radius:1px}.cents-needle{position:absolute;top:-6px;left:50%;width:16px;height:20px;background:var(--accent-cyan);border-radius:3px;transform:translate(-50%);box-shadow:var(--glow-cyan);transition:left .1s cubic-bezier(.1,.9,.2,1);opacity:.3}.cents-needle.active{opacity:1}.cents-labels{width:100%;display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-dim);font-family:var(--font-mono)}.register-card{background:var(--bg-surface);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:1.75rem 2rem;display:flex;flex-direction:column;gap:1.25rem;position:relative;overflow:hidden}.register-header{display:flex;justify-content:space-between;align-items:center}.register-title{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.mix-badge{font-size:.85rem;font-weight:800;letter-spacing:.1em;padding:.3rem .9rem;border-radius:20px;background:rgba(255,255,255,.06);color:var(--text-dim);transition:all .3s ease;border:1px solid transparent}.mix-badge.active{background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(236,72,153,.3));color:#f472b6;border-color:#f472b680;box-shadow:0 0 20px #f472b64d;transform:scale(1.05)}.register-labels{display:flex;justify-content:space-between;align-items:flex-end}.label-chest,.label-falsetto{display:flex;flex-direction:column;gap:.2rem}.label-chest .name{font-size:1rem;font-weight:800;letter-spacing:.05em;color:var(--accent-cyan)}.label-falsetto{text-align:right}.label-falsetto .name{font-size:1rem;font-weight:800;letter-spacing:.05em;color:#ec4899}.label-chest .sub,.label-falsetto .sub{font-size:.8rem;color:var(--text-dim)}.label-chest .pct,.label-falsetto .pct{font-family:var(--font-mono);font-size:1.5rem;font-weight:800;color:var(--text-main);margin-top:.25rem}.register-bar-container{width:100%;height:24px;background:rgba(15,23,42,.8);border-radius:12px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.register-fill{height:100%;background:linear-gradient(90deg,#38bdf8 0%,#818cf8 35%,#c084fc 65%,#f472b6 100%);width:50%;transition:width .15s cubic-bezier(.1,.9,.2,1);border-radius:12px}.register-slider-needle{position:absolute;top:0;bottom:0;left:50%;width:4px;background:#ffffff;box-shadow:0 0 10px #fff;transform:translate(-50%);transition:left .15s cubic-bezier(.1,.9,.2,1)}.register-zone-marks{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;display:flex}.zone-mark{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.2)}.zone-mark.mark-30{left:30%}.zone-mark.mark-70{left:70%}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.metric-card{background:var(--bg-surface);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}.metric-header{display:flex;justify-content:space-between;align-items:center}.metric-label{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.metric-value{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--text-main)}.metric-bar-bg{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;position:relative}.metric-bar-fill{height:100%;background:var(--accent-indigo);border-radius:3px;width:0%;transition:width .1s ease}.metric-bar-gate-mark{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-emerald);display:none}.visualizer-card{background:var(--bg-surface);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.visualizer-header{display:flex;justify-content:space-between;align-items:center}.visualizer-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.visualizer-legend{display:flex;gap:1rem;font-size:.75rem;color:var(--text-dim)}.legend-item{display:flex;align-items:center;gap:.35rem}.legend-color{width:8px;height:8px;border-radius:2px}.legend-color.harmonic{background:var(--accent-cyan)}.legend-color.gate{background:var(--accent-emerald)}.legend-color.noise{background:var(--accent-rose)}#spectrum-canvas{width:100%;height:120px;background:#0b1120;border-radius:10px;display:block}.controls-bottom-bar{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1rem}.mic-action-container{display:flex;flex-direction:column;align-items:center;gap:.75rem}.mic-button{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 25px #0006;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;outline:none}.mic-button:hover{transform:scale(1.06);border-color:#ffffff4d}.mic-button svg{width:44px;height:44px;fill:var(--text-muted);transition:fill .3s ease}.mic-button.active{background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:#38bdf8;box-shadow:0 0 35px #38bdf880}.mic-button.active svg{fill:#fff}.mic-button.calibrating{border-color:var(--accent-amber);animation:pulse-amber 1.5s infinite}.mic-button.analyzing{animation:pulse-blue 2s infinite}@keyframes pulse-amber{0%{box-shadow:0 0 #f59e0b99}70%{box-shadow:0 0 0 20px #f59e0b00}to{box-shadow:0 0 #f59e0b00}}@keyframes pulse-blue{0%{box-shadow:0 0 #38bdf899}70%{box-shadow:0 0 0 22px #38bdf800}to{box-shadow:0 0 #38bdf800}}.mic-state-label{font-size:.95rem;font-weight:600;color:var(--text-muted);text-align:center}.settings-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;background:var(--bg-surface);border-left:1px solid rgba(255,255,255,.1);padding:2rem;display:flex;flex-direction:column;gap:1.5rem;z-index:200;box-shadow:-10px 0 30px #00000080;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}.settings-drawer.open{transform:translate(0)}.settings-header{display:flex;justify-content:space-between;align-items:center}.settings-title{font-size:1.15rem;font-weight:700;color:var(--text-main)}.settings-group{display:flex;flex-direction:column;gap:.5rem}.settings-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;color:var(--text-muted)}.settings-val{font-family:var(--font-mono);color:var(--accent-cyan)}.settings-slider{width:100%;accent-color:var(--accent-cyan)}.btn-secondary{background:var(--bg-surface-elevated);color:var(--text-main);border:1px solid rgba(255,255,255,.15);padding:.75rem 1rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#ffffff4d}.guide-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:1rem;font-size:.8rem;color:var(--text-dim);line-height:1.5}.guide-box ul{padding-left:1.2rem;margin-top:.5rem}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s ease}.overlay.active{opacity:1;pointer-events:auto}@media (max-width: 768px){.pitch-main-value{font-size:4rem}.main-container{padding:1rem 1rem 2.5rem}.settings-drawer{width:100%}}