/* Hallmark · see tokens.css for the stamp · page CSS references tokens only */

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

html, body { overflow-x: clip; }

html {
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body { margin: 0; background: var(--color-parchment); min-width: 0; }

h1, h2, h3, p, ul, ol { margin: 0; font-weight: var(--weight-regular); font-style: normal; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
canvas { display: block; }

.tabular { font-variant-numeric: tabular-nums; }
.code { text-transform: none; }

/* ── Orbit layer ── */

.orbit { position: fixed; inset: 0; z-index: var(--z-orbit); pointer-events: none; }

.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 1px dashed var(--color-ash);
  border-radius: 50%;
}

.ring--outer { width: min(900px, 100vmin); height: min(900px, 100vmin); }
.ring--inner { width: min(720px, 80vmin); height: min(720px, 80vmin); }

.satellite-track { position: absolute; inset: -1px; border-radius: 50%; animation: orbit 96s linear infinite; }
.satellite { position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--color-ink); }

@keyframes orbit { to { rotate: 360deg; } }

/* ── HUD ── */

.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-19);
  padding: var(--space-19);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
}

.hud__brand { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-5) var(--space-8); margin-left: calc(-1 * var(--space-8)); border-radius: var(--radius-link); white-space: nowrap; background: var(--color-parchment); }
.hud__mark { width: 26px; height: 18px; flex: none; display: block; }
.hud__right { display: flex; align-items: center; gap: var(--space-30); }
.hud .ghost { font-weight: var(--weight-bold); padding: var(--space-5) var(--space-8); background: var(--color-parchment); transition: opacity var(--dur-mid) var(--ease-out); }
.hud.is-scrolled .ghost { opacity: 0; pointer-events: none; }

/* ── Primitives ── */

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.caption--muted { color: var(--color-ink-60); }

.label {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
}

.ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-5) 0;
  border-radius: var(--radius-link);
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--dur-short) var(--ease-out);
}

.ghost .arrow { transition: translate var(--dur-short) var(--ease-out); }
.ghost:hover .arrow { translate: 4px 0; }
.ghost:active { opacity: 0.6; }

.ghost--rule {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-19);
  border: 1px solid var(--color-ink-20);
  border-radius: var(--radius-pill);
  background: var(--color-parchment);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

a.pill:hover, button.pill:hover { background: var(--color-ink); color: var(--color-parchment); border-color: var(--color-ink); }
a.pill:active, button.pill:active { opacity: 0.7; }
button.pill.is-empty { border-color: var(--color-ink); background: var(--color-stone); }

.pill--demo { border-style: dashed; border-color: var(--color-ink); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--color-ink); background: var(--color-ink); }
.pill.is-offline .dot { background: transparent; }

:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; border-radius: var(--radius-link); }

.sup { font-size: var(--text-caption); vertical-align: top; margin-left: 3px; letter-spacing: 0; }

/* ── Page grid ── */

main { position: relative; z-index: var(--z-page); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}

.rail { grid-column: 1 / 3; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-15); }
.rail__note { max-width: 24ch; }

/* ── Hero ── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-46);
  padding: 0 var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
  overflow: clip;
}

.hero__title {
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  min-width: 0;
}

.hero__title .w { display: block; animation: rise var(--dur-long) var(--ease-out) both; overflow-wrap: anywhere; }
.w1 { animation-delay: 40ms; }
.w2 { animation-delay: 140ms; padding-left: 1.1em; }
.w3 { animation-delay: 240ms; }

#hero-name {
  display: inline-block;
  transition: opacity 70ms var(--ease-out);
  background-image: var(--gradient-name);
  background-size: 155% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: name-sheen 9s var(--ease-in-out) infinite alternate;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #hero-name { color: var(--color-ink); background: none; }
}

@keyframes name-sheen {
  from { background-position: 8% 50%; }
  to { background-position: 92% 50%; }
}
#hero-name.is-swapping { opacity: 0; }

@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

.hero__object {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-30);
  animation: rise var(--dur-long) var(--ease-out) 320ms both;
}

.sphere {
  width: clamp(170px, 19vw, 264px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--color-parchment);
}

/* thin-film iridescence: two conic sheets turning at different rates, so the
   hues cross each other instead of sliding as one block */
.sphere::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(255deg,
    rgb(250, 203, 14),
    rgb(240, 107, 168) 30%,
    rgb(120, 186, 230) 65%,
    rgb(255, 255, 255));
  animation: sweep 9s var(--ease-in-out) infinite alternate;
}

/* second film, moving against the first: where they cross, the hue shifts */
.sphere__film {
  position: absolute;
  inset: -30%;
  background: linear-gradient(105deg,
    rgba(120, 186, 230, 0) 8%,
    rgba(120, 186, 230, 0.75) 26%,
    rgba(255, 255, 255, 0.1) 44%,
    rgba(240, 107, 168, 0.7) 63%,
    rgba(250, 203, 14, 0.5) 80%,
    rgba(120, 186, 230, 0) 96%);
  mix-blend-mode: overlay;
  filter: blur(8px);
  animation:
    sweep-back 6.5s var(--ease-in-out) infinite alternate,
    shimmer 12s linear infinite;
}

/* interference fringes: thin bands of the same four hues, flowing across the film */
.sphere__fringe {
  position: absolute;
  inset: -40%;
  background: repeating-linear-gradient(72deg,
    rgba(250, 203, 14, 0) 0px,
    rgba(250, 203, 14, 0.5) 9px,
    rgba(240, 107, 168, 0.55) 20px,
    rgba(120, 186, 230, 0.5) 31px,
    rgba(255, 255, 255, 0.35) 42px,
    rgba(250, 203, 14, 0) 58px);
  mix-blend-mode: soft-light;
  opacity: 0.55;
  filter: blur(3px);
  -webkit-mask-image: radial-gradient(58% 58% at 46% 44%, #000 20%, rgba(0, 0, 0, 0.35) 62%, transparent 88%);
  mask-image: radial-gradient(58% 58% at 46% 44%, #000 20%, rgba(0, 0, 0, 0.35) 62%, transparent 88%);
  animation:
    fringe 4.5s linear infinite,
    fringe-hue 9s linear infinite;
}

/* volume: a specular that drifts, and a dark limb at the rim */
.sphere__spec {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44% 38% at 33% 26%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 64%),
    radial-gradient(120% 120% at 50% 48%, rgba(29, 29, 29, 0) 52%, rgba(29, 29, 29, 0.26) 100%);
  animation: drift 7.5s var(--ease-in-out) infinite alternate;
}

@keyframes sweep {
  from { transform: rotate(-13deg) translate3d(-2%, 2%, 0) scale(1.04); }
  to   { transform: rotate(11deg) translate3d(3%, -2%, 0) scale(1.08); }
}
@keyframes sweep-back {
  from { transform: rotate(10deg) translate3d(4%, -3%, 0) scale(1.08); }
  to   { transform: rotate(-12deg) translate3d(-4%, 3%, 0) scale(1.14); }
}
@keyframes fringe {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-58px, 19px, 0) rotate(6deg); }
}
@keyframes fringe-hue {
  from { filter: blur(3px) hue-rotate(0deg); }
  to { filter: blur(3px) hue-rotate(360deg); }
}
@keyframes shimmer {
  from { filter: blur(8px) hue-rotate(0deg); }
  to { filter: blur(8px) hue-rotate(360deg); }
}
@keyframes drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); }
  to   { transform: translate3d(3%, 2%, 0) scale(1); }
}


.plate {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-link);
  overflow: hidden;
}

.plate__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-15) var(--space-19);
  min-width: 0;
}

.plate__cell { min-width: 7.4em; }
.plate__cell--price { border-left: 1px solid var(--color-ink); }
.plate__price { min-width: 7ch; }
.plate__key { color: var(--color-ink-60); }
.plate__slots { display: flex; align-items: center; gap: 4px; height: 30px; }
.slot {
  display: inline-block;
  width: 0.66em;
  text-align: center;
  font-size: var(--text-subheading);
  line-height: 30px;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.slot.is-dash { color: var(--color-ink-60); }

.plate__caret { width: 2px; height: 20px; background: var(--color-ink); animation: blink 1.05s steps(1) infinite; }

.plate__price {
  font-size: var(--text-subheading);
  line-height: 30px;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

.plate__note { color: var(--color-ink-60); }

@keyframes blink { 50% { opacity: 0; } }

.scroll-cue {
  position: absolute;
  right: var(--space-30);
  bottom: var(--space-30);
  padding: var(--space-5) 0;
  border-radius: var(--radius-link);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }

/* ── Statements ── */

.statement { padding: var(--space-119) var(--gutter) var(--space-76); max-width: var(--page-max); margin: 0 auto; }

.statement h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-indent: 2.1em;
  max-width: 13.5em;
  margin-left: 16.5%;
  overflow-wrap: anywhere;
  min-width: 0;
}

.statement--big { padding-top: calc(var(--space-119) + var(--space-46)); padding-bottom: var(--space-119); }
.statement--big h2 { font-size: var(--text-display); margin-left: 0; max-width: 10em; text-indent: 1.6em; }

/* ── Intro ── */

.intro { padding-top: var(--space-30); padding-bottom: var(--space-119); }
.intro__who { grid-column: 2 / 5; display: flex; flex-direction: column; gap: var(--space-30); }
.intro__who .label { max-width: 20ch; }
.intro__body { grid-column: 5 / 9; font-size: var(--text-body-sm); }
.intro__body p + p { margin-top: var(--space-15); }


/* ── The deck: one workspace instead of eight stacked sections ── */

.deck {
  max-width: var(--page-max);
  margin: 0 auto var(--space-119);
  padding: 0 var(--gutter);
  scroll-margin-top: 54px;
}

.deck__bar {
  display: flex;
  align-items: center;
  gap: var(--space-30);
  border-bottom: 1px solid var(--color-ink);
  position: sticky;
  top: 54px;
  z-index: 5;
  background: var(--color-parchment);
  padding-top: var(--space-19);
  overflow-x: auto;
  scrollbar-width: none;
}
.deck__bar::-webkit-scrollbar { display: none; }

.deck__tab {
  position: relative;
  padding: 0 0 var(--space-15);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: var(--color-ink-60);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.deck__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.deck__tab:hover { color: var(--color-ink); }
.deck__tab.is-on { color: var(--color-ink); }
.deck__tab.is-on::after { transform: scaleX(1); }
.deck__n { font-size: var(--text-caption); vertical-align: top; margin-left: 4px; color: var(--color-ink-60); }
.deck__live { margin-left: auto; color: var(--color-ink-60); white-space: nowrap; }

.panel { padding-top: var(--space-46); animation: panel-in var(--dur-mid) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* inside the deck the sections lose their own chrome and rails */
.panel > .grid { padding: 0; }
.panel > .grid + .grid { margin-top: var(--space-76); }
.panel .book__rows, .panel .grad__rows, .panel .pairs__app,
.panel .pool__app, .panel .vault__app, .panel .memo__rows { grid-column: 1 / -1; }
.panel .docs__index { grid-column: 1 / 4; top: 128px; }
.panel .docs__body { grid-column: 4 / 13; }
.panel section { padding-bottom: 0; }
.panel .book, .panel .grad, .panel .pairs, .panel .pool, .panel .vault, .panel .memo, .panel .docs { padding-bottom: 0; }

/* ── The book ── */

.book { padding-bottom: var(--space-119); }
.book__rows { grid-column: 3 / 13; border-top: var(--rule); }

.book__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15em) 12em 10em;
  column-gap: var(--gutter);
  align-items: baseline;
  padding: var(--space-19) 0;
  border-bottom: var(--rule);
  cursor: pointer;
  transition: opacity var(--dur-short) var(--ease-out);
}

.book__row:hover { opacity: 0.55; }

.book__name {
  font-size: var(--text-subheading);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
}

.book__venue { color: var(--color-ink-60); }
.book__mark { text-align: right; }
.book__unit { text-align: right; }


/* ── The pairs board ── */

.pairs { padding-bottom: var(--space-119); }
.pairs__app { grid-column: 3 / 13; display: flex; flex-direction: column; gap: var(--space-30); min-width: 0; }

.board { min-width: 0; }
.board__head, .board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.6em 4.6em 6em 5.4em 110px 3.4em;
  column-gap: var(--space-15);
  align-items: center;
}
.board__head { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-ink); color: var(--color-ink-60); }
.board__head span:not(:first-child), .board__row span:not(:first-child) { text-align: right; }

.board__row {
  padding: var(--space-15) 0;
  border-bottom: var(--rule);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.board__row:hover { background: var(--color-paper); }
.board__row.is-on { background: var(--color-paper); box-shadow: inset 2px 0 0 var(--color-ink); }

.board__pair {
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board__pair b { font-weight: var(--weight-bold); }
.board__slash { color: var(--color-ink-60); }
.board__chg.is-down { color: var(--color-ink-60); }
.board__spark { display: block; height: 22px; }
.board__spark canvas { width: 100%; height: 22px; }
.board__age { color: var(--color-ink-60); }

/* ── Launch ── */

.card--launch { min-height: 0; gap: var(--space-19); justify-content: flex-start; }
.launch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-46); row-gap: var(--space-19); align-items: start; }
.launch__left, .launch__right { display: flex; flex-direction: column; gap: var(--space-19); min-width: 0; }
.launch .input { width: 100%; }
.launch__left .field--row .field { flex: 1 1 7em; }
.launch__left .field--row { gap: var(--space-15); }
.launch .field--row { align-items: flex-end; }
.launch .field--row .field { flex: 1 1 8em; }
.spec--tight { margin-top: var(--space-8); }
.pill--go { align-self: flex-start; padding: 12px 26px; font-size: var(--text-body-sm); letter-spacing: var(--tracking-body); border-color: var(--color-ink); }
.pill--go[disabled] { opacity: 0.45; pointer-events: none; }
.launch__status { color: var(--color-ink-60); min-height: 2.6em; }
.launch__status.is-bad { color: var(--color-ink); }

/* ── Pool bar ── */

.pool__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-19);
  flex-wrap: wrap;
  padding-bottom: var(--space-15);
  border-bottom: 1px solid var(--color-ink);
}
.pool__bar-id { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.pool__bar-act { display: flex; align-items: center; gap: var(--space-19); flex-wrap: wrap; }
.pool__pair {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* ── The vault ── */

.vault { padding-bottom: var(--space-119); }
.vault__app { grid-column: 3 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); min-width: 0; }

.flow { display: flex; flex-direction: column; gap: 0; margin: 0; }

.flow__step {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 15em);
  column-gap: var(--space-19);
  align-items: baseline;
  padding: var(--space-19) 0;
  border-bottom: var(--rule);
  position: relative;
}
.flow__step:first-child { border-top: var(--rule); }

.flow__step::before {
  content: "";
  position: absolute;
  left: 0.55em;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--color-ash);
}
.flow__step:first-child::before { top: 50%; }
.flow__step:last-child::before { bottom: 50%; }

.flow__n {
  position: relative;
  z-index: 1;
  background: var(--color-paper);
  padding: 2px 0;
  color: var(--color-ink-60);
}

.flow__body { min-width: 0; }
.flow__title {
  font-size: var(--text-body);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.flow__fn { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-ink-60); }
.flow__fn .code { color: var(--color-ink); }
.flow__note { text-align: right; color: var(--color-ink-60); }

.spec { display: flex; flex-direction: column; border-top: var(--rule); margin: 0; }
.spec__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-19); padding: var(--space-8) 0; border-bottom: var(--rule); }
.spec__row dt { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-ink-60); margin: 0; }
.spec__row dd { margin: 0; font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; text-align: right; font-variant-numeric: tabular-nums; }

.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: ew-resize; }
.slider::-webkit-slider-runnable-track { height: 1px; background: var(--color-ink); }
.slider::-moz-range-track { height: 1px; background: var(--color-ink); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--color-ink); border: 0; }
.slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--color-ink); border: 0; }

.vault__ctl { display: flex; flex-direction: column; gap: var(--space-8); }

/* ── The pool ── */

.pool { padding-bottom: var(--space-119); }
.pool__app { grid-column: 3 / 13; display: flex; flex-direction: column; gap: var(--space-30); min-width: 0; }

.pool__controls { display: flex; flex-direction: column; gap: var(--space-19); }
.field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.field--row { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: var(--space-19); }
.field--row .field { flex: 0 1 auto; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.chip {
  padding: var(--space-8) var(--space-15);
  border: 1px solid var(--color-ink-20);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.chip:hover { border-color: var(--color-ink); }
.chip.is-on { background: var(--color-ink); color: var(--color-parchment); border-color: var(--color-ink); }

.input {
  width: 11em;
  padding: var(--space-8) var(--space-15);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-link);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
}

.input--static { display: inline-flex; align-items: center; border-style: dashed; background: transparent; color: var(--color-ink-60); }

.pool__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.pool__note { max-width: 92ch; }

/* ── Cards ── */

.card {
  position: relative;
  min-width: 0;
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-30);
  min-height: 380px;
}

.card--wide { grid-column: 1 / -1; min-height: 440px; }
.card__head { display: flex; justify-content: space-between; gap: var(--space-19); align-items: flex-start; }
.card__head .caption { max-width: 60%; }
.card__head .caption:last-child { text-align: right; color: var(--color-ink-60); }
.card__stage { flex: 1 1 auto; min-height: 150px; position: relative; }
.card__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-19); flex-wrap: wrap; }
.card__num {
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__num small { font-size: var(--text-subheading); letter-spacing: 0; }
.card__meta { display: flex; flex-direction: column; gap: 2px; text-align: right; color: var(--color-ink-60); }
.card__meta b { font-weight: var(--weight-regular); color: var(--color-ink); }
.card__meta--left { text-align: left; }

/* ── Console ── */

.card--console { justify-content: flex-start; gap: var(--space-19); }
.console { display: flex; flex-direction: column; gap: var(--space-19); flex: 1 1 auto; min-height: 0; }
.console__buttons { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.console__log { display: flex; flex-direction: column; border-top: var(--rule); }

.console__row {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr) minmax(0, 1.3fr) 4.4em;
  column-gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: var(--rule);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ink-60);
  animation: rowin 240ms var(--ease-out) both;
}

.console__row.is-you { color: var(--color-ink); }
.console__row.is-you .console__side { font-weight: var(--weight-bold); }
.console__imp { text-align: right; }

@keyframes rowin { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

/* ── Graduated ── */

.grad { padding-bottom: var(--space-119); }
.grad__rows { grid-column: 3 / 13; border-top: var(--rule); }
.grad__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 200px;
  column-gap: var(--gutter);
  align-items: baseline;
  padding: var(--space-19) 0;
  border-bottom: var(--rule);
}
.grad__name {
  font-size: var(--text-subheading);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
}
.grad__move { text-align: right; }

/* ── Memorandum ── */

.memo { padding-top: var(--space-46); padding-bottom: var(--space-119); }
.memo__rows { grid-column: 3 / 13; border-top: var(--rule); }
.memo__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  align-items: center;
  padding: var(--space-46) 0;
  border-bottom: var(--rule);
}
.memo__n { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); }
.memo__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.memo__notes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.memo__notes .caption { white-space: nowrap; }

/* ── Footer ── */

.foot { position: relative; z-index: var(--z-page); padding: var(--space-119) var(--gutter) var(--space-30); max-width: var(--page-max); margin: 0 auto; }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-76); align-items: end; }
.foot__statement { grid-column: 1 / 8; }
.foot__statement h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-left: 3.2%;
  overflow-wrap: anywhere;
  min-width: 0;
}
.foot__statement .pill { margin: 0 0.2em 0.12em 0.25em; vertical-align: middle; font-size: var(--text-body-sm); padding: 12px 26px; letter-spacing: var(--tracking-body); }
.foot__cols { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-self: center; }
.foot__col { display: flex; flex-direction: column; gap: var(--space-15); min-width: 0; }
.foot__col .caption { color: var(--color-ink-60); }
.foot__col .ghost { border-bottom: 1px solid var(--color-ink); border-radius: 0; padding: 2px 0; font-size: var(--text-body-sm); width: fit-content; gap: 4px; }
.foot__col span.label { font-size: var(--text-body-sm); }
.foot__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-46); margin-top: var(--space-119); }
.foot__legal { max-width: 62ch; color: var(--color-ink-60); }
.foot__mark { display: flex; align-items: center; gap: var(--space-19); }
.foot__wordmark { font-size: var(--text-heading-lg); line-height: var(--leading-solid); letter-spacing: var(--tracking-display); text-transform: uppercase; white-space: nowrap; }
.foot__mark svg { width: 46px; height: 46px; flex: none; }


/* ── Docs ── */

.docs { padding-bottom: var(--space-119); }
.docs__index {
  grid-column: 3 / 5;
  position: sticky;
  top: 84px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-right: var(--space-30);
}
.docs__link {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ink-60);
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.docs__link:hover { color: var(--color-ink); border-color: var(--color-ink); }
.docs__link.is-on { color: var(--color-ink); border-color: var(--color-ink); }

.docs__body { grid-column: 5 / 12; min-width: 0; display: flex; flex-direction: column; }
.doc { padding: var(--space-46) 0; border-top: var(--rule); scroll-margin-top: 92px; }
.doc:first-child { border-top: 0; padding-top: 0; }
.doc__h {
  font-size: var(--text-subheading);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: var(--space-19);
}
.doc p { font-size: var(--text-body-sm); max-width: 68ch; }
.doc p + p { margin-top: var(--space-15); }
.doc p b { font-weight: var(--weight-bold); }
.doc .spec { margin-top: var(--space-8); }
.doc .spec__row dt { text-transform: none; letter-spacing: 0.2px; color: var(--color-ink); }
.doc__note { margin-top: var(--space-19); }

/* ── Section index rail ── */

.index-rail {
  position: fixed;
  right: var(--space-19);
  top: 50%;
  translate: 0 -50%;
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-15);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.index-rail.is-live { opacity: 1; pointer-events: auto; }
.index-rail a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ink-60);
}
.index-rail i { display: block; width: 18px; height: 1px; background: var(--color-ink); opacity: 0.35; transition: width var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.index-rail span { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.index-rail a:hover span, .index-rail a.is-on span { opacity: 1; }
.index-rail a.is-on i { width: 30px; opacity: 1; }
.index-rail a:hover i { opacity: 1; }

@media (max-width: 1240px) { .index-rail { display: none; } }

/* ── Responsive ── */

@media (max-width: 1100px) {
  .intro__who { grid-column: 1 / 5; }
  .intro__body { grid-column: 5 / 11; }
  .book__rows, .grad__rows, .pool__app, .vault__app, .pairs__app { grid-column: 4 / 13; }
  .panel .docs__index { grid-column: 1 / 4; }
  .panel .docs__body { grid-column: 4 / 13; }
  .docs__index { grid-column: 1 / 4; }
  .docs__body { grid-column: 4 / 13; }
  .board__head, .board__row { grid-template-columns: minmax(0, 1fr) 6.2em 4.4em 5.6em 90px 3.2em; }
  .board__head span:nth-child(5), .board__row span:nth-child(5) { display: none; }
  .book__row { grid-template-columns: minmax(0, 1fr) 10em 9em; }
  .book__venue { display: none; }
  .grad__row { grid-template-columns: minmax(0, 1fr) 150px 160px; }
  .memo__row { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .foot__statement { grid-column: 1 / 13; }
  .foot__cols { grid-column: 1 / 13; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-46); padding-top: 84px; }
  .hero__object { align-items: flex-start; }
  .hero__title { font-size: clamp(38px, 10.5vw, 60px); }
  .w2 { padding-left: 0.6em; }
}

@media (max-width: 900px) {
  .deck__bar { gap: var(--space-19); top: 50px; }
  .deck__live { display: none; }
}

@media (max-width: 768px) {
  :root { --gutter: 15px; --space-119: 76px; --space-76: 56px; }
  .hud { font-size: 13px; }
  .hud__mark { width: 23px; height: 16px; }
  .hud__right { gap: var(--space-15); }
  .hud .ghost { display: none; }

  .scroll-cue { right: var(--gutter); bottom: var(--space-19); }

  .statement { padding-top: var(--space-76); }
  .statement h2, .statement--big h2 { margin-left: 0; max-width: none; text-indent: 1.2em; }

  .rail { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-30); }
  .rail__note { max-width: none; flex-basis: 100%; }
  .intro__who, .intro__body, .book__rows, .grad__rows, .memo__rows, .pool__app, .vault__app, .pairs__app, .docs__body { grid-column: 1 / -1; }
  .docs__index { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-15); padding: 0 0 var(--space-30); }
  .vault__app { grid-template-columns: minmax(0, 1fr); }
  .intro__who { margin-bottom: var(--space-46); }

  .book__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: var(--space-15) 0; }
  .book__mark { grid-column: 2; grid-row: 1; }
  .book__unit { grid-column: 2; grid-row: 2; }

  .pool__cards { grid-template-columns: minmax(0, 1fr); }
  .flow__step { grid-template-columns: 2.2em minmax(0, 1fr); row-gap: 6px; }
  .flow__note { grid-column: 2; text-align: left; }
  .launch { grid-template-columns: minmax(0, 1fr); }
  .board__head, .board__row { grid-template-columns: minmax(0, 1fr) 6em 4.2em 64px; }
  .board__head span:nth-child(4), .board__row span:nth-child(4),
  .board__head span:nth-child(5), .board__row span:nth-child(5),
  .board__head span:nth-child(7), .board__row span:nth-child(7) { display: none; }
  .board__spark canvas { height: 20px; }
  .spec__row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .spec__row dd { text-align: left; }
  .card { min-height: 330px; padding: var(--space-19); }
  .doc { padding: var(--space-30) 0; scroll-margin-top: 120px; }
  .deck { margin-bottom: var(--space-76); }
  .deck__bar { top: 48px; padding-top: var(--space-15); }
  .deck__tab { font-size: 13px; }
  .panel { padding-top: var(--space-30); }
  .card--wide { min-height: 370px; }
  .card__head .caption { max-width: 55%; }
  .input { width: 8.5em; }

  .grad__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .grad__row .caption:nth-child(2) { grid-column: 1; }
  .grad__row .grad__move { grid-column: 2; grid-row: 1 / 3; align-self: center; }

  .memo__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--space-15); padding: var(--space-30) 0; }
  .memo__notes { grid-column: 2; align-items: flex-start; text-align: left; }

  .foot__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-30); }
  .foot__statement .pill { display: inline-flex; margin: var(--space-15) 0 0; }
  .foot__bottom { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-30); margin-top: var(--space-76); }
}

@media (max-width: 414px) {
  .hero__title { font-size: clamp(34px, 11.5vw, 50px); }
  .board__head, .board__row { grid-template-columns: minmax(0, 1fr) 5.6em 58px; }
  .board__head span:nth-child(3), .board__row span:nth-child(3) { display: none; }
  .foot__wordmark { font-size: clamp(30px, 10vw, 46px); }
  .console__row { grid-template-columns: 3.2em minmax(0, 1fr) 4.2em; }
  .console__row span:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .satellite-track, .sphere::before, .plate__caret { animation: none; }
  .hero__title .w, .hero__object { animation-duration: 120ms; animation-name: fade; }
  .console__row { animation: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .ghost .arrow { transition: none; }
}