/* SPDX-License-Identifier: LicenseRef-Proprietary-Internal
   第一桥 尖刀 v0 — shared embed styling.
   Direction: 典籍 / editorial. Warm paper ground, ink text, vermilion only where
   a refusal or a red line needs to be unmissable. Colour is semantic here, never
   decorative — a refusal must not look like a result. */

:root {
  --fb-paper: oklch(97.5% 0.012 85);
  --fb-surface: oklch(99% 0.006 85);
  --fb-ink: oklch(24% 0.012 60);
  --fb-ink-soft: oklch(46% 0.012 60);
  --fb-ink-faint: oklch(62% 0.01 60);
  --fb-rule: oklch(88% 0.012 75);
  --fb-seal: oklch(52% 0.19 27);      /* 朱砂 — refusal / red line */
  --fb-seal-wash: oklch(95% 0.035 30);
  --fb-jade: oklch(48% 0.09 165);     /* located evidence */
  --fb-jade-wash: oklch(95% 0.03 165);

  --fb-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --fb-sans: "PingFang SC", "Noto Sans CJK SC", -apple-system, "Segoe UI", sans-serif;
  --fb-mono: "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --fb-step: 0.75rem;
  --fb-radius: 3px;                   /* near-square: a document, not a widget */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fb-paper: oklch(19% 0.012 60);
    --fb-surface: oklch(23% 0.012 60);
    --fb-ink: oklch(92% 0.008 85);
    --fb-ink-soft: oklch(74% 0.01 85);
    --fb-ink-faint: oklch(58% 0.01 85);
    --fb-rule: oklch(32% 0.012 60);
    --fb-seal: oklch(70% 0.16 30);
    --fb-seal-wash: oklch(28% 0.05 30);
    --fb-jade: oklch(72% 0.1 165);
    --fb-jade-wash: oklch(26% 0.04 165);
  }
}

:root[data-theme="dark"] {
  --fb-paper: oklch(19% 0.012 60);
  --fb-surface: oklch(23% 0.012 60);
  --fb-ink: oklch(92% 0.008 85);
  --fb-ink-soft: oklch(74% 0.01 85);
  --fb-ink-faint: oklch(58% 0.01 85);
  --fb-rule: oklch(32% 0.012 60);
  --fb-seal: oklch(70% 0.16 30);
  --fb-seal-wash: oklch(28% 0.05 30);
  --fb-jade: oklch(72% 0.1 165);
  --fb-jade-wash: oklch(26% 0.04 165);
}

body.fb-page {
  margin: 0;
  background: var(--fb-paper);
  color: var(--fb-ink);
  font-family: var(--fb-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.fb-shell { max-width: 62rem; margin: 0 auto; padding: clamp(1.5rem, 1rem + 3vw, 4rem) 16px; }

.fb-masthead { border-bottom: 2px solid var(--fb-ink); padding-bottom: var(--fb-step); }
.fb-masthead h1 {
  font-family: var(--fb-display, var(--fb-serif));
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.9rem);
  letter-spacing: 0.02em;
  margin: 0 0 0.2em;
}
.fb-kicker {
  font-family: var(--fb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fb-ink-faint);
  margin: 0 0 0.6em;
}
.fb-standfirst { color: var(--fb-ink-soft); max-width: 46ch; margin: 0; }

/* --- query bar --- */
/* The bar stays with you. Answers are added below it, so without this every
   next question meant scrolling all the way back up past the one just read.
   --fb-sticky-top is the height of the host page's own fixed header, measured
   by page-init.js (0 where there is none); --fb-bar-h is this bar's height, so
   a new answer scrolls to just *under* the bar instead of behind it. */
.fb-bar {
  display: flex; gap: 0.5rem; margin: calc(var(--fb-step) * 2) 0; flex-wrap: wrap;
  position: sticky; top: var(--fb-sticky-top, 0px); z-index: 30;
  padding: .6rem 0; background: var(--fb-paper);
  box-shadow: 0 1px 0 var(--fb-rule), 0 8px 12px -12px rgba(0,0,0,.35);
}
.fb-shell .fb-turn { scroll-margin-top: calc(var(--fb-sticky-top, 0px) + var(--fb-bar-h, 5rem) + .75rem); }
.fb-bar input[type="text"] {
  flex: 1 1 18rem; min-width: 0;
  font: inherit; font-family: var(--fb-serif); font-size: 1.05rem;
  padding: 0.6rem 0.75rem;
  background: var(--fb-surface);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-radius);
  color: var(--fb-ink);
}
.fb-bar input:focus-visible { outline: 2px solid var(--fb-jade); outline-offset: 1px; }
.fb-bar button {
  font: inherit; padding: 0.6rem 1.4rem; cursor: pointer;
  background: var(--fb-ink); color: var(--fb-paper);
  border: 1px solid var(--fb-ink); border-radius: var(--fb-radius);
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms;
}
.fb-bar button:hover { transform: translateY(-1px); }
.fb-bar button:active { transform: translateY(0); opacity: 0.85; }
.fb-bar button[disabled] { opacity: 0.45; cursor: progress; transform: none; }

.fb-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: calc(var(--fb-step) * 2); }
.fb-preset {
  font: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0.3rem 0.7rem;
  background: transparent; color: var(--fb-ink-soft);
  border: 1px dashed var(--fb-rule); border-radius: 999px;
}
.fb-preset:hover { border-style: solid; color: var(--fb-ink); }
.fb-preset[data-kind="refuse"] { color: var(--fb-seal); border-color: var(--fb-seal); }

/* --- block 1: conclusion card --- */
.fb-card {
  border-left: 3px solid var(--fb-jade);
  background: var(--fb-jade-wash);
  padding: var(--fb-step) calc(var(--fb-step) * 1.3);
  border-radius: 0 var(--fb-radius) var(--fb-radius) 0;
}
.fb-card.fb-refuse { border-left-color: var(--fb-seal); background: var(--fb-seal-wash); }
.fb-verdict { font-family: var(--fb-serif); font-size: 1.25rem; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.fb-code { font-family: var(--fb-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--fb-ink-faint); }
.fb-missing { margin: 0.5em 0 0; }
.fb-note { margin: 0.4em 0 0; color: var(--fb-ink-soft); font-size: 0.92rem; }
.fb-ask { margin-top: var(--fb-step); border-top: 1px solid var(--fb-rule); padding-top: 0.6rem; }
.fb-ask-label { font-family: var(--fb-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fb-seal); }
.fb-ask p { margin: 0.25em 0 0; font-family: var(--fb-serif); }

/* --- block 2: why this answer --- */
.fb-why { margin-top: calc(var(--fb-step) * 2.2); }
.fb-why h3, .fb-replay h3 {
  font-family: var(--fb-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fb-ink-faint);
  border-bottom: 1px solid var(--fb-rule); padding-bottom: 0.4rem; margin: 0 0 var(--fb-step);
}
.fb-evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fb-ev { background: var(--fb-surface); border: 1px solid var(--fb-rule); border-radius: var(--fb-radius); padding: 0.7rem 0.85rem; }
.fb-ev-head { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; align-items: baseline; }
.fb-ev-head code { font-family: var(--fb-mono); font-size: 0.72rem; color: var(--fb-ink-faint); word-break: break-all; }
.fb-src { font-family: var(--fb-mono); font-size: 0.72rem; color: var(--fb-jade); white-space: nowrap; }
.fb-text { font-family: var(--fb-serif); font-size: 1.05rem; margin: 0.4em 0 0.5em; }
.fb-withheld { font-size: 0.88rem; color: var(--fb-ink-faint); font-style: italic; margin: 0.4em 0 0.5em; }
.fb-trunc { font-family: var(--fb-mono); font-size: 0.68rem; color: var(--fb-ink-faint); margin-left: 0.3em; }
.fb-ev-foot { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fb-lic, .fb-flag {
  font-family: var(--fb-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--fb-rule); color: var(--fb-ink-faint);
}
.fb-flag { border-color: var(--fb-seal); color: var(--fb-seal); }
.fb-excluded { font-size: 0.85rem; color: var(--fb-ink-faint); margin: 0.7em 0 0; }
.fb-gates { margin-top: 0.8em; font-family: var(--fb-mono); font-size: 0.72rem; color: var(--fb-ink-faint); display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.fb-gate { padding: 0.1rem 0.4rem; border: 1px solid var(--fb-rule); border-radius: var(--fb-radius); }
.fb-gate.fb-pass { color: var(--fb-jade); border-color: var(--fb-jade); }
.fb-gate.fb-fail { color: var(--fb-seal); border-color: var(--fb-seal); background: var(--fb-seal-wash); }
/* handed to the front desk at this gate: nothing was refused, so nothing is red */
.fb-gate.fb-turned { color: var(--fb-ink-soft); border-style: dashed; border-color: var(--fb-ink-faint, var(--fb-rule)); }
.fb-disc { margin: 0.9em 0 0; padding-left: 1.1em; font-size: 0.82rem; color: var(--fb-ink-faint); }
.fb-disc li { margin-bottom: 0.2em; }

/* --- block 3: replay --- */
.fb-replay { margin-top: calc(var(--fb-step) * 2.2); }
.fb-replay p { font-size: 0.85rem; color: var(--fb-ink-soft); margin: 0 0 0.6em; }
.fb-replay code { font-family: var(--fb-mono); font-size: 0.75rem; }
.fb-replay-link {
  display: inline-block; font-family: var(--fb-mono); font-size: 0.78rem;
  padding: 0.45rem 0.9rem; text-decoration: none;
  color: var(--fb-ink); border: 1px solid var(--fb-ink); border-radius: var(--fb-radius);
}
.fb-replay-link:hover { background: var(--fb-ink); color: var(--fb-paper); }

/* --- judgement grid (genmount) --- */
.fb-judge { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin-top: var(--fb-step); }
.fb-judge div { border: 1px solid var(--fb-rule); border-radius: var(--fb-radius); padding: 0.6rem 0.75rem; background: var(--fb-surface); }
.fb-judge dt { font-family: var(--fb-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fb-ink-faint); }
.fb-judge dd { margin: 0.25em 0 0; font-family: var(--fb-serif); font-size: 1.1rem; }
.fb-ok { color: var(--fb-jade); }
.fb-no { color: var(--fb-seal); }

.fb-foot { margin-top: calc(var(--fb-step) * 3); padding-top: var(--fb-step); border-top: 1px solid var(--fb-rule); font-size: 0.78rem; color: var(--fb-ink-faint); }
.fb-foot code { font-family: var(--fb-mono); }
.fb-err { color: var(--fb-seal); font-family: var(--fb-mono); font-size: 0.8rem; }

/* --- image upload: a document intake, deliberately not a "scan yourself" box --- */
.fb-upload {
  margin: calc(var(--fb-step) * 1.4) 0;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--fb-rule);
  border-radius: var(--fb-radius);
  background: var(--fb-surface);
}
.fb-uplabel {
  display: block;
  font-family: var(--fb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fb-ink-faint);
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.fb-upload input[type="file"] {
  font: inherit;
  font-size: 0.85rem;
  color: var(--fb-ink-soft);
  max-width: 100%;
}
.fb-upload input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.82rem;
  margin-right: 0.6rem;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  color: var(--fb-ink);
  background: transparent;
  border: 1px solid var(--fb-ink);
  border-radius: var(--fb-radius);
}
.fb-upload input[type="file"]::file-selector-button:hover {
  background: var(--fb-ink);
  color: var(--fb-paper);
}
.fb-upnote {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--fb-ink-faint);
}
.fb-upnote strong { color: var(--fb-seal); }

/* --- host-site chrome: a thin bar and a way back, so the page is not an island --- */
.fb-sitebar {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.7rem 16px;
  border-bottom: 1px solid var(--fb-rule);
  background: var(--fb-surface);
  font-family: var(--fb-sans); font-size: 0.82rem;
}
.fb-sitebar-home { text-decoration: none; color: var(--fb-ink); }
.fb-sitebar-mark { font-weight: 600; letter-spacing: 0.01em; }
.fb-sitebar-home:hover .fb-sitebar-mark { color: var(--fb-jade); }
.fb-sitebar-sep { color: var(--fb-ink-faint); }
.fb-sitebar-here { color: var(--fb-ink-faint); }
.fb-sitefoot {
  padding: 1.2rem 16px 2.2rem;
  border-top: 1px solid var(--fb-rule);
  font-family: var(--fb-sans); font-size: 0.85rem;
}
.fb-sitefoot a { color: var(--fb-ink-soft); text-decoration: none; }
.fb-sitefoot a:hover { color: var(--fb-jade); }

/* --- phone --- */
@media (max-width: 640px) {
  .fb-shell { padding-left: 16px; padding-right: 16px; }
  .fb-masthead h1 { font-size: clamp(1.45rem, 1.1rem + 3.2vw, 2rem); line-height: 1.25; }
  .fb-standfirst, .fb-claim { max-width: none; }
  /* stuck to the top of a phone it has to be short: the field on one row, the
     two buttons side by side on the next — three stacked rows ate a third of the screen */
  .fb-bar { align-items: stretch; }
  .fb-bar input[type="text"] { flex: 1 1 100%; font-size: 16px; } /* 16px stops iOS zoom */
  .fb-bar button { flex: 1 1 0; }
  .fb-presets { gap: 0.35rem; }
  .fb-preset { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
  .fb-ev-head { flex-direction: column; gap: 0.15rem; }
  .fb-src { white-space: normal; }
  .fb-ev-head code { font-size: 0.66rem; }
  .fb-text { font-size: 1rem; }
  .fb-judge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-upload input[type="file"] { display: block; margin-top: 0.4rem; }
  .fb-upload input[type="file"]::file-selector-button { margin-bottom: 0.3rem; }
  .fb-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .fb-judge, .fb-pillars { grid-template-columns: 1fr; }
}

/* --- C-end additions (consent block + local history) --- */
.fb-consent {
  border: 1px solid var(--fb-rule); border-left: 3px solid var(--fb-jade);
  background: var(--fb-surface); padding: 1rem 1.1rem; margin: 1.6rem 0;
  border-radius: 0 var(--fb-radius) var(--fb-radius) 0;
}
.fb-consent h2 {
  font-family: var(--fb-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fb-ink-faint); margin: 0 0 .6em;
}
.fb-consent p { margin: 0 0 .8em; font-size: .9rem; color: var(--fb-ink-soft); }
.fb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.fb-actions button {
  font: inherit; font-size: .82rem; padding: .4rem .9rem; cursor: pointer;
  background: transparent; color: var(--fb-ink);
  border: 1px solid var(--fb-ink); border-radius: var(--fb-radius);
}
.fb-actions button:hover { background: var(--fb-ink); color: var(--fb-paper); }
.fb-actions button.fb-danger { color: var(--fb-seal); border-color: var(--fb-seal); }
.fb-actions button.fb-danger:hover { background: var(--fb-seal); color: var(--fb-paper); }
.fb-history { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.fb-history li {
  display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  border-bottom: 1px dotted var(--fb-rule); padding-bottom: .35rem; font-size: .86rem;
}
.fb-history .fb-h-q { font-family: var(--fb-serif); }
.fb-history .fb-h-meta { font-family: var(--fb-mono); font-size: .7rem; color: var(--fb-ink-faint); }

/* --- generated reading: visibly its own thing, never mistaken for a quotation --- */
/* A reply with no source. Deliberately not the jade of a located reading: a
   dashed edge and a muted head, so the eye can tell at a glance which
   sentences are anchored and which are only the model talking. */
.fb-talk {
  margin-top: calc(var(--fb-step) * 1.6);
  padding: 0.95rem 1.1rem 0.8rem;
  background: transparent;
  border: 1px dashed var(--fb-rule);
  border-radius: var(--fb-radius);
}
.fb-talk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.fb-talk-head h3 {
  margin: 0;
  font-family: var(--fb-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fb-ink-faint, #888);
}
.fb-talk-text { margin: 0; line-height: 1.75; color: var(--fb-ink); }
/* a withdrawn answer: said before the replay's ticks, in the refusal colour */
.fb-retracted {
  margin: 0 0 .75rem; padding: .6rem .75rem; border-left: 3px solid var(--fb-seal);
  background: var(--fb-seal-wash);
  font-size: .85rem; line-height: 1.6; color: var(--fb-ink);
}
/* under the four ticks: which release said this, and what a visitor can check alone */
.fb-account { margin-top: calc(var(--fb-step) * 1.2); padding-top: .7rem; border-top: 1px solid var(--fb-rule); }
.fb-release { font-family: var(--fb-mono); font-size: .75rem; color: var(--fb-ink-soft); margin: 0 0 .6rem; overflow-wrap: anywhere; }
.fb-chain-row { margin: 0 0 .5rem; font-size: .82rem; line-height: 1.6; }
.fb-linkish {
  padding: 0; border: 0; background: none; font: inherit; color: var(--fb-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.fb-linkish:hover { text-decoration-thickness: 2px; }
.fb-linkish:focus-visible, .fb-account summary:focus-visible { outline: 2px solid var(--fb-ink); outline-offset: 2px; }
.fb-chain-out { display: block; margin-top: .25rem; color: var(--fb-ink-soft); }
.fb-account details { margin: 0 0 .5rem; font-size: .82rem; line-height: 1.7; }
.fb-account summary { cursor: pointer; color: var(--fb-ink); }
.fb-account details p { margin: .45rem 0 0; color: var(--fb-ink-soft); }
.fb-ledger-list { list-style: none; margin: .5rem 0 0; padding: 0; font-family: var(--fb-mono); font-size: .74rem; color: var(--fb-ink-soft); }
.fb-ledger-list li { padding: .18rem 0 .18rem .6rem; border-left: 2px solid var(--fb-rule); overflow-wrap: anywhere; }
.fb-ledger-list li.fb-ledger-back { border-left-color: var(--fb-seal); color: var(--fb-ink); }
.fb-ledger-note { font-size: .78rem; }
/* how the last recording was heard, when that is worth saying */
.fb-heard-engine { display: block; margin-top: .3rem; }
/* what the lookup found (nothing), said quietly under the reply it led to */
.fb-talk-searched {
  margin: .6rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--fb-rule);
  font-size: .78rem; line-height: 1.6; color: var(--fb-ink-faint, var(--fb-ink-soft));
}
.fb-talk-note {
  margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.6;
  color: var(--fb-ink-faint, #888);
}

.fb-reading {
  margin-top: calc(var(--fb-step) * 1.6);
  padding: 0.95rem 1.1rem 0.8rem;
  background: var(--fb-surface);
  border: 1px solid var(--fb-rule);
  border-radius: var(--fb-radius);
}
.fb-reading-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.fb-reading-head h3 {
  margin: 0;
  font-family: var(--fb-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fb-jade);
}
.fb-reading-text { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--fb-ink); }
.fb-reading-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--fb-ink-faint); }
.fb-cite {
  font-family: var(--fb-mono); font-size: 0.72em; vertical-align: super;
  color: var(--fb-jade); text-decoration: none; padding: 0 0.1em;
}
.fb-cite:hover { text-decoration: underline; }
.fb-ev:target { outline: 2px solid var(--fb-jade); outline-offset: 2px; }

/* --- read aloud / ask by voice --- */
.fb-speak {
  font: inherit; font-family: var(--fb-sans); font-size: 0.78rem; letter-spacing: 0;
  text-transform: none; white-space: nowrap; cursor: pointer;
  padding: 0.28rem 0.7rem; margin-left: auto;
  color: var(--fb-ink); background: transparent;
  border: 1px solid var(--fb-rule); border-radius: 999px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.fb-speak:hover { border-color: var(--fb-ink); }
.fb-speak.fb-speaking { color: var(--fb-paper); background: var(--fb-jade); border-color: var(--fb-jade); }
.fb-verdict .fb-speak { align-self: center; }

.fb-bar .fb-mic {
  font: inherit; cursor: pointer; white-space: nowrap;
  padding: 0.6rem 1rem;
  color: var(--fb-ink); background: var(--fb-surface);
  border: 1px solid var(--fb-rule); border-radius: var(--fb-radius);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.fb-bar .fb-mic:hover { border-color: var(--fb-ink); }
.fb-bar .fb-mic.fb-recording {
  color: var(--fb-paper); background: var(--fb-seal); border-color: var(--fb-seal);
  animation: fb-pulse 1.2s ease-in-out infinite;
}
.fb-bar .fb-mic[disabled] { opacity: 0.55; cursor: progress; }
.fb-bar .fb-mic[hidden] { display: none; }
@keyframes fb-pulse { 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .fb-bar .fb-mic.fb-recording { animation: none; } }
@media (max-width: 640px) {
  .fb-bar .fb-mic { width: 100%; }
  .fb-reading-head { flex-wrap: wrap; }
}

/* icon and label live in separate spans; hosts may swap the icon for an <img> */
.fb-ico { display: inline-flex; margin-right: 0.35em; line-height: 1; }
.fb-ico img.emoji { width: 1em !important; height: 1em !important; margin: 0 !important; }
.fb-speak.fb-speaking .fb-ico, .fb-mic.fb-recording .fb-ico { filter: grayscale(1) brightness(3); }

/* --- language switch (standalone page only; in-site routes use the site's own) --- */
.fb-kicker-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fb-kicker-row .fb-kicker { margin-bottom: 0.6em; }
.fb-langswitch { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--fb-ink-faint); }
.fb-langswitch button {
  font: inherit; cursor: pointer; padding: 0.15rem 0.5rem;
  color: var(--fb-ink-soft); background: transparent;
  border: 1px solid transparent; border-radius: 999px;
}
.fb-langswitch button:hover { color: var(--fb-ink); border-color: var(--fb-rule); }
.fb-langswitch button.fb-lang-on { color: var(--fb-paper); background: var(--fb-ink); border-color: var(--fb-ink); }
.fb-trace-of { font-size: 0.85rem; color: var(--fb-ink-soft); margin: 0 0 0.6rem; overflow-wrap: anywhere; }

/* ADR-043: the egress trail on the replay page */
.fb-shell .fb-egress { margin: .25rem 0 1rem; font-size: .85rem; opacity: .85; }
.fb-shell .fb-egress ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.fb-shell .fb-egress li { margin: .1rem 0; }

/* ---- what the transcriber heard, editable --------------------------------
   Accented Mandarin comes back wrong often enough that the transcript has to be
   visible and correctable rather than silently searched. Styled as a margin
   note: it sits above the answer and must not compete with it. */
.fb-heard {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem;
  margin: .5rem 0 .9rem; padding: .5rem .7rem;
  border-left: 2px solid var(--fb-rule, #ddd);
  background: var(--fb-surface, #fff);
  border-radius: 0 var(--fb-radius, 3px) var(--fb-radius, 3px) 0;
}
.fb-heard[hidden] { display: none; }
.fb-heard-label {
  flex: 0 0 auto; white-space: nowrap;
  font-size: .78rem; letter-spacing: .04em; color: var(--fb-ink-faint, #888);
}
.fb-heard-text {
  flex: 1 1 8rem; min-width: 0; padding: .3rem .45rem;
  font-family: var(--fb-serif, Georgia, serif); font-size: .95rem;
  color: var(--fb-ink, #111); background: transparent;
  border: 0; border-bottom: 1px dashed var(--fb-rule, #ccc); border-radius: 0;
}
.fb-heard-text:focus {
  outline: none;
  border-bottom-style: solid; border-bottom-color: var(--fb-jade, #2a6);
}
.fb-heard-go {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  padding: .25rem .6rem; font-size: .78rem;
  border: 1px solid var(--fb-rule, #ccc); border-radius: var(--fb-radius, 3px);
  background: var(--fb-surface, #fff); color: var(--fb-ink, #111);
  transition: border-color 150ms ease;
}
.fb-heard-go:hover { border-color: var(--fb-ink-soft, #555); }
.fb-heard-hint { flex: 1 0 100%; font-size: .72rem; color: var(--fb-ink-faint, #888); }

/* ---- stop reading ---------------------------------------------------------
   Fixed to the viewport while anything is being read aloud. The button that
   started it is up in the toolbar and scrolls away as you read the answer, so
   stopping used to mean scrolling back up to find it. Sits above the drawer. */
.fb-stopbar {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 2147483002;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; cursor: pointer;
  font-size: .85rem; font-family: inherit;
  /* Deliberately NOT the theme tokens. This is the one element mounted on the
     host page rather than inside .fb-shell, so it sits on a background we do
     not control. Following --fb-ink/--fb-paper made it light-on-light on
     doorm.ai whenever the visitor's device was in dark mode: the tokens
     flipped, the WordPress page around it did not. A floating control has to
     carry its own contrast. */
  color: #fff; background: #17120e;
  border: 1px solid oklch(100% 0 0 / 22%); border-radius: 999px;
  box-shadow: 0 2px 14px oklch(0% 0 0 / 35%);
}
.fb-stopbar:hover { background: oklch(52% 0.19 27); }   /* 朱砂, literal for the same reason */
.fb-stopbar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fb-stopbar .fb-ico { font-size: .7em; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fb-stopbar { animation: fb-stopbar-in 150ms cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes fb-stopbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(.5rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- voice conversation bar -----------------------------------------------
   Fixed for the whole conversation: says what it is doing and ends it from
   anywhere. Ending used to mean scrolling back to the toolbar, and when
   speaking over the answer cut it off nothing on screen said why — so working
   barge-in read as a fault. Literal colours for the same reason as .fb-stopbar:
   this sits on the host page, not inside .fb-shell. */
.fb-voicebar {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 2147483002;
  display: flex; align-items: center; gap: .75rem;
  max-width: min(92vw, 30rem);
  padding: .5rem .6rem .5rem 1rem;
  font-size: .85rem; line-height: 1.3;
  color: #fff; background: #17120e;
  border: 1px solid oklch(100% 0 0 / 22%); border-radius: 999px;
  box-shadow: 0 2px 14px oklch(0% 0 0 / 35%);
}
.fb-voicebar-say {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-voicebar-end {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  padding: .3rem .8rem; font-size: .8rem; font-family: inherit;
  color: #17120e; background: #fff;
  border: 0; border-radius: 999px;
}
.fb-voicebar-end:hover { background: oklch(88% 0.06 30); }
.fb-voicebar-end:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (pointer: coarse) {
  .fb-voicebar { min-height: 48px; }
  .fb-voicebar-end { min-height: 36px; padding-inline: 1rem; }
}

/* ---- attached page --------------------------------------------------------
   A photographed page attaches to the question instead of replacing it, so the
   composer has to show that something is riding along and let it be taken off
   again. Reads as a chip on the input, not as a second control. */
.fb-attach {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  margin: .4rem 0 0;
}
.fb-attach[hidden] { display: none; }
.fb-attach-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .2rem .55rem; font-size: .78rem;
  border: 1px solid var(--fb-jade, #2a6); border-radius: 999px;
  color: var(--fb-jade, #2a6); background: var(--fb-jade-wash, transparent);
}
.fb-attach-drop {
  border: 0; background: none; cursor: pointer; padding: 0 .2rem;
  font-size: 1rem; line-height: 1; color: var(--fb-ink-faint, #888);
}
.fb-attach-drop:hover { color: var(--fb-seal, #b33); }
.fb-attach-hint { font-size: .75rem; color: var(--fb-ink-faint, #888); }

/* ---- runtime view (ADR-042 D11) ------------------------------------------
   The steps this answer actually went through. Styled as a receipt, not a
   diagram: a numbered rail, monospace values, nothing decorative. It reports
   the OS layer — isolation, retrieval, gates, egress, seal — and must never
   grow a kernel visualisation (F8). */
.fb-runtime { margin: 1rem 0 0; }
.fb-runtime[hidden] { display: none; }
.fb-rt > summary {
  cursor: pointer; list-style: none;
  padding: .4rem 0; font-size: .82rem; letter-spacing: .03em;
  color: var(--fb-ink-soft, #555); border-top: 1px solid var(--fb-rule, #ddd);
}
.fb-rt > summary::-webkit-details-marker { display: none; }
.fb-rt > summary::before {
  content: "▸"; display: inline-block; width: 1em;
  color: var(--fb-ink-faint, #888); transition: transform 150ms ease;
}
.fb-rt[open] > summary::before { transform: rotate(90deg); }
.fb-rt-list {
  list-style: none; counter-reset: fb-rt;
  margin: .3rem 0 0; padding: 0 0 0 1.1rem;
  border-left: 1px solid var(--fb-rule, #ddd);
}
.fb-rt-list li {
  counter-increment: fb-rt; position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  padding: .3rem 0;
}
/* The rail tick sits on the border, so the sequence reads as one pass. */
.fb-rt-list li::before {
  content: ""; position: absolute; left: -1.1rem; top: .75rem;
  width: .55rem; height: 1px; background: var(--fb-rule, #ddd);
}
.fb-rt-step {
  flex: 0 0 5.5rem; font-size: .78rem; color: var(--fb-ink-soft, #555);
}
.fb-rt-val {
  flex: 1 1 10rem; min-width: 0;
  font-family: var(--fb-mono, monospace); font-size: .78rem;
  color: var(--fb-ink, #111); word-break: break-word;
}
/* A step that can be replayed on its own says so by being a link. */
.fb-rt-val a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--fb-rule, #ccc); text-underline-offset: .18em;
}
.fb-rt-val a:hover { text-decoration-color: currentColor; }
.fb-rt-note {
  margin: .5rem 0 0; padding-left: 1.1rem;
  font-size: .72rem; line-height: 1.5; color: var(--fb-ink-faint, #888);
}
@media (max-width: 520px) {
  .fb-rt-step { flex: 1 0 100%; }
  .fb-rt-val { flex: 1 0 100%; }
}

/* ---- phones ---------------------------------------------------------------
   The drawer is full-screen on a phone and the standalone page is narrow, so
   everything added above has to stack rather than sit side by side, and none of
   it may push the page sideways. */
@media (max-width: 480px) {
  .fb-heard { gap: .35rem .4rem; padding: .5rem .55rem; }
  .fb-heard-text { flex: 1 0 100%; font-size: 1rem; }  /* 1rem: iOS zooms below 16px */
  .fb-heard-go { flex: 0 0 auto; }
  .fb-attach-chip { max-width: calc(100% - 2.5rem); }
  .fb-attach-hint { flex: 1 0 100%; }
  .fb-rt-note { padding-left: .8rem; }
  .fb-rt-list { padding-left: .8rem; }
  .fb-rt-list li::before { left: -.8rem; width: .4rem; }
}

/* A thumb needs a real target even where a cursor does not. */
@media (pointer: coarse) {
  .fb-heard-go, .fb-attach-drop {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fb-stopbar { min-height: 48px; padding-inline: 1.25rem; }
  .fb-rt > summary { padding: .6rem 0; }
}

/* Long values (hashes, term lists) must scroll inside their own row, never
   widen the page. */
.fb-rt-val, .fb-heard, .fb-attach { max-width: 100%; }
.fb-rt-val { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Side drawer (all pages of the three sites). The host page shifts left instead
   of being covered; on a phone the drawer takes the whole screen.
   --------------------------------------------------------------------------- */
:root { --fb-drawer-w: 33vw; }
/* Pushing the page aside only when what is left is still a desktop width: host sites
   pick their layout from the viewport, not from the space they actually get, so a
   squeezed page keeps its desktop navigation and breaks. Narrower screens: overlay. */
html.fb-drawer-open.fb-drawer-push { margin-right: var(--fb-drawer-w); transition: margin-right .22s ease; }
html.fb-drawer-dragging, html.fb-drawer-dragging * { transition: none !important; user-select: none; }

.fb-drawer-handle {
  position: fixed; right: 0; top: 50%; z-index: 2147483000;
  transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 14px 7px; border: 0; border-radius: 6px 0 0 6px; cursor: pointer;
  font: 600 13px/1.2 "Inter", "PingFang SC", "Noto Sans CJK SC", -apple-system, sans-serif;
  letter-spacing: .12em; color: #fff; background: #1f2a30;
  box-shadow: -2px 2px 10px rgba(0,0,0,.18);
  transition: right .22s ease, background .15s;
}
.fb-drawer-handle:hover, .fb-drawer-handle:focus-visible { background: #b8452a; outline: none; }
.fb-drawer-handle[hidden] { display: none; }
html.fb-drawer-open .fb-drawer-handle { right: var(--fb-drawer-w); }

.fb-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483001;
  width: var(--fb-drawer-w); max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--fb-paper, #fff); color: var(--fb-ink, #111);
  border-left: 1px solid var(--fb-rule, #ddd);
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .22s ease;
  font-family: var(--fb-sans, -apple-system, sans-serif);
}
html.fb-drawer-open .fb-drawer { transform: translateX(0); }
.fb-drawer[hidden] { display: none; }
/* the full panel's page layout (.fb-shell) must not leak into the drawer */
.fb-drawer.fb-shell { max-width: 100vw; margin: 0; padding: 0; }
.fb-drawer-grip {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize;
}
.fb-drawer-grip:hover, .fb-drawer-grip:focus-visible { background: var(--fb-rule, #ddd); outline: none; }
.fb-drawer-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--fb-rule, #ddd);
}
.fb-drawer-title { flex: 1; font-size: .95rem; color: var(--fb-ink, #111); }
.fb-drawer-full { font-size: .8rem; color: var(--fb-ink-soft, #555); white-space: nowrap; }
.fb-drawer-close {
  border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--fb-ink-soft, #555); padding: 0 .25rem;
}
/* Two faces: the question and its record, or what this OS is for. They are
   deliberately not one scroll — a description must never read as evidence of
   what ran (ADR-042 D11.4.1). */
.fb-drawer-tabs {
  display: flex; gap: .25rem; padding: 0 1rem;
  border-bottom: 1px solid var(--fb-rule, #ddd);
}
.fb-drawer-tab {
  border: 0; background: none; cursor: pointer;
  padding: .55rem .7rem; margin-bottom: -1px;
  font: inherit; font-size: .85rem; color: var(--fb-ink-soft, #555);
  border-bottom: 2px solid transparent;
}
.fb-drawer-tab:hover { color: var(--fb-ink, #111); }
.fb-drawer-tab[aria-selected="true"] {
  color: var(--fb-ink, #111); border-bottom-color: var(--fb-jade, #2f6f5e);
}
.fb-drawer-body { flex: 1; overflow-y: auto; padding: 1rem; overscroll-behavior: contain; }
.fb-os-line {
  margin: 0 0 1.25rem; font-size: .88rem; line-height: 1.7;
  color: var(--fb-ink, #111);
}
.fb-os-where {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fb-ink-faint, #888);
}
.fb-os-forms { margin: 0; padding: 0; list-style: none; }
.fb-os-forms li {
  padding: .55rem 0; border-bottom: 1px solid var(--fb-rule, #eee);
  font-size: .88rem; line-height: 1.5;
}
.fb-os-forms li:last-child { border-bottom: 0; }
.fb-os-forms a { color: var(--fb-ink, #111); text-decoration: none; }
.fb-os-forms a:hover { text-decoration: underline; }
.fb-os-forms span { color: var(--fb-ink-soft, #555); }
.fb-os-foot { margin: 1.1rem 0 0; font-size: .78rem; color: var(--fb-ink-faint, #888); }
.fb-os-note {
  margin: 1.5rem 0 0; padding-top: .75rem;
  border-top: 1px solid var(--fb-rule, #eee);
  font-size: .75rem; line-height: 1.6; color: var(--fb-ink-faint, #888);
}
.fb-drawer-lede { margin: 0 0 .75rem; font-size: .85rem; color: var(--fb-ink-soft, #555); }
/* Same in the drawer: its body is what scrolls, so the field sticks to the top
   of that, bleeding into the body's side padding so nothing shows beside it. */
.fb-drawer-form {
  display: flex; gap: .5rem;
  /* -1rem: the body's own top padding is inside the sticky box, so top:0 left a
     1rem slit above the field with the answers scrolling through it */
  position: sticky; top: -1rem; z-index: 5;
  margin: 0 -1rem; padding: 1.1rem 1rem .6rem;
  background: var(--fb-paper, #fff);
  box-shadow: 0 1px 0 var(--fb-rule, #ddd), 0 8px 12px -12px rgba(0,0,0,.35);
}
.fb-drawer .fb-turn { scroll-margin-top: 6.5rem; }
.fb-drawer-q {
  flex: 1; min-width: 0; padding: .55rem .7rem; font-size: 1rem;
  border: 1px solid var(--fb-rule, #ccc); border-radius: var(--fb-radius, 4px);
  background: var(--fb-surface, #fff); color: var(--fb-ink, #111);
}
.fb-drawer-go {
  padding: .55rem 1rem; border: 0; border-radius: var(--fb-radius, 4px); cursor: pointer;
  background: var(--fb-ink, #111); color: var(--fb-paper, #fff); font-weight: 600;
}
.fb-drawer-go:disabled { opacity: .5; cursor: wait; }
.fb-drawer-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .3rem; }
.fb-drawer-tools > button, .fb-drawer-photo {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .35rem .7rem; font-size: .85rem; border-radius: var(--fb-radius, 4px);
  border: 1px solid var(--fb-rule, #ccc); background: var(--fb-surface, #fff); color: var(--fb-ink, #111);
}
.fb-drawer-tools > button[hidden] { display: none; }
.fb-drawer-note { margin: .2rem 0 .6rem; font-size: .75rem; color: var(--fb-ink-faint, #888); }
.fb-drawer-status { margin: .3rem 0; font-size: .85rem; color: var(--fb-ink-soft, #555); }
.fb-drawer-status:empty, .fb-drawer-err:empty { display: none; }
.fb-drawer-err { margin: .3rem 0; font-size: .85rem; color: var(--fb-seal, #b33); }
.fb-drawer-out { margin-top: .5rem; }
.fb-drawer-sites { margin-top: 1.2rem; border-top: 1px solid var(--fb-rule, #ddd); padding-top: .8rem; }
.fb-drawer-sites h3 { margin: 0 0 .5rem; font-size: .9rem; color: var(--fb-ink, #111); }
.fb-drawer-sites ul { list-style: none; margin: 0; padding: 0; }
.fb-drawer-sites li { padding: .55rem 0; border-bottom: 1px dashed var(--fb-rule, #ddd); }
.fb-drawer-sites li:last-child { border-bottom: 0; }
.fb-drawer-sites a { display: block; font-weight: 600; color: var(--fb-ink, #111); text-decoration: none; }
.fb-drawer-sites a:hover { text-decoration: underline; }
.fb-drawer-sites small { display: block; margin-top: .15rem; font-size: .78rem; color: var(--fb-ink-soft, #555); }
.fb-drawer-site {
  display: inline-block; margin-bottom: .2rem; padding: 0 .4rem; font-size: .7rem;
  border-radius: 999px; border: 1px solid var(--fb-rule, #ccc); color: var(--fb-ink-soft, #555);
}
.fb-here .fb-drawer-site { border-color: var(--fb-jade, #2a6); color: var(--fb-jade, #2a6); }
/* Who this site is written for: three sites are three audiences (D11 P4). */
.fb-drawer-who {
  display: inline-block; margin: 0 0 .2rem .35rem;
  font-size: .7rem; color: var(--fb-ink-faint, #888);
}
.fb-drawer-cta { display: inline-block; margin-top: .2rem; font-size: .75rem; color: var(--fb-seal, #b33); }
.fb-drawer-none { color: var(--fb-ink-faint, #888); font-size: .85rem; }

@media (max-width: 767px) {
  html.fb-drawer-open { margin-right: 0; overflow: hidden; }
  .fb-drawer { width: 100vw; }
  html.fb-drawer-open .fb-drawer-handle { display: none; }
  .fb-drawer-handle { padding: 12px 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-drawer, .fb-drawer-handle, html.fb-drawer-open { transition: none; }
}

/* ---------------------------------------------------------------------------
   Conversation thread + voice conversation (panel and drawer)
   --------------------------------------------------------------------------- */
.fb-shell .fb-thread { display: flex; flex-direction: column; gap: 1.25rem; }
.fb-shell .fb-turn + .fb-turn { border-top: 1px solid var(--fb-rule); padding-top: 1.25rem; }
.fb-shell .fb-q {
  align-self: flex-end; max-width: 85%; margin: 0 0 .6rem auto;
  padding: .45rem .8rem; border-radius: 12px 12px 2px 12px;
  background: var(--fb-surface); border: 1px solid var(--fb-rule); color: var(--fb-ink);
  width: fit-content; word-break: break-word;
}
.fb-shell .fb-q-label {
  margin-right: .4rem; font-size: .72rem; letter-spacing: .06em; color: var(--fb-ink-faint);
}
.fb-shell .fb-conv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
.fb-shell .fb-conv-tools button, .fb-shell .fb-drawer-new, .fb-shell .fb-drawer-voice {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .35rem .75rem; font-size: .85rem; border-radius: var(--fb-radius, 4px);
  border: 1px solid var(--fb-rule); background: var(--fb-surface); color: var(--fb-ink);
}
.fb-shell .fb-conv-tools button[hidden], .fb-shell .fb-drawer-new[hidden] { display: none; }
.fb-shell .fb-voice.fb-voice-on {
  background: var(--fb-seal); border-color: var(--fb-seal); color: #fff;
  animation: fb-voice-pulse 1.6s ease-in-out infinite;
}
@keyframes fb-voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 70, 40, .35); } 50% { box-shadow: 0 0 0 6px rgba(200, 70, 40, 0); } }
.fb-shell .fb-conv-status { font-size: .85rem; color: var(--fb-ink-soft); }
.fb-drawer-hint { margin: .8rem 0 0; font-size: .78rem; color: var(--fb-ink-faint, #888); }
.fb-drawer-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fb-shell .fb-voice.fb-voice-on { animation: none; } }
.fb-drawer-photo.fb-disabled, .fb-shell button:disabled { opacity: .5; cursor: not-allowed; }
.fb-drawer-photo.fb-disabled { pointer-events: none; }

/* --- genmount.com · src/app/globals.css --- */
.fb-shell, body.fb-page {
  --fb-paper: hsl(0 0% 100%);
  --fb-surface: hsl(220 13% 98%);
  --fb-ink: hsl(220 9% 13%);
  --fb-ink-soft: hsl(220 9% 36%);
  --fb-ink-faint: hsl(220 9% 50%);
  --fb-rule: hsl(220 13% 91%);
  --fb-seal: hsl(0 68% 45%);
  --fb-seal-wash: hsl(0 68% 96%);
  --fb-jade: hsl(145 70% 30%);
  --fb-jade-wash: hsl(145 60% 95%);
  --fb-display: var(--fb-sans);
  --fb-radius: 6px;
  color: var(--fb-ink);
}
.dark .fb-shell {
  --fb-paper: hsl(220 9% 9%);
  --fb-surface: hsl(220 9% 12%);
  --fb-ink: hsl(0 0% 98%);
  --fb-ink-soft: hsl(220 9% 78%);
  --fb-ink-faint: hsl(220 9% 64%);
  --fb-rule: hsl(220 9% 22%);
  --fb-seal: hsl(0 72% 64%);
  --fb-seal-wash: hsl(0 40% 16%);
  --fb-jade: hsl(145 70% 55%);
  --fb-jade-wash: hsl(145 30% 14%);
}
.fb-shell h1, .fb-shell h2, .fb-shell .fb-verdict { color: var(--fb-ink); }