:root{--bg-color:#0f172a;--glass-bg:#1e293bb3;--glass-border:#ffffff1a;--accent:#3b82f6;--accent-glow:#3b82f680;--danger:#ef4444;--danger-glow:#ef444480;--text-primary:#f8fafc;--text-secondary:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(circle at 50% 0,#3b82f626,#0000 50%),radial-gradient(circle at 50% 100%,#ef44441a,#0000 50%);justify-content:center;align-items:center;min-height:100dvh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;overflow:hidden}.app-container{flex-direction:column;width:100%;max-width:480px;height:100dvh;max-height:850px;padding:2rem;display:flex;position:relative}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 8px 32px #0000004d}.header{text-align:center;margin-bottom:2rem;padding:1.5rem}.title{background:linear-gradient(135deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;margin-bottom:.5rem;font-size:1.75rem;font-weight:800}.subtitle{color:var(--text-secondary);font-size:.875rem;font-weight:500}.radar-container{justify-content:center;align-items:center;width:260px;height:260px;margin:2rem auto;display:flex;position:relative}.radar-circle{border:1px solid var(--glass-border);border-radius:50%;position:absolute;box-shadow:inset 0 0 20px #3b82f61a}.radar-circle-1{width:100%;height:100%}.radar-circle-2{width:66%;height:66%}.radar-circle-3{width:33%;height:33%}.radar-sweep{transform-origin:100% 100%;background:conic-gradient(from 180deg at 100% 100%,#0000 0deg,#3b82f666 90deg);border-radius:100% 0 0;width:50%;height:50%;animation:4s linear infinite sweep;position:absolute;top:0;right:50%}@keyframes sweep{to{transform:rotate(360deg)}}.center-mic{z-index:10;background:var(--bg-color);border:2px solid var(--accent);width:72px;height:72px;box-shadow:0 0 20px var(--accent-glow);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}.center-mic:hover{box-shadow:0 0 35px var(--accent-glow);transform:scale(1.1)}.center-mic.listening{animation:2s infinite pulse-mic}@keyframes pulse-mic{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 25px #3b82f600}to{box-shadow:0 0 #3b82f600}}.sound-bar-container{justify-content:center;align-items:flex-end;gap:6px;height:80px;margin:2rem 0;display:flex}.sound-bar{background:var(--accent);width:6px;box-shadow:0 0 8px var(--accent-glow);border-radius:3px;transition:height 80ms ease-out,background .3s}.sound-bar.danger{background:var(--danger);box-shadow:0 0 12px var(--danger-glow)}.controls{flex-direction:column;gap:1rem;margin-top:auto;display:flex}.slider-group{flex-direction:column;gap:1rem;display:flex}.slider-header{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.875rem;font-weight:500;display:flex}input[type=range]{-webkit-appearance:none;background:0 0;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 15px var(--accent-glow);border-radius:50%;margin-top:-8px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:var(--glass-border);border-radius:2px;width:100%;height:4px}.stats-panel{justify-content:space-between;margin-top:1.5rem;display:flex;background:#0003!important;padding:1.25rem!important}.stat-item{flex-direction:column;align-items:center;gap:.35rem;display:flex}.stat-value{color:var(--text-primary);font-family:monospace;font-size:1.35rem;font-weight:700}.stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.text-accent{color:var(--accent)}.text-secondary{color:var(--text-secondary)}