.no-anim,
.no-anim *,
.no-anim *::before,
.no-anim *::after {
  animation: none !important;
  transition: none !important;
}

html.no-anim { scroll-behavior: auto; }

/* The first nine lines are the original kill rule, unchanged. The shell and early.js
   resolve saved lite mode and reduced motion before these animations can start. */
html.no-anim::before,
html.no-anim::after,
html.no-anim::view-transition-group(*),
html.no-anim::view-transition-old(*),
html.no-anim::view-transition-new(*) {
  animation: none !important;
  transition: none !important;
}

/* Existing hooks: site.css continues to own their static appearance and focus outline. */
.card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.chip {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dropdown-toggle::after { transition: transform 0.2s ease; }
.dropdown-menu a, .phone-menu a {
  transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.dropdown[open] > .dropdown-menu,
.burger[open] > .phone-menu { animation: menu-in 0.2s ease-out both; }
.toast {
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.show { transform: none; }

.wordmark, .topbrand {
  /* Two alternating 2.5s legs make one complete five-second breath. */
  animation: brand-breathe 2.5s ease-in-out infinite alternate;
}
@media (max-width: 900px) {
  .topbrand { transform-origin: left center; }
}
.icon-draw path {
  stroke-dasharray: 1 2;
  animation: icon-in 0.8s ease-out both;
  animation-delay: calc(var(--path-index, 0) * 0.1s);
}
.icon-draw path:nth-child(2) { --path-index: 1; }
.icon-draw path:nth-child(3) { --path-index: 2; }
.icon-draw path:nth-child(4) { --path-index: 3; }
.icon-draw path:nth-child(5) { --path-index: 4; }
.icon-draw path:nth-child(6) { --path-index: 5; }
.icon-draw path:nth-child(7) { --path-index: 6; }
.icon-draw path:nth-child(8) { --path-index: 7; }
.icon-draw path:nth-child(9) { --path-index: 8; }
.icon-draw path:nth-child(10) { --path-index: 9; }
.icon-draw path:nth-child(11) { --path-index: 10; }
.icon-draw path:nth-child(12) { --path-index: 11; }
.page-in { animation: page-in 0.4s ease-out both; }
.row-in {
  animation: row-in 0.3s ease-out both;
  animation-delay: calc(min(var(--i, 0), 12) * 30ms);
}
.bottom-line { animation: line-in 0.8s ease-out both; }

/* Motion-only waiting states: placeholders retain their dimensions in lite mode. */
.skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1em;
  border-radius: 4px;
  background: var(--panel-2);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--soft) 12%, transparent), transparent);
  animation: shimmer 1.4s linear infinite;
}
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  border: 2px solid var(--line-2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.2s; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes brand-breathe {
  from { transform: scale(0.95); }
  to { transform: scale(1); }
}
@keyframes icon-in {
  /* Opacity also hides the round caps on extremely short dot paths at t = 0. */
  from { stroke-dashoffset: 1.01; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes row-in { from { opacity: 0; } }
@keyframes line-in { from { opacity: 0; } }
@keyframes shimmer {
  from { transform: translateX(-100%); opacity: 1; }
  to { transform: translateX(100%); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Everything below belongs to sky.js. The mount's five protected properties and
   inherited star field stay in site.css. Small life has its own opacity limit;
   it does not inherit the large island's mobile dimming. */
.sky-scene {
  position: absolute;
  inset: 0;
}
.bird, .flame, .spark, .puff, .leaf, .bee, .firefly, .cloud, .star,
.island, .island-life, .island-leaves, .beacon-glow, .moon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}
.sky-pixels { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.sky-grass { fill: var(--green); }
.sky-grass-light { fill: color-mix(in srgb, var(--green) 78%, var(--cream)); }
.sky-trunk { fill: color-mix(in srgb, var(--nether) 45%, var(--night)); }
.sky-earth { fill: color-mix(in srgb, var(--nether) 55%, var(--night)); }
.sky-stone { fill: color-mix(in srgb, var(--soft) 65%, var(--line-2)); }
.sky-stone-light { fill: var(--soft); }
.sky-metal { fill: color-mix(in srgb, var(--soft) 55%, var(--line-2)); }
.sky-gold { fill: var(--gold); }
.sky-cream { fill: var(--cream); }
.sky-fire { fill: var(--nether); }
.sky-swift { fill: color-mix(in srgb, var(--cream) 68%, var(--night)); }
.sky-stripe { fill: var(--night); }
.sky-moon-shade { fill: color-mix(in srgb, var(--cream) 65%, var(--night)); }

.island { opacity: var(--island-opacity, 0.35); }
.island-art { width: var(--art-width); height: 100%; margin-inline: auto; }
.island-life { opacity: var(--life-opacity, 0.85); }
.island-leaves { opacity: var(--leaf-opacity, 0.85); }
.moon {
  opacity: var(--peak, 0.95);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cream) 20%, transparent));
}
.beacon-glow {
  margin-left: calc(0px - var(--w) * 0.5);
  margin-top: calc(0px - var(--h) * 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cream), color-mix(in srgb, var(--gold) 80%, transparent) 18%,
    color-mix(in srgb, var(--gold) 32%, transparent) 48%, transparent 72%);
  opacity: 0.7;
  animation: glow-breathe 4.3s ease-in-out infinite, glow-flicker 2.7s linear infinite, glow-drift 1.9s ease-in-out infinite;
  animation-composition: add, replace, add;
}
.flame {
  width: var(--w);
  height: var(--h);
  transform-origin: center bottom;
  animation: flame-flicker var(--duration) ease-in-out var(--delay) infinite;
}
.spark {
  opacity: 0;
  background: var(--gold);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--gold) 65%, transparent);
  animation: spark-rise var(--duration) linear var(--delay) infinite;
}
.spark:nth-child(even) { background: var(--cream); }
.puff {
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--cream), color-mix(in srgb, var(--cream) 38%, transparent) 55%, transparent 72%);
  /* The loop's 26.666667% fade is 1.6s of 6s. A separate, finite reveal gently
     introduces already-rising puffs at load; it is gone before the three-second budget check. */
  animation: puff-rise 6s linear var(--delay) infinite, smoke-in 1.6s ease-out;
}
.leaf {
  opacity: 0;
  background: var(--green);
  clip-path: polygon(0 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
    100% 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  animation: leaf-fall var(--duration) linear var(--delay) infinite;
}
.bird {
  --travel: calc(100vw + var(--w) * 2);
  --origin: calc(0px - var(--start-x) - var(--w));
  overflow: hidden;
  opacity: var(--peak, 0.85);
  will-change: transform;
  animation: bird-cross var(--duration) linear var(--delay) infinite;
}
.bird-wing {
  width: 300%;
  height: 100%;
  max-width: none;
  animation: bird-flap 0.52s steps(3) infinite;
  animation-delay: var(--delay);
}
.bee {
  opacity: 0;
  will-change: transform;
  animation: bee-path var(--duration) linear var(--delay) infinite;
}
.bee-body {
  position: relative;
  width: 100%;
  height: 100%;
  animation: bee-jitter var(--jitter-period) ease-in-out infinite;
}
.bee-wing {
  position: absolute;
  left: 6px;
  top: 0;
  width: 24px;
  height: 9px;
  transform-origin: center bottom;
  opacity: 0.7;
  animation: bee-flap var(--flap) ease-in-out infinite;
}
.firefly-field, .firefly-orbit { position: absolute; inset: 0; }
.firefly-orbit { opacity: var(--life-opacity, 0.85); }
.firefly {
  opacity: 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--gold) 65%, transparent);
  will-change: transform;
  animation: firefly-loop var(--duration) linear var(--delay) infinite;
}
.cloud {
  border-radius: 50%;
  opacity: var(--peak);
  background:
    radial-gradient(ellipse at 30% 64%, color-mix(in srgb, var(--sky) 55%, transparent), transparent 64%),
    radial-gradient(ellipse at 65% 50%, color-mix(in srgb, var(--soft) 65%, transparent), transparent 68%);
  animation: cloud-drift var(--duration) ease-in-out var(--delay) infinite;
}
.star {
  opacity: min(0.4, var(--peak, 0.65));
  background: var(--cream);
  animation: star-twinkle var(--duration) ease-in-out var(--delay) infinite;
}

.sky-paused *,
.sky-paused *::before,
.sky-paused *::after { animation-play-state: paused !important; }

@keyframes glow-breathe {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(1.08); }
}
@keyframes glow-flicker {
  0%, 100% { opacity: 0.65; }
  19%, 41%, 78% { opacity: 0.8; }
  24%, 46%, 83% { opacity: 0.55; }
  62% { opacity: var(--peak); }
}
@keyframes glow-drift {
  0%, 100% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -2px); }
}
@keyframes flame-flicker {
  0%, 100% { transform: scale(0.9, 0.85); opacity: 0.7; }
  35% { transform: scale(1, 1.08); opacity: 1; }
  70% { transform: scale(0.8, 0.95); opacity: 0.85; }
}
@keyframes spark-rise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15%, 45% { opacity: var(--peak); }
  100% { transform: translate(var(--drift), calc(0px - var(--rise))) scale(0.4); opacity: 0; }
}
@keyframes puff-rise {
  0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
  26.666667% { opacity: var(--peak); }
  65% { opacity: calc(var(--peak) * 0.6); }
  100% { transform: translate(var(--drift), calc(0px - var(--rise))) scale(1.7); opacity: 0; }
}
@keyframes smoke-in { from { opacity: 0; } }
/* Four sway cycles are folded into the fall track, so the period is duration / 4. */
@keyframes leaf-fall {
  0% { transform: translate(-9px, 0) rotate(-24deg); opacity: 0; }
  12.5% { transform: translate(9px, calc(var(--fall) * 0.125)) rotate(38deg); opacity: var(--peak); }
  25% { transform: translate(-9px, calc(var(--fall) * 0.25)) rotate(-24deg); }
  37.5% { transform: translate(9px, calc(var(--fall) * 0.375)) rotate(38deg); }
  50% { transform: translate(-9px, calc(var(--fall) * 0.5)) rotate(-24deg); }
  62.5% { transform: translate(9px, calc(var(--fall) * 0.625)) rotate(38deg); }
  75% { transform: translate(-9px, calc(var(--fall) * 0.75)) rotate(-24deg); }
  87.5% { transform: translate(9px, calc(var(--fall) * 0.875)) rotate(38deg); opacity: var(--peak); }
  100% { transform: translate(-9px, var(--fall)) rotate(-24deg); opacity: 0; }
}
@keyframes bird-flap { to { transform: translateX(-100%); } }
@keyframes bee-path {
  0%, 100% { transform: translate(var(--rx), 0); opacity: var(--peak, 0.85); }
  12.5% { transform: translate(calc(var(--rx) * 0.707), calc(var(--ry) * 0.707)); }
  25% { transform: translate(0, var(--ry)); }
  37.5% { transform: translate(calc(var(--rx) * -0.707), calc(var(--ry) * 0.707)); }
  50% { transform: translate(calc(0px - var(--rx)), 0); }
  62.5% { transform: translate(calc(var(--rx) * -0.707), calc(var(--ry) * -0.707)); }
  75% { transform: translate(0, calc(0px - var(--ry))); }
  87.5% { transform: translate(calc(var(--rx) * 0.707), calc(var(--ry) * -0.707)); }
}
@keyframes bee-jitter {
  0%, 100% { transform: translate(-2px, 2px) rotate(-9deg); }
  50% { transform: translate(2px, -2px) rotate(9deg); }
}
@keyframes bee-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.35); }
}
@keyframes cloud-drift {
  0%, 100% { transform: translateX(calc(0px - var(--drift))); }
  50% { transform: translateX(var(--drift)); }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: var(--peak, 0.65); }
}

/* Seven vertical drift cycles share the linear crossing track. X advances at a
   constant rate even while Y changes; the strip supplies the separate flap. */
@keyframes bird-cross {
  0% { transform: translate(calc(var(--origin) + var(--travel) * 0), 0px); }
  1.785714% { transform: translate(calc(var(--origin) + var(--travel) * 0.017857143), 9.899px); }
  3.571429% { transform: translate(calc(var(--origin) + var(--travel) * 0.035714286), 14px); }
  5.357143% { transform: translate(calc(var(--origin) + var(--travel) * 0.053571429), 9.899px); }
  7.142857% { transform: translate(calc(var(--origin) + var(--travel) * 0.071428571), 0px); }
  8.928571% { transform: translate(calc(var(--origin) + var(--travel) * 0.089285714), -9.899px); }
  10.714286% { transform: translate(calc(var(--origin) + var(--travel) * 0.107142857), -14px); }
  12.5% { transform: translate(calc(var(--origin) + var(--travel) * 0.125), -9.899px); }
  14.285714% { transform: translate(calc(var(--origin) + var(--travel) * 0.142857143), 0px); }
  16.071429% { transform: translate(calc(var(--origin) + var(--travel) * 0.160714286), 9.899px); }
  17.857143% { transform: translate(calc(var(--origin) + var(--travel) * 0.178571429), 14px); }
  19.642857% { transform: translate(calc(var(--origin) + var(--travel) * 0.196428571), 9.899px); }
  21.428571% { transform: translate(calc(var(--origin) + var(--travel) * 0.214285714), 0px); }
  23.214286% { transform: translate(calc(var(--origin) + var(--travel) * 0.232142857), -9.899px); }
  25% { transform: translate(calc(var(--origin) + var(--travel) * 0.25), -14px); }
  26.785714% { transform: translate(calc(var(--origin) + var(--travel) * 0.267857143), -9.899px); }
  28.571429% { transform: translate(calc(var(--origin) + var(--travel) * 0.285714286), 0px); }
  30.357143% { transform: translate(calc(var(--origin) + var(--travel) * 0.303571429), 9.899px); }
  32.142857% { transform: translate(calc(var(--origin) + var(--travel) * 0.321428571), 14px); }
  33.928571% { transform: translate(calc(var(--origin) + var(--travel) * 0.339285714), 9.899px); }
  35.714286% { transform: translate(calc(var(--origin) + var(--travel) * 0.357142857), 0px); }
  37.5% { transform: translate(calc(var(--origin) + var(--travel) * 0.375), -9.899px); }
  39.285714% { transform: translate(calc(var(--origin) + var(--travel) * 0.392857143), -14px); }
  41.071429% { transform: translate(calc(var(--origin) + var(--travel) * 0.410714286), -9.899px); }
  42.857143% { transform: translate(calc(var(--origin) + var(--travel) * 0.428571429), 0px); }
  44.642857% { transform: translate(calc(var(--origin) + var(--travel) * 0.446428571), 9.899px); }
  46.428571% { transform: translate(calc(var(--origin) + var(--travel) * 0.464285714), 14px); }
  48.214286% { transform: translate(calc(var(--origin) + var(--travel) * 0.482142857), 9.899px); }
  50% { transform: translate(calc(var(--origin) + var(--travel) * 0.5), 0px); }
  51.785714% { transform: translate(calc(var(--origin) + var(--travel) * 0.517857143), -9.899px); }
  53.571429% { transform: translate(calc(var(--origin) + var(--travel) * 0.535714286), -14px); }
  55.357143% { transform: translate(calc(var(--origin) + var(--travel) * 0.553571429), -9.899px); }
  57.142857% { transform: translate(calc(var(--origin) + var(--travel) * 0.571428571), 0px); }
  58.928571% { transform: translate(calc(var(--origin) + var(--travel) * 0.589285714), 9.899px); }
  60.714286% { transform: translate(calc(var(--origin) + var(--travel) * 0.607142857), 14px); }
  62.5% { transform: translate(calc(var(--origin) + var(--travel) * 0.625), 9.899px); }
  64.285714% { transform: translate(calc(var(--origin) + var(--travel) * 0.642857143), 0px); }
  66.071429% { transform: translate(calc(var(--origin) + var(--travel) * 0.660714286), -9.899px); }
  67.857143% { transform: translate(calc(var(--origin) + var(--travel) * 0.678571429), -14px); }
  69.642857% { transform: translate(calc(var(--origin) + var(--travel) * 0.696428571), -9.899px); }
  71.428571% { transform: translate(calc(var(--origin) + var(--travel) * 0.714285714), 0px); }
  73.214286% { transform: translate(calc(var(--origin) + var(--travel) * 0.732142857), 9.899px); }
  75% { transform: translate(calc(var(--origin) + var(--travel) * 0.75), 14px); }
  76.785714% { transform: translate(calc(var(--origin) + var(--travel) * 0.767857143), 9.899px); }
  78.571429% { transform: translate(calc(var(--origin) + var(--travel) * 0.785714286), 0px); }
  80.357143% { transform: translate(calc(var(--origin) + var(--travel) * 0.803571429), -9.899px); }
  82.142857% { transform: translate(calc(var(--origin) + var(--travel) * 0.821428571), -14px); }
  83.928571% { transform: translate(calc(var(--origin) + var(--travel) * 0.839285714), -9.899px); }
  85.714286% { transform: translate(calc(var(--origin) + var(--travel) * 0.857142857), 0px); }
  87.5% { transform: translate(calc(var(--origin) + var(--travel) * 0.875), 9.899px); }
  89.285714% { transform: translate(calc(var(--origin) + var(--travel) * 0.892857143), 14px); }
  91.071429% { transform: translate(calc(var(--origin) + var(--travel) * 0.910714286), 9.899px); }
  92.857143% { transform: translate(calc(var(--origin) + var(--travel) * 0.928571429), 0px); }
  94.642857% { transform: translate(calc(var(--origin) + var(--travel) * 0.946428571), -9.899px); }
  96.428571% { transform: translate(calc(var(--origin) + var(--travel) * 0.964285714), -14px); }
  98.214286% { transform: translate(calc(var(--origin) + var(--travel) * 0.982142857), -9.899px); }
  100% { transform: translate(calc(var(--origin) + var(--travel) * 1), 0px); }
}

/* One orbit / six bobs / five pulses, sampled by the pure planner. Each interval
   interpolates transform and opacity only; the last sample equals the first. */
@keyframes firefly-loop {
  0% { transform: var(--f0); opacity: var(--a0); }
  1.666667% { transform: var(--f1); opacity: var(--a1); }
  3.333333% { transform: var(--f2); opacity: var(--a2); }
  5% { transform: var(--f3); opacity: var(--a3); }
  6.666667% { transform: var(--f4); opacity: var(--a4); }
  8.333333% { transform: var(--f5); opacity: var(--a5); }
  10% { transform: var(--f6); opacity: var(--a6); }
  11.666667% { transform: var(--f7); opacity: var(--a7); }
  13.333333% { transform: var(--f8); opacity: var(--a8); }
  15% { transform: var(--f9); opacity: var(--a9); }
  16.666667% { transform: var(--f10); opacity: var(--a10); }
  18.333333% { transform: var(--f11); opacity: var(--a11); }
  20% { transform: var(--f12); opacity: var(--a12); }
  21.666667% { transform: var(--f13); opacity: var(--a13); }
  23.333333% { transform: var(--f14); opacity: var(--a14); }
  25% { transform: var(--f15); opacity: var(--a15); }
  26.666667% { transform: var(--f16); opacity: var(--a16); }
  28.333333% { transform: var(--f17); opacity: var(--a17); }
  30% { transform: var(--f18); opacity: var(--a18); }
  31.666667% { transform: var(--f19); opacity: var(--a19); }
  33.333333% { transform: var(--f20); opacity: var(--a20); }
  35% { transform: var(--f21); opacity: var(--a21); }
  36.666667% { transform: var(--f22); opacity: var(--a22); }
  38.333333% { transform: var(--f23); opacity: var(--a23); }
  40% { transform: var(--f24); opacity: var(--a24); }
  41.666667% { transform: var(--f25); opacity: var(--a25); }
  43.333333% { transform: var(--f26); opacity: var(--a26); }
  45% { transform: var(--f27); opacity: var(--a27); }
  46.666667% { transform: var(--f28); opacity: var(--a28); }
  48.333333% { transform: var(--f29); opacity: var(--a29); }
  50% { transform: var(--f30); opacity: var(--a30); }
  51.666667% { transform: var(--f31); opacity: var(--a31); }
  53.333333% { transform: var(--f32); opacity: var(--a32); }
  55% { transform: var(--f33); opacity: var(--a33); }
  56.666667% { transform: var(--f34); opacity: var(--a34); }
  58.333333% { transform: var(--f35); opacity: var(--a35); }
  60% { transform: var(--f36); opacity: var(--a36); }
  61.666667% { transform: var(--f37); opacity: var(--a37); }
  63.333333% { transform: var(--f38); opacity: var(--a38); }
  65% { transform: var(--f39); opacity: var(--a39); }
  66.666667% { transform: var(--f40); opacity: var(--a40); }
  68.333333% { transform: var(--f41); opacity: var(--a41); }
  70% { transform: var(--f42); opacity: var(--a42); }
  71.666667% { transform: var(--f43); opacity: var(--a43); }
  73.333333% { transform: var(--f44); opacity: var(--a44); }
  75% { transform: var(--f45); opacity: var(--a45); }
  76.666667% { transform: var(--f46); opacity: var(--a46); }
  78.333333% { transform: var(--f47); opacity: var(--a47); }
  80% { transform: var(--f48); opacity: var(--a48); }
  81.666667% { transform: var(--f49); opacity: var(--a49); }
  83.333333% { transform: var(--f50); opacity: var(--a50); }
  85% { transform: var(--f51); opacity: var(--a51); }
  86.666667% { transform: var(--f52); opacity: var(--a52); }
  88.333333% { transform: var(--f53); opacity: var(--a53); }
  90% { transform: var(--f54); opacity: var(--a54); }
  91.666667% { transform: var(--f55); opacity: var(--a55); }
  93.333333% { transform: var(--f56); opacity: var(--a56); }
  95% { transform: var(--f57); opacity: var(--a57); }
  96.666667% { transform: var(--f58); opacity: var(--a58); }
  98.333333% { transform: var(--f59); opacity: var(--a59); }
  100% { transform: var(--f60); opacity: var(--a60); }
}

/* Reduced motion with no JavaScript. early.js turns html.no-anim on for "reduce motion" in the system settings, but it
   only adds html.js (and so only runs the lite-mode decision for a page that has a script to run) when this browser
   runs modules; with scripts off or failed, html.no-anim never comes and the wordmark would breathe forever. So here
   the media query itself stops everything, only for a page without html.js: with html.js early.js decides (a saved
   lite choice beats the system setting), so none of this may reach it. */
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *,
  html:not(.js) *::before,
  html:not(.js) *::after {
    animation: none !important;
    transition: none !important;
  }
  html:not(.js)::before,
  html:not(.js)::after,
  html:not(.js)::view-transition-group(*),
  html:not(.js)::view-transition-old(*),
  html:not(.js)::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}