/* ══════════════════════════════════════════════════════════════
   SHOWCASE — cariara.com's landing/pricing layer on the framed PPG views
   (html.tab-codeme only; /tools/pg alone is untouched). PPG cannot import
   the app's CSS, so the tokens of apps/web/src/components/shared/
   showcase.css are copied here as --sx-* (PPG's own --px-* are plx.css's).
   - Stripe: square sheets on 1px hairlines with a resting drop that deepens
     on hover, a pointer spotlight (assets/js/showcase.js), the square expand
     chip in a category card's corner, the accent segment on a banner's top
     rule, nested sheets.
   - linear.app/careers: numbers in mono grey ("01."), hairline rows, the
     barcode strip under the guide's banner.
   - raycast.com: keycaps on shortcut hints and pressed controls.
   Rules read  html.tab-codeme body :is(<sel>, #sx#sx#sx#sx#sx#sx)  to settle
   plx.css's five-id rules (#sx is never in the page). Loaded last.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens (light, then dark) ── */
html.tab-codeme:not(#sx) {
  --sx-line: #E3E6EA;
  --sx-line-soft: #EEF0F2;
  --sx-sheet: #FFFFFF;
  --sx-tint: #F1F5FD;
  --sx-dot: rgba(60, 64, 67, .12);
  --sx-mute: #5F6368;
  --sx-rest: 0 1px 2px rgba(60, 64, 67, .06), 0 2px 8px -2px rgba(60, 64, 67, .08);
  --sx-drop: 0 30px 45px -30px rgba(50, 50, 93, .25), 0 18px 36px -18px rgba(0, 0, 0, .3);
  --sx-nest: 0 3px 6px rgba(23, 23, 23, .06), 0 14px 28px -18px rgba(50, 50, 93, .28);
  --sx-key: 0 0 0 2px rgba(0, 0, 0, .08), 0 0 14px rgba(255, 255, 255, .6), inset 0 -1px .4px rgba(0, 0, 0, .2), inset 0 1px .4px #fff;
  --sx-cap: #F1F3F4;
  --sx-cap-ink: #202124;
  --sx-sel: #0077FF;
  --sx-spot: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 119, 255, .10), rgba(90, 162, 255, .05) 40%, transparent 70%);
  --sx-four-fade: linear-gradient(90deg, transparent, #0077FF 20%, #5AA2FF 45%, #00C896 70%, #9AD61A 88%, transparent);
  --sx-ease: cubic-bezier(.165, .84, .44, 1);
  --sx-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sx-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230077FF' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M4 10 10 4M5 4h5v5'/%3E%3C/svg%3E");
  --sx-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27960%27%20height%3D%2732%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba(60%2C64%2C67%2C.42)%27%3E%3Cpath%20stroke-width%3D%270.5%27%20d%3D%27M4%204V26M10%204V26M16%204V26M22%2010V26M28%204V26M34%204V26M40%204V26M46%204V26M52%204V26M58%204V26M64%2010V26M70%204V26M76%204V26M82%204V26M88%204V26M94%204V26M100%204V26M106%2010V26M112%204V26M118%204V26M124%204V26M130%204V26M136%204V26M142%204V26M148%2010V26M154%204V26M160%204V26M166%204V26M172%204V26M178%204V26M184%204V26M190%2010V26M196%204V26M202%204V26M208%204V26M214%204V26M220%204V26M226%204V26M232%2010V26M238%204V26M244%204V26M250%204V26M256%204V26M262%204V26M268%204V26M274%2010V26M280%204V26M286%204V26M292%204V26M298%204V26M304%204V26M310%204V26M316%2010V26M322%204V26M328%204V26M334%204V26M340%204V26M346%204V26M352%204V26M358%2010V26M364%204V26M370%204V26M874%204V26M880%204V26M886%204V26M892%204V26M898%204V26M904%2010V26M910%204V26M916%204V26M922%204V26M928%204V26M934%204V26M940%204V26M946%2010V26M952%204V26%27%2F%3E%3Cpath%20stroke-width%3D%271.0%27%20d%3D%27M376%204V26M382%204V26M388%204V26M394%204V26M400%2010V26M406%204V26M412%204V26M418%204V26M424%204V26M430%204V26M436%204V26M442%2010V26M448%204V26M796%204V26M802%204V26M808%204V26M814%204V26M820%2010V26M826%204V26M832%204V26M838%204V26M844%204V26M850%204V26M856%204V26M862%2010V26M868%204V26%27%2F%3E%3Cpath%20stroke-width%3D%271.5%27%20d%3D%27M454%204V26M460%204V26M466%204V26M472%204V26M478%204V26M484%2010V26M490%204V26M754%204V26M760%204V26M766%204V26M772%204V26M778%2010V26M784%204V26M790%204V26%27%2F%3E%3Cpath%20stroke-width%3D%272.0%27%20d%3D%27M496%204V26M502%204V26M508%204V26M514%204V26M520%204V26M526%2010V26M712%204V26M718%204V26M724%204V26M730%204V26M736%2010V26M742%204V26M748%204V26%27%2F%3E%3Cpath%20stroke-width%3D%272.5%27%20d%3D%27M532%204V26M538%204V26M544%204V26M550%204V26M556%204V26M562%204V26M568%2010V26M670%204V26M676%204V26M682%204V26M688%204V26M694%2010V26M700%204V26M706%204V26%27%2F%3E%3Cpath%20stroke-width%3D%273.0%27%20d%3D%27M574%204V26M580%204V26M586%204V26M592%204V26M598%204V26M604%204V26M610%2010V26M616%204V26M628%204V26M634%204V26M640%204V26M646%204V26M652%2010V26M658%204V26M664%204V26%27%2F%3E%3Cpath%20d%3D%27M0%2030.5H960%27%2F%3E%3C%2Fg%3E%3Cpath%20stroke%3D%27%230077FF%27%20stroke-width%3D%271.6%27%20d%3D%27M622%204V26%27%2F%3E%3C%2Fsvg%3E");
}
html.tab-codeme[data-scheme='dark']:not(#sx) {
  --sx-line: #444C56;
  --sx-line-soft: #373E47;
  --sx-sheet: #2D333B;
  --sx-tint: rgba(90, 162, 255, .06);
  --sx-dot: rgba(230, 237, 243, .1);
  --sx-mute: #9AA0A6;
  --sx-rest: 0 1px 2px rgba(0, 0, 0, .35);
  --sx-drop: 0 30px 45px -30px rgba(0, 0, 0, .7), 0 18px 36px -18px rgba(0, 0, 0, .6);
  --sx-nest: 0 3px 6px rgba(0, 0, 0, .35), 0 14px 28px -18px rgba(0, 0, 0, .6);
  --sx-key: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 255, 255, .19), inset 0 -1px .4px rgba(0, 0, 0, .2), inset 0 1px .4px rgba(255, 255, 255, .5);
  --sx-cap: #3A414A;
  --sx-cap-ink: #E8EAED;
  --sx-sel: #5AA2FF;
  --sx-spot: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(90, 162, 255, .10), rgba(156, 198, 255, .05) 40%, transparent 70%);
  --sx-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%235AA2FF' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M4 10 10 4M5 4h5v5'/%3E%3C/svg%3E");
  --sx-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27960%27%20height%3D%2732%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba(230%2C237%2C243%2C.34)%27%3E%3Cpath%20stroke-width%3D%270.5%27%20d%3D%27M4%204V26M10%204V26M16%204V26M22%2010V26M28%204V26M34%204V26M40%204V26M46%204V26M52%204V26M58%204V26M64%2010V26M70%204V26M76%204V26M82%204V26M88%204V26M94%204V26M100%204V26M106%2010V26M112%204V26M118%204V26M124%204V26M130%204V26M136%204V26M142%204V26M148%2010V26M154%204V26M160%204V26M166%204V26M172%204V26M178%204V26M184%204V26M190%2010V26M196%204V26M202%204V26M208%204V26M214%204V26M220%204V26M226%204V26M232%2010V26M238%204V26M244%204V26M250%204V26M256%204V26M262%204V26M268%204V26M274%2010V26M280%204V26M286%204V26M292%204V26M298%204V26M304%204V26M310%204V26M316%2010V26M322%204V26M328%204V26M334%204V26M340%204V26M346%204V26M352%204V26M358%2010V26M364%204V26M370%204V26M874%204V26M880%204V26M886%204V26M892%204V26M898%204V26M904%2010V26M910%204V26M916%204V26M922%204V26M928%204V26M934%204V26M940%204V26M946%2010V26M952%204V26%27%2F%3E%3Cpath%20stroke-width%3D%271.0%27%20d%3D%27M376%204V26M382%204V26M388%204V26M394%204V26M400%2010V26M406%204V26M412%204V26M418%204V26M424%204V26M430%204V26M436%204V26M442%2010V26M448%204V26M796%204V26M802%204V26M808%204V26M814%204V26M820%2010V26M826%204V26M832%204V26M838%204V26M844%204V26M850%204V26M856%204V26M862%2010V26M868%204V26%27%2F%3E%3Cpath%20stroke-width%3D%271.5%27%20d%3D%27M454%204V26M460%204V26M466%204V26M472%204V26M478%204V26M484%2010V26M490%204V26M754%204V26M760%204V26M766%204V26M772%204V26M778%2010V26M784%204V26M790%204V26%27%2F%3E%3Cpath%20stroke-width%3D%272.0%27%20d%3D%27M496%204V26M502%204V26M508%204V26M514%204V26M520%204V26M526%2010V26M712%204V26M718%204V26M724%204V26M730%204V26M736%2010V26M742%204V26M748%204V26%27%2F%3E%3Cpath%20stroke-width%3D%272.5%27%20d%3D%27M532%204V26M538%204V26M544%204V26M550%204V26M556%204V26M562%204V26M568%2010V26M670%204V26M676%204V26M682%204V26M688%204V26M694%2010V26M700%204V26M706%204V26%27%2F%3E%3Cpath%20stroke-width%3D%273.0%27%20d%3D%27M574%204V26M580%204V26M586%204V26M592%204V26M598%204V26M604%204V26M610%2010V26M616%204V26M628%204V26M634%204V26M640%204V26M646%204V26M652%2010V26M658%204V26M664%204V26%27%2F%3E%3Cpath%20d%3D%27M0%2030.5H960%27%2F%3E%3C%2Fg%3E%3Cpath%20stroke%3D%27%235AA2FF%27%20stroke-width%3D%271.6%27%20d%3D%27M622%204V26%27%2F%3E%3C%2Fsvg%3E");
}

/* ── Stripe sheets: square, hairline, resting drop, deeper + lifted on hover ── */
html.tab-codeme body :is(.gd-map-i, .chv-card, .chv-rung, .rmv-node, .cat-card, #sx#sx#sx#sx#sx#sx) {
  position: relative !important; isolation: isolate;
  border: 1px solid var(--sx-line) !important; border-radius: 0 !important;
  background: var(--sx-sheet) !important; box-shadow: var(--sx-rest) !important;
  transition: box-shadow .4s var(--sx-ease), transform .4s var(--sx-ease), border-color .2s ease, opacity .6s var(--sx-ease) !important;
}
html.tab-codeme body :is(.gd-map-i, .chv-card, .chv-rung, .rmv-node, .cat-card, #sx#sx#sx#sx#sx#sx):hover {
  transform: translateY(-2px) !important;
  border-color: var(--sx-line) !important;
  box-shadow: var(--sx-drop), 0 0 0 1px var(--sx-line), inset 0 0 12px rgba(0, 119, 255, .06) !important;
}
/* The roadmap's states stay readable on the sheet. */
html.tab-codeme body :is(.rmv-node.is-sel, #sx#sx#sx#sx#sx#sx) { box-shadow: var(--sx-rest), inset 0 0 0 1px var(--sx-sel) !important; border-color: var(--sx-sel) !important; }
html.tab-codeme body :is(.rmv-node.is-done, #sx#sx#sx#sx#sx#sx) { box-shadow: var(--sx-rest), inset 2px 0 0 #00C896 !important; }
html.tab-codeme body :is(.rmv-node.is-part, #sx#sx#sx#sx#sx#sx) { box-shadow: var(--sx-rest), inset 2px 0 0 #9AD61A !important; }

/* The spotlight under the pointer (showcase.js feeds --mx/--my). */
html.tab-codeme body :is(.gd-map-i, .chv-card, .chv-today, .chv-rung, .rmv-node, .cat-card, .plv-sec-h, #sx#sx#sx#sx#sx#sx)::before {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
  width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; transform: none !important;
  pointer-events: none; opacity: 0; background: var(--sx-spot) !important;
  transition: opacity .4s cubic-bezier(.23, 1, .32, 1);
}
html.tab-codeme body :is(.gd-map-i, .chv-card, .chv-today, .chv-rung, .rmv-node, .cat-card, .plv-sec-h, #sx#sx#sx#sx#sx#sx):hover::before { opacity: 1; }
html.tab-codeme body :is(.plv-sec-h, .chv-today, #sx#sx#sx#sx#sx#sx) { position: relative !important; isolation: isolate; }

/* ── Learn: the category cards ── */
/* Stripe's expand chip in the corner, on hover; the guide count moves
   beside the number so the corner is free. */
html.tab-codeme body :is(.gd-map-i, #sx#sx#sx#sx#sx#sx)::after {
  content: ''; position: absolute; top: 12px; right: 12px; z-index: 2; width: 28px; height: 28px;
  background: var(--sx-corner) center / 14px 14px no-repeat, var(--sx-tint);
  opacity: 0; transform: translate(-3px, 3px); pointer-events: none;
  transition: opacity .2s ease, transform .3s var(--sx-ease);
}
html.tab-codeme body :is(.gd-map-i, #sx#sx#sx#sx#sx#sx):is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
html.tab-codeme body :is(.gd-map-top, #sx#sx#sx#sx#sx#sx) { justify-content: flex-start !important; align-items: baseline !important; gap: 12px !important; padding-right: 36px; }
/* The number in Linear's style: mono, grey, "01." */
html.tab-codeme body :is(.gd-map-k, #sx#sx#sx#sx#sx#sx) {
  font: 400 24px/1 var(--sx-mono) !important; letter-spacing: -.03em !important;
  color: var(--sx-mute) !important; font-variant-numeric: tabular-nums;
}
html.tab-codeme body :is(.gd-map-k, #sx#sx#sx#sx#sx#sx)::after { content: '.'; }

/* The guide's banner: a nested sheet, the accent segment on its top rule,
   the barcode strip along its foot. */
html.tab-codeme body :is(#viewGuides .gd-top, #sx#sx#sx#sx#sx#sx) {
  position: relative !important; overflow: visible !important;
  border: 1px solid var(--sx-line) !important; border-radius: 0 !important;
  background: var(--sx-sheet) !important; box-shadow: var(--sx-nest) !important;
  padding-bottom: 48px !important;
}
html.tab-codeme body :is(#viewGuides .gd-top, #sx#sx#sx#sx#sx#sx)::after {
  content: '' !important; display: block !important; position: absolute !important;
  top: -1px !important; left: -1px !important; right: auto !important; bottom: auto !important; z-index: 2;
  width: 26% !important; height: 1px !important; background: var(--sx-four-fade) !important; pointer-events: none;
}
html.tab-codeme body :is(#viewGuides .gd-top, #sx#sx#sx#sx#sx#sx)::before {
  content: '' !important; display: block !important; position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: 32px !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
  background: var(--sx-art) right center / auto 32px no-repeat !important; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 60%); mask-image: linear-gradient(90deg, transparent 20%, #000 60%);
}
html.tab-codeme body :is(#viewGuides .gd-stat, #sx#sx#sx#sx#sx#sx) { border-color: var(--sx-line) !important; }

/* ── Practice: Linear numbered sections and rows on hairlines ── */
html.tab-codeme body :is(.plv-table, #sx#sx#sx#sx#sx#sx) { counter-reset: sx-sec; }
html.tab-codeme body :is(.plv-sec, #sx#sx#sx#sx#sx#sx) {
  counter-increment: sx-sec; counter-reset: sx-row;
  border: 1px solid var(--sx-line) !important; border-radius: 0 !important;
  background: var(--sx-sheet) !important; box-shadow: var(--sx-rest) !important;
  transition: box-shadow .4s var(--sx-ease) !important;
}
html.tab-codeme body :is(.plv-sec, #sx#sx#sx#sx#sx#sx):hover { box-shadow: var(--sx-drop), 0 0 0 1px var(--sx-line) !important; }
html.tab-codeme body :is(.plv-sec-mark, #sx#sx#sx#sx#sx#sx) { display: none !important; }
html.tab-codeme body :is(.plv-sec-t, #sx#sx#sx#sx#sx#sx)::before {
  content: counter(sx-sec, decimal-leading-zero) '.' !important; display: inline !important;
  width: auto !important; height: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important;
  margin-right: 2px; font: 400 13px/1 var(--sx-mono) !important; color: var(--sx-mute) !important; font-variant-numeric: tabular-nums;
}
html.tab-codeme body :is(.plv-row, #sx#sx#sx#sx#sx#sx) { counter-increment: sx-row; border-top: 1px solid var(--sx-line-soft) !important; }
html.tab-codeme body :is(.plv-row, #sx#sx#sx#sx#sx#sx):hover { background: var(--sx-tint) !important; }
html.tab-codeme body :is(.plv-title, #sx#sx#sx#sx#sx#sx)::before {
  content: counter(sx-row, decimal-leading-zero) '.'; margin-right: 10px;
  font: 400 12px/1 var(--sx-mono); color: var(--sx-mute); font-variant-numeric: tabular-nums;
}
html.tab-codeme body :is(.plv-sec-n, #sx#sx#sx#sx#sx#sx) { border-radius: 6px !important; }
/* Phones: a row's title keeps the width (it is cut to one line there). */
@media (max-width: 600px) {
  html.tab-codeme body :is(.plv-title, #sx#sx#sx#sx#sx#sx)::before { content: none; }
}

/* ── Challenges: today's pick is the nested sheet with the accent ── */
html.tab-codeme body :is(.chv-today, #sx#sx#sx#sx#sx#sx) {
  border: 1px solid var(--sx-line) !important; border-radius: 0 !important;
  background: var(--sx-sheet) !important; box-shadow: var(--sx-nest) !important;
}
html.tab-codeme body :is(.chv-today, #sx#sx#sx#sx#sx#sx)::after {
  content: ''; position: absolute; top: -1px; left: -1px; z-index: 2; width: 26%; height: 1px;
  background: var(--sx-four-fade); pointer-events: none;
}

/* Today's title wraps on a narrow window instead of being cut. */
html.tab-codeme body :is(.chv-today-t, #sx#sx#sx#sx#sx#sx) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }

/* ── Roadmap: the stage numbers in Linear's mono grey ── */
html.tab-codeme body :is(.rmv-stage-n, #sx#sx#sx#sx#sx#sx) {
  display: inline-block !important; white-space: nowrap !important;
  width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font: 400 13px/1 var(--sx-mono) !important; color: var(--sx-mute) !important;
}
html.tab-codeme body :is(.rmv-stage-n, #sx#sx#sx#sx#sx#sx)::after { content: '.'; }
html.tab-codeme body :is(.rmv-stage-rule, #sx#sx#sx#sx#sx#sx) { background: var(--sx-line) !important; height: 1px !important; }

/* ── Raycast keycaps: shortcut hints and pressed controls ── */
html.tab-codeme body :is(kbd, .plv-search kbd, .chv-search kbd, .rail-kbd, #sx#sx#sx#sx#sx#sx) {
  border: 0 !important; border-radius: 5px !important; box-shadow: var(--sx-key) !important;
  background: var(--sx-cap) !important; color: var(--sx-cap-ink) !important;
}
html.tab-codeme body :is(.chv-surprise, .seg-b.is-on, .pgv-tab.is-on, .docnav-b.is-on, #sx#sx#sx#sx#sx#sx) {
  border: 0 !important; border-radius: 8px !important; box-shadow: var(--sx-key) !important;
  background: var(--sx-cap) !important; color: var(--sx-cap-ink) !important;
}
html.tab-codeme body :is(.docnav-b.is-on, #sx#sx#sx#sx#sx#sx)::after { display: none !important; }
/* The console's open tab and its toolbar: keys. */
html.tab-codeme body :is(.console-head .tab.is-on, .tabbar.sm .tab.is-on, #viewPlayground .console-head .tab.is-on, .pgv-tools .btn-ghost, #sx#sx#sx#sx#sx#sx) {
  border: 0 !important; border-radius: 8px !important; box-shadow: var(--sx-key) !important;
  background: var(--sx-cap) !important; color: var(--sx-cap-ink) !important;
}
html.tab-codeme body :is(.console-head .tab, .tabbar.sm .tab, #sx#sx#sx#sx#sx#sx) { margin-block: 6px; border-radius: 8px !important; }
html.tab-codeme body :is(.pgv-tools, #sx#sx#sx#sx#sx#sx) { gap: 8px !important; }
html.tab-codeme body :is(.pgv-tools .btn-ghost, #sx#sx#sx#sx#sx#sx):hover { background: var(--sx-sheet) !important; }
/* The one action keeps its blue on the cap. */
html.tab-codeme body :is(.chv-today-go, #pgRun, #pgRunTests, #pgStop, #sx#sx#sx#sx#sx#sx) { border-radius: 8px !important; box-shadow: var(--sx-key) !important; }

/* ── Covers: a flat placard (assets/js/showcase-art.js, picked by
   showcase.js from the card's heading, never twice in a view) in a band
   across the top of each card, under the content and over the spotlight.
   Today's pick, a wide banner, carries it as a panel on its right. The
   tile, tones and motion are the @flat-art block at the end. ── */
html.tab-codeme:not(#sx) { --sx-cover-h: 132px; }
@media (max-width: 600px) { html.tab-codeme:not(#sx) { --sx-cover-h: 104px; } }
html.tab-codeme body :is(.fa-cover.sx-cover, #sx#sx#sx#sx#sx#sx) {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 0; width: auto !important; height: var(--sx-cover-h) !important;
  margin: 0 !important; padding: 0 !important; pointer-events: none; border-bottom: 1px solid var(--sx-line-soft);
}
html.tab-codeme body :is(.sx-cover .fa-svg, #sx#sx#sx#sx#sx#sx) { display: block; width: 100% !important; height: 100% !important; max-width: none !important; }
/* Room for the band only once a band is there (a thumb, or no cover yet,
   leaves the card at its own padding — no blank top while the art loads). */
html.tab-codeme body :is(.gd-map-i:has(> .sx-cover:not(.is-thumb)), #sx#sx#sx#sx#sx#sx) { padding-top: calc(var(--sx-cover-h) + 18px) !important; }
html.tab-codeme body :is(.chv-card:has(> .sx-cover:not(.is-thumb)), #sx#sx#sx#sx#sx#sx) { padding-top: calc(var(--sx-cover-h) + 14px) !important; }
html.tab-codeme body :is(.cat-card:has(> .sx-cover:not(.is-thumb)), #sx#sx#sx#sx#sx#sx) { padding-top: calc(var(--sx-cover-h) + 12px) !important; }
/* Roadmap nodes: a shorter band over the topic's name, so the tiers keep
   their rhythm; the links are measured from the boxes and follow. */
html.tab-codeme:not(#sx) { --sx-rmv-h: 84px; }
@media (max-width: 600px) { html.tab-codeme:not(#sx) { --sx-rmv-h: 64px; } }
html.tab-codeme body :is(.rmv-node, #sx#sx#sx#sx#sx#sx) { position: relative !important; overflow: hidden !important; padding-top: calc(var(--sx-rmv-h) + 10px) !important; }
html.tab-codeme body :is(.rmv-node > .fa-cover.sx-cover, #sx#sx#sx#sx#sx#sx) { height: var(--sx-rmv-h) !important; }
/* The content stays over the band. */
html.tab-codeme body :is(.gd-map-i, .chv-card, .cat-card, .chv-today, .rmv-node, #sx#sx#sx#sx#sx#sx) > :not(.sx-cover) { position: relative; z-index: 1; }
/* Today's pick: the figure as a panel on the right, a band on top on phones. */
html.tab-codeme body :is(.chv-today, #sx#sx#sx#sx#sx#sx) { min-height: 150px; padding-right: calc(min(30%, 280px) + 12px) !important; }
html.tab-codeme body :is(.chv-today > .fa-cover.sx-cover, #sx#sx#sx#sx#sx#sx) {
  left: auto !important; bottom: 0 !important; width: min(30%, 280px) !important; height: auto !important;
  border-bottom: 0; border-left: 1px solid var(--sx-line-soft);
}
@media (max-width: 600px) {
  html.tab-codeme body :is(.chv-today, #sx#sx#sx#sx#sx#sx) { padding-right: 0 !important; padding-top: var(--sx-cover-h) !important; }
  html.tab-codeme body :is(.chv-today > .fa-cover.sx-cover, #sx#sx#sx#sx#sx#sx) {
    left: 0 !important; bottom: auto !important; width: auto !important; height: var(--sx-cover-h) !important;
    border-left: 0; border-bottom: 1px solid var(--sx-line-soft);
  }
}
/* The expand chip sits on the band. */
html.tab-codeme body :is(.gd-map-i, #sx#sx#sx#sx#sx#sx)::after { top: 12px !important; }
/* As a card rises, its figure fades in. */
html.tab-codeme .sx-rise.is-in > .sx-cover .fa-svg { animation: sx-cover .9s var(--sx-ease) 150ms backwards; }
@keyframes sx-cover { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html.tab-codeme .sx-rise.is-in > .sx-cover .fa-svg { animation: none; } }

/* ── Card headings: 18px titles (17px on phones), 14px descriptions ── */
html.tab-codeme body :is(.gd-map-i > b, .chv-card-t, .cat-name, #sx#sx#sx#sx#sx#sx) { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; }
html.tab-codeme body :is(.chv-today-t, #sx#sx#sx#sx#sx#sx) { font-weight: 600 !important; line-height: 1.3 !important; }
html.tab-codeme body :is(.gd-map-d, .chv-card-s, .cat-blurb, .chv-today-s, #sx#sx#sx#sx#sx#sx) { font-size: 14px !important; line-height: 1.45 !important; }
@media (max-width: 600px) {
  html.tab-codeme body :is(.gd-map-i > b, .chv-card-t, .cat-name, #sx#sx#sx#sx#sx#sx) { font-size: 17px !important; }
}

/* ══ Every other card-like surface (the sweep) ══════════════════════ */
/* Reading panels, guide sections, codepads, figures, hints, solutions,
   verdicts and test cases: Stripe sheets, square on a hairline with the
   resting drop. Diagrams keep their own drawing (labels never cut). */
html.tab-codeme body :is(.gd-card, .rmv-panel, .plv-card, .rel-p, .tp-prereq, .ex-card, .fig, .gd-pad, .hintbox, .phd-ver,
  .sol-figure, .sol-code, .verdict, .case, .mc-case, .gd-tier, .gd-phase, .lab-list, .sol-gate, #sx#sx#sx#sx#sx#sx) {
  position: relative; isolation: isolate;
  border-color: var(--sx-line) !important; border-radius: 0 !important; box-shadow: var(--sx-rest) !important;
}
/* Workspace panes: the hairline and the resting drop only (no spotlight over an editor). */
html.tab-codeme body :is(.layout > .pane, .console, .pgv-split, #sx#sx#sx#sx#sx#sx) {
  border-color: var(--sx-line) !important; border-radius: 0 !important; box-shadow: var(--sx-rest) !important;
}
/* The spotlight on the small and interactive ones. */
html.tab-codeme body :is(.gd-card, .rel-p, .tp-prereq, .ex-card, .gd-pad, .hintbox, .case, .mc-case, .gd-tier, .gd-phase, .verdict, #sx#sx#sx#sx#sx#sx)::before {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
  width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; transform: none !important;
  pointer-events: none; opacity: 0; background: var(--sx-spot) !important; transition: opacity .4s cubic-bezier(.23, 1, .32, 1);
}
html.tab-codeme body :is(.gd-card, .rel-p, .tp-prereq, .ex-card, .gd-pad, .hintbox, .case, .mc-case, .gd-tier, .gd-phase, .verdict, #sx#sx#sx#sx#sx#sx):hover::before { opacity: 1; }
/* Links among them lift. */
html.tab-codeme body :is(a.rel-p, a.tp-prereq, #sx#sx#sx#sx#sx#sx) { transition: box-shadow .4s var(--sx-ease), transform .4s var(--sx-ease) !important; }
html.tab-codeme body :is(a.rel-p, a.tp-prereq, #sx#sx#sx#sx#sx#sx):hover {
  transform: translateY(-2px); box-shadow: var(--sx-drop), 0 0 0 1px var(--sx-line) !important;
}
/* Featured panels: the accent segment on the top rule. A drawer (the
   roadmap's topic panel) also takes the deeper drop. */
html.tab-codeme body :is(.gd-card.gd-wide, .rmv-panel, .sol-gate, .phd-ver, #sx#sx#sx#sx#sx#sx)::after {
  content: '' !important; display: block !important; position: absolute !important; top: -1px !important; left: -1px !important;
  right: auto !important; bottom: auto !important; z-index: 2; width: 26% !important; height: 1px !important;
  background: var(--sx-four-fade) !important; pointer-events: none; border: 0 !important;
}
html.tab-codeme body :is(.rmv-panel, .cmdk, #sx#sx#sx#sx#sx#sx) { box-shadow: var(--sx-drop), 0 0 0 1px var(--sx-line) !important; border-radius: 0 !important; }
/* Empty states: the dotted tint. */
html.tab-codeme body :is(.chv-empty, .plv-none, .ex-empty, .mc-empty, .pgv-pnone, .rail-none, .viz-empty, .viz-none, .cmdk-none, #sx#sx#sx#sx#sx#sx) {
  border: 1px dashed var(--sx-line) !important; border-radius: 0 !important; box-shadow: none !important;
  background-color: var(--sx-tint) !important;
  background-image: radial-gradient(var(--sx-dot) 1px, transparent 1.2px) !important; background-size: 14px 14px !important;
}
/* Buttons are keys; a primary keeps its colour. */
html.tab-codeme body :is(.btn, .cat-x, #sx#sx#sx#sx#sx#sx) { border: 0 !important; border-radius: 8px !important; box-shadow: var(--sx-key) !important; }
html.tab-codeme body :is(.btn-ghost, .btn-secondary, .cat-x, #sx#sx#sx#sx#sx#sx) { background: var(--sx-cap) !important; color: var(--sx-cap-ink) !important; }
html.tab-codeme body :is(.btn-ghost, .btn-secondary, .cat-x, #sx#sx#sx#sx#sx#sx):hover:not(:disabled) { background: var(--sx-sheet) !important; }
/* The current item: Figma's selection (the roadmap's selected node). */
html.tab-codeme body :is(.rmv-node.is-sel, #sx#sx#sx#sx#sx#sx) {
  outline: 1px solid var(--sx-sel) !important; outline-offset: -1px;
}
html.tab-codeme body :is(.rmv-node.is-sel, #sx#sx#sx#sx#sx#sx) {
  background-image:
    linear-gradient(var(--sx-sel), var(--sx-sel)), linear-gradient(var(--sx-sel), var(--sx-sel)),
    linear-gradient(var(--sx-sel), var(--sx-sel)), linear-gradient(var(--sx-sel), var(--sx-sel)) !important;
  background-size: 7px 7px !important; background-repeat: no-repeat !important;
  background-position: left top, right top, left bottom, right bottom !important;
}

/* ── Stripe's rise (showcase.js) ── */
html.tab-codeme body :is(.sx-rise, #sx#sx#sx#sx#sx#sx) { opacity: 0; transform: translateY(14px) !important; }
html.tab-codeme body :is(.sx-rise.is-in, #sx#sx#sx#sx#sx#sx) { opacity: 1; transform: none !important; }
html.tab-codeme body :is(.sx-rise.is-in, #sx#sx#sx#sx#sx#sx):hover { transform: translateY(-2px) !important; }

@media (prefers-reduced-motion: reduce) {
  html.tab-codeme body :is(.gd-map-i, .chv-card, .chv-rung, .rmv-node, .cat-card, .plv-sec, #sx#sx#sx#sx#sx#sx) { transition: none !important; }
  html.tab-codeme body :is(.gd-map-i, .chv-card, .chv-rung, .rmv-node, .cat-card, .sx-rise, #sx#sx#sx#sx#sx#sx):hover { transform: none !important; }
  html.tab-codeme body :is(.sx-rise, #sx#sx#sx#sx#sx#sx) { opacity: 1; transform: none !important; }
}

/* ── Practice at three levels (app.js renderPractice), as SolveMe's SQL and
   DevOps lists: Level 1 the topics as cards (4 / 3 / 2 / 1 across), Level 2
   one topic's head in one row over its numbered rows with the cover as a
   stage on the right. The old sections and the fold stay for /tools/pg. ── */
html.tab-codeme body :is(#plvFold, #plvCatsToggle, .plv-active:empty, #sx#sx#sx#sx#sx#sx) { display: none !important; }
html.tab-codeme body :is(#viewList.pls-in .plv-bar, #sx#sx#sx#sx#sx#sx) { display: none !important; }
html.tab-codeme body :is(.plv-table.pls-host, #sx#sx#sx#sx#sx#sx) { display: block !important; }
html.tab-codeme body :is(#plvCats[hidden], #sx#sx#sx#sx#sx#sx) { display: none !important; }
html.tab-codeme body :is(.pls-n, .pls-rn, #sx#sx#sx#sx#sx#sx) { font: 400 13px/1 var(--sx-mono); color: var(--sx-mute); font-variant-numeric: tabular-nums; }

/* Level 1: the cards. */
html.tab-codeme body :is(.pls-grid, #sx#sx#sx#sx#sx#sx) { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 600px) { html.tab-codeme body :is(.pls-grid, #sx#sx#sx#sx#sx#sx) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { html.tab-codeme body :is(.pls-grid, #sx#sx#sx#sx#sx#sx) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { html.tab-codeme body :is(.pls-grid, #sx#sx#sx#sx#sx#sx) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx) {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  padding: calc(var(--sx-cover-h) + 16px) 18px 16px; min-width: 0;
  border: 1px solid var(--sx-line); border-radius: 0; background: var(--sx-sheet); box-shadow: var(--sx-rest);
  color: var(--text-primary); text-decoration: none;
  transition: box-shadow .4s var(--sx-ease), transform .4s var(--sx-ease), opacity .6s var(--sx-ease);
}
html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx):hover { transform: translateY(-2px); box-shadow: var(--sx-drop), 0 0 0 1px var(--sx-line), inset 0 0 12px rgba(0, 119, 255, .06); }
html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx):focus-visible { outline: 2px solid var(--sx-sel); outline-offset: 2px; }
html.tab-codeme body :is(.pls-card, .pls-row, #sx#sx#sx#sx#sx#sx)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: var(--sx-spot); transition: opacity .4s cubic-bezier(.23, 1, .32, 1);
}
html.tab-codeme body :is(.pls-card, .pls-row, #sx#sx#sx#sx#sx#sx):hover::before { opacity: 1; }
/* Stripe's expand chip, on the band's corner. */
html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx)::after {
  content: ''; position: absolute; top: 12px; right: 12px; z-index: 2; width: 28px; height: 28px;
  background: var(--sx-corner) center / 14px 14px no-repeat, var(--sx-tint);
  opacity: 0; transform: translate(-3px, 3px); pointer-events: none;
  transition: opacity .2s ease, transform .3s var(--sx-ease);
}
html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx):is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
html.tab-codeme body :is(.pls-card > :not(.sx-cover), #sx#sx#sx#sx#sx#sx) { position: relative; z-index: 1; }
html.tab-codeme body :is(.pls-card-h, #sx#sx#sx#sx#sx#sx) { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
html.tab-codeme body :is(.pls-card-t, #sx#sx#sx#sx#sx#sx) { font: 600 20px/1.25 var(--cmk-display); color: var(--text-primary); overflow-wrap: anywhere; }
html.tab-codeme body :is(.pls-card-m, #sx#sx#sx#sx#sx#sx) { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 14px/1.4 var(--font-sans); color: var(--sx-mute); }
html.tab-codeme body :is(.pls-card-m .d-Easy, .pls-tier .d-Easy, #sx#sx#sx#sx#sx#sx) { color: var(--easy); }
html.tab-codeme body :is(.pls-card-m .d-Medium, .pls-tier .d-Medium, #sx#sx#sx#sx#sx#sx) { color: var(--medium); }
html.tab-codeme body :is(.pls-card-m .d-Hard, .pls-tier .d-Hard, #sx#sx#sx#sx#sx#sx) { color: var(--hard); }
html.tab-codeme body :is(.pls-card .pls-prog, #sx#sx#sx#sx#sx#sx) { margin-top: auto; padding-top: 6px; }

/* Progress: one colour, the count in mono. */
html.tab-codeme body :is(.pls-prog, #sx#sx#sx#sx#sx#sx) { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.tab-codeme body :is(.pls-prog b, .pls-tier b, #sx#sx#sx#sx#sx#sx) { font: 500 13px/1 var(--sx-mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.tab-codeme body :is(.pls-meter, #sx#sx#sx#sx#sx#sx) { flex: 1 1 auto; min-width: 48px; height: 4px; background: var(--surface-3); overflow: hidden; }
html.tab-codeme body :is(.pls-meter > i, #sx#sx#sx#sx#sx#sx) { display: block; height: 100%; background: var(--g-blue); }
html.tab-codeme body :is(.pls-prog.is-done .pls-meter > i, #sx#sx#sx#sx#sx#sx) { background: var(--g-green); }

/* Level 2: one row of head. */
html.tab-codeme body :is(.pls-head, #sx#sx#sx#sx#sx#sx) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 16px; min-width: 0; }
html.tab-codeme body :is(.pls-back, #sx#sx#sx#sx#sx#sx) {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px;
  border-radius: 8px; box-shadow: var(--sx-key); background: var(--sx-cap); color: var(--sx-cap-ink);
  font: 500 14px/1 var(--font-sans); text-decoration: none;
}
html.tab-codeme body :is(.pls-back svg, #sx#sx#sx#sx#sx#sx) { transform: scaleX(-1); }
html.tab-codeme body :is(.pls-back, #sx#sx#sx#sx#sx#sx):hover { background: var(--sx-sheet); }
html.tab-codeme body :is(.pls-title, #sx#sx#sx#sx#sx#sx) { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 600 28px/1.15 var(--cmk-display); letter-spacing: 0; color: var(--text-primary); }
html.tab-codeme body :is(.pls-head .pls-prog, #sx#sx#sx#sx#sx#sx) { flex: 0 1 220px; }
/* The heading's icon: the topic's placard in a small square tile (the band
   artwork cropped in on its middle), as on the SQL and DevOps tabs. */
html.tab-codeme body :is(.pls-icon, #sx#sx#sx#sx#sx#sx) { position: relative; flex: none; width: 52px; height: 52px; overflow: hidden; border: 1px solid var(--sx-line); }
html.tab-codeme body :is(.pls-icon > .fa-cover.sx-cover, #sx#sx#sx#sx#sx#sx) { inset: 0; height: 100% !important; }
html.tab-codeme body :is(.pls-icon .fa-svg, #sx#sx#sx#sx#sx#sx) { transform: scale(1.45); }
@media (max-width: 600px) { html.tab-codeme body :is(.pls-icon, #sx#sx#sx#sx#sx#sx) { width: 44px; height: 44px; } }
html.tab-codeme body :is(.pls-gap, #sx#sx#sx#sx#sx#sx) { flex: 1 1 0; }
html.tab-codeme body :is(.pls-f, #sx#sx#sx#sx#sx#sx) { display: flex; min-width: 0; }
@media (max-width: 600px) {
  html.tab-codeme body :is(.pls-title, #sx#sx#sx#sx#sx#sx) { font-size: 22px; }
  html.tab-codeme body :is(.pls-gap, #sx#sx#sx#sx#sx#sx) { display: none; }
}

/* Level 2: the rows and the stage. */
html.tab-codeme body :is(.pls-body, #sx#sx#sx#sx#sx#sx) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 20px; align-items: start; }
@media (max-width: 960px) {
  html.tab-codeme body :is(.pls-body, #sx#sx#sx#sx#sx#sx) { grid-template-columns: minmax(0, 1fr); }
  html.tab-codeme body :is(.pls-stage, #sx#sx#sx#sx#sx#sx) { display: none !important; }
}
html.tab-codeme body :is(.pls-list, #sx#sx#sx#sx#sx#sx) { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.tab-codeme body :is(.pls-rows, #sx#sx#sx#sx#sx#sx) { border: 1px solid var(--sx-line); background: var(--sx-sheet); box-shadow: var(--sx-rest); min-width: 0; }
html.tab-codeme body :is(.pls-row, #sx#sx#sx#sx#sx#sx) {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--sx-line-soft); color: var(--text-primary); text-decoration: none;
}
html.tab-codeme body :is(.pls-row:first-child, #sx#sx#sx#sx#sx#sx) { border-top: 0; }
html.tab-codeme body :is(.pls-row, #sx#sx#sx#sx#sx#sx):hover { background: var(--sx-tint); }
html.tab-codeme body :is(.pls-row, #sx#sx#sx#sx#sx#sx):hover .pls-rt { color: var(--accent-text); }
html.tab-codeme body :is(.pls-row, #sx#sx#sx#sx#sx#sx):focus-visible { outline: 2px solid var(--sx-sel); outline-offset: -2px; }
html.tab-codeme body :is(.pls-rt, #sx#sx#sx#sx#sx#sx) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font: 600 16px/1.35 var(--font-sans); overflow-wrap: anywhere; }
html.tab-codeme body :is(.pls-tags, #sx#sx#sx#sx#sx#sx) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
html.tab-codeme body :is(.pls-ok, #sx#sx#sx#sx#sx#sx) { display: grid; place-items: center; width: 20px; color: var(--g-green); }
html.tab-codeme body :is(.pls-row .plv-diff, #sx#sx#sx#sx#sx#sx) { justify-self: end; }
@media (max-width: 760px) { html.tab-codeme body :is(.pls-tags, #sx#sx#sx#sx#sx#sx) { display: none; } }
@media (max-width: 600px) {
  html.tab-codeme body :is(.pls-row, #sx#sx#sx#sx#sx#sx) { grid-template-columns: 28px minmax(0, 1fr) auto 20px; gap: 8px; padding: 8px 12px; }
  html.tab-codeme body :is(.pls-rt, #sx#sx#sx#sx#sx#sx) { font-size: 15px; }
}
html.tab-codeme body :is(.pls-sub, #sx#sx#sx#sx#sx#sx) { margin: 20px 0 8px; font: 600 18px/1.3 var(--cmk-display); color: var(--text-primary); }
html.tab-codeme body :is(.pls-rows.is-read .plv-row, #sx#sx#sx#sx#sx#sx) { border-top: 1px solid var(--sx-line-soft) !important; }

html.tab-codeme body :is(.pls-stage, #sx#sx#sx#sx#sx#sx) {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  padding: calc(var(--sx-cover-h) + 16px) 16px 16px;
  border: 1px solid var(--sx-line); background: var(--sx-sheet); box-shadow: var(--sx-nest);
}
html.tab-codeme body :is(.pls-stage::after, #sx#sx#sx#sx#sx#sx) { content: ''; position: absolute; top: -1px; left: -1px; z-index: 2; width: 26%; height: 1px; background: var(--sx-four-fade); }
html.tab-codeme body :is(.pls-stage > :not(.sx-cover), #sx#sx#sx#sx#sx#sx) { position: relative; z-index: 1; }
html.tab-codeme body :is(.pls-stage-t, #sx#sx#sx#sx#sx#sx) { font: 600 18px/1.3 var(--cmk-display); color: var(--text-primary); }
html.tab-codeme body :is(.pls-tiers, #sx#sx#sx#sx#sx#sx) { display: grid; gap: 8px; }
html.tab-codeme body :is(.pls-tier, #sx#sx#sx#sx#sx#sx) { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 500 13px/1 var(--font-sans); }
html.tab-codeme body :is(.pls-tier .pls-meter > i, #sx#sx#sx#sx#sx#sx) { background: var(--g-blue); }
html.tab-codeme body :is(.pls-k, #sx#sx#sx#sx#sx#sx) { margin-top: 6px; font: 500 12px/1 var(--font-sans); color: var(--sx-mute); }
html.tab-codeme body :is(.pls-pats, #sx#sx#sx#sx#sx#sx) { display: flex; flex-wrap: wrap; gap: 6px; }
html.tab-codeme body :is(.pls-pats > *, #sx#sx#sx#sx#sx#sx) {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--sx-line); font: 500 12px/1.3 var(--font-sans); color: var(--text-secondary); text-decoration: none;
}
html.tab-codeme body :is(a.pls-to, #sx#sx#sx#sx#sx#sx):hover { border-color: var(--sx-sel); color: var(--accent-text); }
html.tab-codeme body :is(.pls-links, #sx#sx#sx#sx#sx#sx) { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--sx-line-soft); }
html.tab-codeme body :is(.pls-link, #sx#sx#sx#sx#sx#sx) {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border: 0; background: transparent; cursor: pointer;
  font: 500 14px/1.3 var(--font-sans); color: var(--accent-text); text-decoration: none; text-align: left;
}
html.tab-codeme body :is(.pls-link, #sx#sx#sx#sx#sx#sx):hover { background: var(--sx-tint); }
html.tab-codeme body :is(.pls-none, #sx#sx#sx#sx#sx#sx) { padding: 24px; }
@media (prefers-reduced-motion: reduce) {
  html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx) { transition: none; }
  html.tab-codeme body :is(.pls-card, #sx#sx#sx#sx#sx#sx):hover { transform: none; }
}

/* ── Thumbs (showcase.js thumbAt): dense grids carry a still 64px tile
   beside the title instead of a band. ── */
html.tab-codeme body :is(.fa-cover.sx-cover.is-thumb, #sx#sx#sx#sx#sx#sx) {
  position: relative !important; top: auto; left: auto; right: auto; z-index: 1;
  width: 64px !important; height: 64px !important; flex: none; border: 1px solid var(--sx-line-soft); border-bottom: 1px solid var(--sx-line-soft);
}
html.tab-codeme body :is(.chv-card.sx-has-thumb, #sx#sx#sx#sx#sx#sx) { padding-top: 16px !important; }
html.tab-codeme body :is(.chv-card.sx-has-thumb .chv-well, #sx#sx#sx#sx#sx#sx) { display: none !important; }
html.tab-codeme body :is(.chv-card.sx-has-thumb .chv-card-h, #sx#sx#sx#sx#sx#sx) { gap: 14px !important; }
html.tab-codeme body :is(.gd-map-i.sx-has-thumb, #sx#sx#sx#sx#sx#sx) {
  display: grid !important; padding-top: 20px !important; grid-template-columns: 64px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 6px !important; grid-template-rows: auto auto auto 1fr; text-align: left !important;
}
html.tab-codeme body :is(.gd-map-i.sx-has-thumb > *, #sx#sx#sx#sx#sx#sx) { grid-column: 1 / -1; }
html.tab-codeme body :is(.gd-map-i.sx-has-thumb > .gd-map-top, #sx#sx#sx#sx#sx#sx) { grid-column: 2; grid-row: 1; align-self: end; }
html.tab-codeme body :is(.gd-map-i.sx-has-thumb > b, #sx#sx#sx#sx#sx#sx) { grid-column: 2; grid-row: 2; align-self: start; text-align: left !important; }
html.tab-codeme body :is(.gd-map-i.sx-has-thumb > .sx-cover, #sx#sx#sx#sx#sx#sx) { grid-column: 1; grid-row: 1 / span 2; }
html.tab-codeme body :is(.gd-map-i.sx-has-thumb > .gd-map-f, #sx#sx#sx#sx#sx#sx) { align-self: end; }

/* @flat-art:start  The flat placards (assets/js/showcase-art.js): a pale wash in the card's Waymo tone
   (blue, sky, lime, mint) with two soft glows, flat line work on it, and calm motion on the card's hover only. */
html.tab-codeme .fa-cover {
  --fa-ink: #1F2328; --fa-paper: #FFFFFF; --fa-line: #C9D0DA; --fa-dimt: #59636E; --fa-on: #1F2328;
  position: relative; display: grid; place-items: center; overflow: hidden;
  height: var(--fa-h, 128px); width: 100%;
  background:
    radial-gradient(60% 95% at 14% 16%, var(--fa-glow, transparent), transparent 70%),
    radial-gradient(55% 90% at 90% 94%, var(--fa-glow-2, transparent), transparent 72%),
    linear-gradient(135deg, var(--fa-tile, #F3F5FA), var(--fa-tile-2, #EEF1F6));
  border-bottom: 1px solid var(--fa-rule, #DDE2EA);
}
html.tab-codeme .fa-cover.is-blue { --fa-tone: #0077FF; --fa-soft: #D4E0FC; --fa-on: #FFFFFF; --fa-tile: #F4F8FF; --fa-tile-2: #EEF3FE; --fa-glow: rgba(0, 119, 255, .16); --fa-glow-2: rgba(90, 162, 255, .14); }
html.tab-codeme .fa-cover.is-sky  { --fa-tone: #5AA2FF; --fa-soft: #DCE9FF; --fa-tile: #F6FAFF; --fa-tile-2: #EAF3FF; --fa-glow: rgba(90, 162, 255, .2); --fa-glow-2: rgba(0, 200, 150, .1); }
html.tab-codeme .fa-cover.is-lime { --fa-tone: #9AD61A; --fa-soft: #E8FCAC; --fa-tile: #FBFEF2; --fa-tile-2: #F1FAD8; --fa-glow: rgba(154, 214, 26, .24); --fa-glow-2: rgba(0, 200, 150, .12); }
html.tab-codeme .fa-cover.is-mint { --fa-tone: #00C896; --fa-soft: #CCF4E9; --fa-tile: #F3FCF9; --fa-tile-2: #E4F8F1; --fa-glow: rgba(0, 200, 150, .18); --fa-glow-2: rgba(154, 214, 26, .12); }
html.tab-codeme[data-scheme='dark'] .fa-cover { --fa-ink: #E8ECF1; --fa-paper: #262B32; --fa-line: #47505B; --fa-dimt: #A3ACB8; --fa-on: #10161E; --fa-rule: #2E343C; }
html.tab-codeme[data-scheme='dark'] .fa-cover.is-blue { --fa-on: #FFFFFF; --fa-soft: #1F3354; --fa-tile: #1C2431; --fa-tile-2: #18202B; --fa-glow: rgba(0, 119, 255, .24); --fa-glow-2: rgba(90, 162, 255, .12); }
html.tab-codeme[data-scheme='dark'] .fa-cover.is-sky  { --fa-soft: #233348; --fa-tile: #1D2430; --fa-tile-2: #19202A; --fa-glow: rgba(90, 162, 255, .22); --fa-glow-2: rgba(0, 200, 150, .1); }
html.tab-codeme[data-scheme='dark'] .fa-cover.is-lime { --fa-soft: #33401B; --fa-tile: #1F251B; --fa-tile-2: #1A2018; --fa-glow: rgba(154, 214, 26, .18); --fa-glow-2: rgba(0, 200, 150, .1); }
html.tab-codeme[data-scheme='dark'] .fa-cover.is-mint { --fa-soft: #183D33; --fa-tile: #1A2724; --fa-tile-2: #16211F; --fa-glow: rgba(0, 200, 150, .2); --fa-glow-2: rgba(154, 214, 26, .1); }
html.tab-codeme .fa-svg { position: relative; display: block; width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s cubic-bezier(.165, .84, .44, 1); }
html.tab-codeme .fa-ink { fill: none; stroke: var(--fa-ink); stroke-width: 2; }
html.tab-codeme .fa-paper { fill: var(--fa-paper); stroke: var(--fa-ink); stroke-width: 1.5; }
html.tab-codeme .fa-tone { fill: var(--fa-tone); stroke: var(--fa-ink); stroke-width: 1.5; }
html.tab-codeme .fa-soft { fill: var(--fa-soft); stroke: var(--fa-ink); stroke-width: 1.25; }
html.tab-codeme .fa-wash { fill: var(--fa-tone); fill-opacity: .14; stroke: none; }
html.tab-codeme .fa-chip { fill: var(--fa-paper); stroke: var(--fa-line); stroke-width: 1; }
html.tab-codeme .fa-line { fill: none; stroke: var(--fa-tone); stroke-width: 3; }
html.tab-codeme .fa-line.fa-thick { stroke-width: 7; }
html.tab-codeme .fa-dash { stroke-dasharray: 5 6; }
html.tab-codeme .fa-soft-line { fill: none; stroke: var(--fa-tone); stroke-opacity: .45; stroke-width: 2.5; }
html.tab-codeme .fa-faint { fill: none; stroke: var(--fa-line); stroke-width: 2; }
html.tab-codeme .fa-faint-box { fill: none; stroke: var(--fa-line); stroke-width: 1.25; }
html.tab-codeme .fa-mark { fill: none; stroke: var(--fa-on); stroke-width: 2.25; }
html.tab-codeme .fa-mark-tone { fill: none; stroke: var(--fa-tone); stroke-width: 2.25; }
html.tab-codeme .fa-mark-dot { fill: var(--fa-on); stroke: none; }
html.tab-codeme .fa-t { fill: var(--fa-ink); stroke: none; font: 500 12px/1 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-anchor: middle; dominant-baseline: central; }
html.tab-codeme .fa-t.fa-strong { font-weight: 700; }
html.tab-codeme .fa-t.fa-dim { fill: var(--fa-dimt); }
html.tab-codeme .fa-t.fa-on { fill: var(--fa-on); font-weight: 700; }
html.tab-codeme .fa-t.fa-start { text-anchor: start; }
html.tab-codeme .fa-swap-b { opacity: 0; }
html.tab-codeme .fa-draw > :not(.fa-dash) { stroke-dasharray: 100; stroke-dashoffset: 0; }
/* Motion: only while the card is hovered, slow and eased. */
@keyframes fa-slide { to { transform: translateX(var(--dx, 12px)); } }
@keyframes fa-bob { to { transform: translateY(var(--dy, -4px)); } }
@keyframes fa-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes fa-march { to { stroke-dashoffset: -22; } }
@keyframes fa-fade { 0%, 35% { opacity: 1; } 65%, 100% { opacity: 0; } }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-svg { transform: scale(1.03); }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-slide { animation: fa-slide 2.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-bob { animation: fa-bob 1.9s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-draw > :not(.fa-dash) { animation: fa-draw 2.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-draw > .fa-dash { animation: fa-march 1.4s linear infinite; }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-swap-a { animation: fa-fade 2.6s ease-in-out infinite alternate; }
html.tab-codeme :is(a, button, .chv-today, .pls-stage):hover .fa-cover:not(.is-thumb) .fa-swap-b { animation: fa-fade 2.6s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) {
  html.tab-codeme .fa-cover * { animation: none !important; }
  html.tab-codeme .fa-svg { transition: none; }
}
@media (max-width: 600px) { html.tab-codeme .fa-cover { height: var(--fa-h-phone, 104px); } }
/* Thumb: a still square tile beside a title in dense grids; the artwork
   (240×132) is cropped in on its middle. */
html.tab-codeme .fa-cover.is-thumb { width: var(--fa-thumb, 64px); height: var(--fa-thumb, 64px); flex: none; border: 1px solid var(--fa-rule, #DDE2EA); }
html.tab-codeme .fa-cover.is-thumb .fa-svg { transform: scale(1.6); }
html.tab-codeme .fa-cover.is-thumb * { animation: none !important; }
/* @flat-art:end */