/* ============================================================
   Gen-Z Google layer for cariara.com/tools/pg (every page but the
   SolveMe frame, which has its own skin): the Google four in turn,
   one-row page heads with a four-colour rule, tinted stat tiles,
   pill controls, square hairline cards, Google elevation on hover.
   Each rule wraps its selector in :is(…, #gz#gz#gz#gz) so it outranks
   the older skins (app, m3, layout, soft, flat); add rules the same way.
   Light and dark.
   ============================================================ */
html:not(.tab-codeme) {
  --gz-blue: #0077FF;   --gz-blue-x: #0062D6;   --gz-blue-t: #EEF3FE;
  --gz-red: #5AA2FF;    --gz-red-x: #2B83EC;    --gz-red-t: #F2F7FF;
  --gz-yellow: #9AD61A; --gz-yellow-x: #5E8C0A; --gz-yellow-t: #F7FDE6;
  --gz-green: #00C896;  --gz-green-x: #00866B;  --gz-green-t: #EEFBF6;
  --gz-on-blue: #FFFFFF;
  --gz-elev: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --gz-display: 'Plus Jakarta Sans', var(--font-sans);
  --gz-text: var(--font-sans);
}
html[data-scheme='dark']:not(.tab-codeme) {
  --gz-blue: #5AA2FF;   --gz-blue-x: #5AA2FF;   --gz-blue-t: rgba(90, 162, 255, .14);
  --gz-red: #9CC6FF;    --gz-red-x: #9CC6FF;    --gz-red-t: #1D2430;
  --gz-yellow: #9AD61A; --gz-yellow-x: #9AD61A; --gz-yellow-t: #1F2519;
  --gz-green: #00C896;  --gz-green-x: #00C896;  --gz-green-t: #192724;
  --gz-on-blue: #10161E;
  --gz-elev: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .25);
}

/* One tone for all: --t blue (bars, focus), --tx ink text, --tt a faint ink wash. */
html:not(.tab-codeme) :is(#modeTabs .mode-tab, .pcr-card, #viewRoadmap .rmv-tile, .plv-sec, #viewRoadmap .rmv-stage) { --t: var(--gz-blue); --tx: var(--text-primary); --tt: color-mix(in srgb, var(--text-primary) 6%, transparent); }

/* ── Mode tabs: hairline pills, icons in grey, the open tab a blue wash */
html:not(.tab-codeme) body :is(.topbar, #gz#gz#gz#gz) { border-bottom: 1px solid var(--hairline) !important; box-shadow: none !important; gap: 8px !important; }
html:not(.tab-codeme) body :is(#modeTabs, #gz#gz#gz#gz) { gap: 6px !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab, #gz#gz#gz#gz) { height: 36px !important; padding: 0 14px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; font: 600 14px/1 var(--gz-display) !important; color: var(--text-primary) !important; gap: 7px !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab svg, #gz#gz#gz#gz) { color: var(--text-secondary) !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab:hover, #gz#gz#gz#gz) { background: var(--surface-2) !important; border-color: var(--text-dimmed) !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab.is-on, #gz#gz#gz#gz) { background: var(--gz-blue-t) !important; border-color: var(--gz-blue) !important; color: var(--gz-blue-x) !important; font-weight: 700 !important; }
html:not(.tab-codeme) body :is(#modeTabs .mode-tab.is-on svg, #gz#gz#gz#gz) { color: var(--gz-blue-x) !important; }
html:not(.tab-codeme) body :is(#langSwitch, #gz#gz#gz#gz) { padding: 3px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(#langSwitch button, #langSwitch .lang-btn, #gz#gz#gz#gz) { height: 30px !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; }
html:not(.tab-codeme) body :is(#langSwitch .is-on, #langSwitch [aria-pressed="true"], #langSwitch [aria-selected="true"], #gz#gz#gz#gz) { background: var(--gz-blue) !important; color: var(--gz-on-blue) !important; }

/* ── Page heads: one row, a four-colour rule on top, grey stat tiles, the action last */
html:not(.tab-codeme) body :is(.pcr, #viewRoadmap .rmv-head, .chv-head, #viewPlayground > .pgv-bar, #gz#gz#gz#gz) { position: relative; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px 22px !important; padding: 20px 22px 18px !important; margin: 0 0 16px !important; border: 1px solid var(--hairline) !important; border-radius: 0 !important; background: var(--surface-1) !important; box-shadow: none !important; overflow: hidden; min-height: 0 !important; height: auto !important; }
html:not(.tab-codeme) body :is(.pcr, #viewRoadmap .rmv-head, .chv-head, #viewPlayground > .pgv-bar, #gz#gz#gz#gz)::before { content: '' !important; display: block !important; position: absolute !important; inset: 0 0 auto 0 !important; width: auto !important; height: 3px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; transform: none !important; background: linear-gradient(90deg, var(--gz-blue), var(--gz-red) 40%, var(--gz-green) 75%, var(--gz-yellow)) !important; }
html:not(.tab-codeme) body :is(.pcr, #viewRoadmap .rmv-head, .chv-head, #viewPlayground > .pgv-bar, #gz#gz#gz#gz)::after { display: none !important; }
html:not(.tab-codeme) body :is(.pcr h1, #viewRoadmap .rmv-head h1, .chv-head h1, #viewPlayground .pgv-crown-t h1, #gz#gz#gz#gz) { margin: 0 !important; font: 800 clamp(26px, 2.6vw, 36px)/1.05 var(--gz-display) !important; letter-spacing: -.03em !important; color: var(--text-primary) !important; }
html:not(.tab-codeme) body :is(.pcr-kicker, #gz#gz#gz#gz) { display: none !important; }
html:not(.tab-codeme) body :is(.pcr-copy, .chv-title, #viewPlayground .pgv-crown-t, #gz#gz#gz#gz) { flex: 0 0 auto !important; display: flex !important; align-items: baseline !important; gap: 12px !important; }
html:not(.tab-codeme) body :is(.pcr-stats, #gz#gz#gz#gz) { order: 2; flex: 1 1 auto !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px !important; margin: 0 !important; width: auto !important; }
html:not(.tab-codeme) body :is(.pcr-btn, #gz#gz#gz#gz) { order: 3; margin-left: auto !important; height: 40px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--gz-blue) !important; color: var(--gz-on-blue) !important; box-shadow: none !important; font: 700 14px/1 var(--gz-display) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
html:not(.tab-codeme) body :is(.pcr-btn:hover, #gz#gz#gz#gz) { box-shadow: var(--gz-elev) !important; }
html:not(.tab-codeme) body :is(.pcr-card, #viewRoadmap .rmv-tile, #gz#gz#gz#gz) { display: flex !important; align-items: center !important; gap: 8px !important; height: auto !important; padding: 8px 14px !important; border: 0 !important; border-radius: 0 !important; background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.pcr-card b, #viewRoadmap .rmv-tile b, #gz#gz#gz#gz) { font: 800 22px/1 var(--gz-display) !important; letter-spacing: -.02em; color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
html:not(.tab-codeme) body :is(.pcr-card small, #viewRoadmap .rmv-tile span, #gz#gz#gz#gz) { font: 500 12.5px/1 var(--gz-text) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-secondary) !important; }
html:not(.tab-codeme) body :is(.pcr-well, #gz#gz#gz#gz) { width: 26px !important; height: 26px !important; border: 0 !important; border-radius: 50% !important; background: var(--surface-1) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-overall, #gz#gz#gz#gz) { flex: 1 1 auto; display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-tiles, #gz#gz#gz#gz) { display: flex !important; gap: 8px !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-meter, #gz#gz#gz#gz) { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-bar, #gz#gz#gz#gz) { flex: 1; height: 6px !important; border: 0 !important; border-radius: 999px !important; background: var(--surface-3, var(--hairline)) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-bar span, #gz#gz#gz#gz) { border-radius: 999px !important; background: var(--gz-green) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-count, #gz#gz#gz#gz) { font: 500 12.5px/1.2 var(--gz-text) !important; color: var(--text-secondary) !important; }
html:not(.tab-codeme) body :is(.chv-title span, #gz#gz#gz#gz) { font: 500 13px/1 var(--gz-text) !important; color: var(--text-secondary) !important; }

/* ── Problems list */
html:not(.tab-codeme) body :is(.plv-search, .chv-search, #gz#gz#gz#gz) { height: 42px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.plv-search:focus-within, .chv-search:focus-within, #gz#gz#gz#gz) { border-color: var(--gz-blue) !important; box-shadow: 0 0 0 3px var(--gz-blue-t) !important; }
html:not(.tab-codeme) body :is(.fchip-b, .plv-act, #gz#gz#gz#gz) { height: 42px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; font: 600 13.5px/1 var(--gz-text) !important; color: var(--text-primary) !important; }
html:not(.tab-codeme) body :is(.fchip-b:hover, .plv-act:hover, #gz#gz#gz#gz) { border-color: var(--gz-blue) !important; background: var(--gz-blue-t) !important; color: var(--gz-blue-x) !important; }
html:not(.tab-codeme) body :is(.plv-sec, .plv-bar, .plv-card, #gz#gz#gz#gz) { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html:not(.tab-codeme) body :is(.plv-sec, #gz#gz#gz#gz) { margin-bottom: 14px !important; border: 1px solid var(--hairline) !important; border-left: 2px solid var(--t) !important; }
html:not(.tab-codeme) body :is(.plv-sec-h, #gz#gz#gz#gz) { height: 52px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--hairline) !important; background: var(--tt) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.plv-sec-t, #gz#gz#gz#gz) { font: 800 17px/1.2 var(--gz-display) !important; letter-spacing: -.01em !important; color: var(--text-primary) !important; }
html:not(.tab-codeme) body :is(.plv-sec-t, #gz#gz#gz#gz)::before { content: '' !important; width: 10px !important; height: 10px !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important; background: var(--t) !important; }
html:not(.tab-codeme) body :is(.plv-sec-n, #gz#gz#gz#gz) { border: 0 !important; border-radius: 999px !important; background: var(--surface-1) !important; color: var(--tx) !important; font: 700 12px/1 var(--gz-text) !important; padding: 5px 10px !important; }
html:not(.tab-codeme) body :is(.plv-meter, #gz#gz#gz#gz) { height: 6px !important; border: 0 !important; border-radius: 999px !important; background: var(--surface-1) !important; }
html:not(.tab-codeme) body :is(.plv-meter i, #gz#gz#gz#gz) { border-radius: 999px !important; background: var(--t) !important; }
html:not(.tab-codeme) body :is(.plv-row, #gz#gz#gz#gz) { border-color: var(--hairline) !important; }
html:not(.tab-codeme) body :is(.plv-row:hover, #gz#gz#gz#gz) { background: var(--tt) !important; }
html:not(.tab-codeme) body :is(.plv-diff, .chv-diff, .gd-diff, .phd-diff, .badge.d-Easy, .badge.d-Medium, .badge.d-Hard, #gz#gz#gz#gz) { display: inline-flex !important; align-items: center; height: 22px; padding: 0 9px !important; border: 0 !important; border-radius: 999px !important; font: 600 12px/1 var(--gz-text) !important; }
html:not(.tab-codeme) body :is(.d-Easy.plv-diff, .d-Easy.chv-diff, .d-Easy.phd-diff, .badge.d-Easy, #gz#gz#gz#gz) { background: var(--gz-green-t) !important; color: var(--gz-green-x) !important; }
html:not(.tab-codeme) body :is(.d-Medium.plv-diff, .d-Medium.chv-diff, .d-Medium.phd-diff, .badge.d-Medium, #gz#gz#gz#gz) { background: var(--gz-yellow-t) !important; color: var(--gz-yellow-x) !important; }
html:not(.tab-codeme) body :is(.d-Hard.plv-diff, .d-Hard.chv-diff, .d-Hard.phd-diff, .badge.d-Hard, #gz#gz#gz#gz) { background: var(--gz-red-t) !important; color: var(--gz-red-x) !important; }
html:not(.tab-codeme) body :is(.plv-card, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; background: var(--surface-1) !important; }

/* ── Roadmap: stages in turn, nodes as square hairline cards with a tone rule */
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-stage-n, #gz#gz#gz#gz) { border: 0 !important; border-radius: 999px !important; background: var(--tt) !important; color: var(--tx) !important; font: 800 12px/1 var(--gz-display) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-stage-l, #gz#gz#gz#gz) { font: 800 15px/1 var(--gz-display) !important; color: var(--text-primary) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-stage-rule, #gz#gz#gz#gz) { border-top: 1px dashed var(--t) !important; opacity: .55; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-stage-c, #gz#gz#gz#gz) { font: 600 12.5px/1 var(--gz-text) !important; color: var(--tx) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-node, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-top: 2px solid var(--t) !important; border-radius: 0 !important; background: var(--surface-1) !important; box-shadow: none !important; transform: none !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-node:hover:not(:disabled), #viewRoadmap .rmv-node.is-sel, #gz#gz#gz#gz) { background: var(--tt) !important; box-shadow: var(--gz-elev) !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-node b, #viewRoadmap .rmv-node .rmv-node-t, #gz#gz#gz#gz) { font-family: var(--gz-display) !important; font-weight: 800 !important; }
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-panel, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: var(--gz-elev) !important; }

/* ── Problem workspace */
html:not(.tab-codeme) body :is(.layout > .pane, .pgv-split, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.pane-head, .pgv .console-head, #gz#gz#gz#gz) { border-bottom: 1px solid var(--hairline) !important; background: var(--surface-2) !important; }
html:not(.tab-codeme) body :is(.btn, #gz#gz#gz#gz) { border-radius: 999px !important; box-shadow: none !important; transform: none !important; }
html:not(.tab-codeme) body :is(.btn-primary, #gz#gz#gz#gz) { border: 1px solid transparent !important; background: var(--gz-blue) !important; color: var(--gz-on-blue) !important; font-weight: 700 !important; }
html:not(.tab-codeme) body :is(.btn-primary:hover:not(:disabled), #gz#gz#gz#gz) { box-shadow: var(--gz-elev) !important; }
html:not(.tab-codeme) body :is(.btn-secondary, .pgv-tests, #gz#gz#gz#gz) { border: 1px solid var(--gz-green) !important; background: var(--surface-1) !important; color: var(--gz-green-x) !important; font-weight: 700 !important; }
html:not(.tab-codeme) body :is(.btn-secondary:hover:not(:disabled), .pgv-tests:hover:not(:disabled), #gz#gz#gz#gz) { background: var(--gz-green-t) !important; }
html:not(.tab-codeme) body :is(.btn-ghost, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; background: var(--surface-1) !important; color: var(--text-primary) !important; }
html:not(.tab-codeme) body :is(.btn:disabled, #gz#gz#gz#gz) { opacity: .5; }
html:not(.tab-codeme) body :is(.tabbar.sm .tab, #gz#gz#gz#gz) { height: 32px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; color: var(--text-primary) !important; font-weight: 600 !important; white-space: nowrap; }
html:not(.tab-codeme) body :is(.tabbar.sm .tab.is-on, #gz#gz#gz#gz) { background: var(--gz-blue-t) !important; border-color: var(--gz-blue) !important; color: var(--gz-blue-x) !important; }
html:not(.tab-codeme) body :is(.tabbar.sm, #gz#gz#gz#gz) { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
html:not(.tab-codeme) body :is(.phd-ver, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-left: 2px solid var(--gz-blue) !important; border-radius: 0 !important; background: var(--gz-blue-t) !important; }
html:not(.tab-codeme) body :is(.phd-top h1, .phd-title, #gz#gz#gz#gz) { font: 800 clamp(24px, 2.2vw, 32px)/1.1 var(--gz-display) !important; letter-spacing: -.03em !important; }
html:not(.tab-codeme) body :is(.uc-chip, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.uc-chip.is-on, .uc-chip[aria-pressed="true"], #gz#gz#gz#gz) { border-color: var(--gz-blue) !important; background: var(--surface-1) !important; color: var(--gz-blue-x) !important; font-weight: 700 !important; }
html:not(.tab-codeme) body :is(.hintbox, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-left: 2px solid var(--gz-yellow) !important; border-radius: 0 !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.followup, #gz#gz#gz#gz) { border-left: 2px solid var(--gz-yellow) !important; }
html:not(.tab-codeme) body :is(.docnav .tab.is-on, .doc-tabs .tab.is-on, #gz#gz#gz#gz) { color: var(--gz-blue-x) !important; border-bottom-color: var(--gz-blue) !important; }

/* ── Codepad */
html:not(.tab-codeme) body :is(.pgv-file, .pgv-file-tab, .pgv-file-pos, .pgv-status, .pgv-status > span, #gz#gz#gz#gz) { border-color: var(--hairline) !important; border-width: 1px !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.pgv-status, #gz#gz#gz#gz) { border-radius: 0 !important; }
html:not(.tab-codeme) body :is(.pgv-status > .pgv-st-lang, #gz#gz#gz#gz) { background: var(--gz-blue-t) !important; color: var(--gz-blue-x) !important; }
html:not(.tab-codeme) body :is(.pgv-status > .pgv-st-save, #gz#gz#gz#gz) { background: var(--gz-green-t) !important; color: var(--gz-green-x) !important; }
html:not(.tab-codeme) body :is(#viewPlayground .lang-groups, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.pgv-tools .btn, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(#pgout-output:empty, #gz#gz#gz#gz)::after { border: 1px solid var(--hairline) !important; box-shadow: none !important; border-radius: 999px !important; }

/* ── Challenges */
html:not(.tab-codeme) body :is(.chv-level, #gz#gz#gz#gz) { height: 36px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; background: var(--surface-1) !important; box-shadow: none !important; font: 600 13px/1 var(--gz-text) !important; }
html:not(.tab-codeme) body :is(.chv-level:nth-child(1).is-on, #gz#gz#gz#gz) { background: var(--gz-blue-t) !important; border-color: var(--gz-blue) !important; color: var(--gz-blue-x) !important; }
html:not(.tab-codeme) body :is(.chv-level:nth-child(2).is-on, #gz#gz#gz#gz) { background: var(--gz-green-t) !important; border-color: var(--gz-green) !important; color: var(--gz-green-x) !important; }
html:not(.tab-codeme) body :is(.chv-level:nth-child(3).is-on, #gz#gz#gz#gz) { background: var(--gz-yellow-t) !important; border-color: var(--gz-yellow) !important; color: var(--gz-yellow-x) !important; }
html:not(.tab-codeme) body :is(.chv-level:nth-child(4).is-on, #gz#gz#gz#gz) { background: var(--gz-red-t) !important; border-color: var(--gz-red) !important; color: var(--gz-red-x) !important; }
html:not(.tab-codeme) body :is(.chv-wrap, #gz#gz#gz#gz) { border: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: none !important; }
html:not(.tab-codeme) body :is(.chv-table thead th, #gz#gz#gz#gz) { background: var(--surface-2) !important; font: 700 12.5px/1 var(--gz-text) !important; color: var(--text-secondary) !important; }
html:not(.tab-codeme) body :is(.chv-table tbody tr:hover, #gz#gz#gz#gz) { background: var(--gz-blue-t) !important; }
html:not(.tab-codeme) body :is(.chv-name, #gz#gz#gz#gz) { font: 800 15px/1.3 var(--gz-display) !important; color: var(--text-primary) !important; }
html:not(.tab-codeme) body :is(.chv-table tbody tr:hover .chv-name, #gz#gz#gz#gz) { color: var(--gz-blue-x) !important; }
html:not(.tab-codeme) body :is(.chv-tags span, #gz#gz#gz#gz) { border: 0 !important; border-radius: 999px !important; background: var(--surface-2) !important; }
html:not(.tab-codeme) body :is(.chv-go, #gz#gz#gz#gz) { border-radius: 999px !important; background: var(--gz-blue) !important; color: var(--gz-on-blue) !important; box-shadow: none !important; font-weight: 700 !important; }
html:not(.tab-codeme) body :is(.chv-pass, #gz#gz#gz#gz) { color: var(--gz-green-x) !important; }

/* ── Fit: the roadmap head sits inset like the others; console tabs wrap instead of clipping */
html:not(.tab-codeme) body :is(#viewRoadmap .rmv-head, #gz#gz#gz#gz) { margin: 16px 32px !important; }
html:not(.tab-codeme) body :is(.pgv-console .tabbar.sm .tab, #gz#gz#gz#gz) { height: 30px !important; padding: 0 12px !important; font-size: 13px !important; }
html:not(.tab-codeme) body :is(.prose th, .gd-table th, #gz#gz#gz#gz) { background: var(--surface-2) !important; color: var(--text-secondary) !important; }
html:not(.tab-codeme) body :is(.pgv-console .console-head, #gz#gz#gz#gz) { display: flex !important; flex-wrap: wrap !important; align-content: flex-start !important; align-items: center !important; flex: none !important; height: auto !important; min-height: 48px !important; max-height: none !important; overflow: visible !important; gap: 6px !important; padding: 8px 10px !important; }
html:not(.tab-codeme) body :is(.pgv-console .console-head > *, #gz#gz#gz#gz) { flex: 0 0 auto !important; position: static !important; margin: 0 !important; height: auto !important; }
html:not(.tab-codeme) body :is(.pgv-console .console-head .pgv-tools, #gz#gz#gz#gz) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
html:not(.tab-codeme) body :is(.pgv-console .console-head .pgv-tools .btn, #gz#gz#gz#gz) { height: 30px !important; padding: 0 11px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important; font: 600 12.5px/1 var(--gz-text) !important; }
html:not(.tab-codeme) body :is(.pgv-console .console-head .tabbar, #gz#gz#gz#gz) { order: 0; }
html:not(.tab-codeme) body :is(.pgv-console .console-head #pgRun, #gz#gz#gz#gz) { order: 1; margin-left: auto !important; height: 34px !important; border-radius: 999px !important; }
html:not(.tab-codeme) body :is(.pgv-console .console-head .pgv-tools, #gz#gz#gz#gz) { order: 2; flex: 1 1 100% !important; }

@media (prefers-reduced-motion: reduce) { html:not(.tab-codeme) * { transition-duration: 0s !important; } }

/* Phones: the mode tabs (icons only below 1040px, each keeps its aria-label)
   never run off the edge. The bar grows instead: the tabs wrap onto a second
   line when the row is too narrow, and they tighten a little first. */
@media (max-width: 720px) {
  html:not(.tab-codeme) body :is(.topbar, #gz#gz#gz#gz) { height: auto !important; min-height: 56px !important; flex: 0 0 auto !important; flex-wrap: wrap !important; row-gap: 6px !important; padding: 8px 12px !important; }
  html:not(.tab-codeme) body :is(#modeTabs, #gz#gz#gz#gz) { flex: 1 1 0 !important; min-width: 0 !important; height: auto !important; flex-wrap: wrap !important; gap: 6px !important; }
  html:not(.tab-codeme) body :is(#modeTabs .mode-tab, #gz#gz#gz#gz) { padding: 0 11px !important; }
  html:not(.tab-codeme) body :is(.topbar-right, #gz#gz#gz#gz) { flex: none !important; }
  /* Practice and Roadmap's Python | Bash takes the second line, so the tabs keep the first. */
  html:not(.tab-codeme) body :is(#langSwitch, #gz#gz#gz#gz) { order: 3 !important; flex: 1 1 100% !important; }
}

/* Phones, on their own page (not framed): the list, Challenges, SQL and
   DevOps views stop being a fixed-height box with its own scroll and flow
   with the page, so the page scrolls, the Cariara footer comes after the
   content, and nothing is drawn under it. Full-width stacked sections. */
@media (max-width: 720px) {
  html:not(.cshell-framed) body :is(.chvv, .plv, .dvv, .sqlv, #gz#gz#gz#gz) { height: auto !important; min-height: calc(100vh - var(--cariara-chrome, 0px) - 120px) !important; overflow: visible !important; }
  html:not(.cshell-framed) body :is(.dvv-mount, #gz#gz#gz#gz) { flex: 0 0 auto !important; overflow: visible !important; }
  html:not(.cshell-framed) body :is(.sqlv-mount, .sqlv .pgm, .sqlv .pgm-measure, .sqlv .sqp, .sqlv .sqp-body, .sqlv .sqp-stack, #gz#gz#gz#gz) { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  html:not(.cshell-framed) body :is(.sqlv .sqp-stack .sqp-pane, .sqlv .sqp-stack .sqp-scroll, .sqlv .sqp-stack .sqp-console-body, #gz#gz#gz#gz) { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  html:not(.cshell-framed) body :is(.sqlv .sqp-stack .sqp-console, #gz#gz#gz#gz) { min-height: 0 !important; }
  /* The problem list opens over the screen, not over the whole page. */
  html:not(.cshell-framed) body :is(.sqlv .sqp-drawer, #gz#gz#gz#gz) { position: fixed !important; inset: 0 auto 0 0 !important; width: min(340px, 88vw) !important; z-index: 2147483002 !important; overflow: auto !important; }
  html:not(.cshell-framed) body :is(.sqlv .sqp-drawer-scrim, #gz#gz#gz#gz) { position: fixed !important; inset: 0 !important; z-index: 2147483001 !important; }
}

/* Phones, framed or not: the SQL bar is two rows (Problems and the
   previous/next arrows, then Run and Submit sharing the width); the title is
   the statement's, so the crumb goes; the panes stack with no overlap. */
@media (max-width: 720px) {
  html body :is(.sqlv .sqp-top, #gz#gz#gz#gz) { height: auto !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 10px 16px !important; }
  html body :is(.sqlv .sqp-crumbs, .sqlv .sqp-top-sep, .sqlv .sqp-top-right > .sqp-icon-btn:nth-of-type(3), #gz#gz#gz#gz) { display: none !important; }
  html body :is(.sqlv .sqp-top-right, #gz#gz#gz#gz) { display: contents !important; }
  html body :is(.sqlv .sqp-btn.sqp-problems, #gz#gz#gz#gz) { order: 0; height: 40px !important; margin: 0 auto 0 0 !important; padding: 0 16px !important; border-radius: 999px !important; }
  html body :is(.sqlv .sqp-progress, .sqlv .sqp-top-right > .sqp-icon-btn, #gz#gz#gz#gz) { order: 1; }
  html body :is(.sqlv .sqp-top-right > .sqp-icon-btn, #gz#gz#gz#gz) { width: 40px !important; height: 40px !important; }
  html body :is(.sqlv .sqp-top-right > .sqp-btn, #gz#gz#gz#gz) { order: 2; flex: 1 1 calc(50% - 4px) !important; justify-content: center !important; height: 44px !important; border-radius: 999px !important; font-size: 15px !important; }
  html body :is(.sqlv .sqp-stack, #gz#gz#gz#gz) { gap: 12px !important; padding: 0 0 12px !important; }
  html body :is(.sqlv .sqp-stack .sqp-pane, #gz#gz#gz#gz) { border-top: 1px solid var(--hairline) !important; border-bottom: 1px solid var(--hairline) !important; }
  html body :is(.sqlv .sqp-console-head, #gz#gz#gz#gz) { height: auto !important; min-height: 48px !important; flex-wrap: wrap !important; row-gap: 4px !important; padding: 6px 8px !important; }
  html body :is(.sqlv .sqp-tabs, .sqlv .sqp-pane-head, #gz#gz#gz#gz) { flex-wrap: wrap !important; height: auto !important; min-height: 48px !important; }
  html body :is(.sqlv .sqp-statusline, #gz#gz#gz#gz) { flex: 1 1 100% !important; white-space: normal !important; }
}

/* Phones: Practice's counts and section lines at a readable size; a section
   line wraps instead of being cut. */
@media (max-width: 720px) {
  html body :is(.cat-n small, .cat-chip small, .plv-tier-n, .plv-topic-n, .plv-gauge span, .coach-card-h small, #gz#gz#gz#gz) { font-size: 12px !important; }
  html body :is(.plv-sec-h, #gz#gz#gz#gz) { height: auto !important; min-height: 52px !important; flex-wrap: wrap !important; row-gap: 2px !important; padding: 10px 16px !important; }
  html body :is(.plv-sec-sub, #gz#gz#gz#gz) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  html body :is(.plv-sec-mark, #gz#gz#gz#gz) { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  /* No keyboard on a phone: the "/" search key goes. */
  html body :is(.plv-search kbd, .chv-search kbd, #gz#gz#gz#gz) { display: none !important; }
}

/* Phones: the Roadmap and the guides flow with the page too; the guides'
   nav is one wrapping row of pills (a guide's topics are on its map). */
@media (max-width: 720px) {
  html:not(.cshell-framed) body :is(.rmv, .gdv, #viewRoadmap .rmv-graph, #viewGuides .gd-body, #gz#gz#gz#gz) { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; overflow: visible !important; }
  html body :is(#viewRoadmap .rmv-head, #gz#gz#gz#gz) { margin: 16px !important; padding: 20px 16px 18px !important; }
  html body :is(#viewRoadmap .rmv-tiles, #gz#gz#gz#gz) { flex-wrap: wrap !important; min-width: 0 !important; }
  html body :is(#viewRoadmap .rmv-tile, #gz#gz#gz#gz) { flex: 1 1 auto !important; }
  html body :is(.gdv, #gz#gz#gz#gz) { display: flex !important; flex-direction: column !important; }
  html body :is(#viewGuides .gd-nav, #gz#gz#gz#gz) { flex-direction: row !important; flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; padding: 12px 16px !important; border-right: 0 !important; border-bottom: 1px solid var(--hairline) !important; }
  html body :is(#viewGuides .gd-nav-sub, #viewGuides .gd-nav-h, #gz#gz#gz#gz) { display: none !important; }
  html body :is(#viewGuides .prose table, #gz#gz#gz#gz) { display: block !important; max-width: 100% !important; overflow-x: auto !important; }
  html body :is(#viewGuides .gd-nav-i, #gz#gz#gz#gz) { flex: 0 0 auto !important; min-height: 36px !important; padding: 0 14px !important; border: 1px solid var(--hairline) !important; }
  html body :is(.gd-nav-n, .gd-map-pads, .gd-phase-w, .pgv-status, .pgv-status > span, .pgv-kbd, #gz#gz#gz#gz) { font-size: 12px !important; }
}

/* Phones: a problem's workspace is one column (statement, then editor and
   results); the desktop split's 440px editor minimum pushed the page wider
   than the screen. */
@media (max-width: 720px) {
  html body :is(main.layout, #gz#gz#gz#gz) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  html body :is(main.layout > .col-grip, main.layout > .rail-grip, #gz#gz#gz#gz) { display: none !important; }
  html body :is(main.layout > .pane, #gz#gz#gz#gz) { min-width: 0 !important; }
  html body :is(.editor-head, main.layout .console-head, #gz#gz#gz#gz) { flex-wrap: wrap !important; height: auto !important; row-gap: 8px !important; }
  html body :is(main.layout .console-head, #gz#gz#gz#gz) { flex: 0 0 auto !important; min-height: 48px !important; max-height: none !important; overflow: visible !important; padding: 8px 10px !important; gap: 8px !important; align-items: center !important; }
  html body :is(main.layout .tabbar.sm, #gz#gz#gz#gz) { flex-wrap: wrap !important; overflow: visible !important; height: auto !important; gap: 6px !important; }
  html body :is(.docnav-n, .fig-play, .fig-i, .fig-arrow, .ex-n, .ex-kv dt, .kv dt, .rel-k, .rel-list, .rel-lc, .rel-p-d, .cat-chip-m, #gz#gz#gz#gz) { font-size: 12px !important; }
}

/* Tablets (721–1100px): a problem page ran wider than the screen. The
   split's minimums (statement 360px, editor 440px) were too wide for the
   window, and the editor pane sat in the wrong column. */
@media (min-width: 721px) and (max-width: 1100px) {
  html body :is(main.layout, #gz#gz#gz#gz) { --probw: clamp(280px, 42%, 920px) !important; --workmin: 320px !important; }
  /* The grip is hidden at these widths, so auto-placement put the editor
     pane into the grip's 5px column; each pane keeps its own column. */
  html body :is(main.layout > .pane-problem, #gz#gz#gz#gz) { grid-column: 1 !important; }
  html body :is(main.layout > .pane-work, #gz#gz#gz#gz) { grid-column: 3 !important; }
  /* The editor's toolbar and the console's tabs wrap inside the narrower pane. */
  html body :is(.editor-head, main.layout .console-head, #gz#gz#gz#gz) { flex-wrap: wrap !important; height: auto !important; row-gap: 8px !important; }
  html body :is(main.layout .console-head, #gz#gz#gz#gz) { flex: 0 0 auto !important; min-height: 48px !important; max-height: none !important; overflow: visible !important; padding: 8px 10px !important; gap: 8px !important; }
  html body :is(main.layout .tabbar.sm, #gz#gz#gz#gz) { flex-wrap: wrap !important; overflow: visible !important; height: auto !important; gap: 6px !important; }
  html body :is(main.layout > .pane, #gz#gz#gz#gz) { min-width: 0 !important; }
}