@a4ui/core 0.38.1 → 0.39.0

package/dist/theme.css

@@ -0,0 +1,1559 @@
+/* @a4ui/core/theme.css: Tailwind 4 entry. Generated by scripts/build-theme-css.mjs; do not edit. */
+@source './index.js';
+@source './commerce.js';
+@source './charts.js';
+@source './Collapse-CrKiFD8K.js';
+@source './motion-CTIBwMCA.js';
+@custom-variant light ([data-theme='light'] &);
+@custom-variant hover (&:hover);
+
+@theme inline {
+  --color-black: #000;
+  --color-white: #fff;
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-ring: hsl(var(--ring));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-data-emit: hsl(var(--data-emit));
+  --color-data-received: hsl(var(--data-received));
+  --color-data-net: hsl(var(--data-net));
+  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --radius-sm: 0.125rem;
+  --radius: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --blur-sm: 4px;
+  --blur: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+  --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+  --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
+  --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
+  --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+  --default-ring-width: 3px;
+  --default-ring-color: rgb(59 130 246 / 0.5);
+  --default-outline-width: 3px;
+}
+
+@layer base {
+*,
+::before,
+::after,
+::backdrop,
+::file-selector-button {
+  border-color: #e5e7eb;
+}
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+button,
+[role='button'] {
+  cursor: pointer;
+}
+:disabled {
+  cursor: default;
+}
+/* Tailwind 4 also strips these from form controls; Tailwind 3 did it for buttons only. */
+input:where(:not([type='button'], [type='reset'], [type='submit'])),
+select,
+optgroup,
+textarea {
+  background-color: revert-layer;
+  border-radius: revert-layer;
+}
+/* Tailwind 4 zeroes margin and padding on everything; Tailwind 3 listed the elements. */
+td,
+th,
+option {
+  padding: revert-layer;
+}
+dialog,
+[popover] {
+  margin: revert-layer;
+}
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: 'cv02', 'cv03', 'cv04';
+}
+}
+
+@layer components {
+.page-enter-active,
+.page-exit-active {
+  transition: opacity 0.16s ease-out;
+}
+.page-enter,
+.page-exit-to {
+  opacity: 0;
+}
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(calc(-100% * var(--dir-x, 1)));
+  background: linear-gradient(
+    calc(90deg * var(--dir-x, 1)),
+    transparent,
+    hsl(var(--foreground) / 0.08),
+    transparent
+  );
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+.accordion-content {
+  overflow: hidden;
+}
+.list-row-stagger {
+  animation: list-row-in 0.35s both ease-out;
+}
+.aurora-drift {
+  animation: aurora-drift 18s ease-in-out infinite;
+}
+.row-enter-active,
+.row-exit-active {
+  transition: opacity 0.15s ease-out;
+}
+.row-enter,
+.row-exit-to {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+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;
+}
+}
+.rk-flame {
+  transform-box: fill-box;
+  transform-origin: 50% 0%;
+  animation: rocketFlame 0.12s ease-in-out infinite alternate;
+}
+.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;
+}
+.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);
+}
+.floaty {
+  animation: floaty 12s ease-in-out infinite;
+}
+.asteroid {
+  border-radius: 40% 55% 50% 45%;
+  background: hsl(var(--foreground) / 0.35);
+}
+.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);
+}
+.elevation-1 {
+  box-shadow: 0 1px 2px hsl(var(--shadow) / 0.06), 0 1px 3px hsl(var(--shadow) / 0.1);
+}
+.elevation-2 {
+  box-shadow: 0 2px 4px hsl(var(--shadow) / 0.06), 0 4px 12px hsl(var(--shadow) / 0.12);
+}
+.elevation-3 {
+  box-shadow: 0 2px 6px hsl(var(--shadow) / 0.08), 0 8px 24px hsl(var(--shadow) / 0.14);
+}
+.elevation-4 {
+  box-shadow: 0 4px 12px hsl(var(--shadow) / 0.1), 0 16px 40px hsl(var(--shadow) / 0.18);
+}
+.pressed {
+  box-shadow: inset 0 1px 2px hsl(var(--shadow) / 0.18);
+}
+.glass-refractive {
+  -webkit-backdrop-filter: blur(14px) saturate(180%);
+  position: relative;
+  overflow: hidden;
+  background: hsl(var(--card) / 0.5);
+  backdrop-filter: blur(14px) saturate(180%);
+  border: 1px solid hsl(var(--foreground) / 0.14);
+  border-radius: var(--radius-xl, 1rem);
+  box-shadow: 0 1px 2px hsl(var(--shadow) / 0.06), 0 8px 24px hsl(var(--shadow) / 0.14), inset 0 1px 0 hsl(0 0% 100% / 0.18);
+}
+.glass-refractive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(150deg, hsl(0 0% 100% / 0.16), transparent 42%);
+  pointer-events: none;
+}
+.card {
+  -webkit-backdrop-filter: blur(8px) saturate(150%);
+  position: relative;
+  background: hsl(var(--card) / 0.55);
+  backdrop-filter: blur(8px) saturate(150%);
+  border: 1px solid hsl(var(--foreground) / 0.16);
+  border-radius: var(--radius-xl, 1rem);
+  box-shadow: 0 1px 2px hsl(var(--shadow) / 0.05), 0 4px 12px hsl(var(--shadow) / 0.1);
+  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
+}
+.a4-field {
+  transition: box-shadow .16s ease, border-color .16s ease;
+}
+.bg-glass {
+  -webkit-backdrop-filter: blur(14px) saturate(160%);
+  background: hsl(var(--card) / 0.72);
+  backdrop-filter: blur(14px) saturate(160%);
+  border: 1px solid hsl(var(--foreground) / 0.14);
+}
+.tile-glass {
+  background: hsl(var(--foreground) / 0.055);
+  border: 1px solid hsl(var(--foreground) / 0.09);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.card {
+  background: hsl(var(--card) / 0.92);
+}
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.bg-glass {
+  background: hsl(var(--card) / 0.95);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+.card {
+  background: hsl(var(--card) / 0.92);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+.bg-glass {
+  background: hsl(var(--card) / 0.95);
+}
+}
+}
+
+@layer utilities {
+:where(.space-y-0\.5 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
+}
+:where(.space-y-1 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
+}
+:where(.space-y-1\.5 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
+}
+:where(.space-y-2 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+:where(.space-y-4 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+}
+:where(.space-y-5 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
+}
+:where(.space-y-6 > :not(:last-child)) {
+  margin-block-end: 0;
+}
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
+}
+:where(.divide-x > :not(:last-child)) {
+  border-inline-end-width: 0;
+}
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-x-reverse: 0;
+    border-right-width: calc(1px * var(--tw-divide-x-reverse));
+    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
+}
+:where(.divide-y > :not(:last-child)) {
+  border-bottom-width: 0;
+}
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
+}
+:where(.divide-border > :not(:last-child)) {
+  border-color: #e5e7eb;
+}
+.divide-border > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 1;
+    border-color: hsl(var(--border) / var(--tw-divide-opacity, 1))
+}
+:where(.divide-border\/60 > :not(:last-child)) {
+  border-color: #e5e7eb;
+}
+.divide-border\/60 > :not([hidden]) ~ :not([hidden]) {
+    border-color: hsl(var(--border) / 0.6)
+}
+.bg-gradient-to-b {
+  --tw-gradient-position: to bottom;
+}
+
+.bg-gradient-to-br {
+  --tw-gradient-position: to bottom right;
+}
+
+.bg-gradient-to-r {
+  --tw-gradient-position: to right;
+}
+
+.bg-gradient-to-t {
+  --tw-gradient-position: to top;
+}
+
+.from-black\/70 {
+  --tw-gradient-from: rgb(0 0 0 / 0.7);
+}
+
+.from-black\/80 {
+  --tw-gradient-from: rgb(0 0 0 / 0.8);
+}
+
+.from-primary\/25 {
+  --tw-gradient-from: hsl(var(--primary) / 0.25);
+}
+
+.from-primary\/30 {
+  --tw-gradient-from: hsl(var(--primary) / 0.3);
+}
+
+.from-primary\/40 {
+  --tw-gradient-from: hsl(var(--primary) / 0.4);
+}
+
+.via-black\/40 {
+  --tw-gradient-via: rgb(0 0 0 / 0.4);
+}
+
+.via-black\/55 {
+  --tw-gradient-via: rgb(0 0 0 / 0.55);
+}
+
+.via-foreground\/25 {
+  --tw-gradient-via: hsl(var(--foreground) / 0.25);
+}
+
+.to-accent\/20 {
+  --tw-gradient-to: hsl(var(--accent) / 0.2);
+}
+
+.to-black\/75 {
+  --tw-gradient-to: rgb(0 0 0 / 0.75);
+}
+
+.outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+.before\:bg-gradient-to-r::before {
+  --tw-gradient-position: to right;
+}
+
+.before\:from-foreground\/60::before {
+  --tw-gradient-from: hsl(var(--foreground) / 0.6);
+}
+
+.hover\:from-primary\/40:hover {
+  --tw-gradient-from: hsl(var(--primary) / 0.4);
+}
+
+.focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+.focus-visible\:outline-none:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+@media (min-width: 640px) {
+:where(.sm\:divide-y-0 > :not(:last-child)) {
+  border-bottom-width: 0;
+}
+.sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-y-reverse: 0;
+        border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+        border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
+    }
+}
+:where(.rtl\:divide-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
+  border-color: #e5e7eb;
+}
+.rtl\:divide-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-x-reverse: 1
+}
+:where(.modal-overlay)[data-expanded] {
+  animation: modal-overlay-in 0.15s ease-out;
+}
+:where(.modal-overlay)[data-closed] {
+  animation: modal-overlay-out 0.15s ease-in;
+}
+:where(.modal-content)[data-expanded] {
+  animation: modal-content-in 0.18s ease-out;
+}
+:where(.modal-content)[data-closed] {
+  animation: modal-content-out 0.15s ease-in;
+}
+:where(.toast-item)[data-opened] {
+  animation: toast-in 0.2s ease-out;
+}
+:where(.toast-item)[data-closed] {
+  animation: toast-out 0.18s ease-in;
+}
+:where(.accordion-content)[data-expanded] {
+  animation: accordion-down 0.2s ease-out;
+}
+:where(.accordion-content)[data-closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+:where(.drawer-content)[data-expanded] {
+  animation: drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+:where(.drawer-content)[data-closed] {
+  animation: drawer-out 0.2s ease-in;
+}
+@media (prefers-reduced-motion: reduce) {
+:where(html):not(.force-motion) * {
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.001ms !important;
+  scroll-behavior: auto !important;
+}
+}
+:where(.navmenu-viewport)[data-expanded] {
+  animation: navmenu-viewport-in 0.2s ease-out;
+}
+:where(.navmenu-viewport)[data-closed] {
+  animation: navmenu-viewport-out 0.15s ease-in;
+}
+:where(.navmenu-content)[data-motion='from-start'] {
+  animation: navmenu-from-start 0.25s ease-out;
+}
+:where(.navmenu-content)[data-motion='from-end'] {
+  animation: navmenu-from-end 0.25s ease-out;
+}
+:where(.navmenu-content)[data-motion='to-start'] {
+  animation: navmenu-to-start 0.25s ease-in forwards;
+}
+:where(.navmenu-content)[data-motion='to-end'] {
+  animation: navmenu-to-end 0.25s ease-in forwards;
+}
+#space {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+#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));
+}
+#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;
+}
+#space #starfield {
+  position: absolute;
+  inset: 0;
+}
+[data-theme='light'] #space #starfield {
+  opacity: 0.85;
+}
+#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);
+}
+:where([data-theme='light']) .twinkle {
+  background: hsl(40 92% 50%);
+  box-shadow: 0 0 14px 3px hsl(40 92% 50% / 0.85);
+}
+#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;
+}
+:where(.floaty).slow {
+  animation-duration: 18s;
+}
+#satellite {
+  animation: satelliteDrift 46s linear infinite;
+}
+#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,
+:where(html):not(.force-motion) .twinkle,
+:where(html):not(.force-motion) .floaty,
+:where(html):not(.force-motion) .shooter,
+html:not(.force-motion) #satellite,
+:where(html):not(.force-motion) .asteroid {
+  animation: none !important;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+html:not(.force-motion) #cursorGlow {
+  display: none !important;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+html:not(.force-motion) #space .sky,
+html:not(.force-motion) #space .aurora {
+  animation: none !important;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+:where(.card).glow-edge::before {
+  display: none;
+}
+}
+#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;
+}
+@media (prefers-reduced-motion: reduce) {
+html:not(.force-motion) #scenery .motif,
+html:not(.force-motion) #scenery .themed-sky {
+  animation: none !important;
+}
+}
+#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));
+}
+#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);
+}
+#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);
+}
+:where([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;
+}
+#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;
+}
+@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;
+}
+}
+:where([data-theme='light']) .card {
+  background: hsl(var(--card) / 0.6);
+  border: 1px solid hsl(var(--border));
+}
+:where(.card).glow-edge::before {
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / .9), hsl(var(--accent) / .25) 45%, transparent 70%);
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity .35s ease;
+  pointer-events: none;
+}
+:where(.card).glow-edge:hover::before {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+:where(.card).glow-edge::before {
+  display: none;
+}
+}
+:where([data-theme='light']) .card.glow-edge::before {
+  padding: 1.5px;
+  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / 1), hsl(var(--accent) / 0.55) 42%, transparent 72%);
+}
+:where(.a4-field):focus,
+:where(.a4-field):focus-within {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.22), 0 0 16px -2px hsl(var(--ring) / 0.55);
+}
+:where(.a4-field)[aria-invalid="true"],
+:where(.a4-field)[data-invalid] {
+  border-color: hsl(var(--destructive));
+  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.18);
+}
+:where(.a4-field)[aria-invalid="true"]:focus,
+:where(.a4-field)[data-invalid]:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.3), 0 0 16px -2px hsl(var(--destructive) / 0.6);
+}
+:where([data-theme='light']) .a4-field:focus,
+:where([data-theme='light']) .a4-field:focus-within {
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3), 0 0 18px -2px hsl(var(--ring) / 0.65);
+}
+:where([data-theme='light']) .bg-glass {
+  background: hsl(var(--card) / 0.85);
+  border: 1px solid hsl(var(--border));
+}
+:where([data-theme='light']) .tile-glass {
+  background: hsl(var(--foreground) / 0.035);
+  border-color: hsl(var(--foreground) / 0.09);
+}
+:where(html).calm .glow-edge::before {
+  display: none !important;
+}
+:where(html).calm .badge {
+  background-color: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+  --tw-ring-color: hsl(var(--border)) !important;
+}
+:where(html).calm .card,
+:where(html).calm .bg-glass {
+  -webkit-backdrop-filter: none;
+  background: hsl(var(--card));
+  backdrop-filter: none;
+}
+:where(html).calm .tile-glass {
+  background: hsl(var(--muted));
+  border-color: hsl(var(--border));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+:where([data-theme='light']) .card {
+  background: hsl(var(--card) / 0.96);
+}
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+:where([data-theme='light']) .bg-glass {
+  background: hsl(var(--card) / 0.97);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+:where([data-theme='light']) .card {
+  background: hsl(var(--card) / 0.96);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+:where([data-theme='light']) .bg-glass {
+  background: hsl(var(--card) / 0.97);
+}
+}
+}
+
+:root {
+  --background: 222 47% 7%;
+  --foreground: 213 31% 91%;
+  --card: 222 40% 11%;
+  --card-foreground: 213 31% 91%;
+  --muted: 217 33% 17%;
+  --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: 199 45% 12%;
+  --ring: 217 91% 52%;
+  --destructive: 0 72% 52%;
+  --destructive-foreground: 0 0% 100%;
+  --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: 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%;
+  --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: 199 45% 12%;
+  --ring: 217 91% 52%;
+  --destructive: 0 72% 50%;
+  --destructive-foreground: 0 0% 100%;
+}
+:root,
+[dir='ltr'] {
+  --dir-x: 1;
+}
+[dir='rtl'] {
+  --dir-x: -1;
+}
+@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);
+  }
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(16px * var(--dir-x, 1)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(16px * var(--dir-x, 1)));
+  }
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(calc(100% * var(--dir-x, 1)));
+  }
+}
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes list-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes aurora-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3%, -3%, 0) scale(1.08);
+  }
+}
+@keyframes drawer-in {
+  from {
+    transform: var(--drawer-offscreen, translateX(100%));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes drawer-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: var(--drawer-offscreen, translateX(100%));
+  }
+}
+@keyframes questionnaire-step-in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(16px * var(--dir-x, 1)));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes questionnaire-step-in-back {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-16px * var(--dir-x, 1)));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-viewport-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-viewport-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+}
+@keyframes navmenu-from-start {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-2.5rem * var(--dir-x, 1)));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-from-end {
+  from {
+    opacity: 0;
+    transform: translateX(calc(2.5rem * var(--dir-x, 1)));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes navmenu-to-start {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(calc(-2.5rem * var(--dir-x, 1)));
+  }
+}
+@keyframes navmenu-to-end {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(calc(2.5rem * var(--dir-x, 1)));
+  }
+}
+@keyframes nebulaShift {
+  0%,
+  100% {
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    filter: hue-rotate(18deg);
+  }
+}
+@keyframes auroraSway {
+  0%,
+  100% {
+    transform: translateX(-2%) scaleY(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateX(3%) scaleY(1.08);
+    opacity: 0.68;
+  }
+}
+@keyframes starDrift {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(var(--dx, 0), var(--dy, 0));
+  }
+}
+@keyframes rocketFlame {
+  from {
+    transform: scaleY(0.8);
+    opacity: 0.85;
+  }
+  to {
+    transform: scaleY(1.06);
+    opacity: 1;
+  }
+}
+@keyframes drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-420px, -300px, 0);
+  }
+}
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.6);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+@keyframes floaty {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-14px) rotate(4deg);
+  }
+}
+@keyframes asteroidDrift {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(-8px, 6px) rotate(25deg);
+  }
+}
+@keyframes satelliteDrift {
+  from {
+    transform: translate(0, 0) rotate(-18deg);
+  }
+  to {
+    transform: translate(126vw, 34vh) rotate(-18deg);
+  }
+}
+@keyframes motifFloat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  50% {
+    transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg));
+  }
+}
+@keyframes sceneryPulse {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.06);
+  }
+}
+@keyframes snowFall {
+  0% {
+    transform: translate(0, -12px);
+  }
+  100% {
+    transform: translate(var(--sway, 12px), 112vh);
+  }
+}
+@keyframes twinkleLight {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 9px currentColor;
+  }
+  50% {
+    opacity: 0.35;
+    box-shadow: 0 0 3px currentColor;
+  }
+}