/* ============================================================================
   Palette & tokens
   ========================================================================== */
:root {
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8;
  --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46;
  --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b;
  /* Synaipse brand blues (from synaipse.org: --blue-primary #00629B, etc.) */
  --brand-200:#c5e2f2; --brand-300:#7fbee2; --brand-400:#2e8bc0; --brand-500:#00629b; --brand-600:#003d5c;
  --brand-50:#f0f8fc;
  --sky-300:#7dd3fc; --sky-400:#38bdf8; --sky-500:#0ea5e9;
  --amber-400:#fbbf24; --amber-500:#f59e0b;
  --rose-400:#fb7185; --rose-500:#f43f5e; --red-500:#ef4444;
  --violet-300:#c4b5fd; --pink-300:#f9a8d4;

  --container-lg:33rem;
  --text-2xs:0.75rem; --text-xs:0.8125rem; --text-sm:0.875rem; --text-base:1rem;

  /* Semantic (light) */
  --bg: #ffffff;
  --bg-sidebar: #ffffff;
  --text: var(--zinc-700);
  --text-strong: var(--zinc-900);
  --text-muted: var(--zinc-600);
  --text-faint: var(--zinc-400);
  --border: rgba(24,24,27,0.1);
  --border-soft: rgba(24,24,27,0.05);
  --link: var(--brand-500);
  --link-hover: var(--brand-600);
  --card-bg: var(--zinc-50);
  --header-line: rgba(24,24,27,0.075);
}

html.dark {
  --bg: var(--zinc-900);
  --bg-sidebar: var(--zinc-900);
  --text: var(--zinc-400);
  --text-strong: #ffffff;
  --text-muted: var(--zinc-400);
  --text-faint: var(--zinc-500);
  --border: rgba(255,255,255,0.1);
  --border-soft: rgba(255,255,255,0.05);
  --link: var(--brand-400);
  --link-hover: var(--brand-500);
  --card-bg: rgba(255,255,255,0.025);
  --header-line: rgba(255,255,255,0.075);
}

/* ============================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-sm);
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[hidden] { display: none !important; }

/* ============================================================================
   App shell / layout
   ========================================================================== */
.app { width: 100%; }
.main-column { display: flex; flex-direction: column; min-height: 100vh; }
/* position: relative makes this the containing block for the hero pattern, so
   the hero can span the full content column (up behind the header) — matching
   the reference, where the gradient fills the band above the H1 with no gap. */
.main { flex: 1 0 auto; padding: 3.5rem 1rem 0; position: relative; }

@media (min-width: 640px) { .main { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) {
  .main-column { margin-left: 18rem; }
  .main { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
  .main-column { margin-left: 20rem; }
}

/* Sidebar: collapses to display:contents on mobile so the header floats. */
.sidebar { display: contents; }
.sidebar-logo { display: none; }

@media (min-width: 1024px) {
  .sidebar {
    display: block;
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: 18rem;
    overflow-y: auto;
    padding: 1rem 1.5rem 2rem;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
  }
  .sidebar-logo { display: flex; }
}
@media (min-width: 1280px) { .sidebar { width: 20rem; } }

.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo-mark-svg { height: 1.5rem; width: auto; }
.logo-mark { fill: var(--brand-500); }
html.dark .logo-mark { fill: var(--brand-400); }
.logo-word {
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--zinc-900); line-height: 1;
}
html.dark .logo-word { color: #ffffff; }
.logo-ai { color: var(--brand-500); }
html.dark .logo-ai { color: var(--brand-400); }

/* ============================================================================
   Header (top bar)
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem; height: 3.5rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  transition: background .2s;
}
@media (min-width: 640px) { .header { padding: 0 1.5rem; } }
@media (min-width: 1024px) {
  .header { left: 18rem; z-index: 30; padding: 0 2rem; }
}
@media (min-width: 1280px) { .header { left: 20rem; } }
.header-line {
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--header-line);
}

.header-mobile-left { display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 1024px) { .header-mobile-left { display: none; } }
.header-mobile-logo .logo { height: 1.5rem; }

.header-right { display: flex; align-items: center; gap: 1.25rem; }
.header-nav { display: none; }
@media (min-width: 768px) { .header-nav { display: block; } }
.header-nav ul { display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.header-nav a { font-size: var(--text-sm); color: var(--text-muted); transition: color .15s; }
.header-nav a:hover { color: var(--text-strong); }
.header-divider { display: none; }
@media (min-width: 768px) { .header-divider { display: block; height: 1.25rem; width: 1px; background: var(--border); } }
.header-actions { display: flex; gap: 1rem; align-items: center; }
.header-signin { display: none; }
@media (min-width: 416px) { .header-signin { display: block; } }

.mobile-nav-toggle {
  display: flex; align-items: center; justify-content: center;
  height: 1.5rem; width: 1.5rem; color: var(--zinc-900);
}
html.dark .mobile-nav-toggle { color: #fff; }
.mobile-nav-toggle svg { height: .5rem; width: .625rem; stroke: currentColor; }
@media (min-width: 1024px) { .mobile-nav-toggle { display: none; } }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  height: 1.5rem; width: 1.5rem; border-radius: .375rem; transition: background .15s;
}
.theme-toggle:hover { background: rgba(24,24,27,0.05); }
html.dark .theme-toggle:hover { background: rgba(255,255,255,0.05); }
.theme-icon-sun, .theme-icon-moon { height: 1.25rem; width: 1.25rem; }
.theme-icon-sun { stroke: var(--zinc-900); fill: none; }
.theme-icon-moon { display: none; stroke: #fff; fill: none; }
html.dark .theme-icon-sun { display: none; }
html.dark .theme-icon-moon { display: block; }

/* Search button */
.search-button {
  display: none; align-items: center; gap: .75rem;
  height: 2rem; padding: 0 .625rem 0 .625rem;
  border-radius: 9999px; color: var(--text-faint);
  background: var(--zinc-50); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow .15s;
}
html.dark .search-button { background: rgba(255,255,255,0.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.075); }
.search-button:hover { box-shadow: inset 0 0 0 1px var(--zinc-300); }
@media (min-width: 1024px) { .search-button { display: flex; min-width: 18rem; } }
.search-button .search-icon { height: 1.25rem; width: 1.25rem; stroke: var(--zinc-500); }
.search-button-label { flex: 1; text-align: left; font-size: var(--text-sm); }
.search-kbd { display: flex; gap: 1px; font-family: inherit; }
.search-kbd kbd {
  font-family: inherit; font-size: var(--text-2xs);
  color: var(--zinc-400); background: none;
}
.search-button--mobile {
  display: flex; min-width: 0; padding: 0; height: 1.5rem; width: 1.5rem;
  justify-content: center; box-shadow: none; background: none;
}
.search-button--mobile .search-icon { stroke: var(--zinc-900); }
html.dark .search-button--mobile .search-icon { stroke: var(--zinc-400); }
@media (min-width: 1024px) { .search-button--mobile { display: none; } }

/* ============================================================================
   Sidebar navigation
   ========================================================================== */
.nav { display: none; margin-top: 0; }
@media (min-width: 1024px) { .nav { display: block; margin-top: 2.5rem; } }
.nav.nav--mobile { display: block; margin-top: 0; }
.nav > ul { margin: 0; padding: 0; list-style: none; }

.nav-top-level { display: block; }
@media (min-width: 768px) { .nav-top-level { display: none; } }
.nav-top-level a {
  display: block; padding: .25rem 0; font-size: var(--text-sm); color: var(--text-muted);
}
.nav-top-level a:hover { color: var(--text-strong); }

.nav-group { position: relative; margin-top: 1.5rem; }
.nav-group:first-child { margin-top: 0; }
.nav-group-title { margin: 0; font-size: var(--text-2xs); font-weight: 600; color: var(--text-strong); }
.nav-group-links { position: relative; margin-top: .75rem; padding-left: .5rem; }
.nav-rail { position: absolute; inset: 0 auto 0 .5rem; width: 1px; background: var(--border-soft); }
.nav-group-links > ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid transparent; }
.nav-item { position: relative; }
.nav-link {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .25rem .75rem .25rem 1rem; font-size: var(--text-sm);
  color: var(--text-muted); transition: color .15s;
}
.nav-link:hover { color: var(--text-strong); }
.nav-item.is-active > .nav-link { color: var(--text-strong); }
/* active emerald marker */
.nav-item.is-active::before {
  content: ""; position: absolute; left: .5rem; top: .25rem;
  height: 1.5rem; width: 1px; background: var(--brand-500);
}
.nav-anchors { margin: 0; padding: 0; list-style: none; }
.nav-anchors a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .25rem .75rem .25rem 1.75rem; border-radius: .5rem;
  font-size: var(--text-sm); color: var(--text-muted); transition: color .15s, background .15s;
}
.nav-anchors a .nav-anchor-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-anchors a:hover { color: var(--text-strong); }
.nav-anchors a.is-active { color: var(--text-strong); background: rgba(39,39,42,0.025); }
html.dark .nav-anchors a.is-active { background: rgba(255,255,255,0.025); }
.nav-anchors .tag { line-height: 1.5rem; }

.nav-signin-mobile { margin-top: 1.5rem; }
@media (min-width: 416px) { .nav:not(.nav--mobile) .nav-signin-mobile { display: none; } }
.nav--mobile .nav-signin-mobile { display: block; }
@media (min-width: 1024px) { .nav--mobile .nav-signin-mobile { display: block; } }

/* ============================================================================
   Mobile navigation slide-over
   ========================================================================== */
.mobile-nav { position: fixed; inset: 0; z-index: 60; }
.mobile-nav-backdrop { position: absolute; inset: 0; background: rgba(24,24,27,0.4); backdrop-filter: blur(2px); }
.mobile-nav-panel {
  position: relative; height: 100%; width: min(20rem, 80vw);
  background: var(--bg); padding: 1.5rem; overflow-y: auto;
  box-shadow: 0 0 40px rgba(0,0,0,0.2);
}
.mobile-nav-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }

/* ============================================================================
   Article / prose typography
   ========================================================================== */
.article { display: flex; flex-direction: column; min-height: 100%; padding-top: 4rem; padding-bottom: 2.5rem; }
/* Prose base rhythm — values mirror the original Protocol typography config.
   Intentionally NOT position:relative, so the hero pattern anchors to .main. */
.prose { font-size: var(--text-sm); line-height: 1.75rem; }
/* Constrain text columns; rows break out wider on large screens. */
.prose { --prose-width: 42rem; }
@media (min-width: 1024px) { .prose { --prose-width: 48rem; } }
.prose > h1, .prose > h2, .prose > h3, .prose > h4,
.prose > p, .prose > ul, .prose > ol,
.prose > blockquote, .prose > .note, .prose > .properties,
.prose > .code-group, .prose > pre, .prose > .highlight,
.prose > table, .prose > .button-row, .prose > .not-prose:not(.section),
.prose > .eyebrow {
  max-width: var(--prose-width);
}
@media (min-width: 1280px) {
  .prose > .row, .prose > .section { max-width: 76rem; }
}

.prose h1 {
  margin: 0 0 .5rem; font-size: 1.5rem; line-height: 2rem;
  font-weight: 700; color: var(--text-strong);
}
.prose h2 {
  margin: 4rem 0 .5rem; font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 600; color: var(--text-strong); scroll-margin-top: 6rem;
}
.prose h2.has-eyebrow { margin-top: .5rem; scroll-margin-top: 8rem; }
.prose h3 {
  margin: 2.5rem 0 .5rem; font-size: 1rem; line-height: 1.75rem;
  font-weight: 600; color: var(--text-strong); scroll-margin-top: 6rem;
}
.prose p { margin: 1.5rem 0; }
.prose > p:first-of-type, .prose > *:first-child { margin-top: 0; }
.prose a:not(.button) {
  color: var(--link); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent);
  text-underline-offset: 2px; font-weight: 600;
}
.prose a:not(.button):hover { color: var(--link-hover); }
.prose strong { color: var(--text-strong); font-weight: 600; }
.prose ul, .prose ol { margin: 1.25rem 0; padding-left: 1.625rem; }
.prose li { margin: .5rem 0; padding-left: .375rem; }
.prose ul > li::marker { color: var(--zinc-300); }
html.dark .prose ul > li::marker { color: var(--zinc-600); }
.prose ol > li::marker { color: var(--zinc-500); }
.prose hr { margin: 4rem -1rem; border: 0; border-top: 1px solid var(--border-soft); max-width: none; }
@media (min-width: 640px) { .prose hr { margin-left: -1.5rem; margin-right: -1.5rem; } }
@media (min-width: 1024px) { .prose hr { margin-left: -2rem; margin-right: -2rem; } }
.prose blockquote {
  margin: 1.5rem 0; padding-left: 1rem; font-style: italic;
  border-left: 2px solid var(--border); color: var(--text-strong);
}
.prose .lead { font-size: var(--text-base); line-height: 1.75rem; color: var(--text-muted); }

/* Inline code */
.prose :not(pre) > code {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-strong); background: var(--zinc-100);
  box-shadow: inset 0 0 0 1px var(--zinc-300);
  padding: .125rem .375rem; border-radius: .25rem;
}
html.dark .prose :not(pre) > code {
  background: rgba(63,63,70,0.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  color: #fff;
}

/* Tables */
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--text-sm); }
.prose th { text-align: left; font-weight: 600; color: var(--text-strong); border-bottom: 1px solid var(--zinc-300); padding: .5rem .75rem; }
html.dark .prose th { border-color: var(--zinc-600); }
.prose td { border-bottom: 1px solid var(--border-soft); padding: .5rem .75rem; }

/* Heading anchors */
.heading-anchor {
  display: inline-flex; margin-left: .5rem; opacity: 0;
  color: var(--zinc-400); transition: opacity .15s;
}
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor { opacity: 1; }
.heading-anchor svg { height: 1rem; width: 1rem; stroke: currentColor; fill: none; }

/* Eyebrow (tag + label above a heading) */
.eyebrow { display: flex; align-items: center; gap: .75rem; margin-top: 4rem; }
.eyebrow + h2 { margin-top: .5rem; }
.eyebrow-dot { height: 2px; width: 2px; border-radius: 9999px; background: var(--zinc-300); }
html.dark .eyebrow-dot { background: var(--zinc-600); }
.eyebrow-label { font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--zinc-400); }

/* ============================================================================
   Tags (HTTP methods etc.)
   ========================================================================== */
.tag {
  font-family: ui-monospace, monospace; font-size: 0.625rem; line-height: 1.5rem;
  font-weight: 600; border-radius: .5rem; padding: 0 .375rem;
  box-shadow: inset 0 0 0 1px currentColor;
}
.tag--small { box-shadow: none; padding: 0; }
.tag--get { color: var(--brand-500); background: rgba(46,139,192,0.1); box-shadow: inset 0 0 0 1px var(--brand-300); }
.tag--post { color: var(--sky-500); background: rgba(56,189,248,0.1); box-shadow: inset 0 0 0 1px var(--sky-300); }
.tag--put { color: var(--amber-500); background: rgba(251,191,36,0.1); box-shadow: inset 0 0 0 1px var(--amber-300, #fcd34d); }
.tag--delete { color: var(--red-500); background: rgba(244,63,94,0.08); box-shadow: inset 0 0 0 1px var(--rose-400); }
html.dark .tag--get { color: var(--brand-400); }
html.dark .tag--post { color: var(--sky-400); }
html.dark .tag--put { color: var(--amber-400); }
html.dark .tag--delete { color: var(--rose-400); }
.eyebrow .tag, .code-panel-header .tag { line-height: 1.5rem; }

/* ============================================================================
   Buttons
   ========================================================================== */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .125rem;
  font-size: var(--text-sm); font-weight: 500; border-radius: 9999px;
  padding: .25rem .75rem; transition: background .15s, color .15s, box-shadow .15s;
  overflow: hidden; white-space: nowrap;
}
.button-arrow { height: 1.25rem; width: 1.25rem; margin-top: 2px; stroke: currentColor; }
.button--arrow-right .button-arrow { margin-right: -.25rem; }
.button--arrow-left .button-arrow { margin-left: -.25rem; transform: rotate(180deg); }
.button--block { width: 100%; }

.button--primary { background: var(--zinc-900); color: #fff; }
.button--primary:hover { background: var(--zinc-700); }
html.dark .button--primary { background: rgba(46,139,192,0.1); color: var(--brand-400); box-shadow: inset 0 0 0 1px rgba(46,139,192,0.2); }
html.dark .button--primary:hover { color: var(--brand-300); box-shadow: inset 0 0 0 1px var(--brand-300); }

.button--secondary { background: var(--zinc-100); color: var(--zinc-900); }
.button--secondary:hover { background: var(--zinc-200); }
html.dark .button--secondary { background: rgba(39,39,42,0.4); color: var(--zinc-400); box-shadow: inset 0 0 0 1px var(--zinc-800); }
html.dark .button--secondary:hover { background: var(--zinc-800); color: var(--zinc-300); }

.button--filled { background: var(--zinc-900); color: #fff; }
.button--filled:hover { background: var(--zinc-700); }
html.dark .button--filled { background: var(--brand-500); color: #fff; }
html.dark .button--filled:hover { background: var(--brand-400); }

.button--outline { color: var(--zinc-700); box-shadow: inset 0 0 0 1px var(--border); }
.button--outline:hover { background: rgba(24,24,27,0.025); color: var(--zinc-900); }
html.dark .button--outline { color: var(--zinc-400); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
html.dark .button--outline:hover { background: rgba(255,255,255,0.05); color: #fff; }

.button--text { background: none; padding: 0; color: var(--brand-500); }
.button--text:hover { color: var(--brand-600); }
html.dark .button--text { color: var(--brand-400); }
html.dark .button--text:hover { color: var(--brand-500); }
.button--text .button-arrow { position: relative; top: 1px; }

.button-row, .not-prose .button-row { display: flex; gap: .75rem; margin: 1.5rem 0 4rem; }
.not-prose { /* opt out of prose link styling */ }
.not-prose a { text-decoration: none; font-weight: inherit; }

/* ============================================================================
   Note callout
   ========================================================================== */
.note {
  display: flex; gap: .625rem; margin: 1.5rem 0; padding: 1rem;
  border-radius: 1rem; font-size: var(--text-sm); line-height: 1.5rem;
  border: 1px solid rgba(0,98,155,0.2); background: rgba(240,248,252,0.5);
  color: #003d5c;
}
html.dark .note { border-color: rgba(0,98,155,0.3); background: rgba(0,98,155,0.05); color: var(--brand-200, #c5e2f2); }
.note-icon { margin-top: .25rem; height: 1rem; width: 1rem; flex: none; fill: var(--brand-500); stroke: #fff; }
html.dark .note-icon { fill: rgba(197,226,242,0.2); stroke: #c5e2f2; }
.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }
.note-body p { margin: .5rem 0; }
.note a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ============================================================================
   Properties list
   ========================================================================== */
.properties { margin: 1.5rem 0; }
.properties ul { margin: 0; padding: 0; list-style: none; max-width: 44rem; }
.property { margin: 0; padding: 1rem 0; border-top: 1px solid var(--border-soft); }
.property:first-child { padding-top: 0; border-top: 0; }
.property:last-child { padding-bottom: 0; }
.property dl { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.property dd { margin: 0; }
.property code {
  font-family: ui-monospace, monospace; font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-strong); background: var(--zinc-100);
  box-shadow: inset 0 0 0 1px var(--zinc-300); padding: .125rem .375rem; border-radius: .25rem;
}
html.dark .property code { background: rgba(63,63,70,0.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); color: #fff; }
.property-type { font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--zinc-400); }
html.dark .property-type { color: var(--zinc-500); }
.property-desc { width: 100%; flex: none; color: var(--text-muted); }
.property-desc > :first-child { margin-top: 0; }
.property-desc > :last-child { margin-bottom: 0; }
.property-desc p { margin: .5rem 0 0; }

/* ============================================================================
   Row / Col layout
   ========================================================================== */
.row { display: grid; grid-template-columns: 1fr; align-items: start; gap: 2.5rem 4rem; margin: 1.5rem 0; }
@media (min-width: 1280px) { .row { grid-template-columns: 1fr 1fr; } }
.col > :first-child { margin-top: 0; }
.col > :last-child { margin-bottom: 0; }
@media (min-width: 1280px) { .col--sticky { position: sticky; top: 6rem; } }

/* ============================================================================
   Code blocks & groups
   ========================================================================== */
.code-group {
  margin: 1.5rem 0; border-radius: 1rem; overflow: hidden;
  background: var(--zinc-900); box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
html.dark .code-group { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.code-group-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1rem;
  min-height: calc(3rem + 1px); padding: 0 1rem;
  border-bottom: 1px solid var(--zinc-700); background: var(--zinc-800);
}
html.dark .code-group-header { border-color: var(--zinc-800); background: transparent; }
/* `.code-group` prefix raises specificity above `.prose h3` so the title
   keeps its white color and tight spacing inside prose content. */
.code-group .code-group-title { margin: 0 auto 0 0; padding: .75rem 0 0; font-size: var(--text-xs); font-weight: 600; color: #fff; }
.code-tabs { display: flex; gap: 1rem; margin-bottom: -1px; font-size: var(--text-xs); font-weight: 500; }
.code-tab {
  padding: .75rem 0; border-bottom: 1px solid transparent; color: var(--zinc-400);
  transition: color .15s;
}
.code-tab:hover { color: var(--zinc-300); }
.code-tab.is-active { border-color: var(--brand-500); color: var(--brand-400); }

.code-panels { position: relative; }
.code-panel { display: none; }
.code-panel.is-active { display: block; animation: code-panel-in .25s ease both; }
@keyframes code-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.code-tab { position: relative; }
.code-panel-header {
  display: flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 1rem;
  background: var(--zinc-900); border-bottom: 1px solid rgba(255,255,255,0.075);
}
.code-panel-header .header-dot { height: 2px; width: 2px; border-radius: 9999px; background: var(--zinc-500); }
.code-label { font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--zinc-400); }
.code-pre { position: relative; }
.code-group .code-pre pre,
.code-group pre.highlight {
  margin: 0; padding: 1rem; overflow-x: auto;
  font-size: var(--text-xs); line-height: 1.5rem; color: #fff; background: transparent;
}
.code-group code { font-size: inherit; background: none; box-shadow: none; padding: 0; color: inherit; }

/* Copy button */
.copy-button {
  position: absolute; top: .75rem; right: 1rem;
  display: flex; align-items: center; gap: .25rem;
  padding: .25rem .75rem; border-radius: 9999px; font-size: var(--text-2xs); font-weight: 500;
  color: var(--zinc-400); background: rgba(255,255,255,0.05); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .15s, background .15s;
}
.code-pre:hover .copy-button, .copy-button:focus { opacity: 1; }
.copy-button:hover { background: rgba(255,255,255,0.075); }
.copy-button.is-copied { background: rgba(46,139,192,0.1); box-shadow: inset 0 0 0 1px rgba(46,139,192,0.2); color: var(--brand-400); }
.copy-button .copy-done { display: none; }
.copy-button.is-copied .copy-idle { display: none; }
.copy-button.is-copied .copy-done { display: inline; }

/* Standalone fenced code (outside a code group) */
.prose > .highlight, .col > .highlight {
  margin: 1.5rem 0; border-radius: 1rem; overflow: hidden;
  background: var(--zinc-900); box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: relative;
}
html.dark .prose > .highlight, html.dark .col > .highlight { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.highlight pre { margin: 0; padding: 1rem; overflow-x: auto; font-size: var(--text-xs); line-height: 1.5rem; color: #fff; background: transparent; }
.highlight code { background: none; box-shadow: none; padding: 0; color: inherit; font-size: inherit; }

/* Rouge syntax tokens (shiki-like palette) */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cd, .highlight .cs { color: var(--zinc-500); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .o, .highlight .ow { color: var(--sky-300); }
.highlight .kc, .highlight .no, .highlight .bp { color: var(--brand-300); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd,
.highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss, .highlight .dl { color: var(--brand-300); }
.highlight .nf, .highlight .fm { color: var(--violet-300); }
.highlight .nb, .highlight .nc, .highlight .nn { color: var(--violet-300); }
.highlight .nv, .highlight .vg, .highlight .vi, .highlight .vc, .highlight .na { color: var(--pink-300); }
.highlight .nt, .highlight .nl, .highlight .py { color: var(--pink-300); }
.highlight .p, .highlight .pi { color: var(--zinc-200); }
.highlight .mi, .highlight .mf, .highlight .m, .highlight .mh, .highlight .mo, .highlight .il { color: var(--brand-300); }
.highlight .nx { color: #fff; }
.highlight .err { color: inherit; background: none; }

/* ============================================================================
   Section heading (Guides / Resources / Libraries)
   ========================================================================== */
.section { margin: 4rem 0; }
.section-heading { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; color: var(--text-strong); }
.card-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  margin-top: 1rem; padding-top: 2.5rem; border-top: 1px solid var(--border-soft);
}
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) {
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.card-grid--libraries { gap: 2.5rem 1.5rem; }

/* Guide cards */
.guide-name { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.guide-desc { margin: .25rem 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.guide-link { margin: 1rem 0 0; }

/* Shared grid pattern (hero + resource cards) */
.grid-pattern { position: absolute; width: 100%; transform: skewY(-18deg); }
.grid-pattern path { fill: none; }
.grid-squares rect { stroke-width: 0; }

/* Resource cards */
.resource-card {
  position: relative; display: flex; border-radius: 1rem; overflow: hidden;
  background: var(--card-bg); transition: box-shadow .2s;
}
.resource-card:hover { box-shadow: 0 10px 15px rgba(24,24,27,0.05); }
html.dark .resource-card:hover { box-shadow: 0 10px 15px rgba(0,0,0,0.05); }
.resource-ring {
  position: absolute; inset: 0; border-radius: 1rem; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(24,24,27,0.075); transition: box-shadow .2s;
}
html.dark .resource-ring { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.resource-card:hover .resource-ring { box-shadow: inset 0 0 0 1px rgba(24,24,27,0.1); }
html.dark .resource-card:hover .resource-ring { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }

.resource-pattern { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; pointer-events: none; }
.resource-pattern .grid-pattern { inset: -30% 0; height: 160%; }

/* Layer 1: faint grid, always visible, fading downward */
.resource-grid-faint {
  position: absolute; inset: 0; transition: opacity .3s;
  -webkit-mask-image: linear-gradient(white, transparent);
  mask-image: linear-gradient(white, transparent);
}
.resource-card:hover .resource-grid-faint { opacity: .5; }
.resource-grid-faint .grid-pattern path { stroke: rgba(0,0,0,0.05); }
.resource-grid-faint .grid-squares rect { fill: rgba(0,0,0,0.02); }
html.dark .resource-grid-faint .grid-pattern path { stroke: rgba(255,255,255,0.025); }
html.dark .resource-grid-faint .grid-squares rect { fill: rgba(255,255,255,0.01); }

/* Layers 2 & 3: revealed under the cursor on hover */
.resource-gradient, .resource-grid-overlay {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  -webkit-mask-image: radial-gradient(180px at var(--mx, 50%) var(--my, 0px), white, transparent);
  mask-image: radial-gradient(180px at var(--mx, 50%) var(--my, 0px), white, transparent);
}
.resource-gradient { background: linear-gradient(to right, #dcedf7, #eff7fc); }
html.dark .resource-gradient { background: linear-gradient(to right, #0e2737, #123040); }
.resource-grid-overlay { mix-blend-mode: overlay; }
.resource-grid-overlay .grid-pattern path { stroke: rgba(0,0,0,0.7); }
.resource-grid-overlay .grid-squares rect { fill: rgba(0,0,0,0.5); }
html.dark .resource-grid-overlay .grid-pattern path { stroke: rgba(255,255,255,0.1); }
html.dark .resource-grid-overlay .grid-squares rect { fill: rgba(255,255,255,0.025); }
.resource-card:hover .resource-gradient,
.resource-card:hover .resource-grid-overlay { opacity: 1; }

.resource-card-inner { position: relative; padding: 4rem 1rem 1rem; }
.resource-icon {
  display: flex; align-items: center; justify-content: center;
  height: 1.75rem; width: 1.75rem; border-radius: 9999px;
  background: rgba(24,24,27,0.05); box-shadow: inset 0 0 0 1px rgba(24,24,27,0.25);
  transition: background .3s, box-shadow .3s;
}
html.dark .resource-icon { background: rgba(255,255,255,0.075); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.resource-card:hover .resource-icon { background: rgba(255,255,255,0.5); }
html.dark .resource-card:hover .resource-icon { background: rgba(127,190,226,0.1); box-shadow: inset 0 0 0 1px var(--brand-400); }
.resource-icon svg { height: 1.25rem; width: 1.25rem; stroke: var(--zinc-700); fill: rgba(63,63,70,0.1); transition: stroke .3s, fill .3s; }
html.dark .resource-icon svg { stroke: var(--zinc-400); fill: rgba(255,255,255,0.1); }
.resource-card:hover .resource-icon svg { stroke: var(--zinc-900); }
html.dark .resource-card:hover .resource-icon svg { stroke: var(--brand-400); fill: rgba(127,190,226,0.1); }
.resource-name { margin: 1rem 0 0; font-size: var(--text-sm); line-height: 1.75rem; font-weight: 600; color: var(--text-strong); }
.resource-name a { color: inherit; }
.resource-link-overlay { position: absolute; inset: 0; border-radius: 1rem; }
.resource-desc { margin: .25rem 0 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Library cards */
.library-card { display: flex; flex-direction: row; gap: 1.5rem; }
.library-logo { height: 3rem; width: 3rem; flex: none; }
.library-body { flex: 1 1 auto; }
.library-name { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.library-desc { margin: .25rem 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.library-link { margin: 1rem 0 0; }

/* ============================================================================
   Hero pattern
   ========================================================================== */
.hero-pattern { position: absolute; inset: 0; z-index: -10; overflow: hidden; max-width: none; margin: 0; }
.hero-pattern-inner { position: absolute; top: 0; left: 50%; height: 25rem; width: 81.25rem; margin-left: -38rem; }
html.dark .hero-pattern-inner { -webkit-mask-image: linear-gradient(white, transparent); mask-image: linear-gradient(white, transparent); }
.hero-pattern-gradient {
  position: absolute; inset: 0; opacity: .4;
  background: linear-gradient(to right, #2e8bc0, #bfe3f5);
  -webkit-mask-image: radial-gradient(farthest-side at top, white, transparent);
  mask-image: radial-gradient(farthest-side at top, white, transparent);
}
html.dark .hero-pattern-gradient { opacity: 1; background: linear-gradient(to right, rgba(46,139,192,0.3), rgba(127,190,226,0.3)); }
.hero-pattern-gradient .grid-pattern { inset: -50% 0; height: 200%; mix-blend-mode: overlay; }
.hero-pattern-gradient .grid-pattern path { stroke: rgba(0,0,0,0.5); }
.hero-pattern-gradient .grid-squares rect { fill: rgba(0,0,0,0.4); }
html.dark .hero-pattern-gradient .grid-pattern path { stroke: rgba(255,255,255,0.05); }
html.dark .hero-pattern-gradient .grid-squares rect { fill: rgba(255,255,255,0.025); }
.hero-blur {
  position: absolute; top: 0; left: 50%; width: 69.5625rem; margin-left: -19rem;
  fill: #fff; filter: blur(26px);
}
html.dark .hero-blur { display: none; }

/* ============================================================================
   Footer
   ========================================================================== */
.footer { width: 100%; max-width: 42rem; margin: 4rem auto 0; padding-bottom: 4rem; }
@media (min-width: 1024px) { .footer { max-width: 66rem; } }
.footer-nav { display: flex; margin-bottom: 2.5rem; }
.footer-nav-prev { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer-nav-next { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; margin-left: auto; }
.footer-nav-title { font-size: var(--text-base); font-weight: 600; color: var(--text-strong); transition: color .15s; }
.footer-nav-title:hover { color: var(--text-muted); }
.footer-bottom {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding-top: 2rem; border-top: 1px solid var(--border-soft);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-copyright { margin: 0; font-size: var(--text-2xs); color: var(--text-muted); }
.footer-social { display: flex; gap: 1rem; }
.social-link .social-icon { height: 1.25rem; width: 1.25rem; fill: var(--zinc-700); transition: fill .15s; }
.social-link:hover .social-icon { fill: var(--zinc-900); }
html.dark .social-link:hover .social-icon { fill: var(--zinc-500); }

/* ============================================================================
   Feedback widget
   ========================================================================== */
.feedback-footer { max-width: 42rem; margin: 4rem auto 0; }
@media (min-width: 1024px) { .feedback-footer { max-width: 66rem; } }
.feedback { position: relative; display: flex; align-items: center; gap: 1.5rem; height: 2rem; }
.feedback-prompt { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.feedback-buttons {
  display: grid; grid-template-columns: 1fr 1px 1fr; height: 2rem;
  border-radius: 9999px; overflow: hidden; border: 1px solid var(--border);
}
.feedback-buttons button { padding: 0 .75rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: background .15s, color .15s; }
.feedback-buttons button:hover { background: rgba(24,24,27,0.025); color: var(--text-strong); }
html.dark .feedback-buttons button:hover { background: rgba(255,255,255,0.05); color: #fff; }
.feedback-divider { background: var(--border); }
.feedback-thanks {
  display: flex; align-items: center; gap: .75rem; padding: .25rem .75rem .25rem .375rem;
  border-radius: 9999px; font-size: var(--text-sm); color: #003d5c;
  background: rgba(240,248,252,0.5); box-shadow: inset 0 0 0 1px rgba(0,98,155,0.2);
}
html.dark .feedback-thanks { color: #c5e2f2; background: rgba(0,98,155,0.05); box-shadow: inset 0 0 0 1px rgba(0,98,155,0.3); }
.feedback-check { height: 1.25rem; width: 1.25rem; flex: none; fill: var(--brand-500); stroke: #fff; }
html.dark .feedback-check { fill: rgba(197,226,242,0.2); stroke: #c5e2f2; }

/* ============================================================================
   Search dialog
   ========================================================================== */
.search-dialog { position: fixed; inset: 0; z-index: 70; }
.search-backdrop { position: absolute; inset: 0; background: rgba(24,24,27,0.4); backdrop-filter: blur(4px); }
.search-panel {
  position: relative; max-width: 36rem; margin: 4rem auto 0;
  background: var(--bg); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25); box-shadow: inset 0 0 0 1px var(--border), 0 25px 50px rgba(0,0,0,0.25);
}
.search-input-wrap { display: flex; align-items: center; gap: .5rem; padding: 0 1rem; border-bottom: 1px solid var(--border-soft); }
.search-input-wrap .search-icon { height: 1.25rem; width: 1.25rem; stroke: var(--zinc-500); flex: none; }
.search-input { flex: 1; height: 3.5rem; border: 0; background: none; color: var(--text-strong); font-size: var(--text-base); outline: none; }
.search-input::placeholder { color: var(--text-faint); }
.search-close { font-size: var(--text-2xs); color: var(--text-faint); padding: .125rem .375rem; border-radius: .25rem; box-shadow: inset 0 0 0 1px var(--border); }
.search-results { margin: 0; padding: .5rem; list-style: none; max-height: 24rem; overflow-y: auto; }
.search-results:empty { display: none; }
.search-result { border-radius: .5rem; }
.search-result a { display: block; padding: .625rem .75rem; border-radius: .5rem; }
.search-result.is-active a, .search-result a:hover { background: var(--zinc-100); }
html.dark .search-result.is-active a, html.dark .search-result a:hover { background: rgba(255,255,255,0.05); }
.search-result-title { font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); }
.search-result-context { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.search-empty { padding: 1.5rem; font-size: var(--text-sm); color: var(--text-muted); text-align: center; }

/* Scroll lock */
body.is-locked { overflow: hidden; }