/* The scene is a progressive enhancement. The lesson stays in the document. */
.isometric-experience{grid-column:1/-1;min-width:0;width:100%;scroll-margin-top:100px;--iso-surface:#0b2013;--iso-muted:#cad5c6;--iso-edge:#e8efdb32;--iso-accent:#cbdcbc}
[data-brand=world] .isometric-experience{--iso-surface:#09131e;--iso-muted:#b7c9dc;--iso-edge:#adc6df33;--iso-accent:#9bbfdf}
.iso-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.iso-heading h2{font:400 clamp(29px,3vw,45px)/1.1 var(--serif);letter-spacing:-.035em;margin:0}
.iso-heading p{font:10px/1.6 var(--label);color:var(--muted);margin:8px 0 0;letter-spacing:.05em}
.iso-icon{width:37px;height:37px;stroke:currentColor;stroke-width:1;fill:none;flex:none;color:var(--iso-accent)}
.iso-heading-title{display:flex;align-items:center;gap:18px}
.iso-tools{display:flex;align-items:center;gap:20px;flex:none}
.iso-tools button{font:11px var(--label);min-height:44px;color:var(--muted);border-bottom:1px solid transparent}
.iso-tools button:hover,.iso-tools button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.iso-tools .iso-separate span{font-size:19px;margin-right:9px;display:inline-block;vertical-align:-1px}
.iso-stage{position:relative;min-height:590px;isolation:isolate;overflow:hidden;background:var(--iso-surface);border:1px solid var(--iso-edge);border-top:0}
.iso-art{position:absolute;inset:0;outline-offset:-5px;cursor:grab;touch-action:pan-y}
.iso-art.is-dragging{cursor:grabbing}
.iso-art canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.iso-stage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#0b2013f5 0%,#0b2013df 20%,#0b201300 50%),linear-gradient(0deg,#0b2013a8,transparent 19%)}
[data-brand=world] .iso-stage:after{background:linear-gradient(90deg,#09131ef7 0%,#09131eeb 22%,#09131e00 49%),linear-gradient(0deg,#09131ea8,transparent 18%)}
.iso-copy{position:relative;z-index:2;width:30%;padding:64px 0 104px 35px;pointer-events:none}
.iso-step-kicker{font:10px/1.5 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--iso-accent)}
.iso-copy h3{font:400 clamp(32px,3.6vw,54px)/1.07 var(--serif);letter-spacing:-.045em;margin:23px 0 21px;text-wrap:balance}
.iso-copy-text{font-size:13px;line-height:1.85;color:var(--iso-muted);margin:0;max-width:30ch}
.iso-detail{font:10px/1.8 var(--label);margin-top:24px;padding-top:16px;border-top:1px solid var(--iso-edge);color:var(--iso-muted);max-width:30ch}
.iso-copy.is-changing>*{animation:iso-copy-in .7s cubic-bezier(.16,1,.3,1) both}
.iso-copy.is-changing h3{animation-delay:50ms}.iso-copy.is-changing .iso-copy-text{animation-delay:90ms}.iso-copy.is-changing .iso-detail{animation-delay:130ms}
@keyframes iso-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.iso-scene-caption{position:absolute;z-index:2;left:35px;right:30px;bottom:21px;display:flex;justify-content:space-between;gap:25px;font:9px/1.75 var(--label);color:var(--iso-muted);pointer-events:none}
.iso-scene-caption span:first-child{max-width:40ch}
.iso-camera-hint{text-align:right;white-space:nowrap}
.iso-annotation{position:absolute;z-index:2;left:65%;top:30%;font:10px/1.5 var(--label);white-space:nowrap;color:var(--ink);pointer-events:none;text-shadow:0 1px 6px var(--iso-surface);padding-left:15px;opacity:0;transition:opacity .35s}
.iso-annotation:before{content:'';position:absolute;left:0;top:5px;width:5px;height:5px;border:1px solid currentColor;border-radius:50%}
[data-renderer=webgl] .iso-annotation{opacity:1}
.iso-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.iso-steps button{position:relative;text-align:left;padding:22px 19px 20px;display:flex;gap:12px;align-items:center;min-height:66px;font:13px var(--serif);color:var(--muted);transition:color .3s}
.iso-steps button+button{border-left:1px solid var(--line)}
.iso-steps button:after{content:'';height:2px;position:absolute;top:0;left:0;right:0;background:var(--ink);transform:scaleX(0);transform-origin:0;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.iso-steps button[aria-pressed=true]{color:var(--ink)}
.iso-steps button[aria-pressed=true]:after{transform:scaleX(1)}
.iso-steps button b{font:10px var(--label);font-weight:400;opacity:.5}
.iso-steps button i{font:17px var(--label);font-style:normal;margin-left:auto;opacity:.5}
.iso-afterword{display:flex;justify-content:space-between;gap:30px;align-items:start;margin:18px 0 0;color:var(--muted);font:10px/1.8 var(--label)}
.iso-afterword p{margin:0;max-width:64ch}.iso-afterword a{white-space:nowrap;min-height:44px;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);margin-top:-6px}
.iso-entry{display:inline-flex;align-items:center;gap:14px;min-height:44px;font:11px var(--label);color:var(--muted);border-bottom:1px solid var(--line);margin-top:18px}
.iso-entry:hover{color:var(--ink)}
/* A static axonometric fallback remains visible if WebGL or modules cannot load. */
.iso-fallback{position:absolute;inset:0;display:grid;place-items:center;padding-left:29%;pointer-events:none;background:radial-gradient(ellipse at 69% 70%,#3b6534,transparent 70%)}
[data-brand=world] .iso-fallback{background:radial-gradient(ellipse at 69% 70%,#25435d,transparent 70%)}
.iso-fallback-stack{position:relative;width:310px;height:320px;perspective:1400px;transform-style:preserve-3d;transform:rotateX(54deg) rotateZ(-32deg)}
.iso-fallback-sheet{position:absolute;inset:0;background:#dedccc;color:#132519;border:1px solid #b9c4b0;box-shadow:-8px 12px 0 #6a7968,0 42px 60px #0005;padding:25px;transform:translateZ(var(--fallback-z));font:13px var(--label);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.iso-fallback-sheet:nth-child(1){--fallback-z:-110px}.iso-fallback-sheet:nth-child(2){--fallback-z:-55px}.iso-fallback-sheet:nth-child(3){--fallback-z:0px}
.iso-fallback-sheet strong{display:block;font:64px/1.2 var(--serif);font-weight:400;margin:32px 0 25px}.iso-fallback-sheet small{font:11px/1.5 var(--label);display:block;max-width:23ch}
.iso-fallback-sheet .fallback-bars{display:flex;gap:8px;align-items:end;height:85px;margin-top:20px}.fallback-bars i{display:block;background:#648568;width:21px;height:calc(var(--value)*100%)}
[data-separated=true] .iso-fallback-sheet:nth-child(1){--fallback-z:-230px}[data-separated=true] .iso-fallback-sheet:nth-child(2){--fallback-z:-115px}
[data-renderer=webgl] .iso-fallback{display:none}
[data-renderer=fallback] .iso-camera-hint{white-space:normal;max-width:26ch}
@media(min-width:1500px){.iso-stage{min-height:690px}.iso-copy{padding-top:85px;padding-left:45px}.iso-copy-text{font-size:15px}.iso-detail{font-size:11px}}
@media(max-width:1000px) and (min-width:761px){.iso-copy{width:33%;padding-left:24px}.iso-copy h3{font-size:35px}.iso-copy-text{font-size:12px}.iso-stage{min-height:565px}.iso-tools{gap:12px}.iso-tools button{font-size:10px}}
@media(max-width:760px){
 .isometric-experience{scroll-margin-top:90px}.iso-heading{gap:15px;align-items:start;padding-bottom:16px}.iso-heading h2{font-size:29px}.iso-heading p{font-size:9px;max-width:21ch}.iso-icon{width:27px;height:27px}.iso-heading-title{gap:11px}.iso-tools{gap:6px;flex-direction:column;align-items:end}.iso-tools button{font-size:9px;min-height:35px}.iso-tools .iso-separate span{font-size:16px;margin-right:5px}.iso-stage{min-height:0;display:flex;flex-direction:column;padding-bottom:60px}.iso-art{position:relative;inset:auto;height:390px;order:2;margin-top:-30px;flex:none}.iso-stage:after{background:linear-gradient(0deg,#0b2013,transparent 20%);z-index:1}[data-brand=world] .iso-stage:after{background:linear-gradient(0deg,#09131e,transparent 20%)}.iso-copy{order:1;width:auto;padding:28px 23px 0;min-height:246px;pointer-events:auto}.iso-copy h3{font-size:35px;margin:14px 0 14px;max-width:13ch}.iso-copy-text{font-size:12px;max-width:36ch}.iso-detail{margin-top:15px;padding-top:12px;font-size:9px;max-width:none}.iso-step-kicker{font-size:9px}.iso-scene-caption{left:23px;right:23px;bottom:17px;font-size:8px;gap:10px}.iso-scene-caption span:first-child{max-width:27ch}.iso-camera-hint{max-width:13ch;white-space:normal}.iso-annotation{font-size:8px}.iso-steps button{padding:16px 10px;gap:6px;font-size:12px;min-height:63px;align-items:center}.iso-steps button b{font-size:8px}.iso-steps button i{display:none}.iso-afterword{flex-direction:column;gap:9px;font-size:9px}.iso-afterword a{min-height:40px}.iso-fallback{padding-left:0}.iso-fallback-stack{transform:scale(.69) rotateX(54deg) rotateZ(-32deg)}
}
@media(max-width:370px){.iso-heading-title{gap:7px}.iso-heading h2{font-size:25px}.iso-icon{width:23px}.iso-tools button{font-size:8px}.iso-copy{padding:24px 18px 0;min-height:276px}.iso-copy h3{font-size:32px}.iso-art{height:335px}.iso-steps button{font-size:11px;padding:15px 7px}.iso-scene-caption{left:18px;right:18px}}
body[data-motion=reduce] .iso-copy.is-changing>*{animation:none}
@media(prefers-reduced-motion:reduce){.iso-copy.is-changing>*{animation:none}.iso-fallback-sheet,.iso-steps button:after{transition:none}}
/* Keep the complete camera controls in the same desktop view as the scene. */
@media(min-width:761px){
 .iso-stage{min-height:clamp(390px,calc(100svh - 320px),620px)}
 .iso-copy{padding-top:31px;padding-bottom:70px}
 .iso-copy h3{font-size:clamp(31px,3.3vw,49px);margin-top:17px;margin-bottom:16px}
 .iso-copy-text{font-size:12px;line-height:1.75}
 .iso-detail{font-size:9px;line-height:1.7;margin-top:16px;padding-top:12px}
 .iso-scene-caption{font-size:8px}
}
@media(max-width:760px){[data-story=trajectory] .world-context>.isometric-experience{margin-bottom:65px}}
.iso-annotation:after{content:'';display:inline-block;width:22px;height:1px;background:currentColor;opacity:.45;vertical-align:middle;margin-left:10px}
@media(max-width:760px){.iso-annotation{display:none}}
@media(max-width:760px){
 .iso-art{margin-top:0}
 .iso-art:after{content:'';position:absolute;left:0;right:0;top:0;height:65px;z-index:1;pointer-events:none;background:linear-gradient(var(--iso-surface),transparent)}
}
/* The globe is scenery, so World uses the plane titles rather than a projected map-like label. */
[data-brand=world] .iso-annotation{display:none}