@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#080d10;--white:#ebeeeb;--muted:#8d999c;--cyan:#a1e7e6;--line:rgba(175,205,210,.19)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--bg);color:var(--white);font:16px 'DM Sans',Arial,sans-serif}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button,input,select{font:inherit}button,a{color:inherit}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}button{background:none;border:0}header{height:105px;position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4.3%;border-bottom:1px solid var(--line);background:linear-gradient(#080d10dd,#080d1066);backdrop-filter:blur(12px)}.logo{font-size:31px;letter-spacing:5px;font-weight:600;white-space:nowrap}.logo sup{font-size:10px;letter-spacing:0;vertical-align:top;margin-left:5px}.logo-x{display:inline-block;transform:scaleX(1.15)}nav{display:flex;gap:32px}nav a{font-size:14px;color:#c5cccd;transition:color .2s}nav a:hover{color:var(--cyan)}.build{border:1px solid #778789;padding:17px 22px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;text-align:left;transition:background .2s,color .2s}.build:hover{background:var(--white);color:var(--bg)}.build span{margin-left:25px;font-size:20px}#menu{display:none}.mono,.eyebrow,label,.status-bar{font-family:'IBM Plex Mono',monospace}.eyebrow{font-size:12px;letter-spacing:2px;color:#b2bebf;margin-bottom:35px;line-height:1.8}.cross{font-size:24px;vertical-align:middle;color:var(--cyan);margin-right:14px}h1,h2{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:500;line-height:.96;letter-spacing:-1.5px;margin:0}h1{font-size:clamp(68px,7.7vw,132px)}h2{font-size:clamp(62px,7vw,112px)}.outline{color:transparent;-webkit-text-stroke:1px #bdcaca}.scene>p,.scene>div>p{font-size:16px;line-height:1.8;color:#bac3c3;margin-top:27px}.scene{position:relative;min-height:120vh;padding:190px 8% 130px;display:flex;flex-direction:column;justify-content:center;isolation:isolate}.hero{min-height:100svh;padding-top:160px;padding-bottom:150px;justify-content:center}.hero h1{position:relative;z-index:2}.hero>p{margin-top:30px}.hero-foot{position:absolute;bottom:105px;left:8%;right:8%;display:flex;justify-content:space-between;align-items:end}.hero-foot .mono{font-size:11px;line-height:1.8;text-align:right;color:#aab8bb}.hero-foot b{font-weight:400;color:#5f7176;font-size:10px}.scroll-link{font:11px 'IBM Plex Mono',monospace;letter-spacing:1.5px;display:flex;align-items:center;gap:15px}.scroll-link>span{border:1px solid #567071;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:20px}.drawing-caption{position:absolute;right:12%;top:72%;font-size:10px;line-height:2;color:#c1dedc;letter-spacing:1px}.drawing-caption span{color:#668187}#stage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#080d10}#world{position:absolute;width:100%;height:100%;inset:0}.visual{position:absolute;inset:-4%;background-position:center;background-size:cover;opacity:0;will-change:opacity,transform;transform:scale(1.05)}#exterior{background-image:url('/assets/exterior.webp')}#interior{background-image:url('/assets/interior.webp')}#material{background-image:url('/assets/material.webp')}#shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,11,.8),transparent 85%);pointer-events:none}.grain{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E");pointer-events:none}.rail{position:fixed;right:2.6%;top:43%;z-index:10;display:flex;flex-direction:column;align-items:center;gap:18px;font:10px 'IBM Plex Mono',monospace;color:#7f9499}.rail-track{height:115px;width:1px;background:#3c5057}.rail-track i{display:block;width:1px;background:var(--cyan);height:5%}.status-bar{position:fixed;bottom:0;left:0;right:0;z-index:15;background:#080d10df;border-top:1px solid var(--line);padding:18px 4.3%;font-size:10px;letter-spacing:1.5px;display:flex;justify-content:space-between;color:#82979d}.status-bar i{display:inline-block;width:4px;height:4px;background:var(--cyan);margin-right:10px;vertical-align:middle}.phases{position:absolute;bottom:12%;left:8%;right:8%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;font-size:11px;color:#6c8488}.phases span.active{color:var(--cyan)}.right-copy{justify-content:flex-start;padding-top:170px}.right-copy h2{font-size:clamp(50px,5.7vw,90px)}.hotspots{position:absolute;inset:0;z-index:-1}.hotspots button{position:absolute;left:var(--x);top:var(--y);font:10px 'IBM Plex Mono',monospace;letter-spacing:1.3px;padding:12px;border-bottom:1px solid #9ececd;background:#07121566}.hotspots button:before{content:'';position:absolute;width:45px;height:1px;background:#9ececd;left:-40px;top:42px;transform:rotate(-35deg)}.hotspots i{margin-left:20px;font-size:20px;font-style:normal;color:var(--cyan)}.hotspots button.active{background:#a1e7e6;color:#071215}.system-note{position:absolute;bottom:10%;left:8%;max-width:500px;padding:15px;border-left:1px solid var(--cyan);font-size:14px!important;background:#081014aa}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:230px;border-top:1px solid var(--line);padding-top:30px}.metrics strong{font-size:57px;font-weight:400;letter-spacing:-3px;white-space:nowrap}.metrics small{font-size:20px;letter-spacing:0;margin-left:8px}.metrics label{display:block;font-size:10px;letter-spacing:1px;color:#99b0b5;margin-top:10px}.energy-path{margin-top:35px;font-size:11px;letter-spacing:2px;color:#afcfce}.energy-path span{margin:0 20px;color:var(--cyan)}.room-caption{position:absolute;bottom:15%;font-size:11px;letter-spacing:2px}.controller-scene{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:center}.controller-scene h2{font-size:clamp(55px,6vw,90px)}.controller{width:100%;max-width:430px;background:linear-gradient(130deg,#1a2121f5,#080d0df5);border:1px solid #596361;padding:30px 34px;box-shadow:0 30px 100px #0009,0 0 0 7px #252b29;transform:perspective(1000px) rotateY(-3deg);border-radius:3px}.controller-top{font-size:10px;display:flex;justify-content:space-between;color:#8d9994;letter-spacing:1px}.controller-room{display:flex;justify-content:space-between;margin-top:35px;font-size:18px}.controller-room span{color:#9daea6}.temperature{display:flex;align-items:center;justify-content:space-between;margin:30px 0 8px}.temperature output{font-size:76px;font-weight:400;letter-spacing:-5px}.temperature small{font-size:40px;vertical-align:top}.temperature button{font-size:24px;color:#a5b5ad;width:40px;height:40px;border:1px solid #45504a;border-radius:50%}.climate-status{text-align:center;font:9px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#8caaa1;margin-bottom:30px}.control-row{min-height:64px;border-top:1px solid #35413b;display:flex;justify-content:space-between;align-items:center;font-size:14px}.control-row label{font:14px 'DM Sans',sans-serif}.segmented{display:flex;border:1px solid #46534b;padding:3px}.segmented button{font:10px 'IBM Plex Mono',monospace;padding:8px 12px;color:#8b9b94}.segmented button[aria-pressed=true]{background:#c6d1c7;color:#17221c}.light-row{display:block;padding:18px 0}.light-row label{display:flex;justify-content:space-between}input[type=range]{width:100%;height:3px;accent-color:#c5dace;margin-top:20px;cursor:pointer}.toggle{width:40px;height:21px;background:#333f37;border:1px solid #58675f;border-radius:15px;padding:3px}.toggle i{display:block;background:#bbc5bd;border-radius:50%;height:13px;width:13px;transition:transform .3s}.toggle[aria-checked=true]{background:#88afa2}.toggle[aria-checked=true] i{transform:translateX(17px);background:white}select{color:#d3ded5;background:#161f1b;border:1px solid #435247;padding:8px;font-size:13px}.controller-bottom{font-size:9px;letter-spacing:1px;text-align:center;color:#95b8a8;margin-top:24px}.systems{display:flex;flex-wrap:wrap;gap:25px;max-width:650px;margin-top:240px;font-size:11px;color:#9ec6cb}.bottom-note{position:absolute;bottom:11%;font-size:10px;letter-spacing:2px;color:#6a9097}.intelligence-scene{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.intelligence-scene h2{font-size:clamp(55px,6vw,94px)}.timeline{padding-top:130px}.timeline>div{display:grid;grid-template-columns:65px 1fr;border-bottom:1px solid var(--line);gap:25px;align-items:start;padding:25px 0;transition:opacity .3s;opacity:.38}.timeline>div.active{opacity:1}.timeline time{font:12px 'IBM Plex Mono',monospace;color:var(--cyan);padding-top:4px}.timeline p{font-size:15px;line-height:1.6;margin:0;max-width:260px}.material-scene h2{font-size:clamp(65px,9vw,145px)}.material-labels{margin-top:45px;font-size:11px;letter-spacing:1px}.explore-scene{padding:130px 0 90px;min-height:120vh;justify-content:flex-start;background:#0b1114ee}.desk-heading{padding:0 8%;display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.desk-heading h2{font-size:65px}.desk-heading>p{font-size:10px!important;letter-spacing:2px;text-align:right}#desk{height:65vh;min-height:420px;overflow:hidden;position:relative;touch-action:none;cursor:grab;background-image:radial-gradient(#30424a 1px,transparent 1px);background-size:25px 25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#desk:active{cursor:grabbing}#desk-content{transform-origin:0 0;position:absolute;left:0;top:0;will-change:transform}.tile{position:absolute;margin:0;background:#111c20;box-shadow:0 20px 50px #0005;user-select:none}.tile img{display:block;width:100%;height:230px;object-fit:cover;pointer-events:none}.tile-photo img{height:280px}.tile figcaption{padding:15px;font:11px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#9baeb3}.plan{height:270px;background:#d1d5cd;padding:20px}.plan svg{width:100%;height:100%}.diagram-title{font:12px 'IBM Plex Mono',monospace;padding:25px;color:#c1e1df}.energy-diagram{display:flex;flex-direction:column;align-items:center;font-size:30px;padding:15px;gap:10px;color:#b0dedb}.energy-diagram span{font:11px 'IBM Plex Mono',monospace}.energy-diagram i{font-size:25px;font-style:normal}.product{padding:25px;background:linear-gradient(120deg,#414740,#151e19)}.product>span{font:10px 'IBM Plex Mono',monospace}.product strong{font-size:64px;display:block;font-weight:400;margin-top:40px}.product p,.material-text p{font-size:14px;line-height:1.6;color:#b7c4bf}.product figcaption{padding:10px 0}.material-text{background:#a3a99a;color:#18231b;padding:25px}.material-text span{font:11px 'IBM Plex Mono',monospace}.material-text h3{font-size:50px;font-weight:400;line-height:1;margin:30px 0}.material-text p{color:#263c30}.desk-controls{position:absolute;bottom:20px;right:30px;display:flex;align-items:center;background:#10191a;border:1px solid #53696c}.desk-controls button{padding:12px;font:14px 'IBM Plex Mono',monospace}.desk-controls output{font:11px 'IBM Plex Mono',monospace;padding:0 8px}.continue{font:11px 'IBM Plex Mono',monospace;text-align:center;padding:30px;letter-spacing:2px}.network-scene{min-height:180vh}.network-steps{display:flex;gap:30px;position:absolute;bottom:16%;font-size:11px;color:#577780}.network-steps .active{color:#d3eeee}.network-scene h2{font-size:clamp(60px,8vw,120px)}.final-scene{min-height:120vh;padding-bottom:240px}.final-action{position:absolute;right:10%;top:45%;max-width:330px}.final-action p{margin-bottom:35px}.big-build{width:100%;border-color:#bfd5d1;padding:20px;font-size:13px}.final-action>a{display:block;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;margin-top:25px}footer{position:absolute;bottom:95px;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid var(--line)}footer>.mono{font-size:11px;line-height:1.8}footer>span:not(.mono){font-size:11px;color:#819395;line-height:1.8}#motion{font:10px 'IBM Plex Mono',monospace;color:#9bafb1}dialog{position:fixed;background:#0d1719;color:#e0ebe7;border:1px solid #617673;padding:45px;width:min(530px,calc(100% - 30px));max-height:90vh}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}dialog h2{font-size:62px}dialog p{color:#97adaa;line-height:1.6;font-size:14px}dialog label{display:block;font-size:12px;margin:20px 0}dialog select{display:block;width:100%;margin-top:10px;padding:13px}dialog .build{width:100%;margin-top:10px}.close{position:absolute;right:20px;top:12px;font-size:30px}#brief{margin-top:25px;padding-top:20px;border-top:1px solid #46625f;font-size:14px;line-height:1.7}#brief button{border-bottom:1px solid var(--cyan);padding:10px 0;color:var(--cyan)}.skip{position:fixed;left:15px;top:-100px;z-index:100;padding:20px;background:white;color:black}.skip:focus{top:10px}.noscript{position:fixed;top:105px;background:#102125;padding:15px;z-index:30}.reduced-motion *{scroll-behavior:auto!important;transition:none!important}
@media(min-width:1600px){.scene{padding-left:10%;padding-right:10%}header{padding:0 5%}.hero-foot{left:10%;right:10%}}
@media(max-width:1050px){nav{gap:18px}.top-build{font-size:10px;padding:12px}.logo{font-size:25px}.controller-scene{gap:6%}.metrics{gap:20px}.metrics strong{font-size:45px}.final-action{right:8%;max-width:280px}}
@media(max-width:760px){header{height:76px;padding:0 6%}.logo{font-size:24px}.top-build{margin-left:auto;margin-right:15px;padding:9px;font-size:8px}.top-build span{font-size:14px;margin-left:5px}#menu{display:block;font-size:22px;padding:8px}nav{display:none;position:absolute;top:76px;left:0;right:0;background:#0a1418f7;padding:25px 6%;border-bottom:1px solid #34474a}nav.open{display:flex;flex-direction:column;gap:22px}nav a{font-size:18px}.scene{padding:135px 8% 110px;min-height:110svh}h1{font-size:clamp(62px,12vw,90px);letter-spacing:-1px}h2{font-size:clamp(55px,11vw,80px)}.hero{min-height:100svh;justify-content:flex-start;padding-top:140px}.eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:25px}.cross{margin-right:7px}.hero>p{font-size:14px;line-height:1.7}.hero-foot{bottom:82px;left:8%;right:8%}.hero-foot>.mono{display:none}.drawing-caption{right:10%;top:auto;bottom:155px;font-size:8px}.scroll-link{font-size:9px;gap:10px}.status-bar{padding:15px 6%;font-size:8px;letter-spacing:.7px}.status-bar>span:last-child{display:none}.rail{right:3%;font-size:8px}.rail-track{height:70px}.phases{font-size:8px;gap:10px;bottom:14%}.right-copy h2{font-size:51px}.right-copy{padding-top:130px}.hotspots button{font-size:8px;left:clamp(12%,var(--x),62%);padding:7px}.hotspots i{margin-left:6px}.hotspots button:before{width:25px;left:-22px;top:27px}.system-note{right:10%;font-size:12px!important;bottom:12%}.metrics{grid-template-columns:1fr 1fr;margin-top:200px;gap:30px}.metrics strong{font-size:41px}.metrics small{font-size:16px}.metrics label{font-size:8px;line-height:1.6}.energy-path{font-size:8px;letter-spacing:1px}.energy-path span{margin:0 9px}.controller-scene{display:flex;gap:40px;align-items:stretch;min-height:130svh}.controller-scene h2{font-size:58px}.controller{max-width:380px;padding:25px;align-self:center;transform:none}.controller-top{font-size:9px}.temperature output{font-size:66px}.temperature{margin-top:20px}.controller-room{margin-top:25px}.control-row{min-height:57px}.controller-scene>div>p{font-size:14px;margin-top:20px}.systems{gap:20px;max-width:280px;margin-top:240px;font-size:9px}.bottom-note{font-size:8px;right:15%}.intelligence-scene{display:flex;gap:0;min-height:120svh}.intelligence-scene h2{font-size:56px}.timeline{padding-top:35px;width:100%}.timeline>div{padding:19px 0;gap:10px}.timeline p{font-size:14px;max-width:none}.material-scene h2{font-size:65px}.material-labels{font-size:9px;line-height:2.2;max-width:260px}.explore-scene{padding-left:0;padding-right:0}.desk-heading{align-items:start}.desk-heading h2{font-size:43px}.desk-heading>p{font-size:8px!important;line-height:1.8}.desk-heading .eyebrow{font-size:8px}#desk{height:58svh}.desk-controls{right:15px}.network-steps{flex-wrap:wrap;max-width:280px;gap:20px;font-size:9px}.network-scene h2{font-size:60px;max-width:100%;overflow-wrap:normal}.final-scene{min-height:125svh;padding-bottom:300px;justify-content:flex-start}.final-action{position:static;margin-top:20px;max-width:320px}.final-scene h2{font-size:75px}.final-action>p{font-size:14px;margin:10px 0 25px}.final-action>a{margin-top:20px}footer{bottom:85px;display:grid;grid-template-columns:1fr 1fr;gap:25px}footer .logo{font-size:23px}footer>span:not(.mono){font-size:9px}footer>.mono{font-size:9px}#motion{font-size:9px;text-align:left}dialog{padding:30px}dialog h2{font-size:52px}.room-caption{font-size:9px}.scene>p{font-size:14px}.hotspots{pointer-events:none}.hotspots button{pointer-events:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Scenes 01–03: one pinned residence and one immutable image-space camera. */
#opening-sequence{position:relative;height:680svh;background:#080d10;isolation:isolate}.opening-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}.opening-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#080d10}#opening-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.opening-copy{position:absolute;top:135px;left:6%;right:6%;pointer-events:none}#opening-title{font-size:clamp(46px,4.4vw,76px);line-height:1.02;letter-spacing:-.6px;max-width:760px}#opening-intro{font-size:14px;line-height:1.65;color:#aababc;margin:17px 0 0}#opening-chapter{position:absolute;top:0;left:0;font-size:clamp(32px,3.1vw,52px);line-height:1.1;letter-spacing:0;max-width:70%}.opening-foot{position:absolute;left:6%;right:6%;bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.opening-phases{display:flex;gap:25px;font-size:11px;letter-spacing:1.4px;color:#526469}.opening-phases span.active{color:#e4eeea}#opening-caption{font:12px 'IBM Plex Mono',monospace;color:#a4babd;text-align:right;line-height:1.7;margin:0}.in-opening .status-bar,.in-opening .rail,.in-opening #stage{visibility:hidden}.in-opening header{background:#080d10e8;backdrop-filter:none}.in-opening .skip:focus{z-index:100}
@media(max-width:760px){#opening-sequence{height:620svh}.opening-copy{top:116px;left:7%;right:7%}#opening-title{font-size:clamp(35px,7.8vw,54px);line-height:1.05;max-width:100%}#opening-intro{font-size:13px;margin-top:15px}#opening-chapter{font-size:31px;max-width:100%}.opening-foot{left:7%;right:7%;bottom:45px;display:block}.opening-phases{font-size:8px;gap:13px;letter-spacing:.7px}#opening-caption{text-align:left;font-size:11px;margin-top:18px;max-width:100%}}