:root{color-scheme:dark;--bg:#0b1112;--bg-2:#101a1b;--card:#12201f;--card-2:#162827;--card-edge:#1e3331;--card-edge-2:#2b4643;--text:#e8f4f0;--text-dim:#8fa8a1;--accent:#35e0b4;--accent-dim:#1d5c4d;--accent-glow:#35e0b473;--warn:#ffb64d;--bad:#ff6d5a;--bad-edge:#55241e;--primary-grad:linear-gradient(180deg, #2fcda6, #1fae8b);--primary-grad-hover:linear-gradient(180deg, #3adcb4, #23bb95);--primary-edge:#2fd3ab;--primary-edge-hover:#3fe3b8;--toast-bg:#182624;--radius:16px}*{box-sizing:border-box}html,body{background:radial-gradient(120% 90% at 50% -10%, #14302c 0%, var(--bg) 55%) fixed;height:100%;color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{max-width:460px;min-height:100%;padding:max(10px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex}header{justify-content:space-between;align-items:center;padding:10px 2px 18px;display:flex}.brand{letter-spacing:.2px;font-size:19px;font-weight:800}.brand .accent{color:var(--accent)}main{flex:1}.view{padding:4px 0 24px}.view:focus{outline:none}.view:not(.hidden){animation:.32s cubic-bezier(.2,.8,.3,1) both view-in}h1{letter-spacing:-.5px;margin:18px 0 10px;font-size:clamp(30px,9vw,42px);font-weight:800;line-height:1.08}.sub{color:var(--text-dim);margin:0 0 22px;font-size:15px;line-height:1.55}.raw-note{color:var(--accent);font-style:normal}.hint{color:var(--text-dim);margin:10px 0;font-size:13px;line-height:1.5}.hint.bad{color:var(--bad)}.btn{appearance:none;border:1px solid var(--card-edge);background:var(--card);color:var(--text);font:inherit;border-radius:var(--radius);cursor:pointer;touch-action:manipulation;padding:14px 20px;font-weight:650;transition:transform 60ms,background .15s,border-color .15s,color .15s,box-shadow .15s}.btn:active{transform:scale(.975)}.btn:disabled{cursor:default}.btn.primary{background:var(--primary-grad);border-color:var(--primary-edge);color:#04211a}.btn.primary:disabled{background:var(--accent-dim);color:#0a2d25}.btn.ghost{color:var(--text);background:#ffffff0d;border-color:#0000}.btn.big{width:100%;padding:18px 20px;font-size:17px}.btn.small{border-radius:12px;padding:9px 14px;font-size:13px}.btn.ring{border-radius:999px;width:84px;height:84px;padding:0;font-size:13px}.btn.ring[aria-pressed=true]{border-color:var(--warn);color:var(--warn);background:color-mix(in srgb, var(--warn) 16%, var(--card))}.btn.ghost.danger{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 45%, transparent);background:color-mix(in srgb, var(--bad) 8%, transparent)}@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--card-2);border-color:var(--card-edge-2)}.btn.primary:hover{background:var(--primary-grad-hover);border-color:var(--primary-edge-hover)}.btn.ghost:hover{background:#ffffff1a}.btn.ghost.danger:hover{border-color:color-mix(in srgb, var(--bad) 60%, transparent);color:var(--bad);background:color-mix(in srgb, var(--bad) 14%, transparent)}}@media (hover:none){.btn:not(.primary):active{background:var(--card-2);border-color:var(--card-edge-2)}.btn.ghost:active{background:#ffffff1f}.btn.ghost.danger:active{border-color:color-mix(in srgb, var(--bad) 60%, transparent);color:var(--bad);background:color-mix(in srgb, var(--bad) 14%, transparent)}}.btn:focus-visible,.select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.row{align-items:center;gap:10px;display:flex}.row>.btn{flex:1}.row>.btn.small,.row>.btn.ghost,.row>.btn.ring{flex:none}.btn.block{width:100%;margin:10px 0;display:block}.view>.btn.big.ghost{margin-top:14px}.label-row{justify-content:space-between;margin-bottom:8px}.label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);font-size:12px;font-weight:700}.mini{color:var(--text-dim);font-size:12px}.label-row .label{white-space:nowrap;flex:none}.label-row .mini{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}#mic-meter,#listen-meter{background:var(--bg-2);border:1px solid var(--card-edge);border-radius:999px;height:12px;margin:6px 0 18px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #00000059}#mic-meter .fill,#listen-meter .fill{background:linear-gradient(90deg, var(--accent-dim), var(--accent));width:0%;height:100%;transition:width .1s ease-out;display:block}#mic-meter .peak,#listen-meter .peak{background:linear-gradient(180deg, #7bffd9, var(--accent));width:3px;box-shadow:0 0 6px var(--accent-glow);border-radius:2px;position:absolute;top:2px;bottom:2px;transform:translate(-1.5px)}.card{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);margin-bottom:22px;padding:16px}.divider{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;align-items:center;gap:10px;margin:18px 0 10px;font-size:11px;display:flex}.divider:before,.divider:after{content:"";background:var(--card-edge);flex:1;height:1px}.qr-frame{background:var(--card);border:1px solid var(--card-edge);border-radius:22px;width:min(84vw,364px);margin:14px auto 4px;padding:12px;position:relative;box-shadow:0 6px 30px #00000059}.qr-frame .qr{aspect-ratio:1;width:100%;height:auto;image-rendering:pixelated;background:#fff;border-radius:12px;margin:0;display:block}.qr-frame+.hint,.scan-wrap+.hint,.big-pulse+.hint{text-align:center}.scan-wrap{border-radius:var(--radius);aspect-ratio:1;background:#000;margin:14px 0 0;position:relative;overflow:hidden}.scan-wrap video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.scan-frame{border:2px solid color-mix(in srgb, var(--accent) 65%, transparent);border-radius:18px;position:absolute;inset:12%;overflow:hidden;box-shadow:0 0 0 200vmax #040a0a73}.scan-frame:after{content:"";background:linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent);height:2.5px;box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);border-radius:2px;animation:2s ease-in-out infinite alternate sweep;position:absolute;top:8%;left:10%;right:10%}.pulse{background:var(--accent);border-radius:50%;width:14px;height:14px;animation:1.4s ease-in-out infinite pulse}.big-pulse{width:20px;height:20px;margin:14px auto}.list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.list li{background:var(--card);border:1px solid var(--card-edge);border-radius:14px;align-items:center;gap:10px;padding:12px 14px;font-size:14px;transition:background .3s,border-color .3s;display:flex}.list .dot{background:var(--accent);border-radius:50%;flex:none;width:9px;height:9px;transition:background .4s,box-shadow .4s}.list .dot:not(.bad){animation:2.4s ease-in-out infinite dot-breathe}.list .dot.bad{background:var(--bad)}.list .meta{color:var(--text-dim);white-space:nowrap;margin-left:auto;font-size:12.5px;transition:color .4s}.list .meta.bad{color:var(--bad)}.empty-state{text-align:center;color:var(--text-dim);border:1.5px dashed var(--card-edge);border-radius:14px;margin:8px 0 22px;padding:16px 14px;font-size:13.5px;line-height:1.5;animation:.3s both fade-in}.listen-controls{flex-direction:column;align-items:center;gap:18px;margin:18px 0;display:flex}.select{appearance:none;background-color:var(--bg-2);border:1px solid var(--card-edge);width:100%;color:var(--text);font:inherit;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238fa8a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;border-radius:12px;margin:0 0 10px;padding:10px 34px 10px 12px;font-size:13px}.select:focus{border-color:var(--accent-dim);outline:none}.stats{color:var(--text-dim);text-align:center;font-variant-numeric:tabular-nums;margin:6px 0 22px;font-size:12.5px;line-height:1.45}.stats.warn{color:var(--warn)}#toast{left:50%;bottom:max(22px, env(safe-area-inset-bottom));background:var(--toast-bg);border:1px solid var(--card-edge);max-width:min(88vw,420px);color:var(--text);z-index:50;border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:1.45;transition:opacity .22s,transform .22s;position:fixed;transform:translate(-50%);box-shadow:0 8px 40px #00000073}#toast:not(.out){animation:.3s cubic-bezier(.2,.8,.3,1) both toast-in}#toast.out{opacity:0;transform:translate(-50%)translateY(10px)}#toast.warn{border-color:color-mix(in srgb, var(--warn) 45%, transparent)}#toast.bad{border-color:color-mix(in srgb, var(--bad) 45%, transparent)}.hidden{display:none!important}@keyframes view-in{0%{opacity:0;transform:translateY(10px)}}@keyframes fade-in{0%{opacity:0}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(14px)}}@keyframes pulse{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}@keyframes dot-breathe{0%,to{box-shadow:0 0 6px #35e0b459}50%{box-shadow:0 0 11px var(--accent-glow)}}@keyframes sweep{0%{top:8%}to{top:90%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}