globals.css

/*
 * Atelier Zero — landing page styles.
 *
 * Mirrors `design-templates/open-design-landing/example.html` <style> block 1:1.
 * When the canonical example.html changes, mirror the diff here so the
 * template's known-good rendering stays in lockstep with the deployed site.
 *
 * Fonts are self-hosted via `@fontsource-variable/*` packages. The variable
 * font files (one woff2 per family, ~30-50KB each) cover the entire
 * weight axis we use, are served same-origin (no Google Fonts CSS or
 * fonts.gstatic.com TLS handshake), and ship through CF's edge — PageSpeed
 * was attributing ~2.3s of render-blocking + LCP to the old Google Fonts
 * round-trip chain.
 *
 * Subset CSS files only declare @font-face metadata (~1KB each). The
 * browser downloads the woff2 that matches the unicode-range of text it's
 * about to render, so multi-script support stays intact without paying for
 * unused scripts up front.
 */
@font-face {
  font-family: 'Albert Sans';
  src: url('/skill-assets/AlbertSans-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Albert Sans';
  src: url('/skill-assets/AlbertSans-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Remix Icon';
  src: url('/skill-assets/remixicon.subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fafafa;
  --paper-warm: #f5f5f5;
  --paper-dark: #f0f0f0;
  --ink: #262626;
  --ink-soft: #434343;
  --ink-mute: #595959;
  --ink-faint: #8c8c8c;
  --coral: #63fe13;
  --coral-tint: color-mix(in oklab, var(--bone), var(--coral) 8%);
  --coral-soft: #83ff3b;
  --mustard: #63fe13;
  --olive: #218c00;
  --bone: #ffffff;
  --line: #d9d9d9;
  --line-hover: #bfbfbf;
  --line-soft: #f0f0f0;
  --line-faint: #f5f5f5;
  --shadow: 0 30px 60px -30px rgba(38, 38, 38, 0.16);
  --serif: 'Albert Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --sans: 'Albert Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --body: 'Albert Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'Albert Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-38: 38px;
  --spacing-42: 42px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-58: 58px;
  --spacing-62: 62px;
  --spacing-68: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  /*
   * Lock the page width to the viewport so any decorative element
   * positioned with negative offsets (ribbons, hero-art margin-right,
   * mega footer word, etc.) cannot create a horizontal scrollbar on
   * narrow viewports.
   *
   * Use `overflow-x: clip` (modern) instead of `hidden`: clip does not
   * establish a containing block for `position: fixed/sticky`, so the
   * sticky nav keeps working. Browsers that don't support clip fall
   * back to the hidden declaration just above it.
   */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
img, video, canvas { max-width: 100%; height: auto; }

/*
 * Paper texture overlay across the whole page.
 *
 * Rendered ABOVE `.shell` (z-index 2) so the noise/grain multiply blend
 * applies uniformly to every section — including `.topbar` and `.nav`,
 * which have an opaque `background: var(--paper)` to keep sticky-scroll
 * content readable. Without this, opaque sections would show clean paper
 * and transparent sections (hero, about, …) would show textured paper,
 * which reads as two slightly different colors at the seam.
 *
 * Z-index is set equal to the side-rails (also z-index 3); because the
 * pseudo-element appears in document order before the rails, the rails
 * paint on top of the texture and keep their crisp rotated lettering.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(217, 217, 217, 0.45) 0, transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(240, 240, 240, 0.72) 0, transparent 32%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 240px 240px;
  mix-blend-mode: multiply;
  opacity: 0.62;
}

.shell { position: relative; z-index: 2; }
.container {
  max-width: 1360px;
  padding: 0 64px;
  margin: 0 auto;
  position: relative;
}
.container.wide { max-width: 1480px; }

/* fixed side rails — rotated brand text on the right edge */
.side-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-rail.right { right: 0; border-left: 1px solid var(--line-faint); }
.side-rail.left { left: 0; border-right: 1px solid var(--line-faint); }
.side-rail .rail-text {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.side-rail.right .rail-text { transform: rotate(180deg); }
.side-rail.left .rail-text { writing-mode: vertical-rl; transform: none; }

/*
 * Sticky chrome bar — wraps the editorial metadata strip + main nav as a
 * single Headroom-style unit. Keeping them welded means the language
 * switcher stays reachable while reading the page (you can flip locales
 * mid-scroll without scrolling back to the top), and the masthead +
 * navigation always read as a single nameplate rather than two unrelated
 * rows.
 *
 * Sticky/transform/transition lived on `.nav` historically — they belong
 * here now so both rows slide together. The `data-chrome-headroom` hook
 * is what `header-enhancer.astro` (and the homepage inline script)
 * toggle `is-hidden` on.
 */
.site-chrome {
  /* Fixed so the bar stays pinned to the top and condenses on scroll
     (was `absolute`, which let it scroll away). At the very top it is a
     transparent overlay on the hero; past the scroll threshold the inline
     script adds `.is-condensed`, which shrinks the bar and turns on the
     Liquid Glass material below. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transform: translateY(0);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
  will-change: transform;
}
.site-chrome.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
  box-shadow: none;
}

/* top metadata strip */
.topbar {
  border-bottom: 1px solid transparent;
  padding: 10px 0;
  background: transparent;
  /*
   * Stays a positioned context so the locale menu has an absolute
   * anchor. The z-index is small but non-zero so the topbar — and the
   * menu that drops out of it — paint above the sibling nav inside
   * `.site-chrome`. Without this the menu would be obscured by the
   * nav's download/star buttons.
   */
  position: relative;
  z-index: 2;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar-inner b { color: var(--ink); font-weight: 600; }
.topbar-inner .coral { color: var(--coral); }
.topbar-inner > span { white-space: nowrap; }
.topbar-inner .mid { display: inline-flex; gap: 26px; }
.topbar-inner .mid > span { white-space: nowrap; }
.topbar-inner .right { display: inline-flex; gap: 18px; align-items: center; }
.topbar-inner .right > span,
.topbar-inner .right > a { white-space: nowrap; }
.topbar-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.topbar-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
/*
 * Editorial language switcher. The trigger reads as part of the
 * masthead line ("● LIVE · V0.7.0 / LANG · ZH-TW") — uppercase
 * tracked text, no pill, no border. The dropdown is a small
 * floating panel that mirrors the topbar's paper/ink palette but
 * drops the tracking so native scripts (中文 / 한국어 / العربية)
 * read at their intended rhythm.
 */
.locale-switch {
  display: inline-block;
  position: relative;
}
.locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
  user-select: none;
  outline: none;
  padding: 0;
}
.locale-trigger::-webkit-details-marker { display: none; }
.locale-trigger:hover,
.locale-switch[open] > .locale-trigger,
.locale-trigger:focus-visible {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.locale-trigger-prefix {
  color: var(--ink-faint);
}
.locale-trigger:hover .locale-trigger-prefix,
.locale-switch[open] > .locale-trigger .locale-trigger-prefix,
.locale-trigger:focus-visible .locale-trigger-prefix {
  color: var(--coral);
}
.locale-trigger-sep {
  opacity: 0.55;
}
.locale-trigger-code {
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  font-weight: 600;
}
.locale-trigger:hover .locale-trigger-code,
.locale-switch[open] > .locale-trigger .locale-trigger-code,
.locale-trigger:focus-visible .locale-trigger-code {
  color: var(--coral);
}
/* Iconic language switcher — Remix Icon "translate-2" glyph from the
   skill font (see @font-face 'Remix Icon'). Replaces the 语言 · 简中 text. */
.locale-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: color 160ms ease;
}
.locale-trigger-icon::before {
  font-family: 'Remix Icon';
  content: '\f226';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.locale-trigger-iconic { border-bottom: 0; }
.locale-trigger-iconic:hover .locale-trigger-icon,
.locale-switch[open] > .locale-trigger-iconic .locale-trigger-icon,
.locale-trigger-iconic:focus-visible .locale-trigger-icon {
  color: var(--coral);
}
.locale-trigger-caret {
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 160ms ease, opacity 160ms ease;
}
.locale-switch[open] > .locale-trigger .locale-trigger-caret {
  transform: rotate(180deg);
  opacity: 1;
}
/*
 * Two-column editorial catalogue. 17 locales × single-column would either
 * scroll (ugly) or run most of the hero's height (worse). A 2-col grid
 * keeps the panel under 9 rows so every language is visible at once and
 * reads like a small index of nameplates rather than a dropdown.
 *
 * The shared top offset gives clear breathing room from the topbar baseline
 * — without it the active row (which mirrors the trigger label) feels
 * fused to the chrome above it.
 */
.locale-menu {
  position: absolute;
  top: calc(100% + var(--nav-flyout-gap, 12px));
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(2, minmax(168px, 1fr));
  gap: 2px 4px;
  padding: 10px;
  background: var(--paper);
  /* Match the sibling product `.nav-dropdown`: same border, radius, and shadow
     so both header menus read as one panel style. */
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(26, 26, 26, 0.08);
  font-family: var(--sans);
  letter-spacing: normal;
  text-transform: none;
  /* Subtle entrance — matches the rest of the site's 200ms ease-out */
  animation: locale-menu-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes locale-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Invisible hover bridge across the gap between the trigger and the panel,
   so moving the cursor down to the menu doesn't drop the hover and close it
   (mirrors the sibling `.nav-dropdown::before`). */
.locale-menu::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--nav-flyout-gap, 12px));
  left: 0;
  right: 0;
  height: var(--nav-flyout-gap, 12px);
}
.locale-menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.2;
  /* Rounded so the hover/active fill reads as a pill-ish row inside the
     8px panel rather than a hard-edged rectangle. */
  border-radius: 6px;
  transition: background 140ms ease, color 140ms ease;
}
/* Hover / active match the product `.nav-dropdown a`: coral-tint fill on hover,
   a faint grey fill for the current locale — both keep ink text. */
.locale-menu-item:hover {
  background: var(--coral-tint);
  color: var(--ink);
}
.locale-menu-item:hover .locale-menu-code { color: var(--ink-faint); }
.locale-menu-item.is-active {
  background: rgba(26, 26, 26, 0.04);
  color: var(--ink);
}
.locale-menu-item.is-active .locale-menu-code {
  color: var(--ink-faint);
}
.locale-menu-code {
  flex-shrink: 0;
  min-width: 46px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 140ms ease;
}
.locale-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .locale-menu {
    grid-template-columns: minmax(0, 1fr);
    min-width: min(260px, calc(100vw - 32px));
  }
  .locale-menu-item { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .locale-menu { animation: none; }
  .locale-trigger-caret { transition: none; }
}
/* ---------- OpenDesign Cloud header account ---------- */
/* The avatar menu stays out of layout until a live cloud session is found. */
.nav-account {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-account [hidden] { display: none !important; }
/* Avatar menu — a borderless <details> whose summary is the avatar disc. */
.nav-account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  list-style: none;
  border-radius: 999px;
}
.nav-account-trigger::-webkit-details-marker { display: none; }
.nav-account-trigger:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
/* Circular avatar — a disc reads unmistakably as a user avatar. Dark tile +
   single initial mirrors OpenDesign Cloud's identity styling. */
.nav-avatar,
.nav-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
}
.nav-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  color: #fafafa;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
/* Dropdown panel — mirrors `.locale-menu` so both header menus read as one
   panel style (same border, radius, shadow, and entrance). */
.nav-account-dropdown {
  position: absolute;
  top: calc(100% + var(--nav-flyout-gap, 12px));
  right: 0;
  z-index: 60;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(26, 26, 26, 0.08);
  font-family: var(--sans);
  letter-spacing: normal;
  text-transform: none;
  animation: locale-menu-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Hover bridge across the gap, like `.locale-menu::before`. */
.nav-account-dropdown::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--nav-flyout-gap, 12px));
  left: 0;
  right: 0;
  height: var(--nav-flyout-gap, 12px);
}
.nav-account-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-account-name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account-name:empty { display: none; }
.nav-account-email {
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account-email:empty { display: none; }
.nav-account-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.nav-account-item:hover,
.nav-account-item:focus-visible {
  background: var(--coral-tint);
  color: var(--ink);
}
.nav-account-signout {
  color: var(--ink-mute);
}
@media (prefers-reduced-motion: reduce) {
  .nav-account-dropdown { animation: none; }
}
.topbar .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  margin-right: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* nav */
/*
 * The sticky + headroom behavior lives on the outer `.site-chrome`
 * wrapper now (so the topbar + nav slide as one unit). This rule keeps
 * only the spacing and surface treatment.
 */
.nav {
  /* Explicit 100% (not auto) so the width can animate to the condensed
     capsule instead of snapping — `auto` widths don't transition. */
  width: 100%;
  /* Inline margins are `auto` in BOTH states so the width shrink stays
     centered every frame (shrinks toward the middle). If the base were
     `margin: 0`, the 0 → auto transition isn't interpolable and the left
     edge stays pinned while the right pulls in — reads as a left-to-right
     collapse. */
  margin-inline: auto;
  padding: 22px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    width 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    margin 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}
/* Off-screen host for the Liquid Glass `<filter>` defs (referenced by id
   from the nav's backdrop-filter). Kept in flow with zero size rather than
   display:none, since some engines drop filter references on hidden subtrees. */
.nav-glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
/*
 * Condensed bar — the Liquid Glass material. Two `backdrop-filter`
 * declarations: the plain blur is the Safari/Firefox fallback (the
 * component's SVG displacement filter is unsupported there); the
 * `url(#nav-liquid-glass)` line is the Chromium chromatic-refraction
 * material and overrides it where supported. The bar also shrinks its
 * vertical padding for the condensed feel.
 */
.site-chrome.is-condensed .nav {
  /* Detaches from the edges into a centered floating capsule: a gap from
     the top, side margins, and fully rounded ends. 1280px (not 1080px) so
     the longest translated nav rows (ja/ru/uk) still hold a single line —
     the row must never wrap into a second line over the hero. */
  margin: 14px auto 0;
  width: min(1280px, calc(100% - 32px));
  padding: 9px 0;
  border-radius: 999px;
  border: 1px solid rgba(21, 20, 15, 0.08);
  background: hsl(0 0% 100% / 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: url(#nav-liquid-glass) blur(7px) saturate(1.4);
  box-shadow:
    inset 0 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 0 10px 4px rgba(255, 255, 255, 0.22),
    0 6px 24px rgba(17, 17, 26, 0.06),
    0 12px 40px rgba(17, 17, 26, 0.05);
}
/* The inner gutter eases in lockstep with the capsule width. */
.nav > .container {
  transition: padding 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Tighten the inner container padding inside the capsule (the full 64px
   container gutter would over-inset the brand / links / actions). */
.site-chrome.is-condensed .nav > .container {
  max-width: none;
  padding: 0 28px;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/*
 * Desktop bar layout (≥1367px, above the hamburger breakpoint): three
 * equal-flanked columns — brand logo pinned flush-left, the nav links
 * centred, and the action cluster (download / star / locale) flush-right.
 * The two 1fr side tracks are symmetric, which keeps the centre column
 * optically centred regardless of how wide either side gets. Mobile keeps
 * the base flex layout untouched.
 */
@media (min-width: 1367px) {
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-inner > .brand {
    order: 1;
    justify-self: start;
  }
  .nav-inner > nav[data-nav-primary] {
    order: 2;
    justify-self: center;
  }
  .nav-inner > .nav-side {
    order: 3;
    justify-self: end;
  }
  /* Translated labels (ja ソリューション, ru Сообщество, …) run longer than
     the English originals. A trigger must never break between its label and
     the ▾ caret — wrapping stacks the bar into two lines that overlap the
     hero. The bar widens / tightens instead (capsule cap + the band below). */
  .nav-links a {
    white-space: nowrap;
  }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
}
/*
 * Combined brand lockup — the glyph + "OpenDesign" wordmark as a single
 * SVG (`/logo-lockup.svg`, viewBox 225×83). Sized by height so the glyph
 * keeps roughly its previous 44px optical weight while the wordmark sets
 * its own width. Replaces the old `.brand-mark` glyph + `.brand-name`
 * text pair in the header and both footers.
 */
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  transition: height 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Shrinks alongside the condensed bar (eased in lockstep with the
   capsule's width/padding so nothing jumps ahead). */
.site-chrome.is-condensed .brand-logo {
  height: 33px;
}
.brand-mark {
  /*
   * Bumped from 36px → 44px (≈22% larger). The new black brand mark
   * needs the extra optical weight against the wordmark, especially
   * given the speech-bubble negative space visually shrinks the glyph.
   * (PR #2588's brand polish, restored on top of #2469.)
   */
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.brand-name {
  white-space: nowrap;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Round the corners of the brand glyph (~22% of side, app-icon
   * silhouette convention) so the solid-fill square reads as a
   * brand mark next to the wordmark rather than a screenshot. */
  border-radius: 10px;
}
.brand-meta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.brand-meta b { display: block; color: var(--ink); font-weight: 600; }

.nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s ease;
  position: relative;
}
.nav-links a:hover { color: var(--coral); }
.nav-links a .num {
  font-size: 9px;
  color: var(--ink-faint);
  position: absolute;
  top: -7px;
  right: -16px;
  letter-spacing: 0.04em;
}

/* Product / Resources are category labels, not pages — they render as
   disclosure buttons that toggle their own dropdown instead of navigating
   (Product used to bounce to the homepage, Resources to /blog/). Style the
   button to read identically to the sibling <a> nav links, then reset the
   native button chrome. */
.nav-links .nav-trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-links .nav-trigger:hover { color: var(--coral); }

/*
 * Product dropdown — CSS-only, no JS. The submenu is hidden by default and
 * revealed on `:hover` of the parent `li.has-dropdown`, or on `:focus-within`
 * for keyboard navigation. This keeps the static export self-contained.
 */
.nav-links li.has-dropdown {
  position: relative;
  --nav-flyout-gap: 12px;
}
/*
 * Invisible hover bridge across the 38px flex gap between nav triggers so
 * sweeping between items keeps something hovered — otherwise the dropdown and
 * the :has() page blur flick off/on in the dead gap. Last item excluded.
 */
.nav-links li.has-dropdown:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 38px;
}
.nav-links .dropdown-caret {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1;
  /* nudge up a hair: the triangle glyph's ink sits low in its em box */
  transform: translateY(-1px);
  color: var(--ink-faint);
  transition: transform 0.18s ease, color 0.18s ease;
}
.nav-links li.has-dropdown:hover .dropdown-caret,
.nav-links li.has-dropdown:focus-within .dropdown-caret {
  /* keep the -1px optical baseline; nudge down 1px more as the open affordance */
  transform: translateY(0);
  color: var(--coral);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--nav-flyout-gap, 12px));
  left: -16px;
  margin: 0;
  padding: 10px;
  list-style: none;
  min-width: 320px;
  background: var(--paper);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(26, 26, 26, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/*
 * Frosted backdrop behind an open header menu. Opening a nav dropdown — or the
 * language switcher — frosts the page (blueprint / glass look) while the nav
 * bar and its menu stay sharp on top. Pure CSS via :has().
 *
 * Anchored to the viewport top (`top: 0`, full-viewport height) so it covers
 * the WHOLE screen behind the chrome — including the transparent topbar strip
 * above the nav pill, where page content used to bleed through while a menu was
 * open. It lives in the chrome's stacking context (z-index 50 in .shell) at the
 * back (z-index -1), so it covers page content while the topbar, nav links,
 * dropdown, and locale menu all paint above it; the opaque condensed nav pill
 * hides the frost behind itself, so the bar still reads as a clean bar.
 * Desktop only: the mobile nav is a vertical drawer, not a hover panel.
 */
@media (min-width: 1367px) {
  .site-chrome::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(26px) saturate(108%);
    -webkit-backdrop-filter: blur(26px) saturate(108%);
    opacity: 0;
    pointer-events: none;
    /* Delay the fade-OUT so a brief hover loss (crossing a gap) doesn't flash
       the blur; opening stays instant via the override below. */
    transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1) 120ms;
  }
  .site-chrome:has(.nav-links li.has-dropdown:hover)::after,
  .site-chrome:has(.nav-links li.has-dropdown:focus-within)::after,
  .site-chrome:has(.locale-switch[open])::after {
    opacity: 1;
    transition-delay: 0ms;
  }
}
/* invisible bridge so cursor can travel from trigger to menu without
 * crossing a gap that closes the menu mid-traverse */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--nav-flyout-gap, 12px));
  left: 0;
  right: 0;
  height: var(--nav-flyout-gap, 12px);
}
.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s ease;
}
.nav-dropdown a:hover {
  background: var(--coral-tint);
  color: var(--ink);
}
.nav-dropdown a.is-active {
  background: rgba(26, 26, 26, 0.04);
}
.nav-dropdown .dropdown-name {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.nav-dropdown .dropdown-blurb {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* Grouped dropdown (Solution): small-caps group labels between the rows.
   Rules mirror upstream main's header CSS 1:1. */
.nav-dropdown .nav-dropdown-group {
  padding: 8px 12px 2px;
}
.nav-dropdown .nav-dropdown-group:first-child {
  padding-top: 4px;
}
.nav-dropdown .nav-dropdown-group-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Solution panel lists 11 rows + 2 group labels; cap the height so it never
   grows past the viewport, scrolling inside instead. */
.nav-dropdown-solution {
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

/* Product mega menu — category columns side by side. Each `.nav-mega-col` is
   one top-level category (Products, Agent, and later e.g. Feature); adding a
   column just widens the panel. Reuses the base `.nav-dropdown` card chrome
   (paper, border, shadow, item hover fills) and only lays the columns out.
   Product is the leftmost nav item, so the panel opens rightward with no
   right-edge overflow risk. */
.nav-dropdown-mega {
  display: flex;
  gap: 0;
  min-width: 0;
  /* Five columns since the 2026-08 nav consolidation (Plugin + the three
     former Solution groups + Agent). Anchored at `left: -16px` the wide
     panel runs off the right viewport edge, so the li goes static and the
     panel centers against `.container` (the nearest positioned ancestor —
     NOT `.site-chrome`/the viewport). The mobile drawer resets
     left/transform via its `position: static` rule. */
  max-width: min(94vw, 1000px);
}
/* Desktop only: the mobile drawer flattens dropdowns to `position: static`,
   where a centering transform would shift them sideways. The Product li goes
   static so the wide panel positions against `.container` and centers on it —
   anchored to the li it overflows narrow desktops. */
@media (min-width: 1367px) {
  .nav-links li.nav-item-mega { position: static; }
  /* With the li static, absolutely-positioned descendants resolve against
     `.container` (the nearest positioned ancestor), so the shared
     `left: 100%` hover-bridge ::after would land at the container's right
     edge — a stray hit target nowhere near the trigger. Drop it here; the
     full-width mega panel itself bridges the hover. */
  .nav-links li.nav-item-mega::after { content: none; }
  .nav-dropdown-mega {
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
  }
  .nav-links li.has-dropdown:hover .nav-dropdown-mega,
  .nav-links li.has-dropdown:focus-within .nav-dropdown-mega {
    transform: translateX(-50%) translateY(0);
  }
}
.nav-dropdown-mega .nav-mega-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 216px;
}
.nav-dropdown-mega .nav-mega-col-merged { min-width: 164px; }

/* GitHub star chip beside the Download CTA (2026-08 nav consolidation):
   quiet outline pill so Download stays the bar's only strong CTA. Narrow
   viewports drop the chip first — Download always survives. */
.nav-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 650;
  color: #595959;
  border: 1px solid #15140f24;
  border-radius: 999px;
  padding: 7px 13px;
  margin-right: 10px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-star:hover { color: var(--ink); border-color: #15140f4d; }
@media (max-width: 1160px) {
  .nav-star { display: none; }
}

.nav-dropdown-mega .nav-mega-col + .nav-mega-col {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid rgba(26, 26, 26, 0.08);
}
.nav-dropdown-mega .nav-mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Column header — small-caps category label, matching the grouped-dropdown
   label. When it is a link (Agent → /agents/ hub) it tints on hover; it
   overrides the generic `.nav-dropdown a` block/padding/hover-fill styles. */
.nav-dropdown-mega .nav-mega-col-head {
  display: block;
  padding: 4px 12px 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
a.nav-mega-col-head:hover {
  background: transparent;
  color: var(--coral);
}
a.nav-mega-col-head.is-active {
  background: transparent;
  color: var(--ink);
}
/* Red "new" dot — marks the currently promoted entry in the mega panel
   (DeepSeek Harness, 2026-08). Sits superscript-ish next to the name. */
.nav-new-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #f53f3f;
  vertical-align: middle;
}
/* A long column (Agent: 21 rows) caps its own height and scrolls so the
   panel never runs off short viewports; shorter columns stay static. */
.nav-dropdown-mega .nav-mega-list-scroll {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

/*
 * Hamburger toggle. Hidden at desktop widths (≥1367px). At narrower
 * viewports it replaces the inline nav-links and toggles a panel
 * underneath the header bar via a small handler in `header-enhancer`.
 */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nav-toggle:hover {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.32);
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-toggle-icon {
  position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after  { top:  6px; }
/* When open, morph into an "X" */
.nav.is-open .nav-toggle-icon { background: transparent; }
.nav.is-open .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav-toggle-icon::after  { top: 0; transform: rotate(-45deg); }

.nav-side {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.nav-side .locale-switch {
  flex-shrink: 0;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-side .locale-menu {
  top: calc(100% + var(--nav-flyout-gap, 12px));
  right: 0;
}
/* Icon-only social cluster (community + X) in the action area. */
.nav-social {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* Phones: the bar keeps brand + hamburger + Download only. The secondary
   icon cluster (community / X / language) would otherwise squeeze the
   shrinkable brand to 0px at 320–375px; community lives in the hero button
   and the footer, and the language switcher lives in the footer. */
@media (max-width: 640px) {
  .nav-inner { gap: 10px; }
  .nav-inner > .brand { flex: 0 0 auto; min-width: 0; }
  .brand-logo,
  .site-chrome.is-condensed .brand-logo { height: 32px; }
  .nav-side { gap: 10px; }
  .nav-side .nav-social { display: none; }
  .nav-cta.ghost { padding: 9px 14px; font-size: 13px; }
}

.nav-social-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--ink-mute, #8c8c8c);
  transition: color 160ms ease, transform 160ms ease;
}
.nav-social-link:hover,
.nav-social-item:focus-within .nav-social-link { color: var(--ink); transform: translateY(-1px); }
.nav-social-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
/* Brand mark sits monochrome at rest and lights up in brand colour on
   hover / focus (Discord via currentColor). */
.nav-social-link[data-community-platform='discord']:hover,
.nav-social-item:focus-within .nav-social-link[data-community-platform='discord'] {
  color: #5865f2;
}
/* Language switcher as a plain icon in the same cluster. */
.nav-social .nav-locale-switch { display: inline-flex; align-items: center; }
.nav-social .nav-locale-trigger {
  padding: 0;
  border: 0;
  color: var(--ink-mute, #8c8c8c);
  list-style: none;
}
.nav-social .nav-locale-trigger::-webkit-details-marker { display: none; }
.nav-social .nav-locale-trigger .locale-trigger-icon { color: inherit; }
.nav-social .nav-locale-trigger .locale-trigger-icon::before { font-size: 19px; }
.nav-social .nav-locale-trigger:hover,
.nav-social .nav-locale-switch[open] > .nav-locale-trigger,
.nav-social .nav-locale-trigger:hover .locale-trigger-icon,
.nav-social .nav-locale-switch[open] > .nav-locale-trigger .locale-trigger-icon { color: var(--ink); }
.nav-social .locale-menu { top: calc(100% + 14px); right: 0; }

/* "Credits inside" nudge: a small pulsing coral dot on the community icon. */
.nav-social-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px #fff;
  animation: nav-social-badge-pulse 2.2s ease-in-out infinite;
}
.nav-social-item .nav-social-link { position: relative; }
@keyframes nav-social-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 color-mix(in srgb, var(--coral) 55%, transparent); }
  60% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .nav-social-badge { animation: none; } }
/* Hover card copy: a bold title line ("Join Discord" / scan-to-join) and a
   quiet one-line perk underneath with a single accent dot. */
.nav-community-card-title {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.nav-community-card-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute, #8c8c8c);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-community-perk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 22%, transparent);
}
/* Community perk card — hover / focus card under the icon. */
.nav-community-qr-card {
  position: absolute;
  z-index: 60;
  top: calc(100% + 12px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: max-content;
  min-width: 168px;
  max-width: 260px;
  padding: 12px 16px 11px;
  border: 1px solid rgba(26, 26, 26, 0.11);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 17, 26, 0.1), 0 2px 5px rgba(17, 17, 26, 0.04);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  pointer-events: none;
}
.nav-community-qr-card::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-community-entry:hover .nav-community-qr-card,
.nav-community-entry:focus-within .nav-community-qr-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta [data-github-stars],
.nav-cta [data-github-version] {
  font-variant-numeric: tabular-nums;
}
.nav-cta::after {
  content: none;
}
/* Download: a compact filled pill. Same ink background as the primary button
   (.btn-primary), but tighter padding than .btn's 14px 22px so it reads at
   nav scale. */
.nav-cta.ghost {
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transition: background 160ms ease, transform 160ms ease;
}
.nav-cta:not(.ghost):hover {
  color: var(--coral);
}
.nav-cta.ghost:hover {
  background: #434343;
}
/* ---------- gradual blur ---------- */
/*
 * Layer geometry, blur radii, and mask gradients are emitted inline by the
 * `GradualBlur` component (see `_components/gradual-blur.tsx`). These rules
 * own only the cross-layer plumbing: `isolation` keeps the stacked
 * backdrop-filters in their own compositing context, the parent variant
 * clips the band to its container, and the `@supports` fallback degrades to
 * a translucent veil on browsers without backdrop-filter.
 */
.gradual-blur {
  isolation: isolate;
}
.gradual-blur-parent {
  overflow: hidden;
}
.gradual-blur-inner > div {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}
@supports not (backdrop-filter: blur(1px)) {
  .gradual-blur-inner > div {
    background: rgba(20, 20, 20, 0.18);
  }
}
/* ---------- typography primitives ---------- */
.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--coral);
  display: inline-block;
}
.label .ix {
  color: var(--ink-faint);
  font-weight: 500;
  margin-left: 4px;
}
.display {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1.0;
}
.display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.display .dot { color: var(--coral); }
.lead {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36ch;
}
/*
 * Arrow-pipeline leads (Brief → 模板 → … → 记忆沉淀) read as one chain and
 * must never wrap, in any state or viewport. The generic 36ch cap is
 * lifted and the font scales with the viewport below ~520px so the line
 * shrinks instead of breaking (CJK would otherwise wrap between any two
 * characters regardless of nbsp).
 */
.lead-pipeline {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(10px, min(3.2vw, 16px), 16px);
}
.meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.coord {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 14px 26px -16px rgba(38, 38, 38, 0.42);
}
.btn-primary:hover { transform: translateY(-1px); background: #434343; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(21, 20, 15, 0.2);
}
.btn-ghost:hover { background: rgba(21, 20, 15, 0.04); }
.btn .arrow {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn .arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.btn .arrow .ri-glyph { font-size: 16px; }
/* Live GitHub star count appended after "Star us" — tabular figures so the
   button width doesn't jitter when the live count ticks. */
.star-count { font-variant-numeric: tabular-nums; }

/* Skill Remix Icon glyph — the only interface-icon primitive (see the bundled
   skill's references/图标.md). Sizes to the surrounding font-size; colour
   inherits from the parent. */
.ri-glyph {
  font-family: 'Remix Icon';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* helper used inline in headlines */
.code-inline {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bone);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 0;
  /* Downward shift applied to the backdrop artwork so it sits lower on the
     first screen; the hero height grows by the same amount below so the
     artwork's bottom (the deck screenshot) still isn't clipped. */
  --hero-bg-offset: 8vw;
  /* Tall enough to reveal the hero artwork's visible content so its bottom —
     the deck screenshot — isn't clipped. The current artwork file is
     2880x1648, but everything below y≈980 is a transparent tail with stray
     near-invisible specks, so the formula tracks the visible height (not the
     file height) to avoid reserving phantom blank space before the next
     section. */
  min-height: calc(min(100vw * 980 / 2880, 980px) + var(--hero-bg-offset));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-bottom: 0;
  overflow: hidden;
}
/* First-screen backdrop image. It scales down to the viewport but never
   exceeds the source image width, so the artwork stays proportional instead
   of being stretched on wide screens. */
.hero-bg {
  position: absolute;
  top: var(--hero-bg-offset, 0);
  left: 50%;
  /* Fill the full width edge-to-edge while preserving the artwork's native
     aspect ratio: `height: auto` scales height proportionally (no stretch,
     no letterbox gaps). Any overflow past the hero is clipped by the
     section's `overflow: hidden`. */
  width: 100%;
  max-width: 2880px;
  height: auto;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hero > .container { flex: 0 0 auto; }
.hero > .container.hero-grid { flex: 1 1 auto; }
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-soft);
  z-index: 0;
  display: none;
}
.hero-grid {
  display: flex;
  justify-content: center;
  /* Top-anchored (not centered): the hero artwork behind the copy scales
     with viewport WIDTH, so a width-proportional padding-top keeps the CTAs
     parked in the empty band under the headline at any viewport height. */
  align-items: flex-start;
  width: 100%;
  position: relative;
  /* Above the hero background image so the copy renders over the artwork. */
  z-index: 1;
}
.hero-copy {
  padding: max(48px, calc(12vw - 52px)) 0 4vh;
  display: flex;
  flex-direction: column;
  /* Centered hero — every first-screen module (eyebrow, manifesto, actions,
     stats, foot) stacks on the page's horizontal center. */
  align-items: center;
  width: min(1080px, 100%);
  margin: 0 auto;
  position: relative;
  text-align: center;
}
/* Hero manifesto line. Skill spec (UIUX-design): Albert Sans, --font-size-18
   (18px / 125%), weight 400 body, neutral 正文文字 #434343 (= --ink-soft),
   centered short emphasis text, --spacing-32 gap to the CTAs below. */
.hero-lead {
  /* Eyebrow / kicker carrying the SEO entry word ("Open Source Claude Design
     Alternative", localized). Sits above the brand as a small emphasized label
     rather than a body paragraph, so the H1 brand + positioning stays the
     visual focus while the entry term remains crawlable HTML text. */
  max-width: 760px;
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral, var(--ink-soft));
  text-align: center;
}
/* Hero sub-line beneath the CTAs. Skill spec: Albert Sans, --font-size-16
   (16px / 125%), weight 400, neutral 正文次级文字 #595959 (= --ink-mute),
   centered. --spacing-28 gap above. */
.hero-sub {
  max-width: 760px;
  margin: 28px 0 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink-mute);
  text-align: center;
}
.hero-sub-highlight {
  padding: 0 0.08em 0.04em;
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(
    transparent 56%,
    color-mix(in srgb, var(--coral) 34%, transparent) 0
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* First-screen product window. Centered, can sit wider than the 820px copy
   column; capped to 92vw on narrow screens. Border uses the skill's neutral
   分割线 #d9d9d9 (= --line). --spacing-48 gap above. */
.hero-shot {
  width: min(1080px, 92vw);
  margin: 48px 0 0;
}
.hero-shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -40px rgba(38, 38, 38, 0.28);
}
/* First-screen video facade (YouTube, click-to-play). Same frame treatment
   as the product shot it replaced; the iframe is injected on demand. */
.hero-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #0b0b0b;
  box-shadow: 0 30px 80px -40px rgba(38, 38, 38, 0.28);
  cursor: pointer;
}
.hero-video-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.hero-video-frame:hover .hero-video-poster { transform: scale(1.015); }
.hero-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, background 160ms ease;
}
.hero-video-play svg { margin-left: 3px; }
.hero-video-frame:hover .hero-video-play { transform: scale(1.06); background: #fff; }
.hero-video-play:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.hero-video-frame.is-playing .hero-video-poster,
.hero-video-frame.is-playing .hero-video-play { display: none; }
.hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hero-discord-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  padding: 7px 13px;
  border: 1px solid #beff8c;
  border-radius: 999px;
  background: #f2ffe6;
  color: var(--coral);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 24px -22px rgba(38, 38, 38, 0.22);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.hero-discord-pill:hover {
  transform: translateY(-1px);
  border-color: #83ff3b;
  background: #d8ffb5;
}
.hero-discord-pill span {
  font-size: 8px;
  line-height: 1;
}
/* Centered eyebrow chrome above the left-aligned manifesto: the Discord
   pill is already align-self centered; match the label to it. */
.hero-copy .label { margin-bottom: 28px; align-self: center; }
.hero-copy .lead { margin-bottom: 30px; max-width: 52ch; font-size: 16px; }
.hero h1 {
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1.0;
  margin-bottom: 28px;
}
/*
 * Hero manifesto headline — three left-aligned statements at a fixed 46px,
 * weight 700 (UIUX skill: page-title weight). Albert Sans is inherited from
 * the global --sans stack; a gentle line-height keeps the CJK sentences
 * readable as they wrap inside the 820px copy column.
 */
.hero h1.hero-manifesto {
  font-family: var(--sans);
  font-size: 46px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 30px;
}
/* Hero brand title (zh first screen): the product name stacked over a
   one-line positioning statement. Oversized brand line, slightly smaller
   tagline, both centered — mirrors the reference comp. */
.hero h1.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Shifted down 30px (top margin) to sit lower under the lead line. */
  margin: 30px auto 8px;
  /* Frame hugs the text: shrink-wrap to the widest line (brand vs tagline) plus
     padding, instead of spanning the full hero column. Stays centred. */
  width: fit-content;
  max-width: 100%;
  line-height: 1;
  /* Blueprint-style selection frame around the brand title (reference comp):
     a thin accent border with a small filled square sitting on each corner. */
  position: relative;
  /* Fluid frame padding so the blueprint border hugs the title at every
     width instead of pushing the oversized line off-screen on mobile. */
  padding: clamp(16px, 3.2vw, 28px) clamp(18px, 5vw, 48px);
  border: 1px solid var(--coral);
}
/* Small filled squares centred on each corner of the title frame. */
.hero-title-corner {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--coral);
}
.hero-title-corner.tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.hero-title-corner.tr { top: 0; right: 0; transform: translate(50%, -50%); }
.hero-title-corner.bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.hero-title-corner.br { bottom: 0; right: 0; transform: translate(50%, 50%); }
.hero-title-brand {
  /* Editorial slab/serif treatment for the brand line only — system serif
     stack (no webfont load) so it costs zero extra requests. The CJK tagline
     below stays on the sans display face. */
  font-family: Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif;
  font-weight: 800;
  /* Fluid: caps at 54px on desktop (≥900px), scales down on narrow screens. */
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.hero-title-position {
  /* Headline: "The Vibe Design Workspace for your brand." One line on desktop
     (fluid size keeps the longest locale on a single row); wraps only on phones. */
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(26px, 3.3vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  white-space: nowrap;
  background: none;
  box-shadow: none;
  text-decoration: none;
}
@media (max-width: 640px) {
  .hero-title-position { white-space: normal; text-wrap: balance; }
}
.hero-title-main {
  /* Localized task positioning: each active locale supplies two deliberate
     desktop lines, so long translations keep the same editorial rhythm. */
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 0.14em;
  max-width: none;
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.hero-title-main-line {
  display: block;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
  padding-inline: 0.08em;
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.hero-title-main-line:last-child {
  padding-bottom: 0.06em;
}
.hero-task-emphasis {
  display: inline-block;
  padding: 0 0.08em 0.04em;
  background: linear-gradient(
    transparent 56%,
    color-mix(in srgb, var(--coral) 34%, transparent) 0
  );
  box-shadow: none;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 720px) {
  .hero-title-main {
    font-size: clamp(20px, 6.4vw, 28px);
  }
  .hero-title-main-line {
    width: auto;
    white-space: normal;
  }
}
.hero-title-sub {
  font-family: var(--sans);
  font-weight: 700;
  /* Fluid: caps at 35px on desktop (≥795px), scales down on narrow screens so
     the CJK tagline stays inside the frame instead of clipping. */
  font-size: clamp(20px, 4.4vw, 35px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------- BlurText reveal (React Bits "BlurText", static SSR port) ----------
 *
 * Each word/letter of the hero title is a `.blur-word` span carrying a `--i`
 * stagger index (see `BlurText` in page.tsx). The container `.hero-title` keeps
 * its `data-reveal`, so the IntersectionObserver in home-enhancer.astro flips it
 * to `data-revealed='true'` on scroll-in and the cascade begins. The keyframes
 * mirror the component's blur(10→5→0) + opacity(0→.5→1) + translateY steps. */
.hero h1.hero-title[data-reveal],
.reveal-ready .hero h1.hero-title[data-reveal] {
  /* Let the per-word blur be the whole motion: cancel the generic block reveal
     translate/opacity so the frame itself doesn't slide or fade. */
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: none;
}
.blur-word {
  display: inline-block;
  opacity: 1;
  filter: none;
  transform: none;
}
.reveal-ready .blur-word {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-50px);
  will-change: transform, filter, opacity;
}
.reveal-ready .hero-title[data-revealed='true'] .blur-word {
  animation: blurTextIn 0.38s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: calc(var(--i, 0) * 0.035s);
}
@keyframes blurTextIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-50px);
  }
  50% {
    opacity: 0.5;
    filter: blur(5px);
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .blur-word {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
  .hero-download-attention::after { animation: none; }
}
.hero-actions {
  /* Sits above the video frame below so the community QR hover-card is not
     clipped by the next sibling's stacking context (data-reveal transforms). */
  position: relative;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 42px; /* skill --spacing-42 (was 90px) */
  margin-bottom: 0;
}
/* Community entry beside the hero download CTA — outlined pill, same 64px
   height as .hm-dl. */
.hero-community {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hero-community-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.18s, background 0.18s, box-shadow 0.25s;
}
.hero-community-cta:hover,
.hero-community:focus-within .hero-community-cta {
  transform: translateY(-3px);
  border-color: rgba(26, 26, 26, 0.38);
  background: #fff;
  box-shadow: 0 16px 30px -16px #26262666;
}
.hero-community-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero-community-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #3370ff; }
.hero-community-icon path:first-child {
  fill: color-mix(in srgb, currentColor 10%, transparent);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.hero-community-icon path:last-child { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hero-community-perk {
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--coral);
  color: #0d2601;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
/* Core-trait chips between the headline and the CTA row. */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 26%, #fff);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-tags + .hero-actions { margin-top: 44px; }
/* Hero CTA pair: one notch smaller than the default .hm-dl treatment. */
.hero-actions .hm-dl-hero {
  padding: 11px 24px 11px 11px;
  font-size: 15px;
  gap: 11px;
}
.hero-actions .hm-dl-hero .hm-di { width: 30px; height: 30px; font-size: 15px; }

.hero-community-icon-discord path { fill: currentColor; stroke: none; }
@media (max-width: 640px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-community-cta { height: 42px; padding: 0 14px; font-size: 13px; }
}
.hero-download-attention {
  position: relative;
}
.hero-download-attention::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #ff3b30;
  transform: translate(45%, -45%);
  animation: downloadAttentionPulse 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
@keyframes downloadAttentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.38); }
  55% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
}
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: nowrap;
  margin-bottom: 28px;
}
.hero-stats .stat { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.hero-stats .stat .ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px dashed var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-stats .stat .ring.solid { border-style: solid; }
.hero-stats .stat .ring.coral { border-color: var(--coral); color: var(--coral); }
.hero-stats .stat-label {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-stats .stat-label b { display: block; font-weight: 700; color: var(--ink); font-size: 12px; }

.hero-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}
.hero-foot .meta { line-height: 1.4; }

.hero-art {
  position: relative;
  height: calc(100vh - 160px);
  max-height: 860px;
  margin-left: auto;
  margin-right: -12px;
  width: 100%;
  overflow: visible;
}
.hero-art img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}
/* image annotations */
.annot {
  position: absolute;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
  white-space: nowrap;
}
.annot.has-line::before {
  content: '';
  position: absolute;
  background: var(--ink-faint);
}
.annot-tl { top: 14px; left: 14px; }
.annot-tr { top: 14px; right: 14px; text-align: right; }
.annot-bl { bottom: 14px; left: 14px; }
.annot-br { bottom: 14px; right: 14px; text-align: right; }
.annot.coord { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: none; }

.hero-art .index {
  position: absolute;
  right: 12px;
  top: 36%;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  background: rgba(239, 231, 210, 0.7);
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  backdrop-filter: blur(2px);
}
.hero-art .index span { display: block; line-height: 1.6; }
.hero-art .index span .n { color: var(--coral); margin-right: 6px; font-weight: 700; }
.hero-art .index span.on { color: var(--ink); font-weight: 700; }
.hero-art .index span.on .n { color: var(--coral); }

.hero-art .corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--ink-faint);
  border-style: solid;
  border-width: 0;
}
.hero-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero-art .corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero-art .corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- common section header ---------- */
section { position: relative; padding: 130px 0; }
section.tight { padding: 90px 0; }
.sec-rule {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sec-rule .roman {
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: none;
}
.sec-rule .meta-grp { display: inline-flex; gap: 26px; }
.sec-rule .dot-mark { color: var(--coral); }

.section-header { margin-bottom: 70px; }
.section-header .label { margin-bottom: 32px; }
.section-header h2 {
  font-size: clamp(40px, 4.6vw, 66px);
  max-width: 22ch;
}
.section-header .lead { margin-top: 22px; }

/* ---------- WIRE / GLOBAL TICKER ----------
 *
 * Slim editorial strip between the hero and the About section. Two
 * counter-scrolling marquees (cities → and contributors ←) signal that
 * the project is global and community-driven, without disrupting the
 * existing roman-numeral section count. Pure CSS animation; the track
 * content is duplicated in markup so the loop wraps seamlessly.
 */
.wire {
  border-bottom: 1px solid var(--line);
  padding: 26px 0 28px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.wire-inner {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.wire-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-right: 1px solid var(--line);
  padding-right: 24px;
  min-height: 56px;
}
.wire-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wire-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
.wire-title {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wire-title b {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wire-title span {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wire-rows {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.wire-row {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  white-space: nowrap;
  animation: marquee-x 52s linear infinite;
  will-change: transform;
}
.wire-row.reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 64s;
}
.wire-row:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.wire-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-decoration: none;
  flex-shrink: 0;
}
.wire-item .wire-dot {
  color: var(--coral);
  font-size: 16px;
  line-height: 0;
  position: relative;
  top: -1px;
  margin-right: 2px;
}
.wire-item .wire-coord {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.wire-item .wire-name {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 500;
}
.wire-item .wire-handle {
  font-family: var(--mono);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 500;
}
.wire-item .wire-role {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--coral);
  font-size: 10px;
}
.wire-item.is-link {
  transition: color 160ms ease;
}
.wire-item.is-link:hover .wire-handle {
  color: var(--coral);
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ---------- ABOUT ---------- */
.about {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  justify-items: center;
}
.about h2 {
  font-size: clamp(44px, 5.4vw, 78px);
  margin: 30px 0 36px;
}
.about-copy {
  max-width: 980px;
  text-align: center;
}
.about-kicker {
  width: 203px;
  max-width: 100%;
  margin: 0 0 26px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
}
/* === Text Scroll Reveal — the ABOUT statement (Magic UI / Inspira port).
   A tall track with a sticky, vertically-centered paragraph; the inline
   script in pages/index.astro maps scroll progress to each token's opacity,
   lighting the copy word by word as the reader scrolls through. === */
.about-reveal {
  /* Normal flow with the original statement spacing — no tall pinned track.
     The word-by-word reveal is driven by the block's pass through the
     viewport instead (see `enhanceStatementReveal`). */
  position: relative;
  margin: 0 0 36px;
}
.about-reveal-sticky {
  display: block;
}
/* `.about h2` (0,1,1) sets a large display size; match the old statement's
   specificity (0,2,1) so the reveal copy keeps the original 26px. */
.about h2.about-reveal-text {
  margin: 0;
  max-width: 900px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink);
}
.reveal-word {
  /* No-JS / reduced-motion fallback is full ink; the script adds
     `.is-reveal-active` (which dims the base) then drives per-token opacity. */
  opacity: 1;
  transition: opacity 90ms linear;
  will-change: opacity;
}
.about-reveal.is-reveal-active .reveal-word {
  opacity: 0.18;
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal.is-reveal-active .reveal-word { opacity: 1; }
}
.about h2.about-statement {
  display: grid;
  gap: 18px;
  /* Second-screen statement fixed at 26px (was driven up to 78px by the
     generic `.about h2` rule). */
  font-size: 26px;
  line-height: 1.18;
  /* Left-aligned, overriding the centered `.about-copy`. */
  text-align: left;
}
.about-statement span {
  display: block;
}
/*
 * Second-screen statement entrance — true "Mask Reveal Up" (animata.design/
 * docs/text/mask-reveal-up). Each line is a clip window (`overflow: hidden`)
 * and its inner text rises from fully below the edge (translateY 110% → 0),
 * so the words wipe up from behind the mask rather than just fading. Lines
 * stagger top-to-bottom; easing matches the rest of the page's reveals.
 *
 * Replayed on every scroll-in: a dedicated observer in `pages/index.astro`
 * toggles `.is-inview` on the statement as it enters / leaves the viewport,
 * so the reveal plays each time the reader scrolls to this module rather
 * than once-and-done.
 */
.about-statement.text-appear span {
  /* Clip window. The small vertical padding (cancelled by the negative
     margin) gives Latin descenders room so the resting text isn't shaved
     by the overflow clip. */
  overflow: hidden;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.about-statement.text-appear .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--line-delay, 0ms);
  will-change: transform;
}
.about-statement.text-appear span:nth-child(1) .line-inner { --line-delay: 0ms; }
.about-statement.text-appear span:nth-child(2) .line-inner { --line-delay: 110ms; }
.about-statement.text-appear span:nth-child(3) .line-inner { --line-delay: 220ms; }
.about-statement.text-appear.is-inview .line-inner {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .about-statement.text-appear .line-inner {
    transform: none;
    transition: none;
  }
}
.about .label { margin-bottom: 28px; }
.about .lead {
  margin: 0 auto 36px;
  max-width: 56ch;
  font-size: 17px;
}
/* Tabbed capability surface — a pill segmented control on top, with one
   content panel revealed below. Pure CSS (hidden radio + :checked sibling
   selectors) so it works in the static Astro render with no JS island.
   (Replaces the former three-up .about-cards grid.) */
/* Scroll-driven tab cycle: scrolling through `.about-scrolly` advances the
   active tab (1→2→3) while `.about-sticky` pins the tabs+panels in view. Clicks
   still work — `enhanceAboutScrolly` just checks the matching radio. */
.about-scrolly {
  position: relative;
  width: 100%;
  height: calc(3 * 64vh);
}
.about-sticky {
  position: sticky;
  top: 110px;
}
@media (max-width: 880px) {
  /* No pinning on small screens — tabs stay click-only. */
  .about-scrolly { height: auto; }
  .about-sticky { position: static; }
}
.about-tabs {
  margin: 0 auto 42px;
  text-align: left;
}
.about-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.about-tablist {
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(21, 20, 15, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}
.about-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Leading icon per tab, drawn from the skill's Remix Icon font (line style
   per the skill's icon rule, coral accent from the palette). */
.about-tab::before {
  font-family: 'Remix Icon';
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  color: var(--coral);
  -webkit-font-smoothing: antialiased;
}
.about-tablist label:nth-of-type(1)::before { content: '\ebca'; } /* computer-line */
.about-tablist label:nth-of-type(2)::before { content: '\f019'; } /* plug-line */
.about-tablist label:nth-of-type(3)::before { content: '\f36d'; } /* sparkling-line */
.about-tab:hover { color: var(--ink); }
/* Active tab fills to the dark ink pill (white label, coral icon retained). */
#about-tab-1:checked ~ .about-tablist label[for='about-tab-1'],
#about-tab-2:checked ~ .about-tablist label[for='about-tab-2'],
#about-tab-3:checked ~ .about-tablist label[for='about-tab-3'] {
  background: var(--ink);
  color: #fff;
}
.about-panels {
  margin-top: 16px;
  /* Viewport for the vertical stacking reel: one panel tall (panel art is
     1768×1144); the stacked panels are clipped to it. */
  position: relative;
  overflow: hidden;
  aspect-ratio: 1768 / 1144;
}
.about-track {
  /* Positioning layer for the absolutely-stacked panels. */
  position: absolute;
  inset: 0;
}
.about-panel {
  /* Vertical stacking reel (matches the capability module below): each panel
     parks below and slides UP to cover the previous as you advance; sliding
     back down reveals it. JS drives the transform 1:1 with scroll (跟手); the
     CSS transition + :checked rules below are the mobile / click fallback. */
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  border: 1px solid rgba(21, 20, 15, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 42px -38px rgba(15, 23, 42, 0.28);
}
.about-panel:nth-child(1) { z-index: 1; }
.about-panel:nth-child(2) { z-index: 2; }
.about-panel:nth-child(3) { z-index: 3; }
/* Click / mobile fallback: a checked tab stacks itself + every earlier panel at
   translateY(0); the higher z-index covers the lower. */
#about-tab-1:checked ~ .about-panels .about-panel:nth-child(1),
#about-tab-2:checked ~ .about-panels .about-panel:nth-child(-n + 2),
#about-tab-3:checked ~ .about-panels .about-panel:nth-child(-n + 3) {
  transform: translateY(0);
}
.about-panel p {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.72;
}
/* When a panel holds a full-card image, let the image BE the card: drop the
   panel's own padding/background/frame so there's no card-in-card. */
.about-panel:has(.about-panel-img) {
  padding: 0;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.about-panel-img {
  border-radius: 40px;
  overflow: hidden;
  line-height: 0;
  border: none;
  background: transparent;
}
/* Show the image exactly as provided — no rounded corners, no clipping. */
.about-panel-img-bare {
  border-radius: 0;
  overflow: visible;
}
/* Live caption laid over the the painting card baked into these about images. Uses
   container query units so the text scales in lockstep with the image width. */
.cta-pair {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.faq-download {
  margin-top: 30px;
}
.faq-download-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft, #595959);
}
.about-ctas {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.about-panel:has(.about-panel-img) {
  text-align: center;
}
.about-panel-img-captioned {
  position: relative;
  container-type: inline-size;
}
/* Scoped under `.about-panel-img-captioned` (specificity 0,2,0) so the
   container-query font-size wins over `.about-panel p` (0,1,1), which would
   otherwise pin it to a fixed 16px and stop it scaling with the image. */
.about-panel-img-captioned .about-panel-caption {
  position: absolute;
  left: 50%;
  top: 53.5%;
  transform: translateX(-50%);
  width: 86%;
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  /* Tuned so the long body line fits on a single line (no orphaned tail) while
     scaling proportionally with the image at every width. */
  font-size: 2.5cqw;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
/* Panel 1 now shows the real product window (the former hero shot) instead of
   the painted card, so the caption gets its own white card floated over the
   bottom of the screenshot rather than sitting in a baked-in blank zone. */
.about-panel-img-shot img { aspect-ratio: 2508 / 1450; }
.about-panel-img-captioned.about-panel-img-shot .about-panel-caption {
  top: auto;
  bottom: 4.5%;
  width: 78%;
  padding: 2cqw 2.6cqw;
  border-radius: 1.4cqw;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 2.1cqw;
}
/* The 3rd panel (越用越懂你 / self-evolution) centers the caption in its image's
   white-card blank zone (above the divider + chips row baked into the art). */
.about-track .about-panel:nth-child(3) .about-panel-caption {
  top: 57.5%;
}
.about-panel-img img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the painting's real 1768×1144 box up front. Without an explicit
     ratio the lazy-swap first renders the 1×1 placeholder as a full-width 1:1
     SQUARE (~320px too tall, showing the browser's broken-image/alt glyph)
     until the webp decodes, then snaps to the real ratio — a visible collapse
     the tighter homepage lazy-load margin now exposes on slower connections.
     A faint skeleton fill keeps the reserved box clean until the art paints. */
  aspect-ratio: 1768 / 1144;
  background: rgba(0, 0, 0, 0.04);
}
.about .footer-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about .footer-row .mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}
.about .stamp {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}
.about .stamp span:first-child { color: var(--coral); }
.about-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin-left: auto;
}
.about-art img { width: 100%; height: 100%; object-fit: contain; }
.about-side-note {
  position: absolute;
  right: -8px;
  top: 26px;
  text-align: right;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  max-width: 16ch;
}
.about-side-note b {
  display: block;
  color: var(--coral);
  width: 36px;
  height: 1px;
  background: var(--coral);
  margin: 0 0 10px auto;
}
.about-caption {
  position: absolute;
  right: 18px;
  bottom: 4px;
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--ink-faint);
  text-align: right;
  letter-spacing: 0.06em;
  line-height: 1.45;
}
.about-caption b { color: var(--ink); display: block; }

/* ---------- CAPABILITIES ---------- */
/* Nudge the whole capabilities module left. Uses position/left rather than a
   transform: a transform on this ancestor would re-root the sticky card stack
   inside it and break the scroll-driven stacking (Steps 3/4 would vanish). */
.capabilities {
  position: relative;
  /* Symmetric top/bottom: both neighbours (.about, .labs) use the generic
     section's 130px, so matching padding-top and padding-bottom here makes the
     module's visible top gap equal its bottom gap (130 + 40 on each side). */
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 0;
}
.capabilities-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  /* Break out of the centered .container to a fixed 238px left/right safe area
     (same convention as the lab stage): the module spans calc(100vw - 476px) and
     stays edge-anchored at 238px on both sides at any width. */
  width: calc(100vw - 476px);
  margin-left: calc(50% - 50vw + 238px);
}
.capabilities-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 600px;
}
.capabilities-art img { width: 100%; height: 100%; object-fit: contain; }
.capabilities-art .ribbon {
  position: absolute;
  right: -42px;
  top: 50%;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.capabilities-art .ribbon b { color: var(--coral); }
.capabilities-art .corner { position: absolute; width: 22px; height: 22px; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
.capabilities-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.capabilities-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.capabilities-copy h2 { font-size: 38px; margin: 22px 0 14px; }
.cards {
  display: grid;
  /* Capability cards laid out as a single horizontal row. */
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.card {
  padding: 28px 26px 32px;
  background: var(--bone);
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(21, 20, 15, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-3px); }

/*
 * Capability cards as a scroll-driven sticky stack. Each card pins near the
 * top at a slightly lower offset than the previous (var(--i) peek), so as the
 * reader scrolls every card slides up and stacks onto the pile, the prior
 * card's "Step N" header peeking above it. Once the 5th is stacked the whole
 * pile scrolls away with the section. Pure CSS — no scroll listeners.
 */
/*
 * The capabilities heading stays pinned at the top of the viewport while the
 * card stack scrolls/recedes beneath it, so the title + lead + cards all read
 * within a single screen. Opaque background + z-index mask any card that
 * scrolls up behind it before pinning.
 */
.capabilities-head {
  position: relative;
  z-index: 2;
  background: var(--paper);
  padding-top: 24px;
  padding-bottom: 6px;
  /* Title + DONE mark sit on row 1; the lead is forced onto its own row
     (flex-basis 100%) and ordered last. On mobile this flips to a column so
     the mark drops below the lead — see the ≤880px override. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 14px;
}
.capabilities-head > h2 { margin: 0; }
.capabilities-head > .lead { order: 1; flex-basis: 100%; margin-top: 0; }
.capabilities-head > .cap-head-icon { margin-left: 0; }
/* ===== Capabilities scrollytelling (left steps / right art) ===== */
.cap-scrolly {
  position: relative;
  /* Scroll length: one "page" of travel per step drives the active index. */
  height: calc(var(--steps, 5) * 68vh);
  margin-top: 20px;
}
.cap-sticky {
  position: sticky;
  top: 96px;
  /* Pins the WHOLE module (heading + row) while the track scrubs the steps. */
  min-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 40px);
}
.cap-row {
  display: grid;
  /* Gap from the head (lead line) down to the steps + Step card — bumped so
     the measured 35px reads as 64px. */
  margin-top: 29px;
  /* Narrow step column, wide art column. */
  grid-template-columns: minmax(0, 0.30fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  /* Top-align both columns so the art's top edge lines up with the first step. */
  align-items: start;
}
.cap-steps-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vh, 36px);
}
.cap-steps-link {
  margin-top: 4px;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
}
.cap-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 1.8vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: flex-start;
}
.cap-step {
  display: flex;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
  opacity: 0.38;
  /* Constant padding on every step so the row doesn't resize when the active
     pill (below) appears — only the background/shadow toggle. Taller pill. */
  padding: 14px 18px;
  border-radius: 999px;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.cap-step.is-active {
  opacity: 1;
  /* Selected step copies the hero black button: black fill, white text, the
     same pill radius (above) and the same elevation shadow. */
  background: var(--ink);
  box-shadow: 0 14px 26px -16px rgba(38, 38, 38, 0.42);
}
.cap-step-num {
  font-family: var(--mono);
  font-size: 14px; /* --font-size-14 */
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.cap-step.is-active .cap-step-num {
  color: #ffffff;
}
.cap-step-label {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 14px; /* --font-size-14 */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.cap-step.is-active .cap-step-label {
  color: #ffffff;
}
.cap-visual {
  position: relative;
  /* Matches the step PNGs' native ratio (1500×928). `overflow: hidden` only
     clips the sliding reel. */
  aspect-ratio: 1500 / 928;
  overflow: hidden;
  /* Scaled up 10% proportionally. */
  transform: scale(1.1);
  transform-origin: center;
}
/* Vertical reel: each frame slides up from below to cover the previous one
   (and back down when scrolling up). JS (`enhanceCapScrolly`) drives the
   per-frame translateY + z-index; `.cap-visual { overflow: hidden }` clips the
   parked frames. */
.cap-frame {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  /* Short transition only smooths between scroll frames — the slide is now
     driven continuously from the scroll position (see `enhanceCapScrolly`), so
     it tracks the finger instead of easing in over half a second. */
  transition: transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.cap-frame.is-active {
  transform: translateY(0);
}
.cap-frame img {
  width: 100%;
  height: 100%;
  /* Show the PNG exactly as supplied — no crop, no zoom, no distortion. All
     four step PNGs are 1500×928, matching the frame ratio, so `contain` fills
     edge-to-edge with no side gap. */
  object-fit: contain;
  display: block;
}
/* Nudge the 4th card (Step 4, index 3) 5px to the right. Applied to the image
   rather than the frame so it doesn't fight the reel's translateY animation. */
.cap-frame[data-cap-frame='3'] img {
  transform: translateX(5px);
}
/* Caption overlaid in the image's top white bar, to the right of the baked-in
   "step N" pill. Positioned as a % of the frame so it tracks the PNG at any
   size. */
.cap-frame-caption {
  position: absolute;
  top: 11.4%;
  left: 20.5%;
  right: 5%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(11px, 1.15vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.cap-frame-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  height: 100%;
  padding: clamp(28px, 4vw, 64px);
}
.cap-frame-text .cap-frame-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 40px);
  color: var(--coral);
}
.cap-frame-text p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
}
@media (max-width: 880px) {
  /* No pinning on mobile. Flatten the head + row wrappers with `display:
     contents` so the sticky GRID arranges every leaf element directly: title
     and lead full-width, then the steps row and the DONE mark side-by-side
     (steps left, mark right), and the art full-width below. */
  .cap-scrolly { height: auto; margin-top: 8px; }
  .cap-sticky {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title  title"
      "lead   lead"
      "steps  icon"
      "visual visual";
    align-items: center;
    column-gap: 12px;
    row-gap: 16px;
  }
  .capabilities-head,
  .cap-row { display: contents; }
  .capabilities-head > h2 { grid-area: title; }
  .capabilities-head > .lead { grid-area: lead; }
  /* Height/margin are overridden after the base .cap-head-icon rule below
     (which is later in the source) — see the trailing ≤880px block. */
  .cap-head-icon {
    grid-area: icon;
    justify-self: end;
    align-self: center;
  }
  .cap-visual { grid-area: visual; }
  /* Steps sit in the left grid cell as a fixed two-up grid (01/02, then 03/04)
     so every row holds exactly two, with the DONE mark beside them on the
     right. */
  .cap-steps {
    grid-area: steps;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
  }
  .cap-step {
    opacity: 1;
    justify-self: start;
    padding: 10px 11px;
    gap: 8px;
  }
  .cap-step-num,
  .cap-step-label { font-size: 13px; }
}
/* Draggable "DONE 👌" mark, inline 20px after the heading text.
   On hover it casts a soft drop-shadow under just the icon (not the whole bar). */
.cap-head-icon {
  display: inline-block;
  vertical-align: middle;
  height: 120px;
  width: auto;
  margin-left: 20px;
  z-index: 3;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transition: filter 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.capabilities-head:hover .cap-head-icon {
  filter: drop-shadow(0 12px 14px rgba(38, 38, 38, 0.15));
}
.cap-head-icon.is-dragging { cursor: grabbing; }
/* On mobile the head + row wrappers are flattened (display: contents) and the
   DONE mark is placed beside the steps by the .cap-sticky grid (see the ≤880px
   block above). This block sits AFTER the base rule so its smaller height wins
   the cascade — the base 120px would otherwise leave a ~101px-wide mark that
   starves the two-up steps grid. */
@media (max-width: 880px) {
  .cap-head-icon { height: 52px; margin: 0; }
}

.cards-stack {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  /* Cards span the full copy column so their left/right edges align flush with
     the heading and eyebrow above (no 20px inset). */
  max-width: 100%;
  margin: 8px 0 0;
  /* Total number of stacked sheets — drives the per-card scroll slices below. */
  --numcards: 5;
  /* Top offset where the front card pins. Tuned to sit just below the sticky
     heading (top 80px + ~145px tall) with the same ~14px gap the cards have in
     normal flow, so pinning doesn't pop the head/card gap open on entry. */
  --stack-top: 240px;
  /* Per-card staircase step: each sheet pins one --peek lower than the prior,
     so the previous card's header peeks above it. */
  --peek: 64px;
  /* Floor height for the text-only Step 5 card. */
  --card-h: 460px;
}
.cards-stack .card {
  position: sticky;
  top: calc(var(--stack-top) + var(--i, 0) * var(--peek));
  /* Each pins one --peek lower than the prior, so the previous card's header
     peeks above it. Image cards (Steps 1–4) size to their banner; the text-only
     Step 5 gets a floor below so it isn't a thin strip. */
  height: auto;
  margin-bottom: 52px;
  /* Tighter top padding than the base .card (28px) so the green step title sits
     closer to the card's top edge. */
  padding-top: 14px;
  /* No projected shadow; keep only a hairline inset so stacked sheets stay distinct. */
  box-shadow: inset 0 0 0 1px rgba(21, 20, 15, 0.08);
  display: flex;
  flex-direction: column;
}
/* Keep the last card (Step 5) on the same fixed spacing as the others, so the
   pile's rhythm doesn't shift / offset when it reaches the final step. */
.cards-stack .card p { max-width: 52ch; }
/* Optional step banner. The box is locked to the art's own ~2:1 ratio so the
   full image (including its bottom content) shows at full width — no crop, no
   distortion — and the card height grows to fit it. */
.card-art {
  margin-top: 22px;
  flex: 0 0 auto;
  aspect-ratio: 1480 / 748;
  border-radius: 14px;
  overflow: hidden;
}
/* Image-only cards (Steps 1–4) have the banner as their first child — drop the
   top gap so the image sits flush under the card padding. */
.card-art:first-child { margin-top: 0; }
/* In the step stack the banner bleeds to the card's left/right/bottom edges
   (cancels the .card padding 28/26/32) so there's no white frame around it; the
   card's own overflow:hidden + radius rounds the banner's bottom corners. */
.cards-stack .card-art {
  /* Title→banner gap is controlled solely by the title's margin-bottom (24px). */
  margin-top: 0;
  margin-left: -26px;
  margin-right: -26px;
  margin-bottom: -32px;
  border-radius: 0;
}
/* Uniform 24px gap between the green heading and the content below it (banner
   for Steps 1–4, body copy for Step 5), and a slightly heavier heading. */
.cards-stack .card .num { margin-bottom: 24px; font-weight: 600; }
.cards-stack .card p { margin-top: 0; }
/* Text-only card (Step 5, no banner) keeps a comfortable minimum height. */
.cards-stack .card:not(:has(.card-art)) { min-height: var(--card-h); }
.card-art img { width: 100%; height: 100%; object-fit: contain; display: block; }

/*
 * Plain sticky stack (no scroll-driven scale). Each card pins at its offset,
 * the next stacks over it, and when the section scrolls past the last card the
 * whole pinned pile scrolls away together — earlier cards stay put (no recede
 * "联动" while the stack exits the viewport).
 */
@media (max-width: 880px) {
  /* Override the staircase vars only; the shared top/min-height formula on
     .cards-stack .card adapts automatically and keeps `top + height` constant. */
  .cards-stack { max-width: 100%; --stack-top: 212px; --peek: 52px; --card-h: 260px; }
  /* Drop the 238px breakout on narrow screens — fall back to the normal
     container width so the cards don't get squeezed. */
  .capabilities-grid { width: auto; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* No pinning for readers who opt out of motion — plain vertical list. */
  .cards-stack .card { position: static; margin-bottom: 16px; height: auto; }
}
.card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--coral);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card .num .tag {
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--ink-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 500;
}
.card .icon {
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  color: var(--ink);
}
.card h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.014em;
  margin-bottom: 14px;
}
.card p {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 24ch;
}
.card .arrow-mark {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.18s ease;
}
.card:hover .arrow-mark { background: var(--coral); border-color: var(--coral); color: #ffffff; }
.card .arrow-mark svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- LABS ---------- */
.labs-head {
  /* Dock moved out to its own centered row, so the head is just the
     title block now. */
  margin-bottom: 24px;
}
.labs-head h2 { font-size: 48px; text-align: center; }
/* Keyword-rich lead under the "What can you make" heading — centered section
   subtitle, one step down from the display H2. */
.labs-head .labs-lead {
  max-width: 720px;
  margin: 14px auto 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft, var(--ink));
  text-align: center;
}
/* Unify the title color: the trailing ？ stays ink like the rest of the line
   instead of the global coral dot. */
.labs-head .display .dot { color: inherit; }
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pill:hover {
  background: var(--coral-tint);
  border-color: var(--coral);
  color: var(--coral);
}
.pill.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #ffffff;
}
.pill .count {
  font-size: 10px;
  color: var(--ink-faint);
  border-left: 1px solid var(--line);
  padding-left: 8px;
}
.pill:hover .count {
  color: var(--coral);
  border-color: color-mix(in oklab, var(--line), var(--coral) 32%);
}
.pill.active .count { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }

/*
 * Labs filter Dock — light-themed reproduction of React Bits' "Dock".
 * Items magnify on cursor proximity (driven by the `pages/index.astro`
 * enhancer via `transform: scale`, origin bottom, so tiles grow upward like
 * a macOS dock); the gap is wide enough that peak magnification never
 * overlaps neighbours. Hover label is pure CSS. Surface uses the site's
 * bone/paper palette instead of the upstream dark panel.
 */
.lab-dock {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Fluid gap/padding so the dock shrinks with the stage on phones instead of
     overflowing it (caps at the desktop values above ~500px viewport). */
  gap: clamp(2px, 1vw, 4px);
  width: fit-content;
  /* Centered as its own module beneath the Labs cards grid. Extra top
     margin clears the always-on active tooltip that pokes above the dock;
     bottom margin separates it from the next module. */
  margin: 48px auto 44px;
  padding: clamp(7px, 2vw, 9px) clamp(8px, 2.6vw, 13px);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(21, 20, 15, 0.04);
}
.lab-dock-item {
  position: relative;
  flex: 0 0 auto;
  /* Fluid tile so six tiles fit inside the stage on narrow screens; caps at
     48px on desktop (≥~505px viewport). */
  width: clamp(34px, 9.5vw, 48px);
  height: clamp(34px, 9.5vw, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  transform-origin: bottom center;
  transition: transform 0.14s ease-out, background 0.16s ease, color 0.16s ease,
    border-color 0.16s ease;
  will-change: transform;
}
.lab-dock-item:hover,
.lab-dock-item:focus-visible,
.lab-dock-item.active {
  background: var(--coral-tint);
  border-color: var(--coral);
  color: var(--coral);
  outline: none;
}
/* Selected mode lifts the whole tile (border included) up out of the dock.
   The proximity-magnify enhancer folds this offset into its inline transform
   so the lift survives while hovering — see `enhanceLabDock` in index.astro.
   Selection reads from the lift plus the coral icon/colour alone — no outer
   ring stroke. */
.lab-dock-item.active {
  /* Lift scales down on small screens so the smaller tile doesn't fly far off
     the dock; caps at -20px on desktop. */
  transform: translateY(clamp(-20px, -4vw, -14px));
  /* Selected tile: black→grey gradient with the green (coral) glyph kept from
     the shared hover/active rule above, plus an elevation shadow. Colours are
     existing project tokens (--ink / --ink-soft). */
  background: linear-gradient(180deg, var(--ink-soft) 0%, var(--ink) 100%);
  border-color: transparent;
  box-shadow: 0 14px 24px -10px rgba(38, 38, 38, 0.45);
}
.lab-dock-icon {
  font-size: clamp(15px, 4.2vw, 20px);
  line-height: 1;
}
.lab-dock-icon::before {
  font-family: 'Remix Icon';
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
.lab-dock-item:nth-child(1) .lab-dock-icon::before { content: '\efe4'; } /* pencil-ruler-line — Prototype */
.lab-dock-item:nth-child(2) .lab-dock-icon::before { content: '\f2c6'; } /* window-line — Live Artifact */
.lab-dock-item:nth-child(3) .lab-dock-icon::before { content: '\f158'; } /* slideshow-line — Slides */
.lab-dock-item:nth-child(4) .lab-dock-icon::before { content: '\ee4b'; } /* image-line — 图片 */
.lab-dock-item:nth-child(5) .lab-dock-icon::before { content: '\ed21'; } /* film-line — HyperFrames */
.lab-dock-item:nth-child(6) .lab-dock-icon::before { content: '\f282'; } /* video-line — 视频 */
.lab-dock-label {
  position: absolute;
  /* Gap between the tooltip bubble and the tile's top edge. */
  bottom: calc(100% + 4px);
  left: 50%;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lab-dock-item:hover .lab-dock-label,
.lab-dock-item:focus-visible .lab-dock-label,
.lab-dock-item.active .lab-dock-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* While hovering a different item, hide the pinned active tooltip so the two
   bubbles don't overlap — only the hovered item's label shows. */
.lab-dock:hover .lab-dock-item.active:not(:hover) .lab-dock-label {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}
/* On phones there's no hover to dismiss it, and the pinned bubble on an edge
   tile clips against the stage's `overflow: hidden`. Keep the labels for
   hover/focus only; the line icons read clearly on their own. */
@media (max-width: 640px) {
  .lab-dock-item.active .lab-dock-label {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
}
.labs-meta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 22px;
  margin-bottom: 30px;
}
.labs-meta .ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px dashed var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
}
.labs-meta .meta-text {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 28ch;
}
.labs-meta .meta-text b { display: block; color: var(--ink); }
/*
 * Labs as a Raycast-style "Artifact History" command window — an ivory
 * reframing of a clipboard manager. Top search bar, two-column body
 * (history list + preview/metadata), a floating actions menu overlapping
 * the preview, and a bottom action bar. All surfaces use the site's
 * bone/paper palette; no dark panels.
 */
/* ---------- Labs product-window showcase ----------
 * The OpenDesign deck editor rendered as a static window, sitting on a
 * full-bleed canvas (`heroImage`). The mode Dock floats over the window's
 * lower edge and swaps the deck preview (`.la-slide img`). All chrome below
 * is purely presentational (SSR/no-JS). */
.lab-stage {
  position: relative;
  /* Scaled to 100.8% of the full safe-area width (was 100vw - 280px) — the 96%
     size enlarged by a further 5%. The box stays centered via the symmetric
     `-0.4vw + 141.12px` side insets. Aspect-ratio is locked below, so the image
     scales in step. */
  width: calc(100.8vw - 282.24px);
  margin: 40px 0 0;
  margin-left: calc(50% - 50.4vw + 141.12px);
  border-radius: 0;
  /* Clip the carousel at the 底图 edge: sliding images travel beyond the preview
     card and are only cut off at the painting's edge (the card no longer clips
     them — see `.lab-view { overflow: visible }`). */
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 72px);
  isolation: isolate;
  /* Lock the stage to the 底图's native ratio (2262×1358) so the painting shows in
     full — never stretched, never cropped. Because the box ratio equals the art
     ratio, `cover` fills it exactly with no trim on any edge. */
  aspect-ratio: 2262 / 1358;
  /* The painting lives on ::before so it can carry its own opacity without
     fading the preview card / dock above it. */
  background: transparent;
}
/* 底图 layer at 80% opacity — sits below the artifact (z 2) and dock (z 3). */
.lab-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Image (453KB) is withheld until `.lab-stage` nears the viewport — see
     `precise-lazyload.astro` (`data-precise-bg`) — so this below-fold backdrop
     stops competing with the hero LCP for bandwidth. */
  background: center / cover no-repeat;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}
.lab-stage.precise-bg-in::before {
  background-image: url('/lab-stage-art.webp?v=2');
}
@media (max-width: 880px) {
  /* Two mobile bugs fixed here:
     1) The full-bleed `width: calc(100.8vw - 282.24px)` / negative-margin trick
        made the stage overflow its container on phones (the prior `width: auto`
        override lost the cascade). `max-width: 100%` clamps the used width to the
        container no matter which `width` rule wins, killing the horizontal spill.
     2) The fixed 2262/1358 landscape ratio then leaves the stage too SHORT: the
        artifact card (top: 36px, height scales with width) and the bottom-anchored
        dock have fixed-pixel offsets that stop shrinking, so the dock rode up and
        overlapped the card. A width-tracking min-height keeps the dock below the
        card; the aspect-ratio still governs at wider widths. */
  .lab-stage {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: calc(50vw + 168px);
  }
  /* Phones: enlarge the preview card and widen the dock (the painting `::before`
     底图 is untouched). The bigger card + dock need a little more height, so the
     min-height bump above keeps the dock clear of the card. */
  /* Higher specificity (`.lab-stage .lab-artifact`) so these beat the base
     widths regardless of source order. */
  .lab-stage .lab-artifact { width: 80%; }
  .lab-stage .lab-artifact-video,
  .lab-stage .lab-artifact.is-wide { width: 89%; }
  .lab-stage .lab-dock {
    gap: clamp(4px, 1.3vw, 6px);
    padding: clamp(8px, 2.2vw, 10px) clamp(11px, 2.9vw, 14px);
  }
  .lab-dock-item {
    width: clamp(40px, 11vw, 52px);
    height: clamp(40px, 11vw, 52px);
  }
  .lab-dock-icon { font-size: clamp(18px, 5vw, 23px); }
}
/* Floating artifact window, anchored 36px below the painting's top edge. The
   dock swaps its src and toggles `.is-visible` (see `enhanceLabSwitch`).
   `height: auto` keeps each artifact at its native ratio; the painting frames it
   on the sides and below. Sits below the dock (z-index 3) so tiles stay clickable. */
.lab-artifact {
  position: absolute;
  left: 50%;
  /* Anchored 36px from the stage's top edge (absolute offsets are measured from
     the stage padding box, i.e. its top edge). */
  top: 36px;
  transform: translateX(-50%);
  /* `height: auto` + no object-fit renders the image at exactly its native ratio
     — no clipping, no contain letterbox slivers. Enlarged 10% over the previous
     min(64%, 880px) so the card reads bigger while the painting still frames it. */
  width: 70.4%;
  height: auto;
  /* Lock to the image previews' 1592×1000 ratio so every artifact (stills + the
     16:9 video) shares one box and the same rendered height; object-fit: cover
     fills it (the video trims its sides a touch, stills are already that ratio). */
  aspect-ratio: 1592 / 1000;
  object-fit: cover;
  /* 8px rounded corners + the project's default elevation shadow (--shadow,
     built on the neutral #262626 from the skill palette) so the selected
     tile's preview card reads as a lifted sheet over the painting. */
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index: 2;
}
.lab-artifact.is-visible {
  opacity: 1;
  visibility: visible;
}
/* 16:9 artifacts (the video, and wide stills tagged `.is-wide`) match the stills'
   HEIGHT but leave width unconstrained: they keep their native 16:9 ratio (no
   crop, no letterbox) and run wider than the 1592×1000 image box, extending a
   little past each side (centred via the base transform). Width is tuned so the
   height equals the stills': a still is `width ÷ 1.592` tall, so a 16:9 box of the
   same height needs width × (1.778 / 1.592) ≈ ×1.117 → 70.4%→78.6%, 968→1080px. */
.lab-artifact-video,
.lab-artifact.is-wide {
  aspect-ratio: 16 / 9;
  width: 78.6%;
}
.lab-stage-bg {
  position: absolute;
  top: 0;
  left: 0;
  /* Fixed to the full width, natural height, anchored to the top — no cover
     up-scaling/cropping. Extra height beyond the art shows the stage's own
     dark background; overflow is clipped by .lab-stage. */
  width: 100%;
  height: auto;
  z-index: 0;
}
/* Scrim removed along with the background art — the stage is a flat black fill. */
.lab-stage::after { content: none; }
/* Clean image preview frame (the app-window chrome was removed). The mode
   Dock below swaps `.la-slide-img`'s src in place — see the enhancers in
   `pages/index.astro`. */
.lab-view {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  /* Match the preview images' native ratio (1280×867) so they show at their
     original proportions with no top/bottom crop. */
  aspect-ratio: 1280 / 867;
  margin: 0 auto;
  /* Nudge the preview up within the stage and scale the whole card down 20%. */
  transform: translateY(-90px) scale(0.8);
  border-radius: 16px;
  /* Let sliding images spill out of the card — clipping now happens at the 底图
     edge (`.lab-stage { overflow: hidden }`). The rounded-card look is preserved
     by rounding the images themselves. */
  overflow: visible;
  background: transparent;
}
.lab-view .la-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Round each slide individually so the card keeps its rounded look even though
     `.lab-view` no longer clips (clipping moved to `.lab-stage`). The single
     sliding track (built in `pages/index.astro`) owns the animated layer, so the
     resting images need no `will-change`. */
  border-radius: 16px;
}
/* The 120px safe area is a desktop spec; shrink it on narrow viewports so the
   preview + dock don't get squeezed off-canvas. */
@media (max-width: 1024px) {
  .lab-stage { padding: clamp(24px, 9vw, 120px); }
}
.lab-app {
  position: relative;
  z-index: 2;
  contain: layout paint;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  transform: translateY(-24px);
  background: var(--bone);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(20, 20, 20, 0.28), 0 8px 24px rgba(20, 20, 20, 0.14);
  overflow: hidden;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
}
.lab-app svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* window tab strip */
.la-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.la-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.la-tab.is-active {
  background: var(--bone);
  border: 1px solid var(--line);
  color: var(--ink);
}
.la-tab svg { width: 14px; height: 14px; }
.la-x { width: 12px; height: 12px; color: var(--ink-faint); margin-left: 2px; }
/* document toolbar */
.la-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.la-back {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.la-back svg { width: 16px; height: 16px; }
.la-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.la-pill {
  font-size: 11.5px;
  color: var(--ink-mute);
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--paper-dark);
}
.la-theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.la-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.la-bar-gap { flex: 1 1 auto; }
.la-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bone);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.la-act svg { width: 14px; height: 14px; }
.la-act.primary {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.la-cv {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-faint);
  margin-left: 2px;
}
.la-cv-light { border-top-color: rgba(255, 255, 255, 0.85); }
/* body: chat transcript + deck preview */
.la-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
.la-chat {
  position: relative;
  border-right: 1px solid var(--line-soft);
  padding: 16px 14px 66px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.la-chat-q {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 2px;
}
.la-chat-p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.la-chat code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--paper-dark);
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--ink);
}
.la-mono { font-family: var(--mono); color: var(--ink-mute); }
.la-run {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.la-run-chev { margin-left: auto; color: var(--ink-faint); }
.la-bash {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.la-bash-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.la-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--paper-dark);
  color: var(--ink-mute);
}
.la-tag-ok { color: #34785c; }
.la-bash-cmd {
  display: block;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--bone);
  background: #1f1f1f;
}
.la-file {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 11px;
}
.la-file-head {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.la-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
}
.la-file-row svg { width: 15px; height: 15px; color: var(--ink-mute); flex: 0 0 auto; }
.la-file-row b { font-weight: 600; }
.la-file-size { color: var(--ink-faint); font-size: 11px; font-family: var(--mono); }
.la-file-btn {
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
}
.la-file-btn:nth-of-type(1) { margin-left: auto; }
.la-done {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.la-done-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34785c;
}
.la-composer {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bone);
  font-size: 12.5px;
  color: var(--ink-faint);
}
/* right deck preview */
.la-doc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.la-doc-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.la-doc-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-mute);
  padding: 5px 10px;
  border-radius: 8px;
}
.la-doc-tab svg { width: 14px; height: 14px; }
.la-doc-tab.is-active {
  background: var(--paper-dark);
  color: var(--ink);
}
.la-doc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-soft);
}
.la-seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.la-page { color: var(--ink-mute); font-family: var(--mono); font-size: 11.5px; }
.la-tool { color: var(--ink-mute); padding: 5px 7px; }
.la-slide {
  position: relative;
  flex: 1 1 auto;
  margin: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  min-height: 300px;
}
.la-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.la-slide-page {
  position: absolute;
  right: 14px; bottom: 12px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
}
/* mode Dock floats over the window's lower edge */
.lab-stage .lab-dock {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vw, 36px);
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
}
@media (max-width: 820px) {
  .lab-app { aspect-ratio: auto; transform: none; }
  .la-bar { flex-wrap: wrap; }
  .la-body { grid-template-columns: 1fr; }
  .la-chat { display: none; }
  .la-act:not(.primary) { display: none; }
}
.labs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  border-top: 1px dashed var(--line);
  padding-top: 22px;
}
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress span {
  width: 26px; height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.progress span.on { background: var(--coral); }

/* ---------- METHOD ---------- */
/* Method section safe area: fixed 120px inset on both sides (per design spec),
   independent of the shared container's centered max-width. Falls back to a
   tighter gutter on narrower viewports so the heading isn't crushed. */
.method > .container {
  max-width: none;
  /* Module safe area: 238px left/right (matches the .work module convention). */
  padding-inline: 238px;
}
@media (max-width: 1180px) {
  .method > .container { padding-inline: 64px; }
}
.method-head {
  /* Stacked top→bottom and centred: title on top, the lead line below, both
     horizontally centred with centre-aligned text. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  justify-items: center;
  text-align: center;
  margin-bottom: 80px;
}
.method-head h2 { font-size: clamp(32px, 3vw, 42px); }
.method-head .right {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding-top: 0;
}
.method-head .plus {
  color: var(--coral);
  font-size: 24px;
  line-height: 1;
  font-family: var(--sans);
}
.method-head .right p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  /* Span the full width — no narrow column cap; grow to fill the row. */
  flex: 1;
  max-width: none;
  line-height: 1.55;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  position: relative;
}
.method-grid::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 50px;
  right: 50px;
  height: 1px;
  background: var(--line-soft);
}
.method-grid-images-only::before { display: none; }
.method-step { position: relative; }
.method-step .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 78px;
  color: var(--coral);
  line-height: 0.85;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  background: var(--paper);
  display: inline-block;
  padding-right: 12px;
  position: relative;
  z-index: 1;
}
.method-step h4 {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.022em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 18px;
}
.method-step h4 .arrow-r {
  color: var(--ink-faint);
  font-size: 22px;
  line-height: 1;
}
.method-step:last-child h4 .arrow-r { display: none; }
.method-step p {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 24ch;
}
.method-step .img {
  aspect-ratio: 1 / 1;
  background: var(--bone);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.method-step .img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== FallingText (React Bits / matter-js) — Method section ===== */
.falling-text {
  position: relative;
  width: 100%;
  height: clamp(360px, 38vw, 460px);
  margin-top: 40px;
  overflow: hidden;
  cursor: grab;
}
.falling-text:active { cursor: grabbing; }
.falling-text-target {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 1.4em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.falling-word {
  display: inline-block;
  margin: 0 9px;
  user-select: none;
  white-space: nowrap;
}
.falling-word.is-highlight { color: var(--coral); font-weight: 700; }
/* Icon chips — agent logos drop as rounded app-icon tiles instead of words. */
.falling-word.falling-chip {
  width: 60px;
  height: 60px;
  margin: 8px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(21, 20, 15, 0.12), inset 0 0 0 1px rgba(21, 20, 15, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
}
.falling-chip img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.falling-text-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Banner that fades in at the centre the moment the icons start dropping
   (the `is-visible` class is toggled in `pages/index.astro`). It is freely
   draggable with the mouse: `--drag-x` / `--drag-y` carry the pointer offset
   applied on top of the centring translate. */
.falling-text-reveal {
  position: absolute;
  /* Default vertical position within the playground. */
  top: 32%;
  left: 50%;
  width: min(86%, 760px);
  height: auto;
  z-index: 3;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))) scale(0.92);
  transition:
    opacity 520ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 520ms cubic-bezier(0.23, 1, 0.32, 1);
}
.falling-text-reveal.is-visible {
  opacity: 1;
  transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))) scale(1);
}
/* While dragging, drop the transform transition so the banner tracks the
   cursor 1:1 instead of easing behind it. */
.falling-text-reveal.is-dragging {
  cursor: grabbing;
  transition: opacity 520ms cubic-bezier(0.23, 1, 0.32, 1);
}
.method-foot {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--line);
  padding-top: 24px;
}
.method-foot .left,
.method-foot .right {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.method-foot .left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.method-foot .left .ring {
  width: 20px; height: 20px;
  border: 1px dashed var(--ink-faint);
  border-radius: 50%;
}
.method-foot .right b { color: var(--ink); }

/* ---------- WORK ---------- */
.work {
  /* Solid ink fill (component-scoped, framed by the rounded card). */
  background: var(--ink);
  color: var(--paper);
  border-radius: 28px;
  /* Uniform inner safe area: all four sides 40px, so the cards sit an equal
     distance from every edge of the black panel. The panel itself is inset
     238px left/right (canvas-coloured page margin, NOT black) so the cards keep
     the same size/position as before — the old 238px lived in the padding; it
     now lives in the margin, leaving a uniform 40px black border. */
  margin: 0 238px;
  overflow: hidden;
  position: relative;
  padding: 40px;
}
@media (max-width: 1024px) {
  .work { margin: 0 clamp(20px, 9vw, 120px); padding: clamp(20px, 4vw, 40px); }
}
.work-rule {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(247, 241, 222, 0.16);
  padding-top: 16px;
  margin-bottom: 60px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 241, 222, 0.55);
}
.work-rule .roman { color: var(--coral); font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0.04em; text-transform: none; }
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.work .label { color: var(--coral); }
.work .label::before { background: var(--coral); }
.work-copy h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.024em;
  margin: 28px 0 36px;
  color: var(--paper);
}
.work-copy h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.work-copy h2 .dot { color: var(--coral); }
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
  padding-bottom: 12px;
  width: fit-content;
}
.work-link::after { content: '↗'; color: var(--coral); }
.work-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  padding: 32px 30px;
  position: relative;
  transform: rotate(-1.2deg);
  text-decoration: none;
  display: block;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.work-card:hover {
  transform: rotate(-1.2deg) translateY(-4px);
  box-shadow: var(--shadow);
}
.work-card.alt {
  transform: rotate(2.4deg) translateY(20px);
  padding: 28px 26px;
}
.work-card.alt:hover {
  transform: rotate(2.4deg) translateY(16px);
  box-shadow: var(--shadow);
}
.work-card .label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.work-card .small-label {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--coral);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.work-card .index {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.work-card h3 {
  font-family: var(--sans);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.work-card p {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 28ch;
}
.work-card .img {
  aspect-ratio: 4 / 3;
  background: var(--bone);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}
.work-card .img img { width: 100%; height: 100%; object-fit: cover; }
.work-card .meta-row {
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.work-card .year { color: var(--coral); font-weight: 600; }
.work-stats-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Align with the black .work panel below (which is inset margin: 0 238px). */
  margin: 0 238px 28px;
}
@media (max-width: 1024px) {
  .work-stats-title { margin: 0 clamp(20px, 9vw, 120px) 24px; }
}
.work-stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.work-stat-card {
  min-height: 208px;
  padding: 28px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 28px 60px -42px rgba(0, 0, 0, 0.72);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.work-stat-card:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-4px);
  box-shadow: 0 36px 76px -42px rgba(0, 0, 0, 0.86);
}
.work-stat-card h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.028em;
}
.work-stat-card h3 span,
.work-stat-card h3 em {
  display: block;
}
.work-stat-card h3 span {
  color: var(--coral);
  margin-bottom: 10px;
  font-style: normal;
}
.work-stat-card h3 em {
  color: var(--ink);
  font-style: normal;
}
.work-stat-card-cta {
  background: var(--coral);
}
.work-stat-card-cta h3 span,
.work-stat-card-cta h3 em {
  color: var(--ink);
}
/* Image cards: the artwork fills the whole card, no inner padding. The
   `.work-stats-grid` prefix keeps these winning over the responsive
   `.work-stat-card` padding/min-height overrides further down the file. */
.work-stats-grid .work-img-card {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1400 / 948;
  align-items: stretch;
  /* Dark base instead of the near-white --paper: the card is rounded AND
     rotated, so its background anti-aliases into a ~1px fringe just outside
     the image at the bottom/corners. A near-white fringe reads as a white
     line on the dark panel; a dark base makes that edge pixel invisible (and
     is the better fallback if the artwork ever fails to load). */
  background: #141414;
}
/* Absolutely fill the card so the artwork always covers the full box. A
   plain in-flow `height: 100%` resolves against the aspect-ratio height, not
   the grid-stretched card height, leaving a ~8px sliver of the near-white
   card background along the bottom edge. inset:0 pins it to the padding box. */
.work-img-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Stat data overlaid on the painterly image cards. The data used to be
   baked into card-N.png; now the cards ship as plain artwork, so the
   number + label live in the DOM on top of a bottom scrim that keeps them
   legible over any crop of the painting. */
.work-img-card .work-stat-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: clamp(18px, 1.9vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.028em;
  background: linear-gradient(
    180deg,
    rgba(15, 15, 15, 0) 34%,
    rgba(15, 15, 15, 0.76) 100%
  );
}
.work-img-card .work-stat-overlay span {
  display: block;
  font-size: clamp(34px, 4vw, 58px);
  color: var(--coral);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.work-img-card .work-stat-overlay em {
  display: block;
  font-style: normal;
  font-size: clamp(18px, 1.9vw, 26px);
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.62);
}
/* Out-link arrow pinned to the top-right of the GitHub-stars card (moved
   here from the capability step cards). Decorative — the whole card is the
   link — so it's aria-hidden and ignores pointer events. */
.work-img-card .work-card-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(21, 20, 15, 0.12);
  color: var(--ink);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  pointer-events: none;
}
.work-img-card:hover .work-card-arrow {
  background: var(--coral);
  border-color: var(--coral);
  color: #ffffff;
}
.work-img-card .work-card-arrow svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.work-img-card .work-card-arrow .ri-glyph { font-size: 15px; }

/* CTA card ("Star us"): no number, so promote the label to headline size. */
.work-img-card.work-stat-card-cta .work-stat-overlay em {
  font-size: clamp(28px, 3vw, 46px);
  color: var(--coral);
}
.work-arrows {
  position: absolute;
  right: 64px;
  bottom: 64px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.work-arrows .nav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(247, 241, 222, 0.2);
  background: transparent;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.work-arrows .nav-btn.active { background: var(--coral); border-color: var(--coral); }

/* ---------- TESTIMONIAL / COLLABORATORS ---------- */
/* Module safe area: inset the content (copy + globe) 120px on all four sides.
   Vertical overrides the generic `section { padding: 130px 0 }`; horizontal
   overrides `.container { padding: 0 64px }`. */
.testimonial { padding: 120px 0; }
/* Page safe area: 238px left/right, matching the work / faq / cta / newsletter /
   footer modules so every block shares the same edge inset. Below 1024px the
   inset eases down via clamp so the two-column copy/globe layout keeps room. */
.testimonial .container { width: auto; max-width: none; padding: 0 238px; margin-inline: auto; }
@media (max-width: 1024px) {
  .testimonial { padding: clamp(40px, 12vw, 120px) 0; }
  .testimonial .container { padding: 0 clamp(20px, 9vw, 238px); }
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.testimonial-grid.with-globe {
  /* Copy track sizes to its (nowrap) content so the headline never gets squeezed
     narrower than its two lines and spill under the globe; the globe takes the
     remaining space (and yields, min 320px) instead of overlapping the text. */
  grid-template-columns: auto minmax(320px, 1fr);
  gap: clamp(42px, 7vw, 96px);
}
.testimonial-grid.with-globe .testimonial-copy {
  max-width: 720px;
}
/* The 238px safe area plus the globe's 320px minimum leaves the headline column
   too tight below ~1400px (the copy gets squeezed and the headline wraps to 4
   lines that crowd the globe). Collapse to a single column there — headline
   full-width on top, globe centred below — so the two-column split only renders
   on wide displays (≥1400px) where the copy column keeps room to breathe. */
@media (max-width: 1400px) {
  .testimonial-grid.with-globe {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .testimonial-grid.with-globe .testimonial-copy { max-width: none; }
}
.testimonial-copy h2 {
  font-family: var(--sans);
  /* Fluid within the 238px safe area: caps at 42px on wide desktop, scales down
     as the two-column copy track narrows so the headline fits without the
     "OpenDesign" line wrapping awkwardly on small/medium screens. */
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin-bottom: 36px;
  /* Keep each of the two lines (split by the <br>) on a single line at every
     breakpoint — no extra wrapping. The copy grid track is content-sized so this
     never overflows into / under the globe. */
  white-space: nowrap;
}
.testimonial-copy h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
/* "正在一起构建 OpenDesign" stays on its own single line at every breakpoint
   (the content-sized copy track guarantees room, so it no longer overflows). */
.testimonial-copy h2 .testi-post { white-space: nowrap; }
.author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.author .avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--ink);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
}
.author p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.author p span {
  display: block;
  color: var(--ink-mute);
  font-weight: 400;
}
.divider {
  border-top: 1px solid var(--line);
  margin: 60px 0 32px;
}
.partners-text {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 26px;
  max-width: 38ch;
}
.partners {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  align-items: end;
}
.partner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 220ms ease;
}
.partner:hover { transform: translateY(-2px); }
.partner:hover .glyph { color: var(--coral); }
.partner:hover span { color: var(--coral); }
.partner .glyph {
  height: 32px;
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: color 220ms ease;
}
.partner .glyph svg { height: 100%; width: auto; max-width: 90px; }
.partner span {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-weight: 600;
  transition: color 220ms ease;
}
.partner small {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.read-more {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 6px;
}
.read-more::after { content: '→'; color: var(--coral); }
.testimonial-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
}
.testimonial-art img { width: 100%; height: 100%; object-fit: contain; }
.testimonial-globe {
  position: relative;
  min-height: clamp(340px, 42vw, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* visible so the orbiting avatar ring can sit on the globe's edge without
     being clipped by the column box. */
  overflow: visible;
  isolation: isolate;
}

/* ---- Contributor orbit ----------------------------------------------------
 * A ring of contributor avatars revolving around the globe. The ring square
 * matches the canvas; each `.orbit-slot` fills it and is rotated to its angle
 * so its pinned avatar lands on the circle (radius = ring/2, fully responsive,
 * no JS sizing). The whole ring spins; avatars counter-spin to stay upright.
 * No connecting spokes — just the photos. */
.contributor-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Avatar ring. Allowed to spill ~8% past the grid column (the parent
     `.testimonial-globe` is `overflow: visible`) so the circle isn't capped at
     the column width. */
  width: min(108%, 680px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  /* Right-to-left fade — this IS the "half of the orbit recedes behind the
     globe" depth effect (the ring is a flat 2D circle, so the occlusion is
     faked here, not via z-order). Avatars are fully visible on the left and
     dissolve toward the right. The transparent stop is pushed out to 92% (was
     82%) so the right-edge avatars fade smoothly instead of looking hard-cut.
     Masks only the avatar layer, not the globe canvas (a separate sibling). */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.18) 78%,
    transparent 92%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.18) 78%,
    transparent 92%
  );
}
.contributor-orbit .orbit-ring {
  position: absolute;
  /* Inset the orbit circle so avatars sit INSIDE the masked box and never
     get hard-clipped at its edges (the mask clips to the box). The inset is
     a touch larger than the avatar's radius. */
  inset: clamp(28px, 6%, 38px);
  animation: contributor-orbit-spin 38s linear infinite;
}
.orbit-slot {
  position: absolute;
  inset: 0;
  transform: rotate(var(--angle, 0deg));
}
.orbit-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(34px, 6.4vw, 48px);
  height: clamp(34px, 6.4vw, 48px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 0 8px 20px -8px rgba(21, 20, 15, 0.45),
    inset 0 0 0 1px rgba(21, 20, 15, 0.06);
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg)));
  pointer-events: auto;
  transition: box-shadow 0.2s ease;
}
.orbit-avatar:hover {
  box-shadow: 0 10px 24px -8px rgba(21, 20, 15, 0.5),
    inset 0 0 0 1px var(--coral);
}
.orbit-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cancel the ring spin so the photo stays upright as it orbits. */
  animation: contributor-orbit-spin-rev 38s linear infinite;
}
/* Initial-letter fallback when an avatar image can't be fetched. */
.orbit-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(14px, 2.6vw, 19px);
  color: var(--ink-mute);
  background: var(--paper-dark);
  /* keep the letter upright as the ring spins. */
  animation: contributor-orbit-spin-rev 38s linear infinite;
}
@keyframes contributor-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes contributor-orbit-spin-rev {
  to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contributor-orbit .orbit-ring,
  .orbit-avatar img { animation: none; }
}
.testimonial-globe-canvas {
  /* Absolutely centred with the exact same mechanism as `.contributor-orbit`
     so the globe and the avatar ring always share one center. Kept a touch
     smaller than the orbit so the ring clears the globe edge. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(82%, 500px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}
.testimonial-globe-meta {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.testimonial-globe-meta span:first-child {
  color: var(--coral);
}
.testimonial-globe-meta span + span::before {
  content: '·';
  margin-right: 10px;
  color: var(--coral);
}

/* ---------- CTA ---------- */
.cta-grid {
  display: grid;
  /* Art column removed — copy spans the full width. */
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
}
.cta h2 {
  font-size: 38px;
  margin: 18px 0 14px;
}
.cta .lead { margin-bottom: 12px; max-width: 36ch; font-size: 16px; }
.cta-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.email-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.email-pill .arrow-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.cta-foot {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cta-foot .stamp { color: var(--coral); font-weight: 600; }
.cta-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin-left: auto;
}
.cta-art img { width: 100%; height: 100%; object-fit: contain; }
.cta-art .index {
  position: absolute;
  right: 8px;
  top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-faint);
}
.cta-art .ribbon {
  position: absolute;
  left: -32px;
  top: 50%;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
/* Full-width painterly CTA: the artwork is the backdrop, the heading +
   lead + buttons sit on top. A top-anchored light wash keeps the dark copy
   legible over the busy painting while the dancers stay visible lower down. */
/* Page safe area: 238px left/right (matches the faq / testimonial / work
   modules). The content column sits flush at 238px, so the inner padding below
   is vertical-only. */
.cta .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  .cta .container { padding: 0 clamp(20px, 9vw, 120px); }
}
.cta-dance {
  position: relative;
  /* Match the condensed nav capsule width (1080px, centered) so the mural
     lines up with the navbar. */
  width: 100%;
  max-width: 1080px;
  margin: clamp(28px, 4vw, 56px) auto 0;
  border-radius: 24px;
  overflow: hidden;
  /* Copy on top, product window below IN FLOW — so the window can never overlap
     the buttons regardless of how many lines the heading wraps to, and the gap
     between them stays responsive (set on the window's margin-top). The block
     height follows its content instead of a locked aspect-ratio. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Mural background image for the CTA block, behind the copy. Because the box
   ratio equals the image ratio, `cover` paints the whole image with no crop. */
.cta-dance::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Image (335KB) is withheld until `.cta-dance` nears the viewport — see
     `precise-lazyload.astro` (`data-precise-bg`) — so this far-below-fold CTA
     mural stops competing with the hero LCP for bandwidth. */
  background: center / cover no-repeat;
  z-index: 0;
}
.cta-dance.precise-bg-in::before {
  background-image: url('/cta-bg.webp?v=3');
}
/* OpenDesign Home window floating over the mural, centered in the lower half;
   its bottom is clipped by the block's overflow:hidden (matching the comp). */
.cta-window {
  position: relative;
  z-index: 1;
  /* The <img> is first in the DOM but must render BELOW the copy — order:1
     places it after the (order:0) inner in the flex column. */
  order: 1;
  /* Responsive gap from the buttons above — scales with the block width and,
     because the window is in flow, the buttons and window never overlap. */
  margin-top: clamp(20px, 3.5vw, 52px);
  width: 82.4%;
  /* Peek effect: show the TOP of the app screenshot and crop the bottom, with
     the window flush to the block's bottom edge so it bleeds off (the mural
     stays visible to its left/right). A fixed aspect-ratio (instead of a vw
     height) makes the crop land at the SAME point — just below the Audio row —
     at every desktop width; the height tracks the window width automatically. */
  height: auto;
  aspect-ratio: 2.47;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 36px 70px -30px rgba(20, 20, 20, 0.5);
  pointer-events: none;
}
/* The product window rises up from below when the CTA scrolls into view. */
.reveal-ready .cta-window[data-reveal]:not([data-revealed='true']) {
  translate: 0 96px;
}
.cta-dance-inner {
  position: relative;
  z-index: 2;
  /* No bottom padding — the gap to the window is the window's margin-top. */
  padding: clamp(14px, 2.4vw, 32px) clamp(28px, 5vw, 64px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-dance-inner .display {
  margin-top: 0;
}
/* Copy sits over the mural background — render it all white for legibility. */
.cta-dance-inner .display,
.cta-dance-inner .lead {
  color: #ffffff;
}
.cta-dance-inner .lead {
  font-size: 19px;
  font-weight: 700;
}
/* Ghost button (Star on GitHub) over the mural — white text + light border,
   matching the hero's ghost button but legible on the painting. The primary
   button keeps its black fill / white text from .btn-primary. */
.cta-dance-inner .btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}
.cta-dance-inner .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- OFFICIAL SOURCE STRIP ----------
 *
 * Slim attestation band that sits between the hero/wire and About.
 * Reinforces the canonical surfaces — official site, GitHub repo,
 * releases, download, docs, Discord — for both Google entity merge
 * and human verification. Minimal chrome on purpose.
 */
.official-strip {
  padding: 38px 0 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.official-strip-inner {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 28px;
  align-items: center;
}
.official-strip-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.official-strip-label .ix {
  color: var(--coral);
  margin-left: 6px;
}
.official-strip-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 0;
  margin: 0;
}
.official-strip-list li {
  display: flex;
  min-width: 0;
}
.official-strip-list a {
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  min-width: 0;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.official-strip-list a:hover {
  border-bottom-color: var(--coral);
  color: var(--coral);
}
.official-strip-list .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.official-strip-list .value {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 980px) {
  .official-strip-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .official-strip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .official-strip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
}

/* ---------- NEWSLETTER ---------- */
/* Subscribe band between the CTA window and the FAQ. Same 238px safe area as
   the faq / testimonial / work modules. */
.newsletter {
  padding: 96px 0;
}
.newsletter .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  .newsletter .container { padding: 0 clamp(20px, 9vw, 120px); }
}
.newsletter-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.34fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}
.newsletter-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 16px;
  /* CJK titles ("OpenDesign 订阅") must wrap at the space, never inside the
     CJK word; balance keeps the two lines visually even. */
  word-break: keep-all;
  text-wrap: balance;
}
.newsletter-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-mute);
  max-width: 44ch;
  margin: 0;
}
.newsletter-form {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 22px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--ink);
  border-radius: 6px;
}
.newsletter-input::placeholder { color: var(--ink-faint); }
.newsletter-input:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: -1px;
}
.newsletter-submit {
  flex: 0 0 auto;
  padding: 0 34px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.newsletter-submit:hover { transform: translateY(-1px); background: #434343; }
/* Post-submit thanks line swapped in by `enhanceNewsletter`. */
.newsletter-done {
  align-self: center;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
.newsletter-error {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--coral, #ed6f5c);
}
@media (max-width: 720px) {
  .newsletter { padding: 72px 0; }
  .newsletter-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .newsletter-form { flex-wrap: wrap; }
  .newsletter-submit { padding: 16px 34px; }
}

/* ---------- FAQ ---------- */
/* Page safe area: 238px left/right (matches the testimonial / work modules). */
.faq .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  .faq .container { padding: 0 clamp(20px, 9vw, 120px); }
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.34fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}
.faq-head {
  max-width: 520px;
  margin: 0;
  position: sticky;
  top: 120px;
}
.faq-head .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-block;
  margin-bottom: 18px;
}
.faq-head .display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.faq-head .display em {
  font-style: italic;
  font-weight: 600;
  color: var(--coral);
}
.faq-head .display .dot { color: var(--coral); }
/* zh FAQ heading ("常见问题") is a short label, not the long editorial sentence
   the other locales use — pin it to 38px instead of the large display clamp. */
.faq-head .display.faq-title-zh { font-size: 38px; }

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item details {
  padding: 0;
}
.faq-item summary {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.faq-q {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}
.faq-toggle {
  justify-self: end;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 16px;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.faq-item details[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faq-more {
  margin-top: 10px;
  font-size: 14px;
}
.faq-more a {
  color: var(--coral, var(--accent, inherit));
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.faq-more a:hover { border-bottom-color: currentColor; }
.faq-a {
  grid-column: 2 / 3;
  margin: 0 0 16px;
  padding-left: 80px;
  max-width: 64ch;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-mute);
}

@media (max-width: 720px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .faq-head {
    position: static;
    max-width: none;
  }
  .faq-head .display {
    font-size: clamp(34px, 12vw, 52px);
  }
  .faq-item summary {
    grid-template-columns: 36px 1fr 28px;
    gap: 14px;
  }
  .faq-a {
    padding-left: 50px;
  }
}

/* ---------- FOOTER ---------- */
footer {
  padding: 60px 0 30px;
  margin-top: 60px;
}
/* Footer fills the page safe area (238px left/right, matching the testimonial /
   work / faq modules) instead of the centered 1360px container. */
footer .container {
  max-width: none;
  padding: 0 238px;
}
@media (max-width: 1024px) {
  footer .container { padding: 0 clamp(20px, 9vw, 238px); }
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  /* Spread the columns edge-to-edge across the safe area. */
  justify-content: space-between;
  gap: 40px 80px;
  margin-bottom: 60px;
}
.foot-brand .brand { margin-bottom: 18px; }
.foot-brand p {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 38ch;
}
.foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}
.foot-cta:hover {
  transform: translateY(-1px);
  background: var(--ink-soft);
}
.foot-cta::after {
  content: '↓';
  color: var(--mustard);
  font-size: 12px;
}
.foot-cta .meta {
  color: rgba(239, 231, 210, 0.55);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 4px;
}
.foot-brand p .inline-link,
.inline-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, border-color 160ms ease;
}
.inline-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.method-repo-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.method-repo-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.library-link {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.library-link:hover { border-bottom-color: var(--coral); }
.foot-col h5 {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 800;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 18px; }
.foot-col a {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot-col a:hover { color: var(--coral); }
.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot-bottom .right { display: inline-flex; gap: 24px; align-items: center; }
.foot-bottom .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.foot-mega {
  margin-top: 60px;
  padding-top: 0;
  padding-bottom: 12px;
  overflow-x: hidden;
  overflow-y: visible;
}
.foot-mega .word {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(70px, 12vw, 184px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
  margin-top: 30px;
  padding-bottom: 0.18em;
}
.foot-mega .word em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
}

/* Shared compact footer used by sub-pages and mirrored on the homepage. */

.sub-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 60px 0 32px;
  /* No extra top margin (kept in sync with sub-pages.css): the border-top and
     the preceding content's own bottom spacing separate the footer; the old
     96px was off the skill scale and left a large hole above the footer. */
  margin-top: 0;
}
.sub-footer .sub-footer-inner {
  max-width: none;
  padding-inline: 238px;
}
.sub-footer-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 36px;
  align-items: start;
}
/* A grid cell that stacks two short nav sections vertically so the sub-page
   footer's eight sections fit the 7-track grid without a section orphaning
   onto a second row (used for Community + Company in site-footer.astro). */
.sub-footer-col-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sub-footer-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
  font-weight: 500;
}
/* Column headers that double as links (Solution / Agent / Plugins /
   Compare) keep the eyebrow styling but become clickable. */
.sub-footer-col h5 a {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease;
}
.sub-footer-col h5 a:hover { color: var(--coral); }
.sub-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sub-footer-col a {
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  transition: color 0.16s ease;
}
.sub-footer-col a:hover { color: var(--coral); }

/* ---------- footer bottom bar ----------
 *
 * Legal sign-off + social row under the link columns. One class contract
 * shared by `site-footer.astro` (sub-pages, scoped style) and the homepage
 * footer in `page.tsx` (these global rules).
 */
.foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line, #d9d9d9);
}
.foot-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-mute, #8c8c8c);
}
.foot-bar-left a {
  color: var(--ink-soft, #595959);
  text-decoration: none;
}
.foot-bar-left a:hover { text-decoration: underline; }
.foot-dot { opacity: 0.5; }
.foot-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot-social a {
  color: var(--ink-mute, #8c8c8c);
  display: inline-flex;
}
.foot-social a:hover { color: var(--ink, #262626); }
.foot-locale {
  /* Right-aligned next to the social icons (pushes off the legal text). */
  margin-left: auto;
  margin-right: 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft, #595959);
}
.foot-locale .foot-locale-trigger {
  gap: 7px;
  padding: 4px 0;
  border-bottom: 0;
  color: var(--ink-soft, #595959);
}
.foot-locale .locale-trigger-icon { color: var(--ink-mute, #8c8c8c); }
.foot-locale .locale-trigger-icon::before { font-size: 16px; }
.foot-locale-label { font-weight: 500; }
.foot-locale .foot-locale-trigger:hover,
.foot-locale[open] > .foot-locale-trigger,
.foot-locale .foot-locale-trigger:hover .locale-trigger-icon,
.foot-locale[open] > .foot-locale-trigger .locale-trigger-icon {
  color: var(--ink, #262626);
}
/* Opens upward: the switcher sits at the bottom of the page. */
.foot-locale .locale-menu {
  top: auto;
  bottom: calc(100% + 10px);
  right: 0;
  left: auto;
  animation: none;
}
.foot-locale .locale-menu::before {
  top: auto;
  bottom: -12px;
}

/* Tablet: 7 columns get cramped — drop to a 4-wide grid. */
@media (max-width: 1080px) {
  .sub-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- footer masthead ----------
 *
 * Masthead sign-off under the footer link columns: a container-filling
 * two-tone "OpenDesign." wordmark. One class contract shared by
 * `site-footer.astro` and the homepage footer in `page.tsx`.
 */
.foot-masthead {
  margin-top: 56px;
}
.foot-masthead-wordmark {
  margin: 0;
  font-weight: 800;
  /* Fills the 964px column at the 1440px design width and degrades fluidly.
     The lower bound follows the viewport (10.4vw) rather than a fixed 52px
     floor: "OpenDesign." is ~5.75em wide here, so the old 52px floor rendered
     ~299px and overflowed the padded mobile footer box (100vw - 48px ≈ 272px on
     a 320px phone), where the page's global overflow-x:hidden clipped it.
     10.4vw always satisfies 10.4vw·5.75 ≤ 100vw-48, so the sign-off fits at
     every width (≈80px of headroom at 320px). */
  font-size: clamp(26px, 10.4vw, 158px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--ink);
  /* Desktop keeps the single editorial line; the narrow-breakpoint rule below
     relaxes this to a no-clip wrap as a safety net. */
  white-space: nowrap;
  /* Centered: once the font caps at 158px the glyphs stop filling the
     full-width footer block (gap grows to ~535px at 1920), reading as
     left-aligned. Center them so the wordmark stays balanced at any width. */
  text-align: center;
}
.foot-masthead-accent { color: var(--coral); }
.foot-masthead-period { color: var(--ink); }

@media (max-width: 720px) {
  .sub-footer .sub-footer-inner { padding-inline: 24px; }
  /* Each section spans the full width and lays its links out horizontally
     (wrapping) instead of a tall single-file column — the footer reads as
     compact horizontal rows rather than long vertical stacks. */
  .sub-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .sub-footer-col ul { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
  .sub-footer { padding: 40px 0 24px; }
  /* Clear the page-bottom GradualBlur band (4rem) so the wordmark
     reads crisp at final scroll on phones. */
  .foot-masthead { margin-top: 40px; padding-bottom: 48px; }
  /* No-clip safety net on phones: 10.4vw already fits the box with ~80px
     headroom at 320px, but if a font/locale ever renders the wordmark wider
     than the box, wrap to a second line rather than clip under
     overflow-x:hidden. */
  .foot-masthead-wordmark { white-space: normal; }
}

/* ---------- scroll-reveal motion ----------
 *
 * Content is visible by default. Once the homepage observer is successfully
 * bound, it adds `.reveal-ready` to opt unrevealed elements into the hidden
 * start state. The observer then sets `data-revealed='true'` on viewport entry.
 * If JavaScript is disabled or reveal setup fails, the class is never added and
 * the complete page remains visible.
 *
 * Uses `translate` / `scale` longhand properties (not `transform`) so
 * that elements like `.work-card` keep their static `transform: rotate()`
 * intact while still translating in.
 */
[data-reveal] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    scale 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: auto;
}
.reveal-ready [data-reveal]:not([data-revealed='true']) {
  opacity: 0;
  translate: 0 28px;
  will-change: opacity, translate, scale;
}
.reveal-ready [data-reveal='left']:not([data-revealed='true']) { translate: -36px 0; }
.reveal-ready [data-reveal='right']:not([data-revealed='true']) { translate: 36px 0; }
.reveal-ready [data-reveal='scale']:not([data-revealed='true']) { translate: 0 0; scale: 0.96; }
.reveal-ready [data-reveal='rise-lg']:not([data-revealed='true']) { translate: 0 64px; scale: 0.985; }
[data-reveal][data-revealed='true'] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  will-change: auto;
}

/* stagger primitives — set --reveal-delay on grid children so siblings
 * appear in sequence rather than all at once. */
.cards > .card[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.cards > .card[data-reveal]:nth-child(2) { --reveal-delay: 90ms; }
.cards > .card[data-reveal]:nth-child(3) { --reveal-delay: 180ms; }
.cards > .card[data-reveal]:nth-child(4) { --reveal-delay: 270ms; }
.cards > .card[data-reveal]:nth-child(5) { --reveal-delay: 360ms; }

.method-grid > .method-step[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.method-grid > .method-step[data-reveal]:nth-child(2) { --reveal-delay: 110ms; }
.method-grid > .method-step[data-reveal]:nth-child(3) { --reveal-delay: 220ms; }
.method-grid > .method-step[data-reveal]:nth-child(4) { --reveal-delay: 330ms; }

.partners > .partner[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.partners > .partner[data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
.partners > .partner[data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
.partners > .partner[data-reveal]:nth-child(4) { --reveal-delay: 210ms; }
.partners > .partner[data-reveal]:nth-child(5) { --reveal-delay: 280ms; }
.partners > .partner[data-reveal]:nth-child(6) { --reveal-delay: 350ms; }

/* hero copy — let label, headline, lead, actions, stats arrive in sequence
 * so the headline isn't waiting on a single block-level reveal. */
.hero-copy > [data-reveal]:nth-of-type(1) { --reveal-delay: 0ms; }
.hero-copy > [data-reveal]:nth-of-type(2) { --reveal-delay: 80ms; }
.hero-copy > [data-reveal]:nth-of-type(3) { --reveal-delay: 160ms; }
.hero-copy > [data-reveal]:nth-of-type(4) { --reveal-delay: 240ms; }
.hero-copy > [data-reveal]:nth-of-type(5) { --reveal-delay: 320ms; }
.hero-copy > [data-reveal]:nth-of-type(6) { --reveal-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
  /* Skip the slide-in on the sticky chrome for users who prefer no motion;
   * the show/hide still toggles, just instantly. */
  .site-chrome { transition: none !important; }
}

/* ---------- responsive ----------
 *
 * Breakpoint ladder:
 *   1366  — crowded translated headers use the compact hamburger drawer.
 *   1280  — desktop chrome shrinks (drop side rails, slimmer container).
 *   1200  — topbar mid label crowds first, hide it.
 *   1080  — small desktop / large laptop. Smaller hero/section heads.
 *    880  — tablet portrait. Stack two-column grids, tame the dark work
 *           card, trim partners to 3 cols.
 *    640  — large phone landscape. Wrap toolbars, trim foot-mega.
 *    560  — phone portrait. One-column lists/cards. Hero shrinks again.
 *    420  — tiny phones. Drop decorative ribbons that overflow, shrink
 *           the locale switcher, tighten section padding.
 */
@media (max-width: 1280px) {
  .container { padding: 0 44px; }
  .work { margin: 0 44px; padding: 90px; }
  .side-rail { display: none; }
}
/* hide topbar mid text early — between 1200 and 1280 it crowds even with nowrap */
@media (max-width: 1200px) {
  .topbar-inner .mid { display: none; }
}
/* The full translated navigation plus community, locale, Star, and Download
 * actions does not fit safely in the condensed 1280px capsule. Keep a compact
 * row through 1366px and resume the complete desktop header at 1367px. */
@media (max-width: 1366px) {
  .nav-inner { gap: 18px; }
  .brand-meta { display: none; }
}

/* nav: at ≤1366px there's no clean way to fit Product · Skills · Systems ·
 * Templates · Craft · Blog · Contact + Download + Star + dot in one row,
 * so swap to a hamburger panel. Star CTA stays visible in the bar (it's
 * the social-proof CTA); Download moves into the panel. The Product
 * submenu flattens from a hover-popup to an always-expanded inline list,
 * since hover doesn't translate to touch.
 */
@media (max-width: 1366px) {
  .nav-toggle { display: inline-flex; }
  .brand { white-space: nowrap; }
  /* Download stays in the bar at every width (primary CTA); the drawer
     only takes the nav links. */
  /* Collapse the nav <ul> into a panel that drops below the header bar.
   * The header is `position: sticky`, so absolute-positioning the panel
   * relative to the header element keeps it pinned correctly. */
  .nav { position: sticky; }
  .nav > .nav-inner > nav[data-nav-primary] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Drop below the bar and span the full capsule width. The panel is
       positioned within `.nav` (which IS the condensed capsule), so left:0 /
       right:0 with no side margins makes its edges line up with the bar. */
    margin: 10px 0 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    /* Solid white card (was translucent Liquid Glass): an opaque surface so
       page content never shows through it, and no backdrop blur. Keeps the
       hairline border, rounded corners, and a layered drop shadow for lift. */
    background: #fff;
    border: 1px solid rgba(21, 20, 15, 0.08);
    border-radius: 22px;
    box-shadow:
      0 6px 24px rgba(17, 17, 26, 0.06),
      0 12px 40px rgba(17, 17, 26, 0.05);
    /* The flattened nav list is taller than the screen, so cap the card to the
       space below the bar and let it scroll internally instead of spilling off
       the bottom. The `100%` resolves to the header height (the card's
       positioned containing block); subtract the 10px top gap + a bottom gap.
       overflow-x:hidden locks the card so it can't be dragged left/right —
       overflow-y:auto alone would compute overflow-x to `auto` and let any
       sub-pixel overflow scroll horizontally. */
    max-height: calc(100vh - 100% - 28px);
    max-height: calc(100dvh - 100% - 28px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open > .nav-inner > nav[data-nav-primary] {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* With the panel open, hide the page-level bottom GradualBlur band
     (position:fixed, z-index above the panel) so it stops fogging the bottom
     of the panel's scrollable list. It returns when the menu closes. */
  body:has(.nav.is-open) .gradual-blur {
    display: none;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 20px 24px;
  }
  .nav-links li {
    border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a,
  .nav-links .nav-trigger {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 0;
    font-size: 16px;
  }
  /* The persistent community entry moves out of the fixed bar and into the
     drawer. This keeps brand, hamburger, locale, and the remaining actions
     within one compact row even with long Russian/Ukrainian labels. */
  .nav-links a .num {
    position: static;
    margin-left: 6px;
    font-size: 11px;
  }
  /* Product dropdown flattens — always show OD + HA as nested static items. */
  .nav-links li.has-dropdown { position: static; }
  .nav-links .dropdown-caret { display: none; }
  .nav-dropdown {
    /* Two items per row so the flattened panel (esp. the long Agent list)
       isn't an endless single column. Group labels span both columns below. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    align-content: start;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0 0 4px 0;
    padding: 0 0 4px 16px;
    border: none;
    border-left: 2px solid rgba(26, 26, 26, 0.08);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }
  /* Section group labels (Use cases / Roles) break the two-up flow. */
  .nav-dropdown .nav-dropdown-group { grid-column: 1 / -1; }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a { padding: 8px 8px; border-radius: 4px; }
  .nav-dropdown .dropdown-name { font-size: 15px; }
  .nav-dropdown .dropdown-blurb { display: none; }
  /* Let the Solution panel flow naturally inside the flattened nav panel
     instead of scrolling within a capped box. */
  .nav-dropdown-solution { max-height: none; overflow: visible; }
  /* Product mega menu flattens to stacked full-width categories in the mobile
     drawer: drop the flex columns, dividers, and the agent scroll cap so each
     category reads as a labeled vertical list. */
  .nav-dropdown-mega { display: block; max-width: none; }
  .nav-dropdown-mega .nav-mega-col { min-width: 0; }
  .nav-dropdown-mega .nav-mega-col + .nav-mega-col {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .nav-dropdown-mega .nav-mega-list-scroll { max-height: none; overflow: visible; }
}
@media (max-width: 1080px) {
  .container { padding: 0 32px; }
  .hero h1 { font-size: clamp(36px, 4.6vw, 54px); }
  .hero h1.hero-manifesto { font-size: clamp(30px, 4.4vw, 46px); }
  .section-header h2 { font-size: clamp(32px, 4vw, 50px); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .partners { grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 28px; }
  .work { padding: 80px; }
  .work-arrows { right: 32px; bottom: 32px; }
}
@media (max-width: 880px) {
  .container { padding: 0 24px; }
  /* ----------------------------------------------------------------
     Unified mobile module rhythm: every major section uses the SAME
     56px top/bottom padding, so the visible gap between any two
     stacked modules is a consistent 112px. This overrides the
     desktop-tuned per-section values (.capabilities 40, .testimonial
     12vw clamp, section.tight 90, .newsletter 72, generic 130) that
     otherwise made the mobile gaps jump between 80–170px. Hero keeps
     its nav-clearance top padding but takes the same 56px bottom (see
     its rule below) so hero→about matches the rest.
     ---------------------------------------------------------------- */
  section { padding: 56px 0; }
  section.tight { padding: 56px 0; }
  .capabilities { padding-top: 56px; padding-bottom: 56px; }
  .testimonial { padding: 56px 0; }
  .newsletter { padding: 56px 0; }
  /* stack two-column grids */
  .hero-grid, .about-grid, .capabilities-grid, .testimonial-grid, .cta-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .about-tablist { flex-direction: column; border-radius: 16px; }
  .about-tab { justify-content: flex-start; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .labs-head, .method-head { grid-template-columns: 1fr; gap: 28px; }
  .labs-meta { justify-content: flex-start; }
  .pills { justify-content: flex-start; }
  .method-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .method-grid::before { display: none; }
  /* hero — copy first, art second; trim art height so the page isn't 200vh.
     The nav bar is `position: fixed` (~71px tall on mobile) and floats over the
     hero, so the top padding must clear it — otherwise the lead line tucks under
     the bar. This drops the content below the bar with a comfortable gap. */
  .hero { min-height: 0; padding: 92px 0 56px; }
  .hero::before { display: none; }
  .hero-grid { gap: 36px; }
  .hero-copy { padding: 18px 0 8px; }
  .hero-copy .lead { max-width: none; }
  .hero-art { height: auto; aspect-ratio: 4 / 5; max-height: none; margin: 0 -8px 0 0; }
  .hero-actions { flex-wrap: wrap; margin-top: 140px; }
  .hero-stats { flex-wrap: wrap; gap: 14px 22px; }
  .hero-foot { flex-wrap: wrap; gap: 12px 24px; padding-top: 18px; }
  .sec-rule { flex-wrap: wrap; gap: 8px 18px; }
  .sec-rule .meta-grp { gap: 18px; flex-wrap: wrap; }
  .section-header { margin-bottom: 48px; }
  .section-header h2 { max-width: none; }
  /* wire — stack the field label above the marquee rows */
  .wire-inner { grid-template-columns: 1fr; gap: 14px; }
  .wire-left {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 12px;
    min-height: 0;
  }
  /* about copy first */
  .about-art { max-width: 460px; margin: 0 auto; }
  .about-side-note { display: none; }
  .about-caption { right: 12px; }
  .about .footer-row { flex-wrap: wrap; gap: 14px 20px; margin-top: 36px; }
  /* capabilities */
  .capabilities-art { max-width: 460px; margin: 0 auto; }
  .capabilities-art .ribbon { display: none; }
  /* method */
  .method-step .num { font-size: 56px; margin-bottom: 16px; }
  .method-step h4 { font-size: 24px; padding-right: 0; }
  .method-foot { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; margin-top: 56px; }
  /* dark work card */
  /* Uniform inner padding (matches the desktop 40px intent) so the cards sit an
     equal distance from every edge of the black panel; the grid gap matches it. */
  .work { margin: 0 12px; padding: 24px; border-radius: 24px; }
  .work-grid { grid-template-columns: 1fr; gap: 36px; }
  .work-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .work-stat-card { min-height: 190px; padding: 24px; transform: none; }
  .work-stat-card:hover { transform: translateY(-3px); }
  .work-arrows { position: static; margin-top: 32px; }
  .work-card,
  .work-card.alt { transform: none; }
  .work-card:hover { transform: translateY(-3px); }
  .work-card.alt:hover { transform: translateY(-3px); }
  /* testimonial / partners */
  .testimonial-grid.with-globe { grid-template-columns: 1fr; }
  /* The heading keeps each <br>-split line on ONE line on desktop
     (`h2 { white-space: nowrap }` + the post span), which overflows a phone and
     clipped it ("…329 co", "…toget"). Let both lines wrap on mobile, and let the
     copy column shrink to 0 so nowrap content can't blow the grid track wider
     than the screen. */
  .testimonial-copy { min-width: 0; }
  .testimonial-copy h2,
  .testimonial-copy h2 .testi-post { white-space: normal; }
  .testimonial-globe { min-height: 360px; }
  .testimonial-art { max-width: 420px; margin: 0 auto; }
  .partners { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  /* cta — across the whole mobile range, drop the fixed 2776/1660 landscape
     ratio (which reserved disproportionate empty painting below the buttons as
     the block shrank) and hug the content as a flex column. An equal padding
     frame makes the painting border identical on all four sides; the window's
     own margin and the inner padding are zeroed so the frame is the single
     source of the inset. Stack order is copy first (title → tag → buttons),
     product window last — see the `order` declarations below. */
  .cta-art { max-width: 460px; margin: 0 auto; }
  .cta-art .ribbon { display: none; }
  .cta-foot { flex-wrap: wrap; gap: 14px 24px; }
  .cta .container { padding: 0 16px; }
  .cta-dance {
    align-items: stretch;
    gap: clamp(16px, 3.6vw, 24px);
    padding: clamp(16px, 3.6vw, 24px);
  }
  .cta-window {
    width: 100%;
    margin: 0;
    /* Full image (no crop) when stacked on a phone — reset the desktop
       aspect-ratio crop so the whole screenshot shows. */
    height: auto;
    aspect-ratio: auto;
    object-fit: fill;
    border-radius: 10px;
  }
  /* cancel the translate-up reveal so the static image isn't shifted */
  .cta-window[data-reveal],
  .reveal-ready .cta-window[data-reveal]:not([data-revealed='true']) { translate: 0 0; }
  /* Copy block (title → tag → buttons) leads the stack; the window follows via
     its base order:1 (inner stays at the default order:0). */
  .cta-dance-inner { padding: 0; align-items: center; }
  .cta-dance-inner .display { margin: 0 0 10px; }
  .cta-dance-inner .lead { margin-bottom: 16px; }
  .cta-actions { flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
  /* footer */
  .foot-grid { gap: 32px 48px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot-bottom .right { flex-wrap: wrap; gap: 12px 20px; }
  /* nav — at ≤880px tighten padding; nav-links stay reachable through
   * the hamburger panel introduced at ≤1366px. Brand meta and Download
   * stay hidden; Star CTA still pings in the bar. */
  .nav { padding: 16px 0; }
  .brand-meta { display: none; }
}
@media (max-width: 640px) {
  .topbar-inner { gap: 14px; }
  .topbar-inner .right { gap: 12px; }
  /* Keep the emphasized agent promise together on common phone widths so the
     last CJK character does not orphan onto its own line. Narrower devices
     still fall back to normal wrapping below 360px. */
  .hero-sub-highlight { font-size: 0.95em; }
  .hero-actions .btn { padding: 12px 18px; font-size: 13px; }
  .work-card h3 { font-size: clamp(24px, 6vw, 30px); }
  .foot-mega .word { font-size: clamp(54px, 18vw, 120px); }
  /* Break .falling-text out of .method > .container's 64px side padding */
  .falling-text { margin-inline: -64px; width: calc(100% + 128px); }
  /* CTA mural compact layout lives in the ≤880 block; on small phones just
     tighten the side margin and shrink the copy. */
  .cta .container { padding: 0 14px; }
  .cta-dance-inner .display { font-size: clamp(22px, 6vw, 30px); }
  .cta-dance-inner .lead { font-size: 15px; }
}
@media (min-width: 360px) and (max-width: 640px) {
  .hero-sub-highlight { white-space: nowrap; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 44px); }
  .hero h1.hero-manifesto { font-size: clamp(26px, 7.4vw, 34px); }
  .about h2,
  .capabilities-copy h2,
  .labs-head h2,
  .method-head h2,
  .cta h2,
  .section-header h2 { font-size: clamp(30px, 8.5vw, 44px); }
  .about h2.about-statement { font-size: clamp(26px, 6vw, 38px); }
  .cta h2 { font-size: clamp(28px, 8vw, 38px); }
  .cards { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; gap: 28px; }
  .method-step .num { font-size: 48px; }
  .method-step h4 { font-size: 22px; }
  /* section vertical rhythm is unified to 56px in the ≤880px block above;
     no separate ≤560px value so small phones stay consistent with large ones. */
  .topbar-inner { font-size: 9px; gap: 10px; }
  .topbar-inner .right { gap: 10px; }
  .locale-trigger { gap: 4px; }
  .locale-trigger-prefix { display: none; }
  .locale-trigger-sep { display: none; }
  .locale-menu { min-width: 208px; }
  .partners { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .foot-grid { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .work { margin: 0 8px; padding: 20px; border-radius: 20px; }
  .work-stats-grid { gap: 20px; }
  .hero-actions { width: 100%; margin-top: 90px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .cta-actions { width: 100%; }
  .cta-actions .btn,
  .cta-actions .email-pill { flex: 1 1 auto; justify-content: center; }
  .nav-inner { gap: 12px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; font-size: 16px; }
  .brand-logo { height: 34px; }
  .read-more { margin-top: 36px; }
  .foot-mega .word { font-size: clamp(48px, 16vw, 88px); }
}
@media (max-width: 420px) {
  .container { padding: 0 14px; }
  .topbar-inner { align-items: flex-start; }
  .topbar-inner .right {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .locale-menu { min-width: 192px; }
  .hero-stats { gap: 10px 16px; }
  .hero-stats .stat { font-size: 11px; }
  .hero-foot { font-size: 9.5px; }
  .sec-rule { font-size: 9.5px; gap: 6px 12px; }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .foot-mega .word { font-size: clamp(40px, 16vw, 64px); }
  .work-card { padding: 26px 22px; }
  .work-card.alt { padding: 24px 20px; }
  .work-stats-grid { grid-template-columns: 1fr; }
  .work-stat-card { min-height: 168px; padding: 22px; }
  .work-stat-card h3 { font-size: clamp(32px, 13vw, 48px); }
}
/* Phone mode: match these section headings to the testimonial headline size
   (`clamp(26px, 3vw, 42px)` — 26px on phones). Placed after the other mobile
   blocks so it overrides their larger clamps and the base `.labs-head h2` /
   `.work-stats-title` sizes; on desktop (>880px) the headings keep their large
   display sizes. */
@media (max-width: 880px) {
  .work-stats-title,
  .method-head h2,
  .labs-head h2,
  .capabilities-copy h2,
  .newsletter-title,
  .faq-head .display.faq-title-zh { font-size: clamp(26px, 3vw, 42px); }
}

/* ====== Plugin registry pages ====== */
.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;
}
.plugin-shell .nav { border-bottom: 1px solid var(--line-soft); }
.plugin-directory,
.plugin-detail { padding-bottom: 96px; }
.plugin-hero,
.plugin-detail-hero {
  /* Top padding clears the absolutely-positioned .site-chrome (~123px) so the
     hero eyebrow/title don't slide under the nav (matches sub-page 140px). */
  padding: 140px 0 72px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--paper-warm), rgba(245, 245, 245, 0.4)),
    var(--paper);
}
.plugin-hero__grid,
.plugin-detail-hero__grid {
  display: grid;
  gap: 56px;
  align-items: start;
}
.plugin-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
}
.plugin-detail-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
}
.plugin-hero h1,
.plugin-detail h1 {
  max-width: 900px;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.94;
  letter-spacing: 0;
}
.plugin-hero p,
.plugin-detail-hero p,
.plugin-detail-panel p {
  max-width: 760px;
  margin-top: 24px;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1.65;
}
.plugin-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.plugin-hero__panel,
.plugin-detail-preview,
.plugin-detail__facts,
.plugin-detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bone);
  box-shadow: var(--shadow);
}
.plugin-hero__panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}
.plugin-showcase__head {
  min-height: 116px;
  padding: 18px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line-soft);
}
.plugin-showcase__head span,
.plugin-showcase__head small,
.plugin-showcase-item small,
.plugin-showcase-item em {
  display: block;
  color: var(--ink-mute);
  font: 700 10px var(--body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.plugin-showcase__head strong {
  display: block;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  line-height: 0.86;
}
.plugin-showcase__head small {
  margin-top: 10px;
}
.plugin-showcase__list {
  display: grid;
  gap: 10px;
}
.plugin-showcase-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
}
.plugin-showcase-item__visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(38, 38, 38, 0.14);
  border-radius: 6px;
  background: var(--ink);
}
.plugin-showcase-item__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plugin-showcase-item__visual > span {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.86);
}
.plugin-showcase-item__visual > span:nth-child(1) {
  left: 12%;
  top: 22%;
  width: 58%;
  height: 10px;
}
.plugin-showcase-item__visual > span:nth-child(2) {
  left: 12%;
  top: 46%;
  width: 72%;
  height: 5px;
  opacity: 0.72;
}
.plugin-showcase-item__visual > span:nth-child(3) {
  left: 12%;
  bottom: 18%;
  width: 36%;
  height: 5px;
  opacity: 0.56;
}
.plugin-showcase-item__copy {
  min-width: 0;
}
.plugin-showcase-item strong {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.plugin-showcase-item em {
  margin-top: 7px;
  font-family: var(--mono);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.plugin-showcase-item--image .plugin-showcase-item__visual { background: #d8ffb5; }
.plugin-showcase-item--video .plugin-showcase-item__visual { background: var(--ink); }
.plugin-showcase-item--dashboard .plugin-showcase-item__visual { background: var(--paper-warm); }
.plugin-showcase-item--system .plugin-showcase-item__visual { background: var(--ink); }
.plugin-showcase-item--atom .plugin-showcase-item__visual { background: var(--paper-dark); }
.plugin-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.plugin-hero__stats div {
  min-width: 0;
  padding: 14px;
  background: var(--paper);
}
.plugin-hero__stats dt {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 0.95;
}
.plugin-hero__stats dd {
  margin-top: 8px;
  color: var(--ink-mute);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plugin-registry-section,
.plugin-detail-section {
  padding: 64px 0 0;
}
.plugin-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px;
  align-items: end;
}
.plugin-toolbar h2,
.plugin-detail-panel h2 {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: 0;
}
.plugin-search input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bone);
  color: var(--ink);
  font: 500 15px var(--body);
  outline: none;
}
.plugin-search input:focus {
  border-color: #83ff3b;
  box-shadow: 0 0 0 3px #d8ffb5;
}
.plugin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.plugin-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink-mute);
  font: 600 14px var(--body);
  cursor: pointer;
}
.plugin-filter span { color: var(--ink-faint); }
.plugin-filter.is-active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.plugin-filter.is-active span { color: rgba(255, 255, 255, 0.72); }
.plugin-result-count {
  margin-top: 18px;
  color: var(--ink-mute);
  font-size: 14px;
}
.plugin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.plugin-card-grid.compact { margin-top: 22px; }
.plugin-card-grid.compact .plugin-card {
  min-height: 280px;
  padding: 20px;
}
.plugin-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bone);
  box-shadow: 0 18px 36px -30px rgba(38, 38, 38, 0.18);
  overflow: hidden;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.plugin-card:hover {
  transform: translateY(-2px);
  border-color: var(--coral);
  background: var(--coral-tint);
}
.plugin-card[hidden] { display: none; }
.plugin-card__preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(38, 38, 38, 0.13);
  border-radius: 6px;
  background: var(--ink);
  color: inherit;
  text-decoration: none;
}
.plugin-card__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plugin-card__mock {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 42px 42px,
    var(--ink);
}
.plugin-card__mock span {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.9);
}
.plugin-card__mock span:nth-child(1) {
  left: 9%;
  top: 18%;
  width: 58%;
  height: 24px;
}
.plugin-card__mock span:nth-child(2) {
  left: 9%;
  top: 42%;
  width: 76%;
  height: 8px;
  opacity: 0.7;
}
.plugin-card__mock span:nth-child(3) {
  right: 9%;
  bottom: 16%;
  width: 24%;
  height: 42px;
  background: var(--coral);
}
.plugin-card__preview--image { background: #d8ffb5; }
.plugin-card__preview--image .plugin-card__mock {
  background:
    linear-gradient(135deg, rgba(38, 38, 38, 0.2), transparent 55%),
    #d8ffb5;
}
.plugin-card__preview--video { background: var(--ink); }
.plugin-card__preview--video .plugin-card__mock {
  background:
    linear-gradient(90deg, #a2ff63 0 18%, transparent 18% 82%, #a2ff63 82%),
    var(--ink);
}
.plugin-card__preview--dashboard .plugin-card__mock {
  background:
    linear-gradient(90deg, rgba(38, 38, 38, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, rgba(38, 38, 38, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--paper-warm);
}
.plugin-card__preview--system .plugin-card__mock {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--ink);
}
.plugin-card__preview--atom .plugin-card__mock {
  background:
    linear-gradient(90deg, rgba(38, 38, 38, 0.08) 1px, transparent 1px) 0 0 / 38px 100%,
    var(--paper-warm);
}
.plugin-card__preview--workflow .plugin-card__mock {
  background:
    linear-gradient(135deg, #d8ffb5, transparent 46%),
    var(--paper-warm);
}
.plugin-card__preview-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: block;
  max-width: calc(100% - 20px);
  padding: 7px 9px;
  border: 1px solid rgba(38, 38, 38, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink-soft);
  font: 700 10px var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-card__meta,
.plugin-card__footer,
.plugin-detail__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.plugin-card__meta {
  justify-content: space-between;
  color: var(--ink-faint);
  font: 500 12px var(--mono);
}
.plugin-badge,
.plugin-detail__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--paper-warm);
  font: 700 11px var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plugin-badge--official {
  color: #218c00;
  border-color: #beff8c;
  background: #f2ffe6;
}
.plugin-badge--community {
  color: var(--ink-soft);
  border-color: var(--line);
  background: var(--paper-dark);
}
.plugin-card h3 {
  min-width: 0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.04;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.plugin-card h3 a,
.plugin-card__footer a,
.plugin-back-link,
.plugin-source-list a {
  color: inherit;
  text-decoration-color: rgba(38, 38, 38, 0.28);
  text-underline-offset: 4px;
}
.plugin-card code,
.plugin-detail__commands code,
.plugin-detail__facts dd {
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.plugin-card p {
  color: var(--ink-mute);
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.plugin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.plugin-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink-mute);
  background: var(--paper);
  font-size: 12px;
}
.plugin-tags--large {
  margin-top: 22px;
}
.plugin-tags--large span {
  min-height: 34px;
  font-size: 13px;
}
.plugin-card__footer {
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-mute);
  font-size: 13px;
}
.plugin-back-link {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--ink-mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.plugin-detail__commands {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  max-width: 720px;
  margin-top: 34px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-warm);
}
.plugin-detail__commands.compact {
  display: block;
  max-width: none;
  margin-top: 28px;
}
.plugin-detail__commands div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.plugin-detail__commands span {
  color: var(--ink-mute);
  font: 700 11px var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Neutral dark fill per the skill's button rule (no brand green as a button
   ground); matches the homepage .btn-primary pairing. */
.plugin-detail__commands button {
  min-width: 86px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: #ffffff;
  font: 700 13px var(--body);
  cursor: pointer;
}
.plugin-detail-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.plugin-detail-preview {
  overflow: hidden;
}
.plugin-detail-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plugin-detail-preview__head small {
  color: var(--ink-faint);
  font: inherit;
}
.plugin-detail-preview__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #262626;
}
.plugin-detail-preview__frame iframe,
.plugin-detail-preview__frame img {
  display: block;
  border: 0;
}
.plugin-detail-preview__frame iframe {
  width: 1080px;
  height: 675px;
  transform: scale(0.48);
  transform-origin: top left;
}
.plugin-detail-preview__frame img {
  width: 100%;
  height: 100%;
}
.plugin-detail-preview__frame img {
  object-fit: cover;
}
.plugin-detail-preview__mock {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--ink);
}
.plugin-detail-preview__mock span {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.9);
}
.plugin-detail-preview__mock span:nth-child(1) {
  left: 9%;
  top: 20%;
  width: 56%;
  height: 42px;
}
.plugin-detail-preview__mock span:nth-child(2) {
  left: 9%;
  top: 42%;
  width: 72%;
  height: 10px;
  opacity: 0.74;
}
.plugin-detail-preview__mock span:nth-child(3) {
  right: 9%;
  bottom: 14%;
  width: 22%;
  height: 64px;
  background: var(--coral);
}
.plugin-detail-preview--image .plugin-detail-preview__frame { background: #d8ffb5; }
.plugin-detail-preview--video .plugin-detail-preview__frame { background: var(--ink); }
.plugin-detail-preview--dashboard .plugin-detail-preview__frame { background: var(--paper-warm); }
.plugin-detail-preview--system .plugin-detail-preview__frame { background: var(--ink); }
.plugin-detail-preview--atom .plugin-detail-preview__frame { background: var(--paper-warm); }
.plugin-detail__facts {
  padding: 22px;
}
.plugin-detail__facts dl {
  display: grid;
  gap: 18px;
}
.plugin-detail__facts div {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.plugin-detail__facts div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.plugin-detail__facts dt {
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plugin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.plugin-detail-panel--wide {
  grid-column: 1 / -1;
}
.plugin-detail-panel {
  padding: 26px;
}
.plugin-example-query {
  max-height: 260px;
  margin-top: 24px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--paper-warm);
  color: var(--ink-soft);
  font: 12px/1.7 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.plugin-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.plugin-source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bone);
  font-weight: 700;
  text-decoration: none;
}
.plugin-related {
  padding-top: 72px;
}
@media (max-width: 980px) {
  .plugin-hero__grid,
  .plugin-detail-hero__grid,
  .plugin-toolbar,
  .plugin-detail-grid {
    grid-template-columns: 1fr;
  }
  .plugin-hero__panel {
    max-width: 640px;
  }
}
@media (max-width: 640px) {
  .plugin-hero,
  .plugin-detail-hero {
    padding: 112px 0 52px;
  }
  .plugin-hero h1,
  .plugin-detail h1 {
    font-size: clamp(40px, 12vw, 58px);
  }
  .plugin-hero p,
  .plugin-detail-hero p,
  .plugin-detail-panel p {
    font-size: 16px;
  }
  .plugin-hero__panel {
    max-width: none;
  }
  .plugin-hero__stats {
    grid-template-columns: 1fr;
  }
  .plugin-card-grid {
    grid-template-columns: 1fr;
  }
  .plugin-card {
    min-height: auto;
  }
  .plugin-card__preview {
    aspect-ratio: 16 / 9;
  }
  .plugin-detail-preview__frame {
    aspect-ratio: 16 / 9;
  }
  .plugin-detail-preview__frame iframe {
    width: 1120px;
    height: 630px;
    transform: scale(0.32);
  }
  .plugin-detail__commands {
    grid-template-columns: 1fr;
  }
  .plugin-detail__commands button {
    min-height: 44px;
  }
}

/* Black-pill download CTA. The hero variant breathes + sheens; every other
   placement stays static (constant box-shadow animations are scroll-jank
   fuel on this image-heavy page). */
.hm-dl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 15px 30px 15px 15px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 750;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 16px 30px -16px #26262680;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s;
}
.hm-dl .hm-di {
  font-style: normal;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--coral);
  color: #0d2601;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
  flex: none;
  transition: transform 0.18s;
}
.hm-dl:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 40px -18px #26262699, 0 0 0 5px #63fe1338;
}
.hm-dl:hover .hm-di { transform: translateY(2px); }
.hm-dl:active { transform: translateY(-1px) scale(0.99); }
.hm-dl .hm-sheen { display: none; }
.hm-dl-hero { animation: hm-dl-breathe 2.8s ease-in-out infinite; }
.hm-dl-hero:hover { animation-play-state: paused; }
.hm-dl-hero .hm-sheen {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #ffffff2e 50%, transparent 65%);
  transform: translateX(-120%);
  animation: hm-dl-sheen 4.2s ease-in-out infinite;
}
@keyframes hm-dl-sheen {
  0%, 62% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}
@keyframes hm-dl-breathe {
  50% { box-shadow: 0 16px 30px -16px #26262680, 0 0 0 7px #63fe1322; }
}
.hm-dl-s { padding: 11px 22px 11px 11px; font-size: 14px; }
.hm-dl-s .hm-di { width: 28px; height: 28px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .hm-dl-hero, .hm-dl-hero .hm-sheen { animation: none; }
}