/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: Cobalt
 * enrichment: code-hero (Tier A) · nav: N13 Cobalt-bordered ⌘K · footer: Ft5 Statement
 * audience: 站群运营/SEO · use: 了解产品+获取授权 · tone: technical
 * F4 knobs: numbering=1.0/2.0/3.0/4.0 · layout=vertical · connector=line
 * N13 knobs: placement=right-of-brand · groups=grouped · hints=shown
 * Ft5 knobs: sentence=28ch · wordmark=under · rule=hairline
 * pre-emit critique: P5 H5 E5 S4 R5 V4
 * axes: paper=light · display=grotesk-sans · accent=cool
 */

:root {
  --color-paper: oklch(98.5% 0.004 250);
  --color-paper-2: oklch(96.5% 0.006 250);
  --color-paper-3: oklch(94% 0.008 252);
  --color-ink: oklch(24% 0.02 258);
  --color-ink-2: oklch(34% 0.018 257);
  --color-muted: oklch(52% 0.016 256);
  --color-rule: oklch(88% 0.01 252);
  --color-rule-2: oklch(78% 0.014 254);
  --color-accent: oklch(58% 0.20 256);
  --color-accent-ink: oklch(99% 0.005 250);
  --color-accent-soft: oklch(58% 0.20 256 / 0.12);
  --color-graphite: oklch(22% 0.016 260);
  --color-graphite-2: oklch(28% 0.018 260);
  --color-code-ink: oklch(92% 0.01 250);
  --color-code-muted: oklch(70% 0.02 255);
  --color-focus: oklch(58% 0.20 256);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display: clamp(2.5rem, 5vw + 0.5rem, 4.25rem);
  --text-display-s: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --text-4xl: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --text-2xl: 1.375rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  --page-gutter: clamp(1rem, 4vw, 3rem);
  --page-max: 72rem;
  --radius-ctrl: 6px;
  --radius-card: 10px;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent); }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wrap {
  width: min(100% - 2 * var(--page-gutter), var(--page-max));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--color-accent);
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-ctrl);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--primary:hover { filter: brightness(1.06); color: var(--color-accent-ink); }
.btn--ghost {
  background: transparent;
  border-color: var(--color-rule-2);
  color: var(--color-ink);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--on-dark {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--ghost-dark {
  background: transparent;
  border-color: oklch(70% 0.02 255 / 0.35);
  color: var(--color-code-ink);
}
.btn--ghost-dark:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-2);
  white-space: nowrap;
}
.link-arrow:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ——— Nav (Cobalt bordered + N13 ⌘K) ——— */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(98.5% 0.004 250 / 0.88);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled {
  box-shadow: 0 8px 24px oklch(24% 0.02 258 / 0.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 3.5rem;
  width: min(100% - 2 * var(--page-gutter), var(--page-max));
  margin-inline: auto;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.nav__brand span { color: var(--color-accent); }
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-lg);
  margin-inline-start: var(--space-sm);
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.nav__link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.searchpill {
  display: none;
  align-items: center;
  gap: 0.55rem;
  height: 2.25rem;
  margin-inline-start: auto;
  padding: 0 0.5rem 0 0.75rem;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-ctrl);
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out);
}
.searchpill:hover { border-color: var(--color-accent); }
.searchpill__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}
.searchpill__kbd {
  display: inline-flex;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-paper);
  color: var(--color-muted);
}
.nav__cta { margin-inline-start: var(--space-xs); flex: none; }
.nav__menu {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-ctrl);
  background: transparent;
  cursor: pointer;
}
.nav__menu span {
  display: block;
  width: 1rem;
  height: 1px;
  background: var(--color-ink);
  box-shadow: 0 -4px 0 var(--color-ink), 0 4px 0 var(--color-ink);
}
.nav__drawer {
  display: none;
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper);
  padding: var(--space-md) var(--page-gutter) var(--space-lg);
}
.nav__drawer.is-open { display: grid; gap: var(--space-sm); }
.nav__drawer a {
  display: block;
  padding: 0.65rem 0;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .nav__links { display: flex; }
  .searchpill { display: inline-flex; }
  .nav__menu { display: none; }
  .nav__drawer { display: none !important; }
}

/* ——— Hero ——— */
.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  isolation: isolate;
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: min(70vh, 36rem);
  background:
    radial-gradient(ellipse 55% 45% at 12% 20%, oklch(58% 0.20 256 / 0.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 88% 8%, oklch(70% 0.08 230 / 0.18), transparent 65%),
    linear-gradient(180deg, var(--color-paper-2), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
.hero__copy { display: grid; gap: var(--space-lg); min-width: 0; max-width: 36rem; }
.hero h1 {
  font-size: clamp(2.25rem, 4.2vw + 0.4rem, 3.75rem);
  font-weight: 600;
  max-width: none;
  line-height: 1.12;
}
.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  max-width: 34rem;
  line-height: 1.55;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.code-card {
  background: var(--color-graphite);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px oklch(24% 0.02 258 / 0.05);
  font-family: var(--font-mono);
  color: var(--color-code-ink);
  overflow: hidden;
  min-width: 0;
}
.code-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid oklch(40% 0.02 260 / 0.5);
  background: var(--color-graphite-2);
}
.code-card__file {
  font-size: var(--text-xs);
  color: var(--color-code-muted);
  letter-spacing: 0.02em;
}
.code-card__copy {
  flex: none;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid oklch(70% 0.02 255 / 0.35);
  border-radius: 4px;
  background: transparent;
  color: var(--color-code-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}
.code-card__copy:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.code-card__copy.is-copied {
  border-color: oklch(70% 0.12 150 / 0.55);
  color: oklch(84% 0.08 150);
  background: oklch(40% 0.04 150 / 0.25);
}
.code-card__body {
  margin: 0;
  padding: 1rem 1.1rem 1.2rem;
  font-size: 0.78rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tok-muted { color: var(--color-code-muted); }
.tok-key { color: var(--color-accent); }
.tok-str { color: oklch(84% 0.04 145); }
.tok-cursor {
  display: inline-block;
  width: 0.55ch;
  height: 1.1em;
  margin-inline-start: 1px;
  background: var(--color-accent);
  vertical-align: -0.15em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
  }
  .hero__copy { max-width: none; }
  .code-card { width: 100%; max-width: 34rem; justify-self: end; }
}

@media (min-width: 80rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  }
}

/* ——— Trust strip (also inline inside #speed) ——— */
.trust {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
}
.trust--inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, oklch(58% 0.20 256 / 0.05), transparent 55%),
    var(--color-paper-2);
  border-bottom: 1px solid var(--color-rule);
}
.trust__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.trust__item {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.trust__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.trust__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (min-width: 48rem) {
  .trust__row,
  .trust--inline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ——— Section common ——— */
.section {
  padding-block: var(--space-3xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.section--speed {
  background:
    linear-gradient(180deg, var(--color-paper-2), var(--color-paper) 40%);
}
.note-gap { margin-top: var(--space-xl); }
.section__head {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  max-width: 42rem;
}
.section__head h2 {
  font-size: var(--text-display-s);
  font-weight: 600;
}
.section__head p {
  color: var(--color-ink-2);
  max-width: 48ch;
}

/* ——— Workflow ——— */
.steps {
  display: grid;
  gap: 0;
  counter-reset: none;
}
.step {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-top: 2px solid var(--color-ink);
  min-width: 0;
}
.step:first-child { border-top-width: 2px; }
.step__stage {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.step__title {
  font-size: var(--text-4xl);
  font-weight: 600;
}
.step__body {
  display: grid;
  gap: var(--space-lg);
}
.step__copy {
  color: var(--color-ink-2);
  max-width: 52ch;
}
.step__panel {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-2);
  min-width: 0;
  overflow-x: auto;
}
.step__panel strong {
  color: var(--color-ink);
  font-weight: 500;
}
@media (min-width: 60rem) {
  .step__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: var(--space-2xl);
  }
  .step:nth-child(even) .step__body {
    direction: rtl;
  }
  .step:nth-child(even) .step__body > * {
    direction: ltr;
  }
}

/* ——— Graphite band ——— */
.band {
  background: var(--color-graphite);
  color: var(--color-code-ink);
  padding-block: var(--space-3xl);
  border-bottom: none;
}
.band .eyebrow { color: var(--color-code-muted); }
.band h2 { color: var(--color-code-ink); }
.band .section__head p { color: var(--color-code-muted); }
.spec {
  display: grid;
  gap: 0;
  border-top: 1px solid oklch(45% 0.02 260 / 0.55);
}
.spec__row {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid oklch(45% 0.02 260 / 0.55);
  min-width: 0;
}
.spec__key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.spec__vals {
  display: grid;
  gap: var(--space-xs);
}
.spec__old { color: var(--color-code-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.spec__new { color: var(--color-code-ink); font-weight: 500; }
@media (min-width: 48rem) {
  .spec__row {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: baseline;
  }
  .spec__vals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-lg);
  }
}

/* ——— Capabilities ——— */
.caps {
  display: grid;
  gap: var(--space-md);
}
.cap {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  min-width: 0;
  transition: border-color var(--dur-short) var(--ease-out);
}
.cap:hover { border-color: var(--color-accent); }
.cap__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cap h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
}
.cap p { color: var(--color-ink-2); max-width: 36ch; }
@media (min-width: 48rem) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ——— License ——— */
.license {
  background: var(--color-paper-2);
}
.license__grid {
  display: grid;
  gap: var(--space-md);
}
.plan {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  min-width: 0;
}
.plan--featured {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.plan__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.plan h3 {
  font-size: var(--text-4xl);
  font-weight: 600;
}
.plan p { color: var(--color-ink-2); max-width: 36ch; }
.plan__list {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
}
.plan__list li {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.plan__list li::before {
  content: "→";
  color: var(--color-accent);
  font-family: var(--font-mono);
  flex: none;
}
.plan .btn { justify-self: start; margin-top: var(--space-sm); }
.license__note {
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 60ch;
}
@media (min-width: 60rem) {
  .license__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* ——— Footer Ft5 ——— */
.foot-stmt {
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-xl);
  width: min(100%, calc(var(--page-max) + 2 * var(--page-gutter)));
  margin-inline: auto;
}
.foot-stmt__line {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  max-width: 14ch;
  margin: 0;
  overflow-wrap: anywhere;
}
.foot-stmt__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.foot-stmt__brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.foot-stmt__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.foot-stmt__links a {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.foot-stmt__links a:hover { color: var(--color-accent); }
.foot-stmt__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ——— ⌘K ——— */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 700;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out);
}
.cmdk.is-open { opacity: 1; visibility: visible; }
.cmdk__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(20% 0.02 258 / 0.45);
}
.cmdk__panel {
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  width: min(34rem, calc(100% - 2rem));
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px oklch(24% 0.02 258 / 0.18);
  overflow: hidden;
  transition: transform var(--dur-short) var(--ease-out);
}
.cmdk.is-open .cmdk__panel { transform: translateX(-50%) translateY(0) scale(1); }
.cmdk__field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-rule);
}
.cmdk__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.cmdk__field kbd {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  color: var(--color-muted);
}
.cmdk__results {
  max-height: 18rem;
  overflow: auto;
  padding: var(--space-xs);
}
.cmdk__group {
  margin: var(--space-xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cmdk__item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.7rem 0.75rem;
  border: 0;
  border-radius: var(--radius-ctrl);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cmdk__item.is-active,
.cmdk__item:hover {
  background: var(--color-accent-soft);
}
.cmdk__item-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.cmdk__item-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}
.cmdk__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted);
}
.cmdk__foot kbd {
  display: inline-block;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  margin-inline-end: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tok-cursor { animation: none; opacity: 1; }
  .cmdk, .cmdk__panel { transition: none; }
  .speed-card:hover { transform: none; }
}


/* ——— Content enrichment v2 ——— */
.pain-grid {
  display: grid;
  gap: var(--space-md);
}
.pain {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  background: var(--color-paper);
}
.pain h3 { font-size: var(--text-2xl); font-weight: 600; }
.pain__bad { color: var(--color-muted); font-size: var(--text-sm); }
.pain__good { color: var(--color-ink-2); font-size: var(--text-sm); }
.pain__good strong { color: var(--color-accent); font-weight: 600; }
@media (min-width: 48rem) {
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.scene-list { display: grid; gap: 0; }
.scene {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  min-width: 0;
}
.scene:last-child { border-bottom: 1px solid var(--color-rule); }
.scene__id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}
.scene h3 { font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-xs); }
.scene p { color: var(--color-ink-2); max-width: 62ch; }

.arch {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  background: var(--color-paper-2);
  display: grid;
  gap: var(--space-lg);
}
.arch__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.arch__flow > span:not(.arch__arrow) {
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
  border-radius: var(--radius-ctrl);
  padding: 0.45rem 0.65rem;
  white-space: nowrap;
}
.arch__arrow { color: var(--color-accent); font-weight: 600; }
.arch__note { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 70ch; }

.seo-grid {
  display: grid;
  gap: var(--space-md);
}
.seo-card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.seo-card h3 { font-size: var(--text-2xl); font-weight: 600; }
.seo-card p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 42ch; }
@media (min-width: 48rem) {
  .seo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .seo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.spider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.spider-chips span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-ctrl);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.mod-grid {
  display: grid;
  gap: var(--space-md);
}
.mod {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.mod h3 { font-size: var(--text-2xl); font-weight: 600; }
.mod p { color: var(--color-ink-2); font-size: var(--text-sm); }
.mod__path {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.03em;
}
@media (min-width: 48rem) {
  .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .mod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.subhead {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
  font-size: var(--text-4xl);
  font-weight: 600;
}

.status-table, .mount-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-paper);
}
.status-table__row, .mount-table__row {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  min-width: 0;
}
.status-table__row:last-child, .mount-table__row:last-child { border-bottom: 0; }
.status-table__head, .mount-table__head {
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (min-width: 48rem) {
  .status-table__row { grid-template-columns: 8rem minmax(0, 1fr); }
  .mount-table__row { grid-template-columns: 10rem minmax(0, 1fr); }
}

.faq { display: grid; gap: var(--space-sm); }
.faq__item {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: 0;
  overflow: hidden;
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  float: right;
  color: var(--color-accent);
  font-family: var(--font-mono);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: 70ch;
}
.faq__item summary:hover { color: var(--color-accent); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-paper-3);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.band code {
  background: oklch(30% 0.018 260);
  color: var(--color-code-ink);
}


/* ——— AI showcase v3 ——— */
.ai-grid {
  display: grid;
  gap: var(--space-md);
}
.ai-card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out);
}
.ai-card:hover { border-color: var(--color-accent); }
.ai-card__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.ai-card h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
}
.ai-card p {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: 52ch;
}
.ai-card--wide {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
}
@media (min-width: 48rem) {
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-card--wide { grid-column: 1 / -1; }
}
@media (min-width: 70rem) {
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.agent-grid {
  display: grid;
  gap: var(--space-md);
}
.agent-panel {
  border: 1px solid oklch(45% 0.02 260 / 0.55);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  background: var(--color-graphite-2);
}
.agent-panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-xs);
}
.agent-panel__label:first-child { margin-top: 0; }
.agent-panel p { color: var(--color-code-muted); font-size: var(--text-sm); margin: 0; }
.agent-panel code {
  background: oklch(18% 0.016 260);
  color: var(--color-code-ink);
}
.agent-panel--code { background: var(--color-graphite); }
@media (min-width: 60rem) {
  .agent-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}


/* ——— install README features ——— */
.feat-blocks {
  display: grid;
  gap: var(--space-md);
}
.feat {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  background: var(--color-paper);
}
.feat h3 { font-size: var(--text-2xl); font-weight: 600; }
.feat ul { display: grid; gap: var(--space-xs); }
.feat li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 52ch;
}
.feat li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
}
@media (min-width: 60rem) {
  .feat-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ——— Speed / Rust / Svelte ——— */
.speed-grid {
  display: grid;
  gap: var(--space-md);
}
.speed-card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.speed-card:hover {
  border-color: var(--color-rule-2);
  transform: translateY(-2px);
}
.speed-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.speed-card h3 {
  font-size: var(--text-4xl);
  font-weight: 600;
}
.speed-card p {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: 42ch;
}
.speed-card ul {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-rule);
}
.speed-card li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-2);
}
.speed-card li::before {
  content: "→ ";
  color: var(--color-accent);
}
@media (min-width: 60rem) {
  .speed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}