:root{--ink:#0E0F10;--ink2:#222528;--paper:#F2EFE8;--steel:#8C8F92;--steel2:#C9C6BF;--orange:#F4823D;--ph:#FFE45C;
--disp:'Big Shoulders Display',Impact,sans-serif;--body:'Barlow',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono);letter-spacing:.06em}
.spin{position:relative;height:260vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#gl:active{cursor:grabbing}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:22px 28px;pointer-events:none;z-index:3}
.logo{height:30px;width:auto}
.unit-tag{display:flex;flex-direction:column;font-size:13px;line-height:1.3;color:rgba(242,239,232,.85);border-left:1px solid rgba(242,239,232,.3);padding-left:16px}
.unit-tag .mono{font-size:11px;color:var(--orange)}
.chip-proto{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(242,239,232,.4);padding:6px 10px;border-radius:2px;background:rgba(14,15,16,.35);backdrop-filter:blur(6px)}
.basin-copy{position:absolute;left:28px;top:96px;max-width:360px;z-index:2;pointer-events:none;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.eyebrow{font-size:11px;color:var(--orange);margin-bottom:8px}
.basin-copy h1{font-family:var(--disp);font-weight:800;font-size:clamp(44px,6vw,84px);line-height:.9;text-transform:uppercase;letter-spacing:.01em}
.basin-copy .cond{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:10px 0 12px;color:var(--paper)}
.basin-copy .desc{font-size:15px;line-height:1.45;color:rgba(242,239,232,.88)}
.env{list-style:none;display:flex;gap:16px;margin-top:14px;font-family:var(--mono);font-size:12px}
.env li span{display:block;font-size:10px;opacity:.7;letter-spacing:.1em;margin-bottom:3px}
.basin-copy>*{transition:opacity .45s ease,transform .45s ease}
.basin-copy.swap>*{opacity:0;transform:translateY(8px)}
mark.ph{background:var(--ph);color:var(--ink);padding:0 .22em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:600}
.callouts{position:absolute;inset:0;pointer-events:none;z-index:2}
.co{position:absolute;left:0;top:0;will-change:transform,opacity;transition:opacity .35s ease}
.co .dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(244,130,61,.25),0 0 18px rgba(244,130,61,.8)}
.co .dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(244,130,61,.7);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.co .stem{position:absolute;left:0;bottom:0;width:1px;height:46px;background:linear-gradient(to top,var(--orange),rgba(244,130,61,.15));transform-origin:bottom}
.co .card{position:absolute;left:10px;bottom:46px;min-width:150px;padding:10px 12px 9px;background:rgba(14,15,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-left:2px solid var(--orange);white-space:nowrap}
.co .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel2)}
.co .val{font-family:var(--disp);font-weight:700;font-size:28px;line-height:1.05;margin-top:3px}
.co .val mark{font-weight:700}
.co .val small{font-family:var(--body);font-size:13px;font-weight:500;margin-left:4px;color:var(--paper)}
.co.left .card{left:auto;right:10px;border-left:0;border-right:2px solid var(--orange);text-align:right}
.co .sub{font-size:11.5px;color:rgba(242,239,232,.7);margin-top:2px}
.co .tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;background:var(--ph);color:var(--ink);padding:1px 4px;margin-left:6px;vertical-align:1px}
.switcher{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:6px;padding:6px;background:rgba(14,15,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(242,239,232,.14);z-index:4}
.switcher button{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:10px 18px 10px 14px;min-width:150px;color:rgba(242,239,232,.7);}
.switcher button .mono{grid-row:span 2;font-size:11px;color:var(--steel)}
.switcher button b{font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:.02em;font-weight:700}
.switcher button i{font-style:normal;font-size:12px}
.switcher button:hover{color:var(--paper);background:rgba(242,239,232,.06)}
.switcher button.on{background:var(--paper);color:var(--ink)}
.switcher button.on .mono{color:var(--orange)}
.switcher button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.legend{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;color:rgba(242,239,232,.9);z-index:3;white-space:nowrap;background:rgba(14,15,16,.55);padding:4px 10px;backdrop-filter:blur(6px)}
.hint{position:absolute;right:28px;bottom:84px;font-size:11px;opacity:.65;z-index:3;transition:opacity .6s}
.loader{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--ink);transition:opacity .8s ease,visibility .8s}
.loader img{height:38px;opacity:.9}
.loader .bar{width:220px;height:2px;background:rgba(242,239,232,.15);overflow:hidden}
.loader .bar span{display:block;height:100%;width:0;background:var(--orange);transition:width .2s}
.loader p{font-size:11px;opacity:.7}
.loader.done{opacity:0;visibility:hidden}
.notes{background:var(--paper);color:var(--ink);padding:90px 28px 110px}
.notes .wrap{max-width:1100px;margin:0 auto}
.notes h2{font-family:var(--disp);font-size:48px;text-transform:uppercase;line-height:1;margin-bottom:36px}
.notes .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.notes h3{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.notes p{font-size:16px;line-height:1.55}
@media (max-width:760px){
 .hud-top{padding:14px 16px;gap:12px}.logo{height:22px}.unit-tag{display:none}
 .chip-proto{font-size:9.5px;padding:5px 8px}
 .basin-copy{left:16px;right:16px;top:64px;max-width:none}
 .basin-copy h1{font-size:44px}.basin-copy .desc{display:none}.env{margin-top:6px}
 .switcher{bottom:46px;left:10px;right:10px;transform:none;gap:4px;padding:4px}
 .switcher button{min-width:0;flex:1;padding:8px 8px;grid-template-columns:1fr}
 .switcher button .mono{display:none}.switcher button b{font-size:16px}.switcher button i{font-size:10.5px}
 .legend{font-size:10.5px;bottom:16px;white-space:normal;width:92%;text-align:center}
 .hint{display:none}
 .co-psi .card,.co-psi .stem{display:none}
 .co .lbl .tag{display:none}
 .co .lbl{font-size:9px}
 .co .card{min-width:0;padding:7px 9px 6px}.co .val{font-size:20px}.co.left .card{left:auto;right:10px;border-left:0;border-right:2px solid var(--orange);text-align:right}
.co .sub{display:none}.co .stem{height:30px}.co .card{bottom:30px}
 .notes .cols{grid-template-columns:1fr}.notes h2{font-size:36px}
}
@media (prefers-reduced-motion:reduce){.co .dot::after{animation:none}}

.co-mw .stem{height:84px}.co-mw .card{bottom:84px}
.co-psi .stem{height:64px}.co-psi .card{bottom:64px}
@media (max-width:760px){.co-mw .stem{height:74px}.co-mw .card{bottom:74px}.co-hours .stem{height:22px}.co-hours .card{bottom:22px}}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 75% at 0% 0%,rgba(14,15,16,.5),rgba(14,15,16,0) 60%),linear-gradient(to top,rgba(14,15,16,.35),rgba(14,15,16,0) 22%);pointer-events:none;z-index:1}