/* A visitor-paced film: narration and study share a stage; transport owns a row. */
#opening[hidden]{display:none}
#opening{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:24px;padding:142px 4.5vw 76px;box-sizing:border-box;pointer-events:none;isolation:isolate}
#opening-stage{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:5vw;min-height:0;align-items:center;pointer-events:none}
#opening-copy{position:relative;min-width:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:8px 12px 12px 0;pointer-events:auto}
#opening-title{font:400 clamp(32px,3.8vw,54px)/1.06 InquirySerif,Georgia,serif;letter-spacing:-.03em;text-wrap:balance;max-width:17ch;margin:0 0 24px;color:var(--ink);outline:none}
#opening-description{font-size:16px;line-height:1.6;max-width:42ch;margin:0;color:var(--muted);text-wrap:pretty}
#opening-visual{position:relative;min-width:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;pointer-events:auto;padding:8px 12px 12px 0}
#opening-visual[hidden]{display:none}
#opening button{pointer-events:auto}
#skip-opening{position:fixed;right:4.5vw;top:88px;font-size:12px;min-height:44px;padding:8px 0;display:flex;align-items:center;gap:22px}
#skip-opening span{color:var(--red);font-size:20px}
#opening .opening-bottom{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;min-width:0;pointer-events:auto;padding-top:14px;border-top:1px solid var(--line)}
#opening-position{grid-column:1/-1;font:12px Human,sans-serif;color:var(--muted);margin:0}
#opening-chapters{grid-column:1/-1;display:flex;width:min(680px,100%);margin:0}
#opening-chapters button{position:relative;flex:1;min-width:0;text-align:left;font:11px/1.3 Human,sans-serif;min-height:44px;border-top:1px solid var(--line);padding:16px 7px 6px 0;color:var(--muted)}
#opening-chapters button:before{content:'';position:absolute;top:-3px;left:0;width:5px;height:5px;background:var(--ground);border:1px solid var(--muted);border-radius:50%}
#opening-chapters button[data-passed="true"]:before{background:var(--muted)}
#opening-chapters button[aria-current]{color:var(--red);border-color:var(--red)}
#opening-chapters button[aria-current]:before{border-color:var(--red);background:var(--red)}
.opening-actions{display:flex;align-items:center;gap:28px;min-width:0;flex-wrap:wrap}
#opening-next{display:flex;gap:24px;align-items:center;color:var(--red);font:16px/1.4 Human,sans-serif;padding:10px 0;min-height:48px;border-bottom:1px solid var(--red);text-align:left;max-width:100%}
#opening-next span{font-size:24px}
#opening-back{font-size:13px;min-height:44px;padding:10px 0}
#opening-back:disabled{display:none}
#opening-next:disabled{opacity:.5;cursor:default}
#opening-exits{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
#opening-exits[hidden]{display:none}
#opening-exits button{font-size:13px;padding:12px 0;min-height:44px;border-bottom:1px solid var(--line)}
.opening-scope{grid-column:1/-1;font-size:11px;line-height:1.5;color:var(--muted);margin:0}
#opening-task{font:400 23px/1.25 Hand,cursive;color:var(--red);margin:20px 0 0;max-width:32ch;pointer-events:none}
#opening-task[hidden]{display:none}
#opening .opening-companion{display:inline-block;margin-top:20px;padding:8px 0;font:13px/1.5 Human,sans-serif;color:var(--red);text-underline-offset:5px;pointer-events:auto}
#opening .opening-companion[hidden]{display:none}
#opening button:hover,#opening-exits button:hover{color:var(--red)}
#opening button:focus-visible,#opening a:focus-visible{outline:2px solid var(--red);outline-offset:5px}
#replay-opening{font-size:12px}
body.opening-active #viewport{bottom:0}
body.opening-active #scene-controls,body.opening-active #ai-controls,body.opening-active #world-question,body.opening-active #question-tether,body.opening-active .guide-control,body.opening-active .scene-voice,body.opening-active #return-note,body.opening-active #recipient-response,body.opening-active #people-finder,body.opening-active .orientation,body.opening-active #lab-door,body.opening-active #ai-caption,body.opening-active #ai-inspection{visibility:hidden!important;pointer-events:none!important}
body.opening-active>.skip{display:none}
body.opening-active header{z-index:65}
body.opening-active header #choose-character,body.opening-active header #turn-model,body.opening-active header #read-equivalent{display:none}
body.opening-active #world .scene-presence,body.opening-active .need-bubble{visibility:hidden!important}
body.opening-active #world,body.opening-active #ai-world{transition:transform 1.6s var(--ease)}
body.opening-active #camera{perspective:1800px}
body.opening-active[data-opening-shot="0"] #world .role-frame,body.opening-active[data-opening-shot="3"] #world .role-frame{opacity:0}
body.opening-active #world .person-name{font-family:Hand,cursive}
body.opening-active #world .contribution{pointer-events:none}
body.opening-active #ai-world .ai-ground .ai-table-edge{fill:#d0d2c622}
/* Diagram chapters are table inserts; the physical study remains faintly present. */
body.opening-active:not([data-opening-visual="model"]) #opening-visual{background:color-mix(in srgb,var(--ground) 96%,transparent);padding:24px;box-shadow:0 16px 48px #0000000c}
body.opening-active:not([data-opening-visual="model"]) #world{opacity:.12;pointer-events:none}
body.opening-active #opening .potential-intro .potential-equation{font-size:clamp(23px,2.4vw,32px)}
body.opening-active #opening :is(.potential-field,.history-factory svg){max-height:none}
body.opening-active #opening .potential-intro .potential-observation{font-size:24px;min-height:0}
@media(max-width:900px){
 #opening{padding:126px 4vw 76px;gap:20px}
 #opening-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3vw}
 #opening-title{font-size:36px}#opening-description{font-size:14px}
 #opening .opening-bottom{grid-template-columns:1fr;gap:8px}
 #opening-next{font-size:14px}#opening-exits{gap:20px}#opening-exits button{font-size:12px}
 body.opening-active:not([data-opening-visual="model"]) #opening-visual{padding:16px}
}
@media(max-width:600px){
 #opening{padding:106px 22px calc(66px + env(safe-area-inset-bottom));gap:16px}
 #opening-stage{display:block;min-height:0}
 #opening-copy{padding:0 4px 8px 0;max-height:100%}
 #opening-title{font-size:31px;max-width:21ch;line-height:1.06;margin-bottom:14px}
 #opening-description{font-size:14px;line-height:1.5;max-width:46ch}
 #opening-task{font-size:20px;margin-top:12px}
 #opening-chapters{display:none}
 #opening .opening-bottom{gap:4px;padding-top:10px}
 #opening-position{font-size:11px}
 .opening-actions{gap:20px;flex-wrap:nowrap;align-items:start}
 #opening-next{font-size:14px;gap:14px;min-height:44px;padding:7px 0}
 #opening-next span{font-size:21px}
 #opening-back{font-size:12px;min-height:44px;padding:8px 0}
 #opening-exits{gap:20px}#opening-exits button{font-size:11px;min-height:38px;padding:7px 0}
 .opening-scope{font-size:10px;margin-top:5px}
 #skip-opening{top:62px;right:22px;font-size:11px;gap:12px;min-height:40px}
 #replay-opening{font-size:11px}
 body.opening-active:not([data-opening-visual="model"]) #opening-stage{overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin}
 body.opening-active:not([data-opening-visual="model"]) #opening-copy{max-height:none;overflow:visible}
 body.opening-active:not([data-opening-visual="model"]) #opening-visual{max-height:none;overflow:visible;margin-top:24px;padding:16px 0;background:var(--ground);box-shadow:none}
 body:not(.opening-active) .entry-links #replay-opening{position:absolute;left:17px;top:58px;min-height:28px;font-size:10px;padding:5px 0;border:0}
}
@media(max-height:650px) and (min-width:601px){
 #opening{padding-top:106px;padding-bottom:64px;gap:12px}
 #opening-title{font-size:30px;margin-bottom:14px}
 #opening-description{font-size:13px;line-height:1.5}
 #opening-task{font-size:20px;margin-top:12px}
 #opening .opening-bottom{gap:3px;padding-top:8px}
 #opening-chapters button{min-height:32px;padding-top:10px}
 #opening-next{min-height:38px;padding:5px 0;font-size:13px}
 #opening-back{min-height:38px;padding:5px 0}
 .opening-scope{font-size:10px}#opening-position{font-size:10px}
 #opening-exits button{font-size:11px;min-height:36px;padding:5px 0}
}
@media(prefers-reduced-motion:reduce){body.opening-active #world,body.opening-active #ai-world,body.opening-active #study-platform{transition:none}}

/* Geometry yields space to the interaction and its consequence. Controls stay in view. */
@media(min-width:601px){
 body.opening-active:not([data-opening-visual="model"]) #opening-visual{height:100%;min-height:0;box-sizing:border-box;padding:12px}
 #opening-visual>section{height:100%;min-height:0;box-sizing:border-box;display:grid;gap:6px}
 #opening-visual>.potential-intro{grid-template-rows:auto minmax(60px,1fr) auto auto auto}
 body.opening-active #opening .potential-intro .potential-equation{font-size:26px;padding:0;line-height:1.15}
 #opening-visual .potential-equation button{padding:4px 0;min-height:36px}
 body.opening-active #opening .potential-field{height:100%;min-height:60px;max-height:290px;align-self:center}
 #opening-visual .potential-controls{gap:20px;flex-wrap:nowrap}
 #opening-visual .potential-controls button{font-size:13px;padding:6px 0;min-height:40px}
 body.opening-active #opening .potential-intro .potential-observation{font:19px/1.2 Hand,cursive;margin:0;max-width:none}
 #opening-visual .potential-scope{font-size:10px;line-height:1.35;margin:0}
 #opening-visual>.history-factory{grid-template-rows:minmax(90px,1fr) auto auto auto}
 body.opening-active #opening .history-factory svg{height:100%;min-height:90px;max-height:380px;align-self:center}
 #opening-visual .factory-controls{gap:20px;flex-wrap:nowrap}
 #opening-visual .factory-controls button{font-size:13px;min-height:40px;padding:6px 0}
 #opening-visual .factory-caption{font:19px/1.2 Hand,cursive;min-height:0;margin:0;max-width:none}
 #opening-visual .factory-source{font-size:10px;line-height:1.35;margin:0}
 #opening-visual>.delegation-study{grid-template-rows:minmax(70px,1fr) auto auto auto auto}
 #opening-visual .delegation-encounter{height:100%;min-height:70px;max-height:260px}
 #opening-visual .delegation-person{height:100%;max-height:240px;bottom:0}
 #opening-visual :is(.delegation-question,.delegation-now,.delegation-later){font-size:19px;max-width:128px}
 #opening-visual .delegation-question{top:0}
 #opening-visual .delegation-choices{padding-top:4px;gap:20px}
 #opening-visual .delegation-choices button{font-size:13px;line-height:1.25;min-height:44px;padding:6px 0}
 #opening-visual .delegation-observation{font:19px/1.2 Hand,cursive;min-height:0;margin:0}
 #opening-visual .delegation-study>a{font-size:11px;min-height:28px;padding:3px 0}
 #opening-visual>.harness-climax-intro{grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);grid-template-rows:auto minmax(min-content,1fr) auto auto;gap:6px 16px}
 #opening-visual .climax-context{grid-column:1/-1;gap:20px;margin:0}
 #opening-visual .climax-context button{font-size:12px;min-height:34px;padding:5px 0}
 #opening-visual .climax-model{grid-column:1;grid-row:2/4;height:100%;min-height:150px}
 #opening-visual .climax-model img{height:100%;max-height:230px;width:100%;bottom:0}
 #opening-visual :is(.climax-potential,.climax-practice){font-size:16px;max-width:85px}
 #opening-visual .climax-potential{top:0;left:0}
 #opening-visual .climax-practice{top:auto;bottom:0;right:0}
 #opening-visual .climax-choices{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:6px;padding-top:0;border-top:0;align-self:start}
 #opening-visual .climax-choices button{font-size:13px;line-height:1.25;min-height:44px;padding:5px 0}
 #opening-visual .climax-choices small{font-size:10px;line-height:1.25;margin-bottom:3px}
 #opening-visual .climax-consequence{grid-column:2;grid-row:3;display:block}
 #opening-visual .climax-consequence p{font-size:12px;line-height:1.3;max-width:none;margin:0 0 5px}
 #opening-visual .narrative-note{grid-column:1/-1;grid-row:4;font-size:11px;line-height:1.35;color:var(--muted)}
 #opening-visual .narrative-note summary{min-height:28px;padding:4px 0;cursor:pointer}
 #opening-visual .narrative-note .climax-reveal{font:18px/1.2 Hand,cursive;color:var(--red);margin:8px 0}
 #opening-visual .narrative-note[open]{position:relative;z-index:1;background:var(--ground);max-height:150px;overflow:auto}
}
.narrative-note{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.4}
.narrative-note summary{cursor:pointer;min-height:40px;padding:8px 0}
.narrative-note .climax-reveal{font:24px/1.2 Hand,cursive;color:var(--red)}
/* Short desktop frames retain the scene and transport before secondary captions. */
@media(min-width:601px) and (max-height:850px){
 #opening{padding-top:clamp(106px,18vh,132px);gap:18px}
 #opening .opening-bottom{grid-template-columns:minmax(0,1fr) auto;gap:6px 24px}
 #opening-position{position:absolute;right:0;top:14px;grid-column:auto}
 #opening .opening-scope{display:none}
 #opening-chapters{max-width:calc(100% - 150px)}
 #opening-visual .potential-intro .potential-field{min-height:110px}
}