@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&display=swap');
:root{--bg:#12131a;--panel:#1a1c26;--ink:#f1f0f8;--muted:#aaa9bc;--rule:#383a4c;--acid:#cfef72;--purple:#baa8ff;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,summary{font:inherit}button,.filebutton{min-height:44px;border:1px solid var(--rule);background:transparent;color:var(--ink);padding:10px 15px;cursor:pointer;text-align:left}button:hover,.filebutton:hover{background:#303244}button:focus-visible,input:focus-visible,summary:focus-visible,.filebutton:focus-within{outline:2px solid var(--acid);outline-offset:4px}header{height:106px;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;border-bottom:1px solid var(--rule)}header a{font:700 36px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.04em;color:var(--ink);text-decoration:none}header a span{display:block;font:10px Inter,sans-serif;letter-spacing:.19em;margin-top:3px}header div{font-size:14px;line-height:1.5;color:var(--muted)}.format{font:11px/1.8 monospace;text-align:right;color:var(--muted)}main{display:grid;grid-template-columns:260px minmax(350px,1fr) 300px;gap:44px;padding:38px 40px 145px;max-width:1800px;margin:auto}.eyebrow{font:10px monospace;letter-spacing:.1em;color:var(--acid)}h1{font:600 clamp(42px,4.5vw,66px)/.97 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.015em;margin:22px 0}p{font-size:13px;line-height:1.65;color:var(--muted)}nav{display:flex;flex-direction:column;margin-top:45px}nav button{border-width:0 0 1px;padding:18px 0;display:flex;justify-content:space-between}nav button span{color:var(--muted);font:11px monospace}nav button[aria-pressed=true]{color:var(--acid)}.voice-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:32px;max-width:220px}.plane-caption{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:.06em;color:var(--muted);padding:0 0 14px}.plane-caption:nth-of-type(3){padding:14px 0 0}#plane{position:relative;height:440px;background:radial-gradient(ellipse at 30% 85%,#242936,#312d44 55%,#544762);border:1px solid #6a6080;margin:0 22px;touch-action:none}#plane svg{position:absolute;width:100%;height:100%;overflow:visible;pointer-events:none}#trajectory{stroke:var(--acid);stroke-width:3;fill:none;vector-effect:non-scaling-stroke}#mouthCursor{fill:white}.vowel{position:absolute;font:600 75px 'Barlow Condensed',Impact,sans-serif;color:#c1b6d3;opacity:.3;pointer-events:none}.a{left:9%;top:6%}.e{right:9%;top:6%}.u{left:9%;bottom:6%}.i{right:9%;bottom:6%}.target{position:absolute;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--acid);border-radius:50%;background:var(--bg);color:var(--acid);transform:translate(-50%,-50%);font:13px monospace;touch-action:none}.target[aria-pressed=true]{background:var(--acid);color:var(--bg);box-shadow:0 0 0 5px #cfef7220;z-index:2}.target-editor{display:grid;grid-template-columns:80px 1fr 1fr;gap:22px;align-items:center;border-top:1px solid var(--rule);padding-top:20px;margin-top:23px}.target-editor select{display:block;width:100%;height:44px;background:var(--bg);color:var(--acid);border:1px solid var(--rule);font:12px monospace;padding:8px}label{display:block;font-size:12px;line-height:1.5}output{float:right;font:11px/1.7 monospace;color:var(--purple)}input[type=range]{appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0;display:block;accent-color:var(--acid)}input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--rule)}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--acid);width:15px;height:20px;margin-top:-8px;border:2px solid var(--bg)}details{border-top:1px solid var(--rule)}summary{cursor:pointer;padding:19px 0;min-height:58px;font-size:16px;list-style:none}summary:after{content:'+';float:right;color:var(--purple)}details[open] summary:after{content:'−'}summary span{display:block;font:10px monospace;color:var(--muted);margin-top:5px}.controls{padding-bottom:18px}.controls label+label{margin-top:5px}.recipe{display:grid;gap:10px;padding-bottom:20px}.filebutton{position:relative;font-size:13px;display:flex;align-items:center}.filebutton input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}footer{position:fixed;bottom:0;left:0;right:0;padding:18px 40px;display:grid;grid-template-columns:260px 1fr 220px;gap:44px;align-items:center;background:var(--bg);border-top:1px solid var(--rule);z-index:5}.transport{display:flex;gap:10px}.transport button{flex:1;text-align:center}#play{background:var(--acid);color:var(--bg);border-color:var(--acid)}#export{background:var(--ink);color:var(--bg);text-align:center;height:54px;font-weight:600}.feedback{min-width:0}#wave{display:block;width:100%;height:30px}#wave path{stroke:var(--purple);stroke-width:1;fill:none}.feedback p{font-size:11px;margin:6px 0 0}.transport button:active,#export:active{transform:translateY(1px)}
@media(min-width:1200px){main{padding-top:48px}}@media(max-width:1100px){main{grid-template-columns:190px minmax(0,1fr);gap:28px}.rack{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}#plane{height:350px}footer{grid-template-columns:auto 1fr auto;gap:25px}h1{font-size:46px}}
@media(max-width:640px){header{height:78px;padding:14px 20px}header a{font-size:28px}header div{display:none}.format{font-size:9px}main{display:block;padding:22px 20px 165px}.voice-title{display:grid;grid-template-columns:1fr 1fr;gap:10px}.eyebrow{grid-column:1/-1;font-size:9px}h1{font-size:40px;margin:6px 0 12px}.voice-title p{font-size:11px;margin:9px 0}nav{flex-direction:row;gap:10px;margin-top:8px}nav button{font-size:11px;flex:1;line-height:1.4;padding:10px 0}nav button span{display:none}.voice-note{max-width:none;font-size:11px;margin:15px 0 24px}.plane-caption{font-size:9px}#plane{height:280px;margin:0 22px}.vowel{font-size:52px}.target-editor{gap:14px;grid-template-columns:60px 1fr 1fr;margin:20px 0}.target-editor label{font-size:11px}.rack{display:block}footer{padding:12px 20px;grid-template-columns:1fr 130px;gap:9px 12px}.transport{gap:8px}.transport button{padding:10px 8px;font-size:12px}#export{font-size:12px;height:44px}.feedback{grid-row:2;grid-column:1/-1}#wave{height:16px}.feedback p{font-size:10px;margin-top:4px}summary{font-size:15px}summary span{display:inline;margin-left:12px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}