/* =========================================================================
   H+CO · CLAUDE CODE ONBOARDING — SHARED STYLESHEET
   Built in the P057 editorial design language (DESIGN.md). The furniture
   below (fonts, tokens, grain, rails, dock, buttons, components A/C/D/E)
   is carried over verbatim from the P057 styleguide + in-use artifacts so
   the four onboarding pages are visually identical to that system.

   New for this site (P057 does not contain these): the sticky mono nav,
   and the functional teaching patterns — code block, copy button, numbered
   steps, placeholder panel, install block, gallery card.

   To reskin for another department: change one [data-accent] value per page.
   ========================================================================= */

/* =========================================================================
   0. SELF-HOSTED BRAND FONTS  (DESIGN.md §6)
   VC Nudge (display) + Suisse Int'l Mono (utility). local() first so an
   installed copy is used when present; the bundled .otf keeps the site
   portable when the folder is copied.
   ========================================================================= */
@font-face {
  font-family: "VC Nudge";
  src: local("VCNudge-ExtraBold"), local("VC Nudge ExtraBold"),
       url("assets/fonts/VCNudge-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "VC Nudge";
  src: local("VCNudge-Black"), local("VC Nudge Black"),
       url("assets/fonts/VCNudge-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Mono";
  src: local("SuisseIntlMono-Regular"), local("Suisse Int'l Mono"),
       url("assets/fonts/SuisseIntlMono-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Mono";
  src: local("SuisseIntlMono-Bold"), local("Suisse Int'l Mono Bold"),
       url("assets/fonts/SuisseIntlMono-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =========================================================================
   1. TOKENS  (DESIGN.md §5)
   ========================================================================= */
:root {
  --font-display: "VC Nudge", Impact, "Arial Black", sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "Suisse Int'l Mono", "SFMono-Regular", ui-monospace, monospace;

  --ink: #000000;
  --ink-soft: #070707;
  --charcoal: #232323;
  --paper: #e7e7e7;
  --paper-soft: #f3f3f0;
  --white: #ffffff;

  --acid: #e3eb6d;
  --magenta: #ea73e2;
  --coral: #ff514e;
  --blue: #49a8ff;
  --green: #42d976;
  --rose: #e75f6c;
  --purple: #a98bff;

  --radius-card: 38px;
  --radius-mid: 24px;
  --radius-small: 8px;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px;

  --nav-h: 52px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg: var(--ink);
  --surface: var(--ink-soft);
  --surface-strong: #101010;
  --text: var(--white);
  --text-muted: #d9d9d9;
  --line: rgb(255 255 255 / 0.24);
  --line-soft: rgb(255 255 255 / 0.12);
  --inverse-bg: var(--paper);
  --inverse-text: var(--ink);
  --code: #e9e9e3;              /* calm light ink for code bodies */
  /* On a black page the bright accent reads as foreground, so ink == accent. */
  --accent-ink: var(--accent);
}
[data-theme="light"] {
  --bg: #f4f2ee;                /* warm light grey: softer + less clinical than the old cool #e7e7e7 */
  --surface: var(--white);
  --surface-strong: #eae7e0;    /* warm panel, a step DARKER than the page so code/cards read as inset surfaces */
  --text: #1f1f1f;             /* softened from pure #000 — gentler, still 14.7:1 on the bg */
  --text-muted: #45433b;        /* warm-tuned muted (≈8.6:1 on the bg) */
  --line: rgb(28 24 12 / 0.26);
  --line-soft: rgb(28 24 12 / 0.12);
  --inverse-bg: var(--ink);
  --inverse-text: var(--white);
  --code: #1a1a16;
  --accent-ink: #585f10;        /* fallback; per-accent values set below */
}

[data-accent="acid"]    { --accent: var(--acid); }
[data-accent="magenta"] { --accent: var(--magenta); }
[data-accent="coral"]   { --accent: var(--coral); }
[data-accent="blue"]    { --accent: var(--blue); }
[data-accent="green"]   { --accent: var(--green); }
[data-accent="rose"]    { --accent: var(--rose); }
[data-accent="purple"]  { --accent: var(--purple); }

/* ----------------------------------------------------------------------------
   ACCENT-INK (light theme only) — accessible foreground/line versions.
   The bright brand accents are unreadable as TEXT on the light paper bg
   (acid ≈ 1.04:1). These darkened, hue-matched inks all clear WCAG AA (≥5.4:1
   on the warm bg #f4f2ee, ≥4.9:1 on the #eae7e0 panel) and are routed to every
   page-background accent use below. The
   bright --accent is kept for FILLS (panels, the primary CTA) and for text on
   the always-dark cards, where it stays high-contrast.
   In dark mode --accent-ink == --accent (above), so nothing changes there.
   ---------------------------------------------------------------------------- */
[data-theme="light"][data-accent="acid"]    { --accent-ink: #42701c; } /* 5.27:1 on #f4f2ee; AA-safe for small text (eyebrow/nav/links) */
/* The acid accent-ink above is darkened for small-text contrast, but on the giant
   textured hero that olive read as brown. --display-ink is used ONLY by the hero
   gradient, so we can give acid a brighter, more yellow-green here (large display
   text needs only ~3:1) without touching any of the AA-bound small text. */
[data-theme="light"][data-accent="acid"]    { --display-ink: #6b8e14; } /* ~3.4:1 large-text; pushed green (lower red) so the hero reads chartreuse, not brown/olive (markup: "the yellow feels very brown") */
[data-theme="light"][data-accent="magenta"] { --accent-ink: #94228c; } /* 6.55:1 */
[data-theme="light"][data-accent="coral"]   { --accent-ink: #b82b28; } /* 5.50:1 */
[data-theme="light"][data-accent="blue"]    { --accent-ink: #1763b0; } /* 5.45:1 */
[data-theme="light"][data-accent="green"]   { --accent-ink: #157036; } /* 5.52:1 */
[data-theme="light"][data-accent="rose"]    { --accent-ink: #a82d3a; } /* 6.06:1 */
[data-theme="light"][data-accent="purple"]  { --accent-ink: #7a2fd6; } /* 5.86:1 */

/* =========================================================================
   2. RESET + SHELL  (DESIGN.md §7)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background .32s var(--ease), color .32s var(--ease);
}
.wrap { max-width: 1000px; margin-inline: auto; }
.section {
  position: relative;
  /* Generous, even vertical rhythm: a higher floor (5.5rem) so small/mid
     viewports breathe as much as wide ones, not just the desktop max. */
  padding: clamp(5.5rem, 9vw, 9.5rem) clamp(1.25rem, 4vw, 4rem);
  border-top: 1px solid var(--line-soft);
  isolation: isolate;
  overflow: clip;
}
.section.tight { padding-block: clamp(4rem, 6vw, 7rem); }
/* First section after the full-height hero: trim the top so the hero→section
   seam matches the section→section rhythm rather than reading doubled. */
.hero + .section { padding-top: clamp(4rem, 7vw, 7rem); }

/* Page grain — generated inline, no external asset (DESIGN.md §10) */
.grain::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .055; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
[data-theme="light"] .grain::before { mix-blend-mode: multiply; opacity: .04; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(.64rem, .8vw, .82rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--space-3);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent-ink); }
/* Centre the hero eyebrow to sit under the centred hero title; section-body
   eyebrows stay left-aligned (this selector only matches the hero). */
.hero .eyebrow { justify-content: center; }
.section-note {
  font-family: var(--font-body); max-width: 62ch;
  color: var(--text-muted); line-height: 1.5; font-size: 1rem;
}
.section-note b { color: var(--text); }
.section-note a, .body a, .step-body a, .caption a, .callout a, .cc-body a, .faq-a a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.section-note a:hover, .body a:hover, .step-body a:hover, .caption a:hover, .callout a:hover, .cc-body a:hover, .faq-a a:hover { border-bottom-color: var(--accent); }
/* In light mode the bright --accent is unreadable as link text on the warm paper
   bg (markup: "the hyperlink colour needs to change"), so content links route to
   the AA-safe --accent-ink, matching eyebrows/nav. Dark mode is unchanged. */
[data-theme="light"] :is(.section-note, .body, .step-body, .caption, .callout, .cc-body, .faq-a) a { color: var(--accent-ink); }
[data-theme="light"] :is(.section-note, .body, .step-body, .caption, .callout, .cc-body, .faq-a) a:hover { border-bottom-color: var(--accent-ink); }

/* =========================================================================
   3. TYPE SCALE  (DESIGN.md §6)
   ========================================================================= */
/* VC Nudge is a heavy face; positive (size-aware) tracking keeps the thick
   strokes from touching. Larger sizes need less added space, mid display more. */
.display-xl { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(5rem, 17vw, 21rem); line-height: .82; letter-spacing: .005em; text-transform: uppercase; margin: 0; }
.display-lg { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(4rem, 12vw, 13rem); line-height: .84; letter-spacing: .012em; text-transform: uppercase; margin: 0; }
.display-md { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: .92; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.metric { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(4rem, 11vw, 13rem); line-height: .82; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.body-large { font-family: var(--font-body); font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.25; }
.body { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; max-width: 64ch; }
.caption { font-family: var(--font-body); font-size: .875rem; line-height: 1.35; color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.accent-word { color: var(--accent); }

/* Inline mono code token inside body copy */
.k {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--surface-strong); color: var(--accent);
  padding: .08em .38em; border: 1px solid var(--line-soft);
}
[data-theme="light"] .k { color: var(--ink); }

/* =========================================================================
   4. STICKY MONO NAV  (new — shared across all four pages)
   The persistent furniture. The four-corner frame rails live per-hero and
   scroll away; this bar stays. Active page shown in the page's accent.
   ========================================================================= */
.topnav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--nav-h);
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Progress fill along the bar's bottom edge — app.js sets --nav-progress
   to the current step's position (25 / 50 / 75 / 100%). Reads as a tracker. */
.topnav::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--nav-progress, 0%); background: var(--accent-ink);
  transition: width .45s var(--ease);
}
.nav-brand {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.nav-brand b { color: var(--accent-ink); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: clamp(.7rem, 1.8vw, 1.8rem); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none;
  padding: .35rem 0; white-space: nowrap;
  transition: color .15s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover .ns-num { border-color: var(--accent-ink); color: var(--accent-ink); }

/* Stepped tracker nodes (the numeral becomes a node; app.js injects the spans
   + the is-done/is-current/is-upcoming state from aria-current, so the page
   markup is identical on all four pages and degrades to plain links with no JS). */
.ns-num {
  font-family: var(--font-mono); font-size: .56rem; line-height: 1;
  display: grid; place-items: center; width: 19px; height: 19px; flex: none;
  border: 1px solid var(--line); border-radius: 50%; color: var(--text-muted);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.ns-label { white-space: nowrap; }
.nav-links a.is-done .ns-num,
.nav-links a.is-current .ns-num { background: var(--accent-ink); color: var(--bg); border-color: var(--accent-ink); }
.nav-links a.is-current { color: var(--accent-ink); }
.nav-links a.is-current .ns-label { color: var(--accent-ink); }
.nav-links a[aria-current="page"] { color: var(--accent-ink); }  /* no-JS fallback */

/* Mid-width band: six short labels + brand + toggle are tight here, so keep
   the labels visible (per review) but shrink the font and gap and let them
   wrap rather than collapsing to a number-only stepper. Lower bound is the
   burger breakpoint (769px): at or below it the row collapses behind the
   hamburger instead (see "Small-screen burger nav" below). */
@media (min-width: 769px) and (max-width: 900px) {
  .nav-links { gap: .5rem 1rem; font-size: .6rem; flex-wrap: wrap; }
}

/* Right cluster: nav links + theme toggle (toggle injected by app.js) */
.nav-right { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 2rem); }

/* Theme toggle — the clear, discoverable light/dark control on every page */
.nav-theme {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text); cursor: pointer;
  background: transparent; border: 1px solid var(--line);
  padding: .4rem .7rem; min-height: 34px; white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.nav-theme:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* "Read with Claude" — opens the current page in a fresh Claude chat.
   Shares the theme toggle's pill so the two read as one control cluster;
   the Claude mark keeps its own clay fill (set on the path, not currentColor). */
.read-claude {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text); text-decoration: none;
  background: transparent; border: 1px solid var(--line);
  padding: .4rem .7rem; min-height: 34px; white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.read-claude:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.read-claude .rc-mark { width: 16px; height: 16px; display: block; flex: none; }
/* Below the burger breakpoint the bar is tight — keep just the mark. */
@media (max-width: 768px) { .read-claude .rc-label { display: none; } }
.nav-theme svg { width: 15px; height: 15px; display: block; }
.nav-theme .ic-sun { display: none; }
.nav-theme .ic-moon { display: none; }
[data-theme="dark"] .nav-theme .ic-sun { display: block; }   /* dark → offer light */
[data-theme="light"] .nav-theme .ic-moon { display: block; } /* light → offer dark */
/* No-JS fallback only: with no script there's no burger, so stack the bar and
   let the links wrap so they stay reachable. With JS this never applies — the
   burger (below) owns small screens instead. */
@media (max-width: 768px) {
  html:not(.js) .topnav { flex-direction: column; align-items: flex-start; gap: .4rem; padding-block: .5rem; }
  html:not(.js) .nav-right { width: 100%; justify-content: space-between; gap: .8rem; }
  html:not(.js) .nav-links { font-size: .6rem; gap: .7rem 1rem; flex-wrap: wrap; }
  html:not(.js) .nav-links .ns-label { display: inline; }
}

/* =========================================================================
   SMALL-SCREEN BURGER NAV  —  two collapse controls, made to look different
   ---------------------------------------------------------------------------
   Both buttons are injected by app.js and CSS-gated on the .js class so the
   no-JS fallback above still works. They are styled as opposites on purpose:
   • Top nav  → a plain hamburger, top-right, that drops a vertical menu DOWN.
   • TOC      → a labelled accent pill, bottom-centre, that lifts a list UP.
   ========================================================================= */

/* --- The hamburger control (hidden until the nav collapses) --- */
.nav-burger {
  display: none; /* shown only in the collapse media query below */
  align-items: center; justify-content: center;
  width: 40px; height: 34px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  color: var(--text);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.nav-burger:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* The three bars are one element + its two pseudo-elements; they fold into an
   X when the menu is open. */
.nav-burger .bz, .nav-burger .bz::before, .nav-burger .bz::after {
  display: block; width: 18px; height: 2px; background: currentColor;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.nav-burger .bz { position: relative; }
.nav-burger .bz::before, .nav-burger .bz::after { content: ""; position: absolute; left: 0; }
.nav-burger .bz::before { top: -6px; }
.nav-burger .bz::after  { top: 6px; }
.topnav.is-menu-open .nav-burger .bz { background: transparent; }
.topnav.is-menu-open .nav-burger .bz::before { transform: translateY(6px) rotate(45deg); }
.topnav.is-menu-open .nav-burger .bz::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- The TOC pill control (hidden until the TOC collapses) --- */
.toc-burger { display: none; }

@media (max-width: 768px) {
  /* ----- Top nav: show the hamburger, drop the links into a panel ----- */
  .js .nav-burger { display: inline-flex; }
  .js .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .2rem clamp(1rem, 4vw, 2rem) .5rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgb(0 0 0 / .3);
  }
  .js .topnav.is-menu-open .nav-links { display: flex; }
  .js .nav-links li { width: 100%; }
  .js .nav-links a {
    width: 100%; padding: .85rem .2rem; font-size: .74rem;
    border-top: 1px solid var(--line);
  }
  .js .nav-links li:first-child a { border-top: 0; }
  .js .nav-links .ns-label { display: inline; }

  /* ----- TOC: swap the chip strip for the accent pill + upward list ----- */
  .js .toc {
    padding: 0; background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .js .toc-burger {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-ink); cursor: pointer;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
    border-radius: 999px; padding: .6rem 1.1rem; min-height: 42px;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgb(0 0 0 / .28);
  }
  .js .toc-burger svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
  .js .toc.is-open .toc-burger svg { transform: rotate(180deg); }
  /* the strip becomes a vertical popover anchored above the pill */
  .js .toc-inner {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(100% + .5rem);
    display: none; flex-direction: column; align-items: stretch; gap: .35rem;
    width: max-content; max-width: calc(100vw - 2rem); overflow: visible;
    padding: .55rem;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 16px 34px rgb(0 0 0 / .32);
  }
  .js .toc.is-open .toc-inner { display: flex; }
  .js .toc-label { display: none; }
  .js .toc-link { text-align: center; padding: .65rem 1.1rem; }
}

/* =========================================================================
   5. CONTROL DOCK  (theme + accent switchers) — carried from P057
   ========================================================================= */
.dock {
  position: fixed; z-index: 90;
  bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-3);
  padding: .55rem .7rem;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  max-width: calc(100vw - 2rem); flex-wrap: wrap; justify-content: center;
}
.dock-group { display: flex; align-items: center; gap: .5rem; }
.dock-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.theme-btn {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  padding: .45rem .8rem; min-height: 36px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.theme-btn[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.swatch-btn {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; outline: 1px solid var(--line);
  padding: 0; transition: transform .15s var(--ease);
}
.swatch-btn:hover { transform: scale(1.15); }
.swatch-btn[aria-pressed="true"] { border-color: var(--text); transform: scale(1.15); }

/* =========================================================================
   6. FRAME RAILS  (DESIGN.md §8) — carried from P057
   ========================================================================= */
.framed { position: relative; }

/* =========================================================================
   7. HERO / DISPLAY LOCKUP  (component A) — carried from P057
   ========================================================================= */
.hero {
  min-height: calc(100svh - var(--nav-h));
  display: grid; place-items: center; text-align: center;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem);
}
.hero-inner { position: relative; z-index: 2; max-width: 1100px; }
.textured-display {
  color: transparent;
  /* -webkit-background-clip:text paints the gradient ONLY inside the element box,
     so any text that overflows the box renders transparent — that's the RHS clip
     on a long word like RESOURCES. (Chrome; Safari's box happens to fall later).
     width:fit-content shrinks the box to the actual text so every glyph gets fill,
     max-width:100% + margin-inline:auto keep it from overrunning and stay centred.
     The hair of inline padding gives the trailing glyph's side-bearing room. */
  width: fit-content; max-width: 100%; margin-inline: auto;
  padding-inline: .08em;
  background:
    linear-gradient(180deg, var(--display-ink, var(--accent-ink)), color-mix(in oklab, var(--display-ink, var(--accent-ink)) 55%, var(--text))),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: cover, 200px 200px; background-position: center;
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
}
/* RESOURCES. is the longest one-word hero title; trim its scale a touch so the
   whole word fits the lockup width even on wide screens, where the vw-driven
   size would otherwise outgrow the ~1100px hero measure. */
.textured-display.display-fit { font-size: clamp(4rem, 13.5vw, 14rem); }
.hero-sub {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 3.4rem); line-height: 1;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--accent-ink); margin: var(--space-2) 0 0;
}

/* =========================================================================
   8. EDITORIAL SPLIT  (component D) — carried from P057
   ========================================================================= */
.split { margin-top: var(--space-5); }
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-4); }
@media (max-width: 820px) { .split-cols { grid-template-columns: 1fr; gap: var(--space-3); } }

/* =========================================================================
   9. METRIC CARD GRID  (component C) — carried from P057
   Used for permission modes (page 1) and as the gallery base (page 4).
   ========================================================================= */
/* Permission field sits directly on the page now (no card panel around it) —
   just keeps the top rhythm below the intro copy. */
.perm { margin-top: var(--space-5); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.metric-card { background: var(--ink); color: var(--white); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.4rem); min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: .8rem; }
.metric-card .mc-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem); line-height: .82; text-transform: uppercase; color: var(--accent); }
.metric-card .mc-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.metric-card .mc-body { font-family: var(--font-body); font-size: .95rem; line-height: 1.45; color: var(--text-muted); }
.metric-card .mc-tag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); align-self: flex-start; border: 1px solid var(--accent); padding: .25rem .5rem; }

/* =========================================================================
   10. COMMUNITY CARD ROW  (component E) — carried from P057
   ========================================================================= */
.community { background: color-mix(in oklab, var(--accent) 8%, var(--surface-strong)); border: 1px solid var(--line-soft); border-radius: var(--radius-card); padding: clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--space-5); }
.community .ch { color: var(--text); margin-bottom: var(--space-4); }
.community-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.community-card { background: var(--ink); color: var(--white); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-mid); padding: var(--space-4); min-height: 200px; display: flex; flex-direction: column; gap: .6rem; }
.community-card .icon { font-size: 1.6rem; color: var(--accent); }
.community-card .cc-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: .9; text-transform: uppercase; color: var(--accent); }
.community-card .cc-body { font-family: var(--font-body); font-size: .92rem; line-height: 1.45; color: var(--text-muted); }
.community-card .cc-cap { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: auto; }

/* Full skill library on the gallery: a labelled band per department, each
   wrapping its own gallery-grid. Header gives the dept name + skill count. */
.lib-dept + .lib-dept { margin-top: var(--space-6); }
.lib-dept .row-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  border-top: 1px solid var(--line-soft); padding-top: var(--space-2); margin-bottom: var(--space-3); }
.lib-dept .row-label em { font-style: normal; color: var(--accent); }

/* =========================================================================
   11. BUTTONS  (DESIGN.md §12) — carried from P057
   ========================================================================= */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--accent-ink); border-radius: 0;
  color: var(--accent-ink); background: transparent;
  font: 500 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.button:hover { background: var(--accent-ink); color: var(--bg); }
/* Primary CTA stays a bright accent FILL (black text on acid = high contrast). */
.button-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.button-primary:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.button-lg { min-height: 56px; padding: 0 28px; font-size: .82rem; }

/* Next-step block at the foot of pages 1–3 */
.next-step { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; text-align: right; }
/* Page-scoped override: left-align the close CTA (resources page) without
   undoing the right-aligned default elsewhere. */
.next-step--left { align-items: flex-start; text-align: left; }
.next-step .ns-eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* =========================================================================
   12. NEW · CODE BLOCK + INSTALL BLOCK
   Dark panel on --surface-strong, square corners, thin border. A mono chip
   sits on the top edge in the current accent (filename or context label).
   The install block is the same component with a context chip.
   ========================================================================= */
.code-block {
  position: relative; margin: var(--space-4) 0 0;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}
.code-block + .code-block { margin-top: var(--space-5); }
.code-head {
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.code-chip {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); background: var(--accent);
  padding: .5rem .8rem; align-self: flex-start;
}
.code-chip.context { color: var(--ink); }
.copy-btn {
  min-height: 0; align-self: stretch; border: 0; border-left: 1px solid var(--line-soft);
  padding: .5rem 1rem; background: transparent; color: var(--text-muted);
}
.copy-btn:hover { background: var(--accent); color: var(--ink); }
.copy-btn[data-copied="true"] { background: var(--accent); color: var(--ink); }
.code-block pre {
  margin: 0; padding: var(--space-3) var(--space-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.code-block code {
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.6;
  color: var(--code); white-space: pre; tab-size: 2;
}
.code-block .cmd { color: var(--accent-ink); }    /* slash command / command token — code bg is theme-aware, so use ink */
.code-block .cmt { color: var(--text-muted); }   /* comment line */

/* =========================================================================
   13. NEW · NUMBERED STEPS
   Large display numeral in the accent in a left rail, calm Manrope beside.
   Rail discipline, not a bullet list.
   ========================================================================= */
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: clamp(64px, 9vw, 120px) 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--line-soft); align-items: start;
}
.step:first-child { border-top: 0; }
.step-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .8; text-transform: uppercase; color: var(--accent-ink);
}
.step-body { padding-top: .2rem; }
.step-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 .5rem; color: var(--text); }
.step-body .body { margin: 0; color: var(--text-muted); }
.step-body .body b { color: var(--text); }
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: var(--space-1); }
  .step-num { font-size: 2.4rem; }
}

/* =========================================================================
   14. NEW · PLACEHOLDER PANEL
   Grain-textured panel (feTurbulence data-URI) with a centred mono label.
   Use wherever a real image/output is not yet wired.
   ========================================================================= */
.placeholder {
  position: relative; display: grid; place-items: center; text-align: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius-small);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 20%, var(--surface)), var(--surface-strong)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: cover, 200px 200px; background-blend-mode: overlay;
  min-height: 160px; padding: var(--space-3);
}
.placeholder span {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); line-height: 1.5;
}

/* =========================================================================
   15. NEW · GALLERY CARD  (page 4 — built on the component C stage)
   Black rounded cards on the accent field: thumbnail, skill name in VC Nudge,
   slash command in mono, plain description, mono download-count chip.
   ========================================================================= */
/* Smaller cards: a denser auto-fill grid so a full library reads as a catalogue,
   not a showcase. Names, thumbs and padding all step down to match. */
/* Three-up, calmer grid: fewer, larger cards with more air read as sleek,
   not as a dense catalogue. Steps down to 2-up, then 1-up. */
/* Uniform even grid: every card is one column and sizes to its own content.
   align-items:start stops a taller card (one with a real image) from stretching
   its shorter row-mates to match — the cause of the bloated empty cards in the
   markup feedback. */
/* grid-auto-rows:1fr + stretch makes EVERY card the same height across the whole
   suite (markup: "ensure every card is the same height across the suite"), not
   just within a row. Cards are flex columns, so content distributes to the floor. */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); grid-auto-rows: 1fr; align-items: stretch; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-card {
  background: var(--ink); color: var(--white);
  border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-mid);
  padding: var(--space-3); display: flex; flex-direction: column; gap: .5rem;
  overflow: hidden;   /* clip the bled-out thumb to the card's rounded corners */
}
/* Top thumb bleeds flush to the card's top + side edges: pull it out by the
   padding (3 sides), and flatten its own radius/border so the card's
   overflow:hidden does all the corner rounding. Most cards use a .placeholder,
   not an <img>, so both must be flattened or a nested frame shows through. */
.gallery-card .thumb {
  aspect-ratio: 16/10; overflow: hidden;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
}
.gallery-card .thumb,
.gallery-card .thumb .placeholder,
.gallery-card .thumb img { border-radius: 0; }
.gallery-card .thumb .placeholder { width: 100%; height: 100%; min-height: 0; border: 0; }
.gallery-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card .gc-name { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; line-height: .95; text-transform: uppercase; color: var(--accent); margin-top: .25rem; }
.gallery-card .gc-cmd { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: rgb(255 255 255 / .88); }
.gallery-card .gc-body { font-family: var(--font-body); font-size: .82rem; line-height: 1.45; color: rgb(255 255 255 / .58);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Footer meta (dept + connector) removed from the card face — kept in the DOM
   for search/data but hidden. Flip to flex to bring the foot back. */
.gallery-card .gc-foot { display: none; }
.gallery-card .gc-dl { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.gallery-card .gc-conn { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .5); }

/* HERO CARDS — the span-2 emphasis is retired. It dragged its row-mate's height
   out and broke the even grid (markup feedback: "they need to be even"). The
   `is-hero` class is kept in the markup (harmless, search/data untouched) so a
   contained emphasis treatment can be reinstated later if wanted; for now every
   card renders uniform. Cards that carry a real image simply show it in a normal
   card slot. */
.gallery-card.is-hero { grid-column: auto; }
.gallery-card.is-hero .thumb { aspect-ratio: 16/10; }
.gallery-card.is-hero .gc-name { font-size: 1.18rem; margin-top: .25rem; }
.gallery-card.is-hero .gc-body { -webkit-line-clamp: 2; line-clamp: 2; font-size: .82rem; }

/* Library filter controls — sleeker: chips on the left, a slim pill search with
   a magnifier glyph on the right. One calm line that wraps cleanly on narrow
   widths (chips keep priority; search drops below them). */
.lib-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.lib-filter { order: 1; display: flex; flex-wrap: wrap; gap: .4rem; }
.lib-controls #skillSearch {
  order: 2; flex: 0 1 230px; min-width: 170px;
  font-family: var(--font-mono); font-size: .74rem; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2'/%3E%3C/svg%3E") no-repeat .8rem center;
  background-size: 14px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem .9rem .5rem 2.1rem;
  transition: border-color .2s var(--ease);
}
.lib-controls #skillSearch:focus { outline: none; border-color: var(--accent-ink); }
.lib-filter .chip {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: .42rem .7rem; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lib-filter .chip em { font-style: normal; opacity: .6; margin-left: .15rem; }
.lib-filter .chip:hover { color: var(--text); border-color: var(--accent-ink); }
.lib-filter .chip.is-active { color: var(--bg); background: var(--accent-ink); border-color: var(--accent-ink); }
.lib-empty { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--text-muted); margin-top: var(--space-4); }

/* Resources page (05): video cards reuse the gallery shell but a clickable <a>,
   a 16:9 thumb with a play affordance, and a readable sentence-case title
   (long video names would be illegible in the all-caps display gc-name). */
.res-card { text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.res-card:hover { border-color: var(--accent-ink); transform: translateY(-2px); }
.res-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.res-card .thumb { position: relative; aspect-ratio: 16/9; background: var(--surface-strong); }
.res-card .thumb::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgb(0 0 0 / .55);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.res-card .thumb::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-38%, -50%); width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--white);
}
.res-card:hover .thumb::before { transform: translate(-50%, -50%) scale(1.12); background: var(--accent-ink); }
.res-card .gc-name {
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  text-transform: none; letter-spacing: 0; color: var(--white); margin-top: .4rem;
}
/* Lighter footer: the bucket already names the shelf, so a single muted
   watch line with no divider keeps the card calm. */
.res-card .gc-foot { border-top: none; padding-top: .2rem; margin-top: .5rem; }
.res-card .gc-conn { text-transform: none; letter-spacing: .02em; font-size: .68rem; }

/* DIFFICULTY SCALE — how hard the techniques in a video are. Three bars fill
   from the accent by data-level (1 Beginner / 2 Intermediate / 3 Advanced).
   margin-top:auto pins it to the card bottom so cards stay height-aligned. */
.gc-diff { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .7rem; }
.diff-bars { display: inline-flex; gap: 3px; }
.diff-bars i { width: 16px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .18); }
.gc-diff[data-level="1"] .diff-bars i:nth-child(-n+1),
.gc-diff[data-level="2"] .diff-bars i:nth-child(-n+2),
.gc-diff[data-level="3"] .diff-bars i:nth-child(-n+3) { background: var(--accent); }
.diff-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .55); }

/* =========================================================================
   16. CALLOUT  (a quiet aside / tip, in the rail idiom)
   ========================================================================= */
.callout {
  margin-top: var(--space-5); border: 1px solid var(--accent-ink);
  background: color-mix(in oklab, var(--accent-ink) 7%, transparent);
  padding: var(--space-3) var(--space-4);
}
.callout .co-tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: .5rem; }
.callout p { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text); max-width: 64ch; }

/* Higher-tier callout: promotes a key takeaway from the quiet aside above to a
   solid accent FILL — the loudest device in the system (same treatment as
   .breather). Text flips to --ink, which clears contrast on the bright accent
   in both themes (accent stays the page colour regardless of light/dark). */
.callout-feature {
  border-color: var(--accent); background: var(--accent);
  padding: var(--space-4);
}
.callout-feature .co-tag { color: var(--ink); opacity: .72; }
.callout-feature p { color: var(--ink); font-size: 1.12rem; line-height: 1.45; font-weight: 500; max-width: 60ch; }

/* =========================================================================
   17. TWO-COLUMN BODY  (for what-it-is / why explanations)
   ========================================================================= */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
.cols2 h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.2rem; margin: 0 0 .6rem; }
.cols2 .mono-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: .6rem; }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; gap: var(--space-4); } }

/* =========================================================================
   17a. NEW · POINTS LIST  (digestible alternative to dense body paragraphs)
   A scannable list in the rail idiom: a short 1px accent leader per item
   (echoes the eyebrow), calm Manrope beside. Use to break a wall of prose
   under a title into a few clear points.
   ========================================================================= */
.points { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); max-width: 62ch; }
.points li { position: relative; padding-left: 1.6rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--text-muted); }
.points li::before { content: ""; position: absolute; left: 0; top: .66em; width: 14px; height: 1px; background: var(--accent-ink); }
.points li b { color: var(--text); font-weight: 600; }
.points li .k { color: var(--accent-ink); }

/* =========================================================================
   17b. FAQ / GOTCHAS LIST  (mono question, calm answer — rail discipline)
   ========================================================================= */
.faq { margin-top: var(--space-5); border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover .faq-q { color: var(--text); }
.faq-q { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); margin: 0; transition: color .15s var(--ease); }
.faq-item > summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; line-height: 1; color: var(--text-muted); flex: none; }
.faq-item[open] > summary::after { content: "\2212"; color: var(--accent-ink); }
.faq-a { font-family: var(--font-body); font-size: .98rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 var(--space-3); max-width: 64ch; }
.faq-a b { color: var(--text); }

/* =========================================================================
   18. FOOTER  (rail-style metadata) — carried from P057
   ========================================================================= */
.foot { padding: var(--space-6) clamp(1.25rem, 4vw, 4rem) var(--space-8); border-top: 1px solid var(--line); }
.foot-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.foot-meta span b { color: var(--accent-ink); font-weight: 500; }
.foot-line { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 9vw, 8rem); line-height: .85; letter-spacing: .01em; text-transform: uppercase; margin: var(--space-5) 0 0; }

/* =========================================================================
   20. NEW · APP UI MOCKUP KIT  (recreates the Claude Code desktop UI)
   Rendered in the app's own neutral-dark palette so each mockup reads as an
   authentic screenshot in BOTH page themes; only the outer frame + mono
   caption respond to the theme. Self-contained: inline SVG icons, no images.
   ========================================================================= */
.ui-figure { margin-top: var(--space-4); max-width: 560px; }
.ui-figure.center { margin-inline: auto; }
.ui-chrome {
  --uibg: #0b0b0d; --uipanel: #242428; --uiline: rgb(255 255 255 / .10);
  --uitext: #ededee; --uimuted: #8a8a8f; --uihover: #303036; --uiblue: #0a84ff;
  background: var(--uibg); border: 1px solid var(--uiline);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 28px 56px -28px rgb(0 0 0 / .75);
  color: var(--uitext); line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
[data-theme="light"] .ui-chrome { border-color: rgb(0 0 0 / .18); box-shadow: 0 24px 50px -26px rgb(0 0 0 / .4); }
.ui-cap {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: var(--space-2); display: flex; align-items: center; gap: .55rem;
}
.ui-cap::before { content: ""; width: 18px; height: 1px; background: var(--accent-ink); flex: none; }
.ui-chrome svg { display: block; }

/* macOS window dots */
.ui-dots { display: flex; gap: 7px; margin-bottom: 20px; }
.ui-dots span { width: 11px; height: 11px; border-radius: 50%; background: #39393c; }

/* tab strip + menu rows (sidebar) */
.ui-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.ui-tabicon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--uimuted); }
.ui-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--uipanel); color: var(--uitext);
  font-weight: 600; font-size: 15px; padding: 7px 13px; border-radius: 9px;
}
.ui-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ui-menu li { display: flex; align-items: center; gap: 14px; padding: 9px 4px; font-size: 15px; color: var(--uitext); }
.ui-ic { width: 20px; height: 20px; display: grid; place-items: center; color: var(--uimuted); flex: none; }

/* composer bar */
.ui-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ui-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--uipanel); color: var(--uitext); font-size: 13px; padding: 7px 12px; border-radius: 9px; }
.ui-pill.sq { padding: 8px; }
.ui-pill.ring { box-shadow: 0 0 0 1.5px var(--uiblue); border-color: var(--uiblue); }
.ui-input { background: var(--uipanel); border-radius: 12px; padding: 15px 16px; color: var(--uimuted); font-size: 14px; min-height: 58px; }
.ui-toolbar { display: flex; align-items: center; gap: 16px; margin-top: 14px; color: var(--uimuted); }
.ui-toolbar .ui-mode { background: var(--uipanel); color: var(--uitext); font-size: 13px; padding: 6px 12px; border-radius: 8px; margin-right: auto; }

/* popover menus (mode / models / connectors) */
.ui-figure.menu { max-width: 380px; }
.ui-chrome.menu { padding: 8px; background: #202024; border-color: rgb(255 255 255 / .14); }
.ui-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 10px 9px; color: var(--uimuted); font-size: 13px; }
.ui-keys { display: flex; gap: 5px; }
.ui-key { font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--uimuted); border: 1px solid var(--uiline); border-radius: 5px; padding: 4px 5px; min-width: 20px; text-align: center; }
.ui-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--uitext); }
.ui-row .ui-end { margin-left: auto; color: var(--uimuted); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.ui-row.sel { background: var(--uihover); }
.ui-row .ui-dim { color: var(--uimuted); }
.ui-check { display: inline-flex; color: var(--uitext); }
.ui-div { height: 1px; background: var(--uiline); margin: 7px 6px; }

/* connectors list (toggles) */
.ui-conn { display: flex; align-items: center; gap: 12px; padding: 9px 10px; font-size: 14px; color: var(--uitext); }
.ui-conn .ui-name { flex: 1; }
.ui-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--uiblue); position: relative; flex: none; }
.ui-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* connectors two-panel scene (+ menu and its submenu, like the reference) */
.ui-menus { display: flex; gap: 14px; align-items: flex-start; }
.ui-pop { background: #202024; border: 1px solid rgb(255 255 255 / .14); border-radius: 12px; padding: 6px; flex: 1 1 210px; min-width: 0; }
@media (max-width: 560px) { .ui-menus { flex-wrap: wrap; } }

/* model status pill (the composer readout) */
.ui-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; background: #242428; border: 1px solid rgb(255 255 255 / .10); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #ededee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }

/* =========================================================================
   20b. NEW · GUIDED INTERFACE TOUR  (index setup carousel)
   One composed Claude Code window stays put in the viewport; prev/next walk a
   highlight ring (.cc-spot.is-lit) across its regions and swap the caption
   below. Built from the .ui-* atoms above, so it reads as the same UI. The
   window is ALWAYS dark, so the ring uses the vivid --accent (not --accent-ink,
   which darkens on light pages). JS toggles .is-lit / .is-on by step.
   ========================================================================= */
.cc-ui { position: relative; padding: 18px; }
.cc-body { display: flex; gap: 18px; align-items: stretch; }
.cc-side { flex: 0 0 168px; padding-right: 16px; border-right: 1px solid var(--uiline); }
.cc-side .ui-tabs { margin-bottom: 16px; }
.cc-main { flex: 1 1 auto; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: center; }
.cc-modelchip { margin-left: auto; background: var(--uipanel); color: var(--uitext); font-size: 12px; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.cc-send { color: var(--uimuted); }

/* the moving spotlight */
.cc-spot { border-radius: 11px; transition: box-shadow .25s ease, opacity .25s ease; }
.cc-ui[data-touring] .cc-spot:not(.is-lit) { opacity: .42; }
.cc-spot.is-lit { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in oklab, var(--accent) 24%, transparent); }
.cc-side.cc-spot.is-lit { border-radius: 13px; }

/* popovers — only the active step's menu shows, anchored to its trigger */
.cc-pop { position: absolute; display: none; z-index: 3; min-width: 232px; background: #202024; border: 1px solid rgb(255 255 255 / .14); border-radius: 12px; padding: 6px; box-shadow: 0 20px 44px -18px rgb(0 0 0 / .8); }
.cc-pop.is-on { display: block; }
.cc-pop-model { right: 0; bottom: 52px; }
.cc-pop-mode { left: 0; bottom: 52px; }
@media (prefers-reduced-motion: reduce) { .cc-spot { transition: none; } }

/* the caption that changes per step */
.cc-steps { margin-top: var(--space-4); min-height: 7.5rem; }
.cc-step { display: none; }
.cc-step.is-on { display: block; }
.cc-step-n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--accent-ink); }
.cc-step-t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.05; margin: .35rem 0 .5rem; text-transform: uppercase; color: var(--text); }
.cc-step-b { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }

/* stack the window's columns when the layout collapses to one column */
@media (max-width: 760px) {
  .cc-body { flex-direction: column; gap: 14px; }
  .cc-side { flex: none; padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--uiline); }
  .cc-pop-model, .cc-pop-mode { left: 0; right: auto; }
}

/* =========================================================================
   21. PERMISSION PROGRESSION  (page 1 — the bar IS the spine of the 4 cards)
   The track and the card grid share the SAME 4-column grid inside .card-stage,
   so each numbered node sits directly above its card, with a down-tick that
   bridges node → card. The node fill ramps left→right (ask → autonomous),
   echoing the old spectrum's opacity ramp. Collapses to stacked cards on
   mobile, where the card order + labels carry the progression.
   ========================================================================= */
.perm-ends {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font: 500 .68rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.perm-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); position: relative; }
.perm-track::before {            /* the connecting spine, masked by the opaque nodes */
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px;
  background: var(--line-soft); z-index: 0;
}
.perm-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-bottom: var(--space-4); }
.perm-step .pnode {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 600 .62rem/1 var(--font-mono); background: var(--bg);
  border: 2px solid var(--accent-ink); color: var(--accent-ink);
}
.perm-step:nth-child(2) .pnode { background: color-mix(in oklab, var(--accent-ink) 32%, var(--bg)); }
.perm-step:nth-child(3) .pnode { background: color-mix(in oklab, var(--accent-ink) 66%, var(--bg)); color: var(--bg); }
.perm-step:nth-child(4) .pnode { background: var(--accent-ink); color: var(--bg); }
.perm-step .pconn { position: absolute; left: 50%; top: 34px; bottom: 0; width: 2px; background: var(--line-soft); transform: translateX(-50%); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .perm-track { display: none; }                       /* cards carry the order on mobile */
  .card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .card-grid.cols-4 { grid-template-columns: 1fr; }
}

/* =========================================================================
   19. ACCESSIBILITY / REDUCED MOTION  (DESIGN.md §14)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   20. MARKUP ROUND — START PAGE ONLY
   New, self-contained classes. Deliberately avoids the shared .split /
   .community / .steps used on the other pages, so this round can't regress
   setup/skills/gallery. (See .markup-history for the pre-round snapshot.)
   ========================================================================= */

/* C2 · drop the short rule before the centred hero eyebrow (hero only) */
.hero .eyebrow::before { display: none; }

/* C4 + C6 · one reusable two-column lede: the structural element (a headline
   lockup, or the setup carousel) sits LEFT; the prose always sits RIGHT. */
.lede {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  grid-template-areas: "eye ." "head body";
  column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0;
  align-items: start; margin-top: var(--space-5);
}
/* The eyebrow sits on its own row so the prose aligns to the white HEADLINE,
   not the eyebrow above it. display:contents dissolves .lede-head so its
   eyebrow + h2 become direct grid items; this stays robust if the eyebrow
   ever wraps. Scoped to .lede so index's standalone .lede-head is untouched. */
.lede > .lede-head { display: contents; }
.lede > .lede-head > .eyebrow { grid-area: eye; }
.lede > .lede-head > h2 { grid-area: head; }
.lede > .lede-body { grid-area: body; }
.lede-setup { grid-template-columns: 1.1fr 0.9fr; } /* carousel wants the room */
.lede-body > * + * { margin-top: var(--space-4); }
@media (max-width: 860px) {
  .lede { grid-template-columns: 1fr; grid-template-areas: "eye" "head" "body"; }
  .lede-setup { grid-template-columns: 1fr; gap: var(--space-4); }
  .lede > .lede-body { margin-top: var(--space-4); }
}

/* C7 · the setup step carousel — clean prev/next, dots and a live counter */
.carousel {
  border: 1px solid var(--line-soft); border-radius: var(--radius-card);
  background: var(--surface-strong); padding: clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.carousel:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.carousel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.carousel-count b { color: var(--accent-ink); }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex; list-style: none; margin: 0; padding: 0;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }
.cslide {
  flex: 0 0 100%; min-width: 100%; align-self: start;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.cslide-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
  line-height: .9; text-transform: uppercase; color: var(--accent);
}
.cslide-title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0; color: var(--text);
}
.cslide .body { margin: 0; color: var(--text-muted); }
.cslide .ui-figure { margin-top: var(--space-2); }
.carousel-controls { display: flex; align-items: center; gap: var(--space-3); }
.carousel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  cursor: pointer; transition: border-color .15s, color .15s, opacity .15s;
}
.carousel-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.carousel-btn:disabled { opacity: .3; cursor: default; }
.carousel-dots { display: flex; flex: 1; justify-content: center; gap: .5rem; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: background .15s;
}
.carousel-dot:hover { background: var(--text-muted); }
.carousel-dot.is-active { background: var(--accent-ink); }

/* ----------------------------------------------------------------------------
   20c. EMBEDDED INTERFACE TOUR  (index getting-started section)
   The P064 Claude Code interface recreation, embedded as a self-contained
   iframe so its viewport-fixed annotation card can glide to each region
   without leaking into the scrolling page. The stage stays dark in both
   themes (matching the .ui-chrome / .metric-card mockup convention); only the
   highlight is themed, to this page's accent, inside the iframe document.
   The frame is tall enough that the app window + the floating note never clip.
---------------------------------------------------------------------------- */
/* The tour goes full-bleed, edge to edge, and drops the bordered card so the
   dark stage reads as the page itself, not a framed inset. The section clips its
   x-overflow so the 100vw width never triggers a horizontal scrollbar. */
#interface-tour { overflow-x: clip; }
/* Markup: "make this whole section black background, even in light mode." The
   embedded tour shows the dark Claude Code app, so the surround stays black in
   BOTH themes and its own text flips to light, independent of [data-theme]. */
#interface-tour { background: var(--ink); border-top-color: rgb(255 255 255 / .12); }
#interface-tour .eyebrow { color: var(--acid); }
#interface-tour .eyebrow::before { background: var(--acid); }
#interface-tour h2, #interface-tour .display-md { color: #fff; }
#interface-tour .section-note { color: rgb(255 255 255 / .72); }
#interface-tour .section-note b { color: #fff; }
#interface-tour .section-note a { color: var(--acid); border-bottom-color: rgb(255 255 255 / .25); }
#interface-tour .section-note a:hover { border-bottom-color: var(--acid); }
.tour-embed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-5);
  background: transparent;
}
.tour-frame {
  display: block; width: 100%; border: 0;
  height: clamp(660px, 90vh, 1000px);
  background: #000;
}
@media (max-width: 760px) {
  .tour-embed { width: 100%; margin-left: 0; transform: none; }
  .tour-frame { height: clamp(520px, 72vh, 680px); border-radius: var(--radius-card); }
}

/* C8 · "What it can do" word pills. Markup: pills should "fall and stack up on
   each other", smaller type, no bullet. The pile is a positioned frame; each pill
   is absolutely placed and BOTTOM-anchored so the heap builds up from the floor,
   denser at the bottom and tapering toward the top (a 5-4-2-1 pyramid) with heavy
   overlap and a tumbled lean. Each drops in from above with a per-pill delay, the
   lowest landing first so it reads as one settling on top of the next. Black-on-
   acid stays legible in both themes (--accent + --ink are theme-independent).
   Small screens + reduced-motion fall back to a static wrap. */
.pill-pile {
  position: relative;
  margin-top: var(--space-5);
  min-height: clamp(360px, 44vw, 520px);
}
.try-pill {
  position: absolute;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: clamp(.72rem, 1.15vw, .9rem);
  letter-spacing: .01em; color: var(--ink); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: .5rem 1.05rem; box-shadow: 0 10px 26px -8px rgb(0 0 0 / .32);
  animation: pill-fall .7s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes pill-fall {
  from { opacity: 0; transform: translateY(-130%) rotate(var(--r,0deg)) scale(.95); }
  to   { opacity: 1; transform: translateY(0)      rotate(var(--r,0deg)) scale(1); }
}
/* hand-tuned heap: left/bottom anchor, settle rotation (--r), drop delay. Long
   labels start further left so they stay inside the frame; heavy overlap is the
   point ("stacked up on each other"). Floor layer is densest (5 pills), then 4,
   then 2, then 1 at the peak. Delays ascend with height so the pile settles
   bottom-up. */
.try-pill:nth-child(5)  { left: 3%;  bottom: 1%;  --r:-3deg; animation-delay:.02s; } /* floor */
.try-pill:nth-child(4)  { left: 9%;  bottom: 11%; --r: 5deg; animation-delay:.08s; }
.try-pill:nth-child(2)  { left: 41%; bottom: 0%;  --r: 4deg; animation-delay:.14s; }
.try-pill:nth-child(9)  { left: 45%; bottom: 10%; --r:-4deg; animation-delay:.20s; }
.try-pill:nth-child(10) { left: 78%; bottom: 4%;  --r:-6deg; animation-delay:.26s; }
.try-pill:nth-child(11) { left: 5%;  bottom: 22%; --r: 6deg; animation-delay:.34s; } /* mid */
.try-pill:nth-child(1)  { left: 47%; bottom: 20%; --r:-3deg; animation-delay:.40s; }
.try-pill:nth-child(7)  { left: 70%; bottom: 25%; --r: 4deg; animation-delay:.46s; }
.try-pill:nth-child(3)  { left: 22%; bottom: 33%; --r:-6deg; animation-delay:.52s; }
.try-pill:nth-child(8)  { left: 30%; bottom: 44%; --r: 3deg; animation-delay:.60s; } /* upper */
.try-pill:nth-child(6)  { left: 56%; bottom: 47%; --r:-5deg; animation-delay:.66s; }
.try-pill:nth-child(12) { left: 40%; bottom: 60%; --r: 2deg; animation-delay:.76s; } /* peak */
@media (max-width: 1100px) {
  /* Narrower than the tuned scatter (which is sized for the 1000px content
     width): fall back to a clean wrapped pile so long labels never clip at the
     frame edge. The absolute "fallen pile" is a wide-desktop treatment. */
  .pill-pile { position: static; min-height: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
  .try-pill { position: static; transform: none; animation: none; }
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
  .try-pill { animation: none; transform: rotate(var(--r,0deg)); opacity: 1; }
}

/* C9 · Idea bank: drifting prompt wall (make page). Three full-bleed rows of
   pastel cards drift in alternating directions and loop seamlessly. The seamless
   loop relies on app.js cloning each track's cards into the SAME track, then a
   translateX(-50%) over the doubled set: so spacing lives on each card's
   margin-inline-end (NOT a flex gap or track padding), or -50% lands half a gap
   short of the seam. Cards are the purple .tm-col.is-new treatment (accent-ink
   outline + faint accent tint), theme-aware. No-JS / reduced-motion: rows fall
   back to a static, horizontally scrollable strip (no clone, no animation). */
.promptwall {
  margin-block: var(--space-5);
  margin-inline: calc(50% - 50vw);   /* full-bleed; the section's overflow:clip contains it */
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pc-row { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pc-row::-webkit-scrollbar { display: none; }
.pc-row.is-live { overflow: hidden; }
.pc-track { display: flex; width: max-content; }
.pc-row.is-live .pc-track { animation: pc-drift 230s linear infinite; }  /* slowed further (markup: "WAY too fast"); hover still pauses the row */
.pc-row.is-live.pc-rev .pc-track { animation-direction: reverse; }
.pc-row.is-live:hover .pc-track { animation-play-state: paused; }   /* pause on rollover */
@keyframes pc-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cards mirror the .tm-col.is-new "new chat" treatment: a purple --accent-ink
   outline over a faint accent-tinted surface, fully theme-aware (accent-ink is
   purple in both modes on this page). Small + compact. */
.pc-card {
  flex: 0 0 auto;
  width: clamp(206px, 18vw, 264px);
  margin-inline-end: clamp(10px, 1.2vw, 16px);
  display: flex; flex-direction: column;
  border: 1px solid transparent;   /* stroke is revealed on hover (below) */
  background: color-mix(in oklab, var(--accent-ink) 8%, var(--surface-strong));
  border-radius: var(--radius-mid);
  padding: clamp(13px, 1.2vw, 17px);
  color: var(--text);
  transition: border-color .15s ease;
}
/* Reveal the accent stroke only when a card is hovered (the row already pauses
   on hover, so the reviewer is reading a settled card, not a moving one). */
.pc-card:hover { border-color: var(--accent-ink); }
.pc-text { margin: 0 0 12px; font-size: clamp(.82rem, 1.15vw, .92rem); line-height: 1.45; color: var(--text); }
.pc-text b { font-weight: 700; color: var(--accent-ink); }   /* opening clause as the card's "title", in accent */

/* Copy button (injected by app.js). margin-top:auto pins it to the card's
   bottom-right so the buttons line up across a row (cards stretch to equal
   height). Ghost button so it sits quietly on the tinted surface in both themes. */
.pc-copy {
  margin-top: auto; align-self: flex-end;   /* pinned to the card's lower-right */
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  opacity: 0;   /* hidden until the card is hovered/focused (revealed below) */
  transition: color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
/* Reveal the copy button on card hover, and whenever it (or anything in the
   card) takes keyboard focus, so it stays reachable without a mouse. */
.pc-card:hover .pc-copy,
.pc-card:focus-within .pc-copy { opacity: 1; }
.pc-copy:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.pc-copy:active { transform: scale(.92); }
.pc-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.pc-ico { width: 15px; height: 15px; display: block; }
.pc-ico-done { display: none; color: var(--accent-ink); }
.pc-copy.is-copied { border-color: var(--accent-ink); }
.pc-copy.is-copied .pc-ico-copy { display: none; }
.pc-copy.is-copied .pc-ico-done { display: block; }

@media (prefers-reduced-motion: reduce) {
  .pc-row.is-live { overflow-x: auto; }
  .pc-row.is-live .pc-track { animation: none; }
}

/* =========================================================================
   22. REDESIGN ROUND (P061 reduce + visualise) — NEW COMPONENTS
   All theme-aware via the existing --accent-ink / --text / --line tokens, so
   each piece is specified for dark AND light in one rule set.
   ========================================================================= */

/* ---- V1 · chat-vs-agent diagram (replaces two bullets on Start) ---------- */
.flowdiag { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0 0; }
@media (max-width: 520px) { .flowdiag { grid-template-columns: 1fr; } }
.fd-cell {
  display: flex; flex-direction: column; gap: .55rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-mid);
  padding: var(--space-3); background: color-mix(in oklab, var(--text) 3%, transparent);
}
.fd-cell.fd-on { border-color: var(--accent-ink); background: color-mix(in oklab, var(--accent-ink) 7%, transparent); }
.fd-art { display: flex; align-items: center; gap: .5rem; min-height: 30px; color: var(--text-muted); }
.fd-on .fd-art { color: var(--accent-ink); }
.fd-ic { width: 25px; height: 25px; flex: none; }
.fd-arrow { width: 22px; height: 22px; flex: none; }
.fd-stack { display: inline-flex; gap: .3rem; }
.fd-wall { width: 3px; height: 25px; background: var(--line); border-radius: 2px; margin-left: .1rem; }
.fd-k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.fd-on .fd-k { color: var(--accent-ink); }
.fd-cap { font-family: var(--font-body); font-size: .9rem; line-height: 1.45; color: var(--text-muted); margin: 0; }
.fd-cap b { color: var(--text); }

/* ---- V3 · rough → final loop (replaces four paragraphs on Start) --------- */
.loop { list-style: none; margin: var(--space-5) 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: .55rem; }
.loop-node {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  border: 1px solid var(--line); border-radius: var(--radius-small);
  padding: .7rem .85rem; background: color-mix(in oklab, var(--text) 3%, transparent);
}
.loop-node.rough { border-style: dashed; }
.loop-node.keep { border-color: var(--accent-ink); }
.loop-node.final { border-color: var(--accent-ink); background: var(--accent-ink); }
.loop-tag { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.loop-node.keep .loop-tag { color: var(--accent-ink); }
.loop-node.final .loop-tag { color: var(--bg); }
.loop-lab { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; color: var(--text); white-space: nowrap; }
.loop-node.final .loop-lab { color: var(--bg); }
.loop-arr { flex: 0 0 auto; align-self: center; display: grid; place-items: center; color: var(--text-muted); }
.loop-arr::after { content: "\2192"; font-family: var(--font-mono); font-size: 1rem; line-height: 1; }
@media (max-width: 620px) {
  .loop { flex-direction: column; align-items: stretch; }
  .loop-arr::after { content: "\2193"; }
}
.loop-cap { margin-top: var(--space-2); max-width: 64ch; }

/* ---- tighter step list (Start work-flow steps) -------------------------- */
.steps-tight { margin-top: var(--space-4); }
.steps-tight .step { padding-block: var(--space-3); }

/* ---- taskmap · "what is a task" illustration (make.html context section) --
   Two panels: small similar tweaks batch in ONE chat (left); a bigger/
   different job is a NEW chat (right, accent-bordered). A labelled rule
   between them carries "the job changes". Stacks on narrow screens. */
.taskmap {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3); align-items: stretch; margin-top: var(--space-4);
}
.taskmap .tm-col {
  display: flex; flex-direction: column; gap: .6rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-mid);
  background: var(--surface-strong); padding: var(--space-3) var(--space-4);
}
.taskmap .tm-col.is-new {
  border-color: var(--accent-ink);
  background: color-mix(in oklab, var(--accent-ink) 8%, var(--surface-strong));
}
/* Markup: "make this illustration clearer." Each column now reads as a distinct
   chat window (a title bar with window dots + a Chat 1 / Chat 2 label), so it is
   obvious these are two separate chats and the chips are the prompts piling up. */
.taskmap .tm-head {
  display: flex; align-items: center; gap: .4rem;
  margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1) .4rem;
  padding: .55rem var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.taskmap .tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.taskmap .tm-win {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-left: .35rem;
}
.taskmap .tm-col.is-new .tm-dot { background: var(--accent-ink); }
.taskmap .tm-col.is-new .tm-win { color: var(--accent-ink); }
.taskmap .tm-lab {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: .2rem;
}
.taskmap .tm-chip {
  font-family: var(--font-body); font-size: .92rem; line-height: 1.3;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius-small);
  padding: .4rem .7rem;
}
.taskmap .tm-note {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-top: auto; padding-top: .4rem;
}
.taskmap .tm-arr {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); text-align: center;
}
.taskmap .tm-arr::before, .taskmap .tm-arr::after {
  content: ""; width: 1px; flex: 1; background: var(--line);
}
@media (max-width: 720px) {
  .taskmap { grid-template-columns: 1fr; }
  .taskmap .tm-arr { flex-direction: row; padding: .2rem 0; }
  .taskmap .tm-arr::before, .taskmap .tm-arr::after { width: auto; height: 1px; flex: 1; }
}

/* ---- breather · one solid-accent pause line between heavy sections ------- */
.breather {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--accent); color: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 4rem);
}
.breather-line {
  max-width: 1000px; margin-inline: auto; margin-block: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 4.4vw, 3rem); line-height: 1.02;
  letter-spacing: .01em; text-transform: uppercase;
}

/* =========================================================================
   23. LIGHT-MODE PASS — lift the solid-black content cards off the page.
   On the warm paper bg the always-black .metric-card / .community-card read as
   heavy chunks. Give them a light surface AND flip their text (bright accent →
   --accent-ink, white → --text), or the headings/labels vanish. The Claude UI
   mockup (.ui-chrome / .cc-ui) is deliberately LEFT dark in both themes — it is
   a faithful screenshot of the dark app, not a stray black block.
   ========================================================================= */
[data-theme="light"] .metric-card,
[data-theme="light"] .community-card {
  background: var(--surface); color: var(--text);
  border-color: var(--line-soft);
  box-shadow: 0 1px 0 var(--line-soft), 0 22px 44px -32px rgb(28 24 12 / .55);
}
[data-theme="light"] .metric-card .mc-num { color: var(--accent-ink); }
[data-theme="light"] .metric-card .mc-tag { color: var(--accent-ink); border-color: var(--accent-ink); }
[data-theme="light"] .metric-card .mc-label { color: var(--text); }
[data-theme="light"] .metric-card .mc-body { color: var(--text-muted); }
[data-theme="light"] .community-card .icon,
[data-theme="light"] .community-card .cc-word { color: var(--accent-ink); }
[data-theme="light"] .community-card .cc-body,
[data-theme="light"] .community-card .cc-cap { color: var(--text-muted); }

/* =========================================================================
   24. P4 · PERMISSION SLIDER  (continuous handle + single progressive panel)
   app.js hides the static node track + 4-card grid and builds a REAL slider:
   one draggable handle whose position selects a mode, and ONE display panel
   that updates LIVE as you slide (progressive disclosure — only the current
   mode is ever on screen). The handle moves continuously while dragging and
   snaps to its stop on release. No JS / no .perm = the original static grid.
   The panel reuses .metric-card so it inherits the §23 light-mode lift.
   Theme-aware via --accent-ink.
   ========================================================================= */
.perm.is-slider > .perm-track,
.perm.is-slider > .card-grid { display: none; }

.perm-slider { margin-top: var(--space-3); }
.ps-track { position: relative; padding: 20px 0; cursor: pointer; touch-action: none; outline: none; }
/* No boxy outline around the whole selector when it's clicked / made active.
   Keyboard focus is shown on the handle instead, so it stays accessible without
   the ring. */
.ps-track:focus, .ps-track:focus-visible { outline: none; }
.ps-track:focus-visible .ps-handle {
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-ink) 30%, transparent), 0 4px 12px rgb(0 0 0 / .3);
}
.ps-rail { position: relative; height: 6px; border-radius: 999px; background: var(--line-soft); }
.ps-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: var(--accent-ink); transition: width .14s var(--ease); }
.ps-handle {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-ink); border: 3px solid var(--bg);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent-ink) 20%, transparent), 0 4px 12px rgb(0 0 0 / .3);
  transition: left .14s var(--ease), box-shadow .18s var(--ease);
}
/* during a drag, the fill/handle follow the pointer with no position lag */
.ps-track.is-dragging .ps-fill { transition: none; }
.ps-track.is-dragging .ps-handle { transition: box-shadow .18s var(--ease); cursor: grabbing; box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent-ink) 26%, transparent), 0 6px 16px rgb(0 0 0 / .36); }

/* tick scale: one label per mode, the active one lit */
.ps-scale { display: flex; justify-content: space-between; margin-top: var(--space-2); }
.ps-mark { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; background: none; border: 0; padding: .25rem .1rem; transition: color .18s var(--ease); }
.ps-mark:hover { color: var(--text); }
.ps-mark.is-active { color: var(--accent-ink); }

/* the single progressive panel — reuses .metric-card, just sized + cross-faded */
.perm-display { margin-top: var(--space-4); max-width: 560px; }
.perm-display .mc-num, .perm-display .mc-label, .perm-display .mc-body { transition: opacity .14s var(--ease); }
.perm-display.is-swapping .mc-num, .perm-display.is-swapping .mc-label, .perm-display.is-swapping .mc-body { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ps-fill, .ps-handle, .perm-display .mc-num, .perm-display .mc-label, .perm-display .mc-body { transition: none; }
}

/* =========================================================================
   ON THIS PAGE  —  in-page contents nav (shared across all pages)
   Sits in normal flow under the full-height hero; the topnav already owns
   sticky, so this does not. .toc-inner mirrors .section > .wrap (1000px,
   same gutter) so the pill row's left edge aligns with the content below.
   ========================================================================= */
/* Floating contents bar, pinned to the viewport bottom so it's visible the
   moment the page loads (was an in-flow pill row beneath the hero). Links carry
   the page accent and fill solid on hover. Shared across all six pages. */
.toc {
  position: fixed; z-index: 40;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(.75rem, 2.5vw, 1.5rem);
  max-width: calc(100vw - 1.5rem);
  padding: .45rem .55rem;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 8px 28px rgb(0 0 0 / .28);
}
.toc-inner {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.toc-inner::-webkit-scrollbar { display: none; }
/* The bar floats out of flow, so reserve room at the page foot — otherwise it
   would sit over the closing CTA when scrolled to the bottom. */
body:has(.toc) { padding-bottom: clamp(5rem, 9vw, 6.5rem); }
/* Toc is out of flow; the first section now sits directly under the hero. */
.toc + .section { padding-top: clamp(4rem, 7vw, 7rem); }
.toc-label {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
  padding-left: .5rem; white-space: nowrap;
}
.toc-link {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--accent-ink);
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.toc-link:hover, .toc-link:focus-visible {
  color: var(--bg); background: var(--accent-ink); border-color: var(--accent-ink);
}
/* Every anchored section clears the 52px sticky bar (plus a little air). */
.section[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-3)); }

/* =========================================================================
   18. NEW · SKILL CARD v2 + SKILL DETAIL PAGE  (gallery → per-skill pages)
   Generated by working/build_skills.py from working/skills-copy.json.
   Card v2: the whole card clicks through to the skill's detail page; the ↓
   button grabs the zip without leaving the gallery; a quiet "Updated" line
   carries the date the build reads from git. Base .gallery-card / .thumb /
   .placeholder / .gallery-grid rules live in §15 above; only the v2 bits
   are added here. Cards stay dark in light mode (no light text override),
   matching the live gallery.
   ========================================================================= */
/* Scoped off .res-card so the resources page keeps its own hover treatment. */
.gallery-card:not(.res-card) { position: relative; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.gallery-card:not(.res-card):hover { border-color: var(--accent); transform: translateY(-2px); }
.gc-open { display: block; text-decoration: none; color: inherit; margin-top: 1rem; }
.gc-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-mid); }
.gc-sub { font-family: var(--font-body); font-size: .9rem; line-height: 1.45; color: rgb(255 255 255 / .64); margin-top: .45rem; }
.gc-footrow { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-top: auto; padding-top: 1rem; }
.gc-metawrap { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gc-dept { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.gc-updated { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--text-muted); }
.gc-dl-btn { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; text-decoration: none; background: var(--accent); color: var(--ink);
  border-radius: var(--radius-small); transition: transform .15s var(--ease); }
.gc-dl-btn:hover { transform: scale(1.08); }
.gc-dl-btn svg { width: 16px; height: 16px; display: block; }
/* On dark cards .gc-updated should read against --ink, not the page muted.
   In light mode the page --text-muted is dark; the card stays dark, so pin
   the on-card muted to a white-alpha that holds in both themes. */
.gallery-card .gc-updated { color: rgb(255 255 255 / .5); }

/* full-width image at the very top of every skill page (real image where it
   exists, grain placeholder otherwise). Full-bleed banner, content below. */
.sd-imgtop { width: 100%; aspect-ratio: 24 / 9; overflow: hidden;
  background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.sd-imgtop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-imgtop .placeholder { width: 100%; height: 100%; border-radius: 0; border: 0; }
.detail { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); }
.detail .back { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.detail .back:hover { color: var(--accent-ink); }
.sd-head { margin-top: var(--space-4); }
.sd-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: .9; color: var(--accent-ink); margin: .4rem 0 0; }
.sd-lede { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.4; color: var(--text); margin: var(--space-3) 0 0; max-width: 36ch; }
.sd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sd-cmd { font-family: var(--font-mono); font-size: .82rem; color: var(--text);
  background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-small); padding: .5rem .7rem; }
.sd-dl { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--accent); color: var(--ink); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
  border-radius: var(--radius-small); padding: .55rem .9rem; }
.sd-dl svg { width: 15px; height: 15px; }
.sd-updated { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; color: var(--text-muted); margin-left: auto; }
.sd-block { margin-top: var(--space-6); }
.sd-block h2 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--space-2); }
.sd-block p { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: var(--text); margin: 0; max-width: 60ch; }
.sd-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sd-list li { font-family: var(--font-body); font-size: 1.05rem; color: var(--text-muted); line-height: 1.45; padding-left: 1.4rem; position: relative; max-width: 56ch; }
.sd-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent-ink); }
.sd-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6);
  padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.sd-meta div { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--text-muted); }
.sd-meta b { display: block; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; margin-bottom: .25rem; }