src/style.css

@import "tailwindcss";

@theme {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: Montserrat, Inter, ui-sans-serif, system-ui;
  --color-bg: #141922;
  --color-card: #171d28;
  --color-muted: #b2bac7;
  --color-foreground: #f5f8fb;
  --color-primary: #8f8cf8;
  --color-primary-600: #7a76f2;
  --radius-xl: 18px;
}

@layer base {
  html { font-family: var(--font-sans); }
  body { @apply bg-[var(--color-bg)] text-[var(--color-foreground)]; }
}

.display-gradient { background: radial-gradient(1200px 600px at 70% 10%, rgba(124,104,238,0.12), rgba(0,0,0,0)), radial-gradient(800px 500px at 90% 30%, rgba(159,134,255,0.12), rgba(0,0,0,0)); }

.glass { @apply bg-[var(--color-card)]/70 backdrop-blur-xl border border-white/10 shadow-xl rounded-2xl; }

.card-subtle { @apply bg-white/[0.04] border border-white/10 rounded-xl; }

.prose-md h1, .prose-md h2, .prose-md h3, .prose-md h4 { @apply font-semibold text-white/90 mt-4 mb-2; }
.prose-md p { @apply text-white/80 leading-relaxed mt-2; }
.prose-md ul { @apply list-disc pl-6 mt-2; }
.prose-md ol { @apply list-decimal pl-6 mt-2; }
.prose-md li { @apply mt-1; }
.prose-md a { @apply text-[var(--color-primary)] underline; }
.prose-md code { @apply bg-white/10 rounded px-1 py-0.5 text-white; }
.prose-md pre { @apply bg-white/10 rounded p-3 overflow-x-auto; }
.prose-md blockquote { @apply border-l-4 border-white/20 pl-4 italic text-white/80; }

@layer utilities {
  .skeleton { position: relative; overflow: hidden; background-color: rgba(255,255,255,0.08); border-radius: 8px; }
  .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0)); animation: skeleton-shimmer 1.2s infinite; }
  @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
}