/* ==========================================================================
   Rolling Fun — shared system
   Cypherpunk, kept quiet: a warm off-black "ciphertext" canvas, bone type,
   paper "plaintext" chapters for reading, and Rolling Fun's own lime green as
   the one signal colour, used sparingly. Mona Sans for everything people read
   (labels and buttons included, in sentence case); Fragment Mono only for
   hashes and other machine strings. Hairlines, section indices and real numbers do the
   decorating.
   ========================================================================== */

:root {
  /* Ciphertext (default, dark) */
  --bg: #0c0c0b;
  --bg-2: #141413;
  --bg-3: #1c1c1a;
  --ink: #edebe4;
  --muted: #a3a199;      /* 7.6:1 on --bg */
  --dim: #85837c;        /* 5.2:1 on --bg, 4.5:1 on --bg-3 */
  --line: rgba(237, 235, 228, 0.12);
  --line-2: rgba(237, 235, 228, 0.22);

  /* Plaintext (paper chapters) */
  --paper: #edebe4;
  --paper-2: #e3e1d9;
  --paper-ink: #0c0c0b;
  --paper-muted: #5a5852; /* 6.4:1 on --paper */
  --paper-line: rgba(12, 12, 11, 0.14);

  /* Signal: Rolling Fun's brand green (their theme accent), for state and the one thing that matters on screen */
  --signal: #84c02e;      /* 8.9:1 on --bg; on paper use --signal-ink */
  --signal-ink: #3f6312;  /* 5.9:1 on --paper, for text and marks on paper */
  --signal-rgb: 132, 192, 46;

  --sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --w-display: 340;
  --w-ui: 400;

  --pad: clamp(20px, 4vw, 64px);
  --gap: clamp(12px, 1.6vw, 24px);
  --sec: clamp(96px, 11vw, 176px);
  --max: 1440px;
  --nav-h: 64px;

  --r-xs: 2px;
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 14px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);

  /* The Rolling Fun mark (their own white PNG) is used as a mask so it can take any colour. */
  --mark: url("https://images.squarespace-cdn.com/content/v1/6384e7d617ae0f4557aa962f/1776d842-543d-4038-856d-0766d80f11dd/Rolling+Fun+white+logo.png?format=300w");
}

/* Paper chapters swap the tokens, so every component adapts without variants. */
.plain {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: #d9d7cf;
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --dim: #64625c;        /* 5.1:1 on paper, 4.6:1 on --paper-2 */
  --line: var(--paper-line);
  --line-2: rgba(12, 12, 11, 0.26);
  --signal: var(--signal-ink);
  --signal-rgb: 63, 99, 18;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: var(--w-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--signal); color: #0c0c0b; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-xs); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 500;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }

/* Lenis (from lenis/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Film grain over everything, very faint. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 300;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.motion body::after { animation: grain 1s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-1%, 3%); }
  80% { transform: translate(4%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec { position: relative; padding: var(--sec) 0; }
.sec + .sec:not(.plain):not(.flush) { padding-top: 0; }
.sec.plain + .sec:not(.plain) { padding-top: var(--sec); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Section index: "§ 02 — Portfolio" on the left, real metadata on the right. */
.index {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(40px, 6vw, 88px);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--muted);
}
.index b { font-weight: 450; color: var(--ink); }
.index__meta { text-align: right; }

/* ---------- Type ---------- */

/* Labels are quiet sentence-case sans. (Uppercase, letter-spaced mono labels read as generated.) */
.eyebrow,
.mono-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--muted);
}
.mono { font-family: var(--mono); font-feature-settings: "zero" 1; }
/* Figures: the sans with tabular numerals (how serious financial sites set numbers). */
.num { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.hash { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0; color: var(--muted); }

.display {
  font-size: clamp(46px, 7.2vw, 124px);
  font-weight: var(--w-display);
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.h1 {
  font-size: clamp(42px, 5.6vw, 96px);
  font-weight: var(--w-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(32px, 3.9vw, 62px);
  font-weight: var(--w-display);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(20px, 1.65vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.lede {
  max-width: 34em;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-wrap: pretty;
}
.body { max-width: 38em; font-size: 16px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.body p + p { margin-top: 1em; }
.tone { color: var(--muted); }
.ink { color: var(--ink); }
.signal { color: var(--signal); }
.plain .signal { color: var(--signal-ink); }

/* ---------- Links & buttons ---------- */

.link {
  position: relative;
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease), color 0.25s ease;
}
@media (hover: hover) {
  .link:hover { background-size: 0% 1px; background-position: 100% 100%; }
}
.link--quiet { background-size: 0% 1px; background-position: 100% 100%; }
@media (hover: hover) {
  .link--quiet:hover { background-size: 100% 1px; background-position: 0 100%; }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn .arrow { display: inline-block; transition: transform 0.45s var(--ease); }
@media (hover: hover) {
  .btn:hover .arrow { transform: translate3d(3px, 0, 0); }
}
/* Primary: bone fill; a Rolling Fun green plate sweeps in from the left on hover. */
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease);
}
@media (hover: hover) {
  .btn--primary:hover { color: #0c0c0b; }
  .btn--primary:hover::before { transform: scaleX(1); }
}
.btn--ghost { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
@media (hover: hover) {
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn::after { content: ""; position: absolute; inset: -4px 0; } /* hit area */

/* A small square-cornered tag for metadata. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}
.tag--signal { color: var(--signal); box-shadow: inset 0 0 0 1px currentColor; }

/* The Rolling Fun mark, drawn from their logo file. */
.mark {
  display: inline-block;
  width: 28px;
  aspect-ratio: 500 / 476;
  background-color: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  color: var(--ink);
  transition: transform 0.6s var(--ease);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 12, 11, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.nav.is-solid::before { opacity: 1; }
.nav.is-hidden { transform: translate3d(0, -100%, 0); }
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav__brand .mark { width: 24px; transform-origin: 52.44% 50%; transition: transform 0.9s var(--ease); } /* the logo's ring sits right of centre in its file */
@media (hover: hover) {
  .nav__brand:hover .mark { transform: rotate(-360deg); }
}
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  position: relative;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.nav__links a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--signal);
  transform: scale(0);
  transition: transform 0.4s var(--ease);
}
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::before { transform: none; }
@media (hover: hover) {
  .nav__links a:hover { color: var(--ink); }
}
.nav__aside { display: flex; align-items: center; gap: 10px; }
.nav__menu { display: none; }

@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
}
@media (max-width: 479px) {
  .nav__aside .btn--primary { display: none; }
}

/* Full-screen menu (below 1024px) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-wipe), visibility 0s linear 0.7s;
  overflow-y: auto;
}
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.7s var(--ease-wipe), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); flex-shrink: 0; }
.menu__nav { margin-top: 24px; }
.menu__nav li { border-bottom: 1px solid var(--line); }
.menu__nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.menu__nav a span { font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.menu__nav a[aria-current="page"] span { color: var(--signal); }
.menu__foot { display: grid; gap: 12px; margin-top: auto; padding-top: 32px; }
.menu__foot .btn { width: 100%; }
.motion .menu__nav li { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.5s ease, transform 0.8s var(--ease); }
.motion .menu.is-open .menu__nav li { opacity: 1; transform: none; }
.motion .menu.is-open .menu__nav li:nth-child(2) { transition-delay: 0.05s; }
.motion .menu.is-open .menu__nav li:nth-child(3) { transition-delay: 0.1s; }
.motion .menu.is-open .menu__nav li:nth-child(4) { transition-delay: 0.15s; }
.motion .menu.is-open .menu__nav li:nth-child(5) { transition-delay: 0.2s; }
.motion .menu.is-open .menu__nav li:nth-child(6) { transition-delay: 0.25s; }
.motion .menu.is-open .menu__nav li:nth-child(7) { transition-delay: 0.3s; }
html.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .menu { display: none; } }

/* Touch screens: every nav and footer control gets a 44px target. */
@media (pointer: coarse) {
  .nav__brand { min-height: 44px; }
  .nav__aside .btn--sm, .menu__top .btn--sm { min-height: 44px; }
  .foot__cols a, .foot__top { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__cols li + li { margin-top: 0; }
}

/* ---------- Page head (inner pages) ---------- */

.phead { padding: calc(var(--nav-h) + clamp(64px, 10vw, 160px)) 0 clamp(56px, 7vw, 112px); }
.phead__crumb { margin-bottom: clamp(28px, 4vw, 48px); }
.phead__crumb a { color: var(--muted); transition: color 0.25s ease; }
@media (hover: hover) { .phead__crumb a:hover { color: var(--ink); } }
.phead .lede { margin-top: clamp(24px, 3vw, 36px); }

/* ---------- Data table (fund terms etc.) ---------- */

.dl { border-top: 1px solid var(--line); }
.dl__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gap);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.dl__row dt { font-size: 14px; color: var(--muted); padding-top: 2px; }
.dl__row dd { font-size: 16px; line-height: 1.45; }

/* ---------- FAQ disclosure ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .num { font-size: 14px; color: var(--muted); }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px;
  color: var(--muted);
  transition: transform 0.45s var(--ease), color 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--signal); }
.faq__a { padding: 0 0 26px; }
.faq__a .body { max-width: 44em; }
@media (min-width: 761px) { .faq__a { padding-left: 52px; } }

/* ---------- CTA band ---------- */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(40px, 7vw, 112px) clamp(24px, 5vw, 80px);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Footer ---------- */

.foot { padding: clamp(80px, 10vw, 140px) 0 max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot__lead { display: grid; gap: 28px; }
.foot__mail {
  font-size: clamp(36px, 6.4vw, 108px);
  font-weight: var(--w-display);
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}
.foot__mail a { background-size: 0% 2px; }
@media (hover: hover) { .foot__mail a:hover { background-size: 100% 2px; background-position: 0 100%; } }
.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.foot__cols h2 { margin-bottom: 14px; }
.foot__cols li + li { margin-top: 8px; }
.foot__cols a { color: var(--muted); transition: color 0.25s ease; font-size: 15px; }
@media (hover: hover) { .foot__cols a:hover { color: var(--ink); } }

/* The digest: a real SHA-256 of the fund's one-line thesis, computed in the browser. */
.digest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: clamp(56px, 7vw, 96px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.digest__fence { color: var(--dim); }
.digest__hash { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.digest__note { color: var(--dim); }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}
.foot__top { color: var(--muted); }
@media (hover: hover) { .foot__top:hover { color: var(--ink); } }
@media (max-width: 760px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .dl__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Motion start states (only with .motion on <html>) ---------- */

/* Blocks fade up. */
.motion [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.9s ease, transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Headings: words rise out of masks. */
.motion [data-split]:not(.is-split) { visibility: hidden; }
.w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.08em 0.05em 0.14em; margin: -0.08em -0.05em -0.14em; }
@supports (overflow: clip) { .w { overflow: visible; overflow-y: clip; } }
.w__i { display: inline-block; }
.motion .w__i { transform: translate3d(0, 108%, 0); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 0.03s); }
.motion .is-in .w__i { transform: none; }

/* Odometer digits for real figures. */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo__c { display: flex; flex-direction: column; transition: transform 1.8s var(--ease); }
.odo__c > span { display: block; height: 1em; line-height: 1; }

/* Hairlines draw in. */
.motion [data-line] { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.motion [data-line].is-in { transform: none; }

/* ---------- Page to page ----------
   A cross-document view transition (Chromium 126+, Safari 18.2+; others simply
   navigate): the page you leave sinks back and dims, the next one wipes up over
   it, and the nav holds still between them. */
@view-transition { navigation: auto; }
.nav { view-transition-name: rf-nav; }
::view-transition-group(rf-nav) { animation: none; }
::view-transition-old(root) { animation: rf-leave 0.6s var(--ease-io) both; }
::view-transition-new(root) { animation: rf-arrive 0.85s var(--ease-wipe) both; }
@keyframes rf-leave { to { opacity: 0.25; transform: scale(0.97); } }
@keyframes rf-arrive { from { clip-path: inset(100% 0 0 0); transform: translate3d(0, 6vh, 0); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  body::after { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}