:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --border: 240 5.9% 90%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --border: 240 3.7% 15.9%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
}

.logo-font {
  font-family: 'Fuggles', cursive;
}

.no-highlight {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html { scroll-behavior: smooth; }

.gradient-text {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--muted-foreground)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::-webkit-scrollbar { width: 0; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }

/* Prose content for blog posts */
.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-content h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose-content p { margin-bottom: 1rem; line-height: 1.75; color: hsl(var(--foreground)); }
.prose-content a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.prose-content ul, .prose-content ol { margin: 0 0 1rem 1.5rem; }
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin-bottom: 0.35rem; line-height: 1.7; }
.prose-content img { border-radius: 0.5rem; margin: 1.25rem 0; max-width: 100%; }
.prose-content hr { border-color: hsl(var(--border)); margin: 2rem 0; }
.prose-content code { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); padding: 0.15rem 0.4rem; border-radius: 0.3rem; font-size: 0.875em; }
.code-wrapper { position: relative; margin: 1.25rem 0; }
.prose-content pre.code-block { background: #f8fafc; border: 2px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; padding-right: 2.5rem; overflow-x: auto; max-height: 450px; margin: 0; }
.dark .prose-content pre.code-block { background: #18181b; }
.prose-content pre.code-block code { background: none; border: none; padding: 0; font-size: 0.85rem; }
.code-copy-btn { color: hsl(var(--muted-foreground)); cursor: pointer; background: transparent; border: none; }
.code-copy-btn.copied .copy-icon { display: none; }
.code-copy-btn.copied .check-icon { display: inline-flex; }
.katex-block { overflow-x: auto; padding: 0.5rem 0; }

.video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0.5rem; margin: 1.25rem 0; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Callout / info box (matches original blockquote rendering) */
.callout-box { display: flex; gap: 0.75rem; background: hsl(var(--muted)); border-radius: 0.5rem; padding: 1rem 1rem 1rem 1.25rem; margin: 1.25rem 0; border-left: 4px solid hsl(var(--foreground)); font-style: normal; color: hsl(var(--foreground)); }
.callout-icon { flex-shrink: 0; margin-top: 0.15rem; color: hsl(var(--muted-foreground)); }
.callout-content p { margin-bottom: 0; font-style: italic; }
.callout-content p + p { margin-top: 0.5rem; }

.animate-fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.wave {
  display: inline-block;
  animation: wave-animation 2.5s infinite;
  transform-origin: 70% 70%;
}
@keyframes wave-animation {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Masonry-style grids (CSS columns approximate the original's JS masonry) */
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry-3 { column-count: 3; } }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; display: inline-block; width: 100%; }

/* Search command palette */
#search-dialog { background: rgba(0,0,0,0.5); }
#search-dialog .search-panel { background: hsl(var(--background)); }

/* Table of contents */
#toc-container { max-height: calc(100vh - 8rem); overflow-y: auto; }

/* Sticky bar */
#sticky-bar { transition: opacity 0.3s; }