@font-face{font-family:"Space Grotesk";src:url(../assets/fonts/space-grotesk.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --carbon:#101212;--night:#0B0D0D;--raised:#171A1A;--raised-2:#1E2221;
  --lime:#CAEF57;--cloud:#F1F4EA;--grey:#626B66;
  --mute:#A3ABA6; /* Grey lightened so small text stays readable on Carbon */
  --line:rgba(241,244,234,.13);--line-strong:rgba(241,244,234,.28);
  --g:"Space Grotesk","Segoe UI",sans-serif;--i:Inter,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,4.4vw,72px);--bar:76px;--ease:cubic-bezier(.2,.7,.15,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 8px);-webkit-text-size-adjust:100%;background:var(--carbon)}
body{font-family:var(--i);font-size:17px;line-height:1.6;background:var(--carbon);color:var(--cloud);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--g);font-weight:600;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(2.3rem,5.4vw,4.6rem)}
p{text-wrap:pretty}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.eyebrow{font-size:.84rem;font-weight:500;color:var(--mute);margin-bottom:18px}
.skip{position:fixed;left:16px;top:-80px;z-index:60;background:var(--lime);color:var(--carbon);padding:12px 18px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;background:var(--lime);color:var(--carbon);border:1px solid var(--lime);font:600 .98rem var(--i);text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px);background:var(--cloud);border-color:var(--cloud)}
.btn-line{background:transparent;color:var(--cloud);border-color:var(--line-strong)}
.btn-line:hover{background:var(--cloud);color:var(--carbon)}
.btn-small{min-height:42px;padding:0 20px;font-size:.92rem}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Header */
.bar{position:fixed;inset:0 0 auto;z-index:40;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background-color .35s,box-shadow .35s}
.bar.solid,.menu-open .bar{background:rgba(16,18,18,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.bar-logo{position:relative;z-index:2;display:block}
.bar-logo img{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a:not(.btn){position:relative;font-size:.95rem;font-weight:500;text-decoration:none;padding:10px 0;color:var(--cloud)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.menu-btn{display:none}

/* Hero */
.hero{position:relative}
.pin .hero{height:420svh}
.hero-pin{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:clamp(8px,2vw,32px);padding:calc(var(--bar) + 8px) var(--pad) 40px;background:radial-gradient(60% 55% at 74% 46%,#1D2120 0,rgba(29,33,32,0) 72%)}
.pin .hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#0B0D0D}
.hero-copy,.hero-caps{grid-column:1;grid-row:1}
.hero-stage{grid-column:2;grid-row:1}
.hero-copy{position:relative;z-index:2}
/* The fly-through: the canvas fills the whole screen, with the words on top. */
.pin .hero-stage{position:absolute;inset:0;height:auto;z-index:1;grid-column:auto;grid-row:auto}
.pin .stage-tools{position:absolute;right:var(--pad);bottom:12px;padding:0;z-index:3}
.hero-lime{position:absolute;inset:0;z-index:4;background:var(--lime);opacity:0;pointer-events:none}
.hero-caps{display:none;pointer-events:none}
.pin .hero-caps{display:block;position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(11,13,13,.72),rgba(11,13,13,0) 46%)}
.hero-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(62px,9svh,110px);opacity:0;font-size:clamp(1.08rem,1.5vw,1.35rem);line-height:1.4;color:var(--cloud);max-width:30em}
.scroll-hint{z-index:3}
.hero-cap span{display:block;font-size:.86rem;font-weight:500;color:var(--lime);margin-bottom:10px}
.hero-cap b{display:block;font:700 clamp(2.8rem,6vw,6rem)/1.02 var(--g);letter-spacing:-.025em;color:var(--cloud);margin-bottom:14px}
.pin #openBtn{display:none}
.scroll-hint{display:none;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:22px;align-items:center;gap:14px;font-size:.84rem;font-weight:500;color:var(--mute);transition:opacity .3s}
.pin .scroll-hint{display:flex}
.scroll-hint i{display:block;width:clamp(90px,14vw,190px);height:2px;background:var(--line-strong)}
.scroll-hint u{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.hero-done .scroll-hint{opacity:0}

/* Where you are on the page */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:30;display:none;flex-direction:column;gap:2px;padding:8px 6px;border-radius:999px;background:rgba(16,18,18,.72)}
.rail a{position:relative;display:grid;place-items:center;width:22px;height:24px;text-decoration:none}
.rail a::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(241,244,234,.42);transition:transform .3s var(--ease),background-color .3s}
.rail a:hover::before{background:var(--cloud)}
.rail a.on::before{background:var(--lime);transform:scale(1.5)}
.rail span{position:absolute;right:32px;padding:3px 10px;border-radius:999px;background:var(--carbon);color:var(--cloud);font-size:.76rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
@media (min-width:1100px){.rail{display:flex}}
.hero h1{font-size:clamp(2.7rem,5.1vw,5.5rem);font-weight:700}
.under{color:var(--lime)}
.lede{max-width:30em;font-size:clamp(1.06rem,1.35vw,1.25rem);line-height:1.5;color:var(--cloud);margin:26px 0 32px}
.hero-stage{position:relative;height:min(76svh,780px);min-width:0;display:flex;flex-direction:column}
.stage{position:relative;flex:1;min-height:0;width:100%;height:100%}
.still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* With JavaScript the stills wait for the 3D. html.stills shows them if 3D cannot run. */
.js .still{opacity:0}
.js.stills .still{opacity:1}
.machine{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .4s}
.machine.on{opacity:1}
.stage.live .still{visibility:hidden}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.labels p{position:absolute;left:0;top:0;opacity:0;font-size:.78rem;line-height:1.2;color:var(--mute);white-space:nowrap;padding:6px 10px;border-radius:7px;background:rgba(16,18,18,.8);border:1px solid var(--line)}
.labels b{font-weight:600;color:var(--cloud);margin-right:4px}
.stage-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;position:relative;z-index:3;padding-top:8px}
.tool{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(16,18,18,.72);color:var(--cloud);font:500 .9rem var(--i);cursor:pointer;transition:border-color .25s,color .25s}
.tool:hover{border-color:var(--lime)}
.tool-dot{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.tool-quiet{border-color:transparent;background:none;color:var(--mute)}
.tool-quiet:hover{color:var(--cloud);border-color:var(--line-strong)}

/* Intro */
.intro{padding:clamp(80px,12vw,170px) var(--pad);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;border-top:1px solid var(--line)}
.intro-big{font:600 clamp(1.8rem,4vw,3.5rem)/1.14 var(--g);letter-spacing:-.02em}
.lit{color:var(--lime)}
.intro-small{color:var(--mute);font-size:1rem}

/* Section headings */
.sec-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head>p:last-child:not(.eyebrow){color:var(--mute);margin-top:18px;max-width:34em}

/* Work */
.work{padding:clamp(70px,9vw,130px) var(--pad);background:var(--night)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.card:first-child,.card:nth-child(4){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2.4fr) minmax(250px,1fr);gap:clamp(24px,3vw,48px);align-items:end}
.card-visual{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--raised);perspective:1200px;--rx:0deg;--ry:0deg;--sep:0}
.card-visual:hover,.card:focus-within .card-visual{--sep:1}
.layers{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease)}
.layer{position:absolute;inset:0;transform:translateZ(calc(var(--sep)*var(--i)*26px));transition:transform .8s var(--ease)}
.layer svg{width:100%;height:100%}
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 12px;border-radius:999px;background:var(--carbon);color:var(--cloud);border:1px solid var(--line-strong);font-size:.78rem;font-weight:500;line-height:1.3}
.card-text{padding-top:20px}
.card:first-child .card-text,.card:nth-child(4) .card-text{padding:0 0 4px}
.card-open{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.card-open .media{transition:transform .9s var(--ease)}
.card-open:hover .media{transform:scale(1.035)}
.card-go{position:absolute;right:12px;bottom:12px;z-index:2;padding:7px 14px;border-radius:999px;background:var(--lime);color:var(--carbon);font-size:.82rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--ease)}
.card-open:hover .card-go{opacity:1;transform:none}
.badge{pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.card-type{font-size:.86rem;font-weight:500;color:var(--mute);margin-bottom:6px}
.card h3{font-size:clamp(1.5rem,2.3vw,2.1rem);margin-bottom:10px}
.card-text>p:not(.card-type){max-width:32em;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags li{padding:4px 11px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--cloud)}
.link{display:inline-block;margin-top:18px;font-weight:600;color:var(--lime)}
.plain-list{display:grid;gap:12px}

/* Film */
.film{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,6vw,110px);align-items:center;margin-top:clamp(70px,9vw,130px);padding-top:clamp(50px,6vw,80px);border-top:1px solid var(--line)}
.film h3{font-size:clamp(2.2rem,5.2vw,4.4rem);margin-bottom:22px}
.film-text>p:not(.eyebrow):not(.small){font-size:1.12rem;max-width:30em}
.small{margin-top:20px;font-size:.86rem;color:var(--mute);max-width:36em}
.film-frame{max-width:340px;width:100%;justify-self:center;border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);background:#000}
.film-frame video{width:100%}

.svc-no{font-size:.84rem;font-weight:500;color:var(--lime);margin-bottom:12px}

/* World: wireframe. Cloud paper and blueprint blue. */
.wf{--ink:#1F3BFF;--mute:#4D5560;--line:rgba(31,59,255,.2);--line-strong:rgba(31,59,255,.45);--cloud:#101212;padding:clamp(70px,8vw,120px) var(--pad);background-color:#F1F4EA;color:#101212;background-image:linear-gradient(rgba(31,59,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,59,255,.07) 1px,transparent 1px);background-size:32px 32px}
.wf :focus-visible{outline-color:var(--ink)}
.wf-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.wf .svc-no{color:var(--ink)}
.wf-intro h3{font-size:clamp(1.4rem,2.2vw,2rem);margin-bottom:10px}
.wf-intro>p:last-child{color:var(--mute)}
.wf-stage{--lean:0deg;position:relative;aspect-ratio:16/8.4;max-height:78svh;width:100%;margin:0 auto;container-type:inline-size;perspective:1700px;touch-action:pan-y}
.wf-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s var(--ease)}
.wf-final{position:absolute;inset:0;transform-style:preserve-3d}
.wl{position:absolute;inset:0;transition:transform 1s var(--ease);border-radius:14px}
.wl-bg{background:#1430E0;box-shadow:0 26px 60px -22px rgba(20,48,224,.6)}
.wl-arch{left:50%;right:4%;top:18%;bottom:0;display:flex;align-items:flex-end;gap:2.2%}
.wl-arch i{flex:1;border-radius:999px 999px 0 0;background:#F1F4EA}
.wl-arch i:nth-child(1){height:72%}
.wl-arch i:nth-child(2){height:100%;background:#FF5A1F}
.wl-arch i:nth-child(3){height:58%}
.wl-type{color:#F1F4EA}
.wl-type b{position:absolute;left:4%;top:5.4%;font:700 2cqw var(--g)}
.wl-type strong{position:absolute;left:4%;top:32%;font:700 6.2cqw/1.02 var(--g);letter-spacing:-.03em}
.wl-ui span{position:absolute;top:5.8%;color:#F1F4EA;font:500 1.28cqw var(--i)}
.wl-ui span:nth-child(1){left:62%}
.wl-ui span:nth-child(2){left:70%}
.wl-ui span:nth-child(3){left:79%}
.wl-ui em{position:absolute;left:4%;top:68%;padding:1.1cqw 2.2cqw;border-radius:99cqw;background:#F1F4EA;color:#1430E0;font:600 1.5cqw var(--i)}
.wf-blue{position:absolute;inset:0;border-radius:14px;background-color:#F1F4EA;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:8.333cqw 8.333cqw;border:2px solid var(--ink);clip-path:inset(0 0 0 var(--x));transition:transform 1s var(--ease)}
.bx{position:absolute;border:1.5px dashed var(--ink);border-radius:4px}
.bx::after{content:attr(data-spec);position:absolute;left:6px;top:4px;font:500 clamp(9px,1.05cqw,14px)/1.25 var(--i);color:var(--ink)}
.bx-nav{left:4%;right:4%;top:4%;height:9%}
.bx-title{left:4%;top:31%;width:43%;height:32%}
.bx-btn{left:4%;top:68%;width:17%;height:11%;border-radius:99px}
.bx-art{left:50%;right:4%;top:18%;bottom:0}
.wf-handle{position:absolute;top:-12px;bottom:-12px;left:var(--x);width:2px;margin-left:-1px;background:#FF5A1F;pointer-events:none;transition:opacity .4s}
.wf-handle span{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px;border-radius:50%;background:#FF5A1F}
.wf-handle span::before{content:"";position:absolute;inset:0;background:linear-gradient(#fff,#fff) 18px 16px/2px 16px no-repeat,linear-gradient(#fff,#fff) 28px 16px/2px 16px no-repeat}
.wf-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.wf-range:focus-visible{opacity:.001}
.wf-stage:has(.wf-range:focus-visible) .wf-handle span{outline:3px solid var(--ink);outline-offset:3px}
html:not(.js) .wf-range,html:not(.js) .wf-tools .btn{display:none}
/* Pulled apart: the page's layers spread out in depth, with the plan at the bottom. */
.wf-stage.apart .wf-tilt{transform:rotateX(46deg) rotateZ(calc(-20deg + var(--lean))) scale(.74)}
.wf-stage.apart .wl-arch{transform:translateZ(26px)}
.wf-stage.apart .wl-type{transform:translateZ(54px)}
.wf-stage.apart .wl-ui{transform:translateZ(82px)}
.wf-stage.apart .wf-blue{transform:translateZ(-110px);clip-path:none}
.wf-stage.apart .wf-handle{opacity:0}
.wf-stage.apart .wf-range{pointer-events:none}
.wf-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);margin-top:clamp(36px,4vw,56px)}
.wf-tools p{margin-top:14px;font-size:.92rem;color:var(--mute);max-width:24em}
.wf .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.wf .btn:hover{background:#FF5A1F;border-color:#FF5A1F;color:#101212}
.wf dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,44px)}

/* World: physics. A flood of orange, so it hits hard after the paper. */
.motion{--mute:#2B1408;--line:rgba(16,18,18,.28);--line-strong:rgba(16,18,18,.6);--cloud:#101212;--lime:#101212;position:relative;background:#FF5A1F;color:#101212;padding:clamp(70px,8vw,110px) var(--pad) clamp(50px,6vw,80px)}
.motion :focus-visible{outline-color:#101212}
.motion-head{position:relative;z-index:1;max-width:760px;pointer-events:none}
.motion h2{font-size:clamp(2.6rem,6.4vw,5.8rem);font-weight:700}
.motion-why{margin-top:16px;font-size:clamp(1.06rem,1.4vw,1.22rem);line-height:1.45;max-width:30em}
.motion-zone{position:relative;height:min(62svh,560px);min-height:360px;margin:12px calc(var(--pad)*-1) 0;border-bottom:3px solid #101212}
.motion-zone canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.motion.live .motion-zone canvas{display:block}
.motion-word{position:absolute;left:var(--pad);right:var(--pad);bottom:-.04em;font:700 clamp(4rem,17vw,16rem)/.9 var(--g);letter-spacing:-.03em}
.motion.live .motion-word{display:none}
.motion-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px clamp(20px,3vw,44px);align-items:center;padding:20px 0 clamp(24px,3vw,40px)}
.motion:not(.live) .motion-bar{display:none}
.motion-score{font:700 clamp(1.25rem,2vw,1.8rem) var(--g);letter-spacing:-.015em}
.motion-status{font-weight:500}
.motion .btn{background:#101212;border-color:#101212;color:#F1F4EA}
.motion .btn:hover{background:#F1F4EA;border-color:#F1F4EA;color:#101212}
.motion .btn-line{background:transparent;color:#101212;border-color:#101212}
.motion-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,44px)}
.motion-list>div{grid-template-columns:minmax(0,1fr)!important}
.motion dd{color:#2B1408}

.circuit-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);margin-top:28px;padding:14px 20px 8px;border-radius:12px;background:rgba(4,42,32,.9)}
.circuit-list>div{grid-template-columns:minmax(0,1fr)!important;border-top:0;gap:4px}
dl>div{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.5fr);gap:6px 18px;padding:12px 0;border-top:1px solid var(--line)}
dt{font-weight:600;font-size:.95rem}
dd{margin:0;color:var(--mute);font-size:.95rem;line-height:1.5}

/* About */
.about{padding:clamp(80px,11vw,160px) var(--pad);background:var(--night)}
.about-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 clamp(30px,6vw,100px);align-items:end}
.about-top .eyebrow{grid-column:1/-1}
.about-text{color:var(--mute);font-size:1.06rem}
.process-title{font-size:1.25rem;margin:clamp(60px,8vw,110px) 0 28px}
.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.process li{position:relative;padding:26px clamp(14px,2.4vw,36px) 6px 0}
.process li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--lime)}
.process-no{font:600 clamp(2.4rem,4vw,3.6rem)/1 var(--g);color:var(--mute);display:block;margin-bottom:18px}
.process h4{font-size:clamp(1.25rem,1.9vw,1.6rem);margin-bottom:10px}
.process p{color:var(--mute);font-size:.98rem;max-width:26em}

/* World: circuit board. One neutral (solder mask), one accent (copper), lime for the signal. */
.circuit{--mute:#BCD2C7;--line-strong:rgba(241,244,234,.42);position:relative;margin:clamp(30px,5vw,70px) clamp(8px,1.4vw,24px) 0;border-radius:clamp(16px,2vw,28px);overflow:hidden;background:#06382B;padding:clamp(80px,5vw,84px) clamp(24px,6vw,96px) clamp(70px,5vw,76px)}
.circuit canvas{position:absolute;inset:0;width:100%;height:100%;display:none;touch-action:pan-y}
.circuit.live canvas{display:block}
.circuit-copy{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(30px,5vw,80px);pointer-events:none}
.circuit-copy>*,.circuit-side>*{pointer-events:auto}
.circuit-copy .eyebrow{grid-column:1}
.circuit-copy h2{grid-column:1}
.circuit-side{grid-column:2;grid-row:1/3;pointer-events:none}
.circuit .eyebrow{margin-bottom:12px}
.circuit h2{font-size:clamp(2.2rem,3.9vw,3.5rem)}
.circuit-text{margin:0 0 18px;font-size:clamp(1.04rem,1.3vw,1.16rem);max-width:40em}
/* Room for two lines, so a longer message cannot resize the section and redraw the board. */
.circuit-status{margin-top:14px;min-height:3.2em;font-weight:600;color:var(--lime)}
.circuit-count{font-size:.9rem;color:var(--mute)}
.circuit-note{margin-top:8px;font-size:.84rem;color:var(--mute)}
.circuit .btn[disabled]{opacity:.45;cursor:default;transform:none;background:transparent;color:var(--cloud);border-color:var(--line-strong)}
.circuit:not(.live) .circuit-controls{display:none}
.circuit-zone{position:relative;height:420px;margin-top:26px;pointer-events:none}
.circuit.live .world-still{display:none}
.circuit .world-still{width:100%;height:100%;object-fit:cover;border-radius:10px}

/* World: biology. Pale agar and microscope stain, so this section feels like daylight. */
.bio{--mute:#5D4658;--line:rgba(70,20,70,.17);--line-strong:rgba(70,20,70,.36);background:#F6E7ED;color:#1E1024}
.bio :focus-visible{outline-color:#4A1A6B}
.bio-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.bio .about-top{display:block}
.bio .about-text{margin-top:24px}
.bio-idea{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-strong);color:var(--mute);font-size:1.02rem;max-width:34em}
.bio-idea b{display:block;font:600 1.3rem/1.2 var(--g);letter-spacing:-.015em;color:#A5125F;margin-bottom:8px}
.dish{min-width:0}
.dish-lens{position:relative;width:100%;max-width:640px;aspect-ratio:1;margin:0 auto;border-radius:50%;color:#4A1A6B}
.dish-lens canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;cursor:copy;touch-action:pan-y;display:none}
.bio.live .dish-lens canvas{display:block}
.bio.live .world-still{visibility:hidden}
.dish-lens .world-still{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.dish-ticks{position:absolute;inset:-2%;width:104%;height:104%;max-width:none;pointer-events:none}
.dish-tag{position:absolute;transform:translate(-50%,-180%);padding:3px 9px;border-radius:999px;background:#1E1024;color:#F6E7ED;font-size:.76rem;font-weight:600;line-height:1.35;white-space:nowrap;pointer-events:none}
.dish-tools{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.bio:not(.live) .dish-tools,.bio:not(.live) .dish-status,.bio:not(.live) .bio-try{display:none}
.bio .btn{background:#1E1024;border-color:#1E1024;color:#F6E7ED}
.bio .btn:hover{background:#A5125F;border-color:#A5125F;color:#fff}
.bio .btn-line{background:transparent;color:#1E1024;border-color:var(--line-strong)}
.dish-status{text-align:center;min-height:1.6em;margin-top:12px;font-weight:600;font-size:.94rem;color:#A5125F}
.dish-note{text-align:center;font-size:.82rem;color:var(--mute)}
.bio .process-no{color:#A5125F}
.bio .process li::before{background:#A5125F}

/* Puzzles and hidden symbols */
.hud-sym{color:#A3ABA6;font-variant-numeric:tabular-nums}
.flight-glyph{position:absolute;left:68%;top:38%;z-index:3;width:92px;height:92px;padding:18px;border-radius:50%;border:1px solid #CAEF57;background:rgba(11,13,13,.55);color:#CAEF57;cursor:pointer}
.flight-glyph svg{width:100%;height:100%}
.wf-read{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font:600 .86rem var(--i);color:#FF5A1F}
.motion-trail{font:600 .94rem var(--i);letter-spacing:.06em;min-height:1.4em}
.dish-mark{position:absolute;width:5.5%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px dashed rgba(74,26,107,.42);border-radius:50%;pointer-events:none;transition:background-color .4s,border-color .4s}
.dish-mark.hit{background:rgba(202,239,87,.5);border-color:#4A1A6B;border-style:solid}
.foot-ink{display:flex;gap:clamp(10px,2vw,22px);margin:-14px 0 clamp(24px,3vw,44px)}
.foot-ink span{width:clamp(30px,4vw,48px);aspect-ratio:1;color:var(--mute)}
.foot-ink svg{width:100%;height:100%}
.foot.live .foot-ink svg{visibility:hidden}
.foot{touch-action:pan-y}
.map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.map-slot{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid rgba(241,244,234,.13);border-radius:10px;font-size:.84rem;line-height:1.35;color:#A3ABA6}
.map-slot svg,.map-slot em{flex:none;width:26px;height:26px;font:700 1rem/26px var(--g);text-align:center;color:rgba(241,244,234,.4)}
.map-slot.found{border-color:#CAEF57;color:#F1F4EA}
.map-slot.found svg{color:#CAEF57}
.lock{margin-top:14px;padding:14px;border:1px solid #CAEF57;border-radius:12px}
.lock-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lock-g{width:52px;height:52px;padding:11px;border-radius:12px;border:1px solid rgba(241,244,234,.28);background:none;color:#F1F4EA;cursor:pointer}
.lock-g.on{background:#CAEF57;color:#101212;border-color:#CAEF57}
.lock.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.dc-word{display:inline-block;white-space:nowrap}
.dc{display:inline-block;text-align:center}
.dc.on{color:var(--lime);opacity:.75}
.under-room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(70px,9vw,130px) var(--pad);background:#07120D;border-top:1px solid #CAEF57}
.under-room h2{font-size:clamp(2.6rem,6vw,5.4rem)}
.under-text{margin:18px 0 26px;color:var(--mute);font-size:1.1rem;max-width:32em}
.under-fuse{position:relative;width:min(70vw,320px);aspect-ratio:1;margin:auto}
.under-fuse img{position:absolute;inset:18%;width:64%;height:64%;opacity:0;transform:scale(.4);transition:opacity .5s .7s,transform .7s .7s var(--ease)}
.under-fuse i{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;color:#CAEF57;transform:rotate(var(--a)) translateY(-130px) rotate(calc(var(--a)*-1));transition:transform .9s cubic-bezier(.7,0,.8,.3),opacity .3s .7s}
.under-fuse i svg{width:100%;height:100%}
.under-fuse.go i{transform:rotate(calc(var(--a) + 240deg)) translateY(0) rotate(0deg);opacity:0}
.under-fuse.go img{opacity:1;transform:none}
.under-fuse.done i,.under-fuse.done img{transition:none}
@media (max-width:899px){.under-room{grid-template-columns:minmax(0,1fr)}.map{grid-template-columns:minmax(0,1fr)}}

.wf-secret{position:absolute;left:1%;top:44%;width:2.6%;writing-mode:vertical-rl;font:600 clamp(9px,1cqw,13px)/1.2 var(--i);color:#FF5A1F;height:50%}

/* Signal: points, rewards and secrets */
.hud{position:fixed;left:14px;bottom:14px;z-index:35;display:flex;gap:6px;align-items:center}
.hud button{min-height:44px;border-radius:999px;border:1px solid rgba(241,244,234,.28);background:rgba(16,18,18,.9);color:#F1F4EA;font:600 .86rem var(--i);padding:0 15px;cursor:pointer;display:flex;align-items:center;gap:9px}
.hud button:hover{border-color:#CAEF57}
.hud-meter{display:block;width:clamp(46px,7vw,90px);height:5px;border-radius:9px;background:rgba(241,244,234,.2);overflow:hidden}
.hud-meter i{display:block;height:100%;background:#CAEF57;border-radius:9px;transition:width .5s var(--ease)}
.hud b{color:#CAEF57;font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:70px;z-index:50;transform:translate(-50%,16px);padding:11px 18px;border-radius:14px;background:#CAEF57;color:#101212;font:600 .94rem/1.3 var(--i);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);max-width:min(90vw,440px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast small{display:block;font-weight:500;font-size:.8rem}
.plus{position:fixed;z-index:50;font:700 1.1rem var(--g);color:#CAEF57;pointer-events:none;text-shadow:0 1px 0 #101212;animation:plus .9s ease-out forwards}
@keyframes plus{to{transform:translateY(-54px);opacity:0}}
.panel{margin:auto;width:min(92vw,560px);max-height:88dvh;padding:0;border:1px solid rgba(241,244,234,.28);border-radius:20px;background:#101212;color:#F1F4EA;overflow:auto}
.panel::backdrop{background:rgba(5,6,6,.7)}
.panel-in{padding:clamp(20px,4vw,30px)}
.panel-top{display:flex;justify-content:space-between;align-items:start;gap:14px}
.panel h2{font-size:clamp(1.8rem,5vw,2.6rem)}
.panel-x{min-width:44px;min-height:44px;border-radius:50%;border:1px solid rgba(241,244,234,.28);background:none;color:inherit;font-size:1.1rem;cursor:pointer}
.panel-bar{height:8px;border-radius:9px;background:rgba(241,244,234,.16);margin:14px 0 6px;overflow:hidden}
.panel-bar i{display:block;height:100%;background:#CAEF57}
.panel-next{font-size:.92rem;color:#A3ABA6}
.panel h3{font-size:1.1rem;margin:26px 0 10px}
.reward{padding:13px 0;border-top:1px solid rgba(241,244,234,.13)}
.reward b{display:block;font:600 1.04rem var(--g)}
.reward p{font-size:.9rem;color:#A3ABA6}
.reward.locked b{color:#A3ABA6}
.reward code{display:inline-block;margin:8px 0;padding:4px 10px;border-radius:7px;background:#CAEF57;color:#101212;font:600 .92rem ui-monospace,Consolas,monospace}
.reward .btn{min-height:42px;font-size:.88rem;padding:0 18px;margin:6px 8px 0 0}
.secret{display:flex;gap:10px;padding:8px 0;font-size:.92rem;color:#A3ABA6;border-top:1px solid rgba(241,244,234,.08)}
.secret i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:1px solid rgba(241,244,234,.3)}
.secret.found{color:#F1F4EA}
.secret.found i{background:#CAEF57;border-color:#CAEF57}
.panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.panel-small{margin-top:18px;font-size:.78rem;line-height:1.45;color:#A3ABA6}
.panel-reset{background:none;border:0;padding:8px 0;color:#A3ABA6;font:inherit;font-size:.78rem;text-decoration:underline;cursor:pointer}
.contact-reward{margin:0 0 14px;padding:10px 14px;border:1px solid var(--lime);border-radius:12px;color:var(--lime);font-size:.96rem}
.foot-c{background:none;border:0;padding:0 2px;color:inherit;font:inherit;cursor:default}
/* X-ray: a secret view of the page's own boxes, with real numbers. */
html.xray body{background:#07120D}
html.xray body *:not(.panel,.panel *,.hud,.hud *,.xray-hud,.xray-hud *,.toast,canvas){background-color:transparent!important;background-image:none!important;color:#CAEF57!important;outline:1px solid rgba(202,239,87,.34);box-shadow:none!important}
html.xray img,html.xray video{opacity:.16}
html.xray canvas{opacity:.35;filter:hue-rotate(60deg)}
.xray-hud{position:fixed;right:14px;top:84px;z-index:45;padding:10px 14px;border:1px solid #CAEF57;border-radius:10px;background:#07120D;color:#CAEF57;font:500 .8rem/1.5 ui-monospace,Consolas,monospace}
@media (max-width:640px){.hud-word{display:none}}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:center;padding:clamp(70px,9vw,130px) var(--pad);background:radial-gradient(52% 60% at 26% 50%,#1D2120 0,rgba(29,33,32,0) 72%)}
.contact-stage{height:min(74svh,680px);min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.logo-stage{position:relative;flex:1;min-height:0;width:100%;cursor:pointer;touch-action:pan-y}
.logo-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0}
.logo-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
html:not(.js) .logo-btn{display:none}
.contact:not(.live) .logo-btn{display:none}
.contact:not(.live) .logo-stage{cursor:default}
.tagline{font:600 clamp(1.05rem,1.5vw,1.3rem)/1.3 var(--g);color:var(--lime);margin-bottom:24px}
.contact h2{font-size:clamp(3rem,7vw,6.4rem);font-weight:700}
.contact-text{margin:20px 0 14px;color:var(--mute);font-size:1.1rem}
.mail{display:inline-block;font:600 clamp(1.25rem,2.9vw,2.5rem)/1.2 var(--g);letter-spacing:-.015em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--lime);margin-bottom:30px;overflow-wrap:anywhere}
.mail:hover{color:var(--lime)}
.copy-note{font-size:.9rem;color:var(--lime);min-height:1.2em}

/* Footer */
.foot{position:relative;overflow:hidden;background:#0B0D0D;border-top:1px solid var(--line);padding:clamp(34px,4vw,60px) var(--pad) 78px}
.foot-fluid{position:absolute;inset:0;width:100%;height:100%;display:none}
.foot.live .foot-fluid{display:block}
.foot>*:not(.foot-fluid){position:relative;z-index:1}
.foot-big{font:700 clamp(3.4rem,11.3vw,15.5rem)/.92 var(--g);letter-spacing:-.045em;color:var(--cloud);white-space:nowrap;pointer-events:none}
.foot-big span{display:inline-block}
.foot.live .foot-big{color:transparent}
.foot-hint{margin:14px 0 clamp(30px,4vw,56px);font-size:.9rem;color:var(--mute);pointer-events:none}
.foot:not(.live) .foot-hint{display:none}
.foot-end{display:inline-flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot-pause{background:none;border:0;padding:9px 0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.foot-pause:hover{color:var(--lime)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:clamp(30px,6vw,100px);align-items:start}
.foot-brand img{height:38px;width:auto;margin-bottom:14px}
.foot-brand p{color:var(--mute);font-size:.95rem}
.foot-nav{display:grid;gap:0}
.foot-nav a,.foot-bottom a{display:inline-block;padding-block:9px!important}
.foot-nav a,.foot-mail,.foot-bottom a{text-decoration:none;transition:color .2s}
.foot-nav a{padding:4px 0}
.foot-nav a:hover,.foot-mail:hover,.foot-bottom a:hover{color:var(--lime)}
.foot-mail{display:block;font-weight:500;margin-bottom:10px;padding:9px 0}
.social{display:flex;gap:8px}
.social a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);text-decoration:none;transition:border-color .25s,background-color .25s,color .25s,transform .3s var(--ease)}
.social a:hover{background:var(--lime);border-color:var(--lime);color:var(--carbon);transform:translateY(-2px)}
.social svg{width:20px;height:20px}
.s-fv span{font:700 1.02rem/1 var(--g)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,5vw,64px);padding-top:20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--mute)}

/* Reveal: only when JavaScript and motion are on */
.can-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.can-reveal .reveal.in{opacity:1;transform:none}

/* Tablet */
@media (max-width:1080px){
  .intro{grid-template-columns:1fr}
  .about-top{grid-template-columns:1fr;gap:20px}
  .film{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
  .wf-head,.wf-foot{grid-template-columns:minmax(0,1fr)}
  .circuit-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .circuit-copy{display:block}
  .circuit-text{margin-top:14px}
  .circuit-zone{height:720px}
  .bio-top{grid-template-columns:minmax(0,1fr)}
}

/* Tablet portrait and phone: the machine stays in the hero and contact; services use stills */
@media (max-width:899px){
  :root{--bar:64px}
  .bar-logo img{height:28px}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:2;min-height:44px;padding:0 4px 0 12px;background:none;border:0;color:var(--cloud);font:500 .95rem var(--i);cursor:pointer}
  .menu-icon{display:grid;gap:6px;width:24px}
  .menu-icon i{display:block;height:2px;background:currentColor;transition:transform .3s var(--ease)}
  .menu-open .menu-icon i:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-open .menu-icon i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .js .nav{position:fixed;inset:var(--bar) 0 auto;display:none;background:var(--carbon);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 24px;max-height:calc(100dvh - var(--bar));overflow:auto}
  .menu-open .nav{display:flex!important}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .bar{position:static;height:auto;flex-wrap:wrap;padding-block:14px}
  html:not(.js) .nav{flex-wrap:wrap}
  .nav a:not(.btn){font:600 1.6rem var(--g);padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:20px;min-height:50px}
  .hero-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0;align-content:start;padding:calc(var(--bar) + 2px) var(--pad) 44px;gap:10px;background:radial-gradient(90% 34% at 50% 22%,#1D2120 0,rgba(29,33,32,0) 76%)}
  .hero-stage{grid-column:1;grid-row:1;height:clamp(290px,44svh,520px)}
  .hero-copy,.hero-caps{grid-row:2}
  .pin .hero-stage{grid-column:auto;grid-row:auto;height:auto}
  .pin .hero-pin{grid-template-rows:minmax(0,1fr);align-content:stretch}
  .pin .hero-copy{grid-row:1;align-self:end;padding-bottom:58px}
  .pin .hero-pin::after{content:"";position:absolute;inset:auto 0 0;height:62%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(11,13,13,.94) 52%,rgba(11,13,13,0))}
  .pin .stage-tools{top:calc(var(--bar) + 4px);bottom:auto;right:8px}
  .scroll-hint span{display:none}
  .scroll-hint{left:0;right:0;bottom:0;transform:none}
  .scroll-hint i{width:100%}
  .hero-cap b{font-size:clamp(2.2rem,10vw,3.6rem);margin-bottom:8px}
  .scroll-hint{bottom:14px}
  .hero h1{font-size:clamp(2.4rem,10.4vw,4.6rem)}
  .lede{margin:18px 0 24px}
  .eyebrow{margin-bottom:12px}
  .hero .btn{flex:1 1 auto;white-space:nowrap;padding:0 20px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .badge{left:8px;bottom:8px;padding:4px 10px;font-size:.72rem}
  .card:first-child,.card:nth-child(4){grid-template-columns:minmax(0,1fr);gap:0}
  .card:first-child .card-text,.card:nth-child(4) .card-text{padding:20px 0 0}
  html:not(.pin) .hero-pin{padding-bottom:76px}
  .film{grid-template-columns:minmax(0,1fr)}
  .film-frame{max-width:300px;justify-self:start}
  .wf-stage{aspect-ratio:4/4.6;max-height:none}
  .wl-type b{font-size:4.4cqw}
  .wl-type strong{top:15%;font-size:11cqw}
  .wl-ui span{display:none}
  .wl-ui em{top:40%;padding:2.4cqw 4.6cqw;font-size:3.4cqw}
  .wl-arch{left:4%;right:4%;top:54%}
  .bx::after{font-size:clamp(9px,2.6cqw,13px)}
  .bx-nav{height:7%}
  .bx-title{top:14%;width:80%;height:24%}
  .bx-btn{top:40%;width:42%;height:8%}
  .bx-art{left:4%;top:54%}
  .wf-stage.apart .wf-tilt{transform:rotateX(50deg) rotateZ(-20deg) scale(.6)}
  .wf dl{grid-template-columns:minmax(0,1fr)}
  .motion-bar{grid-template-columns:minmax(0,1fr)}
  .motion-list{grid-template-columns:minmax(0,1fr)}
  .process{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--line-strong);margin-left:4px}
  .process li{padding:0 0 34px 26px}
  .process li::before{left:-5px;top:8px}
  .process-no{font-size:2rem;margin-bottom:8px}
  .contact{grid-template-columns:minmax(0,1fr);background:radial-gradient(100% 30% at 50% 16%,#1D2120 0,rgba(29,33,32,0) 76%);padding-top:40px}
  .contact-stage{height:clamp(270px,42svh,460px)}
  .foot-top{grid-template-columns:auto minmax(0,1fr);gap:28px clamp(40px,12vw,120px)}
  .foot-brand{grid-column:1/-1}
  .social{flex-wrap:wrap}
}
/* Short phones: the pinned hero must still fit, buttons included. */
@media (max-width:899px) and (max-height:760px){
  .pin .lede{display:none}
  .pin .hero h1{font-size:clamp(2rem,8.6vw,3rem);margin-bottom:18px}
  .pin .scroll-hint{bottom:8px}
}
@media (max-width:640px){
  .foot-big{font-size:clamp(2.6rem,15.4vw,6rem);white-space:normal}
  .foot-big span{display:block}
}
@media (max-width:480px){
  dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .tool{padding:0 14px;font-size:.86rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .card-visual{--sep:0!important}
}
@media (forced-colors:active){.btn,.tool{border:1px solid}}