/* ==========================================================================
   MOCKUP · home.html — the fake product UI re-skinned as the real platform
   (Final design, oai.css on the OpenAI Apps SDK UI): Apps SDK greys, Inter,
   a #f9f9f9 rail, pill segmented tabs, near-black pill buttons, soft state
   pills, hairline tiles, tabular figures, one blue for proposed values and links.

   Linked AFTER the page's own <style>. It changes colour, radius, font, border
   colour, shadow and background only. Nothing here changes a box that the
   scroll scripts measure: no border widths, no paddings or font sizes on
   measured elements, no display or position changes on animated containers.

   Every rule is prefixed :root.pf so it outranks both the inline sheet and
   base.css's dark-mode literals (:root[data-theme="dark"] .x). Where a rule
   overrides a property a state class also sets (is-on, is-hot, is-live …),
   the state is restated here at the same weight.
   ========================================================================== */

/* ── 1 · tokens (oai.css .a / .a.dark) ───────────────────────────────────── */
:root.pf {
  --pf-bg: #ffffff; --pf-rail: #f9f9f9; --pf-panel: #f9f9f9; --pf-elev: #ffffff;
  --pf-soft: #f3f3f3; --pf-soft2: #ececec;
  --pf-hov: rgba(13,13,13,.05); --pf-sel: rgba(13,13,13,.075);
  --pf-line: rgba(13,13,13,.10); --pf-lines: rgba(13,13,13,.06); --pf-ctl: rgba(13,13,13,.18);
  --pf-ink: #0d0d0d; --pf-ink2: #5d5d5d; --pf-ink3: #6f6f6f; --pf-ink4: #9b9b9b;
  --pf-acc: #0169cc; --pf-acc-soft: rgba(2,133,255,.10);
  --pf-dev: #0285ff; --pf-dev-soft: rgba(2,133,255,.10);
  --pf-ok: #008635; --pf-ok-soft: rgba(4,184,76,.12);
  --pf-bad: #ba2623; --pf-bad-soft: rgba(250,66,62,.10);
  --pf-fill: #0d0d0d; --pf-fill-h: #303030; --pf-on-fill: #ffffff;
  --pf-seg-on: #ffffff; --pf-seg-sh: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(13,13,13,.08);
  --pf-bar: #e6e6e6; --pf-bar2: #d4d4d4; --pf-hl: #0d0d0d;
  --pf-pic-bg: #d9ecff; --pf-pic-fg: #0b4a8b;
  --pf-sh3: 0 4px 12px -4px rgba(0,0,0,.10);
  --pf-sh4: 0 12px 32px -8px rgba(0,0,0,.14);
  --pf-win: 0 1px 1px rgba(13,13,13,.03), 0 40px 80px -48px rgba(13,13,13,.28);
  --pf-cmp: 0 0 0 1px var(--pf-line), 0 4px 12px -4px rgba(0,0,0,.06);
  --pf-sel-text: rgba(2,133,255,.16);
}
:root.pf[data-theme="dark"] {
  --pf-bg: #212121; --pf-rail: #181818; --pf-panel: #181818; --pf-elev: #303030;
  --pf-soft: #2f2f2f; --pf-soft2: #383838;
  --pf-hov: rgba(255,255,255,.06); --pf-sel: rgba(255,255,255,.09);
  --pf-line: rgba(255,255,255,.12); --pf-lines: rgba(255,255,255,.07); --pf-ctl: rgba(255,255,255,.22);
  --pf-ink: #f3f3f3; --pf-ink2: #b4b4b4; --pf-ink3: #a3a3a3; --pf-ink4: #8a8a8a;
  --pf-acc: #4aa8ff; --pf-acc-soft: rgba(2,133,255,.18);
  --pf-dev: #2e9bff; --pf-dev-soft: rgba(2,133,255,.18);
  --pf-ok: #3fd07c; --pf-ok-soft: rgba(4,184,76,.16);
  --pf-bad: #ff7b78; --pf-bad-soft: rgba(250,66,62,.16);
  --pf-fill: #f3f3f3; --pf-fill-h: #dcdcdc; --pf-on-fill: #0d0d0d;
  --pf-seg-on: #454545; --pf-seg-sh: none;
  --pf-bar: #3a3a3a; --pf-bar2: #4a4a4a; --pf-hl: #f3f3f3;
  --pf-pic-bg: #1d3a5c; --pf-pic-fg: #cfe6ff;
  --pf-sh3: 0 4px 12px -4px rgba(0,0,0,.4);
  --pf-sh4: 0 16px 40px -10px rgba(0,0,0,.6);
  --pf-win: 0 1px 1px rgba(0,0,0,.2), 0 40px 80px -40px rgba(0,0,0,.7);
  --pf-cmp: 0 0 0 1px rgba(255,255,255,.08), 0 16px 36px -18px rgba(0,0,0,.6);
  --pf-sel-text: rgba(46,155,255,.26);
}

/* The page's own tokens, re-pointed inside the product windows only, so every
   existing rule that reads them picks up the platform values. The marketing
   chrome around the windows keeps the site's tokens. --font-mono becomes Inter:
   the platform sets IDs and figures in the UI face with tabular numerals. */
:root.pf :is(.pa-wrap, .rec-wrap, .ev-card, .imp-panel, .tw-deck, .sg-card, .ag-card, .pr-frame-lift, .mx) {
  --gray-0: var(--pf-bg); --gray-25: var(--pf-panel); --gray-50: var(--pf-panel);
  --gray-75: var(--pf-soft); --gray-100: var(--pf-soft2); --gray-150: var(--pf-bar2);
  --gray-500: var(--pf-ink2); --gray-700: var(--pf-fill-h); --gray-900: var(--pf-fill); --gray-1000: var(--pf-ink);
  --p-panel: var(--pf-bg); --p-track: var(--pf-soft2); --p-border: var(--pf-line); --p-border-strong: var(--pf-ctl);
  --p-text: var(--pf-ink); --p-text-dim: var(--pf-ink2); --p-text-dimmer: var(--pf-ink3); --p-fill: var(--pf-fill);
  --color-surface: var(--pf-bg); --color-text: var(--pf-ink); --color-text-secondary: var(--pf-ink2);
  --color-border: var(--pf-line);
  --blue-700: var(--pf-acc);
  --ch: var(--pf-panel); --ink: var(--pf-ink2); --ink-amber: var(--pf-ink3);
  --font-mono: var(--font-sans);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
/* buttons do not inherit a face by default; these two were falling back to Arial */
:root.pf :is(.pa-send, .rec-step) { font-family: inherit; }
/* and nothing on the page is set in a monospace: IDs and figures take the UI face */
:root.pf { --font-mono: var(--font-sans); }
/* tabular figures wherever a number is read against another */
:root.pf :is(.pa-grp-left, .pf-ni em, .rec-val, .rec-hv, .ev-stats b, .ev-tbl, .ev-nct, .imp-num, .imp-row em,
  .tw-d, .tw-t, .pr-ver, .pr-meta) { font-variant-numeric: tabular-nums; }

/* shared little pieces added to the markup */
:root.pf .pf-ic { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }
:root.pf .pf-crumb { color: var(--pf-ink2); font-weight: 400; white-space: nowrap; }
:root.pf .pf-crumb i { font-style: normal; color: var(--pf-ink4); padding: 0 3px; }
:root.pf .pf-crumb b { color: var(--pf-ink); font-weight: 500; }
:root.pf .pf-mk { display: inline-block; flex: none; font-style: normal; }
:root.pf .pf-mk.is-draft { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pf-ink3); }
:root.pf .pf-mk.is-dev { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-dev); }
:root.pf .pf-mk.is-ok { width: 5px; height: 5px; background: var(--pf-ok); transform: rotate(45deg); margin: 0 1px; }
/* the platform's top-bar segmented control, set into a window's title bar. The
   negative block margin keeps it from growing the bar it sits in. */
:root.pf .pf-seg { margin: -5px 0 -5px auto; display: inline-flex; gap: 1px; padding: 2px; border-radius: 999px;
  background: var(--pf-soft); font-family: var(--font-sans); letter-spacing: 0; }
:root.pf .pf-seg > span { padding: 3px 9px; border-radius: 999px; font-size: 0.625rem; font-weight: 500;
  line-height: 1.2; color: var(--pf-ink2); white-space: nowrap; }
:root.pf .pf-seg > span.on { background: var(--pf-seg-on); color: var(--pf-ink); box-shadow: var(--pf-seg-sh); }

/* windows: one hairline all the way round, radius 18, the platform's soft lift */
:root.pf .product .p-panel,
:root.pf .product .p-flow .p-panel { border-color: var(--pf-line); border-top-color: var(--pf-line); }
@media (hover: hover) and (pointer: fine) {
  :root.pf .product .p-panel:hover { border-color: var(--pf-ctl); }
}
:root.pf .product .rec-wrap,
:root.pf .product .ev-card,
:root.pf .product .ag-card { border-radius: 18px; box-shadow: var(--pf-win); }
:root.pf .product .pa-wrap,
:root.pf .product .imp-panel { border-radius: 18px; }
:root.pf .product .pr-frame { border-radius: 18px 18px 0 0; border-color: var(--pf-line); border-top-color: var(--pf-line); }
:root.pf .product .pr-frame-lift::before { border-radius: 18px; }
/* the morph frame keeps the crossing's hand-offs exact: same edge as both cards */
:root.pf .mx { border-radius: 18px; }
/* while the frame crosses, it owns the edge and the shadow (as in the page) */
:root.pf.mx-run .p-flow.in-view .rec-wrap,
:root.pf.mx-run .p-flow.in-view .ev-card { border-color: transparent; box-shadow: none; }

/* title bars: the platform's top bar is the content colour, not a tint */
:root.pf .product :is(.rec-bar, .ag-bar, .tw-bar, .ev-bar) {
  background: var(--pf-bg); border-bottom-color: var(--pf-line); color: var(--pf-ink2);
  font-family: var(--font-sans); }
:root.pf .product .pr-ship { background: var(--pf-panel); }

/* ── 2 · 1.0 the workspace ───────────────────────────────────────────────── */
:root.pf .pa-app { background: var(--pf-bg); }
:root.pf .pa-side { background: var(--pf-rail); border-right-color: transparent; gap: 10px; }
:root.pf .pa-side-brand { font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.025em; padding: 1px 4px 0 6px;
  justify-content: space-between; color: var(--pf-ink); }
:root.pf .pa-mark { display: none; }
:root.pf .pf-moon { width: 11px; height: 11px; fill: none; stroke: var(--pf-ink2); stroke-width: 1.3; stroke-linejoin: round; }
:root.pf .pa-nav { gap: 1px; }
:root.pf .pa-nav span { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 7px; border-radius: 8px;
  font-size: 0.6875rem; font-weight: 400; color: var(--pf-ink); background: transparent; }
:root.pf .pa-nav span.is-on,
:root.pf .pa-nav .is-on { background: var(--pf-sel); color: var(--pf-ink); font-weight: 500; }
:root.pf .pa-nav .pf-ic { width: 12px; height: 12px; color: var(--pf-ink); }
:root.pf .pf-kbd { margin-left: auto; font-style: normal; font-size: 0.5rem; font-weight: 500; color: var(--pf-ink3);
  background: var(--pf-soft2); border-radius: 4px; padding: 2px 4px; }
:root.pf .pf-assets { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow: hidden; }
:root.pf .pf-gl { margin: 6px 0 3px; padding: 0 7px; font-size: 0.5625rem; font-weight: 500; color: var(--pf-ink3); }
:root.pf .pf-ni { display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 7px; border-radius: 8px;
  font-size: 0.6875rem; color: var(--pf-ink); white-space: nowrap; }
:root.pf .pf-ni em { margin-left: auto; font-style: normal; font-size: 0.5625rem; color: var(--pf-ink3); }
:root.pf .pf-av { width: 17px; height: 17px; border-radius: 5px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; font-style: normal; font-size: 0.5rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--pf-ink2); background: var(--pf-soft2); }
:root.pf .pa-user { padding: 4px 6px; border-radius: 9px; }
:root.pf .pa-user .pa-av { width: 24px; height: 24px; }
:root.pf .product .pa-user .pa-av.is-lp,
:root.pf .hero-ws .pa-user .pa-av.is-lp { background: var(--pf-pic-bg); color: var(--pf-pic-fg); }
:root.pf .pa-un { font-weight: 500; }
:root.pf .pa-un i { color: var(--pf-ink3); }

/* the top bar's segmented control, as the platform has it */
:root.pf .pa-seg { align-self: center; gap: 1px; padding: 2px; border-radius: 999px; background: var(--pf-soft); }
:root.pf .pa-seg span { border-radius: 999px; font-weight: 500; color: var(--pf-ink2); padding: 4px 10px; }
:root.pf .pa-seg span.is-on { background: var(--pf-seg-on); color: var(--pf-ink); box-shadow: var(--pf-seg-sh); }
:root.pf .pa-doc b { font-weight: 600; letter-spacing: -0.01em; }
/* a state is a word with a shape mark, on a soft pill */
:root.pf .pa-draft { font-weight: 500; color: var(--pf-ink2); background: var(--pf-soft); border-radius: 999px; padding: 2px 8px 2px 7px; gap: 5px; }
:root.pf .pa-draft::before { width: 6px; height: 6px; background: transparent; box-shadow: inset 0 0 0 1.4px var(--pf-ink3); }

/* the chat: a soft right-hand bubble and a composer with the platform's lift */
:root.pf .pa-msg-b { background: var(--pf-soft); border-color: transparent; border-radius: 16px; color: var(--pf-ink); }
:root.pf .pa-composer { border-color: transparent; border-radius: 18px; background: var(--pf-elev); box-shadow: var(--pf-cmp); }
:root.pf .pa-composer.is-live { border-color: transparent; box-shadow: 0 0 0 1px var(--pf-ctl), 0 4px 12px -4px rgba(0,0,0,.08); }
:root.pf[data-theme="dark"] .pa-composer.is-live { border-color: transparent; }
:root.pf .pa-field-text:empty::before { color: var(--pf-ink3); }
:root.pf .pa-plus { width: 20px; height: 20px; margin: -2px 0; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; box-shadow: inset 0 0 0 1px var(--pf-line); color: var(--pf-ink); line-height: 1; }
:root.pf .pa-send { background: var(--pf-fill); color: var(--pf-on-fill); }
:root.pf .pa-send.is-armed { box-shadow: 0 0 0 3px var(--pf-sel); }
:root.pf .pa-enter { background: var(--pf-elev); border-color: var(--pf-line); color: var(--pf-ink2); border-radius: 6px; }

/* quick actions under the composer */
:root.pf .pa-note-ok-i svg { stroke: var(--pf-ok); }
:root.pf .pa-opt { border-radius: 8px; color: var(--pf-ink2); }
:root.pf .pa-opt.is-hot { background: var(--pf-hov); color: var(--pf-ink); }
:root.pf .pa-opt.is-on { background: var(--pf-sel); color: var(--pf-ink); }
:root.pf .cs-stage.is-split #pa-opt-tools { background: var(--pf-sel); color: var(--pf-ink);
  box-shadow: none; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  :root.pf #pa-opt-tools { background: var(--pf-sel); color: var(--pf-ink); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  :root.pf #cs-track.is-mpin #pa-opt-tools { background: transparent; color: var(--pf-ink2); }
  :root.pf #cs-track.is-mpin.is-b2 #pa-opt-tools { background: var(--pf-sel); color: var(--pf-ink); }
}

/* the tools sheet: a popover tile */
:root.pf .pa-connect { border-radius: 14px; background: var(--pf-elev); }
:root.pf .pa-connect.is-open { border-color: var(--pf-line); }
:root.pf .pa-connect-head { border-bottom-color: var(--pf-lines); }
:root.pf .pa-src { border-bottom-color: var(--pf-lines); }
:root.pf .pa-src.is-hot { background: var(--pf-hov); }
:root.pf .pa-src-i { border-radius: 6px; font-family: var(--font-sans); }
:root.pf .pa-src-btn { font-family: var(--font-sans); font-weight: 500; color: var(--pf-ink);
  background: transparent; border-color: var(--pf-ctl); border-radius: 999px; }
:root.pf .pa-src.is-linked .pa-src-btn { background: var(--pf-ok-soft); border-color: transparent;
  color: color-mix(in srgb, var(--pf-ok) 80%, var(--pf-ink)); }

/* key points: the platform's fields panel */
:root.pf .pa-keys { background: var(--pf-panel); border-left-color: var(--pf-lines); }
:root.pf .pa-keys-title { font-weight: 600; color: var(--pf-ink); }
:root.pf .pa-grp-left { font-weight: 500; color: var(--pf-ink3); }
:root.pf .pa-grp.is-done .pa-grp-left,
:root.pf .pa-grp-row.is-done .pa-grp-left { color: color-mix(in srgb, var(--pf-ok) 85%, var(--pf-ink)); }
:root.pf .pa-f, :root.pf .pa-grp-row { border-bottom-color: var(--pf-lines); }
:root.pf .pa-k { color: var(--pf-ink3); font-weight: 500; }
:root.pf .pa-v { color: var(--pf-ink4); font-style: normal; }
:root.pf .pa-f.is-set .pa-v { color: var(--pf-ink); font-weight: 500; }
:root.pf .pa-grp-row { color: var(--pf-ink); }

:root.pf .p-terminal-footer { font-family: var(--font-sans); color: var(--pf-ink3); }
:root.pf .p-replay-btn { font-family: var(--font-sans); font-weight: 500; color: var(--pf-ink);
  border-color: var(--pf-ctl); }
@media (hover: hover) and (pointer: fine) {
  :root.pf .p-replay-btn:hover { background: var(--pf-hov); border-color: var(--pf-ctl); color: var(--pf-ink); }
}
/* the hero's fade toward the page edge fades to the window's own colour */
:root.pf .ws-fx #p-terminal::after {
  background: linear-gradient(to right, transparent 46%, var(--pf-bg) 100%),
              linear-gradient(to bottom, transparent calc(100% - var(--ws-fb, 40%)), var(--pf-bg) 100%); }
@media (max-width: 900px) { :root.pf .ws-fx #p-terminal::after { background: none; } }
/* the still copy used for reduced motion sits in the hero, outside .product */
:root.pf .hero-ws .pa-wrap { background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: 18px; }

/* ── 3 · 2.0 the record ──────────────────────────────────────────────────── */
:root.pf .rec-bar { gap: 10px; }
:root.pf .rec-name { font-weight: 500; letter-spacing: -0.005em; color: var(--pf-ink); }
:root.pf .rec-tab { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: 500;
  color: var(--pf-ink2); background: var(--pf-soft); border-color: transparent; border-radius: 999px; }
:root.pf .rec-view::before { background: linear-gradient(to bottom, var(--pf-bg), transparent); }
:root.pf .rec-view::after { background: linear-gradient(to top, var(--pf-bg), transparent); }
:root.pf .rec-grp-top b { font-weight: 600; color: var(--pf-ink); }
:root.pf .rec-chev { border-color: var(--pf-ink3); }
/* definition tiles: soft panel fill, a hairline, radius 16 at this scale */
:root.pf .rec-box { background: var(--pf-bg); border-color: var(--pf-line); border-radius: 16px; }
:root.pf .rec-row { border-bottom-color: var(--pf-lines); }
:root.pf .rec-lbl b { font-weight: 500; color: var(--pf-ink3); }
:root.pf .rec-val { color: var(--pf-ink2); }
:root.pf .rec-val b { font-weight: 500; color: var(--pf-ink); }
:root.pf .rec-pen { color: var(--pf-ink4); }
:root.pf .rec-none { font-style: normal; color: var(--pf-ink4); }
:root.pf .rec-btn { border-radius: 999px; border-color: var(--pf-ctl); background: transparent; color: var(--pf-ink); font-weight: 500; }
:root.pf .rec-btn.is-dark { background: var(--pf-fill); border-color: var(--pf-fill); color: var(--pf-on-fill); }
/* Process */
:root.pf .rec-step { background: var(--pf-bg); border-color: var(--pf-line); border-radius: 12px; }
:root.pf .rec-step.is-hot { background: var(--pf-hov); border-color: var(--pf-ctl); }
:root.pf .rec-step.is-hit { background: var(--pf-sel); }
:root.pf .rec-vis-i, :root.pf .rec-vis-go { color: var(--pf-ink3); }
:root.pf .rec-step-t b { font-weight: 500; color: var(--pf-ink); }
/* History */
:root.pf .rec-hdot { background: var(--pf-dev); }
:root.pf .rec-ht b { font-weight: 500; }
:root.pf .rec-ht i { color: var(--pf-ink3); }
:root.pf .rec-hv { font-weight: 500; color: var(--pf-ink2); background: var(--pf-soft); }
:root.pf .rec-hlog { color: var(--pf-acc); font-weight: 500; }
/* Team */
:root.pf .rec-team-top { border-bottom-color: var(--pf-line); }
:root.pf .rec-team-top b { font-weight: 600; }
:root.pf .rec-team-top span { color: var(--pf-acc); font-weight: 500; }
:root.pf .rec-mem-t b { font-weight: 500; }
:root.pf .rec-mem-t span { color: var(--pf-ink3); }
:root.pf .rec-av { font-weight: 600; }
:root.pf .rec-role { font-weight: 500; color: var(--pf-ink2); background: var(--pf-soft); }
:root.pf .rec-role.is-pending { background: var(--pf-acc-soft); color: color-mix(in srgb, var(--pf-acc) 82%, var(--pf-ink)); }
:root.pf .rec-input { border-color: var(--pf-line); border-radius: 12px; color: var(--pf-ink3); }
:root.pf .rec-input.is-live { border-color: var(--pf-ctl); box-shadow: 0 0 0 3px var(--pf-hov); }
:root.pf .rec-q { color: var(--pf-ink); }
:root.pf .rec-caret { background: var(--pf-ink); }
:root.pf .rec-tok { background: var(--pf-soft); color: var(--pf-ink); }
:root.pf .rec-add-btn { border-radius: 999px; font-weight: 500; }
:root.pf .rec-add-btn.is-ready { background: var(--pf-fill); color: var(--pf-on-fill); }
:root.pf .rec-drop { background: var(--pf-elev); border-color: var(--pf-line); border-radius: 14px; box-shadow: var(--pf-sh4); }
:root.pf .rec-drop-top { color: var(--pf-ink3); }
:root.pf .rec-drop-ok { font-family: var(--font-sans); font-weight: 500; color: color-mix(in srgb, var(--pf-ok) 85%, var(--pf-ink)); }
:root.pf .rec-opt { border-radius: 10px; }
:root.pf .rec-opt.is-hot { background: var(--pf-hov); }
:root.pf .rec-opt.is-hit { background: var(--pf-sel); }
:root.pf .rec-cursor svg { fill: #0d0d0d; stroke: #fff; }
/* the process diagram */
:root.pf .rec-diag { background: var(--pf-bg); }
:root.pf .rec-diag-bar { border-bottom-color: var(--pf-line); }
:root.pf .rec-diag-bar b { font-weight: 600; }
:root.pf .pd-phases span { color: var(--pf-ink3); }
:root.pf .pd-phases span.is-on { color: color-mix(in srgb, var(--pf-dev) 80%, var(--pf-ink)); }
:root.pf .pd-phases span.is-on::before { background: var(--pf-dev); }
:root.pf .pd-row + .pd-row { border-top-color: var(--pf-lines); }
:root.pf .pd-task { border-radius: 999px; }
:root.pf .pd-task.is-done { background: var(--pf-ok-soft); color: color-mix(in srgb, var(--pf-ok) 80%, var(--pf-ink)); }
:root.pf .pd-task.is-wait { background: var(--pf-soft); color: var(--pf-ink2); }
:root.pf .pd-task.is-live { background: var(--pf-dev-soft); color: color-mix(in srgb, var(--pf-dev) 80%, var(--pf-ink)); }
:root.pf .pd-task.is-ai { background: var(--pf-soft); color: var(--pf-ink); }

/* ── 4 · evidence: the Design tab's chat ────────────────────────────────── */
/* the bar keeps its measured height: one fixed line box, the pill hangs outside it */
:root.pf .ev-bar > * { line-height: 14px; }
:root.pf .ev-bar .pf-crumb { font-size: 0.6875rem; }
:root.pf .ev-step { font-family: var(--font-sans); font-size: 0.625rem; font-weight: 500; color: var(--pf-ink);
  background: var(--pf-seg-on); box-shadow: var(--pf-seg-sh), 0 0 0 3px var(--pf-soft); border-radius: 999px;
  padding: 2px 9px; margin: -2px 0 -2px auto; }
/* the question is a soft bubble on the right; the answer is plain text */
:root.pf .ev-msg:first-child { flex-direction: row-reverse; }
:root.pf .ev-msg:first-child .ev-av { display: none; }
:root.pf .ev-msg:first-child .ev-bub { background: var(--pf-soft); border-color: transparent; border-radius: 16px;
  padding-left: 13px; padding-right: 13px; }
:root.pf .ev-msg + .ev-msg .ev-av { display: none; }
:root.pf .ev-msg + .ev-msg .ev-bub { background: transparent; border-color: transparent; }
/* the "checked …" line is paid for inside the thread, so its measured height (and
   the column's centring) stays where the page had it. On a phone the thread is
   already tight and runs its own spacing, so the line is left out there. */
@media (min-width: 621px) {
  :root.pf .ev-msg + .ev-msg .ev-bub { padding-left: 2px; padding-top: 2px; }
  :root.pf .ev-thread { gap: 8px; }
}
:root.pf .ev-bub { color: var(--pf-ink); }
:root.pf .pf-think { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 0.625rem; color: var(--pf-ink3); }
:root.pf .pf-think i { font-style: normal; color: var(--pf-ink4); }
:root.pf .ev-answer { color: var(--pf-ink); }
:root.pf .ev-answer b { font-weight: 600; }
:root.pf :is(.ev-c, .pr-ref) { background: var(--pf-soft); color: var(--pf-ink2); }
/* on the grey side panel a chip needs its own white ground to read */
:root.pf .ev-side .ev-c { background: var(--pf-bg); box-shadow: inset 0 0 0 1px var(--pf-line); }
:root.pf .ev-tbl .nct { white-space: nowrap; }
:root.pf .ev-srcs { background: var(--pf-bg); border-color: var(--pf-line); color: var(--pf-ink); }
:root.pf .ev-srcs-st i { box-shadow: 0 0 0 1.5px var(--pf-bg); }
:root.pf :is(.pa-src-i, .rec-drop-i) { background: var(--pf-soft); color: var(--pf-ink2); }
:root.pf .pa-src-i.is-logo { background: none; }
:root.pf .pa-connect-opt { color: var(--pf-ink3); font-size: 0.6875rem; }
/* the side panel: #f9f9f9, pill tabs */
:root.pf .ev-side { background: var(--pf-panel); border-left-color: transparent; }
:root.pf .ev-side-tabs { align-self: flex-start; gap: 1px; margin: 8px 10px 0; padding: 2px; border-radius: 999px;
  background: var(--pf-soft); }
:root.pf .ev-tab { border-radius: 999px; padding: 3px 11px 4px; font-weight: 500; color: var(--pf-ink2); }
:root.pf .ev-tab::after { display: none; }
:root.pf .ev-tab.is-on { background: var(--pf-seg-on); color: var(--pf-ink); font-weight: 500; box-shadow: var(--pf-seg-sh); }
:root.pf .ev-pane-h { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 600;
  font-size: 0.6875rem; color: var(--pf-ink); }
:root.pf .ev-pane-h em { color: var(--pf-ink3); font-weight: 400; opacity: 1; letter-spacing: 0; }
:root.pf .ev-lede { color: var(--pf-ink2); }
:root.pf .ev-rec { background: var(--pf-bg); border-color: var(--pf-line); border-radius: 14px; }
:root.pf .ev-nct { color: var(--pf-ink3); }
:root.pf .ev-rec-t { font-weight: 500; }
:root.pf .ev-pills span { font-weight: 500; background: var(--pf-soft); color: var(--pf-ink2); }
:root.pf .ev-rec-d { color: var(--pf-ink2); }
:root.pf .ev-more { color: var(--pf-acc); font-weight: 500; }
/* the table: the product's list grammar — quiet headers, hairline rows, one row lifted */
:root.pf .ev-tbl th { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--pf-ink3); border-bottom-color: var(--pf-line); }
:root.pf .ev-tbl td { border-bottom-color: var(--pf-lines); color: var(--pf-ink2); }
:root.pf .ev-tbl .nct { color: var(--pf-ink); }
:root.pf .ev-tbl .is-ours td { background: var(--pf-sel); color: var(--pf-ink); font-weight: 600; }
:root.pf .ev-tbl .is-ours .nct, :root.pf .ev-tbl .is-ours .nct i { color: var(--pf-ink); }
:root.pf .ev-tbl .is-ours .nct i { color: var(--pf-ink3); opacity: 1; }
:root.pf .ev-tbl .is-ours td:first-child { border-radius: 10px 0 0 10px; }
:root.pf .ev-tbl .is-ours td:last-child { border-radius: 0 10px 10px 0; }
/* the ask bar: the platform composer, drawn inside the bar so the bar keeps its height */
:root.pf .ev-ask { position: relative; background: var(--pf-bg); border-top-color: var(--pf-line); }
:root.pf .ev-ask::before { content: ''; position: absolute; inset: 5px 7px; border-radius: 999px; pointer-events: none;
  box-shadow: var(--pf-cmp); background: var(--pf-elev); }
:root.pf .ev-ask > * { position: relative; }
:root.pf .ev-plus { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--pf-line); color: var(--pf-ink); }
:root.pf .ev-q::placeholder { color: var(--pf-ink3); }
:root.pf .ev-send { background: var(--pf-fill); color: var(--pf-on-fill); }

/* ── 5 · Readiness (the impact page) ─────────────────────────────────────── */
:root.pf .imp-panel { background: var(--pf-bg); }
:root.pf .ag-mark { display: none; }
:root.pf .imp-crumbs span { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 8px;
  font-weight: 500; color: var(--pf-ink2); background: var(--pf-soft); }
:root.pf .imp-crumbs .pf-state { color: var(--pf-ink); }
:root.pf .imp-title { font-weight: 600; letter-spacing: -0.02em; color: var(--pf-ink); }
:root.pf .imp-card { background: var(--pf-bg); border-color: var(--pf-line); border-radius: 16px; }
:root.pf .imp-t { font-weight: 500; color: var(--pf-ink2); }
:root.pf .imp-num { font-weight: 600; letter-spacing: -0.03em; color: var(--pf-ink); }
:root.pf .imp-row { border-top-color: var(--pf-lines); }
:root.pf .imp-row em { font-size: 0.6875rem; }
:root.pf .imp-row em { color: var(--pf-ink); font-weight: 500; }
:root.pf .imp-row b { color: var(--pf-ink); font-weight: 400; }
:root.pf .imp-link { color: var(--pf-acc); }
:root.pf .imp-fig { --fig-faint: var(--pf-lines); }
:root.pf .imp-fig .ln-faint { stroke: var(--pf-line); }
:root.pf .imp-lbl text { fill: var(--pf-ink3); }

/* ── 6 · the three conversations and the history they merge into ─────────── */
:root.pf .tw-card, :root.pf .tw-final, :root.pf .sg-card { background: var(--pf-bg); border-color: var(--pf-line); border-radius: 18px; }
:root.pf .tw-card { box-shadow: 0 1px 2px rgba(13,13,13,.03), var(--pf-sh4); }
:root.pf .tw-final, :root.pf .sg-card { box-shadow: 0 1px 2px rgba(13,13,13,.03), var(--pf-sh4); }
:root.pf .tw-bar b { font-weight: 500; color: var(--pf-ink); }
:root.pf .tw-bar i { color: var(--pf-ink3); }
:root.pf .tw-av { font-weight: 600; }
:root.pf .tw-ask { background: var(--pf-soft); border-color: transparent; border-radius: 14px; color: var(--pf-ink); }
:root.pf .tw-ask i { color: var(--pf-on-fill); background: var(--pf-fill); border-color: var(--pf-fill); border-radius: 999px; }
:root.pf .tw-rep { color: var(--pf-ink2); }
:root.pf .tw-rep::before { background: var(--pf-ink3); }
:root.pf .tw-rep b { color: var(--pf-ink); }
:root.pf .tw-out { border-top-color: var(--pf-lines); }
:root.pf .tw-f { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pf-ink3); }
:root.pf .tw-d s { color: var(--pf-ink4); }
:root.pf .tw-d em { color: var(--pf-ink4); }
/* in a thread the change is still proposed: the one blue */
:root.pf .tw-card .tw-d b { color: var(--pf-acc); font-weight: 600; }
:root.pf .tw-final .tw-d b { color: var(--pf-ink); font-weight: 600; }
:root.pf .tw-from { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--pf-ink3); font-weight: 500; }
:root.pf :is(.tw-final-h, .sg-head) { border-bottom-color: var(--pf-line); }
:root.pf :is(.tw-final-h, .sg-head) b { font-weight: 600; color: var(--pf-ink); }
:root.pf .tw-row { border-bottom-color: var(--pf-lines); }
:root.pf .tw-t { color: var(--pf-ink3); }
/* the record's rows at the windows' reading size, over the small-print floor below */
:root.pf .tw-final .tw-row .tw-f { font-size: 0.875rem; color: var(--pf-ink2); }
:root.pf .tw-final .tw-row .tw-t { font-size: 0.8125rem; }
/* the dashboard reading a card carries on its way down */
:root.pf .tw-dash .imp-card { border: 0; background: none; border-radius: 0; }

/* ── 7 · sign-off ────────────────────────────────────────────────────────── */
/* the block gets a tile behind it without a pixel of layout: a pseudo-element */
:root.pf .sg-pill { font-size: 0.8125rem; font-weight: 500; color: var(--pf-ink); background: var(--pf-soft);
  border-color: transparent; border-radius: 999px; }
:root.pf .sg-pill::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-dev);
  transition: width var(--duration-slow) var(--p-ease), opacity var(--duration-slow) var(--p-ease); }
:root.pf .sg-card.is-locked .sg-pill { color: var(--pf-ink); background: var(--pf-soft); border-color: transparent; }
:root.pf .sg-card.is-locked .sg-pill::before { width: 0; opacity: 0; margin-right: -8px; }
:root.pf .sg-lock { color: var(--pf-ink2); }
/* "In Design" is set by the script; the platform writes states in sentence case */
:root.pf #sg-status { text-transform: lowercase; }
:root.pf #sg-status::first-letter { text-transform: uppercase; }
:root.pf .sg-av { font-weight: 600; }
:root.pf .sg-mark { background: var(--pf-bg); }
:root.pf .sg-ring { stroke: var(--pf-bar2); }
:root.pf .sg-rev.is-signed .sg-ring { stroke: var(--pf-ok); }
:root.pf .sg-check { stroke: var(--pf-ok); }
:root.pf .sg-fn { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pf-ink4); }
:root.pf .sg-rev.is-signed .sg-fn { color: var(--pf-ink2); }

/* ── 8 · Workflows → New agent ───────────────────────────────────────────── */
:root.pf .ag-body { background: var(--pf-bg); }
:root.pf .ag-side { background: var(--pf-rail); border-right-color: transparent; }
:root.pf .ag-side span { color: var(--pf-ink); border-radius: 10px; }
:root.pf .ag-side .ag-side-new { color: var(--pf-ink) !important; font-weight: 500; background: var(--pf-sel);
  border-color: transparent; box-shadow: none; }
:root.pf .ag-main { background: var(--pf-bg); }
:root.pf .ag-title { font-weight: 600; letter-spacing: -0.02em; }
:root.pf .ag-sub { color: var(--pf-ink2); }
:root.pf .ag-lbl { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pf-ink3); }
:root.pf .ag-field { border-color: var(--pf-line); border-radius: 12px; color: var(--pf-ink); }
:root.pf .ag-field.is-live { border-color: var(--pf-acc); box-shadow: 0 0 0 3px var(--pf-acc-soft); }
:root.pf[data-theme="dark"] .ag-field.is-live { border-color: var(--pf-acc); }
:root.pf .ag-caret { background: var(--pf-ink); }
:root.pf .ag-hint { color: var(--pf-ink3); }
:root.pf .ag-file { background: var(--pf-soft); border-radius: 999px; color: var(--pf-ink); }
:root.pf .ag-ft { font-family: var(--font-sans); border-radius: 4px; letter-spacing: 0; padding-left: 3px; padding-right: 3px; }
:root.pf .ag-add { color: var(--pf-ink2); border-color: var(--pf-ctl); border-radius: 999px; }
:root.pf .ag-check { color: var(--pf-ink); }
:root.pf .ag-check i { border-color: var(--pf-ctl); border-radius: 5px; }
:root.pf .ag-check.is-on i { background: var(--pf-fill); border-color: var(--pf-fill); }
:root.pf .ag-check.is-on i::after { border-color: var(--pf-on-fill); }
:root.pf .ag-check.is-off { color: var(--pf-ink3); }
:root.pf .ag-route { border-top-color: var(--pf-line); color: var(--pf-ink2); }
:root.pf .ag-pick { border-color: var(--pf-ctl); border-radius: 999px; color: var(--pf-ink); }
:root.pf .ag-pick i { color: var(--pf-ink3); }
:root.pf .ag-cancel { color: var(--pf-ink); }
:root.pf .ag-create { background: var(--pf-fill); color: var(--pf-on-fill); font-weight: 500; }
:root.pf .pr-agl .ag-create.is-hot { box-shadow: 0 0 0 4px var(--pf-sel); }

/* ── 9 · the protocol and the review pass ────────────────────────────────── */
:root.pf .pr-frame { background: var(--pf-bg); }
:root.pf .pr-top { background: var(--pf-bg); border-bottom-color: var(--pf-line); }
:root.pf .pr-crumb { color: var(--pf-ink2); }
:root.pf .pr-crumb i { color: var(--pf-ink4); }
:root.pf .pr-id b { font-weight: 600; letter-spacing: -0.02em; }
:root.pf .pr-meta { color: var(--pf-ink3); }
:root.pf .pf-btn { margin-left: auto; align-self: center; flex: none; display: inline-flex; align-items: center; height: 28px;
  padding: 0 13px; border-radius: 999px; background: var(--pf-fill); color: var(--pf-on-fill); font-size: 0.75rem; font-weight: 500; }
:root.pf .pr-ship { border-bottom-color: var(--pf-line); }
:root.pf .pr-int { background: var(--pf-bg); border-color: var(--pf-line); color: var(--pf-ink); }
:root.pf .pr-side { border-left-color: var(--pf-lines); background: var(--pf-panel); }
:root.pf .pr-h { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pf-ink3); }
:root.pf .pr-doc-h { font-weight: 600; }
:root.pf .pr-doc-p { color: var(--pf-ink2); }
:root.pf .pr-list li { color: var(--pf-ink); }
:root.pf .pr-list u { font-weight: 500; box-shadow: inset 0 -1px 0 var(--pf-ctl); }
/* the text being read, and the proposed wording in the one blue */
:root.pf .pr-w.is-sel { background: var(--pf-sel-text); color: inherit; }
:root.pf .pr-mark-t.is-kept .pr-w.is-sel { background: var(--pf-ok-soft); }
:root.pf[data-theme="dark"] .pr-sel { background: transparent; }
:root.pf[data-theme="dark"] .pr-mark-t.is-kept .pr-sel,
:root.pf[data-theme="dark"] .pr-mark-t.is-lit .pr-sel { background: transparent; }
:root.pf .pr-mk { font-weight: 500; box-shadow: inset 0 -1px 0 var(--pf-ctl); }
:root.pf .pr-mk .n { color: var(--pf-acc); }
:root.pf .pr-mk.is-prop .o { color: var(--pf-ink4); }
:root.pf .pr-mk.is-ok .n { color: color-mix(in srgb, var(--pf-ok) 85%, var(--pf-ink)); }
:root.pf .pr-mk.is-ok { box-shadow: inset 0 -1px 0 var(--pf-ok); }
:root.pf .pr-mk.is-done .n { color: var(--pf-ink); }
:root.pf .pr-mk.is-done { box-shadow: inset 0 -1px 0 var(--pf-ctl); }
:root.pf[data-theme="dark"] .pr-w.is-sel .pr-mk .n { color: var(--pf-acc); }
/* agents */
:root.pf .pr-agent span { color: var(--pf-ink3); }
:root.pf .pr-agent b { font-weight: 500; color: var(--pf-ink); }
:root.pf .pr-agent.is-live b { color: var(--pf-ink); }
:root.pf .pr-agent.is-live em::after { color: var(--pf-dev); }
:root.pf .pr-dot.is-a { background: var(--pf-ink3); }
:root.pf .pr-dot.is-b { background: var(--pf-ink3); }
:root.pf .pr-dot.is-c { background: var(--pf-ink3); }
:root.pf .pr-dot.is-d { background: var(--pf-ink3); }
:root.pf .pr-agent.is-live .pr-dot { background: var(--pf-dev); }
/* a finding: the platform's "Proposed change" tile */
:root.pf .pr-rev { background: var(--pf-bg); border-color: var(--pf-line); border-radius: 14px; }
:root.pf .pr-rev-top b { font-weight: 500; }
:root.pf .pr-rev-top em { color: var(--pf-ink3); }
:root.pf .pr-rev p { color: var(--pf-ink2); }
:root.pf .pr-rev p s { color: var(--pf-ink4); }
:root.pf .pr-act { border-radius: 999px; font-weight: 500; border-color: transparent; background: var(--pf-soft); color: var(--pf-ink); }
:root.pf .pr-act.is-ok { background: var(--pf-fill); border-color: var(--pf-fill); color: var(--pf-on-fill); }
:root.pf .pr-act.is-no { background: transparent; border-color: var(--pf-ctl); color: var(--pf-ink); font-weight: 500; }
:root.pf .pr-act.is-hot { box-shadow: 0 0 0 3px var(--pf-sel); }
:root.pf .pr-rev.is-ok .pr-act.is-ok { background: var(--pf-ok-soft); border-color: transparent;
  color: color-mix(in srgb, var(--pf-ok) 80%, var(--pf-ink)); }
:root.pf .pr-rev.is-no .pr-act.is-no { background: var(--pf-bad-soft); border-color: transparent;
  color: color-mix(in srgb, var(--pf-bad) 80%, var(--pf-ink)); }
:root.pf .pr-rev-out { color: var(--pf-ink2); }
/* comments */
:root.pf .pr-cm { border-top-color: var(--pf-line); }
:root.pf .pr-cm-top b { font-weight: 500; }
:root.pf .pr-cm-top em { color: var(--pf-ink3); }
:root.pf .pr-av { font-weight: 600; }
:root.pf .pr-cm p { color: var(--pf-ink2); }
:root.pf .pr-cm-tag { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--pf-ink2); background: var(--pf-soft); border-color: transparent; border-radius: 999px; }
:root.pf .pr-cm.is-done .pr-cm-tag { background: var(--pf-ok-soft); border-color: transparent;
  color: color-mix(in srgb, var(--pf-ok) 80%, var(--pf-ink)); }
:root.pf .pr-ver.is-new { color: var(--pf-acc); }
:root.pf .pr-ibeam svg { stroke: #0d0d0d; }
:root.pf[data-theme="dark"] .pr-ibeam svg { stroke: #fff; }

/* ── 10 · the site nav, as on the other v2 mockups (colour and edge only) ──── */
:root.pf .nav .nav-inner { background: rgba(249,249,249,.78);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.10), 0 4px 12px -4px rgba(0,0,0,.10); }
:root.pf .nav.nav--solid .nav-inner { background: rgba(249,249,249,.92);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.10), 0 4px 12px -4px rgba(0,0,0,.10); }
:root.pf[data-theme="dark"] .nav .nav-inner,
:root.pf[data-theme="dark"] .nav:not(.nav--solid) .nav-inner { background: rgba(24,24,24,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px -4px rgba(0,0,0,.4); }
:root.pf[data-theme="dark"] .nav.nav--solid .nav-inner { background: rgba(24,24,24,.92); }
:root.pf .nav .nav-links > a, :root.pf .nav .dd-label { color: #5d5d5d; }
:root.pf[data-theme="dark"] .nav .nav-links > a, :root.pf[data-theme="dark"] .nav .dd-label { color: #b4b4b4; }

/* ── 11 · stacked layouts: the added title-bar controls stand down where the bar
   would have to wrap to hold them (which would change the window's height) ─── */
@media (max-width: 900px) {
  :root.pf .pf-btn { display: none; }
}
@media (max-width: 620px) {
  :root.pf .pf-seg { display: none; }
  :root.pf .pf-think { display: none; }
}

/* ── 12 · a floor under the small print ──────────────────────────────────────
   Labels, captions and meta inside the windows were set as small as 8px. Anything
   that is read, rather than recognised as a glyph (avatar initials, file-type tags,
   the ⌘K key), now stands at 10px or more. */
:root.pf :is(.rec-hv, .pr-cm-tag, .ev-grp, .ev-grp span, .ev-tbl th, .pf-gl, .pf-ni em, .pa-un i,
  .pa-src-t span, .pa-src-btn, .pa-enter, .pa-grp-left, .pa-k, .rec-ht i, .rec-drop-ok,
  .ev-row-m, .ev-row-m .ev-nct, .ev-stats span, .ev-stats small, .ev-sub em, .ev-tbl .nct i, .tw-from, .tw-ask i,
  .pr-h, .pr-rev-top em, .pr-cm-top em, .tw-f, .tw-t, .ag-lbl) { font-size: 0.625rem; }
:root.pf .ev-strip .lb { font-size: 12px; }
:root.pf .imp-lbl text { font-size: 9.75px; }

/* ── 13 · one type scale for every window ────────────────────────────────────
   The windows had grown their own small sizes, 8 to 11px, set one element at a time,
   so the same kind of thing (a breadcrumb, a tab, a source tag) was a different size
   in each window. Every window now reads on one scale, a step up from before:
     11px  tags, captions, table cells, field labels, counts
     12px  window chrome (breadcrumbs, tabs, navigation) and secondary text
     13px+ body, as it was
   #main in the selector lifts these over the per-window rules they replace. Where a
   window no longer fitted, its layout was reworked rather than the type taken back. */
:root.pf #main :is(
  .pf-gl, .pf-ni em, .pa-un, .pa-un i, .pa-draft, .pa-grp-left, .pa-k, .pa-grp-row > span, .pa-src-t span,
  .pa-src-btn, .pa-enter,
  .rec-tab, .rec-ht i, .rec-hv, .rec-hlog, .rec-drop-ok,
  .ev-step, .pf-think, .ev-stats span, .ev-stats small, .ev-sub, .ev-dom span,
  .ev-dom b, .ev-tbl th, .ev-tbl td, .ev-tbl .nct i, .ev-send, .ev-grp, .ev-grp span, .ev-row-m, .ev-row-m .ev-nct,
  .imp-crumbs span, .pf-state, .tw-ask i, .tw-bar i, .tw-from,
  .ag-lbl, .pr-h, .pr-rev-top em, .pr-cm-top em, .pr-cm-tag,
  .pa-seg span, .pf-seg span, .ev-tab
) { font-size: 0.6875rem; }
:root.pf #main :is(
  .pf-crumb, .pr-crumb, .pa-nav span, .pf-ni, .pa-note-ok, .pa-opt, .pa-keys-title, .pa-v, .pa-connect-head b, .pa-src-t b,
  .rec-pen, .rec-none, .rec-btn, .rec-ht b, .rec-mem-t span, .rec-role,
  .ev-bub, .ev-pane-h, .ev-pane-h em, .ev-row-t,
  .imp-row b, .imp-row em, .imp-link, .tw-rep, .tw-bar b,
  .pr-ver, .pr-when, .pr-agent em, .pr-act, .pr-rev-out i
) { font-size: 0.75rem; }