:root{--bg-primary:#0a0a0f;--bg-card:#ffffff0a;--border-card:#ffffff14;--text-main:#fff;--text-muted:#8a8d93;--accent:#5e6ad2;--accent-glow:#5e6ad280;--ring-gradient-empty:#ffffff1a;--ring-gradient-full:url(#ringGrad);--success:#34d399;--warning:#fbbf24}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);background-image:radial-gradient(circle at 50% -20%, var(--accent-glow), transparent 60%);color:var(--text-main);justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;display:flex}.app-container{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-card);border-radius:24px;flex-direction:column;gap:2rem;width:100%;max-width:480px;padding:2rem;display:flex;box-shadow:0 30px 60px #0000004d}header{text-align:center}header h1{letter-spacing:-.02em;font-size:1.8rem;font-weight:600}.subtitle{color:var(--text-muted);margin-top:.25rem;font-size:.95rem}main{flex-direction:column;gap:2rem;display:flex}.meter-wrapper{width:240px;height:240px;margin:0 auto;position:relative}.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}.bg-ring{stroke:var(--ring-gradient-empty);stroke-width:12px;stroke-linecap:round}.fg-ring{stroke:var(--accent);stroke-width:12px;stroke-linecap:round;stroke-dasharray:565.48;stroke-dashoffset:565.48px;transition:stroke-dashoffset .1s linear,stroke .3s}.meter-content{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#scoreValue{font-size:3.5rem;font-weight:800;line-height:1}.meter-label{color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem;font-size:.85rem}.metrics-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.metric-card{border:1px solid var(--border-card);text-align:center;background:#0003;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:1rem .5rem;transition:transform .2s;display:flex}.metric-card:hover{transform:translateY(-2px)}.m-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.75rem}.m-value{color:var(--text-main);font-size:1.25rem;font-weight:600}.m-sub{color:var(--accent);margin-top:.2rem;font-size:.75rem;font-weight:600}.controls{justify-content:center;display:flex}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);border:none;border-radius:100px;align-items:center;gap:.5rem;padding:1rem 2rem;font-family:inherit;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}.btn-primary:hover{box-shadow:0 6px 20px var(--accent-glow);background:#6d7af3;transform:translateY(-2px)}.btn-primary.recording{background:#e53e3e;box-shadow:0 4px 15px #e53e3e66}.btn-primary.recording:hover{background:#fc5252}.warning-banner{color:var(--warning);text-align:center;opacity:1;background:#fbbf241a;border:1px solid #fbbf2433;border-radius:8px;padding:.75rem 1rem;font-size:.85rem;font-weight:500;transition:opacity .3s}.warning-banner.hidden{opacity:0;pointer-events:none}.chart-container{border:1px solid var(--border-card);background:#0003;border-radius:16px;width:100%;height:160px;padding:1rem;position:relative}.sensitivity-control{flex-direction:column;align-items:center;gap:.5rem;display:flex}#sensitivitySlider{-webkit-appearance:none;background:#ffffff1a;border-radius:4px;outline:none;width:100%;max-width:250px;height:6px}#sensitivitySlider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%}.balance-panel{flex-direction:column;align-items:center;width:100%;margin-top:1.5rem;margin-bottom:2rem;display:flex}.balance-bar-container{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:14px;width:85%;max-width:320px;height:28px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #00000080}.balance-zone{text-align:center;color:#fff9;text-transform:uppercase;letter-spacing:.5px;flex:1;font-size:10px;font-weight:700;line-height:28px}.breathy-zone{background:linear-gradient(90deg,#50a0f040,#0000)}.balanced-zone{background:#64c87826}.pressed-zone{background:linear-gradient(-90deg,#f0645040,#0000)}.balance-needle{z-index:10;background-color:#fff;border-radius:2px;width:4px;height:100%;transition:left .15s ease-out,opacity .3s;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 10px #fff}.balance-label{color:#8a8d93;margin-top:.8rem;font-size:15px;font-weight:500}