:root{font-family:Arial,sans-serif;color:#203339;background:#f6f7f3}*{box-sizing:border-box}body{margin:0}header,main{max-width:1160px;margin:auto;padding:28px 32px}header{display:flex;justify-content:space-between;border-bottom:1px solid #cdd8d3;font-size:12px;letter-spacing:.1em}a{color:#276b67}h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.045em;margin:14px 0}h2{font-size:22px;font-weight:500}h2 span{color:#738980;margin-right:16px}.eyebrow{font-size:12px;letter-spacing:.16em;color:#397b70;margin-top:30px}.intro{max-width:730px;color:#53655e;font-size:18px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:32px}button,select{font:inherit;border:1px solid #aabdb4;border-radius:6px;padding:10px 14px;background:#fff;color:#203339}button{cursor:pointer}button:first-child{background:#225f55;color:white;min-width:90px}button:disabled{opacity:.5}output{font-variant-numeric:tabular-nums;font-size:21px}#mode{font-size:12px;color:#66766d}.timeline{display:flex;align-items:center;gap:20px;font-size:13px;margin:25px 0}input{flex:1;accent-color:#276b67;min-width:0}section{border-top:1px solid #cdd8d3;margin-top:30px;padding-top:12px}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.heading p,.caption{color:#65786f;font-size:13px;line-height:1.6}.syllables,.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.syllable{text-align:center}.syllable h3{margin:4px}.syllable small{color:#65786f}.syllable svg{width:100%;height:150px}.gate{font-size:13px;line-height:1.7}.track{background:#e0e7df;height:6px;overflow:hidden;border-radius:3px}.fill{height:100%;transition:none}.gesture{display:grid;grid-template-columns:180px 1fr 58px;align-items:center;gap:18px;margin:12px 0}.gesture .name{font-size:14px}.gesture small{display:block;color:#728378;margin-top:5px}.gesture svg{width:100%;height:75px;overflow:visible}.value{text-align:right;font-variant-numeric:tabular-nums}.axis{stroke:#dbe2dc;stroke-width:1}.cursor{stroke:#273c36;stroke-width:1;stroke-dasharray:3 3}.trace{fill:none;stroke-width:2}.caption{max-width:900px}details{margin-top:35px;border-top:1px solid #cdd8d3;padding:24px 0;line-height:1.7}summary{cursor:pointer;font-size:18px}details p{max-width:900px;font-size:14px}footer{padding:30px 0;color:#6c7f74;font-size:12px}#status{color:#8f392e}@media(max-width:650px){header,main{padding:20px 16px}header span{display:none}.heading{display:block}.syllables,.gates{gap:8px}.syllable svg{height:100px}.gesture{grid-template-columns:100px 1fr 42px;gap:8px}.gesture .name{font-size:12px}.gate{font-size:11px}}

.compute-dialog{width:min(460px,calc(100vw - 40px));padding:32px;border:1px solid #cbd8d2;border-radius:16px;background:#fff;color:#203339;text-align:center;box-shadow:0 24px 90px #18392c33;font:16px/1.6 Arial,sans-serif}.compute-dialog::backdrop{background:#172c3266;backdrop-filter:blur(3px)}.compute-dialog h2{font-size:24px;margin:16px 0 8px}.compute-dialog p{margin:10px 0}.compute-dialog .compute-hint{font-size:13px;color:#61746b}.compute-dialog button{margin-top:16px;padding:10px 16px;border:1px solid #afc1b8;border-radius:8px;background:#f2f6f3;color:#244e42;font:inherit;cursor:pointer}.compute-spinner{margin:auto;width:44px;height:44px;border:4px solid #dce9e1;border-top-color:#28705b;border-radius:50%;animation:compute-spin 1s linear infinite}.compute-elapsed{font-variant-numeric:tabular-nums;color:#477461}@keyframes compute-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.compute-spinner{animation-duration:3s}}

.playback{position:sticky;top:0;z-index:5;background:#f6f7f3f5;padding:1px 0;border-bottom:1px solid #dbe2dc;backdrop-filter:blur(8px)}

.ramp-preview{margin:16px 0 0;padding:0;border:1px solid #cbd8d2;border-radius:8px;overflow:hidden}.ramp-preview summary{padding:11px 14px;color:#285e53;font-size:14px;font-weight:600;background:#edf2eb}.ramp-preview summary:hover{background:#e4ece1}.ramp-preview summary:focus-visible{outline:2px solid #28705b;outline-offset:-3px}.ramp-meters{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;padding:12px 16px 0}.ramp-meter{display:flex;align-items:center;flex-direction:column;text-align:center;min-width:0}.ramp-meter output{font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}.ramp-column{height:84px;width:30px;position:relative;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#b5c5b577 calc(25% - 1px),#b5c5b577 25%),#e0e7df;border-bottom:1px solid #9aaa9e;border-radius:4px 4px 0 0;overflow:hidden;margin:5px 0 8px}.ramp-column>div{position:absolute;bottom:0;width:100%;height:0;opacity:.9}.ramp-meter>span{font-size:12px;line-height:1.3;max-width:110px}.ramp-preview .ramp-note{margin:8px 14px 10px;font-size:11px;line-height:1.4;color:#65786f}@media(max-width:650px){.ramp-meters{gap:5px;padding:10px 8px 0}.ramp-meter>span{font-size:10px;overflow-wrap:normal;hyphens:auto}.ramp-meter output{font-size:12px}.ramp-column{width:24px;height:66px}.ramp-preview summary{font-size:12px}.ramp-preview .ramp-note{font-size:10px}}
.muscle-pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.muscle-pair{border:1px solid #cdd8cf;border-radius:12px;padding:14px;background:#f8faf5}.muscle-pair h3{font-size:15px;margin:0 0 14px}.opponents>div{display:grid;grid-template-columns:1fr auto;gap:5px;margin:10px 0}.opponents span{grid-column:1/-1;font-size:12px}.opponents meter{width:100%;height:18px}.opponents output,.parameter-readout output{font-variant-numeric:tabular-nums}.parameter-readout{display:flex;justify-content:space-between;border-top:1px solid #d3ddd5;padding-top:12px}.muscle-pair input{width:100%;opacity:1;accent-color:#247f9c}@media(max-width:850px){.muscle-pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.muscle-pairs{grid-template-columns:1fr}}
.playback-help{font-size:12px;color:#536960;margin:8px 0 0}.sagittal-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(210px,1fr);gap:22px}.sagittal-card{background:#fffdf8;border:1px solid #cdd8cf;border-radius:16px;overflow:hidden}.sagittal-card>svg{display:block;width:100%;max-height:440px}.sagittal-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:12px;font-size:12px;color:#986269}.sagittal-legend span:nth-child(2){color:#ac874c}.sagittal-legend span:last-child{color:#536960}#sagittal-parameters>div{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid #d3ddd5;font-size:13px}#sagittal-parameters b{font-variant-numeric:tabular-nums}.glottis-card{margin-top:18px;border:1px solid #cdd8cf;border-radius:12px;padding:12px}.glottis-card h3{font-size:13px;margin:0}.glottis-card svg{display:block;height:120px;margin:auto}@media(max-width:650px){.sagittal-layout{grid-template-columns:1fr}.sagittal-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sagittal-layout aside>h3{grid-column:1/-1}.glottis-card{margin:0}}

.word-choices{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.word-choices button.selected{background:#247f9c;color:white}.word-selection{margin:20px 0}#routing-section[hidden]{display:none}
.word-choices button:not(.selected){background:#fff;color:#203339}

.ramp-meters.sequence-ramps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ramp-slot{border:1px solid #cbd8d2;border-radius:6px;padding:10px}.ramp-slot h4{font-size:13px;color:#285e53;margin:0 0 10px}.ramp-slot-meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.gesture-slot-heading{font-size:16px;color:#285e53;border-bottom:1px solid #cdd8d3;margin:24px 0 12px;padding-bottom:8px}@media(max-width:650px){.ramp-meters.sequence-ramps{grid-template-columns:1fr}.ramp-slot-meters .ramp-meter>span{font-size:12px}.ramp-slot-meters .ramp-meter output{font-size:14px}}

.control-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:14px 8px;padding:14px}.control-column{height:84px;width:30px;position:relative;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#b5c5b577 calc(25% - 1px),#b5c5b577 25%),#e0e7df;border:1px solid #cbd8d2;border-radius:4px;overflow:hidden;margin:5px 0 8px}.control-column:after{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid #65786f}.control-column>div{position:absolute;width:100%;height:0}.control-positive{bottom:50%;background:#247f9c}.control-negative{top:50%;background:#b25c90}#control-preview[hidden]{display:none}.control-meters .ramp-meter>span{font-size:12px}.control-meters .ramp-meter output{font-size:14px}

#gesture-chart{position:relative;display:flow-root}#gesture-boundaries{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#gesture-boundaries line{stroke-width:1.25;opacity:.8;vector-effect:non-scaling-stroke}.gesture-timing-values{padding:12px 0;margin:16px 0}.gesture-timing-values summary{font-size:14px;color:#285e53;font-weight:600}#gesture-timing-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;font-variant-numeric:tabular-nums}#gesture-timing-table th,#gesture-timing-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #dbe2dc}#gesture-timing-table th{font-weight:500}#gesture-timing-table thead th{font-weight:600;color:#536960}#gesture-timing-table small{display:block;color:#65786f;font-size:11px}.timing-swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}@media(max-width:650px){#gesture-timing-table{font-size:12px}#gesture-timing-table th,#gesture-timing-table td{padding:7px 5px}}

.syllables{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px;align-items:stretch}.syllable{display:flex;flex-direction:column;width:100%;max-width:360px;padding:12px 8px;border:1px solid #d3ddd5;border-radius:8px}.oscillator-state{margin-top:auto}.oscillator-coordinates{display:block;margin:0 0 10px;font-variant-numeric:tabular-nums}.syllable .phase-circle{display:block;width:100%;height:auto;max-height:270px;margin:auto}.phase-axis-labels{font-size:11px;fill:#65786f;text-anchor:middle}.phase-boundary line{stroke-width:1.3}.phase-boundary circle,.phase-boundary rect{stroke-width:1.6}.phase-key{width:100%;border-collapse:collapse;text-align:left;font-size:12px;font-variant-numeric:tabular-nums;margin:0 0 12px}.phase-key th,.phase-key td{padding:7px 3px;border-bottom:1px solid #dbe2dc}.phase-key th{font-weight:400}.phase-key thead th{font-size:11px;color:#536960;white-space:nowrap}.phase-key td{text-align:right;white-space:nowrap}.phase-key .timing-swatch{width:7px;height:7px;margin-right:5px}.phase-guide{margin:0 0 16px}

.timing-rules summary{color:#285e53;font-size:16px}.timing-rules table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.timing-rules th,.timing-rules td{padding:9px 6px;border-bottom:1px solid #d3ddd5;text-align:left}.timing-rules thead{color:#536960}.timing-rules{scroll-margin-top:230px}