@font-face { font-family: 'Unbounded'; src: url(../fonts/unbounded-latin.woff2) format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Unbounded'; src: url(../fonts/unbounded-cyrillic.woff2) format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-latin.woff2) format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2080-2089; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-cyrillic.woff2) format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --khaki: #c8bd96;
  --khaki-2: #bdb186;
  --paper: #e6dfc8;
  --ink: #17180f;
  --ink-2: #24251c;
  --olive: #3a3c2c;
  --olive-2: #585c3e;
  --red: #e8170f;
  --ok: #2f7a3b;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: 'Unbounded', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 2.2vw, 32px);
  --bar-h: 72px;
  --seg-1: #17180f;
  --seg-2: #4a4d33;
  --seg-3: #7d7a50;
}

.theme-khaki { --bg: var(--khaki); --fg: var(--ink); --fg-2: #3f4130; --line: rgba(23, 24, 15, .28); --hl-bg: var(--ink); --hl-fg: var(--khaki); --field: rgba(23, 24, 15, .07); --tag-fg: var(--ink); }
.theme-night { --bg: var(--ink); --fg: #e6dfc8; --fg-2: #b4ad90; --line: rgba(200, 189, 150, .24); --hl-bg: var(--khaki); --hl-fg: var(--ink); --field: rgba(200, 189, 150, .08); --tag-fg: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1.55; color: #e6dfc8; background: var(--ink); overflow-x: clip; }
body.is-loading { overflow: hidden; height: 100vh; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

/* Film grain over the whole page, the poster texture. */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip { position: fixed; left: 12px; top: -60px; z-index: 120; background: var(--red); color: #fff; padding: 8px 14px; }
.skip:focus { top: 12px; }
.dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--red); }
.mono { font-family: var(--mono); }
.small { font-size: 12.5px; line-height: 1.6; color: var(--fg-2); }
.k { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }

/* Loader */
.loader { position: fixed; inset: 0; z-index: 110; background: var(--ink); color: var(--khaki); display: flex; flex-direction: column; justify-content: space-between; padding: var(--gutter); transition: clip-path 1.1s var(--ease); clip-path: inset(0 0 0 0); }
.loader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.loader__top { display: flex; gap: 12px; align-items: center; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.loader__year { margin-left: auto; }
.loader__num { font: 900 clamp(110px, 30vw, 420px)/.9 var(--display); letter-spacing: -.04em; display: flex; align-items: flex-start; }
.loader__num i { font-style: normal; font-size: .28em; margin: .12em 0 0 .1em; color: var(--red); }
.loader__bar { height: 2px; background: rgba(200, 189, 150, .2); }
.loader__bar span { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s linear; }

/* Top bar */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--bar-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; color: var(--bar-fg, var(--ink)); background: var(--bar-bg, var(--khaki)); transition: color .35s, background-color .35s; }
.bar[data-on='night'] { --bar-fg: #e6dfc8; --bar-bg: var(--ink); }
.bar[data-on='khaki'] { --bar-fg: var(--ink); --bar-bg: var(--khaki); }
.bar__frame { position: absolute; left: var(--gutter); right: var(--gutter); top: 14px; height: 2px; background: color-mix(in srgb, currentColor 22%, transparent); pointer-events: none; }
.bar__line { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: center; }
.bar__tick { position: absolute; left: 50%; top: 0; width: 2px; height: 12px; margin-left: -1px; background: var(--red); }
.bar__mark { position: absolute; left: 50%; top: 34px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--red); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 800 15px/1 var(--display); letter-spacing: .01em; }
.menu-btn { display: flex; align-items: center; gap: 12px; font: 800 15px/1 var(--display); min-height: 44px; }
.menu-btn i { position: relative; width: 22px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: transform .4s var(--ease), border-color .2s; }
.menu-btn[aria-expanded='true'] i { border-color: transparent; transform: rotate(45deg); }
.menu-btn[aria-expanded='true'] i::before, .menu-btn[aria-expanded='true'] i::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; }
.menu-btn[aria-expanded='true'] i::after { transform: rotate(90deg); }

/* Fullscreen menu */
.menu { position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--khaki); display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: 32px; padding: calc(var(--bar-h) + 16px) var(--gutter) var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); overflow-y: auto; }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu[hidden] { display: none; }
.menu__list a { display: flex; align-items: baseline; gap: 20px; padding: clamp(4px, .7vh, 10px) 0; border-bottom: 1px solid rgba(200, 189, 150, .18); text-decoration: none; font: 800 clamp(20px, 3.6vw, 44px)/1.15 var(--display); transition: transform .5s var(--ease), color .2s; }
.menu__list a small { font: 400 12px var(--mono); color: #b4ad90; min-width: 56px; }
.menu__list a:hover, .menu__list a:focus-visible { transform: translateX(14px); color: #fff; }
.menu__list li { overflow: hidden; }
.menu.is-open .menu__list li a { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 120ms); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.menu__side { display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; }
.menu__links a { display: block; padding: 7px 0; text-decoration: none; }
.menu__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.langs { display: flex; gap: 6px; flex-wrap: wrap; }
.langs button { min-width: 44px; min-height: 40px; padding: 0 10px; border: 1px solid rgba(200, 189, 150, .4); font-size: 12.5px; }
.langs button[aria-pressed='true'] { background: var(--khaki); color: var(--ink); }

/* Hero */
.hero { position: relative; min-height: 100svh; background: var(--bg); color: var(--fg); overflow: hidden; display: flex; }
.hero__orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__inner { position: relative; display: flex; flex-direction: column; width: 100%; padding: calc(var(--bar-h) + 8px) var(--gutter) var(--gutter); pointer-events: none; }
.hero__inner a { pointer-events: auto; }
.hero__word { font: 900 13vw/.92 var(--display); letter-spacing: -.035em; white-space: nowrap; overflow: hidden; }
.hero__fit { display: inline-block; }
.hero__fit .ch { display: inline-block; transform: translateY(110%); }
.is-ready .hero__fit .ch { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 45ms + 150ms); }
.hero__row { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(16px, 3vh, 36px); }
.note { display: flex; gap: 10px; max-width: 340px; font-size: 12.5px; line-height: 1.45; text-transform: uppercase; letter-spacing: .02em; }
.note--right { text-align: left; }
.tag { flex: none; align-self: flex-start; background: var(--red); color: var(--tag-fg); padding: 1px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hero__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero__lead { font: 500 clamp(17px, 2.1vw, 28px)/1.3 var(--display); max-width: 21em; letter-spacing: -.01em; }
.hero__tip { position: absolute; z-index: 3; pointer-events: none; font-size: 11.5px; line-height: 1.4; color: var(--ink); text-transform: uppercase; transform: translate(14px, -50%); }
.hero__tip b { display: block; }
.hero__tip::before { content: ''; display: block; width: 14px; height: 3px; background: var(--red); margin-bottom: 4px; }

.round { flex: none; display: grid; place-items: center; width: clamp(120px, 14vw, 190px); aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; text-align: center; padding: 16px; font-size: 13px; line-height: 1.25; text-decoration: none; text-transform: uppercase; transition: background .35s, color .35s; will-change: transform; }
.round:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* Ticker */
.ticker { overflow: hidden; background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 12.5px; white-space: nowrap; }
.ticker__track { display: inline-block; animation: slide 46s linear infinite; }
.ticker__track span { margin-right: 28px; }
.ticker__track b { color: #fff; font-weight: 700; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Stat strip */
.stats { background: var(--bg); color: var(--fg); padding: 0 var(--gutter); }
.stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.stats__grid > div { padding: 22px 16px 22px 0; border-right: 1px solid var(--line); padding-left: 16px; }
.stats__grid > div:first-child { padding-left: 0; }
.stats__grid > div:last-child { border-right: 0; }
.stats__grid dt { font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; }
.stats__grid dd { font: 800 clamp(14px, 1.4vw, 22px)/1.25 var(--display); margin-top: 6px; overflow-wrap: anywhere; }

/* Sections */
.sec { background: var(--bg); color: var(--fg); padding: clamp(84px, 13vh, 160px) 0; position: relative; }
.wrap { padding: 0 var(--gutter); max-width: 1680px; margin: 0 auto; }
.display { font: 900 clamp(24px, 6.2vw, 100px)/1.02 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.display--sm { font-size: clamp(22px, 4.6vw, 76px); }
.ln { display: block; overflow: hidden; padding: .16em 0 .03em; margin-top: -.13em; }
.ln > span { display: inline-block; }
.ln--hl { position: relative; width: fit-content; max-width: 100%; margin-left: clamp(0px, 2.4vw, 40px); padding: .18em .22em .05em; margin-top: 0; background: var(--hl-bg); color: var(--hl-fg); }
.ln--hl::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 2px solid var(--red); background: var(--bg); }
.ln--hl::after { content: ''; position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.reveal .ln > span { transform: translateY(112%); transition: transform 1.1s var(--ease); }
.reveal .ln:nth-child(2) > span { transition-delay: .09s; }
.reveal.in .ln > span { transform: none; }
.ln--hl { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease) .12s; overflow: visible; }
.reveal.in .ln--hl { clip-path: inset(-12px -12px -12px -12px); }
p.reveal, h3.reveal, div.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s, transform 1.1s var(--ease); }
p.reveal.in, h3.reveal.in, div.reveal.in { opacity: 1; transform: none; }
.lead { font-size: clamp(15px, 1.25vw, 18px); max-width: 44em; margin-top: 28px; color: var(--fg-2); }
.sub { font: 800 clamp(17px, 2vw, 28px)/1.2 var(--display); margin: clamp(52px, 8vh, 96px) 0 20px; text-transform: uppercase; }

/* Facts */
.facts { margin-top: clamp(40px, 7vh, 80px); }
.fact { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px 110px; gap: 8px 20px; padding: 26px 0; align-items: start; }
.fact::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--red), var(--line) 60%); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.fact.in::after { transform: none; }
.fact__no { font-size: 13px; font-weight: 700; padding-top: 4px; }
.fact__t { font: 800 clamp(17px, 2.2vw, 32px)/1.2 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.fact__d { margin-top: 10px; color: var(--fg-2); max-width: 54em; }
.fact__v { justify-self: start; padding-top: 3px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border: 1px solid currentColor; text-transform: uppercase; white-space: nowrap; }
.badge::before { content: ''; width: 7px; height: 7px; }
.badge--ok { color: var(--fg); }
.badge--ok::before { background: var(--fg); border-radius: 50%; }
.badge--warn { color: var(--fg); background: var(--field); }
.badge--warn::before { border: 2px solid var(--red); }
.badge--risk { background: var(--red); border-color: var(--red); color: var(--ink); }
.badge--risk::before { background: var(--ink); transform: rotate(45deg); }
.fact__a { font-size: 12.5px; padding-top: 4px; text-underline-offset: 4px; }

/* Money flow, scroll-driven */
.flow { position: relative; margin-top: 40px; }
.flow__stage { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.1fr); gap: 28px; padding: 0 var(--gutter); max-width: 1680px; margin: 0 auto; }
.flow__big { position: sticky; top: calc(var(--bar-h) + 32px); align-self: start; font: 900 clamp(64px, 13.5vw, 230px)/.95 var(--display); letter-spacing: -.05em; min-height: 1em; overflow: hidden; }
.flow__big span { display: block; animation: bigIn .8s var(--ease) both; }
.flow__big small { display: block; font: 400 13px/1.4 var(--mono); letter-spacing: 0; margin-top: 18px; color: var(--fg-2); }
@keyframes bigIn { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.flow__track { position: relative; width: 2px; justify-self: center; background: var(--line); }
.flow__fill { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--red); transform: scaleY(0); transform-origin: top; }
.flow__dot { position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 22%, transparent); }
.flow__step { min-height: 62vh; padding: 8vh 0; opacity: .32; transition: opacity .5s; }
.flow__step.on { opacity: 1; }
.flow__step:first-child { padding-top: 0; }
.flow__step:last-child { min-height: 40vh; }
.flow__step h3 { font: 800 clamp(20px, 2.7vw, 40px)/1.14 var(--display); text-transform: uppercase; letter-spacing: -.015em; }
.flow__step p { margin-top: 14px; max-width: 36em; }
.flow__step .addr { display: block; margin-top: 12px; font-size: 12.5px; overflow-wrap: anywhere; text-underline-offset: 4px; }

/* Tiles and tables */
.ledger-head { margin-bottom: 16px; font-size: 13px; overflow-wrap: anywhere; }
.ledger-head a { text-underline-offset: 4px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); margin-top: 28px; }
.tiles > div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.tiles dt { font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .04em; }
.tiles dd { font: 800 clamp(17px, 2vw, 28px)/1.25 var(--display); margin-top: 8px; overflow-wrap: anywhere; }
.tiles dd small { display: block; font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); margin-top: 4px; }
.table-wrap { overflow-x: auto; margin-top: 24px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-weight: 400; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--fg); white-space: nowrap; }
.table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .num { text-align: right; }
.table a { text-underline-offset: 3px; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: var(--field); }
.table .lbl { display: inline-block; margin-left: 8px; font-size: 11px; padding: 1px 6px; background: var(--hl-bg); color: var(--hl-fg); }
.dir::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px; }
.dir--in::before { border-radius: 50%; background: var(--fg); }
.dir--out::before { background: var(--red); }
.table--sm { font-size: 12.5px; }
.ghost { margin-top: 20px; min-height: 44px; padding: 0 18px; border: 1px solid currentColor; font-size: 13px; transition: background .25s, color .25s; }
.ghost:hover { background: var(--fg); color: var(--bg); }
.ghost--sm { margin: 0; min-height: 36px; padding: 0 12px; font-size: 12px; }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 6vh, 64px); }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { min-width: 92px; min-height: 44px; padding: 0 16px; font-size: 13px; text-transform: uppercase; }
.seg button.on { background: var(--fg); color: var(--bg); }
.field { display: block; margin-top: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); }
.field input { display: block; width: 100%; margin-top: 8px; background: none; border: 0; border-bottom: 2px solid var(--fg); padding: 8px 0; color: var(--fg); font: 800 clamp(24px, 3.4vw, 46px)/1.2 var(--display); border-radius: 0; }
.range { -webkit-appearance: none; appearance: none; width: 100%; margin: 24px 0 18px; height: 24px; background: none; }
.range::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
.range::-moz-range-track { height: 2px; background: var(--line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--red); border: 0; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); font-size: 12px; }
.presets button:hover { border-color: var(--fg); }
.calc__big strong { display: block; font: 900 clamp(38px, 6.4vw, 96px)/1.05 var(--display); letter-spacing: -.035em; margin-top: 8px; overflow-wrap: anywhere; }
.sub-v { display: block; margin-top: 6px; color: var(--fg-2); font-size: 13.5px; overflow-wrap: anywhere; }
.rows { margin-top: 24px; border-top: 1px solid var(--line); }
.rows > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rows dt { color: var(--fg-2); }
.rows dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.calc__out .small { margin-top: 18px; }

/* Charts */
.chart { margin-top: clamp(40px, 7vh, 72px); }
.chart figcaption { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.plot { position: relative; width: 100%; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tv { margin-top: 10px; font-size: 12.5px; color: var(--fg-2); }
.tv summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; text-underline-offset: 3px; text-decoration: underline; }
.tv .table-wrap { max-height: 320px; overflow: auto; margin-top: 8px; color: var(--fg); }
.tooltip { position: fixed; z-index: 105; pointer-events: none; background: var(--paper); color: var(--ink); padding: 8px 10px; font-size: 12px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); max-width: 280px; }
.tooltip b { display: block; font-size: 14px; }
.hero-num { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hero-num strong { font: 900 clamp(48px, 9vw, 140px)/1 var(--display); letter-spacing: -.04em; }
.hero-num span { color: var(--fg-2); }
.dist { display: flex; gap: 2px; height: clamp(46px, 7vw, 76px); }
.dist > button { position: relative; min-width: 4px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; transition: filter .2s, transform .8s var(--ease); transform: scaleX(0); transform-origin: left; }
.dist.in > button { transform: none; }
.dist > button:hover, .dist > button:focus-visible { filter: brightness(1.2); }
.dist > button:first-child { border-radius: 4px 0 0 4px; }
.dist > button:last-child { border-radius: 0 4px 4px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 13px; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: 2px; }

/* Forms */
.line-form { display: flex; margin-top: 30px; border-bottom: 2px solid var(--fg); align-items: stretch; }
.line-form input { flex: 1; min-width: 0; background: none; border: 0; padding: 14px 12px 14px 0; font-size: clamp(14px, 1.5vw, 20px); border-radius: 0; }
.line-form input::placeholder { color: var(--fg-2); }
.line-form input:focus { outline: none; }
.line-form:focus-within { border-color: var(--red); }
.line-form button { padding: 0 18px; min-height: 48px; font-weight: 700; font-size: 13px; text-transform: uppercase; background: var(--fg); color: var(--bg); white-space: nowrap; }
.line-form button:hover { background: var(--red); color: #fff; }
.msg { margin-top: 14px; min-height: 1.5em; color: var(--fg-2); }
.verdict { margin-top: 18px; font: 800 clamp(16px, 2.1vw, 30px)/1.25 var(--display); min-height: 1.3em; text-transform: uppercase; }
.verdict::before { display: inline-block; margin-right: 10px; }
.verdict.yes::before { content: '●'; color: var(--khaki); }
.verdict.no { color: #ff5b52; }
.verdict.no::before { content: '✕'; }

/* Work */
.repos { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 36px; border-top: 1px solid var(--fg); }
.repos a { display: block; padding: 18px 14px 18px 0; height: 100%; border-bottom: 1px solid var(--line); text-decoration: none; }
.repos a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.repos b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.repos strong { display: block; font: 900 clamp(26px, 3.6vw, 56px)/1.1 var(--display); letter-spacing: -.03em; margin-top: 10px; }
.repos small { display: block; color: var(--fg-2); margin-top: 4px; font-size: 12px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.log li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.log time, .log .when { color: var(--fg-2); font-size: 12.5px; }
.log a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.log small { display: block; color: var(--fg-2); margin-top: 2px; font-size: 12.5px; }
.note-line { margin-top: 40px; font-size: 14px; }

/* Shield */
.ca { margin-top: 32px; padding: 20px; background: var(--hl-bg); color: var(--hl-fg); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.ca .k { color: inherit; grid-column: 1 / -1; }
.ca code { font: 800 clamp(13px, 1.9vw, 26px)/1.3 var(--display); overflow-wrap: anywhere; }
.ca .ghost:hover { background: var(--hl-fg); color: var(--hl-bg); }
.rules { counter-reset: r; margin-top: clamp(52px, 8vh, 96px); }
.rules li { counter-increment: r; position: relative; padding: 18px 0 18px 56px; border-bottom: 1px solid var(--line); font: 500 clamp(14px, 1.3vw, 18px)/1.4 var(--display); }
.rules li::before { content: 'NO_' counter(r, decimal-leading-zero); position: absolute; left: 0; top: 21px; font: 700 11.5px var(--mono); }

/* Promises and FAQ */
.promise-empty { margin-top: 40px; font: 500 clamp(18px, 2.6vw, 38px)/1.3 var(--display); max-width: 30em; letter-spacing: -.015em; }
.faq { margin-top: clamp(36px, 6vh, 64px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 800 clamp(15px, 2vw, 28px)/1.25 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--red); font-size: 1.3em; line-height: .9; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 26px; max-width: 54em; color: var(--fg-2); }

/* Footer */
.foot { background: var(--bg); color: var(--fg); padding: clamp(56px, 9vh, 110px) var(--gutter) var(--gutter); overflow: hidden; }
.foot__word { font: 900 18.2vw/.86 var(--display); letter-spacing: -.05em; white-space: nowrap; display: flex; align-items: flex-end; }
.foot__word .dot { width: .17em; height: .17em; margin: 0 0 .07em .05em; flex: none; }
.foot__row { display: grid; grid-template-columns: minmax(0, 2fr) 1fr auto; gap: 24px; align-items: end; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.back { font-weight: 700; font-size: 13px; text-underline-offset: 4px; min-height: 40px; display: inline-flex; align-items: center; }

@media (max-width: 1000px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stats__grid > div:nth-child(3n) { border-right: 0; }
  .stats__grid > div:nth-child(3n + 1) { padding-left: 0; }
  .stats__grid > div:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .repos { grid-template-columns: repeat(3, 1fr); }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .calc, .cols { grid-template-columns: minmax(0, 1fr); }
  .rules { margin-top: 12px; }
}
@media (max-width: 720px) {
  :root { --bar-h: 64px; }
  .fact { grid-template-columns: 54px minmax(0, 1fr); padding: 22px 0; }
  .fact__no { font-size: 11.5px; }
  .fact__v { grid-column: 2; grid-row: 2; }
  .fact__body { grid-column: 2; grid-row: 1; }
  .fact__a { grid-column: 2; grid-row: 3; padding-top: 0; }
  .hero__row { flex-direction: column; gap: 12px; margin-top: 14px; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .round { width: 112px; font-size: 11.5px; padding: 12px; }
  .menu { grid-template-columns: minmax(0, 1fr); }
  .flow__stage { grid-template-columns: 22px minmax(0, 1fr); gap: 16px; }
  .flow__big { grid-column: 1 / -1; position: sticky; top: var(--bar-h); z-index: 2; background: var(--bg); padding: 6px 0 10px; font-size: 19vw; }
  .flow__big small { margin-top: 4px; font-size: 11.5px; }
  .flow__step { min-height: 48vh; padding: 5vh 0; }
  .flow__dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tiles--4 { grid-template-columns: minmax(0, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid > div { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--line); }
  .repos { grid-template-columns: repeat(2, 1fr); }
  .log li { grid-template-columns: minmax(0, 1fr); }
  .ca { grid-template-columns: minmax(0, 1fr); }
  .foot__row { grid-template-columns: minmax(0, 1fr); }
  .note { max-width: none; }
  .line-form button { padding: 0 12px; }
}


/* ==========================================================================
   Pinned scenes. Each one is exactly one screen; its timeline runs on scroll.
   ========================================================================== */

/* Bar goes transparent over full-screen scenes, like a frame around the picture. */
.bar[data-clear] { background: transparent; }

/* Loader, rebuilt: the mark fills with dots above a bottom status row. */
.loader { justify-content: flex-end; gap: 12px; }
.loader__art { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); }
.loader__row { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.loader__num { font-size: clamp(38px, 5.6vw, 74px); line-height: 1; min-width: 2.5em; color: var(--paper); }
.loader__num i { font-size: .36em; margin: .1em 0 0 .08em; }
.loader__bar { flex: 1; }
.loader__brand { font: 800 15px/1 var(--display); color: var(--red); }
.loader__top { padding-top: 12px; border-top: 1px solid rgba(200, 189, 150, .2); color: #b4ad90; font-size: 11.5px; }

.scene { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); color: var(--fg); }

/* Hero, second state */
.hero2 { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--bar-h) + 2vh); pointer-events: none; }
.hero2__a, .hero2__b { font: 900 clamp(26px, 6.6vw, 104px)/1.04 var(--display); letter-spacing: -.03em; text-transform: uppercase; opacity: 0; }
.hero2__b { text-align: right; margin-top: .1em; }
.hero2__b span { display: inline-block; padding: .14em .24em .06em; background: var(--ink); color: var(--khaki); }
.hero2__note { position: absolute; left: 0; top: calc(100% + 3vh); display: flex; gap: 10px; max-width: 420px; font-size: 12.5px; line-height: 1.5; text-transform: uppercase; opacity: 0; }
.hero__fit { will-change: transform; }

/* Numbers on an arc */
.numbers__glow { position: absolute; left: 50%; top: -58vh; width: 150vw; height: 100vh; margin-left: -75vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 23, 15, .58), rgba(232, 23, 15, .13) 58%, transparent 74%); }
.numbers__arc { position: absolute; left: 0; top: 34%; width: 100%; height: 42%; overflow: visible; fill: none; }
.numbers__arc path { stroke: var(--red); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.numbers__head { position: absolute; left: var(--gutter); bottom: var(--gutter); display: flex; gap: 12px; align-items: center; }
.sub--flat { margin: 0; font-size: clamp(14px, 1.7vw, 24px); }
.numbers__row { position: absolute; inset: 0; }
.ncard { position: absolute; left: 0; top: 0; width: clamp(190px, 21vw, 300px); will-change: transform; }
.ncard__tile { aspect-ratio: 1.12; background: radial-gradient(circle at 70% 18%, rgba(232, 23, 15, .95), rgba(120, 18, 10, .78) 56%, rgba(58, 60, 44, .7)); display: grid; place-items: center; position: relative; overflow: hidden; }
.ncard__tile::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(23, 24, 15, .55) 1.1px, transparent 1.3px); background-size: 7px 7px; }
.ncard__glyph { width: 58%; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; position: relative; z-index: 1; }
.ncard__v { display: block; margin: -.5em 0 0 .18em; font: 900 clamp(38px, 6vw, 92px)/1 var(--display); letter-spacing: -.04em; color: var(--paper); position: relative; z-index: 2; white-space: nowrap; }
.ncard__v .dot { width: .2em; height: .2em; margin-left: .06em; vertical-align: top; }
.ncard__k { display: block; margin-top: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); }

/* Sun and orbits */
.how__stars { position: absolute; inset: -10% 0; width: 100%; height: 120%; }
.how__glow { position: absolute; left: 50%; top: 50%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 23, 15, .34), rgba(232, 23, 15, .08) 42%, transparent 66%); }
.how__title { position: absolute; left: var(--gutter); top: calc(var(--bar-h) + 4vh); z-index: 4; }
.how__title .ln--hl { clip-path: none; }
.how__dome { position: absolute; left: 50%; top: 50%; width: var(--sun); height: var(--sun); margin: calc(var(--sun) / -2) 0 0 calc(var(--sun) / -2); border-radius: 50%; background: radial-gradient(circle at 50% 42%, #2a120d 0%, #4a120c 44%, #a3150d 74%, #e8170f 92%); box-shadow: 0 0 90px 22px rgba(232, 23, 15, .55), inset 0 0 40px rgba(255, 90, 70, .35); z-index: 2; }
.how { --sun: clamp(250px, 44vmin, 430px); }
.how__rings { position: absolute; left: 50%; top: 50%; width: clamp(560px, 142vmin, 1500px); aspect-ratio: 1; margin-top: calc(clamp(560px, 142vmin, 1500px) / -2); margin-left: calc(clamp(560px, 142vmin, 1500px) / -2); z-index: 1; }
.how__rings i { position: absolute; inset: var(--inset); border-radius: 50%; border: 1px solid rgba(232, 23, 15, .55); }
.how__rings i:nth-child(1) { --inset: 30%; }
.how__rings i:nth-child(2) { --inset: 20%; opacity: .75; }
.how__rings i:nth-child(3) { --inset: 10%; opacity: .5; }
.how__rings i:nth-child(4) { --inset: 0%; opacity: .32; }
.how__nodes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
.how__node { position: absolute; left: 0; top: 0; padding: 7px 14px; border: 1px solid rgba(232, 23, 15, .75); border-radius: 999px; background: var(--ink); font: 800 clamp(9.5px, .85vw, 12.5px)/1 var(--display); white-space: nowrap; color: var(--paper); }
.how__node.is-active { visibility: hidden; }
.how__core { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; }
.how__pill { position: absolute; right: calc(var(--sun) / 2 + clamp(30px, 6vw, 90px)); top: 0; transform: translateY(-50%); padding: 13px 26px 13px 34px; white-space: nowrap; font: 800 clamp(13px, 1.5vw, 20px)/1 var(--display); color: #fff; background: linear-gradient(90deg, #5c0f0a, var(--red) 62%, rgba(232, 23, 15, .15)); border-radius: 999px 0 0 999px; }
.how__wire { position: absolute; right: calc(var(--sun) / 2 - 8px); top: -5px; width: clamp(30px, 6vw, 90px); height: 10px; }
.how__wire::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--red); }
.how__wire::after { content: ''; position: absolute; right: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.how__list { position: absolute; left: calc(var(--sun) / -2 + 8%); left: calc(var(--sun) * -.36); top: 0; transform: translateY(-50%); width: calc(var(--sun) * .72); border-left: 1px solid rgba(232, 23, 15, .9); }
.how__list li { position: relative; padding: 10px 0 10px 16px; font-size: clamp(11px, .92vw, 13.5px); line-height: 1.35; text-transform: uppercase; color: var(--paper); }
.how__list li::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 1px; background: var(--red); }

/* Team */
.team__glow { position: absolute; left: -10%; right: -10%; top: 0; height: 66%; background: radial-gradient(ellipse at 50% 0%, rgba(232, 23, 15, .78), rgba(120, 18, 10, .32) 46%, transparent 72%); }
.team__head { position: absolute; left: var(--gutter); top: calc(var(--bar-h) + 1.5vh); display: flex; align-items: center; gap: clamp(30px, 4.6vw, 70px); z-index: 4; }
.team__num { position: relative; font: 900 clamp(84px, 15vw, 210px)/.9 var(--display); letter-spacing: -.05em; color: var(--paper); }
.team__num .dot { position: absolute; right: -.26em; top: .06em; width: .2em; height: .2em; }
.team__title { font: 900 clamp(22px, 4.5vw, 66px)/1.04 var(--display); letter-spacing: -.025em; text-transform: uppercase; max-width: 11em; }
.team__stage { position: absolute; inset: 0; }
.tm { position: absolute; bottom: 0; width: var(--d); height: 0; left: var(--x); --d: clamp(150px, 16.5vw, 270px); }
.tm--0 { --x: 4%; --lift: 13vh; }
.tm--1 { --x: 22%; --lift: 28vh; }
.tm--2 { --x: 40.5%; --lift: 7vh; --d: clamp(180px, 20vw, 330px); }
.tm--3 { --x: 60%; --lift: 26vh; }
.tm--4 { --x: 79%; --lift: 11vh; }
.tm__ball { position: absolute; left: 0; bottom: var(--lift); width: var(--d); height: var(--d); border-radius: 50%; background: radial-gradient(circle at 42% 30%, #6a6c52 0%, #2c2d22 26%, #17180f 58%, #0a0a06 100%); box-shadow: inset -14px -18px 36px rgba(0, 0, 0, .6), 0 28px 60px rgba(0, 0, 0, .65); will-change: transform; }
.tm__ball i { position: absolute; right: 15%; top: 8%; width: 13%; height: 13%; border-radius: 50%; background: var(--red); box-shadow: 0 0 22px rgba(232, 23, 15, .9); }
.tm__ret { position: absolute; left: 50%; bottom: calc(var(--lift) + var(--d) / 2); width: calc(var(--d) * 1.14); height: calc(var(--d) * 1.14); margin: 0 0 calc(var(--d) * -.57) calc(var(--d) * -.57); pointer-events: none; }
.tm__ret i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232, 23, 15, .6); }
.tm__ret i + i { inset: 19%; opacity: .55; }
.tm__ret b { position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--red); }
.tm:hover .tm__ret i { border-color: var(--red); }
.tm__label { position: absolute; left: calc(var(--d) * .08); bottom: calc(var(--lift) + var(--d) * .22); z-index: 3; font-size: 10.5px; line-height: 1.5; color: #e8c8bf; }
.tm__tick { display: block; width: 14px; height: 3px; background: var(--red); margin-bottom: 5px; }
.tm__label small { display: block; font-size: 10px; letter-spacing: .04em; }
.tm__label strong { display: block; margin-top: 4px; font: 800 clamp(11.5px, 1.2vw, 17px)/1.2 var(--display); color: #fff; }
.tm--founder .tm__label strong { color: #fff; font-size: clamp(14px, 1.55vw, 22px); }
.tm--founder .tm__role { color: #ffb0a6; font-weight: 700; }
.tm__from { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--paper); font-size: 11.5px; }
.flag { width: 21px; height: 13px; flex: none; }
.team__note { position: absolute; right: var(--gutter); top: calc(var(--bar-h) + 2vh); width: min(330px, 26vw); z-index: 4; font-size: 12px; line-height: 1.5; text-transform: uppercase; }
.team__note p { display: flex; gap: 10px; }
.team__sponsor { margin-top: 14px; }
.team__sponsor b { color: #fff; }

/* Big words with floating commits */
.bigm { position: relative; padding: clamp(50px, 8vh, 90px) 0; overflow: hidden; background: var(--bg); color: var(--fg); }
.bigm__row { font: 900 clamp(58px, 13vw, 210px)/1.02 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.bigm__row span { display: inline-block; will-change: transform; }
.bigm__row--b { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.bigm__floats { position: absolute; inset: 0; pointer-events: none; }
.mfloat { position: absolute; display: block; width: clamp(170px, 19vw, 300px); padding: 12px 14px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.35; text-decoration: none; pointer-events: auto; box-shadow: 0 16px 40px rgba(23, 24, 15, .35); }
.mfloat small { display: block; color: #b4ad90; margin-bottom: 5px; font-size: 10.5px; }
.mfloat:hover { background: var(--red); color: #fff; }
.mfloat--0 { left: 6%; top: 8%; }
.mfloat--1 { left: 30%; top: 58%; }
.mfloat--2 { left: 53%; top: 6%; }
.mfloat--3 { left: 73%; top: 52%; }
.mfloat--4 { left: 88%; top: 14%; }

/* Hanging pass */
#facts { overflow: hidden; }
.pass-hang { position: absolute; right: clamp(40px, 9vw, 150px); top: 0; z-index: 3; }
.pass { position: relative; width: clamp(200px, 19vw, 270px); transform-origin: 50% 0; will-change: transform; }
.pass__strap { display: block; width: 26px; height: clamp(90px, 16vh, 170px); margin: 0 auto; background: repeating-linear-gradient(0deg, #24251c 0 7px, #3a3c2c 7px 9px); }
.pass__clip { display: block; width: 16px; height: 22px; margin: -2px auto 0; border: 3px solid var(--khaki); border-radius: 4px; }
.pass__card { margin-top: -6px; padding: 18px; color: var(--paper); border-radius: 14px; background: linear-gradient(150deg, #5c0f0a, #1d1e15 62%); box-shadow: 0 26px 54px rgba(0, 0, 0, .55); border: 1px solid rgba(200, 189, 150, .22); }
.pass__card strong { display: block; font: 900 clamp(15px, 1.5vw, 21px)/1.1 var(--display); }
.pass__card strong .dot { margin-left: .14em; width: .34em; height: .34em; }
.pass__rows { margin-top: 16px; }
.pass__rows div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 11px; border-top: 1px solid rgba(200, 189, 150, .18); }
.pass__rows dt { color: #b4ad90; }
.pass__rows dd { font-weight: 700; white-space: nowrap; }
.pass__card small { display: block; margin-top: 12px; color: #b4ad90; font-size: 10px; }

/* Money flow as a pinned stage with tabs (wide screens) */
.flow { margin-top: clamp(40px, 7vh, 80px); background: var(--bg); color: var(--fg); position: relative; overflow: hidden; }
.flow__tabs, .flow__floor { display: none; }
.flow__stage { padding-top: 6vh; padding-bottom: 6vh; }
.flow__big small { color: var(--fg-2); }
.flow__step .addr { color: var(--fg-2); }
@media (min-width: 900px) {
  .flow { height: 100svh; min-height: 620px; --tone: rgba(200, 189, 150, .4); --tone-solid: var(--khaki); transition: --tone .6s; }
  .flow::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 74%; background: linear-gradient(0deg, var(--tone), transparent); transition: background .7s; }
  .flow[data-tone='1'] { --tone: rgba(125, 122, 80, .62); --tone-solid: #9c9a63; }
  .flow[data-tone='2'] { --tone: rgba(232, 23, 15, .36); --tone-solid: var(--red); }
  .flow[data-tone='3'] { --tone: rgba(160, 110, 40, .5); --tone-solid: #bd8a3c; }
  .flow[data-tone='4'] { --tone: rgba(230, 223, 200, .3); --tone-solid: var(--paper); }
  .flow__stage { position: absolute; inset: 0 0 clamp(54px, 8vh, 76px); max-width: none; display: block; padding: 0; margin: 0; }
  .flow__big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); width: 100%; text-align: center; font-size: clamp(90px, 18vw, 300px); line-height: 1; min-height: 0; overflow: visible; }
  .flow__big span { animation: none; display: block; }
  .flow__big small { font-size: 12.5px; margin-top: 8px; }
  .flow__track { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; background: rgba(200, 189, 150, .22); z-index: 3; }
  .flow__fill { transform-origin: left; transform: scaleX(0); }
  .flow__dot { display: none; }
  .flow__steps { position: absolute; inset: 0; }
  .flow__step { position: absolute; right: var(--gutter); top: calc(var(--bar-h) + 2vh); width: min(440px, 34vw); min-height: 0; padding: 0; opacity: 0; transition: opacity .45s; }
  .flow__step:first-child { padding: 0; }
  .flow__step:last-child { min-height: 0; }
  .flow__step.on { opacity: 1; }
  .flow__step h3 { font-size: clamp(17px, 1.8vw, 26px); }
  .flow__step p { font-size: 13.5px; }
  .flow__floor { display: block; position: absolute; left: 50%; bottom: clamp(70px, 13vh, 130px); width: min(50vw, 720px); height: clamp(36px, 7vh, 72px); transform: translateX(-50%); border-radius: 50%; border: 2px solid var(--tone-solid); box-shadow: 0 0 44px 2px var(--tone); background: rgba(10, 10, 6, .55); transition: border-color .6s, box-shadow .6s; z-index: 0; }
  .flow__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(54px, 8vh, 76px); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 4; background: var(--ink); }
  .flow__tabs li { display: flex; align-items: center; justify-content: center; font-size: 12.5px; letter-spacing: .06em; color: var(--fg-2); transition: background .45s, color .45s; }
  .flow__tabs li.on { background: var(--tone-solid); color: var(--ink); font-weight: 700; }
  .flow__tabs li.on::before { content: '[ '; white-space: pre; }
  .flow__tabs li.on::after { content: ' ]'; white-space: pre; }
}

/* Why a token */
.why { margin-top: clamp(30px, 5vh, 60px); }
.why .fact { grid-template-columns: 84px minmax(0, 1fr); }
.why-end { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(40px, 7vh, 70px); }
.why-end p { margin-top: 12px; color: var(--fg-2); max-width: 36em; }
.why-end > div:last-child { padding: 20px; background: var(--hl-bg); color: var(--hl-fg); }
.why-end > div:last-child p { color: inherit; }
@media (max-width: 720px) {
  .why .fact { grid-template-columns: 54px minmax(0, 1fr); }
  .why-end { grid-template-columns: minmax(0, 1fr); }
}

/* Closing statement */
.final { background: var(--bg); color: var(--fg); padding: clamp(100px, 20vh, 220px) var(--gutter); }
.final .display { font-size: clamp(25px, 6.6vw, 110px); }

@media (max-width: 899px) {
  .pass-hang { display: none; }
  .team { height: auto; min-height: 0; overflow: clip; padding: calc(var(--bar-h) + 12px) var(--gutter) 40px; }
  .team__head, .team__note { position: static; width: auto; }
  .team__note { margin-top: 18px; }
  .team__glow { height: 340px; }
  .team__stage { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; }
  .tm { position: relative; left: auto; bottom: auto; width: auto; height: auto; --d: 74px; --lift: 0px; display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tm__ball { position: relative; left: auto; bottom: auto; flex: none; }
  .tm__ret { display: none; }
  .tm__label { position: static; }
  .tm--founder { order: -1; }
  .how { --sun: min(66vw, 300px); }
  .how__rings { width: 180vmin; margin-top: -90vmin; margin-left: -90vmin; }
  .how__title { top: calc(var(--bar-h) + 2vh); }
  .how__pill { right: auto; left: 50%; top: calc(var(--sun) / -2 - 46px); transform: translateX(-50%); border-radius: 999px; padding: 11px 20px; background: linear-gradient(90deg, #5c0f0a, var(--red)); }
  .how__wire { display: none; }
  .how__node { display: none; }
  .ncard { width: 62vw; max-width: 270px; }
  .ncard__v { font-size: clamp(42px, 13vw, 66px); }
  .mfloat--3, .mfloat--4 { display: none; }
  .mfloat--0 { left: 4%; }
  .mfloat--1 { left: 30%; }
  .mfloat--2 { left: 42%; }
  .hero2__note { max-width: none; }
}

/* Without motion every scene lays out as plain, readable content. */
.no-motion .scene { height: auto; min-height: 0; overflow: visible; padding: calc(var(--bar-h) + 10px) var(--gutter) 40px; }
.no-motion .hero2 { position: static; padding: var(--gutter); }
.no-motion .hero2__a, .no-motion .hero2__b, .no-motion .hero2__note { opacity: 1; position: static; }
.no-motion .numbers__row { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; margin-top: 24px; }
.no-motion .ncard { position: static; width: auto; }
.no-motion .numbers__head { position: static; }
.no-motion .numbers__arc, .no-motion .how__rings, .no-motion .how__dome, .no-motion .how__nodes, .no-motion .how__core, .no-motion .how__stars, .no-motion .how__glow { display: none; }
.no-motion .how__title { position: static; }
.no-motion .how__static { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 28px; }
.no-motion .how__static b { display: block; font: 800 16px var(--display); margin-bottom: 8px; }
.no-motion .how__static span { display: block; color: var(--fg-2); padding: 3px 0; }
.no-motion .team__head, .no-motion .team__note { position: static; width: auto; margin-bottom: 16px; }
.no-motion .team__stage { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.no-motion .tm { position: relative; left: auto; bottom: auto; width: auto; height: auto; --d: 74px; --lift: 0px; display: flex; gap: 14px; align-items: center; }
.no-motion .tm__ball { position: relative; left: auto; bottom: auto; flex: none; }
.no-motion .tm__ret { display: none; }
.no-motion .tm__label { position: static; }
.no-motion .pass-hang { display: none; }

/* Screen readers always get the full how-it-works list. */
.how__static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.no-motion .how__static { position: static; width: auto; height: auto; clip-path: none; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ticker__track { animation: none; }
  .flow__step { opacity: 1; }
}
@media (forced-colors: active) {
  .dist > button, .badge { border: 1px solid CanvasText; }
}