/* White editorial theme, with a full-width cinematic opening scene. */
:root{--bg:#fff;--paper:#202326;--muted:#6c7379;--brass:#986333;--ember:#bc5d2c;--line:#20232618;--footer-inset:clamp(16px,2vw,40px)}
html,body{background:#fff;color:var(--paper);overflow-anchor:none}
body:after{display:none}
h1,h2,h3,.large-year,.bio-number,.timeline-year,.impact-kicker{font-family:var(--sans);font-weight:600}
h2 em,h1 em{font-style:normal;color:#7d858b}
.chapter,.sticky-scene,.context,.inventor,.mechanism-scene,.impact-scene,.timeline-scene,.bibliography{background:#fff}
.hero{background:linear-gradient(180deg,#fff 0%,#f6f9fa 26%,#e1edf1 48%,#eff0e7 75%,#fff 94%)}
.hero:after,.hero-year,.hero-engine .model-viewport:before{display:none}
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.hero-halo{position:absolute;right:12%;top:27%;width:24vw;height:24vw;min-width:180px;min-height:180px;border-radius:50%;background:radial-gradient(circle,#fff8e1 0%,#fff8e1b0 30%,#fff8e100 70%);filter:blur(8px)}
.hero-horizon{position:absolute;left:-20%;right:-20%;bottom:17%;height:25%;border-radius:50%;background:linear-gradient(#e5ebe73b,#fff0);filter:blur(22px)}
.hero-copy{top:9%;left:5%;right:5%;text-align:center;z-index:3}
.hero h1{font-family:var(--sans);font-size:clamp(3.5rem,6.8vw,7.5rem);font-weight:600;letter-spacing:normal;line-height:1.08;margin:0 0 18px}
.hero h1 span,.hero h1 em{display:inline;padding:0}
.hero h1 em{color:#818a8d}
.hero-subtitle{font-size:clamp(14px,1.2vw,19px);line-height:1.55;max-width:none;color:#737b80}
.hero-subtitle br{display:none}
.hero-engine{left:0;right:0;top:28%;bottom:auto;width:100%;height:57%;margin:0;z-index:2}
.hero-engine .model-viewport{height:100%;min-height:0;background:transparent;border:0;border-radius:0}
.hero-engine,.hero-engine .three-canvas{pointer-events:none;cursor:default}
.hero-engine .model-toolbar{left:50%;bottom:0;opacity:0;transition:opacity .2s}
.hero-engine:hover .model-toolbar,.hero-engine:focus-within .model-toolbar{opacity:1}
.hero-bottom{bottom:calc(var(--rail-h) + 13px);z-index:3;pointer-events:none}
.authors{font-size:16px;font-weight:600;line-height:1.6;color:#202326}.authors p:last-child{font-size:14px;font-weight:400;color:#40484d;margin-top:7px}
.model-viewport:before,.cutaway-art:before{background:radial-gradient(ellipse,#e9efed80,transparent 65%)}
.context-step h3,.mechanism-step h3,.bio-step h3{color:#202326}
.context-step h3,.mechanism-step h3,.bio-step h3,.explorer-detail h3{font-family:var(--sans);font-weight:600;letter-spacing:normal}
.hero-engine .three-canvas{mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 83%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 83%,transparent)}
.context-step>p:last-child,.mechanism-step p,.bio-step p,.impact-step p,.timeline-event p,.birthplace,.thanks{color:#656e75}
.large-year,.bio-number,.timeline-year{color:#a5805c}
.timeline-event.is-current .timeline-year{color:#343c40}
.timeline-node{background:#ccd3d4}.timeline-node:before{background:#fff;border-color:#9a7046}
.timeline-progress{background:#e4e8e9}.timeline-progress span{background:#a5805c}
.portrait-frame{background:#f1f2f0;border-radius:18px;box-shadow:0 20px 60px #2023260b}
.portrait img{filter:grayscale(1);mix-blend-mode:multiply}
.portrait figcaption{color:#7b8388}.bio-stack{border-color:#20232618}
.scene-footer{border-top-color:#20232614}
.step-dots button,.parts-nav button{color:#697277}
.step-dots button.active,.parts-nav button.active{color:#202326;background:#f0f2f3;border-color:#dce1e3;box-shadow:none}
.parts-nav span{color:#c7cdcf}
.sources h3,.sources li{color:#30373b}.sources small{color:#737b80}.sources li{border-color:#dfe4e6}
.sources li>a>span:last-child,.back-start span{color:#8e673f}
.presentation-controls button,.presentation-tools .fullscreen{background:#ffffffd9;color:#3b454b;border:1px solid #dce1e4;box-shadow:0 4px 16px #20303008;backdrop-filter:blur(18px);border-radius:12px}
.presentation-controls #presentation-next{background:#22292d;border-color:#22292d;color:#fff}
.presentation-controls button:hover:not(:disabled),.presentation-tools .fullscreen:hover{background:#eef1f2;border-color:#bfc8cd}
.presentation-controls #presentation-next:hover:not(:disabled){background:#45535b;border-color:#45535b}
.presentation-controls{left:var(--footer-inset);bottom:20px}
.presentation-controls button{font-size:16px;color:#202326}
.presentation-controls button:disabled{opacity:1;color:#697277;background:#f1f3f4;border-color:#d5dadd}
.presentation-tools{right:var(--footer-inset);bottom:20px;color:#202326}
.presentation-tools .chapter-indicator{font-size:16px;font-weight:600;letter-spacing:.04em}
.presentation-tools .divider{color:#59636a}
.fullscreen svg{stroke:#202326;stroke-width:1.6}
.presentation-controls:before,.presentation-tools:before{content:"";position:absolute;inset:-18px -12px;z-index:-1;background:#ffffffb8;border-radius:18px;filter:blur(12px);pointer-events:none}
.model-toolbar{background:#ffffffed;border-color:#dce3e6;box-shadow:0 8px 32px #2a424212;backdrop-filter:blur(16px)}
.model-toolbar button{color:#4c5960}.model-toolbar button:hover{color:#202326;background:#e9eef0}
.model-toolbar .explore-button{color:#fff;background:#293237}.model-toolbar .explore-button:hover{color:#fff;background:#4d5d65}
.zoom-value{color:#737e85}.toolbar-rule{background:#d5dcdf}
.hotspot-number{color:#4a565e;background:#ffffffeb;border-color:#c5d0d5;box-shadow:0 0 0 4px #ffffff55}
.hotspot-label{background:#fffffff2;color:#303c43;border-color:#d9e1e5;box-shadow:0 3px 14px #263c4212}
.model-hotspot.active .hotspot-number,.model-hotspot:hover .hotspot-number{background:#29383f;color:#fff;border-color:#29383f;box-shadow:0 0 0 4px #29383f0d}
.process-legend,.flow-lesson,.flow-legend{background:#ffffffed;color:#47565f;border-color:#d9e2e6;box-shadow:0 4px 20px #35475008}
.flow-tabs button{color:#61717a;border-color:#dbe3e7}.flow-tabs button[aria-pressed=true]{background:#e9eef1;color:#273d49}
.flow-copy,.piston-legend .piston-explanation{color:#667881}.flow-route{color:#2a4655}
.explorer-dialog{background:#fff;color:#202326;border-color:#dce3e6;box-shadow:0 35px 130px #20304033}
.explorer-dialog::backdrop{background:#e5ecebb8;backdrop-filter:blur(16px)}
.explorer-header,.explorer-sidebar,.explorer-parts,.explorer-adjustments{border-color:#e1e6e8}
.explorer-header,.explorer-sidebar{background:#fff}
.camera-presets{background:#fffffff0;border-color:#dae3e7}
.process-legend .water-key{color:#337b96}.process-legend .heat-key{color:#b36332}.process-legend .steam-key{color:#5a7081}
.process-legend small{color:#7a858d}
.explorer-main{background:radial-gradient(ellipse,#eef3f2,#fff 70%)}
.explorer-header h2,.explorer-detail h3{color:#263138}.explorer-detail p{color:#6b767d}
.explorer-parts button,.explorer-toggles button,.camera-presets button,#explorer-close{color:#596972;border-color:#d6e0e4;background:#fff}
.explorer-parts button[aria-pressed=true],.explorer-toggles button[aria-pressed=true],.camera-presets button[aria-pressed=true]{color:#213842;background:#e9f0f2;border-color:#cbdadf}
.explorer-adjustments label,.explorer-adjustments output{color:#65777f}
.guide-start,.guide-controls button{background:#eef3f4;color:#334e5a;border-color:#ccdce2}
@media(max-width:800px){
  .hero{height:100svh;min-height:720px}
  .hero-copy{top:11%;left:6%;right:6%}
  .hero h1{font-size:clamp(45px,10vw,76px);line-height:1.05;letter-spacing:normal;margin-bottom:20px}
  .hero h1 span,.hero h1 em{display:block}
  .hero-subtitle{font-size:13px;max-width:300px;margin:auto}
  .hero-engine{top:32%;height:47%;width:100%;left:0;right:0}
  .hero-engine .model-toolbar{opacity:1;bottom:0}
  .hero-bottom{bottom:calc(var(--rail-h) + 17px)}
  .authors{font-size:14px}.authors p:last-child{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.hero-engine .model-toolbar{transition:none;opacity:1}}

/* The opening is a live Blender-built railway, composed across the whole slide. */
.hero{background:#fff}
.hero-copy{top:8%;left:5%;right:5%;width:auto;text-align:center}
.hero h1{color:#000;font-size:clamp(58px,6.3vw,110px);line-height:1.08;letter-spacing:normal;margin-bottom:17px}
.hero h1 span,.hero h1 em{display:inline}
.hero h1 em{color:inherit;font-weight:inherit}
.hero-subtitle{font-size:clamp(16px,1.3vw,21px);line-height:1.7;max-width:none;margin:auto;color:#78858a}
.hero-subtitle br{display:none}
.hero-engine.journey-hero{position:absolute;inset:15% 0 16%;width:100%;height:69%;pointer-events:none;--scene-fade:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 2%,rgba(0,0,0,.50) 4.5%,rgba(0,0,0,.90) 7%,#000 9%,#000 76%,rgba(0,0,0,.90) 81%,rgba(0,0,0,.65) 86%,rgba(0,0,0,.32) 91%,rgba(0,0,0,.10) 95%,rgba(0,0,0,.025) 98%,transparent 100%);mask-image:var(--scene-fade);-webkit-mask-image:var(--scene-fade)}
.journey-hero canvas{display:block;width:100%;height:100%}
.hero-atmosphere{display:none}
.hero-bottom{left:var(--footer-inset);right:var(--footer-inset);bottom:calc(var(--rail-h) + 19px);pointer-events:none}
@media(max-width:800px){
 .hero-copy{top:9%;left:6%;right:6%}
 .hero h1{font-size:clamp(44px,10.8vw,76px);line-height:1.03;margin-bottom:17px}
 .hero h1 span,.hero h1 em{display:block}
 .hero-subtitle{max-width:300px;font-size:16px}
 .hero-engine.journey-hero{inset:17% 0 21%;height:62%}
 .hero-bottom{bottom:calc(var(--rail-h) + 16px)}
 .presentation-controls,.presentation-tools{bottom:16px}
 .presentation-controls button{font-size:13px;min-width:76px;padding:0 9px;gap:6px}
 .presentation-tools .chapter-indicator{font-size:13px}
}



/* Guided steam-engine lesson: a single explanation beside a cinematic close-up. */
.context-scene{height:100svh;min-height:640px;padding:7vh 5vw 100px;overflow:hidden}
.context-scene .section-heading h2{font-size:clamp(44px,5.5vw,88px);letter-spacing:normal}
.context-layout{display:grid;grid-template-columns:minmax(280px,34%) minmax(0,66%);align-items:center;gap:0;margin-top:2vh;height:calc(100% - 110px)}
.context-copy{min-height:330px;position:relative;z-index:2;padding-right:3vw}
.context-step h3{font-size:clamp(28px,2.5vw,42px);line-height:1.17;letter-spacing:normal;max-width:440px;margin:0 0 24px}
.context-step p{font-size:clamp(16px,1.2vw,20px);line-height:1.75;color:#687178;max-width:410px}
.context-step .context-note{font-size:12px;line-height:1.65;margin-top:24px;color:#899095;max-width:360px}
.context-step .context-takeaway{margin-top:28px;font-size:14px;font-weight:600;color:#9b754f;padding-left:16px;border-left:2px solid #c5a57b}
.context-scene .piston-figure{width:100%;max-width:none;min-width:0;align-self:center}
#context #piston-3d{height:58vh;min-height:340px;max-height:660px;overflow:hidden;pointer-events:none}
#piston-3d .three-canvas{cursor:default;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 87%,transparent),linear-gradient(to right,transparent,#000 3%,#000 95%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 87%,transparent),linear-gradient(to right,transparent,#000 3%,#000 95%,transparent);-webkit-mask-composite:source-in}
.enhanced.static-motion .context-scene{height:100svh;min-height:640px}
.enhanced.static-motion .context-copy{min-height:330px}
.enhanced.static-motion .context-copy>.stage{position:absolute;inset:0;margin:0}
@media(max-width:800px){
 .context-scene,.enhanced.static-motion .context-scene{padding:5vh 6vw 90px;min-height:650px}
 .context-scene .section-heading h2{font-size:clamp(34px,8.4vw,52px);max-width:340px}
 .context-layout{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:stretch;gap:12px;margin-top:12px;height:auto}
 #context #piston-3d{height:32svh;min-height:210px;max-height:330px}
 .context-copy,.enhanced.static-motion .context-copy{min-height:210px;padding:0}
 .context-step h3{font-size:26px;margin-bottom:12px;max-width:360px}
 .context-step p{font-size:14px;line-height:1.65;max-width:460px}
 .context-step .context-note{font-size:11px;margin-top:12px}
 .context-step .context-takeaway{font-size:12px;margin-top:16px}
}

.engine-label{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #dfe5e3;border-radius:8px;background:#fff;color:#253136;font:600 12px/1.35 var(--sans);letter-spacing:normal;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #26364206}
.engine-label.hot{--label-accent:#b95312}
.engine-label.cool{--label-accent:#08758d}
.engine-label:is(.hot,.cool)::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--label-accent)}
.engine-label.blue{color:#176daf}
.engine-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.engine-leaders{--leader-color:#89979b}
.engine-leaders .hot{--leader-color:#b95312}
.engine-leaders .cool{--leader-color:#08758d}
.engine-leaders line{stroke:var(--leader-color);stroke-width:1.2;stroke-linecap:round}
.engine-leaders circle{fill:var(--leader-color);stroke:white;stroke-width:1.2}
.engine-cycle strong{display:block;color:#273334;font-size:1.05em;font-weight:650;margin-bottom:6px}
.engine-cycle>span{display:block;font-size:.92em;line-height:1.55;color:#758083}
.engine-cycle>i{display:block;height:2px;background:linear-gradient(to right,#bf955b var(--cycle-progress,0%),#e9edec var(--cycle-progress,0%));margin-top:16px}
.engine-cycle[data-phase="switch"] strong{color:#9a6a2d}
.engine-label[hidden],.engine-cycle[hidden]{display:none}
.context-layout{position:relative}
.engine-cycle{position:absolute;left:0;bottom:6%;width:32%;font-size:13px;line-height:1.6;color:#277283}
@media(max-width:800px){.engine-label{font-size:10px;padding:3px 5px}.engine-cycle{position:relative;bottom:auto;order:-1;width:100%;margin-top:4px;font-size:12px}}

/* Use the presentation area for the subjects, with a compact header and footer. */
.bibliography{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:clamp(24px,4vh,48px);text-align:center;padding-top:clamp(32px,5vh,64px)}
.bibliography h2{margin:0}
.bibliography .sources{width:min(100%,800px);min-width:0}
.bibliography .sources li{padding-left:0;padding-right:0}
.bibliography .sources li:before{content:none;display:none}
.bibliography .sources li>a,.bibliography .sources li>div{justify-content:center}
.bibliography .sources li>a>span{color:inherit}
@media(min-width:801px){
 .hero-copy{top:5.5%}
 .hero-engine.journey-hero{inset:18% 0 5%;height:77%}
 .sticky-scene{padding-top:4vh;padding-bottom:90px}
 .context-scene,.enhanced.static-motion .context-scene{padding:4vh 4vw 84px}
 .context-scene .section-heading h2{font-size:clamp(44px,4.8vw,78px)}
 .context-layout{grid-template-columns:minmax(290px,32%) minmax(0,68%);height:calc(100% - 80px);margin-top:0}
 .context-copy{padding-right:2.5vw}
 #context #piston-3d{height:calc(100svh - 165px);max-height:none;min-height:400px}
 .context-step h3{font-size:clamp(30px,2.7vw,48px);max-width:470px}
 .context-step p{font-size:clamp(17px,1.35vw,23px);max-width:460px;line-height:1.65}
 #context .context-note{font-size:13px;line-height:1.6}
 #context .context-takeaway{font-size:16px}
 .engine-cycle{bottom:3%;font-size:15px;width:31%}
 .engine-label{font-size:13px}
 .inventor-scene{grid-template-columns:45% 1fr;gap:5%;padding-top:4vh}
 .portrait{max-width:none}
 .portrait-frame{height:74svh;aspect-ratio:auto}
 .inventor-copy h2{font-size:clamp(66px,6.7vw,116px);margin-top:0}
 .birthplace{font-size:15px}
 .bio-stack{min-height:265px;margin-top:4vh}
 .bio-step h3{font-size:clamp(28px,2.8vw,48px)}
 .bio-step p{font-size:clamp(17px,1.3vw,23px);max-width:430px}
 .mechanism-scene .section-heading h2{font-size:clamp(44px,4.8vw,78px)}
 .mechanism-layout{grid-template-columns:28% 72%;margin-top:0}
 #cutaway-locomotive{height:calc(100svh - 275px);min-height:390px}
 .mechanism-labels{min-height:335px;padding-right:2vw}
 .mechanism-step h3{font-size:clamp(44px,4.4vw,76px)}
 .mechanism-step p{font-size:clamp(18px,1.4vw,24px);line-height:1.65}
 .scene-footer{bottom:85px;padding-top:12px}
 .timeline-scene .section-heading h2{font-size:clamp(42px,4.2vw,70px)}
 .timeline-viewport{margin-top:5vh}
 .timeline-event{width:46vw;padding-right:5vw}
 .timeline-year{font-size:clamp(110px,12vw,195px)}
 .timeline-event h3{font-size:clamp(26px,2.3vw,38px)}
 .timeline-event p{font-size:clamp(18px,1.5vw,25px);max-width:470px}
 .rocket-event img{position:relative;top:auto;right:auto;width:270px;height:130px;margin-top:16px;opacity:1}
 .impact-stack{margin-top:5vh;min-height:62vh}
 .impact-step{padding-left:5vw}
 .impact-step h2{font-size:clamp(90px,10.3vw,178px)}
 .impact-step p{font-size:clamp(22px,1.9vw,32px);max-width:900px}
 .bibliography{padding-top:5vh;padding-bottom:90px}
 .bibliography h2{font-size:clamp(65px,6.7vw,114px)}
 .thanks{font-size:clamp(24px,2vw,34px)}
 .sources h3{font-size:30px}
 .sources li{font-size:18px;padding-top:20px;padding-bottom:20px}
 .sources small{font-size:14px}
}
@media(max-width:800px){
 .hero-engine.journey-hero{inset:23% 0 10%;height:67%}
 .context-scene,.enhanced.static-motion .context-scene{padding-top:3.5vh}
 #context #piston-3d{height:43svh;min-height:240px;max-height:400px}
 .context-copy,.enhanced.static-motion .context-copy{min-height:185px}
 .context-layout{gap:10px;margin-top:8px}
 .engine-cycle{margin-top:0}
 .context-step h3{font-size:27px}
 .context-step p{font-size:15px;line-height:1.6}
 #context .context-note{font-size:11px;line-height:1.5}
 #context .context-takeaway{font-size:12px;margin-top:14px}
 .mechanism-scene{padding-top:4vh}
 #cutaway-locomotive{height:40svh;min-height:260px;max-height:400px}
 .mechanism-labels{min-height:190px}
 .inventor-scene{grid-template-columns:40% 56%;gap:4%;padding-top:5vh}
 .portrait{padding-top:0}
 .portrait-frame{aspect-ratio:1/2.3}
 .inventor-copy h2{font-size:clamp(30px,7vw,48px)}
 .bio-step h3{font-size:28px}
 .bio-step p{font-size:15px}
 .timeline-scene{padding-top:5vh}
 .timeline-year{font-size:110px}
 .timeline-event h3{font-size:27px}
 .timeline-event p{font-size:18px}
 .impact-scene{padding-top:5vh}
 .impact-step h2{font-size:clamp(48px,12vw,84px)}
 .impact-step p{font-size:19px}
}
@media(max-height:740px){
 #context #piston-3d{height:39svh;min-height:215px}
 .context-step h3{font-size:25px;margin-bottom:10px}
 .context-step p{font-size:14px}
 .context-copy,.enhanced.static-motion .context-copy{min-height:175px}
}
@media(max-height:740px) and (min-width:801px){
 #context #piston-3d{height:calc(100svh - 145px);min-height:370px}
 .context-copy,.enhanced.static-motion .context-copy{min-height:285px}
 .engine-cycle{font-size:13px}
 .sources li{padding-top:12px;padding-bottom:12px;font-size:16px}
 .sources small{font-size:12px}
 .timeline-year{font-size:110px}
}
@media(min-width:801px){
 .impact-step{display:flex;flex-direction:column;justify-content:center}
 .impact-step h2{font-size:clamp(100px,12vw,192px)}
 .timeline-viewport{margin-top:8vh}
}
@media(max-width:800px){
 .inventor-scene{grid-template-columns:45% 51%;gap:4%}
 .inventor-scene .portrait-frame{height:65svh;aspect-ratio:auto}
 .inventor-scene .portrait img{object-fit:cover;object-position:50% 25%;height:112%}
 .bio-step p{font-size:16px;line-height:1.65}
 .bio-stack{min-height:360px}
 .inventor-copy h2{font-size:clamp(28px,7vw,44px)}
 .impact-step h2{font-size:clamp(52px,13.5vw,90px)}
}
@media(max-width:800px){
 .inventor-scene{display:block;padding:3vh 6vw 90px;min-height:100svh}
 .inventor-scene .portrait-frame{height:33svh;max-height:310px;min-height:210px}
 .inventor-scene .portrait img{object-position:50% 20%}
 .portrait figcaption{flex-direction:row;font-size:8px;padding-top:8px}
 .inventor-copy h2{font-size:34px;margin-top:14px;line-height:1.1}
 .inventor-copy h2 br{display:none}
 .birthplace{font-size:11px;margin-top:7px}
 .bio-stack{min-height:185px;margin:18px 0 8px;padding-top:16px}
 .enhanced .bio-stack>.stage{top:16px}
 .bio-step{flex-direction:row;gap:16px}
 .bio-number{font-size:58px;min-width:65px}
 .bio-step h3{font-size:24px}
 .bio-step h3 br{display:none}
 .bio-step p{font-size:15px;line-height:1.6;margin-top:12px}
}