/* Layout: one quiet reading column under a full-width night drawing; nav as a thin chalk line on top. */
:root {
  --night: #070908;      /* ground of the page */
  --ink: #e9ede4;        /* chalk */
  --dim: #8d978f;        /* secondary text */
  --faint: #2b322d;      /* rules, cells */
  --wash: #0f1411;       /* table stripes, boxes */
  --glow: #cdf53a;       /* Robinhood-green accent: valuation, live marks, fireflies */
  --down: #ff6b5e;       /* valuation falling */
  --serif: "Young Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hand: "Caveat", "Segoe Print", cursive;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--night); color: var(--ink); }
body { margin: 0; font: 15px/1.6 var(--sans); padding-inline: 16px; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--glow) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--glow); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 2px; }

.demo-banner { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; margin-inline: -16px; background: var(--glow); color: #0b0d07; text-align: center; font: 600 12px/1 var(--mono); letter-spacing: .06em; padding: 8px 16px; text-transform: uppercase; }

nav.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-block: 18px 10px; max-width: 1180px; margin: 0 auto; }
nav.top .mark { font: 400 22px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; margin-right: 10px; }
nav.top .mark span { color: var(--glow); }
nav.top a.l { font-size: 13px; color: var(--dim); text-decoration: none; }
nav.top a.l[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--glow); }
nav.top a.l:hover { color: var(--ink); }

main { max-width: 760px; margin: 0 auto; padding-block: 24px 96px; }
main.wide { max-width: 1180px; }
.col { max-width: 640px; margin-inline: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.1; }
h2 { font-size: 26px; line-height: 1.2; }
h3 { font-size: 19px; line-height: 1.3; }
p { margin: 0; }
.lede { font: italic 400 17px/1.5 var(--serif); color: var(--dim); }
.muted { color: var(--dim); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.label { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: 56px; }
.center { text-align: center; }
.empty { color: var(--dim); font-size: 13.5px; border-top: 1px solid var(--faint); padding-top: 12px; }

.pagehead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.val-chip { font: 500 12px var(--mono); color: var(--dim); white-space: nowrap; }
.val-chip b { color: var(--ink); font-weight: 600; }

/* land */
.valuation { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.valuation .big { font: 400 clamp(40px, 7vw, 58px)/1 var(--serif); font-variant-numeric: tabular-nums; transition: color .6s; }
.valuation .big.up { color: var(--glow); transition: none; }
.valuation .big.down { color: var(--down); transition: none; }
.chart { width: 100%; max-width: 560px; height: auto; display: block; margin: 8px auto 0; overflow: visible; }
.land-wrap { max-width: 1180px; margin: 22px auto 0; }
.land-wrap canvas { width: 100%; display: block; }
@media (max-width: 760px) {
  .land-wrap { overflow-x: auto; margin-inline: -16px; -webkit-overflow-scrolling: touch; }
  .land-wrap canvas { width: 780px; max-width: none; }
}
.caption { text-align: center; font-size: 12.5px; color: var(--dim); max-width: 560px; margin: 4px auto 0; }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 44px; }
.two > * { min-width: 0; }
.moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 44px; }
.moves h3 { font-size: 18px; }
.moves h3 i { font-style: normal; font-family: var(--hand); color: var(--glow); font-size: 19px; margin-left: 6px; }
.moves p { color: var(--dim); font-size: 14px; }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed li { font-size: 13.5px; color: var(--dim); display: flex; gap: 10px; }
.feed li b { color: var(--ink); font-weight: 600; }
.feed .when { font: 11.5px var(--mono); color: var(--dim); opacity: .7; white-space: nowrap; padding-top: 2px; }

.ledger { width: 100%; max-width: 420px; margin: 0 auto; border-collapse: collapse; font-size: 13px; }
.ledger td { padding: 7px 0; border-bottom: 1px solid var(--faint); }
.ledger td:last-child { text-align: right; font: 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.ledger td:first-child { color: var(--dim); }

.faq { display: flex; flex-direction: column; gap: 26px; text-align: center; }
.faq p { color: var(--dim); font-size: 14.5px; }
.closing { font: 400 22px/1.4 var(--serif); text-align: center; text-wrap: balance; }

/* tables */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.t th { text-align: left; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--faint); white-space: nowrap; }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--faint); vertical-align: top; }
table.t tr:nth-child(even) td { background: var(--wash); }
table.t td.n, table.t th.n { text-align: right; font-family: var(--mono); font-size: 12px; }
table.t td.mv { font-family: var(--mono); font-size: 12px; color: var(--glow); }
table.t a { font-family: var(--mono); font-size: 11.5px; }

pre.code { background: var(--wash); border: 1px solid var(--faint); border-radius: 4px; padding: 14px 16px; font: 12px/1.6 var(--mono); color: var(--ink); overflow-x: auto; margin: 0; }
blockquote.note { margin: 0; border-left: 2px solid var(--glow); padding: 4px 0 4px 18px; font: italic 400 16.5px/1.6 var(--serif); color: var(--ink); }

.diagram { width: 100%; height: auto; display: block; }
.diagram text { font-family: var(--mono); fill: var(--dim); font-size: 11px; }
.diagram .t1 { fill: var(--ink); font-size: 12px; }
.diagram .box { fill: var(--wash); stroke: var(--faint); }
.diagram .ln { stroke: var(--dim); fill: none; stroke-width: 1.2; }
.diagram .gl { stroke: var(--glow); fill: none; stroke-width: 1.4; }

.bar { display: flex; height: 26px; border: 1px solid var(--faint); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--dim); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.grid8 { display: grid; grid-template-columns: 120px repeat(8, minmax(34px, 1fr)); gap: 3px; font-size: 11px; min-width: 520px; }
.grid8 .h { font: 10.5px var(--mono); color: var(--dim); text-align: center; padding-bottom: 4px; }
.grid8 .r { font-size: 12px; color: var(--dim); display: flex; align-items: center; }
.grid8 .c { aspect-ratio: 1.4; border: 1px solid var(--faint); display: flex; align-items: center; justify-content: center; font: 11px var(--mono); color: var(--ink); border-radius: 2px; }

.toc { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.docs section { scroll-margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.docs p { color: color-mix(in srgb, var(--ink) 86%, var(--night)); }

.afford { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.afford > div { min-width: 0; }
.afford ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }

footer { max-width: 1180px; margin: 0 auto; padding-block: 28px 40px; border-top: 1px solid var(--faint); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font: 11.5px var(--mono); color: var(--dim); }

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  nav.top { gap: 6px 14px; }
  h2 { font-size: 23px; }
  .afford { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }