/* LlamaPress marketing theme. Served as ONE cached, fingerprinted stylesheet
 * instead of ~26 KB of inline <style> on every marketing page (SEMrush "low
 * text-HTML ratio", 2026-09-04). Emitted by shared/_lpd_theme.html.erb.
 * Three sections, in the order they used to appear in the page:
 *   1. palette + dark surface (was shared/_lpd_theme)
 *   2. light-authored page remap, .lpd-remap (was shared/_lpd_light_compat)
 *   3. sticky header (was the <style> in shared/_lpd_nav)
 * Pure CSS: no ERB, no url() to fingerprinted assets. */

/* ===== 1. palette + dark surface ===== */
  /* --- Palette --- */
  :root, .lpd {
    --ink:        #0B0620;
    --ink-2:      #120A33;
    --ink-3:      #1A1046;
    --violet:     #6D4AFF;
    --violet-2:   #8B6BFF;
    --sky:        #4C8DFF;
    --line:       rgba(255,255,255,0.10);
    --line-2:     rgba(255,255,255,0.18);
    /* Contrast note: on the #0B0620 ink, white at 40% lands around 3.3:1 —
       under the 4.5:1 WCAG AA floor for body text. Nothing dimmer than ~55%
       white should carry copy a visitor is expected to read. */
    --dim:        rgba(233,229,255,0.72);
    --dimmer:     rgba(233,229,255,0.68);
  }
  .lpd {
    background: var(--ink);
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
  }
  .lpd h1, .lpd h2, .lpd h3, .lpd .display { font-family: "Poppins", sans-serif; letter-spacing: -0.02em; }

  /* --- Backdrop: layered radial glows + a faint star field --- */
  .lpd-sky {
    background:
      radial-gradient(1100px 620px at 78% -8%,  rgba(109,74,255,0.38), transparent 62%),
      radial-gradient(760px 520px at 12% 12%,   rgba(76,141,255,0.16), transparent 60%),
      radial-gradient(900px 700px at 60% 105%,  rgba(139,107,255,0.18), transparent 65%),
      linear-gradient(180deg, #0B0620 0%, #120A33 55%, #0B0620 100%);
  }
  .lpd-stars::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(1.6px 1.6px at 8%  4%,  rgba(255,255,255,0.60), transparent),
      radial-gradient(1.4px 1.4px at 24% 9%,  rgba(255,255,255,0.45), transparent),
      radial-gradient(1.8px 1.8px at 42% 3%,  rgba(255,255,255,0.50), transparent),
      radial-gradient(1.2px 1.2px at 75% 7%,  rgba(255,255,255,0.55), transparent),
      radial-gradient(1.5px 1.5px at 92% 14%, rgba(255,255,255,0.40), transparent),
      radial-gradient(1.4px 1.4px at 14% 22%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.2px 1.2px at 58% 19%, rgba(255,255,255,0.38), transparent),
      radial-gradient(1.2px 1.2px at 68% 12%, rgba(255,255,255,0.40), transparent),
      radial-gradient(1.6px 1.6px at 33% 30%, rgba(255,255,255,0.32), transparent),
      radial-gradient(1.6px 1.6px at 88% 42%, rgba(255,255,255,0.35), transparent),
      radial-gradient(1.2px 1.2px at 34% 68%, rgba(255,255,255,0.30), transparent),
      radial-gradient(1.4px 1.4px at 92% 78%, rgba(255,255,255,0.28), transparent),
      radial-gradient(1.2px 1.2px at 52% 88%, rgba(255,255,255,0.22), transparent),
      radial-gradient(1.3px 1.3px at 6%  46%, rgba(255,255,255,0.25), transparent),
      radial-gradient(1.1px 1.1px at 82% 56%, rgba(255,255,255,0.20), transparent);
    pointer-events: none;
  }

  /* --- Glass panels --- */
  .lpd-glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }

  /* --- Blog cards (the glassy card language of /blog and /cookbook) --- */
  .cb-card {
    border-radius: 1rem;
    padding: 2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .cb-card:hover {
    border-color: rgba(139,107,255,0.5);
    background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
    box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9);
  }

  /* --- Buttons --- */
  .lpd-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-weight: 600; border-radius: 0.65rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .lpd-btn:hover { transform: translateY(-2px); }
  .lpd-btn-primary {
    background: var(--violet); color: #fff;
    box-shadow: 0 10px 30px -10px rgba(109,74,255,0.85);
  }
  .lpd-btn-primary:hover { background: #7C5CFF; }
  .lpd-btn-ghost { border: 1px solid var(--line-2); color: #fff; }
  .lpd-btn-ghost:hover { background: rgba(255,255,255,0.06); }

  .lpd-eyebrow {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--dimmer);
  }

  /* Our logo file is a violet llama; the dark design uses it as a white mark.
     Lives here, not on a page — the nav and footer render site-wide, and while
     this rule sat in the home page's own <style> the logo stayed violet on
     every other page. */
  .lpd-llama { filter: brightness(0) invert(1); }

/* ===== 2. light-authored page remap (.lpd-remap) ===== */
  /* ---- surfaces ---- */
  body.lpd-remap .bg-white      { background-color: var(--ink-2) !important; }
  body.lpd-remap .bg-gray-50,
  body.lpd-remap .bg-slate-50,
  body.lpd-remap .bg-base-100   { background-color: var(--ink) !important; }
  body.lpd-remap .bg-gray-100,
  body.lpd-remap .bg-slate-100,
  body.lpd-remap .bg-base-200   { background-color: var(--ink-3) !important; }
  body.lpd-remap .bg-gray-200,
  body.lpd-remap .bg-slate-200  { background-color: #241659 !important; }
  /* Already-dark surfaces stay dark — just aligned to our ink. */
  body.lpd-remap .bg-gray-800,
  body.lpd-remap .bg-gray-900,
  body.lpd-remap .bg-slate-900,
  body.lpd-remap .bg-slate-950  { background-color: var(--ink) !important; }

  /* ---- text ---- */
  body.lpd-remap .text-gray-900,
  body.lpd-remap .text-gray-800,
  body.lpd-remap .text-slate-900,
  body.lpd-remap .text-slate-800,
  body.lpd-remap .text-base-content { color: #FFFFFF !important; }
  body.lpd-remap .text-gray-700,
  body.lpd-remap .text-gray-600,
  body.lpd-remap .text-slate-700,
  body.lpd-remap .text-slate-600 { color: var(--dim) !important; }
  /* gray-400/500 are "muted" on white. Left at the same value as gray-600
     rather than something dimmer: on #0B0620, white below ~55% drops under the
     4.5:1 AA floor, and these classes carry real copy on these pages. */
  body.lpd-remap .text-gray-500,
  body.lpd-remap .text-gray-400,
  body.lpd-remap .text-slate-500,
  body.lpd-remap .text-slate-400 { color: var(--dimmer) !important; }
  /* Light greys were already meant to read on a dark surface. Leave legible. */
  body.lpd-remap .text-gray-300,
  body.lpd-remap .text-gray-200,
  body.lpd-remap .text-slate-300,
  body.lpd-remap .text-slate-200 { color: var(--dim) !important; }

  /* ---- borders and dividers ---- */
  body.lpd-remap .border-gray-100,
  body.lpd-remap .border-slate-100,
  body.lpd-remap .border-gray-200,
  body.lpd-remap .border-slate-200,
  body.lpd-remap .divide-gray-100 > * + *,
  body.lpd-remap .divide-gray-200 > * + * { border-color: var(--line) !important; }
  body.lpd-remap .border-gray-300,
  body.lpd-remap .border-slate-300,
  body.lpd-remap .border-gray-700,
  body.lpd-remap .border-slate-800 { border-color: var(--line-2) !important; }

  /* ---- brand hex classes ----
     #4C3F6D (llama-purple) and #2D2442 (llama-dark) are near-black on white and
     unreadable on ink. #489DF9 (llama-blue) already reads on dark, so it is
     left alone as TEXT and only remapped where it is a surface. */
  body.lpd-remap .text-\[\#4C3F6D\],
  body.lpd-remap .text-\[\#2D2442\],
  body.lpd-remap .text-\[\#2C2350\] { color: var(--violet-2) !important; }
  body.lpd-remap .bg-\[\#F8F9FC\],
  body.lpd-remap .bg-\[\#F8F7FF\]   { background-color: var(--ink-2) !important; }
  body.lpd-remap .border-\[\#4C3F6D\],
  body.lpd-remap .border-\[\#2D2442\] { border-color: var(--line-2) !important; }

  /* ---- saturated accent text ----
     Tailwind's 500–900 steps are tuned to sit on WHITE. On #0B0620 they land
     between 2.6:1 and 4.2:1 — readable-looking in a screenshot, under AA in
     fact. Each family is lifted to its ~300 step, which clears the floor while
     keeping the hue. Measured usage: text-blue-600 x117, text-indigo-600 x46,
     text-emerald-500 x43, text-amber-500 x41. */
  body.lpd-remap .text-blue-500,
  body.lpd-remap .text-blue-600,
  body.lpd-remap .text-blue-700,
  body.lpd-remap .text-blue-800,
  body.lpd-remap .text-blue-900,
  body.lpd-remap .text-sky-500,
  body.lpd-remap .text-sky-600,
  body.lpd-remap .text-cyan-600     { color: #93C5FD !important; }
  body.lpd-remap .text-indigo-500,
  body.lpd-remap .text-indigo-600,
  body.lpd-remap .text-indigo-700,
  body.lpd-remap .text-indigo-800,
  body.lpd-remap .text-purple-500,
  body.lpd-remap .text-purple-600,
  body.lpd-remap .text-purple-700,
  body.lpd-remap .text-violet-600,
  body.lpd-remap .text-fuchsia-600  { color: var(--violet-2) !important; }
  body.lpd-remap .text-emerald-500,
  body.lpd-remap .text-emerald-600,
  body.lpd-remap .text-emerald-700,
  body.lpd-remap .text-emerald-900,
  body.lpd-remap .text-green-500,
  body.lpd-remap .text-green-600,
  body.lpd-remap .text-green-700,
  body.lpd-remap .text-teal-600     { color: #6EE7B7 !important; }
  body.lpd-remap .text-amber-500,
  body.lpd-remap .text-amber-600,
  body.lpd-remap .text-amber-700,
  body.lpd-remap .text-amber-900,
  body.lpd-remap .text-yellow-600,
  body.lpd-remap .text-orange-600   { color: #FCD34D !important; }
  body.lpd-remap .text-red-500,
  body.lpd-remap .text-red-600,
  body.lpd-remap .text-red-700,
  body.lpd-remap .text-red-800,
  body.lpd-remap .text-rose-600,
  body.lpd-remap .text-pink-600     { color: #FCA5A5 !important; }
  /* The 100/200 TEXT steps are pale accents meant to sit on a saturated button
     or banner, which survives the remap — so they are left alone. */

  /* ---- pale accent surfaces (the badge / callout pattern) ----
     `bg-emerald-100 text-emerald-800` and friends are a matched pair. Lifting
     only the text turned those badges into light-on-light at 1.34:1. The
     surface has to move with it: a translucent tint of the same hue over ink
     keeps the colour coding and gives the lightened text something to sit on.
     Measured: bg-blue-50 x90, bg-emerald-50 x42, bg-red-50 x31, bg-amber-50 x28. */
  body.lpd-remap .bg-blue-50,   body.lpd-remap .bg-blue-100,   body.lpd-remap .bg-blue-200,
  body.lpd-remap .bg-sky-50,    body.lpd-remap .bg-sky-100,
  body.lpd-remap .bg-cyan-50,   body.lpd-remap .bg-cyan-100    { background-color: rgba(59,130,246,0.16) !important; }
  body.lpd-remap .bg-indigo-50, body.lpd-remap .bg-indigo-100,
  body.lpd-remap .bg-purple-50, body.lpd-remap .bg-purple-100,
  body.lpd-remap .bg-violet-50, body.lpd-remap .bg-violet-100  { background-color: rgba(139,107,255,0.18) !important; }
  body.lpd-remap .bg-emerald-50, body.lpd-remap .bg-emerald-100,
  body.lpd-remap .bg-green-50,   body.lpd-remap .bg-green-100,
  body.lpd-remap .bg-teal-50,    body.lpd-remap .bg-teal-100   { background-color: rgba(16,185,129,0.16) !important; }
  body.lpd-remap .bg-amber-50,  body.lpd-remap .bg-amber-100,  body.lpd-remap .bg-amber-200,
  body.lpd-remap .bg-yellow-50, body.lpd-remap .bg-yellow-100,
  body.lpd-remap .bg-orange-50, body.lpd-remap .bg-orange-100  { background-color: rgba(245,158,11,0.16) !important; }
  body.lpd-remap .bg-red-50,    body.lpd-remap .bg-red-100,
  body.lpd-remap .bg-rose-50,   body.lpd-remap .bg-rose-100,   body.lpd-remap .bg-rose-200,
  body.lpd-remap .bg-pink-50,   body.lpd-remap .bg-pink-100    { background-color: rgba(244,63,94,0.16) !important; }
  /* Their 700/800/900 text steps are near-black and unreadable on those tints. */
  body.lpd-remap .text-blue-800,   body.lpd-remap .text-sky-800    { color: #93C5FD !important; }
  body.lpd-remap .text-emerald-800, body.lpd-remap .text-green-800,
  body.lpd-remap .text-teal-800    { color: #6EE7B7 !important; }
  body.lpd-remap .text-amber-800,  body.lpd-remap .text-yellow-800,
  body.lpd-remap .text-orange-800  { color: #FCD34D !important; }
  body.lpd-remap .text-indigo-900, body.lpd-remap .text-purple-800,
  body.lpd-remap .text-purple-900  { color: var(--violet-2) !important; }

  /* ---- translucent LIGHT surfaces ----
     Opacity-modified classes are separate tokens (`bg-white/60` is not
     `bg-white`), so the surface rules above never matched them. Over ink they
     composite to a pale grey, and the remapped text then sits light-on-light —
     this was the single biggest source of failures in the first full sweep.

     Only the HIGH-opacity steps are remapped. bg-white/5 x65 and bg-white/10
     x119 are the dark design's own subtle tints and must be left alone. */
  body.lpd-remap .bg-white\/50,
  body.lpd-remap .bg-white\/60,
  body.lpd-remap .bg-white\/70,
  body.lpd-remap .bg-white\/80,
  body.lpd-remap .bg-white\/90,
  body.lpd-remap .bg-white\/95    { background-color: var(--ink-2) !important; }
  /* Pale accent surfaces with an opacity modifier — bg-amber-50/50,
     bg-blue-50/30, bg-emerald-50/70 and ~20 more. Matched with an attribute
     substring rather than enumerated, so a new opacity step is covered
     automatically. The trailing slash is load-bearing: "bg-blue-50/" does NOT
     match bg-blue-500/10, which is a saturated colour that reads fine on ink. */
  body.lpd-remap [class*="bg-gray-50/"],
  body.lpd-remap [class*="bg-gray-100/"],
  body.lpd-remap [class*="bg-slate-50/"],
  body.lpd-remap [class*="bg-base-200/"] { background-color: rgba(255,255,255,0.05) !important; }
  body.lpd-remap [class*="bg-blue-50/"],
  body.lpd-remap [class*="bg-sky-50/"]    { background-color: rgba(59,130,246,0.14) !important; }
  body.lpd-remap [class*="bg-indigo-50/"],
  body.lpd-remap [class*="bg-purple-50/"] { background-color: rgba(139,107,255,0.16) !important; }
  body.lpd-remap [class*="bg-emerald-50/"],
  body.lpd-remap [class*="bg-green-50/"]  { background-color: rgba(16,185,129,0.14) !important; }
  body.lpd-remap [class*="bg-amber-50/"],
  body.lpd-remap [class*="bg-yellow-50/"] { background-color: rgba(245,158,11,0.14) !important; }
  body.lpd-remap [class*="bg-red-50/"],
  body.lpd-remap [class*="bg-rose-50/"]   { background-color: rgba(244,63,94,0.14) !important; }

  /* ---- zinc / neutral / stone ----
     Tailwind ships five grey families. Only gray and slate were covered above. */
  body.lpd-remap .bg-stone-100,
  body.lpd-remap .bg-zinc-100,
  body.lpd-remap .bg-neutral-100  { background-color: var(--ink-3) !important; }
  body.lpd-remap .bg-stone-200,
  body.lpd-remap .bg-zinc-200,
  body.lpd-remap .bg-neutral-200  { background-color: #241659 !important; }
  body.lpd-remap .text-stone-900,
  body.lpd-remap .text-zinc-900,
  body.lpd-remap .text-neutral-900 { color: #FFFFFF !important; }
  body.lpd-remap .text-stone-600,
  body.lpd-remap .text-stone-700,
  body.lpd-remap .text-zinc-600,
  body.lpd-remap .text-neutral-600 { color: var(--dim) !important; }
  body.lpd-remap .border-stone-200,
  body.lpd-remap .border-zinc-200,
  body.lpd-remap .border-neutral-200 { border-color: var(--line) !important; }

  /* ---- the llama-blue CTA ----
     #489DF9 with white text is 2.81:1 — under AA, and that is true on the LIGHT
     site today too, not something the dark theme introduced. On a dark page the
     honest fix is to use the design's own primary, which clears AA comfortably
     and is already the colour of every other CTA on the page. As TEXT, #489DF9
     on ink is too dim, so it lifts to the same blue as the blue-600 family. */
  body.lpd-remap .bg-\[\#489DF9\],
  body.lpd-remap .bg-\[\#3a8ce0\]  { background-color: var(--violet) !important; }
  body.lpd-remap .text-\[\#489DF9\] { color: #93C5FD !important; }
  body.lpd-remap .border-\[\#489DF9\] { border-color: var(--violet-2) !important; }

  /* ---- DaisyUI + prose ----
     The typography plugin sets its own near-black body/heading colours. */
  body.lpd-remap .prose,
  body.lpd-remap .prose p,
  body.lpd-remap .prose li,
  body.lpd-remap .prose td      { color: var(--dim) !important; }
  body.lpd-remap .prose h1,
  body.lpd-remap .prose h2,
  body.lpd-remap .prose h3,
  body.lpd-remap .prose h4,
  body.lpd-remap .prose strong,
  body.lpd-remap .prose th      { color: #FFFFFF !important; }
  body.lpd-remap .prose a       { color: var(--violet-2) !important; }
  body.lpd-remap .prose code    { color: var(--violet-2) !important; background: var(--ink-3) !important; }
  body.lpd-remap .prose blockquote { color: var(--dimmer) !important; border-left-color: var(--line-2) !important; }

  /* ---- shadows read as smudges on dark; soften to a hairline instead ---- */
  body.lpd-remap .shadow-sm,
  body.lpd-remap .shadow,
  body.lpd-remap .shadow-md,
  body.lpd-remap .shadow-lg,
  body.lpd-remap .shadow-xl,
  body.lpd-remap .shadow-2xl { box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9) !important; }

  /* ---- hover variants ----
     Tailwind emits `hover:bg-gray-50` as its own class, so none of the surface
     rules above ever matched it — hovering flashed the raw light colour onto
     the dark page (found on the wiki FAQ accordion, 2026-08-10; also live on
     hover:bg-blue-50 x31). Light-surface hovers become a subtle lift; the blue
     tint hover follows the bg-blue-50 mapping. hover:bg-white and saturated
     hovers are deliberate fill-on-hover button designs and are left alone. */
  body.lpd-remap .hover\:bg-gray-50:hover,
  body.lpd-remap .hover\:bg-gray-100:hover,
  body.lpd-remap .hover\:bg-slate-50:hover,
  body.lpd-remap .hover\:bg-slate-100:hover,
  body.lpd-remap [class*="hover:bg-gray-50/"]:hover { background-color: rgba(255,255,255,0.06) !important; }
  body.lpd-remap .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.16) !important; }

  /* ---- ESCAPE HATCH ----
     Some things must stay light on a dark page: a screenshot, a chart with a
     white plot area, the Leo modal's white spreadsheet preview, the light
     DaisyUI contact modal. Put .lpd-keep on a wrapper and its subtree opts out.

     Implemented as an explicit inverse map rather than `all: revert` — revert
     would strip EVERY inherited style on the element, not just the remap. Each
     selector here carries one more class than its counterpart above, so at
     equal !important the more specific rule wins. */
  body.lpd-remap .lpd-keep .bg-white      { background-color: #FFFFFF !important; }
  body.lpd-remap .lpd-keep .bg-gray-50,
  body.lpd-remap .lpd-keep .bg-slate-50   { background-color: #F9FAFB !important; }
  body.lpd-remap .lpd-keep .bg-gray-100,
  body.lpd-remap .lpd-keep .bg-slate-100  { background-color: #F3F4F6 !important; }
  body.lpd-remap .lpd-keep .text-gray-900,
  body.lpd-remap .lpd-keep .text-slate-900 { color: #111827 !important; }
  body.lpd-remap .lpd-keep .text-gray-800 { color: #1F2937 !important; }
  body.lpd-remap .lpd-keep .text-gray-700,
  body.lpd-remap .lpd-keep .text-slate-700 { color: #374151 !important; }
  body.lpd-remap .lpd-keep .text-gray-600,
  body.lpd-remap .lpd-keep .text-slate-600 { color: #4B5563 !important; }
  body.lpd-remap .lpd-keep .text-gray-500,
  body.lpd-remap .lpd-keep .text-slate-500 { color: #6B7280 !important; }
  body.lpd-remap .lpd-keep .text-gray-400,
  body.lpd-remap .lpd-keep .text-slate-400 { color: #9CA3AF !important; }
  body.lpd-remap .lpd-keep .text-\[\#4C3F6D\] { color: #4C3F6D !important; }
  body.lpd-remap .lpd-keep .text-\[\#2D2442\] { color: #2D2442 !important; }
  body.lpd-remap .lpd-keep .border-gray-100,
  body.lpd-remap .lpd-keep .border-slate-100 { border-color: #F3F4F6 !important; }
  body.lpd-remap .lpd-keep .border-gray-200,
  body.lpd-remap .lpd-keep .border-slate-200 { border-color: #E5E7EB !important; }
  body.lpd-remap .lpd-keep .border-gray-300 { border-color: #D1D5DB !important; }
  body.lpd-remap .lpd-keep .hover\:bg-gray-50:hover,
  body.lpd-remap .lpd-keep .hover\:bg-slate-50:hover  { background-color: #F9FAFB !important; }
  body.lpd-remap .lpd-keep .hover\:bg-gray-100:hover,
  body.lpd-remap .lpd-keep .hover\:bg-slate-100:hover { background-color: #F3F4F6 !important; }
  body.lpd-remap .lpd-keep .hover\:bg-blue-50:hover   { background-color: #EFF6FF !important; }

/* ===== 3. sticky header (shared/_lpd_nav) ===== */
  /* --- Sticky header ------------------------------------------------------
 The header lives INSIDE the hero <section>, which is overflow-hidden. That
 rules out position:sticky (an overflow ancestor kills it), so once the
 visitor scrolls past it we switch it to position:fixed — fixed elements are
 laid out against the viewport and so escape the ancestor's clipping. A
 spacer takes over its height at that moment, otherwise the page jumps up by
 the header's height the instant it leaves the flow. */
  /* The bar carries its OWN dark background by default. It renders on ~100
     pages, most of which are still light — and a transparent bar over a white
     body means white nav text and a white llama on white, i.e. an invisible
     header. Only a page that has gone dark gets the transparent treatment,
     where the bar is meant to float over the hero gradient. */
  #lpd-header { background: var(--ink); color: #FFFFFF; }
  body.lpd-dark #lpd-header { background: transparent; }

  /* Specificity note: this needs `body` in front so it beats BOTH rules above
     once the bar goes sticky, on light and dark pages alike. */
  body #lpd-header.lpd-header-stuck {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: rgba(11, 6, 32, 0.82);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
box-shadow: 0 12px 34px -22px rgba(0,0,0,0.9);
animation: lpd-header-drop .28s ease-out;
  }
  @keyframes lpd-header-drop {
from { transform: translateY(-100%); }
to   { transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .lpd-header-stuck { animation: none; } }

  /* --- Nav mega menus: CSS-only, open on hover or keyboard focus --- */
  .lpd-nav-item { position: relative; }
  .lpd-mega {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(6px);
padding-top: 14px; /* closes the gap so hovering down into the panel doesn't drop it */
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 40;
  }
  .lpd-nav-item:hover .lpd-mega,
  .lpd-nav-item:focus-within .lpd-mega {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
  }
  .lpd-mega-panel {
background: linear-gradient(180deg, rgba(26,16,70,0.98), rgba(11,6,32,0.98));
border: 1px solid var(--line-2);
border-radius: 1rem;
box-shadow: 0 30px 70px -20px rgba(0,0,0,0.65);
backdrop-filter: blur(16px);
  }
  .lpd-mega-link {
display: flex; align-items: flex-start; gap: 0.7rem;
padding: 0.55rem 0.6rem; border-radius: 0.6rem;
transition: background-color .15s ease;
  }
  .lpd-mega-link:hover { background: rgba(255,255,255,0.06); }
  .lpd-mega-link i { color: var(--violet-2); width: 1.1em; margin-top: 0.2rem; text-align: center; }

  /* --- Mobile menu (below lg, where the mega menus are hidden) ---
 The panel is absolutely positioned inside the header so it follows the bar
 when the header flips to position:fixed on scroll. Opening it locks body
 scroll, so an in-flow (unstuck) header can't be scrolled out from under it.
 The panel scrolls itself when the link list is taller than the viewport. */
  .lpd-mobile-panel {
position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
background: linear-gradient(180deg, rgba(26,16,70,0.99), rgba(11,6,32,0.99));
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line-2);
box-shadow: 0 30px 60px -24px rgba(0,0,0,0.95);
max-height: calc(100vh - 76px);
overflow-y: auto;
overscroll-behavior: contain;
animation: lpd-menu-drop .2s ease-out;
  }
  @keyframes lpd-menu-drop {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .lpd-mobile-panel { animation: none; } }

  /* <details>/<summary> gives us accordions with zero JS. Strip the native
 disclosure triangle in both engines and spin our own chevron instead. */
  .lpd-mobile-panel summary { list-style: none; cursor: pointer; }
  .lpd-mobile-panel summary::-webkit-details-marker { display: none; }
  .lpd-mobile-panel details[open] .lpd-m-chev { transform: rotate(180deg); }
  .lpd-m-chev { transition: transform .18s ease; }
  .lpd-m-row {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 0.85rem 0.25rem;
font-size: 1rem; color: rgba(255,255,255,0.9);
border-bottom: 1px solid var(--line);
  }
  .lpd-m-link {
display: flex; align-items: flex-start; gap: 0.7rem;
padding: 0.6rem 0.25rem 0.6rem 0.9rem;
color: rgba(255,255,255,0.78); font-size: 0.94rem;
  }
  .lpd-m-link i { color: var(--violet-2); width: 1.1em; margin-top: 0.15rem; text-align: center; }
  .lpd-m-link:active { color: #fff; }

/* ===== 4. index cards (/blog, /cookbook, /wiki) ===== */
/* One class per role instead of ~1 KB of utility classes per card: /blog renders
   ~110 cards, so the markup alone was 120 KB (SEMrush low text-HTML ratio, 2026-09-04).
   The three index pages share these; each page used to carry its own copy of .cb-card. */
.cb-card { display: block; border-radius: 1rem; padding: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.cb-card:hover { border-color: rgba(139,107,255,0.5);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9); }
.cb-card.hidden { display: none; }
.cb-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.cb-pill { display: inline-block; border-radius: 9999px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 9px; line-height: 1.3; padding: .25rem .625rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); }
.cb-pill-blue   { background: rgba(59,130,246,.15);  color: #93c5fd; border-color: rgba(59,130,246,.3); }
.cb-pill-violet { background: rgba(124,77,255,.15);  color: #c4b5fd; border-color: rgba(124,77,255,.3); }
.cb-pill-amber  { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(251,191,36,.3); }
.cb-title { font-size: 1.25rem; line-height: 1.25; font-weight: 700; color: #fff; transition: color .15s ease; }
.cb-card:hover .cb-title { color: #93c5fd; }
.cb-summary { font-size: .875rem; font-weight: 300; color: rgba(255,255,255,.6); margin-top: .5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1rem; }
.cb-tag { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.45); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: .25rem; padding: .125rem .375rem; }
.cb-read { margin-top: 1rem; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .875rem; font-weight: 600; color: #93c5fd; transition: color .15s ease; }
.cb-card:hover .cb-read { color: #fff; }