:root{color-scheme:dark;--bg:#071018;--panel:#0b1821;--panel2:#0e202b;--line:#1b3441;--line2:#254857;--ink:#eef8f7;--muted:#85a1a9;--mint:#4ce0c1;--yellow:#ffd166;--rose:#ff7f8f;--blue:#75bfff;--shadow:0 20px 60px rgba(0,0,0,.28);--radius:18px;font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{font-size:16px;line-height:1.45;background-image:radial-gradient(circle at 20% -10%,rgba(76,224,193,.08),transparent 32%),radial-gradient(circle at 96% 10%,rgba(117,191,255,.07),transparent 30%)}button,input,select{font:inherit}button{color:inherit}.app-shell{min-height:100vh;padding:18px}.topbar{position:relative;height:78px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,34,45,.94),rgba(8,20,28,.92));backdrop-filter:blur(18px);border-radius:18px;padding:0 22px;margin-bottom:14px;box-shadow:var(--shadow),inset 0 1px 0 rgba(117,191,255,.09);overflow:hidden}.topbar:before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(76,224,193,.7),transparent)}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:48px;height:48px;border:1px solid rgba(76,224,193,.32);border-radius:14px;display:grid;place-items:center;color:var(--mint);background:radial-gradient(circle at 32% 22%,rgba(76,224,193,.18),transparent 72%),rgba(76,224,193,.05);box-shadow:inset 0 0 14px rgba(76,224,193,.14),0 0 18px rgba(76,224,193,.1);transition:.25s}.brand-mark:before,.brand-mark:after,.brand-mark span{content:none}.brand-mark:hover{box-shadow:inset 0 0 18px rgba(76,224,193,.22),0 0 26px rgba(76,224,193,.22)}.bm-wave rect{transform-box:fill-box;transform-origin:center;animation:barPulse 1.8s ease-in-out infinite}.bm-wave rect:nth-child(1){animation-delay:-.4s}.bm-wave rect:nth-child(2){animation-delay:-.2s}.bm-wave rect:nth-child(3){animation-delay:0s}.bm-wave rect:nth-child(4){animation-delay:-.2s}.bm-wave rect:nth-child(5){animation-delay:-.4s}.brand-text h1{font-size:20px;letter-spacing:.05em;margin:0}.brand h1{font-size:20px;letter-spacing:.04em;margin:0}.eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--mint);letter-spacing:.18em;font-size:10px;margin:0 0 3px;font-weight:600}.header-actions{display:flex;align-items:center;gap:10px}.audio-state{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,20,28,.62);font-weight:500;transition:.2s}.state-dot{width:8px;height:8px;border-radius:50%;background:#43555d}.audio-state.loading .state-dot{background:var(--yellow);animation:pulse 1s infinite}.audio-state.ready,.audio-state.playing{border-color:rgba(76,224,193,.4);color:#bfe8e1}.audio-state.ready .state-dot,.audio-state.playing .state-dot{background:var(--mint);box-shadow:0 0 12px rgba(76,224,193,.6)}.audio-state.error .state-dot{background:var(--rose)}.voice-picker{height:44px;border:1px solid var(--line2);border-radius:12px;padding:4px 13px 4px 11px;color:var(--mint);font-size:12px;display:flex;align-items:center;gap:8px;background:rgba(7,20,28,.55);transition:.2s}.voice-picker:hover{border-color:var(--mint)}.voice-picker-icon{flex:none;opacity:.8}.voice-picker select{background:transparent;border:0;color:var(--ink);outline:0;max-width:185px;cursor:pointer}.voice-picker option{background:var(--panel)}.button,.icon-button,.text-button,.swap-button{border:0;cursor:pointer}.button{border:1px solid var(--line2);background:var(--panel2);border-radius:11px;padding:10px 15px;font-weight:650;font-size:14px;transition:.2s transform,.2s border-color,.2s background,.2s box-shadow}.button:hover{border-color:var(--mint);transform:translateY(-1px);box-shadow:0 6px 18px rgba(76,224,193,.12)}.button.primary{background:var(--mint);color:#05231d;border-color:var(--mint)}.button.ghost{background:rgba(7,20,28,.55);display:inline-flex;align-items:center;gap:6px}.button.ghost:hover{background:rgba(76,224,193,.12)}.button.ghost .btn-plus{font-size:16px;font-weight:400;line-height:1;color:var(--mint)}.button:disabled{opacity:.4;cursor:not-allowed;transform:none}.icon-button{width:42px;height:42px;border-radius:50%;background:rgba(7,20,28,.55);border:1px solid var(--line2);font-family:Georgia,serif;font-weight:700;font-size:15px;transition:.2s}.icon-button:hover{border-color:var(--mint);box-shadow:0 0 14px rgba(76,224,193,.18)}.workspace{display:grid;grid-template-columns:minmax(420px,1.25fr) minmax(270px,.72fr) minmax(330px,.9fr);gap:14px;min-height:calc(100vh - 124px)}.panel{min-width:0;background:rgba(11,24,33,.94);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-heading>div{display:flex;align-items:center;gap:10px}.panel-heading h2{font-size:15px;letter-spacing:.08em;margin:0}.panel-heading p{color:var(--muted);font-size:12px;margin:0}.section-number{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:8px;color:var(--mint);font-family:ui-monospace,monospace;font-size:12px}.text-button{background:transparent;color:var(--muted);font-size:13px}.text-button:hover{color:var(--mint)}.anatomy-panel{display:flex;flex-direction:column}.anatomy-stage{position:relative;min-height:0;flex:1;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#08141c}.anatomy-stage svg{display:block;width:100%;height:100%;min-height:510px}.head-outline{fill:rgba(19,43,55,.72);stroke:#315462;stroke-width:3}.bone{fill:rgba(29,61,72,.35);stroke:#3b6471;stroke-width:2}.nasal-cavity{fill:rgba(117,191,255,.1);stroke:#4f8597;stroke-width:2}.palate,.pharynx{fill:none;stroke:#5b7e88;stroke-width:8;stroke-linecap:round}.jaw{fill:rgba(32,62,74,.7);stroke:#4b7480;stroke-width:3}.teeth{fill:#b8c8c8;opacity:.65}.tongue{fill:rgba(255,127,143,.36);stroke:var(--rose);stroke-width:4;transition:d .08s linear}.velum{fill:none;stroke:var(--yellow);stroke-width:10;stroke-linecap:round}.uvula{fill:var(--yellow)}.larynx{fill:rgba(76,224,193,.12);stroke:#4cbba7;stroke-width:3}.glottis{stroke:var(--mint);stroke-width:4;stroke-linecap:round}.lip{fill:none;stroke:var(--rose);stroke-width:9;stroke-linecap:round}.air-path{fill:none;stroke:rgba(76,224,193,.62);stroke-width:3;stroke-dasharray:6 11;animation:airflow 2s linear infinite;opacity:.2}.playing .air-path{opacity:1}.handle{cursor:grab;outline:0;user-select:none}.handle:active{cursor:grabbing}.handle-ring{fill:rgba(7,16,24,.72);stroke:var(--mint);stroke-width:2;filter:url(#glow)}.handle-core{fill:var(--mint)}.handle text{fill:var(--ink);font-size:14px;font-weight:700;pointer-events:none}.handle .handle-value{fill:var(--muted);font-size:11px;font-weight:500}.handle:focus .handle-ring{stroke:var(--yellow);stroke-width:4}.diagram-label path{stroke:#345361;stroke-width:1}.diagram-label text{fill:#6e8f98;font-size:12px}.vowel-readout{position:absolute;left:18px;top:18px;display:grid;grid-template-columns:auto auto;gap:1px 9px;align-items:center;padding:11px 13px;background:rgba(5,14,20,.78);border:1px solid var(--line);border-radius:11px;backdrop-filter:blur(10px)}.vowel-readout span{font-size:11px;color:var(--muted);grid-column:1}.vowel-readout strong{font-family:Georgia,serif;font-size:26px;color:var(--yellow);grid-column:2;grid-row:1/3}.vowel-readout small{font-size:11px}.gesture-hint{position:absolute;right:14px;bottom:12px;color:#67858d;font-size:11px}.phonation-dock{margin-top:12px;display:flex;align-items:center;gap:13px}.phonate-button{position:relative;min-width:190px;height:62px;border-radius:14px;border:1px solid #2d615c;background:#0c2929;color:var(--ink);display:flex;align-items:center;gap:12px;padding:0 17px;cursor:pointer;overflow:hidden}.phonate-button:hover{border-color:var(--mint)}.phonate-button.is-playing{background:var(--mint);color:#06241e}.phonate-icon{width:27px;height:27px;border:2px solid currentColor;border-radius:50%;position:relative}.phonate-icon:before,.phonate-icon:after{content:"";position:absolute;border:2px solid currentColor;border-width:0 2px;width:7px;height:15px;top:4px}.phonate-icon:before{left:-7px;border-left-width:2px;border-radius:50% 0 0 50%}.phonate-icon:after{right:-7px;border-right-width:2px;border-radius:0 50% 50% 0}.phonate-button span:last-child{display:flex;flex-direction:column;text-align:left}.phonate-button strong{font-size:15px}.phonate-button small{font-size:11px;opacity:.65}.phonate-orbit{position:absolute;width:110px;height:110px;border:1px solid rgba(76,224,193,.18);border-radius:50%;left:-28px;top:-24px}.level-meter{display:flex;align-items:flex-end;gap:3px;height:30px;flex:1}.level-meter span{width:4px;height:20%;background:var(--line2);border-radius:3px;transition:height .08s,background .08s}.button.lock{font-size:12px;color:var(--muted);white-space:nowrap}.button.lock.active{border-color:var(--yellow);color:var(--yellow)}.control-list{display:grid;gap:5px}.control-row{padding:10px 0 11px;border-bottom:1px solid rgba(37,72,87,.55);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.control-row span{display:flex;flex-direction:column}.control-row b{font-size:14px}.control-row em{font-style:normal;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.control-row output{font-family:ui-monospace,monospace;color:var(--mint);font-size:13px}.control-row input{grid-column:1/-1;width:100%;appearance:none;height:4px;border-radius:10px;background:linear-gradient(90deg,var(--mint) var(--pct,30%),#203945 var(--pct,30%));outline:0}.control-row input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--panel);border:2px solid var(--mint);cursor:pointer}.control-row input:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,209,102,.18);border-color:var(--yellow)}.preset-section{margin-top:18px}.section-label{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px}.save-row{display:flex;gap:7px}.save-row input,.pack-name input{min-width:0;flex:1;background:#07141c;border:1px solid var(--line2);border-radius:9px;color:var(--ink);padding:10px 11px;outline:0}.save-row input:focus,.pack-name input:focus{border-color:var(--mint)}.ab-row{display:grid;grid-template-columns:1fr 28px 1fr;gap:6px;align-items:center;margin:12px 0}.ab-slot{border:1px solid var(--line);border-radius:10px;background:#08151d;padding:8px;text-align:left;display:grid;grid-template-columns:28px 1fr;cursor:pointer}.ab-slot>span{grid-row:1/3;width:23px;height:23px;display:grid;place-items:center;border-radius:6px;background:var(--line);color:var(--yellow);font-weight:800}.ab-slot strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ab-slot small{font-size:10px;color:var(--muted)}.ab-slot.active{border-color:var(--yellow)}.swap-button{background:transparent;color:var(--muted);font-size:18px}.snapshot-list{display:grid;gap:6px;max-height:138px;overflow:auto;margin:8px 0}.snapshot-item{display:grid;grid-template-columns:1fr auto auto auto;gap:5px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:7px 8px;background:#08151d}.snapshot-item strong{font-size:12px}.snapshot-item small{color:var(--muted);font-size:10px}.mini-button{border:0;background:#112834;color:var(--muted);border-radius:6px;padding:4px 6px;cursor:pointer;font-size:10px}.mini-button:hover{color:var(--mint)}.empty-state{color:var(--muted);font-size:12px;text-align:center;padding:12px;margin:0}.button.export{width:100%;background:transparent;color:var(--muted)}.live-label{font-family:ui-monospace,monospace;color:var(--mint);font-size:10px;letter-spacing:.14em}.formant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.formant-cell{position:relative;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,rgba(14,32,43,.55),rgba(8,21,29,.6));transition:.2s border-color,.2s transform,.2s box-shadow;cursor:help;overflow:hidden}.formant-cell:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(76,224,193,.18)}.formant-cell:first-child{border-color:rgba(255,209,102,.4);background:linear-gradient(180deg,rgba(255,209,102,.1),rgba(25,21,8,.45))}.formant-cell:first-child:hover{border-color:var(--yellow);box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(255,209,102,.25)}.formant-head{display:flex;align-items:baseline;gap:7px;margin-bottom:5px;flex-wrap:wrap}.formant-tag{font-family:ui-monospace,monospace;font-size:14px;font-weight:700;color:var(--mint);letter-spacing:.02em}.formant-cell:first-child .formant-tag{color:var(--yellow)}.formant-name{font-size:11px;color:var(--ink);font-weight:600}.formant-value{display:flex;align-items:baseline;gap:3px}.formant-value strong{font-family:ui-monospace,monospace;font-size:23px;font-weight:700;color:var(--ink);line-height:1.05}.formant-value small{font-size:10px;color:var(--muted);font-weight:600}.formant-desc{margin:4px 0 0;font-size:9.5px;color:var(--muted);line-height:1.35;white-space:nowrap}.formant-key{font-size:10.5px;color:var(--muted);line-height:1.6;margin:0 0 14px;padding:9px 12px;border:1px solid var(--line);border-left:2px solid var(--mint);border-radius:9px;background:rgba(8,21,29,.55)}.formant-key b{color:var(--mint);font-family:ui-monospace,monospace;font-weight:700}.chart-block{background:#08151d;border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:12px}.chart-title{display:flex;justify-content:space-between;font-size:12px;font-weight:700}.chart-title small{color:var(--muted);font-size:9px;font-family:ui-monospace,monospace}.chart-block svg{display:block;width:100%;height:auto;max-height:245px;margin-top:4px}.vowel-frame{fill:rgba(20,48,61,.25);stroke:#345867;stroke-width:2}.chart-grid path{stroke:#1a3542;stroke-width:1}.vowel-anchor circle{fill:#102a35;stroke:#4d7785}.vowel-anchor text{fill:#cfe2e2;font-family:Georgia,serif;text-anchor:middle;font-size:14px;font-weight:700}.vowel-anchor.active circle{stroke:var(--yellow);fill:rgba(255,209,102,.18)}.vowel-anchor.active text{fill:var(--yellow)}.cursor-glow{fill:rgba(76,224,193,.14);stroke:rgba(76,224,193,.35);animation:pulse 1.4s infinite}.cursor-core{fill:var(--mint)}.spectrum-block{padding-bottom:8px}.spectrum3d-wrap{position:relative;width:100%;height:178px;margin-top:7px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:radial-gradient(circle at 50% -10%,rgba(76,224,193,.1),transparent 62%),linear-gradient(180deg,#0a1b25,#07121a)}.spectrum3d-wrap canvas{display:block;width:100%;height:100%}#spectrum3d{position:absolute;inset:0}.spectrum3d-wrap #spectrumCanvas{display:none;width:100%;height:100%;margin-top:0}.spectrum3d-wrap.gl-failed{height:auto}.spectrum3d-wrap.gl-failed #spectrum3d{display:none}.spectrum3d-wrap.gl-failed #spectrumCanvas{display:block;height:155px}.spectrum3d-legend{display:flex;align-items:center;gap:14px;margin-top:7px}.lg-key{display:inline-flex;align-items:center;gap:5px;font:10px ui-monospace,monospace;color:var(--muted);white-space:nowrap}.lg-bar{width:3px;height:12px;border-radius:2px;display:inline-block}.lg-f1{background:var(--mint);box-shadow:0 0 6px rgba(76,224,193,.8)}.lg-f2{background:var(--yellow);box-shadow:0 0 6px rgba(255,209,102,.8)}.lg-f3{background:var(--blue);box-shadow:0 0 6px rgba(117,191,255,.8)}.spectrum3d-legend .spectrum-axis{flex:1;margin-left:auto}.spectrum-axis{display:flex;justify-content:space-between;color:#58747d;font:9px ui-monospace,monospace}.model-note{color:#64818a;font-size:10px;text-align:center;margin:8px 0 0}.mobile-tabs{display:none}.modal{border:0;background:transparent;padding:0;color:var(--ink);width:min(680px,calc(100% - 30px))}.modal::backdrop{background:rgba(1,8,12,.74);backdrop-filter:blur(6px)}.modal-card{background:#0b1922;border:1px solid var(--line2);border-radius:18px;padding:22px;box-shadow:0 30px 100px #000;max-height:90vh;overflow:auto}.modal-header{display:flex;justify-content:space-between;align-items:flex-start}.modal-header h2{margin:0;font-size:23px}.modal-intro{color:var(--muted);font-size:14px}.pack-name{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:18px 0}.sample-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.sample-card{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:#08151d}.sample-card strong{display:block;font:26px Georgia,serif;color:var(--yellow)}.sample-card small{display:block;color:var(--muted);font-size:10px;min-height:30px;margin:5px 0}.sample-card.ready{border-color:var(--mint)}.sample-card.error{border-color:var(--rose)}.sample-actions{display:flex;gap:4px;justify-content:center}.sample-actions label,.sample-actions button{border:0;border-radius:6px;background:#17303c;color:var(--ink);font-size:10px;padding:6px;cursor:pointer}.sample-actions input{display:none}.record-status{border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--muted);font-size:12px;margin-top:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.info-card ol{padding:0;list-style:none;display:grid;gap:8px}.info-card li{display:grid;grid-template-columns:90px 1fr;padding:10px 0;border-bottom:1px solid var(--line)}.info-card li span{color:var(--muted)}.license-note{border:1px solid var(--line);background:#08151d;border-radius:12px;padding:14px;margin-top:16px}.license-note p{color:var(--muted);font-size:13px}.license-note a{color:var(--mint);font-size:13px}.disclaimer{font-size:12px;color:var(--rose);margin-top:15px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#102b35;border:1px solid var(--line2);border-radius:10px;padding:10px 16px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
.medical-stage{aspect-ratio:4/3;background:#fff;border-color:#31505c}.medical-stage .anatomy-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.medical-stage .anatomy-overlay{position:absolute;inset:0;min-height:0}.medical-stage .tongue{fill:rgba(255,74,111,.38);stroke:#c82d55;stroke-width:6;mix-blend-mode:multiply}.medical-stage .muscle{stroke-width:5;transition:d .08s linear,opacity .12s}.medical-stage .suprahyoid{fill:rgba(255,177,72,.42);stroke:#d48223}.medical-stage .thyrohyoid{fill:rgba(96,191,98,.48);stroke:#438b4b}.medical-stage .velum-marker,.medical-stage .larynx-marker,.medical-stage .jaw-guide,.medical-stage .lip-guide{fill:none;stroke:rgba(15,126,116,.76);stroke-width:7;stroke-linecap:round;stroke-dasharray:12 8}.medical-stage .air-path{stroke:rgba(21,139,127,.76);stroke-width:6;stroke-dasharray:12 18}.medical-stage .handle-ring{fill:rgba(7,16,24,.84);stroke-width:4}.medical-stage .handle-ring.muscle-handle{stroke:var(--yellow)}.medical-stage .handle text{fill:#071018;font-size:22px;font-weight:800;paint-order:stroke;stroke:#fff;stroke-width:7;stroke-linejoin:round}.medical-stage .handle .handle-value{fill:#194c50;font-size:17px;font-weight:700}.medical-stage .handle:focus .handle-ring{stroke-width:6}.workspace{grid-template-columns:minmax(500px,1.2fr) minmax(340px,.8fr)}.acoustics-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.acoustics-panel .panel-heading{grid-column:1/-1;margin-bottom:0}.acoustics-panel .formant-grid{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin:0}.acoustics-panel .formant-key{grid-column:1/-1;margin:0 0 2px}.acoustics-panel .chart-block{margin:0}.model-note{grid-column:1/-1}.control-list{grid-template-columns:1fr 1fr;column-gap:18px}.control-row{min-width:0}
.medical-stage .tongue{fill:url(#tongueFill);fill-opacity:.9;stroke:#8f2447;stroke-width:6;mix-blend-mode:normal;filter:drop-shadow(0 7px 7px rgba(95,28,48,.24))}
.vowel-switcher{display:grid;grid-template-columns:minmax(138px,1fr) repeat(5,52px);gap:8px;align-items:center;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#08151d}.vowel-switcher>div{display:flex;flex-direction:column}.vowel-switcher strong{font-size:13px}.vowel-switcher small{color:var(--muted);font-size:10px}.vowel-button{height:42px;border:1px solid var(--line2);border-radius:10px;background:#0c202a;color:var(--ink);font:700 17px Georgia,serif;cursor:pointer;transition:.18s}.vowel-button:hover,.vowel-button:focus-visible{border-color:var(--mint);outline:0}.vowel-button.active{background:var(--yellow);border-color:var(--yellow);color:#1d1807;box-shadow:0 0 0 3px rgba(255,209,102,.12)}
.tenor-preset{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid rgba(255,209,102,.35);border-radius:12px;background:linear-gradient(135deg,rgba(255,209,102,.08),rgba(76,224,193,.04));padding:11px 12px;margin-bottom:8px}.tenor-preset>div{display:flex;flex-direction:column}.tenor-preset strong{font-size:14px}.tenor-preset small{color:var(--muted);font-size:10px;line-height:1.45;margin-top:2px}.preset-kicker{font:9px ui-monospace,monospace;letter-spacing:.13em;color:var(--yellow)}.tenor-button{border-color:rgba(255,209,102,.5);color:var(--yellow);white-space:nowrap}
.pitch-reference-banner{display:grid;grid-template-columns:1fr auto auto;gap:2px 12px;align-items:center;border:1px solid rgba(255,209,102,.52);border-radius:12px;background:#2b2514;padding:11px 13px;margin-bottom:8px}.pitch-reference-banner span{color:#cdbf8e;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.pitch-reference-banner strong{grid-row:1/3;grid-column:2;font:700 18px ui-monospace,monospace;color:var(--yellow)}.pitch-reference-banner small{color:#988c67;font-size:10px}.pitch-reference-banner .button{grid-column:3;grid-row:1/3;border-color:rgba(255,209,102,.45);color:var(--yellow);padding:7px 10px}.parameter-comparison{margin:14px 0 4px;border:1px solid var(--line);border-radius:13px;background:#08151d;padding:13px}.comparison-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:10px}.comparison-heading>div{display:flex;flex-direction:column}.comparison-heading strong{font-size:14px}.comparison-heading>span{color:var(--yellow);font:11px ui-monospace,monospace;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.22);padding:5px 7px;border-radius:7px}.comparison-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 8px;padding-left:82px}.comparison-legend span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}.comparison-legend i{width:7px;height:7px;border-radius:50%}.current-dot{background:var(--mint)}.tenor-dot{background:var(--yellow)}.comparison-rows{display:grid;gap:6px}.comparison-row{display:grid;grid-template-columns:74px 1fr 34px;gap:8px;align-items:center}.comparison-row>span{color:var(--muted);font-size:10px}.comparison-pair{display:grid;grid-template-columns:1fr 1fr;gap:5px}.comparison-value{position:relative;height:19px;background:#102530;border-radius:5px;overflow:hidden}.comparison-value span{position:absolute;inset:0 auto 0 0;border-radius:5px}.comparison-value b{position:relative;z-index:1;display:block;padding:2px 6px;font:10px ui-monospace,monospace;color:var(--ink)}.current-value span{background:rgba(76,224,193,.32)}.tenor-value span{background:rgba(255,209,102,.3)}.comparison-row>small{text-align:right;color:var(--rose);font:10px ui-monospace,monospace}.comparison-row>small.same{color:var(--muted)}.parameter-comparison>p{margin:10px 0 0;color:#64818a;font-size:9px}.recording-pitch-guide{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid rgba(255,209,102,.44);border-radius:12px;background:#231f13;padding:13px 14px;margin:14px 0 9px}.recording-pitch-guide>div{display:flex;flex-direction:column}.recording-pitch-guide span{font-size:10px;color:#cdbf8e;text-transform:uppercase;letter-spacing:.08em}.recording-pitch-guide strong{font:700 21px ui-monospace,monospace;color:var(--yellow);margin:2px 0}.recording-pitch-guide small{color:#a89b72;font-size:10px;line-height:1.45}.recording-pitch-guide .button{border-color:rgba(255,209,102,.44);color:var(--yellow);white-space:nowrap}.pitch-picker{border:1px solid var(--line);border-radius:12px;background:#07141c;padding:11px;margin-bottom:14px}.pitch-picker-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.pitch-picker-heading strong{font-size:12px}.pitch-picker-heading small{color:var(--muted);font-size:9px}.pitch-keyboard{height:180px;overflow-y:auto;scroll-snap-type:y mandatory;display:grid;gap:5px;padding:65px 4px;scrollbar-color:var(--yellow) #102530;overscroll-behavior:contain}.pitch-option{scroll-snap-align:center;min-height:50px;display:grid;grid-template-columns:70px 55px 1fr;align-items:center;border:1px solid var(--line);border-radius:9px;background:#0b1d27;color:var(--ink);padding:7px 12px;cursor:pointer;text-align:left}.pitch-option strong{font:700 18px Georgia,serif}.pitch-option span{font:700 13px ui-monospace,monospace;color:var(--muted)}.pitch-option small{text-align:right;color:#64818a;font:10px ui-monospace,monospace}.pitch-option:hover,.pitch-option:focus-visible{border-color:var(--mint);outline:0}.pitch-option.active{border-color:var(--yellow);background:rgba(255,209,102,.13);box-shadow:0 0 0 2px rgba(255,209,102,.08)}.pitch-option.active strong,.pitch-option.active span{color:var(--yellow)}
.octave-assist-toggle{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;gap:4px 8px;align-items:center;border-top:1px solid rgba(255,209,102,.2);padding-top:10px;cursor:pointer}.octave-assist-toggle input{width:18px;height:18px;accent-color:var(--yellow)}.octave-assist-toggle span{color:var(--yellow);font-weight:700;letter-spacing:.02em;text-transform:none}.octave-assist-toggle small{grid-column:2/-1}
.calibration-card{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;background:#08151d;padding:12px 14px}.calibration-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.calibration-title span{font:10px ui-monospace,monospace;letter-spacing:.12em;color:var(--mint)}.calibration-title strong{font-size:12px}.calibration-card dl{display:grid;grid-template-columns:150px 150px 150px 1fr;gap:8px;margin:0}.calibration-card dl>div{border-left:1px solid var(--line);padding-left:10px;min-width:0}.calibration-card dt{color:var(--muted);font-size:9px}.calibration-card dd{margin:3px 0 0;font:11px ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calibration-card p{color:#64818a;font-size:9px;margin:9px 0 0}.calibration-card.personal .calibration-title span{color:var(--yellow)}
@keyframes pulse{50%{opacity:.45}}@keyframes airflow{to{stroke-dashoffset:-34}}@keyframes barPulse{0%,100%{transform:scaleY(.5);opacity:.55}50%{transform:scaleY(1);opacity:1}}
@media(max-width:1180px){.workspace{grid-template-columns:1.15fr .75fr}.acoustics-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.acoustics-panel .panel-heading{grid-column:1/-1;margin-bottom:0}.acoustics-panel .formant-grid{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin:0}.acoustics-panel .formant-key{grid-column:1/-1;margin:0 0 2px}.acoustics-panel .chart-block{margin:0}.model-note{grid-column:1/-1}.spectrum3d-wrap{height:150px}.spectrum3d-wrap.gl-failed #spectrumCanvas{height:130px}.chart-block svg{max-height:180px}}
@media(max-width:780px){.app-shell{padding:8px}.topbar{height:auto;padding:12px;margin-bottom:8px;display:grid;grid-template-columns:1fr;gap:10px}.header-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 42px;gap:8px}.audio-state{grid-column:1/-1;display:flex;font-size:11px;min-height:34px;padding:7px 11px}.voice-picker{font-size:12px;min-width:0;width:100%;height:42px;padding:4px 9px}.voice-picker select{font-size:12px;width:100%;min-width:0;max-width:none}.header-actions .button.ghost{font-size:12px;width:auto;height:42px;padding:0 12px;white-space:nowrap}.header-actions .button.ghost:after{content:none}.brand .eyebrow{display:none}.brand-text{min-width:0}.brand h1{font-size:17px;white-space:nowrap;letter-spacing:.02em}.mobile-tabs{display:none}.workspace{display:block;min-height:0}.panel,.panel.active{display:block;padding:14px;margin-bottom:8px;box-shadow:none}.anatomy-panel,.anatomy-panel.active{display:flex}.medical-stage svg{min-height:0}.vowel-switcher{grid-template-columns:repeat(5,1fr)}.vowel-switcher>div{grid-column:1/-1}.vowel-button{height:44px}.phonation-dock{flex-wrap:wrap}.phonate-button{flex:1}.level-meter{order:3;flex-basis:100%}.pitch-reference-banner{grid-template-columns:1fr}.pitch-reference-banner strong,.pitch-reference-banner .button{grid-column:1;grid-row:auto}.tenor-preset{grid-template-columns:1fr}.tenor-button{width:100%}.comparison-heading{flex-direction:column}.comparison-legend{padding-left:0}.comparison-row{grid-template-columns:65px 1fr 30px}.control-list{grid-template-columns:1fr}.acoustics-panel{display:block}.acoustics-panel .formant-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.acoustics-panel .formant-cell{padding:8px 5px;text-align:center}.acoustics-panel .formant-head{justify-content:center;gap:2px;flex-direction:column;margin-bottom:3px}.acoustics-panel .formant-tag{font-size:12px}.acoustics-panel .formant-name{font-size:9px}.acoustics-panel .formant-value{justify-content:center}.acoustics-panel .formant-value strong{font-size:17px}.acoustics-panel .formant-desc{display:none}.acoustics-panel .formant-key{margin-bottom:12px}.acoustics-panel .chart-block{margin-bottom:12px}.acoustics-panel .spectrum3d-wrap{height:140px}.spectrum3d-legend{gap:8px;flex-wrap:wrap}.calibration-card{margin-bottom:12px}.calibration-title{align-items:flex-start;flex-direction:column}.calibration-card dl{grid-template-columns:1fr 1fr}.calibration-card dl>div:last-child{grid-column:1/-1}.recording-pitch-guide{grid-template-columns:1fr}.recording-pitch-guide .button{width:100%}.pitch-option{grid-template-columns:62px 48px 1fr}.sample-grid{grid-template-columns:1fr}.sample-card{display:grid;grid-template-columns:45px 1fr auto;align-items:center;text-align:left}.sample-card small{min-height:0}.modal-card{padding:16px}.gesture-hint{display:none}.medical-stage .handle text{font-size:25px}.vowel-readout{transform:scale(.82);transform-origin:top left}}
@media(max-width:420px){.topbar{gap:9px;padding:10px}.brand{min-width:0}.brand-mark{width:40px;height:40px;border-radius:11px}.header-actions{grid-template-columns:minmax(0,1fr) auto 40px;gap:6px}.voice-picker{height:40px}.header-actions .button.ghost{height:40px;padding:0 9px;font-size:11px}.icon-button{width:40px;height:40px}.audio-state{min-height:32px}.voice-picker select{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.media-channel-output{position:fixed;width:1px;height:1px;opacity:.001;pointer-events:none;left:-9999px}.audio-test{white-space:nowrap;border-color:rgba(117,191,255,.35);color:#9fd1ff}.media-audio-note{flex:1 1 100%;margin:0;color:#6f8d96;font-size:10px;line-height:1.45}.recording-monitor{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:#07141c;padding:11px;transition:border-color .2s,box-shadow .2s}.recording-monitor-head{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}.recording-monitor-head strong{font-size:12px}.recording-monitor-head time{font:700 13px ui-monospace,monospace;color:var(--muted)}.recording-dot{width:10px;height:10px;border-radius:50%;background:#34505c;box-shadow:0 0 0 4px rgba(52,80,92,.15)}.recording-monitor canvas{display:block;width:100%;height:78px;border-radius:8px;background:#07141c}.recording-level-labels{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:#5f7c86;font-size:9px}.recording-level-labels span:nth-child(2){color:var(--muted)}.recording-monitor[data-state="countdown"]{border-color:rgba(255,209,102,.55)}.recording-monitor[data-state="countdown"] .recording-dot{background:var(--yellow);box-shadow:0 0 0 4px rgba(255,209,102,.14)}.recording-monitor[data-state="recording"]{border-color:rgba(255,100,124,.72);box-shadow:0 0 0 3px rgba(255,100,124,.08)}.recording-monitor[data-state="recording"] .recording-dot{background:#ff647c;box-shadow:0 0 0 4px rgba(255,100,124,.16);animation:recordingPulse 1s infinite}.recording-monitor[data-state="recording"] time{color:#ff899b}.recording-monitor[data-state="processing"]{border-color:rgba(76,224,193,.55)}.recording-monitor[data-state="error"]{border-color:var(--rose)}.sample-actions button:disabled{opacity:.38;cursor:not-allowed}.sample-actions button:not(:disabled){min-width:48px}@keyframes recordingPulse{50%{opacity:.35;transform:scale(.82)}}
@media(max-width:780px){.audio-test{flex:0 0 auto}.media-audio-note{order:4}.recording-monitor canvas{height:92px}.recording-monitor{position:sticky;bottom:0;z-index:2;box-shadow:0 -8px 24px rgba(4,13,18,.5)}}
.sample-actions .preview{border:1px solid rgba(117,191,255,.3);color:#a8d5ff;background:#102936}.sample-actions .preview.playing{border-color:var(--yellow);color:var(--yellow);background:rgba(255,209,102,.1)}.sample-actions .preview:disabled{border-color:transparent;color:#58717a;background:#10222c}@media(max-width:780px){.sample-actions{flex-wrap:wrap}.sample-actions label,.sample-actions button{min-height:34px;padding:7px 9px}}
.pitch-debug{margin-top:12px;border:1px solid rgba(117,191,255,.3);border-radius:12px;background:#091923;padding:11px 12px}.pitch-debug-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}.pitch-debug-title strong{font-size:12px}.pitch-debug-title span{color:#83a7b5;font:10px ui-monospace,monospace;text-align:right}.pitch-debug dl{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0}.pitch-debug dl>div{min-width:0;border:1px solid var(--line);border-radius:8px;background:#07141c;padding:7px 8px}.pitch-debug dt{color:#5f7c86;font:9px ui-monospace,monospace}.pitch-debug dd{margin:3px 0 0;color:#b9d8e4;font:700 11px ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pitch-debug p{margin:8px 0 0;color:#78949f;font:10px ui-monospace,monospace}.pitch-debug .pitch-debug-rule{color:#a8c2cc;line-height:1.5}.pitch-debug p[data-state="passed"]{color:var(--mint)}.pitch-debug p[data-state="failed"]{color:var(--rose)}@media(max-width:780px){.pitch-debug dl{grid-template-columns:repeat(2,1fr)}.pitch-debug-title{align-items:flex-start;flex-direction:column}.pitch-debug-title span{text-align:left}}
.formant-cell.selected{border-color:var(--mint);box-shadow:0 0 0 1px rgba(76,224,193,.26),0 8px 22px rgba(0,0,0,.22);background:linear-gradient(180deg,rgba(76,224,193,.14),rgba(8,21,29,.72))}.formant-cell:first-child.selected{border-color:var(--yellow);box-shadow:0 0 0 1px rgba(255,209,102,.28),0 8px 22px rgba(0,0,0,.22);background:linear-gradient(180deg,rgba(255,209,102,.16),rgba(25,21,8,.55))}.formant-cell:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;cursor:pointer}.formant-cell[role="button"]{cursor:pointer}.formant-key{min-height:54px;transition:border-color .2s,background .2s}