@font-face { font-family: 'Departure Mono'; src: url('../components/fonts/departure-mono-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Commit Mono'; src: url('../components/fonts/commit-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Commit Mono'; src: url('../components/fonts/commit-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* pid1 on App-design-5: the kit's two-color pair swapped for oxblood and bone, plus one charcoal that is only ever
   the process (the process window and the rail). The kit names stay ("blue" is the canvas, "paper" the ink) so components.css
   derives muted, line and tint from the pair. Departure Mono (pixel terminal) sets the name, headings and the burned
   total; Commit Mono sets everything else. Both are local OFL files in components/fonts.
   Spacing is an 8px base: 128px between sections, 24px grid gutters, 20px inside panels (72 / 16 / 16 on phones). */
.ds-root {
  --ds-color-blue: #6e1f1a;
  --ds-color-paper: #efe9dc;
  --ds-film-strength: .22;
  --charcoal: #161412;
  --charcoal-ink: #efe9dc;
  --charcoal-muted: color-mix(in srgb, #efe9dc 58%, #161412);
  --charcoal-line: color-mix(in srgb, #efe9dc 18%, #161412);
  --rule-dotted: 1px dotted var(--ds-color-line);
  --font-pixel: 'Departure Mono', ui-monospace, monospace;
  --ds-font-mono: 'Commit Mono', ui-monospace, monospace;
  --ds-font-body: var(--ds-font-mono);
  --ds-font-display: var(--font-pixel);
  --ds-type-body: 14px;
  --ds-type-small: 13px;
  --ds-type-bodyLeading: 1.75;
  --section: 128px;
  --gutter: 24px;
  --pad: 20px;
  font-family: var(--ds-font-mono);
}
/* Everything on the rust page sits on a solid surface a step darker, with lines and secondary text a step stronger
   than the kit's defaults, so the background never shows through text and nothing reads as washed out. */
.ds-root {
  --surface: color-mix(in srgb, #6e1f1a 78%, #000);
  --ds-color-line: color-mix(in srgb, var(--ds-color-foreground) 58%, var(--ds-color-background));
  --ds-color-muted: color-mix(in srgb, var(--ds-color-foreground) 88%, var(--ds-color-background));
}
.ds-root[data-ds-theme='paper'] { --surface: #e4dccb; --ds-film-strength: .1; }
.contract, .stats, .cmd, .man-page { background: var(--surface); }
html { background: #6e1f1a; }
html:has(.ds-root[data-ds-theme='paper']) { background: #efe9dc; }
body { margin: 0; min-height: 100vh; }
/* Sitewide: FaultyTerminal's glitching digits, faint, fixed behind everything and above the page colour. */
.terminal-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.ds-root ::selection { color: var(--charcoal-ink); background: var(--charcoal); }
.key { font-size: 12px; color: var(--ds-color-muted); }
/* The process surfaces keep their charcoal in both themes: they are the program, not the page. */
.proc, .rail { --ds-color-foreground: var(--charcoal-ink); --ds-color-muted: var(--charcoal-muted); --ds-color-line: var(--charcoal-line); color: var(--charcoal-ink); background: var(--charcoal); }

/* Status rail: the header is a ps line. */
.rail { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--charcoal-line); }
.rail-in { display: flex; align-items: center; gap: var(--ds-space-s24); min-height: 40px; padding: 6px var(--ds-layout-gutter); font-size: 12px; }
.rail-name { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--font-pixel); text-decoration: none; }
.rail-name img { image-rendering: pixelated; }
.rail-fields { display: flex; flex-wrap: wrap; gap: 2px var(--ds-space-s20); flex: 1; min-width: 0; margin: 0; }
.rail-fields div { display: flex; gap: 6px; white-space: nowrap; }
.rail-fields dt { color: var(--charcoal-muted); }
.rail-fields dd { margin: 0; font-variant-numeric: tabular-nums; }
#rail-state[data-state='running'] { background: var(--charcoal-ink); color: var(--charcoal); padding-inline: 4px; }
.rail-actions { display: flex; gap: var(--ds-space-s8); }
.rail-button { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--charcoal-line); background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.rail-button:hover { border-color: var(--charcoal-ink); }
.rail-buy { background: var(--charcoal-ink); color: var(--charcoal); border-color: var(--charcoal-ink); }

/* Left margin: the process table, running down the page. Decoration only. */
.margin-ps { position: fixed; left: 14px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 11px; letter-spacing: .3em; color: var(--ds-color-muted); opacity: .55; white-space: nowrap; pointer-events: none; z-index: 1; display: none; }
@media (min-width: 1360px) { .margin-ps { display: block; } }

/* Stage: twelve columns. Intro and the process window, then the contract and the market numbers under them. */
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; padding-top: 88px; }
.intro { grid-column: 1 / 6; grid-row: 1; align-self: end; }
.hero-name { font: 400 44px/1 var(--font-pixel); }
.hero-premise { margin-top: var(--ds-space-s24); max-width: 40ch; color: var(--ds-color-muted); }
/* The mechanic in one plain sentence, in the ink colour, so nobody has to open the manual to learn what pid1 does. */
.hero-mechanic { margin-top: var(--ds-space-s16); max-width: 44ch; padding-left: var(--ds-space-s16); border-left: 2px solid var(--ds-color-foreground); }

.cmd-wrap { margin-top: var(--ds-space-s48); }
.cmd { display: flex; align-items: center; gap: var(--ds-space-s12); border: 1px solid var(--ds-color-line); padding: 0 var(--ds-space-s16); }
.cmd:focus-within { border-color: var(--ds-color-foreground); }
.cmd-prompt { font: 400 16px/1 var(--font-pixel); }
.cmd input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: inherit; font: 400 16px/1 var(--ds-font-mono); outline: none; }
.cmd input::placeholder { color: var(--ds-color-muted); opacity: 1; }
.cmd-shortcuts { display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-s16); margin-top: var(--ds-space-s8); }
.cmd-shortcuts button { min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; text-decoration: underline; text-decoration-color: var(--ds-color-line); text-underline-offset: .25em; cursor: pointer; }
.cmd-shortcuts button:hover { text-decoration-color: currentColor; }
.cmd-out { min-height: 1.75em; margin-top: var(--ds-space-s8); font-size: 12px; color: var(--ds-color-muted); }
.cmd-out:not(:empty)::before { content: '< '; }

/* The process window: the one charcoal component. Title bar, the black hole with the numbers beside it, stdout. */
.proc { grid-column: 6 / 13; grid-row: 1; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--charcoal-line); }
.proc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-s12); padding: 10px var(--pad); border-bottom: 1px solid var(--charcoal-line); }
.proc-head h2 { font: 400 13px/1.4 var(--font-pixel); color: var(--charcoal-muted); }
/* The burned total is the page's focal number: a band across the window above the black hole. */
.proc-total-row { display: flex; flex-direction: column; gap: 10px; padding: 16px var(--pad) 20px; border-bottom: 1px dotted var(--charcoal-line); }
.proc-total { font: 400 clamp(56px, 6.2vw, 88px)/.9 var(--font-pixel); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; transition: background-color .9s ease-out; }
.proc-total.flash { background-color: color-mix(in srgb, var(--charcoal-ink) 18%, transparent); transition: none; }
.proc-main { display: grid; grid-template-columns: minmax(0, 1fr) 260px; border-bottom: 1px solid var(--charcoal-line); }
.vortex { position: relative; margin: 0; height: 250px; overflow: hidden; font: 400 9px/9px var(--font-pixel); color: var(--charcoal-ink); white-space: pre; user-select: none; }
.proc-kv { margin: 0; padding: 6px var(--pad); border-left: 1px dotted var(--charcoal-line); font-size: 12px; align-self: center; }
.proc-kv div { display: flex; justify-content: space-between; gap: var(--ds-space-s12); padding-block: 9px; }
.proc-kv div + div { border-top: 1px dotted var(--charcoal-line); }
.proc-kv dt { color: var(--charcoal-muted); }
.proc-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.proc-kv a { color: inherit; display: inline-block; padding-block: 4px; margin-block: -4px; }.proc-out { padding: 12px var(--pad) 14px; }
.proc-out .key { display: block; margin-bottom: 4px; font-weight: 400; color: var(--charcoal-muted); }
.stdout-log { list-style: none; margin: 0; padding: 0; min-height: 108px; font-size: 12px; line-height: 1.8; }
.stdout-log li { display: flex; gap: var(--ds-space-s16); min-width: 0; }
.stdout-log li.new { animation: log-in .6s ease-out; }
.stdout-log .t { flex-shrink: 0; color: var(--charcoal-muted); font-variant-numeric: tabular-nums; }
.stdout-log .m { min-width: 0; overflow-wrap: anywhere; }
.stdout-log a { color: inherit; }
.stdout-log a.m { text-decoration: none; }
.stdout-log a.m:hover, .stdout-log a.m:focus-visible { text-decoration: underline; }
.stdout-log .cursor::after { content: '█'; margin-left: 4px; font-family: var(--font-pixel); animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@keyframes log-in { from { background: color-mix(in srgb, var(--charcoal-ink) 14%, transparent); } to { background: transparent; } }
.contract { grid-column: 1 / 6; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; margin-top: 72px; border: 1px solid var(--ds-color-line); }
.contract-row { display: flex; align-items: center; gap: var(--ds-space-s12); padding: var(--pad) var(--ds-space-s12) var(--pad) var(--pad); border-bottom: var(--rule-dotted); }
.contract-row code { flex: 1; min-width: 0; font: inherit; font-size: 13px; overflow-wrap: anywhere; }
.copy { min-height: 32px; padding: 0 12px; flex-shrink: 0; border: 1px solid var(--ds-color-foreground); background: none; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.copy:disabled { opacity: .6; cursor: default; }
.dev-links { display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-s20); padding: 4px var(--pad); font-size: 12px; }
.dev-links a { display: inline-flex; align-items: center; min-height: 32px; text-decoration-color: var(--ds-color-line); }
.dev-links a:hover { text-decoration-color: currentColor; }

.stats { grid-column: 6 / 13; grid-row: 2; align-self: stretch; margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ds-color-line); }
.stat { padding: var(--pad); min-width: 0; }
.stat + .stat { border-left: 1px solid var(--ds-color-line); }
body:not(.launched) .stat-value { color: var(--ds-color-muted); }
.stat-value { display: block; margin-top: var(--ds-space-s8); font: 500 24px/1.15 var(--ds-font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Test data: labelled in place and in a note at body size, and gone once the coin launches. */
.test-badge { font-size: 11px; color: var(--ds-color-muted); }
.test-note { margin: 0 0 var(--ds-space-s16); max-width: 72ch; }
.launched .test-badge, .launched .test-note { display: none; }

/* Sections */
.block { padding-top: var(--section); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-s12); margin-bottom: var(--ds-space-s24); border-bottom: 1px solid var(--ds-color-line); }
.section-label { font: 400 22px/1.2 var(--font-pixel); padding-bottom: var(--ds-space-s12); }
.block > .section-label { margin-bottom: var(--ds-space-s24); border-bottom: 1px solid var(--ds-color-line); }
.flash-section { animation: section-flash 1.2s ease-out; }
@keyframes section-flash { from { background: var(--ds-color-tint); } to { background: transparent; } }

/* man page: plain text, small headings, almost no borders, the measure of a terminal. */
.man-page { padding: var(--ds-space-s24) var(--ds-space-s32) var(--ds-space-s16); border: 1px solid var(--ds-color-line); font-size: 14px; }
@media (min-width: 1024px) { .man-page { columns: 2; column-gap: 64px; } .man-page details { break-inside: avoid; } }
.man-page details { padding-block: 6px; }
.man-page summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font: 400 14px/1.2 var(--font-pixel); list-style: none; }
.man-page summary::-webkit-details-marker { display: none; }
.man-page summary::before { content: '+'; width: 2ch; color: var(--ds-color-muted); }
.man-page details[open] > summary::before { content: '-'; }
.man-page details > :not(summary) { margin: 4px 0 10px 7ch; max-width: 62ch; }
.man-page details > p + p { margin-top: 10px; }
.man-page ol { padding-left: 2.5ch; }
.man-page li + li { margin-top: 6px; }
.man-links { display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-s20); }
.man-links a { text-decoration-color: var(--ds-color-line); }

/* Panels */
/* One frame per section, dotted dividers inside it, instead of a box per panel. */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ds-color-line); background: var(--surface); }
.panels > .panel:nth-child(odd) { border-right: var(--rule-dotted); }
.panels > .panel:nth-child(n+3) { border-top: var(--rule-dotted); }
.panel { display: flex; flex-direction: column; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-s12); padding: var(--ds-space-s16) var(--pad) var(--ds-space-s12); }
.panel-head h3 { font: 400 13px/1.3 var(--ds-font-mono); }
.panel-body { flex: 1; padding: 0 var(--pad) var(--pad); min-width: 0; }
.panel-foot { padding: var(--ds-space-s12) var(--pad); border-top: var(--rule-dotted); font-size: 12px; color: var(--ds-color-muted); }
.state { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-color-muted); white-space: nowrap; }
.state::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; }
.state[data-state='live']::before, .state[data-state='listening']::before, .state[data-state='snapshot']::before { background: currentColor; }

.big { font: 500 24px/1.15 var(--ds-font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--ds-space-s12) var(--pad); margin-top: var(--ds-space-s16); padding-top: var(--ds-space-s12); border-top: var(--rule-dotted); font-size: 13px; }
.pairs dt { font-size: 12px; color: var(--ds-color-muted); }
.pairs dd { font-variant-numeric: tabular-nums; }
.trace { display: block; width: 100%; height: 72px; margin-top: var(--ds-space-s16); }
.trace polyline { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.rows { list-style: none; padding: 0; margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.rows li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: var(--ds-space-s12); padding-block: 8px; border-top: var(--rule-dotted); }
.rows li:first-child { border-top: 0; }
.rows .end { text-align: right; color: var(--ds-color-muted); white-space: nowrap; }
/* The age is the only route to a row's transaction, so its hit area is padded out to a usable size. */
.rows .end a { display: inline-block; padding: 10px 0 10px 16px; margin: -10px 0; }
.rows .mid { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows a { text-decoration-color: var(--ds-color-line); }
.kind-sell { color: var(--ds-color-muted); }
.empty { padding-block: var(--ds-space-s24); color: var(--ds-color-muted); font-size: 13px; }

.ds-table-wrap { border: 0; }
.ds-table :where(th, td) { padding: 8px 0; border-top: var(--rule-dotted); }
.ds-table :where(th, td) + :where(th, td) { text-align: right; padding-left: var(--ds-space-s12); }
.ds-table thead th { font-weight: 400; font-size: 12px; color: var(--ds-color-muted); border-top: 0; }

/* The unreachable footer: a corrupted character field, the one region the process has already overwritten. */
.unreachable { position: relative; overflow: hidden; margin-top: var(--section); padding-block: 96px; background: var(--charcoal); color: var(--charcoal-ink); --ds-color-muted: var(--charcoal-muted); font-size: 12px; }
.unreachable .glitch { position: absolute; inset: 0; width: 100%; height: 100%; }
.unreachable::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, var(--charcoal) 95%); pointer-events: none; }
.unreachable .ds-container { position: relative; z-index: 1; }
.footer-text { display: inline-block; max-width: 100%; padding: 20px 24px; background: var(--charcoal); border: 1px solid var(--charcoal-line); }
.footer-text p + p { color: var(--charcoal-ink); }
.unreachable p:first-child { font: 400 14px/1.6 var(--font-pixel); }
.unreachable p + p { margin-top: 8px; }

@media (max-width: 1023px) {
  .stage { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .intro { grid-column: 1 / -1; padding-bottom: var(--ds-space-s32); }
  .proc { grid-column: 1 / -1; grid-row: 2; }
  .contract { grid-column: 1 / -1; grid-row: 3; margin-top: 48px; }
  .stats { grid-column: 1 / -1; grid-row: 4; margin-top: 0; border-top: 0; }
}
@media (max-width: 767px) {
  .ds-root { --section: 72px; --gutter: 16px; --pad: 16px; }
  /* Three lines of rail plus the pinned prompt would leave little screen, so on a phone the rail scrolls away. */
  .rail { position: static; }
  .rail-in { flex-wrap: wrap; gap: 4px var(--ds-space-s12); padding-block: 8px; }
  .rail-fields { order: 3; flex-basis: 100%; gap: 2px var(--ds-space-s12); }
  .rail-actions { margin-left: auto; }
  .stage { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .intro, .proc, .contract, .stats { grid-column: 1; grid-row: auto; }
  .proc-main { grid-template-columns: 1fr; }
  .proc-kv { border-left: 0; border-top: 1px dotted var(--charcoal-line); }
  .panels { grid-template-columns: 1fr; }
  .panels > .panel:nth-child(odd) { border-right: 0; }
  .panels > .panel:nth-child(n+2) { border-top: var(--rule-dotted); }
  .vortex { height: 200px; font-size: 7px; line-height: 7px; }
  .contract { margin-top: 48px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--ds-color-line); }
  /* On a phone the command strip is a shell prompt pinned to the bottom of the screen. */
  .cmd-wrap { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px var(--ds-layout-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--charcoal); color: var(--charcoal-ink);
    --ds-color-foreground: var(--charcoal-ink); --ds-color-muted: var(--charcoal-muted); --ds-color-line: var(--charcoal-line); border-top: 1px solid var(--charcoal-line); }
  .cmd input { min-height: 40px; }
  .cmd-shortcuts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
  .cmd-shortcuts button { flex-shrink: 0; }
  .cmd-out { margin-top: 0; min-height: 0; }
  body { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .cmd-shortcuts button { min-height: 44px; padding-inline: 4px; }
  .man-page details > :not(summary) { margin-left: 2ch; }
  .panels { grid-template-columns: 1fr; }
  .contract-row { flex-wrap: wrap; }
  .contract-row code { flex-basis: 100%; order: 3; }
  .contract-row .copy { margin-left: auto; }
}