/* ============================================================================
   THE RUN-THROUGH, IN THE HOUSE STYLE
   ----------------------------------------------------------------------------
   The wordmark states the style outright, in two halves that do not blend.

   OMEN is a Didone serif, black on white: a financial-press masthead, all
   hairline rules and high-contrast type. MARKET MAKER is condensed caps in
   phosphor green, cut through with scanlines, standing on a wireframe grid
   with a price line struck across it: a 1980s trading terminal. Newspaper on
   the left, CRT on the right, one hard seam between them.

   The page was none of that. It arrived wearing the court's clothes: warm
   ivory paper, #292522 ink, a lavender accent and Inter throughout, which is
   DemoThemis's palette down to the hex. So this sheet gives each half of the
   page the half of the wordmark it belongs to:

     the prose is the newspaper    the chapter reads, so it gets paper, a
                                   masthead, rules and a serif. Long text on
                                   a black screen is a punishment, not a theme.

     the machinery is the terminal  the simulator, the door into it and the
                                   state map are the product, so they get
                                   black, phosphor, grid, scanlines and glow.

     the door is the seam          the one element that is both, because it is
                                   where the reader crosses from reading about
                                   the market to standing inside it.

   Scoped to body[data-page-brand="neutral"], which only run-through.html
   carries. index and governance are "omen" and are not touched by any of this.
   ========================================================================== */

body[data-page-brand="neutral"] {
  /* ---- the paper half ------------------------------------------------- */
  /* Newsprint, not the court's warm ivory: a cooler, greyer stock, and a
     near-black ink instead of #292522's brown. */
  --canvas: #eceee9;
  --bg: #f4f4f0;
  --surface: #fffffd;
  --ink: #0b0f0c;
  --ink-soft: #1d2620;
  --muted: #4d5a52;
  --faint: #66716a;
  --line: #d7dcd6;
  --line-strong: #b4bdb6;

  /* the accent is the brand's own green, never the court's cyan or lavender */
  --accent: var(--omm-green-dark);
  --accent-soft: #e2f6ea;
  --accent-ink: #004a24;
  --good: var(--omm-green-dark);
  --good-soft: #e2f6ea;

  /* ---- the terminal half ---------------------------------------------- */
  --crt-black: #000402;
  --crt-panel: #071a10;
  --crt-deep: #04120b;
  --crt-green: #04e26d;
  --crt-mint: #5dfeaa;
  /* secondary copy, lifted off the original #6d7d74: on the panels that read
     at 4.1:1, under the 4.5 a body size needs. This clears 6.7:1 on the
     panel and 7.8:1 on the bay and is still plainly the quieter of the two
     inks next to --ink-soft. */
  --crt-dim: #8fa398;
  --crt-line: rgba(255, 255, 255, .085);
  --crt-rule: rgba(4, 226, 109, .26);

  /* the two textures the wordmark is built from, reusable anywhere */
  --crt-grid:
    linear-gradient(rgba(4, 226, 109, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 226, 109, .05) 1px, transparent 1px);
  --crt-scan: repeating-linear-gradient(180deg,
    rgba(4, 226, 109, .045) 0 1px, transparent 1px 3px);

  /* ---- type ------------------------------------------------------------ */
  /* Inter is the court's UI face. Here the register is either the masthead's
     serif or the terminal's mono, with a grotesque only for controls. */
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;

  background-color: var(--bg);
  color: var(--ink);
}

/* ============================================================================
   1 · THE NEWSPAPER
   ========================================================================== */

/* The slug line above a heading is the press convention: tracked mono caps,
   a rule, the section's name. It replaces the court's soft kicker. */
body[data-page-brand="neutral"] .kicker,
body[data-page-brand="neutral"] .sec-label {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  gap: .7rem;
}
body[data-page-brand="neutral"] .kicker::after,
body[data-page-brand="neutral"] .sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

/* The masthead. A newspaper's front page is a heavy rule, the name, a thin
   rule under it, and the story. */
body[data-page-brand="neutral"] .hero.run-hero {
  border-top: 3px solid var(--ink);
  /* the masthead's double rule under the hero is gone (2 Sep 2026): it ran
     the width of the page right against the chapter marker below it */
  border-bottom: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.4rem;
  position: relative;
}
body[data-page-brand="neutral"] .hero.run-hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: .5rem 0 .7rem;
}
body[data-page-brand="neutral"] .hero.run-hero .dek {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44rem;
  /* no rule down its side (2 Sep 2026): under the sticky bar it hung there
     as a stray line, and this site draws no side borders */
  border-left: 0;
  padding-left: 0;
}

/* Body prose keeps the serif: this is a chapter, and it is read. */
body[data-page-brand="neutral"] .content p,
body[data-page-brand="neutral"] .content li {
  font-family: var(--serif);
  color: var(--ink-soft);
}
body[data-page-brand="neutral"] h2,
body[data-page-brand="neutral"] h3 {
  font-family: var(--serif);
  letter-spacing: -.015em;
  color: var(--ink);
}
body[data-page-brand="neutral"] h2 {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .4rem;
}

/* Links are set the way a paper sets them: the rule under the word, in the
   house colour, not a wash of it. */
body[data-page-brand="neutral"] .content a:not(.btn):not(.rt-go) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 89, 42, .45);
}
body[data-page-brand="neutral"] .content a:not(.btn):not(.rt-go):hover {
  text-decoration-color: var(--accent);
}

/* The site nav is a screen, black under its mesh, as the nav sheet draws it
   for every page. It used to be the paper's folio line here. */
body[data-page-brand="neutral"] .sitenav {
  background: var(--crt-black);
  border-bottom: 1px solid var(--crt-rule);
  backdrop-filter: none;
}

/* ============================================================================
   2 · THE TERMINAL
   The devices are the wordmark's own: the wireframe grid MARKET MAKER stands
   on, the scanlines cut through its letters, and the phosphor bloom behind
   them. Anything that is the product rather than the prose gets them.
   ========================================================================== */

body[data-page-brand="neutral"] .rt-card--splash,
body[data-page-brand="neutral"] .state-machine .machine-phase-grid > *:not([data-phase="judge"]),
body[data-page-brand="neutral"] .run-learnings {
  background-color: var(--crt-deep);
  background-image: var(--crt-scan), var(--crt-grid),
    radial-gradient(120% 90% at 80% -10%, rgba(4, 226, 109, .12), transparent 62%);
  background-size: auto, 34px 34px, 34px 34px, 100% 100%;
  border: 1px solid var(--crt-rule);
  border-radius: 14px;
  color: #cfe0da;
  box-shadow:
    inset 0 1px 0 rgba(4, 226, 109, .10),
    0 24px 56px -38px rgba(4, 226, 109, .55);
}

/* type inside a terminal panel */
body[data-page-brand="neutral"] .rt-card--splash b,
body[data-page-brand="neutral"] .run-learnings b,
body[data-page-brand="neutral"] .machine-phase-grid > *:not([data-phase="judge"]) b {
  color: var(--omm-white);
}
body[data-page-brand="neutral"] .rt-card--splash small,
body[data-page-brand="neutral"] .rt-card--splash .rt-sep,
body[data-page-brand="neutral"] .run-learnings small {
  color: var(--crt-dim);
}

/* The chips either side of the loop band are terminal tickers. */
body[data-page-brand="neutral"] .rt-card--splash .rt-chip {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crt-mint);
  background: rgba(4, 226, 109, .10);
  border: 1px solid var(--crt-rule);
  border-radius: 999px;
}

/* ---- the door: the seam between the two halves ----------------------- */
/* The one control that crosses from the page into the simulator. It is the
   terminal's own green, and it glows, because it is the only thing on a
   newspaper page that is switched on. */
body[data-page-brand="neutral"] .rt-go {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .01em;
  color: #001b0c;
  background: linear-gradient(180deg, var(--crt-green), #03c25e);
  border: 1px solid #0abb5b;
  border-radius: 11px;
  box-shadow:
    0 0 0 1px rgba(4, 226, 109, .28),
    0 14px 30px -14px rgba(4, 226, 109, .85);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
body[data-page-brand="neutral"] .rt-go:hover {
  background: linear-gradient(180deg, var(--crt-mint), var(--crt-green));
  box-shadow:
    0 0 0 1px rgba(93, 254, 170, .5),
    0 18px 38px -14px rgba(4, 226, 109, 1);
  transform: translateY(-1px);
}
body[data-page-brand="neutral"] .rt-go:active { transform: translateY(1px); }
body[data-page-brand="neutral"] .rt-go:focus-visible {
  outline: 2px solid var(--crt-mint);
  outline-offset: 3px;
}

/* ---- the state map --------------------------------------------------- */
/* It is a machine, so it reads as one: mono labels, phosphor rules, and the
   phase number set like a channel on a terminal. */
body[data-page-brand="neutral"] .state-machine .machine-phase-grid > *:not([data-phase="judge"]) .phase-no,
body[data-page-brand="neutral"] .state-machine [class*="phase"] > .num,
body[data-page-brand="neutral"] .machine-phase-grid > *:not([data-phase="judge"]) > span:first-child {
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crt-mint);
}
body[data-page-brand="neutral"] .state-machine {
  border-top: 1px solid var(--line-strong);
}

/* ---- the recap ------------------------------------------------------- */
body[data-page-brand="neutral"] .run-learnings .unlock {
  border-color: var(--crt-rule);
  background: rgba(4, 226, 109, .05);
}
body[data-page-brand="neutral"] .run-learnings .unlock.on {
  border-color: var(--crt-green);
  background: rgba(4, 226, 109, .12);
  box-shadow: 0 0 18px -6px rgba(4, 226, 109, .6);
}

/* ============================================================================
   3 · THE DIVIDER
   A plain hairline above the court hand-off. It used to carry a small
   stepped tape glyph at its left end, removed 2 Sep 2026: it read as a
   stray mark rather than a motif.
   ========================================================================== */
body[data-page-brand="neutral"] .run-demo-cta {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.6rem;
  position: relative;
}

/* ============================================================================
   4 · REDUCED MOTION AND CONTRAST
   The glow and the transitions are decoration. The colour contrast is not,
   so it stays put in every mode.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="neutral"] .rt-go { transition: none; }
  body[data-page-brand="neutral"] .rt-go:hover { transform: none; }
}
@media (prefers-contrast: more) {
  body[data-page-brand="neutral"] {
    --ink: #000402;
    --muted: #2b352f;
    --line-strong: #6d7a71;
    --crt-dim: #b6c7bf;
  }
}

/* ============================================================================
   5 · THE BAY
   .runbay is the recess the simulator sits in, and it arrived as a sheet of
   the court's paper with a cyan hairline round it. It is the largest surface
   on the page and the frame around the product, so it is the one that has to
   read as a screen: black, on the wordmark's grid, lit from inside.
   ========================================================================== */
body[data-page-brand="neutral"] .runbay {
  background-color: var(--crt-black);
  background-image:
    var(--crt-grid),
    radial-gradient(90% 60% at 50% -6%, rgba(4, 226, 109, .13), transparent 64%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  border: 1px solid var(--crt-rule);
  border-radius: 16px;
  /* recessed, the way a screen sits in a console rather than on top of it */
  box-shadow:
    inset 0 2px 26px -8px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(4, 226, 109, .07),
    0 30px 70px -46px rgba(4, 226, 109, .5);
}

/* The splash sits inside the bay, so it stops drawing its own ground and
   lets the bay be the screen. */
body[data-page-brand="neutral"] .rt-splash {
  font-family: var(--sans);
  color: #cfe0da;
}

/* ============================================================================
   6 · RE-PINNING THE BAY'S OWN TOKENS
   .runbay does not inherit the page: it pins a full token set of its own, on
   purpose, so the splash renders identically wherever it is dropped. That set
   was the court's, down to the hex, which is why Inter and #292522 and a
   lavender accent reached every control inside it however the page around it
   was themed.
   So the fix belongs here rather than in a hundred component overrides: the
   same pinned set, in this product's colours. One block, and the whole splash
   subtree follows.
   ========================================================================== */
body[data-page-brand="neutral"] .runbay {
  --canvas: var(--crt-black);
  --surface: var(--crt-panel);
  --ink: var(--omm-white);
  --ink-soft: #cfe0da;
  --muted: #90a297;
  --faint: var(--crt-dim);
  --line: var(--crt-line);
  --line-strong: var(--crt-rule);
  --wire: rgba(4, 226, 109, .38);

  /* Two products, two colours, and the diagram below draws both. The market
     is phosphor and the court is cyan, each lifted off the cream original
     so it carries on black. Painting both mint would have flattened the one
     distinction the sequence exists to draw. */
  --app-ink: var(--crt-mint);
  --crt-ink: #6fe6f4;

  /* the accent was #5a4bd6, which belongs to nothing here */
  --rt-accent: var(--crt-green);
  --rt-emboss: rgba(4, 226, 109, .25);
  --rt-stone: var(--crt-dim);
  --rt-on-accent: #001b0c;

  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

/* the sequence reads as a terminal log: mono, dim, one lit step at a time */
body[data-page-brand="neutral"] .rt-seq-row {
  color: var(--crt-dim);
  font-size: .78rem;
  letter-spacing: .01em;
}
body[data-page-brand="neutral"] .rt-seq-row.is-app,
body[data-page-brand="neutral"] .rt-seq-row.on {
  color: #cfe0da;
}
body[data-page-brand="neutral"] .rt-t { color: inherit; }
body[data-page-brand="neutral"] .rt-t b { color: var(--omm-white); }

/* the little action badges are phosphor, not the court's washed green */
body[data-page-brand="neutral"] .rt-act {
  background: rgba(4, 226, 109, .14);
  color: var(--crt-mint);
  border: 1px solid var(--crt-rule);
  border-radius: 6px;
}

/* the inspector avatar was a warm grey disc from the court's palette */
body[data-page-brand="neutral"] .rt-insp-av {
  background: var(--crt-panel);
  border: 1px solid var(--crt-rule);
  color: var(--crt-mint);
}

/* inside the bay the separator is a phosphor hairline, not a paper one */
body[data-page-brand="neutral"] .rt-card--splash .rt-sep {
  background: transparent;
  border-color: var(--crt-rule);
  color: var(--crt-dim);
}
body[data-page-brand="neutral"] .rt-card--splash .rt-chip {
  background: rgba(4, 226, 109, .10);
}


/* the owner faces are already black with a green rim; they only needed a face */
body[data-page-brand="neutral"] .chapter-owner-face { font-family: var(--mono); }

/* ============================================================================
   9 · THE BOARD IS THE MARKET'S, NOT THE COURT'S
   The splash board was designed to sit inside the homepage's DemoThemis
   product card, so its frame, its heading and its jump control were all cyan.
   On this page the board is the list of the market's own run, and cyan on it
   reads as the court labelling something it has no part in. Cyan is kept for
   what is actually the court: the lane, its face, and the hand-off dot.
   ========================================================================== */
body[data-page-brand="neutral"] .rt-board {
  background-color: var(--crt-panel);
  background-image: var(--crt-grid);
  background-size: 26px 26px, 26px 26px;
  border-color: rgba(4, 226, 109, .3);
  box-shadow:
    inset 0 1px 0 rgba(4, 226, 109, .1),
    inset 0 0 44px -22px rgba(4, 226, 109, .5),
    0 10px 34px -20px rgba(4, 226, 109, .55);
}
body[data-page-brand="neutral"] .rt-board-head {
  color: var(--crt-mint);
  border-bottom-color: rgba(4, 226, 109, .24);
  background: linear-gradient(180deg, rgba(4, 226, 109, .12), rgba(4, 226, 109, .02));
  text-shadow: 0 0 10px rgba(4, 226, 109, .45);
}
body[data-page-brand="neutral"] .rt-board-head .rt-n { color: var(--crt-dim); }

/* the row's own jump control, revealed on hover */
body[data-page-brand="neutral"] .rt-jump {
  color: var(--crt-mint);
  background: var(--crt-deep);
  box-shadow: 0 0 0 1px rgba(4, 226, 109, .42);
}

/* the inspector pill: a readout, so it is lit rather than papered */
body[data-page-brand="neutral"] .rt-insp {
  --insp-edge: rgba(4, 226, 109, .45);
  background: var(--crt-deep);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9), 0 0 22px -14px rgba(4, 226, 109, .8);
}
body[data-page-brand="neutral"] .rt-insp::before { background: var(--crt-deep); }
body[data-page-brand="neutral"] .rt-insp.is-app { --insp-edge: rgba(4, 226, 109, .6); }
body[data-page-brand="neutral"] .rt-insp.is-court { --insp-edge: rgba(0, 229, 255, .55); }

/* ============================================================================
   10 · THE TWO KEYS UNDER THE BOARD
   Start the run and Fill the page sit side by side, so they have to read as
   one pair: a lit key and an unlit one. The second was a pane of white glass
   with a cyan sheen, built for a cream card, and next to a phosphor button on
   a black bay it was the brightest thing on the page while being the lesser
   of the two controls.
   ========================================================================== */
body[data-page-brand="neutral"] .rt-fill {
  background-color: var(--crt-deep);
  background-image: var(--crt-scan);
  border: 1px solid rgba(4, 226, 109, .34);
  color: var(--crt-mint);
  box-shadow: inset 0 0 26px -14px rgba(4, 226, 109, .8);
}
body[data-page-brand="neutral"] .rt-fill:hover {
  border-color: rgba(4, 226, 109, .6);
  box-shadow: inset 0 0 26px -10px rgba(4, 226, 109, 1),
              0 0 22px -12px rgba(4, 226, 109, .7);
}
body[data-page-brand="neutral"] .rt-fill b { color: var(--crt-mint); }
body[data-page-brand="neutral"] .rt-fill-kicker { color: var(--crt-dim); }
body[data-page-brand="neutral"] .rt-fill-glyph {
  background-image: none;
  background-color: rgba(4, 226, 109, .14);
  color: var(--crt-mint);
  box-shadow: inset 0 0 0 1px rgba(4, 226, 109, .4);
}

/* the lit key: its own label was a cool grey chosen for white plastic */
body[data-page-brand="neutral"] .rt-go-label { color: #001b0c; }
body[data-page-brand="neutral"] .rt-go-kicker { color: rgba(0, 27, 12, .82); }
body[data-page-brand="neutral"] .rt-go-power {
  background-image: none;
  background-color: rgba(0, 27, 12, .16);
  color: #001b0c;
  box-shadow: inset 0 0 0 1px rgba(0, 27, 12, .3);
}

/* the two faces above the sequence, and the badge that opens each one */
body[data-page-brand="neutral"] .rt-hd { font-family: var(--mono); }
body[data-page-brand="neutral"] .rt-hd-i { color: #001b0c; }

/* ============================================================================
   11 · THE ONE CARD THAT IS NOT THIS PRODUCT
   Phase 03 of the state map is the court's, and run-through-brand.css skins
   it as the DemoThemis card on purpose: cream ground, cyan rules, its own
   ink. It is excluded from the terminal panels above so it keeps that skin,
   the same way the loop card prints a DemoThemis node inside a black bay.
   Only its seam with the black grid is restated here.
   ========================================================================== */
body[data-page-brand="neutral"] .machine-phase[data-phase="judge"] {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, .18),
    0 24px 56px -38px rgba(0, 229, 255, .6);
}

/* the second key's own label element, which is not the <b> beside it */
body[data-page-brand="neutral"] .rt-fill-label { color: var(--crt-mint); }
/* "we recommend clicking Fill the page": the bolded control name */
body[data-page-brand="neutral"] .rt-why b { color: var(--crt-mint); }

/* A market step drawn inside the court's card. run-through-brand.css gives
   every state that is not DemoThemis's an OmenMarketMaker chip: white ink on
   a gradient that runs from 9 percent to 96 percent opacity. On the black
   cards nothing shows through it. On this one card the light end let the
   cream up under the title, which put white on cream at 1.1 to 1. The chip
   keeps its gradient and gets an opaque floor to sit on. */
body[data-page-brand="neutral"] .machine-phase[data-phase="judge"]
  .machine-state:not([data-owner="demothemis"]) {
  background-color: #03100a;
}