:root {
  --bg: #0d0d0b; --panel: #0a0a09;
  --ink: #ebeae3; --ink-2: #a9a89f; --ink-3: #6f6e66;
  --rule: rgba(235, 234, 227, 0.12); --rule-2: rgba(235, 234, 227, 0.26);
  --lime: #ccff00; --lime-2: #b5e600; --red: #ff7a6e; --amber: #f0c25a;
  --serif: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd, table { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
::selection { background: rgba(204, 255, 0, 0.3); }
section[id] { scroll-margin-top: 70px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
.label { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.lede { color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.up-c { color: var(--lime); }
.dn-c { color: var(--red); }
.scroll { overflow-x: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
h1 em { font-style: italic; color: var(--lime); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--rule-2); border-radius: 6px; background: none;
  font: 500 0.84rem var(--mono); white-space: nowrap; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--ink); }
.btn--lime { background: var(--lime); border-color: var(--lime); color: #0d0d0b; }
.btn--lime:hover { background: var(--lime-2); border-color: var(--lime-2); }
.btn--lg { padding: 12px 20px; font-size: 0.9rem; }
.btn--sm { padding: 6px 12px; font-size: 0.76rem; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* top bar */
.top { position: sticky; top: 0; z-index: 50; background: rgba(13, 13, 11, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.navbar { display: flex; align-items: center; gap: 24px; height: 60px; }

/* The wordmark is set in caps, tracked out, against the lowercase body. The
   tracking adds a trailing gap after the last letter, so it is pulled back to
   keep the word flush against the mark and the rule under the bar. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 400 1rem var(--sans); letter-spacing: -0.03em; }
.brand b { font: 700 1.02rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; margin-right: -0.18em; }
.mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--lime); color: #0d0d0b; }
/* The nav is the report's index, not a menu: a numbered run of sections
   divided by hairlines, the current one marked in lime on the bar's own rule.
   The pill it replaces hid the section numbers in a lozenge and gave the bar a
   second, competing border. */
.links { display: flex; align-items: stretch; gap: 0; margin-inline: auto; padding: 0; border: 0; background: none; }
.links a { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 15px; border-radius: 0; font: 400 0.8rem var(--mono); color: var(--ink-3); white-space: nowrap; transition: color 0.15s; }
.links a + a { border-left: 1px solid var(--rule); }
.links a i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.04em; color: var(--ink-3); transition: color 0.15s; }
.links a:hover { color: var(--ink); background: none; }
.links a:focus-visible { outline: 1px solid var(--lime); outline-offset: -1px; }
.links a.is-active { color: var(--lime); background: none; }
.links a.is-active i { color: var(--lime); opacity: 0.55; }
.links a.is-active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: -1px; height: 1px; background: var(--lime); }
.links .btn { border-radius: 6px; }
.links .btn--ghost:hover { background: none; }
.links .btn--lime { background: var(--lime); }
.links .btn--lime:hover { background: var(--lime-2); }
.crumb { font: 400 0.74rem var(--mono); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 1100px) { .crumb { display: none; } }
.links__foot { display: none; }
.links .btn { padding: 12px 16px; font: 500 0.86rem var(--mono); color: var(--ink); }
.links .btn::after { display: none; }
.links .btn--lime, .links .btn--lime:hover { color: #0d0d0b; }
.bar__cta { display: flex; align-items: center; gap: 8px; flex: none; }
.bar__cta .btn { padding: 7px 13px; font-size: 0.78rem; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.burger { display: none; width: 38px; height: 38px; padding: 0; place-items: center; gap: 4px; border: 1px solid var(--rule-2); border-radius: 6px; background: none; cursor: pointer; }
.burger span { display: block; width: 14px; height: 1.5px; background: var(--ink); transition: transform 0.2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

@media (max-width: 1100px) {
  .navbar { height: 58px; gap: 12px; }
  /* The bar is a flex row whose middle is display:none here, so the trailing
     controls have nothing left to be pushed by. margin-left:auto is what keeps
     them at the right edge instead of collapsing onto the wordmark. */
  .bar__cta { margin-left: auto; }
  .links { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px 20px; max-height: calc(100vh - 58px); overflow-y: auto; background: #0d0d0b; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .links.is-open { display: flex; }
  .links a { padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
  .links a i { display: inline-block; width: 30px; }
  .links a + a { border-left: 0; }
  .links a.is-active { color: var(--lime); background: none; }
  .links a::after { display: none; }
  .links__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .links .btn { justify-content: center; border: 1px solid var(--rule-2); padding: 12px 16px; }
  .bar__cta .btn--ghost { display: none; }
  .bar__cta .btn--lime { padding: 7px 12px; font-size: 0.76rem; }
  .burger { display: flex; flex-direction: column; align-items: center; justify-content: center; }
}

/* ticker */
.tape { overflow: hidden; border-block: 1px solid var(--rule); }
.tape__track { display: flex; width: max-content; padding: 11px 0; font: 400 0.72rem var(--mono); color: var(--ink-3); white-space: nowrap; animation: tape 90s linear infinite; }
.tape__grp { display: flex; flex: none; align-items: center; justify-content: space-around; gap: 44px; min-width: 100vw; padding-inline: 22px; box-sizing: border-box; }
.tape b { color: var(--ink); font-weight: 500; }
.tape .up { color: var(--lime); }
.tape em { color: var(--red); font-style: normal; }
@keyframes tape { to { transform: translateX(-50%); } }

/* hero */
/* The hero paints its own ground, so it has to own a stacking context: with only
   position: relative, a z-index: -1 child escapes into the root context and is
   painted underneath body's opaque background, which hides it completely.
   isolation: isolate keeps the ground inside this section, above the page. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 56px); }

/* The hero ground. Six layers on one pseudo-element: film grain on top, a
   schematic of the loop's own activity beneath it, a faint engineering grid, two
   slow radial spots, and a hairline horizon on ::after. The grid and spots are
   gradients rather than files, so they never blur; the schematic is SVG, so it
   stays sharp at any height and costs 1.6 KB gzipped. The schematic is masked to
   the edges of the section, which is where its marks were composed to sit — the
   type column in the middle stays clean. */
.hero::before {
  content: ""; position: absolute; inset: -1px calc(50% - 50vw); z-index: -1;
  pointer-events: none;
  background-image:
    url("/static/plates/grain.png"),
    url("/static/plates/hero-diagram.svg"),
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px),
    radial-gradient(120% 90% at 22% 18%, rgba(204, 255, 0, 0.055) 0%, rgba(204, 255, 0, 0) 55%),
    radial-gradient(90% 70% at 82% 88%, rgba(235, 234, 227, 0.05) 0%, rgba(235, 234, 227, 0) 60%);
  background-size: 96px 96px, 100% 100%, 88px 88px, 88px 88px, 100% 100%, 100% 100%;
  background-position: 0 0, center, -1px -1px, -1px -1px, 0 0, 0 0;
  background-repeat: repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(115% 105% at 50% 40%, #000 0%, #000 52%, transparent 100%);
          mask-image: radial-gradient(115% 105% at 50% 40%, #000 0%, #000 52%, transparent 100%);
}
/* The horizon: one hairline through the section, brighter at the centre, so the
   grid has a subject rather than being wallpaper. */
.hero::after {
  content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw);
  top: 58%; height: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, transparent 0%, var(--rule-2) 22%, rgba(235, 234, 227, 0.42) 50%, var(--rule-2) 78%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 400% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 400% at 50% 50%, #000 0%, transparent 100%);
}
.hero > * { position: relative; }

.kicker { font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.hero h1 { margin: 18px 0 22px; max-width: 13ch; }
.abstract { max-width: 58ch; padding-left: 16px; border-left: 2px solid var(--lime); color: var(--ink-2); font-size: 1.02rem; }
.abstract span { display: block; margin-bottom: 4px; font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.byline { margin-top: 18px; font: 400 0.76rem var(--mono); color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.stats > div { padding: 16px 16px 0 0; }
.stats dt { font: 500 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin-top: 6px; font: 500 1.5rem var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats dd.lime { color: var(--lime); }
.unit { margin-left: 2px; font-size: 0.6em; color: var(--ink-3); }

/* plates: rasterised schematics, one colour, no transparency */
.plate { margin: 0; border: 1px solid var(--rule-2); background: var(--panel); overflow: hidden; }
.plate img { display: block; width: 100%; height: auto; filter: contrast(1.04); }
.plate figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 9px 14px; border-top: 1px solid var(--rule); font: 400 0.72rem var(--mono); color: var(--ink-3); }
.plate figcaption > span:first-child { color: var(--lime); }
.plate--wide { margin-bottom: 32px; }
.plate--square { margin-top: 4px; }

/* figures */
.fig { padding: 16px 18px 14px; border: 1px solid var(--rule-2); background: var(--panel); }
.fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; font: 400 0.78rem var(--mono); color: var(--ink-2); }
.fig figcaption > span:first-child { color: var(--lime); }
.fig figcaption i { font-style: normal; color: var(--ink-3); }
.eq { font: 500 1.7rem/1.1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.eq small { margin-left: 8px; font-size: 0.8rem; font-weight: 400; color: var(--lime); }
.legend { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 1px; }
.sw--up { background: var(--lime); }
.sw--dn { background: var(--red); }
.sw--ma { width: 12px; height: 2px; border-radius: 0; background: rgba(235, 234, 227, 0.7); }
.ohlc { display: flex; flex-wrap: wrap; gap: 4px 16px; min-height: 1.5em; margin: 0 0 10px; font: 400 0.74rem/1.5 var(--mono); color: var(--ink-3); }
.ohlc b { font-weight: 500; color: var(--ink); }
.candles { position: relative; width: 100%; min-height: 128px; }
.candles svg { width: 100%; height: auto; cursor: crosshair; touch-action: pan-y; }

/* Fig. 1: the ceiling and the room under it. The SVG is drawn non-uniformly
   (preserveAspectRatio="none") because the line only has to span the column
   width; the point markers are drawn as circles of a fixed radius, which stay
   round because the viewBox matches the CSS pixel box exactly. */
.envelope { position: relative; width: 100%; margin-top: 14px; }
.envelope svg { display: block; width: 100%; height: auto; overflow: visible; }
.envelope .ax { font: 400 10px var(--mono); fill: var(--ink-3); }
.envelope .ax--warn { fill: var(--red); font-weight: 500; }
.ax { font: 400 11px var(--mono); fill: var(--ink-3); }
.ax.on { fill: #0d0d0b; font-weight: 600; }
.cap { margin-top: 12px; font: 400 0.72rem/1.5 var(--mono); color: var(--ink-3); }
.trace { margin-top: 14px; border-top: 1px solid var(--rule); }
.trace li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); font: 400 0.8rem var(--mono); }
.tag { padding: 2px 6px; border: 1px solid var(--rule-2); border-radius: 3px; font: 500 0.64rem var(--mono); color: var(--lime); letter-spacing: 0.04em; }
.tag--short { color: var(--red); border-color: rgba(255, 122, 110, 0.4); }
.log { margin-top: 12px; font: 400 0.72rem/1.6 var(--mono); color: var(--ink-3); }
.log b { font-weight: 400; color: var(--lime); }

/* sections */
.sec { padding: clamp(64px, 8vw, 104px) 0; }
.sh { display: grid; gap: 14px; max-width: 700px; margin-bottom: 44px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.sec-no { font: 500 0.72rem var(--mono); letter-spacing: 0.1em; color: var(--lime); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.two > div { min-width: 0; }
.two h2 { margin: 12px 0 14px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.steps li { padding: 22px 26px 8px; border-left: 1px solid var(--rule); }
.steps li:first-child { padding-left: 0; border-left: 0; }
.k { display: block; margin-bottom: 18px; font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 0.92rem; text-wrap: pretty; }

.tcap { margin-bottom: 12px; font: 500 0.7rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tcap b { font-weight: 500; color: var(--lime); }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th, .tbl td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tbl thead th { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink-3); font: 500 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tbl tbody th { width: 36%; font-weight: 500; color: var(--ink); }
.tbl td { color: var(--ink-2); }
.tbl .num { font: 500 0.9rem var(--mono); color: var(--ink); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tbl .num small { font-size: 0.72em; color: var(--ink-3); }
.tbl .note { font-size: 0.8rem; color: var(--ink-3); }
.tbl .lime { color: var(--lime); }
.bar { height: 4px; min-width: 90px; background: var(--rule); }
.bar i { display: block; height: 100%; background: var(--lime); }
.bar--warn i { background: var(--amber); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font: 400 0.76rem var(--mono); }
.kill { padding: 4px 10px; border: 1px solid rgba(255, 122, 110, 0.45); border-radius: 3px; color: var(--red); }

.notes li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--rule); }
.notes .n { font: 500 0.78rem var(--mono); color: var(--lime); padding-top: 4px; }
.notes p { color: var(--ink-2); font-size: 0.92rem; }
.notes h3 { margin-bottom: 6px; }
.venues { margin-top: 24px; font: 400 0.8rem/1.7 var(--mono); color: var(--ink-2); }
.venues span { display: block; margin-bottom: 4px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq__list { counter-reset: q; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { counter-increment: q; content: "Q" counter(q, decimal-leading-zero); font: 500 0.74rem var(--mono); color: var(--lime); }
.faq summary::after { content: "+"; font: 400 1rem var(--mono); color: var(--ink-3); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--lime); }
.faq details p { padding: 0 30px 20px 52px; color: var(--ink-2); font-size: 0.92rem; text-wrap: pretty; }

/* terminal cta */
.term { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--rule-2); background: var(--panel); }
.prompt { font: 400 0.78rem var(--mono); color: var(--lime); }
.term h2 { margin: 12px 0 14px; }
.form { display: grid; gap: 10px; }
.field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--bg); }
.field:focus-within { border-color: var(--lime); }
.field span { font: 400 0.9rem var(--mono); color: var(--lime); }
.field input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: none; background: none; font: 400 0.9rem var(--mono); }
.field input::placeholder { color: var(--ink-3); }
.form.is-bad .field { border-color: var(--red); }
.form .btn { width: 100%; justify-content: center; }
.form__note { font: 400 0.74rem var(--mono); color: var(--ink-3); }
.form__note.ok { color: var(--lime); }
.form__note.bad { color: var(--red); }

/* footer */
.foot { overflow: hidden; border-top: 1px solid var(--rule-2); font: 400 0.8rem var(--mono); }
.foot__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 44px 0; border-bottom: 1px solid var(--rule); }
.foot__lead { max-width: 30ch; margin-top: 10px; font: 400 clamp(1.3rem, 2.4vw, 1.8rem)/1.25 var(--serif); letter-spacing: -0.01em; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.8fr)); gap: 28px; padding: 40px 0; }
.foot h4 { margin: 0 0 12px; font: 500 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.foot nav { display: grid; gap: 9px; align-content: start; }
.foot nav a, .foot__socials a { color: var(--ink-2); }
.foot nav a:hover, .foot__socials a:hover { color: var(--lime); }
.foot__brand p { max-width: 36ch; margin-top: 14px; font: 400 0.84rem/1.6 var(--sans); color: var(--ink-3); }
.foot__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.foot__socials a { padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: 5px; font: 500 0.72rem var(--mono); }
.foot__socials a:hover { border-color: var(--lime); }
.foot__word { margin: 0; padding-top: 8px; font: 600 clamp(5rem, 19vw, 14rem)/0.82 var(--sans); letter-spacing: -0.06em; color: rgba(235, 234, 227, 0.06); white-space: nowrap; text-align: center; user-select: none; }
.foot__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 26px; padding-block: 18px 28px; font-size: 0.72rem; color: var(--ink-3); }
.foot__bottom::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: var(--rule); }
.foot__bottom p { max-width: 70ch; line-height: 1.6; }
.foot__bottom a:hover { color: var(--lime); }

/* sign-in dialog */
/* The dialog is the one place a visitor commits to something, so it carries its
   own instrument: an order book whose two walls meet just above the primary
   action. It is a real dialog, so it keeps the native focus trap, Escape and
   backdrop. Corners are square on purpose — the card is a panel, not a pill. */
.auth { width: min(388px, calc(100vw - 28px)); max-height: calc(100vh - 28px); margin: auto; padding: 0; border: 1px solid rgba(235, 234, 227, 0.16); border-radius: 0; background: #0e0e0c; color: var(--ink); overflow: auto; box-shadow: 0 32px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6); }
.auth::backdrop { background: radial-gradient(120% 100% at 50% 40%, rgba(5, 5, 4, 0.82), rgba(5, 5, 4, 0.94)); -webkit-backdrop-filter: blur(9px) saturate(0.85); backdrop-filter: blur(9px) saturate(0.85); }
.auth[open] { animation: authIn 0.26s cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes authIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

/* The depth plate. Drawn at the card's own 388×470 aspect so the two book
   walls always meet in the same place: each one descends from a top corner
   toward the spread, and the spread lands just above the wallet button. */
.auth__card { position: relative; isolation: isolate; padding: 24px 24px 22px; }
.auth__art { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: #0e0e0c url("/static/plates/access.svg") no-repeat center top / cover; }
.auth__art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14, 14, 12, 0) 0%, rgba(14, 14, 12, 0.18) 26%, rgba(14, 14, 12, 0.72) 52%, #0e0e0c 74%); }

.auth__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.auth__brand { font: 500 0.68rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.auth__x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(235, 234, 227, 0.2); border-radius: 8px; background: rgba(14, 14, 12, 0.5); color: var(--ink-2); font: 400 1rem var(--mono); line-height: 1; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.auth__x:hover { color: var(--ink); border-color: var(--ink-2); background: rgba(235, 234, 227, 0.06); }
.auth__title { margin: 0 0 10px; font: 400 clamp(1.6rem, 4vw, 1.85rem)/1.12 var(--serif); letter-spacing: -0.015em; }
.auth__sub { margin-bottom: 26px; max-width: 34ch; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }

/* The wallet button is the primary action and the only filled surface, so it
   carries the lime. Everything else is a hairline. */
.auth__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 14px; border: 1px solid rgba(235, 234, 227, 0.18); border-radius: 10px; background: rgba(14, 14, 12, 0.55); color: var(--ink); font: 500 0.9rem var(--sans); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.12s; }
.auth__opt:hover { border-color: rgba(235, 234, 227, 0.4); background: rgba(235, 234, 227, 0.05); }
.auth__opt:active { transform: translateY(1px); }
.auth__opt:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.auth__ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid rgba(235, 234, 227, 0.18); border-radius: 7px; color: var(--ink-2); }
.auth__opt--wallet { min-height: 62px; margin-bottom: 18px; background: var(--lime); border-color: var(--lime); color: #0d0d0b; box-shadow: 0 8px 26px -12px rgba(204, 255, 0, 0.5); }
.auth__opt--wallet:hover { background: var(--lime-2); border-color: var(--lime-2); }
.auth__opt--wallet .auth__ico { border-color: rgba(13, 13, 11, 0.28); color: #0d0d0b; }
.auth__opt-text { display: grid; gap: 2px; min-width: 0; }
.auth__opt-text b { font: 600 0.94rem var(--sans); }
.auth__opt-text em { font: 400 0.72rem var(--mono); font-style: normal; opacity: 0.62; }
.auth__chev { margin-left: auto; font: 400 1rem var(--mono); opacity: 0.55; transition: transform 0.15s, opacity 0.15s; }
.auth__opt--wallet:hover .auth__chev { transform: translateX(3px); opacity: 0.9; }

.auth__or { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 400 0.64rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: rgba(235, 234, 227, 0.12); }
.auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.auth__opt--half { justify-content: center; height: 44px; font-size: 0.84rem; }

.auth__email { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; margin-top: 8px; }
.auth__email input { min-width: 0; height: 44px; padding: 0 13px; border: 1px solid rgba(235, 234, 227, 0.18); border-radius: 10px; background: rgba(14, 14, 12, 0.6); color: var(--ink); font: 400 0.86rem var(--mono); outline: none; transition: border-color 0.15s; }
.auth__email input::placeholder { color: var(--ink-3); }
.auth__email input:focus { border-color: rgba(235, 234, 227, 0.45); }
.auth__send { display: grid; place-items: center; height: 44px; padding: 0; border: 1px solid rgba(235, 234, 227, 0.18); border-radius: 10px; background: none; color: var(--ink); font: 400 1rem var(--mono); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.auth__send:hover { border-color: var(--lime); color: var(--lime); }

.auth__addr { margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(204, 255, 0, 0.32); border-radius: 10px; background: rgba(204, 255, 0, 0.05); font: 400 0.84rem var(--mono); color: var(--lime); word-break: break-all; }
.auth__enter { width: 100%; justify-content: center; }
.auth__state { min-height: 1.5em; margin-top: 14px; font: 400 0.75rem/1.5 var(--mono); color: var(--ink-3); }
.auth__state.ok { color: var(--lime); }
.auth__state.bad { color: var(--red); }
.auth__state.bad::before { content: "! "; }
.auth__legal { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(235, 234, 227, 0.09); font: 400 0.66rem/1.6 var(--mono); color: var(--ink-3); }
.auth__legal span { padding: 1px 6px; border: 1px solid rgba(235, 234, 227, 0.16); border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 420px) {
  .auth__card { padding: 22px 20px 20px; }
  .auth__art { background-position: center top; background-size: cover; }
}

/* responsive */
@media (max-width: 960px) {
  .hero, .two, .faq, .term { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 22px 0 8px; border-left: 0; border-top: 1px solid var(--rule); }
  .steps li:first-child { border-top: 0; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wrap { padding-inline: 20px; }
  .foot__bottom::before { left: 20px; right: 20px; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .foot__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ticker refinement */
.tape { display: flex; align-items: stretch; min-height: 42px; overflow: hidden; border-block: 1px solid var(--rule); background: #0f0f0d; }
.tape__label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--rule); background: var(--bg); font: 500 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; position: relative; z-index: 1; }
.tape__win { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
/* The duration here is only a fallback for the frame before landing.js measures
   the track; the script sets the real value from the track's width. Keep the two
   in the same order of magnitude so the strip does not visibly change speed once
   the script runs. */
.tape__track { display: flex; width: max-content; padding: 12px 0; font: 400 0.74rem var(--mono); color: var(--ink-3); white-space: nowrap; animation: tape 90s linear infinite; }
.tape:hover .tape__track { animation-play-state: paused; }
.tape__grp { display: flex; flex: none; align-items: center; min-width: 0; padding: 0; gap: 0; justify-content: flex-start; box-sizing: border-box; }
.tk { position: relative; display: flex; align-items: center; gap: 9px; padding: 0 44px 0 0; }
.tk::after { content: ""; position: absolute; right: 20px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--rule-2); }
.tk b { font-weight: 500; color: var(--ink); }
.tk i { font-style: normal; }
.tk .up { color: var(--lime); }
.tk .dn { color: var(--red); }
.tk .m { color: var(--ink-2); }