/* ── Design Tokens ─────────────────────────────────────────────────────────── */

:root, [data-theme='dark'] {
  /* Type scale — fluid, mobile-first */
  --text-xs:   clamp(0.7rem,   0.68rem + 0.1vw,  0.8rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.975rem);
  --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.65vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem  + 1.2vw,  2rem);
  --text-2xl:  clamp(1.75rem,  1.2rem  + 2vw,    3rem);
  --text-hero: clamp(2.25rem,  1.4rem  + 4.5vw,  5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* Radius / Transition */
  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-xl: 1rem; --radius-full: 9999px;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Surfaces */
  --color-bg:             #0d1117;
  --color-surface:        #161b22;
  --color-surface-2:      #1c2128;
  --color-surface-offset: #21262d;
  --color-border:         #30363d;
  --color-divider:        #21262d;

  /* Text */
  --color-text:        #e6edf3;
  --color-text-muted:  #8b949e;
  --color-text-faint:  #484f58;
  --color-text-inverse:#0d1117;

  /* Accent */
  --color-primary:          #7c6bff;
  --color-primary-hover:    #9b8dff;
  --color-primary-active:   #5c4ddf;
  --color-primary-highlight:#1c1a3a;

  /* Code */
  --color-code-bg:     #161b22;
  --color-code-border: #30363d;
  --color-code-text:   #e6edf3;
  --color-keyword:     #ff7b72;
  --color-string:      #a5d6ff;
  --color-comment:     #6e7681;
  --color-function:    #d2a8ff;
  --color-number:      #79c0ff;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);

  /* Content widths */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* Fonts */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --sidebar-w: 260px;
  --header-h:  57px;
}

[data-theme='light'] {
  --color-bg:             #ffffff;
  --color-surface:        #f6f8fa;
  --color-surface-2:      #eaecef;
  --color-surface-offset: #e1e4e8;
  --color-border:         #d0d7de;
  --color-divider:        #eaecef;
  --color-text:           #1f2328;
  --color-text-muted:     #636c76;
  --color-text-faint:     #adb5bd;
  --color-text-inverse:   #f6f8fa;
  --color-primary:          #6351e0;
  --color-primary-hover:    #7c6bff;
  --color-primary-active:   #4a3abf;
  --color-primary-highlight:#ede9ff;
  --color-code-bg:          #f6f8fa;
  --color-code-border:      #d0d7de;
  --color-code-text:        #1f2328;
  --color-keyword:          #cf222e;
  --color-string:           #0a3069;
  --color-comment:          #6e7781;
  --color-function:         #6639ba;
  --color-number:           #0550ae;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:#ffffff; --color-surface:#f6f8fa; --color-surface-2:#eaecef;
    --color-surface-offset:#e1e4e8; --color-border:#d0d7de; --color-divider:#eaecef;
    --color-text:#1f2328; --color-text-muted:#636c76; --color-text-faint:#adb5bd;
    --color-text-inverse:#f6f8fa;
    --color-primary:#6351e0; --color-primary-hover:#7c6bff; --color-primary-active:#4a3abf;
    --color-primary-highlight:#ede9ff;
    --color-code-bg:#f6f8fa; --color-code-border:#d0d7de; --color-code-text:#1f2328;
    --color-keyword:#cf222e; --color-string:#0a3069; --color-comment:#6e7781;
    --color-function:#6639ba; --color-number:#0550ae;
    --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  }
}

/* ── Global resets ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* Offset sticky header so anchor links land below it */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Do NOT set overflow-x: hidden here — it blocks scrollable children
     (code blocks, API tables). Overflow is contained by scroll wrappers. */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
/* 16px minimum on inputs prevents iOS auto-zoom */
input, button, textarea, select { font: inherit; color: inherit; font-size: max(1rem, 16px); }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }

::selection {
  background: color-mix(in oklab, var(--color-primary), transparent 75%);
  color: var(--color-text);
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
button { cursor: pointer; background: none; border: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Site layout — mobile-first ─────────────────────────────────────────────── */

/* Mobile: single-column stacked */
.site-wrapper {
  display: block;
  min-height: 100dvh;
}

/* Desktop: sidebar + content */
@media (min-width: 900px) {
  .site-wrapper {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "sidebar footer";
  }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.site-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Safe area padding for notched devices */
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right))
           var(--space-3) max(var(--space-4), env(safe-area-inset-left));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  height: var(--header-h);
}

@media (min-width: 900px) {
  .site-header {
    padding-inline: var(--space-8);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  /* Minimum 44px touch target height */
  min-height: 44px;
}

.logo-mark { width: 32px; height: 32px; flex-shrink: 0; }

@media (min-width: 480px) {
  .logo-mark { width: 36px; height: 36px; }
}

.logo-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.logo-name span { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.badge {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: 0.2em 0.55em;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-primary), transparent 70%);
  font-weight: 600;
  /* Hide on very small screens to save space */
  display: none;
}
@media (min-width: 480px) {
  .badge { display: inline-block; }
}

/* 44×44 touch targets on all icon buttons */
.btn-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
  /* Increase tap area without affecting layout */
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:hover { background: var(--color-surface-offset); color: var(--color-text); }
.btn-icon:active { background: var(--color-surface-offset); color: var(--color-text); }

/* Hamburger — mobile only */
.btn-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn-hamburger:hover, .btn-hamburger:active {
  background: var(--color-surface-offset);
  color: var(--color-text);
}
.btn-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}
/* Active (open) state */
.btn-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.btn-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hide hamburger on desktop */
@media (min-width: 900px) {
  .btn-hamburger { display: none; }
}

/* ── Nav drawer overlay ──────────────────────────────────────────────────────── */

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--transition);
}
.nav-overlay.open {
  display: block;
  opacity: 1;
}
@media (min-width: 900px) {
  .nav-overlay { display: none !important; }
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.site-sidebar {
  grid-area: sidebar;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-6) 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: off-canvas drawer */
@media (max-width: 899px) {
  .site-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(var(--sidebar-w), 85vw);
    height: 100dvh;
    z-index: 95;
    transform: translateX(-100%);
    transition: transform var(--transition);
    overscroll-behavior: contain;
    padding-top: calc(var(--space-6) + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    /* Clip horizontally so off-canvas sidebar children don't bleed into
       page width on iOS. overflow-x:clip doesn't create a scroll container
       so overflow-y:auto on the base rule still lets the nav scroll. */
    overflow-x: clip;
  }
  .site-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
}

/* Desktop: sticky panel */
@media (min-width: 900px) {
  .site-sidebar {
    position: sticky;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    transform: none !important;
  }
}

.sidebar-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-6);
}

.sidebar-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: block;
  /* 44px min touch target */
  padding: 0.65em var(--space-3);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-link:hover { background: var(--color-surface-offset); color: var(--color-text); }
.sidebar-link:active { background: var(--color-surface-offset); }
.sidebar-link.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 500;
}

/* ── Main content ───────────────────────────────────────────────────────────── */

.site-main {
  grid-area: main;
  /* Fluid padding — compact on mobile, generous on desktop */
  padding: var(--space-8) var(--space-4) var(--space-24);
  /* Constrain prose width */
  max-width: 860px;
  /* Safe area on right for landscape notch */
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

@media (min-width: 600px) {
  .site-main { padding: var(--space-10) var(--space-6) var(--space-24); }
}

@media (min-width: 900px) {
  .site-main { padding: var(--space-12) var(--space-10) var(--space-24); }
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.hero {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 600px) {
  .hero {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
  }
}

.hero-eyebrow {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.hero-title {
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-text);
  /* Prevent hero text from overflowing on small screens */
  overflow-wrap: break-word;
  margin-bottom: var(--space-4);
}
.hero-title em { font-style: normal; color: var(--color-primary); }

@media (min-width: 600px) {
  .hero-title { margin-bottom: var(--space-5); }
}

.hero-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

@media (min-width: 600px) {
  .hero-desc { margin-bottom: var(--space-8); }
}

.hero-actions {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 420px) {
  .hero-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8em 1.4em;
  /* 44px min height */
  min-height: 44px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px color-mix(in oklab, var(--color-primary), transparent 50%);
}
.btn-primary:active { transform: translateY(0); background: var(--color-primary-active); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8em 1.4em;
  min-height: 44px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-text-muted);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); background: var(--color-surface-offset); }

/* ── Feature grid — mobile-first ────────────────────────────────────────────── */

.feature-grid {
  /* Single column on mobile */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

@media (min-width: 500px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

@media (min-width: 600px) {
  .feature-card { padding: var(--space-6); }
}

@media (hover: hover) {
  .feature-card:hover {
    border-color: color-mix(in oklab, var(--color-primary), transparent 60%);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/* Touch tap state */
.feature-card:active {
  border-color: color-mix(in oklab, var(--color-primary), transparent 60%);
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.1rem;
}
.feature-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 100%;
}

/* ── Section headings ───────────────────────────────────────────────────────── */

.doc-section { margin-bottom: var(--space-12); }
.doc-section + .doc-section { padding-top: var(--space-10); border-top: 1px solid var(--color-border); }

@media (min-width: 600px) {
  .doc-section { margin-bottom: var(--space-16); }
  .doc-section + .doc-section { padding-top: var(--space-12); }
}

.section-tag {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.section-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  overflow-wrap: break-word;
}
.section-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.75;
}

/* ── Code blocks ────────────────────────────────────────────────────────────── */

.code-block {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-code-border);
  gap: var(--space-3);
}

.code-lang {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  /* Truncate long language names on tiny screens */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-copy {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-family: var(--font-body);
  color: var(--color-text-muted);
  padding: 0.35em 0.75em;
  min-height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: background var(--transition), color var(--transition);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.code-copy:hover { background: var(--color-surface); color: var(--color-text); }
.code-copy:active { background: var(--color-surface); }
.code-copy.copied { color: #4caf50; border-color: #4caf50; }

/* Scrollable pre — never clips, always scrollable on mobile */
pre {
  padding: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 2.5vw, var(--text-sm));
  line-height: 1.7;
  color: var(--color-code-text);
  /* Don't wrap code — let it scroll horizontally */
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  tab-size: 2;
}

@media (min-width: 600px) {
  pre { padding: var(--space-6); }
}

/* On small mobile, wrap long code lines so nothing gets clipped
   by the parent .code-block { overflow: hidden } border-radius container.
   On wider screens, keep pre; (no wrap) for copy-paste hygiene. */
@media (max-width: 599px) {
  pre {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    overflow-x: hidden;
  }
}

code { font-family: var(--font-mono); }

:not(pre) > code {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  font-size: 0.88em;
  color: var(--color-primary);
  word-break: break-word;
}

/* ── Syntax highlighting ────────────────────────────────────────────────────── */

.tok-kw   { color: var(--color-keyword); }
.tok-str  { color: var(--color-string); }
.tok-fn   { color: var(--color-function); }
.tok-num  { color: var(--color-number); }
.tok-cmt  { color: var(--color-comment); font-style: italic; }
.tok-tag  { color: #7ee787; }
.tok-attr { color: #79c0ff; }

/* ── Live demo boxes ────────────────────────────────────────────────────────── */

.demo-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-4);
}

@media (min-width: 600px) {
  .demo-box { padding: var(--space-6) var(--space-8); }
}

.demo-box h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.demo-counter {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.demo-count-val {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--color-primary);
  min-width: 3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 44×44 minimum touch targets */
.demo-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .demo-btn:hover { background: var(--color-primary); color: #fff; }
}
.demo-btn:active { background: var(--color-primary); color: #fff; }

.todo-input-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.todo-input {
  flex: 1;
  min-width: 0; /* allow flex shrink past content size */
  padding: 0.65em 0.9em;
  /* Force at least 16px to prevent iOS zoom */
  font-size: max(1rem, 16px);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color var(--transition);
  min-height: 44px;
}
.todo-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary), transparent 80%);
}
.todo-input::placeholder { color: var(--color-text-faint); }

.todo-add-btn {
  flex-shrink: 0;
  padding: 0.65em 1em;
  min-height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
@media (hover: hover) {
  .todo-add-btn:hover { background: var(--color-primary-hover); }
}
.todo-add-btn:active { background: var(--color-primary-active); }

.todo-list { display: flex; flex-direction: column; gap: var(--space-2); }

.todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  /* Min touch target height */
  min-height: 44px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.todo-item input[type=checkbox] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.todo-item span { flex: 1; font-size: var(--text-sm); color: var(--color-text); min-width: 0; word-break: break-word; }
.todo-item span.done { text-decoration: line-through; color: var(--color-text-faint); }

.todo-remove {
  flex-shrink: 0;
  /* Generous tap area */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .todo-remove:hover { color: #ff7b72; background: rgba(255,123,114,0.1); }
}
.todo-remove:active { color: #ff7b72; background: rgba(255,123,114,0.12); }

/* ── API tables — horizontal scroll on mobile ────────────────────────────────── */

.table-scroll {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
  overflow: hidden;
}

/* Scroll hint shadow — desktop only (mobile uses stacked layout) */
@media (min-width: 700px) {
  .table-scroll {
    background:
      linear-gradient(to right, var(--color-surface) 30%, transparent),
      linear-gradient(to left, var(--color-surface) 30%, transparent) 100% 0,
      linear-gradient(to right, var(--color-border), var(--color-border)),
      linear-gradient(to left, var(--color-border), var(--color-border)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* ── Mobile: stacked card rows (no horizontal scroll needed) ─────────── */
@media (max-width: 699px) {
  /* Hide the header row on mobile — labels come from data-label */
  .api-table thead { display: none; }
  .api-table tbody, .api-table tr { display: block; }
  .api-table tr {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
  }
  .api-table tr:last-child { border-bottom: none; }
  .api-table td {
    display: block;
    padding: var(--space-1) var(--space-4);
    border-bottom: none;
    word-break: break-word;
  }
  /* First td = method name — make it stand out */
  .api-table td:first-child {
    font-weight: 600;
    padding-bottom: var(--space-1);
  }
  /* Second td = returns */
  .api-table td:nth-child(2) {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding-top: 0;
  }
  /* Third td = description */
  .api-table td:nth-child(3) {
    padding-top: var(--space-1);
    color: var(--color-text);
  }
}

/* ── Desktop: normal table layout ────────────────────────────────────── */
@media (min-width: 700px) {
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .api-table { min-width: 520px; }
  .api-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-offset);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
  }
}

/* Shared td styles (both mobile and desktop) */
.api-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.api-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
  color: var(--color-text);
}
.api-table tr:last-child td { border-bottom: none; }
.api-table td:first-child code { color: var(--color-function); white-space: nowrap; }

/* Sub-section headings inside doc sections */
.subsection-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-text);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-footer {
  grid-area: footer;
  padding: var(--space-6) var(--space-4);
  /* Safe area for bottom notch */
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

@media (min-width: 900px) {
  .site-footer { padding-inline: var(--space-10); }
}

/* ── Scroll animations ──────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Skip animation on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}