:root{--n-va-paper: #f1eee4;--n-va-ink: #10242a;--n-va-muted: #52676b;--n-va-panel: #e4ded0;--n-va-panel-soft: #faf8f2;--n-va-canvas: #06161c;--n-va-grid: #254048;--n-va-a: #35d6c5;--n-va-b: #ff739e;--n-va-a-line: #b8fff6;--n-va-b-line: #ffd0df;--n-va-cursor: #ffe99a;--n-va-border: #a9afa7;--n-va-shadow: rgba(10, 28, 33, .18);--n-va-glow-a: rgba(53, 214, 197, .22);--n-va-glow-b: rgba(255, 115, 158, .18);--n-va-white: #fff;--n-va-black: #000}.theme-dark{--n-va-paper: #111c20;--n-va-ink: #eef4ee;--n-va-muted: #a7b8b7;--n-va-panel: #1c2b2e;--n-va-panel-soft: #162326;--n-va-canvas: #020a0d;--n-va-grid: #1d363d;--n-va-a: #43e7d5;--n-va-b: #ff82aa;--n-va-a-line: #c4fff8;--n-va-b-line: #ffd7e3;--n-va-cursor: #ffefa4;--n-va-border: #42575a;--n-va-shadow: rgba(0, 0, 0, .42);--n-va-glow-a: rgba(67, 231, 213, .2);--n-va-glow-b: rgba(255, 130, 170, .17);--n-va-white: #fff;--n-va-black: #000}.voice-spectrogram{position:relative;overflow:hidden;color:var(--n-va-ink);background:radial-gradient(circle at 10% 2%,var(--n-va-glow-a),transparent 28%),radial-gradient(circle at 92% 22%,var(--n-va-glow-b),transparent 26%),var(--n-va-paper);border:1px solid var(--n-va-border);border-radius:1.8rem;box-shadow:0 1.8rem 4rem var(--n-va-shadow)}.voice-spectrogram button,.voice-spectrogram input{font-size:inherit}.voice-spectrogram button{color:var(--n-va-ink)}.voice-spectrogram-privacy{display:flex;align-items:center;gap:.8rem;padding:.85rem clamp(1rem,3vw,2rem);color:var(--n-va-muted);background:var(--n-va-panel-soft);border-bottom:1px solid var(--n-va-border)}.voice-spectrogram-privacy span{flex:0 0 auto;padding:.28rem .58rem;color:var(--n-va-canvas);background:var(--n-va-a);border-radius:99rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.voice-spectrogram-privacy p,.voice-spectrogram-comparison p,.voice-spectrogram-educational{margin:0}.voice-spectrogram-load,.voice-spectrogram-comparison{padding:clamp(1.1rem,3vw,2rem)}.voice-spectrogram-section-intro,.voice-spectrogram-instrument-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.voice-spectrogram-kicker{margin:0;font-size:clamp(.92rem,1.8vw,1.15rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase}.voice-spectrogram-section-intro>span{color:var(--n-va-muted);font-size:.82rem}.voice-spectrogram-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.voice-spectrogram-sample{position:relative;min-width:0;padding:.85rem;background:var(--n-va-panel-soft);border:1px solid var(--n-va-border);border-radius:1.2rem;box-shadow:0 .8rem 1.8rem var(--n-va-shadow)}.voice-spectrogram-sample:before{position:absolute;inset:.55rem auto .55rem .55rem;width:.22rem;background:var(--n-va-a);border-radius:99rem;content:""}.voice-spectrogram-sample-b:before{background:var(--n-va-b)}.voice-spectrogram-sample-index{position:absolute;top:-.65rem;left:1.35rem;padding:.22rem .55rem;color:var(--n-va-canvas);background:var(--n-va-a);border-radius:.4rem;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.voice-spectrogram-sample-b .voice-spectrogram-sample-index{background:var(--n-va-b)}.voice-spectrogram-drop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem 1rem;align-items:center;min-height:6.8rem;padding:1rem 1rem .75rem 1.35rem;border:1px dashed var(--n-va-border);border-radius:.8rem}.voice-spectrogram-drop strong,.voice-spectrogram-drop span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-spectrogram-drop strong{margin-bottom:.25rem}.voice-spectrogram-drop span,.voice-spectrogram-drop small,.voice-spectrogram-sample-foot{color:var(--n-va-muted);font-size:.76rem}.voice-spectrogram-drop small{grid-column:1 / -1}.voice-spectrogram-file{display:inline-flex;padding:.55rem .75rem;color:var(--n-va-paper);background:var(--n-va-ink);border-radius:.55rem;cursor:pointer;font-size:.78rem;font-weight:800}.voice-spectrogram-file input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.voice-spectrogram-sample-foot{display:flex;justify-content:space-between;gap:.8rem;padding:.75rem .15rem .05rem .55rem}.voice-spectrogram-presets{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}.voice-spectrogram-presets button,.voice-spectrogram-segmented button{padding:.28rem .5rem;background:transparent;border:1px solid var(--n-va-border);border-radius:99rem;cursor:pointer;font-size:.7rem}.voice-spectrogram-instrument{margin:0 clamp(.65rem,2vw,1.25rem);padding:clamp(.75rem,2vw,1.25rem);color:var(--n-va-white);background:var(--n-va-canvas);border:1px solid var(--n-va-grid);border-radius:1.35rem;box-shadow:inset 0 0 3rem var(--n-va-black),0 1.2rem 2.8rem var(--n-va-shadow)}.voice-spectrogram-instrument-head>div:first-child{display:flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}.voice-spectrogram-live-dot{width:.6rem;height:.6rem;background:var(--n-va-a);border-radius:50%;box-shadow:0 0 .8rem var(--n-va-a)}.voice-spectrogram-control-clusters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem}.voice-spectrogram-segmented{display:flex;align-items:center;gap:.3rem}.voice-spectrogram-segmented>span{margin-right:.25rem;color:var(--n-va-muted);font-size:.68rem;text-transform:uppercase}.voice-spectrogram-segmented button{color:var(--n-va-muted);border-color:var(--n-va-grid)}.voice-spectrogram-segmented button.is-active{color:var(--n-va-canvas);background:var(--n-va-cursor);border-color:var(--n-va-cursor)}.voice-spectrogram-plate{position:relative;overflow:hidden;border:1px solid var(--n-va-grid);border-radius:.9rem}.voice-spectrogram-plate canvas{display:block;width:100%;height:clamp(24rem,54vw,34rem)}.voice-spectrogram-plate-glow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--n-va-glow-a),transparent 38%,transparent 62%,var(--n-va-glow-b));mix-blend-mode:screen}.voice-spectrogram-transport{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:center;max-width:34rem;margin:1rem auto 0}.voice-spectrogram-transport button{min-height:2.8rem;color:var(--n-va-white);background:var(--n-va-grid);border:1px solid var(--n-va-grid);border-radius:99rem;cursor:pointer;font-weight:800}.voice-spectrogram-transport button:not(.voice-spectrogram-stop){display:flex;align-items:center;justify-content:center;gap:.55rem}.voice-spectrogram-transport button span{display:grid;width:1.5rem;height:1.5rem;place-items:center;color:var(--n-va-canvas);background:var(--n-va-a);border-radius:50%}.voice-spectrogram-transport button:last-child span{background:var(--n-va-b)}.voice-spectrogram-stop{padding:0 1rem;color:var(--n-va-cursor);background:transparent}.voice-spectrogram-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.3rem;margin-top:.85rem;color:var(--n-va-muted);font-size:.68rem}.voice-spectrogram-legend span{display:flex;align-items:center;gap:.35rem}.voice-spectrogram-swatch{width:.75rem;height:.75rem;background:var(--n-va-a);border-radius:.2rem}.voice-spectrogram-swatch-b{background:var(--n-va-b)}.voice-spectrogram-line{width:1.2rem;border-top:2px solid var(--n-va-cursor)}.voice-spectrogram-comparison{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(0,1.6fr);gap:1.4rem;align-items:start}.voice-spectrogram-comparison-copy p:last-child{margin-top:.65rem;color:var(--n-va-muted);line-height:1.6}.voice-spectrogram-formants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.voice-spectrogram-formants article{position:relative;overflow:hidden;padding:1rem;background:var(--n-va-panel-soft);border:1px solid var(--n-va-border);border-radius:.85rem}.voice-spectrogram-formant-index{display:block;color:var(--n-va-muted);font-size:1.8rem;font-weight:900;opacity:.4}.voice-spectrogram-formants strong{display:block;min-height:2.5rem;font-size:.85rem}.voice-spectrogram-formants dl,.voice-spectrogram-formants dd{margin:0}.voice-spectrogram-formants dl>div{display:flex;justify-content:space-between;gap:.5rem;padding:.38rem 0;border-top:1px solid var(--n-va-border);font-size:.75rem}.voice-spectrogram-formants dt{color:var(--n-va-muted)}.voice-spectrogram-formants dd{min-width:4.6rem;text-align:right;font-variant-numeric:tabular-nums;font-weight:800}.voice-spectrogram-educational{padding:0 2rem 1.5rem;color:var(--n-va-muted);font-size:.72rem;line-height:1.5;text-align:center}.voice-spectrogram button:focus-visible,.voice-spectrogram input:focus-visible,.voice-spectrogram-file:focus-within{outline:3px solid var(--n-va-cursor);outline-offset:3px}@media(max-width:760px){.voice-spectrogram-samples,.voice-spectrogram-comparison{grid-template-columns:1fr}.voice-spectrogram-instrument-head,.voice-spectrogram-section-intro{align-items:flex-start;flex-direction:column}.voice-spectrogram-control-clusters{justify-content:flex-start}.voice-spectrogram-plate canvas{height:27rem}}@media(max-width:520px){.voice-spectrogram-privacy{align-items:flex-start}.voice-spectrogram-drop{grid-template-columns:1fr}.voice-spectrogram-drop small{grid-column:auto}.voice-spectrogram-sample-foot{align-items:flex-start;flex-direction:column}.voice-spectrogram-presets{justify-content:flex-start}.voice-spectrogram-formants{grid-template-columns:1fr}.voice-spectrogram-transport{grid-template-columns:1fr 1fr}.voice-spectrogram-stop{grid-column:1 / -1;grid-row:2}}@media(prefers-reduced-motion:reduce){.voice-spectrogram *,.voice-spectrogram *:before,.voice-spectrogram *:after{scroll-behavior:auto}}