:root {
  --bg: oklch(0.19 0.01 250);
  --surface: oklch(0.235 0.012 250);
  --line: oklch(1 0 0 / 0.085);
  --text: oklch(0.94 0.006 250);
  --text-soft: oklch(0.86 0.008 250);
  --text-dim: oklch(0.72 0.012 250);
  --text-faint: oklch(0.56 0.012 250);
  --accent: #F37521;

  --poster-dark: oklch(0.225 0.012 252);
  --poster-light: oklch(0.9 0.012 80);
  --poster-accent: oklch(0.4 0.11 42);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
::selection { background: color-mix(in oklch, var(--accent) 40%, transparent); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: oklch(0.4 0.012 250); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

.font-display { font-family: 'Oswald', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55); }
  62%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
@keyframes burst-line {
  0%   { opacity: 0; transform: rotate(var(--r)) translateY(-2px) scaleY(0); }
  28%  { opacity: 1; transform: rotate(var(--r)) translateY(-7px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--r)) translateY(-13px) scaleY(0.4); }
}
.heart-pop { animation: heart-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.burst-line-anim { animation: burst-line 0.42s ease-out forwards; }
#root > div { animation: fadeUp .4s ease both; }

/* markdown prose */
.prose { color: var(--text-soft); line-height: 1.72; font-size: 15.5px; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 1em 1.25em; list-style: disc; }
.prose ol { margin: 0 0 1em 1.25em; list-style: decimal; }
.prose li { margin-bottom: 0.35em; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { font-style: italic; color: var(--text-dim); }
.prose h2 { font-family: 'Oswald', sans-serif; font-size: 1.15em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin: 1.4em 0 0.5em; }
.prose h3 { font-family: 'Oswald', sans-serif; font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 1.2em 0 0.4em; }
.prose blockquote { border-left: 3px solid var(--accent); margin: 1em 0; padding: 0.4em 0 0.4em 1em; color: var(--text-dim); font-style: italic; }