/* =====================================================================
   DR4WN — site styles
   Concrete ground, ink type, one vermilion signal. Layout offsets and
   tilts are written into CSS variables by js/seed.js from the seed.
   ===================================================================== */

:root {
  --bg: #D5D9D4;
  --bg-2: #C6CBC5;
  --glass: rgba(239, 242, 238, 0.58);
  --glass-strong: rgba(243, 245, 242, 0.82);
  --ink: #14171A;
  --ink-2: #3E454C;
  --ink-3: #6A727A;
  --line: rgba(20, 23, 26, 0.14);
  --line-strong: rgba(20, 23, 26, 0.32);
  --accent: #FF4A1C;
  --accent-ink: #C7300C;
  --accent-soft: rgba(255, 74, 28, 0.14);
  --up: #0A8457;
  --down: #D2361A;
  --dark: #14171A;
  --dark-2: #1D2126;
  --dark-text: #E8EBE7;
  --dark-text-2: #9AA3AB;

  --f-display: "DrawnDisplay", "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "DM Sans", system-ui, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, monospace;

  --frame: 10px;
  --maxw: 1480px;
  --gutter: clamp(20px, 3.4vw, 56px);
  --nav-h: 88px;
  --r-s: 6px;
  --r-m: 14px;
  --r-l: 26px;

  /* written by seed.js */
  --title-shift: 4.6vw;
  --vel: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor input,
body.has-cursor select, body.has-cursor textarea, body.has-cursor label { cursor: none; }
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; letter-spacing: 0.005em; line-height: 0.95; margin: 0; font-style: normal; }
h2 { font-size: clamp(48px, 6.4vw, 104px); }
h3 { font-size: clamp(30px, 2.6vw, 42px); line-height: 1.02; }
h4 { font-size: 26px; line-height: 1.05; }
p { margin: 0 0 1em; max-width: 64ch; }
.stop { color: var(--accent); }
.lede { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--ink-3); }
.data { font-family: var(--f-data); font-size: 0.92em; letter-spacing: -0.01em; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- frame ---------- */
.frame {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  border: var(--frame) solid var(--accent);
}
.frame::after { /* inner hairline */
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(20, 23, 26, 0.18); border-radius: 2px;
}
.progress {
  position: fixed; top: 0; left: 0; height: var(--frame); width: 100%; z-index: 901; pointer-events: none;
  background: var(--ink); transform-origin: 0 50%; transform: scaleX(0);
}
.frame-tag {
  position: fixed; z-index: 902; pointer-events: none; right: calc(var(--frame) + 22px); top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: 100% 50%;
  font-family: var(--f-data); font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; white-space: nowrap;
}

/* ---------- background ---------- */
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bg-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

/* ---------- header ---------- */
.site-header {
  position: fixed; z-index: 800; top: calc(var(--frame) + 14px); left: calc(var(--frame) + 14px); right: calc(var(--frame) + 14px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; padding: 8px 14px 8px 8px; border-radius: var(--r-m); }
.logo svg { width: 52px; height: 52px; }
.logo-word { font-family: var(--f-display); font-weight: 800; font-size: 40px; letter-spacing: 0.04em; line-height: 1; }
.logo-word .stop { margin-left: 1px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 16px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s;
}
.chip:hover { border-color: var(--ink); }
.chip svg { width: 20px; height: 20px; flex: none; }
.chip-ca { border: 1px solid var(--line); cursor: pointer; }
.chip-ca .label { color: var(--ink-3); font-weight: 600; }
.chip-ca .data { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-ca.copied { border-color: var(--accent); }
.chip-x { width: 52px; padding: 0; justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 0 30px; border-radius: 999px; border: 2px solid var(--ink);
  font-size: 19px; font-weight: 700; text-decoration: none; cursor: pointer; overflow: hidden;
  background: transparent; color: var(--ink); transition: color .25s, border-color .25s, transform .25s;
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: translateY(101%); transition: transform .38s cubic-bezier(.7, 0, .2, 1);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--dark-text); }
.btn svg { width: 22px; height: 22px; }
.btn-solid { background: var(--ink); color: var(--dark-text); }
.btn-solid::before { background: var(--accent); }
.btn-solid:hover { color: #fff; border-color: var(--accent); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent::before { background: var(--ink); }
.btn-accent:hover { border-color: var(--ink); }
.btn-sm { min-height: 50px; padding: 0 22px; font-size: 17px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-wallet.is-connected { border-color: var(--accent); }
.btn-wallet .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

/* ---------- layout ---------- */
main { position: relative; z-index: 2; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(80px, 11vh, 150px) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px 64px; align-items: end; margin-bottom: 56px; }
.section-head .lede { margin: 0; }
@media (max-width: 960px) { .section-head { grid-template-columns: 1fr; } }

.panel {
  position: relative; background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-l); padding: clamp(28px, 3.4vw, 56px);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 80px -40px rgba(20, 23, 26, 0.35);
  transform: translateX(var(--off-x, 0px)) rotate(var(--tilt, 0deg)) skewY(calc(var(--vel) * 0.012deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.panel[data-edge="left"]::before, .panel[data-edge="right"]::before, .panel[data-edge="top"]::before {
  content: ""; position: absolute; background: var(--accent); border-radius: 4px;
}
.panel[data-edge="left"]::before { left: -1px; top: 28px; bottom: 28px; width: 4px; }
.panel[data-edge="right"]::before { right: -1px; top: 28px; bottom: 28px; width: 4px; }
.panel[data-edge="top"]::before { top: -1px; left: 36px; width: 120px; height: 4px; }
@media (max-width: 1100px) { .panel { transform: none; } }

/* reveals: direction comes from seed.js */
[data-reveal] { transition: clip-path 1.1s cubic-bezier(.7, 0, .15, 1), opacity .8s; }
[data-reveal="l"] { clip-path: inset(0 100% 0 0 round var(--r-l)); }
[data-reveal="r"] { clip-path: inset(0 0 0 100% round var(--r-l)); }
[data-reveal="t"] { clip-path: inset(0 0 100% 0 round var(--r-l)); }
[data-reveal="b"] { clip-path: inset(100% 0 0 0 round var(--r-l)); }
[data-reveal].in { clip-path: inset(0 0 0 0 round var(--r-l)); }

/* ---------- stat boxes ---------- */
.stat {
  position: relative; background: var(--dark); color: var(--dark-text); border-radius: var(--r-m);
  padding: 22px 24px 20px; min-width: 0; overflow: hidden;
}
.stat::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 44px; background: var(--accent); }
.stat .num { font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 4vw, 64px); line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 0.42em; font-weight: 700; color: var(--dark-text-2); margin-left: 6px; letter-spacing: 0.02em; }
.stat .cap { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--dark-text-2); }
.stat .live { position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* ---------- bottom nav: tumbler ---------- */
.tumbler {
  position: fixed; z-index: 810; left: 50%; bottom: calc(var(--frame) + 14px); transform: translateX(-50%);
  width: min(1180px, calc(100% - 2 * var(--frame) - 28px)); height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 10px; border-radius: 22px; background: var(--dark); color: var(--dark-text);
  box-shadow: 0 24px 60px -24px rgba(20, 23, 26, 0.6);
}
.tumbler::before { /* notched dial edge */
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 7px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(232, 235, 231, .32) 0 1px, transparent 1px 9px);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tumbler-readout { padding: 0 18px; min-width: 190px; line-height: 1.2; }
.tumbler-readout .k { font-size: 13px; color: var(--dark-text-2); }
.tumbler-readout .v { font-family: var(--f-data); font-size: 17px; font-variant-numeric: tabular-nums; }
.tumbler-track { position: relative; display: flex; height: 100%; gap: 4px; perspective: 600px; }
.tumbler-ind {
  position: absolute; bottom: 2px; height: 4px; border-radius: 4px; background: var(--accent);
  transition: transform .45s cubic-bezier(.7, 0, .2, 1), width .45s cubic-bezier(.7, 0, .2, 1); pointer-events: none;
}
.wheel { flex: 1; position: relative; display: block; text-decoration: none; height: 100%; border-radius: 12px; }
.wheel:hover, .wheel.is-active { background: var(--dark-2); }
.wheel-drum {
  position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.6, -0.2, .25, 1.3);
  transform: translateZ(-34px);
}
.wheel:hover .wheel-drum, .wheel:focus-visible .wheel-drum { transform: translateZ(-34px) rotateX(90deg); }
.wheel-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  backface-visibility: hidden; font-size: 19px; font-weight: 700; white-space: nowrap;
}
.wheel-face.front { transform: rotateX(0deg) translateZ(34px); }
.wheel-face.under { transform: rotateX(-90deg) translateZ(34px); font-size: 15px; font-weight: 500; color: var(--dark-text-2); }
.wheel-face svg { width: 20px; height: 20px; opacity: .8; }
.wheel.is-active .wheel-face.front { color: #fff; }
.wheel.is-active .wheel-face.front svg { color: var(--accent); opacity: 1; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 100%; padding: 0 22px 0 26px; border-radius: 12px;
  background: var(--accent); color: #fff; border: 0; font-size: 19px; font-weight: 700; cursor: pointer;
}
.menu-btn kbd { font-family: var(--f-data); font-size: 13px; border: 1px solid rgba(255,255,255,.6); border-radius: 6px; padding: 2px 7px; }
.menu-btn .bars { display: grid; gap: 5px; }
.menu-btn .bars i { display: block; width: 22px; height: 2px; background: #fff; transition: transform .3s; }
.menu-btn:hover .bars i:last-child { transform: scaleX(.55); transform-origin: 0 50%; }
@media (max-width: 1100px) {
  .tumbler { grid-template-columns: 1fr auto; }
  .tumbler-readout { display: none; }
}
@media (max-width: 760px) {
  :root { --nav-h: 74px; }
  .tumbler-track .wheel:nth-child(n+5) { display: none; }
  .wheel-face { font-size: 15px; }
  .wheel-face svg { display: none; }
  .menu-btn kbd { display: none; }
  .menu-btn { padding: 0 16px; }
}

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 950; background: var(--dark); color: var(--dark-text);
  visibility: hidden; pointer-events: none; clip-path: circle(0px at var(--mx, 90%) var(--my, 92%));
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .8s;
  overflow-y: auto;
}
.menu.is-open { visibility: visible; pointer-events: auto; clip-path: circle(150vmax at var(--mx, 90%) var(--my, 92%)); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu-inner { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--frame) + 40px) var(--gutter) 60px; min-height: 100%; display: flex; flex-direction: column; }
.menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4vh; }
.menu-top .logo-word { color: var(--dark-text); }
.menu-close {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 24px; border-radius: 999px;
  border: 2px solid rgba(232, 235, 231, .4); background: transparent; color: var(--dark-text); font-size: 18px; font-weight: 700; cursor: pointer;
}
.menu-close:hover { border-color: var(--accent); }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.menu-item a {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 22px; padding: 26px 8px;
  border-top: 1px solid rgba(232, 235, 231, .14); text-decoration: none; transition: padding .35s, background .35s;
}
.menu-item a:hover, .menu-item a:focus-visible { padding-left: 22px; background: linear-gradient(90deg, rgba(255,74,28,.12), transparent 70%); }
.menu-item .ic { width: 56px; height: 56px; border-radius: 14px; border: 1px solid rgba(232, 235, 231, .2); display: grid; place-items: center; }
.menu-item .ic svg { width: 26px; height: 26px; color: var(--accent); }
.menu-item .t { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 4.4vw, 70px); line-height: .95; }
.menu-item .d { display: block; margin-top: 6px; font-size: 16px; color: var(--dark-text-2); font-family: var(--f-body); font-weight: 400; line-height: 1.45; max-width: 46ch; }
.menu-item .code { font-family: var(--f-data); font-size: 13px; color: var(--dark-text-2); }
.menu-item.is-active .t::after { content: "."; color: var(--accent); }
.menu-foot { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; color: var(--dark-text-2); font-size: 16px; }
.menu-foot a { color: var(--dark-text); }
@media (max-width: 900px) { .menu-list { grid-template-columns: 1fr; } .menu-item a { grid-template-columns: 48px 1fr; } .menu-item .code { display: none; } }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; mix-blend-mode: difference; }
.cursor-ring {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid #fff; border-radius: 50%;
  transition: width .25s, height .25s, margin .25s, border-radius .25s;
}
.cursor-ring::before, .cursor-ring::after { content: ""; position: absolute; background: #fff; }
.cursor-ring::before { left: 50%; top: -8px; width: 1.5px; height: 8px; }
.cursor-ring::after { top: 50%; left: -8px; height: 1.5px; width: 8px; }
.cursor-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.cursor-read { position: absolute; left: 30px; top: 18px; font-family: var(--f-data); font-size: 11px; color: #fff; white-space: nowrap; opacity: .85; }
.cursor.is-hover .cursor-ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 18px; }
.cursor.is-down .cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 9500; background: var(--dark); color: var(--dark-text);
  display: grid; place-items: center; overflow: hidden;
}
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-stream {
  position: absolute; inset: 0; padding: 40px; font-family: var(--f-data); font-size: 12px; line-height: 1.7;
  color: rgba(232, 235, 231, .16); word-break: break-all; overflow: hidden; pointer-events: none;
}
.intro-core { position: relative; text-align: center; display: grid; justify-items: center; gap: 22px; }
.intro-word { font-family: var(--f-display); font-weight: 800; font-size: clamp(96px, 17vw, 280px); line-height: .85; letter-spacing: .03em; }
.intro-sub { font-size: 18px; color: var(--dark-text-2); min-height: 1.6em; font-family: var(--f-data); }
.intro-enter {
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .6s, transform .6s;
  min-height: 72px; padding: 0 44px; font-size: 21px; border-color: var(--accent); color: #fff; background: var(--accent);
}
.intro-enter.show { opacity: 1; transform: none; pointer-events: auto; }
.intro-enter::before { background: var(--dark-text); }
.intro-enter:hover { color: var(--ink); }
.intro-half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--dark); z-index: 3; pointer-events: none; opacity: 0; }
.intro-half.top { top: 0; border-bottom: 2px solid var(--accent); }
.intro-half.bot { bottom: 0; border-top: 2px solid var(--accent); }
.intro.is-leaving { background: transparent; pointer-events: none; }
.intro.is-leaving > :not(.intro-half) { opacity: 0; transition: opacity .25s; }
.intro.is-leaving .intro-half { opacity: 1; }
.intro.is-leaving .intro-half.top { transform: translateY(-101%); transition: transform 1s cubic-bezier(.7,0,.2,1) .2s; }
.intro.is-leaving .intro-half.bot { transform: translateY(101%); transition: transform 1s cubic-bezier(.7,0,.2,1) .2s; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; z-index: 9800; left: 50%; bottom: calc(var(--nav-h) + var(--frame) + 34px); transform: translateX(-50%); display: grid; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--dark); color: var(--dark-text); border-left: 4px solid var(--accent); border-radius: 12px; padding: 16px 22px; font-size: 17px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); animation: toastIn .4s cubic-bezier(.2,.8,.2,1); max-width: min(560px, 90vw); }
.toast a { color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- footer ---------- */
.site-foot { position: relative; z-index: 2; padding: 60px 0 calc(var(--nav-h) + var(--frame) + 60px); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-strong); padding-top: 32px; font-size: 16px; color: var(--ink-2); }
.foot-grid .logo-word { font-size: 30px; color: var(--ink); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.redraw { background: none; border: 1px dashed var(--line-strong); border-radius: 999px; padding: 10px 18px; cursor: pointer; font-size: 15px; }
.redraw:hover { border-color: var(--accent); color: var(--accent-ink); }

/* =====================================================================
   HOME
   ===================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--frame) + 110px) 0 calc(var(--nav-h) + var(--frame) + 60px);
}
.hero-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hero-block { width: fit-content; max-width: 100%; margin: 0 auto; transform: translateX(var(--title-shift)); }
.hero-title {
  font-size: clamp(76px, 10.6vw, 196px); line-height: .86; letter-spacing: .004em; font-weight: 800;
  max-width: 9.2ch;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.7, 0, .15, 1); }
.hero.is-in .hero-title .line > span { transform: none; }
.hero.is-in .hero-title .line:nth-child(2) > span { transition-delay: .09s; }
.hero.is-in .hero-title .line:nth-child(3) > span { transition-delay: .18s; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 46px; }
.hero-actions .btn { opacity: 0; transform: translateY(20px); transition: opacity .7s .5s, transform .7s .5s, color .25s, border-color .25s; }
.hero.is-in .hero-actions .btn { opacity: 1; transform: none; }
.hero-scroll {
  position: absolute; left: calc(var(--frame) + 34px); bottom: calc(var(--nav-h) + var(--frame) + 36px);
  display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-3);
}
.hero-scroll i { display: block; width: 1px; height: 54px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: drip 2s infinite; }
@keyframes drip { to { top: 100%; } }
@media (max-width: 900px) {
  .hero-block { transform: none; margin: 0; }
}

/* pinned horizontal sequence */
.seq { position: relative; height: 420vh; }
.seq-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.seq-head { max-width: var(--maxw); margin: 0 auto 40px; padding: 0 var(--gutter); width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.seq-head h2 { font-size: clamp(46px, 5.4vw, 88px); }
.seq-count { font-family: var(--f-display); font-weight: 800; font-size: clamp(46px, 5vw, 80px); line-height: 1; font-variant-numeric: tabular-nums; }
.seq-count .of { color: var(--ink-3); }
.seq-track { display: flex; gap: 28px; padding: 0 calc((100vw - min(var(--maxw), 100vw)) / 2 + var(--gutter)); will-change: transform; }
.seq-card { flex: none; width: min(560px, 78vw); min-height: 54vh; display: flex; flex-direction: column; gap: 18px; }
.seq-card .n { font-family: var(--f-display); font-weight: 800; font-size: 100px; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.seq-card.is-current .n { color: var(--accent); -webkit-text-stroke: 0; }
.seq-card p { color: var(--ink-2); margin: 0; }
.seq-card .fig { margin-top: auto; height: 120px; border-radius: var(--r-m); background: rgba(20, 23, 26, .05); border: 1px solid var(--line); overflow: hidden; }
.seq-card .fig svg { width: 100%; height: 100%; }
.seq-bar { max-width: var(--maxw); width: 100%; margin: 40px auto 0; padding: 0 var(--gutter); }
.seq-bar div { height: 2px; background: var(--line-strong); position: relative; }
.seq-bar div i { position: absolute; left: 0; top: -1px; height: 4px; background: var(--accent); width: 0; }
@media (prefers-reduced-motion: reduce) { .seq { height: auto; } .seq-sticky { position: static; height: auto; padding: 80px 0; } .seq-track { flex-wrap: wrap; transform: none !important; } }

/* feature accordion beside visual */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
.feat-visual { position: sticky; top: 120px; aspect-ratio: 1 / 1.02; padding: 0; overflow: hidden; }
.feat-visual canvas { width: 100%; height: 100%; display: block; }
.feat-visual .vis-label { position: absolute; left: 28px; bottom: 24px; right: 28px; display: flex; justify-content: space-between; gap: 14px; font-size: 15px; color: var(--ink-2); }
.feat-visual .vis-label b { color: var(--ink); }
.acc { display: grid; gap: 12px; }
.acc-item { border-radius: var(--r-l); background: var(--glass); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; transition: background .3s; }
.acc-item.is-open { background: var(--glass-strong); box-shadow: inset 4px 0 0 var(--accent); }
.acc-head { width: 100%; display: grid; grid-template-columns: 60px 1fr 40px; gap: 20px; align-items: center; text-align: left; padding: 24px 28px; background: none; border: 0; cursor: pointer; }
.acc-head .ic { width: 60px; height: 60px; border-radius: 16px; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.acc-head .ic svg { width: 28px; height: 28px; }
.acc-item.is-open .acc-head .ic { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.acc-head h3 { font-size: clamp(30px, 2.5vw, 40px); }
.acc-head .pm { width: 40px; height: 40px; position: relative; }
.acc-head .pm::before, .acc-head .pm::after { content: ""; position: absolute; left: 10px; right: 10px; top: 19px; height: 2px; background: var(--ink); transition: transform .35s; }
.acc-head .pm::after { transform: rotate(90deg); }
.acc-item.is-open .pm::after { transform: rotate(0); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.7, 0, .2, 1); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-content { padding: 0 28px 28px 108px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; align-items: start; }
.acc-content p { color: var(--ink-2); margin: 0; }
@media (max-width: 1100px) { .feat { grid-template-columns: 1fr; } .feat-visual { position: relative; top: 0; aspect-ratio: 16/11; } }
@media (max-width: 700px) { .acc-content { grid-template-columns: 1fr; padding-left: 28px; } .acc-head { grid-template-columns: 48px 1fr 32px; } .acc-head .ic { width: 48px; height: 48px; } }

/* live tape */
.tape { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid var(--line-strong); background: rgba(239, 242, 238, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: rotate(var(--tape-tilt, -1.2deg)); margin: 40px -20px; }
.tape-row { display: flex; gap: 0; width: max-content; animation: tape 80s linear infinite; }
.tape:hover .tape-row { animation-play-state: paused; }
.tape-item { display: inline-flex; align-items: center; gap: 12px; padding: 20px 30px; border-right: 1px solid var(--line); text-decoration: none; font-size: 18px; white-space: nowrap; }
.tape-item .tok-icon { width: 30px; height: 30px; font-size: 14px; }
.seq-card.panel { transition: none; }
.tape-item b { font-family: var(--f-display); font-size: 24px; letter-spacing: .02em; }
@keyframes tape { to { transform: translateX(-50%); } }

.cta-band { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px; align-items: center; }
.cta-band h2 { font-size: clamp(54px, 7vw, 120px); }
.cta-band .actions { display: grid; gap: 12px; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; } }

/* =====================================================================
   SHARED PAGE PIECES
   ===================================================================== */
.page-hero { padding: calc(var(--frame) + 150px) 0 40px; position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(72px, 9.6vw, 170px); line-height: .86; margin-left: var(--title-shift); }
.page-hero .lede { margin-top: 26px; margin-left: var(--title-shift); }
@media (max-width: 900px) { .page-hero h1, .page-hero .lede { margin-left: 0; } }

.field { display: grid; gap: 10px; }
.field label { font-weight: 700; font-size: 17px; }
.field .hint { font-size: 15px; color: var(--ink-3); }
.field .err { font-size: 15px; color: var(--down); min-height: 1.2em; }
.input, .select, .textarea {
  width: 100%; min-height: 64px; padding: 16px 20px; border-radius: var(--r-m); border: 1.5px solid var(--line-strong);
  background: rgba(255, 255, 255, .62); font: inherit; font-size: 19px; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--down); }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .input-row { grid-template-columns: 1fr; } }

.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(20, 23, 26, .07); flex-wrap: wrap; }
.seg button { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: none; font-weight: 700; font-size: 16px; cursor: pointer; }
.seg button.is-on { background: var(--ink); color: var(--dark-text); box-shadow: inset 0 -3px 0 var(--accent); }

.empty { padding: 40px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-l); color: var(--ink-2); text-align: center; }
.skeleton { background: linear-gradient(90deg, rgba(20,23,26,.06), rgba(20,23,26,.12), rgba(20,23,26,.06)); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

.tok-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-2); object-fit: cover; flex: none; border: 1px solid var(--line); }
.tok-fallback { display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--ink-2); }

/* =====================================================================
   BOARD
   ===================================================================== */
.deal-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .deal-grid { grid-template-columns: 1fr; } }
.deal-stage { position: relative; height: 560px; perspective: 1400px; }
.deal-card {
  position: absolute; left: 50%; top: 50%; width: min(420px, 82vw); height: 500px; margin: -250px 0 0 calc(min(420px, 82vw) / -2);
  border-radius: 28px; background: var(--glass-strong); border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 40px 80px -40px rgba(20, 23, 26, .5);
  padding: 30px; display: flex; flex-direction: column; gap: 18px; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; will-change: transform;
}
.deal-card.is-top { box-shadow: 0 50px 90px -40px rgba(20, 23, 26, .6), inset 0 4px 0 var(--accent); }
.deal-card .top { display: flex; align-items: center; gap: 16px; }
.deal-card .top .tok-icon { width: 64px; height: 64px; }
.deal-card .sym { font-family: var(--f-display); font-weight: 800; font-size: 44px; line-height: .9; }
.deal-card .nm { color: var(--ink-2); font-size: 16px; }
.deal-card .spark { height: 120px; }
.deal-card .spark svg { width: 100%; height: 100%; }
.deal-card .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; font-size: 16px; }
.deal-card .kv span { color: var(--ink-3); display: block; font-size: 14px; }
.deal-card .kv b { font-size: 20px; font-variant-numeric: tabular-nums; }
.deal-card .open { margin-top: auto; font-size: 16px; font-weight: 700; }
.deal-controls { display: flex; justify-content: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.deal-meta { display: grid; gap: 14px; }
.seed-box { font-family: var(--f-data); font-size: 13px; line-height: 1.6; background: var(--dark); color: var(--dark-text); border-radius: var(--r-m); padding: 18px 20px; word-break: break-all; }
.seed-box .k { color: var(--dark-text-2); }
.matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.matches li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; background: rgba(255,255,255,.45); border: 1px solid var(--line); }
.matches li a:hover { border-color: var(--ink); }
.matches .tok-icon { width: 36px; height: 36px; }

.feed-tools { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.feed-tools .input { max-width: 420px; }
.feed-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 17px; }
.feed-table th { text-align: right; font-size: 14px; font-weight: 700; color: var(--ink-3); padding: 0 16px 4px; white-space: nowrap; }
.feed-table th:first-child { text-align: left; }
.feed-table td { padding: 14px 16px; background: rgba(255, 255, 255, .46); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed-table td:first-child { text-align: left; border-radius: 14px 0 0 14px; }
.feed-table td:last-child { border-radius: 0 14px 14px 0; }
.feed-table tr.row { cursor: pointer; transition: transform .25s; }
.feed-table tr.row:hover td { background: rgba(255, 255, 255, .85); }
.feed-table tr.row:hover td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.feed-table .who { display: flex; align-items: center; gap: 14px; }
.feed-table .who .tok-icon { width: 40px; height: 40px; }
.feed-table .who b { font-family: var(--f-display); font-size: 24px; letter-spacing: .02em; display: block; line-height: 1; }
.feed-table .who small { color: var(--ink-3); font-size: 14px; }
.table-scroll { overflow-x: auto; }
.updated { font-size: 15px; color: var(--ink-3); }

/* =====================================================================
   COIN
   ===================================================================== */
.coin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.coin-head .tok-icon { width: 104px; height: 104px; border-width: 2px; }
.coin-head h1 { font-size: clamp(64px, 8vw, 140px); margin: 0; }
.coin-head .nm { font-size: 20px; color: var(--ink-2); }
.coin-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chart-wrap { position: relative; height: 420px; }
.chart-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-tip { position: absolute; pointer-events: none; background: var(--dark); color: var(--dark-text); border-radius: 10px; padding: 10px 14px; font-size: 15px; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.chart-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.price-big { font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 5vw, 80px); line-height: 1; font-variant-numeric: tabular-nums; }
.coin-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; }
@media (max-width: 1100px) { .coin-grid { grid-template-columns: 1fr; } }
.pool-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pool-list li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.45); font-size: 16px; }

/* =====================================================================
   LAUNCH
   ===================================================================== */
.launch-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .launch-grid { grid-template-columns: 1fr; } }
.form-stack { display: grid; gap: 26px; }
.drop {
  display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 18px; border-radius: var(--r-m);
  border: 1.5px dashed var(--line-strong); background: rgba(255,255,255,.4); cursor: pointer; transition: border-color .2s, background .2s;
}
.drop:hover, .drop.is-over { border-color: var(--ink); background: rgba(255,255,255,.7); }
.drop .pv { width: 120px; height: 120px; border-radius: 22px; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; }
.drop .pv img { width: 100%; height: 100%; object-fit: cover; }
.drop .pv svg { width: 40px; height: 40px; color: var(--ink-3); }
.preview-card { position: sticky; top: 120px; display: grid; gap: 18px; }
.preview-token { display: flex; gap: 16px; align-items: center; }
.preview-token .pv { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-2); overflow: hidden; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 28px; color: var(--ink-3); }
.preview-token .pv img { width: 100%; height: 100%; object-fit: cover; }
.preview-token .sym { font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: .9; word-break: break-all; }
.window-viz { height: 92px; }
.window-viz svg { width: 100%; height: 100%; }
.confirm { display: none; }
.is-confirmed .confirm { display: block; }
.is-confirmed .form-panel { display: none; }
.confirm-head { display: flex; gap: 22px; align-items: center; margin-bottom: 26px; }
.confirm-check { width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; flex: none; }
.confirm-check svg { width: 40px; height: 40px; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .8s .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.summary { display: grid; grid-template-columns: 200px 1fr; gap: 12px 24px; font-size: 17px; margin: 0 0 28px; }
.summary dt { color: var(--ink-3); }
.summary dd { margin: 0; word-break: break-word; }

/* =====================================================================
   PROTOCOL
   ===================================================================== */
.formula { white-space: pre; background: var(--dark); color: var(--dark-text); border-radius: var(--r-l); padding: clamp(26px, 3vw, 44px); font-family: var(--f-data); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.9; overflow-x: auto; }
.formula .c { color: var(--dark-text-2); }
.formula .a { color: var(--accent); }
.params { width: 100%; border-collapse: collapse; font-size: 17px; }
.params td, .params th { padding: 18px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.params th { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.params td:nth-child(2) { font-family: var(--f-data); white-space: nowrap; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare .panel h3 { margin-bottom: 18px; }
.compare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.compare li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--ink-2); }
.compare li svg { width: 24px; height: 24px; margin-top: 3px; }
@media (max-width: 900px) { .compare { grid-template-columns: 1fr; } }

/* =====================================================================
   BEACON
   ===================================================================== */
.beacon-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .beacon-grid { grid-template-columns: 1fr; } }
.field-canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: var(--r-m); }
.hash-line { font-family: var(--f-data); font-size: 15px; word-break: break-all; background: var(--dark); color: var(--dark-text); padding: 16px 18px; border-radius: 12px; }
.hash-line .hl { color: var(--accent); }
.slot-strip { height: 130px; }
.slot-strip canvas { width: 100%; height: 100%; display: block; }
.sim-out { display: grid; gap: 10px; font-size: 17px; }
.sim-out .row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sim-out .row span:first-child { color: var(--ink-3); }

/* =====================================================================
   BUILDER
   ===================================================================== */
.builder-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .builder-grid { grid-template-columns: 1fr; } }
.range { display: grid; gap: 10px; }
.range-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.range-top b { font-family: var(--f-data); font-size: 18px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), rgba(20, 23, 26, .14) var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 1.5px var(--ink); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(20, 23, 26, .14); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 1.5px var(--ink); }
.out-tabs { margin-bottom: 14px; }
.code-out { background: var(--dark); color: var(--dark-text); border-radius: var(--r-l); padding: 26px; font-family: var(--f-data); font-size: 14px; line-height: 1.7; max-height: 560px; overflow: auto; white-space: pre; margin: 0; }
.out-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.timeline-viz { height: 150px; }
.timeline-viz svg { width: 100%; height: 100%; }

/* gaps */
.stack { display: grid; gap: 28px; }
.mt-l { margin-top: 56px; }
.mt-m { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { clip-path: none !important; }
}