/* TRACE — one material system and one motion vocabulary for every page.
   Springs are generated by scripts/springs.mjs from the same model that
   src/spring.js integrates at runtime. */

/* Fallback faces sized to the web fonts (measured in Chrome), so the swap to the web font does not move the layout. */
@font-face{font-family:'Literata Fallback';src:local('Georgia');size-adjust:107.28%;ascent-override:109.99%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:'Golos Fallback';src:local('Arial');size-adjust:106.49%;ascent-override:92.02%;descent-override:20.66%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Fallback';src:local('Consolas');size-adjust:109.13%;ascent-override:94.38%;descent-override:25.66%;line-gap-override:0%}

/* ───────────────────────── Tokens ───────────────────────── */
:root{
  color-scheme:dark;
  --font-body:'Golos Text','Golos Fallback',system-ui,sans-serif;
  --font-ui:var(--font-body);
  /* Literata carries the headings; the giant hero word stays Golos Text 800. */
  --font-display:'Literata','Literata Fallback',Georgia,serif;
  --font-word:'Golos Text','Golos Fallback',system-ui,sans-serif;
  --font-brand:'Unbounded','Golos Text',sans-serif;
  --font-serif:var(--font-display);
  --font-mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,Consolas,monospace;

  /* Monochrome: ink, carbon, graphite, ash, bone, paper. */
  --bg:#070809;
  --bg-raised:#0c0d0f;
  --surface:#111214;
  --surface-2:#18191c;
  --text:#f3f4f6;
  --text-2:#b5b9bf;
  --text-3:#878c94;
  --muted-heading:#80858d;
  --line:#ffffff12;
  --line-2:#ffffff21;
  --accent:#ffffff;
  --accent-soft:#e9ebee;
  --accent-deep:#9da2a9;
  --label:#9ca1a9;
  --focus:#ffffff;

  /* Type scale: fluid display sizes for Literata, fixed steps for interface text. */
  --display-xs:clamp(26px,1.2vw + 14px,38px);
  --display-s:clamp(30px,1.9vw + 14px,46px);
  --display-m:clamp(40px,3.6vw + 10px,70px);
  --display-l:clamp(48px,5vw + 8px,96px);
  --display-xl:clamp(56px,6.4vw + 6px,118px);
  --track-display:-.022em;

  --glass-control:linear-gradient(180deg,#ffffff0f,#ffffff03),#18191c;
  --glass-panel:linear-gradient(180deg,#ffffff10,#ffffff03 40%),#151619;
  --glass-card:linear-gradient(180deg,#ffffff0b,#ffffff03);
  --rim-control:inset 0 1px 0 #ffffff14;
  --shadow-control:0 10px 24px -14px #000000,0 1px 0 #000000;
  --shadow-panel:0 26px 56px -26px #000000;
  --blur-control:none;
  --blur-panel:none;

  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:20px;--r-xl:26px;--r-pill:999px;
  --header-h:76px;
  --container:1320px;
  --gutter:40px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,.05,.8,.3);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --spring-smooth:linear(0, 0.0056 1.3%, 0.0209 2.5%, 0.0438 3.8%, 0.0832 5.4%, 0.1545 7.9%, 0.3671 14.6%, 0.4673 17.9%, 0.5574 21.3%, 0.6362 24.6%, 0.7035 27.9%, 0.7601 31.3%, 0.8123 35%, 0.8541 38.8%, 0.8936 43.3%, 0.9252 48.3%, 0.9493 53.8%, 0.968 60%, 0.9805 66.7%, 0.9896 75%, 1);
  --dur-smooth:700ms;
  --spring-snappy:linear(0, 0.0052 1.3%, 0.0195 2.5%, 0.0499 4.2%, 0.0902 5.8%, 0.19 9.2%, 0.3998 15.4%, 0.5062 18.8%, 0.6025 22.1%, 0.6864 25.4%, 0.7495 28.3%, 0.8099 31.7%, 0.859 35%, 0.9023 38.8%, 0.938 42.9%, 0.9652 47.5%, 0.9842 52.5%, 0.9961 57.9%, 1.0049 71.3%, 1);
  --dur-snappy:560ms;
  --spring-bouncy:linear(0, 0.0071 1.3%, 0.0267 2.5%, 0.0567 3.8%, 0.1092 5.4%, 0.1556 6.7%, 0.224 8.3%, 0.4826 14.2%, 0.5875 16.7%, 0.6975 19.6%, 0.7792 22.1%, 0.8482 24.6%, 0.9132 27.5%, 0.9626 30.4%, 0.9982 33.3%, 1.0193 35.8%, 1.0351 38.8%, 1.0434 41.7%, 1.046 45%, 1.0414 50%, 1.0144 64.2%, 1.0035 72.9%, 0.9982 85%, 1);
  --dur-bouncy:780ms;
  --spring-gentle:linear(0, 0.0056 1.3%, 0.0208 2.5%, 0.0437 3.8%, 0.0829 5.4%, 0.1541 7.9%, 0.3662 14.6%, 0.4664 17.9%, 0.5565 21.3%, 0.6352 24.6%, 0.7025 27.9%, 0.7592 31.3%, 0.8115 35%, 0.8534 38.8%, 0.893 43.3%, 0.9247 48.3%, 0.949 53.8%, 0.9677 60%, 0.9803 66.7%, 0.9895 75%, 1);
  --dur-gentle:1090ms;
  --spring-press:linear(0, 0.0049 1.3%, 0.0251 2.9%, 0.0576 4.6%, 0.0996 6.3%, 0.2024 9.6%, 0.4337 16.3%, 0.5437 19.6%, 0.643 22.9%, 0.7194 25.8%, 0.7852 28.7%, 0.8479 32.1%, 0.898 35.4%, 0.9369 38.8%, 0.9692 42.5%, 0.9915 46.3%, 1.0083 50.8%, 1.0173 55.8%, 1.019 65.4%, 1);
  --dur-press:390ms;
}
@supports not (transition-timing-function:linear(0,1)){
  :root{--spring-smooth:var(--ease-out);--spring-snappy:var(--ease-out);--spring-bouncy:cubic-bezier(.34,1.4,.64,1);--spring-gentle:var(--ease-out);--spring-press:cubic-bezier(.34,1.3,.64,1)}
}

/* ───────────────────────── Base ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#ffffff2e transparent}
body{margin:0;min-width:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;overflow-x:clip;isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 88% 60%,#ffffff07,transparent 70%),radial-gradient(ellipse 50% 45% at 8% 30%,#ffffff05,transparent 70%)}
h1,h2,h3,p,ol,ul{margin:0}
h1,h2,h3{text-wrap:balance}
h1,h2{font-kerning:normal;hanging-punctuation:first}
code,.terminal-body,.project-url,.method-cell,.legal-date{font-variant-numeric:tabular-nums}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a,summary,label{-webkit-tap-highlight-color:transparent}
code{font-family:var(--font-mono)}
::selection{background:#ffffffd9;color:#0b0c0e}
[hidden]{display:none!important}
.container{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.glyph{display:block;width:1em;height:1em;flex:none;overflow:visible}

:where(a,button,summary,input,select,textarea,[tabindex]):focus{outline:none}
:where(a,button,summary,select,textarea,[tabindex]):focus-visible,
.manual-list input:focus-visible+.check-box{outline:2px solid var(--focus);outline-offset:3px}
/* The ring settles inward; elements that own an entrance animation keep it. */
:where(a,button,summary,[tabindex]):not([data-reveal],.menu-links a):focus-visible{animation:focus-ring .5s var(--spring-bouncy)}
@keyframes focus-ring{from{outline-offset:9px;outline-color:transparent}}

.skip-link{position:fixed;left:16px;top:12px;z-index:200;padding:12px 18px;border-radius:var(--r-pill);background:var(--text);color:#121316;font-weight:600;translate:0 -80px;transition:translate .5s var(--spring-snappy)}
.skip-link:focus-visible{translate:0 0}
.visually-hidden,.toast{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────────────────────── Type primitives ───────────────────────── */
.eyebrow,.mini-label{display:block;font:500 11.5px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.eyebrow{color:var(--label)}
.mini-label{color:var(--text-3)}
.accent-dot{color:var(--accent)}
.arrow{display:inline-grid;place-items:center;width:1em;height:1em;flex:none;transition:transform .6s var(--spring-bouncy)}
.glyph-down{transition:transform .6s var(--spring-bouncy)}
:is(a,button):hover>.arrow:has(.glyph-arrow){transform:translate(2px,-2px)}
:is(a,button):hover>.arrow:has(.glyph-down){transform:translateY(2px)}
:is(a,button):hover>.arrow:has(.glyph-next){transform:translateX(3px)}
.text-link{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.4 var(--font-body);letter-spacing:-.005em;color:var(--text);transition:color .3s var(--ease-out)}
.text-link:hover{color:#ffffff}
.text-link .arrow{font-size:14px}

/* ───────────────────────── Buttons ───────────────────────── */
/* One button system. Rest, hover (lift and a wider halo), focus-visible (white ring from the base rule), press (squish),
   disabled, loading (aria-busy). The label rolls: its copy slides in from below while the arrow leans out. */
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 20px 0 26px;border:1px solid transparent;border-radius:var(--r-pill);font:600 15px/1 var(--font-ui);letter-spacing:-.012em;white-space:nowrap;transition:transform var(--dur-bouncy) var(--spring-bouncy),background-color .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .5s var(--ease-out),color .3s var(--ease-out)}
.button .arrow{font-size:16px}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.96);transition-duration:.14s,.35s,.35s,.5s,.3s;transition-timing-function:var(--ease-out)}
.button:disabled,.button[aria-disabled=true]{opacity:.42;box-shadow:none;pointer-events:none}
.button[aria-busy=true]{pointer-events:none;color:transparent}
.button[aria-busy=true]::before{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid #0000002e;border-top-color:#0b0c0e;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.button-light{background:linear-gradient(180deg,#ffffff,#e3e5e8);color:#0b0c0e;box-shadow:inset 0 -2px 0 #0000001f,inset 0 1px 0 #ffffff,0 12px 28px -14px #000000,0 0 0 0 #ffffff00}
.button-light:hover{box-shadow:inset 0 -2px 0 #0000001f,inset 0 1px 0 #ffffff,0 18px 34px -14px #000000,0 0 0 5px #ffffff12}
.button-soft,.button-ink{background:var(--glass-control);border-color:#ffffff1f;color:var(--text);box-shadow:var(--rim-control),var(--shadow-control)}
.button-soft:hover,.button-ink:hover{border-color:#ffffff40;background-color:#1c1d20}
.button-label{display:inline-block;overflow:hidden;padding-block:3px;margin-block:-3px}
.button-label>span{position:relative;display:inline-block;transition:transform .7s var(--spring-snappy)}
/* The copy waits a good half line below: glyphs overhang their line box (descenders, the breve of Й), and with only a
   few pixels between them the edge of the hidden copy showed above or below the label. */
.button-label>span::after{content:attr(data-label);content:attr(data-label) / '';position:absolute;left:0;top:calc(100% + .7em)}
:is(.button,.header-start):hover .button-label>span{transform:translateY(calc(-100% - .7em))}
/* Links: a dim rule at rest, a bright one draws over it on hover. */
.text-link,.cinema-text-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none!important}
.text-link::before,.text-link::after,.cinema-text-link::before,.cinema-text-link::after{content:'';position:absolute;left:0;right:calc(1em + 8px);bottom:9px;height:1px;background:currentColor;transform-origin:left}
.text-link::before,.cinema-text-link::before{opacity:.32}
.text-link::after,.cinema-text-link::after{transform:scaleX(0);transition:transform .7s var(--ease-out)}
.text-link:hover::after,.cinema-text-link:hover::after,.text-link:focus-visible::after,.cinema-text-link:focus-visible::after{transform:scaleX(1)}
/* Compact controls keep their look but get a 44px tall hit area. */
:is(.desktop-nav a,.motion-toggle,.legal-sidebar nav a,.tools-rail nav a)::before{content:'';position:absolute;left:0;right:0;top:50%;height:max(44px,100%);translate:0 -50%}
/* Inline links in running text: a quiet rule that brightens on hover. */
.tools-alert a,.legal-main article a,.tools-source a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:#ffffff45;transition:color .3s var(--ease-out),text-decoration-color .3s var(--ease-out)}
.tools-alert a:hover,.legal-main article a:hover,.tools-source a:hover{color:#ffffff;text-decoration-color:currentColor}
.tools-source a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.footer-top nav a,.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}

/* Pointer-following light on useful surfaces only: it catches the edge, like a lamp on anodized metal. */
.trace-surface{position:relative}
.trace-surface::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(240px circle at var(--light-x,50%) var(--light-y,0%),#ffffffd0,#ffffff40 42%,transparent 74%);-webkit-mask:linear-gradient(#000000 0 0) content-box,linear-gradient(#000000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000000 0 0) content-box exclude,linear-gradient(#000000 0 0);opacity:0;transition:opacity .6s var(--ease-out)}
.trace-surface:hover::after{opacity:1}
.button-light.trace-surface::after{background:radial-gradient(120px circle at var(--light-x,50%) var(--light-y,0%),#00000059,#00000014 50%,transparent 78%)}

/* ───────────────────────── Header ───────────────────────── */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);margin-bottom:calc(var(--header-h)*-1);view-transition-name:site-header}
.site-header::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#07090cf5,#07090cec);border-bottom:1px solid #ffffff12;box-shadow:0 12px 30px -20px #000000;opacity:0;transition:opacity .5s var(--ease-out)}
.site-header[data-scrolled]::before{opacity:1}
/* Three columns, so the nav stays centred whether or not the page shows the header button. */
.header-inner{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:24px;height:100%}
.header-inner>.brand-link{justify-self:start}
.brand-link{display:inline-flex;align-items:center;flex:none;min-height:44px;border-radius:var(--r-sm)}
.brand-lockup{display:inline-flex;align-items:center;gap:11px;transition:transform var(--dur-press) var(--spring-press)}
.brand-word{display:inline-flex;font:700 20px/1 var(--font-brand);letter-spacing:-.075em;color:var(--text)}
/* Entrance: each letter rises out of its own mask, at uneven intervals; the full stop drops in last. */
.bl{display:inline-block;transition:transform .5s var(--spring-bouncy) calc(var(--i) * 28ms)}
.js .site-header .bl{animation:brand-letter .82s var(--spring-snappy) calc(.3s + var(--d)) backwards}
@keyframes brand-letter{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,.5em,0)}to{clip-path:inset(0 0 -10% 0)}}
.js .site-header .brand-period{animation:brand-dot .9s var(--spring-bouncy) .62s backwards}
@keyframes brand-dot{from{opacity:0;transform:translate3d(0,-.8em,0) scale(.3)}}
/* Hover: a wave runs through the letters; press: the whole mark gives a little. */
.brand-link:hover .bl{transform:translateY(-2px)}
.brand-link:active .brand-lockup{transform:scale(.96);transition-duration:.12s}
.brand-period{display:inline-block;color:var(--accent)}
.desktop-nav{position:relative;display:flex;align-items:center;gap:2px;margin-inline:auto;padding:4px;border-radius:var(--r-pill);background:linear-gradient(180deg,#ffffff0a,#ffffff03),#121316;border:1px solid #ffffff14;box-shadow:inset 0 1px 0 #ffffff0e,0 10px 26px -18px #000000}
.desktop-nav a{position:relative;z-index:1;padding:9px 16px;border-radius:var(--r-pill);font:500 14px/1.2 var(--font-body);letter-spacing:-.012em;color:var(--text-2);white-space:nowrap;transition:color .3s var(--ease-out),transform .5s var(--spring-bouncy)}
.desktop-nav a:hover{color:var(--text)}
.desktop-nav a:active{transform:scale(.95);transition-duration:.12s}
.desktop-nav a[aria-current]{color:#ffffff;isolation:isolate}
.nav-pill{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#ffffff17;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff14,0 6px 16px -8px #000000;view-transition-name:nav-current}
/* The footer nav reuses nav(): only the header one shows a pill. */
.site-footer .nav-pill{display:none}
/* Lenses (Lens in spring.js) cover their whole control and are clipped to the item from --lt/--lr/--lb/--ll/--lrad: they repaint, they never lay out.
   The 1px gap between the outer clip and the inner one is the rim. */
.nav-lens{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:#ffffff14;clip-path:inset(var(--lt,0) var(--lr,100%) var(--lb,100%) var(--ll,0) round var(--lrad,0px))}
.nav-lens::before{content:'';position:absolute;inset:0;background:#1a1b1e;clip-path:inset(calc(var(--lt,0px) + 1px) calc(var(--lr,100%) + 1px) calc(var(--lb,100%) + 1px) calc(var(--ll,0px) + 1px) round max(0px,calc(var(--lrad,0px) - 1px)))}
.header-actions{display:flex;align-items:center;justify-content:end;gap:10px;grid-column:3}
.header-start{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 15px 0 18px;border-radius:var(--r-pill);background:linear-gradient(180deg,#fffdfa,#e1e2e5);color:#121316;font:600 14px/1 var(--font-body);letter-spacing:-.012em;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff,inset 0 -1px 0 #00000026,0 8px 24px -12px #d5d6d960;transition:transform var(--dur-bouncy) var(--spring-bouncy),box-shadow .45s var(--ease-out)}
.header-start .arrow{font-size:15px}
.header-start:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff,inset 0 -1px 0 #00000026,0 12px 30px -10px #d5d6d990}
.header-start:active{transform:scale(.95);transition-duration:.12s}
.menu-trigger{position:relative;display:grid;place-content:center;gap:5px;width:44px;height:44px;border-radius:50%;background:var(--glass-control);border:1px solid #ffffff1c;box-shadow:var(--rim-control),var(--shadow-control);-webkit-backdrop-filter:var(--blur-control);backdrop-filter:var(--blur-control);transition:transform var(--dur-bouncy) var(--spring-bouncy),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.menu-trigger:hover{border-color:#ffffff36}
.menu-trigger:active{transform:scale(.9);transition-duration:.12s}
.menu-trigger span{display:block;width:16px;height:1.6px;border-radius:2px;background:var(--text);transition:transform .6s var(--spring-bouncy)}
.menu-trigger[aria-expanded=true] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.menu-trigger[aria-expanded=true] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* The off-centre signal mark draws once, then breathes at a quiet cadence. */
.brand-symbol{display:block;flex:none;width:34px;height:34px;overflow:visible;transition:transform .7s var(--spring-bouncy),filter .6s var(--ease-out)}
.brand-link:hover .brand-symbol{transform:rotate(14deg) scale(1.06);filter:drop-shadow(0 0 10px #ffffff40)}
.brand-ray{stroke-dasharray:var(--ray-length);stroke-dashoffset:var(--ray-length);animation:brand-draw .8s var(--ray-delay) var(--ease-out) forwards,brand-breathe 6s var(--idle-delay) var(--ease-inout) infinite}
.brand-core{transform-origin:42px 42px;animation:brand-core-in var(--dur-bouncy) .5s var(--spring-bouncy) both,brand-core-idle 4.6s 1.6s var(--ease-inout) infinite}
.site-footer .brand-symbol g{stroke:#d9dce0}
.site-footer .brand-core{fill:#d9dce0}
@keyframes brand-draw{to{stroke-dashoffset:0}}
@keyframes brand-breathe{0%,88%,100%{opacity:1}92%{opacity:.45}96%{opacity:1}}
@keyframes brand-core-in{from{opacity:0;transform:scale(0)}}
@keyframes brand-core-idle{0%,84%,100%{transform:scale(1)}90%{transform:scale(1.4)}}
/* Home: the hero word is the logo. The small mark in the header settles in as the hero scrolls away, so the
   word hands over to the header instead of the logo being shown twice. site.js drives --brand-p where scroll
   timelines are missing. */
body[data-page=home] .site-header .brand-lockup{opacity:var(--brand-p,1);transform:translate3d(0,calc((1 - var(--brand-p,1)) * 16px),0) scale(calc(1 + (1 - var(--brand-p,1)) * .16));transition:none}
@supports (animation-timeline:scroll()){
  body[data-page=home] .site-header .brand-lockup{animation:brand-settle linear both;animation-timeline:scroll(root);animation-range:18vh 44vh}
  @keyframes brand-settle{from{opacity:0;transform:translate3d(0,12px,0) scale(1.12)}to{opacity:1;transform:none}}
  body[data-page=home] .site-header .bl{animation:brand-letter linear both;animation-timeline:scroll(root);animation-range:calc(22vh + var(--i) * 3.5vh) calc(36vh + var(--i) * 3.5vh)}
  body[data-page=home] .site-header .brand-period{animation:brand-dot linear both;animation-timeline:scroll(root);animation-range:40vh 52vh}
}
/* Each document carries its title for readers without JavaScript (a <noscript> style shows all of them); with
   scripts the page heading shows the chosen one. */
.legal-doc-title{display:none}
/* Without JavaScript the check page cannot build a command: its controls are hidden and a note offers the scripts. */
html:not(.js) :is(.check-main,.tool-tabs,.game-picker,.check-rail .rail-label,.menu-trigger){display:none}
.check-noscript{padding-block:24px 48px;max-width:760px}
.check-noscript h2{margin-bottom:12px}
.check-noscript ul{display:grid;gap:10px;margin:16px 0;padding-left:1.2em}
/* Long reading pages (documents, methodology): a hairline at the top of the window shows how far you have read. */
.read-progress{position:fixed;inset:0 0 auto;z-index:120;height:2px;background:linear-gradient(90deg,#ffffff26,#ffffffd9);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;display:none}
@supports (animation-timeline:scroll()){
  .read-progress{display:block;animation:read-progress linear both;animation-timeline:scroll(root)}
  @keyframes read-progress{to{transform:none}}
}
/* Keyboard focus on the hidden home logo shows it. */
body[data-page=home] .brand-link:focus-visible :is(.brand-lockup,.bl,.brand-period){animation:none!important;opacity:1;transform:none;clip-path:none}
/* Arriving from another page of the site: the logo is already there (the head script sets .brand-seen from the referrer). */
.brand-seen .site-header :is(.bl,.brand-period){animation:none}
.brand-seen .brand-ray{stroke-dashoffset:0;animation:brand-breathe 6s var(--idle-delay) var(--ease-inout) infinite}
.brand-seen .brand-core{animation:brand-core-idle 4.6s 1.6s var(--ease-inout) infinite}

/* ───────────────────────── Dialogs ───────────────────────── */
dialog{color:var(--text);max-width:none;max-height:none}
dialog::backdrop{background:#050609b8;opacity:0;transition:opacity .4s var(--ease-out)}
dialog.is-open::backdrop{opacity:1}
/* Backdrop blur is the costliest effect on a surface that moves or resizes, so panels open without it and gain it once settled (is-settled, set by site.js); the glass is dark enough that the change reads as the background softening. */
.trace-panel{position:fixed;margin:0;padding:0;border:0;border-radius:var(--r-xl);overflow:hidden;background:var(--glass-panel);box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff17,var(--shadow-panel);opacity:0;transform:translate(var(--from-x,0px),var(--from-y,0px)) scale(var(--from-scale,.6));transition:transform .32s var(--ease-in),opacity .24s var(--ease-in) .04s}
.trace-panel.is-open{opacity:1;transform:none;transition:transform var(--dur-smooth) var(--spring-smooth),opacity .3s var(--ease-out)}
.trace-panel.is-settled{-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel)}
/* The navigation menu opens out of the round trigger (Morph in spring.js):
   the dialog is only a frame positioned by site.js; .menu-body is the glass that grows. */
.site-menu{position:fixed;margin:0;padding:0;border:0;top:calc(var(--header-h) - 6px);right:max(var(--gutter),calc((100vw - var(--container))/2));bottom:auto;left:auto;width:min(380px,calc(100vw - 24px));height:auto;overflow:visible;background:none;transition:none}
.menu-body,.game-glass{isolation:isolate}
.morph-fill{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glass-control);transition:background-color .35s var(--ease-out)}
.menu-content::after{content:'';position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff1c;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out)}
.site-menu.is-settled .menu-content::after{opacity:1}
.menu-body{position:absolute;left:0;top:0;overflow:hidden;background:#ffffff26;transition:background-color .4s var(--ease-out)}
/* The drop shadow follows the clipped shape because it sits on the frame, outside the clip. */
.site-menu .menu-body{filter:none}
.menu-shadow{position:absolute;left:0;top:0;will-change:transform;border-radius:26px;box-shadow:0 30px 60px -26px #000000,0 12px 26px -16px #000000e6;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out)}
.site-menu.is-open .menu-shadow{opacity:1}
.site-menu.is-open .morph-fill{background:var(--glass-panel)}
.site-menu.is-settled .menu-body{-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel)}
.menu-content{position:absolute;left:0;top:0}
/* The close button stands where the trigger was; its bars turn into a cross. */
.menu-head .menu-close{width:44px;height:44px;background:none;box-shadow:none;margin:-3px -3px -3px 0}
.menu-head .menu-close:hover{background:#ffffff12}
.menu-close-lines{display:grid;gap:5px}
.menu-close-lines>span{display:block;width:16px;height:1.6px;border-radius:2px;background:var(--text);transition:transform .6s var(--spring-bouncy)}
.site-menu.is-open .menu-close-lines>span:first-child{transform:translateY(3.3px) rotate(45deg)}
.site-menu.is-open .menu-close-lines>span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.menu-head,.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 14px 22px;border-bottom:1px solid #ffffff12}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff14;color:var(--text-2);font-size:16px;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),transform .5s var(--spring-bouncy)}
.icon-button:hover{background:#ffffff1a;color:#ffffff}
.icon-button:active{transform:scale(.88);transition-duration:.12s}
.menu-links{display:grid;padding:8px}
.menu-links a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:15px 14px;border-radius:var(--r-md);font:450 22px/1.2 var(--font-display);letter-spacing:-.015em;transition:background-color .3s var(--ease-out),transform .5s var(--spring-bouncy)}
.menu-links a:hover{background:#ffffff0c}
.menu-links a:active{transform:scale(.975);transition-duration:.12s}
.menu-links a[aria-current]{background:#ffffff10;box-shadow:inset 0 0 0 1px #ffffff12}
.menu-links .arrow{font-size:16px;color:var(--text-3)}
.menu-links a:hover .arrow{color:var(--text);transform:translateX(3px)}
.menu-tail{display:grid;grid-template-columns:30px 1fr;gap:10px 14px;align-items:center;padding:16px 22px 20px;border-top:1px solid #ffffff10}
.menu-tail p{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.menu-tail .motion-toggle{grid-column:2;justify-self:start}
.route-glyph{position:relative;display:block;width:28px;height:24px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);border-top-right-radius:6px}
.route-glyph::after{content:'';position:absolute;right:-5px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.trace-panel{inset:0;margin:auto;width:min(680px,calc(100vw - 28px));height:fit-content;max-height:min(84vh,800px);overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;overscroll-behavior:contain}
.trace-panel h2{margin:26px 30px 18px;font:450 30px/1.15 var(--font-display);letter-spacing:-.02em}
.trace-panel #guide-body{padding:0 30px 10px}
.trace-panel #guide-body ol{padding-left:0;list-style:none;counter-reset:guide;display:grid;gap:12px}
.trace-panel #guide-body li{position:relative;padding-left:40px;counter-increment:guide;font-size:15px;line-height:1.7;color:var(--text-2)}
.trace-panel #guide-body li::before{content:counter(guide);position:absolute;left:0;top:1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff17;font:500 12px/1 var(--font-mono);color:var(--accent-soft)}
.trace-panel #guide-body p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--text-2)}
.trace-panel #guide-body strong{color:var(--text)}
.trace-panel code{padding:2px 6px;border-radius:6px;background:#ffffff10;font:13px var(--font-mono);color:var(--accent-soft);overflow-wrap:anywhere}
.panel-foot{display:flex;justify-content:flex-end;padding:16px 20px;margin-top:16px;border-top:1px solid #ffffff12}

/* ───────────────────────── Notification island ───────────────────────── */
.island{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));z-index:120;pointer-events:none;translate:-50% 0}
.island-glass{position:relative;clip-path:inset(0 var(--side,0px) 0 var(--side,0px) round 29px);display:flex;align-items:center;height:58px;border-radius:29px;overflow:hidden;background:linear-gradient(180deg,#ffffff10,#ffffff04),#151619;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff1a,0 22px 44px -20px #000000;transform-origin:50% 50%;will-change:transform,opacity,filter}
.island-glass::before{content:none}
.island-content{position:absolute;left:0;top:0;translate:var(--side,0px) 0;display:flex;align-items:center;gap:12px;height:58px;padding:0 22px 0 11px;white-space:nowrap}
.island-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:radial-gradient(circle at 30% 25%,#e2e3e666,#c9cacd33 60%),#202124;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #d5d6d950,0 0 22px #c9cacd40;color:#e7e8eb}
.island-icon svg{width:20px;height:20px}
.island-icon path{stroke-dasharray:20;stroke-dashoffset:var(--check,20)}
.island-text{display:grid;gap:2px}
.island-text strong{font:600 14.5px/1.2 var(--font-body);letter-spacing:-.015em;color:#ffffff}
.island-text small{font:450 12.5px/1.25 var(--font-body);color:var(--text-2)}

/* ───────────────────────── Home: hero ───────────────────────── */
.cinema-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;height:100svh;min-height:760px;max-height:1120px;padding-top:var(--header-h);overflow:hidden;background:#07090c;text-align:center;--scene:0}
.cinema-art{position:absolute;inset:-3%;z-index:-3;background:url('hero-trace.jpg') center 54%/cover no-repeat;opacity:.16;animation:art-drift 34s var(--ease-inout) infinite alternate}
.cinema-hero[data-atmosphere=webgl]>.cinema-art{opacity:.1}
.cinema-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#07090cf2 0%,#07090cc8 22%,#07090c33 60%,#07090c 100%)}
.trace-atmosphere{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease-out)}
.trace-atmosphere.is-live{opacity:1}
.cinema-copy{position:relative;z-index:5;padding-top:clamp(28px,6vh,84px);transform:translate3d(0,calc(var(--scene)*-70px),0);opacity:calc(1 - var(--scene)*1.5)}
.cinema-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 12px;border-radius:var(--r-pill);background:#151619;box-shadow:inset 0 1px 0 #ffffff10,inset 0 0 0 1px #ffffff14;font:500 11.5px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
/* The headline is set in Literata and cast in metal: chrome with a dark horizon band, and a highlight
   that slides after the pointer. site.js writes --sheen and --horizon on each metal line; registered as
   not inherited, a change restyles only those two elements. */
@property --sheen{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --horizon{syntax:'<percentage>';inherits:false;initial-value:50%}
.cinema-copy h1{margin:clamp(14px,2.4vh,24px) auto clamp(16px,2.4vh,22px);font:500 clamp(54px,min(6.3vw,10.8vh),104px)/1.06 var(--font-serif);letter-spacing:-.022em}
.cinema-copy h1 .title-line{width:fit-content;margin-inline:auto}
/* The painted box reaches past the line box, so descenders keep their metal. */
.cinema-copy h1 :is(.title-line:first-child,em){padding-block:.1em .16em;margin-block:-.1em -.16em;font-style:normal;-webkit-background-clip:text;background-clip:text;color:transparent;background-repeat:no-repeat;background-size:100% 100%,100% 170%;background-position:0 0,0 var(--horizon)}
.cinema-copy h1 .title-line:first-child{background-image:linear-gradient(102deg,#ffffff00 calc(var(--sheen) - 13%),#ffffffeb var(--sheen),#ffffff00 calc(var(--sheen) + 13%)),linear-gradient(180deg,#fbfcfd 0%,#f0f1f4 24%,#bdbec1 41%,#6b6c6f 49%,#424346 52%,#8f9093 60%,#dcdde0 76%,#f5f7f9 88%,#afb0b3 100%)}
.cinema-copy h1 em{background-image:linear-gradient(102deg,#ffffff00 calc(var(--sheen) - 13%),#ffffff9c var(--sheen),#ffffff00 calc(var(--sheen) + 13%)),linear-gradient(180deg,#d3d4d7 0%,#b9babd 24%,#86878a 41%,#494a4d 49%,#2f3033 52%,#67686b 60%,#a3a4a7 76%,#c3c4c7 88%,#838487 100%)}
.cinema-lead{max-width:540px;margin:0 auto;color:var(--text-2);font-size:17px;line-height:1.6}
.cinema-actions{position:relative;z-index:5;display:flex;justify-content:center;align-items:center;gap:30px;margin-top:clamp(30px,5vh,56px)}
.cinema-text-link{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 var(--font-body);color:var(--text);padding:10px 2px;text-decoration:underline;text-decoration-color:#ffffff38;text-underline-offset:7px;transition:text-decoration-color .3s var(--ease-out),color .3s var(--ease-out)}
.cinema-text-link:hover{color:#ffffff}
.cinema-text-link .arrow{font-size:15px}
/* The monolith sits on the floor of the scene; short windows crop its foot. */
.cinema-word{position:relative;z-index:3;flex:none;margin:0;padding-top:28px;pointer-events:none;font:800 clamp(200px,min(29vw,44vh),540px)/.8 var(--font-word);letter-spacing:-.055em;white-space:nowrap;transform:translate3d(0,calc(var(--scene)*110px),0)}
/* Where scroll timelines exist the parallax runs on the compositor and follows the scroll offset exactly; site.js drives --scene only as a fallback. */
@supports (animation-timeline:scroll()){
  .cinema-copy,.cinema-word{transform:none;opacity:1;animation:linear both;animation-timeline:scroll(root);animation-range:0px clamp(760px,100svh,1120px)}
  .cinema-copy{animation-name:hero-copy-away}
  .cinema-word{animation-name:hero-word-away}
  @keyframes hero-copy-away{0%{transform:translate3d(0,0,0);opacity:1}66.667%{opacity:0}100%{transform:translate3d(0,-70px,0);opacity:0}}
  @keyframes hero-word-away{to{transform:translate3d(0,110px,0)}}
}
.cinema-word>span{display:block;background:linear-gradient(180deg,#e0e1e4 0%,#b3b4b7 34%,#6a6b6e 70%,#292a2d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.motion-toggle{position:relative;height:36px;padding:0 14px;border-radius:var(--r-pill);background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff17;font:500 12.5px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-2);white-space:nowrap;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),transform .5s var(--spring-bouncy)}
.motion-toggle:hover{background:#ffffff12;color:#ffffff}
.motion-toggle:active{transform:scale(.94);transition-duration:.12s}
.motion-toggle[aria-pressed=true]{color:var(--accent-soft);box-shadow:inset 0 0 0 1px #d5d6d955}
.motion-toggle:disabled{opacity:.6;cursor:default}
.trace-embers{position:absolute;inset:15% 0 5%;z-index:2;overflow:hidden;pointer-events:none}
.trace-embers i{position:absolute;left:var(--ember-x);bottom:0;width:2px;height:2px;border-radius:50%;background:#cbcccf;box-shadow:0 0 8px #d0d1d466;opacity:0;animation:ember-rise var(--ember-time) var(--ember-delay) linear infinite}
.trace-embers i:nth-child(3n){width:3px;height:3px;filter:blur(1px)}
[data-atmosphere=fallback]::before{content:'';position:absolute;inset:5% -15% -10%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 35% 70%,#5e5f6266,transparent 42%),radial-gradient(ellipse at 70% 45%,#1a1b1edd,transparent 40%);filter:blur(35px);opacity:.5;animation:fallback-cloud 16s var(--ease-inout) infinite alternate}

/* Hero arrival: one choreographed sequence, each layer on the same spring. */
.js .cinema-kicker{animation:rise-in var(--dur-gentle) var(--spring-gentle) .05s backwards}
.js .cinema-copy h1 .title-line{display:block;animation:title-rise var(--dur-gentle) var(--spring-gentle) calc(.14s + var(--line-index,0)*.09s) backwards}
.js .cinema-copy h1 .title-line+.title-line{--line-index:1}
.js .cinema-lead{animation:rise-in var(--dur-gentle) var(--spring-gentle) .36s backwards}
.js .cinema-actions{animation:rise-in var(--dur-gentle) var(--spring-gentle) .46s backwards}
.js .cinema-word>span{animation:monolith 1.7s var(--spring-gentle) .22s backwards}
/* The word in 3D (hero3d.js): a canvas over the whole first screen, an overlay canvas for the scope, and a poster of
   the same composition placed on the word box. The plain word stays underneath: it gives the layout its size and is
   what you see without JavaScript. The canvas fades out at the bottom so the glass is never cut by the section edge. */
.hero3d{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.hero3d.is-live{opacity:1}
.hero3d-layer{position:absolute;inset:0}
.hero3d-canvas,.hero3d-hud{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The poster box, in units of the word's font size (em): 3D word width 3.188em from the glyph advances, the DOM run 3.133em
   (centred), baseline .78em below the line top (line-height .8, ascender .98, descender .22); the poster spans
   -8%…+108% of the 3D width and from .62 above to .14 below the baseline, like the bake in scripts/hero3d-build.mjs. */
.hero3d-poster{display:none;position:absolute;left:calc(50% - 1.8215em);top:calc(28px - 1.1966em);width:3.6981em;height:2.4229em;max-width:none;pointer-events:none;user-select:none;transition:opacity .8s var(--ease-out)}
/* With scripts on, the poster is the word; without them, or if it fails to load (hero3d.js removes it), the text is.
   Entrance: the word is swept out of the dark from left to right (a soft-edged mask moving across), rising and coming
   into focus as it goes; a glint of light then runs over the chrome (::after below). */
.js .hero3d-poster{display:block;-webkit-mask:linear-gradient(90deg,#000 45%,transparent 55%) 0 0/250% 100% no-repeat;mask:linear-gradient(90deg,#000 45%,transparent 55%) 0 0/250% 100% no-repeat;animation:poster-reveal 1.6s var(--ease-inout) .15s backwards}
@keyframes poster-reveal{
  0%{-webkit-mask-position:100% 0;mask-position:100% 0;transform:translate3d(0,5%,0) scale(1.06);filter:blur(10px) brightness(.6)}
  55%{filter:blur(0) brightness(1.25)}
  100%{-webkit-mask-position:0 0;mask-position:0 0;transform:none;filter:none}
}
/* The glint: a band of light confined to the letters by using the poster's own alpha as its mask. */
.js .cinema-word::after{content:'';position:absolute;left:calc(50% - 1.8215em);top:calc(28px - 1.1966em);z-index:1;width:3.6981em;height:2.4229em;pointer-events:none;opacity:0;background:linear-gradient(100deg,#fff0 40%,#ffffff8c 50%,#fff0 60%) 100% 0/300% 100% no-repeat;mix-blend-mode:plus-lighter;-webkit-mask:url(hero-poster-960.webp) 0 0/100% 100% no-repeat;mask:url(hero-poster-960.webp) 0 0/100% 100% no-repeat;animation:word-glint 1.2s var(--ease-inout) 1.45s}
@keyframes word-glint{0%,100%{opacity:1}0%{background-position:100% 0}100%{background-position:0 0}}
.cinema-word.is-3d::after{display:none}
.js .hero3d-poster+span{opacity:0;animation:none}
.cinema-word.is-3d>span{opacity:0;animation:none}
/* Hand-over: the canvas fades in under the poster (.3s), then the poster fades out over it, so the word never dims. */
.cinema-word.is-3d .hero3d-poster{opacity:0;transition:opacity .8s var(--ease-out) .15s}
/* The canvas layer moves with the word's parallax, so the scene stays on the word's place (hero3d.js does it without
   scroll timelines); the stage around it, with the fade mask, stays put. */
@supports (animation-timeline:scroll()){
  .hero3d-layer{animation:hero-word-away linear both;animation-timeline:scroll(root);animation-range:0px clamp(760px,100svh,1120px)}
}
@media(forced-colors:active){.hero3d,.js .hero3d-poster,.js .cinema-word::after{display:none}.cinema-word>span{opacity:1!important}}

/* ───────────────────────── Home: sections ───────────────────────── */
.display-m,.ecosystem-heading h2{font:420 var(--display-m)/1.03 var(--font-display);letter-spacing:var(--track-display)}
.display-l{font:420 var(--display-l)/1.02 var(--font-display);letter-spacing:var(--track-display)}
.display-m em,.display-l em,.statement-title em,.section-title h2 em,.projects-end h2 em{font-style:normal;color:var(--muted-heading)}
/* Methods: a comparison, one row per method. Each cell says what the method reads, what rights it wants, where the result goes. */
.methods{padding-top:152px;padding-bottom:152px;scroll-margin-top:20px}
.methods-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:18px 7%;align-items:end;margin-bottom:56px}
.methods-head>.eyebrow{grid-column:1/-1}
.methods-head h2{margin:0}
.methods-head>p:not(.eyebrow){margin-bottom:8px}
.methods-head>p:not(.eyebrow),.ecosystem-heading>p:not(.eyebrow){max-width:400px;color:var(--text-2);font-size:16.5px;line-height:1.65}
.methods-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.method-row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(240px,1.15fr) repeat(3,minmax(0,1fr)) 40px;gap:36px;align-items:start;padding:30px 10px 32px 2px;border-bottom:1px solid var(--line);transition:background-color .45s var(--ease-out)}
.method-link{color:var(--text);outline:none}
.method-link::after{content:'';position:absolute;inset:0;z-index:2}
.method-row:has(.method-link:focus-visible){outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.method-row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.method-row:hover{background:#ffffff05}
.method-row::before,.game-row::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,50%),#ffffff0c,transparent 62%);opacity:0;transition:opacity .5s var(--ease-out)}
.method-row:hover::before,.game-row:hover::before{opacity:1}
.method-row:hover::after{transform:scaleX(1)}
.method-name{display:flex;align-items:flex-start;gap:16px}
.method-name>span:last-child{display:grid;gap:6px;padding-top:4px}
.method-name .method-link{font:450 27px/1.05 var(--font-display);letter-spacing:-.02em;color:var(--text)}
.method-name em{font:500 11px/1.4 var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.method-cell{display:grid;gap:9px;padding-top:6px;font-size:14px;line-height:1.55;color:var(--text-2)}
.method-cell small{font:500 10.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.method-row>.arrow,.game-row>.arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff1f;font-size:15px;color:var(--text-2);transition:transform .6s var(--spring-bouncy),background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.method-row:hover>.arrow,.game-row:hover>.arrow{background:var(--accent);color:#0b0c0e;box-shadow:none;transform:scale(1.06)}
.method-row:hover>.arrow .glyph,.game-row:hover>.arrow .glyph{transform:translateX(2px)}
.arrow .glyph{transition:transform .5s var(--spring-bouncy)}

/* Tool instruments: a running prompt, a live cursor, a checked lens. */
/* Tool instruments. Tiles tilt toward the pointer and their glyph layers part
   in depth; each tool has its own select, hover and idle choreography:
   PowerShell flips in and types, CMD boots and keeps typing, the manual
   reticle focuses, sweeps like a radar and re-checks. */
@property --mini-rot{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --mini-scale{syntax:'<number>';inherits:false;initial-value:1}
@property --mini-lift{syntax:'<length>';inherits:false;initial-value:0px}
.method-icon,.tool-mini{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff1c,0 8px 18px -8px #000000cc;transform:perspective(170px) rotateX(calc(var(--py,0)*-13deg)) rotateY(calc(var(--px,0)*15deg)) translateY(var(--mini-lift)) rotate(var(--mini-rot)) scale(var(--mini-scale));transition:--mini-rot .8s var(--spring-bouncy),--mini-scale .8s var(--spring-bouncy),--mini-lift .7s var(--spring-bouncy),box-shadow .45s var(--ease-out)}
.method-icon{width:48px;height:48px;border-radius:15px}
.tool-mini{width:38px;height:38px;border-radius:12px}
.method-icon::before,.tool-mini::before{content:'';position:absolute;inset:-30%;z-index:-1;background:radial-gradient(circle at 30% 20%,#ffffff33,transparent 55%);opacity:.22;transform:rotate(-24deg)}
.powershell-icon,.powershell-mini{background:linear-gradient(160deg,#9394973d,#28292c33);color:#d1d2d5;--tool-glow:#cacbce}
.cmd-icon,.cmd-mini{background:linear-gradient(160deg,#bfc0c32b,#2a2b2e26);color:#dfe0e3;--tool-glow:#d9dadd}
.manual-icon,.manual-mini{background:linear-gradient(160deg,#bfc0c330,#28292c30);color:#cbcccf;--tool-glow:#cfd0d3}
.method-row:hover .method-icon{--mini-lift:-2px;--mini-rot:-6deg;--mini-scale:1.05;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px color-mix(in srgb,var(--tool-glow) 55%,transparent),0 12px 26px -10px #000000,0 0 26px color-mix(in srgb,var(--tool-glow) 22%,transparent)}
.tool-tab:hover .tool-mini{--mini-lift:-1px;--mini-scale:1.04}
.tool-tab[aria-selected=true] .tool-mini{--mini-rot:-5deg;--mini-scale:1.07;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px color-mix(in srgb,var(--tool-glow) 60%,transparent),0 10px 22px -8px #000000,0 0 22px color-mix(in srgb,var(--tool-glow) 32%,transparent);animation:mini-select .95s var(--ease-out)}
.tool-tab[aria-selected=true] .tool-mini::before{animation:mini-sheen .95s var(--ease-out)}
@keyframes mini-select{0%{box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px var(--tool-glow),0 10px 22px -8px #000000,0 0 0 0 color-mix(in srgb,var(--tool-glow) 70%,transparent)}100%{box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px color-mix(in srgb,var(--tool-glow) 60%,transparent),0 10px 22px -8px #000000,0 0 0 16px transparent}}
@keyframes mini-sheen{0%{transform:translate(-60%,-40%) rotate(-24deg);opacity:0}35%{opacity:1}100%{transform:rotate(-24deg);opacity:.6}}

.tool-glyph{display:block;width:32px;height:32px;overflow:visible;filter:drop-shadow(0 3px 4px #00000077)}
.method-icon .tool-glyph{width:32px;height:32px}
.tool-glyph path,.tool-glyph rect,.tool-glyph circle{vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.tg-back{translate:calc(var(--px,0)*-1.6px) calc(var(--py,0)*-1.6px)}
.tg-mid{translate:calc(var(--px,0)*1px) calc(var(--py,0)*1px)}
.tg-front{translate:calc(var(--px,0)*2.8px) calc(var(--py,0)*2.8px)}
.tool-glyph__plate{fill:#27282b;stroke:#d8d9dc9c;stroke-width:1.1}
.tool-glyph__rim{stroke:#f3f4f79c;stroke-width:1.1;stroke-linecap:round}
.tool-glyph__prompt,.tool-glyph__run{stroke:#f7f8fb;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .6s var(--spring-bouncy)}
.tool-glyph__trace{stroke:#e0e1e4;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:5 24;stroke-dashoffset:23}

/* PowerShell: the plate flips in, the prompt lands, the command types itself. */
.tool-glyph--powershell .tool-glyph__run{stroke-dasharray:8 24}
.tool-tab[aria-selected=true] .tool-glyph--powershell{animation:ps-flip .9s var(--ease-out) both}
.tool-tab[aria-selected=true] .tool-glyph--powershell .tool-glyph__prompt{animation:ps-prompt-in .7s .18s var(--ease-out) both,ps-enter 3.8s 1.3s var(--ease-inout) 1}
.tool-tab[aria-selected=true] .tool-glyph--powershell .tool-glyph__run,.methods-list[data-motion-active] .tool-glyph--powershell .tool-glyph__run{animation:ps-type .5s .38s var(--ease-out) both,ps-run 3.8s 1.3s var(--ease-inout) 1}
.methods-list[data-motion-active] .tool-glyph--powershell .tool-glyph__prompt{animation:ps-enter 3.8s 1.3s var(--ease-inout) 1}
.tool-tab[aria-selected=true] .tool-glyph--powershell .tool-glyph__trace,.methods-list[data-motion-active] .tool-glyph--powershell .tool-glyph__trace{animation:ps-trace 1.9s linear 2}
.method-row:hover .tool-glyph--powershell .tool-glyph__prompt,.tool-tab:hover .tool-glyph--powershell .tool-glyph__prompt{translate:2.5px 0}
@keyframes ps-flip{0%{transform:perspective(90px) rotateY(-80deg) scale(.8);opacity:.15}55%{transform:perspective(90px) rotateY(14deg) scale(1.06);opacity:1}78%{transform:perspective(90px) rotateY(-5deg) scale(.99)}100%{transform:none}}
@keyframes ps-prompt-in{0%{transform:translateX(-8px);opacity:0}60%{transform:translateX(2px);opacity:1}100%{transform:none}}
@keyframes ps-type{from{stroke-dashoffset:8}to{stroke-dashoffset:0}}
@keyframes ps-run{0%,10%{stroke-dashoffset:8}40%,80%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:8}}
@keyframes ps-enter{0%,40%,54%,100%{transform:none}46%{transform:translateX(3px) scale(1.12)}}
@keyframes ps-trace{from{stroke-dashoffset:29}to{stroke-dashoffset:-29}}

/* CMD: the window boots, its lights come on in turn, text types behind a caret. */
.tool-glyph--cmd .tool-glyph__plate{fill:#2b2c2f;stroke:#dcdde0a6;transform-origin:50% 0}
.tool-glyph--cmd .tool-glyph__dot{fill:#d0d1d4;transition:scale .5s var(--spring-bouncy)}
.tool-glyph--cmd .tool-glyph__dot:nth-of-type(2){fill:#dfe0e3}
.tool-glyph--cmd .tool-glyph__dot:nth-of-type(3){fill:#dadbde}
.tool-glyph--cmd .tool-glyph__run{stroke-dasharray:9 24}
.tool-glyph--cmd .tool-glyph__cursor{stroke:#e0e1e4;stroke-width:2.6;stroke-linecap:round}
.tool-tab[aria-selected=true] .tool-glyph--cmd .tool-glyph__plate{animation:cmd-boot .65s var(--ease-out) both}
.tool-tab[aria-selected=true] .tool-glyph--cmd .tool-glyph__dot{animation:cmd-light .45s calc(.25s + var(--n,0)*.1s) var(--ease-out) both}
.tool-glyph--cmd .tool-glyph__dot:nth-of-type(2){--n:1}.tool-glyph--cmd .tool-glyph__dot:nth-of-type(3){--n:2}
.tool-tab[aria-selected=true] .tool-glyph--cmd .tool-glyph__run,.methods-list[data-motion-active] .tool-glyph--cmd .tool-glyph__run{animation:cmd-type 3.4s .7s var(--ease-inout) 1}
.tool-tab[aria-selected=true] .tool-glyph--cmd .tool-glyph__cursor,.methods-list[data-motion-active] .tool-glyph--cmd .tool-glyph__cursor{animation:cmd-caret 3.4s .7s var(--ease-inout) 1,cmd-blink 1s steps(2,jump-none) infinite}
.method-row:hover .tool-glyph--cmd .tool-glyph__dot,.tool-tab:hover .tool-glyph--cmd .tool-glyph__dot{scale:1.45;transition-delay:calc(var(--n,0)*60ms)}
@keyframes cmd-boot{0%{transform:scaleY(.12);opacity:.3}60%{transform:scaleY(1.06);opacity:1}100%{transform:none}}
@keyframes cmd-light{0%{fill:#424346;transform:scale(.4)}70%{transform:scale(1.5)}100%{transform:none}}
@keyframes cmd-type{0%,12%{stroke-dashoffset:9}46%,76%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:9}}
@keyframes cmd-caret{0%,12%{transform:translateX(-9px)}46%,76%{transform:none}92%,100%{transform:translateX(-9px)}}
@keyframes cmd-blink{0%{opacity:1}100%{opacity:.15}}

/* Manual: the reticle focuses, sweeps like a radar and re-checks now and then. */
.tool-glyph--manual .tool-glyph__ring,.tool-glyph--manual .tool-glyph__arc{stroke:#cdced1;stroke-width:1.5;stroke-linecap:round;transform-box:view-box;transform-origin:24px 24px}
.tool-glyph--manual .tool-glyph__ring{stroke-dasharray:88 120}
.tool-glyph--manual .tool-glyph__arc{stroke-width:2.3}
.tool-glyph--manual .tool-glyph__cross{stroke:#cdced188;stroke-width:1.1;stroke-linecap:round;transform-box:view-box;transform-origin:24px 24px}
.tool-glyph--manual .tool-glyph__prompt{stroke:#e9eaed;stroke-width:2.5;stroke-dasharray:27;stroke-dashoffset:0}
.tool-glyph--manual .tool-glyph__node{stroke:#d8d9dc36;stroke-width:1;fill:#cccdd00b}
.tool-glyph--manual .tg-mid{transform-box:view-box;transform-origin:24px 24px;transition:rotate .9s var(--spring-bouncy),scale .9s var(--spring-bouncy)}
.method-row:hover .tool-glyph--manual .tg-mid,.tool-tab:hover .tool-glyph--manual .tg-mid{rotate:45deg;scale:1.12}
.tool-tab[aria-selected=true] .tool-glyph--manual .tool-glyph__ring{animation:manual-focus .9s var(--ease-out) both}
.tool-tab[aria-selected=true] .tool-glyph--manual .tool-glyph__cross{animation:manual-converge .8s .12s var(--ease-out) both}
.tool-tab[aria-selected=true] .tool-glyph--manual .tool-glyph__arc,.methods-list[data-motion-active] .tool-glyph--manual .tool-glyph__arc{animation:manual-arc-in .9s var(--ease-out) both,manual-spin 7s 1s var(--ease-inout) 1}
.tool-tab[aria-selected=true] .tool-glyph--manual .tool-glyph__prompt,.methods-list[data-motion-active] .tool-glyph--manual .tool-glyph__prompt{animation:manual-check-in .6s .45s var(--ease-out) both,manual-recheck 5.2s 1.6s var(--ease-inout) 1}
.tool-tab[aria-selected=true] .tool-glyph--manual .tool-glyph__node,.methods-list[data-motion-active] .tool-glyph--manual .tool-glyph__node{animation:manual-lens 4.2s var(--ease-inout) 2}
.manual-mini::after,.manual-icon::after{content:'';position:absolute;inset:3px;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 280deg,#cbcccf2e 340deg,#d8d9dc66 360deg);opacity:0;transition:opacity .5s var(--ease-out)}
.tool-tab[aria-selected=true] .manual-mini::after,.methods-list[data-motion-active] .manual-icon::after{opacity:1;animation:radar 3.2s linear infinite}
@keyframes manual-focus{from{stroke-dashoffset:88;transform:rotate(-90deg)}to{stroke-dashoffset:0;transform:none}}
@keyframes manual-converge{0%{transform:scale(1.8) rotate(-30deg);opacity:0}65%{transform:scale(.92);opacity:1}100%{transform:none}}
@keyframes manual-arc-in{from{transform:rotate(-200deg);opacity:.2}to{transform:none;opacity:1}}
@keyframes manual-spin{to{transform:rotate(1turn)}}
@keyframes manual-check-in{0%{stroke-dashoffset:27}100%{stroke-dashoffset:0}}
@keyframes manual-recheck{0%,66%{stroke-dashoffset:0}74%{stroke-dashoffset:27}80%{stroke-dashoffset:27}94%,100%{stroke-dashoffset:0}}
@keyframes manual-lens{0%,100%{fill:#cccdd00b;stroke:#d8d9dc36}50%{fill:#cccdd020;stroke:#d8d9dc73}}
@keyframes radar{to{transform:rotate(1turn)}}

/* The principle: one sentence at display size over a huge outlined word that drifts against the scroll. */
.night-statement{position:relative;isolation:isolate;overflow:clip;padding:156px 0 136px;background:radial-gradient(ellipse 60% 90% at 86% 38%,#16171a,transparent 70%),var(--bg-raised);border-block:1px solid var(--line)}
.night-statement .container{position:relative;z-index:3}
.statement-title{margin:22px 0 68px;font:400 var(--display-xl)/.98 var(--font-display);letter-spacing:-.03em}
.night-ghost{position:absolute;right:0;bottom:-.1em;left:0;z-index:0;overflow:clip;pointer-events:none;font:400 clamp(170px,23vw,400px)/.82 var(--font-display);letter-spacing:-.045em;white-space:nowrap;text-align:right;color:transparent;-webkit-text-stroke:1px #ffffff17}
.night-ghost span{display:inline-block;transform:translate3d(6%,0,0)}
@supports (animation-timeline:view()){.night-ghost span{animation:ghost-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}}
@keyframes ghost-drift{from{transform:translate3d(8%,0,0)}to{transform:translate3d(-12%,0,0)}}
.night-foot{display:flex;justify-content:space-between;align-items:end;gap:32px;padding-top:26px;border-top:1px solid var(--line-2)}
.night-foot>p{max-width:560px;color:var(--text-2);font-size:16.5px;line-height:1.6}

/* Games: the name is the row; it slides a little when the row is pointed at (no weight change: that re-lays the text). */
.ecosystem{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:0 5%;padding-top:152px;padding-bottom:152px}
.ecosystem-heading{align-self:start;position:sticky;top:calc(var(--header-h) + 40px)}
.ecosystem-heading h2{margin:18px 0 24px;font-size:clamp(36px,2.6vw + 6px,52px)}
.ecosystem-all{grid-column:2;justify-self:start}
.ecosystem-list{margin:0 0 28px;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.game-row{position:relative;isolation:isolate;display:grid;grid-template-columns:max-content minmax(0,1fr) 40px;align-items:center;gap:40px;padding:32px 10px 32px 2px;border-bottom:1px solid var(--line-2);transition:background-color .45s var(--ease-out)}
.game-row::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:linear-gradient(90deg,var(--accent),#ffffff00 70%);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.game-row:hover{background:#ffffff05}
.game-row:hover::after{transform:scaleX(1)}
.game-name{display:block;white-space:nowrap;font:400 clamp(30px,2.5vw,44px)/1.05 var(--font-display);letter-spacing:-.025em;transition:transform .7s var(--spring-bouncy)}
.game-row:hover .game-name{transform:translateX(10px)}
.game-row small{font-size:14.5px;color:var(--text-2)}
.final-cta{position:relative;isolation:isolate;overflow:hidden;padding:164px 0 172px;text-align:center;background:#0d0e11;border-top:1px solid var(--line)}
.final-cta::before{content:'';position:absolute;inset:-40% -10%;z-index:-1;background:radial-gradient(ellipse 40% 45% at 50% 55%,#b1b2b524,transparent 70%);animation:ambient 22s var(--ease-inout) infinite alternate}
.trace-field{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 78% 90% at 50% 50%,#000000 45%,transparent 100%);mask-image:radial-gradient(ellipse 78% 90% at 50% 50%,#000000 45%,transparent 100%);opacity:0;animation:fade-to 2.4s var(--ease-out) .2s forwards}
.final-cta[data-field=live]{cursor:crosshair}
.final-cta .container{position:relative}
.final-cta h2{margin:0;text-shadow:0 2px 30px var(--bg),0 0 60px var(--bg)}
.final-cta.is-pulsed::before{animation:ambient 22s var(--ease-inout) infinite alternate,field-flare .9s var(--ease-out)}
@keyframes field-flare{0%{filter:brightness(2.4) saturate(1.3)}100%{filter:none}}

/* ───────────────────────── Inner page intros ───────────────────────── */
.page-intro{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;margin:0;padding:calc(var(--header-h) + 76px) max(var(--gutter),calc((100% - var(--container))/2)) 80px;background:#0d0e11;border-bottom:1px solid var(--line)}
.page-intro .eyebrow,.intro-row{position:relative;z-index:3}
.intro-row{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-top:28px}
.intro-row h1{font:420 var(--display-xl)/.98 var(--font-display);letter-spacing:-.03em}
.intro-row>p{max-width:440px;margin-bottom:10px;color:var(--text-2);font-size:16.5px;line-height:1.65}
.js .page-intro .eyebrow{animation:rise-in var(--dur-gentle) var(--spring-gentle) .04s backwards}
.js .intro-row h1{animation:title-rise var(--dur-gentle) var(--spring-gentle) .12s backwards}
.js .intro-row>p{animation:rise-in var(--dur-gentle) var(--spring-gentle) .3s backwards}
.js .legal-main>:is(.eyebrow,h1,.legal-date,.legal-banner,article){animation:rise-in var(--dur-gentle) var(--spring-gentle) calc(.06s + var(--i,0)*.07s) backwards}
.js .legal-main>h1{--i:1}.js .legal-main>.legal-date{--i:2}.js .legal-main>.legal-banner{--i:3}.js .legal-main>article{--i:4}
body[data-page=check] .page-intro{background:radial-gradient(ellipse 30% 100% at 96% 60%,#1e1f22d6,transparent 96%),radial-gradient(ellipse 36% 90% at 3% 20%,#17181ba9,transparent 95%),#0b0c0f;transition:border-bottom-color .9s var(--ease-out)}
body[data-page=methodology] .page-intro{background:radial-gradient(ellipse 50% 140% at 20% 90%,#202124b9,transparent 85%),radial-gradient(ellipse 43% 110% at 88% 5%,#1b1c1fbc,transparent 90%),#0c0d10}
body[data-page=projects] .page-intro{background:radial-gradient(ellipse 32% 110% at 83% 48%,#1d1e21a0,transparent 90%),radial-gradient(ellipse 35% 90% at 9% 85%,#1a1b1ec9,transparent 90%),#0d0e11}
body[data-page=tools] .page-intro{background:radial-gradient(ellipse 18% 125% at 43% 0%,#2a2b2e88,transparent 90%),radial-gradient(ellipse 35% 120% at 92% 96%,#1c1d209c,transparent 88%),#0c0d10}
body[data-page=check][data-terminal-mode=powershell] .page-intro{border-bottom-color:#b5b6b938}
body[data-page=check][data-terminal-mode=cmd] .page-intro{border-bottom-color:#c5c6c940}
body[data-page=check][data-terminal-mode=manual] .page-intro{border-bottom-color:#a8a9ac40}
body[data-page=check] .page-intro[data-atmosphere=fallback]::before{background:radial-gradient(ellipse 27% 64% at 12% 78%,#38393ca1,transparent 100%),radial-gradient(ellipse 27% 71% at 83% 50%,#30313495,transparent 100%),radial-gradient(ellipse 22% 44% at 48% 100%,#30313482,transparent 100%)}
body[data-page=methodology] .page-intro[data-atmosphere=fallback]::before{background:radial-gradient(ellipse 35% 75% at 21% 72%,#41424593,transparent 100%),radial-gradient(ellipse 29% 55% at 87% 20%,#3a3b3e91,transparent 100%)}
body[data-page=projects] .page-intro[data-atmosphere=fallback]::before{background:radial-gradient(ellipse 20% 70% at 7% 80%,#68696c6e,transparent 100%),radial-gradient(ellipse 20% 62% at 52% 8%,#43444761,transparent 100%),radial-gradient(ellipse 25% 75% at 95% 64%,#5e5f6278,transparent 100%)}
body[data-page=tools] .page-intro[data-atmosphere=fallback]::before{background:radial-gradient(ellipse 18% 80% at 30% 80%,#65666973,transparent 100%),radial-gradient(ellipse 20% 78% at 77% 38%,#5c5d606b,transparent 100%)}

/* ───────────────────────── Check: game picker ───────────────────────── */
.game-picker{position:relative;z-index:10;margin-bottom:26px}
.rail-label{display:block;margin:0 0 10px;padding:0;font:500 11.5px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label);cursor:default}
.js .game-native-select{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;opacity:0!important;pointer-events:none!important}
.game-select{position:relative;z-index:20;width:100%}
/* The trigger is only content; its capsule is .game-glass, which pours into the list. */
.game-select-trigger{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:50px;padding:0 9px 0 18px;border-radius:17px;background:none;font:560 15px/1 var(--font-body);letter-spacing:-.012em;text-align:left;color:var(--text)}
.game-value-window{position:relative;display:block;flex:1;min-width:0;height:22px;overflow:hidden}
.game-value{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap}
.game-chevron{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff0c;box-shadow:inset 0 0 0 1px #ffffff12;font-size:15px;color:var(--text-2);transition:transform .7s var(--spring-bouncy),background-color .3s var(--ease-out),color .3s var(--ease-out)}
.game-select-trigger[aria-expanded=true] .game-chevron{transform:rotate(-180deg);background:#ffffff18;color:#ffffff}
.game-surface{position:absolute;inset:0;z-index:1;pointer-events:none;--glass-x:70px;--glass-y:0px}
/* The surface lets the page through until it opens; then the glass and its list take the pointer. */
.game-surface.is-open .game-glass{background-color:#ffffff33;pointer-events:auto}
.game-surface.is-open .game-glass>.morph-fill{background:var(--glass-panel)}
.game-surface{filter:drop-shadow(0 12px 22px #00000080)}
/* At rest the glass is the trigger's capsule; open, it is the whole list. */
.game-glass{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:#ffffff2e;transition:background-color .35s var(--ease-out)}
.game-select:hover .game-glass{background-color:#ffffff4d}
.game-glass>.morph-fill{border-radius:inherit}
.game-divider{position:absolute;left:14px;right:14px;height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,#ffffff26 20%,#ffffff26 80%,transparent)}
.game-list{position:absolute;left:0;top:0;z-index:1;display:grid;gap:2px;padding:6px}
.game-list:not(.is-lit) .game-list-lens{visibility:hidden}
.game-list-lens{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:#ffffff21;clip-path:inset(var(--lt,0) var(--lr,100%) var(--lb,100%) var(--ll,0) round var(--lrad,0px))}
.game-list-lens::before{content:'';position:absolute;inset:0;background:#26272a;clip-path:inset(calc(var(--lt,0px) + 1px) calc(var(--lr,100%) + 1px) calc(var(--lb,100%) + 1px) calc(var(--ll,0px) + 1px) round max(0px,calc(var(--lrad,0px) - 1px)))}
.game-option{position:relative;z-index:1;display:flex;align-items:center;gap:13px;height:46px;padding:0 14px;border-radius:13px;font:540 15px/1 var(--font-body);letter-spacing:-.012em;color:var(--text-2);cursor:pointer;user-select:none;transition:color .2s var(--ease-out)}
.game-option.is-active{color:#ffffff}
.game-option-label{white-space:nowrap}
.game-option-check{display:grid;place-items:center;width:18px;height:18px;margin-left:auto;color:var(--accent-soft);opacity:0;transform:scale(.4);transition:opacity .25s var(--ease-out),transform .6s var(--spring-bouncy)}
.game-option.is-selected .game-option-check{opacity:1;transform:none}
.game-option.is-selected{color:#ffffff}

/* ───────────────────────── Check: layout, rail, tabs ───────────────────────── */
.check-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:56px;padding-top:44px;padding-bottom:110px}
.check-rail{align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
.tool-tabs{position:relative;display:grid;gap:4px;padding:5px;border-radius:22px;background:#ffffff05;box-shadow:inset 0 0 0 1px #ffffff0f}
.tab-lens{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:#ffffff24;clip-path:inset(var(--lt,0) var(--lr,100%) var(--lb,100%) var(--ll,0) round var(--lrad,0px))}
.tab-lens::before{content:'';position:absolute;inset:0;background:#222326;clip-path:inset(calc(var(--lt,0px) + 1px) calc(var(--lr,100%) + 1px) calc(var(--lb,100%) + 1px) calc(var(--ll,0px) + 1px) round max(0px,calc(var(--lrad,0px) - 1px)))}
.tool-tab{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 12px;border-radius:17px;text-align:left;color:var(--text-2);transition:color .3s var(--ease-out),transform var(--dur-bouncy) var(--spring-bouncy)}
.tool-tab:hover{color:var(--text)}
.tool-tab:active{transform:scale(.97);transition-duration:.14s}
.tool-tab[aria-selected=true]{color:#ffffff}
.tool-tab strong{font:580 15px/1.2 var(--font-body);letter-spacing:-.015em;white-space:nowrap}
.rail-tool-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font:560 14px/1.45 var(--font-body);color:var(--text);transition:color .3s var(--ease-out)}
.rail-tool-link:hover{color:var(--accent-soft)}

/* ───────────────────────── Check: main panel ───────────────────────── */
.check-main{min-width:0;border-radius:var(--r-md)}
.check-main:focus-visible{outline-offset:12px}
.terminal{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#191a1d,#0e0f12);box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff17,0 34px 70px -34px #000000,0 12px 26px -16px #000000cc}
.terminal::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#d8d9dc08 42%,#e7e8eb4d 50%,#dbdcdf10 56%,transparent 68%);transform:translateX(-120%);opacity:0}
.terminal.is-captured::after{animation:terminal-sweep 1s var(--ease-out)}
.terminal>*{position:relative;z-index:1}
.terminal-heading{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #ffffff10;font:500 12px/1.2 var(--font-mono);color:var(--text-3)}
.terminal-heading #terminal-title{margin-right:auto;color:var(--text-2)}
.terminal-indicator{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #c9cacdaa}
.terminal-indicator::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:live-ping 3.2s 1s var(--ease-out) infinite}
.terminal-body{display:flex;gap:14px;max-height:300px;overflow:auto;padding:18px 18px 22px;color:#dddee1;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;overscroll-behavior:contain}
.terminal-body.is-clipped{-webkit-mask-image:linear-gradient(180deg,#000000 calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,#000000 calc(100% - 40px),transparent)}
.terminal-body>span{flex:none;font:600 12.5px/1.8 var(--font-mono);white-space:nowrap;color:var(--accent)}
.terminal-body code{display:block;min-width:0;font:400 12.5px/1.2 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
/* Text lines keep their air; the TRACE art lines sit tight so the letters join. A one-line CMD command is drawn broken
   where its source lines were, continuation lines indented: the breaks are generated, the copied text is one line. */
.cmd-line{line-height:1.8}
.cmd-art{line-height:1.2}
.terminal-body code.is-oneline{padding-left:2ch;text-indent:-2ch}
.terminal-body code.is-oneline .cmd-line:not(:last-child)::after{content:'\A'}
.terminal-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 11px 11px 18px;border-top:1px solid #ffffff10;font:500 12px/1.45 var(--font-mono);color:var(--text-3)}
.copy-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;height:44px;padding:0 17px 0 14px;border-radius:var(--r-pill);background:linear-gradient(180deg,#ffffff1c,#ffffff09);box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff1c,0 8px 20px -10px #000000;font:560 13.5px/1 var(--font-body);letter-spacing:-.01em;color:#ffffff;white-space:nowrap;transition:transform var(--dur-bouncy) var(--spring-bouncy),background-color .35s var(--ease-out),box-shadow .45s var(--ease-out)}
.copy-button:hover{background-color:#ffffff10;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff2e,0 10px 24px -10px #000000}
.copy-button:active{transform:scale(.94);transition-duration:.12s}
.copy-button.is-copied{background-color:#c9cacd26;box-shadow:inset 0 1px 0 #e7e8eb66,inset 0 0 0 1px #d5d6d970,0 0 26px #c9cacd33,0 8px 20px -10px #000000;color:#eaebee}
.copy-icon{display:grid;place-items:center;font-size:17px}
.glyph-copy__sheets,.glyph-copy__check{transform-box:fill-box;transform-origin:center;transition:opacity .25s var(--ease-out),transform .6s var(--spring-bouncy),stroke-dashoffset .45s var(--ease-out)}
.glyph-copy__check{stroke-dasharray:16;stroke-dashoffset:16;opacity:0;stroke-width:1.9}
.copy-button.is-copied .glyph-copy__sheets{opacity:0;transform:scale(.5)}
.copy-button.is-copied .glyph-copy__check{opacity:1;stroke-dashoffset:0;transition-delay:.06s}
.copy-label-window{position:relative;display:block;height:16px;overflow:hidden}
.copy-label{display:block;line-height:16px;white-space:nowrap}
.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.action-row .button{min-height:48px;font-size:14.5px}
.manual-help{padding:18px 22px;border-radius:var(--r-lg);background:linear-gradient(115deg,#c9cacd14,#ffffff03);box-shadow:inset 0 0 0 1px #d5d6d926,inset 3px 0 0 var(--accent)}
.manual-help b{font:600 16px/1.3 var(--font-body)}
.manual-help p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--text-2)}
.manual-list{display:grid;gap:8px;margin:20px 0 22px}
.manual-list label{position:relative;display:flex;align-items:flex-start;gap:14px;padding:15px 16px;border-radius:var(--r-md);background:var(--glass-card);box-shadow:inset 0 0 0 1px #ffffff12;font-size:15px;line-height:1.5;color:var(--text-2);cursor:pointer;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),color .3s var(--ease-out),transform .6s var(--spring-bouncy)}
.manual-list label:hover{background-color:#ffffff06;box-shadow:inset 0 0 0 1px #ffffff21}
.manual-list label:active{transform:scale(.985);transition-duration:.12s}
.manual-list label:has(input:checked){color:var(--text);background-color:#c9cacd0d;box-shadow:inset 0 0 0 1px #d5d6d940}
.manual-list input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.check-box{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;box-shadow:inset 0 0 0 1.5px #ffffff45;color:#131417;transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .6s var(--spring-bouncy)}
.check-box svg{width:16px;height:16px;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .3s var(--ease-out)}
.manual-list input:checked+.check-box{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 16px #c9cacd55}
.manual-list input:checked+.check-box svg{stroke-dashoffset:0;transition-delay:.08s}
.manual-list label:active .check-box{transform:scale(.85)}

/* Tasks: one radio per source. The chip lights up like a switch; the terminal below rewrites itself. */
.task-picker{min-width:0;margin:0;padding:0;border:0}
.task-picker legend{float:left;width:100%}
.task-grid{clear:both;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.task-grid:has(> :nth-child(11):last-child)>:first-child{grid-column:span 2}
.task-chip{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:58px;padding:11px 13px;border-radius:14px;background:#ffffff04;box-shadow:inset 0 0 0 1px #ffffff10;color:var(--text-2);cursor:pointer;user-select:none;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),color .3s var(--ease-out)}
.task-chip:hover{background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff21;color:var(--text)}
.task-chip:has(input:checked){background:#c9cacd12;box-shadow:inset 0 0 0 1px #d5d6d966,0 10px 24px -16px #000000;color:#ffffff}
.task-chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px;animation:focus-ring .5s var(--spring-bouncy)}
.task-chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.task-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#ffffff24;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .6s var(--spring-bouncy)}
.task-chip:has(input:checked) .task-dot{background:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.15)}
.task-copy{display:grid;gap:2px;min-width:0}
.task-copy strong{font:580 13.5px/1.3 var(--font-body);letter-spacing:-.01em}
.task-copy small{font-size:12px;line-height:1.4;color:var(--text-3)}
.task-about{max-width:680px;margin:18px 0;font-size:15px;line-height:1.6;color:var(--text-2)}
.task-hint{margin-top:12px;font-size:14px;line-height:1.55;color:var(--text-2)}
.names-panel{position:relative;margin-top:30px;border-block:1px solid var(--line)}
.names-panel summary{display:flex;align-items:center;gap:10px;min-height:56px;font:560 15px/1.3 var(--font-body);color:var(--text);cursor:pointer;list-style:none}
.names-panel summary::-webkit-details-marker{display:none}
.names-panel summary:hover .names-chevron{color:var(--text)}
.names-count{padding:3px 8px;border-radius:var(--r-pill);background:#ffffff0a;font:500 12px/1.2 var(--font-mono);color:var(--text-2)}
.names-chevron{display:grid;place-items:center;margin-left:auto;color:var(--text-3);transition:transform .5s var(--spring-bouncy),color .3s var(--ease-out)}
.names-panel[open] .names-chevron{transform:rotate(180deg)}
.names-body{padding-bottom:18px}
.names-body>p{max-width:680px;font-size:14px;line-height:1.6;color:var(--text-3)}
.names-list{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;padding:0;list-style:none}
.names-list li{padding:4px 9px;border-radius:8px;background:#ffffff06;box-shadow:inset 0 0 0 1px #ffffff12;font:500 12px/1.4 var(--font-mono);color:var(--text-2)}
.names-list li.is-weak{background:none;box-shadow:none;outline:1px dashed #ffffff33;outline-offset:-1px;color:var(--text-3)}
.check-note{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--text-3)}
.section-title h2,.projects-end h2{font:420 var(--display-s)/1.06 var(--font-display);letter-spacing:var(--track-display)}

/* ───────────────────────── Methodology ───────────────────────── */
.methodology-lead{display:grid;grid-template-columns:1.7fr .8fr;gap:48px;padding-top:64px;padding-bottom:110px}
.statement{position:relative;isolation:isolate;overflow:hidden;min-height:300px;padding:42px 46px;border-radius:30px;background:radial-gradient(ellipse 60% 80% at 100% 0%,#c9cacd14,transparent 70%),var(--glass-card);box-shadow:inset 0 1px 0 #ffffff14,inset 0 0 0 1px #ffffff14,0 40px 80px -40px #000000}
.statement-index{font:500 11.5px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.statement p{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin:38px 0;font:420 var(--display-s)/1.05 var(--font-display);letter-spacing:var(--track-display)}
.statement p strong{font-weight:420}
.not-equal{font:400 1.25em/1 var(--font-display);color:var(--accent);text-shadow:0 0 30px #c9cacd66}
.statement>span:last-child{font-size:15.5px;line-height:1.6;color:var(--text-2)}
.method-aside{padding-top:30px}
.method-aside p:not(.mini-label){margin-top:14px;font-size:17px;line-height:1.7;color:var(--text-2)}
.evidence-section,.data-scope,.questions{padding-bottom:110px}
.evidence-section,.questions{display:grid;grid-template-columns:290px minmax(0,1fr);gap:48px}
.section-title h2{margin-top:16px}
.section-title{align-self:start;position:sticky;top:calc(var(--header-h) + 32px)}
.evidence-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.evidence-list li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:start;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}
.evidence-num{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ffffff06;box-shadow:inset 0 0 0 1px #ffffff17;font:500 13px/1 var(--font-mono);color:var(--accent-soft)}
.evidence-list h3{margin:6px 0 10px;font:600 21px/1.3 var(--font-ui);letter-spacing:-.015em}
.evidence-list p{max-width:660px;font-size:16px;line-height:1.7;color:var(--text-2)}
.evidence-tag{margin-top:8px;padding:6px 11px;border-radius:var(--r-pill);background:#ffffff05;box-shadow:inset 0 0 0 1px #ffffff14;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.data-scope{padding-top:56px;border-top:1px solid var(--line)}
.data-scope>.section-title{position:static;max-width:640px;margin-bottom:40px}
.data-scope>.section-title h2{margin-top:16px}
.scope-rows{margin:0 0 36px;border-top:1px solid var(--line-2)}
.scope-rows>div{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:28px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
.scope-rows dt{font:420 30px/1.1 var(--font-display);letter-spacing:-.02em}
.scope-rows dd{margin:0;max-width:640px;font-size:16px;line-height:1.7;color:var(--text-2)}
.questions{padding-top:56px;border-top:1px solid var(--line)}
.faq-list{border-top:1px solid var(--line-2)}
.faq-list details{position:relative;border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 4px;list-style:none;font:580 17px/1.4 var(--font-body);letter-spacing:-.015em;cursor:pointer;border-radius:var(--r-sm);transition:color .3s var(--ease-out)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent-soft)}
.faq-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff17;font-size:15px;color:var(--text-2);transition:transform .7s var(--spring-bouncy),background-color .35s var(--ease-out),color .35s var(--ease-out)}
.faq-list details[open]:not([data-closing]) .faq-icon{transform:rotate(135deg);background:#eff0f3;color:#131417}
.faq-body{overflow:hidden}
/* While a closed disclosure folds its copy away (site.js), its content slot stays painted; the real body stays hidden. */
:is(.faq-list details,.names-panel).is-folding:not([open])::details-content{content-visibility:visible}
:is(.faq-list details,.names-panel).is-folding:not([open])>:is(.faq-body,.names-body):not([aria-hidden]){display:none}
.faq-body p{max-width:680px;padding:0 4px 24px;font-size:16px;line-height:1.7;color:var(--text-2)}

/* ───────────────────────── Projects ───────────────────────── */
.projects-intro{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:8%;align-items:baseline;padding-top:30px;padding-bottom:40px}
.projects-intro>p:not(.mini-label){max-width:560px;font-size:16px;line-height:1.65;color:var(--text-2)}
.projects-list{border-top:1px solid var(--line-2)}
.project-group{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:8%;padding:54px 0 64px;border-bottom:1px solid var(--line-2)}
.project-heading{display:grid;align-content:start}
.project-heading .mini-label{color:var(--label)}
.project-heading h2{margin:14px 0 14px;font:420 var(--display-s)/1.04 var(--font-display);letter-spacing:var(--track-display)}
.project-heading p{max-width:360px;font-size:16px;line-height:1.65;color:var(--text-2)}
.project-destinations{display:grid;gap:8px;align-content:start}
.project-destinations>a:not(.project-check){position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(130px,1fr) minmax(140px,1fr) 36px;align-items:center;gap:16px;min-height:62px;padding:0 12px 0 20px;border-radius:var(--r-md);background:var(--glass-card);box-shadow:inset 0 0 0 1px #ffffff10;font:580 17px/1.3 var(--font-body);letter-spacing:-.015em;transition:transform .6s var(--spring-bouncy),background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.project-destinations>a:not(.project-check):hover{background-color:#ffffff07;box-shadow:inset 0 0 0 1px #ffffff21;transform:translateX(4px)}
.project-destinations>a:not(.project-check):active{transform:scale(.985);transition-duration:.12s}
.project-url{font:500 12.5px var(--font-mono);color:var(--text-3);overflow-wrap:anywhere}
.project-destinations>a>.arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff08;font-size:14px;color:var(--text-2);transition:background-color .3s var(--ease-out),color .3s var(--ease-out),transform .6s var(--spring-bouncy)}
.project-destinations>a:not(.project-check):hover>.arrow{background:#eff0f3;color:#131417;transform:scale(1.06)}
.project-destinations>p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-3)}
.project-check{display:inline-flex;align-items:center;gap:10px;justify-self:start;height:44px;margin-top:8px;padding:0 15px 0 18px;border-radius:var(--r-pill);background:var(--glass-control);box-shadow:var(--rim-control),inset 0 0 0 1px #ffffff1c,var(--shadow-control);font:600 14px/1 var(--font-body);color:var(--text);transition:transform var(--dur-bouncy) var(--spring-bouncy),background-color .3s var(--ease-out)}
.project-check:hover{transform:translateY(-2px);background-color:#1f2023}
.project-check:active{transform:scale(.95);transition-duration:.12s}
.projects-end{display:flex;justify-content:space-between;align-items:end;gap:28px;padding-top:100px;padding-bottom:120px}
.projects-end h2{margin-top:18px}

/* ───────────────────────── Tools ───────────────────────── */
.tools-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:6%;padding-top:56px;padding-bottom:120px}
.tools-rail{align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
.tools-rail nav,.legal-sidebar nav{position:relative;display:grid;gap:2px;margin:16px 0 22px;padding:5px;border-radius:20px;background:#ffffff04;box-shadow:inset 0 0 0 1px #ffffff0f}
.rail-lens{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:#ffffff21;clip-path:inset(var(--lt,0) var(--lr,100%) var(--lb,100%) var(--ll,0) round var(--lrad,0px))}
.rail-lens::before{content:'';position:absolute;inset:0;background:#1f2023;clip-path:inset(calc(var(--lt,0px) + 1px) calc(var(--lr,100%) + 1px) calc(var(--lb,100%) + 1px) calc(var(--ll,0px) + 1px) round max(0px,calc(var(--lrad,0px) - 1px)))}
.tools-rail nav a,.legal-sidebar nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-radius:14px;font:500 14px/1.4 var(--font-body);color:var(--text-2);transition:color .3s var(--ease-out),transform .5s var(--spring-bouncy)}
.tools-rail nav a:hover,.legal-sidebar nav a:hover,.tools-rail nav a.is-current,.legal-sidebar nav a[aria-current]{color:#ffffff}
.tools-rail nav a:active,.legal-sidebar nav a:active{transform:scale(.97);transition-duration:.12s}
.tools-content{min-width:0;display:grid;gap:16px}
.tools-alert{display:flex;align-items:start;gap:16px;margin-bottom:24px;padding:22px 26px;border-radius:var(--r-xl);background:linear-gradient(120deg,#c9cacd14,#b2b3b608);box-shadow:inset 0 1px 0 #ffffff12,inset 0 0 0 1px #d5d6d926}
.tools-alert-mark{flex:none;margin-top:3px;font-size:20px;color:var(--accent);animation:slow-turn 24s linear infinite}
.tools-alert p{font-size:15px;line-height:1.7;color:var(--text-2)}
.tools-alert strong{color:var(--text)}
.tools-alert a .arrow,.tools-source a .arrow{display:inline-grid;vertical-align:-2px;font-size:13px}
.tool-guide{position:relative;isolation:isolate;padding:30px 32px 32px;border-radius:28px;background:var(--glass-card);box-shadow:inset 0 1px 0 #ffffff10,inset 0 0 0 1px #ffffff10;scroll-margin-top:calc(var(--header-h) + 24px)}
.tool-guide-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.tool-guide-heading .mini-label{color:var(--label)}
.tool-guide h2{margin-top:6px;font:450 var(--display-xs)/1.08 var(--font-display);letter-spacing:-.02em}
.tool-guide-source{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 13px 0 16px;border-radius:var(--r-pill);background:var(--glass-control);box-shadow:var(--rim-control),inset 0 0 0 1px #ffffff1c;font:600 13px/1 var(--font-body);white-space:nowrap;transition:transform var(--dur-bouncy) var(--spring-bouncy),background-color .3s var(--ease-out)}
.tool-guide-source:hover{background-color:#1f2023;transform:translateY(-1px)}
.tool-guide-source:active{transform:scale(.95);transition-duration:.12s}
.tool-guide-source .arrow{font-size:13px}
.tool-guide-summary{max-width:720px;margin:20px 0 16px;font-size:16px;line-height:1.65;color:var(--text-2)}
.tool-guide ol{display:grid;gap:8px;margin:0 0 20px;padding:0;list-style:none;counter-reset:step}
.tool-guide li{position:relative;padding-left:38px;counter-increment:step;font-size:15px;line-height:1.65}
.tool-guide li::before{content:counter(step);position:absolute;left:0;top:1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff17;font:500 11.5px/1 var(--font-mono);color:var(--accent-soft)}
.tool-guide-limit{padding:14px 18px;border-radius:var(--r-md);background:linear-gradient(115deg,#c9cacd12,#ffffff03);box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px #d5d6d920;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.tool-guide-limit strong{color:var(--text)}
.tool-guide-sources{display:flex;flex-wrap:wrap;justify-content:end;gap:8px}
.tools-source{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 40px;margin-top:20px;padding-top:24px;border-top:1px solid var(--line)}
.tools-source .mini-label{grid-column:1/-1;margin-bottom:4px}
.tools-source a{font:560 14px/1.5 var(--font-body)}

/* ───────────────────────── Legal ───────────────────────── */
.legal-layout{position:relative;isolation:isolate;display:grid;grid-template-columns:260px minmax(0,1fr);gap:6%;padding-top:calc(var(--header-h) + 64px);padding-bottom:120px}
.legal-sidebar,.legal-main{position:relative;z-index:2}
.legal-sidebar{align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
.trace-legal-scene{position:absolute;inset:0 calc(50% - 50vw) auto;z-index:0;height:min(460px,44vw);overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 80% 30%,#20212484,transparent 55%);-webkit-mask-image:linear-gradient(180deg,#000000 55%,transparent);mask-image:linear-gradient(180deg,#000000 55%,transparent)}
.trace-legal-scene>.trace-atmosphere{position:absolute;inset:0}
.trace-legal-scene>.trace-atmosphere.is-live{opacity:.72}
.legal-main{max-width:840px}
.legal-main h1{margin:18px 0 16px;font:420 var(--display-m)/1.04 var(--font-display);letter-spacing:var(--track-display)}
.legal-date{margin-top:4px;font:500 12px/1.6 var(--font-mono);color:var(--text-3)}
.legal-banner{margin:32px 0 42px;padding:18px 22px;border-radius:var(--r-lg);background:linear-gradient(115deg,#c9cacd14,#ffffff03);box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px #d5d6d926;font-size:15px;line-height:1.7;color:var(--text-2)}
.legal-main article{font-size:16px;line-height:1.8}
.legal-main article h2{margin:40px 0 12px;font:600 20px/1.35 var(--font-ui);letter-spacing:-.015em}
.legal-main article p,.legal-main article li{color:var(--text-2)}
.legal-main article p+p{margin-top:12px}
.legal-main article strong{color:var(--text)}
.legal-main article ul{display:grid;gap:10px;margin:14px 0;padding-left:20px}
.legal-main article li::marker{color:var(--text-3)}
.legal-main article code{padding:1px 6px;border-radius:6px;background:#ffffff0f;font-size:.88em}
.legal-main article h2{scroll-margin-top:calc(var(--header-h) + 24px)}
.legal-note{margin-bottom:8px;padding:14px 18px;border-radius:var(--r-md);background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff17;font-size:15px}
mark.legal-fact{padding:0 4px;border-radius:4px;background:#ffffffe6;color:#0b0c0e;font:600 .9em/1.4 var(--font-ui)}

/* 404: the page intro with two ways out. */
.not-found{min-height:calc(100svh - 160px)}
.not-found-actions{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:48px}

/* ───────────────────────── Footer ───────────────────────── */
.site-footer{position:relative;background:#06080bcc;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;padding:56px 0 60px}
.footer-brand p{margin-top:16px;max-width:320px;font-size:15px;line-height:1.6;color:var(--text-2)}
.footer-top nav{display:grid;grid-template-columns:repeat(2,max-content);justify-content:end;gap:0 56px;font-size:14.5px}
.footer-top nav a,.footer-bottom a{color:var(--text-2);transition:color .3s var(--ease-out)}
.footer-top nav a:hover,.footer-bottom a:hover{color:#ffffff}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:12px 0 26px;border-top:1px solid var(--line);font:500 12px/1.6 var(--font-mono);color:var(--text-3)}
.footer-bottom>div{display:flex;flex-wrap:wrap;gap:0 20px}


/* ───────────────────────── Tactile layer ───────────────────────── */
@property --lift{syntax:'<length>';inherits:false;initial-value:0px}
@property --press{syntax:'<number>';inherits:false;initial-value:1}
.statement{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift),0) scale(var(--press))}
:is(.button,.header-start,.copy-button,.project-check,.tool-guide-source,.game-select-trigger,.tool-tab,.task-chip,.menu-links a,.method-row,.motion-toggle){position:relative;isolation:isolate}
.press-ripple{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.press-ripple i{position:absolute;border-radius:50%;background:radial-gradient(circle,#ffffff30 0,#ffffff14 45%,transparent 70%);pointer-events:none}
.press-ripple i.is-dark{background:radial-gradient(circle,#b5b6b938 0,#b5b6b914 45%,transparent 70%)}
.cursor-tag{position:fixed;left:0;top:0;z-index:130;display:flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 13px;border-radius:var(--r-pill);background:linear-gradient(180deg,#ffffff10,#ffffff04),#151619;box-shadow:inset 0 1px 0 #ffffff16,inset 0 0 0 1px #ffffff1a,0 12px 24px -10px #000000;font:560 12.5px/1 var(--font-body);color:#ffffff;white-space:nowrap;pointer-events:none;opacity:0;transform-origin:0 0;will-change:transform,opacity}
.cursor-tag .glyph{font-size:12px;color:var(--accent-soft)}
.cinema-word>span{position:relative}
.cinema-word>span::after{content:attr(data-text);position:absolute;inset:0;background:radial-gradient(circle 230px at var(--fx,50%) var(--fy,50%),#f5f6f9 0,#d8d9dc 14%,#c9cacd 30%,#abacaf00 62%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:var(--flash,0);pointer-events:none}

/* ───────────────────────── Grain ─────────────────────────
   A fine, static film grain over the whole page: it keeps large dark fields from looking like flat fills. */
body::after{content:'';position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px 220px}
.footer-brand .colophon{margin-top:12px;max-width:340px;font:500 11.5px/1.65 var(--font-mono);letter-spacing:.02em;color:var(--text-3)}
.cursor-tag.no-arrow .glyph{display:none}
.cursor-tag.no-arrow{padding-right:13px}
@media(prefers-reduced-transparency:reduce){body::after{display:none}}
@media(forced-colors:active){body::after{display:none}}

/* ───────────────────────── Scroll reveals & headings ───────────────────────── */
.title-line{display:block}
.js .title-ready:not(.title-in) .title-line{opacity:0}
.js .title-in .title-line{animation:title-rise var(--dur-gentle) var(--spring-gentle) var(--line-delay,0ms) backwards}
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal].is-in{animation:reveal-in var(--dur-gentle) var(--spring-gentle) var(--reveal-delay,0ms) backwards}

@keyframes reveal-in{0%{opacity:0;transform:translate3d(0,28px,0) scale(.985);filter:blur(8px)}45%{opacity:1}}
@keyframes title-rise{0%{opacity:0;transform:translate3d(0,.34em,0);filter:blur(12px)}50%{opacity:1}}
@keyframes rise-in{0%{opacity:0;transform:translate3d(0,18px,0);filter:blur(8px)}50%{opacity:1}}
@keyframes monolith{0%{opacity:0;transform:translate3d(0,24%,0) scale(1.04);filter:blur(18px)}40%{opacity:1}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-to{to{opacity:var(--to,1)}}
@keyframes live-ping{0%{opacity:.8;transform:scale(.6)}80%,100%{opacity:0;transform:scale(2.2)}}
@keyframes art-drift{from{transform:scale(1.01) translate3d(-.6%,-.4%,0)}to{transform:scale(1.07) translate3d(.8%,.6%,0)}}
@keyframes ambient{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,3%,0) scale(1.08)}}
@keyframes fallback-cloud{from{transform:translate(-4%,3%) scale(1)}to{transform:translate(4%,-5%) scale(1.1)}}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0) scale(.4)}18%{opacity:.4}70%{opacity:.25}100%{opacity:0;transform:translate(var(--ember-drift),-480px) scale(.1)}}
@keyframes terminal-sweep{0%{opacity:0;transform:translateX(-120%)}20%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
@keyframes slow-turn{to{transform:rotate(360deg)}}

/* ───────────────────────── Page transitions ───────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s var(--ease-in) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
::view-transition-group(site-header){animation:none}
/* The header crossfades (the browser's own plus-lighter pair), so the logo and the scrolled background of the old page
   fade instead of popping; it does not move. */
::view-transition-old(site-header),::view-transition-new(site-header){animation-duration:.28s;animation-timing-function:var(--ease-out)}
::view-transition-group(nav-current){animation-duration:var(--dur-snappy);animation-timing-function:var(--spring-snappy)}
::view-transition-old(nav-current),::view-transition-new(nav-current){height:100%;animation-duration:.3s}
/* The page title moves between pages as one element. */
.intro-row h1,.legal-main h1{view-transition-name:page-title}
::view-transition-group(page-title){animation-duration:var(--dur-smooth);animation-timing-function:var(--spring-smooth)}
::view-transition-old(page-title){animation:vt-title-out .24s var(--ease-in) both}
::view-transition-new(page-title){animation:vt-title-in .5s var(--ease-out) .06s both}
/* A page that arrives through a view transition does not play its own entrance on top of it (site.mjs, pagereveal). */
.vt-arrival :is(.page-intro .eyebrow,.intro-row h1,.intro-row>p,.legal-main>*){animation:none!important}
@keyframes vt-title-out{to{opacity:0;filter:blur(6px)}}
@keyframes vt-title-in{from{opacity:0;filter:blur(6px)}}
@keyframes vt-out{to{opacity:0;transform:scale(.992)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,14px,0)}}

/* ───────────────────────── Responsive ───────────────────────── */
@media(max-width:1180px){
  :root{--gutter:28px}
  .desktop-nav a{padding:8px 12px;font-size:13.5px}
  .check-layout{grid-template-columns:220px minmax(0,1fr);gap:32px}
}
@media(max-width:980px){
  .desktop-nav{display:none}
  .header-inner{grid-template-columns:1fr auto}
  .header-actions{grid-column:2}
  .methods-head,.section-title,.check-rail{position:static}
  .ecosystem{grid-template-columns:1fr}
  .ecosystem-heading{position:static;margin-bottom:40px}
  .ecosystem-all{grid-column:1}
  .methods-head{grid-template-columns:1fr}
  .game-row{grid-template-columns:1fr 40px}
  .game-row small{grid-column:1}
  .methods{grid-template-columns:1fr;gap:40px;padding-top:96px;padding-bottom:100px}
  .method-row{grid-template-columns:repeat(3,minmax(0,1fr)) 40px}
  .method-name{grid-column:1/-1}
  .data-scope{grid-template-columns:1fr;gap:20px}
  .intro-row{display:block}
  .intro-row>p{margin-top:24px}
  .methodology-lead{grid-template-columns:1fr;gap:0}
  .evidence-section,.questions{grid-template-columns:1fr;gap:20px}
  .project-group{grid-template-columns:1fr;gap:28px}
  .tools-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .tools-rail{position:static}
  .tools-rail nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr}
  .footer-top nav{justify-content:start}
  .legal-layout{grid-template-columns:1fr;gap:32px}
  .legal-sidebar{position:static}
}
@media(max-width:720px){
  :root{--gutter:16px;--header-h:66px}
  .header-start{display:none}
  .brand-symbol{width:30px;height:30px}
  .brand-word{font-size:18px}
  .cinema-hero{min-height:700px}
  .cinema-copy h1{font-size:clamp(42px,11vw,64px)}
  .cinema-lead{font-size:15.5px}
  .cinema-actions{flex-direction:column;gap:14px}
  .cinema-word{font-size:27.5vw}
  .night-statement,.final-cta{padding:84px 0}
  .night-foot{display:block}
  .night-foot .text-link{margin-top:18px}
  .ecosystem{padding-top:84px;padding-bottom:90px}
  .game-row{gap:10px;padding:22px 6px}
  .method-row{grid-template-columns:1fr 40px;gap:14px}
  .method-cell{grid-column:1}
  .scope-rows>div{grid-template-columns:1fr;gap:8px}
  .page-intro{padding-top:calc(var(--header-h) + 48px);padding-bottom:52px}
  .intro-row h1{font-size:clamp(46px,12vw,72px)}
  .game-select{width:100%}
  /* The game list's morph body is 28px wider than what its clip-path shows; at full width it would scroll the page sideways. */
  .check-layout{grid-template-columns:1fr;gap:28px;padding-top:28px;overflow-x:clip}
  .tool-tabs{grid-template-columns:repeat(3,1fr)}
  .task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-chip{min-height:46px;align-items:center}
  .task-dot{margin-top:0}
  .task-copy small{display:none}
  .tool-tab{flex-direction:column;justify-content:center;gap:6px;min-height:84px;padding:10px 4px;text-align:center}
  .tool-tab strong{font-size:13.5px}
  .terminal-actions{flex-wrap:wrap}
  .projects-end{display:block}
  .projects-end .button{margin-top:22px}
  .statement{padding:28px 24px;min-height:0}
  .evidence-list li{grid-template-columns:48px 1fr}
  .evidence-tag{grid-column:2;justify-self:start;margin:0}
  .projects-intro{display:block}
  .projects-intro>p{margin-top:10px}
  .project-destinations>a:not(.project-check){grid-template-columns:1fr 34px}
  .project-url{display:none}
  .tools-rail nav{display:flex;overflow-x:auto;scrollbar-width:none}
  .tools-rail nav a{flex:none}
  .tool-guide{padding:24px 20px}
  .tool-guide-heading{grid-template-columns:minmax(0,1fr)}
  .tool-guide-source,.tool-guide-sources{justify-self:start;justify-content:start}
  .tools-source{grid-template-columns:minmax(0,1fr)}
  .footer-bottom{display:block}
  .footer-bottom>div{margin-top:14px}
  .site-menu{right:8px}
  .trace-panel h2{margin:22px 20px 16px;font-size:23px}
  .trace-panel #guide-body{padding:0 20px 8px}
}

/* ───────────────────────── Preferences ───────────────────────── */
.motion-paused :is(.cinema-art,.scroll-cue-icon .glyph,.brand-ray,.brand-core,.tools-alert-mark,.tool-glyph,.tool-glyph *,.tool-mini){animation:none!important}
.motion-paused .tool-mini::before,.motion-paused .manual-mini::after,.motion-paused .manual-icon::after{animation:none!important}
.motion-paused .trace-embers{display:none}
.motion-paused .brand-ray{stroke-dashoffset:0}
.motion-paused .live-dot::after,.motion-paused .terminal-indicator::after,.motion-paused .final-cta::before,.motion-paused [data-atmosphere=fallback]::before{animation:none!important}
.motion-paused :is([data-reveal].is-in,.title-in .title-line,.cinema-kicker,.cinema-copy h1 .title-line,.cinema-lead,.cinema-actions,.cinema-word>span,.hero3d-poster,.night-ghost span,.hero-floor,.page-intro .eyebrow,.intro-row h1,.intro-row>p,.legal-main>*){animation:none!important}
.motion-paused :is([data-reveal]:not(.is-in),.title-ready:not(.title-in) .title-line){opacity:1}
.motion-paused .cinema-copy,.motion-paused .cinema-word{transform:none;opacity:1;animation:none}
.motion-paused .hero3d-layer{transform:none;animation:none}
.motion-paused .cinema-word::after{animation:none}
.motion-paused .site-header .brand-lockup,.motion-paused .bl,.motion-paused .brand-period{animation:none!important;opacity:1;transform:none;filter:none}
/* Reduced motion: motion is replaced, not just switched off. Things fade in briefly; nothing travels, spins,
   zooms or loops. Pages cross-fade instead of moving. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  @keyframes reveal-in{from{opacity:0}}
  @keyframes title-rise{from{opacity:0}}
  @keyframes rise-in{from{opacity:0}}
  @keyframes monolith{from{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-title-in{from{opacity:0}}
  @keyframes vt-title-out{to{opacity:0}}
  *,*::before,*::after{animation-delay:0s!important;animation-iteration-count:1!important;transition-delay:0s!important}
  :is([data-reveal],.title-line,.cinema-kicker,.cinema-lead,.cinema-actions,.hero-floor,.page-intro .eyebrow,.intro-row h1,.intro-row>p,.legal-main>*){animation-duration:.4s!important;animation-timing-function:var(--ease-out)!important}
  *:not(:is([data-reveal],.title-line,.cinema-kicker,.cinema-lead,.cinema-actions,.hero-floor,.page-intro .eyebrow,.intro-row h1,.intro-row>p,.legal-main>*)),*::before,*::after{animation:none!important}
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,text-decoration-color!important;transition-duration:.2s!important}
  ::view-transition-group(*){animation:none!important}
  .brand-ray{stroke-dashoffset:0}
  .cinema-copy,.cinema-word{transform:none;opacity:1;animation:none!important}
  .site-header .brand-lockup,.bl,.brand-period{opacity:1!important;transform:none!important;filter:none!important}
  .trace-embers{display:none}
  .trace-field{opacity:1}
  html body dialog[open][open]{animation:vt-in .2s var(--ease-out)!important}
}
@media(prefers-reduced-transparency:reduce){
  .site-header::before,.desktop-nav,.menu-body,.site-menu.is-settled .menu-body,.trace-panel,.trace-panel.is-settled,.game-glass,.island-glass,.button-soft,.button-ink,.menu-trigger,.game-select-trigger,.cinema-kicker{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1a1b1e}
}
@media(forced-colors:active){
  .button,.header-start,.copy-button,.game-select-trigger,.tool-tab[aria-selected=true],.desktop-nav a[aria-current]{border:1px solid ButtonText}
  .cinema-word>span,.cinema-copy h1 .title-line:first-child,.cinema-copy h1 em{color:CanvasText;background:none}
  .game-option.is-active{outline:1px solid Highlight}
  /* Shapes drawn with backgrounds and shadows disappear in forced colours: draw them in system colours instead. */
  .menu-trigger span,.menu-close-lines>span{forced-color-adjust:none;background:ButtonText}
  .menu-trigger,.motion-toggle,.icon-button,.task-chip{border:1px solid ButtonText}
  .task-dot{forced-color-adjust:none;background:Canvas;border:1px solid ButtonText}
  .task-chip:has(input:checked) .task-dot{background:Highlight}
  /* Glass surfaces without a border would melt into the page; the smoke canvas would force backplates under text. */
  .island-glass,.menu-body,.game-glass,.trace-panel{border:1px solid CanvasText}
  .trace-atmosphere{display:none}
  .check-box{border:1.5px solid ButtonText}
  input:checked+.check-box{forced-color-adjust:none;background:Highlight;color:HighlightText}
}

/* Invisible rehearsal of glass surfaces (site.js warm): drawn for a few frames at 1% so the GPU has compiled everything before the first real opening. */
.gpu-warm{position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden;pointer-events:none;opacity:.01;z-index:2147483000}
.warm-veil{position:absolute;inset:0;background:#050609b8}