@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@500;600;700&display=swap');
:root{--bg:#07130f;--green:#9cff2e;--white:#f4fff8;--danger:#ff5c61}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white);font-family:Inter,system-ui,sans-serif}body{min-height:100svh;overflow-x:hidden;background:radial-gradient(circle at 50% 35%,#123526 0,transparent 44%),linear-gradient(160deg,#07130f,#091712 65%,#050d0a)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app{min-height:100svh;max-width:540px;margin:auto;padding:max(20px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between}.brand{font:700 17px/1 'Barlow Condensed',sans-serif;letter-spacing:.16em}.brand-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--green);box-shadow:0 0 16px #9cff2e99}.reset{border:1px solid #294137;background:#10231c;color:#bdd0c7;border-radius:999px;padding:10px 14px;font:700 12px/1 Inter;letter-spacing:.08em}.reset:active{transform:scale(.96)}.hero{flex:1;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center}.eyebrow{margin:10px 0 -8px;color:var(--green);font:700 16px 'Barlow Condensed';letter-spacing:.32em}.counter{font:800 clamp(150px,48vw,250px)/.84 'Barlow Condensed',sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums;text-shadow:0 8px 50px #0008}.counter.bump{animation:bump .18s ease-out}.status{display:flex;align-items:center;gap:9px;color:#a6bbb1;font:700 12px Inter;letter-spacing:.13em}.status-dot{width:8px;height:8px;border-radius:50%;background:#657b70}.listening .status-dot{background:var(--green);box-shadow:0 0 12px #9cff2e}.calibrating .status-dot{background:#ffd166;animation:pulse .7s infinite alternate}.error .status-dot{background:var(--danger)}.controls{background:linear-gradient(180deg,#10231cdd,#0a1914ee);border:1px solid #20382e;border-radius:28px;padding:18px;box-shadow:0 22px 70px #0007}.toggle{width:100%;height:72px;border:0;border-radius:19px;background:var(--green);color:#0a160f;font:800 20px 'Barlow Condensed';letter-spacing:.12em;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 8px 30px #9cff2e24}.toggle.listening{background:#20352c;color:#eafff1;border:1px solid #3d5b4e}.toggle:active{transform:translateY(1px) scale(.99)}.mic-icon{width:25px;height:25px}.mic-icon svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mic-icon svg path{fill:none}.meter-wrap{margin:21px 4px 17px}.meter{position:relative;height:8px;border-radius:8px;background:#263c33;overflow:visible}.meter-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#58c72b,var(--green));transition:width .07s linear}.threshold-marker{position:absolute;top:-3px;bottom:-3px;left:58%;width:2px;background:#fff9;border-radius:2px}.meter-labels,.sensitivity{display:flex;justify-content:space-between;margin-top:8px;color:#799087;font:700 10px Inter;letter-spacing:.12em}.sensitivity{margin:0 4px 8px}.sensitivity span:last-child{color:var(--green)}input[type=range]{width:100%;accent-color:var(--green)}.tip{margin:14px 5px 2px;color:#82978e;font-size:11px;line-height:1.5;text-align:center}.tip strong{color:#b8cbc2}.simulate{width:100%;margin-top:10px;border:1px dashed var(--green);color:var(--green);background:transparent;border-radius:12px;padding:10px}.flash{position:fixed;inset:0;pointer-events:none;opacity:0}.flash.hit{animation:flash .22s ease-out}.resetting .counter{animation:reset .25s ease}.permission-help{color:#ffc6c6}@keyframes bump{50%{transform:scale(1.13);color:var(--green)}}@keyframes flash{0%{opacity:.38;box-shadow:inset 0 0 50px 7px var(--green)}100%{opacity:0;box-shadow:inset 0 0 0 0 var(--green)}}@keyframes pulse{to{opacity:.35}}@keyframes reset{50%{transform:scale(.75);opacity:.3}}@media(min-width:600px){.app{padding-top:28px}.hero{min-height:390px}.controls{margin-bottom:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}