/* Super Ziptelligence. Palette and type follow zipcoin.cash; ice is ours, burn is zipcoin's. */

:root {
  --night: #06080c;
  --surface: #0c1016;
  --raised: #121823;
  --line: #1d2531;
  --line-2: #2a3546;
  --snow: #e9eef3;
  --muted: #8993a2;
  --faint: #707c8d;
  --tap: #3ddc84;
  --ice: #a8d1ff;
  --ice-deep: #5fa8ff;
  --burn: #ff7a45;
  --spark: #ffd27a;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 72rem;
  --gutter: 16px;
  --header-total: 89px;
  color-scheme: dark;
}

@media (min-width: 640px) {
  :root { --gutter: 20px; }
}
@media (min-width: 1024px) {
  :root { --header-total: 65px; }
}

/* ---------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-total) + 32px);
  background: var(--night);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--snow);
  font: 400 16px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: rgba(168, 209, 255, 0.28); color: var(--snow); }

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ice);
  color: var(--night);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
}
.skip:focus { top: 12px; }

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

/* ---------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--night);
  border-bottom: 1px solid var(--line);
}

.header-row {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 1024px) {
  .header-row { height: 64px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand img { height: 14px; width: auto; }
.brand-ticker { display: none; font-size: 12px; color: var(--faint); }
@media (min-width: 400px) {
  .brand img { height: 15px; }
}
@media (min-width: 640px) {
  .brand img { height: 19px; }
  .brand-ticker { display: inline; }
}

.nav {
  display: none;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}
@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav a,
.nav-mobile a,
.menu > button {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-underline-offset: 6px;
  transition: color 0.15s var(--ease-quiet);
}
.nav a:hover,
.nav-mobile a:hover,
.menu > button:hover,
.menu.is-open > button { color: var(--snow); }
.nav a[aria-current="page"],
.nav-mobile a[aria-current="page"] {
  color: var(--snow);
  text-decoration: underline;
  text-decoration-color: var(--ice);
}
.menu > button span { color: var(--faint); }

.nav-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 12px;
  height: 32px;
}
.nav-mobile a, .nav-mobile .menu > button { padding: 6px 0; }
@media (min-width: 1024px) {
  .nav-mobile { display: none; }
}

.menu { position: relative; }
.menu-list {
  position: absolute;
  right: -10px;
  top: calc(100% + 14px);
  min-width: 220px;
  display: none;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.nav-mobile .menu-list { top: calc(100% + 4px); right: -4px; }
.menu.is-open .menu-list { display: grid; }
.menu-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.menu-list a:hover, .menu-list a:focus-visible { background: var(--raised); color: var(--snow); }
.menu-list a span { color: var(--faint); }

.connect {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--tap);
  color: var(--night);
  font: 700 15px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-snap), filter 0.15s;
}
.connect:hover { filter: brightness(1.07); transform: translateY(-1px); }
.connect:active { transform: scale(0.97); }
.connect.is-connected {
  background: var(--raised);
  color: var(--snow);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 13px/1 var(--mono);
}
.connect.is-connected::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tap);
  vertical-align: 1px;
}
@media (max-width: 420px) {
  .connect { height: 32px; padding: 0 10px; font-size: 13px; }
}
@media (max-width: 359px) {
  .header-row { gap: 8px; }
  .brand img { height: 12px; }
  .connect { padding: 0 8px; font-size: 12px; }
}

/* ---------- ticker */

.ticker {
  border-bottom: 1px solid var(--line);
  background: #090c11;
  font-size: 11px;
  color: var(--muted);
}
.ticker-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ticker p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ticker .hot { color: var(--burn); }
.ticker a { color: var(--faint); flex-shrink: 0; }
.ticker a:hover { color: var(--snow); }
.ticker .flash {
  color: var(--spark);
  opacity: 0;
  transition: opacity 0.4s;
}
.ticker .flash.show { opacity: 1; }
@media (min-width: 640px) {
  .ticker { font-size: 12px; }
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--burn);
  box-shadow: 0 0 10px rgba(255, 122, 69, 0.65);
  vertical-align: 0;
}

/* ---------- type */

.eyebrow {
  margin: 0 0 22px;
  font-size: 11px;
  color: var(--faint);
}
@media (min-width: 640px) {
  .eyebrow { font-size: 12px; }
}

h1, .h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(38px, 12.2vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

h2, .h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(28px, 9vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.h2-sm { font-size: clamp(28px, 7vw, 72px); }

.h3 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 8.6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
@media (min-width: 900px) {
  .h3 { font-size: clamp(40px, 4.6vw, 64px); }
}

.body {
  margin-top: 28px;
  max-width: 34em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.body strong, .body b { color: var(--snow); font-weight: 500; }
.body a, .fine a, .note a { color: var(--ice); }
.body a:hover, .fine a:hover, .note a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .body { font-size: 16px; }
}

.note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--faint); max-width: 40em; }
.fine { margin-top: 14px; font-size: 12px; line-height: 1.65; color: var(--faint); max-width: 46em; }

.ice { color: var(--ice); }
.burn { color: var(--burn); }
.tap { color: var(--tap); }
.snow { color: var(--snow); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 14px/20px var(--mono);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease-snap), background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn-ice { background: var(--ice); color: var(--night); }
.btn-ice:hover { box-shadow: 0 0 0 4px rgba(168, 209, 255, 0.14), 0 10px 32px rgba(168, 209, 255, 0.2); }
.btn-burn { background: var(--burn); color: var(--night); }
.btn-burn:hover { box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.16), 0 10px 32px rgba(255, 122, 69, 0.22); }
.btn-tap { background: var(--tap); color: var(--night); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--snow); }
.btn-ghost:hover { border-color: var(--line-2); background: rgba(18, 24, 35, 0.6); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { box-shadow: none; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--snow); border-color: var(--line-2); }
.chip[disabled] { opacity: 0.45; cursor: default; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(168, 209, 255, 0.35);
  color: var(--ice);
  font-size: 10px;
  white-space: nowrap;
}

/* ---------- hero */

.hero {
  position: relative;
  overflow: clip;
  padding-top: 44px;
}
.hero::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -2px;
  height: 70%;
  background: radial-gradient(55% 70% at 50% 100%, rgba(255, 122, 69, 0.13), transparent 72%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero { padding-top: 64px; }
  .hero h1 { font-size: clamp(64px, 8.4vw, 112px); }
}

.hero-inner { position: relative; }
.hero-copy { position: relative; z-index: 2; }
@media (min-width: 900px) {
  .hero-inner { position: static; }
}

.lede {
  margin-top: 28px;
  max-width: 31em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
@media (min-width: 640px) {
  .lede { font-size: 16px; }
}

.hero-moon {
  --moon: min(100%, 400px);
  position: relative;
  z-index: 1;
  width: var(--moon);
  aspect-ratio: 1;
  margin: 36px auto 0;
}
.hero-moon::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: radial-gradient(closest-side, rgba(95, 168, 255, 0.12), rgba(95, 168, 255, 0.04) 55%, transparent 75%);
  pointer-events: none;
}
.hero-moon canvas { position: relative; width: 100%; height: 100%; }
.moon-label {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero-moon {
    --moon: clamp(360px, 38vw, 540px);
    position: absolute;
    margin: 0;
    left: calc(80% - var(--moon) / 2);
    top: 24px;
  }
}

.hero-count {
  position: relative;
  z-index: 3;
  margin-top: 48px;
}
@media (min-width: 900px) {
  .hero-count { margin-top: 88px; }
}
.count {
  font-size: clamp(44px, 11vw, 112px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.count-cap {
  margin-top: 12px;
  max-width: 60em;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--snow);
}

.firestrip {
  position: relative;
  z-index: 1;
  height: 132px;
  margin-top: -36px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.firestrip canvas { width: 100%; height: 100%; }
@media (min-width: 900px) {
  .firestrip { height: 168px; margin-top: -52px; }
}

/* ---------- sections */

.section {
  position: relative;
  padding: 104px 0;
}
@media (min-width: 900px) {
  .section { padding: 152px 0; }
}

.split {
  display: grid;
  gap: 56px;
  align-items: center;
}
.split > *, .how-grid > *, .live-grid > *, .footer-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split.flip > :first-child { order: 2; }
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- reveal */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-quiet), transform 1s var(--ease-snap);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="2"] { transition-delay: 0.08s; }
.js [data-reveal="3"] { transition-delay: 0.16s; }

/* ---------- how it works */

.how { position: relative; }
.js .how-track { height: 440vh; }
.how-sticky { padding: 96px 0; }
.js .how-sticky {
  position: sticky;
  top: var(--header-total);
  height: calc(100vh - var(--header-total));
  height: calc(100svh - var(--header-total));
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.how-grid {
  display: grid;
  gap: 18px;
  width: 100%;
}
@media (min-width: 900px) {
  .how-grid { grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
}

.how-copy { order: 2; }
@media (min-width: 900px) {
  .how-copy { order: 0; }
}

.how-steps { display: grid; }
.how-step + .how-step { margin-top: 40px; }
.how-step p {
  margin-top: 20px;
  max-width: 27em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
@media (min-width: 640px) {
  .how-step p { font-size: 15px; margin-top: 24px; }
}

.js .how-step {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-quiet), transform 0.6s var(--ease-snap);
  pointer-events: none;
}
.js .how-step.is-active { opacity: 1; transform: none; pointer-events: auto; }

.how-progress {
  display: none;
  gap: 8px;
  max-width: 300px;
  margin-top: 36px;
}
.js .how-progress { display: flex; }
.how-progress span {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}
.how-progress i {
  display: block;
  height: 100%;
  background: var(--snow);
  transform: scaleX(0);
  transform-origin: left;
}

.how-diagram { position: relative; }
.how-diagram svg {
  width: 100%;
  height: auto;
  max-height: 46vh;
  margin: 0 auto;
  overflow: visible;
}
@media (min-width: 900px) {
  .how-diagram svg { max-height: 72vh; }
}

.dg text { font-family: var(--mono); }
.dg .lbl { fill: var(--snow); font-size: 12px; font-weight: 600; }
.dg .sub { fill: var(--faint); font-size: 10px; }
.dg .tag { font-size: 11px; font-weight: 600; }
.dg .node-box { fill: var(--surface); stroke: var(--line); }
.dg .ring-bg { fill: #080b10; stroke: var(--line); }
.dg .ring-glow { fill: url(#ringGlow); }
.dg .agent { fill: #3a4555; transition: fill 0.35s, r 0.35s; }
.dg .agent.on { fill: var(--ice); }
.dg .wire { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.dg .wire-live { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.dg .end { fill: #090c11; stroke: var(--line); transition: stroke 0.4s, fill 0.4s; }
.dg .end.hot { stroke: var(--burn); fill: rgba(255, 122, 69, 0.12); }
.dg .end.cool { stroke: var(--tap); fill: rgba(61, 220, 132, 0.1); }
.dg .fade { transition: opacity 0.4s var(--ease-quiet); }

/* ---------- the mind */

.qtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.qtab {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.qtab:hover { color: var(--snow); border-color: var(--line-2); }
.qtab[aria-selected="true"] { background: var(--ice); border-color: var(--ice); color: var(--night); }

.qcard {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 24, 35, 0.55), rgba(12, 16, 22, 0.9));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) {
  .qcard { padding: 26px; }
}
.qmeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--faint);
}
.qmeta .burn { color: var(--ice); }
.qtext {
  margin: 14px 0 24px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--snow);
  min-height: 2.9em;
}
.answers { display: grid; gap: 16px; }
.answer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.answer-text { color: var(--snow); }
.answer-burn { color: var(--burn); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--raised);
}
.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: #3a4555;
  transition: width 1s var(--ease-snap);
}
.answer.is-top .bar i { background: linear-gradient(90deg, var(--ice-deep), var(--ice)); box-shadow: 0 0 14px rgba(168, 209, 255, 0.35); }
.answer-sub { margin-top: 6px; font-size: 11px; color: var(--faint); }
.qverdict {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.qverdict strong { color: var(--ice); font-weight: 500; }
.qcard .example {
  position: absolute;
  top: -10px;
  right: 18px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--night);
  color: var(--faint);
  font-size: 10px;
}

/* ---------- live */

.live-eyebrow { display: flex; align-items: center; gap: 10px; }
.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--burn);
  flex-shrink: 0;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--burn);
  animation: ping 1.6s var(--ease-quiet) infinite;
}
@keyframes ping {
  75%, 100% { transform: scale(2.8); opacity: 0; }
}

.big-burn {
  margin-top: 44px;
  color: var(--burn);
  font-size: clamp(46px, 12.5vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(255, 122, 69, 0.25);
}

.live-grid {
  display: grid;
  gap: 48px;
  margin-top: 56px;
}
@media (min-width: 900px) {
  .live-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

.supply {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  gap: 1px;
  height: 34px;
}
@media (min-width: 640px) {
  .supply { gap: 2px; }
}
.supply i {
  border-radius: 1px;
  background: var(--line);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.supply i.on { background: var(--burn); box-shadow: 0 0 8px rgba(255, 122, 69, 0.35); }
.supply i.part { background: linear-gradient(to top, var(--burn) var(--p), var(--line) var(--p)); }
.supply-cap { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }

.verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 12px;
  color: var(--faint);
}
.verify a {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--snow);
  font-weight: 500;
}
.verify a:hover { border-color: var(--line-2); }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  gap: 1px;
  background: var(--line);
}
.stats div { background: var(--night); padding: 16px 16px 18px; }
.stats dt { font-size: 11px; color: var(--faint); }
.stats dd { margin: 8px 0 0; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats dd small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); letter-spacing: 0; }
.stats .span2 { grid-column: span 2; }

/* ---------- tokenomics */

.wheel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "ring ring"
    "t r"
    "b l";
  gap: 28px 20px;
  max-width: 820px;
  margin: 72px auto 0;
}
.wheel svg {
  grid-area: ring;
  width: min(100%, 340px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.wheel-lbl.t { grid-area: t; }
.wheel-lbl.r { grid-area: r; }
.wheel-lbl.b { grid-area: b; }
.wheel-lbl.l { grid-area: l; }
.wheel-lbl .k { font-size: 11px; color: var(--faint); }
.wheel-lbl .v { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--snow); }
.wheel-lbl .s { margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--faint); }
@media (min-width: 760px) {
  .wheel {
    grid-template-columns: 1fr minmax(300px, 340px) 1fr;
    grid-template-areas:
      ". t ."
      "l ring r"
      ". b .";
    align-items: center;
    gap: 18px 28px;
  }
  .wheel-lbl.t, .wheel-lbl.b { text-align: center; }
  .wheel-lbl.l { text-align: right; }
}
.wheel text { font-family: var(--mono); }
.wheel .s { fill: var(--faint); font-size: 11px; }
.wheel .big { fill: var(--snow); font-size: 46px; letter-spacing: -0.04em; }
.wheel .stn { fill: var(--night); stroke: var(--burn); stroke-width: 1.5; transition: fill 0.3s; }
.wheel .stn.hit { fill: rgba(255, 122, 69, 0.4); }
.wheel .stn.ice-stn { stroke: var(--ice); }
.wheel .stn.ice-stn.hit { fill: rgba(168, 209, 255, 0.35); }

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 64px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}
.facts div { background: var(--night); padding: 18px 18px 20px; }
.facts dt { font-size: 11px; color: var(--faint); }
.facts dd { margin: 8px 0 0; font-size: 17px; letter-spacing: -0.02em; }
.facts dd small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; letter-spacing: 0; color: var(--muted); }

.receipt {
  max-width: 600px;
  margin: 88px auto 0;
  border-top: 1px solid var(--line);
}
.receipt-title { margin: 20px 0 12px; color: var(--tap); font-size: 15px; font-weight: 400; }
.receipt table { width: 100%; border-collapse: collapse; font-size: 14px; }
.receipt td { padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); }
.receipt td + td {
  padding-left: 16px;
  border-left: 1px solid var(--line);
  text-align: right;
  color: var(--snow);
  font-variant-numeric: tabular-nums;
}
.receipt caption {
  caption-side: bottom;
  padding-top: 12px;
  text-align: left;
  font-size: 11px;
  color: var(--faint);
}

/* ---------- doors */

.doors-graph { position: relative; }
.doors-graph svg { width: 100%; height: auto; overflow: visible; }
.doors-graph text { font-family: var(--mono); }
.doors-graph .nm { fill: var(--snow); font-size: 11px; font-weight: 600; }
.doors-graph .amt { fill: var(--burn); font-size: 10px; }
.doors-graph .role { fill: var(--faint); font-size: 9.5px; }
.doors-graph .link { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.doors-graph .halo { fill: none; stroke: var(--burn); opacity: 0; }
.doors-graph .caption { fill: var(--faint); font-size: 10px; }

/* ---------- private compute rail */

.rail {
  position: relative;
  display: grid;
  gap: 36px;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .rail { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.rail li { position: relative; }
.rail .n {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--night);
  color: var(--muted);
  font-size: 12px;
}
.rail li.is-ours .n { border-color: rgba(168, 209, 255, 0.5); color: var(--ice); box-shadow: 0 0 18px rgba(168, 209, 255, 0.18); }
@media (min-width: 900px) {
  .rail li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 44px;
    right: -16px;
    border-top: 1px dashed var(--line-2);
  }
  .rail li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 44px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ice);
    box-shadow: 0 0 10px var(--ice);
    animation: travel 3.2s var(--ease-quiet) infinite;
  }
  .rail li:nth-child(2)::before { animation-delay: 1.6s; background: var(--burn); box-shadow: 0 0 10px var(--burn); }
}
@keyframes travel {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(calc(var(--rail-w, 260px))); opacity: 0; }
}
.rail h3 { margin: 22px 0 0; font-size: 15px; font-weight: 600; }
.rail .kicker { margin-top: 4px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.rail p { margin-top: 12px; max-width: 28em; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- third contract */

.codecard {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 12px;
}
.code-line {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
}
.code-line .kw { color: var(--ice); }
.tree { display: grid; gap: 12px; margin: 0; padding: 16px 18px 20px; list-style: none; }
.tree li { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--snow); }
.tree .br { color: var(--faint); margin-right: 8px; }
.tree .verb { color: var(--faint); }
.tree a { color: var(--ice); white-space: nowrap; }
.tree a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tree .dim { color: var(--faint); }
.tree li.ours {
  margin: 0 -10px;
  padding: 8px 10px;
  border: 1px solid rgba(168, 209, 255, 0.28);
  border-radius: 8px;
  background: rgba(168, 209, 255, 0.05);
}
.tree li.ours .name { color: var(--ice); }
.tree li.later { color: var(--faint); }

/* ---------- agents */

.snippet {
  position: relative;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}
.snippet pre { margin: 0; overflow-x: auto; font: inherit; white-space: pre; padding-right: 56px; }
.snippet .chip { position: absolute; top: 10px; right: 10px; }
.snippet .s { color: var(--ice); }

.term {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #080b10;
  font-size: 12px;
  line-height: 1.7;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--faint);
}
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--raised); }
.term-bar span { margin-left: 8px; }
.term-bar em { margin-left: auto; font-style: normal; }
.term-body {
  min-height: 420px;
  padding: 16px 18px 22px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--snow);
}
@media (min-width: 640px) {
  .term { font-size: 12.5px; }
  .term-body { min-height: 400px; }
}
.term .c { color: var(--faint); }
.term .p { color: var(--ice); }
.term .o { color: var(--muted); }
.term .ok { color: var(--tap); }
.term .hot { color: var(--burn); }
.caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 1px;
  background: var(--snow);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- quote */

.quote { padding: 120px 0; }
@media (min-width: 900px) {
  .quote { padding: 180px 0; }
}
.quote blockquote { margin: 0; }
.quote .q {
  max-width: 17em;
  font-family: var(--serif);
  font-size: clamp(32px, 6.2vw, 78px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--snow);
}
.js .quote .w { color: #262f3c; transition: color 0.4s var(--ease-quiet); }
.js .quote .w.near { color: #6b7686; }
.js .quote .w.lit { color: var(--snow); }
.quote footer { margin-top: 28px; font-size: 11px; color: var(--faint); }

/* ---------- ask */

.askform {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 660px;
  margin-top: 48px;
}
.askform input {
  flex: 1 1 260px;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--snow);
  font-family: var(--serif);
  font-size: 17px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.25s;
}
.askform input::placeholder { color: var(--faint); }
.askform input:focus { border-color: #30405a; box-shadow: 0 0 0 4px rgba(168, 209, 255, 0.08); }
.askform .btn { height: 48px; padding: 0 28px; }
.askform .count-left {
  position: absolute;
  right: 18px;
  top: -22px;
  font-size: 10px;
  color: var(--faint);
}

.burnfx {
  position: absolute;
  left: 21px;
  top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 17px;
  white-space: pre;
  pointer-events: none;
  overflow: hidden;
  max-width: calc(100% - 40px);
}
.burnfx span { display: inline-block; color: var(--snow); animation: burnchar 1.1s var(--ease-quiet) forwards; }
@keyframes burnchar {
  0% { color: var(--snow); transform: none; opacity: 1; }
  35% { color: var(--spark); }
  60% { color: var(--burn); opacity: 1; }
  100% { color: var(--burn); transform: translateY(-26px) scale(0.6); opacity: 0; }
}

.ask-out {
  max-width: 660px;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.ask-out[hidden] { display: none; }
.ask-out .k { font-size: 11px; color: var(--tap); }
.ask-out .qq { margin-top: 10px; font-family: var(--serif); font-size: 20px; line-height: 1.35; color: var(--snow); word-break: break-word; }
.ask-out .fine { margin-top: 12px; }
.ask-out .actions { margin-top: 16px; }

.ca-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.ca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.ca .label { font-size: 11px; color: var(--faint); }
.ca code { font-family: var(--mono); color: var(--snow); word-break: break-all; }
.ca code.pending { color: var(--faint); }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; }
.links a { color: var(--ice); }
.links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.links a[aria-disabled="true"] { color: var(--faint); cursor: not-allowed; text-decoration: none; }

/* ---------- footer */

.site-footer {
  position: relative;
  padding: 36px 0 44px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--faint);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: -220px;
  height: 220px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 122, 69, 0.1), transparent 75%);
  pointer-events: none;
}
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.footer-note p { max-width: 46em; line-height: 1.75; }
.footer-note a { color: var(--ice); }
.socials { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.socials a { color: var(--snow); }
.socials a:hover { color: var(--ice); }

.addrs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 28px;
  align-content: start;
}
@media (min-width: 480px) {
  .addrs { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 900px) {
  .addrs { justify-content: end; }
}
.addr {
  display: grid;
  grid-template-columns: 64px max-content max-content;
  align-items: center;
  gap: 10px;
}
.addrs .l { color: var(--faint); }
.addrs a, .addrs .v { color: var(--ice); font-variant-numeric: tabular-nums; white-space: nowrap; }
.addrs .v.pending { color: var(--faint); }
.addrs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--snow);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.35s var(--ease-snap);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- docs */

.docs {
  display: grid;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 120px;
}
@media (min-width: 1024px) {
  .docs { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; padding-top: 56px; }
}

.toc { font-size: 14px; }
.toc summary {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--snow);
  cursor: pointer;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "⌄"; color: var(--faint); }
.toc[open] summary::after { content: "⌃"; }
.toc nav { padding: 10px 14px 4px; }
.toc a { display: block; padding: 5px 0; line-height: 1.45; color: var(--muted); transition: color 0.15s; }
.toc a:hover, .toc a.is-active { color: var(--snow); }
.toc a.is-active::before { content: "› "; color: var(--ice); }
@media (min-width: 1024px) {
  .toc-wrap {
    position: sticky;
    top: calc(var(--header-total) + 32px);
    align-self: start;
    max-height: calc(100vh - var(--header-total) - 64px);
    overflow: auto;
  }
  .toc summary { display: none; }
  .toc nav { padding: 0; }
}

.doc { min-width: 0; }
.doc h1 { font-size: clamp(26px, 4vw, 30px); line-height: 1.25; letter-spacing: -0.01em; }
.doc .intro { margin-top: 12px; max-width: 46em; font-size: 14px; line-height: 1.65; color: var(--muted); }
.doc section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.doc h2 { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.doc h3 { margin: 28px 0 0; font-size: 14px; font-weight: 500; color: var(--snow); }
.doc p, .doc li { max-width: 46em; font-size: 14px; line-height: 1.7; color: var(--muted); }
.doc p { margin-top: 14px; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 20px; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--snow); font-weight: 500; }
.doc a { color: var(--ice); }
.doc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--snow);
  font-size: 12.5px;
  word-break: break-word;
}
.doc pre {
  margin: 16px 0 0;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.doc pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; word-break: normal; }
.doc pre .p { color: var(--ice); }
.doc pre .c { color: var(--faint); }
.doc .callout {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 122, 69, 0.3);
  border-radius: 10px;
  background: rgba(255, 122, 69, 0.05);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 46em;
}
.doc .callout strong { color: var(--burn); }

.ctable { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 13px; }
.ctable th { padding: 0 0 10px; text-align: left; font-weight: 400; font-size: 11px; color: var(--faint); }
.ctable td { padding: 14px 16px 14px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.ctable td:first-child { color: var(--snow); white-space: nowrap; }
.ctable td .addr { display: inline-block; margin-top: 4px; color: var(--ice); font-size: 12px; word-break: break-all; }
.ctable td .addr.pending { color: var(--faint); }
@media (max-width: 640px) {
  .ctable, .ctable tbody, .ctable tr, .ctable td { display: block; }
  .ctable thead { display: none; }
  .ctable tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .ctable td { padding: 2px 0; border: 0; }
}

.page-head {
  padding: 56px 0 8px;
}

/* ---------- motion preferences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}