/* ══════════════════════════════════════════════════════════════
   SolveMe skin (2026-10-06). Loaded last; every rule is under
   html.tab-codeme, set when cariara.com/pg frames this app with
   ?tab=codeme, so /tools/pg on its own is untouched.

   The frame is part of a Cariara page: the page draws the menu, the crown
   (title, numbers, the one action) and the tab title, so this skin hides
   PPG's own headers and wears the app's system: Google Sans for display,
   Roboto for text, Roboto Mono only for code; sentence-case section
   headings with a square tone marker; 1px hairline square cards; pills for
   chips; Google four only for meaning (difficulty, status, progress, the
   active item), tone-80 in dark. No offset shadows, no lifts: hover is a
   darker hairline and Google's elevation-1.

   Rules read  html.tab-codeme body :is(<selectors>, #cm#cm#cm)  so they
   outrank the older layers' :is(…, #cm#cm) and #id#id rules (#cm is never
   in the page).
   ══════════════════════════════════════════════════════════════ */

html.tab-codeme {
  --font-sans: Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lv-display: 'Google Sans', Roboto, system-ui, sans-serif;
  --m3-display: 'Google Sans', Roboto, system-ui, sans-serif;
  --cmk-display: 'Google Sans', Roboto, system-ui, sans-serif;
  --m3-pad: 20px;
  --pz-edge: var(--border);
  --pz-shadow: transparent;
}
html.tab-codeme:not([data-scheme='dark']) {
  --ground: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F8F9FA;
  --surface-3: #F1F3F4;
  --border: #E8EAED;
  --hairline: #E8EAED;
  --control: #DADCE0;
  --border-hover: #DADCE0;
  --text-primary: #1F1F1F;
  --text-secondary: #444746;
  --text-dimmed: #5F6368;
  --accent: #0062D6;
  --accent-hover: #0052B4;
  --accent-text: #0062D6;
  --accent-subtle: #EEF3FE;
  --g-blue-text: #0062D6;
  --g-red-text: #2B83EC;
  --g-yellow-text: #5E8C0A;
  --g-green-text: #00866B;
  --easy: #00866B;
  --medium: #5E8C0A;
  --hard: #2B83EC;
  --cmk-blue-t: #EEF3FE;
  --cmk-red-t: #F2F7FF;
  --cmk-yellow-t: #F7FDE6;
  --cmk-green-t: #EEFBF6;
  --cmk-elev-1: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --cmk-on-accent: #FFFFFF;
}
html.tab-codeme[data-scheme='dark'] {
  --border: #444C56;
  --hairline: #444C56;
  --control: #545D68;
  --border-hover: #636E7B;
  --accent-subtle: rgba(90, 162, 255, .14);
  --cmk-blue-t: rgba(90, 162, 255, .14);
  --cmk-red-t: #233348;
  --cmk-yellow-t: #33401B;
  --cmk-green-t: #183D33;
  --cmk-elev-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .25);
  --cmk-on-accent: #10161E;
}
html.tab-codeme body { font-family: var(--font-sans); background: var(--ground); }

/* ── PPG's own headers: the SolveMe crown shows the same thing ───── */
html.tab-codeme body :is(#plvCrown, .pcr, #viewRoadmap .rmv-head, #viewGuides .gd-nav, #gdPractice, .landing-band .landing-mark, #cm#cm#cm) { display: none !important; }

/* ── Type: one display face, sentence case, no mono labels ────── */
html.tab-codeme body :is(h1, h2, h3, h4, .phd-title, .sol-title, .gd-head h1, .gd-top h1, .lab-brief-title, .labdlg-head h2, .inputdlg-head h2, #cm#cm#cm) {
  font-family: var(--cmk-display) !important;
  letter-spacing: 0 !important;
}
html.tab-codeme body :is(.gd-h, .plv-card-h, .gd-nav-h, .extra-h, .block-h, .gd-tier-l, .gd-phase-w, .rmv-stage-n, .rmv-stage-l, .rmv-tile span, .pcr-card small, .gd-chips-k, .sol-list-h, .landing-resume-label, #cm#cm#cm) {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Section headings in Prepare's style: a square tone marker, then the title. */
html.tab-codeme body :is(#viewGuides .gd-h, .block-h, .extra-h, .plv-card-h, #cm#cm#cm) {
  display: flex !important; align-items: center; gap: 10px;
  margin: 0 0 12px !important;
  font: 500 16px/22px var(--cmk-display) !important;
  color: var(--text-primary) !important;
}
html.tab-codeme body :is(#viewGuides .gd-h, .block-h, .plv-card-h, #cm#cm#cm)::before {
  content: '' !important; display: block !important; flex: none;
  width: 10px !important; height: 10px !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  background: var(--gd-tone, var(--g-blue)) !important;
}
html.tab-codeme body :is(#viewGuides .gd-card[data-tone="red"], #cm#cm#cm) { --gd-tone: var(--g-red); }
html.tab-codeme body :is(#viewGuides .gd-card[data-tone="yellow"], #cm#cm#cm) { --gd-tone: var(--g-yellow); }
html.tab-codeme body :is(#viewGuides .gd-card[data-tone="green"], #cm#cm#cm) { --gd-tone: var(--g-green); }
html.tab-codeme body :is(.kv dt, .ex-kv dt, #cm#cm#cm) { font: 500 12px/1.7 var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-dimmed) !important; }

/* ── Cards and panels: 1px hairline, square, flat ─────────────── */
html.tab-codeme body :is(.gd-card, .plv-card, .plv-sec, .rmv-node, .rmv-panel, .ex-card, .hintbox, .tier-note, .sol-figure, .sol-code, .verdict, .case, .mc-case, .lab-list, .sol-gate, .pgv-split, .layout > .pane, .gd-phase, #cm#cm#cm) {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.tab-codeme body :is(.gd-card, .plv-card, .plv-sec, .rmv-node, .rmv-panel, .layout > .pane, .pgv-split, #cm#cm#cm) { background: var(--surface-1) !important; }
html.tab-codeme body :is(.gd-phase, .ex-card, .sol-gate, #cm#cm#cm) { background: var(--surface-2) !important; }
html.tab-codeme body :is(.pane-head, .pgv .console-head, .console-head, .editor-head, #cm#cm#cm) {
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html.tab-codeme body :is(.rmv-node, .gd-q-t, .plv-row, #cm#cm#cm) { transition: border-color .12s, box-shadow .12s, background-color .12s; }

/* ── Chips: pills ─────────────────────────────────────────────── */
html.tab-codeme body :is(.gd-chip, .chv-tags span, .lab-brief-tag, .lab-tier-chip, .plv-chip, .phd-ver .uc-chip, .fchip-b, .gd-n, .plv-sec-n, .docnav-n, #cm#cm#cm) {
  display: inline-flex !important; align-items: center; gap: 6px;
  height: 28px !important; padding: 0 12px !important;
  border: 1px solid var(--border) !important; border-radius: 999px !important;
  background: var(--surface-1) !important; box-shadow: none !important;
  font: 500 12.5px/1 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--text-secondary) !important;
}
html.tab-codeme body :is(.gd-n, .plv-sec-n, .docnav-n, #cm#cm#cm) { height: 22px !important; padding: 0 8px !important; font-size: 12px !important; font-variant-numeric: tabular-nums; }
html.tab-codeme body :is(.phd-ver .uc-chip, .fchip-b, #cm#cm#cm) { height: auto !important; min-height: 32px; cursor: pointer; color: var(--text-primary) !important; }
html.tab-codeme body :is(.phd-ver .uc-chip, .fchip-b, .gd-chip, #cm#cm#cm):hover { border-color: var(--border-hover) !important; background: var(--surface-2) !important; }
html.tab-codeme body :is(.phd-ver .uc-chip.is-on, .fchip.is-set .fchip-b, .plv-chip, #cm#cm#cm) {
  border-color: transparent !important; background: var(--accent-subtle) !important; color: var(--accent-text) !important; font-weight: 700 !important;
}
html.tab-codeme body :is(.phd-ver .uc-chip.is-on .ico, #cm#cm#cm) { color: var(--accent-text) !important; }

/* Difficulty and status: Google four, as pills. */
html.tab-codeme body :is(.plv-diff, .chv-diff, .gd-diff, .badge[class*="d-"], .phd-diff, .cmk-pill, .lab-diff, #cm#cm#cm) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
  height: 22px; padding: 0 9px !important; border: 0 !important; border-radius: 999px !important;
  font: 500 12px/1 var(--font-sans) !important; white-space: nowrap;
}
html.tab-codeme body :is(.d-Easy.plv-diff, .d-Easy.chv-diff, .d-Easy.gd-diff, .badge.d-Easy, .cmk-pill.d-Easy, .lab-diff.is-green, #cm#cm#cm) { background: var(--cmk-green-t) !important; color: var(--easy) !important; }
html.tab-codeme body :is(.d-Medium.plv-diff, .d-Medium.chv-diff, .d-Medium.gd-diff, .badge.d-Medium, .cmk-pill.d-Medium, .lab-diff.is-yellow, #cm#cm#cm) { background: var(--cmk-yellow-t) !important; color: var(--medium) !important; }
html.tab-codeme body :is(.d-Hard.plv-diff, .d-Hard.chv-diff, .d-Hard.gd-diff, .badge.d-Hard, .cmk-pill.d-Hard, .lab-diff.is-red, #cm#cm#cm) { background: var(--cmk-red-t) !important; color: var(--hard) !important; }
html.tab-codeme body :is(.plv-diff, #cm#cm#cm) { justify-self: end; }

/* ── Buttons: pills; primary is filled blue ───────────────────── */
html.tab-codeme body :is(.btn, .plv-act, .pcr-btn, .prob-nav-b, .list-btn, .sol-view-b, .pgv-labs-btn, #cm#cm#cm) {
  border-radius: 999px !important; box-shadow: none !important; transform: none !important;
  font-family: var(--cmk-display) !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
html.tab-codeme body :is(.btn-primary, .plv-act.is-primary, #cm#cm#cm) {
  border: 1px solid var(--accent) !important; background: var(--accent) !important; color: var(--cmk-on-accent) !important;
}
html.tab-codeme body :is(.btn-secondary, .pgv-tests, #cm#cm#cm) {
  border: 1px solid var(--control) !important; background: var(--surface-1) !important; color: var(--accent-text) !important;
}
html.tab-codeme body :is(.btn-ghost, .prob-nav-b, .list-btn, .plv-act:not(.is-primary), #cm#cm#cm) {
  border: 1px solid var(--control) !important; background: var(--surface-1) !important; color: var(--text-primary) !important;
}
html.tab-codeme body :is(.btn-secondary, .btn-ghost, .prob-nav-b, .list-btn, .plv-act:not(.is-primary), #cm#cm#cm):hover:not(:disabled) {
  border-color: var(--border-hover) !important; background: var(--surface-2) !important;
}
html.tab-codeme body :is(.btn-primary, #cm#cm#cm):hover:not(:disabled) { filter: none !important; background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
html.tab-codeme[data-scheme='dark'] body :is(.btn-primary, #cm#cm#cm):hover:not(:disabled) { background: #D4E0FC !important; border-color: #D4E0FC !important; }
html.tab-codeme body :is(.btn:disabled, .prob-nav-b:disabled, #cm#cm#cm) { opacity: .45 !important; }

/* Inputs: a pill with a hairline; blue on focus. */
html.tab-codeme body :is(.plv-search, .chv-search, .search, .labdlg-search, #cm#cm#cm) {
  height: 36px !important; border: 1px solid var(--control) !important; border-radius: 999px !important;
  background: var(--surface-1) !important; box-shadow: none !important;
}
html.tab-codeme body :is(.plv-search, .chv-search, #cm#cm#cm):focus-within { border-color: var(--accent) !important; }

/* ══ Practice: the list ══════════════════════════════════════ */
/* The topics and the progress live in SolveMe's menu and crown. */
html.tab-codeme body :is(.plv-side, #cm#cm#cm) { display: none !important; }
html.tab-codeme body :is(.plv, #cm#cm#cm) { padding: 16px 20px 32px !important; gap: 16px !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 12px !important; }
html.tab-codeme body :is(.plv-bar, #cm#cm#cm) { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html.tab-codeme body :is(.plv-table, #cm#cm#cm) { gap: 12px !important; }
html.tab-codeme body :is(.plv-sec-h, #cm#cm#cm) {
  height: 44px !important; padding: 0 14px 0 10px !important;
  border: 0 !important; border-bottom: 1px solid var(--border) !important;
  background: var(--surface-2) !important; filter: none !important;
}
html.tab-codeme body :is(.plv-sec.is-shut .plv-sec-h, #cm#cm#cm) { border-bottom: 0 !important; }
html.tab-codeme body :is(.plv-sec-t, #cm#cm#cm) { font: 500 15px/1.2 var(--cmk-display) !important; letter-spacing: 0 !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.plv-sec-t, #cm#cm#cm)::before {
  width: 10px !important; height: 10px !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; background: var(--lv-tone, var(--g-blue)) !important;
}
html.tab-codeme body :is(.plv-sec, #cm#cm#cm) { --lv-tone: var(--g-blue); }
html.tab-codeme body :is(.plv-sec:nth-child(4n+2), #cm#cm#cm) { --lv-tone: var(--g-red); }
html.tab-codeme body :is(.plv-sec:nth-child(4n+3), #cm#cm#cm) { --lv-tone: var(--g-yellow); }
html.tab-codeme body :is(.plv-sec:nth-child(4n+4), #cm#cm#cm) { --lv-tone: var(--g-green); }
html.tab-codeme body :is(.plv-sec-n.is-done, #cm#cm#cm) { color: var(--easy) !important; border-color: transparent !important; background: var(--cmk-green-t) !important; }
html.tab-codeme body :is(.plv-meter, #cm#cm#cm) { height: 4px !important; background: var(--surface-3) !important; }
html.tab-codeme body :is(.plv-meter i, #cm#cm#cm) { background: var(--g-green) !important; }
html.tab-codeme body :is(.plv-row, #cm#cm#cm) { min-height: 40px !important; border-top: 1px solid var(--hairline) !important; border-color: var(--hairline) !important; }
html.tab-codeme body :is(.plv-row, #cm#cm#cm):hover { background: var(--surface-2) !important; }
html.tab-codeme body :is(.plv-row, #cm#cm#cm):hover .plv-title { color: var(--accent-text) !important; }
html.tab-codeme body :is(.plv-title, #cm#cm#cm) { font: 500 14px/1.35 var(--font-sans) !important; }
html.tab-codeme body :is(.plv-row.is-done .plv-st, #cm#cm#cm) { color: var(--g-green) !important; }
html.tab-codeme body :is(.plv-meta, .plv-num, #cm#cm#cm) { font-family: var(--font-sans) !important; color: var(--text-dimmed) !important; }
html.tab-codeme body :is(.plv-flag, #cm#cm#cm) { color: var(--medium) !important; }
html.tab-codeme body :is(.plv-gauge b, #cm#cm#cm) { font: 500 24px/1 var(--cmk-display) !important; }
html.tab-codeme body :is(.plv-gauge span, .plv-tier-n, .plv-topic-n, .fmenu-n, #cm#cm#cm) { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; }
html.tab-codeme body :is(.plv-topic-b, #cm#cm#cm):hover { background: var(--surface-2) !important; color: var(--accent-text) !important; }
html.tab-codeme body :is(.fmenu, #cm#cm#cm) { border: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: var(--cmk-elev-1) !important; }

/* Framed in SolveMe the document never scrolls (each view scrolls itself),
   so app.css's root scrollbar-gutter only reserved a blank 10px strip: every
   view ended 10px short of the SolveMe crown above the frame. */
html.tab-codeme { scrollbar-gutter: auto; }

/* ══ Learn: the guides (their list is SolveMe's menu) ═══════════ */
html.tab-codeme body :is(.gdv, #cm#cm#cm) { grid-template-columns: minmax(0, 1fr) !important; background: var(--ground) !important; }
html.tab-codeme body :is(#viewGuides .gd-body, #cm#cm#cm) { padding: 16px 20px 40px !important; gap: 16px !important; }
html.tab-codeme body :is(#viewGuides .gd-head, #viewGuides .gd-top, #cm#cm#cm) {
  margin: 0 !important; padding: 0 !important; min-height: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html.tab-codeme body :is(#viewGuides .gd-head, #viewGuides .gd-top, #cm#cm#cm)::before,
html.tab-codeme body :is(#viewGuides .gd-head, #viewGuides .gd-top, #cm#cm#cm)::after { display: none !important; }
html.tab-codeme body :is(#viewGuides .gd-head h1, #viewGuides .gd-top h1, #cm#cm#cm) { font: 500 22px/28px var(--cmk-display) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(#viewGuides .gd-head p, #cm#cm#cm) { font: 400 14px/20px var(--font-sans) !important; }
html.tab-codeme body :is(.gd-top-m, #cm#cm#cm) { font: 400 13px/1.3 var(--font-sans) !important; }
html.tab-codeme body :is(.gd-top-bar, #cm#cm#cm) { height: 4px !important; border: 0 !important; background: var(--surface-3) !important; }
html.tab-codeme body :is(.gd-top-bar i, #cm#cm#cm) { background: var(--g-green) !important; }
html.tab-codeme body :is(#viewGuides .gd-card, #cm#cm#cm) { padding: 16px 18px !important; }
html.tab-codeme body :is(#viewGuides .gd-flow, #viewGuides .gd-rows, #viewGuides .gd-row, #viewGuides .gd-grid, #cm#cm#cm) { gap: 12px !important; }
/* The tier counts: number and label on one line, the tone on the number. */
html.tab-codeme body :is(#viewGuides .gd-tier, #cm#cm#cm) { display: flex !important; align-items: baseline; gap: 10px; padding: 14px 18px !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(#viewGuides .gd-tier-n, #cm#cm#cm) { font: 500 28px/1 var(--cmk-display) !important; color: var(--easy) !important; }
html.tab-codeme body :is(#viewGuides .gd-tier[data-tone="yellow"] .gd-tier-n, #cm#cm#cm) { color: var(--medium) !important; }
html.tab-codeme body :is(#viewGuides .gd-tier[data-tone="red"] .gd-tier-n, #cm#cm#cm) { color: var(--hard) !important; }
html.tab-codeme body :is(#viewGuides .gd-tier[data-tone="blue"] .gd-tier-n, #cm#cm#cm) { color: var(--accent-text) !important; }
html.tab-codeme body :is(#viewGuides .gd-tier-l, #cm#cm#cm) { font: 500 14px/1.2 var(--font-sans) !important; color: var(--text-secondary) !important; }
html.tab-codeme body :is(.gd-phase-w, #cm#cm#cm) { font: 500 12px/1.3 var(--font-sans) !important; color: var(--text-dimmed) !important; }
html.tab-codeme body :is(.gd-phase-n, #cm#cm#cm) { font: 500 15px/1.3 var(--cmk-display) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.gd-phase-p, #cm#cm#cm) { font: 500 13px/1.3 var(--font-sans) !important; color: var(--accent-text) !important; }
html.tab-codeme body :is(#viewGuides .gd-list, #viewGuides .gd-card .prose, #cm#cm#cm) { font-size: 14px !important; line-height: 1.6 !important; color: var(--text-primary); }
html.tab-codeme body :is(#viewGuides .gd-q, #cm#cm#cm) { border-top-color: var(--hairline) !important; }
html.tab-codeme body :is(#viewGuides .gd-q, #cm#cm#cm):hover { background: var(--surface-2); }
html.tab-codeme body :is(#viewGuides .gd-q-t, #cm#cm#cm) { font: 500 14px/1.35 var(--font-sans) !important; }
html.tab-codeme body :is(.gd-kind.is-key, #cm#cm#cm) { color: var(--accent-text) !important; }
html.tab-codeme body :is(#viewGuides .gd-faq, #cm#cm#cm) { border-color: var(--hairline) !important; }

/* ══ Roadmap ═══════════════════════════════════════════════════ */
html.tab-codeme body :is(#rmvGraph, #cm#cm#cm) { padding: 16px 20px 32px !important; }
html.tab-codeme body :is(#rmvGraph .rmv-stage-n, #rmvGraph .rmv-stage-l, #rmvGraph .rmv-stage-c, #cm#cm#cm) { font: 500 12.5px/1 var(--font-sans) !important; color: var(--text-dimmed) !important; }
html.tab-codeme body :is(#rmvGraph .rmv-stage-rule, #cm#cm#cm) { height: 1px !important; background: var(--hairline) !important; border: 0 !important; }
html.tab-codeme body :is(#rmvGraph .rmv-node, #viewRoadmap .rmv-node, #cm#cm#cm) {
  padding: 12px 14px !important; background: var(--surface-1) !important; transform: none !important;
}
html.tab-codeme body :is(#rmvGraph .rmv-node, #viewRoadmap .rmv-node, #cm#cm#cm):hover:not(:disabled):not([disabled]) {
  border-color: var(--border-hover) !important; background: var(--surface-1) !important; box-shadow: var(--cmk-elev-1) !important; transform: none !important;
}
html.tab-codeme body :is(#rmvGraph .rmv-node.is-sel, #viewRoadmap .rmv-node.is-sel, #cm#cm#cm) { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
html.tab-codeme body :is(#rmvGraph .rmv-node.is-done, #viewRoadmap .rmv-node.is-done, #cm#cm#cm) { box-shadow: inset 2px 0 0 var(--g-green) !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(#rmvGraph .rmv-node.is-part, #viewRoadmap .rmv-node.is-part, #cm#cm#cm) { box-shadow: inset 2px 0 0 var(--g-yellow) !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(#rmvGraph .rmv-label, #cm#cm#cm) { font: 500 14.5px/1.3 var(--cmk-display) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(#rmvGraph .rmv-meta, #cm#cm#cm) { font: 500 12px/1 var(--font-sans) !important; font-variant-numeric: tabular-nums; }
html.tab-codeme body :is(#rmvGraph .rmv-track, #viewRoadmap .rmv-track, #cm#cm#cm) { height: 4px !important; border: 0 !important; border-radius: 999px !important; background: var(--surface-3) !important; }
html.tab-codeme body :is(#rmvGraph .rmv-track span, #viewRoadmap .rmv-track span, #cm#cm#cm) { background: var(--g-green) !important; border-radius: 999px !important; }
html.tab-codeme body :is(.rmv-panel, #cm#cm#cm) { box-shadow: var(--cmk-elev-1) !important; }

/* ══ Challenges ════════════════════════════════════════════════ */
html.tab-codeme body :is(.chv, #cm#cm#cm) { padding: 16px 20px 32px !important; }
html.tab-codeme body :is(.chv-bar, #cm#cm#cm) { margin-bottom: 12px !important; }
html.tab-codeme body :is(.chv-pass, #cm#cm#cm) { color: var(--easy) !important; }
/* The row is the link (its name stretched over it); no button per row. */

/* ══ The problem workspace ═════════════════════════════════════
   One header row over the two panes (built by app.js in SolveMe). */
html.tab-codeme.cmk-ws { --topbar-h: 52px; }
.cmk-head[hidden] { display: none !important; }
.cmk-head {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  height: 52px; padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--border); background: var(--surface-1);
}
.cmk-crumbs { display: flex; align-items: center; gap: 6px; flex: none; font: 400 13.5px/20px var(--font-sans); color: var(--text-dimmed); }
.cmk-crumb { color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.cmk-crumb:hover { color: var(--accent-text); text-decoration: underline; }
.cmk-crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmk-sep { color: var(--text-dimmed); }
.cmk-title {
  flex: 0 1 auto; min-width: 0; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 17px/24px var(--cmk-display); color: var(--text-primary);
}
.cmk-facts { display: flex; align-items: center; gap: 6px; flex: none; }
.cmk-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 12px/1 var(--font-sans); white-space: nowrap; }
.cmk-pill.is-ok { background: var(--cmk-green-t); color: var(--easy); }
.cmk-pill.is-due { background: var(--cmk-yellow-t); color: var(--medium); }
.cmk-meta { font: 400 12.5px/1 var(--font-sans); color: var(--text-dimmed); white-space: nowrap; }
.cmk-gap { flex: 1; min-width: 8px; }
.cmk-nav { display: flex; align-items: center; flex: none; }
.cmk-nav .prob-nav { display: flex; align-items: center; gap: 6px; }
.cmk-nav .prob-nav[hidden] { display: none; }
.cmk-acts { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--border); }
html.tab-codeme body :is(.cmk-head .prob-nav-b, #cm#cm#cm) { height: 32px !important; padding: 0 12px !important; font-size: 13px !important; }
html.tab-codeme body :is(.cmk-head .prob-nav-pos, #cm#cm#cm) { font: 400 12.5px/1 var(--font-sans) !important; color: var(--text-dimmed) !important; }
html.tab-codeme body :is(.cmk-acts .btn, #cm#cm#cm) { display: inline-flex !important; align-items: center; gap: 6px; height: 34px !important; min-height: 34px !important; padding: 0 16px !important; font-size: 13.5px !important; }
html.tab-codeme body :is(.cmk-acts #btnRun, #cm#cm#cm) { color: var(--text-primary) !important; }
@media (max-width: 1240px) {
  .cmk-meta { display: none; }
  html.tab-codeme body :is(.cmk-head .prob-nav-b span, #cm#cm#cm) { display: none !important; }
}
@media (max-width: 1100px) {
  .cmk-crumbs .cmk-crumb:first-child, .cmk-crumbs .cmk-crumb:first-child + .cmk-sep { display: none; }
  .cmk-head .prob-nav-pos { display: none; }
}

/* Panes: hairlines, a small gutter, no shadows. */
html.tab-codeme body :is(.layout, #cm#cm#cm) { padding: 10px 14px 12px !important; background: var(--ground) !important; }
html.tab-codeme body :is(#problemPane .pane-head, #cm#cm#cm) { height: auto !important; min-height: 44px !important; flex: 0 0 auto !important; padding: 0 10px !important; }
html.tab-codeme body :is(.docnav-b, #cm#cm#cm) { height: 44px !important; padding: 0 12px !important; font: 500 14px/1 var(--cmk-display) !important; color: var(--text-secondary) !important; background: transparent !important; }
html.tab-codeme body :is(.docnav-b, #cm#cm#cm):hover { color: var(--text-primary) !important; }
html.tab-codeme body :is(.docnav-b.is-on, #cm#cm#cm) { color: var(--accent-text) !important; }
html.tab-codeme body :is(.docnav-b.is-on, #cm#cm#cm)::after { height: 2px !important; left: 8px !important; right: 8px !important; background: var(--accent) !important; border-radius: 2px 2px 0 0 !important; }
html.tab-codeme body :is(.docnav-b.is-on .docnav-n, #cm#cm#cm) { background: var(--accent-subtle) !important; border-color: transparent !important; color: var(--accent-text) !important; }
html.tab-codeme body :is(.list-btn, #cm#cm#cm) { width: 32px !important; height: 32px !important; }
html.tab-codeme body :is(#probHead, #cm#cm#cm)[hidden] { display: none !important; }
html.tab-codeme body :is(.phd, #cm#cm#cm) { padding: 14px 20px !important; gap: 8px !important; }
html.tab-codeme body :is(.phd-ver, #cm#cm#cm) {
  margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--border) !important;
  box-shadow: inset 2px 0 0 var(--g-blue) !important; background: var(--surface-2) !important;
}
html.tab-codeme body :is(.phd-ver-k, #cm#cm#cm) { font: 500 15px/20px var(--cmk-display) !important; }
html.tab-codeme body :is(.step-n, #cm#cm#cm) { border-radius: 50% !important; background: var(--accent-subtle) !important; color: var(--accent-text) !important; border: 0 !important; box-shadow: none !important; font-family: var(--font-sans) !important; }

/* The statement in topic-page type: 15px Roboto, Google Sans headings,
   code as quiet chips, examples as one ruled card. */
html.tab-codeme body :is(#problemPane .prose, #cm#cm#cm) { font: 400 15px/1.7 var(--font-sans) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(#problemPane #panel-statement > .prose:first-child, #cm#cm#cm) { padding: 16px 20px 4px !important; }
html.tab-codeme body :is(#problemPane .prose h2, #problemPane .prose h3, #cm#cm#cm) { font: 500 17px/1.35 var(--cmk-display) !important; margin: 18px 0 8px !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(#problemPane .prose strong, #cm#cm#cm) { font-weight: 500 !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.prose code, .prob-head code, .constraints code, #cm#cm#cm) {
  padding: 1px 6px !important; border: 0 !important; border-radius: 4px !important;
  background: var(--surface-3) !important; color: var(--text-primary) !important;
  font: 400 .88em/1.4 var(--font-mono) !important;
}
html.tab-codeme body :is(.prose pre code, #cm#cm#cm) { padding: 0 !important; background: none !important; }
html.tab-codeme body :is(#problemPane .block, #cm#cm#cm) { padding-inline: 20px !important; }
html.tab-codeme body :is(.ex-row + .ex-row, #cm#cm#cm) { border-top: 1px solid var(--hairline) !important; }
html.tab-codeme body :is(.ex-n, #cm#cm#cm) { border-radius: 50% !important; background: var(--surface-1) !important; border: 1px solid var(--border) !important; font: 500 12px/1 var(--font-sans) !important; }
html.tab-codeme body :is(.ex-kv dd, #cm#cm#cm) { font: 400 13.5px/1.6 var(--font-mono) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.hintbox summary, #cm#cm#cm) { font: 500 14px/1.3 var(--font-sans) !important; }

/* Solutions: a comparison table, then each approach as an editorial. */
html.tab-codeme body :is(.sol-nav, #cm#cm#cm) { padding: 0 20px !important; background: var(--surface-1) !important; border-bottom: 1px solid var(--hairline) !important; box-shadow: none !important; }
html.tab-codeme body :is(.sol-list, #cm#cm#cm) { border: 1px solid var(--border) !important; border-radius: 0 !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(.sol-list-h, #cm#cm#cm) { background: var(--surface-2) !important; font: 500 12px/1 var(--font-sans) !important; color: var(--text-dimmed) !important; }
html.tab-codeme body :is(.sol-list .sol-pill, #cm#cm#cm) { border-radius: 0 !important; box-shadow: none !important; font-family: var(--font-sans) !important; }
html.tab-codeme body :is(.sol-list .sol-pill, #cm#cm#cm):hover { background: var(--surface-2) !important; }
html.tab-codeme body :is(.sol-list .sol-pill.is-on, #cm#cm#cm) { background: var(--accent-subtle) !important; box-shadow: inset 2px 0 0 var(--accent) !important; }
html.tab-codeme body :is(.sol-list .sol-pill-cx, #cm#cm#cm) { font: 400 12.5px/1.35 var(--font-mono) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.sol-list .sol-pill-n, #cm#cm#cm) { border-radius: 50% !important; border: 1px solid var(--border) !important; background: var(--surface-1) !important; font-family: var(--font-sans) !important; }
html.tab-codeme body :is(.sol-list .sol-pill.is-on .sol-pill-n, #cm#cm#cm) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--cmk-on-accent) !important; }
html.tab-codeme body :is(.sol-best, #cm#cm#cm) { height: 20px; padding: 0 8px !important; border: 0 !important; border-radius: 999px !important; font: 500 11px/20px var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; background: var(--surface-3) !important; color: var(--text-secondary) !important; }
html.tab-codeme body :is(.sol-best.is-optimal, #cm#cm#cm) { background: var(--cmk-green-t) !important; color: var(--easy) !important; }
html.tab-codeme body :is(.sol-best.is-better, #cm#cm#cm) { background: var(--cmk-yellow-t) !important; color: var(--medium) !important; }
html.tab-codeme body :is(.sol-best.is-brute, #cm#cm#cm) { background: var(--cmk-red-t) !important; color: var(--hard) !important; }
html.tab-codeme body :is(.sol-pill-load, #cm#cm#cm) { border: 1px solid var(--control) !important; color: var(--accent-text) !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(.sol-card, #cm#cm#cm) { margin: 12px 20px 0 !important; border: 0 !important; border-top: 0 !important; background: transparent !important; box-shadow: none !important; }
html.tab-codeme body :is(.sol-panel, #cm#cm#cm) { padding: 4px 0 24px !important; }
html.tab-codeme body :is(.sol-head, #cm#cm#cm) { gap: 10px 14px !important; margin-bottom: 14px !important; }
html.tab-codeme body :is(.sol-title, #cm#cm#cm) { font: 500 20px/1.3 var(--cmk-display) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.sol-stage, #cm#cm#cm) { height: 22px !important; border-radius: 999px !important; font: 500 12px/1 var(--font-sans) !important; }
html.tab-codeme body :is(.sol-stage.is-brute, #cm#cm#cm) { background: var(--cmk-red-t) !important; color: var(--hard) !important; }
html.tab-codeme body :is(.sol-stage.is-better, #cm#cm#cm) { background: var(--cmk-yellow-t) !important; color: var(--medium) !important; }
html.tab-codeme body :is(.sol-stage.is-optimal, #cm#cm#cm) { background: var(--cmk-green-t) !important; color: var(--easy) !important; }
html.tab-codeme body :is(.cx-chip, #cm#cm#cm) { height: 28px !important; border-color: var(--border) !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(.cx-chip b, #cm#cm#cm) { font: 500 13px/1 var(--font-mono) !important; }
html.tab-codeme body :is(.sol-why-line, #cm#cm#cm) { border-left: 0 !important; box-shadow: inset 2px 0 0 var(--accent) !important; background: var(--accent-subtle) !important; font: 400 14px/1.55 var(--font-sans) !important; }
/* Sections by heading and space, not by boxes. */
html.tab-codeme body :is(.sol-extra, #cm#cm#cm) { margin: 22px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.tab-codeme body :is(.sol-panel .extra-h, #cm#cm#cm) { font: 500 16px/22px var(--cmk-display) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.sol-extra.is-idea, .sol-extra.is-warn, #cm#cm#cm) { padding: 12px 14px !important; }
html.tab-codeme body :is(.sol-extra.is-idea, #cm#cm#cm) { background: var(--surface-2) !important; box-shadow: inset 2px 0 0 var(--g-blue) !important; }
html.tab-codeme body :is(.sol-extra.is-warn, #cm#cm#cm) { background: var(--cmk-yellow-t) !important; box-shadow: inset 2px 0 0 var(--g-yellow) !important; }
html.tab-codeme body :is(.sol-extra .prose, .algo li, .pitfalls li, .keypoints li, #cm#cm#cm) { font: 400 14.5px/1.65 var(--font-sans) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(.algo li, #cm#cm#cm)::marker { color: var(--accent-text) !important; font-family: var(--font-sans) !important; }
html.tab-codeme body :is(.keypoints .ico, #cm#cm#cm) { color: var(--g-green) !important; }
html.tab-codeme body :is(.sol-code-bar, #cm#cm#cm) { background: var(--surface-2) !important; border-bottom: 1px solid var(--border) !important; }
html.tab-codeme body :is(.sol-lang, #cm#cm#cm) { border-radius: 999px !important; font: 500 12.5px/1 var(--font-sans) !important; box-shadow: none !important; }
html.tab-codeme body :is(.sol-lang.is-on, #cm#cm#cm) { background: var(--accent-subtle) !important; color: var(--accent-text) !important; }
html.tab-codeme body :is(.sol-copy, #cm#cm#cm) { border-radius: 999px !important; font-family: var(--font-sans) !important; }
html.tab-codeme body :is(.cm-hl, .prose pre, #cm#cm#cm) { border-radius: 0 !important; font-family: var(--font-mono) !important; }
html.tab-codeme body :is(.sol-gate, #cm#cm#cm) { margin: 0 20px !important; }

/* Notes and the editor. */
html.tab-codeme body :is(.notes-box, #cm#cm#cm) { border: 1px solid var(--control) !important; border-radius: 0 !important; font-family: var(--font-sans) !important; }
html.tab-codeme body :is(.edit-langs, #cm#cm#cm) { height: 32px !important; border: 1px solid var(--control) !important; border-radius: 999px !important; background: var(--surface-1) !important; font: 500 13px/1 var(--font-sans) !important; }
html.tab-codeme body :is(.editor-head, #cm#cm#cm) { height: 44px !important; }
html.tab-codeme body :is(.sol-view, #cm#cm#cm) { background: var(--accent-subtle) !important; border-bottom: 1px solid var(--border) !important; }

/* Results: the console's tabs, the verdict, a row per test. */
html.tab-codeme body :is(.console-head .tab, .tabbar.sm .tab, #cm#cm#cm) {
  height: 100% !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  font: 500 13.5px/1 var(--cmk-display) !important; color: var(--text-secondary) !important; box-shadow: none !important;
}
html.tab-codeme body :is(.console-head .tab.is-on, .tabbar.sm .tab.is-on, #cm#cm#cm) { color: var(--accent-text) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; background: transparent !important; }
html.tab-codeme body :is(.console-head, #cm#cm#cm) { height: 40px !important; }
html.tab-codeme body :is(.verdict, #cm#cm#cm) { margin: 12px !important; padding: 12px 14px !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(.verdict.is-pass, #cm#cm#cm) { box-shadow: inset 2px 0 0 var(--g-green) !important; border-color: var(--border) !important; background: var(--cmk-green-t) !important; }
html.tab-codeme body :is(.verdict.is-fail, #cm#cm#cm) { box-shadow: inset 2px 0 0 var(--err) !important; border-color: var(--border) !important; background: var(--err-t) !important; }
html.tab-codeme body :is(.verdict.is-idle, #cm#cm#cm) { box-shadow: inset 2px 0 0 var(--g-yellow) !important; border-color: var(--border) !important; background: var(--cmk-yellow-t) !important; }
html.tab-codeme body :is(.verdict-main, #cm#cm#cm) { font: 500 16px/1.3 var(--cmk-display) !important; }
html.tab-codeme body :is(.verdict.is-pass .verdict-main, #cm#cm#cm) { color: var(--easy) !important; }
html.tab-codeme body :is(.verdict.is-fail .verdict-main, #cm#cm#cm) { color: var(--err-text) !important; }
html.tab-codeme body :is(.verdict.is-idle .verdict-main, #cm#cm#cm) { color: var(--medium) !important; }
html.tab-codeme body :is(.verdict-sub, #cm#cm#cm) { font: 400 13px/1.4 var(--font-sans) !important; color: var(--text-secondary) !important; }
html.tab-codeme body :is(.verdict-bar, #cm#cm#cm) { height: 4px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important; }
html.tab-codeme body :is(.tcases, #cm#cm#cm) { margin: 0 12px 12px !important; }
html.tab-codeme body :is(.tcase.is-fail, #cm#cm#cm) { box-shadow: inset 2px 0 0 var(--err) !important; }
html.tab-codeme body :is(.tcase.is-pass .mark, #cm#cm#cm) { color: var(--g-green) !important; }
html.tab-codeme body :is(.tcase.is-fail .mark, #cm#cm#cm) { color: var(--err) !important; }
html.tab-codeme body :is(.tcase-h, #cm#cm#cm):hover { background: var(--surface-2) !important; }
html.tab-codeme body :is(.kv dd, #cm#cm#cm) { font: 400 13px/1.6 var(--font-mono) !important; }
html.tab-codeme body :is(.kv dd.want, #cm#cm#cm) { color: var(--easy) !important; }
html.tab-codeme body :is(.kv dd.got, #cm#cm#cm) { color: var(--hard) !important; }
html.tab-codeme body :is(.case-tier, #cm#cm#cm) { border-radius: 999px !important; font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; }
html.tab-codeme body :is(.tier-note, #cm#cm#cm) { margin: 0 12px 12px !important; font: 400 13px/1.5 var(--font-sans) !important; }
html.tab-codeme body :is(.out .empty, #out-results > .empty, #cm#cm#cm) { font: 400 13px/1.4 var(--font-sans) !important; color: var(--text-dimmed) !important; font-style: normal !important; }

/* ══ Codepad and a challenge: the same header row ══════════════ */
html.tab-codeme body :is(#viewPlayground, #cm#cm#cm) { padding: 0 14px 12px !important; background: var(--ground) !important; }
html.tab-codeme body :is(#viewPlayground > .pgv-bar, #cm#cm#cm) {
  min-height: 52px !important; margin: 0 -14px 10px !important; padding: 0 16px 0 18px !important;
  border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important;
  background: var(--surface-1) !important; box-shadow: none !important;
}
html.tab-codeme body :is(#viewPlayground > .pgv-bar, #cm#cm#cm)::after, html.tab-codeme body :is(#viewPlayground > .pgv-bar, #cm#cm#cm)::before { display: none !important; }
html.tab-codeme body :is(#viewPlayground > .pgv-bar, #cm#cm#cm) { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; }
html.tab-codeme body :is(#viewPlayground > .pgv-bar > .cmk-acts, #cm#cm#cm) { margin-left: auto; }
html.tab-codeme body :is(#viewPlayground .pgv-runbar, #cm#cm#cm) { display: none !important; }
html.tab-codeme body :is(#viewPlayground .cmk-acts .btn, #cm#cm#cm) { display: inline-flex !important; align-items: center; gap: 6px; height: 34px !important; padding: 0 16px !important; font-size: 13.5px !important; border-radius: 999px !important; }
html.tab-codeme body :is(#viewPlayground .cmk-acts #pgRun, #cm#cm#cm) { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--cmk-on-accent) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-file .pgv-status, #cm#cm#cm) {
  display: flex !important; align-items: center; gap: 10px; margin: 0 0 0 auto !important; padding: 0 4px 0 0 !important;
  height: auto !important; border: 0 !important; background: transparent !important;
  font: 400 12px/1 var(--font-sans) !important; color: var(--text-dimmed) !important;
}
html.tab-codeme body :is(#viewPlayground .pgv-file .pgv-st-lang, #cm#cm#cm) { display: none !important; }
html.tab-codeme body :is(#viewPlayground .pgv-crown-t, #cm#cm#cm) { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; }
html.tab-codeme body :is(#viewPlayground .pgv-crown-t h1, #viewPlayground .pgv-title, #cm#cm#cm) { margin: 0 !important; font: 500 17px/24px var(--cmk-display) !important; color: var(--text-primary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tab-codeme body :is(#viewPlayground .lang-pick, #cm#cm#cm) { height: 34px !important; border: 1px solid var(--control) !important; border-radius: 999px !important; background: var(--surface-1) !important; font: 500 13.5px/1 var(--font-sans) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-split, #viewPlayground .pgv-brief, #cm#cm#cm) { border: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; background: var(--surface-1) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-file, #cm#cm#cm) { border-bottom: 1px solid var(--border) !important; background: var(--surface-2) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-file-tab, #cm#cm#cm) { font-family: var(--font-mono) !important; box-shadow: none !important; }
html.tab-codeme body :is(#viewPlayground .console-head .tab, #cm#cm#cm) { height: 100% !important; border-radius: 0 !important; margin: 0 !important; }
html.tab-codeme body :is(#viewPlayground .console-head .tab.is-on, #cm#cm#cm) { background: transparent !important; color: var(--accent-text) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-tools .btn, #cm#cm#cm) { height: 30px !important; border: 1px solid var(--control) !important; background: var(--surface-1) !important; color: var(--text-primary) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-runbar .btn, #viewPlayground .pgv-runbar #pgRun, #cm#cm#cm) { height: 32px !important; border-radius: 999px !important; box-shadow: none !important; }
html.tab-codeme body :is(#viewPlayground .pgv-runbar #pgRun, #cm#cm#cm) { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--cmk-on-accent) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-kbd, .pgv-kbd, #cm#cm#cm) { font-family: var(--font-mono) !important; }
html.tab-codeme body :is(#viewPlayground .pgv-status, #cm#cm#cm) { font-family: var(--font-sans) !important; }
html.tab-codeme body :is(.pgv-brief-body, .lab-brief, #cm#cm#cm) { font: 400 14.5px/1.65 var(--font-sans) !important; }
html.tab-codeme body :is(.pgv-brief-body h3, #cm#cm#cm) { font: 500 16px/1.35 var(--cmk-display) !important; }
html.tab-codeme body :is(.lab-brief-title, #cm#cm#cm) { font: 500 22px/1.25 var(--cmk-display) !important; }
html.tab-codeme body :is(.lab-tag, #cm#cm#cm) { border-radius: 999px !important; font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── Working: the moving four-colour border (aria-busy) ───────── */
@property --cmk-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cmk-travel { to { --cmk-angle: 360deg; } }
html.tab-codeme { --cmk-g1: #0077FF; --cmk-g2: #5AA2FF; --cmk-g3: #9AD61A; --cmk-g4: #00C896; }
html.tab-codeme[data-scheme='dark'] { --cmk-g1: #5AA2FF; --cmk-g2: #9CC6FF; --cmk-g3: #9AD61A; --cmk-g4: #00C896; }
html.tab-codeme body :is(.console[aria-busy='true'], .pgv-console[aria-busy='true'], .cmk-run[aria-busy='true'], #pgRun[aria-busy='true'], #pgRunTests[aria-busy='true'], #cm#cm#cm) { position: relative; }
html.tab-codeme body :is(.console[aria-busy='true'], .pgv-console[aria-busy='true'], .cmk-run[aria-busy='true'], #pgRun[aria-busy='true'], #pgRunTests[aria-busy='true'], #cm#cm#cm)::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--cmk-angle), var(--cmk-g1), var(--cmk-g2), var(--cmk-g3), var(--cmk-g4), var(--cmk-g1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: cmk-travel 2.6s linear infinite;
}
html.tab-codeme body :is(.cmk-run[aria-busy='true'], #pgRun[aria-busy='true'], #pgRunTests[aria-busy='true'], #cm#cm#cm) { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  html.tab-codeme [aria-busy='true']::after { animation: none !important; }
  html.tab-codeme body :is(.rmv-node, .plv-row, .gd-q-t, .tcase-h::after, #cm#cm#cm) { transition: none !important; }
}

/* Hidden controls stay hidden whatever display a skin rule gives them. */
html.tab-codeme body :is(.btn[hidden], .cmk-run[hidden], #pgStop[hidden], #pgRunTests[hidden], #cm#cm#cm) { display: none !important; }
html.tab-codeme body :is(.phd-ver, #cm#cm#cm) { border-left-width: 1px !important; }