:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#0d1920;color:#e8f0ed;--line:#32464c;--muted:#afc2c4;--active:#a9e6ca}
*{box-sizing:border-box}body{margin:0}main{max-width:1200px;margin:auto;padding:40px clamp(16px,4vw,48px)}header{margin-bottom:28px}h1,h2,p{margin:0}h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.055em;font-weight:650}h2{font-size:1rem;font-weight:650}header>p:last-child,.hint,footer,#detail,#status{color:var(--muted)}header>p:last-child{margin-top:8px}.eyebrow{color:var(--active);font-size:.72rem;font-weight:750;letter-spacing:.18em;margin-bottom:10px}
.controls,.panel-head,.buttons,.legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.controls{margin-bottom:16px}.controls label{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.85rem}.controls label[hidden]{display:none}button,select{color:inherit;font:inherit;border:1px solid var(--line);background:#192a31;border-radius:8px;padding:8px 12px}button{cursor:pointer}button:hover:enabled{border-color:var(--active)}button:disabled{opacity:.42;cursor:default}:focus-visible{outline:2px solid var(--active);outline-offset:3px}#play{background:var(--active);color:#112820;font-weight:700}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:16px}.panel{border:1px solid var(--line);border-radius:15px;background:#14242b;padding:16px}.panel-head{justify-content:space-between}aside{display:grid;gap:16px;align-content:start}.position p,.eyes p{margin-top:12px;line-height:1.45;font-size:.91rem}#pose{font-weight:700}.scene canvas{width:100%;height:clamp(310px,40vw,460px);display:block;touch-action:none;cursor:grab;margin:8px 0;background:radial-gradient(ellipse,#203942,#101e25 75%);border-radius:10px}.legend{font-size:.78rem;color:var(--muted);gap:6px 14px}.legend span:before{content:'';display:inline-block;border-radius:50%;width:8px;height:8px;margin-right:6px;background:var(--swatch)}.posterior{--swatch:#a0e7cb}.anterior{--swatch:#b3aeff}.lateral{--swatch:#79c9ed}.debris{--swatch:#ffcf77}.utricle{--swatch:#d8a8bb}.hint{font-size:.78rem;margin-top:10px}.eye-pair{display:flex;justify-content:space-around;gap:12px;margin-top:20px;text-align:center}.eye-pair small{color:var(--muted)}.eye{overflow:hidden;display:grid;place-items:center;width:72px;height:42px;border-radius:70% 70% 65% 65%;background:#edf3ee;margin-top:6px}.eye i{width:29px;height:29px;border-radius:50%;background:radial-gradient(circle,#112028 30%,#588779 33%,#8cb4a5 62%,#28453e 67%);position:relative}.eye i:after{content:'';position:absolute;top:2px;left:13px;width:3px;height:6px;background:#ecf4ee;border-radius:3px}.timeline{margin-top:16px}ol{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;padding:0;list-style:none}ol button[aria-current="step"]{border-color:var(--active);color:var(--active)}#status,footer{font-size:.82rem;line-height:1.5}footer{margin-top:20px}a{color:var(--active)}@media(max-width:740px){.layout{grid-template-columns:1fr}aside{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}main{padding-top:24px}}
[hidden]{display:none!important}
button[aria-pressed="true"]{border-color:var(--active);background:#27463f;color:#e1fff1}
.workspace{gap:4px;width:fit-content;padding:4px;border:1px solid var(--line);border-radius:10px;background:#101e25}
.workspace button{border-color:transparent;background:transparent}
.workspace button[aria-pressed="true"]{background:#27463f}
.interpretation{padding:14px;border:1px solid #41665d;background:#1b3333;border-radius:9px}
.interpretation h2{font-size:.75rem;color:var(--active);margin-bottom:8px}
.motion-status{margin-top:12px;color:#ffd36f;font-size:.86rem;min-height:1.25em}
#table-view{display:block;width:100%;height:auto;margin-top:12px;border-radius:8px;background:#101e25}
#playback{margin:0 0 16px}
#table-view{max-width:600px;margin-inline:auto}
.sequence-type{margin-bottom:4px;font-size:.76rem;font-weight:700;color:#a3d9f2}
.sequence-type[data-type="treatment"]{color:#a9e6ca}
#table-panel .position{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
#table-panel h3{font-size:.95rem;margin:0}
#table-panel .position p{margin-top:6px}
#eval-panel{max-width:760px}
#eval-form{display:grid;gap:16px;margin:16px 0}
#eval-form label{display:grid;gap:6px;color:var(--muted);font-size:.9rem;min-width:0}
#eval-form select{width:100%;min-width:0}
#eval-form fieldset{min-width:0;border:1px solid var(--line);border-radius:8px;padding:12px}
#eval-form legend{padding:0 6px}
.eval-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
#eval-roll>label{margin-top:12px}
.eval-result p{margin-top:6px;line-height:1.45}
.eval-result button{margin-top:12px}
#eval-panel{max-width:950px;margin-bottom:16px}
#eval-form select,#eval-panel button,#technique-close{min-height:44px}
#eval-form select{font-size:1rem}
#eval-demo{background:var(--active);color:#112820;font-weight:700}
#technique-heading{margin-bottom:8px}
.layout.technique canvas#anatomy{height:clamp(275px,32vw,390px);touch-action:pan-y}
@media(max-width:740px){
  .layout.technique #case-observations{grid-row:1}
  .layout.technique #case-observations{grid-template-columns:minmax(0,1fr)}
}
.eval-choices{display:flex;flex-wrap:wrap;gap:7px}
#eval-form .eval-choices label{position:relative;display:block}
.eval-choices input{position:absolute;width:1px;height:1px;opacity:0}
.eval-choices span{display:flex;align-items:center;min-height:44px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#192a31;cursor:pointer}
.eval-choices input:checked+span{border-color:var(--active);color:#e1fff1;background:#27463f}
.eval-choices input:focus-visible+span{outline:2px solid var(--active);outline-offset:2px}
#eval-form .eval-sides fieldset{margin:0;padding:8px}
#eval-strength{margin-top:12px}
.eye-view{display:grid;justify-items:center;gap:6px;margin:12px 0}
.eye-orientation{color:var(--muted);font-size:.73rem}
.eye-face{position:relative;width:min(100%,238px);min-height:145px;padding:40px 10px 24px;border-radius:46% 46% 43% 43% / 38% 38% 55% 55%;background:radial-gradient(ellipse at 46% 22%,#e6c1a9,#ad7b66);box-shadow:inset 0 -8px 18px #69453635}
.eye-face .eye-pair{margin:0;gap:12px}
.eye-pair>div{position:relative;min-width:0;flex:1}
.eye-face .eye{position:relative;width:100%;height:35px;margin:0 auto 2px;background:#fff2e5;border:2px solid #79574a;border-radius:54% 48%}
.eye-pair>div:before{content:'';position:absolute;top:-9px;left:12%;width:76%;height:10px;border-top:2px solid #785041;border-radius:50%}
.eye-face .eye i{background:radial-gradient(circle,#182527 28%,#60877d 33%,#80a497 62%,#385854 68%)}
.eye-face .eye i:after{top:2px;left:12px;width:5px;height:7px;background:#faf0d4}
.eye-face .eye-pair small{color:#392a26;font-size:.7rem;font-weight:700;white-space:nowrap}
.eye-nose{position:absolute;top:65px;left:calc(50% - 7px);width:14px;height:29px;border:solid #946551;border-width:0 2px 2px 0;border-radius:65% 45% 45% 35%;transform:rotate(8deg)}
.eye-mouth{position:absolute;bottom:24px;left:calc(50% - 17px);width:34px;height:8px;border-bottom:2px solid #88554c;border-radius:0 0 50% 50%}
.layout.technique{grid-template-columns:minmax(0,1fr)}
.layout.technique #case-observations{grid-row:1;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:740px){
  .layout.technique #case-observations{grid-template-columns:minmax(0,1fr)}
}
.screening-flags{display:grid;gap:8px;margin:10px 0 14px}
#eval-form .screening-flags label{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:8px;background:#192a31}
.screening-flags input{accent-color:var(--active);flex:none;width:18px;height:18px;margin:1px 0 0}
.screening-examples summary{cursor:pointer;color:var(--active);padding:6px 0}
.screening-examples .buttons{margin-top:10px}
.screening-face{display:flex;justify-content:center;gap:16px;margin:12px auto;width:fit-content;padding:16px;border-radius:30px;background:#ad7b66}
.screening-face .eye{margin:0}
#screening-example-text{line-height:1.45;margin:10px 0}
[data-example="gaze"] .eye i{animation:screening-gaze .8s linear infinite}
[data-example="gaze"][data-action="right"] .eye i{animation-direction:reverse;animation-name:screening-gaze-right}
[data-example="vertical"] .eye i{animation:screening-vertical .8s linear infinite}
[data-example="skew"] .eye{position:relative}
[data-action="cover-right"] .eye:first-child::after,[data-action="cover-left"] .eye:last-child::after{content:'';position:absolute;inset:0;background:#435b65}
[data-action="cover-right"] .eye:last-child i{transform:translateY(-6px);animation:screening-skew-up .25s ease-out}
[data-action="cover-left"] .eye:first-child i{transform:translateY(6px);animation:screening-skew-down .25s ease-out}
@keyframes screening-gaze{0%,100%{transform:translateX(15px)}82%{transform:translateX(6px)}}
@keyframes screening-gaze-right{0%,100%{transform:translateX(-15px)}18%{transform:translateX(-6px)}}
@keyframes screening-vertical{0%,100%{transform:translateY(-7px)}82%{transform:translateY(5px)}}
@keyframes screening-skew-up{from{transform:translateY(5px)}}
@keyframes screening-skew-down{from{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.screening-face .eye i{animation:none!important}}
.screening-target{position:relative;width:142px;height:22px;margin:14px auto 0;border-bottom:1px solid var(--line)}
.screening-target i{position:absolute;left:calc(50% - 5px);top:5px;width:10px;height:10px;border-radius:50%;background:#ffd36f}
[data-example="pursuit"] .screening-target i{animation:pursuit-target 3s ease-in-out infinite alternate}
[data-example="pursuit"] .eye i{animation:pursuit-eye 3s ease-in-out infinite alternate}
[data-example="pursuit"][data-action="catch-up"] .eye i{animation-timing-function:steps(5,end)}
@keyframes pursuit-target{from{transform:translateX(-58px)}to{transform:translateX(58px)}}
@keyframes pursuit-eye{from{transform:translateX(-13px)}to{transform:translateX(13px)}}
.gaze-marker{display:none}
[data-example="saccades"] .gaze-marker{display:block;position:absolute;left:calc(50% - 5px);bottom:-5px;width:10px;height:10px;border:2px solid #a3d9f2;border-radius:50%;background:#14242b}
#saccade-key{text-align:center;margin-top:10px}
[data-example="saccades"][data-jump] .screening-target i{transform:translateX(38px);animation:saccade-target-step 1.6s steps(1,end)}
[data-example="saccades"][data-jump] .eye i{--landing:12px;--past:19px}
[data-example="saccades"][data-jump] .gaze-marker{--landing:38px;--past:60px}
[data-example="saccades"][data-jump] :is(.eye i,.gaze-marker){transform:translateX(var(--landing));animation:saccade-land 1.6s steps(1,end)}
[data-example="saccades"][data-jump][data-action="overshoot"] :is(.eye i,.gaze-marker){animation-name:saccade-correct}
@keyframes saccade-target-step{0%{transform:translateX(0)}25%,100%{transform:translateX(38px)}}
@keyframes saccade-land{0%{transform:translateX(0)}43%,100%{transform:translateX(var(--landing))}}
@keyframes saccade-correct{0%{transform:translateX(0)}43%{transform:translateX(var(--past))}72%,100%{transform:translateX(var(--landing))}}
@media(prefers-reduced-motion:reduce){.gaze-marker{animation:none!important}}
[data-example="gaze"][data-action="center"] .eye i{animation:none}
@media(prefers-reduced-motion:reduce){.screening-target i{animation:none!important}}

#eye-interpretation{margin-top:12px}

/* Workspace and clinical forms */
:root{
  --line:#344a52;
  --muted:#b6c9cd;
  --active:#a9e6ca;
  --surface:#14262e;
  --control:#192e37;
}
body{background:radial-gradient(ellipse at top,#18303a 0,transparent 560px)}
main{padding-top:clamp(20px,5vw,48px)}
.app-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.app-header img{flex:none;border:1px solid var(--line);border-radius:13px}
.app-header h1{font-size:clamp(1.55rem,4.4vw,2.55rem);letter-spacing:-.045em;line-height:1.12}
.workspace{margin-bottom:20px}
.workspace button{min-height:44px;font-weight:650}
.panel{background:var(--surface);border-radius:14px;padding:clamp(13px,2.4vw,22px)}
button,select{background:var(--control)}
button{transition:background-color .15s,border-color .15s}
#eval-panel{width:100%;max-width:950px}
#eval-title,#technique-title{font-size:1.2rem;letter-spacing:-.02em}
#eval-clear,#technique-close{background:transparent}
#eval-form>fieldset{margin-inline:0;background:#11232b}
#eval-form legend{color:#e3efed;font-size:.88rem;font-weight:650}
#eval-form .eval-sides fieldset{padding:10px;background:#152932}
.eval-sides .eval-choices{display:grid;grid-template-columns:minmax(0,1fr)}
.eval-sides .eval-choices span{height:100%}
.eval-choices input:checked+span{box-shadow:inset 3px 0 var(--active)}
.interpretation{border-left:3px solid var(--active);background:#1b3333}
.interpretation h2{font-size:.8rem}
.eval-result strong{font-size:1.02rem}
#playback .buttons button,.screening-examples button,#technique-library{min-height:44px}
#table-panel,#canal-panel,.eyes{min-width:0}
#table-panel .position{padding-inline:2px}
@media(max-width:525px){
  .workspace{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace button{padding-inline:6px}
  #eval-panel>.panel-head{align-items:flex-start}
  #eval-panel>.panel-head .buttons{gap:6px}
  #eval-panel>.panel-head button{padding-inline:8px;font-size:.83rem}
  #eval-form{gap:13px}
  .eval-sides{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #eval-form .eval-sides fieldset{padding:6px}
  .eval-sides .eval-choices span{padding:6px 8px;font-size:.80rem;overflow-wrap:anywhere}
  .layout:not(.technique) #case-observations{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#case-setup{margin-bottom:16px}
#case-title{font-size:1.2rem;letter-spacing:-.02em}
#case-setup .case-fields{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(140px,1fr));gap:12px;margin-top:14px}
#case-setup label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:.87rem;font-weight:650}
#case-setup select{min-height:46px;width:100%;min-width:0;font-size:1rem;font-weight:600}
#case-setup #reset{background:transparent;font-size:.83rem;min-height:44px}
#playback-technique{font-size:1rem}
#progress{margin-top:3px}
#steps{gap:6px}
#steps button{padding:5px 9px;font-size:.78rem;min-height:32px}
@media(max-width:620px){
  #case-setup .case-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  #case-setup .case-technique{grid-column:1/-1}
}
@media(pointer:coarse){#steps button{min-height:44px}}
#eval-timing{border:1px solid var(--line);border-radius:8px;padding:12px}
#timing-more{margin-top:10px}
#timing-more summary{color:var(--active);cursor:pointer;font-size:.87rem}
.timing-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;margin-top:10px}
.library-filters{display:grid;justify-items:start;gap:12px;margin-top:14px}
.library-filters .buttons button{min-height:44px}
.library-filters>label{min-width:145px}
#library-mechanism{grid-column:1/-1;grid-row:2;margin:0}

#camera-status:empty{display:none}
#sample-quiz{margin:16px 0}
#sample-quiz h3{margin:12px 0 8px;font-size:1rem}
#sample-observation,#sample-feedback{margin-block:10px;line-height:1.45}
#sample-feedback:empty{display:none}
.learn-reference details{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:8px}
.learn-reference summary{cursor:pointer;color:var(--active)}
.learn-reference p{margin-top:8px;line-height:1.45}
@media(max-width:525px){.workspace{grid-template-columns:repeat(3,minmax(0,1fr))}}

#learn-eye-home .screening-examples{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:8px}

.learn-path{margin-top:16px}
.learn-path button{min-height:44px}
#learn-panel h3{margin:14px 0 6px;font-size:1rem}
[data-example="alexander"]{--gaze-offset:0px;--beat:6px}
[data-example="alexander"][data-action="right"]{--gaze-offset:-8px;--beat:12px}
[data-example="alexander"][data-action="left"]{--gaze-offset:8px;--beat:3px}
[data-example="alexander"] .eye i{animation:alexander-right-beat .8s linear infinite}
@keyframes alexander-right-beat{
  0%,100%{transform:translateX(calc(var(--gaze-offset) - var(--beat) * .5))}
  82%{transform:translateX(calc(var(--gaze-offset) + var(--beat) * .5))}
}
.glossary-term{display:inline;padding:0;border:0;border-radius:0;background:transparent;color:var(--active);text-decoration:underline dotted;text-underline-offset:3px;font-weight:650}
.glossary-card{display:grid;gap:6px;position:absolute;z-index:3;width:min(265px,calc(100vw - 64px));margin-top:0;padding:10px;border:1px solid var(--line);border-radius:9px;background:#192e37;box-shadow:0 8px 20px #0006;font-size:.88rem;line-height:1.4;left:0}
.glossary{display:inline}
#learn-intro-panel{position:relative}
.glossary-card{width:min(440px,100%);max-height:min(70vh,530px);overflow:auto}
.glossary-plate{display:block;width:100%;height:auto;border-radius:5px;background:white}
.glossary-credit{font-size:.72rem;color:var(--muted)}