/* ══════════════════════════════════════════════════════════════
   PLX: PPG in the register of cariara.com/prep/library and
   /prep/flashcards (apps/web/src/pages/prep/problemLibrary.css, its
   --plx-* tokens ported here, not imported). Loaded last, for both skins:
   the SolveMe frame (html.tab-codeme, cariara.com/pg) and /tools/pg alone.

   Google Sans for display (titles and numbers, weight 500, tight
   tracking), Roboto for text, Roboto Mono for counts and code. White
   canvas and greys with Google blue as the one accent; the Google four
   only for meaning (difficulty, status, progress, a topic's tone). Round
   pills for chips, counts in mono, the open chip in ink. Square cards on
   1px hairlines; hover is Google elevation-1. Search is one big pill. The
   Gemini backdrop: framed, the page's own (the frame is transparent);
   alone, a still four-colour glow on the body. Dark values on the
   Material dark surfaces #22272E / #2D333B / #373E47, lines #444C56.

   Rules read  html body :is(<selectors>, #px#px#px#px#px)  so they outrank
   every older layer's :is(…, #gz#gz#gz#gz) / :is(…, #cm#cm#cm) (#px is
   never in the page). Tokens use html:not(#px) for the same reason.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
html:not(#px) {
  --px-canvas: #FFFFFF;
  --px-surface: #FFFFFF;
  --px-sunk: #F8FAFD;
  --px-sunk-2: #F0F4F9;
  --px-line: #E1E3E1;
  --px-line-hover: #C4C7C5;
  --px-line-strong: #1F1F1F;
  --px-ink: #1F1F1F;
  --px-text: #444746;
  --px-text-3: #5E5E5E;
  --px-blue: #0077FF;
  --px-blue-hover: #1765CC;
  --px-blue-soft: #EEF3FE;
  --px-on-blue: #FFFFFF;
  --px-red-soft: #F2F7FF;
  --px-yellow-soft: #F7FDE6;
  --px-green-soft: #EEFBF6;
  --px-focus: rgba(0, 119, 255, .4);
  --px-elev: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --px-display: 'Google Sans', Roboto, system-ui, sans-serif;
  --px-text-f: Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --px-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* the older layers' names, on the same values */
  --font-sans: var(--px-text-f);
  --font-mono: var(--px-mono);
  --lv-display: var(--px-display);
  --m3-display: var(--px-display);
  --cmk-display: var(--px-display);
  --gz-display: var(--px-display);
  --gz-text: var(--px-text-f);
  --ground: var(--px-canvas);
  --surface-1: var(--px-surface);
  --surface-2: var(--px-sunk);
  --surface-3: var(--px-sunk-2);
  --border: var(--px-line);
  --hairline: var(--px-line);
  --control: var(--px-line-hover);
  --border-hover: var(--px-line-hover);
  --text-primary: var(--px-ink);
  --text-secondary: var(--px-text);
  --text-dimmed: var(--px-text-3);
  --accent: var(--px-blue);
  --accent-hover: var(--px-blue-hover);
  --accent-text: var(--px-blue);
  --accent-subtle: var(--px-blue-soft);
  --cmk-blue-t: var(--px-blue-soft);
  --cmk-on-accent: var(--px-on-blue);
  --cmk-elev-1: var(--px-elev);
  --gz-elev: var(--px-elev);
  --g-blue-text: #0077FF;
  --g-green-text: #00866B;
  --easy: #00866B;
  --syn-keyword: #0077FF;
  --syn-string: #00866B;
  --syn-number: #2B83EC;
  --syn-comment: #5E5E5E;
  --syn-def: #5E8C0A;
  --syn-builtin: #0077FF;
  --syn-operator: #5E5E5E;
  --accent-hover-dark: #1765CC;
}
html[data-scheme='dark']:not(#px) {
  --px-canvas: #22272E;
  --px-surface: #2D333B;
  --px-sunk: #373E47;
  --px-sunk-2: #444C56;
  --px-line: #444C56;
  --px-line-hover: #545D68;
  --px-line-strong: #E6EDF3;
  --px-ink: #E6EDF3;
  --px-text: #B6C2CF;
  --px-text-3: #9DA9B6;
  --px-blue: #5AA2FF;
  --px-blue-hover: #D4E0FC;
  --px-blue-soft: rgba(90, 162, 255, .14);
  --px-on-blue: #10161E;
  --px-red-soft: rgba(156, 198, 255, .14);
  --px-yellow-soft: rgba(154, 214, 26, .14);
  --px-green-soft: rgba(0, 200, 150, .14);
  --px-focus: rgba(90, 162, 255, .5);
  --px-elev: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .25);
  --g-blue-text: #5AA2FF;
  --g-green-text: #00C896;
  --easy: #00C896;
  --m3-tonal: rgba(90, 162, 255, .14);
  --gz-blue-t: rgba(90, 162, 255, .14);
  --gd-blue-t: rgba(90, 162, 255, .14);
  --pz-blue-t: rgba(90, 162, 255, .14);
  --syn-keyword: #5AA2FF;
  --syn-string: #00C896;
  --syn-number: #9CC6FF;
  --syn-comment: #9DA9B6;
  --syn-def: #9AD61A;
  --syn-builtin: #5AA2FF;
  --syn-operator: #B6C2CF;
}

/* ── The canvas: the Gemini backdrop ─────────────────────────── */
/* Framed: transparent all the way down, so cariara.com's backdrop (RootShell
   GEMINI_PAGES) shows through; both documents share one colour scheme, so
   the browser draws no backdrop of its own behind the frame. */
html.tab-codeme:not(#px) { --ground: transparent; color-scheme: light; }
html.tab-codeme[data-scheme='dark']:not(#px) { color-scheme: dark; }
html.tab-codeme body :is(body, .gdv, .plv, .chvv, .rmv, .layout, .pgv, .sqlv, .dvv, #px#px#px#px#px) { background: transparent !important; }
html.tab-codeme:is(html, #px#px#px#px#px), html.tab-codeme body:is(body, #px#px#px#px#px) { background: transparent !important; }
/* Alone: a still glow in Google's four colours at the window's corners. */
html:not(.tab-codeme) body:is(body, #px#px#px#px#px) {
  background-color: var(--px-canvas) !important;
  background-image:
    radial-gradient(52% 44% at 4% 0%, rgba(0, 119, 255, .15), transparent 72%),
    radial-gradient(48% 42% at 98% 2%, rgba(90, 162, 255, .10), transparent 72%),
    radial-gradient(50% 46% at 96% 100%, rgba(154, 214, 26, .14), transparent 72%),
    radial-gradient(46% 42% at 2% 100%, rgba(0, 200, 150, .11), transparent 72%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
html[data-scheme='dark']:not(.tab-codeme) body:is(body, #px#px#px#px#px) {
  background-image:
    radial-gradient(52% 44% at 4% 0%, rgba(0, 119, 255, .18), transparent 72%),
    radial-gradient(48% 42% at 98% 2%, rgba(90, 162, 255, .12), transparent 72%),
    radial-gradient(50% 46% at 96% 100%, rgba(154, 214, 26, .10), transparent 72%),
    radial-gradient(46% 42% at 2% 100%, rgba(0, 200, 150, .12), transparent 72%) !important;
}
html:not(.tab-codeme) body :is(.gdv, .plv, .chvv, .rmv, .dvv, .sqlv, #px#px#px#px#px) { background: transparent !important; }

/* ── Type: one display face, weight 500, tight ───────────────── */
html body :is(h1, h2, h3, h4, .phd-title, .sol-title, .gd-top h1, .gd-head h1, .cmk-title, .cat-name, .chv-card-t, .chv-today-t, .rmv-label, .plv-sec-t, .gd-h, .gd-sec, .gd-pat-h, .block-h, .chv-rung-l, .pcr h1, .rmv-head h1, #px#px#px#px#px) {
  font-family: var(--px-display) !important;
}
html body :is(.gd-top h1, .gd-head h1, .pcr h1, .rmv-head h1, #px#px#px#px#px) {
  font-weight: 500 !important; font-size: clamp(28px, 3vw, 44px) !important; line-height: 1.04 !important;
  letter-spacing: -.034em !important; color: var(--px-ink) !important;
}
html body :is(.gd-sec, #px#px#px#px#px) { font-weight: 500 !important; font-size: clamp(22px, 2vw, 28px) !important; letter-spacing: -.022em !important; }
html body :is(.gd-h, .block-h, .gd-pat-h, .cat-name, .chv-card-t, .chv-today-t, .plv-sec-t, .rmv-label, .chv-rung-l, #px#px#px#px#px) { font-weight: 500 !important; letter-spacing: -.01em !important; }
html body :is(.chv-today-t, #px#px#px#px#px) { font-size: clamp(22px, 2vw, 28px) !important; letter-spacing: -.022em !important; }

/* ── Stages (a guide's and the Coding guide's head) ──────────── */
/* The Library's topic stage, square: a blue-soft field, the title large,
   the numbers huge on a 2px rule. */
html body :is(#viewGuides .gd-top, #viewGuides .gd-head, #px#px#px#px#px) {
  display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px;
  margin: 0 !important; padding: clamp(22px, 2.6vw, 34px) !important; min-height: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: var(--px-blue-soft) !important; box-shadow: none !important;
}
html body :is(#viewGuides .gd-top, #viewGuides .gd-head, #px#px#px#px#px)::before,
html body :is(#viewGuides .gd-top, #viewGuides .gd-head, #px#px#px#px#px)::after { display: none !important; }
html body :is(#viewGuides .gd-top-t, #px#px#px#px#px) { flex: 1 1 320px; min-width: 0; }
html body :is(#viewGuides .gd-top-m, #px#px#px#px#px) { margin-top: 12px !important; font: 400 14px/1.4 var(--px-text-f) !important; color: var(--px-text) !important; }
html body :is(#viewGuides .gd-top-bar, #px#px#px#px#px) { height: 6px !important; border-radius: 3px !important; background: var(--px-canvas) !important; }
html body :is(#viewGuides .gd-stats, #px#px#px#px#px) { display: flex !important; flex-wrap: wrap; gap: 16px 28px !important; }
html body :is(#viewGuides .gd-stat, #px#px#px#px#px) {
  display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 6px !important;
  min-height: 0 !important; padding: 0 0 0 14px !important; border: 0 !important; border-left: 2px solid var(--px-line-strong) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html body :is(#viewGuides .gd-stat b, #viewGuides .gd-stat strong, #px#px#px#px#px) {
  font: 500 clamp(30px, 3vw, 44px)/.95 var(--px-display) !important; letter-spacing: -.045em !important; color: var(--px-ink) !important;
}
html body :is(#viewGuides .gd-stat span, #viewGuides .gd-stat small, #px#px#px#px#px) { font: 400 13.5px/1.2 var(--px-text-f) !important; color: var(--px-text) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* ── Page heads at /tools/pg (the Problems crown, the DevOps embed) ─ */
/* One row, no rule and no box: the title, the numbers as round pills with
   a heavy display number, the action as a big blue pill. */
html:not(.tab-codeme) body :is(.pcr, #px#px#px#px#px) {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 14px !important;
  padding: 6px 0 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:not(.tab-codeme) body :is(.pcr, #px#px#px#px#px)::before,
html:not(.tab-codeme) body :is(.pcr, #px#px#px#px#px)::after { display: none !important; }
html:not(.tab-codeme) body :is(.pcr-copy, #px#px#px#px#px) { display: flex !important; align-items: center; gap: 14px; margin-right: 6px; }
html:not(.tab-codeme) body :is(.pcr-kicker, #px#px#px#px#px) { display: none !important; }
html:not(.tab-codeme) body :is(.pcr-stats, #px#px#px#px#px) { display: flex !important; flex-wrap: wrap; gap: 8px !important; order: 2; }
html:not(.tab-codeme) body :is(.pcr-card, #px#px#px#px#px) {
  display: inline-flex !important; align-items: center; gap: 8px !important; height: 44px !important; min-height: 0 !important;
  padding: 0 16px 0 6px !important; border: 1px solid var(--px-line) !important; border-radius: 999px !important;
  background: var(--px-surface) !important; box-shadow: none !important;
}
html:not(.tab-codeme) body :is(.pcr-card b, .pcr-card strong, #px#px#px#px#px) { font: 700 20px/1 var(--px-display) !important; letter-spacing: -.02em !important; color: var(--px-ink) !important; }
html:not(.tab-codeme) body :is(.pcr-card small, .pcr-card span:not(:first-child), #px#px#px#px#px) { font: 500 13.5px/1 var(--px-text-f) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--px-text) !important; }
html:not(.tab-codeme) body :is(.pcr-btn, #px#px#px#px#px) {
  order: 3; margin-left: auto !important; height: 44px !important; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--px-blue) !important; color: var(--px-on-blue) !important; box-shadow: none !important;
  font: 500 15px/1 var(--px-display) !important; letter-spacing: 0 !important;
}
html:not(.tab-codeme) body :is(.pcr-btn, #px#px#px#px#px):hover { background: var(--px-blue-hover) !important; box-shadow: var(--px-elev) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-head, .chv-head, #viewPlayground > .pgv-bar, #px#px#px#px#px) {
  padding: 6px 0 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-head, .chv-head, #viewPlayground > .pgv-bar, #px#px#px#px#px)::before { display: none !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-tile, #px#px#px#px#px) {
  height: 44px !important; padding: 0 16px !important; border: 1px solid var(--px-line) !important; border-radius: 999px !important;
  background: var(--px-surface) !important;
}
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-tile b, #px#px#px#px#px) { font: 700 20px/1 var(--px-display) !important; color: var(--px-ink) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-tile span, #px#px#px#px#px) { font: 500 13.5px/1 var(--px-text-f) !important; color: var(--px-text) !important; }
/* Stages: one grey hairline and mono numbers; the topics carry the colour. */
html body :is(#viewRoadmap .rmv-stage-rule, #px#px#px#px#px) { border-top: 1px solid var(--px-line) !important; opacity: 1 !important; height: 0 !important; background: none !important; }
html body :is(#viewRoadmap .rmv-stage-n, #px#px#px#px#px) {
  height: 24px !important; padding: 0 8px !important; border: 1px solid var(--px-line) !important; border-radius: 999px !important;
  background: var(--px-surface) !important; color: var(--px-text) !important; font: 500 12px/22px var(--px-mono) !important;
}
html body :is(#viewRoadmap .rmv-stage-l, #px#px#px#px#px) { font: 500 15px/1.2 var(--px-display) !important; color: var(--px-ink) !important; }
html body :is(#viewRoadmap .rmv-stage-c, #px#px#px#px#px) { font: 500 12.5px/1 var(--px-mono) !important; color: var(--px-text-3) !important; }
/* The guides menu at /tools/pg: the Library's rail. */
html:not(.tab-codeme) body :is(.gd-nav, #px#px#px#px#px) { background: transparent !important; border-right: 1px solid var(--px-line) !important; }
html:not(.tab-codeme) body :is(.gd-nav-h, #px#px#px#px#px) { padding: 12px 12px 6px !important; font: 600 13px/16px var(--px-text-f) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--px-text-3) !important; }
html:not(.tab-codeme) body :is(.gd-nav-i, #px#px#px#px#px) { min-height: 40px !important; padding: 8px 12px !important; border-radius: 20px !important; font: 500 14px/1.25 var(--px-text-f) !important; color: var(--px-text) !important; background: transparent !important; }
html:not(.tab-codeme) body :is(.gd-nav-i, #px#px#px#px#px):hover { background: var(--px-sunk-2) !important; color: var(--px-ink) !important; }
html:not(.tab-codeme) body :is(.gd-nav-i.is-on, .gd-nav-i[aria-current], #px#px#px#px#px) { background: var(--px-ink) !important; color: var(--px-canvas) !important; }
html:not(.tab-codeme) body :is(.gd-nav-n, #px#px#px#px#px) { font: 500 12.5px/1 var(--px-mono) !important; color: inherit !important; opacity: .8; }

/* ── /tools/pg's own top bar: the views as one segmented switch ─ */
html:not(.tab-codeme) body :is(.topbar, #px#px#px#px#px) { background: transparent !important; border-bottom: 1px solid var(--px-line) !important; }
html:not(.tab-codeme) body :is(#modeTabs, #langSwitch, #px#px#px#px#px) {
  display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; padding: 4px !important;
  border: 1px solid var(--px-line) !important; border-radius: 26px !important; background: var(--px-sunk) !important;
}
html:not(.tab-codeme) body :is(#langSwitch:empty, #px#px#px#px#px) { display: none !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab, #langSwitch .lang-pill, #px#px#px#px#px) {
  height: 40px !important; padding: 0 16px 0 12px !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important; color: var(--px-text) !important;
  font: 500 14.5px/1 var(--px-display) !important; letter-spacing: -.01em !important;
}
html:not(.tab-codeme) body :is(#langSwitch .lang-pill, #px#px#px#px#px) { padding: 0 16px !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab, #langSwitch .lang-pill, #px#px#px#px#px):hover { background: var(--px-surface) !important; color: var(--px-ink) !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab.is-on, #modeTabs .mode-tab[aria-selected='true'], #langSwitch .lang-pill.is-on, #px#px#px#px#px) {
  background: var(--px-ink) !important; color: var(--px-canvas) !important;
}
html:not(.tab-codeme) body :is(#modeTabs .mode-tab.is-on svg, #modeTabs .mode-tab[aria-selected='true'] svg, #px#px#px#px#px) { color: inherit !important; }

/* ── Cards: square, 1px hairline, flat; elevation on hover ──── */
html body :is(.cat-card, .gd-map-i, .gd-card, .chv-card, .chv-rung, .chv-today, .rmv-node, .rmv-panel, .plv-sec, .plv-card, .rel-p, .tp-prereq, .ex-card, .fig, .gd-pad, .layout > .pane, .console, .pgv-split, .hintbox, .phd-ver, .sol-figure, .sol-code, .verdict, .case, .mc-case, .gd-tier, .gd-phase, .lab-list, .sol-gate, #px#px#px#px#px) {
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  border-right: 1px solid var(--px-line) !important; border-bottom: 1px solid var(--px-line) !important; border-left: 1px solid var(--px-line) !important;
}
html body :is(.cat-card, .gd-card, .chv-card, .chv-rung, .chv-today, .rmv-node, .rmv-panel, .plv-sec, .plv-card, .rel-p, .tp-prereq, .ex-card, .fig, .gd-pad, .layout > .pane, .console, .pgv-split, .hintbox, .phd-ver, .sol-figure, .sol-code, .verdict, .case, .mc-case, .gd-tier, .gd-phase, .lab-list, .sol-gate, #px#px#px#px#px) { border-top: 1px solid var(--px-line) !important; }
/* A card's tone rule on top stays: 2px, the card's accent rail. */
html body :is(.gd-map-i, #px#px#px#px#px) { border-top-width: 2px !important; }
html body :is(.cat-card, .gd-map-i, .gd-card, .chv-card, .chv-rung, .chv-today, .rmv-node, .plv-sec, .plv-card, .rel-p, .tp-prereq, .gd-pad, .layout > .pane, .console, .pgv-split, .gd-tier, .lab-list, #px#px#px#px#px) { background: var(--px-surface) !important; }
html body :is(.ex-card, .fig, .phd-ver, .hintbox, .sol-gate, .gd-phase, #px#px#px#px#px) { background: var(--px-sunk) !important; }
html body :is(.cat-card, .gd-map-i, .chv-card, .chv-rung, .rmv-node, .rel-p, .plv-sec, #px#px#px#px#px) { transition: box-shadow .15s, border-color .15s !important; }
html body :is(.cat-card, .gd-map-i, .chv-card, .chv-rung, .rmv-node, .rel-p, .plv-sec, #px#px#px#px#px):hover {
  box-shadow: var(--px-elev) !important; border-right-color: var(--px-line-hover) !important; border-bottom-color: var(--px-line-hover) !important; border-left-color: var(--px-line-hover) !important;
}
html body :is(.rmv-node.is-sel, #px#px#px#px#px) { border-color: var(--px-ink) !important; box-shadow: inset 0 0 0 1px var(--px-ink) !important; }
html body :is(.rmv-node.is-done, #px#px#px#px#px) { box-shadow: inset 2px 0 0 #00C896 !important; }
html body :is(.rmv-node.is-part, #px#px#px#px#px) { box-shadow: inset 2px 0 0 #9AD61A !important; }

/* Category marks and wells: round, tinted, the tone's own ink. */
html body :is(.cat-mark, .plv-sec-mark, .cat-chip-m, #px#px#px#px#px) { border-radius: 50% !important; font-family: var(--px-display) !important; font-weight: 500 !important; }
html body :is(.cat-mark, #px#px#px#px#px) { width: 40px !important; height: 40px !important; font-size: 13px !important; }
html body :is(.plv-sec-mark, #px#px#px#px#px) { width: 28px !important; height: 28px !important; font-size: 12px !important; }
html body :is(.cat-chip-m, #px#px#px#px#px) { width: 22px !important; height: 22px !important; font-size: 12px !important; }
html body :is(.cat-name, #px#px#px#px#px) { font-size: 16px !important; }
html body :is(.cat-blurb, #px#px#px#px#px) { font-size: 13px !important; color: var(--px-text) !important; }
html body :is(.cat-n, .gd-map-n, .rmv-meta, .chv-rung-n, .chv-n, .plv-count, .rail-group-n, .tier-n, .ring-n, .rel-lc, .rel-p-d, .fig-i, .gd-n, .docnav-n, .plv-sec-n, .pgv-pcount, #px#px#px#px#px) {
  font-family: var(--px-mono) !important; font-variant-numeric: tabular-nums;
}
html body :is(.gd-map-k, #px#px#px#px#px) { font: 500 clamp(36px, 3.4vw, 48px)/1 var(--px-display) !important; letter-spacing: -.04em !important; }

/* ── Chips: round pills, counts in mono, the open one in ink ── */
html body :is(.gd-chip, .chv-tags span, .lab-brief-tag, .lab-tier-chip, .plv-chip, .gd-pchip, .rel-list, .rel-cat, .chv-theme, .fchip-b, .phd-ver .uc-chip, .seg-b, .labdlg-filters button, #px#px#px#px#px) {
  display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important;
  border: 1px solid var(--px-line) !important; background: var(--px-surface) !important; box-shadow: none !important;
  color: var(--px-text) !important; font-family: var(--px-text-f) !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
html body :is(.gd-chip, .chv-tags span, .lab-brief-tag, .rel-list, .rel-cat, #px#px#px#px#px) { height: 30px !important; padding: 0 12px !important; font-size: 13px !important; }
html body :is(.gd-pchip, .chv-theme, .fchip-b, .phd-ver .uc-chip, .seg-b, .labdlg-filters button, #px#px#px#px#px) { height: 38px !important; padding: 0 14px !important; font-size: 13.5px !important; cursor: pointer; }
html body :is(.gd-pchip, .chv-theme, .fchip-b, .phd-ver .uc-chip, .seg-b, .rel-cat, .labdlg-filters button, #px#px#px#px#px):hover { border-color: var(--px-line-strong) !important; color: var(--px-ink) !important; background: var(--px-surface) !important; }
html body :is(.chv-theme.is-on, .chv-theme[aria-pressed='true'], .fchip.is-set .fchip-b, .phd-ver .uc-chip.is-on, .seg-b.is-on, .gd-pchip.is-on, .labdlg-filters button.is-on, .plv-chip, #px#px#px#px#px) {
  border-color: var(--px-ink) !important; background: var(--px-ink) !important; color: var(--px-canvas) !important;
}
html body :is(.chv-theme.is-on, .chv-theme[aria-pressed='true'], .fchip.is-set .fchip-b, .phd-ver .uc-chip.is-on, .seg-b.is-on, .plv-chip, #px#px#px#px#px) :is(svg, .ico, b, i:not(.dot)) { color: inherit !important; }
/* A theme chip's icon well keeps its tone on the ink. */
html body :is(.chv-theme .chv-well, #px#px#px#px#px) { width: 28px !important; height: 28px !important; }
html body :is(.gd-n, .plv-sec-n, .docnav-n, .gd-map-pads, .gd-pad-tag, .pgv-pcount, #px#px#px#px#px) {
  height: 24px !important; padding: 0 9px !important; border: 1px solid var(--px-line) !important; border-radius: 999px !important;
  background: var(--px-surface) !important; color: var(--px-text) !important; font: 500 12px/1 var(--px-mono) !important;
}
html body :is(.plv-sec-n.is-done, #px#px#px#px#px) { border-color: transparent !important; background: var(--px-green-soft) !important; color: var(--easy) !important; }
html body :is(.gd-cx, #px#px#px#px#px) { font-size: 12px !important; border-radius: 999px !important; }

/* Difficulty: Google four, as pills. */
html body :is(.plv-diff, .chv-diff, .gd-diff, .badge[class*="d-"], .phd-diff, .cmk-pill, .lab-diff, #px#px#px#px#px) {
  height: 24px !important; padding: 0 10px !important; border-radius: 999px !important; font: 500 12px/1 var(--px-text-f) !important;
}
html body :is(.p-diff, #px#px#px#px#px) { min-width: 20px; height: 20px !important; font-size: 12px !important; border-radius: 999px !important; }

/* ── Search: one big pill ────────────────────────────────────── */
html body :is(.plv-search, .chv-search, .labdlg-search, #px#px#px#px#px) {
  height: 48px !important; padding: 0 12px 0 18px !important;
  border: 1px solid var(--px-line-strong) !important; border-radius: 999px !important;
  background: var(--px-surface) !important; box-shadow: none !important; transition: box-shadow .2s !important;
}
html body :is(.plv-search, .chv-search, #px#px#px#px#px):focus-within { box-shadow: 0 0 0 4px var(--px-blue-soft) !important; }
html body :is(.plv-search input, .chv-search input, #px#px#px#px#px) { font: 400 15px/1 var(--px-text-f) !important; color: var(--px-ink) !important; }
html body :is(.plv-search input, .chv-search input, .labdlg-search, #px#px#px#px#px)::placeholder { color: var(--px-text-3) !important; }
html body :is(.plv-search input, .chv-search input, #px#px#px#px#px):focus-visible { outline: none !important; }
html body :is(.rail-search .search, #px#px#px#px#px) { height: 40px !important; border: 1px solid var(--px-line-strong) !important; border-radius: 999px !important; background: var(--px-surface) !important; }
html body :is(.plv-search kbd, .chv-search kbd, .rail-kbd, #px#px#px#px#px) {
  padding: 0 7px !important; border: 1px solid var(--px-line) !important; border-radius: 6px !important;
  font: 500 12px/20px var(--px-mono) !important; color: var(--px-text-3) !important; background: var(--px-surface) !important;
}

/* ── Buttons: pills; primary is filled blue ─────────────────── */
html body :is(.btn, .plv-act, .prob-nav-b, .list-btn, .sol-view-b, .pgv-labs-btn, .gd-pad-b, .gd-pad-run, .chv-surprise, .chv-today-go, #px#px#px#px#px) {
  border-radius: 999px !important; box-shadow: none !important; transform: none !important;
  font-family: var(--px-display) !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
html body :is(.btn-primary, .plv-act.is-primary, .gd-pad-run, .chv-today-go, #px#px#px#px#px) {
  border: 1px solid var(--px-blue) !important; background: var(--px-blue) !important; color: var(--px-on-blue) !important;
}
html body :is(.btn-primary, .plv-act.is-primary, .gd-pad-run, .chv-today-go, #px#px#px#px#px):hover:not(:disabled) {
  border-color: var(--px-blue-hover) !important; background: var(--px-blue-hover) !important; box-shadow: var(--px-elev) !important; filter: none !important;
}
html body :is(.btn-secondary, .btn-ghost, .plv-act:not(.is-primary), .prob-nav-b, .list-btn, .gd-pad-b, .chv-surprise, .sol-view-b, #px#px#px#px#px) {
  border: 1px solid var(--px-line) !important; background: var(--px-surface) !important; color: var(--px-ink) !important;
}
html body :is(.btn-secondary, .btn-ghost, .plv-act:not(.is-primary), .prob-nav-b, .list-btn, .gd-pad-b, .chv-surprise, .sol-view-b, #px#px#px#px#px):hover:not(:disabled) {
  border-color: var(--px-line-strong) !important; background: var(--px-surface) !important;
}
html body :is(.plv-act, #px#px#px#px#px) { height: 40px !important; padding: 0 18px !important; font-size: 14px !important; }
html body :is(.chv-surprise, .chv-today-go, #px#px#px#px#px) { height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
html body :is(.btn, .plv-act, .prob-nav-b, .list-btn, .gd-pad-b, .gd-pad-run, .chv-surprise, .chv-today-go, #px#px#px#px#px):focus-visible { outline: 2px solid var(--px-focus) !important; outline-offset: 2px !important; }

/* ── Practice: the list ─────────────────────────────────────── */
html body :is(.plv-bar, #px#px#px#px#px) { flex-wrap: wrap !important; gap: 8px 10px !important; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html body :is(.plv-search, #px#px#px#px#px) { flex: 1 1 320px !important; min-width: 220px !important; }
html body :is(.plv-count, #px#px#px#px#px) { font-size: 14px !important; color: var(--px-text-3) !important; }
html body :is(.plv-count b, #px#px#px#px#px) { font: 500 22px/1 var(--px-display) !important; letter-spacing: -.02em !important; color: var(--px-ink) !important; }
html body :is(.plv-sec-h, #px#px#px#px#px) {
  height: 56px !important; padding: 0 16px 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--px-line) !important;
  background: var(--px-surface) !important; filter: none !important;
}
html body :is(.plv-sec.is-shut .plv-sec-h, #px#px#px#px#px) { border-bottom: 0 !important; }
html body :is(.plv-sec-h, #px#px#px#px#px):hover { background: var(--px-sunk) !important; }
html body :is(.plv-sec-t, #px#px#px#px#px) { font-size: 16px !important; color: var(--px-ink) !important; }
html body :is(.plv-sec-sub, #px#px#px#px#px) { font-size: 13px !important; color: var(--px-text-3) !important; }
html body :is(.plv-row, #px#px#px#px#px) { min-height: 44px !important; border-top: 1px solid var(--px-line) !important; }
html body :is(.plv-row, #px#px#px#px#px):hover { background: var(--px-sunk) !important; }
html body :is(.plv-title, #px#px#px#px#px) { font: 500 14.5px/1.35 var(--px-display) !important; color: var(--px-ink) !important; }
html body :is(.plv-row, #px#px#px#px#px):hover .plv-title { color: var(--px-blue) !important; }
html body :is(.cat-grid, #px#px#px#px#px) { gap: 12px !important; }
html body :is(.cat-split i, .plv-meter, .gd-map-bar, .rmv-track, #px#px#px#px#px) { border-radius: 999px !important; }
html body :is(.fmenu, .cml-pop, #px#px#px#px#px) { border: 1px solid var(--px-line) !important; border-radius: 0 !important; box-shadow: var(--px-elev) !important; background: var(--px-surface) !important; }
/* The side column at /tools/pg: the Library's rail. */
html:not(.tab-codeme) body :is(.plv-card-h, #px#px#px#px#px) { font: 600 13px/16px var(--px-text-f) !important; color: var(--px-text-3) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:not(.tab-codeme) body :is(.plv-card-h, #px#px#px#px#px)::before { display: none !important; }
html body :is(.plv-topic-b, #px#px#px#px#px) { min-height: 40px !important; padding: 8px 12px !important; border-radius: 20px !important; font: 500 14px/1.25 var(--px-text-f) !important; color: var(--px-text) !important; }
html body :is(.plv-topic-b, #px#px#px#px#px):hover { background: var(--px-sunk-2) !important; color: var(--px-ink) !important; }
html body :is(.plv-topic-b.is-on, .plv-topic-b[aria-current], #px#px#px#px#px) { background: var(--px-ink) !important; color: var(--px-canvas) !important; }
html body :is(.plv-topic-n, #px#px#px#px#px) { font: 500 12.5px/1 var(--px-mono) !important; color: inherit !important; opacity: .8; }

/* ── Learn ──────────────────────────────────────────────────── */
html body :is(#viewGuides .gd-map-i, #px#px#px#px#px) { padding: 22px !important; }
html body :is(#viewGuides .gd-map-d, #px#px#px#px#px) { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--px-text) !important; }
html body :is(#viewGuides .gd-card, #px#px#px#px#px) { padding: 20px 22px !important; }
html body :is(#viewGuides .gd-h, .block-h, #px#px#px#px#px) { font-size: 17px !important; }
/* Tables in a guide: the header row on the card's tint, never white in dark. */
html body :is(.prose table th, .gd-card table th, .gd-card thead th, #px#px#px#px#px) { background: var(--px-sunk) !important; color: var(--px-text-3) !important; font: 500 12.5px/1.3 var(--px-text-f) !important; }
html body :is(.prose table, .gd-card table, #px#px#px#px#px) { border-color: var(--px-line) !important; }
html body :is(.prose table td, .prose table th, #px#px#px#px#px) { border-color: var(--px-line) !important; }
html body :is(.gd-pad-bar, .pgv-file, .pgv .console-head, #px#px#px#px#px) { background: var(--px-sunk) !important; }

/* ── Roadmap ────────────────────────────────────────────────── */
html body :is(#rmvGraph .rmv-stage-n, #px#px#px#px#px) { font-family: var(--px-mono) !important; }
html body :is(#rmvGraph .rmv-node, #px#px#px#px#px) { padding: 14px 16px !important; }
html body :is(#rmvGraph .rmv-label, #px#px#px#px#px) { font-size: 15px !important; }

/* ── Challenges board ───────────────────────────────────────── */
html body :is(.chv-rung-n b, .chv-rung-n strong, #px#px#px#px#px) { font: 500 clamp(30px, 2.6vw, 40px)/1 var(--px-display) !important; letter-spacing: -.04em !important; }
html body :is(.chv-today-k, #px#px#px#px#px) { height: 28px !important; padding: 0 12px !important; border: 1px solid var(--px-line-strong) !important; background: transparent !important; color: var(--px-ink) !important; font: 500 13px/1 var(--px-display) !important; }

/* ── The problem workspace and the Codepad ──────────────────── */
html body :is(.cmk-head, .pgv-bar, #px#px#px#px#px) { background: transparent !important; }
html body :is(.cmk-title, #px#px#px#px#px) { font: 500 20px/26px var(--px-display) !important; letter-spacing: -.015em !important; }
html body :is(.docnav-b, .console .tab, .pgv .tab, #px#px#px#px#px) { font-family: var(--px-display) !important; font-weight: 500 !important; }
html body :is(.p-item.is-on, .p-item[aria-current], #px#px#px#px#px) { background: var(--px-ink) !important; color: var(--px-canvas) !important; }
html body :is(.p-item.is-on .p-name, .p-item[aria-current] .p-name, #px#px#px#px#px) { color: inherit !important; }
html body :is(.step-n, .ex-n, #px#px#px#px#px) { font-family: var(--px-mono) !important; background: var(--px-surface) !important; color: var(--px-ink) !important; border: 1px solid var(--px-line-strong) !important; }

/* Console heads wrap their tools under the tabs instead of cutting the last off. */
html body :is(.console-head, .pgv .console-head, #px#px#px#px#px) { flex-wrap: wrap !important; height: auto !important; min-height: 44px !important; row-gap: 4px !important; }
html body :is(.pgv-tools, #px#px#px#px#px) { flex-wrap: wrap !important; }
/* A brief's code blocks scroll inside themselves; nothing is cut off. */
html body :is(.pgv-brief-body pre, .prose pre, .lab-brief pre, #px#px#px#px#px) { overflow-x: auto !important; max-width: 100%; }
/* The kind tag on a challenge's brief: an outlined pill at the text floor. */
html body :is(.lab-tag, #px#px#px#px#px) {
  height: 24px !important; padding: 0 10px !important; border: 1px solid var(--px-line-strong) !important; border-radius: 999px !important;
  background: transparent !important; color: var(--px-ink) !important; font: 500 12px/22px var(--px-display) !important;
}

/* ── Code: four colours and greys, on the page's own surface ── */
html[data-scheme='dark'] body :is(.CodeMirror, .CodeMirror-gutters, #px#px#px#px#px) { background: #22272E !important; }
html body :is(.CodeMirror-gutters, #px#px#px#px#px) { border-right: 1px solid var(--px-line) !important; }

/* ── Text floor: nothing under 12px ─────────────────────────── */
html body :is(.tier-l, .tier-n, .rail-kbd, .rail-group-n, .fig-i, .fig-arrow, .fig-play, .rel-k, .rel-list, .rel-lc, .rel-p-d, .gd-map-pads, .rail-stats-h, .rail-foot, .prob-nav-pos, .seg-n, .cmdk-foot, .cmdk-foot kbd, .cmdk-esc, #px#px#px#px#px) { font-size: 12px !important; }

html body :is(.cat-ring:not(.is-lg), #px#px#px#px#px) { width: 44px !important; height: 44px !important; flex: none; }
html body :is(.cat-ring b, .cat-ring b i, .cat-n small, .gd-kind, #px#px#px#px#px) { font-size: 12px !important; }
html body :is(.cat-ring b i, #px#px#px#px#px) { font-weight: 500 !important; }

/* ── Dialogs and the command palette ───────────────────────── */
html body :is(.cmdk, .labdlg-card, .inputdlg-card, .boot-card, #px#px#px#px#px) { border-radius: 0 !important; border: 1px solid var(--px-line) !important; box-shadow: var(--px-elev) !important; background: var(--px-surface) !important; }
html body :is(.cmdk-in, #px#px#px#px#px) { border-bottom: 1px solid var(--px-line) !important; }

@media (prefers-reduced-motion: reduce) {
  html body :is(.cat-card, .gd-map-i, .chv-card, .chv-rung, .rmv-node, .rel-p, .plv-sec, .plv-search, .chv-search, #px#px#px#px#px) { transition: none !important; }
}

/* ══ Colour restraint (user, 2026-10-08: "too many text colors … fancy
   instead of professional"). Text is ink or grey everywhere: titles,
   descriptions, counts, pills, labels, numbers. Marks and wells are grey
   with ink glyphs. Progress is one neutral track and one Google-blue fill.
   Colour stays only where it means something: the one primary action
   (blue), solved (green), an error (red), focus; and in code. ══ */
html body :is(.plv-diff, .chv-diff, .gd-diff, .badge[class*="d-"], .phd-diff, .cmk-pill, .lab-diff, .p-diff, .cml-diff, .rel-list, .gd-pad-tag, .gd-cx, .gd-n, .gd-pat-n, .chv-today-k, .lab-tier-chip, .fig-res, .fig-arg, #px#px#px#px#px) {
  background: var(--px-sunk-2) !important; color: var(--px-ink) !important; border-color: transparent !important;
}
html body :is(.cat-mark, .plv-sec-mark, .cat-chip-m, .chv-well, .gd-pat-n, .step-n, #px#px#px#px#px) {
  background: var(--px-sunk-2) !important; color: var(--px-ink) !important;
}
html body :is(.chv-well, .cat-mark, .plv-sec-mark, #px#px#px#px#px) :is(svg, path, i) { color: var(--px-ink) !important; }
html body :is(.gd-map-k, .gd-tier-n, .chv-rung-l, .chv-rung-n, .chv-rung-n b, .chv-n, .chv-pass, .plv-flag, .gd-kind, .gd-kind.is-key, .cat-n, .cat-n b, .cat-n small, .gd-map-n, .gd-map-n.is-done, .gd-pchip.is-done, .rmv-meta, .plv-sec-n, .plv-sec-n.is-done, .pgv-st-save, .pgv-file-rt, .phd-ver-count, .rail-head, .rail-group-t, .tier-l, .chv-card-t, .chv-today-t, .gd-sec, .gd-h, .block-h, .gd-pat-h, .cat-name, #px#px#px#px#px) {
  color: var(--px-ink) !important;
}
html body :is(.cat-blurb, .cat-n small, .chv-card-s, .chv-today-s, .gd-map-d, .rmv-stage-c, .plv-sec-sub, #px#px#px#px#px) { color: var(--px-text) !important; }
html body :is(.plv-sec-n.is-done, #px#px#px#px#px) { background: var(--px-sunk-2) !important; }
/* Marks before section heads and stats: grey, not a tone. */
html body :is(#viewGuides .gd-h, .block-h, .plv-card-h, .plv-sec-t, #px#px#px#px#px)::before { background: var(--px-line-hover) !important; }
html body :is(.gd-map-i, #px#px#px#px#px) { border-top: 1px solid var(--px-line) !important; }
/* Progress: one neutral track, one blue fill. */
html body :is(.plv-meter, .gd-top-bar, .gd-map-bar, .rmv-track, .chv-meter, .rail-meter, .tier-bar, .cat-split i, #px#px#px#px#px) { background: var(--px-sunk-2) !important; }
html body :is(.plv-meter i, .gd-top-bar i, .gd-map-bar i, .rmv-track span, .chv-meter i, .rail-meter i, .tier-bar i, .cat-split i b, #px#px#px#px#px) { background: var(--px-blue) !important; }
html body :is(.cat-ring, #px#px#px#px#px) { background: conic-gradient(var(--px-blue) calc(var(--pct, 0) * 1%), var(--px-sunk-2) 0) !important; }
html body :is(.cat-card.is-done .cat-ring, #px#px#px#px#px) { background: #00C896 !important; }
html body :is(.cat-ring b, .cat-card.is-done .cat-ring b, #px#px#px#px#px) { color: var(--px-ink) !important; }
/* A challenge's test mix: one neutral bar. */
html body :is(.chv-tiers i, .chv-tiers .t-blue, .chv-tiers .t-red, .chv-tiers .t-yellow, .chv-tiers .t-green, #px#px#px#px#px) { background: var(--px-line-hover) !important; }
/* Icons in heads, chips and tabs: grey, the open one ink. */
html body :is(#modeTabs .mode-tab svg, .pcr-card svg, .pcr-card .ico, .chv-theme svg, .seg-b .dot, .fchip-b .dot, .rail-search-i, .plv-search-i, #px#px#px#px#px) { color: var(--px-text-3) !important; }
html body :is(.seg-b .dot, .fchip-b .dot, #px#px#px#px#px) { background: var(--px-text-3) !important; }
html body :is(.pcr-card [class*="well"], .pcr-card > span:first-child, #px#px#px#px#px) { background: var(--px-sunk-2) !important; color: var(--px-text-3) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-tile b, .pcr-card b, #px#px#px#px#px) { color: var(--px-ink) !important; }
html body :is(.lab-brief-tag, .lab-tier-chip, .chv-tags span, #px#px#px#px#px) { color: var(--px-text) !important; }

/* Practice: the topics once. SolveMe's menu (and the rail at /tools/pg)
   lists them with their counts and the list below holds their problems,
   so the card grid of the same topics steps aside; a chosen topic's stage
   still shows. */
html body :is(.plv-cats:has(> .cat-grid), #plvCatsToggle, #px#px#px#px#px) { display: none !important; }
/* Never cut a description short. */
html body :is(.cat-blurb, .chv-card-s, .chv-today-s, .gd-map-d, .plv-sec-sub, #px#px#px#px#px) {
  display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important;
  text-overflow: clip !important; white-space: normal !important; max-height: none !important;
}
html body :is(.d-Easy, .d-Medium, .d-Hard, .plv-tier span, .tier-l, #px#px#px#px#px):not(i):not(.dot) { color: var(--px-ink) !important; }
html body :is(.chv-theme > i, .chv-card-h > i, .chv-today-row > i, #px#px#px#px#px) { background: var(--px-sunk-2) !important; color: var(--px-ink) !important; }
html body :is(.chv-theme.is-on > i, #px#px#px#px#px) { background: var(--px-canvas) !important; color: var(--px-ink) !important; }
html body :is(.rail-group, #px#px#px#px#px)::before { background: var(--px-line-hover) !important; }
html body :is(.rail-group-x, .rail-all, #px#px#px#px#px) { color: var(--px-ink) !important; }

/* No decorative markers before headings (user, 2026-10-08: dots, squares
   and diamonds spoil the look). The heading's type carries it alone. */
html body :is(#viewGuides .gd-h, .gd-h, .block-h, .extra-h, .plv-card-h, .plv-sec-t, .gd-sec, .sol-list-h, .rail-group, .gd-nav-h, #px#px#px#px#px)::before { display: none !important; content: none !important; }
html body :is(#viewGuides .gd-h, .block-h, .extra-h, .plv-card-h, #px#px#px#px#px) { gap: 0 !important; }

/* Phones: a section row's count and meter wrap under the title. */
@media (max-width: 760px) {
  html body :is(.plv-sec-h, #px#px#px#px#px) { height: auto !important; min-height: 56px; flex-wrap: wrap !important; padding-block: 10px !important; row-gap: 6px !important; }
}

/* A view stays hidden while another shows (the phone layer's display:flex
   on .gdv used to override [hidden], pushing Practice a screen down). */
html body :is(.gdv[hidden], .plv[hidden], .rmv[hidden], .chvv[hidden], .pgv[hidden], .sqlv[hidden], .dvv[hidden], .layout[hidden], .landing[hidden], #px#px#px#px#px) { display: none !important; }

/* The coach: on the panel's gutter; its actions are pills; icons ink. */
html body :is(#panel-coach > .coach, #px#px#px#px#px) { padding: 16px 20px 24px !important; }
html body :is(.coach .doc-h, #px#px#px#px#px) { margin: 0 !important; padding: 0 !important; font: 500 17px/1.3 var(--px-display) !important; color: var(--px-ink) !important; }
html body :is(.coach .doc-h .ico, .coach-act .ico, .docnav-b .ico, #px#px#px#px#px) { color: var(--px-text-3) !important; }
html body :is(.coach-act, #px#px#px#px#px) {
  height: 38px !important; padding: 0 14px !important; border: 1px solid var(--px-line) !important; border-radius: 999px !important;
  background: var(--px-surface) !important; color: var(--px-ink) !important; font: 500 13.5px/1 var(--px-display) !important;
}
html body :is(.coach-act, #px#px#px#px#px):hover:not(:disabled) { border-color: var(--px-line-strong) !important; background: var(--px-surface) !important; color: var(--px-ink) !important; }
html body :is(.coach-card, #px#px#px#px#px) { border: 1px solid var(--px-line) !important; border-radius: 0 !important; }
/* Filter pills wrap; never off the edge. */
html body :is(.plv-filters, .chv-themes, .plv-bar, #px#px#px#px#px) { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; }