/* =============================================================================
   AIToolsay — Tool-page ARTICLE BODY  (.pg-article.pg-prose)
   -----------------------------------------------------------------------------
   The generated prose itself: headings, paragraphs, emphasis, links, lists,
   blockquotes, rules, tables and the FAQ accordion. Loaded once by
   ai-tool-shell and ai-writers-shell. Applies to BOTH surfaces the markdown
   renderer writes into — the open result (`#pg-out-rendered`) and the expanded
   history rows (`.pg-hist-rendered`).

   ── THE CODE BLOCK IS OFF LIMITS ──────────────────────────────────────────
   `.pg-codeblock` was redesigned separately in assets/css/ai-code-block.css and
   nothing here may reach into it. Two rules make that hold rather than hoping:
     · this file declares NO `pre` selector at all;
     · every `code` selector carries `:not(pre code)`, so it is inline code only.
   If you add a descendant selector here, check it cannot match inside a code
   block before you ship it.

   ── FULL WIDTH ────────────────────────────────────────────────────────────
   The shells cap the prose at `max-width: 880px; margin: 0 auto`, which is what
   left the wide margins in the report. That cap is removed. Worth knowing the
   trade-off that was made deliberately: a measure much past ~75 characters is
   harder to read line-to-line, so the line-height is raised a notch at wide
   container widths to compensate. Re-adding a max-width is a one-line change if
   the long measure ever reads badly.

   ── SPECIFICITY ───────────────────────────────────────────────────────────
   `.pg-prose` is the hook; the base compound is `.pg-article.pg-prose` so this
   also clears the history variant. Cleared, all of it declared AFTER this
   file's <link>:

     ai-tool-shell     .pg-article p / li / h2 …                   (0,1,1)
                       .pg-hist-rendered.pg-article p              (0,2,1)  <--
                       body.theme-dark .pg-article p               (0,2,2)
     custom.ltr.css    body:not(.admin-shell):not(.theme-dark)
                         code:not(.hljs):not([class*=" language-"]) (0,4,2)  <--
                       body:not(.admin-shell) a:focus-visible       (0,2,2)

   The marked (0,4,2) is why inline code needs `:not(pre code)` — it is not just
   correctness, it is what lifts this file's rule to (0,4,4) and wins. That rule
   is ALSO why the component's own `.pg-article code:not(pre code)` (0,1,3) has
   been dead all along: inline code has been painted by the global, in both
   themes. Ladder here:
       base (0,3,0) · element (0,3,1) · dark (0,4,2) · inline code (0,4,4)
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. TOKENS + THE FULL-WIDTH RESET
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-article.pg-prose {
  --ab-1: #4C8DF2;
  --ab-2: #3680ED;
  --ab-3: #2060C0;
  /* the only stops that ever sit under white glyphs */
  --ab-fill-1: #2E6FD0;
  --ab-fill-2: #1B4E9E;
  --ab-glow: 54, 128, 237;

  --ab-surface: #fff;
  --ab-raise: #f7f9fd;
  --ab-line: #e6ebf3;
  --ab-line-soft: #eef2f7;

  --ab-ink: #131c28;
  --ab-body: #303c4d;
  --ab-ink-2: #5b6779;
  --ab-tint: rgba(54, 128, 237, .07);
  --ab-tint-2: rgba(54, 128, 237, .13);
  /* THE EMPHASIS HIGHLIGHTER IS YELLOW, BY REQUEST — the marker-pen look is the
     motif, not an oversight from the pre-blue theme. This is the shells'
     original value, unchanged: dark ink on it measures 14.72:1.
     Dark mode CANNOT use this value — see the dark block for the measurement
     and the substitute. */
  --ab-mark: rgba(255, 233, 84, .7);
  --ab-mark-h: rgba(255, 233, 84, .92);

  --ab-ease: cubic-bezier(.34, 1.4, .64, 1);

  container-type: inline-size;
  /* the hover tints below are painted with a box-shadow spread, so the article
     needs its own stacking context or they bleed over neighbouring blocks */
  isolation: isolate;

  /* FULL WIDTH — this is the cap the report asked to remove. BOTH the physical
     and the logical property are declared on purpose. They cascade into one
     computed slot, so `max-inline-size` alone does win over the shells'
     `max-width: 880px` at (0,1,0) — but this is the single line the whole
     request hinges on, and it should not depend on a reader knowing that. */
  max-width: none;
  max-inline-size: none;
  margin: 0;
  color: var(--ab-body);
  font-size: 16px;
  line-height: 1.8;
  scroll-behavior: smooth;
}

/* Padding is declared SEPARATELY and excludes the history variant, because
   `.pg-hist-rendered`'s padding is owned by ai-activity-history.css. Declaring
   it in both files means the same number in two places, and the higher-
   specificity one wins silently the day they drift apart. */
.pg-root .pg-article.pg-prose:not(.pg-hist-rendered) { padding: 10px 28px 30px; }

/* The history rows render the same prose in a denser variant. They only need
   to become their own query container here; everything else about that variant
   stays where it belongs. */
.pg-root .pg-hist-rendered.pg-article.pg-prose { container-type: inline-size; }

.pg-root .pg-article.pg-prose > *:first-child { margin-block-start: 0 !important; }
.pg-root .pg-article.pg-prose > *:last-child { margin-block-end: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   1. HEADINGS
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-article.pg-prose h1,
.pg-root .pg-article.pg-prose h2,
.pg-root .pg-article.pg-prose h3,
.pg-root .pg-article.pg-prose h4 {
  color: var(--ab-ink);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  scroll-margin-block-start: 84px;   /* clears the sticky action bar */
}

.pg-root .pg-article.pg-prose h1 {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.028em;
}

/* h2 is the section marker. The shells give it a flat full-width hairline; this
   is a gradient that carries brand at the start and fades out, so the rule
   reads as belonging to the heading rather than as a table border. */
.pg-root .pg-article.pg-prose h2 {
  position: relative;
  margin: 40px 0 14px;
  padding: 0 0 12px;
  border: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.28;
}
.pg-root .pg-article.pg-prose h2::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
              rgba(var(--ab-glow), .75) 0%,
              rgba(var(--ab-glow), .28) 22%,
              var(--ab-line) 55%,
              transparent 100%);
  transition: background .28s ease;
}

.pg-root .pg-article.pg-prose h3 {
  margin: 30px 0 10px;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.38;
}
.pg-root .pg-article.pg-prose h4 {
  margin: 24px 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
}
.pg-root .pg-article.pg-prose h5,
.pg-root .pg-article.pg-prose h6 {
  margin: 22px 0 7px;
  color: var(--ab-3);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BODY TEXT
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-article.pg-prose p {
  margin: 0 0 18px;
  color: var(--ab-body);
  font-size: 16px;
  line-height: 1.8;
  /* `pretty` costs nothing where unsupported and kills orphaned last words,
     which get very visible once the measure is full-width */
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Emphasis. Brand highlighter, not the leftover yellow. `62%` is where the
   band starts, so it sits under the baseline like a real marker stroke. */
.pg-root .pg-article.pg-prose strong,
.pg-root .pg-article.pg-prose b {
  padding: 0 3px;
  margin: 0 -1px;
  border-radius: 3px;
  color: var(--ab-ink);
  font-weight: 700;
  background-image: linear-gradient(180deg, transparent 62%, var(--ab-mark) 62%);
  transition: background-image .22s ease;
}
.pg-root .pg-article.pg-prose em,
.pg-root .pg-article.pg-prose i { color: var(--ab-body); font-style: italic; }

/* Links — the underline grows from the leading edge on hover rather than just
   changing colour. */
.pg-root .pg-article.pg-prose a {
  color: var(--ab-3);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  padding-block-end: 1px;
  transition: color .2s ease, background-size .28s var(--ab-ease);
  overflow-wrap: anywhere;
}

/* Inline code. This has to out-rank the site-wide `code:not(.hljs)…` at
   (0,4,2); `:not(pre code)` both excludes the redesigned code block and lifts
   this to (0,4,4). */
body:not(.admin-shell) .pg-root .pg-article.pg-prose code:not(pre code) {
  padding: 2px 7px;
  border: 1px solid rgba(var(--ab-glow), .18);
  border-radius: 6px;
  background: var(--ab-tint);
  color: var(--ab-3);
  font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .88em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Rule — a fading hairline with a brand mark at its centre, instead of a flat
   grey line butting into both edges. */
.pg-root .pg-article.pg-prose hr {
  position: relative;
  block-size: 1px;
  border: 0;
  margin: 34px 0;
  background: linear-gradient(90deg, transparent, var(--ab-line) 18%,
              var(--ab-line) 82%, transparent);
  overflow: visible;
}
.pg-root .pg-article.pg-prose hr::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--ab-fill-1), var(--ab-fill-2));
  box-shadow: 0 0 0 4px var(--ab-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. LISTS
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-article.pg-prose ul,
.pg-root .pg-article.pg-prose ol {
  margin: 0 0 20px;
  padding-inline-start: 0;
  list-style: none;
}
.pg-root .pg-article.pg-prose li {
  position: relative;
  margin: 0 0 10px;
  padding-inline-start: 30px;
  color: var(--ab-body);
  font-size: 16px;
  line-height: 1.78;
  overflow-wrap: break-word;
}
.pg-root .pg-article.pg-prose li:last-child { margin-block-end: 0; }

/* ── 3a. LIST TOKENS  (rebuilt 2026-08-09) ───────────────────────────────────
   Declared HERE, not in §0/§11 with the rest, because the list marker system
   is self-contained and this is the one place a reader needs both halves side
   by side to see why the dark ramp is different.

   THE DARK BUG THIS FIXES: the markers were `linear-gradient(--ab-fill-1,
   --ab-fill-2)` — and `--ab-fill-*` is deliberately NOT remapped in the dark
   block, because those two stops exist to carry WHITE TEXT (4.88:1 / 7.98:1,
   theme-independent). Used as a FILL ON the page they are something else
   entirely: `--ab-fill-2` (#1B4E9E) measures **2.24:1 on the #17171A card** —
   under the 3:1 a non-text graphic needs — so half of every bullet dissolved
   into the background in dark mode. Markers therefore get their own ramp that
   moves UP toward the hue in dark instead of down. `--ab-fill-*` is still the
   right token for the ordered chip's hover FILL, where white text sits on it.

     LIGHT  #3680ED 3.84:1 .. #1B4E9E 7.98:1   on #ffffff
     DARK   #6FA8FA 7.37:1 .. #2E6FD0 3.66:1   on #17171A                    */
.pg-root .pg-article.pg-prose {
  --abl-a:      #3680ED;                      /* marker gradient, light end  */
  --abl-b:      #1B4E9E;                      /* marker gradient, deep end   */
  --abl-ring:   rgba(var(--ab-glow), .16);
  --abl-ring-h: rgba(var(--ab-glow), .26);
  --abl-rail:   rgba(var(--ab-glow), .28);    /* ordered-list connector      */
  --abl-spec:   rgba(255, 255, 255, .45);     /* 1px specular on the markers */
  --abl-dot:    9px;
  --abl-num:    24px;
}
body.theme-dark .pg-root .pg-article.pg-prose {
  --abl-a:      #6FA8FA;
  --abl-b:      #2E6FD0;
  --abl-ring:   rgba(var(--ab-glow), .22);
  --abl-ring-h: rgba(var(--ab-glow), .34);
  --abl-rail:   rgba(var(--ab-glow), .34);
  /* A .45 white line reads as a hard glare on a dark tint — the highlight is
     meant to suggest a lit edge, not draw one. */
  --abl-spec:   rgba(255, 255, 255, .14);
}

/* ── 3b. UNORDERED — the brand diamond ───────────────────────────────────────
   A gradient-filled rounded square turned 45°, matching the mark the public
   article renderer uses (premium-article.css §8c) so the two bodies read as
   one product. The ring is a `box-shadow` on the ROTATED element, so it turns
   with the mark and reads as a diamond halo rather than a circle behind a
   diamond; the inset white line is the specular that stops it looking like a
   flat sticker at 9px. Both bloom on hover — see §7. */
.pg-root .pg-article.pg-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: .65em;
  inline-size: var(--abl-dot);
  block-size: var(--abl-dot);
  border-radius: 3px;
  background: linear-gradient(135deg, var(--abl-a), var(--abl-b));
  box-shadow: 0 0 0 3px var(--abl-ring), inset 0 1px 0 var(--abl-spec);
  transform: rotate(45deg);
  transition: box-shadow .3s var(--ab-ease), transform .3s var(--ab-ease),
              background .3s ease;
}

/* ── 3c. ORDERED — a stepper, not just numbers ───────────────────────────────
   Chips are tinted at rest and fill on hover. What is new is the CONNECTOR:
   a hairline runs from each chip to the next, so a numbered list reads as an
   ordered procedure at a glance — which is what generated how-to content
   almost always is. It is drawn as `::after` on every item BUT the last, and
   it is switched off inside nested lists (a stepper inside a stepper is
   noise). `z-index` on the chip keeps it above the line it terminates;
   `.pg-prose` already establishes the stacking context via `isolation`. */
.pg-root .pg-article.pg-prose ol { counter-reset: pg-ol; }
.pg-root .pg-article.pg-prose ol > li { counter-increment: pg-ol; padding-inline-start: 36px; }
.pg-root .pg-article.pg-prose ol > li::before {
  content: counter(pg-ol);
  position: absolute;
  z-index: 1;
  inset-inline-start: 0;
  inset-block-start: .12em;
  inline-size: var(--abl-num);
  block-size: var(--abl-num);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--ab-tint);
  color: var(--ab-3);                         /* 5.54:1 light · 8.72:1 dark  */
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;         /* 9 → 10 keeps its centre     */
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(var(--ab-glow), .18),
              inset 0 1px 0 var(--abl-spec);
  transition: background .24s ease, color .24s ease, box-shadow .24s ease,
              transform .28s var(--ab-ease);
}
.pg-root .pg-article.pg-prose ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--abl-num) / 2 - 1px);
  inset-block-start: calc(.12em + var(--abl-num) + 5px);
  inset-block-end: -10px;                     /* meets the next chip's top   */
  inline-size: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--abl-rail), rgba(var(--ab-glow), .05));
  transition: background .26s ease;
}
.pg-root .pg-article.pg-prose ol ol > li::after { content: none; }

/* ── 3d. NESTED — hierarchy by SHAPE, not by fading out ──────────────────────
   Level 2 is the same mark hollowed out and level 3 a smaller neutral hollow.
   Colour stays brand at level 2 on purpose: the previous treatment dropped
   nested bullets to a flat outline that read as disabled content. */
.pg-root .pg-article.pg-prose li > ul,
.pg-root .pg-article.pg-prose li > ol { margin: 10px 0 4px; }
.pg-root .pg-article.pg-prose li > ul > li,
.pg-root .pg-article.pg-prose li > ol > li { font-size: 15.2px; margin-block-end: 7px; }
.pg-root .pg-article.pg-prose li > ul > li::before {
  inline-size: calc(var(--abl-dot) - 1px);
  block-size: calc(var(--abl-dot) - 1px);
  background: none;
  box-shadow: inset 0 0 0 2px var(--abl-a), 0 0 0 0 var(--abl-ring);
}
.pg-root .pg-article.pg-prose li > ul > li > ul > li::before {
  inline-size: calc(var(--abl-dot) - 3px);
  block-size: calc(var(--abl-dot) - 3px);
  box-shadow: inset 0 0 0 2px var(--ab-ink-2), 0 0 0 0 transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BLOCKQUOTE
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-article.pg-prose blockquote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 26px 0;
  padding: 20px 24px 20px 60px;
  border: 1px solid rgba(var(--ab-glow), .18);
  /* full radius, not the shells' `0 12px 12px 0` — a square-cornered left edge
     against a rounded right edge reads as a clipping bug */
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--ab-glow), .1), rgba(var(--ab-glow), .035));
  color: var(--ab-body);
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.72;
  box-shadow: 0 1px 2px rgba(16, 26, 40, .03);
  transition: transform .24s var(--ab-ease), border-color .22s ease, box-shadow .24s ease;
}
/* the rail is a pseudo-element, not a border-left, so it can be a gradient and
   still follow the 16px radius */
.pg-root .pg-article.pg-prose blockquote::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: linear-gradient(180deg, var(--ab-fill-1), var(--ab-fill-2));
}
.pg-root .pg-article.pg-prose blockquote::after {
  content: "\201C";
  position: absolute;
  inset-inline-start: 18px;
  inset-block-start: 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 54px;
  line-height: 1;
  color: rgba(var(--ab-glow), .32);
  pointer-events: none;
  transition: color .24s ease, transform .3s var(--ab-ease);
}
.pg-root .pg-article.pg-prose blockquote p {
  margin: 0 0 10px;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
}
.pg-root .pg-article.pg-prose blockquote p:last-child { margin-block-end: 0; }
.pg-root .pg-article.pg-prose blockquote cite {
  display: block;
  margin-block-start: 12px;
  color: var(--ab-3);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. TABLES
   ═══════════════════════════════════════════════════════════════════════════
   Same scroll-shadow technique as the code block: the edge shade appears only
   on the side that actually has hidden columns, so a wide table never silently
   cuts off. */
.pg-root .pg-article.pg-prose .pg-table-wrap,
.pg-root .pg-prose + .pg-table-wrap,
.pg-root .pg-article.pg-prose + .pg-table-wrap {
  margin: 24px 0;
  border: 1.5px solid var(--ab-line);
  border-radius: 16px;
  overflow: auto;
  background-color: var(--ab-surface);
  background-image:
    linear-gradient(to right, var(--ab-surface), rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--ab-surface), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(16, 26, 40, .14), rgba(16, 26, 40, 0)),
    linear-gradient(to left,  rgba(16, 26, 40, .14), rgba(16, 26, 40, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04);
}
.pg-root .pg-article.pg-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-inline-size: 460px;
}
.pg-root .pg-article.pg-prose thead {
  background: linear-gradient(180deg, rgba(var(--ab-glow), .1), rgba(var(--ab-glow), .04));
}
.pg-root .pg-article.pg-prose th {
  padding: 13px 17px;
  border: 0;
  border-block-end: 1.5px solid rgba(var(--ab-glow), .2);
  color: var(--ab-3);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
}
.pg-root .pg-article.pg-prose td {
  padding: 12px 17px;
  border: 0;
  border-block-end: 1px solid var(--ab-line-soft);
  color: var(--ab-body);
  vertical-align: top;
}

/* NEVER break a word inside a table cell.
   `td` inherits `overflow-wrap: break-word` from the prose, which is right
   for a paragraph — a paragraph is as wide as the article. A table column is
   not: with `table-layout:auto` the browser hands the first column whatever
   is left after the wordier ones, and once that drops below a single word
   `break-word` starts splitting mid-character — "Keywo / rd", "Writin / g".
   That reads as a rendering fault, not as a narrow screen.
   `normal` refuses to split, so a word that cannot fit widens its column and
   the WRAPPER scrolls instead — which it is already built to do (overflow:
   auto plus the edge shadows above). The floor stops auto layout crushing a
   column to a few characters in the first place. */
.pg-root .pg-article.pg-prose th,
.pg-root .pg-article.pg-prose td {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  min-inline-size: 6.5rem;
}

.pg-root .pg-article.pg-prose tbody tr:nth-child(even) { background: var(--ab-raise); }
.pg-root .pg-article.pg-prose tbody tr:last-child td { border-block-end: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. FAQ
   ═══════════════════════════════════════════════════════════════════════════
   Deliberately the SAME component as the site's hand-written FAQ (.aitsq-* in
   assets/css/faq.css): 18px radius, a spine that grows down the open card, the
   blue wash on [open], and a + that rotates 135° into an ×. A reader should not
   be able to tell that one FAQ was typed by us and the other generated.

   It is NOT built on .aitsq-* itself. That kit is <details>/<summary> and lives
   behind faq.css, which tool pages do not load; and its tokens (--aits-*) are
   not defined inside the article. So the language is ported onto the article's
   own --ab-* tokens, which already carry the light/dark remap.

   The collapse is grid-template-rows 0fr→1fr rather than max-height. max-height
   forces a guessed number: too small clips a long answer, too large makes the
   transition idle before it starts. 0fr→1fr animates to the content's OWN
   height, so a two-line answer and a two-paragraph answer both land exactly.
   <details> cannot animate at all, which is why this half is not ported. */

.pg-root .pg-article.pg-prose .pg-faq-list,
.pg-root .pg-prose .pg-faq-list {
  display: grid;
  gap: 12px;
  margin-block: 18px 28px;
}

.pg-root .pg-article.pg-prose .pg-faq-item,
.pg-root .pg-prose .pg-faq-item {
  position: relative;
  border: 1px solid var(--ab-line);
  border-radius: 18px;
  background: var(--ab-surface);
  transition: border-color .22s var(--ab-ease), box-shadow .22s var(--ab-ease),
              transform .22s var(--ab-ease), background-color .22s var(--ab-ease);
}

/* Accent spine. Grows by HEIGHT from a 16px inset rather than scaleY from the
   edge, so it stops short of the card's rounded corners instead of poking into
   them. inset-inline-start, not left, so the RTL build needs no flipped copy. */
.pg-root .pg-prose .pg-faq-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 16px;
  inline-size: 3px;
  block-size: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ab-fill-1), var(--ab-fill-2));
  transition: block-size .3s var(--ab-ease);
  pointer-events: none;
}
.pg-root .pg-prose .pg-faq-item.open::before { block-size: calc(100% - 32px); }

.pg-root .pg-prose .pg-faq-item.open {
  border-color: rgba(var(--ab-glow), .26);
  background: linear-gradient(180deg, var(--ab-tint) 0%, var(--ab-surface) 42%);
  box-shadow: 0 20px 44px -30px rgba(var(--ab-glow), .85);
}

.pg-root .pg-prose .pg-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  inline-size: 100%;
  min-block-size: 60px;
  padding: 18px 20px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ab-ink);
  text-align: start;
  cursor: pointer;
  user-select: none;
}

/* min-inline-size:0 is load-bearing — without it a long unbroken question
   pushes the mark off the card instead of wrapping. */
.pg-root .pg-prose .pg-faq-qt {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.014em;
  color: var(--ab-ink);
  transition: color .2s var(--ab-ease);
}
.pg-root .pg-prose .pg-faq-item.open .pg-faq-qt { color: var(--ab-2); }

/* The + is two gradient bars, not an icon glyph — it cannot render as a blank
   box on a build where the icon font has not arrived. 135° turns it into an ×
   rather than a −, which is what the site kit does. */
.pg-root .pg-prose .pg-faq-mark {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 10px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--ab-tint);
  color: var(--ab-2);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .22s var(--ab-ease),
              color .22s var(--ab-ease), box-shadow .22s var(--ab-ease);
}
.pg-root .pg-prose .pg-faq-item.open .pg-faq-mark {
  transform: rotate(135deg);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--ab-fill-1);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(var(--ab-glow), .9);
}

.pg-root .pg-prose .pg-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ab-ease);
}
.pg-root .pg-prose .pg-faq-item.open .pg-faq-a { grid-template-rows: 1fr; }

/* THE CLIPPER CARRIES NO PADDING OF ITS OWN. A row at 0fr collapses this item's
   CONTENT to nothing but cannot collapse the item's own padding — leave padding
   here and every closed question keeps a ghost strip, with the row measuring
   29px instead of 0. So the padding lives on the children, inside the clip. */
.pg-root .pg-prose .pg-faq-ain {
  overflow: hidden;
  min-block-size: 0;
  padding: 0;
}
.pg-root .pg-prose .pg-faq-ain > * { margin-block: 0; padding-inline: 23px 20px; }
.pg-root .pg-prose .pg-faq-ain > :last-child { padding-block-end: 18px; }
.pg-root .pg-prose .pg-faq-ain > ul,
.pg-root .pg-prose .pg-faq-ain > ol { padding-inline-start: 41px; }

/* Size restated on the paragraph, not inherited: the article's own `p` rule
   sets 16px explicitly, and an explicit declaration beats an inherited one no
   matter how close the parent is. */
.pg-root .pg-prose .pg-faq-ain,
.pg-root .pg-prose .pg-faq-a p {
  color: var(--ab-ink-2);
  font-size: 14.5px;
  line-height: 1.75;
}
.pg-root .pg-prose .pg-faq-a p + p { margin-block-start: 10px; }
.pg-root .pg-prose .pg-faq-a a {
  color: var(--ab-fill-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Keyboard ring. The site-wide reset kills outlines on every button and rings
   with a box-shadow at (0,3,2); this chain scores (0,5,1) so it actually lands. */
body:not(.admin-shell) .pg-root .pg-prose .pg-faq-q:focus-visible {
  outline: 2px solid var(--ab-2);
  outline-offset: -2px;
  box-shadow: none;
}
.pg-root .pg-prose .pg-faq-q:active .pg-faq-mark { transform: scale(.92); }
.pg-root .pg-prose .pg-faq-item.open .pg-faq-q:active .pg-faq-mark { transform: rotate(135deg) scale(.92); }

/* Narrow cards — a container query, not a viewport one: this article also
   renders inside the history list, where the column is far narrower than the
   screen. @media would size it for the wrong box there. */
@container (max-width: 560px) {
  .pg-root .pg-prose .pg-faq-q { gap: 12px; padding: 15px 15px; min-block-size: 54px; }
  .pg-root .pg-prose .pg-faq-mark { inline-size: 28px; block-size: 28px; border-radius: 9px; }
  .pg-root .pg-prose .pg-faq-ain > * { padding-inline: 18px 15px; }
  .pg-root .pg-prose .pg-faq-ain > :last-child { padding-block-end: 15px; }
  .pg-root .pg-prose .pg-faq-ain > ul,
  .pg-root .pg-prose .pg-faq-ain > ol { padding-inline-start: 36px; }
  .pg-root .pg-prose .pg-faq-ain,
  .pg-root .pg-prose .pg-faq-a p { font-size: 14px; }
  .pg-root .pg-prose .pg-faq-list { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-prose .pg-faq-item,
  .pg-root .pg-prose .pg-faq-item::before,
  .pg-root .pg-prose .pg-faq-a,
  .pg-root .pg-prose .pg-faq-qt,
  .pg-root .pg-prose .pg-faq-mark { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   7. HOVER — the reading affordance
   ═══════════════════════════════════════════════════════════════════════════
   The shells tint a hovered block with a hard-edged, edge-to-edge rectangle.
   Here the tint is a rounded plate drawn with a box-shadow SPREAD, so it
   extends past the text on all four sides and keeps its corners — no extra
   element, no negative margins, and nothing shifts. */
@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-article.pg-prose p:hover,
  .pg-root .pg-article.pg-prose li:hover,
  .pg-root .pg-article.pg-prose h1:hover,
  .pg-root .pg-article.pg-prose h2:hover,
  .pg-root .pg-article.pg-prose h3:hover,
  .pg-root .pg-article.pg-prose h4:hover {
    border-radius: 8px;
    background: var(--ab-tint);
    box-shadow: 0 0 0 10px var(--ab-tint);
    transition: background .18s ease, box-shadow .18s ease;
  }
  /* A nested li would otherwise light up together with its parent, because
     `:hover` is true for every ANCESTOR of the pointer. The old fix pointed
     the wrong way: `li:hover > ul > li` blanks the CHILD, and since hovering
     the child makes the parent hover too, the child could never light at all
     — the row you were actually pointing at was the one that stayed dead.
     Blank the ancestor instead, via `:has`. Kept as its own rule below the
     media query so that losing `:has()` costs only this correction. */

  .pg-root .pg-article.pg-prose h2:hover::after {
    background: linear-gradient(90deg,
                rgba(var(--ab-glow), .95) 0%,
                rgba(var(--ab-glow), .45) 30%,
                var(--ab-line) 65%,
                transparent 100%);
  }

  /* The diamond blooms: ring 3px → 6px and the mark scales, on the overshoot
     ease so it settles rather than stopping dead. */
  .pg-root .pg-article.pg-prose ul > li:hover::before {
    transform: rotate(45deg) scale(1.2);
    box-shadow: 0 0 0 6px var(--abl-ring-h), inset 0 1px 0 var(--abl-spec);
  }
  /* Level 2 is hollow at rest — hovering fills it in. */
  .pg-root .pg-article.pg-prose li > ul > li:hover::before {
    background: linear-gradient(135deg, var(--abl-a), var(--abl-b));
    box-shadow: 0 0 0 5px var(--abl-ring-h), inset 0 1px 0 var(--abl-spec);
  }
  /* The chip fills with `--ab-fill-*` — the pair measured for WHITE TEXT
     (4.88:1 / 7.98:1 in both themes). Do not swap in `--abl-*` here: those
     are lightened for dark and drop the numeral below AA. */
  .pg-root .pg-article.pg-prose ol > li:hover::before {
    background: linear-gradient(135deg, var(--ab-fill-1), var(--ab-fill-2));
    color: #fff;
    box-shadow: 0 6px 14px -7px rgba(var(--ab-glow), .85),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: translateY(-1px) scale(1.06);
  }
  /* the connector lights along with the step it leaves */
  .pg-root .pg-article.pg-prose ol > li:hover::after {
    background: linear-gradient(180deg, var(--abl-ring-h), rgba(var(--ab-glow), .08));
  }

  .pg-root .pg-article.pg-prose strong:hover,
  .pg-root .pg-article.pg-prose b:hover {
    background-image: linear-gradient(180deg, transparent 62%, var(--ab-mark-h) 62%);
  }

  /* link underline grows from the leading edge */
  .pg-root .pg-article.pg-prose a { background-size: 0 1.5px; }
  .pg-root .pg-article.pg-prose a:hover { color: var(--ab-2); background-size: 100% 1.5px; }

  .pg-root .pg-article.pg-prose blockquote:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ab-glow), .38);
    box-shadow: 0 18px 34px -22px rgba(var(--ab-glow), .55);
  }
  .pg-root .pg-article.pg-prose blockquote:hover::after {
    color: rgba(var(--ab-glow), .5);
    transform: scale(1.06);
  }

  .pg-root .pg-article.pg-prose tbody tr:hover {
    background: var(--ab-tint);
    box-shadow: inset 3px 0 0 var(--ab-2);
  }

  .pg-root .pg-prose .pg-faq-item:hover {
    border-color: rgba(var(--ab-glow), .32);
    box-shadow: 0 18px 38px -28px rgba(var(--ab-glow), .8);
    transform: translateY(-1px);
  }
  /* The spine previews on hover, so a closed card shows what it will become
     before it is clicked. Half height — the open state is the full stroke. */
  .pg-root .pg-prose .pg-faq-item:not(.open):hover::before { block-size: calc(50% - 16px); }
  .pg-root .pg-prose .pg-faq-item:not(.open):hover .pg-faq-qt { color: var(--ab-2); }
  .pg-root .pg-prose .pg-faq-item:not(.open):hover .pg-faq-mark {
    background:
      linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
      rgba(var(--ab-glow), .18);
    box-shadow: 0 6px 16px -8px rgba(var(--ab-glow), .7);
  }
  .pg-root .pg-prose .pg-faq-item.open:hover .pg-faq-mark { transform: rotate(135deg) scale(1.05); }
}

/* Ancestor de-highlight (see the note in §7). `:has(li:hover)` scores (0,4,2)
   against the (0,4,1) plate rule, so it wins; the marker resets need the same
   treatment or a parent's diamond keeps blooming while you read its child.
   Deliberately OUTSIDE the hover media query — on a touch device `:hover`
   never matches, so these rules simply never fire. */
.pg-root .pg-article.pg-prose li:has(li:hover) { background: transparent; box-shadow: none; }
.pg-root .pg-article.pg-prose ul > li:has(li:hover)::before {
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--abl-ring), inset 0 1px 0 var(--abl-spec);
}
.pg-root .pg-article.pg-prose ol > li:has(li:hover)::before {
  background: var(--ab-tint);
  color: var(--ab-3);
  box-shadow: inset 0 0 0 1px rgba(var(--ab-glow), .18), inset 0 1px 0 var(--abl-spec);
  transform: none;
}

/* Links must stay underlined where hover cannot happen — on touch the grow
   animation never runs, and a bare coloured word is a weak affordance. */
@media (hover: none) {
  .pg-root .pg-article.pg-prose a { background-size: 100% 1.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. FOCUS
   ═══════════════════════════════════════════════════════════════════════════ */
body:not(.admin-shell) .pg-root .pg-article.pg-prose a:focus-visible {
  outline: none;
  border-radius: 5px;
  background-size: 100% 1.5px;
  box-shadow: 0 0 0 3px rgba(var(--ab-glow), .38);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE — type scale keys off the CARD, padding off the viewport
   ═══════════════════════════════════════════════════════════════════════════ */

/* At a genuinely wide measure the line-height opens up a notch. This is the
   compensation for removing the 880px cap — a long line is much easier to
   track back to the next one with more leading. */
@container (min-width: 860px) {
  .pg-root .pg-article.pg-prose p { line-height: 1.86; }
  .pg-root .pg-article.pg-prose li { line-height: 1.84; }
}

@container (max-width: 560px) {
  .pg-root .pg-article.pg-prose h1 { font-size: 25px; }
  .pg-root .pg-article.pg-prose h2 { font-size: 21px; margin-block-start: 32px; }
  .pg-root .pg-article.pg-prose h3 { font-size: 17px; }
  /* Markers step down with the column. Every offset that depends on them is a
     calc() off these two tokens, so the connector stays centred on the chip
     without a second set of numbers to keep in sync. */
  .pg-root .pg-article.pg-prose { --abl-dot: 8px; --abl-num: 21px; }
  .pg-root .pg-article.pg-prose li { padding-inline-start: 26px; }
  .pg-root .pg-article.pg-prose ol > li { padding-inline-start: 32px; }
  .pg-root .pg-article.pg-prose ul > li::before { inset-inline-start: 7px; }
  .pg-root .pg-article.pg-prose blockquote { padding: 18px 18px 18px 48px; font-size: 15.5px; }
  .pg-root .pg-article.pg-prose blockquote::after { font-size: 44px; inset-inline-start: 14px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 767.98px) {
    .pg-root .pg-article.pg-prose h1 { font-size: 25px; }
    .pg-root .pg-article.pg-prose h2 { font-size: 21px; }
  }
}

@media (max-width: 575.98px) {
  .pg-root .pg-article.pg-prose:not(.pg-hist-rendered) { padding: 8px 16px 24px; }
  .pg-root .pg-article.pg-prose { font-size: 15.5px; }
  .pg-root .pg-article.pg-prose p,
  .pg-root .pg-article.pg-prose li { font-size: 15.5px; line-height: 1.75; }
  .pg-root .pg-article.pg-prose li { padding-inline-start: 26px; }
  .pg-root .pg-article.pg-prose ol > li { padding-inline-start: 32px; }
  /* Phone: same step-down as the container query above, kept here too because
     this block is what fires when `container-type` is unsupported. */
  .pg-root .pg-article.pg-prose { --abl-dot: 8px; --abl-num: 21px; }
  .pg-root .pg-article.pg-prose ul > li::before { inset-inline-start: 7px; }
  .pg-root .pg-article.pg-prose th,
  .pg-root .pg-article.pg-prose td { padding: 11px 13px; }
}

/* Touch: the bloom never fires, so the resting ring carries the affordance
   and is opened up instead — the same trade the links make just below. */
@media (hover: none) {
  .pg-root .pg-article.pg-prose ul > li::before {
    box-shadow: 0 0 0 4px var(--abl-ring), inset 0 1px 0 var(--abl-spec);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. RTL
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .pg-root .pg-article.pg-prose blockquote { padding: 20px 60px 20px 24px; }
[dir="rtl"] .pg-root .pg-article.pg-prose blockquote::after { transform: scaleX(-1); }
[dir="rtl"] .pg-root .pg-article.pg-prose h2::after {
  background: linear-gradient(270deg,
              rgba(var(--ab-glow), .75) 0%, rgba(var(--ab-glow), .28) 22%,
              var(--ab-line) 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .pg-root .pg-article.pg-prose tbody tr:hover { box-shadow: inset -3px 0 0 var(--ab-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .pg-root .pg-article.pg-prose {
  --ab-2: #6FA8F7;
  --ab-3: #9CC6FB;
  --ab-glow: 96, 164, 245;
  --ab-surface: #17171A;
  --ab-raise: #1C1C1F;
  --ab-line: rgba(255, 255, 255, .09);
  --ab-line-soft: rgba(255, 255, 255, .07);
  --ab-ink: #F5F5F6;
  --ab-body: #D3D6DC;
  --ab-ink-2: #A0A0A6;
  --ab-tint: rgba(54, 128, 237, .13);
  --ab-tint-2: rgba(54, 128, 237, .2);
  /* Still yellow, but DEEPER — and the reason is measured, not taste. The band
     sits behind the text, so in light mode dark ink lands on it (14.72:1) while
     here the ink is #F5F5F6. The light value over #17171A resolves to #B9AA43,
     which puts that ink at 2.16:1 — the emphasised words go unreadable exactly
     where the marker crosses them. Deepening the same hue to .34 alpha gives
     #665A11 at 6.33:1: unmistakably yellow, and legible.
     The hover step is capped for the same reason: .46 measures 4.42:1 and
     fails, .42 measures 4.97:1. That is the ceiling — do not raise it, and do
     not "restore" the light value here. */
  --ab-mark: rgba(255, 221, 0, .34);
  --ab-mark-h: rgba(255, 221, 0, .42);
  color: var(--ab-body);
}
body.theme-dark .pg-root .pg-article.pg-prose p,
body.theme-dark .pg-root .pg-article.pg-prose li,
body.theme-dark .pg-root .pg-article.pg-prose td,
body.theme-dark .pg-root .pg-article.pg-prose em,
body.theme-dark .pg-root .pg-article.pg-prose blockquote { color: var(--ab-body); }
body.theme-dark .pg-root .pg-article.pg-prose h1,
body.theme-dark .pg-root .pg-article.pg-prose h2,
body.theme-dark .pg-root .pg-article.pg-prose h3,
body.theme-dark .pg-root .pg-article.pg-prose h4,
body.theme-dark .pg-root .pg-article.pg-prose strong,
body.theme-dark .pg-root .pg-article.pg-prose b { color: var(--ab-ink); }
body.theme-dark .pg-root .pg-article.pg-prose h5,
body.theme-dark .pg-root .pg-article.pg-prose h6,
body.theme-dark .pg-root .pg-article.pg-prose a,
body.theme-dark .pg-root .pg-article.pg-prose blockquote cite,
body.theme-dark .pg-root .pg-article.pg-prose th { color: var(--ab-3); }
body:not(.admin-shell).theme-dark .pg-root .pg-article.pg-prose code:not(pre code) {
  background: var(--ab-tint);
  border-color: rgba(var(--ab-glow), .26);
  color: var(--ab-3);
}
body.theme-dark .pg-root .pg-article.pg-prose blockquote {
  background: linear-gradient(135deg, rgba(var(--ab-glow), .13), rgba(var(--ab-glow), .05));
  border-color: rgba(var(--ab-glow), .24);
  box-shadow: none;
}
body.theme-dark .pg-root .pg-article.pg-prose .pg-table-wrap {
  background-color: var(--ab-surface);
  border-color: var(--ab-line);
  background-image:
    linear-gradient(to right, var(--ab-surface), rgba(23, 23, 26, 0)),
    linear-gradient(to left,  var(--ab-surface), rgba(23, 23, 26, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
body.theme-dark .pg-root .pg-article.pg-prose tbody tr:nth-child(even) { background: var(--ab-raise); }
body.theme-dark .pg-root .pg-article.pg-prose hr::after { box-shadow: 0 0 0 4px var(--ab-surface); }
/* Dark mode is mostly token-driven (--ab-surface / --ab-raise / --ab-line are
   redefined above), so these only restate what the light block sets literally
   and would otherwise leak through. */
/* Dark mode is mostly token-driven (--ab-surface / --ab-raise / --ab-line are
   redefined above); these only restate what the light block states literally. */
body.theme-dark .pg-root .pg-prose .pg-faq-item { background: var(--ab-surface); border-color: var(--ab-line); }
body.theme-dark .pg-root .pg-prose .pg-faq-item.open {
  border-color: rgba(var(--ab-glow), .34);
  background: linear-gradient(180deg, var(--ab-tint) 0%, var(--ab-surface) 42%);
}
body.theme-dark .pg-root .pg-prose .pg-faq-q { background: transparent; color: var(--ab-ink); }
body.theme-dark .pg-root .pg-prose .pg-faq-qt { color: var(--ab-ink); }
body.theme-dark .pg-root .pg-prose .pg-faq-item.open .pg-faq-qt { color: var(--ab-3); }
body.theme-dark .pg-root .pg-prose .pg-faq-ain,
body.theme-dark .pg-root .pg-prose .pg-faq-a p { color: var(--ab-ink-2); }
body.theme-dark .pg-root .pg-prose .pg-faq-a a { color: var(--ab-3); }
/* White ink on the brand fill reads in both themes; only the glow is softened
   so it does not bloom against the near-black surface. */
body.theme-dark .pg-root .pg-prose .pg-faq-item.open .pg-faq-mark {
  box-shadow: 0 8px 20px -10px rgba(var(--ab-glow), .75);
}

@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-article.pg-prose tbody tr:hover {
    background: var(--ab-tint);
    box-shadow: inset 3px 0 0 var(--ab-2);
  }
  body.theme-dark .pg-root .pg-article.pg-prose blockquote:hover {
    border-color: rgba(var(--ab-glow), .4);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .8);
  }
  body.theme-dark .pg-root .pg-article.pg-prose a:hover { color: var(--ab-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-article.pg-prose *,
  .pg-root .pg-article.pg-prose *::before,
  .pg-root .pg-article.pg-prose *::after { transition-duration: .01ms !important; }
  .pg-root .pg-article.pg-prose blockquote:hover,
  .pg-root .pg-article.pg-prose ol > li:hover::before,
  .pg-root .pg-article.pg-prose blockquote:hover::after { transform: none; }
  /* The unordered marker is a SQUARE turned 45°, so its resting state is a
     transform. `transform: none` here would quietly un-rotate every bullet
     into a square for anyone with reduced motion on — hold the rotation and
     drop only the scale. */
  .pg-root .pg-article.pg-prose ul > li:hover::before { transform: rotate(45deg); }
  .pg-root .pg-article.pg-prose a { background-size: 100% 1.5px; }
}