:root{color-scheme:light;--ink:#233c3a;--muted:#60706a;--green:#245d53;--purple:#806297;--line:#dde2db;--paper:#f7f8f4;--white:#fff;--focus:#126eae}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
button,a,input,[tabindex]{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button{border:1px solid var(--line);border-radius:8px;min-height:44px;background:var(--white);color:var(--ink);padding:9px 16px}
button:hover:not(:disabled){background:#edf2eb}
.icon{width:20px;height:20px;flex:none;vertical-align:middle}
.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border-color:transparent;font-size:14px}
#app{min-height:100dvh;display:flex;flex-direction:column}
.site-header{padding:10px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-shrink:0}
.header-brand{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-size:24px;letter-spacing:-1px;text-decoration:none;font-weight:700;color:var(--green)}
.brand-light{font-weight:400}
.brand-mark{width:36px;height:36px;background:var(--green);color:white;display:grid;place-items:center;border-radius:11px}
.brand-mark .icon{width:26px;height:26px}
main{padding:0 16px 12px;display:flex;flex:1;min-width:0}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,3vw,36px);line-height:1.2;font-weight:400;margin:0;letter-spacing:-.7px}
.palate-card{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px #203d3510}
.display-options{display:flex;gap:20px;flex-shrink:0}
.check-control,.gap-control{display:inline-flex;align-items:center;gap:9px;min-height:38px;cursor:pointer;font-size:14px}
input[type=checkbox]{accent-color:var(--green);width:17px;height:17px;cursor:pointer;flex:none;margin:0}
.stage{background:#fff;position:relative;flex:1;min-height:320px}
.anatomy-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.head-tissue{fill:#e6e8e2;stroke:#8d9990;stroke-width:1.8}
.floor-tissue{fill:#e7d7cf;stroke:#9d8980;stroke-width:1.8}
.hard-palate{fill:#dedacb;stroke:#9b9684;stroke-width:1.8}
.soft-palate{fill:#fff;stroke:none}
.soft-palate-outline{fill:none;stroke:#202020;stroke-width:1.85}
.wall-line{fill:none;stroke:#829084;stroke-width:2}
.anatomy-label path{fill:none;stroke:#777;stroke-width:1.1}
.anatomy-label text{fill:#414141;font-size:22px;font-family:Arial,Helvetica,sans-serif}
#soft-palate-label text{fill:#202020;font-weight:600}
.handle-leader,.marker-leader{fill:none;stroke:#777;stroke-width:1.1;pointer-events:none}
.marker-leader{display:none}
#air-routes{--oral-air:#007c91;--nasal-air:#c05a00;pointer-events:none}
.air-path{fill:none;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.air-path.air-halo{stroke:#fff;stroke-width:7}
.air-path.oral{stroke:var(--oral-air)}
.air-path.nasal{stroke:var(--nasal-air);stroke-dasharray:10 7}
.air-arrow{stroke:#fff;stroke-width:1.5;stroke-linejoin:round;paint-order:stroke fill}
.air-arrow.oral{fill:#007c91}
.air-arrow.nasal{fill:#c05a00}
#gap-marker path{fill:none;stroke:#a67121;stroke-width:1.6}
#velum-handle{cursor:grab;touch-action:none}
#velum-handle>*{touch-action:none}
#velum-handle:active{cursor:grabbing}
#velum-handle .hit-area{fill:transparent;stroke:none}
.handle-ring{fill:#fff;stroke:#444;stroke-width:2}
.handle-arrows{stroke:#444;stroke-width:1.4;fill:none}
#velum-handle:focus-visible{outline:none}
#velum-handle:focus-visible .handle-ring{stroke:var(--focus);stroke-width:4}
.mobile-marker,.handle-number,.label-legend{display:none}
.airflow-key{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:8px 16px 13px;font-size:12px;color:var(--muted);background:#fdfdfb}
.airflow-key>span{display:flex;align-items:center;gap:7px}
.airflow-key i{display:inline-block;width:24px;height:0;border-top:4px solid #007c91}
.airflow-key .nasal-key{border-color:#c05a00;border-top-style:dashed}
.explanation{display:flex;gap:14px;padding:10px 20px;align-items:center;border-top:1px solid #edf0e9;background:#f8f6fa;min-height:66px}
.palate-symbol{display:grid;place-items:center;flex:none;background:#eae1f0;width:39px;height:39px;border-radius:11px;color:#78538d}
.explanation h2{font-size:16px;font-weight:600;margin:0 0 3px}
.explanation p{font-size:14px;margin:0;color:#5e6461}
.movement-controls{padding:10px 20px 6px}
.main-controls{display:flex;align-items:center;gap:13px}
.position-buttons{display:flex;border:1px solid var(--line);border-radius:9px;padding:3px;flex:none;gap:2px}
.position-buttons button{border:0;min-width:90px;min-height:42px;font-size:14px}
.position-buttons button[aria-pressed=true]{background:#eee6f3;color:#654878}
.play-button{display:flex;align-items:center;justify-content:center;gap:8px;border-color:var(--green);background:var(--green);color:white;min-width:173px;font-size:14px;flex:none}
.play-button:hover:not(:disabled){background:#18473f}
.movement-slider{flex:1;min-width:100px;margin-left:18px}
.movement-slider label{font-size:13px;font-weight:600;display:block}
input[type=range]{--progress:0%;appearance:none;-webkit-appearance:none;width:100%;height:5px;border-radius:5px;background:linear-gradient(to right,#9672ad var(--progress),#e7deec var(--progress));display:block;margin:14px 0 10px;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:white;border:3px solid #8b67a2;box-shadow:0 1px 3px #0002}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:3px solid #8b67a2}
.range-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.secondary-controls{display:flex;align-items:center;gap:20px;border-top:1px solid #edf0e9;margin-top:8px;padding-top:4px}
.gap-control{font-size:13px}
.gap-control input{accent-color:var(--purple)}
.drag-hint{color:var(--muted);font-size:12px;margin:0}
#reset-button{margin-left:auto;font-size:13px}
.reduced-motion-note{font-size:12px;color:var(--muted);margin:5px 0 8px}
.skip-link{position:fixed;z-index:5;left:16px;top:-70px;background:var(--white);padding:10px 16px;color:var(--ink)}
.skip-link:focus{top:8px}
@media(max-width:760px){
 .site-header{padding:10px 16px;flex-wrap:wrap;gap:4px 16px}.header-brand{gap:16px;flex-wrap:wrap}.display-options{margin-left:auto}
 main{padding:0 8px 8px}
 .main-controls{flex-wrap:wrap;gap:12px}
 .movement-slider{flex-basis:100%;margin:5px 0 0}
 .position-buttons{flex:1}.position-buttons button{flex:1}
 .play-button{flex:1}
 .drag-hint{display:none}
 .movement-controls{padding:16px 20px 8px}
 .explanation{padding:15px 20px}
}
.stage.compact{flex:none;min-height:0;aspect-ratio:1}
.stage.compact .anatomy-label{display:none}
.stage.compact .mobile-marker,.stage.compact .marker-leader{display:block}
.mobile-marker circle{fill:#fff;stroke:#809083;stroke-width:1.5}
.mobile-marker text,.handle-number{text-anchor:middle;fill:#3f5545;font:600 15px Arial,sans-serif}
.stage.compact .handle-number{display:block;fill:#333}
.stage.compact .handle-arrows{display:none}
.stage.compact .labels-hidden .handle-number{display:none}
.stage.compact .labels-hidden .handle-arrows{display:block}
.stage.compact .handle-ring{r:13}
.stage.compact #velum-handle .hit-area{r:30}
.stage.compact + .label-legend{display:grid}
.label-legend{list-style:none;grid-template-columns:repeat(3,1fr);gap:8px 12px;padding:12px 20px;margin:0;border-top:1px solid #edf0e9;background:#fdfdfb;font-size:13px}
.label-legend li{display:flex;align-items:center;gap:7px}
.label-legend span{border:1px solid #b9c2b8;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;font-size:11px;flex:none}
.label-legend .purple{color:#715186}.label-legend .purple span{border-color:#af98bd}
@media(max-width:480px){
 .site-header{padding:12px 16px}.header-brand{gap:10px}.brand{font-size:21px}.brand-mark{width:30px;height:30px}
 h1{font-size:clamp(18px,5vw,27px)}
 .palate-card{border-radius:12px}.display-options{gap:13px}
 .check-control{font-size:12px;gap:5px}
 .label-legend{grid-template-columns:repeat(2,1fr);padding:12px 16px;gap:8px}
 .explanation{padding:10px 14px;min-height:0;gap:10px}.explanation h2{font-size:15px}.explanation p{font-size:13px}
 .palate-symbol{width:31px;height:31px;border-radius:8px}
 .movement-controls{padding:10px 14px 6px}.main-controls{gap:8px}
 .position-buttons button{min-width:0;padding:8px 12px;font-size:13px}
 .play-button{min-width:0;padding:10px;font-size:13px}
 .secondary-controls{gap:8px}.gap-control{font-size:12px}
 .arrow-note{flex-basis:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}