.demo{text-align:center;padding:40px 0 64px}.demo .lead{margin-bottom:8px}.error{color:#ffb4b4;margin-top:18px}.muted{color:var(--muted)}.small{font-size:14px}.btn:disabled{opacity:.6;cursor:default}.panel{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:18px;gap:22px;max-width:620px;margin:32px auto 0;padding:24px;display:grid}.row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.actions.left{justify-content:flex-start;margin-top:0}.meters{gap:14px;display:grid}.meter-label{color:var(--muted);align-items:center;gap:8px;margin-bottom:6px;font-size:14px;display:flex}.meter-track{background:#ffffff10;border-radius:6px;height:10px;overflow:hidden}.meter-bar{transform-origin:0;background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:transform 60ms linear;transform:scaleX(0)}.nmeter{gap:8px;display:grid}.nmeter-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.nmeter-head .meter-label{margin-bottom:0}.nmeter-value{font-variant-numeric:tabular-nums;background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:17px;font-weight:700}.nmeter-track{background:#ffffff10;border-radius:8px;height:14px;position:relative;overflow:hidden}.nmeter-bar{transform-origin:0;border-radius:8px;transition:transform 60ms linear;position:absolute;inset:0;transform:scaleX(0)}.nmeter-bar.in{background:repeating-linear-gradient(135deg,#fff5 0 4px,#0000 4px 8px)}.nmeter-bar.out{background:linear-gradient(90deg, var(--accent), var(--accent-2))}.nmeter-legend{color:var(--muted);gap:18px;font-size:13px;display:flex}.nmeter-legend span{align-items:center;gap:6px;display:inline-flex}.key{border-radius:5px;width:18px;height:9px;display:inline-block}.key.in{background:repeating-linear-gradient(135deg,#fff7 0 3px,#0000 3px 6px)}.key.out{background:linear-gradient(90deg, var(--accent), var(--accent-2))}[dir=rtl] .nmeter-bar{transform-origin:100%}@media (prefers-reduced-motion:reduce){.nmeter-bar{transition:none}}.dot{background:#4ade80;border-radius:50%;width:8px;height:8px;box-shadow:0 0 8px #4ade80}.toggle{cursor:pointer;align-items:center;gap:10px;font-weight:600;display:inline-flex}.toggle input{opacity:0;width:1px;height:1px;position:absolute}.toggle .track{background:#3a3a55;border-radius:12px;width:42px;height:24px;transition:background .15s;position:relative}.toggle .thumb{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle input:checked+.track{background:linear-gradient(135deg, var(--accent), var(--accent-2))}.toggle input:checked+.track .thumb{transform:translate(18px)}.toggle input:focus-visible+.track{outline-offset:2px;outline:2px solid #a5a5ff}.choices{border:0;flex-wrap:wrap;gap:8px;padding:0;display:flex}.choices legend{color:var(--muted);margin-bottom:8px;padding:0;font-size:14px}.choice{border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:8px 12px;font-size:15px}.choice input{opacity:0;width:1px;height:1px;position:absolute}.choice.on{border-color:var(--accent);background:#7c7cff1f}.choice:has(input:focus-visible){outline-offset:2px;outline:2px solid #a5a5ff}.recorder .row{justify-content:flex-start}.seg{border:1px solid var(--line);border-radius:10px;display:inline-flex;overflow:hidden}.seg button{color:var(--muted);font:600 14px var(--font);cursor:pointer;background:0 0;border:0;padding:10px 14px}.seg button.on{color:var(--fg);background:#7c7cff2a}[dir=rtl] .meter-bar{transform-origin:100%}[dir=rtl] .toggle input:checked+.track .thumb{transform:translate(-18px)}[dir=rtl] .toggle .thumb{left:auto;right:3px}.demo-grid{text-align:start;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"mic mic""quality compare";gap:16px;max-width:860px;margin:32px auto 0;display:grid}.demo-card{align-content:start;gap:16px;padding:22px;display:grid}.demo-card h2{flex-wrap:wrap;align-items:center;gap:10px;font-size:17px;display:flex}.mic-card{grid-area:mic}.quality-card{grid-area:quality}.compare-card{grid-area:compare}.step{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));border-radius:8px;place-items:center;width:26px;height:26px;font-size:13px;display:inline-grid}.demo-card.idle{opacity:.55}.demo-card.idle .step{background:#3a3a55}.choices.stack{flex-direction:column}.choices.stack .choice{width:100%}fieldset:disabled .choice{cursor:default}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.meter-bar{transition:none}}@media (width<=680px){.demo-grid{grid-template-columns:1fr;grid-template-areas:"mic""quality""compare"}}.strength{gap:8px;display:grid}.strength label{justify-content:space-between;font-weight:600;display:flex}.strength input[type=range]{width:100%;accent-color:var(--accent);height:24px}.progress{background:#ffffff10;border-radius:6px;height:10px;overflow:hidden}.progress-bar{transform-origin:0;background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:transform .1s linear}[dir=rtl] .progress-bar{transform-origin:100%}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.players{gap:14px;display:grid}.players figure{gap:6px;margin:0;display:grid}.players figcaption{font-size:14px;font-weight:600}.players audio{width:100%}.demo-error{text-align:start;max-width:560px;margin:32px auto 0}.demo-error p{color:#ffb4b4}.demo-one{text-align:start;max-width:720px;margin:32px auto 0}.demo-one h2{font-size:17px}.controls{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:16px;display:grid}.field{gap:8px;display:grid}.field label{justify-content:space-between;gap:8px;font-weight:600;display:flex}.field select{border:1px solid var(--line);width:100%;min-height:40px;color:var(--fg);font:15px var(--font);background:#15152a;border-radius:10px;padding:8px 12px}.field input[type=range]{width:100%;accent-color:var(--accent);height:40px}@media (width<=680px){.controls{grid-template-columns:1fr}}.rec-dot{vertical-align:1px;background:#ff4d5e;border-radius:50%;width:10px;height:10px;margin-inline-end:8px;display:inline-block;box-shadow:0 0 0 3px #ff4d5e33}.btn:disabled .rec-dot{animation:1s ease-in-out infinite rec}@keyframes rec{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.btn:disabled .rec-dot{animation:none}}