@import url('./style.css');
:root{--ink:#15363d;--muted:#50676c;--accent:#007787;--paper:#f4f5f0}
body{background:var(--paper);color:var(--ink)}
.system-switch a[aria-current=page]{background:var(--ink);color:white}
.intro{margin:34px 0 30px;align-items:end}.intro h1{font-size:clamp(36px,4.3vw,66px);letter-spacing:-.045em;line-height:1.03;margin:12px 0}.intro-copy{max-width:365px;line-height:1.65;font-size:17px}
.lab{display:grid;grid-template-columns:minmax(0,1fr) 330px;overflow:hidden;border:1px solid #cbd8d7;border-radius:22px;background:#fff;box-shadow:0 18px 60px #183a4210}
.lab-stage-column{min-width:0;background:#e8eeeb;display:flex;flex-direction:column}.lab-stage{position:relative;height:clamp(490px,65vh,780px);flex:1;min-height:590px;isolation:isolate;background:radial-gradient(ellipse at 50% 35%,#f6f8f3,#d9e3de);overflow:hidden;touch-action:none}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;outline-offset:-5px}.lab-stage:fullscreen{height:100vh;width:100vw;background:#e8eeeb}
.viewer-heading{position:absolute;top:24px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}.viewer-heading span:first-child:before{content:'';display:inline-block;width:7px;height:7px;background:#008a8b;border-radius:50%;margin-right:9px;box-shadow:0 0 0 5px #008a8b12}.view-pill{background:#ffffffb8;border:1px solid #cedad7;border-radius:30px;padding:7px 11px;font-size:10px;letter-spacing:.12em}
.lab-tools{position:absolute;right:18px;bottom:52px;display:flex;gap:1px;padding:5px;background:#ffffffdc;border:1px solid #bdcfcc;border-radius:14px;box-shadow:0 8px 22px #183a4210}.lab-tools button{width:38px;height:37px;border:0;background:transparent;font-size:23px;cursor:pointer;color:var(--ink);border-radius:8px}.lab-tools button:hover{background:#d7e5e1}
.viewer-foot{position:absolute;bottom:19px;left:24px;right:23px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;color:#405e62}.viewer-foot strong{font-weight:600}.viewer-foot span{max-width:230px;text-align:right}
.hotspots{position:absolute;inset:0;pointer-events:none}.hotspots svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hotspot{position:absolute;max-width:180px;padding:9px 11px;border:1px solid #b7cbc6;border-radius:8px;background:#fffffff0;color:#193e46;font-size:11px;line-height:1.4;box-shadow:0 5px 16px #173d4410;transform:translateY(-50%);pointer-events:auto;cursor:pointer;text-align:left}.hotspot b{display:block;font-size:10px;letter-spacing:.06em;color:#007787;text-transform:uppercase;margin-bottom:2px}.hotspot:focus-visible{outline:3px solid #007787}
.camera-views{display:grid;flex-shrink:0;grid-template-columns:repeat(4,1fr);background:#fbfcf8;border-top:1px solid #d0dbd7;padding:8px;gap:5px}.camera-views button{border:0;border-radius:8px;padding:13px 5px;cursor:pointer;background:transparent;color:#456268;font:inherit;font-size:12px}.camera-views button[aria-pressed=true]{background:#173c43;color:#fff}.camera-views button:hover{background:#d7e5e1;color:#173c43}
.lab-controls{padding:25px 25px 20px;border-left:1px solid #d0dbd7}.lab-controls .eyebrow{font-size:10px;letter-spacing:.14em;margin:0 0 7px}.lab-controls h2{font-size:34px;letter-spacing:-.035em;margin:0 0 7px}.lab-controls .lead{font-size:13px;line-height:1.65;margin:0 0 21px;color:#50676c}.detail-card{border-top:1px solid #dce5df;padding-top:17px}.step-counter{font-size:10px;letter-spacing:.13em;color:#007787;font-weight:700}.detail-card h3{font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:9px 0}.detail-card p{font-size:12px;line-height:1.7;color:#50676c;margin:0;min-height:61px}.step-list{display:grid;gap:4px;margin:19px 0}.step-list button{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:7px;text-align:left;padding:7px 9px;font:inherit;color:#50676c;font-size:11px;cursor:pointer;line-height:1.25}.step-list button span{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid #cbd8d2;font-size:9px;font-weight:700}.step-list button[aria-current=step]{background:#eaf2ed;color:#124750;font-weight:600}.step-list button[aria-current=step] span{background:#007787;color:white;border-color:#007787}.step-list button:hover{background:#edf3ee}
.motion-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;margin:15px 0 7px}.play-button{border:0;background:#173c43;color:white;border-radius:6px;min-width:70px;padding:8px 11px;cursor:pointer;font-size:11px}.lab-controls input[type=range]{width:100%;accent-color:#007787;height:5px;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#60787c;margin-top:7px}.options{border-top:1px solid #dce5df;margin-top:20px;padding-top:15px;display:grid;gap:11px}.options label{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:12px}.options input[type=checkbox]{accent-color:#007787;width:15px;height:15px}.opacity-control{display:block!important}.opacity-control span{display:flex;justify-content:space-between;margin-bottom:9px}.small-note{font-size:10px;line-height:1.6;color:#60787c;margin:16px 0 0}
.insight-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:30px 0 45px;padding:0 8px}.insight-strip article{display:grid;grid-template-columns:30px 1fr;gap:12px}.insight-strip .index{font-size:11px;color:#007787;border-top:2px solid #007787;padding-top:9px}.insight-strip h3{font-size:15px;margin:7px 0 7px;letter-spacing:-.01em}.insight-strip p{font-size:12px;line-height:1.7;color:#50676c;margin:0}.next-step{margin-top:20px}.loading-error{max-width:320px;text-align:center;padding:20px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #078a9a;outline-offset:3px}.lab :disabled{opacity:.5;cursor:wait}
@media(min-width:1550px){.lab{grid-template-columns:minmax(0,1fr) 365px}.lab-controls{padding:30px}.lab-stage{height:770px}.step-list button{font-size:12px;padding:9px}.detail-card p{font-size:13px}}
@media(max-width:1000px){.lab{grid-template-columns:minmax(0,1fr) 290px}.lab-controls{padding:20px}.hotspot{max-width:140px;font-size:10px;padding:7px 8px}.intro-copy{font-size:15px}.lab-stage{height:620px}.viewer-foot span{display:none}}
@media(max-width:760px){main{padding:0 16px}.site-header{padding:17px 18px}.header-link{display:none}.intro{display:block;margin-top:25px}.intro h1{font-size:43px}.intro-copy{max-width:100%;font-size:14px}.lab{display:block;border-radius:15px}.lab-stage{height:540px}.lab-controls{border-left:0;border-top:1px solid #d0dbd7;padding:24px}.step-list{grid-template-columns:1fr 1fr;gap:5px}.detail-card p{min-height:0}.lab-controls h2{font-size:30px}.hotspot{max-width:120px;font-size:10px}.viewer-heading{top:18px;left:15px;right:15px;font-size:10px}.view-pill{font-size:8px}.viewer-foot{left:15px;bottom:15px}.insight-strip{grid-template-columns:1fr;gap:16px;margin:27px 0}.options{grid-template-columns:1fr 1fr}.opacity-control{grid-column:1/-1}.camera-views button{font-size:10px}.lab-tools{right:10px;bottom:52px}.lab-tools button{width:31px;height:31px;font-size:21px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(max-width:760px){.lab-stage{flex:none;min-height:0;height:540px}.lab-stage-column{display:block}}