/* Shroud marketing site. True black, one type family, 1px neutral lines, white as the only accent. */

@font-face { font-family: "Switzer"; font-weight: 400; font-display: swap; src: url(/assets/switzer-400.woff2) format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 500; font-display: swap; src: url(/assets/switzer-500.woff2) format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 600; font-display: swap; src: url(/assets/switzer-600.woff2) format("woff2"); }
/* Arrows, check, search, note, redaction bar, pause/play: Switzer has none of these */
@font-face {
  font-family: "Shroud Glyphs"; font-display: block; src: url(/assets/glyphs.woff2) format("woff2");
  unicode-range: U+2190-2198, U+21C4, U+2315, U+25A5, U+25B7, U+2588, U+2713, U+2161;
}

:root {
  --bg: #000;
  --fg: #f4f4f4;
  --fg-2: #a3a3a3;
  --fg-3: #6b6b6b;
  --dim: #5e5e5e;
  --line: #1a1a1a;
  --line-2: #2a2a2a;
  --line-3: #3d3d3d;
  --ok: #3ddc84;
  --warn: #f2c94c;
  --pad: clamp(20px, 5vw, 80px);
  --max: 1600px;
  --hdr: 64px;
  --sans: "Switzer", "Shroud Glyphs", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--fg-2); }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 14px; font-weight: 500; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.eth { display: inline-block; width: .62em; height: 1em; flex: none; }
.dim { color: var(--dim); }
.ar { display: inline-block; transition: transform .3s var(--ease); }

/* ---------------------------------------------------------------- type */
.kicker { font: 500 13px/1.2 var(--sans); letter-spacing: .01em; color: var(--fg-3); }
.h1 { margin: 22px 0 0; font-weight: 500; font-size: clamp(52px, 8.4vw, 136px); line-height: .9; letter-spacing: -.055em; text-wrap: balance; }
.h2 { margin: 0; font-weight: 500; font-size: clamp(40px, 5.6vw, 92px); line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.h3 { margin: 0; font-weight: 500; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.06; letter-spacing: -.035em; }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; max-width: 32em; text-wrap: pretty; }
.fine { font-size: 14px; color: var(--fg-3); }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: 44px; padding: 0 18px; border: 1px solid var(--line-3); background: transparent; font: 500 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s, transform .15s; }
.btn:hover { border-color: #fff; }
.btn:hover .ar { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn-solid { background: #fff; border-color: #fff; color: #000; }
.btn-solid:hover { background: #000; color: #fff; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 22px; min-width: 196px; font-size: 16px; }
.btn-block { width: 100%; height: 54px; }
.link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-3); font: 500 15px/1.2 var(--sans); color: var(--fg); transition: border-color .25s; }
.link:hover { border-color: #fff; }
.link:hover .ar { transform: translate(2px, -2px); }
.chip { font: 500 12px/1 var(--sans); padding: 6px 9px; border: 1px solid var(--line-3); color: var(--fg); white-space: nowrap; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .4); animation: pulse 2.4s infinite; flex: none; }
.dot.warn { background: var(--warn); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }

input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line-3); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 22px; margin-top: -10.5px; background: #fff; border: 0; }
input[type=range]::-moz-range-track { height: 1px; background: var(--line-3); }
input[type=range]::-moz-range-thumb { width: 10px; height: 22px; background: #fff; border: 0; border-radius: 0; }

.field { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line-2); transition: border-color .25s; }
.field:focus-within { border-color: var(--fg-3); }
.field > span:first-child { font-size: 13px; color: var(--fg-3); }
.field em { font-style: normal; }
.field small { font-size: 12px; color: var(--fg-3); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: 500 44px/1.05 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.field input[aria-invalid=true] { color: #ff8a80; }
.field select { width: 100%; padding: 2px 28px 2px 0; border: 0; outline: 0; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") right 2px center / 12px no-repeat; -webkit-appearance: none; appearance: none; font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; cursor: pointer; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line-3); font: 500 14px/1 var(--sans); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.hdr { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 44px; height: var(--hdr); padding: 0 var(--pad); background: #000; border-bottom: 1px solid var(--line); }
.hdr-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--fg); }
.hdr-brand .mark { height: 28px; width: auto; }
.hdr-brand .wordmark { height: 16px; width: auto; }
.hdr-nav { display: flex; gap: 30px; font-size: 15px; }
.hdr-nav a { color: var(--fg-2); transition: color .2s; }
.hdr-nav a:hover, .hdr-nav a[aria-current] { color: var(--fg); }
.hdr-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.hdr-end { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hdr-status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fg-2); }
.hdr-menu { display: none; width: 40px; height: 38px; padding: 0; border: 1px solid var(--line-3); background: none; position: relative; }
.hdr-menu span { position: absolute; left: 11px; right: 11px; height: 1px; background: #fff; transition: transform .3s var(--ease); }
.hdr-menu span:first-child { top: 15px; }
.hdr-menu span:last-child { top: 21px; }
.hdr-menu[aria-expanded=true] span:first-child { transform: translateY(3px) rotate(45deg); }
.hdr-menu[aria-expanded=true] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mnav { position: fixed; z-index: 49; inset: var(--hdr) 0 auto; display: grid; padding: 8px var(--pad) 24px; background: #000; border-bottom: 1px solid var(--line-2); }
.mnav[hidden] { display: none; }
.mnav a { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font: 500 24px/1.1 var(--sans); letter-spacing: -.03em; }

/* ---------------------------------------------------------------- sections */
.sec, .page-hero, .closing { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.sec { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(72px, 8vw, 128px); border-top: 1px solid var(--line); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.split-head { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 40px; margin-bottom: clamp(48px, 5.6vw, 88px); }
.split-head .lede { justify-self: end; }

/* ---------------------------------------------------------------- cover */
.cover { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: max(720px, calc(100svh - var(--hdr))); padding: clamp(20px, 2.4vw, 36px) var(--pad) 0; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.cover-ledger { position: absolute; z-index: -1; inset: 0 0 0 34%; }
.cover-ledger canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.cover-ledger canvas.ready { opacity: 1; }
.cover-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .75) 16%, rgba(0, 0, 0, 0) 46%),
  linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .8) 13%, rgba(0, 0, 0, 0) 42%),
  linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%); }
.cover-mast svg { display: block; width: 100%; height: auto; color: var(--fg); }
.cover-body { align-self: end; max-width: 700px; padding: 28px 0 36px; }
.cover-title { margin: 0; font-weight: 500; font-size: clamp(48px, min(5.6vw, 9.4svh), 92px); line-height: .94; letter-spacing: -.055em; }
.cover-lede { margin: 22px 0 30px; max-width: 34em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; }
.cover-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.veil { position: absolute; z-index: 2; right: var(--pad); bottom: 96px; width: 290px; padding: 16px 18px 14px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.veil-top { display: flex; justify-content: space-between; font: 500 14px/1 var(--sans); }
.veil-top output { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.veil input { margin-top: 10px; }
.veil-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--fg-3); }
.cover-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 60px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }
.cover-foot a { display: inline-flex; gap: 10px; align-items: center; }
.cover-foot a:hover { color: var(--fg); }
.pause { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-3); background: #000; font-size: 11px; line-height: 1; }
.pause:hover { border-color: #fff; }

/* ---------------------------------------------------------------- 01 the idea */
.manifesto { display: grid; grid-template-columns: 1fr 2.4fr; gap: 40px; margin-bottom: clamp(72px, 9vw, 136px); }
.manifesto-aside { padding-top: .6em; font-size: 16px; line-height: 1.5; color: var(--fg-3); }
.manifesto-title { max-width: 14.5em; }
.lab { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(40px, 7vw, 128px); }
.lab-copy > p { max-width: 30em; margin: 22px 0 30px; font-size: 17px; }
.lab-copy .fine { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lab-copy .fine .link { font-size: 14px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); }
.seg button { height: 40px; padding: 0 18px; border: 0; background: none; color: var(--fg-2); font-weight: 500; font-size: 14px; transition: background-color .25s, color .25s; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed=true] { background: #fff; color: #000; }
.receipt { margin: 0; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line-2); background: #000; }
.receipt-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px dashed var(--line-2); font-size: 13px; color: var(--fg-3); }
.receipt-amt { display: flex; align-items: center; gap: 18px; padding: 30px 0 28px; font: 500 clamp(40px, 4.4vw, 60px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tok { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-3); border-radius: 50%; flex: none; }
.tok .eth { width: 16px; height: 26px; }
.rows { margin: 0; }
.rows div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rows dt { color: var(--fg-3); }
.rows dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.receipt figcaption { margin-top: 20px; font-size: 13px; color: var(--fg-3); }
.lab[data-private=false] .receipt { border-color: var(--line-3); }

/* ---------------------------------------------------------------- 02 moves */
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.moves-nav { border-top: 1px solid var(--line-2); }
.move { position: relative; display: grid; grid-template-columns: 52px 1fr 36px; align-items: baseline; width: 100%; padding: 28px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--fg-3); text-align: left; transition: color .3s; }
.move::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.move:hover { color: #9c9c9c; }
.move[aria-selected=true] { color: var(--fg); }
.move[aria-selected=true]::after { transform: scaleX(1); }
.move-num { font-size: 13px; font-weight: 500; }
.move-name { font: 500 clamp(34px, 3.8vw, 58px)/1 var(--sans); letter-spacing: -.045em; }
.move-name small { display: block; margin-top: 12px; font: 400 15px/1.4 var(--sans); letter-spacing: 0; color: var(--fg-3); }
.move[aria-selected=true] .move-name small { color: var(--fg-2); }
.move-ar { justify-self: end; font-size: 22px; }
.demo { max-width: 540px; margin-left: auto; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-2); background: #000; }
.demo-head { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.demo-head .mark { height: 22px; width: auto; }
.demo-head .chip { margin-left: auto; color: var(--fg-2); }
.demo-title { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.demo-title h3 { margin: 0; font: 500 34px/1.05 var(--sans); letter-spacing: -.035em; }
.demo-title span { font-size: 24px; }
.demo-desc { margin: 10px 0 24px; font-size: 15px; }
.pill .eth { width: 10px; height: 16px; }
.demo-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 24px 0 6px; font-size: 14px; color: var(--fg-2); }
.demo-line { position: relative; height: 1px; background: var(--line-2); overflow: hidden; }
.demo-line i { position: absolute; top: 0; left: -40%; width: 40%; height: 1px; background: linear-gradient(90deg, transparent, #fff); animation: travel 2.2s var(--ease) infinite; }
@keyframes travel { to { left: 100%; } }
.demo-fee { display: flex; justify-content: space-between; padding: 18px 0; margin: 14px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg-2); }
.demo-fee output { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-result { min-height: 2.8em; margin: 16px 0 0; font-size: 13px; line-height: 1.4; text-align: center; color: var(--fg-3); }
.demo-result.confirmed { color: var(--fg); }
.moves-vis { display: grid; gap: 8px; max-width: 540px; margin: 28px 0 0 auto; }
.moves-vis span:last-child { font-size: 15px; color: var(--fg-2); }

/* ---------------------------------------------------------------- 03 crowd */
.crowd-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.crowd-copy .lede { margin: 26px 0 44px; }
.crowd-stats { margin: 0; max-width: 460px; }
.crowd-stats div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.crowd-stats dt { color: var(--fg-3); }
.crowd-stats dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
#tree-root { font-family: var(--mono); font-size: 14px; font-weight: 400; }
.tree { margin: 0; padding: clamp(20px, 3vw, 44px); border: 1px solid var(--line-2); }
.tree-svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-edges path { fill: none; stroke: #252525; stroke-width: 1.2; transition: stroke .5s; }
.t-edges path.hot { stroke: #fff; transition-duration: .15s; }
.t-nodes circle { fill: #000; stroke: #3a3a3a; stroke-width: 1.2; transition: fill .5s, stroke .5s; }
.t-nodes circle.hot { fill: #fff; stroke: #fff; transition-duration: .15s; }
.t-leaves rect { fill: #000; stroke: #2e2e2e; stroke-width: 1.2; transition: fill .6s, stroke .6s; }
.t-leaves rect.on { fill: #4a4a4a; stroke: #4a4a4a; }
.t-leaves rect.new { fill: #fff; stroke: #fff; transition-duration: .15s; }
.tree.proving .t-leaves rect.on { fill: #b5b5b5; stroke: #b5b5b5; transition-duration: .25s; }
.tree figcaption { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 26px; font-size: 13px; color: var(--fg-3); }
.tree figcaption #tree-event { color: var(--fg-2); }

/* ---------------------------------------------------------------- 04 spec */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 7vw, 100px); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.spec { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.4vw, 34px) clamp(30px, 3vw, 44px); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.spec b { font: 500 clamp(46px, 4.8vw, 76px)/1 var(--sans); letter-spacing: -.05em; white-space: nowrap; }
.spec b sup { font-size: .45em; vertical-align: top; position: relative; top: .1em; letter-spacing: -.02em; }
.spec b i { font-style: normal; color: var(--fg-3); }
.spec span { margin-top: 18px; font-size: 15px; font-weight: 500; }
.spec p { font-size: 15px; max-width: 24em; }
.assets { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 56px; }
.assets ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.assets li { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 10px; border: 1px solid var(--line-2); transition: border-color .25s; }
.assets li:hover { border-color: var(--line-3); }
.assets img { width: 28px; height: 28px; border-radius: 50%; }
.assets b { font-weight: 500; font-size: 15px; }
.assets li span { font-size: 13px; color: var(--fg-3); }

/* ---------------------------------------------------------------- 05 the coin */
.coin-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.ca { display: grid; gap: 18px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-2); }
.ca-row { display: flex; align-items: center; gap: 12px; }
.ca-row code { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); font-size: 14px; color: var(--fg); overflow-wrap: anywhere; }
.ca-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ca-wait { font-size: 17px; color: var(--fg-2); }

/* ---------------------------------------------------------------- closing + footer */
.closing { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 48px; padding-top: clamp(88px, 10vw, 160px); padding-bottom: clamp(88px, 10vw, 160px); border-top: 1px solid var(--line); }
.closing-title { margin: 0; font: 500 clamp(64px, 10.4vw, 176px)/.86 var(--sans); letter-spacing: -.06em; }
.closing-copy { display: grid; gap: clamp(32px, 4vw, 56px); }
.closing-side { display: grid; justify-items: start; gap: 24px; }
.closing-side p { font-size: 18px; max-width: 22em; }
.closing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.closing-mark { justify-self: end; }
.closing-svg { display: block; height: clamp(280px, 34vw, 520px); width: auto; color: var(--fg); }
.closing-svg use { stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.ftr { border-top: 1px solid var(--line); padding: 56px var(--pad) 28px; }
.ftr-top { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 32px; max-width: var(--max); margin: 0 auto; }
.ftr-top p { font-size: 15px; color: var(--fg-3); }
.ftr-top nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }
.ftr-top nav a { color: var(--fg-2); transition: color .2s; }
.ftr-top nav a:hover { color: var(--fg); }
.ftr-word { max-width: var(--max); margin: clamp(64px, 9vw, 140px) auto 28px; }
.ftr-word svg { display: block; width: 100%; height: auto; color: var(--fg); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; max-width: var(--max); margin: 0 auto; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.ftr-bottom a { display: inline-flex; align-items: center; gap: 9px; }
.ftr-bottom a:hover, .motion-toggle:hover { color: var(--fg); }
.motion-toggle { padding: 0; border: 0; background: none; color: var(--fg-3); font-size: 13px; }

/* ---------------------------------------------------------------- inner pages */
.page-hero { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(64px, 7vw, 112px); }
.page-hero .lede { margin-top: 30px; }
.page-hero.split .h1 { font-size: clamp(48px, 6.4vw, 108px); }
.page-hero.split { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(40px, 6vw, 100px); }
.hero-fig { margin: 0; }
.circuit { display: block; width: 100%; height: auto; overflow: visible; }
.c-wire { fill: none; stroke: #2c2c2c; stroke-width: 1.2; }
.c-pulse { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 18 420; stroke-dashoffset: 438; animation: wire 3.2s var(--ease) infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes wire { to { stroke-dashoffset: 0; } }
.c-note { fill: #000; stroke: #6b6b6b; stroke-width: 1.2; }
.c-out { stroke: #fff; }
.c-box { fill: #000; stroke: #fff; stroke-width: 1.2; }
.c-title { fill: var(--fg); font: 500 22px var(--sans); letter-spacing: -.02em; }
.c-mono { fill: var(--fg-2); font: 400 11.5px var(--mono); }
.c-lab { fill: var(--fg-3); font: 500 11.5px var(--sans); }
.status-card { padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-2); }
.status-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.status-card .fine { margin-top: 18px; line-height: 1.5; }

.flow-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-2); }
.flow-tabs button { position: relative; padding: 0 12px 22px 0; border: 0; background: none; color: var(--fg-3); text-align: left; font: 500 clamp(22px, 2.4vw, 36px)/1 var(--sans); letter-spacing: -.035em; transition: color .3s; }
.flow-tabs button span { display: block; margin-bottom: 12px; font-size: 13px; letter-spacing: 0; }
.flow-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.flow-tabs button:hover { color: #9c9c9c; }
.flow-tabs button[aria-selected=true] { color: var(--fg); }
.flow-tabs button[aria-selected=true]::after { transform: scaleX(1); }
.flow-diagram { display: grid; grid-template-columns: 110px 1fr 200px 1fr 110px; align-items: center; padding: clamp(64px, 9vw, 120px) 0; }
.flow-end { display: grid; justify-items: center; gap: 14px; font-size: 14px; color: var(--fg-2); text-align: center; }
.flow-ico { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--line-3); font-size: 22px; color: var(--fg); }
.flow-track { position: relative; height: 1px; background: var(--line-2); overflow: hidden; }
.flow-track i { position: absolute; top: 0; left: -30%; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, #fff); animation: travel 2.4s var(--ease) infinite; }
.flow-track i:nth-child(2) { animation-delay: .8s; }
.flow-track i:nth-child(3) { animation-delay: 1.6s; }
.flow-core { position: relative; display: grid; place-content: center; justify-items: center; gap: 12px; width: 200px; aspect-ratio: 1; border: 1px solid var(--line-2); border-radius: 50%; font-size: 13px; color: var(--fg-2); }
.flow-core .mark { height: 58px; width: auto; color: var(--fg); }
.flow-core::before { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: #fff; border-radius: 50%; animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flow-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; padding-top: 44px; border-top: 1px solid var(--line); }
.flow-copy p { font-size: 17px; max-width: 34em; }
.flow-vis { grid-column: 2; display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.flow-vis span:last-child { color: var(--fg); }
#flow-text { grid-column: 2; grid-row: 1; }
#flow-title { grid-row: 1 / span 2; }

.detail { display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 24px 48px; padding: 52px 0; border-top: 1px solid var(--line); }
.detail:last-child { border-bottom: 1px solid var(--line); }
.detail-num { font-size: 13px; font-weight: 500; color: var(--fg-3); padding-top: 10px; }
.detail p { font-size: 17px; max-width: 36em; }

.fees-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th { padding: 0 0 16px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 13px; font-weight: 500; color: var(--fg-3); }
.fee-table td { padding: 24px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; vertical-align: baseline; }
.fee-table th:last-child, .fee-table td:last-child { text-align: right; }
.fee-table td:last-child { font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fee-table small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--fg-3); }
.calc { display: grid; gap: 14px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-2); }
.calc .kicker { margin-bottom: 4px; }
.calc-out { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line); color: var(--fg-2); }
.calc-out output { font: 500 40px/1 var(--sans); letter-spacing: -.035em; color: var(--fg); font-variant-numeric: tabular-nums; }

.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.status-copy p { margin-top: 22px; font-size: 17px; max-width: 32em; }
.kv { margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; }
.kv div:last-child { border-bottom: 1px solid var(--line); }
.kv dt { color: var(--fg-2); }
.kv dd { margin: 0; font-weight: 500; text-align: right; }
.cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-2); }
.col { padding: 32px 48px 8px 0; }
.col + .col { padding: 32px 0 8px 48px; border-left: 1px solid var(--line-2); }
.col ul { margin: 24px 0 0; padding: 0; list-style: none; }
.col li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.col li b { font-weight: 500; }
.col li span { color: var(--fg-2); font-size: 15px; }
.notice { max-width: 62em; margin-top: 48px; padding: 22px 26px; border: 1px solid var(--line-2); border-left: 2px solid #fff; font-size: 15px; color: var(--fg-2); }
.notice .link { margin-left: 8px; font-size: 14px; }
.faq-list details { border-top: 1px solid var(--line-2); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-2); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; list-style: none; cursor: pointer; font: 500 clamp(20px, 1.9vw, 27px)/1.2 var(--sans); letter-spacing: -.025em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; width: 16px; height: 16px; flex: none; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: #fff; transition: transform .35s var(--ease); }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0); }
.faq-list summary:hover { color: #fff; }
.faq-list details p { max-width: 46em; padding-bottom: 30px; font-size: 17px; }

.docs { display: grid; grid-template-columns: 250px minmax(0, 780px); gap: clamp(40px, 7vw, 120px); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--pad); }
.docs-side { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; display: grid; gap: 18px; }
.search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); color: var(--fg-3); transition: border-color .25s; }
.search:focus-within { border-color: var(--fg-3); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font-size: 15px; }
.search kbd { padding: 2px 7px; border: 1px solid var(--line-3); font: 500 12px var(--sans); color: var(--fg-3); }
.docs-side nav { display: grid; }
.docs-side nav a { padding: 9px 0 9px 16px; border-left: 1px solid var(--line-2); font-size: 15px; color: var(--fg-3); transition: color .2s, border-color .2s; }
.docs-side nav a:hover { color: var(--fg); }
.docs-side nav a.active { color: var(--fg); border-left-color: #fff; }
.docs-none { font-size: 14px; color: var(--fg-3); }
.doc { padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--line); }
.doc h2 { margin: 14px 0 26px; font: 500 clamp(34px, 3.6vw, 54px)/1.02 var(--sans); letter-spacing: -.045em; }
.doc h3 { margin: 40px 0 12px; font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: var(--fg-2); }
.doc p + p { margin-top: 16px; }
.doc b { color: var(--fg); font-weight: 500; }
.doc ul, .doc ol { margin: 16px 0; padding-left: 22px; }
.doc li { margin: 8px 0; padding-left: 4px; }
.doc li::marker { color: var(--fg-3); }
.doc code { padding: 1px 6px; border: 1px solid var(--line-2); font: 400 .86em var(--mono); color: var(--fg); }
.doc pre { margin: 18px 0; padding: 20px 22px; border: 1px solid var(--line-2); overflow-x: auto; }
.doc pre code { padding: 0; border: 0; font-size: 14px; line-height: 1.8; }
.doc table { width: 100%; margin: 8px 0 18px; border-collapse: collapse; }
.doc th, .doc td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 15px; }
.doc th { font-size: 13px; font-weight: 500; color: var(--fg-3); }
.doc .btn, .doc .link { margin-top: 18px; }
.callout { margin: 28px 0; padding: 22px 24px; border: 1px solid var(--line-2); border-left: 2px solid #fff; }
.callout b { display: block; }
.callout p { margin: 6px 0 0; font-size: 15px; }
.callout .link { margin-top: 14px; font-size: 14px; }
.docs-empty h2 { margin: 0 0 10px; font: 500 34px/1 var(--sans); letter-spacing: -.04em; }

.compare-sec { padding-top: 0; border-top: 0; }
.compare { position: relative; height: clamp(500px, 52vw, 620px); border: 1px solid var(--line-2); overflow: hidden; user-select: none; touch-action: pan-y; }
.cmp-layer { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(22px, 3.4vw, 44px); background: #000; }
.cmp-public { clip-path: inset(0 calc(100% - var(--split)) 0 0); background-color: #000; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; }
.cmp-private .kicker { justify-self: end; }
.cmp-card { align-self: center; justify-self: center; width: min(440px, 100%); padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line-2); background: #000; }
.cmp-amt { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; font: 500 clamp(36px, 4vw, 54px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cmp-amt .tok { width: 46px; height: 46px; }
.cmp-foot { font-size: 14px; color: var(--fg-3); }
.cmp-private .cmp-foot { justify-self: end; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; background: #fff; pointer-events: none; }
.cmp-handle span { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #000; font-size: 18px; transform: translate(-50%, -50%); }
#cmp { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.cmp-ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.cmp-ctrl button { height: 38px; padding: 0 16px; border: 1px solid var(--line-3); background: none; font-size: 14px; font-weight: 500; transition: border-color .2s, background-color .2s, color .2s; }
.cmp-ctrl button:hover { border-color: #fff; }
.cmp-ctrl button[aria-pressed=true] { background: #fff; color: #000; border-color: #fff; }

/* ---------------------------------------------------------------- light under the cursor, on borders only (panels stay #000) */
.receipt, .demo, .tree, .calc, .status-card { position: relative; }
:is(.receipt, .demo, .tree, .spec, .calc, .status-card, .assets li, .cmp-card)::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border: 1px solid transparent;
  background: radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), #fff, rgba(255, 255, 255, .35) 30%, transparent 70%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s;
}
:is(.receipt, .demo, .tree, .spec, .calc, .status-card, .assets li, .cmp-card):hover::after { opacity: 1; }
.assets li, .cmp-card { position: relative; }

/* ---------------------------------------------------------------- page-to-page fade (header stays put) */
@view-transition { navigation: auto; }
.hdr { view-transition-name: hdr; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

/* ---------------------------------------------------------------- motion */
.split .ln { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.split .ln > span { display: block; }
html.has-motion .split.reveal { opacity: 1; transform: none; }
html.has-motion .split .ln > span { transform: translateY(108%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 95ms + var(--d, 0) * 110ms); }
html.has-motion .split.is-visible .ln > span { transform: none; }
html.has-motion .cover-body > .cover-title.split { animation: none; }
html.has-motion .closing-mark use { fill-opacity: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
html.has-motion .closing-mark.is-visible use { animation: draw 2.6s var(--ease) forwards, fillin 1.1s 2s var(--ease) forwards; }
html.motion-off .closing-mark use { fill-opacity: 1; stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill-opacity: 1; } }
.cover-mast { transform: translateY(calc(var(--sp, 0) * 90px)); opacity: calc(1 - var(--sp, 0) * .7); will-change: transform; }
.cover-ledger { opacity: calc(1 - var(--sp, 0) * .6); }
html.has-motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
html.has-motion .reveal.is-visible { opacity: 1; transform: none; }
html.has-motion .cover-mast svg { animation: rise 1.3s var(--ease) both; }
html.has-motion .cover-body > * { animation: up 1s var(--ease) both; }
html.has-motion .cover-body > :nth-child(2) { animation-delay: .12s; }
html.has-motion .cover-body > :nth-child(3) { animation-delay: .22s; }
html.has-motion .veil, html.has-motion .cover-foot { animation: up 1s .35s var(--ease) both; }
@keyframes rise { from { clip-path: inset(0 0 100% 0); transform: translateY(6%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .hdr { gap: 32px; }
  .hdr-nav { gap: 22px; }
}
@media (max-width: 900px) {
  :root { --hdr: 60px; }
  .hdr-nav, .hdr-status { display: none; }
  .hdr-end { gap: 10px; }
  .hdr-menu { display: block; }
  .split-head, .manifesto, .lab, .moves, .crowd-grid, .closing, .fees-grid, .status-grid, .flow-copy, .cols, .page-hero.split, .coin-grid { grid-template-columns: 1fr; }
  .split-head .lede { justify-self: start; }
  .manifesto { gap: 18px; }
  .manifesto-aside { padding-top: 0; }
  .cover-ledger { inset: 0 0 auto 0; height: min(52%, 440px); }
  .cover-ledger canvas.ready { opacity: .7; }
  .cover-shade { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, 0) 75%); }
  .cover-body { padding-top: 120px; }
  .veil { position: relative; right: auto; bottom: auto; width: 100%; margin-bottom: 28px; }
  .cover-foot span { display: none; }
  .moves-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0; border-bottom: 1px solid var(--line-2); }
  .move { grid-template-columns: 1fr; gap: 8px; padding: 0 0 16px; border-bottom: 0; }
  .move-name { font-size: clamp(18px, 4.6vw, 30px); letter-spacing: -.035em; }
  .move-name small, .move-ar { display: none; }
  .demo, .moves-vis { max-width: none; margin-left: 0; }
  .closing-mark { justify-self: start; order: -1; }
  .closing-svg { height: 150px; }
  .ftr-top { grid-template-columns: 1fr; }
  .flow-diagram { grid-template-columns: 64px 1fr 120px 1fr 64px; }
  .flow-core { width: 120px; }
  .flow-core .mark { height: 38px; }
  .flow-ico { width: 52px; height: 52px; font-size: 18px; }
  .flow-end { font-size: 12px; }
  .flow-vis, #flow-text { grid-column: 1; grid-row: auto; }
  #flow-title { grid-row: auto; }
  .detail { grid-template-columns: 1fr; gap: 14px; padding: 40px 0; }
  .detail-num { padding-top: 0; }
  .col, .col + .col { padding: 28px 0 8px; border-left: 0; }
  .col + .col { border-top: 1px solid var(--line-2); }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-side { position: static; }
  .docs-side nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .docs-side nav a { flex: none; padding: 8px 12px; border: 1px solid var(--line-2); }
  .docs-side nav a.active { border-color: #fff; }
}
@media (max-width: 600px) {
  .hdr-end .btn { display: none; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec { padding: 20px 16px 24px; gap: 6px; }
  .spec b { font-size: clamp(26px, 8vw, 34px); }
  .spec span { margin-top: 10px; font-size: 14px; }
  .spec p { font-size: 13.5px; line-height: 1.45; }
  .cover-title { font-size: clamp(44px, 13vw, 64px); }
  .cover-cta .btn-lg { flex: 1; }
  .receipt-amt { font-size: 40px; }
  .flow-tabs { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .flow-tabs button { font-size: 22px; }
  .col li { grid-template-columns: 1fr; gap: 4px; }
  .assets { gap: 16px; }
  .assets li span { display: none; }
  .cmp-card { padding: 18px; }
  .cmp-foot { display: none; }
  .c-lab { font-size: 17px; }
  .c-title { font-size: 30px; }
  .c-mono { display: none; }
  .cmp-amt { font-size: 32px; }
  .cmp-amt .tok { width: 38px; height: 38px; }
  .rows div { font-size: 14px; }
  .ftr-top nav { gap: 10px 20px; }
}