:root {
  /* === 10-color pastel palette (used everywhere) === */
  --c-periwinkle: #aab4d6;
  --c-sky:        #aac6d6;
  --c-ink:        #a4b0c8;
  --c-mint:       #aad6c6;
  --c-sage:       #b6d6b0;
  --c-butter:     #d6d0aa;
  --c-peach:      #d6c0aa;
  --c-rose:       #d6b0b6;
  --c-mauve:      #d4aac4;
  --c-lavender:   #c4aad6;
  --c-sand:       #d2c2aa;

  /* Richer pastels (for bars, links, gradient stops) - same hues, more saturation */
  --c-periwinkle-r: #6d7eb4;
  --c-sky-r:        #6d96b4;
  --c-ink-r:        #4a5b88;
  --c-mint-r:       #6db49a;
  --c-sage-r:       #7eaa78;
  --c-butter-r:     #b4a86d;
  --c-peach-r:      #b48868;
  --c-rose-r:       #b46d78;
  --c-mauve-r:      #aa6d96;
  --c-lavender-r:   #966daa;
  --c-sand-r:       #a89870;

  /* === Foundation (cool-tinted, not pure black) === */
  --bg: #fbf9f5;
  --fg: #272c36;          /* cool slate, slight blue-purple cast */
  --fg-soft: #3d4252;     /* for headings – lighter, more refined */
  --muted: #6d6f7a;
  --accent: var(--c-ink-r);
  --accent-soft: rgba(74, 91, 136, 0.16);
  --border: #e6e2da;
  --code-bg: #f3f0ea;
  --shadow: 0 14px 40px rgba(28, 32, 50, 0.18), 0 4px 12px rgba(28, 32, 50, 0.09);

  /* === Cohesive callouts: three cool blues from the same family === */
  /* All callouts share one faint cool-tinted bg; only the left bar differs */
  --callout-bg: rgba(124, 138, 171, 0.10);
  --tip-bar: var(--c-sky-r);
  --note-bar: var(--c-periwinkle-r);
  --warning-bar: var(--c-ink-r);
  --info-bar: var(--c-mint-r);

  /* === Background atmosphere === */
  --grain-opacity: 0.05;
  --blob-1: rgba(170, 180, 214, 0.32);   /* periwinkle - main */
  --blob-2: rgba(184, 160, 214, 0.28);   /* lavender purple - main */
  --blob-3: rgba(170, 198, 214, 0.20);   /* sky - now actually visible */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1014;
    --fg: #e2e4ea;
    --fg-soft: #c8ccd6;
    --muted: #8e90a0;
    --border: #2a2c34;
    --code-bg: #1a1b22;
    --shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);

    /* Pastels stay readable on dark - same hues, lifted a bit */
    --c-periwinkle: #8a98c4;
    --c-sky:        #8aaac4;
    --c-ink:        #8597bf;
    --c-mint:       #8ac4ac;
    --c-sage:       #94c490;
    --c-butter:     #c4bc8a;
    --c-peach:      #c4a48a;
    --c-rose:       #c48e96;
    --c-mauve:      #c08aa8;
    --c-lavender:   #a88ac4;
    --c-sand:       #b8a890;

    /* In dark mode "richer" = same as base pastel (already vibrant on dark) */
    --c-periwinkle-r: var(--c-periwinkle);
    --c-sky-r:        var(--c-sky);
    --c-ink-r:        var(--c-ink);
    --c-mint-r:       var(--c-mint);
    --c-sage-r:       var(--c-sage);
    --c-butter-r:     var(--c-butter);
    --c-peach-r:      var(--c-peach);
    --c-rose-r:       var(--c-rose);
    --c-mauve-r:      var(--c-mauve);
    --c-lavender-r:   var(--c-lavender);
    --c-sand-r:       var(--c-sand);

    --accent: var(--c-ink-r);
    --accent-soft: rgba(133, 151, 191, 0.18);

    --callout-bg: rgba(133, 151, 191, 0.08);
    --tip-bar: var(--c-sky-r);
    --note-bar: var(--c-periwinkle-r);
    --warning-bar: var(--c-ink-r);
    --info-bar: var(--c-mint-r);

    --grain-opacity: 0.04;
    --blob-1: rgba(138, 152, 196, 0.22);   /* periwinkle - main */
    --blob-2: rgba(168, 138, 196, 0.20);   /* lavender purple - main */
    --blob-3: rgba(138, 170, 196, 0.14);   /* sky - now actually visible */
  }
}

* { box-sizing: border-box; }

/* Only html paints the bg so the fixed pseudo-element blobs show through */
html {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Lava-lamp blob 1 - periwinkle, very elongated, drifts through center */
body::before {
  content: '';
  position: fixed;
  top: -22vmin;
  left: -25vmin;
  width: 115vmin;
  height: 60vmin;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse, var(--blob-1), transparent 65%);
  animation: drift-1 11s ease-in-out infinite alternate;
  will-change: transform, border-radius;
}

/* Lava-lamp blob 2 - lavender, different aspect, crosses paths */
body::after {
  content: '';
  position: fixed;
  bottom: -28vmin;
  right: -28vmin;
  width: 95vmin;
  height: 70vmin;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse, var(--blob-2), transparent 65%);
  animation: drift-2 14s ease-in-out infinite alternate;
  will-change: transform, border-radius;
}

/* Sky backdrop blob - visible now, drifts on its own path */
html::after {
  content: '';
  position: fixed;
  top: 25vh;
  left: 30vw;
  width: 80vmin;
  height: 55vmin;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse, var(--blob-3), transparent 65%);
  animation: drift-3 17s ease-in-out infinite alternate;
  will-change: transform, border-radius;
}

/* Paper grain on top of blobs but behind content */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Drift + rotation + decoupled scaleX/scaleY + per-frame border-radius
   morphing. Non-aligned keyframe stops (17%, 41%, 67%, 89%) and different
   patterns per blob mean the extreme stretches never sync - random feel. */

@keyframes drift-1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    border-radius: 55% 45% 50% 50% / 60% 50% 50% 40%;
  }
  17% {
    /* very long & thin */
    transform: translate(28vw, 18vh) rotate(15deg) scale(1.55, 0.55);
    border-radius: 30% 70% 65% 35% / 40% 60% 40% 60%;
  }
  41% {
    transform: translate(50vw, 28vh) rotate(-8deg) scale(0.95, 1.20);
    border-radius: 60% 40% 35% 65% / 65% 35% 55% 45%;
  }
  67% {
    /* squat / shrunken */
    transform: translate(40vw, 45vh) rotate(22deg) scale(0.62, 0.7);
    border-radius: 40% 60% 50% 50% / 50% 50% 60% 40%;
  }
  89% {
    /* long & thin again, opposite tilt */
    transform: translate(28vw, 30vh) rotate(-18deg) scale(1.65, 0.5);
    border-radius: 35% 65% 60% 40% / 30% 60% 40% 70%;
  }
  100% {
    transform: translate(22vw, 52vh) rotate(8deg) scale(1.05, 1);
    border-radius: 55% 45% 50% 50% / 55% 45% 55% 45%;
  }
}

@keyframes drift-2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
  }
  23% {
    /* shrunk */
    transform: translate(-32vw, -20vh) rotate(-25deg) scale(0.65, 0.75);
    border-radius: 65% 35% 45% 55% / 35% 55% 45% 65%;
  }
  47% {
    /* tall & narrow */
    transform: translate(-58vw, -8vh) rotate(12deg) scale(0.55, 1.5);
    border-radius: 30% 70% 55% 45% / 60% 40% 60% 40%;
  }
  71% {
    transform: translate(-44vw, -32vh) rotate(-22deg) scale(1.18, 0.95);
    border-radius: 55% 45% 35% 65% / 45% 65% 35% 55%;
  }
  88% {
    /* very long & thin */
    transform: translate(-28vw, -42vh) rotate(28deg) scale(1.7, 0.5);
    border-radius: 40% 60% 50% 50% / 50% 60% 40% 50%;
  }
  100% {
    transform: translate(-22vw, -48vh) rotate(-12deg) scale(1.08, 1);
    border-radius: 50% 50% 55% 45% / 55% 45% 55% 45%;
  }
}

@keyframes drift-3 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    border-radius: 60% 40% 50% 50% / 55% 45% 55% 45%;
  }
  19% {
    /* very wide & flat */
    transform: translate(-15vw, 20vh) rotate(20deg) scale(1.7, 0.45);
    border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  }
  43% {
    /* shrunk small */
    transform: translate(-25vw, 35vh) rotate(-30deg) scale(0.65, 0.65);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  68% {
    /* tall & thin */
    transform: translate(8vw, 5vh) rotate(25deg) scale(0.55, 1.55);
    border-radius: 70% 30% 40% 60% / 45% 60% 40% 55%;
  }
  86% {
    transform: translate(22vw, -15vh) rotate(-18deg) scale(1.15, 0.85);
    border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%;
  }
  100% {
    transform: translate(28vw, 8vh) rotate(15deg) scale(1, 1.05);
    border-radius: 55% 45% 55% 45% / 55% 45% 55% 45%;
  }
}

main {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  animation: page-in 0.5s ease-out 0.05s both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Headings - Inter, bold, tight, cool-tinted (NOT pure black) */
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 1.6em 0 0.5em;
  color: var(--fg-soft);
  transition: letter-spacing 0.4s ease;
}

h2:hover, h3:hover { letter-spacing: -0.005em; }

h1 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: 0.1em;
  line-height: 1.05;
  /* Color comes from the .wl spans below (gradient applied per-letter) */
}

h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--fg-soft);
  letter-spacing: -0.025em;
}
h3 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-periwinkle-r);
}
h4 { font-size: 1.05rem; color: var(--muted); font-weight: 500; font-style: italic; }

/* Words stay together (no mid-word line breaks); H1 only wraps at spaces */
h1 .word {
  display: inline-block;
  white-space: nowrap;
}

/* Per-letter spans get the gradient (works through nested stacking contexts) */
h1 .wl {
  display: inline-block;
  background-image: linear-gradient(110deg,
    var(--c-periwinkle-r) 0%,
    var(--c-sky-r) 25%,
    var(--c-ink-r) 50%,
    var(--c-sky-r) 75%,
    var(--c-periwinkle-r) 100%
  );
  background-size: 250% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: grad-flow 11s linear infinite;
}

@keyframes grad-flow {
  to { background-position: -250% 0; }
}

h1:hover .wl {
  animation: grad-flow 11s linear infinite, bob 0.65s ease;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  40%      { transform: translateY(-0.32em) rotate(-3deg); }
  70%      { transform: translateY(0.04em) rotate(1.5deg); }
}

/* Blinking terminal cursor after H1 */
h1::after {
  content: '_';
  display: inline-block;
  margin-left: 0.08em;
  color: var(--accent);
  animation: blink 1.1s step-end infinite;
  font-weight: 800;
}

@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

h1:hover::after { animation-duration: 0.5s; }

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
}

main a:not(.back-link) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.32s ease;
  padding-bottom: 2px;
}

main a:not(.back-link):hover {
  background-size: 100% 1.5px;
}

/* Body text */
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: 0.25em; }
strong { font-weight: 600; color: var(--fg-soft); }

/* Have fun. - italic warm gold, distinct from cool link color */
.have-fun {
  font-style: italic;
  font-weight: 500;
  color: var(--c-butter-r);
}

/* Images: rounded + strong elegant shadow */
img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: block;
  margin: 1.8em auto;
}

/* Code - JetBrains Mono */
code {
  background: var(--code-bg);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-weight: 500;
}

pre {
  background: var(--code-bg);
  padding: 1em 1.1em;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.5;
  border: 1px solid var(--border);
}

pre code { background: none; padding: 0; font-size: inherit; font-weight: 400; }

/* Tables */
table {
  border-collapse: collapse;
  margin: 1.2em 0;
  width: 100%;
  font-size: 0.95rem;
}

th, td {
  padding: 0.55em 0.8em;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}

/* Quotes & dividers */
blockquote {
  border-left: 3px solid var(--c-lavender);
  margin: 1em 0;
  padding: 0.1em 0 0.1em 1em;
  color: var(--muted);
  font-style: italic;
}

blockquote p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Callouts - unified faint bg, only the left bar varies (3 adjacent pastels) */
.callout {
  border-left: 3px solid var(--note-bar);
  background: var(--callout-bg);
  padding: 0.85em 1.1em;
  margin: 1.25em 0;
  border-radius: 0 10px 10px 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.callout-title {
  font-weight: 600;
  font-size: 0.95em;
  margin-bottom: 0.5em;
  letter-spacing: -0.005em;
  color: var(--fg-soft);
}

.callout-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 0.55em;
  opacity: 0.9;
}

/* Images inside callouts: lighter styling than page-level images */
.callout img {
  margin: 0.5em 0 0;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  max-width: 100%;
}

.callout-tip     .callout-icon { color: var(--tip-bar); }
.callout-note    .callout-icon { color: var(--note-bar); }
.callout-warning .callout-icon { color: var(--warning-bar); }
.callout-info    .callout-icon { color: var(--info-bar); }

.callout-fallback {
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Obsidian-style #tags rendered as small inline chips */
.tag {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78em;
  font-weight: 500;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: var(--callout-bg);
  color: var(--muted);
  letter-spacing: 0.02em;
  vertical-align: 0.05em;
}

.callout-content > :last-child { margin-bottom: 0; }
.callout-content > :first-child { margin-top: 0; }
.callout-content img { margin: 0.5em 0; }

.callout-tip     { border-left-color: var(--tip-bar); }
.callout-warning { border-left-color: var(--warning-bar); }
.callout-info    { border-left-color: var(--info-bar); }

/* Back link */
.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 400;
}

.back-link:hover { color: var(--accent); }

/* Footer */
footer {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

footer p { margin: 0; }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

/* Spinning vinyl */
.vinyl {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
  vertical-align: -2px;
  margin-right: 0.45em;
  opacity: 0.7;
  animation: spin 3.2s linear infinite;
}

.vinyl::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.9;
}

.vinyl::after {
  content: '';
  position: absolute;
  inset: 5.5px;
  background: var(--bg);
  border-radius: 50%;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Selection color */
::selection { background: var(--accent-soft); color: var(--fg); }

/* Mobile */
@media (max-width: 640px) {
  html { font-size: 16px; }
  main { padding: 2rem 1.1rem 1.5rem; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.45rem; }
  body::before, body::after, html::after { width: 80vmin; height: 80vmin; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}