:root { color-scheme: light; --ink: #1a1a1a; --muted: #4a4a4a; --line: #c9c9c9; --paper: #ffffff; --focus: #0b3d91; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.45; }
main { padding: 1rem 1.5rem 3rem; max-width: 72rem; }
a { color: var(--focus); }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem; }
.context-header { display: flex; gap: 2rem; align-items: baseline; padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); }
.context-header p { margin: 0; }
.product { font-weight: 700; }
.synthetic-banner { margin: 0; padding: .75rem 1.5rem; background: #fff5d6; border-bottom: 1px solid #b38b00; color: var(--ink); }
.domain { color: var(--muted); font-weight: 400; font-size: .9em; margin-left: .5rem; }
.account-list { padding-left: 1.25rem; }
table.trace { border-collapse: collapse; width: 100%; }
table.trace caption { text-align: left; color: var(--muted); padding: .25rem 0; }
table.trace th, table.trace td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.kind { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .04em; }
.time-label { display: block; color: var(--muted); font-size: .8em; }
time { font-family: ui-monospace, monospace; }

/* --- Decision detail (Phase 3B). Appended; no rule above is changed. ------- */
section { margin: 0 0 2.5rem; }
section h2 { margin-bottom: .25rem; }
.lede { color: var(--muted); margin-top: .25rem; }
dl.fields { display: grid; grid-template-columns: minmax(12rem, max-content) 1fr; gap: .15rem 1rem; margin: .5rem 0; }
dl.fields dt { color: var(--muted); }
dl.fields dd { margin: 0; }
code.hash { font-family: ui-monospace, monospace; word-break: break-all; }
table.grid { border-collapse: collapse; width: 100%; margin: .5rem 0; }
table.grid caption { text-align: left; color: var(--muted); padding: .25rem 0; }
table.grid th, table.grid td { text-align: left; vertical-align: top; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
table.grid th { border-bottom: 2px solid var(--line); }
.state-word, .change-word { font-family: ui-monospace, monospace; }
.state-unavailable .state-word, .state-absent .state-word { font-weight: 700; text-decoration: underline dotted; }
.observation, .reference, .reference-note, .attribution, .attribution-note, .failure-line { display: block; }
.reference-note, .attribution-note { color: var(--muted); font-size: .9em; }
.confidence { border-left: 4px solid var(--line); padding-left: .75rem; }
blockquote { margin: .5rem 0; border-left: 4px solid var(--line); padding: .25rem .75rem; }
.counterfactual-warning { border: 2px solid var(--focus); padding: .6rem .75rem; }
.unavailable-state { border: 2px dashed var(--line); padding: .6rem .75rem; }
/* A property of an artifact, not an error: a plain informational rule, and
   deliberately not the failure treatment used by #replay-integrity-failure. */
.positive-weight-bound { border-left: 4px solid var(--line); padding-left: .75rem; }
ul.positive-weight-bound { list-style: none; margin: .5rem 0; }
#replay-integrity-failure { border: 2px solid #8a1f11; padding: .6rem .75rem; }
#replay-integrity-failure h3 { margin-top: .25rem; }
#replay-no-selection { border: 2px dashed var(--line); padding: .6rem .75rem; }
#current-logic-selector form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
#current-logic-selector label { font-weight: 700; }
select, button { font: inherit; padding: .3rem .5rem; }
button { cursor: pointer; }
select:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.failure-name, .list-label { font-weight: 700; }
.failure-origin { font-weight: 700; }
.counterfactual-computed { color: var(--muted); }

/* --- Outcome attribution presentation. Appended; no rule above is changed. -- */
.attribution-status, .detail-status { font-family: ui-monospace, monospace; font-weight: 700; }
.attribution-failure, .attribution-detail { display: block; }
.attribution-failure, .detail-failure { font-weight: 700; }
.heuristic-label, .detail-heuristic { display: inline-block; border: 1px solid var(--ink); border-radius: 3px; padding: 0 .3rem; font-size: .9em; }
.outcome-detail { margin: 1.5rem 0 0; padding-top: .75rem; border-top: 2px solid var(--line); }
.outcome-detail h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.outcome-detail h3 code { font-family: ui-monospace, monospace; word-break: break-all; }
.outcome-detail > dl.fields > dt { grid-column: 1; }
.outcome-detail > dl.fields > dd { grid-column: 2; }
.outcome-detail > dl.fields > dt.detail-history-label, .outcome-detail > dl.fields > dd.detail-history { grid-column: 1 / -1; }
.outcome-detail > dl.fields > dt.detail-history-label { margin-top: .5rem; font-weight: 700; }
.outcome-detail > dl.fields > dd.detail-history { overflow-x: auto; }
.detail-note { color: var(--muted); font-size: .9em; }
.detail-window-state { font-family: ui-monospace, monospace; }
.detail-standing-effective { font-weight: 700; }
.detail-standing-superseded { font-style: italic; }
table.history-table code { word-break: break-all; }
.history-more summary { cursor: pointer; white-space: nowrap; }
.history-more dl.fields { grid-template-columns: max-content 1fr; }
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- Insights and account findability. Appended; no rule above is changed. -- */
.site-nav { display: flex; gap: 1.25rem; padding: .5rem 1.5rem; border-bottom: 1px solid var(--line); }
.site-nav a { font-weight: 700; }
.site-nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#account-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0 .25rem; }
#account-filter label { font-weight: 700; }
input[type="search"] { font: inherit; padding: .3rem .5rem; }
input[type="search"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.signal-detail { border: 1px solid var(--line); padding: .5rem .9rem; margin: 1rem 0; }
.signal-detail h3 { margin: .25rem 0; }
.diagnostic { font-family: ui-monospace, monospace; word-break: break-word; }

/* --- Public demo and readable layouts. Appended; no rule above is changed. -- */
/* The notice and start block render only in the public read-only demo. */
.public-demo-notice { margin: 0; padding: .6rem 1.5rem; background: #eaf1fb; border-bottom: 1px solid var(--focus); color: var(--ink); }
.start-here { border: 2px solid var(--focus); padding: .5rem 1rem; margin: .75rem 0 1.5rem; max-width: 48rem; }
.start-here h2 { margin: .25rem 0 .5rem; }
.start-here p { margin: .4rem 0; }
.start-links { padding-left: 1.25rem; margin: .5rem 0; }
.start-links li { margin: .3rem 0; }
.start-links a { font-weight: 700; }
/* A wide table scrolls inside its own container, never the whole page. The
   container is a named region with tabindex="0", so the keyboard can reach it
   and scroll it with the arrow keys; its focus ring is always visible. */
.table-scroll { overflow-x: auto; max-width: 100%; }
/* A scrolling container stops its table's margin from merging with the
   paragraph above, so the wrapper carries that margin instead: the page's
   spacing stays exactly as it was before the wrapper. */
.table-scroll:has(> table.grid) { margin: .5rem 0; }
.table-scroll > table.grid { margin: 0; }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Keep every signal state readable within the 1280-pixel demo viewport. */
#signals-table { table-layout: fixed; font-size: .875rem; }
#signals-table th, #signals-table td { padding: .4rem .35rem; overflow-wrap: anywhere; }
#signals-table th .state-word { font-family: inherit; }
#signals-table thead th { overflow-wrap: normal; }
#signals-table th:first-child { width: 12%; }
#signals-table th:nth-child(2) { width: 18%; }
#signals-table th:nth-child(3) { width: 10%; }
#signals-table th:nth-child(8) { width: 10%; }
/* Narrow screens: one column for label and value lists, and a table keeps a
   readable minimum width inside its scrolling container. */
@media (max-width: 40rem) {
  main { padding: 1rem 1rem 3rem; }
  .context-header { flex-wrap: wrap; gap: .25rem 1rem; padding: .75rem 1rem; }
  .synthetic-banner, .public-demo-notice, .site-nav { padding-left: 1rem; padding-right: 1rem; }
  dl.fields { grid-template-columns: minmax(0, 1fr); }
  dl.fields dd { margin-bottom: .4rem; overflow-wrap: anywhere; }
  .outcome-detail > dl.fields > dt, .outcome-detail > dl.fields > dd { grid-column: 1; }
  #signals-table { min-width: 48rem; }
  #current-logic-selector select { max-width: 100%; }
}

/* --- Public demo theme (flight-recorder.app). Appended; no rule above is
   changed. Every selector below is scoped to html.public-demo, which only the
   public read-only app sets, so local pages keep their existing look. --- */
html.public-demo {
  /* Palette: lime signature, deep charcoal, warm off-white, white data panels. */
  --pd-lime: #a3e635;          /* signature: primary actions, selection, highlights */
  --pd-lime-hover: #bef264;
  --pd-lime-tint: #f3fbe2;     /* quiet highlight behind selected or key content */
  --pd-lime-deep: #3f6212;     /* lime family for text and links on light surfaces */
  --pd-charcoal: #1b1f24;      /* header, body text, dark text on lime */
  --pd-charcoal-2: #2a3038;
  --pd-offwhite: #f6f4ee;      /* page background */
  --pd-sand: #efe9d8;          /* synthetic-data disclosure */
  --pd-surface: #ffffff;       /* panels and tables */
  --pd-surface-2: #faf9f5;     /* table headers, secondary panels */
  --pd-line: #dedad0;
  --pd-line-strong: #c8c2b3;
  --pd-muted: #4d5560;         /* secondary text: 7.4:1 on white */
  /* Shape, spacing and type. */
  --pd-radius: 12px;
  --pd-radius-sm: 8px;
  --pd-space-1: .25rem; --pd-space-2: .5rem; --pd-space-3: .75rem;
  --pd-space-4: 1rem; --pd-space-5: 1.5rem; --pd-space-6: 2rem; --pd-space-7: 3rem;
  --pd-shadow: 0 1px 2px rgba(27, 31, 36, .06), 0 2px 8px rgba(27, 31, 36, .05);
  --pd-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: var(--pd-charcoal); --muted: var(--pd-muted); --line: var(--pd-line);
  --paper: var(--pd-surface); --focus: var(--pd-charcoal);
  background: var(--pd-offwhite);
}
html.public-demo body { background: var(--pd-offwhite); color: var(--pd-charcoal); font-family: var(--pd-font); line-height: 1.55; }
html.public-demo code, html.public-demo .kind, html.public-demo time,
html.public-demo .state-word, html.public-demo .change-word { font-family: var(--pd-mono); }
html.public-demo code { overflow-wrap: anywhere; }
html.public-demo a { color: var(--pd-lime-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
html.public-demo a:hover { color: var(--pd-charcoal); text-decoration-thickness: 2px; }
/* Focus: a charcoal ring with a lime halo reads on white, off-white and lime alike. */
html.public-demo :focus-visible { outline: 3px solid var(--pd-charcoal); outline-offset: 2px; box-shadow: 0 0 0 6px var(--pd-lime); border-radius: 4px; }
html.public-demo .skip-link:focus { background: var(--pd-lime); color: var(--pd-charcoal); font-weight: 700; border-radius: var(--pd-radius-sm); z-index: 10; }

/* Header, disclosures and navigation. */
html.public-demo .context-header { background: var(--pd-charcoal); color: #f4f4f1; border-bottom: 0; gap: var(--pd-space-4) var(--pd-space-5); padding: var(--pd-space-4) var(--pd-space-6); flex-wrap: wrap; align-items: center; }
html.public-demo .product { font-size: 1.1rem; letter-spacing: .01em; display: flex; align-items: center; gap: .6rem; }
html.public-demo .product::before { content: ""; width: .8rem; height: .8rem; border-radius: 3px; background: var(--pd-lime); box-shadow: 0 0 0 3px rgba(163, 230, 53, .25); }
html.public-demo .public-badge { margin: 0; padding: .15rem .6rem; border: 1px solid var(--pd-lime); border-radius: 999px; color: var(--pd-lime); font-size: .8rem; font-weight: 600; }
html.public-demo .operating-company { margin-left: auto; color: #c9ccd1; font-size: .92rem; }
html.public-demo .operating-company strong { color: #ffffff; }
html.public-demo .synthetic-banner { background: var(--pd-sand); border-bottom: 1px solid var(--pd-line-strong); padding: .45rem var(--pd-space-6); font-size: .88rem; line-height: 1.45; }
html.public-demo .public-demo-notice { background: var(--pd-surface); border-bottom: 1px solid var(--pd-line); border-left: 6px solid var(--pd-lime); padding: .45rem var(--pd-space-6); font-size: .88rem; line-height: 1.45; }
html.public-demo .site-nav { background: var(--pd-surface); border-bottom: 1px solid var(--pd-line); padding: 0 var(--pd-space-6); gap: var(--pd-space-2); align-items: stretch; }
html.public-demo .site-nav a { color: var(--pd-charcoal); text-decoration: none; font-weight: 600; padding: .8rem .85rem; border-bottom: 3px solid transparent; }
html.public-demo .site-nav a:hover { border-bottom-color: var(--pd-line-strong); }
html.public-demo .site-nav a.is-current { border-bottom-color: var(--pd-lime); }
html.public-demo .site-nav .site-nav-source { margin-left: auto; color: var(--pd-muted); font-weight: 500; }

/* Page body: headings, breadcrumbs, panels. */
html.public-demo main { max-width: 76rem; margin: 0 auto; padding: var(--pd-space-6) var(--pd-space-6) var(--pd-space-7); }
html.public-demo h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; margin: var(--pd-space-2) 0 var(--pd-space-4); }
html.public-demo h2 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 var(--pd-space-2); }
html.public-demo h3 { font-size: 1.05rem; }
html.public-demo .lede { color: var(--pd-muted); font-size: 1.02rem; max-width: 60rem; }
html.public-demo nav[aria-label="Breadcrumb"] { font-size: .9rem; color: var(--pd-muted); margin-bottom: var(--pd-space-2); }
html.public-demo main > section, html.public-demo .signal-detail, html.public-demo .account-list {
  background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow); padding: var(--pd-space-5) var(--pd-space-5); margin: 0 0 var(--pd-space-5);
}
html.public-demo .signal-detail { box-shadow: none; background: var(--pd-surface-2); }
html.public-demo dl.fields { gap: .35rem 1.25rem; }
html.public-demo dl.fields dt { color: var(--pd-muted); }
html.public-demo dl.fields dd { font-weight: 500; }

/* Tables: white data surfaces with a quiet header row. */
html.public-demo .table-scroll { border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); margin: var(--pd-space-3) 0; background: var(--pd-surface); }
html.public-demo table.grid, html.public-demo table.trace { margin: 0; background: var(--pd-surface); }
html.public-demo table.grid caption, html.public-demo table.trace caption { padding: var(--pd-space-3) var(--pd-space-4); font-size: .9rem; caption-side: top; }
html.public-demo table.grid th, html.public-demo table.trace th { background: var(--pd-surface-2); font-size: .85rem; font-weight: 600; color: var(--pd-charcoal-2); border-bottom: 1px solid var(--pd-line-strong); }
html.public-demo table.grid td, html.public-demo table.trace td, html.public-demo table.grid th, html.public-demo table.trace th { padding: .6rem .75rem; }
html.public-demo table.grid tbody tr:last-child td, html.public-demo table.trace tbody tr:last-child td { border-bottom: 0; }
html.public-demo tbody tr:hover td { background: #fcfcf8; }
/* Identifiers and instants in tables: slightly smaller, and an instant in the
   trace never breaks mid-value. A caption stays at the visible left edge while its table
   scrolls sideways, so it is always readable in full. */
html.public-demo table code, html.public-demo table time { font-size: .84em; }
html.public-demo table.trace time { white-space: nowrap; }
html.public-demo .table-scroll caption { position: sticky; left: 0; max-width: calc(100vw - 4.25rem); box-sizing: border-box; }

/* Controls: lime primary actions with dark text; consistent inputs. */
html.public-demo button, html.public-demo .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; box-sizing: border-box; min-height: 2.75rem;
  padding: .65rem 1.1rem; border-radius: var(--pd-radius-sm); border: 1px solid var(--pd-charcoal);
  background: var(--pd-lime); color: var(--pd-charcoal); cursor: pointer;
}
html.public-demo button:hover, html.public-demo .button-primary:hover { background: var(--pd-lime-hover); color: var(--pd-charcoal); }
html.public-demo .button-secondary { background: var(--pd-surface); }
html.public-demo .button-secondary:hover { background: var(--pd-lime-tint); color: var(--pd-charcoal); }
html.public-demo select, html.public-demo input[type="search"] {
  font: inherit; padding: .6rem .75rem; border: 1px solid var(--pd-line-strong);
  border-radius: var(--pd-radius-sm); background: var(--pd-surface); color: var(--pd-charcoal); min-height: 2.75rem; box-sizing: border-box;
}

/* The account list: the start block, then a scannable panel of accounts. */
html.public-demo .start-here { max-width: none; border: 1px solid var(--pd-line); border-top: 6px solid var(--pd-lime); padding: var(--pd-space-6); }
html.public-demo .start-eyebrow { margin: 0 0 var(--pd-space-2); font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-lime-deep); }
html.public-demo .start-here h2 { font-size: 1.6rem; max-width: 44rem; margin-bottom: var(--pd-space-3); }
html.public-demo .start-here p { max-width: 50rem; }
html.public-demo .start-links { list-style: none; padding: 0; margin: var(--pd-space-5) 0 var(--pd-space-4); display: flex; flex-wrap: wrap; gap: var(--pd-space-3); align-items: center; }
html.public-demo .start-links li { margin: 0; }
html.public-demo .start-source { font-weight: 600; margin-left: var(--pd-space-2); }
html.public-demo .start-steps { margin: var(--pd-space-4) 0 0; padding: var(--pd-space-4) 0 0 1.4rem; border-top: 1px solid var(--pd-line); display: grid; gap: var(--pd-space-2); color: var(--pd-charcoal-2); }
html.public-demo .start-steps li::marker { font-weight: 700; color: var(--pd-lime-deep); }
html.public-demo #canonical-account { font-weight: 600; }
html.public-demo #account-filter { margin: var(--pd-space-4) 0 var(--pd-space-2); gap: var(--pd-space-3); }
html.public-demo #account-count { color: var(--pd-muted); }
html.public-demo .account-list { list-style: none; padding: var(--pd-space-4) var(--pd-space-5); columns: 3 16rem; column-gap: var(--pd-space-6); }
html.public-demo .account-list li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid #efece4; }
html.public-demo .account-list a { font-weight: 600; text-decoration: none; }
html.public-demo .account-list a:hover { text-decoration: underline; }

/* Decision and replay: the counterfactual stays labelled in words; its frame is
   dashed charcoal, never a "positive" lime. */
html.public-demo .counterfactual-warning { border: 2px dashed var(--pd-charcoal); border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); padding: var(--pd-space-3) var(--pd-space-4); }
html.public-demo #current-logic-selector { background: var(--pd-lime-tint); border: 1px solid #d6ecae; border-radius: var(--pd-radius-sm); padding: var(--pd-space-3) var(--pd-space-4); margin: var(--pd-space-4) 0; }
html.public-demo #current-logic-selector form { gap: var(--pd-space-3); }
html.public-demo #replay-comparison { scroll-margin-top: var(--pd-space-4); border-top: 1px solid var(--pd-line); padding-top: var(--pd-space-4); margin-top: var(--pd-space-4); }
html.public-demo #replay-comparison dl.fields dd { font-variant-numeric: tabular-nums; }
html.public-demo #original-score, html.public-demo #counterfactual-score, html.public-demo #score-delta { font-size: 1.15rem; font-weight: 700; }
html.public-demo .confidence, html.public-demo .positive-weight-bound, html.public-demo blockquote { border-left-color: var(--pd-line-strong); }
html.public-demo #replay-integrity-failure { border-radius: var(--pd-radius-sm); background: #fff6f4; }
html.public-demo .unavailable-state, html.public-demo #replay-no-selection { border-radius: var(--pd-radius-sm); }

/* Motion only where it helps orientation, and never when reduced motion is
   asked. Page scrolling stays instant: a link into a long page lands at once. */
@media (prefers-reduced-motion: no-preference) {
  html.public-demo button, html.public-demo .button, html.public-demo .site-nav a { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}

/* Narrow screens. */
@media (max-width: 40rem) {
  html.public-demo .context-header { padding: var(--pd-space-3) var(--pd-space-4); }
  html.public-demo .operating-company { margin-left: 0; width: 100%; }
  html.public-demo .synthetic-banner, html.public-demo .public-demo-notice { padding: .4rem var(--pd-space-4); font-size: .82rem; }
  html.public-demo .context-header { gap: var(--pd-space-2) var(--pd-space-3); }
  html.public-demo .operating-company { font-size: .85rem; }
  html.public-demo .table-scroll table code { white-space: nowrap; }
  html.public-demo .site-nav { padding: 0 var(--pd-space-3); gap: 0; }
  html.public-demo .site-nav a { padding: .75rem .6rem; }
  html.public-demo main { padding: var(--pd-space-4) var(--pd-space-4) var(--pd-space-7); }
  html.public-demo h1 { font-size: 1.55rem; }
  html.public-demo main > section, html.public-demo .signal-detail { padding: var(--pd-space-4); }
  html.public-demo .start-here { padding: var(--pd-space-5) var(--pd-space-4); }
  html.public-demo .start-here h2 { font-size: 1.3rem; }
  html.public-demo .start-links { flex-direction: column; align-items: stretch; }
  html.public-demo .start-links .button { width: 100%; }
  html.public-demo .start-source { margin-left: 0; }
  html.public-demo #current-logic-selector select, html.public-demo #current-logic-selector button { width: 100%; }
}

/* Public presentation correction: first action, replay result, Insights headline. */
/* One compact disclosure strip; its first line states the essentials, and the
   full wording is one native disclosure away. */
html.public-demo .public-demo-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem var(--pd-space-3); background: var(--pd-sand); border-left: 6px solid var(--pd-lime); border-bottom: 1px solid var(--pd-line-strong); }
html.public-demo .public-demo-notice p { margin: 0; }
html.public-demo .notice-more summary { cursor: pointer; font-weight: 600; color: var(--pd-lime-deep); text-decoration: underline; text-underline-offset: 2px; }
html.public-demo .notice-more[open] { flex-basis: 100%; }
html.public-demo .notice-more[open] summary { margin-bottom: var(--pd-space-1); }
html.public-demo .notice-more p + p { margin-top: var(--pd-space-1); }
/* The start block: purpose, then the action, then the explanation. */
html.public-demo .start-here { padding: var(--pd-space-5) var(--pd-space-6); }
html.public-demo .start-here h2 { margin-top: 0; }
html.public-demo .start-purpose { font-size: 1.05rem; color: var(--pd-charcoal-2); }
html.public-demo .start-links { margin: var(--pd-space-4) 0; }
/* The replay result: recorded and computed side by side, neutral surfaces; the
   counterfactual keeps the dashed frame used for counterfactual content. */
html.public-demo .replay-summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pd-space-3); margin: var(--pd-space-3) 0 var(--pd-space-4); }
html.public-demo .replay-side { background: var(--pd-surface); border: 1px solid var(--pd-line-strong); border-radius: var(--pd-radius-sm); padding: var(--pd-space-3) var(--pd-space-4); }
html.public-demo .replay-counterfactual { border: 2px dashed var(--pd-charcoal); background: var(--pd-surface-2); }
html.public-demo .replay-side p { margin: 0; }
html.public-demo .replay-side-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pd-muted); }
html.public-demo .replay-score { margin: .15rem 0 .2rem; }
html.public-demo .replay-score > span:first-child { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
html.public-demo .replay-threshold { color: var(--pd-muted); font-size: .9rem; }
html.public-demo .replay-line { font-size: .95rem; }
html.public-demo .replay-line span { font-family: var(--pd-mono); font-weight: 600; }
html.public-demo .replay-change { grid-column: 1 / -1; margin: 0; font-weight: 600; }
/* The Insights headline. */
html.public-demo .insights-headline { border-top: 6px solid var(--pd-lime); }
html.public-demo .insights-headline h2 { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-lime-deep); margin-bottom: var(--pd-space-1); }
html.public-demo .headline-label { margin: 0; font-weight: 600; }
html.public-demo .headline-rate { margin: .2rem 0 .35rem; font-size: 1.6rem; font-weight: 800; line-height: 1.25; }
html.public-demo .headline-context { margin: 0; color: var(--pd-muted); max-width: 52rem; }
@media (max-width: 40rem) {
  html.public-demo .context-header { padding: .6rem var(--pd-space-4); gap: .2rem .6rem; }
  html.public-demo .product { font-size: 1rem; }
  html.public-demo .public-badge { font-size: .72rem; padding: .05rem .5rem; }
  html.public-demo .operating-company { font-size: .8rem; }
  html.public-demo .public-demo-notice { padding: .4rem var(--pd-space-4); }
  html.public-demo main { padding-top: var(--pd-space-3); }
  html.public-demo main > h1 { margin: var(--pd-space-1) 0 var(--pd-space-3); font-size: 1.4rem; }
  html.public-demo .start-here { padding: var(--pd-space-4); }
  html.public-demo .start-here h2 { font-size: 1.2rem; margin-bottom: var(--pd-space-2); }
  html.public-demo .start-purpose { font-size: 1rem; }
  html.public-demo .start-links { margin: var(--pd-space-3) 0; gap: var(--pd-space-2); }
  html.public-demo .replay-summary { grid-template-columns: 1fr; gap: var(--pd-space-2); }
  html.public-demo .replay-score > span:first-child { font-size: 1.7rem; }
  html.public-demo .headline-rate { font-size: 1.3rem; }
}

/* Public site pages (D-020): Home, About, the site navigation and footer.
   Appended; no rule above is changed. Every selector is scoped to
   html.public-demo, so local pages keep their existing look. */
html.public-demo .site-nav { flex-wrap: wrap; }
/* Home: the headline, the lead and the primary action first. */
html.public-demo .home-hero { border-top: 6px solid var(--pd-lime); padding: var(--pd-space-6); }
html.public-demo .home-hero h1 { font-size: 2.3rem; line-height: 1.15; max-width: 46rem; margin: var(--pd-space-2) 0 var(--pd-space-4); }
html.public-demo .home-lead { font-size: 1.12rem; color: var(--pd-charcoal-2); max-width: 48rem; margin: 0 0 var(--pd-space-4); }
html.public-demo .home-actions { list-style: none; padding: 0; margin: var(--pd-space-4) 0; display: flex; flex-wrap: wrap; gap: var(--pd-space-3); align-items: center; }
html.public-demo .home-actions li { margin: 0; }
html.public-demo .home-audience { color: var(--pd-muted); margin: var(--pd-space-3) 0 0; max-width: 48rem; }
html.public-demo .home-questions { list-style: none; padding: 0; margin: var(--pd-space-4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pd-space-4); counter-reset: question; }
html.public-demo .home-questions > li { background: var(--pd-surface-2); border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); padding: var(--pd-space-4) var(--pd-space-4) var(--pd-space-3); counter-increment: question; }
html.public-demo .home-questions h3 { margin: 0 0 var(--pd-space-2); font-size: 1.1rem; }
html.public-demo .home-questions h3::before { content: counter(question) ". "; color: var(--pd-lime-deep); font-weight: 800; }
html.public-demo .home-questions p { margin: 0 0 var(--pd-space-2); font-size: .97rem; }
html.public-demo .home-questions p:last-child { margin: var(--pd-space-3) 0 0; font-weight: 600; }
html.public-demo .example-unavailable { border: 2px dashed var(--pd-line-strong); border-radius: var(--pd-radius-sm); padding: var(--pd-space-2) var(--pd-space-3); }
html.public-demo .home-steps { margin: var(--pd-space-3) 0 0; padding-left: 1.4rem; display: grid; gap: var(--pd-space-2); color: var(--pd-charcoal-2); }
html.public-demo .home-steps li::marker { font-weight: 700; color: var(--pd-lime-deep); }
/* About. */
html.public-demo .about-byline { margin: 0 0 var(--pd-space-3); font-weight: 700; color: var(--pd-lime-deep); }
html.public-demo .about-architecture { padding-left: 1.2rem; display: grid; gap: var(--pd-space-2); }
html.public-demo .about-decisions dt { color: var(--pd-charcoal); font-weight: 700; }
html.public-demo .about-decisions dd { font-weight: 400; margin-bottom: var(--pd-space-2); }
html.public-demo #about-limitations ul { padding-left: 1.2rem; display: grid; gap: var(--pd-space-2); }
/* The footer: the About and source links, then attribution. */
html.public-demo .site-footer { max-width: 76rem; margin: 0 auto; padding: var(--pd-space-5) var(--pd-space-6) var(--pd-space-7); border-top: 1px solid var(--pd-line); color: var(--pd-muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: var(--pd-space-2) var(--pd-space-5); align-items: baseline; }
html.public-demo .site-footer nav a { font-weight: 600; }
html.public-demo .site-attribution { margin: 0; }
@media (max-width: 40rem) {
  html.public-demo .home-hero { padding: var(--pd-space-4); }
  html.public-demo .home-hero h1 { font-size: 1.5rem; margin: var(--pd-space-1) 0 var(--pd-space-3); }
  html.public-demo .home-lead { font-size: 1rem; margin-bottom: var(--pd-space-3); }
  html.public-demo .home-actions { flex-direction: column; align-items: stretch; margin: var(--pd-space-3) 0; gap: var(--pd-space-2); }
  html.public-demo .home-actions .button { width: 100%; }
  html.public-demo .home-questions { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-3); }
  html.public-demo .site-nav .site-nav-source { margin-left: 0; }
  html.public-demo .site-footer { padding: var(--pd-space-4) var(--pd-space-4) var(--pd-space-6); flex-direction: column; align-items: flex-start; }
}
/* Home: the personal walkthrough and the Contact form. Appended; no rule above
   is changed, and every selector is scoped to html.public-demo. */
html.public-demo .walkthrough-frame { position: relative; width: 100%; max-width: 64rem; aspect-ratio: 16 / 9; margin: var(--pd-space-3) 0; background: var(--pd-charcoal); border-radius: var(--pd-radius-sm); overflow: hidden; }
html.public-demo .walkthrough-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--pd-charcoal); }
html.public-demo .walkthrough-frame video p { color: #f4f4f1; padding: var(--pd-space-4); }
html.public-demo .walkthrough-frame video p a { color: var(--pd-lime); }
html.public-demo .walkthrough-caption { max-width: 60rem; margin: 0 0 var(--pd-space-2); }
html.public-demo .walkthrough-meta { color: var(--pd-muted); font-size: .92rem; margin: 0 0 var(--pd-space-4); }
html.public-demo .walkthrough-meta a { font-weight: 600; }
html.public-demo .contact { margin: var(--pd-space-4) 0 0; }
html.public-demo .contact > summary { list-style: none; width: fit-content; }
html.public-demo .contact > summary::-webkit-details-marker { display: none; }
html.public-demo .contact[open] > summary { background: var(--pd-lime-tint); }
html.public-demo .contact-form { display: grid; gap: var(--pd-space-3); max-width: 36rem; margin: var(--pd-space-4) 0 0; }
html.public-demo .contact-form p { margin: 0; }
html.public-demo .contact-form label { display: block; font-weight: 600; margin-bottom: var(--pd-space-1); }
html.public-demo .contact-form input[type="text"], html.public-demo .contact-form input[type="email"], html.public-demo .contact-form textarea {
  display: block; width: 100%; box-sizing: border-box; font: inherit; padding: .6rem .75rem; border: 1px solid var(--pd-line-strong);
  border-radius: var(--pd-radius-sm); background: var(--pd-surface); color: var(--pd-charcoal); min-height: 2.75rem;
}
html.public-demo .contact-form textarea { resize: vertical; }
html.public-demo .contact-provider { color: var(--pd-muted); font-size: .9rem; max-width: 36rem; margin: var(--pd-space-3) 0 0; }
html.public-demo .contact-sent { border-top: 6px solid var(--pd-lime); padding: var(--pd-space-6); }
@media (max-width: 40rem) {
  html.public-demo .contact > summary { width: 100%; }
  html.public-demo .contact-sent { padding: var(--pd-space-4); }
}