/* SPDX-License-Identifier: AGPL-3.0-only
   Copyright (C) 2026 Nurlan Urazkulov */

/* ── Typefaces: the same three voices as the game client (D-075) ───────── */
@font-face { font-family: Onest; src: url("/fonts/onest.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plexmono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plexmono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Literata; src: url("/fonts/literata.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Literata; src: url("/fonts/literata-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ── Tokens: Terra's dark scale from the client, plus planet tints ─────── */
:root {
  --bg-950: #070B14; --bg-900: #0E1524; --bg-850: #141D30; --bg-800: #1C273D;
  --line: #2A3852; --hair: #3B4B68;
  --muted: #8794AE; --text: #C2CADA; --ink: #EDF1F8;
  --accent: #B98CFF;            /* a living person -- and nothing else */
  --warning: #E0A458; --danger: #E8574C; --success: #56C48A;
  --terra: #7FB8E8; --aurora: #D6E4F5; --pyro: #F0895A; --aqua: #5BC8A5;
  --sky: #9EDBFF;               /* the accent word: Terra's blue, brighter */
  --f-ui: Onest, "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-world: Literata, "PT Serif", Georgia, "Times New Roman", serif;
  --wrap: 1200px; --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-950); color: var(--text);
  font: 400 18px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--bg-950); }
a { color: inherit; }
b, strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.world { font-family: var(--f-world); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 68ch; }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Space: a sparse canvas and film grain, both silent ───────────────── */
/* A canvas is a replaced element: inset alone does not stretch it, its CSS
   box defaults to the buffer size. Explicit 100% pins the box to the
   viewport so buffer pixels map to screen pixels exactly at any DPR. */
#space { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); }
  60% { transform: translate(-4%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(-1%,4%); }
}
main, header.top, footer, .ticker { position: relative; z-index: 2; }

/* ── Header ───────────────────────────────────────────────────────────── */
header.top {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
header.top.scrolled { background: rgba(7, 11, 20, .92); border-bottom-color: var(--line); }
header.top .bar { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand svg { height: 42px; width: auto; display: block; }
nav.jump { display: flex; gap: 22px; margin-left: 12px; }
nav.jump a {
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 6px 0; position: relative;
}
nav.jump a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--ink); transition: right .3s var(--ease); }
nav.jump a:hover { color: var(--ink); }
nav.jump a[aria-current="page"] { color: var(--ink); }
nav.jump a[aria-current="page"]::after { right: 0; }
nav.jump a:hover::after { right: 0; }
/* An outward link says so: the mark is the only difference from an anchor. */
.ext::before { content: "↗"; display: inline-block; margin-right: 5px; font-size: .9em; }
header.top .btn { margin-left: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--bg-950); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s var(--ease-out);
}
.btn { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn:hover { background: #fff; transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 1px)); }
.btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { min-height: calc(100svh - 64px); display: grid; align-content: center; padding: 48px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
h1 .line { white-space: nowrap; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--hair); }
h1 {
  font-weight: 800; letter-spacing: -.035em; line-height: .96; color: var(--ink);
  font-size: clamp(40px, 5.6vw, 78px); margin-bottom: 30px; text-wrap: balance;
}
h1 .line { display: block; }
h1 .line > span { display: block; transform: translateY(110%); }
.ready h1 .line > span { animation: rise 1.1s var(--ease-out) forwards; }
.ready h1 .line:nth-child(2) > span { animation-delay: .12s; }
.ready h1 .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes rise { to { transform: translateY(0); } }
h1 .accent {
  position: relative;
  display: inline-block;
  font-family: var(--f-world);
  font-style: italic;
  font-weight: 400;
  font-size: min(1.42em, 106px);
  line-height: .82;
  letter-spacing: -.005em;
  color: var(--sky);
  padding: 0 .06em 0 .02em;
  margin-right: -.06em;
  vertical-align: baseline;
  margin-bottom: .3em;
}
/* The stroke under the word is a ribbon, not a bar. Its shape flows all the
   time (the path itself is animated), a clip draws it in from the left once
   and then leaves it be, and a fainter echo runs out of phase beneath it.
   Nothing is on screen until the clip opens, so a slow font or a slow script
   cannot leave a stray line under the word. */
h1 .accent svg { position: absolute; left: 0; bottom: -.14em; width: calc(100% - .04em); height: .22em; overflow: visible; pointer-events: none; }
h1 .accent svg path { fill: none; stroke: var(--sky); stroke-linecap: round; vector-effect: non-scaling-stroke; }
h1 .accent svg .ink { stroke-width: 3.5; }
h1 .accent svg .echo { stroke-width: 1.5; opacity: .45; }
.ready h1 .accent svg .ink { animation: thick 3.4s ease-in-out infinite alternate; }
@keyframes thick { from { stroke-width: 3; } to { stroke-width: 4.8; } }  .hero .lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--text); max-width: 56ch; margin-bottom: 34px; opacity: 0; }
.hero .lead b { color: var(--ink); }
.ready .hero .lead { animation: fade .9s .55s var(--ease-out) forwards; }
.hero .actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; opacity: 0; }
.ready .hero .actions { animation: fade .9s .75s var(--ease-out) forwards; }
.hero .actions .note { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 34ch; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* The system: a star, four planets and two asteroid belts, in that order
   outward. Each planet rides its own group rotating about the star; the
   label rides a second group counter-rotating at the same rate, so the name
   travels with its planet and never turns upside down. */
.system { width: min(100%, 660px); margin-left: auto; opacity: 0; }
.ready .system { animation: fade 1.4s .5s var(--ease-out) forwards; }
.system svg { width: 100%; aspect-ratio: 1; display: block; overflow: visible; will-change: transform; }
@media (min-width: 961px) {
  /* the system grows past its column and bleeds off the right edge; the text
     stacks above it so orbits pass under the words, never over them */
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero-grid > div:first-child { position: relative; z-index: 1; }
  .system { width: min(48vw, 820px); margin-right: -8vw; }
}
.system .orbit { fill: none; stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 7; opacity: .18; }
.system .belt { fill: none; stroke: var(--muted); stroke-linecap: round; transform-origin: 320px 320px; animation: spin var(--d) linear infinite; }
.system .craft path { fill: var(--ink); }
.system .craft line { stroke: var(--ink); stroke-width: 1; opacity: .3; }
.system .craft { transition: opacity .6s; }
.system .star { fill: var(--ink); filter: drop-shadow(0 0 8px rgba(237, 241, 248, .9)) drop-shadow(0 0 26px rgba(158, 219, 255, .5)); }
.system .orb { transform-origin: 320px 320px; animation: spin var(--d) linear infinite; animation-delay: var(--t); }
.system .anti { animation: spin var(--d) linear infinite reverse; animation-delay: var(--t); }
.system .body { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 18px currentColor); }
/* The dark outline keeps a name readable wherever its orbit carries it. */
.system .lbl { font-family: var(--f-mono); font-size: 13px; fill: var(--muted); letter-spacing: .04em; paint-order: stroke fill; stroke: var(--bg-950); stroke-width: 3.5px; stroke-linejoin: round; }
.system .lbl.name { fill: var(--ink); font-size: 16px; font-weight: 500; }
.system .lbl.off { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .18; } 50% { opacity: .5; } }
.system figcaption { margin-top: 14px; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--muted); letter-spacing: .04em; }
.cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 56px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); opacity: 0; text-decoration: none; }
.cue:hover { color: var(--ink); }
.ready .cue { animation: fade .9s 1.2s var(--ease-out) forwards; }
.cue i { display: block; width: 44px; height: 1px; background: var(--hair); position: relative; overflow: hidden; }
.cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ── Ticker ───────────────────────────────────────────────────────────── */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: rgba(14, 21, 36, .55); }
.ticker .track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker span { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 0; white-space: nowrap; }
.ticker span b { color: var(--ink); font-weight: 500; }
.ticker span::after { content: "—"; margin: 0 26px; color: var(--hair); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Sections ─────────────────────────────────────────────────────────── */
/* An anchor must not land under the sticky header. */
section.sec { padding: 112px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
section.sec:last-of-type { border-bottom: 0; }
.sec-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; margin-bottom: 56px; }
.sec-num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--muted); padding-top: 14px; }
.sec-num::before { content: ""; display: block; width: 28px; height: 1px; background: var(--hair); margin-bottom: 14px; }
h2, .sec-head h1 { font-weight: 700; letter-spacing: -.025em; line-height: 1.05; color: var(--ink); font-size: clamp(32px, 4.2vw, 56px); text-wrap: balance; }
.sec-lead { margin-top: 22px; font-size: clamp(17px, 1.3vw, 20px); color: var(--text); max-width: 64ch; }
h3 { font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.cell { padding: 34px 32px 34px 0; border-top: 1px solid var(--line); }
.grid-3 .cell + .cell { border-left: 1px solid var(--line); padding-left: 32px; }
.cell .n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--muted); display: block; margin-bottom: 26px; }
.cell h3 { font-size: 22px; line-height: 1.25; margin-bottom: 14px; }
.cell p { color: var(--muted); font-size: 16.5px; }
.cell p b { color: var(--ink); }

/* reveal on scroll: staged, once */
.rv { opacity: 0; transform: translateY(26px); filter: blur(10px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; filter: none; }
.rv-stag > * { opacity: 0; transform: translateY(22px); filter: blur(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
.rv-stag.in > * { opacity: 1; transform: none; filter: none; }
.rv-stag.in > *:nth-child(2) { transition-delay: .1s; }
.rv-stag.in > *:nth-child(3) { transition-delay: .2s; }
.rv-stag.in > *:nth-child(4) { transition-delay: .3s; }
.rv-stag.in > *:nth-child(5) { transition-delay: .4s; }
.rv-stag.in > *:nth-child(6) { transition-delay: .5s; }
.rv-stag.in > *:nth-child(7) { transition-delay: .6s; }
.rv-stag.in > *:nth-child(8) { transition-delay: .7s; }
.rv-stag.in > *:nth-child(9) { transition-delay: .8s; }
.sec-head.rv h1, .sec-head.rv h2 { font-weight: 250; transition: font-weight 1.2s var(--ease-out) .15s; }
.sec-head.rv.in h1, .sec-head.rv.in h2 { font-weight: 700; }
/* the section index flickers once as it lands: a machine settling on a value */
.rv.in .sec-num { animation: glitch .45s steps(1) 1 .1s; }
@keyframes glitch {
  0% { transform: translateX(0); text-shadow: none; }
  20% { transform: translateX(2px); text-shadow: -2px 0 var(--danger), 2px 0 var(--terra); }
  40% { transform: translateX(-2px); text-shadow: 2px 0 var(--accent), -2px 0 var(--terra); }
  60% { transform: translateX(1px); text-shadow: -1px 0 var(--danger); }
  100% { transform: none; text-shadow: none; }
}


/* ── Roles: an accordion of long titles ───────────────────────────────── */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-h {
  width: 100%; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 20px;
  padding: 24px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink);
}
.acc-h .k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--muted); }
.acc-h .t { font-size: clamp(24px, 3vw, 40px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; transition: transform .35s var(--ease-out); }
.acc-h:hover .t { transform: translateX(8px); }
.acc-h .i { width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 50%; position: relative; transition: border-color .3s, transform .4s var(--ease-out); flex: none; }
.acc-h .i::before, .acc-h .i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.acc-h .i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease-out); }
.acc-h[aria-expanded="true"] .i { border-color: var(--ink); transform: rotate(180deg); }
.acc-h[aria-expanded="true"] .i::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.acc-h[aria-expanded="true"] + .acc-p { grid-template-rows: 1fr; }
.acc-c { overflow: hidden; }
.acc-b { display: grid; grid-template-columns: 64px minmax(0, 62ch) minmax(0, 1fr); gap: 20px 24px; padding: 0 0 32px; }
.acc-b p { color: var(--text); font-size: 17px; }
.acc-b p b { color: var(--ink); }
.acc-b .price { grid-column: 3; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--warning); padding-left: 14px; align-self: start; }
.acc-b .price b { display: block; color: var(--warning); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; margin-bottom: 4px; }
.acc-b .price.free { border-left-color: var(--hair); }
.acc-b .price.free b { color: var(--muted); }

/* ── The world ────────────────────────────────────────────────────────── */
.planets { border-top: 1px solid var(--line); }
/* With scripts the list becomes a carousel: cards stack in one grid cell,
   the active one holds the stage, its neighbours wait beyond the viewport
   edges; without scripts the plain list below stays as it is. */
.planets.carousel { display: grid; }
.planets.carousel .planet { grid-area: 1 / 1; }
.planets.carousel .planet.gone-left,
.planets.carousel .planet.gone-right { pointer-events: none; }
.planets.carousel .planet.on { z-index: 1; }
.planets.carousel .planet.gone-left { z-index: 2; }
.planets.carousel .planet.gone-right { z-index: 0; }
.planets.carousel .planet .id,
.planets.carousel .planet p,
.planets.carousel .planet .data,
.planets.carousel .planet > dl { transition: opacity .45s var(--ease); }
.planets.carousel .planet.gone-left .id, .planets.carousel .planet.gone-left p,
.planets.carousel .planet.gone-left .data, .planets.carousel .planet.gone-left > dl,
.planets.carousel .planet.gone-right .id, .planets.carousel .planet.gone-right p,
.planets.carousel .planet.gone-right .data, .planets.carousel .planet.gone-right > dl { opacity: 0; }
.planets.carousel .planet.snap, .planets.carousel .planet.snap * { transition: none; }
/* A card whose shader linked splits in half: the globe holds the left, the
   words the right; without WebGL the card keeps its plain layout. */
.planets .planet .globe-slot { display: none; }
.planets.carousel .planet.has-globe { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px 56px; align-items: center; padding: 44px 0; }
.planets.carousel .planet.has-globe .globe-slot {
  display: block; grid-column: 1; grid-row: 1 / span 3;
  width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto;
}
.planets.carousel .planet.has-globe .id,
.planets.carousel .planet.has-globe p,
.planets.carousel .planet.has-globe .data,
.planets.carousel .planet.has-globe > dl { grid-column: 2; }
@media (max-width: 960px) {
  .planets.carousel .planet.has-globe { grid-template-columns: 1fr; }
  .planets.carousel .planet.has-globe .globe-slot { grid-row: 1; grid-column: 1; max-width: 320px; }
  .planets.carousel .planet.has-globe .id,
  .planets.carousel .planet.has-globe p,
  .planets.carousel .planet.has-globe .data,
  .planets.carousel .planet.has-globe > dl { grid-column: 1; }
}
.car-nav { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--line); }
.car-btn {
  width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 50%;
  background: none; color: var(--ink); font-size: 16px; cursor: pointer; flex: none;
  transition: border-color .2s, transform .2s var(--ease-out);
}
.car-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.car-tabs { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.car-tab {
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s;
}
.car-tab:hover { color: var(--ink); }
.car-tab[aria-current="true"] { color: var(--pc, var(--ink)); border-bottom-color: var(--pc, var(--ink)); }
.planet {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 32px; padding: 34px 0;
  border-bottom: 1px solid var(--line); position: relative;
}
.planet .id { display: flex; gap: 18px; align-items: flex-start; }
.planet .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 8px; background: var(--pc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 14%, transparent); position: relative; }
.planet .dot::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid var(--pc); opacity: .35; animation: breathe 6s ease-in-out infinite; }
.planet.off .dot { background: transparent; border: 1px dashed var(--pc); box-shadow: none; }
.planet.off .dot::after { display: none; }
.planet h3 { font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.planet .role { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); }
.planet .status { display: inline-block; margin-top: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hair); padding: 3px 8px; border-radius: 2px; }
.planet p { color: var(--text); font-size: 16.5px; max-width: 58ch; }
.planet p b { color: var(--ink); }
.planet dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; align-content: start; }
.planet dt { color: var(--muted); }
.planet dd { color: var(--ink); }
.planet.off p, .planet.off dd { color: var(--muted); }
.day { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.day .bar { position: relative; height: 4px; width: 100%; max-width: 240px; background: var(--bg-800); }
.day .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pc); width: 0; transition: width 1.4s .3s var(--ease-out); }
.day .bar u { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--muted); }
.in .day .bar i { width: var(--w); }
.people { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.people h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 18px; }
.people .intro { color: var(--text); font-size: 17px; }
.people ul { list-style: none; border-top: 1px solid var(--line); }
.people li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.people li b { color: var(--ink); font-size: 17px; }
.people li .st { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.people li.you .st { color: var(--accent); }
.tone { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
.tone p { font-family: var(--f-world); font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--text); max-width: 60ch; }
.tone p em { color: var(--ink); }

/* ── Facts ────────────────────────────────────────────────────────────── */
.facts { list-style: none; counter-reset: f; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.facts li .k { font-family: var(--f-mono); font-size: 13px; letter-spacing: .18em; color: var(--muted); padding-top: 8px; }
.facts li h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; }
.facts li p { color: var(--muted); font-size: 16.5px; max-width: 64ch; }
.facts li p b { color: var(--ink); }

/* ── What is not here ─────────────────────────────────────────────────── */
table.no { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
table.no th { text-align: left; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--line); }
table.no td { padding: 20px 32px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.no td:first-child { width: 34%; font-size: clamp(19px, 2vw, 25px); font-weight: 600; color: var(--ink); letter-spacing: -.015em; line-height: 1.2; }
/* The strike is a background on the word, not a bar placed over it. An
   absolutely positioned bar is laid out against the whole inline box, and a
   wrapped phrase makes that box two lines tall, so the bar lands in the gap
   between the lines instead of across the letters. Cloning the decoration
   hands every line fragment its own background, and each line is struck
   through on its own. */
table.no td:first-child span {
  background-image: linear-gradient(var(--danger), var(--danger));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .6s var(--ease-out);
}
table.no tr.in td:first-child span { background-size: 100% 2px; }
table.no td:last-child { color: var(--muted); font-size: 16px; }
table.no td:last-child b { color: var(--text); }
table.no tr { opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
table.no tr.in { opacity: 1; transform: none; }
.no-note { margin-top: 22px; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }

/* ── The interface: built like the client, and labelled as a mock ─────── */
.ui-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: start; }
.ui-text p { color: var(--text); font-size: 17px; margin-bottom: 16px; }
.ui-text .q { font-family: var(--f-world); font-size: 22px; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--accent); padding-left: 18px; margin: 26px 0; }
.ui-text .cap { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; line-height: 1.6; }
.shot {
  background: var(--bg-900); border: 1px solid var(--line); color: var(--text);
  font-family: var(--f-ui); font-size: 14px; line-height: 1.5; position: relative;
}
.shot * { box-sizing: border-box; }
.shot { overflow: hidden; }
.shot::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px); }
.shot::after { content: ""; position: absolute; left: 0; right: 0; top: -80px; height: 80px; pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent, rgba(158, 219, 255, .05), transparent); animation: scan 8s linear infinite; }
@keyframes scan { to { transform: translateY(1000px); } }
.shot .h { display: flex; gap: 12px 20px; align-items: baseline; flex-wrap: wrap; padding: 12px 16px 8px; border-bottom: 1px solid var(--line); }
.shot .who { font-weight: 700; color: var(--ink); }
.shot .where { color: var(--text); }
.shot .clock { color: var(--muted); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.shot .tabs { margin-left: auto; display: flex; gap: 14px; }
.shot .tabs span { color: var(--muted); }
.shot .tabs span.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.shot .frame { display: grid; grid-template-columns: 240px 1fr; gap: 12px; padding: 12px 16px 0; }
.shot .side { border: 1px solid var(--line); padding: 12px; }
.shot h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); font-weight: 600; padding-bottom: 5px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.shot .side h4 + h4 { margin-top: 14px; }
.shot .doing { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.shot .doing .t { color: var(--text); }
.shot .deadline { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.shot .deadline-bar { flex: 1; height: 2px; background: var(--bg-800); overflow: hidden; }
.shot .deadline-bar i { display: block; height: 2px; background: var(--muted); width: 100%; transition: width 1s linear; }
.shot .deadline.near .deadline-bar i { background: var(--warning); }
.shot .deadline.near .left { color: var(--warning); }
.shot .deadline.over .deadline-bar i { background: var(--danger); }
.shot .deadline.over .left { color: var(--danger); }
.shot .left { flex: none; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); min-width: 5.5ch; text-align: right; }
.shot .kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.shot .kv .num { color: var(--ink); }
.shot .here { font-size: 13px; color: var(--muted); }
.shot .here b { color: var(--accent); font-weight: 600; }
.shot .main { min-width: 0; }
.shot .row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.shot .sel { border: 1px solid var(--hair); background: var(--bg-800); padding: 4px 8px; border-radius: 2px; color: var(--ink); font-size: 13px; }
.shot .sel::after { content: " ▾"; color: var(--muted); }
.shot table.book { width: 100%; border-collapse: collapse; font-size: 13px; }
.shot table.book th { text-align: left; font-weight: normal; color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 6px; font-size: 12px; }
.shot table.book td { padding: 4px 6px; border-bottom: 1px solid var(--bg-800); }
.shot table.book td:nth-child(2) { text-align: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.shot table.book td.num { text-align: right; color: var(--ink); }
.shot table.book td:nth-child(2).num { text-align: center; }
.shot table.book tr.flash td { animation: flash 1.2s var(--ease-out); }
@keyframes flash { from { background: var(--bg-800); } to { background: transparent; } }
.shot .note { font-size: 12px; color: var(--muted); margin: 6px 0; }
.shot .b { border: 1px solid var(--hair); background: transparent; color: var(--ink); padding: 5px 10px; border-radius: 2px; font-size: 13px; cursor: default; }
.shot .b.quiet { color: var(--muted); }
.shot .chat { border-top: 1px solid var(--line); margin: 12px 16px 0; padding: 10px 0 12px; }
.shot .lines { height: 108px; overflow: hidden; border-bottom: 1px dashed var(--line); padding-bottom: 6px; display: flex; flex-direction: column; justify-content: flex-end; }
.shot .line { font-family: var(--f-world); font-size: 14px; margin: 3px 0; color: var(--text); animation: lineIn .5s var(--ease-out); }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shot .line b { color: var(--accent); font-weight: 600; }
.shot .line.action { font-style: italic; }
.shot .line.ooc { font-family: var(--f-ui); font-size: 13px; color: var(--muted); }
.shot .line.ooc b { color: var(--muted); }
.shot .say { display: flex; gap: 8px; margin-top: 8px; }
.shot .say .in { flex: 1; border: 1px solid var(--hair); background: var(--bg-800); padding: 5px 8px; border-radius: 2px; color: var(--muted); font-size: 13px; }
.shot .stamp { position: absolute; right: 12px; bottom: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── Not for you ──────────────────────────────────────────────────────── */
.nfy { list-style: none; border-top: 1px solid var(--line); counter-reset: n; }
.nfy li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(19px, 2vw, 26px); color: var(--ink); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.nfy li::before { counter-increment: n; content: counter(n, decimal-leading-zero); font-family: var(--f-mono); font-size: 13px; letter-spacing: .18em; color: var(--muted); font-weight: 400; padding-top: 8px; }
.nfy li span { color: var(--muted); font-weight: 400; font-size: .72em; display: block; margin-top: 4px; }
.nfy-note { margin-top: 26px; font-family: var(--f-world); font-size: 20px; color: var(--text); }

/* ── Where we are ─────────────────────────────────────────────────────── */
.status { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.status > div { padding: 32px 0; }
.status > div + div { border-left: 1px solid var(--line); padding-left: 48px; }
.status h3 { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 20px; }
.status ul { list-style: none; }
.status li { padding: 10px 0; border-bottom: 1px solid var(--bg-800); color: var(--text); font-size: 16px; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.status li::before { content: "—"; color: var(--hair); }
.status li b { color: var(--ink); }
.status .ahead li::before { content: "·"; color: var(--muted); }
.status .ahead li { color: var(--muted); }
.status .ahead li b { color: var(--text); font-weight: 500; }
.status-line { margin-top: 40px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.status-sub { margin-top: 12px; color: var(--muted); font-size: 16px; }

/* ── Money ────────────────────────────────────────────────────────────── */
.money { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.money .big { font-size: clamp(26px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: var(--ink); }
.money .big span { display: block; color: var(--muted); font-weight: 500; font-size: .5em; letter-spacing: 0; margin-top: 16px; }
.money p { color: var(--text); font-size: 17px; margin-bottom: 18px; }
.money p b { color: var(--ink); }
.money .none { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.money .none li { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--text); border: 1px solid var(--hair); padding: 6px 10px; border-radius: 2px; text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; }

/* ── Signup + FAQ ─────────────────────────────────────────────────────── */
.signup-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; }
form.signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 30px; }
form.signup input[type=email] {
  min-width: 0; height: 52px; background: var(--bg-900); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 2px; padding: 0 16px; font-size: 16px; outline: none;
  transition: border-color .2s;
}
form.signup input[type=email]::placeholder { color: var(--muted); }
form.signup input[type=email]:focus { border-color: var(--ink); }
form.signup .btn { height: 52px; }
.trap { position: absolute; left: -9999px; opacity: 0; }
.form-msg { grid-column: 1 / -1; font-size: 15px; min-height: 1.5em; margin-top: 4px; }
.form-msg.ok { color: var(--success); }
.form-msg.err { color: var(--danger); }
.form-note { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }
.form-msg a, .beside a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); transition: text-decoration-color .2s; }
.form-msg a:hover, .beside a:hover { text-decoration-color: var(--ink); }
.beside { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.band { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.band .note { color: var(--muted); font-size: 15px; max-width: 56ch; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; color: var(--ink); font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--muted); font-size: 18px; text-align: center; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 40px 18px 0; color: var(--muted); font-size: 16px; }
.faq .a b { color: var(--text); }

/* ── Footer, sticky call ──────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 32px 0 44px; }
footer .bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }
footer .bar a.ext { text-decoration: none; }
footer .bar a.ext:hover { color: var(--ink); }
footer .mark { height: 46px; width: auto; color: var(--muted); display: block; }
footer .bar .r { margin-left: auto; }

/* ── Multi-page: overview links and the subpage CTA ───────────────────── */
.sec-lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); transition: text-decoration-color .2s; }
.sec-lead a:hover { text-decoration-color: var(--ink); }
.cta-form { max-width: 620px; }
/* the band right under its own sec-head needs no second separator */
.band.solo { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Fine-pointer stagecraft: cursor ring, page transitions ───────────── */
.cursor {
  position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1px solid var(--ink); border-radius: 50%; pointer-events: none; z-index: 99;
  mix-blend-mode: difference; opacity: 0;
  transition: opacity .35s, width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out);
}
.cursor.live { opacity: .9; }
.cursor.hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
@media (pointer: coarse) { .cursor { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header.top { view-transition-name: site-header; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-18px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }
  ::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .planet { grid-template-columns: 240px minmax(0, 1fr); }
  .planet .data, .planet.off > dl { grid-column: 2; }
}
@media (max-width: 960px) {
  nav.jump { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .system { width: min(100%, 480px); margin: 0 auto; }
  .sec-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
  .sec-num { padding-top: 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 .cell + .cell { border-left: 0; padding-left: 0; }
  .cell { padding-right: 0; }
  .people, .ui-grid, .money, .signup-grid, .status { grid-template-columns: 1fr; }
  .status > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .tone { grid-template-columns: 1fr; }
  .acc-b { grid-template-columns: 1fr; }
  .acc-b .price { grid-column: 1; }
  .acc-h { grid-template-columns: 44px 1fr auto; gap: 12px; }
  .planet { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .planet .data, .planet.off > dl { grid-column: 1; }
  .facts li, .nfy li, .tone { grid-template-columns: 1fr; gap: 6px; }
  .facts li .k, .nfy li::before { padding-top: 0; }
  .people li { grid-template-columns: 1fr; gap: 6px; }
  .shot .frame { grid-template-columns: 1fr; }
  section.sec { padding: 72px 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 24px 0 32px; }
  h1 { font-size: clamp(30px, 9.6vw, 54px); }
  h1 .accent { font-size: min(1.3em, 50px); margin-bottom: 0.26em }
  header.top .bar { height: 58px; gap: 12px; }
  .brand svg { height: 34px; }
  form.signup { grid-template-columns: 1fr; }
  table.no { table-layout: fixed; }
  table.no td:first-child { width: 42%; padding-right: 14px; overflow-wrap: anywhere; font-size: 17px; }
  table.no td:last-child { font-size: 14.5px; }
  .system .lbl { font-size: 16px; }
  .system .lbl.name { font-size: 20px; }
  .shot .h .tabs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv, .rv-stag > *, table.no tr, .hero .lead, .hero .actions, .system { opacity: 1; transform: none; filter: none; }
  .sec-head.rv h1, .sec-head.rv h2 { font-weight: 700; }
  h1 .line > span { transform: none; }
  .grain { animation: none; }
}