@a4ui/core 0.11.1 → 0.13.0

package/src/styles/space.css

@@ -0,0 +1,510 @@
+/* A4ui — starfield backdrop styles for <SpaceBackground/>.
+ *
+ * Extracted from the source project's space-theme.css. Mount SpaceBackground as
+ * a single fixed full-viewport layer BEHIND all content (z-index 0), with app
+ * content at z-index >= 10 (AppShell already does this). Bundled into
+ * `a4ui/styles.css` after the component surfaces. */
+
+#space {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+/* Nebula tinted from the active theme (--primary / --accent / --destructive), so
+   switching palettes recolors the whole backdrop. Space's tokens keep it blue. */
+#space .sky {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
+    radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
+    radial-gradient(1000px 800px at 50% 120%, hsl(var(--accent) / 0.22), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.12), transparent 60%),
+    hsl(var(--background));
+}
+[data-theme='light'] #space .sky {
+  background:
+    radial-gradient(1100px 680px at 84% -10%, hsl(var(--primary) / 0.22), transparent 60%),
+    radial-gradient(900px 600px at 6% 8%, hsl(var(--accent) / 0.2), transparent 60%),
+    radial-gradient(1000px 820px at 50% 120%, hsl(var(--accent) / 0.16), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.1), transparent 60%),
+    hsl(var(--background));
+}
+@keyframes nebulaShift {
+  0%,
+  100% {
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    filter: hue-rotate(18deg);
+  }
+}
+
+/* Aurora — dark theme only */
+#space .aurora {
+  position: absolute;
+  top: -10%;
+  left: -10%;
+  right: -10%;
+  height: 46%;
+  background: linear-gradient(
+    180deg,
+    hsl(var(--accent) / 0.16),
+    hsl(var(--primary) / 0.1) 45%,
+    transparent 80%
+  );
+  filter: blur(40px);
+  opacity: 0.55;
+  mix-blend-mode: screen;
+}
+[data-theme='light'] #space .aurora {
+  display: none;
+}
+@keyframes auroraSway {
+  0%,
+  100% {
+    transform: translateX(-2%) scaleY(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateX(3%) scaleY(1.08);
+    opacity: 0.68;
+  }
+}
+
+/* Randomized starfield — each star is generated in SpaceBackground.tsx with a
+   random position/size/brightness/bloom, so there's no visible tiling pattern.
+   Static (no drift): moving the field behind the frosted cards re-blurs every
+   frame and felt laggy; a subset twinkles for life instead. */
+#space #starfield {
+  position: absolute;
+  inset: 0;
+}
+[data-theme='light'] #space #starfield {
+  opacity: 0.85;
+}
+/* A few stars drift smoothly like the satellite: each is a tiny element moving
+   via its own transform (GPU-composited, cheap), NOT the whole field. Uses
+   `alternate` so it eases out and back with no loop jump. Per-star --dx/--dy. */
+@keyframes starDrift {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(var(--dx, 0), var(--dy, 0));
+  }
+}
+
+/* Rocket exhaust flame (custom SVG rocket in SpaceBackground.tsx) — flickers. */
+.rk-flame {
+  transform-box: fill-box;
+  transform-origin: 50% 0%;
+  animation: rocketFlame 0.12s ease-in-out infinite alternate;
+}
+@keyframes rocketFlame {
+  from {
+    transform: scaleY(0.8);
+    opacity: 0.85;
+  }
+  to {
+    transform: scaleY(1.06);
+    opacity: 1;
+  }
+}
+
+/* Legacy tiled star layers (kept for parity; the current SpaceBackground scatters
+   individual stars into #starfield instead). Sized generously: small dots nearly
+   vanish under backdrop-filter blur, so keep them >= 2.5px. */
+#space .stars {
+  position: absolute;
+  inset: -50%;
+  background-repeat: repeat;
+  background-image:
+    radial-gradient(4px 4px at 20px 30px, hsl(var(--foreground)), transparent),
+    radial-gradient(3.6px 3.6px at 120px 90px, hsl(var(--foreground)), transparent),
+    radial-gradient(3.2px 3.2px at 210px 160px, hsl(217 91% 78%), transparent),
+    radial-gradient(4.8px 4.8px at 300px 60px, hsl(199 89% 82%), transparent),
+    radial-gradient(3.4px 3.4px at 380px 220px, hsl(330 80% 84%), transparent),
+    radial-gradient(3px 3px at 90px 190px, hsl(var(--foreground)), transparent),
+    radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 82%), transparent);
+  background-size: 420px 300px;
+  opacity: 1;
+  animation: drift 140s linear infinite;
+}
+[data-theme='light'] #space .stars {
+  background-image:
+    radial-gradient(4px 4px at 20px 30px, hsl(38 92% 50%), transparent),
+    radial-gradient(3.6px 3.6px at 120px 90px, hsl(42 90% 52%), transparent),
+    radial-gradient(3.2px 3.2px at 210px 160px, hsl(32 88% 48%), transparent),
+    radial-gradient(4.8px 4.8px at 300px 60px, hsl(45 95% 55%), transparent),
+    radial-gradient(3.4px 3.4px at 380px 220px, hsl(28 85% 50%), transparent),
+    radial-gradient(3px 3px at 90px 190px, hsl(40 90% 50%), transparent),
+    radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 52%), transparent);
+}
+#space .stars.s2 {
+  background-size: 640px 480px;
+  opacity: 0.85;
+  animation-duration: 200s;
+}
+#space .stars.s3 {
+  background-size: 260px 190px;
+  opacity: 1;
+  animation-duration: 95s;
+  background-image:
+    radial-gradient(6px 6px at 40px 50px, hsl(var(--foreground)), transparent),
+    radial-gradient(5.6px 5.6px at 160px 130px, hsl(199 89% 85%), transparent),
+    radial-gradient(5.8px 5.8px at 250px 40px, hsl(275 80% 86%), transparent),
+    radial-gradient(5px 5px at 90px 20px, hsl(330 85% 85%), transparent);
+}
+[data-theme='light'] #space .stars.s3 {
+  opacity: 0.8;
+  background-image:
+    radial-gradient(6px 6px at 40px 50px, hsl(38 92% 50%), transparent),
+    radial-gradient(5.6px 5.6px at 160px 130px, hsl(45 95% 54%), transparent),
+    radial-gradient(5.8px 5.8px at 250px 40px, hsl(30 88% 48%), transparent),
+    radial-gradient(5px 5px at 90px 20px, hsl(50 92% 55%), transparent);
+}
+@keyframes drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-420px, -300px, 0);
+  }
+}
+
+/* Individually-placed twinkling stars */
+.twinkle {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: hsl(var(--foreground));
+  box-shadow: 0 0 14px 3px hsl(var(--foreground) / 0.9);
+  animation: twinkle 3.2s ease-in-out infinite;
+}
+[data-theme='light'] .twinkle {
+  background: hsl(40 92% 50%);
+  box-shadow: 0 0 14px 3px hsl(40 92% 50% / 0.85);
+}
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.6);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+/* Constellations — thin line art connecting a handful of stars */
+#space .constellation {
+  position: absolute;
+  opacity: 1;
+}
+[data-theme='light'] #space .constellation {
+  opacity: 0.6;
+}
+[data-theme='light'] #space .constellation .cline {
+  stroke: hsl(38 92% 50%) !important;
+}
+[data-theme='light'] #space .constellation .cdot {
+  fill: hsl(222 47% 20%) !important;
+}
+
+/* Planets / moons — decorative, corner-anchored, gentle float */
+.planet {
+  border-radius: 50%;
+}
+.planet::after {
+  content: '';
+  position: absolute;
+  inset: -34% -55%;
+  border-radius: 50%;
+  border: 3px solid hsl(var(--foreground) / 0.18);
+  transform: rotate(-24deg);
+}
+.planet-glow {
+  border-radius: 50%;
+  filter: blur(2px);
+}
+@keyframes floaty {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-14px) rotate(4deg);
+  }
+}
+.floaty {
+  animation: floaty 12s ease-in-out infinite;
+}
+.floaty.slow {
+  animation-duration: 18s;
+}
+
+/* Asteroid belt (small drifting rocks) */
+.asteroid {
+  border-radius: 40% 55% 50% 45%;
+  background: hsl(var(--foreground) / 0.35);
+}
+@keyframes asteroidDrift {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(-8px, 6px) rotate(25deg);
+  }
+}
+
+/* Shooting star — bright core + tapered glowing trail */
+.shooter {
+  position: absolute;
+  height: 2.5px;
+  border-radius: 999px;
+  transform-origin: left center;
+  background: linear-gradient(
+    90deg,
+    hsla(0, 0%, 100%, 0) 0%,
+    hsla(199, 90%, 85%, 0.55) 55%,
+    hsla(0, 0%, 100%, 0.98) 100%
+  );
+  filter: blur(0.2px) drop-shadow(0 0 3px hsla(199, 90%, 80%, 0.5));
+}
+.shooter::before {
+  content: '';
+  position: absolute;
+  right: -2px;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  background: radial-gradient(circle, #fff 0%, hsla(199, 95%, 88%, 0.95) 50%, transparent 75%);
+  box-shadow:
+    0 0 8px 2px #fff,
+    0 0 20px 7px hsla(199, 90%, 75%, 0.85),
+    0 0 38px 14px hsla(199, 90%, 60%, 0.4);
+}
+.shooter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 55%;
+  height: 1px;
+  transform: translateY(-50%);
+  background: hsla(199, 85%, 92%, 0.65);
+  filter: blur(2px);
+}
+
+/* Satellite (drifting glyph, e.g. a lucide "satellite" icon) */
+@keyframes satelliteDrift {
+  from {
+    transform: translate(0, 0) rotate(-18deg);
+  }
+  to {
+    transform: translate(126vw, 34vh) rotate(-18deg);
+  }
+}
+#satellite {
+  animation: satelliteDrift 46s linear infinite;
+}
+
+/* Cursor-following ambient glow (nebula that trails the pointer) */
+#cursorGlow {
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, hsl(217 91% 60% / 0.1), transparent 70%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:not(.force-motion) #space .stars,
+  html:not(.force-motion) .twinkle,
+  html:not(.force-motion) .floaty,
+  html:not(.force-motion) .shooter,
+  html:not(.force-motion) #satellite,
+  html:not(.force-motion) .asteroid {
+    animation: none !important;
+  }
+  html:not(.force-motion) #cursorGlow {
+    display: none !important;
+  }
+  html:not(.force-motion) #space .sky,
+  html:not(.force-motion) #space .aurora {
+    animation: none !important;
+  }
+  .card.glow-edge::before {
+    display: none;
+  }
+}
+
+/* ---- Generic themed scenery (non-space themes) --------------------------
+   A themed nebula (same token-tinted gradients as the starfield) plus a field
+   of slowly floating motif glyphs — <ThemedScenery motifs={[...]} />. Lighter
+   than the bespoke SpaceBackground so every extra theme costs almost nothing. */
+#scenery {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+#scenery .themed-sky {
+  position: absolute;
+  inset: 0;
+  animation: sceneryPulse 16s ease-in-out infinite;
+  background:
+    radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
+    radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
+    radial-gradient(1000px 800px at 50% 120%, hsl(var(--accent) / 0.22), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.12), transparent 60%),
+    hsl(var(--background));
+}
+[data-theme='light'] #scenery .themed-sky {
+  background:
+    radial-gradient(1100px 680px at 84% -10%, hsl(var(--primary) / 0.22), transparent 60%),
+    radial-gradient(900px 600px at 6% 8%, hsl(var(--accent) / 0.2), transparent 60%),
+    radial-gradient(1000px 820px at 50% 120%, hsl(var(--accent) / 0.16), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.1), transparent 60%),
+    hsl(var(--background));
+}
+#scenery .motif {
+  position: absolute;
+  user-select: none;
+  will-change: transform;
+  animation: motifFloat var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
+}
+@keyframes motifFloat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  50% {
+    transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg));
+  }
+}
+/* Subtle nebula "breathing" so the themed backdrop isn't static. */
+@keyframes sceneryPulse {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.06);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(.force-motion) #scenery .motif,
+  html:not(.force-motion) #scenery .themed-sky {
+    animation: none !important;
+  }
+}
+
+/* ---- Snow scenery (the "snow" theme) ------------------------------------ */
+#snow,
+#xmas {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+#snow .snow-sky {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(1200px 800px at 50% -12%, hsl(var(--primary) / 0.18), transparent 60%),
+    radial-gradient(900px 700px at 82% 8%, hsl(var(--accent) / 0.14), transparent 60%), hsl(var(--background));
+}
+/* Snowflakes (shared by snow + christmas). Each drifts down with a sideways sway. */
+#snow .flake,
+#xmas .flake {
+  position: absolute;
+  top: -12px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
+  will-change: transform;
+}
+[data-theme='light'] #snow .flake,
+[data-theme='light'] #xmas .flake {
+  background: hsl(205 45% 82%);
+  box-shadow: 0 0 3px hsl(205 45% 72% / 0.6);
+}
+@keyframes snowFall {
+  0% {
+    transform: translate(0, -12px);
+  }
+  100% {
+    transform: translate(var(--sway, 12px), 112vh);
+  }
+}
+/* Snow settling at the bottom + a frosted cap on cards (snow theme only). */
+#snow .snow-bank {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 9vh;
+  background: linear-gradient(to top, hsl(0 0% 100% / 0.5), transparent);
+  filter: blur(2px);
+}
+[data-theme='light'] #snow .snow-bank {
+  background: linear-gradient(to top, hsl(0 0% 100% / 0.95), transparent);
+}
+[data-scene='snow'] .card::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: 10px;
+  right: 10px;
+  height: 5px;
+  border-radius: 9999px;
+  background: hsl(0 0% 100% / 0.8);
+  filter: blur(1.5px);
+  pointer-events: none;
+}
+
+/* ---- Christmas scenery (the "christmas" theme) -------------------------- */
+#xmas .xmas-sky {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(1000px 700px at 50% -12%, hsl(var(--primary) / 0.14), transparent 55%),
+    radial-gradient(900px 600px at 15% 16%, hsl(var(--accent) / 0.16), transparent 60%),
+    hsl(var(--background));
+}
+#xmas .light {
+  position: absolute;
+  top: 10px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  animation: twinkleLight 2.2s ease-in-out infinite;
+}
+@keyframes twinkleLight {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 9px currentColor;
+  }
+  50% {
+    opacity: 0.35;
+    box-shadow: 0 0 3px currentColor;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(.force-motion) #snow .flake,
+  html:not(.force-motion) #xmas .flake,
+  html:not(.force-motion) #xmas .light {
+    animation: none !important;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,213 @@
+/* A4ui — Spatial Glass design tokens + motion.
+ *
+ * Pure CSS (no @tailwind / @apply) so it can be imported directly by any
+ * consumer: `import 'a4ui/styles.css'`. Dark "night" theme is the default;
+ * `data-theme="light"` on the root opts into the light palette.
+ *
+ * Extracted verbatim from the source project
+ * (sonora precision/alfredorust/solid/src/index.css) — keep in sync until that
+ * app consumes this package instead. */
+
+:root {
+  --background: 222 47% 7%;
+  --foreground: 213 31% 91%;
+  --card: 222 40% 11%;
+  --card-foreground: 213 31% 91%;
+  --muted: 217 33% 17%;
+  /* 75% (not 65%) for WCAG AA contrast on glass/dark surfaces (pa11y/axe). */
+  --muted-foreground: 215 25% 75%;
+  --border: 217 30% 22%;
+  --input: 217 30% 22%;
+  --primary: 217 91% 52%;
+  --primary-foreground: 0 0% 100%;
+  --accent: 199 89% 55%;
+  --accent-foreground: 0 0% 100%;
+  --ring: 217 91% 52%;
+  --destructive: 0 72% 52%;
+  --destructive-foreground: 0 0% 100%;
+
+  /* Semantic data colors (financial direction) — constant across themes. */
+  --data-emit: 160 84% 39%;
+  --data-received: 347 89% 61%;
+  --data-net: 199 89% 48%;
+
+  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
+  --sidebar-w: 248px;
+  --sidebar-w-collapsed: 68px;
+
+  /* Shadow color for glass surfaces (consumed by the glass plugin in preset.js).
+     Undefined in the source project, so its .card box-shadow silently dropped —
+     defined here so the intended elevation renders. Low alpha in use, so one
+     dark value covers both themes. */
+  --shadow: 222 47% 4%;
+  --radius-xl: 1rem;
+}
+
+:root[data-theme='light'] {
+  --background: 214 32% 95%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --muted: 214 30% 92%;
+  /* 38% (not 47%) for WCAG AA contrast on light/glass surfaces (pa11y/axe). */
+  --muted-foreground: 215 22% 38%;
+  --border: 214 24% 84%;
+  --input: 214 32% 91%;
+  --primary: 217 91% 52%;
+  --primary-foreground: 0 0% 100%;
+  --accent: 199 89% 48%;
+  --accent-foreground: 0 0% 100%;
+  --ring: 217 91% 52%;
+  --destructive: 0 72% 50%;
+  --destructive-foreground: 0 0% 100%;
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: 'cv02', 'cv03', 'cv04';
+}
+
+/* ---- Motion (transform/opacity only, short & functional) --------------- */
+
+/* Route/page cross-fade (AppShell wraps routed content in a <Transition>). */
+.page-enter-active,
+.page-exit-active {
+  transition: opacity 0.16s ease-out;
+}
+.page-enter,
+.page-exit-to {
+  opacity: 0;
+}
+
+/* Modal — MUST be @keyframes (Kobalte Dialog presence listens for
+   animationend, not transitionend, or the exit never resolves). */
+@keyframes modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes modal-content-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes modal-content-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+}
+.modal-overlay[data-expanded] {
+  animation: modal-overlay-in 0.15s ease-out;
+}
+.modal-overlay[data-closed] {
+  animation: modal-overlay-out 0.15s ease-in;
+}
+.modal-content[data-expanded] {
+  animation: modal-content-in 0.18s ease-out;
+}
+.modal-content[data-closed] {
+  animation: modal-content-out 0.15s ease-in;
+}
+
+/* Toast — same animationend-only presence mechanism as Dialog. */
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+.toast-item[data-opened] {
+  animation: toast-in 0.2s ease-out;
+}
+.toast-item[data-closed] {
+  animation: toast-out 0.18s ease-in;
+}
+
+/* Table row enter/exit fade. */
+.row-enter-active,
+.row-exit-active {
+  transition: opacity 0.15s ease-out;
+}
+.row-enter,
+.row-exit-to {
+  opacity: 0;
+}
+
+/* Drawer / Modal drawer-variant slide-over (Kobalte Dialog presence →
+   animationend keyframes, keyed off data-expanded/data-closed like Modal). */
+@keyframes drawer-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes drawer-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.drawer-content[data-expanded] {
+  animation: drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.drawer-content[data-closed] {
+  animation: drawer-out 0.2s ease-in;
+}
+
+/* Reduced motion: resolve near-instantly rather than removing outright, so
+   libraries that gate DOM unmount on transitionend/animationend (Kobalte
+   Dialog/Toast, solid-transition-group) still fire the event. Add
+   `force-motion` to <html> to opt back in (the ⚡ / effects toggle). */
+@media (prefers-reduced-motion: reduce) {
+  html:not(.force-motion) *,
+  html:not(.force-motion) *::before,
+  html:not(.force-motion) *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}