/*
Theme Name: Greenset
Theme URI: https://greenset.ai
Author: Greenset
Description: greenset.ai v4.1.3. A corridor of real ads, run by one terminal, lit by one lamp.
Version: 4.1.3
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: greenset
*/
@font-face{font-family:'JetBrains Mono fallback';font-style:normal;src:local('Menlo Regular'),local('Menlo-Regular');size-adjust:99.7%;ascent-override:102.3%;descent-override:30.1%;line-gap-override:0%}@font-face{font-family:'JetBrains Mono fallback 2';font-style:normal;src:local('Courier New'),local('DejaVu Sans Mono'),local('Liberation Mono'),local('Consolas');size-adjust:99.9%;ascent-override:102.1%;descent-override:30.0%;line-gap-override:0%}@font-face{font-family:'Big Shoulders Display fallback';font-style:normal;src:local('Impact'),local('Haettenschweiler'),local('Arial Narrow Bold'),local('Arial Narrow'),local('Roboto Condensed');size-adjust:95.0%;ascent-override:103.6%;descent-override:22.4%;line-gap-override:0%}@font-face{font-family:'Big Shoulders Display';src:url(assets/fonts/BigShouldersDisplay-Black.woff2) format('woff2');font-weight:900;font-display:swap}@font-face{font-family:'JetBrains Mono';src:url(assets/fonts/JetBrainsMono-Regular.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'JetBrains Mono';src:url(assets/fonts/JetBrainsMono-Bold.woff2) format('woff2');font-weight:700;font-display:swap}:root{--g0:#15130f;--g1:#15130f;--g2:#201d17;--g3:#2a261f;--g4:#332e25;--well:#0e0d0a;--line:rgba(239,230,210,.08);--line2:rgba(239,230,210,.14);--line3:rgba(239,230,210,.24);--t1:#efe6d2;--t2:#cfc4ab;--t3:#a99e86;--j100:#e9fff0;--j200:#b9ffd2;--j300:#7dffa8;--j500:#7dffa8;--j600:#2c9a57;--j800:#1c3a26;--j900:#15291c;--amber:#ffb84a;--red:#ff5b3b;--red-text:#e5432a;--dim:#44845c;--cream:#efe6d2;--ink:#15130f;--cream-kick:#2c6b44;--dot:#26221b;--depict:#efe6d2;--on-jade:#15130f;--r-xs:0.1875rem;--r-s:0.25rem;--r-m:0.625rem;--r-l:0.875rem;--r-pill:62.4375rem;--e1:inset 0 1px 0 rgba(255,236,200,.04),0 1px 0 rgba(0,0,0,.5);--e2:inset 0 1px 0 rgba(255,236,200,.06),0 2px 0.25rem rgba(0,0,0,.35),0 0.75rem 2rem -0.75rem rgba(0,0,0,.75);--e3:inset 0 1px 0 rgba(255,236,200,.07),0 0 0 1px rgba(239,230,210,.12),0 1.5rem 4rem -0.75rem rgba(0,0,0,.9);--recess:inset 0 2px 0.375rem rgba(0,0,0,.5),inset 0 0 0 1px rgba(239,230,210,.10);--glow:0 0 0 1px rgba(125,255,168,.55),0 0 1.5rem -0.25rem rgba(125,255,168,.45);--glow-word:0 0 34px rgba(125,255,168,.55);--glow-btn:0 0 34px rgba(125,255,168,.45);--glow-chosen:0 0 30px rgba(125,255,168,.15);--bevel:0 0 34px rgba(125,255,168,.45);--ring:0 0 0 2px #7dffa8,0 0 0 0.375rem rgba(125,255,168,.14);--pool:none;--detent:cubic-bezier(.2,0,0,1);--move:cubic-bezier(.4,0,.2,1);--d-press:120ms;--d-state:180ms;--d-layout:280ms;--d-bloom:640ms;--d-breathe:2.4s;--display:'Big Shoulders Display','Big Shoulders Display fallback',Impact,'Arial Narrow',sans-serif;--sans:'JetBrains Mono','JetBrains Mono fallback','JetBrains Mono fallback 2',ui-monospace,Menlo,Consolas,monospace;--mono:'JetBrains Mono','JetBrains Mono fallback','JetBrains Mono fallback 2',ui-monospace,Menlo,Consolas,monospace;--lamp-off-bg:radial-gradient(circle at 35% 30%,#4a4438,#2a261f 70%);--lamp-off-sh:inset 0 -2px 0.3125rem rgba(0,0,0,.45),0 0 0 1px rgba(239,230,210,.08);--lamp-on-bg:radial-gradient(circle at 35% 30%,#e9fff0,#7dffa8 40%,#2c9a57 80%);--lamp-on-sh:0 0 18px rgba(125,255,168,.8);--lamp-warn-bg:radial-gradient(circle at 35% 30%,#fff3d6,#ffb84a 40%,#b06b10 80%);--lamp-warn-sh:0 0 16px rgba(255,184,74,.7);--lamp-red-bg:radial-gradient(circle at 35% 30%,#ffd0c7,#ff5b3b 45%,#9a2410);--lamp-red-sh:0 0 18px rgba(255,91,59,.6);--ad-bake-bg:#f3e3c7;--ad-bake-fg:#3b2412;--ad-bake-art:#d9a35f;--ad-bake-art2:#a8662b;--ad-plumb-bg:#12324a;--ad-plumb-fg:#e8f1f7;--ad-plumb-art:#f2b134;--ad-plumb-art2:#e48b1d;--ad-coach-bg:#e9e3f5;--ad-coach-fg:#2b1d4a;--ad-coach-art:#9b7fe0;--ad-coach-art2:#5c3fb0;--ad-flor-bg:#fde4e4;--ad-flor-fg:#5a1730;--ad-flor-art:#ff8fab;--ad-flor-art2:#e0476f;--ad-tutor-bg:#e3f1df;--ad-tutor-fg:#1f3a1a;--ad-tutor-art:#7fb069;--ad-tutor-art2:#1f3a1a;--spring:cubic-bezier(.2,1.3,.36,1);--spring-t:.62s}@supports (animation-timing-function:linear(0,1)){:root{--spring:linear(0,0.0381,0.1331,0.2619,0.4056,0.5498,0.6843,0.8023,0.9003,0.9771,1.0333,1.0711,1.0929,1.1019,1.1012,1.0935,1.0814,1.0671,1.0522,1.0378,1.025,1.0141,1.0053,0.9987,0.9941,0.9912,0.9898,0.9895,0.99,0.9911,0.9925,0.994,0.9955,0.9969,0.9981,0.9991,0.9999,1.0004,1.0008,1.001,1.0011,1.0011,1.001,1.0008,1)}}/* The website's shared components (buttons, panels, lamps, tags, headings, focus, screen-reader text).
   Until theme 2.5.1 they were taken from the console's SHELL_CSS at build time (kit_layer.py). From 3.0.0 (DESIGN-CONTRACT
   Amendment 3.0.0-A) the website has its own kit: this file is the website's copy, painted only through the variables
   brand/website-tokens.json defines. Taken from the console on 2026-10-17, then changed here. */
*, *::before, *::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html, body{margin:0;min-height:100%}
body{background:var(--g0) radial-gradient(var(--dot) 1px,transparent 1px) 0 0/14px 14px;color:var(--t2);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
::selection{background:var(--j300);color:var(--on-jade)}
button, input, select, textarea{font:inherit;color:inherit}
a{color:var(--j300)}
:focus-visible{outline:2px solid var(--j300);outline-offset:2px}
.gs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gs-skip{position:fixed;top:12px;left:12px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-s);background:var(--j500);color:var(--on-jade);box-shadow:var(--bevel);font:700 .875rem/1.2 var(--sans);text-decoration:none;opacity:0;pointer-events:none}
.gs-skip:focus{opacity:1;pointer-events:auto}
.num, .gs-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
svg.gs-i{flex:none}
.gs-kick{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--j300);font:700 .75rem/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.gs-display{margin:0 0 16px;color:var(--t1);font:900 2.75rem/.9 var(--display);letter-spacing:.005em;text-transform:uppercase;max-width:24ch;text-wrap:balance}
.gs-display em{font-style:normal;color:var(--j300);text-shadow:var(--glow-word)}
.gs-display .nb{display:inline-block}
.gs-lead{margin:0 0 24px;max-width:58ch;color:var(--t2);font-size:.9375rem;line-height:1.6;text-wrap:pretty}
.gs-h2{margin:0;color:var(--t1);font:900 1.75rem/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.gs-h3{margin:0;color:var(--t1);font:900 1.375rem/1.05 var(--display);letter-spacing:.01em;text-transform:uppercase}
.gs-sub{color:var(--t3);font-size:.875rem;line-height:1.45}
.gs-note{margin:0;color:var(--t3);font:400 .875rem/1.45 var(--sans)}
.gs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-width:100%;padding:0 20px;border:0;border-radius:var(--r-s);background:var(--g3);color:var(--t1);box-shadow:var(--e1),inset 0 0 0 1px var(--line2);font:700 .875rem/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:normal;overflow-wrap:break-word;text-align:center;text-decoration:none;transition:transform var(--d-press) var(--move),box-shadow var(--d-press) var(--move),background-color var(--d-press) var(--move),color var(--d-press) var(--move)}
.gs-btn:hover:not(:disabled){background:var(--g4)}
.gs-btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.gs-btn svg{flex:none}
.gs-btn-primary{background:var(--j500);color:var(--on-jade);box-shadow:var(--glow-btn)}
.gs-btn-primary:hover:not(:disabled){background:var(--j200);box-shadow:var(--glow-btn),0 0 0 4px rgba(125,255,168,.14)}
/* The large button carries a lamp in a dark well at its left edge (the F1 button, mockups 07 and 08). */
.gs-btn-primary.gs-btn-lg{padding-left:6px}
.gs-btn-primary.gs-btn-lg::before{content:"";flex:none;width:36px;height:36px;border-radius:var(--r-xs);background:radial-gradient(circle,var(--j300) 0 6px,var(--j600) 7px,transparent 8px),var(--g0);box-shadow:inset 0 0 0 1px var(--line)}
.gs-btn-second{background:var(--g3);color:var(--t1);box-shadow:var(--e1),inset 0 0 0 1px var(--line2)}
.gs-btn-second:hover:not(:disabled){background:var(--g4);box-shadow:var(--e1),inset 0 0 0 1px var(--line3)}
.gs-btn-sm{min-height:44px;padding:0 16px}
.gs-btn-lg{font-size:1rem}
.gs-panel{background:var(--g2);border-radius:var(--r-m);box-shadow:var(--e1),inset 0 0 0 1px var(--line)}
.gs-raised{background:var(--g3);border-radius:var(--r-m);box-shadow:var(--e2),inset 0 0 0 1px var(--line2)}
.gs-well{background:var(--well);border-radius:var(--r-m);box-shadow:var(--recess)}
.gs-stage{position:relative;background:radial-gradient(70% 60% at 50% 100%,rgba(239,230,210,.08),rgba(239,230,210,0) 70%),var(--well);border-radius:var(--r-l);box-shadow:var(--recess)}
.gs-iw{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-s);background:var(--g4);color:var(--j300)}
.gs-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--r-xs);background:var(--g4);color:var(--t2);font:700 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.gs-tag-j{background:var(--j800);color:var(--j200)}
.gs-tag-n{background:var(--g4);color:var(--t2)}
.gs-lamp{--s:14px;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:var(--r-pill);background:var(--lamp-off-bg);box-shadow:var(--lamp-off-sh)}
.gs-lamp.is-on{background:var(--lamp-on-bg);box-shadow:var(--lamp-on-sh)}
/* A waiting lamp is amber (Amendment 3.0.0-A: amber means one thing, a lamp that is waiting). */
.gs-lamp.is-next{background:var(--lamp-warn-bg);box-shadow:var(--lamp-warn-sh)}
.gs-lamp.is-next::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-pill);border:2px solid var(--amber);opacity:.85;animation:gs-breathe var(--d-breathe) var(--move) 2}
.gs-lamp-12{--s:12px}
.gs-lamp-14{--s:14px}
.gs-lamp-18{--s:18px}
.gs-lamp-28{--s:28px}
.gs-lamp-34{--s:34px}
.gs-lamp-46{--s:46px}
.gs-lamp-28.is-next::after, .gs-lamp-34.is-next::after, .gs-lamp-46.is-next::after{inset:-5px}
@keyframes gs-breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.3;transform:scale(1.06)}}
@keyframes gs-bloom{0%{transform:scale(.6);filter:brightness(.6)}55%{filter:brightness(1.35)}100%{transform:scale(1);filter:brightness(1)}}
@media (min-width:960px){
.gs-display{font-size:3.75rem}
.gs-lead{font-size:1rem}
}
@media (min-width:1240px){
.gs-display{font-size:5.25rem}
}
@media (max-width:719px){
.gs-btn{white-space:normal;text-align:center;line-height:1.25;padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.gs-lamp.is-next::after{opacity:.85}
}
/* greenset.ai 4.1 — a corridor of real ads, run by one terminal, lit by one lamp. Painted only from brand/website-tokens.json. */
:root{--bar:64px;--pad:clamp(16px,4vw,48px);--max:max(82.5rem,72vw);--ease:cubic-bezier(.16,1,.3,1);--flat:cubic-bezier(.22,1,.36,1)}
html{font-size:clamp(16px,calc(.55vw + 8px),30px);scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px)}
html,body{overflow-x:clip}
body{min-height:100vh}
img,video{display:block;max-width:100%}
.wrap{width:min(100%,calc(var(--max) + 2 * var(--pad)));margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(48px,7vh,80px)}
.fine{margin:0;color:var(--t3);font:400 .75rem/1.5 var(--mono)}
.gs-display{max-width:none}

/* motion */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}
@keyframes kFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes kMq{to{transform:translate3d(calc(-1 * var(--p,50%)),0,0)}}
@keyframes kMqR{from{transform:translate3d(calc(-1 * var(--p,50%)),0,0)}to{transform:translate3d(0,0,0)}}
@keyframes kGlow{0%,100%{opacity:.55;transform:translate3d(-50%,0,0)}50%{opacity:.95;transform:translate3d(-50%,-30px,0)}}
@keyframes kFloatA{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-9px)}}
@keyframes kFloatB{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(8px)}}
@keyframes kFloatC{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-7px)}}
@keyframes kCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes kPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* bar */
.bar{position:sticky;top:0;z-index:60;height:var(--bar);display:flex;align-items:center;gap:8px;padding-inline:max(var(--pad),calc((100% - var(--max)) / 2));background:rgba(21,19,15,.72);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);box-shadow:inset 0 -1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--j300);text-decoration:none}
.brand b{font:900 1.75rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.brand svg{flex:none;width:28px;height:28px}
.bar .brand svg{width:36px;height:36px}
.nav{display:flex;align-items:center;gap:2px;margin-left:clamp(12px,3vw,40px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-s);color:var(--t2);font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:color .12s var(--ease),background-color .12s var(--ease)}
.nav a:hover{color:var(--t1);background:var(--g3)}
.bar-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.bar-acts .gs-btn{min-height:44px;padding-inline:14px;font-size:.75rem;white-space:nowrap}
.menu{display:none}
.menu summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;border-radius:var(--r-s);color:var(--t1);cursor:pointer;list-style:none;box-shadow:inset 0 0 0 1px var(--line)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block;width:18px;height:2px;background:currentColor;transition:transform .12s var(--ease)}
.menu[open] summary i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu[open] summary i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu-p{position:absolute;left:0;right:0;top:100%;display:grid;padding:4px var(--pad) 12px;background:var(--g0);box-shadow:inset 0 -1px 0 var(--line)}
.menu-p a{display:flex;align-items:center;min-height:48px;color:var(--t1);font:400 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 -1px 0 var(--line)}
.menu-p a:last-child{box-shadow:none}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,6vh,72px) var(--pad) 0;min-height:calc(100vh - var(--bar))}
.hero::before{content:"";position:absolute;left:50%;top:6%;width:min(90vw,60rem);height:34rem;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(125,255,168,.13),rgba(125,255,168,0) 100%);animation:kGlow 9s ease-in-out infinite;transform:translate3d(-50%,0,0)}
.js .hero-t>*{animation:kFadeUp .9s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
.h1{margin:clamp(14px,2.4vh,26px) 0 0;color:var(--t1);font:900 clamp(4.3rem,13.3vw,12rem)/.84 var(--display);letter-spacing:.002em;text-transform:uppercase}
.h1 span{display:block}
.h1 em{font-style:normal;color:var(--j300);text-shadow:var(--glow-word)}
/* a word that switches on when it arrives, on the kit's lamp curve (gs-bloom) */
@keyframes kLit{0%{color:#3d392e;text-shadow:none;filter:brightness(.6)}55%{color:var(--j300);text-shadow:var(--glow-word);filter:brightness(1.35)}100%{color:var(--j300);text-shadow:var(--glow-word);filter:brightness(1)}}
.js .rv em,.js .close-f em{color:#3d392e;text-shadow:none}
.js .rv.in em,.js .rv.in .gs-display em{animation:kLit .9s var(--ease) .32s both}
/* the pointer's light reaches the type: a green copy of the words, shown through a soft circle */
.lit{position:relative}
.lit::after{content:attr(data-t);position:absolute;inset:-2rem;padding:2rem;color:var(--j300);text-shadow:var(--glow-word);opacity:var(--la,0);pointer-events:none;transition:opacity .2s linear;-webkit-mask-image:radial-gradient(circle 13rem at var(--lx,50%) var(--ly,50%),#000 0,rgba(0,0,0,.6) 40%,transparent 100%);mask-image:radial-gradient(circle 13rem at var(--lx,50%) var(--ly,50%),#000 0,rgba(0,0,0,.6) 40%,transparent 100%)}
.lede{margin:clamp(14px,2.4vh,24px) auto 0;max-width:60ch;color:var(--t1);font:400 clamp(.875rem,1.2vw,1rem)/1.5 var(--mono);text-wrap:balance}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:clamp(16px,2.6vh,28px)}
.cta .gs-btn-primary{min-height:52px;padding-right:22px}
.btn-0{margin-left:12px;padding:4px 8px;border-radius:var(--r-xs);background:rgba(10,30,18,.14);font:700 .875rem/1 var(--mono);letter-spacing:.02em}
.copy{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 14px 0 16px;border:0;border-radius:var(--r-s);background:var(--well);box-shadow:var(--recess);color:var(--t1);font:400 .875rem/1 var(--mono);cursor:pointer;transition:box-shadow .12s var(--ease)}
.copy:hover{box-shadow:var(--recess),0 0 0 1px var(--line3)}
.copy i{font-style:normal;color:var(--j300)}
.copy small{color:var(--t3);font:700 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.copy.is-done small{color:var(--j300)}

/* the corridor */
.cor{position:absolute;left:0;right:0;top:0;height:calc(100vh - var(--bar));min-height:40rem;overflow:hidden;perspective:62vw;perspective-origin:50% 42%;z-index:-2;pointer-events:none}
.wall{position:absolute;top:-6%;height:112%;width:42vw;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:1.4vh;will-change:transform}
.wall-l{left:0;transform-origin:0 50%;transform:translate3d(calc(var(--hp,0) * -5vw),0,0) rotateY(calc(68deg + var(--hp,0) * 10deg))}
.wall-r{right:0;transform-origin:100% 50%;transform:translate3d(calc(var(--hp,0) * 5vw),0,0) rotateY(calc(-68deg - var(--hp,0) * 10deg))}
.lane{overflow:hidden;min-height:0}
.lane-t{display:flex;width:max-content;height:100%;will-change:transform}
.wall-l .lane-t{animation:kMq var(--s,46s) linear infinite}
.wall-r .lane-t{animation:kMqR var(--s,46s) linear infinite}
.wall .lane-t{animation-delay:calc(var(--s,46s) * -.5)}
.lane-t>.t{position:relative;display:block;flex:none;height:100%;margin-right:1.2vh;aspect-ratio:var(--ar,1);overflow:hidden;border-radius:.45rem}
.t img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease)}
/* Film that only decorates reaches the screen through a canvas: the video is one pixel wide and decodes it (site.js, FINDINGS 76) */
.t video,.w.blit video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.t canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.t canvas.on{opacity:1}
.w canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .7s var(--ease)}
.t canvas{pointer-events:none}
.w:hover canvas{transform:scale(1.025)}
.reel.is-on canvas{display:none}
/* the end of a wall is lost in the dark: a picture comes in out of it, never past a cut line */
.wall::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(21,19,15,0) 46%,var(--g0) 92%)}
.wall-r::after{background:linear-gradient(to left,rgba(21,19,15,0) 46%,var(--g0) 92%)}
/* a picture shows once it is decoded; with no script, or if the script stops, it simply shows */
@keyframes kShow{to{opacity:1}}
.js .lane-t img:not(.ok),.js .w img[loading="lazy"]:not(.ok){opacity:0;animation:kShow .01s linear 6s forwards}
.w img{transition:transform .7s var(--ease),opacity .6s var(--ease)}
.cor-fade{position:absolute;inset:0;background:radial-gradient(47% 58% at 50% 42%,var(--g0) 60%,rgba(21,19,15,0) 100%),linear-gradient(to bottom,rgba(21,19,15,0) 74%,var(--g0) 100%)}
.cor-dots{position:absolute;inset:0;background:radial-gradient(var(--dot) 1px,transparent 1px) 0 0/14px 14px;-webkit-mask:radial-gradient(44% 54% at 50% 42%,#000 60%,transparent 100%);mask:radial-gradient(44% 54% at 50% 42%,#000 60%,transparent 100%)}

/* terminal */
.term{width:100%;min-width:0;max-width:100%;overflow:hidden;border-radius:var(--r-l);background:var(--well);box-shadow:var(--e3);text-align:left}
.term-bar{display:flex;align-items:center;gap:7px;height:44px;padding:0 14px;box-shadow:inset 0 -1px 0 var(--line)}
.term-bar .t{margin-left:8px;color:var(--t3);font:400 .75rem/1 var(--mono);letter-spacing:.04em}
.term pre{margin:0;padding:clamp(14px,1.6vw,20px) clamp(14px,1.8vw,22px);overflow-x:auto;color:var(--t1);font:400 clamp(.75rem,.95vw,.875rem)/1.7 var(--mono)}
.term code{display:block;font:inherit;white-space:pre}
.term .l{display:block;min-height:1.7em}
.term .p{color:var(--j300);user-select:none}
.term .ok{color:var(--j300)}
.term .dim{color:var(--t3)}
.term .wait{color:var(--amber)}
.term .caret{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:text-bottom;background:var(--j300);animation:kCaret 1s step-end infinite}
.js .term.is-ready .l.hide{visibility:hidden}
.hero-term{width:min(100%,50rem);margin-top:clamp(28px,5vh,56px);transform:rotateX(9deg) scale(.955);transform-origin:50% 0;transition:transform .95s var(--flat);transform-style:preserve-3d}
.hero-term.is-flat{transform:none}
.hero-persp{width:100%;display:flex;justify-content:center;perspective:75rem}
.hero-term{position:relative}
.term-copy{position:absolute;right:6px;top:4px;min-height:36px;padding:0 10px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--t3);font:400 .75rem/1 var(--mono);cursor:pointer}
.term-copy small{margin-left:8px;color:var(--t2);font:700 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.term-copy:hover{background:var(--g3);color:var(--t1)}
.term-copy.is-done small{color:var(--j300)}

/* the wall's dots answer the pointer: site.js draws only the lit ones, over the stylesheet's own grid */
.field{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none}
.field.on{display:block}

/* credits: one quiet bar, every name, and what each one was only when asked (10-31, the operator on the first version: "this is way to in your face") */
.credits{padding-block:clamp(18px,3.4vh,32px);overflow:clip}
.cr-lab{min-height:1.4em;margin:0 auto clamp(10px,1.8vh,16px);padding-inline:var(--pad);color:var(--t3);font:400 .75rem/1.4 var(--mono);text-align:center}
.mq{display:flex;overflow:hidden;-webkit-mask:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.mq-t{display:flex;flex:none;align-items:center;width:max-content;margin:0;padding:0;list-style:none;animation:kMq var(--s,64s) linear infinite;will-change:transform}
.mq:hover .mq-t,.mq:focus-within .mq-t{animation-play-state:paused}
.cr{flex:none;display:flex;align-items:center;height:2.75rem;padding-inline:clamp(16px,1.9vw,28px)}
.cr img{display:block;height:var(--h);width:auto;opacity:.6;transition:opacity .2s var(--ease)}
.cr.flat img{filter:brightness(0) invert(1)}
.cr.gray img{filter:grayscale(1) brightness(1.15)}
.cr b{color:var(--t3);font:900 1.0625rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:color .2s var(--ease)}
.cr:hover img{opacity:1}
.cr:hover b{color:var(--t1)}

/* lit statement */
.st{position:relative;height:84vh}
.st-pin{position:relative;height:100%;display:grid;place-items:center;overflow:clip}
.st-t{position:relative;z-index:2;margin:0;padding-inline:var(--pad);color:var(--t1);font:900 clamp(3.5rem,11.5vw,10.5rem)/.88 var(--display);letter-spacing:.002em;text-align:center;text-transform:uppercase}
.st-t .ln{display:block}
.st-t .ln>span{display:inline-block;opacity:var(--o,.13);transition:opacity .25s linear}
.st-t .ln:last-child>span{color:var(--j300);text-shadow:var(--glow-word)}
.flo{position:absolute;z-index:1;width:clamp(7rem,12vw,12rem);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--e3);animation:kFloatA 7s ease-in-out infinite}
.flo.b{animation-name:kFloatB;animation-duration:8s}
.flo.c{animation-name:kFloatC;animation-duration:7.5s}
.flo img{width:100%;height:auto}

/* the work */
.work-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin-top:clamp(20px,3.4vh,32px)}
.w{position:relative;display:block;margin:0;padding:0;border:0;overflow:hidden;border-radius:var(--r-m);background:var(--g2);cursor:zoom-in;color:inherit;font:inherit;text-align:left}
.w img,.w video{width:100%;height:100%;object-fit:cover}.w video{transition:transform .7s var(--ease)}
.w:hover img,.w:hover video{transform:scale(1.025)}
.w figcaption,.w .cap{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 8px;border-radius:var(--r-xs);background:var(--g0);color:var(--t1);font:400 .75rem/1.3 var(--mono)}
.w.s4{grid-column:span 4}.w.s3{grid-column:span 3}.w.s5{grid-column:span 5}.w.s6{grid-column:span 6}.w.s8{grid-column:span 8}.w.s12{grid-column:span 12}
.reel{grid-column:span 8;grid-row:span 2;aspect-ratio:auto;min-height:100%;cursor:default}
.reel video{position:absolute;inset:0}
.reel-b{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px 0 8px;border:0;border-radius:var(--r-s);background:var(--j500);box-shadow:var(--glow-btn);color:var(--on-jade);font:700 .875rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.reel-b::before{content:"";width:0;height:0;margin:0 6px 0 14px;border-left:16px solid var(--on-jade);border-top:10px solid transparent;border-bottom:10px solid transparent}
.reel.is-on .reel-b{display:none}

/* pinned flow */
.browser{width:100%;overflow:hidden;border-radius:var(--r-l);background:var(--g2);box-shadow:var(--e3)}
.browser-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;box-shadow:inset 0 -1px 0 var(--line)}
.browser-bar span{margin-left:8px;color:var(--t3);font:400 .75rem/1 var(--mono)}
.ex-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
.ex-g div{overflow:hidden;border-radius:var(--r-s)}
.ex-g img{display:block;width:100%;height:auto}
/* How it works. With no script, on a short screen or with reduced motion: three steps, one under the other. */
.flow{position:relative;padding-block:32px}
.flow-pin{width:min(100%,calc(var(--max) + 2 * var(--pad)));margin:0 auto;padding-inline:var(--pad)}
.big,.flow-t,.rail{display:none}
.flow-r{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;max-width:56rem}
.stage{min-width:0}
.stage::before{content:attr(data-big);display:block;margin-bottom:6px;color:var(--t1);font:900 clamp(3.5rem,8vw,6rem)/.9 var(--display)}
.stage::after{content:attr(data-sub);display:block;margin-top:10px;color:var(--t2);font:400 .875rem/1.5 var(--mono)}
/* With script and room the step follows the scroll: it holds, then the word rolls out as the next rolls in and the panels pass each other (site.js sets the numbers). */
@media (min-height:560px) and (prefers-reduced-motion:no-preference){
.js .flow{--big:clamp(5.5rem,14vw,12rem);height:300vh;padding-block:0}
.js .flow-pin{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(20px,4vw,64px)}
.js .big{display:block;position:relative;height:var(--big);margin:0 0 10px;clip-path:inset(0 -100vw)}
.js .big b{position:absolute;left:0;top:0;color:var(--t1);font:900 var(--big)/1 var(--display);letter-spacing:.002em;white-space:nowrap;will-change:transform}
.js .big b:nth-child(2){transform:translate3d(0,100%,0)}
.js .big b:nth-child(3){transform:translate3d(0,200%,0)}
.js .flow-t{display:block;position:relative;min-height:5.5rem;max-width:34ch}
.js .flow-t p{position:absolute;inset:0 auto auto 0;margin:0;color:var(--t2);font:400 clamp(.875rem,1.2vw,1rem)/1.5 var(--mono);will-change:transform,opacity}
.js .flow-t p:nth-child(n+2){opacity:0}
.js .rail{display:flex;position:relative;justify-content:space-between;margin-top:18px;max-width:22rem}
.js .rail::before,.js .rail::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--line2)}
.js .rail::after{right:auto;width:calc(var(--p,0) * 100%);background:var(--j300)}
.js .rail i{position:relative;z-index:1}
.js .flow-r{display:block;position:relative;height:min(72vh,44rem);max-width:none}
.js .stage{position:absolute;inset:0;display:flex;align-items:center;will-change:transform,opacity}
.js .stage:nth-child(n+2){opacity:0;visibility:hidden}
.js .stage::before,.js .stage::after{content:none}
}
/* The same scene on a phone: the word and its line on top, the panel under them, all inside one screen. */
@media (max-width:899px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
.js .flow{--big:clamp(3.75rem,min(27vw,11svh),7rem);height:260vh;height:260svh}
.js .flow-pin{display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,2svh,18px);height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));padding-block:clamp(12px,3svh,26px) clamp(10px,2svh,20px)}
.js .flow-l{flex:none}
.js .big{margin:2px 0 6px}
.js .flow-t{min-height:4.6em;max-width:none}
.js .flow-t p{right:0;font-size:.875rem}
.js .rail{margin-top:8px;max-width:none}
.js .flow-r{flex:1;height:auto;min-height:0}
.js .stage .term,.js .stage .browser{width:100%}
}
/* a tall phone shows four ads you can read, a short one six small ones */
@media (max-width:599px) and (min-height:701px) and (prefers-reduced-motion:no-preference){
.js .flow-r .ex-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.js .flow-r .ex-g div:nth-child(n+5){display:none}
}
@media (max-width:899px) and (min-height:560px) and (max-height:700px) and (prefers-reduced-motion:no-preference){
.js .stage:nth-child(3) .term .l:nth-child(3),.js .stage:nth-child(3) .term .l:nth-child(7){display:none}
}
.stage-c{width:100%;min-width:0}
.stage-n{position:relative;z-index:1;margin:12px 0 0;text-align:center}

/* doors */
.doors>*{min-width:0}
.doors{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(16px,3vw,40px);align-items:start;margin-top:clamp(18px,3vh,28px)}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{min-height:44px;padding:0 18px;border:0;border-radius:var(--r-s);background:var(--g2);box-shadow:inset 0 0 0 1px var(--line);color:var(--t2);font:700 .875rem/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:background-color .12s var(--ease),color .12s var(--ease)}
.tabs button:hover{background:var(--g3);color:var(--t1)}
.tabs button[aria-selected=true]{background:var(--j500);box-shadow:none;color:var(--on-jade)}
.door{position:relative;min-width:0}
.door .term,.code-w .term{box-shadow:inset 0 1px 0 rgba(255,236,200,.07),0 0 0 1px rgba(239,230,210,.12)}
.door[hidden]{display:none}
.door .copy-c,.code-w .copy-c{position:absolute;right:0;top:0;height:44px;padding:0 14px;border:0;border-radius:0 var(--r-l) 0 0;background:transparent;box-shadow:inset 1px 0 0 var(--line),inset 0 -1px 0 var(--line);color:var(--t2);font:700 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .12s var(--ease),color .12s var(--ease)}
.door .copy-c:hover,.code-w .copy-c:hover{background:var(--g3);color:var(--t1)}
.door .copy-c.is-done{color:var(--j300)}
.adds{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.adds button{min-height:44px;padding:0 14px;border:0;border-radius:var(--r-s);background:var(--g3);box-shadow:var(--e1),inset 0 0 0 1px var(--line2);color:var(--t1);font:700 .75rem/1 var(--mono);cursor:pointer}
.adds button.is-done{color:var(--j300)}
.stats{display:grid;gap:10px;margin:0}
.stats div{display:flex;align-items:baseline;gap:12px;padding:14px 18px;border-radius:var(--r-m);background:var(--g2);box-shadow:var(--e1),inset 0 0 0 1px var(--line)}
.stats dt{color:var(--t1);font:900 clamp(2rem,3.4vw,3rem)/1 var(--display)}
.stats dd{margin:0;color:var(--t2);font:400 .875rem/1.4 var(--mono)}
.docs-a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:12px}
.door-l{display:inline-flex;align-items:center;min-height:44px;color:var(--t2);font:700 .75rem/1 var(--mono);letter-spacing:.06em;text-decoration-color:var(--line3)}
.door-l:hover{color:var(--j300)}

/* keys: physical, one lit, set into a well. A key stays down while it is the one chosen. */
.keys{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(4px,.5vw,8px);padding:clamp(4px,.5vw,8px);border-radius:var(--r-l);background:var(--well);box-shadow:var(--recess)}
.keys button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 clamp(16px,2vw,30px) 0 clamp(12px,1.5vw,20px);border:0;border-radius:var(--r-m);background:var(--g3);box-shadow:inset 0 1px 0 rgba(255,236,200,.1),0 3px 0 #000,0 5px 10px rgba(0,0,0,.5);color:var(--t2);font:900 clamp(1.25rem,1.9vw,1.75rem)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:transform var(--spring-t) var(--spring),box-shadow .12s linear,background-color .12s linear,color .18s var(--ease)}
.keys button:hover{color:var(--t1);background:var(--g4)}
.keys button[aria-checked=true]{transform:translate3d(0,3px,0);background:var(--g2);box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 #000;color:var(--j300);text-shadow:var(--glow-word)}
.keys button:focus-visible{outline:2px solid var(--j300);outline-offset:3px}

/* the wall: press what you sell. The tiles are plain images and buttons at rest; site.js's canvas exists for the crossing only. */
.sw-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px clamp(16px,3vw,40px);margin-bottom:clamp(14px,2.4vh,24px)}
.sw-top .gs-display{margin:0}
.sw-stage{position:relative;padding-inline:clamp(8px,1vw,16px);background:var(--g0)}
.sw-set{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
.sw-set .w{width:100%;aspect-ratio:1}
.sw-set .sw-big{grid-column:span 2;grid-row:span 2}
.sw-n{grid-column:1/-1;margin:clamp(16px,3vh,28px) 0 2px;color:var(--t1);font:900 clamp(1.75rem,3vw,2.5rem)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.js .sw-n{display:none}
.js .sw-stage{display:grid}
.js .sw-set{grid-area:1/1/2/2;visibility:hidden}
.js .sw-set.is-on{visibility:visible}
.js .sw-set.is-fade{animation:kFade .3s var(--ease)}
.js .sw-stage.is-run .sw-set{visibility:hidden}
@keyframes kFade{from{opacity:0}to{opacity:1}}
html:not(.js) .sw-keys{display:none}
.sw-gl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:none}
.sw-stage.is-run .sw-gl{display:block;opacity:1}
.sw-stage.is-out .sw-gl{display:block;opacity:0;transition:opacity .16s linear}
.sw-note{margin:14px auto 0;padding-inline:var(--pad);text-align:center}
.sw-note b{color:var(--t1);font-weight:700}
.sw-note a{color:inherit}
.work-g,.stats,.wall4{background:var(--g0)}

/* pricing: a price you can hold. Paper is the one cream surface on the page; it comes out of a slot in the wall and tears off. */
.pr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,88px);align-items:start}
.pr-l{display:grid;gap:clamp(16px,2.8vh,28px);justify-items:start;min-width:0}
.pr-l .gs-display{margin:0}
.pr-bud{width:100%;max-width:36rem}
.pr-bud label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--t2);font:400 .875rem/1.4 var(--mono)}
.pr-bud output{color:var(--t1);font:900 clamp(2.5rem,4.4vw,4rem)/1 var(--display);font-variant-numeric:tabular-nums}
.pr-bud input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:48px;margin:4px 0 0;padding:0;background:transparent;cursor:pointer;--v:0%}
.pr-bud input:focus-visible{outline:2px solid var(--j300);outline-offset:3px;border-radius:var(--r-s)}
.pr-bud input::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:linear-gradient(to right,var(--j300) var(--v),var(--well) var(--v));box-shadow:var(--recess)}
.pr-bud input::-moz-range-track{height:12px;border-radius:6px;background:linear-gradient(to right,var(--j300) var(--v),var(--well) var(--v));box-shadow:var(--recess)}
.pr-bud input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:44px;margin-top:-16px;border-radius:var(--r-s);background:linear-gradient(to right,transparent 9px,var(--line3) 9px 10px,transparent 10px 13px,var(--line3) 13px 14px,transparent 14px 17px,var(--line3) 17px 18px,transparent 18px),var(--g4);box-shadow:inset 0 1px 0 rgba(255,236,200,.14),0 3px 0 #000,0 6px 12px rgba(0,0,0,.6)}
.pr-bud input::-moz-range-thumb{width:28px;height:44px;border:0;border-radius:var(--r-s);background:linear-gradient(to right,transparent 9px,var(--line3) 9px 10px,transparent 10px 13px,var(--line3) 13px 14px,transparent 14px 17px,var(--line3) 17px 18px,transparent 18px),var(--g4);box-shadow:inset 0 1px 0 rgba(255,236,200,.14),0 3px 0 #000,0 6px 12px rgba(0,0,0,.6)}
html:not(.js) .pr-keys,html:not(.js) .pr-bud{display:none}
.pr-r{display:grid;justify-items:center;min-width:0}
.slot{position:relative;z-index:2;display:flex;align-items:center;width:min(100%,36rem);height:42px;padding-inline:14px;border-radius:var(--r-m);background:var(--g3);box-shadow:var(--e2),inset 0 0 0 1px var(--line2)}
.slot::after{content:"";position:absolute;left:5%;right:5%;bottom:5px;height:5px;border-radius:3px;background:#000;box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,236,200,.1)}
.rc-feed{display:grid;gap:18px;width:min(92%,33rem);margin-top:-5px;clip-path:inset(0 -5rem -100vh -5rem);filter:drop-shadow(0 1.25rem 2rem rgba(0,0,0,.6))}
.rc{--ink:var(--g0);min-width:0;color:var(--ink)}
.rc-in{--z:9px;padding:clamp(18px,2vw,28px) clamp(16px,2vw,28px) calc(clamp(16px,2vw,24px) + var(--z));background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,0) 1.5rem),var(--t1);font:400 .875rem/1.45 var(--mono);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) bottom/calc(2 * var(--z)) var(--z) repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) bottom/calc(2 * var(--z)) var(--z) repeat-x}
.rc-top{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.rc-top b{font:900 1.5rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.rc-l{display:grid;gap:10px;margin:0;padding:12px 0;border-block:1px dashed rgba(21,19,15,.42)}
.rc-l div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.rc-l dt{min-width:0}
.rc-l small{display:block;margin-top:2px;font-size:.75rem;opacity:.74}
.rc-l dd{flex:none;margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.rc-t{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 12px;margin:0;padding:14px 0 12px;border-bottom:1px dashed rgba(21,19,15,.42)}
.rc-t span{padding-bottom:.5em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.rc-t b{font:900 clamp(3.75rem,7.2vw,6.5rem)/.9 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.rc-f{margin:12px 0 0;padding:0;list-style:none}
.rc-f li{position:relative;padding-left:1.25em}
.rc-f li::before{content:"";position:absolute;left:.2em;top:.55em;width:.42em;height:.42em;border-radius:50%;background:currentColor}
.rc-n{margin:12px 0 0;font-size:.75rem;line-height:1.45;opacity:.82}
.rc-n a{color:inherit}
/* the plans not on show leave the page entirely: no hidden text in the layout */
.js .rc{grid-area:1/1/2/2;display:none}
.js .rc.is-on,.js .rc.is-tear{display:block}
.js .rc-feed.is-wait .rc{transform:translate3d(0,-102%,0)}
.js .rc.is-print{animation:kFeed var(--pt,.95s) steps(24) both}
.js .rc.is-tear{z-index:2;animation:kTear .42s cubic-bezier(.5,0,.9,.6) both}
@keyframes kFeed{from{transform:translate3d(0,-102%,0)}to{transform:none}}
@keyframes kTear{to{transform:translate3d(.5rem,4rem,0) rotate(2.6deg);opacity:0}}

/* Spring law. site.js runs a real damped spring on every press; whatever opens or changes state rides the same spring, baked into --spring by the builder. */
.js .gs-btn:active:not(:disabled){transform:none}
@keyframes kPop{from{transform:scale(.965);opacity:.2}}
@keyframes kDrop{from{transform:translate3d(0,-12px,0);opacity:0}}
.menu[open] .menu-p{animation:kDrop var(--spring-t) var(--spring) both}
.lb[open] img{animation:kPop var(--spring-t) var(--spring) both}
.door:not([hidden]){animation:kPop var(--spring-t) var(--spring) both}
.is-done small{display:inline-block;animation:kPop var(--spring-t) var(--spring) both}
.more>summary::before{transition:transform var(--spring-t) var(--spring)}
.menu summary i{transition:transform var(--spring-t) var(--spring)}
.tabs button{transition:transform var(--spring-t) var(--spring),background-color .12s linear,color .12s linear}

/* close */
.close-f{position:relative;overflow:hidden;padding:clamp(40px,8vh,88px) var(--pad);border-radius:var(--r-l);background:radial-gradient(60% 90% at 50% 120%,rgba(125,255,168,.2),rgba(125,255,168,0) 70%),var(--g2);box-shadow:inset 0 0 0 1px var(--line2);text-align:center}
.close-f h2{margin:0 auto;font-size:clamp(3.5rem,9vw,8rem);line-height:.86;max-width:none}

/* footer */
.foot{margin-top:clamp(32px,6vh,64px);padding-block:clamp(24px,4vh,40px);box-shadow:inset 0 1px 0 var(--line)}
.foot-g{display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:20px}
.foot h2{margin:0 0 6px;color:var(--t3);font:700 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot ul{margin:0;padding:0;list-style:none}
.foot li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--t2);font:400 .875rem/1.3 var(--mono);text-decoration:none}
.foot li a:hover{color:var(--t1)}
.foot .fine{margin-top:10px}
.soc{display:flex;flex-wrap:wrap;gap:0 20px;margin:6px 0 0}
.soc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;color:var(--t2);font:400 .875rem/1.3 var(--mono);text-decoration:none}
.soc a:hover{color:var(--t1)}

/* lightbox */
.lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,13,10,.96);color:var(--t1)}
.lb::backdrop{background:rgba(14,13,10,.96)}
.lb img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100vw - 32px);max-height:calc(100vh - 88px);object-fit:contain}
.lb .x{position:absolute;right:12px;top:12px;z-index:2;min-width:44px;min-height:44px;border:0;border-radius:var(--r-s);background:var(--g3);color:var(--t1);font:700 .875rem/1 var(--mono);cursor:pointer}
.lb p{position:absolute;left:16px;right:72px;bottom:14px;margin:0;color:var(--t2);font:400 .75rem/1.4 var(--mono);text-align:center}

/* phones and tablets */
@media (max-width:899px){
  :root{--bar:60px}
  .nav{display:none}
  .menu{display:block}
  .hero{min-height:0}
  .h1{font-size:clamp(3.2rem,19.6vw,9rem)}
  .cor{position:relative;order:3;width:100vw;height:auto;min-height:0;margin:24px calc(var(--pad) * -1) 0;perspective:none;z-index:0}
  .wall{position:static;width:100%;height:auto;transform:none!important;grid-template-rows:none;gap:8px}
  .wall-r{margin-top:8px}
  .lane{height:10.5rem}
  .lane:nth-child(n+2){display:none}
  .lane-t>.t{margin-right:8px}
  .wall::after{content:none}
  .cor-fade,.cor-dots{display:none}
  .hero-term code,.stage .term code,.pg-term code{white-space:pre-wrap;overflow-wrap:anywhere}
  .hero-persp{order:4}
  .st{height:auto}
  .st-pin{position:relative;top:auto;height:auto;padding-block:48px}
  .st-t{font-size:13.2vw}
  .st-t .ln>span{opacity:1!important}
  .flo{display:none}
  .work-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w.s3,.w.s4,.w.s5,.w.s6{grid-column:span 1}
  .w.s8,.w.s12{grid-column:span 2}
  .reel{grid-column:span 2;grid-row:auto;aspect-ratio:16/9;min-height:0}
  .w.hide-s{display:none}
  .sec{padding-block:36px}
  .doors{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats div{display:block;padding:10px}
  .stats dd{font-size:.75rem}
  .sw-set{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-stage{padding-inline:var(--pad)}
  .sw-top .keys{width:100%}
  .keys button{min-height:56px;padding-inline:8px;gap:8px}
  .pr{grid-template-columns:minmax(0,1fr)}
  .pr-l .keys{width:100%}
  .rc-feed{width:94%}
  .foot-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-g>div:first-child{grid-column:span 2}
}
@media (max-width:480px){
  .bar-acts .gs-btn:not(.gs-btn-primary){display:none}
  .brand b{font-size:1.375rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .menu[open] .menu-p,.lb[open] img,.door:not([hidden]),.is-done small{animation:none}
  .keys button,.tabs button{transition:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .lane-t img,.js .w img{opacity:1!important;animation:none!important;transition:none}
  .js .rv em,.js .close-f em{color:var(--j300);text-shadow:var(--glow-word);animation:none!important}
  .lit::after{content:none}
  .js .hero-t>*{animation:none}
  .hero-term{transform:none;transition:none}
  .st{height:auto}.st-pin{position:relative;top:auto;height:auto;padding-block:64px}.st-t .ln>span{opacity:1}
  .mq{overflow-x:auto}.mq-t{animation:none}
}
/* The page is whole without its script (or if it fails: the head takes the class off after 4 s): the scroll-driven scenes stand still and read in order */
@media (hover:none){.lit::after{content:none}}
html:not(.js) .lit::after{content:none}
html:not(.js) .st{height:auto}html:not(.js) .st-pin{position:relative;top:auto;height:auto;padding-block:64px}html:not(.js) .st-t .ln>span{opacity:1}

.hero.is-off .lane-t,.mq.is-off .mq-t,.st.is-off .flo,.hero.is-off::before{animation-play-state:paused}

/* /team: one wall of four, edge to edge, eye lines level; the one under the pointer widens */
.team-h{padding-block:clamp(28px,6vh,64px) clamp(18px,3vh,32px)}
.wall4{display:flex;margin:0;padding:0;list-style:none}
.person{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.js .person.rv{transition:opacity .7s var(--ease) calc(var(--i,0) * 70ms),transform .7s var(--ease) calc(var(--i,0) * 70ms),flex-grow .7s var(--ease)}
.person{transition:flex-grow .7s var(--ease)}
.person:hover,.person:focus-within{flex-grow:1.5}
.person-i{position:relative;height:clamp(24rem,64vh,56rem);overflow:hidden;background:var(--g0)}
.person-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.person-c{display:grid;gap:4px;padding:14px clamp(10px,1.4vw,24px) 0}
.person-c b{color:var(--t1);font:900 clamp(1.625rem,2.7vw,3rem)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.person-c span{color:var(--t2);font:400 .875rem/1.4 var(--mono)}
.person-c a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--j300);font:700 .875rem/1 var(--mono)}
.person+.person .person-i::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:1px;background:var(--line)}
@media (max-width:899px){
  .wall4{flex-wrap:wrap}
  .person{flex:0 0 50%}
  .person:hover,.person:focus-within{flex-grow:0}
  .person-i{height:auto;aspect-ratio:4/5}
  .person-c{padding-bottom:18px}
  .person-c b{font-size:clamp(1.375rem,6.4vw,2.25rem)}
}

/* 404 */
.nf{padding-block:clamp(40px,10vh,104px)}
.nf-l{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none;max-width:44rem}
.nf-l a{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-m);background:var(--g2);box-shadow:var(--e1),inset 0 0 0 1px var(--line);color:var(--t1);text-decoration:none;transition:background-color .12s var(--ease)}
.nf-l a:hover{background:var(--g3)}
.nf-l b{font:900 1.625rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.nf-l span{color:var(--t2);font:400 .875rem/1.4 var(--mono)}

/* /docs */
.d-top{padding-block:clamp(28px,6vh,64px) clamp(14px,3vh,28px)}
.d-top .gs-lead{margin-bottom:0}
.d-g-w{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding-bottom:40px}
.d-nav{position:sticky;top:calc(var(--bar) + 12px);max-height:calc(100vh - var(--bar) - 24px);overflow:auto;padding-right:6px}
.d-nd>summary{list-style:none}
.d-nd>summary::-webkit-details-marker{display:none}
.d-ns{display:none}
.d-find input{width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-s);background:var(--well);box-shadow:var(--recess);color:var(--t1);font:400 .875rem/1 var(--mono)}
.d-find input::placeholder{color:var(--t3)}
.d-count{margin:6px 0 0;color:var(--t3);font:400 .75rem/1.4 var(--mono)}
.d-nl-w{display:grid;gap:1px;margin-top:10px}
.d-nl-w>a,.d-nl{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 8px;border-radius:var(--r-xs);color:var(--t2);font:400 .75rem/1.25 var(--mono);text-decoration:none}
.d-nl-w>a:hover,.d-nl:hover{background:var(--g3);color:var(--t1)}
.d-nl[hidden]{display:none}
.d-nh{margin:12px 0 4px;padding:0 8px;color:var(--t3);font:700 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.d-np{min-width:0;overflow-wrap:break-word}
.m{flex:none;display:inline-block;min-width:3.1em;color:var(--t2);font:700 .75rem/1 var(--mono);letter-spacing:.02em}
.m-post{color:var(--j300)}.m-put{color:var(--amber)}.m-delete{color:var(--red)}
.d-main{min-width:0}
.d-s,.d-g{padding-block:clamp(20px,3.4vh,36px);box-shadow:inset 0 -1px 0 var(--line)}
.d-g[hidden],.op[hidden]{display:none}
.d-p{margin:10px 0 0;max-width:68ch;color:var(--t2);font:400 .875rem/1.65 var(--mono)}
.d-p b{color:var(--t1)}
.d-p a,.prose a,.d-t a{color:var(--j300)}
.d-h3{margin-top:22px}
code{font-family:var(--mono)}
.d-p code,.prose code,.d-t td code,.d-steps code,.op-s code{padding:1px 5px;border-radius:var(--r-xs);background:var(--g3);color:var(--t1);font-size:.92em;overflow-wrap:break-word}
.d-steps{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;counter-reset:s;color:var(--t2);font:400 .875rem/1.5 var(--mono)}
.d-steps li{counter-increment:s;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.d-steps li::before{content:counter(s);color:var(--t3);font-weight:700}
.d-steps a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--t1);text-decoration:none}
.d-t{margin-top:12px;overflow-x:auto;border-radius:var(--r-m);background:var(--g0);box-shadow:inset 0 0 0 1px var(--line)}
.d-t td a{white-space:nowrap}
.d-t table{width:100%;min-width:30rem;border-collapse:collapse;font:400 .75rem/1.55 var(--mono);color:var(--t2)}
.d-t th{padding:8px 10px;text-align:left;background:var(--g2);color:var(--t1);font-weight:700}
.d-t td{padding:8px 10px;vertical-align:top;box-shadow:inset 0 1px 0 var(--line)}
.ty{color:var(--t3)}
.req{color:var(--amber);font-size:.92em}
.op{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:clamp(16px,2.4vw,32px);align-items:start;padding-block:clamp(18px,3vh,30px);box-shadow:inset 0 1px 0 var(--line)}
.d-gh{margin-bottom:14px}
.op-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;scroll-margin-top:calc(var(--bar) + 16px);color:var(--t1);font:700 1rem/1.3 var(--mono);overflow-wrap:anywhere}
.op-h code{min-width:0}
.op-s{margin:6px 0 0;color:var(--t1);font:400 .875rem/1.5 var(--mono)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;border-radius:var(--r-xs);background:var(--g3);color:var(--t2);font:400 .75rem/1.2 var(--mono);text-decoration:none}
.chip-w{background:rgba(255,184,74,.14);color:var(--amber)}
.chip-c{min-height:32px}
.chip-c:hover{background:var(--g4);color:var(--t1)}
.chip-c span{color:var(--t3)}
.prose p{margin:10px 0 0;max-width:68ch;color:var(--t2);font:400 .875rem/1.65 var(--mono);overflow-wrap:anywhere}
.op h4{margin:16px 0 0;color:var(--t1);font:700 .75rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.op-st{margin-left:4px;color:var(--j300)}
.more{margin-top:10px}
.more>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--t2);font:700 .75rem/1 var(--mono);cursor:pointer;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .12s var(--ease)}
.more[open]>summary::before{transform:rotate(90deg)}
.more>summary:hover{color:var(--t1)}
.op-r>*{min-width:0}
.op-r{position:sticky;top:calc(var(--bar) + 12px);display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;max-height:calc(100vh - var(--bar) - 24px);overflow:auto}
.lang{display:flex;gap:4px}
.lang-b{min-height:32px;padding:0 10px;border:0;border-radius:var(--r-xs);background:var(--g2);color:var(--t2);font:700 .75rem/1 var(--mono);cursor:pointer}
.lang-b:hover{background:var(--g3);color:var(--t1)}
.lang-b.on{background:var(--g4);color:var(--t1)}
html:not(.js) .lang{display:none}
.js .lang-p:not(.on){display:none}
.code-w{position:relative;min-width:0}
.code-w .copy-c.is-done{color:var(--j300)}
.more-j .term pre{padding-top:52px}
.d-main .term pre{font-size:.75rem;line-height:1.6}
.d-none{padding-block:24px;color:var(--t2);font:400 .875rem/1.5 var(--mono)}
@media (max-width:1179px){
  .op{grid-template-columns:minmax(0,1fr)}
  .op-r{position:static;max-height:none;overflow:visible}
}
@media (max-width:899px){
  .d-g-w{grid-template-columns:minmax(0,1fr)}
  .d-nav{position:static;max-height:none;overflow:visible;padding:0}
  .d-ns{display:flex;align-items:center;min-height:44px;color:var(--t1);font:700 .875rem/1 var(--mono);cursor:pointer}
  .js .d-nd:not([data-ready])>:not(summary){display:none}
  .d-nl,.d-nl-w>a{min-height:44px}
  .chip-c,.lang-b,.more>summary{min-height:44px}
}

/* old homepage anchors kept for outside links; WordPress's admin bar when signed in */
.anchor{display:block;height:0;width:0;overflow:hidden}
.admin-bar .bar{top:32px}@media (max-width:782px){.admin-bar .bar{top:46px}}

/* the pages search earns: same kit, same wall, one job each */
.crumb{padding-top:4px}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;padding:0;list-style:none;color:var(--t3);font:400 .75rem/1.4 var(--mono)}
.crumb li{display:flex;align-items:center;gap:8px;min-height:44px}
.crumb li+li::before{content:"/";color:var(--t3)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--t3);text-decoration:none}
.crumb a:hover{color:var(--t1)}
.crumb [aria-current]{color:var(--t2)}
.pg-h{padding-block:clamp(14px,3vh,32px) clamp(14px,3vh,28px)}
.pg-h .gs-display{margin-bottom:12px}
.pg-lead{max-width:64ch;margin-bottom:18px;font:400 1rem/1.6 var(--mono)}
.pg-lead a{color:var(--j300)}
.pg-cta{justify-content:flex-start;margin:0}
.pg-lead:last-child{margin-bottom:0}
.strip{margin-block:clamp(10px,2.4vh,24px);overflow:hidden}
.strip .lane{height:clamp(8rem,22vh,13rem);-webkit-mask:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.strip .lane-t{animation:kMq var(--s,70s) linear infinite}
.strip .lane-t>.t{margin-right:10px;border-radius:var(--r-m)}
.strip-n{margin-top:8px;padding-inline:var(--pad);text-align:center}
.pg-s{padding-block:clamp(16px,3vh,32px)}
.pg-s>.gs-h2{margin-bottom:6px;font-size:clamp(1.75rem,3vw,2.5rem)}
.pg-s .d-h3{margin-top:18px}
.pg-s .code-w{margin-top:10px;max-width:60rem}
.pg-s .d-t{max-width:none}
.pg-q{margin-top:0;box-shadow:inset 0 -1px 0 var(--line)}
.pg-q>summary{display:flex;width:100%;min-height:48px;color:var(--t1);font:700 .875rem/1.35 var(--mono)}
.pg-q .d-p{margin:0 0 14px}
.pg-note{padding-block:8px}
.pg-term{margin-block:clamp(6px,1.4vh,14px) clamp(14px,3vh,28px)}
.pg-term .term,.pg-term .pg-tn{max-width:60rem}
.pg-tn{margin-top:8px}
.pg-s,.pg-h,.crumb,.pg-note{position:relative}
/* safe zones: amber where Meta's interface sits, the lamp's green around what stays clear */
.sz{display:grid;grid-template-columns:minmax(0,1fr) clamp(16rem,24vw,23rem);gap:clamp(18px,3vw,48px);align-items:start;padding-block:clamp(10px,2vh,20px)}
.sz-ctl{display:grid;gap:16px;align-content:start;justify-items:start;min-width:0}
.sz-ctl .d-p{margin:0}
.sz-ctl .gs-h3{margin-top:8px}
.sz-ctl .tabs{flex-wrap:wrap;margin:0}
.sz-ctl .tabs button{padding:0 14px;font-size:.75rem}
.sz-ctl .tabs button[aria-pressed=true]{background:var(--j500);box-shadow:none;color:var(--on-jade)}
.sz-up{cursor:pointer}
.sz-up:focus-within{outline:2px solid var(--j300);outline-offset:3px}
.sz-n{display:grid;gap:6px;width:100%;max-width:30rem;margin:0}
.sz-n div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:8px;padding:10px 12px;border-radius:var(--r-s);background:var(--g2);box-shadow:inset 0 0 0 1px var(--line)}
.sz-n dt{color:var(--t3);font:700 .75rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sz-n dd{margin:0;color:var(--t2);font:400 .875rem/1.4 var(--mono)}
.sz-n b{color:var(--t1)}
.sz-frame{--b:35%;position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-l);background:var(--g0);box-shadow:var(--e3)}
.sz-frame img,.sz-frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sz-frame.is-over{outline:2px dashed var(--j300);outline-offset:3px}
.sz-z{position:absolute;background:repeating-linear-gradient(135deg,rgba(255,184,74,.42) 0 6px,rgba(255,184,74,.16) 6px 12px);transition:height .2s var(--ease),bottom .2s var(--ease)}
.sz-z.t{left:0;right:0;top:0;height:14%}
.sz-z.b{left:0;right:0;bottom:0;height:var(--b)}
.sz-z.l{left:0;top:14%;bottom:var(--b);width:6%}
.sz-z.r{right:0;top:14%;bottom:var(--b);width:6%}
.sz-safe{position:absolute;left:6%;right:6%;top:14%;bottom:var(--b);box-shadow:inset 0 0 0 2px var(--j300),0 0 18px rgba(125,255,168,.4);transition:bottom .2s var(--ease)}
/* calculators */
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:stretch;padding-block:clamp(10px,2vh,20px)}
.calc-in,.calc-out{display:grid;gap:12px;align-content:space-evenly;margin:0;padding:clamp(14px,1.8vw,24px);border-radius:var(--r-l);background:var(--g2);box-shadow:var(--e1),inset 0 0 0 1px var(--line)}
.calc-f label{display:block;margin-bottom:6px;color:var(--t2);font:400 .875rem/1.4 var(--mono)}
.calc-i{display:flex;align-items:center;gap:6px;min-height:52px;padding-inline:14px;border-radius:var(--r-s);background:var(--well);box-shadow:inset 0 0 0 1px var(--line2)}
.calc-i:focus-within{box-shadow:inset 0 0 0 2px var(--j300)}
.calc-i input{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--t1);font:400 1.125rem/1 var(--mono)}
.calc-u{color:var(--t3);font:400 1rem/1 var(--mono)}
.calc-out{align-content:center}
.calc-out div{padding-block:6px}
.calc-out dt{color:var(--t1);font:900 clamp(2.25rem,5vw,4.5rem)/1 var(--display)}
.calc-out div:first-child dt{color:var(--j300);text-shadow:var(--glow-word)}
.calc-out dd{margin:4px 0 0;color:var(--t2);font:400 .875rem/1.4 var(--mono)}
@media (max-width:899px){
  .sz{grid-template-columns:minmax(0,1fr)}
  .sz-frame{order:-1;width:min(100%,19rem);margin-inline:auto}
  .calc{grid-template-columns:minmax(0,1fr)}
  .strip .lane{height:9rem}
}
/* the gallery: three sizes of one idea, one height, edge to edge */
.ga-w{display:grid;gap:clamp(28px,5vh,56px);padding-block:clamp(10px,2vh,20px)}
.ga{display:grid;gap:12px}
.ga-t{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2px clamp(14px,2vw,28px);align-items:baseline}
.ga-t .gs-h2{grid-row:span 3;font-size:clamp(1.75rem,3vw,2.5rem)}
.ga-l{margin:0;color:var(--j300);font:700 1rem/1.4 var(--mono)}
.ga-t .d-p{margin:0;max-width:none}
.ga-i{display:flex;gap:clamp(6px,.8vw,12px);background:var(--g0)}
.ga-i .w{flex:var(--r) 1 0;aspect-ratio:var(--r);min-width:0}
.ga-i .w img{display:block}
.ga-g{display:grid;gap:clamp(28px,5vh,56px)}
.ga-gh{margin:clamp(10px,3vh,32px) 0 0;color:var(--t1);font:900 clamp(2.25rem,5.5vw,4.5rem)/.95 var(--display);letter-spacing:.005em;text-transform:uppercase}
@media (max-width:899px){
  .ga-t{grid-template-columns:minmax(0,1fr)}
  .ga-t .gs-h2{grid-row:auto}
  .ga-i{overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .ga-i .w{flex:none;height:62vw;width:auto;scroll-snap-align:center}
}
/* /tools/: what's free, big enough to press */
.hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin:0;padding:0;list-style:none}
.hub a{display:grid;gap:6px;height:100%;padding:clamp(16px,2vw,28px);border-radius:var(--r-l);background:var(--g2);box-shadow:var(--e1),inset 0 0 0 1px var(--line);color:var(--t2);font:400 .875rem/1.5 var(--mono);text-decoration:none;transition:box-shadow .12s var(--ease),background-color .12s var(--ease)}
.hub a:hover{background:var(--g3);box-shadow:var(--e1),inset 0 0 0 1px var(--j300)}
.hub b{color:var(--t1);font:900 clamp(1.5rem,2.6vw,2.25rem)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
@media (max-width:899px){.hub{grid-template-columns:minmax(0,1fr)}}