/* Edition 03: porcelain editorial canvas and a dedicated mineral-dark 3D stage. */
:root{--paper:#f3f0e9;--ink:#18313a;--muted:#627579;--line:#183b4022;--jade:#277b6c;--gold:#ba8850;--stage:#101f2b;--stage-text:#e9efed}
html,body{background:#e5e2da;color:var(--ink)}
#deck{background:var(--paper)}
header{height:8.5%;border-color:var(--line);padding:0 4.5%;background:#faf8f266}
.wordmark img{filter:brightness(0) saturate(100%);opacity:.86;width:9.7cqw;height:2.7cqw}
.wordmark span{color:#526b70;font-size:clamp(9px,.54cqw,12px);letter-spacing:.19em}
button{border-color:var(--line)}button:hover{background:#dce6df;border-color:#689d9066}button[aria-pressed=true]{background:#e0ebe4;border-color:#6c9b8e}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#aa6b43}
a{color:#277b6c}a:hover{color:#174e45}
.chapterNav{display:flex;gap:2.4cqw}.chapterNav button{border:0;border-radius:0;padding:.6em 0;color:#546b62;position:relative;font-size:clamp(13px,.8cqw,18px)}.chapterNav button span{font-size:.78em;color:#546b62;margin-right:.7em}.chapterNav button.active{color:#163f3d}.chapterNav button.active:after{content:'';height:2px;background:#347f70;position:absolute;bottom:-.7cqw;left:0;right:0}.chapterNav button:hover{background:none;color:#18313a}
header #indexBtn{color:#314d52;font-size:clamp(13px,.8cqw,18px)}
#stage{height:82%}#copy{top:8%;width:34%}#copy h1,#copy h2{color:#163239;font-weight:450;letter-spacing:-.047em}h1{font-size:4.75cqw}h1 em{color:#337d6b;font-weight:400}h2{font-size:3.4cqw}
.eyebrow{color:#546b62;font-size:clamp(12px,.7cqw,16px);letter-spacing:.13em}.eyebrow span{color:#8c6441}.lead{color:#546b62;font-size:clamp(17px,1.1cqw,24px)}
.cover #copy{width:35%;top:10%}.cover .lead{max-width:34cqw}.coverNote{color:#546b62;font-size:clamp(12px,.75cqw,17px)}.authors{border-color:#3a5d4d2a}.authors p{color:#28494f;font-size:clamp(14px,.91cqw,20px)}.authors small{color:#546b62;font-size:clamp(14px,.76cqw,17px)}
.contextTag,.contextTag.general{color:#546b62;font-size:clamp(11px,.66cqw,15px)}.contextTag:before{background:#477e6d}.contextTag.general:before{background:#ba9266}.small{color:#6e7f7d}.statements small{color:#546b62}.statements p{color:#25464c}.statements p span{color:#546b62}.conclusionLine{color:#397c6d}.bigQuestion{color:#284a50;font-weight:400}.bigQuestion em{color:#ad7549}.bigQuestion>span{color:#546b62}
#modelPanel{display:none;position:absolute;left:42%;right:3%;top:3%;bottom:3%;border-radius:22px;background:radial-gradient(ellipse at 44% 39%,#344a53 0,#1e333e 31%,#101e2a 72%);box-shadow:0 20px 50px #263a3a20,inset 0 1px 0 #c9e8df25;overflow:hidden}
.hasModel #modelPanel{display:block}#modelPanel:after{content:'';position:absolute;inset:0;border:1px solid #152f3c;border-radius:inherit;pointer-events:none}
#stageHeading{position:absolute;left:45%;right:6%;top:6%;display:flex;justify-content:space-between;align-items:center;z-index:4;color:#91adaf;font-size:clamp(11px,.67cqw,15px);letter-spacing:.12em}.stageLive{font-size:clamp(9px,.57cqw,13px);letter-spacing:.09em;display:flex;align-items:center;gap:.7em;color:#a2bcb9}.stageLive i{width:5px;height:5px;background:#80c6b0;border-radius:50%;box-shadow:0 0 12px #88d7ba55}#stage:not(.hasModel) #stageHeading{display:none}
#visual{left:43%;right:4%;top:10%;height:71%}#scene{outline:none}#modelControls{left:45%;right:6%;bottom:6.5%;color:#d6e2de}#modelBadge{color:#859c9e;font-size:clamp(9px,.57cqw,13px)}.modelTools{gap:.3cqw}.modelTools button{font-size:clamp(13px,.73cqw,16px);color:#b9cccb;border-color:#89a9ab21;padding:.52em .65em;border-radius:5px}.modelTools button:hover,.modelTools button[aria-pressed=true]{background:#57777338;border-color:#98bdb060;color:#f1f5ef}
.label-lines polyline{stroke:#a5c4bf90;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}.label-lines circle{stroke:#122937;stroke-width:1.5}
.label3d{color:#e8ede9;background:#102532e0;border-color:#88a9a943;box-shadow:0 5px 20px #00121926;backdrop-filter:blur(8px);display:flex;align-items:center;gap:.55em;padding:.5em .7em;border-radius:6px;max-width:43%;white-space:normal;text-align:left;font-size:clamp(13px,.73cqw,16px);line-height:1.25}.label3d:hover,.label3d.focused{background:#233e49;border-color:#a5c9ba80}.label3d i{width:6px;height:6px;border-radius:50%;background:var(--part-color);flex:none}.label3d strong{font-weight:500;display:block}.label3d small{display:block;font-size:.77em;line-height:1.35;color:#94b1b1;margin-top:.25em}
.sequenceScene #modelPanel{top:2%;bottom:2%}.sequenceScene #stageHeading{top:4.7%}.sequenceScene #visual{left:43%;right:4%;top:9%;height:53.5%}.sequenceScene #copy{top:5%;width:33%;left:5%}.sequenceScene h2{font-size:2.65cqw;line-height:1.12}.sequenceScene .lead{font-size:clamp(15px,.98cqw,22px);line-height:1.45;color:#546b62}.sequenceScene .eyebrow{margin-bottom:1cqw}.sequenceScene #modelControls{left:45%;right:6%;bottom:25.4%}.sequenceScene .modelTools{margin-left:auto}
.tabs{border:1px solid #395f4e20;background:#e4e9df;padding:.23cqw;gap:.15cqw;border-radius:7px;margin:1.35cqw 0 1.4cqw}.tabs button{font-size:clamp(13px,.85cqw,19px);padding:.55em .8em;color:#637c74;border-radius:5px}.tabs button.active{background:#fdfbf4;color:#224a45;box-shadow:0 2px 7px #18362a13}
#stepExplanation{margin-top:1.4cqw;animation:stepReveal .4s ease both}.stepEyebrow{font-size:clamp(11px,.7cqw,15px);color:#8c6441;letter-spacing:.08em}#stepExplanation h3{font-size:clamp(22px,1.7cqw,37px);color:#1c4448;font-weight:500;line-height:1.17;margin-top:.7cqw}.stepNarrative{font-size:clamp(16px,1.05cqw,23px);line-height:1.55;color:#4f696c;margin-top:.9cqw}.processContext{color:#546b62;font-size:clamp(10px,.65cqw,14px)}.io{gap:.65cqw;margin-top:1cqw}.io div{border-color:#58816b24;grid-template-columns:5.3cqw 1fr}.io dt{font-size:clamp(10px,.6cqw,13px);color:#546b62}.io dd{font-size:clamp(14px,.85cqw,19px);color:#365f5a;line-height:1.4}.sequenceScene .contextTag{margin-top:1cqw}
#watchHint{position:absolute;left:5%;width:32%;bottom:6%;border-top:1px solid #a2b5a96b;padding-top:1cqw;color:#426862;line-height:1.5;font-size:clamp(14px,.86cqw,19px)}#watchHint>span{display:block;color:#546b62;font-size:clamp(10px,.59cqw,13px);letter-spacing:.14em;margin-bottom:.4em}#watchHint p{margin:0}#watchHint b{font-weight:500;color:#35675c}#stage:not(.sequenceScene) #watchHint{display:none}
#modelLegend{position:absolute;z-index:5;left:45%;right:6%;top:63.3%;display:flex;align-items:stretch;gap:.6cqw}#modelLegend button{display:flex;align-items:flex-start;gap:.55em;flex:1;min-width:0;border:0;border-left:1px solid #96b9b031;border-radius:0;background:none;padding:.1em .2em .1em .7em;text-align:left;color:#a9c0be;font-size:clamp(11px,.67cqw,15px);line-height:1.35}#modelLegend button:first-child{padding-left:0;border-left:0}#modelLegend button i{width:6px;height:6px;border-radius:50%;background:var(--part-color);flex:none;margin-top:.43em}#modelLegend button strong{display:block;font-weight:500;color:#d9e6df;font-size:clamp(13px,.74cqw,16px);margin-bottom:.18em}#modelLegend button:hover strong{color:var(--part-color)}#modelLegend button:hover{color:#e1ece5}#modelLegend button.selected{background:#4b6e661f}#stage:not(.sequenceScene) #modelLegend{top:auto;bottom:13%}
#liveDock{left:45%;right:6%;bottom:5%;border-color:#8badac3a;padding-top:.8cqw;color:#dce9e2}.liveTag{color:#82aa9c;font-size:clamp(9px,.59cqw,13px)}.liveTag i{background:#80c7ad}#stepCount{color:#8ba6a1;font-size:clamp(11px,.68cqw,15px)}.liveTop{margin-bottom:.55cqw}#stepRail{margin-bottom:.8cqw;gap:.3cqw}#stepRail button{color:#8da7a6;font-size:clamp(13px,.8cqw,18px);border-color:#617d812e;padding:.35em .1em .65em;position:relative}#stepRail button span{color:#688681;font-size:clamp(9px,.57cqw,13px)}#stepRail button.active{color:#e4eee5;border-color:#d6b381}#stepRail button.active span{color:#d6b381}#stepRail button.done{border-color:#477963}#stepRail button.done span{color:#6eac8f}
.transport{gap:.45cqw}.transport button{font-size:clamp(14px,.76cqw,17px);color:#b5cbc3;padding:.62em .8em}.transport .primary{background:#d9e6d4;border-color:#d9e6d4;color:#163b38;min-width:11.3cqw;font-weight:500;border-radius:6px}.transport .primary:hover{background:#eff6e8}.transport button:not(.primary):hover{background:#2a494c}.transport #scrub{accent-color:#d7b483;height:12px}#liveTime{font-size:clamp(9px,.58cqw,13px);color:#7f9d98;min-width:3.6cqw}
#inspector{right:6%;top:12%;width:29%;padding:1.3cqw;color:#d4e4df;background:#102735f5;border:1px solid #a2b6a765;border-radius:12px;box-shadow:0 20px 60px #02141c66}#inspector .inspectorHeading{color:#c4d6c3;font-size:clamp(10px,.64cqw,14px)}#inspector label{color:#789d95}#regionSelect{background:#213f46;color:#edf4eb;border-color:#698d804a;font-size:clamp(14px,.87cqw,20px);padding:.65em}#regionDetail{font-size:clamp(15px,.95cqw,21px);color:#bdd1c8}
footer{height:9.5%;padding:0 4.5%;border-color:var(--line);background:#f8f6ef;color:#36565a}.footerLeft{gap:.4cqw}footer button{color:#55716e;font-size:clamp(12px,.75cqw,17px);border-color:transparent}#prev,#next{font-size:clamp(14px,.9cqw,20px);border-color:#7c9b8233;padding:.62em .9em}#next{background:#204e47;color:#f0f5ea;border-color:#204e47}#next:hover{background:#32695c}#count{color:#47665d;font-size:clamp(14px,.82cqw,19px);margin:0 .65cqw}#count span{color:#8c6441}#sceneName{color:#546b62;font-size:clamp(11px,.67cqw,15px);max-width:13cqw}#nextHint{display:none}#progress{height:2px;background:#65927c}footer .footerRight{gap:.2cqw}
.photoFigure{right:3%;width:53%;top:7%;height:80%}.photo{height:32cqw;border-radius:14px;filter:saturate(.8);box-shadow:0 20px 45px #293b3024}.photoFigure figcaption{color:#546b62;font-size:clamp(11px,.7cqw,16px)}
.evidence{right:5%;width:48%;top:10%;padding:2.1cqw;background:#e6eae0;border:1px solid #c4d2c040;border-radius:18px}.pair{color:#546b62;font-size:clamp(17px,1.2cqw,27px);border-color:#62816829;padding:0 0 1.6cqw}.pair b{color:#355f55}.pairArrow{color:#b99a75}.evidenceLayers{margin-top:.5cqw}.evidenceLayers button{color:#5c796d;font-size:clamp(17px,1.2cqw,27px);border-color:#64896c30;padding:1.05cqw .7cqw}.evidenceLayers button span:first-child{color:#546b62}.evidenceLayers button.active{background:#f8f8ee;color:#244f43;box-shadow:inset 3px 0 #61886c;border-radius:4px}.evidenceLayers button.active span{color:#a88155}.evidence>p{color:#546b62;margin:1.2cqw 0 0}.evidenceAnswer>span{color:#8c6441}.evidenceAnswer h3{color:#244b48}.evidenceAnswer p{color:#637d77}
.timeline{gap:2.3cqw;border-color:#aac0a779;top:43%}.timeline strong{color:#63826e;font-size:4cqw}.timelineDot{background:#bd9568;box-shadow:0 0 0 5px #efece0}.timeline h3{color:#2f544a}.timeline p{color:#546b62}.timeline a{color:#477b66}.diagram .row{border-color:#adbeab70}.diagram .row>span{color:#b08f67}.diagram h3{color:#31594e}.diagram p{color:#546b62}
.sourceGroups{top:36%;gap:3.6cqw}.sourceGroups section h3{color:#467d68;font-size:clamp(20px,1.5cqw,34px)}.sourceGroups section a{color:#4e7264;border-color:#a8bfa350;font-size:clamp(16px,1.04cqw,23px)}.sourceGroups section a span{color:#8c6441}.sourceFooter{border-color:#a9bda855}.sourceFooter p{color:#546b62}.sourceFooter a{color:#507e68}
dialog{background:#f6f4ec;color:#1c4b41;border-color:#c1d0bc;border-radius:15px}dialog::backdrop{background:#102327bf}.dialogHeading button{color:#577d6a}dialog p{color:#7b9180}#sceneList button{border-color:#96b08b44;color:#52725d}#sceneList button span{color:#546b62}
.fallbackNote{background:#193441f2;border-color:#a7bd9d;color:#d5e4d6;font-size:clamp(14px,.76cqw,17px)}
@keyframes stepReveal{from{opacity:.15;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.reduced #stepExplanation{animation:none}
@media(max-aspect-ratio:1/1){
 header{height:8%;padding:0 6%}.wordmark img{width:25cqw;height:7cqw}.wordmark span{font-size:8px}.chapterNav{display:none}#stage{height:82%}footer{height:10%}.cover #copy{width:88%;top:3%}#copy,.sequenceScene #copy{left:6%;top:3%;width:88%}h1{font-size:9cqw}h2,.sequenceScene h2{font-size:6.8cqw}.lead,.sequenceScene .lead{font-size:13px;max-width:87cqw}.eyebrow,.sequenceScene .eyebrow{font-size:10px}.authors p{font-size:11px}.authors small,.coverNote{font-size:10px}.authors{margin-top:3cqw;padding-top:2cqw}
 #modelPanel,.sequenceScene #modelPanel{left:3%;right:3%;top:44%;bottom:1%;border-radius:14px}#stageHeading,.sequenceScene #stageHeading{left:7%;right:7%;top:46%;font-size:8px}.stageLive{font-size:7px}.cover #visual,#visual{left:4%;right:4%;top:47%;height:40%}.sequenceScene #visual{left:4%;right:4%;top:45%;height:31%}.sequenceScene #stageHeading{top:44%}.sequenceScene #modelPanel{top:42%}.label3d{font-size:9px;padding:.45em .55em;max-width:45%}.label3d small{font-size:.75em}#modelControls{left:7%;right:7%;bottom:3%;color:white}.modelTools button{font-size:10px}.sequenceScene #modelControls{bottom:18%;left:7%;right:7%}.sequenceScene .modelTools{margin-left:auto}
 #modelLegend,#stage:not(.sequenceScene) #modelLegend{left:7%;right:7%;top:auto;bottom:9%;gap:2cqw}#modelLegend button{font-size:8px}#modelLegend button strong{font-size:10px}#modelLegend button span small{display:none}.sequenceScene #modelLegend{bottom:23%}.sequenceScene #modelLegend button{font-size:8px}#watchHint{display:none}.tabs{margin:2cqw 0}.tabs button{font-size:11px}.stepEyebrow{font-size:10px}#stepExplanation h3{font-size:19px}.stepNarrative{font-size:12px}.io dd{font-size:11px}.io dt{font-size:9px}.contextTag{font-size:10px}.io div{display:block}.io{margin-top:2cqw;gap:3cqw}.processContext{font-size:9px}
 #liveDock{left:7%;right:7%;bottom:3%;padding-top:2cqw}.liveTag{font-size:8px}#stepRail button{font-size:10px}#stepRail button span{font-size:8px}#stepRail{margin-bottom:2cqw}.transport button{font-size:10px}.transport .primary{min-width:31cqw}#liveTime{font-size:9px}.transport #scrub{display:none}#inspector{top:46%;right:8%;width:84%;padding:4cqw}#regionDetail{font-size:14px}#regionSelect{font-size:14px}#sceneName{display:none}#count{font-size:13px}#prev,#next{font-size:12px}footer button{font-size:10px}.footerLeft,.footerRight{gap:1cqw}
 .photoFigure{top:46%;left:6%;width:88%;height:auto}.photo{height:63cqw}.evidence{top:46%;left:6%;width:88%;padding:4cqw}.pair{font-size:14px;padding-bottom:3cqw}.evidenceLayers button{font-size:16px;padding:2.5cqw}.evidence>p{font-size:10px}.sourceGroups{top:25%;display:grid;grid-template-columns:1fr;gap:4cqw}.sourceGroups section h3{font-size:17px}.sourceGroups section a{font-size:13px}.timeline strong{font-size:9cqw}.timeline{top:31%}.timeline h3{font-size:18px}.timeline p{font-size:13px}.timeline a{font-size:11px}.diagram h3{font-size:21px}.diagram p{font-size:14px}.conclusionLine{font-size:19px}
}
/* Inspection sits with the explanation, keeping the selected model unobscured. */
#inspector{left:5%;right:auto;top:auto;bottom:3.5%;width:33%;background:#fafbf4;color:#254e45;border-color:#b5c6af;box-shadow:0 12px 35px #294e3115}
#inspector .inspectorHeading{color:#59816c}#inspector label{color:#607f6a}#inspector .inspectorHeading button{color:#355e4a}#regionSelect{background:#eef2e5;color:#2c5645;border-color:#a3b898}#regionDetail{color:#4f6c5b}
.inspection #watchHint{visibility:hidden}.inspection #copy .io,.inspection #copy .contextTag,.inspection #copy .small,.inspection #copy .conclusionLine{visibility:hidden}.cover.inspection .authors,.cover.inspection .coverNote{visibility:hidden}
@media(max-aspect-ratio:1/1){#inspector{left:6%;right:6%;top:3%;bottom:auto;width:88%;padding:4cqw}.inspection #copy{visibility:hidden}#inspector label{font-size:11px}#regionDetail{font-size:13px}}
#hoverPart{position:absolute;z-index:10;pointer-events:none;padding:.55em .8em;border:1px solid #c7d6c4;border-radius:5px;box-shadow:0 5px 18px #081b2c45;background:#f0f2e5;color:#244e44;font-size:clamp(12px,.7cqw,16px);max-width:80%;line-height:1.3}
@media(max-aspect-ratio:1/1){#hoverPart{font-size:10px}}
