/* Design tokens for the ZigBase site.
 *
 * Light palette lives on :root. Dark palette is applied two ways:
 *   1. :root[data-theme='dark']  — explicit user choice (set by the theme toggle).
 *   2. @media (prefers-color-scheme: dark) when no explicit data-theme is set —
 *      so the OS preference governs the default while an explicit choice always wins.
 */

:root {
  /* Color — light */
  --color-bg: #ffffff;
  --color-surface: #f9f9f9;
  --color-border: #e6e6e6;
  --color-text: #1a1a1a;
  --color-muted: #555555;
  --color-accent: #f7a41d;
  --color-accent-hover: #e08e00;
  --color-link: #c47d00;

  /* Typography */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo,
    monospace;

  /* Type scale (1.25 ratio) */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.563rem;
  --text-3xl: 1.953rem;
  --text-4xl: 2.441rem;
  --text-5xl: 3.052rem;
  --text-hero: clamp(2.5rem, 6vw, 4rem);

  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Layout */
  --container-max: 1100px;
}

/* Dark — explicit user choice always wins. */
:root[data-theme='dark'] {
  --color-bg: #0f1011;
  --color-surface: #17191c;
  --color-border: #2a2d31;
  --color-text: #e8e8e8;
  --color-muted: #a0a4ab;
  --color-accent: #f7a41d;
  --color-accent-hover: #e08e00;
  --color-link: #f7a41d;
}

/* Dark — OS preference default, only when no explicit theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1011;
    --color-surface: #17191c;
    --color-border: #2a2d31;
    --color-text: #e8e8e8;
    --color-muted: #a0a4ab;
    --color-accent: #f7a41d;
    --color-accent-hover: #e08e00;
    --color-link: #f7a41d;
  }
}

@import './tokens.css';

/* ---- Modern reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  padding-left: 1.25em;
}

/* ---- Base typography ---- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--leading-tight);
  font-weight: 700;
}

h1 {
  font-size: var(--text-4xl);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-2xl);
}
h4 {
  font-size: var(--text-xl);
}

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

a:hover {
  text-decoration: underline;
}

/* ---- Visible amber focus ring ---- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Layout helper ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---- Code ---- */
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Inline code */
:not(pre) > code {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}

/* Block code — complements Shiki's generated <pre class="code-block"> */
pre {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  line-height: var(--leading-normal);
  font-size: var(--text-sm);
}

pre > code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Let Shiki dual-theme blocks follow the active site theme. Shiki emits
 * inline CSS variables (--shiki-dark*) on each token; swap to them in dark. */
:root[data-theme='dark'] .code-block,
:root[data-theme='dark'] .code-block span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .code-block,
  :root:not([data-theme]) .code-block span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

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

.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}
.prose{max-width:70ch;line-height:var(--leading-normal);color:var(--color-text)}.prose>:first-child{margin-top:0}.prose h1{font-size:var(--text-4xl);margin-bottom:var(--space-4);scroll-margin-top:5rem}.prose h2{font-size:var(--text-2xl);margin-top:var(--space-7);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);scroll-margin-top:5rem}.prose h3{font-size:var(--text-xl);margin-top:var(--space-6);margin-bottom:var(--space-2);scroll-margin-top:5rem}.prose h4{font-size:var(--text-lg);margin-top:var(--space-5);margin-bottom:var(--space-2);scroll-margin-top:5rem}.prose :is(h2,h3,h4)>a[href^="#"]{color:inherit;text-decoration:none}.prose :is(h2,h3,h4){position:relative}.prose :is(h2,h3,h4)>a[href^="#"]:after{content:"#";position:absolute;margin-left:.4rem;color:var(--color-accent);opacity:0;transition:opacity .15s ease}.prose :is(h2,h3,h4):hover>a[href^="#"]:after{opacity:.7}.prose p,.prose ul,.prose ol{margin-bottom:var(--space-4)}.prose li{margin-bottom:var(--space-1)}.prose li>ul,.prose li>ol{margin-top:var(--space-1);margin-bottom:0}.prose a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}.prose a:hover{color:var(--color-accent-hover)}.prose strong{font-weight:700}.prose blockquote{margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);border-left:4px solid var(--color-accent);border-radius:var(--radius-sm);background-color:color-mix(in srgb,var(--color-accent) 7%,var(--color-surface));color:var(--color-text)}.prose blockquote>:last-child{margin-bottom:0}.prose blockquote p{margin-bottom:var(--space-2)}.prose table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--text-sm);display:block;overflow-x:auto}.prose thead{border-bottom:2px solid var(--color-border)}.prose th{text-align:left;font-weight:700;padding:var(--space-2) var(--space-3)}.prose td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:top}.prose tbody tr:hover{background-color:var(--color-surface)}.prose pre{margin:var(--space-4) 0}.prose hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-6) 0}.prose img{border-radius:var(--radius-md);margin:var(--space-4) 0}.docs{display:grid;grid-template-columns:16rem minmax(0,1fr) 14rem;gap:var(--space-7);align-items:start;padding-block:var(--space-6) var(--space-8)}.docs__sidebar{position:sticky;top:4.5rem;max-height:calc(100vh - 5.5rem);overflow-y:auto}.docs__group+.docs__group{margin-top:var(--space-5)}.docs__group-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:var(--space-2)}.docs__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}.docs__link{display:block;padding:.3rem var(--space-3);border-radius:var(--radius-sm);color:var(--color-muted);font-size:var(--text-sm);border-left:2px solid transparent}.docs__link:hover{color:var(--color-text);background-color:var(--color-surface);text-decoration:none}.docs__link--active{color:var(--color-accent);font-weight:600;border-left-color:var(--color-accent);background-color:color-mix(in srgb,var(--color-accent) 8%,transparent)}.docs__main{min-width:0}.docs__toc{position:sticky;top:4.5rem;max-height:calc(100vh - 5.5rem);overflow-y:auto;font-size:var(--text-sm)}.docs__toc-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:var(--space-2)}.docs__toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;border-left:1px solid var(--color-border)}.docs__toc a{display:block;padding:.15rem var(--space-3);margin-left:-1px;border-left:1px solid transparent;color:var(--color-muted);line-height:1.4}.docs__toc a:hover{color:var(--color-accent);text-decoration:none}.docs__toc-sub a{padding-left:var(--space-5);font-size:var(--text-xs)}.docs__sidebar-toggle{display:none;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm);cursor:pointer}@media(max-width:1024px){.docs{grid-template-columns:16rem minmax(0,1fr)}.docs__toc{display:none}}@media(max-width:768px){.docs{display:block;padding-top:var(--space-5)}.docs__sidebar-toggle{display:inline-flex;margin-bottom:var(--space-4)}.docs__sidebar{position:static;max-height:none;margin-bottom:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--color-border)}.docs__sidebar:not([data-open]){display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:600;line-height:1;border-radius:var(--radius-md);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .05s ease;white-space:nowrap}.btn:hover{text-decoration:none}.btn:active{transform:translateY(1px)}.btn--sm{font-size:var(--text-sm);padding:var(--space-2) var(--space-3)}.btn--md{font-size:var(--text-base);padding:var(--space-3) var(--space-5)}.btn--lg{font-size:var(--text-lg);padding:var(--space-4) var(--space-6)}.btn--primary{background-color:var(--color-accent);color:#1a1a1a;border-color:var(--color-accent)}.btn--primary:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn--secondary{background-color:transparent;color:var(--color-text);border-color:var(--color-border)}.btn--secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}.copy-btn{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-family:var(--font-sans);padding:var(--space-1) var(--space-2);color:var(--color-muted);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:color .15s ease,border-color .15s ease}.copy-btn:hover,.copy-btn[data-copied=true]{color:var(--color-accent);border-color:var(--color-accent)}.hero{padding-block:var(--space-9) var(--space-8);border-bottom:1px solid var(--color-border);background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--color-accent) 9%,transparent),transparent 70%)}.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}.hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);background-color:var(--color-surface)}.hero__spark{color:var(--color-accent)}.hero__title{font-size:var(--text-hero);line-height:1.08;letter-spacing:-.02em;max-width:18ch}.hero__sub-line{display:block;margin-top:var(--space-2)}.hero__accent{color:var(--color-accent)}.hero__subhead{max-width:60ch;color:var(--color-muted);font-size:var(--text-lg);line-height:var(--leading-normal)}.hero__subhead strong{color:var(--color-text)}.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.hero__install{display:flex;align-items:stretch;gap:var(--space-2);width:100%;max-width:36rem;margin-top:var(--space-2)}.hero__install-code{flex:1;min-width:0;margin:0;text-align:left;display:flex;align-items:center;background-color:var(--color-surface)}.hero__install-code code{white-space:pre;overflow-x:auto}.hero__install-copy{flex-shrink:0;align-self:stretch}.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.card:hover{transform:translateY(-3px);border-color:var(--color-accent);box-shadow:0 8px 24px -12px #00000040}.card__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--color-accent)}.card__icon svg{width:100%;height:100%}.card__title{font-size:var(--text-xl);margin:0}.card__body{color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.features{padding-block:var(--space-8)}.features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-4)}.codetabs{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background-color:var(--color-surface)}.codetabs__tablist{display:flex;gap:var(--space-1);padding:var(--space-2) var(--space-2) 0;background-color:var(--color-surface);border-bottom:1px solid var(--color-border);overflow-x:auto}.codetabs__tab{appearance:none;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;color:var(--color-muted);cursor:pointer;white-space:nowrap;transition:color .15s ease,background-color .15s ease}.codetabs__tab:hover{color:var(--color-text)}.codetabs__tab[aria-selected=true]{color:var(--color-accent);background-color:var(--color-bg);border-color:var(--color-border);margin-bottom:-1px}.codetabs__panel{padding:var(--space-4);background-color:var(--color-bg)}.codetabs__panel[hidden]{display:none}.codetabs__panel pre{margin:0}.codesample{padding-block:var(--space-7)}.codesample__head{text-align:center;max-width:50ch;margin:0 auto var(--space-6)}.codesample__head p{color:var(--color-muted);margin-top:var(--space-3)}.codesample__panel{position:relative}.codesample__panel pre{border:none;border-radius:var(--radius-md)}.codesample__copy{position:absolute;top:var(--space-3);right:var(--space-3)}.dual{padding-block:var(--space-8);background-color:var(--color-surface);border-block:1px solid var(--color-border)}.dual__head{text-align:center;max-width:60ch;margin:0 auto var(--space-6)}.dual__head p{color:var(--color-muted);margin-top:var(--space-3)}.dual__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--space-4);list-style:none;margin:0 0 var(--space-6);padding:0}.dual__step{display:flex;gap:var(--space-3);padding:var(--space-5);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.dual__num{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--radius-full);background-color:color-mix(in srgb,var(--color-accent) 15%,transparent);color:var(--color-accent);font-weight:700;font-size:var(--text-sm)}.dual__step-body{min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}.dual__step-title{font-size:var(--text-lg);margin:0}.dual__code{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);background-color:var(--color-surface);overflow-x:auto}.dual__proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-5);margin-bottom:var(--space-6)}.dual__proof{border-left:3px solid var(--color-accent);padding-left:var(--space-4)}.dual__proof-title{font-size:var(--text-lg);margin-bottom:var(--space-2)}.dual__proof-body{color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.dual__cta{text-align:center;font-weight:600;margin-bottom:var(--space-4)}.dual__caveat{text-align:center;max-width:70ch;margin:0 auto;color:var(--color-muted);font-size:var(--text-xs);line-height:var(--leading-normal)}.ready{padding-block:var(--space-8);background-color:var(--color-surface);border-block:1px solid var(--color-border)}.ready__head{text-align:center;margin-bottom:var(--space-6)}.ready__head p{color:var(--color-muted);margin-top:var(--space-3)}.ready__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--space-4)}.ready__module{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);text-decoration:none;transition:border-color .15s ease,transform .15s ease}.ready__module:hover{border-color:var(--color-accent);transform:translateY(-2px);text-decoration:none}.ready__title{font-size:var(--text-lg);margin:0}.ready__body{color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.ready__link{margin-top:auto;color:var(--color-accent);font-size:var(--text-sm);font-weight:600}.quickstart{padding-block:var(--space-8)}.quickstart__head{text-align:center;margin-bottom:var(--space-6)}.quickstart__head p{color:var(--color-muted);margin-top:var(--space-3)}.quickstart__panel{position:relative}.quickstart__panel pre{border:none;border-radius:var(--radius-md)}.quickstart__copy{position:absolute;top:var(--space-3);right:var(--space-3)}.quickstart__lib{display:flex;flex-direction:column;gap:var(--space-3)}.admin{padding-block:var(--space-8);background-color:var(--color-surface);border-block:1px solid var(--color-border)}.admin__head{text-align:center;max-width:54ch;margin:0 auto var(--space-6)}.admin__head p{color:var(--color-muted);margin-top:var(--space-3)}.admin__frame{max-width:920px;margin-inline:auto}.admin__shot{display:block;width:100%;height:auto}.examples{padding-block:var(--space-8)}.examples__head{text-align:center;max-width:54ch;margin:0 auto var(--space-6)}.examples__head p{color:var(--color-muted);margin-top:var(--space-3)}.examples__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--space-5)}.examples__item{display:flex;flex-direction:column;gap:var(--space-3);color:inherit;text-decoration:none}.examples__item:hover{text-decoration:none}.examples__item .browser{transition:transform .15s ease,border-color .15s ease}.examples__item:hover .browser{transform:translateY(-3px);border-color:var(--color-accent)}.examples__label{display:flex;flex-direction:column;gap:var(--space-1);text-align:center}.examples__title{font-weight:700}.examples__item:hover .examples__title{color:var(--color-accent)}.examples__packaging{color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.examples__more{text-align:center;margin-top:var(--space-6);font-weight:600}.examples__more a{color:var(--color-accent)}.sdk{padding-block:var(--space-8)}.sdk__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}.sdk__head{text-align:center;max-width:54ch;margin:0 auto var(--space-6)}.sdk__head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 var(--space-3)}.sdk__head p{color:var(--color-muted);margin-top:var(--space-3)}.sdk__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--space-5)}.sdk__card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.sdk__title{margin:0;font-size:var(--text-lg);color:var(--color-accent)}.sdk__blurb{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.sdk__install code{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.25rem .5rem}.sdk__code pre{border-radius:var(--radius-md);font-size:var(--text-xs)}.sdk__more{text-align:center;margin-top:var(--space-6);font-weight:600}.sdk__more a{color:var(--color-accent)}.why{padding-block:var(--space-8)}.why__head{text-align:center;margin-bottom:var(--space-6)}.why__head p{color:var(--color-muted);margin-top:var(--space-3)}.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-5)}.why__point{border-left:3px solid var(--color-accent);padding-left:var(--space-4)}.why__title{font-size:var(--text-lg);margin-bottom:var(--space-2)}.why__body{color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.why__compare{text-align:center;margin-top:var(--space-6);font-weight:600}

:root{--color-bg: #ffffff;--color-surface: #f9f9f9;--color-border: #e6e6e6;--color-text: #1a1a1a;--color-muted: #555555;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #c47d00;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;--text-xs: .8rem;--text-sm: .9rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.563rem;--text-3xl: 1.953rem;--text-4xl: 2.441rem;--text-5xl: 3.052rem;--text-hero: clamp(2.5rem, 6vw, 4rem);--leading-tight: 1.2;--leading-normal: 1.6;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 999px;--container-max: 1100px}:root[data-theme=dark]{--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,ol{padding-left:1.25em}body{font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .2s ease}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight);font-weight:700}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-5)}code,kbd,pre,samp{font-family:var(--font-mono);font-size:.9em}:not(pre)>code{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.1em .35em;font-size:.85em}pre{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto;line-height:var(--leading-normal);font-size:var(--text-sm)}pre>code{background:none;border:none;padding:0;font-size:inherit}:root[data-theme=dark] .code-block,:root[data-theme=dark] .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}@media(prefers-color-scheme:dark){:root:not([data-theme]) .code-block,:root:not([data-theme]) .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:color .15s ease,border-color .15s ease}.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent)}.theme-toggle__icon--moon,.theme-toggle[aria-pressed=true] .theme-toggle__icon--sun{display:none}.theme-toggle[aria-pressed=true] .theme-toggle__icon--moon{display:block}.nav{position:sticky;top:0;z-index:50;background-color:color-mix(in srgb,var(--color-bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}.nav__inner{display:flex;align-items:center;gap:var(--space-4);min-height:3.5rem}.nav__brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:700;font-size:var(--text-lg);text-decoration:none;margin-right:auto}.nav__brand:hover{text-decoration:none}.nav__logo{color:var(--color-text)}.nav__menu{display:flex;align-items:center;gap:var(--space-5)}.nav__links{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}.nav__links a{color:var(--color-text);font-size:var(--text-sm);font-weight:500}.nav__links a:hover{color:var(--color-accent);text-decoration:none}.nav__actions{display:flex;align-items:center;gap:var(--space-3)}.nav__badge{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.1rem var(--space-2)}.nav__icon-link{display:inline-flex;color:var(--color-text)}.nav__icon-link:hover{color:var(--color-accent)}.nav__hamburger{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer}@media(max-width:768px){.nav__hamburger{display:inline-flex}.nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-4) var(--space-5);background-color:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:0 16px 32px -16px #0000004d}.nav__menu:not([data-open]){display:none}.nav__links{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.nav__actions{justify-content:flex-start}}.footer{margin-top:var(--space-9);border-top:1px solid var(--color-border);background-color:var(--color-surface);padding-block:var(--space-7)}.footer__cols{display:flex;flex-wrap:wrap;gap:var(--space-8)}.footer__heading{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin-bottom:var(--space-3)}.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.footer__col a{color:var(--color-text);font-size:var(--text-sm)}.footer__col a:hover{color:var(--color-accent);text-decoration:none}.footer__fineprint{margin-top:var(--space-6);color:var(--color-muted);font-size:var(--text-xs)}

.browser{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background-color:var(--color-surface);box-shadow:0 16px 40px -20px #00000059}.browser__chrome{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background-color:var(--color-surface);border-bottom:1px solid var(--color-border)}.browser__dots{display:inline-flex;gap:6px;flex-shrink:0}.browser__dot{width:11px;height:11px;border-radius:var(--radius-full);display:inline-block}.browser__dot--red{background-color:#ff5f57}.browser__dot--yellow{background-color:#febc2e}.browser__dot--green{background-color:#28c840}.browser__address{flex:1;min-width:0;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser__viewport{background-color:var(--color-bg);line-height:0}.browser__viewport img{width:100%;height:auto}

:root{--color-bg: #ffffff;--color-surface: #f9f9f9;--color-border: #e6e6e6;--color-text: #1a1a1a;--color-muted: #555555;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #c47d00;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;--text-xs: .8rem;--text-sm: .9rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.563rem;--text-3xl: 1.953rem;--text-4xl: 2.441rem;--text-5xl: 3.052rem;--text-hero: clamp(2.5rem, 6vw, 4rem);--leading-tight: 1.2;--leading-normal: 1.6;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 999px;--container-max: 1100px}:root[data-theme=dark]{--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,ol{padding-left:1.25em}body{font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .2s ease}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight);font-weight:700}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-5)}code,kbd,pre,samp{font-family:var(--font-mono);font-size:.9em}:not(pre)>code{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.1em .35em;font-size:.85em}pre{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto;line-height:var(--leading-normal);font-size:var(--text-sm)}pre>code{background:none;border:none;padding:0;font-size:inherit}:root[data-theme=dark] .code-block,:root[data-theme=dark] .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}@media(prefers-color-scheme:dark){:root:not([data-theme]) .code-block,:root:not([data-theme]) .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:color .15s ease,border-color .15s ease}.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent)}.theme-toggle__icon--moon,.theme-toggle[aria-pressed=true] .theme-toggle__icon--sun{display:none}.theme-toggle[aria-pressed=true] .theme-toggle__icon--moon{display:block}.nav{position:sticky;top:0;z-index:50;background-color:color-mix(in srgb,var(--color-bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}.nav__inner{display:flex;align-items:center;gap:var(--space-4);min-height:3.5rem}.nav__brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:700;font-size:var(--text-lg);text-decoration:none;margin-right:auto}.nav__brand:hover{text-decoration:none}.nav__logo{color:var(--color-text)}.nav__menu{display:flex;align-items:center;gap:var(--space-5)}.nav__links{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}.nav__links a{color:var(--color-text);font-size:var(--text-sm);font-weight:500}.nav__links a:hover{color:var(--color-accent);text-decoration:none}.nav__actions{display:flex;align-items:center;gap:var(--space-3)}.nav__badge{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.1rem var(--space-2)}.nav__icon-link{display:inline-flex;color:var(--color-text)}.nav__icon-link:hover{color:var(--color-accent)}.nav__hamburger{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer}@media(max-width:768px){.nav__hamburger{display:inline-flex}.nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-4) var(--space-5);background-color:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:0 16px 32px -16px #0000004d}.nav__menu:not([data-open]){display:none}.nav__links{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.nav__actions{justify-content:flex-start}}.footer{margin-top:var(--space-9);border-top:1px solid var(--color-border);background-color:var(--color-surface);padding-block:var(--space-7)}.footer__cols{display:flex;flex-wrap:wrap;gap:var(--space-8)}.footer__heading{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin-bottom:var(--space-3)}.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.footer__col a{color:var(--color-text);font-size:var(--text-sm)}.footer__col a:hover{color:var(--color-accent);text-decoration:none}.footer__fineprint{margin-top:var(--space-6);color:var(--color-muted);font-size:var(--text-xs)}
.cmp{max-width:68rem;padding-block:var(--space-7) var(--space-8)}.cmp__head{max-width:68ch;margin-bottom:var(--space-7)}.cmp__title{font-size:var(--text-4xl);margin:0 0 var(--space-2)}.cmp__meta{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-1)}.cmp__stance{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-4)}.cmp__stance a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}.cmp__stance a:hover{color:var(--color-accent-hover)}.cmp__lede{color:var(--color-text);font-size:var(--text-lg);line-height:var(--leading-normal)}.cmp__section{margin-top:var(--space-7)}.cmp__section h2{font-size:var(--text-2xl);margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);scroll-margin-top:5rem}.cmp__section p{color:var(--color-text);line-height:var(--leading-normal);margin-bottom:var(--space-4);max-width:68ch}.cmp__sr-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cmp__table-wrap{overflow-x:auto}.cmp__table{width:100%;min-width:60rem;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--text-sm)}.cmp__table thead{border-bottom:2px solid var(--color-border)}.cmp__table th{text-align:left;font-weight:700;padding:var(--space-2) var(--space-3);white-space:nowrap}.cmp__table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:top}.cmp__table tbody tr:hover{background-color:var(--color-surface)}.cmp__dim{font-weight:600;white-space:nowrap}.cmp code{font-family:var(--font-mono);font-size:.9em}

:root{--color-bg: #ffffff;--color-surface: #f9f9f9;--color-border: #e6e6e6;--color-text: #1a1a1a;--color-muted: #555555;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #c47d00;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;--text-xs: .8rem;--text-sm: .9rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.563rem;--text-3xl: 1.953rem;--text-4xl: 2.441rem;--text-5xl: 3.052rem;--text-hero: clamp(2.5rem, 6vw, 4rem);--leading-tight: 1.2;--leading-normal: 1.6;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 999px;--container-max: 1100px}:root[data-theme=dark]{--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,ol{padding-left:1.25em}body{font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .2s ease}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight);font-weight:700}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-5)}code,kbd,pre,samp{font-family:var(--font-mono);font-size:.9em}:not(pre)>code{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.1em .35em;font-size:.85em}pre{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto;line-height:var(--leading-normal);font-size:var(--text-sm)}pre>code{background:none;border:none;padding:0;font-size:inherit}:root[data-theme=dark] .code-block,:root[data-theme=dark] .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}@media(prefers-color-scheme:dark){:root:not([data-theme]) .code-block,:root:not([data-theme]) .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:color .15s ease,border-color .15s ease}.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent)}.theme-toggle__icon--moon,.theme-toggle[aria-pressed=true] .theme-toggle__icon--sun{display:none}.theme-toggle[aria-pressed=true] .theme-toggle__icon--moon{display:block}.nav{position:sticky;top:0;z-index:50;background-color:color-mix(in srgb,var(--color-bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}.nav__inner{display:flex;align-items:center;gap:var(--space-4);min-height:3.5rem}.nav__brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:700;font-size:var(--text-lg);text-decoration:none;margin-right:auto}.nav__brand:hover{text-decoration:none}.nav__logo{color:var(--color-text)}.nav__menu{display:flex;align-items:center;gap:var(--space-5)}.nav__links{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}.nav__links a{color:var(--color-text);font-size:var(--text-sm);font-weight:500}.nav__links a:hover{color:var(--color-accent);text-decoration:none}.nav__actions{display:flex;align-items:center;gap:var(--space-3)}.nav__badge{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.1rem var(--space-2)}.nav__icon-link{display:inline-flex;color:var(--color-text)}.nav__icon-link:hover{color:var(--color-accent)}.nav__hamburger{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer}@media(max-width:768px){.nav__hamburger{display:inline-flex}.nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-4) var(--space-5);background-color:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:0 16px 32px -16px #0000004d}.nav__menu:not([data-open]){display:none}.nav__links{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.nav__actions{justify-content:flex-start}}.footer{margin-top:var(--space-9);border-top:1px solid var(--color-border);background-color:var(--color-surface);padding-block:var(--space-7)}.footer__cols{display:flex;flex-wrap:wrap;gap:var(--space-8)}.footer__heading{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin-bottom:var(--space-3)}.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.footer__col a{color:var(--color-text);font-size:var(--text-sm)}.footer__col a:hover{color:var(--color-accent);text-decoration:none}.footer__fineprint{margin-top:var(--space-6);color:var(--color-muted);font-size:var(--text-xs)}
.dl{max-width:56rem;padding-block:var(--space-7) var(--space-8)}.dl__head{max-width:60ch;margin-bottom:var(--space-7)}.dl__eyebrow{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);margin-bottom:var(--space-2)}.dl__title{font-size:var(--text-4xl);margin:0 0 var(--space-3)}.dl__lede{color:var(--color-muted);font-size:var(--text-lg);line-height:var(--leading-normal)}.dl__section{margin-top:var(--space-7)}.dl__section h2{font-size:var(--text-2xl);margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);scroll-margin-top:5rem}.dl__section p{color:var(--color-text);line-height:var(--leading-normal);margin-bottom:var(--space-4)}.dl code{font-family:var(--font-mono);font-size:.9em}.dl a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}.dl a:hover{color:var(--color-accent-hover)}.dl__table-wrap{overflow-x:auto}.dl__table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--text-sm)}.dl__table thead{border-bottom:2px solid var(--color-border)}.dl__table th{text-align:left;font-weight:700;padding:var(--space-2) var(--space-3)}.dl__table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:top}.dl__table tbody tr:hover{background-color:var(--color-surface)}.dl__links{font-size:var(--text-sm);color:var(--color-muted)}.dl__note{margin:var(--space-5) 0;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-left:4px solid #3b82f6;border-radius:var(--radius-md);background-color:color-mix(in srgb,#3b82f6 8%,var(--color-surface))}.dl__note-label{font-weight:700;font-size:var(--text-sm);color:#3b82f6;text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--space-1)!important}.dl__note p{margin-bottom:var(--space-2);font-size:var(--text-sm)}.dl__note>:last-child{margin-bottom:0}.dl__code{margin:var(--space-4) 0;padding:var(--space-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-normal)}.dl__note .dl__code{margin-bottom:0}

:root{--color-bg: #ffffff;--color-surface: #f9f9f9;--color-border: #e6e6e6;--color-text: #1a1a1a;--color-muted: #555555;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #c47d00;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;--text-xs: .8rem;--text-sm: .9rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.563rem;--text-3xl: 1.953rem;--text-4xl: 2.441rem;--text-5xl: 3.052rem;--text-hero: clamp(2.5rem, 6vw, 4rem);--leading-tight: 1.2;--leading-normal: 1.6;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 999px;--container-max: 1100px}:root[data-theme=dark]{--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg: #0f1011;--color-surface: #17191c;--color-border: #2a2d31;--color-text: #e8e8e8;--color-muted: #a0a4ab;--color-accent: #f7a41d;--color-accent-hover: #e08e00;--color-link: #f7a41d}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,ol{padding-left:1.25em}body{font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--color-bg);color:var(--color-text);transition:background-color .2s ease,color .2s ease}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight);font-weight:700}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-5)}code,kbd,pre,samp{font-family:var(--font-mono);font-size:.9em}:not(pre)>code{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.1em .35em;font-size:.85em}pre{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto;line-height:var(--leading-normal);font-size:var(--text-sm)}pre>code{background:none;border:none;padding:0;font-size:inherit}:root[data-theme=dark] .code-block,:root[data-theme=dark] .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}@media(prefers-color-scheme:dark){:root:not([data-theme]) .code-block,:root:not([data-theme]) .code-block span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:color .15s ease,border-color .15s ease}.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent)}.theme-toggle__icon--moon,.theme-toggle[aria-pressed=true] .theme-toggle__icon--sun{display:none}.theme-toggle[aria-pressed=true] .theme-toggle__icon--moon{display:block}.nav{position:sticky;top:0;z-index:50;background-color:color-mix(in srgb,var(--color-bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}.nav__inner{display:flex;align-items:center;gap:var(--space-4);min-height:3.5rem}.nav__brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:700;font-size:var(--text-lg);text-decoration:none;margin-right:auto}.nav__brand:hover{text-decoration:none}.nav__logo{color:var(--color-text)}.nav__menu{display:flex;align-items:center;gap:var(--space-5)}.nav__links{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}.nav__links a{color:var(--color-text);font-size:var(--text-sm);font-weight:500}.nav__links a:hover{color:var(--color-accent);text-decoration:none}.nav__actions{display:flex;align-items:center;gap:var(--space-3)}.nav__badge{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.1rem var(--space-2)}.nav__icon-link{display:inline-flex;color:var(--color-text)}.nav__icon-link:hover{color:var(--color-accent)}.nav__hamburger{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer}@media(max-width:768px){.nav__hamburger{display:inline-flex}.nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-4) var(--space-5);background-color:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:0 16px 32px -16px #0000004d}.nav__menu:not([data-open]){display:none}.nav__links{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.nav__actions{justify-content:flex-start}}.footer{margin-top:var(--space-9);border-top:1px solid var(--color-border);background-color:var(--color-surface);padding-block:var(--space-7)}.footer__cols{display:flex;flex-wrap:wrap;gap:var(--space-8)}.footer__heading{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin-bottom:var(--space-3)}.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.footer__col a{color:var(--color-text);font-size:var(--text-sm)}.footer__col a:hover{color:var(--color-accent);text-decoration:none}.footer__fineprint{margin-top:var(--space-6);color:var(--color-muted);font-size:var(--text-xs)}
.ex{padding-block:var(--space-7) var(--space-8)}.ex__head{max-width:60ch;margin-bottom:var(--space-7)}.ex__eyebrow{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);margin-bottom:var(--space-2)}.ex__title{font-size:var(--text-4xl);margin:0 0 var(--space-3)}.ex__lede{color:var(--color-muted);font-size:var(--text-lg);line-height:var(--leading-normal)}.ex__lede code{font-family:var(--font-mono);font-size:.9em}.ex__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}.ex__card{display:flex;flex-direction:column;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.ex__card:hover{transform:translateY(-3px);border-color:var(--color-accent);box-shadow:0 8px 24px -12px #00000040}.ex__card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none;flex:1}.ex__card-link:hover{text-decoration:none}.ex__thumb{display:block;aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--color-border);background-color:var(--color-bg)}.ex__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.ex__card-body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);flex:1}.ex__rung{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}.ex__step{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-full);background-color:var(--color-accent);color:#1a1a1a;font-family:var(--font-mono);font-size:var(--text-xs)}.ex__card-title{font-size:var(--text-2xl);margin:0}.ex__card-summary{color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-normal);margin:0;flex:1}.ex__cta{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);color:var(--color-accent);font-weight:600;font-size:var(--text-sm)}.ex__source{display:block;padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border);color:var(--color-muted);font-size:var(--text-sm)}.ex__source:hover{color:var(--color-accent);text-decoration:none}