/* ══════════════════════════════════════════════════════════════════════════
   recode-v3-theme.css — the v3 dark theme for the ~140 INTERNAL pages.

   /firehouse · /diagnostic · /faq · /architecture · /news/* · /explain/*
   /memos/* · /frameworks/* · /models/* · /newsletter.html

   WHY A BRIDGE AND NOT A REWRITE
   Those pages get their layout from two legacy stylesheets — recode-ds.css
   (the light Modernist system) and recodeai.css (the older warm one, via
   recode-theme-bridge.css). Both are token-driven at :root, and both use the
   SAME variable names as each other for the nav. So the fastest honest route
   to one look is to redefine the tokens rather than fork 140 pages of layout.
   That is exactly the move recode-theme-bridge.css already made to unify the
   two palettes — see PLAN-recodeai-rebuild.md §8. This file is its successor
   and must load AFTER every sheet it retones.

   The home page and the three v3 routes do NOT load this. They load
   assets/recode-v3.css, which is the design system itself. This file only
   carries that system's tokens across to pages built on the old ones. Values
   here are copied from recode-v3.css PART 1 — keep them in step.

   Structure:
     PART 1  token overrides (both vocabularies)
     PART 2  the things tokens cannot reach — hardcoded literals, shadows,
             radii, and type
     PART 3  the grouped nav (assets/_nav.html + recode-nav.css)
     PART 4  page components — cards, feeds, articles, tags, forms
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PART 1 — TOKENS
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── the v3 palette, verbatim from recode-v3.css PART 1 ─────────────── */
  --v3-base:       oklch(0.145 0.006 255);
  --v3-tint:       oklch(0.165 0.006 255);
  --v3-panel:      oklch(0.175 0.006 255);
  --v3-hover:      oklch(0.19 0.006 255);
  --v3-text:       oklch(0.96 0.004 255);
  --v3-bright:     oklch(0.92 0.005 255);
  --v3-strong:     oklch(0.90 0.005 255);
  --v3-body:       oklch(0.76 0.008 255);
  --v3-muted:      oklch(0.70 0.008 255);
  --v3-dim:        oklch(0.62 0.01 255);
  --v3-faint:      oklch(0.55 0.01 255);
  --v3-fainter:    oklch(0.52 0.01 255);
  --v3-disclaimer: oklch(0.48 0.01 255);
  --v3-accent:     oklch(0.80 0.13 86);
  --v3-accent-55:  oklch(0.80 0.13 86 / 0.55);
  --v3-accent-45:  oklch(0.80 0.13 86 / 0.45);
  --v3-accent-28:  oklch(0.80 0.13 86 / 0.28);
  --v3-line:       oklch(1 0 0 / 0.07);
  --v3-line-4:     oklch(1 0 0 / 0.10);
  --v3-border:     oklch(1 0 0 / 0.14);
  --v3-border-str: oklch(1 0 0 / 0.22);
  --v3-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --v3-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --v3-serif: Newsreader, Georgia, "Times New Roman", serif;

  /* ── vocabulary A: recode-ds.css (v2 pages) ─────────────────────────── */
  --color-bg:      var(--v3-base);
  --color-surface: var(--v3-tint);
  --color-text:    var(--v3-text);
  --color-accent:  var(--v3-accent);
  --color-accent-2: var(--v3-accent);        /* one accent only */
  --color-divider: var(--v3-line-4);
  --text-dim:      var(--v3-dim);

  /* The neutral ramp is inverted: step 100 was the lightest paper tone and
     is now the darkest ground, so anything that used 100 as a background and
     900 as ink keeps its contrast direction instead of flipping to mud. */
  --color-neutral-100: oklch(0.165 0.006 255);
  --color-neutral-200: oklch(0.19 0.006 255);
  --color-neutral-300: oklch(0.24 0.008 255);
  --color-neutral-400: oklch(0.32 0.008 255);
  --color-neutral-500: oklch(0.45 0.01 255);
  --color-neutral-600: oklch(0.58 0.01 255);
  --color-neutral-700: oklch(0.70 0.008 255);
  --color-neutral-800: oklch(0.84 0.006 255);
  --color-neutral-900: oklch(0.96 0.004 255);

  /* The accent ramp collapses onto the one gold. Steps stay ordered so any
     rule picking a "light" or "dark" step still gets a sane value. */
  --color-accent-100: oklch(0.28 0.04 86);
  --color-accent-200: oklch(0.36 0.06 86);
  --color-accent-300: oklch(0.46 0.08 86);
  --color-accent-400: oklch(0.58 0.10 86);
  --color-accent-500: oklch(0.70 0.12 86);
  --color-accent-600: oklch(0.80 0.13 86);
  --color-accent-700: oklch(0.86 0.12 86);
  --color-accent-800: oklch(0.91 0.09 86);
  --color-accent-900: oklch(0.96 0.05 86);
  --color-accent-2-100: var(--color-accent-100);
  --color-accent-2-200: var(--color-accent-200);
  --color-accent-2-300: var(--color-accent-300);
  --color-accent-2-400: var(--color-accent-400);
  --color-accent-2-500: var(--color-accent-500);
  --color-accent-2-600: var(--color-accent-600);
  --color-accent-2-700: var(--color-accent-700);
  --color-accent-2-800: var(--color-accent-800);
  --color-accent-2-900: var(--color-accent-900);

  --font-heading: var(--v3-sans);
  --font-heading-weight: 500;
  --font-body: var(--v3-sans);
  --mono: var(--v3-mono);

  /* Radius 0 everywhere, no shadows at all — depth is hairlines and
     background steps. --radius-pill is kept ONLY because recode-install.css
     draws the phone previews' in-app pills with it, and those depict the real
     app. Site chrome must not use it. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --page-max: 1200px;

  /* ── vocabulary B: recodeai.css + recode-theme-bridge.css (legacy) ──── */
  --bg:               var(--v3-base);
  --bg-elevated:      var(--v3-tint);
  --bg-card:          var(--v3-base);
  --bg-card-hover:    var(--v3-hover);
  --bg-dark:          var(--v3-tint);
  --bg-dark-elevated: var(--v3-panel);

  --text:               var(--v3-text);
  --text-muted:         var(--v3-muted);
  --text-on-dark:       var(--v3-text);
  --text-muted-on-dark: var(--v3-muted);

  --accent:          var(--v3-accent);
  --accent-hover:    oklch(0.86 0.12 86);
  --accent-warm:     var(--v3-accent);
  --accent-warm-dim: var(--v3-accent-28);
  --accent-dim:      oklch(0.80 0.13 86 / 0.12);
  --accent-glow:     oklch(0.80 0.13 86 / 0.07);

  --border:        var(--v3-line-4);
  --border-hover:  var(--v3-border);
  --border-accent: var(--v3-accent-45);
  --border-dark:   var(--v3-line);

  /* Priority is carried by the agent's own emoji, not by a second hue.
     These three differ in value, not colour — see recode-v3.css PART 5. */
  --breaking:    var(--v3-accent);
  --notable:     var(--v3-body);
  --interesting: var(--v3-fainter);
  --teal:        var(--v3-accent);

  /* recode-theme-bridge.css reads `var(--accent-700, #ae1800)` for every
     eyebrow and label, but --accent-700 is only ever defined in
     recode-ds.css — which the legacy pages do not load. So on ~120 pages that
     fallback was live and every eyebrow rendered dark red: an undefined token
     quietly introducing a second hue. Define it. */
  --accent-700: oklch(0.86 0.12 86);

  --serif: var(--v3-sans);
  --sans:  var(--v3-sans);
  --max-w: 1200px;
  --r: 0px;
  --r-sm: 0px;
  /* recode-theme-bridge.css pins .filter-pill / .tag / .article-tag to
     `border-radius: var(--r-pill) !important`, which the un-!important global
     reset in PART 2 cannot beat. Zeroing the token beats it without an
     escalation war. --radius-pill (the recode-ds vocabulary) is deliberately
     NOT zeroed: recode-install.css draws the phone previews' in-app pills
     with it, and those depict the real app. */
  --r-pill: 0px;
}

/* ══════════════════════════════════════════════════════════════════════
   PART 2 — WHAT TOKENS CANNOT REACH
   ~110 literal hex/rgba values survive across the three legacy sheets.
   Rather than chase each selector, neutralise them by category.
   ══════════════════════════════════════════════════════════════════════ */
html { background: var(--v3-base); }
body {
  background: var(--v3-base);
  color: var(--v3-text);
  font-family: var(--v3-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--v3-accent); color: var(--v3-base); }

/* No shadows at all. The legacy sheets paint ink-tinted shadows for a light
   ground; on this ground they read as smudges. */
*, *::before, *::after { box-shadow: none !important; }

/* Some of those suppressed shadows WERE focus rings. Restore a real one with
   outline, which the rule above cannot touch — a keyboard user losing focus
   visibility is not an acceptable cost of removing decoration. */
:focus-visible {
  outline: 2px solid var(--v3-accent);
  outline-offset: 2px;
}

/* Radius 0 for site chrome. The phone previews are exempt — they are a
   picture of the app, which does have pills. */
*:not(.phone):not(.phone *):not(.px-bar):not(.px-bar *):not(.px-drop):not(.px-badge div) {
  border-radius: 0;
}
.phone { border-radius: 30px; }

/* Headings carry the display voice: 500 weight, tight tracking, uppercase is
   applied per-component rather than globally so body prose is untouched. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--v3-sans);
  font-weight: 500;
  letter-spacing: -0.03em;
}

a { color: var(--v3-text); }
a:hover { color: var(--v3-accent); }

hr, .rule { border: 0; border-top: 1px solid var(--v3-line); background: none; height: 0; }

img, video { background: var(--v3-tint); }

::placeholder { color: var(--v3-fainter); }

input, textarea, select {
  background: transparent;
  color: var(--v3-text);
  border-color: var(--v3-border);
}

/* ══════════════════════════════════════════════════════════════════════
   PART 3 — THE HEADER (moved out)
   These pages used to carry the grouped .rnav header while the v3 routes
   carried a different one — the whole site re-coloured but navigating in two
   different models. assets/_nav.html now holds the SAME markup as the v3
   header and assets/recode-v3-shell.css styles both. Nothing left to do here.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PART 4 — PAGE COMPONENTS
   ══════════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary {
  font-family: var(--v3-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 28px; border: 1px solid transparent;
  /* See the note on .v3-btn — a <button> with only an outline variant picks
     up the UA's grey ground otherwise. */
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary { background: var(--v3-text); color: var(--v3-base); border-color: transparent; }
.btn-primary:hover { background: var(--v3-accent); color: var(--v3-base); }
.btn-secondary { background: none; color: var(--v3-text); border-color: var(--v3-border-str); }
.btn-secondary:hover { border-color: var(--v3-accent); color: var(--v3-accent); }

/* ── Tags, chips, filters, pills ─────────────────────────────────────── */
.tag, .filter, .pill, .chip, .cat, .badge {
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--v3-border); color: var(--v3-body);
  background: none;
}
.tag-outline, .tag-neutral { border-color: var(--v3-border); color: var(--v3-body); }
.tag:hover, .filter:hover, .cat:hover { border-color: var(--v3-accent); color: var(--v3-accent); background: none; }

/* The selected filter is a FILLED accent chip with near-black text — the same
   treatment as a filled button in this system. Setting only the border and
   text here would leave the legacy `background: var(--color-accent)` in place
   and paint gold text on a gold ground. */
.filter[aria-pressed="true"], .filter.is-active,
.filter-pill.active, .news-filters button.active, .filter-bar button.active {
  background: var(--v3-accent);
  border-color: var(--v3-accent);
  color: var(--v3-base);
}

/* ── Cards and surfaces ──────────────────────────────────────────────── */
.card, .panel, .box, .tile,
.story-card, .explainer-card, .memo-card, .framework-card, .model-card {
  background: var(--v3-base);
  border: 1px solid var(--v3-line-4);
}
.card:hover, .story-card:hover, .explainer-card:hover { background: var(--v3-hover); }

/* ── Section furniture ───────────────────────────────────────────────── */
/* Belt and braces for the same eyebrows, in case another sheet reaches them
   through a path the token fix does not cover. */
.article-label, .memo-eyebrow, .elabel, .article-cta-label {
  color: var(--v3-accent) !important;
  background: oklch(0.80 0.13 86 / 0.10);
  border-color: var(--v3-accent-45);
}

.section-label, .sec-meta, .sec-note, .band-num, .kicker, .eyebrow, .hero-kicker {
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-accent);
}
/* Page-level display titles take the v3 display voice. Scoped to the four hub
   pages that carry .page-title — generated news and explainer headlines are
   bare <h1> prose and must stay sentence case. */
.page-title {
  font-family: var(--v3-sans); font-weight: 500;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--v3-text); line-height: 0.98;
}

.section-title, .sec-title, .band-title {
  font-family: var(--v3-sans); font-weight: 500;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--v3-text);
}
.section-desc, .sec-lede, .band-body, .lede { color: var(--v3-muted); }

/* ── Long-form article typography ────────────────────────────────────
   News stories, explainers, memos, frameworks and mental models are prose.
   They stay sentence case in the sans at reading size — the mono/uppercase
   instrument voice is for labels, never for paragraphs. */
article p, .prose p, .body p, .memo-body p, .explainer-body p {
  color: var(--v3-body);
  line-height: 1.7;
}
article h2, .prose h2 { color: var(--v3-text); }
article h3, .prose h3 { color: var(--v3-text); }
article a, .prose a { color: var(--v3-accent); text-decoration: none; border-bottom: 1px solid var(--v3-accent-45); }
article a:hover, .prose a:hover { border-bottom-color: var(--v3-accent); }
blockquote {
  border-left: 1px solid var(--v3-accent-45);
  color: var(--v3-strong); background: none;
}
code, pre, kbd, samp { font-family: var(--v3-mono); }
code { background: var(--v3-panel); color: var(--v3-bright); }
pre { background: var(--v3-panel); border: 1px solid var(--v3-line-4); }
table { border-color: var(--v3-line-4); }
th { color: var(--v3-faint); font-family: var(--v3-mono); font-weight: 400;
     letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }
td { border-color: var(--v3-line); color: var(--v3-body); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer, footer {
  border-top: 1px solid var(--v3-line-4);
  background: var(--v3-tint);
  color: var(--v3-faint);
}
.footer-links a { color: oklch(0.80 0.008 255); }
.footer-links a:hover { color: var(--v3-accent); }

/* ── Install layer (shared with the v3 pages) ────────────────────────── */
.inst-scrim { background: oklch(0.10 0.006 255 / 0.72); }
.inst-panel, .inst-bar { background: var(--v3-tint); border-color: var(--v3-line-4); color: var(--v3-text); }
.inst-note, .inst-kicker { color: var(--v3-faint); }
.inst-bar-txt span { color: var(--v3-muted); }
.phone { border: 1px solid var(--v3-border); background: var(--v3-tint); }
.phone-in { background: var(--v3-tint); }
.phone-notch { background: var(--v3-panel); }
.px-card, .px-search { background: var(--v3-panel); }
.px-search b { color: var(--v3-base); }
.px-chk { border: 1px solid var(--v3-border); }
.px-chk.on { background: var(--v3-accent); border-color: var(--v3-accent); }
.px-heat i { background: oklch(0.80 0.13 86 / 0.75); }
.px-heat i.off { background: none; border: 1px solid var(--v3-border); }
.px-badge div { background: var(--v3-panel); border-color: var(--v3-border); }
.px-btn { background: var(--v3-text); color: var(--v3-base); }
.px-xp, .xp { color: var(--v3-accent); }
.px-nav { border-top: 1px solid var(--v3-line-4); color: var(--v3-faint); }
.px-nav .on { color: var(--v3-accent); }

/* ══════════════════════════════════════════════════════════════════════
   PART 5 — THE GENERATED PAGES' INLINE <style>
   news/* and explain/* each ship a ~8KB inline stylesheet from
   scripts/build-news.js. It declares its own :root (which this file's :root
   overrides, being later in the head) plus ~22 selectors carrying literal
   hex/rgba values that no token can reach. Those are handled here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Headings ─────────────────────────────────────────────────────────
   The legacy palette used --bg-dark (#1C2B2B) for BOTH a dark band and
   heading ink — the name describes one use, the value served two. Any theme
   that remaps it to a real surface colour turns every headline into
   near-invisible text on its own background, which is exactly what happened
   here. Set these explicitly rather than trusting the token. */
.ah h1, .lead h1, .bhero h1,
.exhead h2, .section-title, .sec-title,
.post h3, .hs h3, .ncard h3,
.excard h4, .hl h4, .scard h4, .firehose-card h4,
/* the same pattern again, from assets/recodeai.css */
.article-hero h1, .memo-hero h1,
.article-body h2, .article-body h3,
.highlight-box h4, .entry-card h4 {
  color: var(--v3-text) !important;
}

/* Accent-filled controls whose label was also painted with a surface token. */
.nav-subscribe, .cta-btn, .sub-btn {
  color: var(--v3-base) !important;
}

/* nav.a — the news article's own fixed header — is one of the duplicates
   hidden in PART 6. It is still retoned here so that any page which somehow
   renders WITHOUT the grouped nav does not show a light bar on a dark page. */
nav.a {
  background: oklch(0.165 0.006 255 / 0.9) !important;
  border-bottom: 1px solid var(--v3-line);
  color: var(--v3-body);
}
nav.a a { color: var(--v3-body); }
nav.a a:hover { color: var(--v3-accent); }

/* ── Anything filled with the accent needs near-black text, not white ──
   #fff on this gold fails contrast; the base tone is the system's answer
   (see the filled-button rule in recode-v3.css). */
.acta a, .btn-p, .sub-btn, .filter-pill.on, nav.a .sub {
  background: var(--v3-accent) !important;
  color: var(--v3-base) !important;
  border-color: var(--v3-accent) !important;
}
.acta a:hover, .btn-p:hover, .sub-btn:hover, nav.a .sub:hover {
  background: var(--v3-text) !important;
  border-color: var(--v3-text) !important;
}
::selection { background: var(--v3-accent); color: var(--v3-base); }

/* ── Card hovers were an ink tint over paper; invert to a light lift ─── */
.excard:hover, .ncard:hover, .scard:hover,
.firehose-card:hover, .pillar:hover {
  background: var(--v3-hover) !important;
}

/* ── Decorative coral glows behind hero type ──────────────────────────
   These are 420/600px radial-gradient blooms. This system allows no gradients
   beyond the two functional ones (the hero vignette and the noise-panel fade)
   and no second hue, so they go entirely — depth here is hairlines and
   background steps. Recolouring them is NOT the fix: replacing a radial
   gradient with a flat colour leaves a hard-edged square block, which is
   worse than either the original or nothing. */
.ah::before, .bhero::before, .article-hero::before { display: none !important; }

/* ── Gradient thumbnails ──────────────────────────────────────────────
   Four brand-gradient variants. This system has no gradients beyond the two
   functional ones, so they flatten to the same striped placeholder the v3
   pages use for missing imagery — still four distinguishable slots, no new
   hue. */
.thumb, .thumb.t-coral, .thumb.t-teal, .thumb.t-dark, .thumb.t-warm {
  background: repeating-linear-gradient(135deg,
    oklch(0.22 0.008 255) 0 6px, oklch(0.19 0.006 255) 6px 12px) !important;
  border: 1px solid var(--v3-line-4);
  color: var(--v3-faint);
}

/* ── The "breaking" pulse ring ───────────────────────────────────────── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 oklch(0.80 0.13 86 / 0.5); }
  70%  { box-shadow: 0 0 0 6px oklch(0.80 0.13 86 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.80 0.13 86 / 0); }
}

/* ══════════════════════════════════════════════════════════════════════
   PART 6 — HEADERS AND FOOTERS, EVERYWHERE
   The single worst offender across the site: assets/recodeai.css styles the
   BARE `nav` element with a hardcoded `rgba(253,247,238,0.88)`. That selector
   matches the grouped header too (.rnav IS a <nav>), so on every page loading
   that sheet the header repainted itself light on top of the dark wrapper —
   regardless of any token. Bare-element selectors with literal colours cannot
   be reached by retoning, so they are neutralised here by name.
   ══════════════════════════════════════════════════════════════════════ */

/* recodeai.css styles the BARE `nav` element as a whole fixed page header:
     nav { position:fixed; top:0; height:64px; background:rgba(253,247,238,.88); ... }
   .rnav is a <nav>, so the grouped header inherited ALL of that — a light
   background, a forced 64px height, and position:fixed inside its own sticky
   wrapper. That is why the header looked broken on every page loading that
   sheet. Undo it on .rnav specifically; the wrapper does the positioning. */
.rnav {
  position: static !important;
  height: auto !important;
  min-height: 72px;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
}

/* The grouped header owns its surface on the WRAPPER, so the blur has
   something to sit on. */
/* One header per page. The legacy pages shipped their own fixed header as
   well; inject-nav.js strips it, and these rules catch any that slip through.
   Retargeted from .rnav-wrap to .v3-header when the two headers merged. */
.v3-header ~ nav,
.v3-header ~ .mast,
.v3-header ~ .util { display: none !important; }

/* Legacy in-page headers that inject-nav.js does not remove. */
.mast, .catnav, .util {
  background: var(--v3-tint) !important;
  border-color: var(--v3-line-4) !important;
  color: var(--v3-body) !important;
}
.mast a, .catnav a, .util a { color: var(--v3-body) !important; }
.mast a:hover, .catnav a:hover, .util a:hover { color: var(--v3-accent) !important; }

/* ── Footers ─────────────────────────────────────────────────────────
   Token-driven in the legacy sheets, but they set `!important`, so matching
   it is the only way to land. One tinted band, one hairline above it. */
footer, .site-footer, .foot-top, .foot-bot, .memo-band {
  background: var(--v3-tint) !important;
  color: var(--v3-muted) !important;
  border-color: var(--v3-line-4) !important;
}
footer { border-top: 1px solid var(--v3-line-4) !important; }
.foot-bot { border-top: 1px solid var(--v3-line) !important; }
footer a, .site-footer a, .fcol a, .footer-links a, .foot-bot a {
  color: oklch(0.80 0.008 255) !important;
}
footer a:hover, .site-footer a:hover, .fcol a:hover,
.footer-links a:hover, .foot-bot a:hover { color: var(--v3-accent) !important; }
.foot-brand .brand, .memo-band .sec-title { color: var(--v3-text) !important; }
footer h3, footer h4, .fcol strong, .foot-top strong { color: var(--v3-text) !important; }

/* ── The film-grain overlay ──────────────────────────────────────────
   recodeai.css paints a fixed full-viewport SVG noise texture at z-index
   9999. It was tuned for a warm paper ground; over this one it reads as
   dirt on the screen, and it sits above every element on the page. This
   system's surfaces are flat. */
body::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}