web-ui/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background-color: #09080f;
  color: #ede9f8;
}

.story-card {
  @apply rounded-2xl border border-purple-800/40 bg-[#120f1e] p-5 shadow-soft;
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.06); }
  66%       { transform: translate(-25px, 20px) scale(0.94); }
}

@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-35px, 40px) scale(1.04); }
  66%       { transform: translate(30px, -15px) scale(0.96); }
}

@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(20px, 35px) scale(1.08); }
}