:root{color-scheme:light;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#303034;background:#fff;font-synthesis:none;--reading-height:190px}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-snap-type:y proximity}body{margin:0;background:#fff}button{font:inherit;color:inherit;background:#fff;border:0;cursor:pointer;min-height:44px;padding:.5rem 0;text-align:left;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #796b9b;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
.counter{position:fixed;top:calc(1.35rem + env(safe-area-inset-top));left:1.5rem;z-index:4;font-size:.8rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;pointer-events:none}.total{color:#8c8c92}#figure{position:fixed;inset:calc(3.8rem + env(safe-area-inset-top)) 0 calc(var(--reading-height) + 1.5rem);margin:0;display:grid;place-items:center;z-index:1}#geometry{display:block;outline:none;width:min(100%,calc(100svh - var(--reading-height) - 5.3rem),900px);height:100%;overflow:visible;touch-action:pan-y}#geometry text{font-family:inherit;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none}#geometry line,#geometry path{vector-effect:non-scaling-stroke}#geometry .hit{fill:#fff;fill-opacity:0;cursor:pointer}#geometry .hit:focus-visible{stroke:#796b9b;stroke-width:2;outline:none}#geometry[data-interactive=true]{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#geometry[data-interactive=true]:active{cursor:grabbing}#geometry[data-interactive=true]:focus-visible{outline:1px solid #d8d8dc;outline-offset:-1px}
.step{height:100svh;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:normal}.step p{display:none}.reading{position:fixed;bottom:0;left:0;right:0;z-index:5;background:#fff;padding:1.1rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom));text-align:left;max-height:55svh;overflow:visible}.reading-inner{position:relative;max-width:38rem;margin:0 auto}.reading #caption,.reading .caption-measure{font-size:1.05rem;font-weight:400;line-height:1.55;margin:0;letter-spacing:-.012em;color:#44444a;text-wrap:pretty}#reading-actions{position:absolute;bottom:calc(100% + 1.5rem);left:0;right:0}#explore{background:#fff;border-top:1px solid #e6e4ea;padding-top:.65rem}#hint{position:absolute;right:0;bottom:0;width:44px;height:44px;display:grid;place-items:center;color:#303034}#hint svg{opacity:.65}.caption-measure{position:absolute;inset:0 0 auto;visibility:hidden;pointer-events:none}#focus-type{display:block;width:100%;font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.025em}#focus-type::after{content:'Connections ↗';float:right;color:#796b9b;font-size:.8rem;letter-spacing:0;font-weight:400;padding-top:.1rem}#gesture-hint{font-size:.8rem;line-height:1.5;color:#737078;margin:.15rem 0 0}#progress{position:fixed;bottom:0;left:0;right:0;height:2px;background:#f0f0f1;z-index:8}#progress span{display:block;height:100%;background:#303034;width:100%;transform:scaleX(.0294);transform-origin:left}
#connections{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,42rem);max-height:78svh;padding:.75rem 1.5rem calc(1rem + env(safe-area-inset-bottom));border:0;border-top:1px solid #d8d8dc;border-radius:0;background:#fff;color:#303034;overflow-y:auto;overscroll-behavior:contain}#connections::backdrop{background:transparent}.sheet-head{touch-action:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}.sheet-head h2{font-size:1rem;font-weight:500;margin:0}.sheet-head button{font-size:.875rem;text-decoration:underline;text-underline-offset:.3em}#relations{display:grid;margin:.5rem 0}#relations button{position:relative;padding:.65rem 1.6rem .65rem 0;font-size:1rem;line-height:1.4}#relations button[aria-pressed=true]::after{content:'✓';position:absolute;right:0}.sheet-actions{border-top:1px solid #e9e9ec;padding-top:.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.sheet-actions button{font-size:.875rem;line-height:1.4}.no-script{position:fixed;z-index:10;background:#fff;inset:30% 1rem auto;padding:2rem;line-height:1.6}
@media(max-width:600px){.counter{left:1.25rem;top:calc(1.1rem + env(safe-area-inset-top))}.reading{padding:1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom))}.reading #caption,.reading .caption-measure{font-size:1rem;line-height:1.55}#connections{padding-left:1.25rem;padding-right:1.25rem}}
@media(max-height:500px) and (orientation:landscape){.reading{left:52%;padding:1.2rem;bottom:0;max-height:95svh}#figure{right:48%;bottom:0;top:2.5rem}#geometry{width:min(50vw,85svh);height:100%}#connections{max-height:95svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.source-note{border-top:1px solid #e9e9ec;margin-top:.8rem;padding:.8rem 0;font-size:.875rem;line-height:1.55;color:#55515d}.source-note summary{cursor:pointer;min-height:32px}.source-note p{margin:.6rem 0}

#open-map{display:block;width:100%;border-top:1px solid #e6e4ea;padding:.8rem 0;color:#796b9b;font-size:.9rem}#caption{will-change:opacity}

/* Reading controls stay separate from the manipulable model. */
html{scroll-snap-type:none;scroll-padding:0}
.step{scroll-snap-align:none}
.lesson-header{position:fixed;z-index:12;inset:0 0 auto;display:flex;align-items:center;gap:1rem;padding:calc(.5rem + env(safe-area-inset-top)) 1.5rem .5rem;background:#fff;min-height:60px}
.lesson-header .counter{position:static;pointer-events:auto;min-width:88px;min-height:44px;padding:0;font-size:.8rem;flex-shrink:0}
#chapter-name{color:#77717e;font-size:.8rem;line-height:1.3}
#open-reference{margin-left:auto;font-size:.85rem;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
#figure{top:calc(4.2rem + env(safe-area-inset-top));bottom:calc(var(--reading-height) + .5rem)}
#geometry{width:min(100%,calc(100svh - var(--reading-height) - 4.7rem),850px)}
.reading{padding:.7rem 1.5rem calc(.5rem + env(safe-area-inset-bottom));max-height:58svh;overflow:auto;overscroll-behavior:contain}
.reading-inner{max-width:40rem}
.lesson-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem 1rem;margin-bottom:.45rem}
.lesson-heading h2{font-size:.82rem;font-weight:500;line-height:1.4;margin:0;color:#65596f}
#map-label{margin-left:auto;font-size:.68rem;letter-spacing:.02em;color:#77717e;line-height:1.4}
.reading #caption{font-size:1.05rem;line-height:1.5;color:#303034;min-height:1.5em}
.figure-key{display:flex;align-items:center;gap:.65rem;margin-top:.45rem;border-top:1px solid #eeebf2;padding-top:.2rem}
#figure-key{font-size:.8rem;line-height:1.45;color:#68616e;margin:0;flex:1}
#step-detail{font-size:.75rem;text-decoration:underline;text-underline-offset:3px;min-width:44px;text-align:right;flex-shrink:0}
#context-terms{display:flex;flex-wrap:wrap;gap:0 .75rem;align-items:center}
#context-terms button{font-size:.77rem;min-height:36px;padding:.25rem 0;color:#66567c;text-decoration:underline;text-decoration-color:#d4cbdc;text-underline-offset:4px}
.lesson-navigation{display:flex;align-items:center;gap:1rem;min-height:44px;border-top:1px solid #eeebf2;margin-top:.1rem}
.lesson-navigation button{font-size:.8rem;white-space:nowrap;min-height:44px}
.lesson-navigation button:disabled{opacity:.35;cursor:default}
#next-step{margin-left:auto;text-align:right}
#turn-figure{color:#66567c;text-decoration:underline;text-underline-offset:4px}
#turn-figure[aria-pressed=true]{font-weight:500}
#reset-study{color:#77717e}
#reading-actions{position:static;margin:0}
#hint{display:none}
#explore{padding:.45rem 0 .2rem}
#gesture-hint{font-size:.75rem;margin:0}
#focus-type{font-size:.9rem;padding:.2rem 0;min-height:44px}
#reference{position:fixed;z-index:11;top:calc(4rem + env(safe-area-inset-top));right:0;bottom:0;width:360px;background:#fff;border-left:1px solid #e7e3eb;padding:0 1.4rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.reference-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0}
.reference-head h2{font-size:1rem;line-height:1.5;font-weight:500;margin:.5rem 0}
.reference-head button{font-size:.8rem;text-decoration:underline;text-underline-offset:4px}
#reference-tabs{display:flex;gap:.8rem;flex-shrink:0;border-bottom:1px solid #e7e3eb}
#reference-tabs button{font-size:.73rem;padding:.4rem 0;color:#77717e}
#reference-tabs button[aria-pressed=true]{color:#303034;box-shadow:inset 0 -1px #796b9b}
#reference-content{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:.8rem 0 1rem;scrollbar-width:thin}
#reference-content h3{font-size:1rem;line-height:1.4;font-weight:500;margin:.3rem 0 .65rem}
#reference-content h4{font-size:.8rem;font-weight:500;margin:1.2rem 0 .3rem}
#reference-content p{font-size:.86rem;line-height:1.6;margin:.4rem 0 .8rem}
#reference-content .reference-question{font-size:1.1rem;line-height:1.4;color:#57456b;margin:1rem 0}
#reference-content .reference-note{font-size:.76rem;color:#78717e}
#reference-content .reference-eyebrow{font-size:.65rem;letter-spacing:.09em;color:#827b89}
.reference-terms{display:flex;gap:.25rem 1rem;flex-wrap:wrap}
.reference-terms button,.reference-back{font-size:.8rem;color:#66567c;text-decoration:underline;text-underline-offset:4px}
.function-entry{display:grid;grid-template-columns:30px 1fr;gap:.1rem .5rem;width:100%;padding:.75rem 0;border-bottom:1px solid #eeebf2}
.function-entry strong{grid-row:span 2;font-weight:500;font-size:1.05rem}
.function-entry span{font-size:.8rem}
.function-entry small{font-size:.75rem;line-height:1.4;color:#77717e}
.word-entry{border-bottom:1px solid #eeebf2}
.word-entry summary{font-size:.85rem;cursor:pointer;padding:.65rem 0;min-height:44px}
#contents{position:fixed;inset:0;margin:auto;width:min(94vw,520px);max-height:85svh;padding:1rem 1.5rem;border:1px solid #e7e3eb;background:#fff;color:#303034;overflow:auto;overscroll-behavior:contain}
#contents::backdrop{background:rgb(255 255 255 / .88)}
.contents-intro{font-size:.85rem;line-height:1.5;color:#78717e}
#chapter-list details{border-bottom:1px solid #eeebf2}
#chapter-list summary{font-size:.85rem;line-height:1.5;padding:.8rem 0;cursor:pointer}
#chapter-list a{display:block;font-size:.85rem;line-height:1.45;min-height:44px;padding:.65rem .5rem;text-decoration:none;color:#77717e}
#chapter-list a[aria-current=step]{color:#66567c;background:#f6f3f8}
#chapter-list a:focus-visible{outline:2px solid #796b9b;outline-offset:-2px}
#contents-explore{font-size:.85rem;color:#66567c;margin-top:.8rem}
@media(min-width:1000px){
 body.reference-open #figure,body.reference-open .reading{right:360px}
 body.reference-open #geometry{width:min(100%,calc(100svh - var(--reading-height) - 4.7rem),780px)}
}
@media(max-width:999px){
 #reference{left:0;width:auto;bottom:calc(var(--reading-height) + .5rem);border-left:0;border-bottom:1px solid #e7e3eb;padding:0 1.25rem;max-width:42rem;margin:0 auto}
 body.reference-open #geometry{visibility:hidden}
}
@media(max-width:600px){
 .lesson-header{padding-left:1.25rem;padding-right:1.25rem;gap:.6rem}
 .lesson-header .counter{min-width:78px}
 #chapter-name{font-size:.67rem;max-width:140px}
 #open-reference{font-size:.78rem}
 .reading{padding:.6rem 1.25rem calc(.4rem + env(safe-area-inset-bottom))}
 .reading #caption{font-size:1rem;line-height:1.48}
 .lesson-heading h2{font-size:.75rem}
 #map-label{font-size:.61rem}
 #context-terms{gap:0 .7rem}
 #context-terms button{font-size:.72rem}
 .lesson-navigation{gap:.85rem}
 #figure-key{font-size:.73rem}
}
@media(max-height:500px) and (orientation:landscape){
 .reading{left:52%;right:0;top:3.8rem;bottom:0;max-height:none;padding:.5rem 1.1rem;overflow:auto}
 #figure{left:0;right:48%;top:3.8rem;bottom:0}
 #geometry{width:min(100%,75svh)}
 #reference{left:0;right:48%;top:3.8rem;bottom:0;width:auto;margin:0;padding:0 1rem}
 body.reference-open #figure{right:48%}body.reference-open .reading{right:0}
 .lesson-navigation{gap:.5rem}
}

/* One caption and one quiet key. Detail lives behind the question mark. */
.lesson-header{gap:.75rem}
.lesson-header #map-label{margin:0 auto;color:#77717e;font-size:.72rem;text-align:center}
#open-reference{width:44px;min-width:44px;text-align:right;font-size:1rem;text-decoration:none;margin-left:0}
.figure-key{border:0;padding:0;margin:.5rem 0 .2rem}
#figure-key{font-size:.75rem;color:#77717e;line-height:1.4}
.lesson-navigation{border:0;margin:0;min-height:44px;gap:1rem}
#previous-step,#next-step{font-size:1.15rem;min-width:44px}
#turn-figure{text-decoration:none;font-size:.78rem}
.reading{max-height:45svh;padding-bottom:calc(.35rem + env(safe-area-inset-bottom))}
.reading-inner{max-width:38rem}
#explore{display:flex;align-items:center;gap:1rem;flex:1;border:0;padding:0}
#type-select{appearance:auto;font:inherit;font-size:.85rem;color:#57456b;border:0;background:#fff;min-width:82px;min-height:44px;padding:.3rem .1rem;cursor:pointer}
#type-select:focus-visible{outline:2px solid #796b9b;outline-offset:2px}
#focus-type{font-size:.78rem;width:auto;margin-left:auto;color:#66567c;font-weight:400;letter-spacing:0;white-space:nowrap}
#focus-type::after{content:none}
#relations button{padding:.6rem 1.6rem .6rem 0}
#relations button span,#relations button small{display:block}
#relations button small{font-size:.75rem;line-height:1.5;color:#77717e;margin-top:.18rem}
.role-order{font-size:.75rem;line-height:1.4;color:#77717e;margin:.1rem 0 .7rem}
#geometry .definition-hit{cursor:pointer;pointer-events:all}
#geometry .definition-hit:focus-visible{outline:none;stroke:#796b9b;stroke-width:1.5;vector-effect:non-scaling-stroke}
@media(max-width:600px){
 .lesson-header #map-label{font-size:.66rem}
 .lesson-header .counter{min-width:72px}
 .reading #caption{font-size:1rem;line-height:1.48}
 #figure-key{font-size:.7rem}
 .lesson-navigation{gap:.7rem}
 #explore{gap:.5rem}
}