:root{
  color-scheme:dark;
  --void:#08090A; --panel:#0D0F11; --panel2:#131619; --panel3:#1A1E22;
  --line:rgba(255,255,255,.10); --line-hi:rgba(255,255,255,.28);
  --text:#F5F6F7; --body:#A8ADB3; --muted:#7B838B;
  --sig:#FF7A1A; --sig-lo:rgba(255,122,26,.13); --sig-mid:rgba(255,122,26,.42);
  --disp:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --area:1320px; --gut:clamp(20px,5vw,64px); --sec:clamp(72px,7.5vw,128px);
  /* Gutters that also clear the notch when a phone is held in landscape.
     env() is 0 wherever it does not apply, so max() collapses to --gut and
     desktop is byte-identical. */
  --gut-l:max(var(--gut),env(safe-area-inset-left,0px));
  --gut-r:max(var(--gut),env(safe-area-inset-right,0px));
  /* ---- BREAKPOINT SYSTEM ----------------------------------------------
     CSS cannot read a custom property inside a media query, so this comment
     is the single source of truth and every @media below uses one of four
     literals. Each is justified by a device class, not by a component:
       560   phone portrait (320 SE .. 430 15 Pro Max) and foldables open
       780   phone landscape and tablet portrait, incl. iPad 768
       920   large tablet portrait / small laptop: iPad Air 834, the 890 gap
      1040   laptop; below it the hero two-up stops fitting
     Collapsed into those: 420+520+540+640(.stats) -> 560 ·
     640(.hv-body)+720+760+768 -> 780 · 820+860+880+900 -> 920.
     Three thresholds are deliberately NOT tiers. They are content-fit values
     measured from the markup, and moving them to a tier measurably breaks:
       640  .facts — three prose cells need ~183px, 561 would give 158px
       960  horizontal nav: links need 429px; 463px free at 960, 425px at 920
      1040  the hero two-up; a 3-column demo panel cannot come below 1041
     ---------------------------------------------------------------------- */
  --ease-out:cubic-bezier(.16,.84,.28,1);
  --ease-swift:cubic-bezier(.77,0,.18,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth;
  /* the sticky nav is 70px; on a notched phone it is 70px plus the inset */
  scroll-padding-top:calc(84px + env(safe-area-inset-top,0px));
  /* iOS inflates body text when the phone is rotated to landscape unless
     this is pinned — the single most common "my type went huge" bug */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:var(--sig-lo)}
body{background:var(--void);color:var(--text);font-family:var(--disp);
  font-variation-settings:"wdth" 100,"wght" 400;font-size:17px;line-height:1.68;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
::selection{background:var(--sig);color:#000}
.area{max-width:var(--area);margin:0 auto;padding:0 var(--gut-r) 0 var(--gut-l)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:block}
.sig{color:var(--sig)}
.nav{position:sticky;top:0;z-index:100;background:rgba(8,9,10,.84);
  backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px;
  max-width:var(--area);margin:0 auto;padding:0 var(--gut-r) 0 var(--gut-l)}
.mark{display:flex;align-items:center;gap:12px;min-height:44px}
.mark svg{width:30px;height:30px;display:block;transition:transform .45s var(--ease-swift)}
.mark:hover svg{transform:rotate(-90deg)}
.mark b{font-variation-settings:"wdth" 116,"wght" 880;font-size:15.5px;letter-spacing:.05em}
.nav-links{display:flex;gap:24px}
.nav-links a{font-family:var(--mono);font-size:12.5px;color:var(--body);position:relative;
  transition:color .28s;padding:12px 0}
.nav-links a::before{content:"";position:absolute;top:0;bottom:0;left:-6px;right:-6px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:100%;
  background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-swift)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:var(--text)}
.pill{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;border:1px solid var(--sig);color:var(--sig);padding:7px 14px;min-height:40px;
  transition:background .3s}
.pill:hover{background:var(--sig-lo)}
.pill i{width:6px;height:6px;background:var(--sig);display:block;font-style:normal;
  animation:blip 2s ease-in-out infinite;box-shadow:0 0 8px var(--sig)}
h1{font-variation-settings:"wdth" 118,"wght" 800;font-size:clamp(40px,5.9vw,84px);
  line-height:.99;letter-spacing:-.028em;margin-top:18px}
h1 .thin{font-variation-settings:"wdth" 118,"wght" 300;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);
  font-size:13.5px;letter-spacing:.06em;padding:16px 26px;min-height:52px;cursor:pointer;
  background:var(--sig);color:#0A0603;border:1px solid var(--sig);font-weight:500;
  position:relative;overflow:hidden;transition:color .3s,box-shadow .3s;border-radius:0}
.btn>span{position:relative;z-index:2;display:block}
.btn::before{content:"";position:absolute;inset:0;background:var(--text);
  transform:translateY(101%);transition:transform .45s var(--ease-swift);z-index:1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 0 34px var(--sig-mid)}
.btn-2{background:transparent;color:var(--text);border-color:var(--line-hi)}
.btn-2::before{background:var(--sig)}
.btn-2:hover{color:#0A0603;border-color:var(--sig)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,56px);border-bottom:1px solid var(--line);padding-bottom:22px;position:relative}
.head::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-swift) .15s}
.head.in::after{transform:scaleX(1)}
.head h2{font-variation-settings:"wdth" 116,"wght" 780;font-size:clamp(29px,4.3vw,54px);
  line-height:1.02;letter-spacing:-.024em}
.head h2 em{font-style:normal;font-variation-settings:"wdth" 116,"wght" 300;color:var(--muted)}
.rv{opacity:1;transform:none}
.tagline{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--sig);color:var(--sig);padding:5px 11px}
.tagline i{width:5px;height:5px;background:var(--sig);display:block;font-style:normal;
  animation:blip 1.7s ease-in-out infinite}
.tagline.done{border-color:var(--line-hi);color:var(--muted)}
.tagline.done i{background:var(--muted);animation:none}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.chips i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--line);padding:5px 9px;
  transition:border-color .25s var(--ease-spring),color .25s,transform .25s var(--ease-spring)}
.chips i:hover{border-color:var(--sig);color:var(--sig);transform:translateY(-2px)}
.entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.6vw,56px);
  padding:clamp(28px,3.6vw,48px) 0;border-top:1px solid var(--line);align-items:center}
.entry h3{font-variation-settings:"wdth" 114,"wght" 780;font-size:clamp(23px,2.9vw,36px);
  line-height:1.08;letter-spacing:-.02em;margin:14px 0 14px}
.entry p{color:var(--body);font-size:16.5px;max-width:52ch}
.shot{overflow:hidden;border:1px solid var(--line);background:var(--panel);position:relative;aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(1.05) brightness(.78);transform:scale(1.02);
  transition:filter .7s ease,transform .9s var(--ease-out)}
.entry:hover .shot img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.06)}
.shot.portrait img{filter:none!important;transform:scale(1)!important;
  image-rendering:auto;transition:transform .9s var(--ease-out)}
.links{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.links a{font-family:var(--mono);font-size:12px;color:var(--text);position:relative;
  display:inline-flex;align-items:center;min-height:44px;padding:10px 2px}
.links a::after{content:"";position:absolute;left:0;bottom:8px;width:100%;height:1px;background:var(--sig);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-swift)}
.links a:hover{color:var(--sig)}
.links a:hover::after{transform:scaleX(1)}
.btn[disabled]{opacity:1;cursor:not-allowed;background:transparent;color:var(--muted);border-color:var(--line)}
.btn[disabled]::before{display:none}
.note{font-family:var(--mono);font-size:12.5px;color:var(--body);line-height:1.9;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line)}
.note b{color:var(--sig);font-weight:400}
footer{border-top:1px solid var(--line);padding:38px 0 46px;margin-top:var(--sec)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);
  font-size:12px;color:var(--muted);letter-spacing:.07em}
.mrail{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;background:rgba(8,9,10,.97);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  transform:translateY(101%);transition:transform .5s var(--ease-swift)}
.mrail.show{transform:translateY(0)}
.mrail-in{display:flex;align-items:stretch}
.mrail .mtxt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:10px clamp(14px,4.4vw,16px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;line-height:1.7}
.mrail .mtxt b{color:var(--text);font-weight:500}
.mrail .mtxt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrail .mbtn{display:flex;align-items:center;justify-content:center;background:var(--sig);color:#0A0603;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;font-weight:500;min-height:56px;
  padding:0 clamp(14px,4vw,22px)}
.skip{position:absolute;left:-9999px;display:inline-flex;align-items:center;min-height:44px}
.skip:focus{left:var(--gut-l);top:calc(12px + env(safe-area-inset-top,0px));z-index:300;
  background:var(--sig);color:#000;padding:12px 18px;
  font-family:var(--mono);font-size:12px}
body.intro #skipintro{opacity:1;pointer-events:auto}
body>*{transition:opacity .5s ease}
body.intro>*:not(#bgfx):not(#skipintro){opacity:0}
.eyebrow{color:var(--sig)}
.sec>.head .eyebrow,.head .eyebrow{color:var(--sig)}
.nav-links a:hover,.nav-links a.in{color:var(--sig)}
.links a{color:var(--sig)}
.btn-2:hover{border-color:var(--sig);color:var(--sig)}
.chips button[aria-pressed="true"],.chips .in{background:var(--sig);border-color:var(--sig);color:#120602}
.chips button:hover{border-color:var(--sig);color:var(--sig)}
.sig b{color:var(--sig)}
.foot-in a:hover{color:var(--sig)}
.mark:hover .sig{color:var(--sig)}
/* ================================================================
   pages.css: shared shell for /work and /answers. Everything above is
   lifted verbatim from the homepage so the two cannot drift apart.
   Everything below exists only on the subpages.
   ================================================================ */
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.rv{opacity:1;transform:none}
.head{position:relative;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:34px}
.head::after{transform:scaleX(1)}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{transform:scaleX(1)}
.pill.wa{border-color:var(--sig)}
@media(max-width:960px){.nav-links{display:none}}

.page{padding:clamp(48px,6vw,88px) 0 var(--sec)}
.page-in{max-width:860px}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.crumbs a:hover{color:var(--sig)}
.page h1{font-variation-settings:"wdth" 116,"wght" 800;font-size:clamp(34px,5vw,62px);line-height:1.02;
  letter-spacing:-.026em;margin:0 0 18px}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--body);max-width:60ch;margin:0 0 34px}
.meta{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin:0 0 44px}
.meta div{flex:1 1 150px;padding:14px 16px;border-right:1px solid var(--line)}
.meta div:last-child{border-right:0}
.meta b{display:block;font-family:var(--mono);font-size:14px;color:var(--text);font-weight:500;line-height:1.4}
.meta span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.page .shot{margin:0 0 46px;aspect-ratio:16/10}
.page .shot img{filter:none;transform:none}
.prose h2{font-variation-settings:"wdth" 114,"wght" 760;font-size:clamp(23px,2.8vw,32px);line-height:1.15;
  letter-spacing:-.018em;margin:52px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-variation-settings:"wdth" 112,"wght" 720;font-size:18px;margin:30px 0 10px}
.prose p{color:var(--body);max-width:66ch;margin:0 0 18px}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{color:var(--body);max-width:66ch;padding-left:22px;margin:0 0 20px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--sig)}
.prose .answer{border-left:3px solid var(--sig);background:linear-gradient(90deg,var(--sig-lo),transparent 70%);
  padding:18px 22px;margin:0 0 34px;color:var(--text);font-size:18px;line-height:1.55;max-width:none}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 26px}
.prose th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose td{padding:12px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.prose td.n{font-family:var(--mono);color:var(--text);white-space:nowrap}
.prose .tw{overflow-x:auto;margin:0 0 26px;border:1px solid var(--line)}
.prose .tw table{margin:0;min-width:520px}
.prose .tw td,.prose .tw th{padding:12px 16px}
.prose .tw tr:last-child td{border-bottom:0}
.quote{border:1px solid var(--line);background:var(--panel);padding:22px 26px;margin:0 0 30px;max-width:66ch}
.quote p{margin:0;color:var(--text);font-size:17px}
.quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.band{border:1px solid var(--sig);background:linear-gradient(180deg,var(--sig-lo),transparent 60%),var(--panel);
  padding:clamp(24px,3.4vw,40px);margin:60px 0 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{font-variation-settings:"wdth" 114,"wght" 780;font-size:clamp(22px,2.8vw,30px);line-height:1.12;letter-spacing:-.02em;margin:0 0 6px}
.band p{color:var(--body);margin:0;max-width:52ch}
.band .cta{display:flex;gap:12px;flex-wrap:wrap}
.related{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.related h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{border:1px solid var(--line);background:var(--panel);padding:20px 22px;display:block;transition:border-color .3s,background .3s}
.card:hover{border-color:var(--sig);background:var(--panel2)}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sig);margin-bottom:8px;display:block}
.card b{display:block;font-variation-settings:"wdth" 112,"wght" 740;font-size:18px;line-height:1.25;letter-spacing:-.012em;margin-bottom:8px}
.card p{color:var(--body);font-size:14.5px;margin:0;line-height:1.5}
.hub .card{padding:24px 26px}
.hub .card b{font-size:21px}
footer{border-top:1px solid var(--line);margin-top:var(--sec)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px 0 40px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}