/* Toolbox — landing page styles.
   A black-and-white port of the shadcn/ui design language, written as plain CSS
   so docs/ stays a directory GitHub Pages can serve with no build step.

   It follows shadcn's own conventions rather than inventing new ones:
     · the same design tokens — --background/--foreground, --card, --muted,
       --primary, --border, --input, --ring, --radius
     · the same component recipes — button, card, badge, alert, separator,
       table, accordion, tabs, input, slider, checkbox, progress
     · the "neutral" colour scale with the chroma set to 0, so every surface,
       border and accent is greyscale. Emphasis comes from contrast and
       borders, never from hue.
   Dark is the default; light is a full token override on [data-theme="light"]. */

:root {
  /* shadcn neutral, zero chroma — dark. */
  --background:            oklch(0.145 0 0);
  --foreground:            oklch(0.985 0 0);
  --card:                  oklch(0.205 0 0);
  --card-foreground:       oklch(0.985 0 0);
  --primary:               oklch(0.985 0 0);
  --primary-foreground:    oklch(0.205 0 0);
  --secondary:             oklch(0.269 0 0);
  --secondary-foreground:  oklch(0.985 0 0);
  --muted:                 oklch(0.269 0 0);
  --muted-foreground:      oklch(0.708 0 0);
  --accent:                oklch(0.269 0 0);
  --accent-foreground:     oklch(0.985 0 0);
  --border:                oklch(1 0 0 / 10%);
  --border-strong:         oklch(1 0 0 / 18%);
  --input:                 oklch(1 0 0 / 15%);
  --ring:                  oklch(0.556 0 0);

  /* shadcn's radius scale, all derived from one knob. */
  --radius:    0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .18);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .22), 0 1px 2px -1px rgb(0 0 0 / .22);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .24), 0 2px 4px -2px rgb(0 0 0 / .24);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);

  --wrap: 1120px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
          system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

[data-theme="light"] {
  --background:            oklch(1 0 0);
  --foreground:            oklch(0.145 0 0);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.145 0 0);
  --primary:               oklch(0.205 0 0);
  --primary-foreground:    oklch(0.985 0 0);
  --secondary:             oklch(0.97 0 0);
  --secondary-foreground:  oklch(0.205 0 0);
  --muted:                 oklch(0.97 0 0);
  --muted-foreground:      oklch(0.556 0 0);
  --accent:                oklch(0.97 0 0);
  --accent-foreground:     oklch(0.205 0 0);
  --border:                oklch(0.922 0 0);
  --border-strong:         oklch(0.87 0 0);
  --input:                 oklch(0.922 0 0);
  --ring:                  oklch(0.708 0 0);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  color-scheme: light;
}

/* ─────────────────────────── base ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tailwind's type scale, which is what shadcn's examples are written against. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(2.25rem, 5.6vw, 3.75rem); font-weight: 700; letter-spacing: -.032em; }
h2 { font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 650; }
h3 { font-size: 1rem; }
p  { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* shadcn's inline <code>: muted surface, no border, tight radius. */
code {
  font-family: var(--mono);
  font-size: .85em;
  font-weight: 500;
  background: var(--muted);
  color: var(--foreground);
  padding: .15em .4em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1rem; height: 1rem; flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap.narrow { max-width: 48rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--primary-foreground);
  padding: .75rem 1.125rem; border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; }

/* shadcn focus ring: a 3px translucent ring plus a solid border colour shift. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────── brand mark ───────────────────────────
   The app icon reduced to a monochrome glyph: the toolbox drawn in the
   foreground colour on a bordered card, so it inverts with the theme. */

.brand-mark {
  /* display:block matters outside the nav: as a bare inline <span> in .closer it
     would ignore width/height and collapse to nothing. */
  display: block;
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--foreground);
  position: relative;
}
/* toolbox body */
.brand-mark::before {
  content: "";
  position: absolute;
  left: 20%; right: 20%; top: 47%; bottom: 24%;
  background: var(--background);
  border-radius: 2px;
}
/* handle */
.brand-mark::after {
  content: "";
  position: absolute;
  left: 34%; right: 34%; top: 27%; height: 21%;
  border: 2px solid var(--background);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.brand-mark.big {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
}
.brand-mark.big::before { border-radius: 4px; }
.brand-mark.big::after { border-width: 4px; }

/* ═══════════════════════ shadcn components ═══════════════════════ */

/* ── button ──
   h-9 by default, text-sm, font-medium, gap-2, rounded-md, shadow-xs. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;
  white-space: nowrap;
  height: 2.25rem; padding-inline: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn .ico { width: 1rem; height: 1rem; }

.btn-default {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: var(--shadow-xs);
}
.btn-default:hover { background: color-mix(in oklab, var(--primary) 90%, var(--background)); }

.btn-outline {
  border-color: var(--border); background: var(--background); color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-ghost { color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-lg { height: 2.5rem; padding-inline: 1.5rem; border-radius: var(--radius-md); }
.btn-sm { height: 2rem; padding-inline: .75rem; font-size: .8125rem; gap: .375rem; }

.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-icon .ico { width: 1rem; height: 1rem; }

/* Version/size detail resolved from the releases API, kept quiet inside the button. */
.btn .meta { font-weight: 400; opacity: .7; font-size: .8125rem; }
.btn .meta:empty { display: none; }

/* ── badge ──
   text-xs, font-medium, rounded-full, px-2 py-0.5. */

.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 500; line-height: 1rem;
  padding: .25rem .625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
/* The hero badge holds a full sentence, so it has to wrap on narrow screens —
   shadcn's Badge is nowrap, which is right for short labels only. */
.badge-multiline { white-space: normal; text-align: left; align-items: baseline; }
.badge-multiline .dot { position: relative; top: -.1em; }
.badge .dot {
  width: .375rem; height: .375rem; border-radius: 50%;
  background: currentColor;
}

/* ── card ── */

.card {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.card-interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.card-header { display: grid; gap: .375rem; }
.card-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.card-description { font-size: .875rem; color: var(--muted-foreground); }

/* Icon chip above a card title — bg-muted, rounded-md, size-9. */
.card-icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
}
.card-icon .ico { width: 1.125rem; height: 1.125rem; }

/* ── separator ── */

.separator { height: 1px; border: 0; margin: 0; background: var(--border); }

/* ── alert ── */

.alert {
  display: grid; gap: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-xs);
}
.alert-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.alert-description { font-size: .875rem; color: var(--muted-foreground); display: grid; gap: .75rem; }

/* ── table ── */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 34rem; }
thead tr { border-bottom: 1px solid var(--border); }
th {
  text-align: left; padding: .75rem 1rem;
  font-weight: 500; color: var(--muted-foreground);
  height: 2.5rem;
}
td { padding: .75rem 1rem; color: var(--foreground); vertical-align: top; }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
td:not(:first-child) { color: var(--muted-foreground); }

/* ── accordion ──
   A <details> element styled as shadcn's AccordionItem/Trigger/Content. */

.accordion { border-top: 1px solid var(--border); margin-top: 2.5rem; }
details { border-bottom: 1px solid var(--border); }
summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0;
  font-size: .9375rem; font-weight: 500;
  transition: color .15s;
}
summary:hover { text-decoration: underline; text-underline-offset: 4px; }
summary::-webkit-details-marker { display: none; }
summary .chevron {
  margin-left: auto; flex: none;
  width: .875rem; height: .875rem;
  color: var(--muted-foreground);
  transition: transform .2s;
}
details[open] summary .chevron { transform: rotate(180deg); }
details .accordion-content { padding: 0 2.5rem 1rem 0; display: grid; gap: .75rem; }
details .accordion-content p { font-size: .875rem; color: var(--muted-foreground); }

/* ── input / checkbox / slider / progress ── */

.input {
  font: inherit; font-size: .8125rem;
  height: 1.875rem; padding-inline: .5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: color-mix(in oklab, var(--background) 30%, transparent);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}

.checkbox { accent-color: var(--primary); width: .875rem; height: .875rem; }

.slider { flex: 1; max-width: 12rem; accent-color: var(--primary); }

.progress {
  width: 7.5rem; height: .5rem; border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: var(--primary);
  transition: width .28s linear;
}

/* ── tabs ──
   TabsList: bg-muted, rounded-lg, p-[3px]; TabsTrigger active gets the card
   surface plus a shadow, which is how shadcn shows selection without colour. */

.tabs {
  display: inline-flex;
  background: var(--muted);
  border-radius: var(--radius-lg);
  padding: 3px;
}
.tabs button {
  font: inherit; font-size: .75rem; font-weight: 500;
  padding: .25rem .625rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: none; color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.tabs button:hover { color: var(--foreground); }
.tabs button[aria-pressed="true"] {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}

/* ─────────────────────────── nav ─────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.stuck { border-bottom-color: var(--border); }

.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; }

.brand { display: flex; align-items: center; gap: .625rem; }
.brand:hover { text-decoration: none; }
.brand-name { font-weight: 600; letter-spacing: -.02em; font-size: 1rem; }

.nav-links { display: flex; gap: 1.5rem; margin-left: auto; font-size: .875rem; }
.nav-links a { color: var(--muted-foreground); transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--foreground); text-decoration: none; }

.nav-actions { display: flex; gap: .5rem; align-items: center; }

[data-theme="dark"] .only-light, [data-theme="light"] .only-dark { display: none; }

/* ─────────────────────────── hero ─────────────────────────── */

.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 0; overflow: hidden; }

/* A faint greyscale wash instead of the old colour glow — it reads as light
   falling on the page rather than as a brand gradient. */
.hero::before {
  content: "";
  position: absolute; inset: -12rem -10% auto -10%; height: 40rem;
  background: radial-gradient(48% 44% at 50% 30%,
              color-mix(in oklab, var(--foreground) 7%, transparent), transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; text-align: center; }

.lede {
  max-width: 42rem; margin: 1.25rem auto 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--muted-foreground);
}

.cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

.cta-note, .dl-fallback { font-size: .8125rem; color: var(--muted-foreground); }
.dl-fallback { margin-top: .75rem; min-height: 1.3em; }
.cta-note { margin-top: .5rem; }
.cta-note a, .dl-fallback a { text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────── app window mock ─────────────────────────── */

.shot { margin: clamp(2.75rem, 5vw, 4.5rem) 0 0; }

.window {
  max-width: 58rem; margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}

.titlebar {
  position: relative;
  display: flex; align-items: center;
  height: 2.5rem; padding: 0 .875rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}
/* Window controls, monochrome: outlined circles rather than red/amber/green. */
.lights { display: flex; gap: .5rem; }
.lights i {
  width: .6875rem; height: .6875rem; border-radius: 50%; display: block;
  background: color-mix(in oklab, var(--foreground) 22%, transparent);
}
.titlebar .title {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .8125rem; font-weight: 500; color: var(--muted-foreground);
  pointer-events: none;
}

.window-body { display: grid; grid-template-columns: 13.5rem 1fr; min-height: 27rem; }

.sidebar {
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  border-right: 1px solid var(--border);
  padding: .75rem .5rem;
}
.side-head {
  font-size: .6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-foreground);
  padding: .75rem .625rem .375rem;
}
.side-head:first-child { padding-top: .125rem; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list button {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; text-align: left;
  font: inherit; font-size: .8125rem; font-weight: 500;
  color: var(--foreground);
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: .375rem .625rem;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.side-list button:hover { background: var(--accent); }
.side-list button[aria-current="true"] {
  background: var(--primary); color: var(--primary-foreground);
}
.side-list .ico { width: .875rem; height: .875rem; }
.side-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detail { display: flex; flex-direction: column; }
.detail-scroll { padding: 1.125rem; display: grid; gap: 1rem; align-content: start; flex: 1; }

.detail-head { display: flex; gap: .75rem; align-items: flex-start; }
.detail-head .card-icon { width: 2rem; height: 2rem; }
.detail-head h4 { font-size: .9375rem; font-weight: 600; }
.detail-head p { font-size: .8125rem; color: var(--muted-foreground); margin-top: .125rem; }

.dropzone {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  padding: 1.625rem 1.125rem;
  text-align: center;
  display: grid; gap: .5rem; justify-items: center;
  transition: border-color .18s, background-color .18s;
}
.dropzone.hot {
  border-color: var(--foreground);
  background: color-mix(in oklab, var(--muted) 90%, transparent);
}
.dropzone .glyph { font-size: 1.25rem; line-height: 1; color: var(--muted-foreground); }
.dropzone.hot .glyph { color: var(--foreground); }
.dropzone p { font-size: .8125rem; color: var(--muted-foreground); }

.files { display: grid; gap: .375rem; }
.filerow {
  display: flex; align-items: center; gap: .625rem;
  font-size: .8125rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--muted) 35%, transparent);
  animation: pop .25s ease-out both;
}
.filerow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow .size { margin-left: auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.filerow .state { width: .875rem; color: var(--muted-foreground); font-size: .8125rem; line-height: 1; }
.filerow.done .state { color: var(--foreground); }

@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.opt { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; }
.opt > label:first-child {
  width: 4.75rem; flex: none;
  color: var(--muted-foreground); font-weight: 500;
}
.opt .val { font-variant-numeric: tabular-nums; color: var(--muted-foreground); min-width: 2.25rem; }
.hint { font-size: .75rem; color: var(--muted-foreground); padding-left: 5.375rem; margin-top: -.375rem; }
.check { display: flex; align-items: center; gap: .5rem; color: var(--muted-foreground); }

.runbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.125rem;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
}
.runbar .status { font-size: .8125rem; color: var(--muted-foreground); }
.runbar .btn { margin-left: auto; }

.shot figcaption {
  text-align: center; font-size: .8125rem; color: var(--muted-foreground);
  margin-top: 1.25rem; max-width: 34rem; margin-inline: auto;
}

/* ─────────────────────────── sections ─────────────────────────── */

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section.alt { background: color-mix(in oklab, var(--muted) 45%, var(--background)); border-block: 1px solid var(--border); }

.kicker {
  font-size: .8125rem; font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: .625rem;
}

.section-lede { max-width: 40rem; margin-top: 1rem; color: var(--muted-foreground); }

.grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
/* Four tools sit better as a 2×2 block than as a row of three with an orphan. */
.tools-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
@media (min-width: 780px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
.why-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* Checklist inside a tool card — a muted tick, no accent colour. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ticks li {
  position: relative; padding-left: 1.375rem;
  font-size: .875rem; color: var(--muted-foreground);
}
.ticks li::before {
  content: ""; position: absolute; left: .125rem; top: .5em;
  width: .5rem; height: .25rem;
  border-left: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(-45deg);
}

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.stat {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.stat b {
  display: block;
  font-size: 1.875rem; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .8125rem; color: var(--muted-foreground); }

/* ─────────────────────────── install ─────────────────────────── */

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.step { display: flex; gap: .875rem; }
/* Numbered marker as an outlined avatar, matching shadcn's Avatar fallback. */
.step .num {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
}
.step h3 { margin-bottom: .25rem; }
.step p { color: var(--muted-foreground); font-size: .875rem; }

.callout { margin-top: 2.5rem; scroll-margin-top: 5.5rem; }
.callout .table-wrap { margin-top: 1.25rem; }

/* ─────────────────────────── build ─────────────────────────── */

.build-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}

.code-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .625rem .75rem .625rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  font-size: .8125rem; font-weight: 500; color: var(--muted-foreground);
}
.copy.ok { color: var(--foreground); border-color: var(--border-strong); }

pre {
  margin: 0; padding: 1rem;
  overflow-x: auto;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.7;
  color: var(--foreground);
}
pre code { background: none; padding: 0; white-space: pre; font-size: inherit; font-weight: 400; }
pre .c { color: var(--muted-foreground); }
pre .d { color: var(--foreground); font-weight: 600; }

.numbered { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.numbered li { font-size: .875rem; color: var(--muted-foreground); }
.numbered li::marker { color: var(--muted-foreground); }

/* ─────────────────────────── closer + footer ─────────────────────────── */

.closer {
  text-align: center;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: color-mix(in oklab, var(--muted) 45%, var(--background));
  border-top: 1px solid var(--border);
}
.closer .brand-mark { margin-inline: auto; }
.closer p { color: var(--muted-foreground); margin-top: .75rem; }

.footer { border-top: 1px solid var(--border); padding: 1.75rem 0; background: var(--background); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: .875rem;
  align-items: center; justify-content: space-between;
  font-size: .875rem; color: var(--muted-foreground);
}
/* Six links don't fit one phone-width line, and a footer is the last place worth
   introducing a horizontal scrollbar for, so the row wraps. */
.footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* ─────────────────────────── reveal + motion ─────────────────────────── */

.reveal { opacity: 0; transform: translateY(1rem); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 860px) {
  .nav-links { display: none; }
  .window-body { grid-template-columns: 1fr; min-height: 0; }
  .sidebar {
    border-right: 0; border-bottom: 1px solid var(--border);
    display: flex; gap: .375rem; overflow-x: auto; padding: .625rem;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .side-head { display: none; }
  .side-list { display: flex; gap: .375rem; }
  .side-list button { white-space: nowrap; border-color: var(--border); }
  .hint { padding-left: 0; }
  .opt { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .card { padding: 1.25rem; }
  .alert { padding: 1.125rem 1.25rem; }
  .cta .btn { width: 100%; }
  .stat b { font-size: 1.625rem; }
}