/* raft-moonbit documentation site — shared design system.
   Direction: a systems-telemetry / replicated-log aesthetic. Monospace carries
   the display voice (the protocol/ledger register); role colour is functional —
   the same categorical palette the demo uses to encode Leader/Follower/
   Candidate/Learner. Colours are the dataviz reference set, validated for CVD.

   Fonts are self-hosted and forced via @font-face: HarmonyOS Sans SC (SIL-free,
   Latin+symbol subset) for the body, JetBrains Mono (OFL) for the protocol/code
   voice. The light-reading register prefers Microsoft YaHei UI Light where the
   viewer already has it (a Windows system font, not redistributed here), falling
   back to HarmonyOS Sans SC Light. */

@font-face {
  font-family: "HarmonyOS Sans SC";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/HarmonyOSSansSC-Light.woff2") format("woff2");
}
@font-face {
  font-family: "HarmonyOS Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/HarmonyOSSansSC-Regular.woff2") format("woff2");
}
@font-face {
  /* the Light face ships under its own family name, so declare it by that name */
  font-family: "Microsoft YaHei UI Light";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/MicrosoftYaHeiUILight.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #0c1119;
  --bg-tint-a: #13233d;
  --bg-tint-b: #0e2a24;
  --surface: #131a25;
  --surface-2: #182231;
  --surface-3: #1e2a3c;
  --border: #24324a;
  --border-strong: #35496a;
  --ink: #ece8dd; /* milky off-white, gently warm — softer on the eyes than pure white */
  --ink-2: #a6b3c6;
  --ink-3: #6d7c93;

  /* roles = categorical identity (never colour-alone; always with a label) */
  --leader: #e0a83b;
  --follower: #3987e5;
  --candidate: #9085e9;
  --learner: #808fa6;
  --replicate: #26b483;

  /* code syntax — a calmer, lower-saturation palette than the role colours,
     tuned for long reading against the code surface */
  --code-comment: #7e8ba0;
  --code-keyword: #c9b0ef;
  --code-string: #a6d29a;
  --code-num: #e7bd86;

  --good: #35c07a;
  --bad: #e66767;
  --warn: #e0a83b;

  --link: #63a4f0;
  --caret: #26b483;

  --mono: "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace, Menlo,
    Consolas, monospace;
  --sans: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui,
    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* light-reading register: YaHei UI Light where present (its Light weight ships
     under several family names depending on the OS/build, so try them all),
     else HarmonyOS Sans SC Light via font-weight: 300 */
  --sans-soft: "Microsoft YaHei UI Light", "MicrosoftYaHeiUILight",
    "Microsoft YaHei UI", "微软雅黑 UI Light", "微软雅黑 UI", "HarmonyOS Sans SC",
    "PingFang SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1180px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 18px 40px -24px rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9edf2;
  --bg-tint-a: #d7e4f5;
  --bg-tint-b: #dbede6;
  --surface: #f8fafc;
  --surface-2: #ffffff;
  --surface-3: #eef2f7;
  --border: #d3dae4;
  --border-strong: #b7c2d1;
  --ink: #16202e;
  --ink-2: #45566b;
  --ink-3: #6d7c91;

  --leader: #b57e00;
  --follower: #2a68c4;
  --candidate: #4a3aa7;
  --learner: #64738a;
  --replicate: #158a63;

  --code-comment: #7a8698;
  --code-keyword: #6a40b0;
  --code-string: #2f855a;
  --code-num: #b0791e;

  --good: #0a7d43;
  --bad: #cc3b3b;
  --warn: #b57e00;

  --link: #1f5fbf;
  --caret: #158a63;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 34px -26px rgba(20, 40, 80, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background: radial-gradient(
      1000px 620px at 82% -8%,
      color-mix(in oklab, var(--bg-tint-a) 60%, transparent),
      transparent 60%
    ),
    radial-gradient(
      820px 520px at -6% 108%,
      color-mix(in oklab, var(--bg-tint-b) 55%, transparent),
      transparent 62%
    ),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* ---- header / nav --------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.topbar .row {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 60px;
}
.brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand .prompt {
  color: var(--replicate);
}
.brand .caret {
  color: var(--caret);
  animation: blink 1.1s steps(1) infinite;
}
/* On the home page the logo reads simply "raft-moonbit" while the hero (with its
   own blinking caret) is on screen — one caret at a time, and a lone motionless
   caret in the corner would read as frozen. Once the hero scrolls away, the "~/"
   prompt and the blinking caret smoothly grow back in. */
.brand .prompt,
.brand .caret {
  display: inline-block;
  overflow: hidden;
  max-width: 3ch;
  vertical-align: bottom;
  transition: max-width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}
.brand.minimal .prompt,
.brand.minimal .caret {
  max-width: 0;
  opacity: 0;
}
.brand.minimal .caret {
  animation: none;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
nav.links {
  display: flex;
  gap: 4px;
  margin-left: 6px;
  flex-wrap: wrap;
}
nav.links a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}
nav.links a:hover {
  text-decoration: none;
  color: var(--ink);
  background: var(--surface-2);
}
nav.links a.active {
  color: var(--ink);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.spacer {
  flex: 1;
}
.iconbtn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.iconbtn:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}
/* the theme-toggle glyph, sized to match the burger icon (24px); the button's
   vertical padding is trimmed so it does not grow much taller than before */
.iconbtn .tgl-icon {
  font-size: 24px;
  line-height: 1;
  vertical-align: -0.18em;
}
.iconbtn[data-theme-toggle] {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* the burger only does something once the nav collapses, so it is desktop-hidden
   (no dead button on PC) and its glyph is sized up where it does appear */
.iconbtn[data-burger] {
  display: none;
  font-size: 24px;
  line-height: 1;
  padding: 4px 12px;
  align-items: center;
  justify-content: center;
}

/* ---- badges --------------------------------------------------------------- */
.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.badge {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.badge b {
  color: var(--ink);
  font-weight: 600;
}
.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}

/* ---- hero ----------------------------------------------------------------- */
.hero {
  padding: 74px 0 40px;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--replicate);
  margin: 0 0 18px;
}
h1.display {
  font-family: var(--mono);
  font-weight: 720;
  font-size: clamp(34px, 6.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
h1.display .hl {
  color: var(--leader);
}
h1.display .caret {
  color: var(--caret);
  font-weight: 400;
  animation: blink 1.1s steps(1) infinite;
}
.lede {
  margin: 24px 0 0;
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--ink-2);
  max-width: 84ch;
}
.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.btn {
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  background: var(--surface-2);
  cursor: pointer;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.btn:hover {
  text-decoration: none;
  border-color: var(--replicate);
}
.btn.primary {
  background: var(--replicate);
  border-color: var(--replicate);
  color: #04120c;
  font-weight: 640;
}
.btn.primary:hover {
  filter: brightness(1.06);
}
/* the light-mode green is dark, so the primary button needs milky text on it */
:root[data-theme="light"] .btn.primary {
  color: #f3efe7;
}

/* ---- ledger signature ----------------------------------------------------- */
.ledger {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 13px;
}
.cell {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 9px;
  background: var(--surface-2);
  color: var(--ink-2);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
}
.cell .idx {
  color: var(--ink-3);
}
.cell .tm {
  color: var(--leader);
}
.cell.committed {
  border-color: color-mix(in oklab, var(--good) 55%, var(--border));
}
.cell.committed .idx {
  color: var(--good);
}

/* ---- generic sections & cards -------------------------------------------- */
section.band {
  padding: 46px 0;
  border-top: 1px solid var(--border);
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
h2.sec {
  font-family: var(--mono);
  font-weight: 680;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.sub {
  color: var(--ink-2);
  max-width: 94ch;
  margin: 0 0 26px;
}
.grid {
  display: grid;
  gap: 16px;
}
.grid.c3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid.c2 {
  grid-template-columns: repeat(2, 1fr);
}
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card h3 {
  font-family: var(--mono);
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
}
.card .tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.rule-accent {
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--replicate);
  margin-bottom: 14px;
}

/* role chips */
.chip {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chip.leader .dot {
  background: var(--leader);
}
.chip.follower .dot {
  background: var(--follower);
}
.chip.candidate .dot {
  background: var(--candidate);
}
.chip.learner .dot {
  background: transparent;
  border: 1.5px dashed var(--learner);
}

/* ---- code ----------------------------------------------------------------- */
pre,
code {
  font-family: var(--mono);
}
pre.code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}
pre.code .c {
  color: var(--code-comment);
  font-style: italic;
}
pre.code .k {
  color: var(--code-keyword);
}
pre.code .s {
  color: var(--code-string);
}
pre.code .o {
  color: var(--code-num);
}
p code,
li code,
td code {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* ---- tables --------------------------------------------------------------- */
table.api {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.api th,
table.api td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.api th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
table.api td code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
}

/* ---- footer --------------------------------------------------------------- */
footer.site {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 30px 0 50px;
  color: var(--ink-3);
  font-size: 13px;
}
footer.site .row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
footer.site .mono {
  font-family: var(--mono);
}

.note {
  border-left: 3px solid var(--warn);
  background: color-mix(in oklab, var(--warn) 8%, var(--surface));
  padding: 12px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-2);
  font-size: 14px;
}
.note.good {
  border-left-color: var(--good);
  background: color-mix(in oklab, var(--good) 8%, var(--surface));
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .grid.c3,
  .grid.c2 {
    grid-template-columns: 1fr;
  }
  nav.links {
    display: none;
  }
  /* the nav has collapsed, so the burger is now useful — show it here */
  .iconbtn[data-burger] {
    display: inline-flex;
  }
  .topbar.open nav.links {
    display: flex;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 10px 22px;
  }
}

/* tablets / large phones */
@media (max-width: 620px) {
  .wrap {
    padding: 0 16px;
  }
  /* the base clamp floors at 34px — too wide for the fixed hero lines on a
     phone — so scale it down here to keep the display from overflowing */
  h1.display {
    font-size: clamp(24px, 5.5vw, 34px);
  }
  .hero {
    padding: 46px 0 28px;
  }
  section.band {
    padding: 32px 0;
  }
  .topbar .row {
    height: 54px;
    gap: 10px;
  }
  .topbar.open nav.links {
    top: 54px;
    padding: 10px 16px;
  }
  .cta {
    gap: 8px;
  }
  .btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  .badge {
    font-size: 11px;
    padding: 4px 8px;
  }
  footer.site .row {
    justify-content: flex-start;
  }
}

/* small phones */
@media (max-width: 430px) {
  .brand {
    font-size: 13px;
  }
  h1.display {
    font-size: clamp(20px, 6vw, 28px);
  }
  .lede {
    font-size: 15px;
  }
  .eyebrow {
    font-size: 11.5px;
  }
  .cta {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    justify-content: center;
  }
}

/* wide desktops — let the shell breathe a little more */
@media (min-width: 1500px) {
  :root {
    --maxw: 1260px;
  }
}

:focus-visible {
  outline: 2px solid var(--caret);
  outline-offset: 2px;
}

/* ---- motion & depth polish ------------------------------------------------ */
body {
  transition: background-color 0.35s ease, color 0.35s ease;
  overflow-x: hidden; /* belt-and-suspenders against any stray horizontal scroll */
}

/* interactive chrome and decorative labels never show a text (I-beam) cursor or
   select on drag; prose, code and tables stay selectable so they can be copied */
.btn,
.iconbtn,
.brand,
nav.links a,
h1.display,
.chip,
.eyebrow,
.kicker,
.tag,
.cell,
.caret,
.prompt,
.rule-accent,
button,
[role="button"],
.controls,
.ring-panel,
.legend,
.invs,
.demo-head .tag {
  -webkit-user-select: none;
  user-select: none;
}
/* badges carry copy-worthy facts (the package name, counts, licence), so keep
   them selectable even though they read as chrome */
.badge,
.badge * {
  -webkit-user-select: text;
  user-select: text;
}

/* a slim, theme-matched scrollbar instead of the chunky default */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
  background-clip: content-box;
}

/* home / demo / design: the scrollbar stays invisible until the reader scrolls
   off the very top. The track (gutter) is still there, so nothing shifts. */
html.hide-bar-top:not(.is-scrolled) {
  scrollbar-color: transparent transparent;
}
html.hide-bar-top:not(.is-scrolled)::-webkit-scrollbar-thumb {
  background: transparent;
}
a,
.btn,
.badge,
.chip,
.iconbtn,
nav.links a,
.card,
.cell,
.rule-accent,
footer.site a {
  transition: color 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.24s ease, transform 0.24s ease,
    opacity 0.3s ease, filter 0.18s ease, width 0.24s ease;
}

.topbar {
  transition: box-shadow 0.24s ease, background-color 0.24s ease;
}
.topbar.scrolled {
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.8);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
}
/* light mode wants a tighter, more discreet shadow than the dark one */
:root[data-theme="light"] .topbar.scrolled {
  box-shadow: 0 2px 9px -4px rgba(20, 40, 80, 0.16);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 28px 52px -28px rgba(0, 0, 0, 0.78);
}
.card:hover .rule-accent {
  width: 42px;
}

.badge:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -14px
    color-mix(in oklab, var(--replicate) 70%, transparent);
}

/* animated underline for prose links (leaves nav / buttons / badges alone) */
.lede a,
.sub a,
.card p a,
.note a,
footer.site a,
table.api td a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 0.26s ease, color 0.18s ease;
}
.lede a:hover,
.sub a:hover,
.card p a:hover,
.note a:hover,
footer.site a:hover,
table.api td a:hover {
  text-decoration: none;
  background-size: 100% 1.5px;
}

/* a plain-text inline link that grows a green (theme) underline from left to
   right on hover — the GitHub link in the lede and the coverage-report link in
   the badge both use it */
a.ghtext {
  color: inherit;
  background-image: linear-gradient(var(--replicate), var(--replicate));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}
a.ghtext:hover {
  color: inherit;
  text-decoration: none;
  background-size: 100% 2px;
}

/* light-reading register — the prominent intros are set in Microsoft YaHei UI
   Light where the viewer has it, otherwise HarmonyOS Sans SC Light */
.lede,
.sub {
  font-family: var(--sans-soft);
  font-weight: 300;
}

/* the hero's highlighted word. Dark mode: warm amber with a soft glow. Light
   mode: a blue frosted-glass chip (translucent fill + backdrop blur). The box
   geometry is shared so toggling the theme does not shift the layout. */
h1.display .hl {
  color: var(--leader);
  display: inline-block;
  padding: 0 0.1em;
  border-radius: 12px;
  text-shadow: 0 0 34px color-mix(in oklab, var(--leader) 42%, transparent);
}
:root[data-theme="light"] h1.display .hl {
  color: var(--follower);
  background: linear-gradient(
    175deg,
    color-mix(in oklab, var(--follower) 5%, transparent),
    color-mix(in oklab, var(--follower) 16%, transparent)
  );
  -webkit-backdrop-filter: blur(7px) saturate(1.7);
  backdrop-filter: blur(7px) saturate(1.7);
  box-shadow: 0 12px 28px -16px color-mix(in oklab, var(--follower) 45%, transparent);
  text-shadow: none;
}

/* scroll-progress bar (created by nav.js) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    var(--replicate),
    var(--follower),
    var(--leader)
  );
  z-index: 60;
  pointer-events: none;
}

/* scroll reveal — only armed once nav.js confirms JS + motion are allowed, so
   the content is always visible if either is missing */
.reveal-ready section.band .card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-ready section.band .card.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}