:root{font-family:Segoe UI,system-ui,sans-serif;color:#15282c;background:#f5f3ed;--ink:#15282c;--muted:#58666b;--line:#d8dedb;--accent:#216b62}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column}button,a{font:inherit}button{border:1px solid var(--line);border-radius:6px;background:#fffdf8;color:var(--ink);padding:8px 13px;cursor:pointer}button:hover{background:#e4f0eb}button:focus-visible,a:focus-visible{outline:3px solid #247da9;outline-offset:2px}button:disabled{opacity:.4;cursor:default}a{color:var(--accent)}header{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);background:#fffdf8;min-height:67px}header>div{flex:1}header strong{display:block;font-size:18px}#session-label{font-size:12px;color:var(--muted)}.workspace{flex:1;display:flex;min-height:0}aside{width:280px;flex-shrink:0;border-right:1px solid var(--line);overflow:auto;padding:18px 13px;background:#eeeee6}.intro{font-size:17px;font-weight:650;padding:0 6px 16px}.intro span{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:5px}.class-heading{width:100%;text-align:left;border:0;background:transparent;font-weight:650;padding:11px 7px;line-height:1.35}.class-heading small{font-weight:400;color:var(--muted);display:block}.segment-list{margin:0 0 12px;padding:0;list-style:none}.segment-list button{display:block;width:100%;text-align:left;font-size:13px;line-height:1.35;border:0;border-left:3px solid transparent;border-radius:0;padding:9px 9px;background:transparent}.segment-list button[aria-current=step]{background:#dcece5;border-left-color:var(--accent)}.aside-note{font-size:12px;line-height:1.5;color:var(--muted);padding:0 8px}main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.segment-head{padding:14px 24px 12px;background:#fffdf8;border-bottom:1px solid var(--line)}#class-label{font-size:12px;color:var(--muted)}h1{font-size:21px;font-weight:650;margin:5px 0}#segment-focus{font-size:14px;line-height:1.45;margin:6px 0;max-width:1000px}.links{display:flex;align-items:center;gap:18px;font-size:12px}.links button{border:0;padding:3px 0;background:transparent;text-decoration:underline;color:var(--accent)}#frame-host{flex:1;min-height:0;background:#282e2b;position:relative;overflow:auto}iframe{border:0;width:100%;height:100%;display:block;background:#282e2b}#teaching-card{margin:28px auto;padding:36px 44px;max-width:900px;background:#faf9f4;min-height:250px;line-height:1.65}#teaching-card h2{font-size:28px;margin:0 0 20px}#teaching-card p{font-size:19px}#teaching-card details{margin-top:24px;color:var(--muted);font-size:14px}footer{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:11px 20px;border-top:1px solid var(--line);background:#fffdf8}footer div{text-align:center;font-size:13px}footer small{display:block;color:var(--muted);margin-top:3px}#next{background:var(--accent);color:white;border-color:var(--accent)}dialog{border:1px solid var(--line);border-radius:10px;width:min(850px,90vw);max-height:85vh;padding:24px;background:#fffdf8}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0}.focus aside,.focus .segment-head{display:none}.focus header{min-height:45px;padding:5px 16px}.focus header strong{font-size:15px}.focus #session-label{display:none}.outline-hidden aside{display:none}[hidden]{display:none!important}@media(max-width:900px){aside{width:230px}.segment-head{padding:12px 15px}h1{font-size:18px}#segment-focus{font-size:13px}header{padding:9px;gap:8px}header strong{font-size:15px}header button{font-size:12px;padding:7px}#teaching-card{margin:16px;padding:24px}#teaching-card p{font-size:17px}}@media(max-width:640px){aside{position:absolute;z-index:5;left:0;top:67px;bottom:0;width:270px;box-shadow:8px 0 25px #0002}h1{font-size:17px}.segment-head{padding:8px 12px}#segment-focus{max-height:60px;overflow:auto}footer{padding:8px;font-size:12px;gap:8px}footer button{padding:9px}#teaching-card h2{font-size:22px}}
#class-scope{position:relative}#class-scope summary{cursor:pointer;color:var(--accent)}#scope-text{position:absolute;z-index:6;right:0;top:24px;width:min(600px,75vw);max-height:55vh;overflow:auto;background:#fffdf8;border:1px solid var(--line);box-shadow:0 8px 30px #0002;border-radius:8px;padding:14px 20px;font-size:14px;line-height:1.5}


/* Lecture visits in course order, one link per page occurrence. */
#course-map{width:min(860px,94vw);max-height:92dvh;padding:22px 26px}
#course-map .dialog-head{gap:16px}#course-map .dialog-head button{flex:none}
.map-pages-table{width:100%;border-collapse:collapse;margin-top:20px;text-align:left}
.map-pages-table th,.map-pages-table td{padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.map-pages-table thead th{font-size:13px;color:var(--muted);font-weight:500;padding-top:0}
.map-pages-table tbody th{width:85px;font-size:17px;padding-top:22px}
.map-pages-table small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:4px}
.map-pages{display:flex;flex-wrap:wrap;gap:6px}
.map-page{min-width:40px;min-height:40px;padding:7px;color:var(--accent);font-variant-numeric:tabular-nums}
.map-page[aria-current=page]{background:var(--accent);border-color:var(--accent);color:#fff}
.map-pages-table tbody tr:last-child>*{border-bottom:0}
@media(max-width:640px){#course-map{padding:16px;width:96vw}.map-pages-table th,.map-pages-table td{padding-left:5px;padding-right:5px}.map-pages-table tbody th{width:60px}.map-pages{gap:5px}.map-page{min-width:40px;min-height:44px}}

/* Reserve the main area for the selected material; keep controls within reach. */
header{min-height:50px;padding:6px 14px;gap:12px}
header strong{font-size:16px}
header>div{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
aside{width:248px;padding:12px 10px}
.intro{padding-bottom:10px;font-size:15px}
.segment-head{padding:8px 18px}
h1{font-size:20px;margin:3px 0}
#segment-focus{margin:4px 0;font-size:14px}
footer{padding:7px 14px;gap:12px}
.focus header{min-height:44px}
#teaching-card{width:calc(100% - 40px);max-width:1200px;padding:clamp(24px,4vw,60px);margin:auto;min-height:0}
#teaching-card:not([hidden]){align-self:center}
#frame-host:has(#teaching-card:not([hidden])){display:flex;align-items:safe center;padding:20px 0}
#teaching-card h2{font-size:clamp(26px,2.4vw,38px)}
#teaching-card p{font-size:clamp(20px,2vw,30px)}
@media(max-width:900px){header>div{display:block}aside{width:220px}.segment-head{padding:8px 12px}header strong{font-size:14px}footer{padding:6px 10px}#teaching-card{width:calc(100% - 24px);padding:24px}#teaching-card p{font-size:20px}}
@media(max-width:640px){header{flex-wrap:wrap;gap:6px}header>div{min-width:120px}#session-label{display:none}aside{top:50px;width:270px}.segment-head{padding:7px 10px}.links{gap:12px;flex-wrap:wrap}footer{gap:6px}footer div{font-size:11px}#teaching-card{padding:20px}#teaching-card h2{font-size:24px}}
.figure-exploration #frame-host{position:fixed;inset:0;z-index:50;background:#faf9f4}

/* Topic text must never move or resize the presentation viewport. Keep a
   stable header/footer slot; longer text scrolls inside its own slot. */
main{--topic-height:150px;--footer-height:60px;position:relative}
.segment-head{flex:0 0 var(--topic-height);height:var(--topic-height);min-height:0;display:grid;grid-template-rows:16px auto minmax(0,1fr) 22px;gap:3px}
#class-label{white-space:nowrap;overflow:auto;line-height:16px;min-width:0}
#segment-title{font-size:20px;line-height:1.25;max-height:2.5em;overflow:auto;margin:0;min-width:0}
#segment-focus{min-height:0;max-height:none;overflow:auto;margin:0;overscroll-behavior:contain}
.segment-head .links{min-width:0;flex-wrap:nowrap;white-space:nowrap;gap:16px}
.segment-head .links>a,.segment-head .links>button{flex:none}
footer{flex:0 0 var(--footer-height);height:var(--footer-height);min-height:0}
footer>div{min-width:0;max-height:100%;overflow:auto}
footer>button{flex:none}
#frame-host{flex:1 1 0}
/* Keep the previous slide painted until the full-size staging document has
   loaded, applied the selected frame, and settled its font/layout work. */
#frame-host>iframe.course-outgoing,#frame-host>iframe.course-preparing{position:absolute;inset:0}
#frame-host>iframe.course-preparing{visibility:hidden;pointer-events:none}
#frame-host>iframe.course-outgoing{pointer-events:none}
#frame-host>iframe.course-cached{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.workspace{position:relative}
@media(max-width:900px){main{--topic-height:160px}#segment-title{font-size:18px}}
@media(max-width:640px){
  main{--topic-height:174px;--footer-height:68px}
  #segment-title{font-size:17px}
  .segment-head{grid-template-rows:16px auto minmax(0,1fr) 40px}
  .segment-head .links{align-content:start;align-items:start;flex-wrap:wrap;gap:4px 12px}
  .segment-head .links>button{padding:0}
  aside{top:0}
}
/* A real child viewport preserves native pointer coordinates and dialog layout
   when a portrait phone displays the complete course in landscape. */
.course-mobile-shell{position:fixed;inset:0;overflow:hidden;background:#282e2b}
.course-mobile-frame{position:absolute;display:block;max-width:none;border:0;transform-origin:center center}
body:has(>.course-mobile-shell){overflow:hidden}
#orientation-toggle[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}
.course-mobile header{flex:0 0 50px;height:50px;min-height:50px;padding:3px 8px;gap:6px;flex-wrap:nowrap}
.course-mobile header button{min-height:44px;font-size:12px;padding:6px 10px;white-space:nowrap}
.course-mobile header>div{min-width:0;flex:1;overflow:hidden}
.course-mobile header strong{font-size:12px;line-height:1.25}
.course-mobile #session-label{display:none}
.course-mobile main{--footer-height:52px;--topic-height:130px}
.course-mobile footer{padding:3px 8px;gap:6px}
.course-mobile footer button{min-height:44px;font-size:12px;padding:6px 12px}
.course-mobile footer div{font-size:11px}
.course-mobile aside{position:absolute;z-index:5;inset:0 auto 0 0;width:min(280px,85vw);box-shadow:8px 0 25px #0002}
.course-mobile.focus:not(.outline-hidden) aside{display:block}
.course-mobile #course-map{max-height:94dvh;padding:12px 18px}
@media(max-width:500px){.course-mobile header>div{display:none}.course-mobile header{justify-content:space-between}.course-mobile header button{padding:6px 8px}.course-mobile main{--topic-height:174px}}

/* Focus owns the complete viewport. Controls are temporary layers; opening
   either bar or the outline never changes the lecture iframe's dimensions. */
#controls-toggle{display:none}
body.focus{overflow:hidden}
.focus .workspace{position:fixed;inset:0}
.focus main{width:100%;height:100%}
.focus #frame-host{width:100%;height:100%}
.focus #course-header,.focus #course-footer{position:fixed;left:0;right:0;z-index:30;visibility:hidden;pointer-events:none;background:#fffdf8f7;box-shadow:0 2px 14px #15282c1a}
.focus #course-header{top:0;height:auto;min-height:56px;padding:6px 68px 6px 12px;flex-wrap:wrap}
.focus #course-header button{min-height:44px}
.focus #course-footer{bottom:0;height:auto;min-height:60px;padding:6px 12px}
.focus #course-footer button{min-height:44px}
.focus.focus-controls #course-header,.focus.focus-controls #course-footer{visibility:visible;pointer-events:auto}
.focus #controls-toggle{position:fixed;z-index:40;top:6px;right:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;font:24px/1 system-ui;background:#fffdf8ed;box-shadow:0 1px 8px #15282c1a}
.focus #controls-toggle[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.focus:not(.outline-hidden) aside{display:block;position:fixed;z-index:35;left:0;top:56px;bottom:60px;width:min(300px,85vw);box-shadow:8px 0 25px #0002}
.focus #course-header>div{min-width:0}
@media(max-width:640px){.focus #course-header{gap:6px}.focus #course-header>div{display:none}}

.course-home{font-size:12px;flex:none;text-decoration:none}