/* Long-Term Capital Management: AI agents trading options. Dark editorial, Courier New for every number and label, one
   column, five sections: Profit and Running, the balance, the agents live, the positions, the swarm. No webfont, no
   external request. */
:root {
  color-scheme: dark;
  --background: #171916;
  --surface: #1e211c;
  --ink: #eceee6;
  --muted: #a6ad9d;
  --faint: #7f8777;
  --line: #363d31;
  --accent: #d4ab72;
  --positive: #bfd09f;
  --negative: #e3a292;
  --tone-thought: #cfd6c4;
  --mono: 'Courier New', Courier, monospace;
  --sans: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--background);
  font-family: var(--sans);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--background); }
[hidden] { display: none !important; }
.page { width: min(920px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 72px; }

h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 500; letter-spacing: -1.8px; line-height: 1.06; margin: 0; }
h2, h3 { margin: 0; font-weight: 500; }
section { min-width: 0; }
.block { padding: 40px 0 0; }
.section-title { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 1px; color: var(--ink); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.empty-state { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 12px 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pulse { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
@keyframes blink { to { opacity: 0; } }
@keyframes arrive { from { background: rgba(212, 171, 114, .10); } to { background: transparent; } }
@keyframes wash-up { from { background: rgba(191, 208, 159, .18); } to { background: transparent; } }
@keyframes wash-down { from { background: rgba(227, 162, 146, .18); } to { background: transparent; } }
.wash-up { animation: wash-up 1.6s ease-out; } .wash-down { animation: wash-down 1.6s ease-out; }
.tag { display: inline-block; padding: 0 5px; border: 1px solid var(--line); font: 9px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .6px; color: var(--muted); white-space: nowrap; cursor: help; }
.tag-real { color: var(--accent); border-color: #6b5836; }
.tag-practice, .tag-shadow { border-style: dashed; }
.tag-band { color: var(--tone-thought); }
.tag-retired { opacity: .7; }
.tag-incubator, .tag-tuition { color: var(--accent); border-style: dotted; }

/* 1. Profit and Running. */
.navigation { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 22px 0 0; font: 11px/1.8 var(--mono); }
.navigation a { color: var(--muted); text-decoration: none; }
.navigation a:hover { color: var(--ink); }
.masthead { padding: 48px 0 0; }
.lede { margin: 12px 0 0; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.5; color: var(--muted); }
.numbers { display: flex; flex-wrap: wrap; gap: 18px 80px; margin: 36px 0 0; }
.number { min-width: 0; }
.number[title] dt { cursor: help; }
.number dt { font: 11px/1.6 var(--mono); color: var(--muted); letter-spacing: .4px; text-transform: uppercase; }
.number dd { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; }
.number-value { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -1.4px; line-height: 1.1; white-space: nowrap; }
.number-tick { font: 15px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 2. The balance over the whole record. */
.account { padding-top: 36px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 26px; font: 11px/1.6 var(--mono); }
.chart-label { color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.chart-balance { color: var(--ink); font-size: 13px; cursor: help; }
.balance { margin: 0; }
.balance-plot { position: relative; height: 230px; touch-action: pan-y; }
.balance-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.balance-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.balance-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.balance-area { fill: var(--ink); opacity: .07; }
.balance-cross { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.balance-y { position: absolute; left: 0; transform: translateY(-100%); padding-bottom: 3px; font: 10px/1.4 var(--mono); color: var(--faint); pointer-events: none; }
.balance-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--background); pointer-events: none; }
.balance-mark { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--background); pointer-events: none; }
.balance-mark-open { background: var(--background); box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 3.5px var(--background); }
.balance-deposit-left { transform: translate(calc(-100% - 8px), 6px) !important; }
.balance-deposit { position: absolute; transform: translate(8px, 6px); font: 10px/1.4 var(--mono); color: var(--faint); white-space: nowrap; pointer-events: none; }
.balance-readout { position: absolute; top: -28px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 1px 7px; border: 1px solid var(--line); background: var(--surface); font: 11px/1.6 var(--mono); white-space: nowrap; pointer-events: none; z-index: 1; }
.balance-x { position: relative; height: 22px; font: 10px/1 var(--mono); color: var(--faint); }
.balance-x span { position: absolute; top: 9px; transform: translateX(-50%); white-space: nowrap; }
.balance-x span:last-child:not(:first-child) { transform: translateX(-100%); }

/* 3. The agents, live. */
.live-status { display: inline-flex; align-items: center; gap: 7px; font: 11px/1.6 var(--mono); color: var(--muted); text-transform: none; letter-spacing: .3px; }
.live-status .pulse { width: 8px; height: 8px; background: var(--muted); animation: none; }
.live-live .pulse { background: var(--positive); animation: pulse 2.4s ease-in-out infinite; }
.live-live .status-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live-stopped { color: var(--negative); }
.live-stopped .pulse { background: var(--negative); }
.stream-window {
  height: 540px; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; background: var(--surface); border: 1px solid var(--line);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.stream { list-style: none; margin: 0; padding: 0 0 64px; }
.stream-empty { padding: 18px 0; margin: 0; }
.entry { padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.entry-name { padding: 0; border: 0; background: none; color: var(--ink); font: 500 14px/1.4 var(--sans); letter-spacing: -.1px; text-align: left; }
button.entry-name { cursor: pointer; }
button.entry-name:hover { color: var(--accent); }
.entry-when { margin-left: auto; font: 11px/1.6 var(--mono); color: var(--faint); white-space: nowrap; cursor: help; }
.entry-text { margin: 7px 0 0; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.stream > .entry-note:first-child .entry-words::after { content: '▍'; color: var(--accent); margin-left: 2px; animation: blink 1s steps(2) infinite; }
.entry-trade { padding-left: 14px; border-left: 2px solid var(--accent); margin-left: -16px; }
.entry-trade .entry-words { color: var(--accent); }
.entry-why { color: var(--ink); }
.entry-pnl { font: 13px/1.5 var(--mono); font-weight: 400; }
.entry-news { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; }
.entry-news .entry-text { flex: 1 1 auto; margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.entry-news .entry-name { font-size: 13px; }
.entry-new { animation: arrive 2.4s ease-out; }

/* 4. Every real position, adding up to Profit. */
.ledger-group { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.ledger-list + .ledger-group { margin-top: 28px; }
.ledger-group h3 { font: 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.ledger-sum { font: 12px/1.6 var(--mono); white-space: nowrap; color: var(--ink); }
.ledger-sum.positive { color: var(--positive); } .ledger-sum.negative { color: var(--negative); }
.ledger-list { list-style: none; margin: 0; padding: 0; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pos-main { min-width: 0; }
.pos p { margin: 0; }
.pos-what { font-size: 16px; line-height: 1.4; color: var(--ink); }
.pos-why { margin-top: 8px !important; font-size: 16px; line-height: 1.5; color: var(--accent); overflow-wrap: anywhere; }
.pos-close-why { color: var(--muted); font-size: 14px; }
.pos-thesis { margin-top: 6px !important; max-width: 660px; font-size: 14px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
.pos-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px !important; font: 11px/1.6 var(--mono); color: var(--faint); }
.pos-who { padding: 0; border: 0; background: none; color: var(--ink); font: 13px/1.4 var(--sans); }
button.pos-who { cursor: pointer; }
button.pos-who:hover { color: var(--accent); }
.pos-result { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.pos-pnl { font: 16px/1.4 var(--mono); white-space: nowrap; }
.pos-status { display: inline-flex; align-items: center; gap: 6px; font: 11px/1.6 var(--mono); color: var(--faint); white-space: nowrap; }
.pos-open .pos-status { color: var(--accent); }
.pos-status .pulse { width: 6px; height: 6px; }
.pos-house { display: block; padding: 0; }
.pos-fold summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline; padding: 16px 0; cursor: pointer; list-style: none; }
.pos-fold summary::-webkit-details-marker { display: none; }
.pos-fold summary .pos-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pos-fold summary .pos-what { font-size: 14px; color: var(--muted); }
.pos-fold summary .pos-what::after { content: ' ▸' / ''; font-size: 10px; }
.pos-fold[open] summary .pos-what::after { content: ' ▾' / ''; }
.pos-fold summary:hover .pos-what { color: var(--ink); }
.pos-fold summary .pos-meta { margin: 0 !important; }
.pos-fold summary .pos-pnl { font-size: 13px; }
.fold-list { list-style: none; margin: 0; padding: 0 0 14px; }
.fold-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; padding: 4px 0; font: 11px/1.6 var(--mono); color: var(--faint); }
.fold-what { color: var(--muted); }
.fold-pnl { text-align: right; white-space: nowrap; }
.pos-earlier, .pos-marks { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 0; font-size: 14px; color: var(--muted); }
.pos-marks { cursor: help; }
.pos-earlier .pos-pnl, .pos-marks .pos-pnl { font-size: 13px; }
.ledger-line, .ledger-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ledger-line { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); cursor: help; }
.ledger-total { padding: 14px 0 0; font-size: 15px; color: var(--ink); }
.ledger-total .ledger-sum { font-size: 16px; }

/* 5. The swarm on the game's five steps, as a staircase: wide Train at the bottom, narrow Sized at the top. The page
   sets each step's width (`--step`, and `--step-narrow` for the phone layout) and the stylesheet holds a least width
   under it (`--least`), so three dots always fit a step. Hairlines and no fill: gold is the one line, and the outlines,
   numerals and dots of real money. */
.ladder, .ladder-real { display: flex; flex-direction: column; align-items: flex-start; }
/* The threshold: the brightest mark of the board. It is the bottom edge of Probe and the top edge of Practice. */
.ladder-real { width: 100%; border-bottom: 2px solid var(--accent); }
.ladder-floor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 16px; width: 100%; margin-top: -1px; }
.ladder-real + .rung { border-top: 0; }
/* Its label sits on the line, just right of the two steps above it. */
.ladder-real-mark { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 5px; font: 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .6px; color: var(--accent); white-space: nowrap; cursor: help; }
.ladder-real-caret { flex: none; width: 9px; height: 6px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rung { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; width: var(--step, 100%); min-width: var(--least, 0px); max-width: 100%; min-height: 54px; padding: 6px 14px; border: 1px solid var(--line); }
.rung + .rung { margin-top: -1px; }
.rung-5 { --least: 282px; } .rung-4 { --least: 306px; } .rung-3 { --least: 330px; } .rung-2 { --least: 354px; }
.rung-name { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: nowrap; cursor: help; }
.rung-vacant .rung-name { color: var(--muted); }
.reached-count { grid-column: 3; font: 12px/1.4 var(--mono); color: var(--ink); white-space: nowrap; cursor: help; }
.rung-real { border-color: #6b5836; }
.rung-real .reached-count { color: var(--accent); }
/* Nobody stands on it and nobody is known to have reached it: a dashed outline. Its bottom edge is the step under it. */
.rung-hollow { border-style: dashed; }
.rung-hollow:not(:last-child) { border-bottom-color: transparent; }
.rung-hollow .reached-count { color: var(--faint); }
/* Probe stands on the line: its bottom edge is the line itself (and still closes it if the label ever wraps under it). */
.ladder-floor .rung { flex: none; margin-bottom: -1px; border-bottom-color: var(--accent); }
.agent-dots { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.agent-dot { position: relative; flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--muted); }
.agent-progress-ring { position: absolute; inset: 4px; width: 32px; height: 32px; overflow: visible; fill: none; stroke-width: 1.7; pointer-events: none; transform: rotate(-90deg); }
.agent-progress-track { stroke: var(--line); }
.agent-progress-fill { stroke: var(--accent); stroke-linecap: round; }
.agent-dot-core { position: relative; display: block; width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .16s ease; pointer-events: none; }
.agent-activity { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px solid var(--tone-thought); border-radius: 50%; pointer-events: none; animation: agent-activity .85s ease-out both; }
.activity-trade { border-color: var(--accent); }
@keyframes agent-activity { from { transform: scale(.65); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
/* Dotted gold is small real money; filled is a level earned; dashed is shadow (a validated agent that practised too). */
.level-validation { color: var(--tone-thought); }
.level-tuition, .level-incubator { color: var(--accent); }
.level-tuition .agent-dot-core, .level-incubator .agent-dot-core { border-style: dotted; }
.level-practice .agent-dot-core, .dot-practising .agent-dot-core { border-style: dashed; }
.level-candidate { color: var(--tone-thought); }
.level-candidate .agent-dot-core { background: var(--tone-thought); }
.level-probe, .level-sized { color: var(--accent); }
.level-probe .agent-dot-core { width: 14px; height: 14px; background: var(--accent); }
.level-sized .agent-dot-core { width: 18px; height: 18px; background: var(--accent); }
.dot-retired .agent-dot-core { width: 9px; height: 9px; }
/* The stream's speaker, while it is deciding: its core breathes in the live green. */
.dot-speaking { color: var(--positive); }
.dot-speaking .agent-dot-core { animation: pulse 2.4s ease-in-out infinite; }
.agent-dot:hover .agent-dot-core, .agent-dot[aria-expanded="true"] .agent-dot-core { transform: scale(1.2); }
/* The open dot's halo hugs its ring, clear of the step's outline and of its name; so does the keyboard's focus ring. */
.agent-dot[aria-expanded="true"]::before { content: ''; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface); pointer-events: none; }
.agent-dot:focus-visible { outline-offset: -2px; }
.agent-detail { margin-top: 16px; }
.agent-detail-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); }
.agent-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.agent-detail-head h3 { color: var(--ink); font-size: 18px; letter-spacing: -.3px; }
.agent-close { margin: -8px -8px -8px auto; border: 0; width: 40px; height: 40px; color: var(--muted); background: none; font: 24px/1 var(--sans); cursor: pointer; }
.agent-close:hover { color: var(--ink); }
.agent-strategy { margin: 10px 0 0; font: 14px/1.7 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.strategy-tag { display: inline-block; margin-right: 8px; padding: 0 5px; border: 1px solid var(--line); color: var(--muted); font: 10px/1.7 var(--mono); white-space: nowrap; }
.agent-record { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; color: var(--muted); font: 11px/1.7 var(--mono); }
.agent-progress:empty { display: none; }
.progress-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 11px/1.6 var(--mono); }
.progress-count { color: var(--accent); }
.progress-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 4px; list-style: none; padding: 10px 0 0; margin: 0; }
.progress-check { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; color: var(--muted); font: 10px/1.6 var(--mono); }
.check-met { color: var(--ink); }
.check-met .check-mark { color: var(--accent); }
.check-count { white-space: nowrap; }
.progress-blocker { margin: 10px 0 0; color: var(--muted); font: 11px/1.6 var(--mono); }

@media (prefers-reduced-motion: reduce) {
  .pulse, .entry-new, .wash-up, .wash-down, .dot-speaking .agent-dot-core, .stream > .entry-note:first-child .entry-words::after { animation: none; }
  .agent-dot-core { transition: none; }
  .agent-activity { display: none; }
}

@media (max-width: 720px) {
  .page { width: calc(100% - 32px); }
  .masthead { padding-top: 30px; }
  h1 { letter-spacing: -1.2px; }
  .block { padding-top: 32px; }
  .numbers { gap: 16px 40px; margin-top: 26px; }
  .number-value { font-size: 30px; letter-spacing: -1px; }
  .number-tick { font-size: 13px; }
  .balance-plot { height: 170px; }
  .balance-x span:nth-child(even) { display: none; }
  .stream-window { height: 480px; padding: 0 14px; }
  .entry-trade { margin-left: -12px; padding-left: 10px; }
  /* A position is one column: its result and status on a line above it, then the position. */
  .pos { display: flex; flex-direction: column; gap: 6px; }
  .pos-result { order: -1; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; }
  .pos-earlier, .pos-marks { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .pos-why { font-size: 15px; }
  .pos-fold summary { grid-template-columns: minmax(0, 1fr) auto; }
  .fold-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; }
  /* A step is its name and its count on one line, its dots below, their rings in line with the name. This layout has
     its own staircase: the lower steps stay wide for their dots and it narrows hard only at the line, so Probe is never
     so wide that the line's label has no room beside it. The label keeps to the line's right end. */
  .rung { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: var(--step-narrow, 100%); min-height: 0; padding: 9px 10px; }
  .ladder-real-mark { margin-left: auto; }
  .rung-5 { --least: 144px; } .rung-4 { --least: 164px; } .rung-3 { --least: 184px; } .rung-2 { --least: 204px; }
  .rung-name { grid-column: 1; grid-row: 1; }
  .reached-count { grid-column: 2; grid-row: 1; }
  .agent-dots { grid-column: 1 / -1; grid-row: 2; margin: 0 -8px -5px; }
  .rung-vacant .agent-dots { display: none; }
  .agent-dot { width: 44px; height: 44px; flex-basis: 44px; }
  /* The keyboard's ring is the same 40 px circle as on a wide screen, clear of the step's outline 2 px from the dot. */
  .agent-dot:focus-visible { outline-offset: -4px; }
  .agent-progress-ring { inset: 6px; }
  .agent-detail-card { padding: 14px; }
}
@media (max-width: 480px) {
  .progress-checks { grid-template-columns: 1fr; }
}