/* ZeroMind — atmospheric hivemind visualizer
   Ported from the Claude Design handoff (zeromind.css + extra.css).
   The whole UI lives on the `zm-` namespace; legacy `.post-card`, `.btn`,
   `.pill` etc. are mapped through compatibility rules at the bottom of this
   file so older Leptos pages keep rendering while we cut over. */

/* !critical:begin routes=* — tokens, resets, base type, layout shell */
:root {
  --zm-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Characterful display face for headlines — paired with the Inter body.
     Bricolage Grotesque's editorial-grotesque personality (slight ink
     traps, organic curves) gives the "living hivemind" headlines a voice
     of their own instead of the generic Inter look. */
  --zm-font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --zm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Small-type scale ──────────────────────────────────────────
     Every font-size below 12px in this stylesheet (and in the inline
     styles the Leptos components emit) resolves through one of these
     tokens instead of a raw px literal. That gives the sub-12px type
     a single control point: the phone-width block at the bottom of
     this file floors the whole scale at 12px, which is the size
     Google's mobile legibility check (and a reader on a phone) needs.
     Desktop keeps the original values, so raising the floor for
     phones cannot drag the desktop scale with it. */
  /* Floor used by max() on the relative (em) sizes below, which cannot be
     expressed as a token because they scale with their parent. 0 on
     desktop leaves them exactly as authored. */
  --zm-fs-min: 0px;
  --zm-fs-7: 7px;
  --zm-fs-8: 8px;
  --zm-fs-8-5: 8.5px;
  --zm-fs-9: 9px;
  --zm-fs-9-5: 9.5px;
  --zm-fs-10: 10px;
  --zm-fs-10-5: 10.5px;
  --zm-fs-11: 11px;
  --zm-fs-11-5: 11.5px;

  /* ── Black / orange theme ──────────────────────────────────────
     Backgrounds are warm near-black (very low chroma at a warm hue);
     orange (ember) is the single brand accent. The former violet,
     trace (cyan) and other cool accents are REDEFINED to warm
     orange/amber here, so the whole UI shifts to the palette without
     touching every component that references the tokens. Red (down)
     stays — it reads as part of the warm family and carries meaning. */
  --zm-bg: oklch(0.13 0.006 50);
  --zm-bg-2: oklch(0.17 0.008 50);
  --zm-bg-3: oklch(0.21 0.010 50);
  --zm-surface: oklch(0.185 0.008 50);
  --zm-surface-2: oklch(0.225 0.011 48);
  --zm-surface-hi: oklch(0.275 0.014 46);
  --zm-line: oklch(0.30 0.013 48);
  --zm-line-soft: oklch(0.235 0.009 48);
  --zm-text: oklch(0.96 0.01 80);
  --zm-text-2: oklch(0.78 0.012 70);
  --zm-text-3: oklch(0.58 0.012 65);
  --zm-text-4: oklch(0.42 0.010 60);

  --zm-ember: oklch(0.78 0.185 55);
  --zm-ember-2: oklch(0.70 0.21 40);
  --zm-trace: oklch(0.83 0.15 78);
  --zm-up: oklch(0.78 0.185 55);
  --zm-down: oklch(0.62 0.21 25);
  --zm-agent: oklch(0.84 0.16 82);
  --zm-human: oklch(0.80 0.09 55);
  --zm-live: oklch(0.82 0.19 68);
  --zm-violet: oklch(0.64 0.22 36);

  --zm-radius: 0;
  --zm-radius-lg: 0;
  --zm-radius-xl: 0;

  color-scheme: dark;
}

[data-theme="light"] {
  --zm-bg: oklch(0.97 0.005 80);
  --zm-bg-2: oklch(0.94 0.005 80);
  --zm-bg-3: oklch(0.91 0.005 80);
  --zm-surface: #fff;
  --zm-surface-2: oklch(0.965 0.005 80);
  --zm-surface-hi: oklch(0.94 0.005 80);
  --zm-line: oklch(0.86 0.005 80);
  --zm-line-soft: oklch(0.91 0.005 80);
  --zm-text: oklch(0.21 0.01 80);
  --zm-text-2: oklch(0.40 0.01 80);
  --zm-text-3: oklch(0.55 0.01 80);
  --zm-text-4: oklch(0.65 0.01 80);
  --zm-ember: oklch(0.62 0.18 50);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--zm-font-sans);
  background: var(--zm-bg);
  color: var(--zm-text);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  background-image:
    radial-gradient(60% 40% at 70% 0%, color-mix(in oklab, var(--zm-violet) 9%, transparent), transparent 70%),
    radial-gradient(50% 40% at 10% 80%, color-mix(in oklab, var(--zm-ember) 7%, transparent), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--zm-font-mono); }
.serif { font-family: var(--zm-font-display); font-weight: 700; font-style: normal; letter-spacing: -0.02em; }
/* All legacy display headlines used `font-style: italic` to flag the
   Instrument Serif italic. The design has since swapped to Inter at
   weight 700 with tight tracking — strip the italic globally so the
   stale rules don't render as faux-italic. */
h1,
h2,
h3,
h4,
h5,
h6,
.serif,
.zc-store-title,
.zc-store-section h2,
.zc-browse-strip-head h2,
.zm-browse-hero h1 {
  font-style: normal !important;
  letter-spacing: -0.025em;
}

/* ── Layout shell ─────────────────────────────────────────────────── */
.zm-shell { display: flex; flex-direction: column; min-height: 100vh; }
.zm-main { flex: 1; }

/* The live top bar is `.zc-top` (further down). The old `.zm-top*` bar it
   replaced is gone; only the two pieces `TopAuth` still renders survive here,
   plus the blink keyframes the agent-status pill animates with. */
@keyframes zm-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.zm-top-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zm-agent), var(--zm-ember));
  display: grid; place-items: center;
  font-family: var(--zm-font-mono); font-size: 13px; font-weight: 700;
  color: var(--zm-bg); cursor: pointer;
  box-shadow: 0 0 0 1px var(--zm-line);
  text-decoration: none;
}

.zm-balance-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--zm-radius);
  border: 1px solid var(--zm-line);
  background: var(--zm-surface);
  font-family: var(--zm-font-mono); font-size: 12px; font-weight: 600;
  color: var(--zm-ember);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.zm-balance-pill:hover { border-color: var(--zm-ember); background: var(--zm-surface-2); }

/* !critical:end */
/* !critical:begin routes=* — author chip, vote, cover overlays */
/* ── Author chip ──────────────────────────────────────────────────── */
.zm-author {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: var(--zm-text-2); cursor: pointer;
}
.zm-author:hover .zm-author-handle { color: var(--zm-ember); }
.zm-author-glyph {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: var(--zm-fs-11); line-height: 1;
}
.zm-author-agent .zm-author-glyph { background: color-mix(in oklab, var(--zm-agent) 22%, transparent); color: var(--zm-agent); }
.zm-author-human .zm-author-glyph { background: color-mix(in oklab, var(--zm-human) 22%, transparent); color: var(--zm-human); }
/* Real-image avatar bubble — same footprint as the glyph fallback so
   the chip layout is identical whether the user has uploaded a profile
   pic or not. Without a size cap an unstyled <img> renders at the
   blob's native pixel dimensions (sometimes hundreds of px). */
.zm-author-avatar {
  display: inline-block;
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  flex-shrink: 0;
}
.zm-author-handle { font-weight: 500; color: var(--zm-text); }
.zm-author-model { color: var(--zm-text-4); font-size: var(--zm-fs-10-5); }

/* ── Vote (compact, used in comments and aside columns) ──────────── */
.zm-vote { display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.zm-vote-btn {
  appearance: none; border: 0; background: transparent;
  color: var(--zm-text-4); cursor: pointer; padding: 2px 4px;
  font-size: 12px;
}
.zm-vote-btn:hover { color: var(--zm-text-2); }
.zm-vote.up .zm-vote-btn.up { color: var(--zm-up); }
.zm-vote.down .zm-vote-btn.down { color: var(--zm-down); }
.zm-vote-score {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); font-weight: 600;
  color: var(--zm-text-2); min-width: 28px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.zm-vote.up .zm-vote-score { color: var(--zm-up); }

/* Big vote column for cards */
.zm-vote-col {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-top: 4px; min-width: 36px;
}
.zm-vote-col .zm-vote-btn { font-size: 16px; padding: 2px; }
.zm-vote-col .zm-vote-score { font-size: 13px; min-width: auto; }
.zm-vote-col .zm-vote-sub { font-size: var(--zm-fs-10); color: var(--zm-trace); font-family: var(--zm-font-mono); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Cover (atmospheric, hue-driven) ──────────────────────────────── */
.zm-cover {
  position: relative; overflow: hidden;
  border-radius: var(--zm-radius-lg);
  background: var(--zm-surface);
}
.zm-cover-img { position: absolute; inset: 0; }
.zm-cover-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 25% 30%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.12), transparent 50%),
    radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,0.10), transparent 50%);
  background-size: 220px 220px, 320px 320px, 180px 180px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.zm-cover-noise {
  position: absolute; inset: 0;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.4) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.zm-cover-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55));
  pointer-events: none;
}
.zm-cover-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  z-index: 1;
}

/* !critical:end */
/* ── Agent operating badge ────────────────────────────────────────── */
.zm-op {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 8px; border-radius: 0;
  background: color-mix(in oklab, var(--zm-live) 14%, rgba(0,0,0,.4));
  border: 1px solid color-mix(in oklab, var(--zm-live) 35%, transparent);
  color: var(--zm-live);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.zm-op-dot { position: relative; width: 8px; height: 8px; flex-shrink: 0; }
.zm-op-dot i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--zm-live); box-shadow: 0 0 5px var(--zm-live);
  animation: zm-pulse 1.4s ease-out infinite;
}
@keyframes zm-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }

/* !critical:begin routes=* — tag + button primitives */
/* ── Tag ──────────────────────────────────────────────────────────── */
.zm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 0;
  background: rgba(0,0,0,.3); border: 1px solid var(--zm-line-soft);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-2);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.zm-tag.auto { color: var(--zm-agent); border-color: color-mix(in oklab, var(--zm-agent) 30%, var(--zm-line)); }
.zm-tag.solid { background: var(--zm-surface); }
.zm-tag.kind {
  background: color-mix(in oklab, var(--zm-ember) 14%, var(--zm-surface));
  color: var(--zm-ember);
  border-color: color-mix(in oklab, var(--zm-ember) 35%, var(--zm-line));
}
.zm-tag.kind[data-kind="module"]    { background: color-mix(in oklab, var(--zm-ember)  16%, var(--zm-surface)); color: var(--zm-ember);  border-color: color-mix(in oklab, var(--zm-ember)  35%, var(--zm-line)); }
.zm-tag.kind[data-kind="component"] { background: color-mix(in oklab, var(--zm-trace)  16%, var(--zm-surface)); color: var(--zm-trace);  border-color: color-mix(in oklab, var(--zm-trace)  35%, var(--zm-line)); }
.zm-tag.kind[data-kind="bundle"]    { background: color-mix(in oklab, var(--zm-violet) 16%, var(--zm-surface)); color: var(--zm-violet); border-color: color-mix(in oklab, var(--zm-violet) 35%, var(--zm-line)); }
.zm-tag.kind[data-kind="material"]  { background: color-mix(in oklab, var(--zm-human)  16%, var(--zm-surface)); color: var(--zm-human);  border-color: color-mix(in oklab, var(--zm-human)  35%, var(--zm-line)); }
.zm-tag.kind[data-kind="texture"]   { background: color-mix(in oklab, var(--zm-agent)  16%, var(--zm-surface)); color: var(--zm-agent);  border-color: color-mix(in oklab, var(--zm-agent)  35%, var(--zm-line)); }
.zm-tag.kind[data-kind="shader"]    { background: color-mix(in oklab, var(--zm-live)   16%, var(--zm-surface)); color: var(--zm-live);   border-color: color-mix(in oklab, var(--zm-live)   35%, var(--zm-line)); }
.zm-tag.kind[data-kind="mesh"]      { background: color-mix(in oklab, var(--zm-trace)  16%, var(--zm-surface)); color: var(--zm-trace);  border-color: color-mix(in oklab, var(--zm-trace)  35%, var(--zm-line)); }
.zm-tag.kind[data-kind="audio"]     { background: color-mix(in oklab, var(--zm-down)   16%, var(--zm-surface)); color: var(--zm-down);   border-color: color-mix(in oklab, var(--zm-down)   35%, var(--zm-line)); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.zm-btn {
  appearance: none; border: 1px solid var(--zm-line); background: var(--zm-surface);
  color: var(--zm-text); height: 38px; padding: 0 16px;
  border-radius: 0;
  font-family: var(--zm-font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.zm-btn:hover { background: var(--zm-surface-2); border-color: var(--zm-text-4); }
.zm-btn.primary {
  background: var(--zm-text); color: var(--zm-bg); border-color: var(--zm-text);
}
.zm-btn.primary:hover { background: var(--zm-text-2); border-color: var(--zm-text-2); }
.zm-btn.launch {
  background: linear-gradient(135deg, var(--zm-ember), var(--zm-ember-2));
  color: oklch(0.18 0.01 60); border-color: transparent;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--zm-ember) 60%, transparent), 0 6px 18px -10px color-mix(in oklab, var(--zm-ember) 55%, transparent);
  font-weight: 600; height: 44px; padding: 0 22px; font-size: 14px;
}
.zm-btn.launch:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--zm-ember), 0 9px 22px -8px color-mix(in oklab, var(--zm-ember) 60%, transparent); }
/* Compact launch — the sidebar "step inside" play button. Trims the
 * oversized hero proportions back down to the standard button height so
 * it sits in line with the Fork / Open-in-editor actions below it.
 * Three classes beat both `.zm-btn.launch` (height/padding) and
 * `.zm-btn.sm` (padding) on specificity, so this fully wins. */
.zm-btn.launch.sm { height: 34px; padding: 0 16px; font-size: 13px; }
.zm-btn.ghost { background: rgba(255,255,255,.04); }

/* !critical:end */
/* ── UI shells that aren't wired to backend yet ─────────────────────
 * Visible WIP marker — diagonal hatching + WIP corner badge, so every
 * unfinished control is self-documenting.
 *
 * `.unwired` is the general marker; it can decorate any element
 * (stat cells, tab buttons, card sections, anything). `.zm-btn.unwired`
 * adds the disabled-button affordance on top.
 *
 * Admin-only visibility: WIP surfaces are the backend punch list —
 * useful to us, but half-built noise for everyone else. So they only
 * render for admins. This is a single global gate (no per-call-site
 * plumbing): every `.unwired`/`.unwired-inline` element is hidden unless
 * the document is flagged `data-admin="true"` — an attribute lib.rs's
 * `App` sets on `<html>` post-hydration once `/v1/me` resolves the
 * viewer as an admin. The server never emits it (admin status isn't
 * known at SSR time), so WIP items are absent from first paint for
 * signed-out and non-admin viewers, and any future `.unwired` element is
 * gated automatically with zero extra code. `display: none` (not
 * `visibility`) so the element reserves no space when hidden. */
html:not([data-admin="true"]) .unwired,
html:not([data-admin="true"]) .unwired-inline {
  display: none !important;
}
.unwired {
  position: relative;
  background-image:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--zm-ember) 6%, transparent) 0 6px,
      transparent 6px 12px
    );
}
.unwired::after {
  content: "WIP";
  position: absolute; top: -7px; right: -6px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-9); font-weight: 600;
  letter-spacing: 0.06em; padding: 1px 6px; border-radius: 0;
  background: color-mix(in oklab, var(--zm-ember) 18%, transparent);
  color: var(--zm-ember);
  border: 1px solid color-mix(in oklab, var(--zm-ember) 35%, transparent);
  z-index: 2;
  pointer-events: none;
}
/* Inline variant — same hatching but the WIP chip sits next to the
 * label instead of in the corner. Use on tab-button labels and stat
 * labels where a corner badge would clip. */
.unwired-inline { position: relative; }
.unwired-inline::after {
  content: "WIP";
  display: inline-block; margin-left: 6px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-9); font-weight: 600;
  letter-spacing: 0.06em; padding: 1px 5px; border-radius: 0;
  background: color-mix(in oklab, var(--zm-ember) 18%, transparent);
  color: var(--zm-ember);
  border: 1px solid color-mix(in oklab, var(--zm-ember) 35%, transparent);
  vertical-align: middle;
}

.zm-btn.unwired,
.zm-btn.unwired:hover {
  cursor: not-allowed;
  color: color-mix(in oklab, var(--zm-text-3) 75%, transparent);
  border-color: color-mix(in oklab, var(--zm-text-4) 35%, transparent);
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--zm-ember) 6%, transparent) 0 6px,
      transparent 6px 12px
    ),
    rgba(255,255,255,.02);
  box-shadow: none;
  transform: none;
}
/* Title-attribute tooltip is enough; no JS handler needed. The
 * disabled attribute on the underlying <button> stops the click. */

/* !critical:begin routes=/packages,/community,/users,/vibes,/vibes/new,/categories/* — browse hero + tools */
/* ── BROWSE: hero + tools ─────────────────────────────────────────── */
.zm-browse-hero {
  max-width: 1400px; margin: 0 auto; padding: 36px 24px 18px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;
}
.zm-browse-hero h1 {
  font-family: var(--zm-font-display); font-weight: 800;
  font-size: 68px; line-height: 0.96; margin: 0;
  letter-spacing: -0.04em;
  font-style: normal;
}
.zm-browse-hero h1 em {
  font-style: normal;
  color: var(--zm-ember);
  background: linear-gradient(102deg, oklch(0.84 0.18 70), oklch(0.74 0.22 42) 46%, oklch(0.66 0.20 40) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px oklch(0.72 0.21 45 / 0.32));
}
.zm-browse-hero p { margin: 12px 0 0; max-width: 56ch; color: var(--zm-text-2); font-size: 16px; }
.zm-browse-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.zm-seg {
  display: inline-flex; padding: 3px;
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: 0;
}
.zm-seg button, .zm-seg a {
  appearance: none; border: 0; background: transparent;
  color: var(--zm-text-3); font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 0; cursor: pointer;
  font-family: var(--zm-font-mono); letter-spacing: 0.02em;
  text-transform: lowercase; text-decoration: none;
}
.zm-seg button:hover, .zm-seg a:hover { color: var(--zm-text); }
.zm-seg button.active, .zm-seg a.active { background: var(--zm-surface-hi); color: var(--zm-text); }

.zm-browse-page {
  max-width: 1400px; margin: 0 auto; padding: 8px 24px 64px;
  display: grid; grid-template-columns: 1fr 320px; gap: 28px;
}
@media (max-width: 1100px) {
  .zm-browse-page { grid-template-columns: 1fr; }
  .zm-browse-hero h1 { font-size: 48px; }}

@media (max-width: 760px) {
  .zm-browse-hero {
    grid-template-columns: 1fr; align-items: start; gap: 20px;
    padding: 26px 16px 12px;
  }
  .zm-browse-hero h1 { font-size: 40px; }
  .zm-browse-tools { width: 100%; }
  .zm-browse-tools > .zm-btn { flex: 1 1 0; }}

/* !critical:end */
/* !critical:begin routes=/packages,/vibes,/vibes/new,/categories/* — onboarding empty states */
/* ── Onboarding empty states (home sections with no data yet) ────── */
.zm-empty-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 34px 28px;
  border: 1px dashed var(--zm-line); border-radius: var(--zm-radius-lg);
  background: color-mix(in oklab, var(--zm-surface) 55%, transparent);
}
.zm-empty-glyph { font-family: var(--zm-font-mono); font-size: 40px; line-height: 1; color: var(--zm-text-4); }
.zm-empty-title {
  font-family: var(--zm-font-display); font-style: normal; font-size: 22px;
  color: var(--zm-text-2); letter-spacing: -0.01em;
}
.zm-empty-card p { margin: 0; max-width: 54ch; color: var(--zm-text-3); font-size: 13.5px; line-height: 1.55; }
.zm-empty-card code {
  font-family: var(--zm-font-mono); font-size: max(0.92em, var(--zm-fs-min));
  background: rgba(0,0,0,0.28); padding: 1px 6px; border-radius: 0; color: var(--zm-text-2);
}
.zm-empty-cmd {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 8px 16px; border-radius: 0;
  background: var(--zm-bg); border: 1px solid var(--zm-line);
  font-family: var(--zm-font-mono); font-size: 13px;
}
.zm-empty-cmd span { color: var(--zm-ember); font-weight: 600; }
.zm-empty-cmd code { background: transparent; padding: 0; color: var(--zm-text); }
.zm-empty-hint { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); }
/* Grid of worlds */
.zm-feed-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.zm-card {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--zm-radius-lg);
  overflow: hidden; cursor: pointer;
  border: 1px solid var(--zm-line);
  transition: transform .25s ease, border-color .15s;
  display: block;
}
.zm-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--zm-ember) 60%, var(--zm-line));
  box-shadow:
    0 22px 50px -24px rgba(0,0,0,0.65),
    0 16px 44px -22px color-mix(in oklab, var(--zm-ember) 24%, transparent);
}
.zm-card .zm-cover-overlay { padding: 16px; gap: 6px; padding-bottom: 44px; }
.zm-card-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
  color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px; display: flex; gap: 8px; align-items: center;
}
.zm-card h3 {
  font-family: var(--zm-font-display); font-weight: 700; font-size: 26px; line-height: 1.02;
  color: #fff; margin: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.5); letter-spacing: -0.025em;
  font-style: normal;
}
.zm-card-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: rgba(255,255,255,.8);
}
.zm-card-quality {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,.1);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: rgba(255,255,255,.95);
}
.zm-card-quality b { color: var(--zm-live); font-weight: 600; }
.zm-card-op { position: absolute; top: 14px; left: 14px; }

/* Wide list-mode card */
.zm-card.wide {
  aspect-ratio: auto; height: 200px;
  display: grid; grid-template-columns: 320px 1fr;
}
.zm-card.wide .zm-cover-overlay { padding: 22px; justify-content: flex-end; padding-bottom: 44px; }
.zm-card.wide .zm-card-side {
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  background: var(--zm-surface);
  border-left: 1px solid var(--zm-line);
}
.zm-card.wide h3 { font-size: 30px; color: var(--zm-text); text-shadow: none; }
.zm-card.wide .zm-card-tagline { color: var(--zm-text-2); font-size: 14px; max-width: 50ch; }
.zm-card.wide .zm-card-foot { color: var(--zm-text-3); }

/* Card overlay social strip */
.zm-card-social-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 14px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.92) 100%);
  display: flex; align-items: center;
  z-index: 3;
  pointer-events: none;
}

/* !critical:end */
/* ── Profile world cards (UserProfile worlds list) ──────────────────
   Built on .zm-card. The resting tile shows the cover, mood eyebrow,
   title, role + visibility, and a launches badge; a CSS-only hover/focus
   overlay reveals the description + the rest of the world's signals. */
.zm-pfworld .zm-cover-overlay { gap: 4px; }
.zm-pfworld .zm-card-foot { gap: 8px; }
.zm-pfworld-vis {
  font-family: var(--zm-font-mono); text-transform: lowercase;
  color: rgba(255,255,255,.62); letter-spacing: 0.02em;
}
/* Times-played indicator — a 🎮 game-controller emoji replaces the old ▶
   play-triangle on launch-count stats so the number reads as "played N
   times", not as a play button. Emoji ignore `color`, so we only size it;
   the slight desaturation keeps it from shouting over the muted stat rows. */
.zm-plays-ico {
  font-size: 12px; line-height: 1;
  filter: saturate(0.82) brightness(1.02);
}
/* Free the emoji from the 11px monochrome glyph box the other social stats
   use (`.zm-social-stat > span:first-child` fixes width:11px), or it clips. */
.zm-social-stat.zm-social-plays > .zm-plays-ico {
  width: auto; font-size: 12px;
}
/* Launch badge sits above the cover overlay; the detail panel covers it. */
.zm-pfworld .zm-card-quality { z-index: 2; }

.zm-pfworld-detail {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--zm-bg) 80%, transparent) 0%,
    color-mix(in oklab, var(--zm-bg) 93%, transparent) 55%,
    var(--zm-bg) 100%);
  backdrop-filter: blur(3px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.zm-pfworld:hover .zm-pfworld-detail,
.zm-pfworld:focus-visible .zm-pfworld-detail {
  opacity: 1; transform: none;
}
.zm-pfworld-detail-mood {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--zm-text-4);
}
.zm-pfworld-detail-title {
  font-family: var(--zm-font-display); font-weight: 700;
  font-size: 19px; line-height: 1.08; letter-spacing: -0.02em;
  margin: 0; color: var(--zm-text);
}
.zm-pfworld-detail-desc {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--zm-text-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.zm-pfworld-stats {
  display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: auto;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3);
}
.zm-pfworld-stats span { white-space: nowrap; }
.zm-pfworld-stats b { color: var(--zm-text); font-weight: 600; }
.zm-pfworld-detail-foot {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); color: var(--zm-text-4);
  padding-top: 7px; border-top: 1px solid var(--zm-line);
}

/* Side panels */
/* !critical:begin routes=/packages,/community,/users,/vibes,/vibes/new,/categories/* — side rail cards */
.zm-side { display: flex; flex-direction: column; gap: 16px; }
.zm-side-card {
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 16px 18px;
}
.zm-side-card h3 {
  margin: 0 0 12px; font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--zm-text-3);
  display: flex; align-items: center; gap: 8px;
}
.zm-side-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--zm-line-soft);
}
.zm-side-row:first-of-type { border-top: 0; }
.zm-side-row-l {
  color: var(--zm-text-3); font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.zm-side-row-r { color: var(--zm-text); font-family: var(--zm-font-mono); font-size: 12px; }

/* Activity feed */
.zm-activity-item {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--zm-line-soft);
  font-size: 12px;
}
.zm-activity-item:first-child { border-top: 0; padding-top: 0; }
.zm-activity-body { color: var(--zm-text-2); min-width: 0; }
.zm-activity-body b { color: var(--zm-text); cursor: pointer; }
.zm-activity-body b:hover { color: var(--zm-ember); }
.zm-activity-detail {
  display: block; margin-top: 3px; font-size: var(--zm-fs-11);
  font-family: var(--zm-font-mono); color: var(--zm-text-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zm-activity-action {
  display: inline-block; padding: 1px 7px; border-radius: 0;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-9-5);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-right: 5px;
}
.zm-activity-action.operating { background: color-mix(in oklab, var(--zm-live) 20%, transparent); color: var(--zm-live); }
.zm-activity-action.rated     { background: color-mix(in oklab, var(--zm-ember) 18%, transparent); color: var(--zm-ember); }
.zm-activity-action.tested    { background: color-mix(in oklab, var(--zm-trace) 18%, transparent); color: var(--zm-trace); }
.zm-activity-action.extracted { background: color-mix(in oklab, var(--zm-violet) 22%, transparent); color: var(--zm-violet); }
.zm-activity-action.endorsed  { background: color-mix(in oklab, var(--zm-human) 18%, transparent); color: var(--zm-human); }
.zm-activity-action.forked    { background: var(--zm-surface-hi); color: var(--zm-text-2); }
.zm-activity-action.commit    { background: color-mix(in oklab, var(--zm-trace) 18%, transparent); color: var(--zm-trace); }
.zm-activity-when {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10); color: var(--zm-text-4); white-space: nowrap;
}

/* !critical:end */
/* ── WORLD DETAIL ─────────────────────────────────────────────────── */
.zm-detail-hero {
  position: relative; min-height: 480px; overflow: hidden;
}
.zm-detail-hero .zm-cover-img,
.zm-detail-hero .zm-cover-grain,
.zm-detail-hero .zm-cover-noise { position: absolute; inset: 0; }
.zm-detail-hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, var(--zm-bg) 100%);
}
.zm-detail-hero-content {
  position: relative; z-index: 1;
  max-width: 1400px; margin: 0 auto; padding: 52px 24px 36px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 100%;
}
.zm-detail-eyebrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: rgba(255,255,255,.85);
}
.zm-detail-title {
  font-family: var(--zm-font-display);
  /* Was a fixed 120px, which forced 2–3 line wraps on ordinary titles and
     ate ~220px of vertical space. Fluidly scale 36→80px with the viewport so
     a typical title fits one line on desktop without dwarfing the hero. */
  font-size: clamp(36px, 5.4vw, 80px); line-height: 0.98;
  color: #fff; margin: 0; letter-spacing: -0.03em;
  font-style: normal;
  text-shadow: 0 4px 60px rgba(0,0,0,.6);
  max-width: 24ch; overflow-wrap: break-word;
}
@media (max-width: 800px) {
  /* font-size is handled by the clamp() above (floors at 36px). */
  .zm-detail-hero { min-height: 400px; }
  .zm-detail-hero-content { padding-top: 28px; }}
.zm-detail-tagline {
  max-width: 58ch; color: rgba(255,255,255,.85); font-size: 19px; line-height: 1.45;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  margin-top: 4px;
}
.zm-detail-actions {
  display: flex; gap: 12px; align-items: center; margin-top: auto; padding-bottom: 36px;
  flex-wrap: wrap;
}

/* Hero corner — bookmark + edit-gear icon stack, top-right of hero. */
.zm-hero-corner {
  position: absolute; top: 22px; right: 24px; z-index: 2;
  display: flex; gap: 6px;
}
.zm-hero-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0;
  backdrop-filter: blur(5px);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.zm-hero-icon-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--zm-ember);
  transform: translateY(-1px);
}

/* Reddit-style vote rail beside the title. Vertical: ▲ score ▼. Sits
   to the left of the title block; visitors don't see it (login first). */
.zm-hero-titleblock {
  display: flex; gap: 22px; align-items: flex-start;
}
.zm-hero-titleblock-text { flex: 1; min-width: 0; }
.zm-hero-vote-rail {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(5px);
  margin-top: 6px;
  min-width: 52px;
}
.zm-hero-vote-arrow {
  background: transparent; border: 0; padding: 4px 8px;
  cursor: pointer; font-size: 16px; line-height: 1;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 0;
  transition: color 120ms ease, background 120ms ease;
}
.zm-hero-vote-arrow.up:hover    { color: var(--zm-up);   background: rgba(255, 255, 255, 0.06); }
.zm-hero-vote-arrow.down:hover  { color: var(--zm-down); background: rgba(255, 255, 255, 0.06); }
.zm-hero-vote-score {
  font-family: var(--zm-font-mono); font-size: 14px; line-height: 1;
  color: #fff; font-weight: 600;
  min-width: 2ch; text-align: center;
}
@media (max-width: 800px) {
  .zm-hero-titleblock { gap: 12px; }
  .zm-hero-vote-rail  { min-width: 44px; }}

/* Foldable summary body — capped at ~360px so a long README doesn't
   bury the comments below. Fade-out gradient hints at hidden content;
   expanded state removes both cap and fade. */
.zm-body-content {
  max-height: 360px;
  overflow: hidden;
  position: relative;
  transition: max-height 240ms ease;
}
.zm-body-content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--zm-bg) 100%);
  pointer-events: none;
}
.zm-body-content.expanded {
  max-height: none;
}
.zm-body-content.expanded::after { display: none; }
.zm-body-fold-toggle {
  display: inline-block;
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--zm-line);
  color: var(--zm-text-3);
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  padding: 6px 14px;
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.zm-body-fold-toggle:hover {
  color: var(--zm-ember);
  border-color: var(--zm-ember);
  background: rgba(255, 255, 255, 0.02);
}

.zm-stat-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: rgba(255,255,255,.85);
  padding: 6px 12px; border-radius: 0;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(5px);
  white-space: nowrap;
}
.zm-stat-inline b { color: #fff; font-weight: 500; }

/* Detail body grid */
.zm-detail-body {
  max-width: 1400px; margin: 0 auto; padding: 0 24px 64px;
  display: grid; grid-template-columns: 1fr 360px; gap: 32px;
}
@media (max-width: 1100px) { .zm-detail-body { grid-template-columns: 1fr; }}

.zm-section { margin-bottom: 36px; }
.zm-section h2 {
  margin: 0 0 16px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--zm-text-3);
  display: flex; align-items: center; gap: 10px;
}
.zm-section h2::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--zm-line) 0, transparent 100%);
}

/* !critical:begin routes=* — section heading + inline link */
.zm-section-head {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 18px;
  margin: 36px 0 18px;
}
.zm-section-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-ember);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
}
.zm-section-title {
  font-family: var(--zm-font-display); font-weight: 700;
  font-size: 28px; line-height: 1.1; margin: 0;
  letter-spacing: -0.03em; font-style: normal;
}
.zm-section-blurb { color: var(--zm-text-3); font-size: 14px; max-width: 56ch; margin: 10px 0 0; line-height: 1.5; }
.zm-link {
  background: transparent; border: 0; color: var(--zm-ember); cursor: pointer;
  font-family: var(--zm-font-mono); font-size: 12px;
  white-space: nowrap;
  align-self: end;
  padding-bottom: 4px;
  text-decoration: none;
}
.zm-link:hover { text-decoration: underline; }
/* !critical:end */

/* Pass timeline */
.zm-timeline { position: relative; padding-left: 24px; }
.zm-timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(180deg, var(--zm-ember), var(--zm-violet), var(--zm-trace));
  opacity: 0.5;
}
.zm-tl-step {
  position: relative; padding: 10px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
}
.zm-tl-step::before {
  content: ""; position: absolute; left: -22px; top: 16px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--zm-bg); border: 2px solid var(--zm-line);
}
.zm-tl-step.uploaded::before  { border-color: var(--zm-text-3); }
.zm-tl-step.scanned::before, .zm-tl-step.commit::before { border-color: var(--zm-trace); background: var(--zm-trace); }
.zm-tl-step.tested::before    { border-color: var(--zm-trace); }
.zm-tl-step.rated::before     { border-color: var(--zm-ember); background: var(--zm-ember); }
.zm-tl-step.extracted::before { border-color: var(--zm-violet); background: var(--zm-violet); }
.zm-tl-step.endorsed::before  { border-color: var(--zm-human); }
.zm-tl-step.operating::before {
  border-color: var(--zm-live); background: var(--zm-live);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--zm-live) 16%, transparent);
  animation: zm-pulse 1.4s ease-out infinite;
}
.zm-tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zm-tl-kind {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--zm-text-2);
  padding: 2px 7px; border-radius: 0; background: var(--zm-surface-hi);
}
.zm-tl-step.operating .zm-tl-kind { background: color-mix(in oklab, var(--zm-live) 20%, transparent); color: var(--zm-live); }
.zm-tl-step.rated .zm-tl-kind { background: color-mix(in oklab, var(--zm-ember) 18%, transparent); color: var(--zm-ember); }
.zm-tl-step.extracted .zm-tl-kind { background: color-mix(in oklab, var(--zm-violet) 22%, transparent); color: var(--zm-violet); }
.zm-tl-note { color: var(--zm-text-2); font-size: 13.5px; margin-top: 4px; word-break: break-word; }
.zm-tl-when { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); white-space: nowrap; }

/* !critical:begin routes=* — inline code */
/* Inline code */
code, .zm-code-inline {
  font-family: var(--zm-font-mono); font-size: 12.5px;
  background: var(--zm-surface-2); padding: 1px 6px; border-radius: 0;
  border: 1px solid var(--zm-line-soft);
  color: var(--zm-text);
}
/* !critical:end */

/* ── Comments ─────────────────────────────────────────────────────── */
.zm-comment {
  padding: 14px 0;
  border-bottom: 1px solid var(--zm-line-soft);
}
.zm-comment:last-child { border-bottom: 0; }
.zm-comment.nested {
  margin-left: 28px; padding-left: 14px;
  border-left: 1px solid var(--zm-line-soft); border-bottom: 0;
  padding-bottom: 0;
}
.zm-comment-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-text-3);
}
.zm-comment-body { color: var(--zm-text-2); font-size: 14.5px; line-height: 1.6; word-break: break-word; }
.zm-comment-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
}
.zm-comment-actions button {
  appearance: none; background: transparent; border: 0;
  color: var(--zm-text-4); cursor: pointer; padding: 0;
  font: inherit;
}
.zm-comment-actions button:hover { color: var(--zm-text-2); }
.zm-comment-input {
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 14px 16px; margin-bottom: 16px;
}
.zm-comment-input textarea {
  width: 100%; min-height: 60px;
  background: transparent; border: 0; outline: 0; resize: vertical;
  color: var(--zm-text); font: inherit; font-size: 14px; font-family: var(--zm-font-sans);
}
.zm-comment-input textarea::placeholder { color: var(--zm-text-4); }
.zm-comment-input-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
  flex-wrap: wrap; gap: 8px;
}

/* Detail aside */
.zm-detail-side { display: flex; flex-direction: column; gap: 18px; }
.zm-related { display: flex; flex-direction: column; gap: 10px; }
.zm-related-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center;
  cursor: pointer;
  padding: 8px; margin: -8px;
  border-radius: 0;
  text-decoration: none;
}
.zm-related-card:hover { background: var(--zm-surface-2); }
.zm-related-thumb {
  width: 76px; height: 60px; border-radius: 0;
  position: relative; overflow: hidden;
  border: 1px solid var(--zm-line);
}
.zm-related-info { min-width: 0; }
.zm-related-info b {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 16px; color: var(--zm-text); display: block; line-height: 1.1;
}
.zm-related-info span {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3);
}

/* ── PART (asset) DETAIL ──────────────────────────────────────────── */
.zm-part-hero {
  max-width: 1100px; margin: 0 auto; padding: 56px 24px 24px;
  display: grid; grid-template-columns: 360px 1fr; gap: 36px; align-items: start;
  position: relative;
}
@media (max-width: 800px) {
  .zm-part-hero { grid-template-columns: 1fr; padding-top: 32px; }}
.zm-part-preview {
  height: 320px; border-radius: var(--zm-radius-xl);
  position: relative; overflow: hidden;
  border: 1px solid var(--zm-line);
  background: var(--zm-surface);
  display: grid; place-items: center;
}
/* Preview-CTA overlay — bottom-right of the thumbnail. Renders only
   on previewable kinds (scene / mesh / model / material / …). WIP
   today because no per-kind in-browser viewer ships yet; visible so
   the affordance reads correctly. */
.zm-part-preview-cta {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
  color: var(--zm-ember);
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.zm-part-preview-cta:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.zm-part-preview-cta:disabled { cursor: not-allowed; }

/* Inline file row — expandable. The collapsed row is a thin grid
   with glyph / name / kind / size and an expander chevron. Expanded,
   the row reveals its inline source-render block (markdown / code /
   image / audio / …). Reused on the asset-page sub-parts > Files
   segment so a file's content is one click away without losing the
   parent page context. */
.zm-pdr-file-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto 24px;
  gap: 14px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--zm-line) 60%, transparent);
  font-size: 13px;
  background: transparent;
  width: 100%;
  text-align: left;
  border-left: 0; border-right: 0; border-top: 0;
  color: inherit;
  cursor: pointer;
}
.zm-pdr-file-row:hover { background: color-mix(in oklab, var(--zm-ember) 4%, transparent); }
.zm-pdr-file-row-chev {
  color: var(--zm-text-4); font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); text-align: center;
  transition: transform 120ms ease;
}
.zm-pdr-file-row.open .zm-pdr-file-row-chev { transform: rotate(90deg); }
.zm-pdr-file-row-body {
  padding: 14px 18px;
  background: color-mix(in oklab, var(--zm-surface-2) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--zm-line) 60%, transparent);
}
.zm-pdr-file-row-body:last-child { border-bottom: 0; }
.zm-part-preview-glyph {
  font-family: var(--zm-font-mono); font-size: 120px; line-height: 1;
  color: var(--zm-ember);
  text-shadow: 0 0 28px color-mix(in oklab, var(--zm-ember) 55%, transparent);
  position: relative; z-index: 1;
}
.zm-part-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Class chip — file vs asset. The first mark in the part eyebrow so
   the two surfaces are distinguishable at a glance. File = trace/blue
   (raw leaf), asset = ember (composite). */
.zm-class-chip {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 0;
  border: 1px solid var(--zm-line);
}
.zm-class-chip.file {
  color: var(--zm-trace);
  border-color: color-mix(in oklab, var(--zm-trace) 40%, var(--zm-line));
  background: color-mix(in oklab, var(--zm-trace) 12%, var(--zm-surface));
}
.zm-class-chip.asset {
  color: var(--zm-ember);
  border-color: color-mix(in oklab, var(--zm-ember) 40%, var(--zm-line));
  background: color-mix(in oklab, var(--zm-ember) 12%, var(--zm-surface));
}

/* Simplified file detail body — source-first, no tabs. */
.zm-file-main { display: flex; flex-direction: column; gap: 18px; }
.zm-file-desc {
  font-size: 15px; line-height: 1.65; color: var(--zm-text-2);
  max-width: 62ch; margin: 0;
}
.zm-file-facts {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding-top: 14px; margin-top: 4px;
  border-top: 1px solid var(--zm-line);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-text-3);
}
.zm-file-fact { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.zm-file-fact-k {
  color: var(--zm-text-4); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--zm-fs-10);
}
.zm-file-fact code { color: var(--zm-text-2); word-break: break-all; }
.zm-part-title {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 64px; line-height: 1; margin: 16px 0 0;
  letter-spacing: -0.02em;
}
.zm-part-note { font-size: 17px; color: var(--zm-text-2); margin: 12px 0 0; max-width: 50ch; }
.zm-part-actions { display: flex; gap: 10px; margin-top: 22px; align-items: center; flex-wrap: wrap; }

.zm-part-body {
  max-width: 1100px; margin: 0 auto; padding: 0 24px 64px;
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
}
@media (max-width: 900px) { .zm-part-body { grid-template-columns: 1fr; }}

/* ── Use-with — single-line code chip ─────────────────────────────── */
.zm-usewith {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 14px; border-radius: 0;
  background: color-mix(in oklab, oklch(0.16 0.04 52) 70%, var(--zm-surface));
  border: 1px solid var(--zm-line);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: var(--zm-font-mono);
  max-width: 100%;
  vertical-align: middle;
}
.zm-usewith:hover {
  border-color: color-mix(in oklab, var(--zm-violet) 50%, var(--zm-line));
  background: color-mix(in oklab, var(--zm-violet) 8%, var(--zm-surface));
}
.zm-usewith-label {
  font-size: var(--zm-fs-9-5); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--zm-violet); font-weight: 600;
  padding-right: 10px; border-right: 1px solid var(--zm-line);
  flex-shrink: 0;
}
.zm-usewith-code {
  font-family: var(--zm-font-mono); font-size: 13px;
  color: var(--zm-text); font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap; overflow-x: auto;
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0;
}
.zm-usewith-code::-webkit-scrollbar { display: none; }
.zm-usewith-copy {
  font-size: 13px; color: var(--zm-text-4);
  flex-shrink: 0;
  transition: color .15s;
  font-family: var(--zm-font-mono);
}
.zm-usewith:hover .zm-usewith-copy { color: var(--zm-violet); }
.zm-usewith.compact { padding: 7px 11px 7px 12px; }
.zm-usewith.compact .zm-usewith-code { font-size: 12px; }
.zm-usewith.compact .zm-usewith-label { font-size: var(--zm-fs-9); padding-right: 8px; }

/* ── Social signal row ────────────────────────────────────────────── */
.zm-social {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 12px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-text-3);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.zm-social-vote {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px 3px 8px; border-radius: 0;
  background: color-mix(in oklab, var(--zm-up) 12%, var(--zm-surface-2));
  border: 1px solid color-mix(in oklab, var(--zm-up) 22%, var(--zm-line));
  color: var(--zm-up);
  font-weight: 600;
  white-space: nowrap;
}
.zm-social-up { font-size: var(--zm-fs-9-5); line-height: 1; transform: translateY(-1px); }
.zm-social-num { font-size: 12px; }
.zm-social-pct { color: color-mix(in oklab, var(--zm-up) 50%, var(--zm-text-3)); font-weight: 400; font-size: var(--zm-fs-10-5); }
.zm-social-stat {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; color: var(--zm-text-3);
}
.zm-social-stat > span:first-child {
  color: var(--zm-text-4); font-size: var(--zm-fs-11-5);
  width: 11px; text-align: center;
}
/* "N playing" — live presence chip (≈15-min cached). Uses the house live
   accent + the same pulsing dot as the top-bar pulse. */
.zm-social-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px; border-radius: 0;
  border: 1px solid color-mix(in oklab, var(--zm-live) 32%, var(--zm-line));
  background: color-mix(in oklab, var(--zm-live) 12%, var(--zm-surface-2));
  color: color-mix(in oklab, var(--zm-live) 72%, var(--zm-text));
  font-weight: 600; white-space: nowrap;
}
/* Shared pulsing "live" dot for every presence chip (social row, explore
   grid card, explore hero). One rule so the size/glow/blink stay in sync. */
.zm-social-live i,
.zc-card-live i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--zm-live); box-shadow: 0 0 6px var(--zm-live);
  animation: zm-blink 1.6s ease-out infinite;
}
/* On the dark cover-image variants (feature/hero), lift to white-on-glass. */
.zm-social-feature .zm-social-live,
.zm-social-hero .zm-social-live {
  background: color-mix(in oklab, var(--zm-live) 22%, rgba(0,0,0,0.5));
  border-color: color-mix(in oklab, var(--zm-live) 50%, transparent);
  color: #fff; backdrop-filter: blur(4px);
}
.zm-social-mini { font-size: var(--zm-fs-10-5); gap: 9px; }
.zm-social-mini .zm-social-vote { padding: 2px 7px; }
.zm-social-mini .zm-social-num { font-size: var(--zm-fs-11); }
.zm-social-mini .zm-social-up { font-size: var(--zm-fs-9); }
.zm-social-hero {
  font-size: 12.5px; gap: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.zm-social-hero .zm-social-stat,
.zm-social-hero .zm-social-stat > span:first-child { color: rgba(255,255,255,0.92); }
.zm-social-hero .zm-social-vote {
  background: color-mix(in oklab, var(--zm-up) 28%, rgba(0,0,0,0.5));
  border-color: color-mix(in oklab, var(--zm-up) 55%, transparent);
  backdrop-filter: blur(4px);
  color: #fff;
}
.zm-social-hero .zm-social-pct { color: rgba(255,255,255,0.75); }
.zm-social-feature {
  font-size: var(--zm-fs-11-5); gap: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.zm-social-feature .zm-social-stat,
.zm-social-feature .zm-social-stat > span:first-child { color: rgba(255,255,255,0.88); }
.zm-social-feature .zm-social-vote {
  background: color-mix(in oklab, var(--zm-up) 24%, rgba(0,0,0,0.5));
  border-color: color-mix(in oklab, var(--zm-up) 50%, transparent);
  color: #fff; backdrop-filter: blur(4px);
}
.zm-social-feature .zm-social-pct { color: rgba(255,255,255,0.7); }
.zm-social-strip {
  font-size: var(--zm-fs-10-5); gap: 11px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.zm-social-strip .zm-social-stat,
.zm-social-strip .zm-social-stat > span:first-child { color: rgba(255,255,255,0.85); }
.zm-social-strip .zm-social-vote {
  padding: 2px 8px;
  background: color-mix(in oklab, var(--zm-up) 32%, rgba(0,0,0,0.55));
  border-color: color-mix(in oklab, var(--zm-up) 55%, transparent);
  color: #fff; backdrop-filter: blur(4px);
}
.zm-social-strip .zm-social-num { font-size: var(--zm-fs-11); }
.zm-social-strip .zm-social-pct { color: rgba(255,255,255,0.7); }

/* Detail-sidebar breakdown */
.zm-social-breakdown { display: contents; }

/* ── Compatibility badges ─────────────────────────────────────────── */
.zm-compat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px; border-radius: 0;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--zm-line);
  white-space: nowrap;
}
.zm-compat-ok    { color: var(--zm-live);  border-color: color-mix(in oklab, var(--zm-live) 40%, var(--zm-line));  background: color-mix(in oklab, var(--zm-live) 10%, transparent); }
.zm-compat-shim  { color: var(--zm-ember); border-color: color-mix(in oklab, var(--zm-ember) 40%, var(--zm-line)); background: color-mix(in oklab, var(--zm-ember) 10%, transparent); }
.zm-compat-no    { color: var(--zm-down);  border-color: color-mix(in oklab, var(--zm-down) 40%, var(--zm-line));  background: color-mix(in oklab, var(--zm-down) 10%, transparent); }

/* ── Score breakdown card ─────────────────────────────────────────── */
.zm-score-card {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--zm-ember) 6%, var(--zm-surface)) 0%,
    var(--zm-surface) 100%);
  border: 1px solid color-mix(in oklab, var(--zm-ember) 25%, var(--zm-line));
  border-radius: var(--zm-radius-lg);
  padding: 28px 32px 24px;
  overflow: hidden;
}
.zm-score-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in oklab, var(--zm-ember) 16%, transparent), transparent 60%);
  pointer-events: none;
}
.zm-score-head {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--zm-line-soft);
  margin-bottom: 20px;
}
.zm-score-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--zm-ember);
  margin-bottom: 8px;
}
.zm-score-title {
  font-family: var(--zm-font-display); font-size: 30px; line-height: 1.1;
  letter-spacing: -0.02em; font-style: normal;
  color: var(--zm-text); margin: 0; max-width: 22ch;
}
.zm-score-overall {
  text-align: right;
  padding-left: 24px;
  border-left: 1px solid var(--zm-line-soft);
}
.zm-score-overall-num {
  font-family: var(--zm-font-display); font-size: 64px; line-height: 1;
  font-style: normal; color: var(--zm-ember);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px color-mix(in oklab, var(--zm-ember) 22%, transparent);
}
.zm-score-overall-label {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--zm-text-3); margin-top: 4px;
}
.zm-score-verdict {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; margin-bottom: 22px;
  background: var(--zm-surface-2); border-radius: 0;
  border-left: 2px solid var(--zm-ember);
}
.zm-score-quote {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 16px; color: var(--zm-text);
  line-height: 1.5;
}
.zm-score-reviewer {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5);
  color: var(--zm-text-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.zm-score-formula {
  position: relative;
  display: flex; flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.zm-score-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--zm-line-soft);
}
.zm-score-row:last-of-type { border-bottom: 0; }
.zm-score-row-l { min-width: 0; }
.zm-score-row-label {
  font-family: var(--zm-font-sans); font-size: 14px; font-weight: 600;
  color: var(--zm-text); margin-bottom: 2px;
}
.zm-score-row-blurb { font-size: 12px; color: var(--zm-text-3); }
.zm-score-row-bar { display: flex; align-items: center; gap: 10px; }
.zm-score-row-bar-track {
  flex: 1; height: 6px; border-radius: 0;
  background: var(--zm-surface-hi); overflow: hidden;
}
.zm-score-row-bar-fill { height: 100%; background: var(--zm-ember); border-radius: 0; }
.zm-score-row-val {
  font-family: var(--zm-font-mono); font-size: 13px; font-weight: 600;
  color: var(--zm-text); min-width: 28px; text-align: right;
}
.zm-score-row-r {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: var(--zm-text-3);
}
.zm-score-row-weight { color: var(--zm-text-3); }
.zm-score-row-eq { color: var(--zm-text-4); }
.zm-score-row-contrib { color: var(--zm-text); font-weight: 600; font-size: 14px; }
.zm-score-sum {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: 14px;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--zm-line);
  font-family: var(--zm-font-mono);
}
.zm-score-sum-label {
  font-size: var(--zm-fs-11); color: var(--zm-text-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.zm-score-sum-val {
  font-size: 18px; font-weight: 600; color: var(--zm-ember);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .zm-score-head { grid-template-columns: 1fr; }
  .zm-score-overall { padding-left: 0; border-left: 0; text-align: left; }
  .zm-score-row { grid-template-columns: 1fr; gap: 8px; }
  .zm-score-row-r { justify-content: flex-start; }}

/* Compact score widget (sidebar) */
.zm-score-mini {
  background: var(--zm-surface); border: 1px solid var(--zm-line-soft);
  border-radius: 0; padding: 18px;
}
.zm-score-mini-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.zm-score-mini-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--zm-ember);
}
.zm-score-mini-num {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 44px; line-height: 1; color: var(--zm-text);
  letter-spacing: -0.02em;
}
.zm-score-mini-passes {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-4); margin-bottom: 14px;
}
.zm-score-mini-rows { display: flex; flex-direction: column; gap: 8px; }
.zm-score-mini-row {
  display: grid; grid-template-columns: 70px 1fr 28px;
  align-items: center; gap: 10px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
}
.zm-score-mini-row b {
  font-family: var(--zm-font-mono); font-weight: 500; color: var(--zm-text-2);
  text-transform: lowercase;
}
.zm-score-mini-bar {
  height: 4px; background: var(--zm-surface-2); border-radius: 0; overflow: hidden;
}
.zm-score-mini-bar i { display: block; height: 100%; background: var(--zm-ember); border-radius: 0; }
.zm-score-mini-val {
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--zm-text-2); font-weight: 600;
}

/* ── Per-content card (Inside this world) ─────────────────────────── */
.zm-content-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
/* List variant — one row per item, faster to scan. */
.zm-content-grid.zm-content-list {
  grid-template-columns: 1fr;
  gap: 8px;
}
.zm-content-grid.zm-content-list .zm-content-card {
  flex-direction: row; align-items: center; padding: 10px 14px; gap: 16px;
}
.zm-content-grid.zm-content-list .zm-content-card-head {
  flex: 1; min-width: 0;
}
.zm-content-grid.zm-content-list .zm-content-body { display: none; }
.zm-content-grid.zm-content-list .zm-content-foot {
  flex: 0 0 auto; grid-template-columns: auto;
}

/* ── Card-fold UI (Inside-this-world inline accordion) ──────────── */
.zm-card-foldable { display: flex; flex-direction: column; gap: 0; }
.zm-card-foldable-row { position: relative; }
.zm-card-foldable-row .zm-content-card { padding-right: 44px; }
.zm-card-foldable-row .zm-wdr-part-card { padding-right: 44px; }

.zm-fold-arrow {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  color: var(--zm-text-2);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.zm-fold-arrow:hover {
  border-color: var(--zm-ember);
  color: var(--zm-text);
  background: color-mix(in oklab, var(--zm-ember) 12%, var(--zm-surface));
}

.zm-fold-panel {
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  border-top: none;
  border-radius: 0;
  margin-top: -1px;
  padding: 12px 14px;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.zm-fold-panel-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-3);
}
.zm-fold-panel-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 0;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.zm-fold-panel-path {
  color: var(--zm-text-4); word-break: break-all;
}
.zm-fold-panel-empty { color: var(--zm-text-4); font-style: normal; padding: 4px 0; }

.zm-fold-children { display: flex; flex-direction: column; gap: 4px; }
.zm-fold-child {
  display: grid; grid-template-columns: 22px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 0;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line-soft);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5);
  color: var(--zm-text-2); text-decoration: none;
}
.zm-fold-child:hover { border-color: var(--zm-text-4); color: var(--zm-text); }
.zm-fold-child-glyph { color: var(--zm-text-3); font-size: 13px; }
.zm-fold-child-name { color: var(--zm-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-fold-child-kind { color: var(--zm-text-4); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--zm-fs-10); }
.zm-fold-child-arrow { color: var(--zm-ember); font-size: var(--zm-fs-11); }

.zm-fold-panel-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 6px; border-top: 1px solid var(--zm-line-soft);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
}
.zm-fold-panel-info { color: var(--zm-text-4); }
.zm-fold-panel-view-full { color: var(--zm-ember); text-decoration: none; margin-left: auto; }
.zm-fold-panel-view-full:hover { text-decoration: underline; }

/* Composite fold-panel: prominent description + README + grouped sections. */
.zm-fold-summary {
  font-size: 13.5px; line-height: 1.55; color: var(--zm-text);
  padding: 4px 0;
}
.zm-fold-readme {
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.zm-fold-readme-head {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.zm-fold-readme-body {
  font-size: 13px; line-height: 1.6; color: var(--zm-text-2);
}
.zm-fold-readme-body h1 { font-size: 17px; margin: 8px 0 4px; }
.zm-fold-readme-body h2 { font-size: 15px; margin: 8px 0 4px; }
.zm-fold-readme-body h3 { font-size: 13.5px; margin: 6px 0 2px; }
.zm-fold-readme-body p { margin: 6px 0; }
.zm-fold-readme-body ul, .zm-fold-readme-body ol { margin: 4px 0 4px 18px; padding: 0; }
.zm-fold-readme-body code {
  background: var(--zm-surface-2); padding: 1px 5px; border-radius: 0;
  font-size: 12px; font-family: var(--zm-font-mono);
}
.zm-fold-readme-body pre {
  margin: 6px 0; padding: 8px 10px;
  background: var(--zm-surface-2); border: 1px solid var(--zm-line-soft);
  border-radius: 0; overflow-x: auto;
  font-size: var(--zm-fs-11-5); line-height: 1.45;
}
.zm-fold-readme-trunc {
  text-align: right;
  color: var(--zm-text-4); font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
}

.zm-fold-section { display: flex; flex-direction: column; gap: 6px; }
.zm-fold-section-head {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.zm-fold-section-toggle {
  background: transparent; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-3); text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left;
}
.zm-fold-section-toggle:hover { color: var(--zm-text); }
.zm-fold-children.dim .zm-fold-child {
  background: transparent; border-color: var(--zm-line-soft); opacity: 0.85;
}

.zm-fold-leaf-meta { color: var(--zm-text-2); font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); }
.zm-fold-leaf-meta-row { display: block; margin: 2px 0; }
.zm-fold-leaf-image { display: flex; flex-direction: column; gap: 6px; }
.zm-fold-leaf-source pre.zm-fold-leaf-pre {
  margin: 0; padding: 10px 12px;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  font-size: var(--zm-fs-11-5); line-height: 1.45;
  max-height: 320px; overflow: auto;
  font-family: var(--zm-font-mono); color: var(--zm-text);
  white-space: pre;
}
.zm-fold-leaf-trunc {
  text-align: right; padding-top: 4px;
  color: var(--zm-text-4); font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
}

/* List-mode tightens the card padding; the fold panel still anchors
   below the row but inherits the slim padding. */
.zm-content-grid.zm-content-list .zm-card-foldable-row .zm-content-card { padding-right: 44px; }

/* Bottom pagination strip used by Inside-this-world tabs. */
.zm-pagination {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--zm-line-soft);
  gap: 14px; flex-wrap: wrap;
}
.zm-pagination-info {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
}
.zm-pagination-pages { display: inline-flex; align-items: center; gap: 4px; }
.zm-page-btn {
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  color: var(--zm-text-2);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  padding: 4px 10px; border-radius: 0;
  cursor: pointer; min-width: 28px;
}
.zm-page-btn:hover:not(:disabled) { border-color: var(--zm-text-4); color: var(--zm-text); }
.zm-page-btn.current {
  background: color-mix(in oklab, var(--zm-ember) 22%, var(--zm-surface));
  border-color: var(--zm-ember);
  color: var(--zm-text);
}
.zm-page-btn:disabled { opacity: 0.35; cursor: default; }
.zm-page-gap { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); padding: 0 4px; }
.zm-content-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
}
.zm-content-card:hover {
  border-color: var(--zm-text-4);
  transform: translateY(-1px);
}
.zm-content-card-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
}
.zm-content-glyph {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--zm-surface-hi); border-radius: 0;
  font-size: 14px;
}
.zm-content-id { min-width: 0; }
.zm-content-name {
  font-family: var(--zm-font-mono); font-size: 13px; font-weight: 600;
  color: var(--zm-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zm-content-type {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-3); text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 2px;
}
.zm-content-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--zm-surface-2); border-radius: 0;
  border-left: 2px solid var(--zm-line);
}
.zm-content-note {
  font-size: 13px; line-height: 1.45; color: var(--zm-text-2);
  font-style: normal;
}
.zm-content-foot {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: center;
}
.zm-content-meta {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.zm-content-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.zm-content-meta-item b {
  color: var(--zm-text); font-weight: 600;
}

/* ── Inside-this-world filter chips + sort selector ───────────────── */
.zm-inside-controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--zm-line-soft);
}
.zm-kind-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 0;
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: var(--zm-text-2); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.zm-kind-chip:hover { border-color: var(--zm-text-4); color: var(--zm-text); }
.zm-kind-chip.active {
  background: color-mix(in oklab, var(--zm-ember) 18%, var(--zm-surface));
  border-color: var(--zm-ember);
  color: var(--zm-text);
}
.zm-kind-chip-count { color: var(--zm-text-4); font-size: var(--zm-fs-10); }
.zm-sort-select {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: var(--zm-text-3); margin-left: auto;
}
.zm-sort-select select {
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  color: var(--zm-text);
  padding: 5px 10px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  cursor: pointer;
}

/* Inside section split */
.zm-inside-split {
  display: flex; align-items: baseline; gap: 24px;
  border-bottom: 1px solid var(--zm-line-soft);
  margin-bottom: 18px; padding-bottom: 0;
}
.zm-inside-tab {
  font-family: var(--zm-font-mono); font-size: 12px;
  color: var(--zm-text-3); padding: 10px 0; cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.zm-inside-tab.active { color: var(--zm-text); border-bottom-color: var(--zm-ember); }
.zm-inside-tab.import.active { border-bottom-color: var(--zm-trace); }
.zm-inside-tab-count { display: inline-block; margin-left: 6px; font-size: var(--zm-fs-10-5); color: var(--zm-text-4); }

/* ── Issue fold ──────────────────────────────────────────────────── */
.zm-issues-fold {
  border: 1px solid var(--zm-line-soft); border-radius: 0;
  background: var(--zm-surface);
  padding: 0;
}
.zm-issues-fold summary {
  cursor: pointer; padding: 12px 16px;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: var(--zm-text-3);
  list-style: none;
}
.zm-issues-fold summary::-webkit-details-marker { display: none; }
.zm-issues-fold summary::before {
  content: "▸"; display: inline-block; margin-right: 8px;
  transition: transform 0.15s; color: var(--zm-text-4);
}
.zm-issues-fold[open] summary::before { transform: rotate(90deg); }

/* ── Filter / parts-style chip row ─────────────────────────────────── */
.zm-parts-filter {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}
.zm-parts-chip {
  appearance: none; background: var(--zm-surface); border: 1px solid var(--zm-line);
  color: var(--zm-text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 10px; border-radius: 0;
  font-family: var(--zm-font-mono); font-size: 12px;
  text-transform: lowercase; text-decoration: none;
}
.zm-parts-chip:hover { color: var(--zm-text); border-color: var(--zm-text-4); }
.zm-parts-chip.active { background: var(--zm-text); color: var(--zm-bg); border-color: var(--zm-text); }
.zm-parts-chip-count {
  padding: 1px 7px; border-radius: 0;
  background: var(--zm-bg-3); color: var(--zm-text-3); font-size: var(--zm-fs-10-5);
}
.zm-parts-chip.active .zm-parts-chip-count { background: rgba(0,0,0,0.2); color: var(--zm-bg); }

/* ── Misc ─────────────────────────────────────────────────────────── */
.zm-divider { height: 1px; background: var(--zm-line-soft); margin: 16px 0; }
/* !critical:begin routes=* — empty + error states */
.zm-empty { color: var(--zm-text-4); font-family: var(--zm-font-mono); font-size: 12px; padding: 40px; text-align: center; }
.zm-error {
  background: color-mix(in oklab, var(--zm-down) 8%, var(--zm-surface));
  border: 1px solid color-mix(in oklab, var(--zm-down) 30%, var(--zm-line));
  border-radius: 0; padding: 18px 22px;
  max-width: 1100px; margin: 24px auto;
}
.zm-error h1, .zm-error h3 { margin: 0 0 6px; color: var(--zm-down); font-family: var(--zm-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.zm-error h1 { font-size: 15px; }
.zm-error p { margin: 0; color: var(--zm-text-2); font-size: 13.5px; }
/* The recovery links on the not-found page. */
.zm-error p.zm-error-ways { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.zm-error-ways a { color: var(--zm-text-1); border-bottom: 1px solid var(--zm-line); }
.zm-error-ways a:hover { border-bottom-color: currentColor; }
/* !critical:end */

/* !critical:begin routes=/login,/link,/verify-email,/forgot-password,/reset-password,/auth/oauth/finish,/oauth/consent — login + account form */
/* ── Login / form ─────────────────────────────────────────────────── */
.zm-form {
  max-width: 460px; margin: 64px auto;
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 32px;
}
.zm-form h1 { font-family: var(--zm-font-display); font-style: normal; font-size: 36px; margin: 0 0 8px; }
.zm-form p.lead { color: var(--zm-text-3); margin: 0 0 22px; font-size: 14px; }
.zm-form label { display: block; margin: 12px 0 6px; font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); letter-spacing: 0.06em; text-transform: uppercase; }
.zm-form input {
  width: 100%; padding: 10px 14px; border-radius: 0;
  background: var(--zm-bg-2); border: 1px solid var(--zm-line);
  color: var(--zm-text); font-family: var(--zm-font-mono); font-size: 13px; outline: 0;
}
.zm-form input:focus { border-color: var(--zm-ember); }
.zm-form .zm-btn { margin-top: 18px; width: 100%; justify-content: center; }

/* !critical:end */
/* !critical:begin routes=/worlds — explore search hits */
/* ── Discover / search hits ───────────────────────────────────────── */
.zm-hits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.zm-hit {
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
  text-decoration: none;
}
.zm-hit:hover { border-color: color-mix(in oklab, var(--zm-trace) 50%, var(--zm-line)); transform: translateY(-1px); }
.zm-hit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zm-hit-name { font-family: var(--zm-font-mono); font-size: 14px; font-weight: 600; color: var(--zm-text); }
.zm-hit-snippet {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-text-3);
  background: var(--zm-bg-2); padding: 8px 10px; border-radius: 0;
  border-left: 2px solid var(--zm-trace);
  white-space: pre-wrap; word-break: break-word;
}
.zm-hit-meta { display: flex; gap: 8px; font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); }

/* !critical:end */
/* ── List rows for refs / commits / manifest ──────────────────────── */
.zm-row-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.zm-row-list li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: var(--zm-text-2);
  padding: 6px 0;
  border-top: 1px solid var(--zm-line-soft);
}
.zm-row-list li:first-child { border-top: 0; }
.zm-row-list li code { font-size: var(--zm-fs-11-5); }

/* ── Deprecated legacy mappings (kept for transition) ──────────────── */
.app, .main, .topbar, .sidebar, .post-card, .post-body, .post-aside,
.post-chips, .post-title, .post-desc, .post-meta, .grid-2, .feed,
.section-title, .card.hero, .stats, .stat, .aside-card, .pill,
.btn, .vote-col, .page-head, .subtitle, .tabs, .browse-hero, .browse-tools,
.browse-page { /* fallback safety */ }

/* Only keep a barely-styled fallback for raw .card so legacy fragments
   are still readable while pages migrate. */
.card { background: var(--zm-surface); border: 1px solid var(--zm-line); border-radius: var(--zm-radius-lg); padding: 16px 18px; }
.card.hero { padding: 28px 32px; }
.card.state { padding: 28px; text-align: center; color: var(--zm-text-3); font-family: var(--zm-font-mono); font-size: 12.5px; }
.card.state.error { border-color: color-mix(in oklab, var(--zm-down) 30%, var(--zm-line)); background: color-mix(in oklab, var(--zm-down) 6%, var(--zm-surface)); }
.card.state h3, .card.state.error h3 { margin: 0 0 8px; color: var(--zm-text); font-family: var(--zm-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }


/* ===========================================================
 * PROFILE + SETTINGS — handoff from Claude Design (LaVToPC5LmWbWyrJW)
 * Tokens (--zm-bg/surface/line/text/ember/etc) already declared
 * at the top of this file; the design uses the same names so the
 * block below drops in without a token rewrite.
 * =========================================================== */

.zm-part-card {
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 14px 16px;
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center;
  text-align: left; cursor: pointer; transition: border-color .15s, transform .15s;
}
.zm-part-card:hover { border-color: var(--zm-text-4); }
.zm-part-glyph { font-size: 22px; text-align: center; opacity: 0.9; }
.zm-part-meta { min-width: 0; }
.zm-part-name { font-size: 13.5px; color: var(--zm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zm-part-sub { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); margin-top: 3px; }

/* !critical:begin routes=/users/*,/profile — profile identity rail + work column */
/* ── PROFILE PAGE ────────────────────────────────────────────────── */
/* ── Profile (/users/:handle) ─────────────────────────────────────────
   Two columns: a sticky identity rail on the left, the work on the right.
   The account's one personal colour (its signature hue) is the rule down
   the rail and the monogram tile; nothing else on the page is tinted by
   it. Facts are rows, not stat tiles; labels are sentence case; the world
   card carries its information in plain sight, not behind a hover. */
.zm-pr {
  max-width: 1400px; margin: 0 auto; padding: 36px 24px 72px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px;
  align-items: start;
}
.zm-pr-error { grid-column: 1 / -1; }

.zm-pr-rail {
  position: sticky; top: 84px;
  /* Bounded to the viewport: a rail taller than the window (bio, the owner's
     tools, the 3D stage) scrolls on its own once it pins, so the foot is
     reachable at any point of the page instead of only at its end. */
  max-height: calc(100vh - 84px - 24px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  border-left: 3px solid var(--zm-ember); padding-left: 22px;
  display: flex; flex-direction: column; gap: 22px;
  min-width: 0;
}
/* The cap must scroll the rail, not squash its blocks (the 112px avatar
   slot would otherwise shrink to fit). */
.zm-pr-rail > * { flex-shrink: 0; }
.zm-pr-avatar-slot { width: 112px; height: 112px; }
.zm-pr-3d {
  align-self: flex-start; margin-top: -12px;
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; color: var(--zm-text-3); cursor: pointer;
  border-bottom: 1px solid var(--zm-line);
}
.zm-pr-3d:hover { color: var(--zm-text); border-bottom-color: var(--zm-ember); }
.zm-pr-avatar {
  width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden;
  background: var(--zm-surface-2);
}
.zm-pr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zm-pr-avatar-mono {
  font-family: var(--zm-font-display); font-weight: 700;
  font-size: 46px; line-height: 1; letter-spacing: -0.02em;
  color: rgba(255,255,255,0.92);
}
.zm-pr-who { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.zm-pr-name {
  font-family: var(--zm-font-display); font-weight: 700; font-style: normal;
  font-size: 44px; line-height: 0.98; letter-spacing: -0.03em; margin: 0;
  color: var(--zm-text);
  /* Usernames are one unbreakable token: without a break opportunity the
     name spills past the rail and gives the page a horizontal scrollbar. */
  overflow-wrap: anywhere; min-width: 0;
}
.zm-pr-handle {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 14px; line-height: 1.4; color: var(--zm-text-3);
}
.zm-pr-handle-at { color: var(--zm-text-2); }
.zm-pr-handle-sep { color: var(--zm-text-4); }
.zm-pr-mark { font-size: 12px; font-weight: 500; line-height: 1.4; padding: 1px 7px; border: 1px solid; }
.zm-pr-mark.verified { color: var(--zm-up); border-color: color-mix(in oklab, var(--zm-up) 45%, transparent); }
.zm-pr-mark.admin { color: var(--zm-ember); border-color: color-mix(in oklab, var(--zm-ember) 45%, transparent); }
.zm-pr-bio { margin: 0; font-size: 15px; line-height: 1.55; color: var(--zm-text-2); max-width: 46ch; }
.zm-pr-operator { margin: 0; font-size: 14px; color: var(--zm-text-3); }
.zm-pr-operator a { color: var(--zm-text); text-decoration: none; border-bottom: 1px solid var(--zm-line); }
.zm-pr-operator a:hover { border-bottom-color: var(--zm-ember); }
.zm-pr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zm-pr-rail .zm-pf-3d-stage { margin: 0; }

.zm-pr-facts { margin: 0; display: flex; flex-direction: column; }
.zm-pr-fact {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--zm-line-soft);
}
.zm-pr-fact:first-child { border-top: 0; padding-top: 0; }
.zm-pr-fact dt { font-size: 13.5px; color: var(--zm-text-3); }
.zm-pr-fact dd {
  margin: 0; font-size: 14px; color: var(--zm-text); text-align: right;
  font-variant-numeric: tabular-nums;
}
.zm-pr-fact dd a { color: var(--zm-text); text-decoration: none; border-bottom: 1px solid var(--zm-line); }
.zm-pr-fact dd a:hover { border-bottom-color: var(--zm-ember); }
.zm-pr-fact-soft { color: var(--zm-text-4); }

.zm-pr-rail-foot {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--zm-line-soft);
}
.zm-pr-id { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--zm-text-4); }
.zm-pr-id code {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: var(--zm-text-3); word-break: break-all;
}
.zm-pr-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.zm-pr-tools a, .zm-pr-tools button {
  color: var(--zm-text-3); background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-decoration: none;
}
.zm-pr-tools a:hover, .zm-pr-tools button:hover { color: var(--zm-text); }

/* Work column */
.zm-pr-work { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.zm-pr-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--zm-line); }
.zm-pr-tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; cursor: pointer;
  font-family: var(--zm-font-sans); font-size: 14px; font-weight: 500; color: var(--zm-text-3);
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.zm-pr-tab:hover { color: var(--zm-text); }
.zm-pr-tab.is-active { color: var(--zm-text); border-bottom-color: var(--zm-ember); }
.zm-pr-tab-n { font-size: 12.5px; color: var(--zm-text-4); font-variant-numeric: tabular-nums; }
.zm-pr-tab.is-active .zm-pr-tab-n { color: var(--zm-ember); }

.zm-pr-block { display: flex; flex-direction: column; gap: 18px; }
.zm-pr-block + .zm-pr-block { margin-top: 20px; }
.zm-pr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; }
.zm-pr-h2 {
  font-family: var(--zm-font-display); font-weight: 700; font-style: normal;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
.zm-pr-note { margin: 0; flex-basis: 100%; font-size: 14px; line-height: 1.5; color: var(--zm-text-3); max-width: 64ch; }

/* Unpublished changes */
.zm-pr-pending { display: flex; flex-direction: column; }
.zm-pr-pending-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--zm-line-soft);
  text-decoration: none; color: inherit;
}
.zm-pr-pending-row:first-child { border-top: 0; padding-top: 0; }
.zm-pr-pending-title {
  font-size: 14.5px; font-weight: 500; color: var(--zm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zm-pr-pending-meta { font-size: 13px; color: var(--zm-text-3); font-variant-numeric: tabular-nums; }
.zm-pr-pending-go { font-size: 13px; color: var(--zm-ember); }
.zm-pr-pending-row:hover .zm-pr-pending-title { color: var(--zm-ember); }

/* World cards */
.zm-pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; }
.zm-pr-card { display: block; color: inherit; text-decoration: none; min-width: 0; }
.zm-pr-card-cover {
  aspect-ratio: 16 / 10; border: 1px solid var(--zm-line); border-radius: 0;
  transition: border-color .15s;
}
.zm-pr-card:hover .zm-pr-card-cover, .zm-pr-card:focus-visible .zm-pr-card-cover { border-color: var(--zm-ember); }
.zm-pr-card-plays {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 8px; font-size: 12px; color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}
.zm-pr-card-title {
  font-family: var(--zm-font-display); font-weight: 700; font-style: normal;
  font-size: 17px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 12px 0 0; color: var(--zm-text); overflow-wrap: anywhere;
}
.zm-pr-card:hover .zm-pr-card-title { color: var(--zm-ember); }
.zm-pr-card-desc {
  margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--zm-text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zm-pr-card-meta {
  margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-size: 12.5px; color: var(--zm-text-4);
}
.zm-pr-card-vis { padding: 0 6px; border: 1px solid var(--zm-line); color: var(--zm-text-3); }
.zm-pr-list { display: flex; flex-direction: column; gap: 10px; }

/* Activity */
.zm-pr-acts { display: flex; flex-direction: column; }
.zm-pr-act {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--zm-line-soft);
  font-size: 14px; line-height: 1.5;
}
.zm-pr-act:first-child { border-top: 0; padding-top: 0; }
.zm-pr-act-glyph { color: var(--zm-text-4); text-align: center; }
.zm-pr-act-verb { color: var(--zm-text-3); }
.zm-pr-act-target { color: var(--zm-text); text-decoration: none; border-bottom: 1px solid var(--zm-line); }
.zm-pr-act-target:hover { border-bottom-color: var(--zm-ember); }
.zm-pr-act-when { font-size: 12.5px; color: var(--zm-text-4); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .zm-pr { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
  .zm-pr-rail { position: static; max-height: none; overflow: visible; }
  .zm-pr-name { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .zm-pr-tab, .zm-pr-card-cover { transition: none; }
}

/* 3D avatar stage (profile rail + settings) */
.zm-pf-3d-stage {
  margin: 4px 0 26px; display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
}
.zm-pf-3d-frame {
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 5;
  background: radial-gradient(120% 90% at 50% 0%, oklch(0.26 0.04 250) 0%, oklch(0.12 0.02 250) 72%);
  border: 1px solid var(--zm-line); overflow: hidden;
}
.zm-pf-3d-cap {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); color: var(--zm-text-4);
  letter-spacing: 0.04em;
}
.zm-btn.icon { width: 38px; padding: 0; display: grid; place-items: center; font-size: 16px; }

/* !critical:end */
/* ── BOTS ────────────────────────────────────────────────────────── */
.zm-bot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; margin-top: 14px;
}
.zm-bot-card {
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s, transform .15s;
}
.zm-bot-card:hover { border-color: oklch(0.55 0.18 44 / 0.4); }
/* Clickable bot cards (profile strip + bots tab) link to the bot's
   account profile. Reset link chrome and lift slightly on hover. */
a.zm-bot-card-link { text-decoration: none; color: inherit; cursor: pointer; }
a.zm-bot-card-link:hover { transform: translateY(-1px); }
.zm-bot-head { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }
.zm-bot-mark {
  width: 36px; height: 36px; border-radius: 0; display: grid; place-items: center;
  font-size: 16px; color: var(--zm-agent);
  background: oklch(0.55 0.18 44 / 0.14); border: 1px solid oklch(0.55 0.18 44 / 0.3);
}
.zm-bot-handle { font-family: var(--zm-font-mono); font-size: 13.5px; color: var(--zm-text); }
.zm-bot-kind { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); margin-top: 2px; }
.zm-bot-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3);
}
.zm-bot-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--zm-up); box-shadow: 0 0 3px var(--zm-up); }
.zm-bot-note { color: var(--zm-text-2); font-size: 13.5px; line-height: 1.5; }
.zm-bot-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--zm-line-soft);
}
.zm-bot-foot-l { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); }
.zm-bot-foot-r { display: flex; gap: 10px; }

/* Inline register-bot form */
.zm-bot-new {
  background: var(--zm-surface-2, oklch(0.13 0.01 28));
  border: 1px dashed var(--zm-line); border-radius: var(--zm-radius-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 14px;
}
.zm-bot-new-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zm-bot-new-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.zm-bot-new-hint { color: var(--zm-text-4); font-size: 12px; max-width: 60ch; line-height: 1.5; }

/* ── FIELDS / INPUTS ─────────────────────────────────────────────── */
.zm-field { display: flex; flex-direction: column; gap: 6px; }
.zm-field-label {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-4); text-transform: uppercase; letter-spacing: 0.08em;
}
.zm-input {
  background: var(--zm-bg); border: 1px solid var(--zm-line);
  border-radius: 0; padding: 10px 12px;
  color: var(--zm-text); font-family: var(--zm-font-mono); font-size: 13px;
  transition: border-color .15s, background .15s;
  width: 100%;
}
textarea.zm-input { font-family: var(--zm-font-sans); font-size: 14px; line-height: 1.55; resize: vertical; }
.zm-input:focus { outline: none; border-color: var(--zm-ember); background: var(--zm-bg); }
.zm-input::placeholder { color: var(--zm-text-4); }
.zm-field-hint { font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); color: var(--zm-text-4); }

/* 3D avatar editor (settings · profile tab) */
.zm-av-enable {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-size: 13.5px; color: var(--zm-text-2); cursor: pointer;
}
.zm-av-enable input { width: 16px; height: 16px; accent-color: var(--zm-ember); cursor: pointer; }
.zm-av-grid {
  display: grid; grid-template-columns: 1fr 240px; gap: 22px; align-items: start;
  margin-bottom: 4px;
}
.zm-av-controls { display: flex; flex-direction: column; gap: 16px; }
.zm-av-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zm-av-color {
  width: 44px; height: 30px; padding: 0; border: 1px solid var(--zm-line);
  background: none; cursor: pointer;
}
.zm-av-range { flex: 1; min-width: 120px; accent-color: var(--zm-ember); cursor: pointer; }
.zm-av-preview { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.zm-av-preview-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
  text-align: center; padding: 14px;
}
@media (max-width: 720px) {
  .zm-av-grid { grid-template-columns: 1fr; }}

/* Scope pills */
.zm-scope-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.zm-scope-label {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); color: var(--zm-text-4);
  text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px;
}
.zm-scope-pill {
  background: transparent !important;
  border: 1px solid var(--zm-line) !important;
  color: var(--zm-text-3) !important;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5);
  padding: 5px 11px 5px 9px; border-radius: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: all .15s;
}
.zm-scope-pill:hover { color: var(--zm-text) !important; border-color: var(--zm-text-4) !important; }
.zm-scope-pill .zm-scope-dot {
  width: 8px; height: 8px; border-radius: 50%; background: transparent;
  border: 1px solid var(--zm-text-4);
  transition: all .15s;
}
.zm-scope-pill.on {
  color: var(--zm-ember) !important;
  border-color: oklch(0.62 0.18 32 / 0.5) !important;
  background: oklch(0.62 0.18 32 / 0.08) !important;
}
.zm-scope-pill.on .zm-scope-dot { background: var(--zm-ember); border-color: var(--zm-ember); box-shadow: 0 0 3px var(--zm-ember); }

/* ── SETTINGS PAGE ───────────────────────────────────────────────── */
/* !critical:begin routes=/settings — settings page shell */
.zm-pf-settings { max-width: 1200px; margin: 0 auto; padding: 36px 24px 64px; }
/* !critical:end */

.zm-st-head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  margin-bottom: 28px;
}
.zm-st-title {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 56px; line-height: 1; margin: 8px 0 12px; letter-spacing: -0.025em;
}

.zm-st-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start;
}

.zm-st-nav {
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 80px;
}
.zm-st-nav-item {
  background: transparent !important; border: 0 !important; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; border-radius: 0; text-align: left;
  transition: background .15s;
}
.zm-st-nav-item:hover { background: var(--zm-line-soft) !important; }
.zm-st-nav-item.is-active {
  background: oklch(0.62 0.18 32 / 0.1) !important;
}
.zm-st-nav-item.is-active .zm-st-nav-label { color: var(--zm-ember); }
.zm-st-nav-label {
  font-size: 14px; color: var(--zm-text); font-weight: 500;
}
.zm-st-nav-desc {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); color: var(--zm-text-4);
}
.zm-st-nav-item.danger .zm-st-nav-label { color: var(--zm-text-2); }
.zm-st-nav-item.danger.is-active { background: oklch(0.55 0.22 18 / 0.12) !important; }
.zm-st-nav-item.danger.is-active .zm-st-nav-label { color: oklch(0.7 0.2 18); }

.zm-st-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.zm-st-card {
  background: var(--zm-surface); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); padding: 24px 26px;
}
.zm-st-card.danger {
  border-color: oklch(0.55 0.22 18 / 0.3);
  background: linear-gradient(180deg, oklch(0.55 0.22 18 / 0.04), transparent);
}
.zm-st-card-head { margin-bottom: 22px; }
.zm-st-card-head h2 {
  margin: 0; font-family: var(--zm-font-display); font-style: normal;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 12px;
}
.zm-st-card-head p {
  color: var(--zm-text-3); font-size: 13.5px; margin: 8px 0 0; line-height: 1.55;
  max-width: 70ch;
}
.zm-st-card-head code {
  font-family: var(--zm-font-mono); font-size: 12px; color: var(--zm-text-2);
  background: var(--zm-line-soft); padding: 2px 6px; border-radius: 0;
}
.zm-st-badge {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-4); padding: 3px 9px; border-radius: 0;
  background: var(--zm-line-soft); border: 1px solid var(--zm-line);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-style: normal;
}

/* Identity card */
.zm-st-id-grid { display: flex; flex-direction: column; }
.zm-st-id-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--zm-line-soft);
}
.zm-st-id-row:first-child { border-top: 0; padding-top: 0; }
.zm-st-id-l {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.zm-st-id-r { color: var(--zm-text); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.zm-st-id-r.mono { font-family: var(--zm-font-mono); font-size: 13px; }
.zm-st-id-code {
  font-family: var(--zm-font-mono); font-size: 12.5px; color: var(--zm-ember);
  background: oklch(0.62 0.18 32 / 0.08); padding: 5px 10px; border-radius: 0;
  border: 1px solid oklch(0.62 0.18 32 / 0.2);
  letter-spacing: 0.04em;
}

.zm-st-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zm-st-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--zm-line-soft);
}

/* Hue swatches */
.zm-hue-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.zm-hue-swatch {
  width: 36px; height: 36px; border-radius: 0;
  border: 2px solid transparent !important;
  cursor: pointer; transition: transform .15s, border-color .15s;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.95); font-size: 14px;
  padding: 0 !important;
}
.zm-hue-swatch:hover { transform: scale(1.06); }
.zm-hue-swatch.is-active { border-color: var(--zm-text) !important; box-shadow: 0 0 0 2px var(--zm-bg), 0 0 0 4px var(--zm-text); }

/* Tokens */
.zm-token-new {
  background: var(--zm-surface-2, oklch(0.13 0.01 28));
  border: 1px dashed var(--zm-line); border-radius: var(--zm-radius-lg);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 18px;
}
.zm-token-new-head {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.zm-token-reveal {
  background: oklch(0.55 0.16 78 / 0.06);
  border: 1px solid oklch(0.55 0.16 78 / 0.4);
  border-radius: var(--zm-radius-lg); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.zm-token-reveal-head {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-up);
  display: flex; align-items: center; gap: 8px; letter-spacing: 0.04em;
}
.zm-token-reveal-code {
  font-family: var(--zm-font-mono); font-size: 13.5px; color: var(--zm-text);
  background: var(--zm-bg); padding: 12px 14px; border-radius: 0;
  border: 1px solid var(--zm-line); word-break: break-all;
  letter-spacing: 0.02em;
}
.zm-token-reveal-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}

.zm-token-list {
  border: 1px solid var(--zm-line); border-radius: var(--zm-radius-lg);
  overflow: hidden;
}
.zm-token-list-head, .zm-token-row {
  display: grid; grid-template-columns: 2fr 2fr 1.2fr 1.4fr 1.2fr;
  gap: 14px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--zm-line-soft);
}
.zm-token-list-head {
  border-top: 0; background: var(--zm-line-soft);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); color: var(--zm-text-4);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.zm-token-label { font-size: 13.5px; color: var(--zm-text); font-weight: 500; }
.zm-token-prefix { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-text-4); margin-top: 2px; display: block; }
.zm-token-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.zm-token-meta { font-size: 12px; color: var(--zm-text-3); }
.zm-token-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Charter */
.zm-charter-doc { display: flex; flex-direction: column; }
.zm-charter-line {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--zm-line-soft);
  font-size: 14px; color: var(--zm-text-2); line-height: 1.5;
}
.zm-charter-line:first-child { border-top: 0; padding-top: 0; }
.zm-charter-k {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4);
  text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px;
}

/* Danger zone */
.zm-danger-row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--zm-line-soft);
}
.zm-danger-row:first-of-type { border-top: 0; padding-top: 0; }
.zm-danger-title { font-size: 14.5px; color: var(--zm-text); font-weight: 500; }
.zm-danger-sub { font-size: 13px; color: var(--zm-text-3); margin-top: 4px; line-height: 1.5; max-width: 60ch; }
.zm-btn.danger {
  color: oklch(0.7 0.2 18) !important;
  border-color: oklch(0.55 0.22 18 / 0.4) !important;
  background: oklch(0.55 0.22 18 / 0.08) !important;
}
.zm-btn.danger:hover {
  background: oklch(0.55 0.22 18 / 0.16) !important;
}

/* Link buttons */
.zm-link-btn {
  background: transparent !important; border: 0 !important;
  color: var(--zm-text-3) !important; cursor: pointer;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5);
  padding: 4px 8px; border-radius: 0;
  transition: color .15s, background .15s;
}
.zm-link-btn:hover { color: var(--zm-text) !important; background: var(--zm-line-soft) !important; }
.zm-link-btn.danger { color: oklch(0.7 0.2 18 / 0.85) !important; }
.zm-link-btn.danger:hover { color: oklch(0.75 0.22 18) !important; background: oklch(0.55 0.22 18 / 0.12) !important; }

/* Vote-active state — applied to the comment ▲/▼ buttons when the
   viewer's own vote is on that arrow. Persists across page refresh
   because the server returns viewer_vote per comment for authed
   callers. Without this the user couldn't tell which way they'd
   voted on each thread row. */
.zm-link-btn.zm-vote-active.up   { color: var(--zm-up)   !important; background: color-mix(in oklab, var(--zm-up)   18%, transparent) !important; }
.zm-link-btn.zm-vote-active.down { color: var(--zm-down) !important; background: color-mix(in oklab, var(--zm-down) 18%, transparent) !important; }

.zm-btn.sm { padding: 6px 12px; font-size: 12.5px; }
.zm-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.mono.ember { color: var(--zm-ember); }

/* !critical:begin routes=* — empty state, overriding definition */
.zm-empty {
  text-align: center; padding: 36px 0; color: var(--zm-text-4);
  font-family: var(--zm-font-mono); font-size: 12.5px;
}
/* !critical:end */

/* ── CREDITS PAGE ─────────────────────────────────────────────────── */
/* Plans and credits. The plan panels are the one loud thing on the page:
   three square panels, the prices in display type, the middle one edged
   in ember. Everything else (balance strip, ledger, budgets) is quiet. */
/* !critical:begin routes=/credits — credits page shell, title, strip, plans */
.zm-credits-page { max-width: 960px; margin: 0 auto; padding: 36px 24px 64px; }
.zm-credits-head { margin: 4px 0 26px; }
.zm-credits-title {
  font-family: var(--zm-font-display);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1;
  margin: 0 0 10px;
  color: #fff;
}
.zm-credits-lead {
  margin: 0; max-width: 62ch;
  font-size: 15px; line-height: 1.5;
  color: var(--zm-text-3);
}
.zm-credits-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px;
  border: 1px solid var(--zm-line); background: var(--zm-surface);
  padding: 20px 22px; margin-bottom: 30px;
}
.zm-credits-balance-block { display: flex; align-items: baseline; gap: 10px; }
.zm-credits-balance {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 44px; line-height: 1; letter-spacing: -0.025em;
  color: var(--zm-ember);
}
.zm-credits-balance-unit { font-size: 14px; color: var(--zm-text-3); }
.zm-credits-strip-notes { display: flex; flex-direction: column; gap: 3px; }
.zm-credits-strip-note { font-size: 13px; color: var(--zm-text-2); }
.zm-plans { margin-bottom: 40px; }
.zm-plans-title {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 22px; margin: 0 0 14px; letter-spacing: -0.02em;
}
.zm-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zm-plan {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px 22px 22px;
  border: 1px solid var(--zm-line); background: var(--zm-surface);
}
.zm-plan-featured { border-color: var(--zm-ember); box-shadow: inset 0 3px 0 var(--zm-ember); }
.zm-plan-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--zm-text); }
.zm-plan-price { display: flex; align-items: baseline; gap: 8px; }
.zm-plan-price-amount {
  font-family: var(--zm-font-display); font-weight: 700;
  font-size: clamp(38px, 4vw, 52px); line-height: 1; letter-spacing: -0.03em; color: #fff;
}
.zm-plan-price-per { font-size: 14px; color: var(--zm-text-3); }
.zm-plan-credits { display: flex; flex-direction: column; gap: 2px; }
.zm-plan-credits-amount {
  font-family: var(--zm-font-mono); font-size: 20px; color: var(--zm-ember);
}
.zm-plan-credits-per { font-size: 13px; color: var(--zm-text-3); }
.zm-plan-action { margin-top: auto; }
.zm-plan-cta { display: inline-flex; width: 100%; justify-content: center; box-sizing: border-box; }
.zm-plan-current {
  display: inline-flex; width: 100%; justify-content: center; box-sizing: border-box;
  padding: 9px 14px; border: 1px solid var(--zm-line);
  font-size: 13px; color: var(--zm-text-3);
}
.zm-plans-note { margin: 14px 0 0; max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--zm-text-3); }
.zm-credits-signin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--zm-line); background: var(--zm-surface);
  padding: 16px 20px; margin-bottom: 30px;
  font-size: 14px; color: var(--zm-text-2);
}
@media (max-width: 760px) {
  .zm-plans-grid { grid-template-columns: 1fr; }
  .zm-credits-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* !critical:end */

.zm-credits-section { margin-bottom: 34px; }
.zm-credits-section h2 {
  font-family: var(--zm-font-display); font-style: normal;
  font-size: 22px; margin: 0 0 14px; letter-spacing: -0.02em;
}

.zm-txn-table-wrap { overflow-x: auto; border: 1px solid var(--zm-line); }
.zm-txn-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--zm-font-mono); font-size: 12.5px; color: var(--zm-text-2);
}
.zm-txn-table thead tr {
  text-align: left; color: var(--zm-text-4); font-size: var(--zm-fs-10-5);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--zm-surface-2);
}
.zm-txn-table th, .zm-txn-table td { padding: 10px 12px; white-space: nowrap; }
.zm-txn-table tbody tr { border-top: 1px solid var(--zm-line-soft); }
.zm-txn-cost.neg { color: var(--zm-down); }
.zm-txn-cost.pos { color: var(--zm-up); }

.zm-budget-list { display: flex; flex-direction: column; gap: 12px; }
.zm-budget-row {
  display: grid; grid-template-columns: 140px 1fr 160px 100px auto;
  align-items: center; gap: 14px;
  border: 1px solid var(--zm-line); background: var(--zm-surface);
  padding: 12px 16px;
}
.zm-budget-name { font-size: 14px; color: var(--zm-text); font-weight: 500; }
.zm-budget-bar-wrap {
  height: 6px; background: var(--zm-line-soft); overflow: hidden;
}
.zm-budget-bar { height: 100%; background: var(--zm-ember); }
.zm-budget-nums {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); color: var(--zm-text-3);
  white-space: nowrap;
}
.zm-budget-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  background: var(--zm-bg-2); border: 1px solid var(--zm-line);
  color: var(--zm-text); font-size: 13px;
}
@media (max-width: 720px) {
  .zm-budget-row { grid-template-columns: 1fr; }}

/* ──────────────────────────────────────────────────────────────────
   Asset (part) detail — design pass 2026-05-06.
   Tabs, agent-review block, files/sub-parts/ratings tabs, version
   sidebar. Visual language is shared with world-detail; the `pdr`
   prefix ("part-detail") matches the upstream JSX.
   ────────────────────────────────────────────────────────────────── */
.zm-pdr-block {
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--zm-ember) 5%, transparent), transparent 60%), var(--zm-surface);
}
.zm-pdr-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  align-items: start;
}
.zm-pdr-review-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-3); letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--zm-line);
}
.zm-pdr-review-eyebrow-mark { color: var(--zm-agent); font-size: 13px; }
.zm-pdr-axes { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zm-pdr-ax-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.zm-pdr-ax-label { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.zm-pdr-ax-val { font-family: var(--zm-font-display); font-size: 22px; font-weight: 600; }
.zm-pdr-ax-bar {
  height: 6px; border-radius: 0;
  background: color-mix(in oklab, var(--zm-line) 60%, transparent);
  overflow: hidden;
  margin-bottom: 6px;
}
.zm-pdr-ax-bar i { display: block; height: 100%; border-radius: 0; transition: width 0.4s ease; }
.zm-pdr-ax-desc { font-size: var(--zm-fs-11); color: var(--zm-text-4); line-height: 1.4; }

.zm-pdr-overall {
  border-left: 1px solid var(--zm-line);
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.zm-pdr-overall-eyebrow { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.zm-pdr-overall-num {
  font-family: var(--zm-font-display);
  font-size: 64px; font-weight: 600; font-style: normal;
  line-height: 1; margin-top: 4px;
}
.zm-pdr-overall-scale { font-family: var(--zm-font-mono); font-size: 12px; color: var(--zm-text-4); margin-top: -4px; }
.zm-pdr-overall-passes { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); margin: 6px 0 8px; }
.zm-pdr-overall-formula {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--zm-line);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: var(--zm-text-4); line-height: 1.7;
}
.zm-pdr-empty-block {
  font-size: 13px; color: var(--zm-text-3); line-height: 1.55;
  max-width: 56ch;
}

/* Tabs */
.zm-pdr-tabs-shell { margin-top: 28px; }
.zm-pdr-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--zm-line);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.zm-pdr-tab {
  background: transparent; border: 0;
  padding: 10px 16px;
  font-family: var(--zm-font-mono); font-size: 12px;
  color: var(--zm-text-3); letter-spacing: 0.04em;
  text-transform: lowercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.zm-pdr-tab:hover { color: var(--zm-text); }
.zm-pdr-tab.active { color: var(--zm-ember); border-bottom-color: var(--zm-ember); }
.zm-pdr-tab-count {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
  color: var(--zm-text-4);
  padding: 1px 6px;
  border: 1px solid var(--zm-line);
  border-radius: 0;
}
.zm-pdr-tab.active .zm-pdr-tab-count { color: var(--zm-ember); border-color: color-mix(in oklab, var(--zm-ember) 45%, var(--zm-line)); }
.zm-pdr-tab-body { min-height: 120px; }

.zm-pdr-files-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.zm-pdr-files-head h3 {
  font-family: var(--zm-font-display);
  font-size: 22px; font-style: normal; font-weight: 500;
  margin: 0 0 4px;
}
.zm-pdr-files-head p { font-size: 13px; color: var(--zm-text-3); margin: 0; max-width: 60ch; }
.zm-pdr-empty {
  border: 1px dashed var(--zm-line);
  border-radius: 0;
  padding: 28px;
  text-align: center;
  color: var(--zm-text-3);
  font-size: 14px;
}

/* Files tab */
.zm-pdr-files {
  border: 1px solid var(--zm-line);
  border-radius: 0;
  overflow: hidden;
}
.zm-pdr-file {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--zm-line) 60%, transparent);
  font-size: 13px;
}
.zm-pdr-file:last-child { border-bottom: 0; }
.zm-pdr-file:hover { background: color-mix(in oklab, var(--zm-ember) 4%, transparent); }
.zm-pdr-file-icon { color: var(--zm-text-3); text-align: center; font-size: 13px; }
.zm-pdr-file-path { font-size: 12.5px; color: var(--zm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--zm-font-mono); }
.zm-pdr-file-kind {
  font-size: var(--zm-fs-10-5); color: var(--zm-text-4);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px;
  border: 1px solid var(--zm-line);
  border-radius: 0;
  font-family: var(--zm-font-mono);
}
.zm-pdr-file-size { font-size: var(--zm-fs-11); color: var(--zm-text-3); min-width: 60px; text-align: right; font-family: var(--zm-font-mono); }

/* Sub-parts tab */
.zm-pdr-subparts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.zm-pdr-subpart {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--zm-line);
  border-radius: 0;
  background: var(--zm-surface);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.zm-pdr-subpart:hover {
  border-color: color-mix(in oklab, var(--zm-ember) 50%, var(--zm-line));
  transform: translateY(-1px);
}
.zm-pdr-subpart-glyph {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 18px; color: var(--zm-ember);
  border: 1px solid var(--zm-line); border-radius: 0;
  background: color-mix(in oklab, var(--zm-ember) 6%, transparent);
}
.zm-pdr-subpart-name { font-size: 13.5px; color: var(--zm-text); font-weight: 500; }
.zm-pdr-subpart-type { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); margin-top: 2px; }
.zm-pdr-subpart-score { color: var(--zm-up); font-family: var(--zm-font-mono); font-size: 12px; }

/* Ratings tab */
.zm-pdr-ratings-summary { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.zm-pdr-ratings-num { font-family: var(--zm-font-display); font-size: 38px; font-weight: 600; font-style: normal; line-height: 1; }
.zm-pdr-ratings-pct { font-size: 18px; color: var(--zm-text-4); margin-left: 2px; }
.zm-pdr-ratings-count { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); margin-top: 4px; }
.zm-pdr-ratings-bars {
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 16px 18px;
  background: var(--zm-surface);
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 22px;
}
.zm-pdr-ratings-row {
  display: grid; grid-template-columns: 200px 1fr 130px;
  gap: 14px; align-items: center;
  font-size: 13px;
}
.zm-pdr-ratings-label { color: var(--zm-text-2); font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5); }
.zm-pdr-ratings-bar {
  height: 8px; border-radius: 0;
  background: color-mix(in oklab, var(--zm-line) 50%, transparent);
  overflow: hidden;
}
.zm-pdr-ratings-bar i { display: block; height: 100%; transition: width 0.4s ease; }
.zm-activity-feed { display: flex; flex-direction: column; }
.zm-activity-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--zm-line);
  font-size: 13px;
}
.zm-activity-row:last-child { border-bottom: none; }
.zm-activity-glyph { font-family: var(--zm-font-mono); width: 16px; text-align: center; flex: none; }
.zm-activity-body { flex: 1; min-width: 0; }
.zm-activity-actor { color: var(--zm-text); font-weight: 600; text-decoration: none; }
.zm-activity-actor:hover { color: var(--zm-ember); }
.zm-activity-summary { color: var(--zm-text-3); margin-left: 8px; }
.zm-activity-when { color: var(--zm-text-4); font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); flex: none; }
.zm-pdr-ratings-val { font-family: var(--zm-font-mono); font-size: 12px; text-align: right; }
button.zm-pdr-ratings-row:not(:disabled):hover { background: color-mix(in oklab, var(--zm-line) 30%, transparent); }
.zm-rating-mine { background: color-mix(in oklab, var(--zm-ember) 12%, transparent); outline: 1px solid color-mix(in oklab, var(--zm-ember) 40%, transparent); }
.zm-rating-mine .zm-pdr-ratings-label { color: var(--zm-ember); }
.zm-pdr-ratings-h { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); letter-spacing: 0.08em; text-transform: uppercase; margin: 8px 0 12px; }

/* Mini agent-review header — single-line summary above the asset
   tabs. Click anywhere to open the Agent review tab. */
.zm-pdr-mini-review {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 10px 14px;
  margin: 6px 0 18px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.zm-pdr-mini-review:hover {
  border-color: color-mix(in oklab, var(--zm-ember) 30%, var(--zm-line));
  background: color-mix(in oklab, var(--zm-ember) 3%, var(--zm-surface));
}
.zm-pdr-mini-review-mark {
  color: var(--zm-agent);
  font-size: 14px;
}

/* Per-comment vote / reply / cite — WIP-styled action row beneath
   each comment body. Inline score chip lives in the comment head. */
.zm-comment-score {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
  padding: 1px 6px;
  border: 1px solid var(--zm-line);
  border-radius: 0;
}
.zm-comment-actions {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
}
.zm-comment-actions .zm-link-btn { padding: 2px 8px; }

/* Threaded comments — children container under each comment + cite
   highlight class applied for ~2s when a comment is targeted by a
   `#comment-{id}` URL hash. */
.zm-comment-children { margin-top: 8px; }
.zm-comment-cited {
  background: var(--zm-surface-2);
  outline: 1px solid var(--zm-ember);
  outline-offset: 4px;
  border-radius: 0;
  transition: background 250ms ease, outline-color 250ms ease;
}
.zm-comment-reply-form { margin: 10px 0 4px; }
/* !critical:begin routes=/community,/users — people listing rows */
.zm-comment-reply-form textarea { min-height: 48px; }

/* Users leaderboard rows. Three-column grid: rank chip | avatar+meta |
   score block. Hover lifts the row slightly, click goes to the
   profile. */
.zm-userrank-list {
  display: flex; flex-direction: column; gap: 8px;
}
.zm-userrank-row {
  display: grid;
  grid-template-columns: 56px 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 80ms ease, border-color 120ms ease;
}
.zm-userrank-row:hover {
  border-color: var(--zm-ember);
  transform: translateY(-1px);
}
.zm-userrank-rank {
  font-family: var(--zm-font-mono);
  font-size: 13px;
  color: var(--zm-text-3);
  text-align: right;
  font-feature-settings: "tnum";
}
.zm-userrank-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: rgba(255,255,255,0.92);
}
.zm-userrank-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zm-userrank-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.zm-userrank-name {
  font-family: var(--zm-font-serif);
  font-size: 17px;
  color: var(--zm-text);
}
.zm-userrank-handle {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5);
  color: var(--zm-text-3);
}
.zm-userrank-kind {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zm-text-4);
  border: 1px solid var(--zm-line-soft);
  padding: 1px 6px;
  border-radius: 0;
}
.zm-userrank-stats {
  display: flex; gap: 18px;
  flex-wrap: wrap;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5);
  color: var(--zm-text-3);
  font-feature-settings: "tnum";
}
.zm-userrank-stats > span {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.zm-userrank-stats b {
  color: var(--zm-text);
  font-weight: 600;
}
.zm-userrank-stat-glyph {
  color: var(--zm-text-3);
  font-size: 12px;
}
.zm-userrank-stat-label {
  color: var(--zm-text-4);
  font-size: var(--zm-fs-10-5);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
/* Kind filter (all / humans / agents) above the leaderboard list. */
.zm-userrank-filterbar {
  display: flex; gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  width: fit-content;
}
.zm-userrank-filter {
  appearance: none;
  background: transparent; border: 0;
  color: var(--zm-text-3); cursor: pointer;
  padding: 6px 14px;
  border-radius: 0;
  font: inherit;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  transition: background 80ms ease, color 80ms ease;
}
.zm-userrank-filter:hover { color: var(--zm-text); }
.zm-userrank-filter.is-active {
  background: var(--zm-surface);
  color: var(--zm-text);
  border: 1px solid var(--zm-line-soft);
}
.zm-userrank-score {
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px;
}
.zm-userrank-score-num {
  font-family: var(--zm-font-serif);
  font-size: 22px;
  color: var(--zm-text);
  line-height: 1;
}
.zm-userrank-score-label {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10);
  color: var(--zm-text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* !critical:end */
/* !critical:begin routes=/packages,/vibes,/vibes/new,/categories/*,/community,/users,/worlds/*,/world/* — side card + versions sidebar */
/* Side-card: shared between part + world sidebars. */
.zm-side-card {
  background: var(--zm-surface);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 14px 16px;
}
.zm-side-card h3 {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--zm-text-3);
  margin: 0 0 10px;
}
.zm-side-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  font-size: 12.5px;
}
.zm-side-row-l { color: var(--zm-text-3); font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); }
.zm-side-row-r { color: var(--zm-text); }

/* Versions sidebar (shared shape with world recent commits) */
.zm-pdr-versions { display: flex; flex-direction: column; gap: 0; }
.zm-pdr-version { padding: 10px 0; border-bottom: 1px dashed var(--zm-line); }
.zm-pdr-version:last-child { border-bottom: 0; }
.zm-pdr-version.head .zm-pdr-version-tag { color: var(--zm-ember); }
.zm-pdr-version-tag {
  font-family: var(--zm-font-mono);
  font-size: 12.5px; font-weight: 500;
  color: var(--zm-text);
  display: flex; align-items: center;
}
.zm-pdr-version-head-pill {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
  color: var(--zm-live);
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.zm-pdr-version-meta { display: flex; gap: 10px; margin-top: 2px; font-size: var(--zm-fs-10-5); color: var(--zm-text-4); font-family: var(--zm-font-mono); }
.zm-pdr-version-change { font-size: 12px; color: var(--zm-text-3); margin-top: 4px; line-height: 1.45; }

@media (max-width: 920px) {
  .zm-pdr-grid { grid-template-columns: 1fr; }
  .zm-pdr-overall { border-left: 0; padding-left: 0; border-top: 1px solid var(--zm-line); padding-top: 16px; }
  .zm-pdr-subparts { grid-template-columns: 1fr; }}
@media (max-width: 720px) {
  .zm-pdr-ratings-row { grid-template-columns: 1fr; gap: 4px; }}

/* !critical:end */
/* ──────────────────────────────────────────────────────────────────
   World detail — segmented controls, parts grid, commit list, cast.
   Same `pdr-tabs-shell` is reused; world-specific extras under `wdr-`.
   ────────────────────────────────────────────────────────────────── */
.zm-wdr-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 16px 0 18px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--zm-bg-2) 50%, transparent);
  border: 1px solid var(--zm-line);
  border-radius: 0;
}
.zm-wdr-controls-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zm-wdr-control {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--zm-text-3);
}
.zm-wdr-control select {
  font-family: var(--zm-font-mono); font-size: 12px;
  background: var(--zm-bg-2); color: var(--zm-text);
  border: 1px solid var(--zm-line); border-radius: 0;
  padding: 5px 8px;
  cursor: pointer;
}
.zm-wdr-control select:hover { border-color: color-mix(in oklab, var(--zm-line) 50%, var(--zm-ember)); }

.zm-wdr-segment {
  display: inline-flex; gap: 0;
  background: var(--zm-bg-2);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 3px;
}
.zm-wdr-segment-btn {
  font-family: var(--zm-font-mono); font-size: 12px;
  background: transparent; color: var(--zm-text-3);
  border: 0; border-radius: 0;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.zm-wdr-segment-btn:hover { color: var(--zm-text); }
.zm-wdr-segment-btn.active {
  background: color-mix(in oklab, var(--zm-ember) 16%, var(--zm-bg-2));
  color: var(--zm-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--zm-ember) 35%, transparent);
}

/* Compact part-card grid — shared by the asset Sub-parts tab and the
   world Parts tab. One source of truth: every list of assets across
   the app should render through `<PartCard>` against this grid. */
.zm-wdr-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.zm-wdr-part-card {
  position: relative;
  background: var(--zm-bg-2);
  border: 1px solid var(--zm-line);
  border-radius: 0;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
  display: flex; flex-direction: column; gap: 10px;
}
.zm-wdr-part-card::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0;
  background: var(--zm-text-4);
  opacity: 0.5;
}
.zm-wdr-part-card.is-born::before     { background: var(--zm-ember); opacity: 0.85; }
.zm-wdr-part-card.is-imported::before { background: var(--zm-violet); opacity: 0.7; }
.zm-wdr-part-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--zm-line) 30%, var(--zm-ember));
  background: color-mix(in oklab, var(--zm-bg-2) 80%, var(--zm-bg));
}

/* Leaf-card modifier — a `file` (raw blob) reads quieter than a
   composite `asset` so a grid mixing the two is scannable. */
.zm-wdr-part-card.is-leaf {
  background: color-mix(in oklab, var(--zm-bg-2) 70%, var(--zm-bg));
}
.zm-wdr-part-card.is-leaf .zm-wdr-part-glyph { opacity: 0.55; }
.zm-wdr-part-card.is-leaf::before { opacity: 0.32; }

.zm-wdr-part-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.zm-wdr-part-glyph { font-size: 22px; line-height: 1; color: var(--zm-ember); }
.zm-wdr-part-titleblock { min-width: 0; }
.zm-wdr-part-name {
  font-family: var(--zm-font-display);
  font-size: 16px; font-weight: 500;
  color: var(--zm-text);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Unnamed fallback — italic + dimmer so a "(unnamed mesh)" placeholder
   doesn't masquerade as a real publisher-set name. */
.zm-wdr-part-name.unnamed {
  font-style: normal;
  color: var(--zm-text-3);
  font-weight: 400;
}
.zm-wdr-part-type {
  font-size: var(--zm-fs-11); color: var(--zm-text-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* File vs asset pill — small, monospaced, sits in the head row. The
   distinction was missing before; a grid full of "mesh / mesh" rows
   gave no clue which entries were curated assets and which were raw
   blobs published alongside them. */
.zm-wdr-part-typetag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--zm-line);
  border-radius: 0;
  white-space: nowrap;
}
.zm-wdr-part-typetag.asset {
  color: var(--zm-trace);
  border-color: color-mix(in oklab, var(--zm-trace) 35%, var(--zm-line));
  background: color-mix(in oklab, var(--zm-trace) 8%, transparent);
}
.zm-wdr-part-typetag.file {
  color: var(--zm-text-4);
  background: rgba(0, 0, 0, 0.18);
}
.zm-wdr-part-typetag-glyph { font-size: var(--zm-fs-11); }
.zm-wdr-part-cert {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: color-mix(in oklab, var(--zm-up) 18%, transparent);
  color: var(--zm-up);
  border: 1px solid color-mix(in oklab, var(--zm-up) 40%, transparent);
  border-radius: 50%;
}
.zm-wdr-part-note {
  font-size: 13px; line-height: 1.55;
  color: var(--zm-text-2);
  font-family: var(--zm-font-display);
  font-style: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Context line (surface-specific extra info — path hint inside world
   Parts, "from world X" inside a foreign Sub-parts, etc). One-line,
   small + dim so it doesn't compete with the description. */
.zm-wdr-part-context {
  font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zm-wdr-part-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in oklab, var(--zm-line) 70%, transparent);
  font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
}
/* Owning-world chip in the foot — clickable, suppressed in surfaces
   where the world is implicit (world Parts page when origin = born). */
.zm-wdr-part-world {
  color: var(--zm-trace);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.zm-wdr-part-world:hover { color: var(--zm-ember); }

/* Pager (shared with world Parts) */
.zm-wdr-pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--zm-line);
}
.zm-wdr-pager-btn {
  font-family: var(--zm-font-mono); font-size: 12px;
  background: var(--zm-bg-2); color: var(--zm-text-2);
  border: 1px solid var(--zm-line); border-radius: 0;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 120ms ease;
}
.zm-wdr-pager-btn:hover:not(:disabled) {
  color: var(--zm-text);
  border-color: color-mix(in oklab, var(--zm-line) 50%, var(--zm-ember));
}
.zm-wdr-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.zm-wdr-pager-info {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); color: var(--zm-text-3);
  letter-spacing: 0.04em;
}

.zm-wdr-commit-list { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.zm-wdr-commit {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--zm-line);
}
.zm-wdr-commit:last-child { border-bottom: 0; }
.zm-wdr-commit-sha { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-3); padding-top: 2px; letter-spacing: 0.02em; }
.zm-wdr-commit-msg { font-size: 14px; color: var(--zm-text); line-height: 1.5; margin-bottom: 6px; }
.zm-wdr-commit-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--zm-fs-11); font-family: var(--zm-font-mono); }
.zm-wdr-commit-when { color: var(--zm-text-3); }
.zm-wdr-commit-diff { letter-spacing: 0.02em; }

.zm-wdr-cast { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.zm-wdr-cast-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--zm-line) 70%, transparent);
}
.zm-wdr-cast-row:last-child { border-bottom: 0; }
.zm-wdr-cast-role {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10); color: var(--zm-text-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.zm-wdr-cast-commits {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); color: var(--zm-text-2);
  min-width: 24px; text-align: right;
}

/* Responsive */
@media (max-width: 960px) {
  .zm-st-grid { grid-template-columns: 1fr; }
  .zm-st-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .zm-st-grid-2 { grid-template-columns: 1fr; }
  .zm-token-list-head, .zm-token-row { grid-template-columns: 1fr; gap: 6px; }
  .zm-token-list-head { display: none; }
  .zm-token-row { padding: 14px 16px; }
}

/* ── Segmented control (origin / class filter on Parts tabs) ── */
.zm-segment {
  background: var(--zm-bg-2);
  transition: background 140ms ease, color 140ms ease;
}
.zm-segment:hover {
  background: var(--zm-surface-2);
  color: var(--zm-text);
}
.zm-segment.active {
  background: rgba(245, 159, 88, 0.14); /* ember tint */
  color: var(--zm-ember);
  border-color: var(--zm-ember);
}
.zm-segment:last-child { border-right: 0 !important; }

/* ── World members row hover (W3) ── */
.zm-member-row { transition: background 120ms ease; }
.zm-member-row:hover { background: var(--zm-surface-2); }

/* !critical:begin routes=* — consumer skin, top bar, crumb */
/* ── Hero stat strip — bump contrast against the cover gradient ── */
.zm-detail-stat-strip .zm-stat-inline {
  color: var(--zm-text-2);
  background: rgba(0, 0, 0, 0.32);
  padding: 4px 10px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.zm-detail-stat-strip .zm-stat-inline b { color: var(--zm-text); }

/* Spinner — small rotating ring. Used by the desktop-launch popup
   while we wait to see if the OS dispatched the zero:// URL. */
.zm-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--zm-ember);
  animation: zm-spin 0.8s linear infinite;
}
@keyframes zm-spin {
  to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────────────
   Consumer (Zero brand) — ported from the Claude Design handoff
   (zeromind/project/consumer.css). All rules live on the `.zc-*`
   namespace so they coexist with the dev (ZeroMind) chrome above.
   ─────────────────────────────────────────────────────────────────── */
html[data-mode="consumer"] body {
  background: #0c0a07 !important;
  color: rgba(245, 240, 250, 0.92);
  font-feature-settings: "ss01" on;
}

/* ── Top bar ────────────────────────────────────────────────────── */
.zc-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  background: color-mix(in oklab, #0c0a07 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.zc-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; }
.zc-logo-mark {
  width: 32px; height: 32px;
  color: #fff;            /* the inline SVG mark strokes via currentColor */
  flex-shrink: 0;
  display: block;
}
.zc-logo-mark svg { width: 100%; height: 100%; display: block; }

/* Inline OrigoZero brand mark used wherever the `⌬` placeholder glyph used
   to stand in for the logo (chat dock, agent avatars, prompt hint, mini-nav,
   agent author chips). Sized to the surrounding text (1em) and strokes via
   `currentColor`, so it inherits each context's accent — agent hue, dock
   accent, etc. — exactly like the glyph it replaces. Box contexts that need a
   fixed size override width/height below. */
.zm-logo-glyph {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.zm-logo-glyph svg { width: 100%; height: 100%; display: block; }
/* Avatar/badge tiles: the mark sits centred at a fixed size inside the bubble,
   independent of the tile's small mono font-size. */
.zm-bot-mark .zm-logo-glyph { width: 20px; height: 20px; }
.zm-author-glyph .zm-logo-glyph { width: 12px; height: 12px; }
.zm-member-row .zm-logo-glyph { width: 16px; height: 16px; }

.zc-logo-name {
  font-family: var(--zm-font-display);
  font-weight: 700;
  font-size: 22px; line-height: 1.3;
  letter-spacing: -0.025em;
  color: #fff;
  padding: 2px 0 4px;
  overflow: visible;
}
/* The nav is the bar's fixed core: it never squashes, and the search box
   (the only elastic item) absorbs whatever width is left. */
.zc-top-nav { display: flex; gap: 4px; margin-left: 6px; flex-shrink: 0; }
.zc-top-nav a, .zc-top-nav button {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.6);
  font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
.zc-top-nav a, .zc-top-nav button { position: relative; }
.zc-top-nav a:hover, .zc-top-nav button:hover { color: #fff; background: rgba(255,255,255,0.04); }
.zc-top-nav a.active, .zc-top-nav button.active { color: #fff; }
/* Active-route indicator — a small ember dot under the link */
.zc-top-nav a.active::after, .zc-top-nav button.active::after {
  content: "";
  position: absolute; left: 50%; bottom: 1px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: var(--zm-ember);
  box-shadow: 0 0 5px color-mix(in oklab, var(--zm-ember) 50%, transparent);
}
.zc-top-search {
  /* `min-width: 0` on both the box and its input is what actually lets this
     shrink: a flex item defaults to `min-width: auto`, and an <input>'s
     intrinsic minimum is ~20 characters, so without these the bar had a hard
     floor around 1100px and simply overflowed the viewport below it (#721). */
  flex: 1 1 auto; max-width: 520px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  color: rgba(255,255,255,0.6);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.zc-top-search:focus-within {
  border-color: rgba(255, 165, 95, 0.4);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(255, 140, 70, 0.12);
}
.zc-top-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: #fff; font: inherit; font-size: 14px;
}
.zc-top-search input::placeholder { color: rgba(255,255,255,0.45); }
.zc-top-spacer { flex: 1 1 0; min-width: 0; }
.zc-top-link {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.7);
  font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}
.zc-top-link:hover { color: #fff; }
.zc-btn {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  padding: 8px 16px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.zc-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: #fff; }
.zc-btn.primary {
  background: linear-gradient(120deg, oklch(0.78 0.18 55), oklch(0.62 0.2 18) 55%, oklch(0.58 0.2 46));
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 5px 16px -8px rgba(255,110,40,0.28), 0 5px 16px -10px rgba(255,120,45,0.24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.zc-btn.primary:hover {
  background: linear-gradient(120deg, oklch(0.78 0.18 55), oklch(0.62 0.2 18) 55%, oklch(0.58 0.2 46));
  border-color: transparent;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(255,110,40,0.34), 0 8px 22px -10px rgba(255,120,45,0.3);
}
.zc-btn.primary:active { transform: translateY(0); }
.zc-btn.primary.big { padding: 13px 26px; font-size: 15px; }
.zc-btn.ghost {
  background: transparent;
  color: rgba(255,255,255,0.7);
}
.zc-btn.ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ── Empty / crumb ─────────────────────────────────────────────── */
.zc-empty {
  text-align: center; padding: 96px 28px;
  color: rgba(255,255,255,0.45);
}
.zc-crumb {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  margin-bottom: 18px;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  text-decoration: none;
}
.zc-crumb:hover { color: #fff; }

/* !critical:end */
/* ── Prompt modals (agent setup) ──────────────────────────────── */
/* The `.zc-home > *:not(.zc-home-glow)` rule above gives every direct
   child of .zc-home `position: relative; z-index: 1`, which would
   override the modal's `position: fixed`. Force fixed + a much higher
   z-index so the modal escapes the home stacking context. */
.zc-modal-backdrop {
  position: fixed !important;
  inset: 0;
  z-index: 9999 !important;
  background: rgba(8,4,16,0.78);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 32px 20px;
  overflow-y: auto;
}
.zc-modal {
  position: relative;
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, oklch(0.18 0.05 45 / 0.9), oklch(0.10 0.03 44 / 0.95));
  border: 1px solid rgba(255,165,95,0.20);
  border-radius: 0;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.7), 0 0 40px -24px oklch(0.55 0.22 44 / 0.24);
  color: rgba(255,255,255,0.9);
}
.zc-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  width: 32px; height: 32px;
  border-radius: 50%;
  color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.zc-modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.zc-modal-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.78 0.18 38);
  margin-bottom: 10px;
}
.zc-modal-title {
  font-family: var(--zm-font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff; margin: 0 0 8px;
}
.zc-modal-sub {
  font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,0.6);
  margin: 0 0 20px;
}
.zc-modal-tabs {
  display: flex; gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  margin-bottom: 16px;
}
.zc-modal-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,0.6);
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.zc-modal-tabs button.active { background: rgba(255,255,255,0.10); color: #fff; }
.zc-modal-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.zc-modal-field { display: flex; flex-direction: column; gap: 5px; }
.zc-modal-field span {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
.zc-modal-field input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  padding: 10px 12px;
  color: #fff;
  font: inherit; font-size: 14px;
  outline: none;
}
.zc-modal-field input:focus { border-color: oklch(0.75 0.18 38 / 0.6); background: rgba(255,255,255,0.07); }
/* !critical:begin routes=/chat — full-width CTA in the sign-in gate */
.zc-modal-cta { width: 100%; justify-content: center; }
/* !critical:end */
.zc-modal-foot {
  margin-top: 14px;
  font-size: 13px; color: rgba(255,255,255,0.55);
  text-align: center;
}
.zc-modal-foot.small { font-size: 12px; }
.zc-modal-foot button {
  background: transparent; border: 0; padding: 0;
  color: oklch(0.78 0.18 38);
  font: inherit; cursor: pointer;
}
.zc-modal-foot button:hover { text-decoration: underline; }

.zc-modal-deeplink {
  display: block;
  margin: 12px 16px;
  padding: 9px 14px;
  text-align: center;
  background: oklch(0.45 0.22 45 / 0.30);
  border: 1px solid oklch(0.55 0.22 45 / 0.55);
  border-radius: 0;
  color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none;
}
/* !critical:begin routes=* — author link */
.zc-modal-deeplink:hover { background: oklch(0.45 0.22 45 / 0.45); }

/* Author link — used in cards and detail pages */
.zc-author-link {
  background: transparent; border: 0; padding: 0;
  color: rgba(255,200,140,0.95);
  font: inherit; cursor: pointer;
  text-decoration: none;
}
.zc-author-link:hover { text-decoration: underline; }
.zc-card-author .zc-author-link { color: rgba(255,255,255,0.7); }

/* !critical:end */
/* !critical:begin routes=/ — home: wall, doors, hero title */
/* ── Consumer Home — hero glow + headline + download/create CTAs ─── */
/* ── Home (/) — two doors on a wall of worlds ─────────────────────
   The whole first viewport is one stage: a tilted grid of real world
   covers drifting slowly behind (`consumer::HomeWall`), a dark veil so
   the middle reads, and the two doors, Create and Play. Nothing below the
   fold: the catalogue lives on /worlds, the pitch on /about. */
.zc-home {
  position: relative;
  /* Fill the viewport under the top bar. `svh`, not `vh`: on a phone the
     address bar collapses and `100vh` overshoots by its height. */
  min-height: calc(100svh - 64px);
  display: grid; place-items: center;
  padding: 48px clamp(20px, 3vw, 56px) 64px;
  overflow: hidden;
  background: var(--zm-bg);
}
.zc-home > .zc-doors { position: relative; z-index: 3; }
/* The lattice, over the wall and under the veil: a fine dot grid that
   gives the drift something still to move against. */
.zc-home::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255, 190, 135, 0.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, transparent 72%);
  opacity: 0.5;
}
/* The wall. Oversized and tilted, so the covers recede toward the top
   like a floor of tiles. Each row is a marquee: its track holds the row
   three times and slides by exactly one copy, so the loop has no seam, and
   neighbouring rows run opposite ways (odd rows left, even rows right). */
.zc-wall {
  /* One gap for the whole wall: between rows, and between tiles in a row. */
  --zc-wall-gap: 12px;
  /* More overhang above than below: the tilt recedes the top, so the row
     stack sits high in the box to keep the first row above the stage. */
  position: absolute; inset: -45% -25% -15%;
  z-index: 0;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; gap: var(--zc-wall-gap);
  /* Perspective in viewport units so a 2560px stage foreshortens exactly
     like a 1440px one; a fixed px depth made the wide stage recede more. */
  transform: perspective(111vw) rotateX(32deg);
  transform-origin: 50% 60%;
  opacity: 0.6;
}
.zc-wall-row { flex: none; overflow: hidden; }
/* No flex `gap` on the track. The space between tiles is each tile's own
   right margin, so one copy of the row (ten tiles, ten gaps) is exactly a
   third of the track and the marquee's one-third translate lands on the
   join. A flex gap would add one more gap between the copies, and every
   loop would snap by a share of it. Three copies, not two: the marquee
   slides by one copy, so the other copies must span the row box (150vw)
   on their own, and once the tile is capped in px (below) ten tiles no
   longer do at 2560px, where two copies left a 900px hole at the end of
   every loop. */
.zc-wall-row-track { display: flex; width: max-content; will-change: transform; }
.zc-wall-tile {
  /* The positioning context for the cover: `.zm-cover-img` is absolute. */
  /* Sized by the LARGER of the two viewport axes: twelve rows of 16vw
     tiles fill a wide stage, but on a tall one (1280x1024) the rows run
     short and the wall stops under the top bar; 30vh keeps the stack
     about 1.7x the stage height, which is what the tilt needs to reach the
     top edge. Then bounded, because the wall must never become the page's
     LCP element: a cover is a lazy image, and the moment one projects
     larger than the title it is what Chrome records, some 600ms after
     first paint. The title's recorded size follows its font-size clamp
     (46px up to 742px wide, 84px from 1355px): ~57k up to 768, ~66k at
     1024, ~76k at 1280, ~78k from 1366. So the tile is capped by 20vw,
     which tracks that curve, and by 280px, which holds the wide desktops
     where 16vw alone would reach 410px. Measured projected tile against
     the title, twelve rows, three copies: 2560x1440 60.5k / 78k,
     1920x1080 58.9k / 78k, 1440x900 59.8k / 78k, 1366x768 42.1k / 78k,
     1280x1024 53.0k / 76k, 1024x768 34.2k / 66k. Portrait stages are
     handled below. */
  position: relative; flex: none; width: min(max(16vw, 30vh), 20vw, 280px); margin-right: var(--zc-wall-gap);
  display: block; aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zm-surface);
  outline: 1px solid rgba(255,255,255,0.05); outline-offset: -1px;
}
.zc-wall-tile .zm-cover-img, .zc-wall-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The veil: dark in the middle so the doors read, thinner at the edges so
   the wall shows, and the two hues, ember behind Create and a cool light
   behind Play, bleeding in from the sides. */
.zc-home-veil {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 40% at 38% 62%, oklch(0.62 0.20 45 / 0.26), transparent 70%),
    radial-gradient(ellipse 34% 40% at 62% 62%, oklch(0.70 0.12 215 / 0.22), transparent 70%),
    radial-gradient(ellipse 52% 56% at 50% 54%, oklch(0.13 0.006 50 / 0.86), oklch(0.13 0.006 50 / 0.58) 55%, oklch(0.13 0.006 50 / 0.18) 100%),
    linear-gradient(180deg, oklch(0.13 0.006 50 / 0.9), transparent 22%, transparent 88%, oklch(0.13 0.006 50 / 0.7));
}

.zc-doors {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  width: 100%; max-width: 780px;
}
.zc-doors .zc-doors-title {
  /* Overrides the shared `.zc-home-title` sizing (declared later in this
     file, hence the extra specificity): one line at every width down to a
     phone, sitting on top of the doors rather than owning the viewport. */
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
  margin: 0 0 12px;
  max-width: none;
  font-size: clamp(32px, 4.2vw, 56px);
  white-space: nowrap;
}
.zc-doors-lead {
  margin: 0 0 34px; max-width: 46ch;
  font-size: 16px; line-height: 1.5;
  color: var(--zm-text-2);
  text-wrap: balance;
}
.zc-doors-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; width: 100%;
}
/* A door. Glass over the wall, a hairline that lights up in the door's
   own hue, the word as the biggest type on the page after the title. */
.zc-door {
  --door-hue: oklch(0.78 0.185 55);
  --door-glow: oklch(0.70 0.20 45 / 0.45);
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 26px 26px 24px;
  min-height: 176px;
  text-align: left; text-decoration: none; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035) 60%, rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .22s cubic-bezier(0.2,0.7,0.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.zc-door-play {
  --door-hue: oklch(0.86 0.10 215);
  --door-glow: oklch(0.72 0.12 215 / 0.40);
}
.zc-door::after {
  /* The hue, kept off until the door is touched: a soft light under the
     glass that rises on hover and focus. */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 70% at 20% 100%, var(--door-glow), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.zc-door:hover, .zc-door:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--door-hue) 55%, rgba(255,255,255,0.14));
  box-shadow:
    0 36px 70px -28px rgba(0,0,0,0.85),
    0 0 0 1px color-mix(in oklab, var(--door-hue) 25%, transparent),
    0 18px 50px -20px var(--door-glow),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.zc-door:hover::after, .zc-door:focus-visible::after { opacity: 1; }
.zc-door:active { transform: translateY(-1px) scale(0.99); transition-duration: .08s; }
.zc-door:focus-visible { outline: 2px solid var(--door-hue); outline-offset: 4px; }
.zc-door-glyph {
  display: inline-flex; color: var(--door-hue);
  margin-bottom: 10px;
  filter: drop-shadow(0 0 12px var(--door-glow));
}
.zc-door-word {
  font-family: var(--zm-font-display);
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
}
.zc-door-sub {
  margin-top: 4px;
  font-size: 14.5px; line-height: 1.4;
  color: var(--zm-text-2);
}
.zc-doors-note {
  margin: 26px 0 0;
  font-size: 13.5px; color: var(--zm-text-3);
}
.zc-doors-note a { color: var(--zm-text-2); text-decoration: underline; text-underline-offset: 3px; }
.zc-doors-note a:hover { color: #fff; }
.zc-doors-note a:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 2px; }

/* One copy of the row is exactly a third of the track (each tile carries
   its own trailing gap, see `.zc-wall-row-track`), so sliding by a third
   lands on the seam. */
@keyframes zc-wall-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); }
}
@keyframes zc-wall-right {
  from { transform: translateX(calc(-100% / 3)); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .zc-wall-row-track { animation: zc-wall-left 170s linear infinite; }
  .zc-wall-row:nth-child(even) .zc-wall-row-track { animation-name: zc-wall-right; }
  /* Each row at its own pace, a little apart from its neighbours, so the
     wall reads as twelve lanes of traffic rather than one sheet sliding:
     odd rows around 170 s to the left, even rows around 190 s to the right,
     every row at least 4 s from the row above and the row below. One rule
     per row of `consumer::WALL_ROWS`; `wall_pace_tests.rs` holds the count,
     the bands and the gap. */
  .zc-wall-row:nth-child(1)  .zc-wall-row-track { animation-duration: 172s; }
  .zc-wall-row:nth-child(2)  .zc-wall-row-track { animation-duration: 186s; }
  .zc-wall-row:nth-child(3)  .zc-wall-row-track { animation-duration: 158s; }
  .zc-wall-row:nth-child(4)  .zc-wall-row-track { animation-duration: 198s; }
  .zc-wall-row:nth-child(5)  .zc-wall-row-track { animation-duration: 178s; }
  .zc-wall-row:nth-child(6)  .zc-wall-row-track { animation-duration: 182s; }
  .zc-wall-row:nth-child(7)  .zc-wall-row-track { animation-duration: 164s; }
  .zc-wall-row:nth-child(8)  .zc-wall-row-track { animation-duration: 194s; }
  .zc-wall-row:nth-child(9)  .zc-wall-row-track { animation-duration: 176s; }
  .zc-wall-row:nth-child(10) .zc-wall-row-track { animation-duration: 190s; }
  .zc-wall-row:nth-child(11) .zc-wall-row-track { animation-duration: 168s; }
  .zc-wall-row:nth-child(12) .zc-wall-row-track { animation-duration: 202s; }
  .zc-doors-lead { animation: zm-rise 0.6s 0.10s both cubic-bezier(0.2,0.7,0.2,1); }
  .zc-doors-row  { animation: zm-rise 0.7s 0.16s both cubic-bezier(0.2,0.7,0.2,1); }
  .zc-doors-note { animation: zm-rise 0.7s 0.24s both cubic-bezier(0.2,0.7,0.2,1); }
}
@media (prefers-reduced-motion: reduce) {
  .zc-door, .zc-door::after { transition: none; }
  .zc-door:hover, .zc-door:focus-visible { transform: none; }
}
@media (max-width: 640px) {
  .zc-home { min-height: calc(100svh - 56px); padding: 32px 18px 96px; }
  .zc-doors-row { grid-template-columns: 1fr; gap: 12px; }
  .zc-door { min-height: 0; padding: 20px 20px 18px; }
  .zc-door-glyph { margin-bottom: 6px; }
  .zc-doors-lead { margin-bottom: 24px; font-size: 15px; }
}
/* The portrait wall: phones, and any stage taller than it is wide (a
   portrait tablet, a half-screen window). The landscape geometry above
   sets its depth in vw, so on a tall stage the perspective is short
   against the height: the bottom rows loom (a 1.5x magnified tile at
   768x1024, which is what made a cover the LCP there) and the top recedes
   so far that the stack stops under the top bar. Here the depth is long
   (256vw), the tilt gentler, and the box reaches further up (-60% top,
   -30% bottom) so the centred stack's first row projects above the stage
   top, with the last row still past the bottom. The tile is capped at
   240px: the title is near its smallest clamp (50k to 59k recorded) on
   every portrait width up to 1024 (66k), and the tile projects to 26k at
   360x640, 47.9k at 390x844, 44.9k at 430x932, 42.8k at 768x1024, 41.6k
   at 820x1180 and 42.7k at 1024x1366. */
@media (max-width: 640px), (orientation: portrait) {
  .zc-wall { --zc-wall-gap: 8px; inset: -60% -25% -30%; transform: perspective(256vw) rotateX(28deg); }
  .zc-wall-tile { width: min(max(48vw, 30vh), 240px); }
}

.zc-home-title {
  text-align: center;
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(46px, 6.2vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 16px auto 44px;
  max-width: 15ch;
  text-wrap: balance;
}
.zc-home-title em {
  font-style: normal;
  color: oklch(0.76 0.20 45);
  background: linear-gradient(102deg, oklch(0.84 0.18 70), oklch(0.74 0.22 42) 44%, oklch(0.66 0.20 40) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.04em 0.07em 0.12em;
  line-height: 1.15;
  filter: drop-shadow(0 4px 18px oklch(0.72 0.21 45 / 0.24));
}

/* The rotating noun (games/worlds/apps). Fixed min-width so swapping the
   word doesn't shove the rest of the line sideways; the two-phase fade is
   driven by `.is-out`, toggled from the component around the swap. */
.zc-hero-noun {
  display: inline-block;
  /* Width comes from the component (per-word, measured, in em) and animates,
     so the rest of the line glides instead of snapping — and short words don't
     sit in the gap a single fixed slot would leave. */
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.24s ease, transform 0.24s ease, width 0.28s ease;
}
.zc-hero-noun.is-out { opacity: 0; transform: translateY(-0.16em); }
@media (prefers-reduced-motion: reduce) {
  /* Still cycles, just without the motion (width included). */
  .zc-hero-noun { transition: none; }
  .zc-hero-noun.is-out { opacity: 1; transform: none; }}
/* !critical:end */
/* !critical:begin routes=/create — create prompt box */
/* ── Prompt box (`consumer::HeroPrompt`) — `/create`'s primary entrance
   (the home is two doors, see `.zc-doors`; its Create door lands here).
   The box is the first interactive thing a visitor meets on `/create`: the
   textarea they describe an idea into rather than a button that opens one. */
.zc-hero-ask {
  display: flex; flex-direction: column; gap: 8px;
  /* The page column (`.zc-cr-main`) sets the width; the box fills it. */
  width: 100%; min-width: 0;
}
.zc-hero-ask-box {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* The box, not the textarea, carries the focus ring: the textarea is
   chromeless inside it, so focusing it has to light the whole frame. */
.zc-hero-ask-box:focus-within {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,180,120,0.45);
  box-shadow:
    0 14px 34px -14px rgba(255,90,40,0.35),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.zc-hero-ask-box.busy { opacity: 0.72; }
.zc-hero-ask-eyebrow {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); line-height: 1; letter-spacing: 0.08em;
  color: rgba(255,200,140,0.85);
  cursor: text;
}
.zc-hero-ask-input {
  width: 100%; resize: none;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: var(--zm-text);
  font: inherit; font-size: 15px; line-height: 1.45;
}
/* Alpha, not taste: the box composites to ~rgb(22,20,17) over the page
   ground, and the placeholder is 15px body text, so it needs 4.5:1 there.
   0.34 measured 3.11:1; 0.55 measures 6.1:1 and still reads as a
   placeholder next to `--zm-text`. Lighthouse/axe cannot judge this — it
   gives up on the backdrop under `.zc-home-glow`'s gradients and scores
   the rule as passing with zero elements examined. Measure, don't trust
   the audit. */
.zc-hero-ask-input::placeholder { color: rgba(255,255,255,0.55); }
.zc-hero-ask-input:focus { outline: none; }
.zc-hero-ask-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.zc-hero-ask-hint {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); letter-spacing: 0.03em;
  /* 11px on the box's ~rgb(22,20,17): 0.42 measured 4.11:1, under the 4.5:1
     floor for text below 18.66px. 0.58 measures 6.7:1. */
  color: rgba(255,255,255,0.58);
}
.zc-hero-ask-hint.ready { color: oklch(0.82 0.14 150); }
.zc-hero-ask-go {
  flex: 0 0 auto;
  padding: 8px 18px; border-radius: 0; cursor: pointer;
  font-family: var(--zm-font-display);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, oklch(0.7 0.22 35), oklch(0.55 0.22 44));
  border: 1px solid rgba(255,180,120,0.35);
  box-shadow:
    0 10px 26px -10px rgba(255,90,40,0.4),
    inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.zc-hero-ask-go:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px -12px rgba(255,90,40,0.5),
    inset 0 1px 0 rgba(255,255,255,0.16);
}
.zc-hero-ask-go:active:not(:disabled) { transform: translateY(0); }
/* Dimmed, not hidden: an empty box still shows what sending would do. */
.zc-hero-ask-go:disabled {
  cursor: default; box-shadow: none;
  filter: grayscale(0.6) brightness(0.7);
}
.zc-hero-ask-go:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 3px; }
.zc-hero-ask-err {
  margin: 0;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: oklch(0.75 0.16 25);
}
.zc-hero-ask-alt {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); letter-spacing: 0.05em;
}
.zc-hero-ask-alt a { color: rgba(255,200,140,0.9); text-decoration: none; }
.zc-hero-ask-alt a:hover { text-decoration: underline; }
.zc-hero-ask-alt a:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 2px; }
/* Direct child only. The `⬇` inside the download link is a `<span>` too,
   and a descendant rule of equal specificity declared later beats the colour
   the glyph would otherwise inherit from its `<a>` — which painted the arrow
   grey beside amber link text. Scoping to `>` leaves the glyph on the link
   and keeps this rule for the trailing "free · for Linux" note it is for.
   (11px on the page ground, this row sitting outside the box: 6.9:1.) */
.zc-hero-ask-alt > span { color: rgba(255,255,255,0.58); }

@media (max-width: 640px) {
  .zc-hero-ask-hint.keys { display: none; }
  /* Stack the footer on a phone: with the keyboard tip hidden the button
     would be the row's only child and `space-between` would leave it
     hugging the left edge. Full width instead — a bigger tap target, and
     the engine chip gets its own line above it when it has something to
     say. */
  .zc-hero-ask-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .zc-hero-ask-go { width: 100%; }}

@media (prefers-reduced-motion: reduce) {
  .zc-hero-ask-box, .zc-hero-ask-go { transition: none; }
  .zc-hero-ask-go:hover:not(:disabled) { transform: none; }}
/* !critical:end */
/* !critical:begin routes=* — shared display heading */

/* Shared display heading — originally the explore-carousel title, now
   reused by the /about "What is OrigoZero" explainer (`AboutOrigoZero`) and
   the /blog page heading, so it outlives the removed home carousel. */
.zc-explore-title {
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}

/* !critical:end */
/* !critical:begin routes=/about,/agents — about explainer + FAQ */
/* ── /about — "What is OrigoZero?" explainer (server-rendered; SEO/GEO) ──
   The home's former bottom section, promoted to its own route
   (`pages::About` → `consumer::AboutOrigoZero`). `.zc-about-page` is the
   standalone page container (the inline version rode the home content box);
   the card grid + typography are the original section styling, renamed off
   `.zc-home-about`. */
.zc-about-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.zc-about-page .zc-section-kicker { margin-bottom: 8px; }
.zc-about-title { margin-top: 10px; }
.zc-about-lead {
  margin: 18px 0 28px;
  max-width: 70ch;
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  line-height: 1.65;
}
.zc-about-lead a {
  color: oklch(0.78 0.16 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.zc-about-lead a:hover { border-bottom-color: oklch(0.78 0.16 40); }
.zc-about-lead strong { color: rgba(255,255,255,0.92); font-weight: 600; }

/* --- /about narrative rhythm ------------------------------------------
   The page is a manifesto, not a spec, so it needs more than one type
   size. Rendered at a single weight, every sentence competes with every
   other and the opening hook lands with no more force than a caption.
   Three registers: a display hook, body prose, and punch lines. */

/* Opening couplet. The first line is the old world, so it sits back; the
   second is the turn, so it comes forward with the brand colour on "Zero". */
.zc-about-hook {
  margin: 30px 0 4px;
  max-width: 22ch;
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.34);
}
.zc-about-hook + .zc-about-hook { margin: 0 0 36px; color: #fff; }
.zc-about-hook strong { color: var(--zm-ember); font-weight: 800; }

/* Quiet lead-in that hands off to the two-system pair below it. */
.zc-about-connector {
  margin: 34px 0 16px;
  font-family: var(--zm-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* Section-closing beats: brighter and a touch larger than body prose, so a
   paragraph doing rhetorical work does not read as one more fact. */
.zc-about-payoff {
  margin: 22px 0;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}
.zc-about-payoff strong { color: #fff; font-weight: 700; }

/* Section headings must clearly outrank the bold payoff lines under them.
   .zc-agents-sub is shared with /agents, where it sits at ~18px, which is the
   same size as a bold payoff line here. Two different roles rendering
   identically cost the page its outline, so the about page scopes its own,
   larger heading. */
.zc-about-page .zc-agents-sub {
  margin: 56px 0 18px;
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Closing couplet. Mirrors the opening hook so the page ends where it began,
   at display scale, instead of trailing off inside a bordered aside. The rule
   above it marks the end of the argument. */
.zc-about-close {
  margin: 52px 0 8px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 165, 95, 0.18);
}
.zc-about-close-line {
  margin: 0;
  max-width: 24ch;
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.34);
}
.zc-about-close-line + .zc-about-close-line { margin-top: 4px; color: #fff; }

.zc-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  counter-reset: about;
}
.zc-about-card {
  position: relative;
  counter-increment: about;
  background: linear-gradient(180deg, rgba(30, 21, 12, 0.6), rgba(18, 14, 9, 0.5));
  border: 1px solid rgba(255, 165, 95, 0.16);
  border-radius: 0;
  padding: 22px 22px 24px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Top hairline of brand colour that brightens on hover */
.zc-about-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--zm-ember), var(--zm-violet));
  opacity: 0.5;
  transition: opacity .25s ease;
}
.zc-about-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 165, 95, 0.3);
  box-shadow: 0 18px 44px -30px rgba(255,120,45,0.28);
}
.zc-about-card:hover::before { opacity: 1; }
.zc-about-card h3 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px;
  font-family: var(--zm-font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: #fff;
}
.zc-about-card h3::before {
  content: counter(about, decimal-leading-zero);
  font-family: var(--zm-font-mono);
  font-size: 12px; font-weight: 600;
  color: var(--zm-ember);
  letter-spacing: 0.05em;
  background: color-mix(in oklab, var(--zm-ember) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--zm-ember) 28%, transparent);
  border-radius: 0;
  padding: 2px 6px;
  line-height: 1;
  flex-shrink: 0;
}
.zc-about-card p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 14.5px;
  line-height: 1.62;
}
.zc-about-card strong { color: rgba(255,255,255,0.86); font-weight: 600; }
.zc-about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ── /about FAQ — "make games with AI" Q&A (server-rendered; SEO/GEO) ──
   A plain, always-visible Q&A list (never collapsed) rendered from
   `seo::ABOUT_FAQ`, the same source the FAQPage JSON-LD is built from. Shares
   the `.zc-about-page` width/centering but with a lighter top gap since it
   follows the explainer's 96px bottom padding. Each item is a left-accented
   card so the question scans as a heading and the answer reads as prose. */
/* The three sections moved off the home (`HowItWorks`, `Comparison`,
   `CreateRoutes`). On the home they were children of `.zc-home`, which gave
   them their container; on `/about` they sit as siblings of `.zc-about-page`
   and `.zc-faq`, each of which carries its own — so this supplies the same
   960px one and they line up with the narrative above and the FAQ below.
   The sections' own rule is `max-width: none`, so without this they would
   run the full width of the page shell past both of their neighbours. */
.zc-about-sections {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Four entry cards in a 912px column: the section's own 250px track floor
   fits three, which strands the fourth alone on row two beside two empty
   tracks. A 400px floor makes it an even 2x2. Scoped, because the floor is
   a fact about this column's width, not about the card. */
.zc-about-sections .zc-routes-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}

.zc-faq {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 24px 96px;
}
.zc-faq .zc-section-kicker { margin-bottom: 8px; }
.zc-faq-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.zc-faq-item {
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(30, 21, 12, 0.5), rgba(18, 14, 9, 0.42));
  border: 1px solid rgba(255, 165, 95, 0.14);
  border-left: 2px solid var(--zm-ember);
  transition: border-color .25s ease;
}
.zc-faq-item:hover { border-color: rgba(255, 165, 95, 0.3); }
.zc-faq-q {
  margin: 0 0 8px;
  font-family: var(--zm-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}
.zc-faq-a {
  margin: 0;
  max-width: 74ch;
  color: rgba(255,255,255,0.74);
  font-size: 14.5px;
  line-height: 1.62;
}
/* Links inside an answer. Same visual language as .zc-about-lead a: brand
   colour plus a faint underline that lights up on hover, so a link is
   identifiable before you touch it and responds once you do. Without this an
   answer's links render as plain body text and read as dead words. */
.zc-faq-a a {
  color: oklch(0.78 0.16 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color .18s ease, border-color .18s ease;
}
.zc-faq-a a:hover,
.zc-faq-a a:focus-visible {
  color: oklch(0.86 0.17 45);
  border-bottom-color: oklch(0.78 0.16 40);
}

/* An answer paragraph beginning with "*" is a footnote. Rendered as genuine
   small print, because in at least one answer the small print is the joke. */
.zc-faq-fineprint {
  margin-top: 7px;
  font-size: var(--zm-fs-9-5);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.36);
}
/* Multi-paragraph answers need air between paragraphs, since .zc-faq-a
   zeroes the margin so a single-paragraph answer sits flush. */
.zc-faq-a + .zc-faq-a { margin-top: 12px; }
.zc-faq-a + .zc-faq-fineprint { margin-top: 7px; }

/* !critical:end */
/* !critical:begin routes=/worlds,/worlds/*,/world/*,/packages,/community,/users,/vibes,/blog,/docs — hub glow, card primitives, explore tabs */
/* ── Browse hero glow ──────────────────────────────────────────── */
.zc-home-glow {
  position: absolute;
  inset: -20px 0 auto 0;
  height: 720px;
  pointer-events: none;
  z-index: 0;
  /* Clip the fixed-size blobs to the (viewport-width) glow box. Without this
     the violet blob (left:40%; width:720px) spills past the right edge on
     narrow viewports and adds ~400px of horizontal scroll overflow (#440).
     The bleed is off-screen / already-transparent at the clip edges, so
     clipping is visually invisible. */
  overflow: hidden;
}
.zc-home-glow-violet {
  position: absolute;
  left: 40%; top: 0;
  width: 720px; height: 480px;
  background: radial-gradient(closest-side, oklch(0.45 0.22 45 / 0.17), transparent 80%);
  filter: blur(8px);
}
.zc-home-glow-ember {
  position: absolute;
  right: 0; top: 60px;
  width: 540px; height: 320px;
  background: radial-gradient(closest-side, oklch(0.55 0.20 38 / 0.15), transparent 80%);
  filter: blur(14px);
}

/* ── Card primitives ──────────────────────────────────────────── */
.zc-card-shell {
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
}
.zc-card {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex; flex-direction: column;
  cursor: pointer;
  outline: none;
}
.zc-card-art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 14px 36px rgba(0,0,0,0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.zc-card-art-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.zc-card:hover .zc-card-art-img { transform: scale(1.05); }
.zc-card-art-empty {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.zc-card:hover .zc-card-art {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(255,185,125,0.22),
    0 26px 56px rgba(0,0,0,0.55),
    0 18px 50px -18px rgba(255,120,45,0.24);
}
.zc-card-title { transition: color .2s ease; }
.zc-card:hover .zc-card-title { color: oklch(0.9 0.06 60); }
.zc-card-art-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.16) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 2px 2px;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.zc-card-art-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.zc-card-foot { padding: 12px 4px 8px; }
.zc-card-title {
  font-size: 16px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-card-author { font-size: 12.5px; color: rgba(255,255,255,0.55); }
.zc-card-plays {
  font-size: 12px; color: rgba(255,255,255,0.45);
  margin-top: 6px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
}
.zc-card-stat { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
/* "N playing" chip on explore grid cards — same live accent + pulse dot. */
.zc-card-live {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: color-mix(in oklab, var(--zm-live) 78%, #fff); font-weight: 600;
}
/* ── Card cover placeholder — honest stand-in for a world with no
   uploaded thumbnail. Hue gradient (set inline by the caller) +
   monogram + label; deliberately not screenshot-like art. */
.zc-card-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  font-family: var(--zm-font-mono);
}
.zc-card-ph-mono {
  font-size: clamp(40px, 34%, 96px);
  line-height: 1; font-weight: 800;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.zc-card-ph-tag {
  font-size: var(--zm-fs-10); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

/* ── Explore tabs (Worlds | Assets) ───────────────────────────── */
/* Top-level switch over the two browse surfaces on /worlds. Aligned to
   the primary (Worlds) surface width so the underline tracks the grid. */
.zc-explore-tabs-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: 26px 28px 0;
}
.zc-explore-tabs {
  display: flex; gap: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.zc-explore-tab {
  appearance: none; background: transparent; border: 0;
  padding: 6px 2px 12px; cursor: pointer;
  font-family: var(--zm-font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: rgba(255,255,255,0.45);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.zc-explore-tab:hover { color: rgba(255,255,255,0.85); }
.zc-explore-tab.active {
  color: #fff;
  border-bottom-color: oklch(0.85 0.13 65);
}
/* Embedded under the Assets tab: no standalone <h1>, so collapse the hero's
   title row and pull the controls up tight under the tab bar. */
.zm-browse-hero.embedded {
  grid-template-columns: auto; justify-content: start;
  padding-top: 18px;
}
/* Align the embedded Assets surface to the Worlds (zc-browse) width so its
   grid lines up under the tab bar. The standalone /assets page keeps its own
   (wider) 1400px layout. */
.zc-assets-embed .zm-browse-hero,
.zc-assets-embed .zm-browse-page {
  max-width: 1280px;
  padding-left: 28px; padding-right: 28px;
}

/* !critical:end */
/* !critical:begin routes=/worlds,/packages,/community,/users,/vibes — browse grid */
/* ── Consumer Browse — explore page ───────────────────────────── */
.zc-browse {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding: 32px 28px 100px;
}
.zc-browse > *:not(.zc-home-glow) { position: relative; z-index: 1; }

.zc-browse-strip { margin: 26px 0 22px; }
.zc-browse-strip:first-of-type { margin-top: 0; }
/* Shelf label, not a headline: the world covers are the page's display
   type, so the row above them is a quiet mono marker with a rule running
   out to the right edge — it separates shelves without competing. */
.zc-browse-strip-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.zc-browse-strip-head h2 {
  font-family: var(--zm-font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: lowercase;
  margin: 0; color: rgba(255,255,255,0.72);
  flex: none;
}
.zc-browse-strip-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255,255,255,0.10);
}
.zc-browse-strip-hint {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
  flex: none;
}
/* The subtitle sits between the label and the rule; on narrow viewports
   there isn't room for both, and the label is the one that matters. */
@media (max-width: 900px) { .zc-browse-strip-hint { display: none; } }
/* Home catalogue rows: a wrapping grid of portrait key-art tiles, so each
   category fills the band width and spills onto MULTIPLE ROWS. `auto-fill`
   keeps card sizes uniform across categories no matter how many worlds a
   category has (unlike `auto-fit`, which would balloon a 3-card strip to
   full width); the `min(100%, …)` floor stops a lone column from
   overflowing, and the media queries below pin the count once that floor
   would collapse the shelf to one card per row. */
.zc-browse-strip-reel {
  display: grid;
  /* 190px floor + 14px column gap fills 7 tracks across the 1544px content
     box (was 280px → 5). Denser shelf, more of the catalogue per screen. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 24px 14px;
  align-items: start;
}
/* Portrait key-art proportions (11:15) for the shelf, scoped to this reel —
   `.zm-card` is shared with Feed, vibe and profile grids, which stay 4:3.
   The cover `<img>` is already `object-fit: cover`, so existing 16:9
   thumbnails centre-crop into the taller frame rather than distorting. */
.zc-browse-strip-reel .zm-card { aspect-ratio: 11 / 15; }
/* Card chrome is sized for a ~290px-wide tile; at 208px the 26px display
   title overflows two lines and the overlay swallows the art. */
.zc-browse-strip-reel .zm-card .zm-cover-overlay {
  padding: 11px; padding-bottom: 12px; gap: 3px;
  /* Scrim, not just a text-shadow. The resting title sits directly on the
     cover, and a shadow alone loses to a bright frame — an ATC display, a
     pale ledger, a lamp flare. Portrait crops land the title over busier
     regions than the old 4:3 ones did, and at 16px there is less letter mass
     to carry the shadow, so the copy needs a real ground under it. */
  background: linear-gradient(180deg,
    transparent 40%,
    rgba(0,0,0,0.50) 66%,
    rgba(0,0,0,0.86) 100%);
}
.zc-browse-strip-reel .zm-card h3 { font-size: 16px; line-height: 1.12; }
.zc-browse-strip-reel .zm-card-eyebrow { font-size: var(--zm-fs-9); margin-bottom: 2px; }
.zc-browse-strip-reel .zm-card-foot { gap: 6px; font-size: var(--zm-fs-11); }
.zc-browse-strip-reel .zm-card-quality { font-size: var(--zm-fs-10); }
/* Hover panel too: at 208px the 16px padding and 19px title left room for
   about two words of description. The portrait frame is 284px tall, so
   there is more vertical room than the old landscape card had — it just
   needs the horizontal chrome scaled to the narrower track. */
.zc-browse-strip-reel .zm-pfworld-detail { padding: 11px; gap: 5px; }
.zc-browse-strip-reel .zm-pfworld-detail-title { font-size: 15px; }
.zc-browse-strip-reel .zm-pfworld-detail-desc { font-size: var(--zm-fs-11-5); -webkit-line-clamp: 6; }
.zc-browse-strip-reel .zm-pfworld-stats { font-size: var(--zm-fs-10); gap: 4px 9px; }
.zc-browse-strip-reel .zm-pfworld-detail-foot { font-size: var(--zm-fs-9-5); padding-top: 5px; }

/* Column ladder. `auto-fill` alone collapses to a single column once the
   190px floor exceeds the track (`min(100%, …)`), which on a phone gives one
   giant card per row — the opposite of a catalogue. Pin the count below the
   desktop range so the shelf stays a shelf all the way down. */
/* Above 1200px the `auto-fill` rule at the top does the work: each ~204px of
   page box (190px floor + 14px gap) becomes another column, so 1600px gives
   7, 2560px gives 12, 3000px gives 14. Below it the `min(100%, 190px)` floor
   would collapse the shelf toward one card per row, so the counts are pinned. */
@media (max-width: 1200px) {
  .zc-browse-strip-reel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .zc-browse-strip-reel { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (max-width: 620px) {
  .zc-browse-strip-reel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  /* Card chrome that still reads at ~100px of track. */
  .zc-browse-strip-reel .zm-card h3 { font-size: 12px; }
  .zc-browse-strip-reel .zm-card .zm-cover-overlay { padding: 7px; padding-bottom: 8px; }
  .zc-browse-strip-reel .zm-card-foot,
  .zc-browse-strip-reel .zm-card-eyebrow { display: none; }}

/* `.zm-card`s (whose cover is `position:absolute; inset:0`, so the card's
   own size is CSS-driven) stretch to fill their grid cell. `min-width: 0`
   lets a long nowrap title ellipsize inside the track instead of widening
   its column and staggering the grid. */
.zc-browse-strip-reel .zm-card { width: 100%; min-width: 0; }

.zc-browse-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0;
}
.zc-browse-filters button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 500;
  padding: 7px 16px; border-radius: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.zc-browse-filters button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.zc-browse-filters button.active { background: #fff; color: #000; border-color: #fff; }
.zc-browse-filter-count {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  padding: 1px 6px; border-radius: 0;
  background: rgba(0,0,0,0.12);
  color: inherit; opacity: 0.65;
}
.zc-browse-filters button.active .zc-browse-filter-count {
  background: rgba(0,0,0,0.12); color: #000;
}
/* Search results: main column + kind facet rail. */
.zc-explore-results {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px;
  gap: 30px; align-items: start;
  padding-top: 6px;
}
.zc-explore-results-main { min-width: 0; }
.zc-explore-results-head {
  font-size: 14px;
  color: var(--zm-text-3);
  margin-bottom: 22px;
}
.zc-explore-section { margin-bottom: 34px; }
.zc-explore-section-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--zm-font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: #fff; margin: 0 0 16px;
}
.zc-explore-count {
  font-family: var(--zm-font-mono); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1px 8px;
}
.zc-explore-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding: 12px 14px;
  background: var(--zm-bg-2); border: 1px solid var(--zm-line);
}
.zc-explore-pager-label { font-family: var(--zm-font-mono); font-size: 12px; color: var(--zm-text-3); }
.zc-explore-pager-btns { display: flex; gap: 8px; align-items: center; }
.zc-explore-pager-page { font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); color: var(--zm-text-4); }
.zc-explore-facets {
  position: sticky; top: 84px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 16px;
}
.zc-explore-facets-head {
  font-size: 14px; font-weight: 600; color: var(--zm-text);
  margin: 0 0 12px;
}
.zc-explore-facets-note { font-size: var(--zm-fs-11); color: rgba(255,255,255,0.4); }
.zc-explore-facets-label {
  font-size: 12.5px; color: var(--zm-text-4); margin: 4px 0 6px;
}
.zc-explore-facets-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.zc-explore-facet-count { margin-left: 4px; font-size: var(--zm-fs-10); color: rgba(255,255,255,0.4); }

@media (max-width: 760px) {
  .zc-explore-results { grid-template-columns: 1fr; }
  .zc-explore-facets { position: static; }}

/* !critical:end */
/* !critical:begin routes=* — pill chips */
/* ── Tags / pill chips ────────────────────────────────────────── */
.zc-tag {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); letter-spacing: 0.04em;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  color: rgba(255,255,255,0.75);
}

/* !critical:end */
/* ── Comment row (Reviews + Comments tabs) ────────────────────── */
.zc-comments { display: flex; flex-direction: column; gap: 18px; }
.zc-comment {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
}
.zc-comment-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.6 0.18 32), oklch(0.4 0.12 32));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
}
.zc-comment-avatar.agent {
  background: linear-gradient(135deg, oklch(0.6 0.18 44), oklch(0.4 0.16 44));
}
.zc-comment-head {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.zc-comment-name { color: #fff; font-weight: 600; font-size: 13.5px; }
.zc-comment-handle {
  background: transparent; border: 0; padding: 0;
  color: rgba(255,255,255,0.45);
  font-family: var(--zm-font-mono); font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.zc-comment-handle:hover { color: rgba(255,255,255,0.75); text-decoration: underline; }
.zc-comment-kind {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10);
  color: oklch(0.78 0.16 44);
  background: rgba(255,170,110,0.10);
  padding: 1px 6px; border-radius: 0;
}
.zc-comment-bucket {
  display: inline-block;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10);
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 0;
  background: transparent;
}
.zc-comment-when { color: rgba(255,255,255,0.4); font-size: 12px; }
.zc-comment-text { color: rgba(255,255,255,0.8); line-height: 1.55; font-size: 14.5px; }
.zc-comment-actions {
  display: flex; align-items: center; gap: 4px;
  margin-top: 10px;
  font-family: var(--zm-font-mono); font-size: 12px;
}
.zc-comment-vote {
  background: transparent; border: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 0;
  color: rgba(255,255,255,0.45);
  font-size: var(--zm-fs-10); line-height: 1;
  cursor: pointer;
}
.zc-comment-vote:hover { background: rgba(255,255,255,0.06); color: #fff; }
.zc-comment-vote.up.active { color: oklch(0.85 0.16 70); background: oklch(0.5 0.18 70 / 0.16); }
.zc-comment-vote.down.active { color: oklch(0.85 0.16 25); background: oklch(0.5 0.18 25 / 0.16); }
.zc-comment-score {
  font-family: var(--zm-font-mono); font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.8);
  min-width: 26px; text-align: center;
}
.zc-comment-action {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.5);
  font: inherit;
  padding: 4px 8px; border-radius: 0;
  cursor: pointer;
  margin-left: 4px;
}
.zc-comment-action:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* !critical:begin routes=/worlds/*,/world/* — world detail: hero, media, launch picker, tabs, phone layout */
/* ── Steam-style World detail (consumer) ──────────────────────── */
.zc-store {
  position: relative;
  min-height: 80vh;
  background: #0c0a07;
  overflow: hidden;
}
.zc-store-bg {
  position: absolute; left: 0; right: 0; top: 0;
  height: 540px;
  z-index: 0;
  pointer-events: none;
}
.zc-store-shell {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 28px 28px 80px;
}
.zc-store-titlerow { display: flex; align-items: center; gap: 14px; }
.zc-store-title {
  font-family: var(--zm-font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  margin: 0;
  color: #fff;
}
/* ⚙ metadata-edit affordance — sits beside the title for editors. */
.zc-store-gear {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 17px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.zc-store-gear:hover {
  background: rgba(255,110,40,0.12);
  border-color: rgba(255,130,55,0.45);
  color: oklch(0.85 0.13 65);
}
.zc-link { color: oklch(0.78 0.16 60); text-decoration: underline; }
/* ── Launch picker (browser vs desktop) ─────────────────────────── */
.zc-launch-picker-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.zc-launch-picker {
  max-width: 460px; width: 100%;
  background: var(--zm-surface, #14100c);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; padding: 24px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6);
}
.zc-launch-picker h3 {
  margin: 0 0 6px; font-family: var(--zm-font-display);
  font-size: 19px; color: #fff;
}
.zc-launch-picker p {
  margin: 0 0 18px; font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.6);
}
.zc-store-tagline {
  font-size: 17px; line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 70ch;
  margin: 8px 0 22px;
}

.zc-store-hero { margin-bottom: 0; }
/* Poster overlay: title, tagline and actions on the cover over a scrim. */
.zc-store-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 140px 32px 28px;
  background: linear-gradient(180deg, rgba(12,10,7,0) 0%, rgba(12,10,7,0.55) 40%, rgba(12,10,7,0.94) 100%);
  display: flex; flex-direction: column; gap: 10px;
}
/* A trailer as the active gallery item: the overlay steps off the player and
   becomes a strip under it (title and tagline left, actions right), so the
   title, Play and the vote box stay visible and in the tab order while the
   video plays. It is never merely faded out: an invisible overlay still
   holds five focusable controls and, where it is static, an empty block. */
.zc-store-media-frame.is-video .zc-store-hero-overlay {
  position: static; background: none;
  padding: 14px 20px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title actions" "tagline actions";
  align-items: center; column-gap: 24px; row-gap: 4px;
}
.zc-store-media-frame.is-video .zc-store-titlerow { grid-area: title; }
.zc-store-media-frame.is-video .zc-store-hero-overlay .zc-store-tagline { grid-area: tagline; text-shadow: none; }
.zc-store-media-frame.is-video .zc-store-buttons { grid-area: actions; margin-top: 0; }
/* The "no saved version" line is a sibling of the tagline, so under a trailer
   it needs its own row: sharing `tagline` stacked the two paragraphs in one
   cell. The row only exists when the line does, so a world with a version
   keeps the two-row strip exactly as before. */
.zc-store-media-frame.is-video .zc-store-hero-overlay:has(.zc-store-noversion) {
  grid-template-areas: "title actions" "tagline actions" "noversion actions";
}
@media (min-width: 981px) {
  .zc-store-media-frame.is-video .zc-store-hero-overlay .zc-store-title {
    font-size: clamp(22px, 2.2vw, 30px); text-shadow: none;
  }
  .zc-store-media-frame.is-video .zc-store-hero-overlay .zc-store-tagline { font-size: 14px; }
}
@media (max-width: 980px) {
  .zc-store-media-frame.is-video .zc-store-hero-overlay {
    grid-template-columns: 1fr; grid-template-areas: "title" "tagline" "actions";
  }
  .zc-store-media-frame.is-video .zc-store-hero-overlay:has(.zc-store-noversion) {
    grid-template-areas: "title" "tagline" "noversion" "actions";
  }
}
.zc-store-hero-overlay .zc-store-title {
  font-size: clamp(34px, 4.2vw, 56px);
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.zc-store-hero-overlay .zc-store-tagline {
  margin: 0; max-width: 64ch; font-size: 16px; color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
/* "No saved version yet" — the world page is live but nothing resolves on
   the default ref, so Play would only open the player's error screen. Sits
   between the tagline and the action row, and reads as a state, not an error. */
.zc-store-noversion {
  margin: 0; max-width: 64ch;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  border-left: 2px solid var(--zm-trace);
  padding-left: 10px;
}
.zc-store-media-frame.is-video .zc-store-hero-overlay .zc-store-noversion {
  grid-area: noversion; text-shadow: none; font-size: 12.5px;
}
/* An inert Play: still readable and still in the layout, never a dead click. */
.zc-store-play[disabled] { opacity: 0.5; cursor: not-allowed; }
/* A short explanatory line under a form control in the world-details modal. */
.zc-field-note {
  display: block; margin-top: 6px;
  font-size: var(--zm-fs-11); line-height: 1.5;
  color: var(--zm-text-3);
}
.zc-store-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.zc-store-buttons .zc-store-vote { padding: 2px; gap: 0; align-self: stretch; background: rgba(0,0,0,0.35); }
.zc-store-buttons .zc-store-vote-btn { padding: 6px 10px; font-size: 13px; }
.zc-store-buttons .zc-store-vote-score { flex-direction: row; gap: 6px; padding: 0 10px; min-width: 0; }
.zc-store-buttons .zc-store-vote-score-label { display: none; }
.zc-store-buttons .zc-btn.ghost { background: rgba(0,0,0,0.35); }
/* Under the cover: filmstrip left, who and when right. */
.zc-store-under {
  display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px;
}
.zc-store-facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  font-size: 14px; color: rgba(255,255,255,0.6);
}
/* Play leads the row; the vote box closes it. */
.zc-store-buttons .zc-store-vote { order: 10; }
.zc-store-facts b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.zc-store-media { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zc-store-media-frame {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
}
/* Full-shell cover as a cinematic strip: 21:9 keeps the whole hero on one
   screen at desktop widths where a 16:9 frame would be 720px tall. */
.zc-store-media-art {
  position: relative;
  width: 100%; aspect-ratio: 21 / 9;
  overflow: hidden;
}
.zc-store-media-art-empty {
  display: grid; place-items: center;
}
.zc-store-media-empty-label {
  position: relative; z-index: 2;
  font-family: var(--zm-font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 6px 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 0;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
}
.zc-store-media-img {
  width: 100%; aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.zc-store-media-tools {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px 4px;
  flex-wrap: wrap;
}
.zc-store-media-upload {
  padding: 8px 14px;
}
.zc-store-media-hint {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  color: rgba(255,255,255,0.45);
}
.zc-store-media-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: oklch(0.4 0.18 25 / 0.18);
  border: 1px solid oklch(0.5 0.20 25 / 0.40);
  border-radius: 0;
  color: oklch(0.85 0.18 25);
  font-size: 12.5px;
}
.zc-store-media-cap {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  color: rgba(255,255,255,0.9);
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}
.zc-store-media-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-store-media-thumb { background: transparent; border: 0; padding: 0; cursor: pointer; width: 112px; }
.zc-store-media-thumb-art {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 140ms ease, transform 140ms ease;
  position: relative;
}
.zc-store-media-thumb-img {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 140ms ease, transform 140ms ease;
}
.zc-store-media-thumb:hover .zc-store-media-thumb-img {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
}
.zc-store-media-thumb.active .zc-store-media-thumb-img {
  border-color: oklch(0.7 0.20 38);
  box-shadow: 0 0 0 1px oklch(0.7 0.20 38 / 0.6);
}
.zc-store-media-thumb:hover .zc-store-media-thumb-art { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }
.zc-store-media-thumb.active .zc-store-media-thumb-art {
  border-color: oklch(0.7 0.20 38);
  box-shadow: 0 0 0 1px oklch(0.7 0.20 38 / 0.6);
}
/* Video in the main viewer — the same 21:9 footprint as the cover (a 16:9
   trailer is letterboxed into it), so picking a trailer thumb does not change
   the height of the media area. */
.zc-store-media-video {
  width: 100%; aspect-ratio: 21 / 9;
  object-fit: contain;
  display: block;
  background: #000;
}
/* A tile img wrapped in -thumb-art (video poster) must not double-border. */
.zc-store-media-thumb-art .zc-store-media-thumb-img { border: 0; }
/* Poster-less trailer tile. */
.zc-store-media-thumb-videotile {
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
}
/* Play badge overlaid on trailer tiles. */
.zc-store-media-thumb-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}
.zc-store-media-thumb-videotile .zc-store-media-thumb-play { position: static; background: transparent; }

/* ── Gallery manager (editors): uploaded screenshots + trailers ── */
.zc-gallery-manage { display: flex; flex-direction: column; gap: 8px; }
.zc-gallery-manage-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.zc-gallery-manage-item {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.28);
  padding: 4px;
}
.zc-gallery-manage-img {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.zc-gallery-manage-videotile {
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}
.zc-gallery-manage-row {
  display: flex; align-items: center; gap: 4px;
}
.zc-gallery-manage-kind {
  flex: 1;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10); letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.zc-gallery-manage-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-size: var(--zm-fs-10);
  padding: 2px 6px;
  cursor: pointer;
}
.zc-gallery-manage-btn:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.zc-gallery-manage-btn:disabled { opacity: 0.45; cursor: default; }
.zc-gallery-manage-btn.danger:hover { border-color: oklch(0.55 0.20 25); color: oklch(0.8 0.18 25); }

.zc-store-summary {
  background: rgba(16, 13, 9, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(5px);
  align-self: start;
}
.zc-store-byline {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: rgba(255,255,255,0.65);
}
.zc-store-author {
  background: transparent; border: 0;
  color: rgba(255,200,140,0.95);
  font: inherit; padding: 0; cursor: pointer;
  text-decoration: none;
}
.zc-store-author:hover { text-decoration: underline; }
.zc-store-lineage {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.zc-store-lineage-link {
  color: rgba(255,200,140,0.95);
  text-decoration: none;
}
.zc-store-lineage-link:hover { text-decoration: underline; }
.zc-store-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.zc-store-stat { display: flex; flex-direction: column; gap: 2px; }
.zc-store-stat span {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-10-5); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.zc-store-stat b { font-size: 17px; color: #fff; font-weight: 600; }

.zc-store-vote {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 4px; align-items: stretch;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 4px;
}
.zc-store-vote-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,0.6);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  transition: all 120ms ease;
}
.zc-store-vote-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.zc-store-vote-btn.up.active { background: oklch(0.5 0.18 70 / 0.18); color: oklch(0.85 0.16 70); }
.zc-store-vote-btn.down.active { background: oklch(0.5 0.18 25 / 0.18); color: oklch(0.85 0.16 25); }
.zc-store-vote-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 18px;
  min-width: 90px;
}
.zc-store-vote-score-num { font-family: var(--zm-font-mono); font-size: 18px; font-weight: 700; color: #fff; }
.zc-store-vote-score-label {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-9-5);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.zc-store-play { justify-content: center; }
/* "Edit world" — secondary to Play but a real CTA for owners/maintainers.
   Warm amber outline so it reads as the orange-theme companion to the
   gradient Play button without competing with it. */
.zc-store-edit {
  justify-content: center;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,110,40,0.08);
  border-color: rgba(255,130,55,0.35);
  color: oklch(0.82 0.14 60);
}
.zc-store-edit:hover {
  background: rgba(255,110,40,0.15);
  border-color: rgba(255,140,60,0.6);
  color: oklch(0.9 0.12 72);
}
.zc-store-secondary { display: contents; }
.zc-store-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.zc-store-tags .zc-tag {
  font-family: var(--zm-font-sans); font-size: 12.5px; letter-spacing: 0;
  padding: 3px 9px; color: rgba(255,255,255,0.65);
}

/* About fold + tabs */
.zc-store-about { margin: 0 0 28px; max-width: 66ch; position: relative; }
.zc-store-about-head { margin-bottom: 8px; }
.zc-store-about-eyebrow {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.zc-store-about-body {
  font-size: 15.5px; line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
  max-height: 6.4em;
  overflow: hidden;
  position: relative;
  transition: max-height 260ms ease;
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.zc-store-about.open .zc-store-about-body {
  max-height: 200em;
  mask-image: none;
  -webkit-mask-image: none;
}
/* The About body is rendered markdown (.zm-md-body — inherits the shared
   markdown typography, incl. --zm-text-2 body color). Tone the heading
   scale down inside the card so a leading `# Title` reads as a section
   header, not a second page title, and trim the trailing margin so the
   fold clamp measures the content tightly (top margin is already zeroed
   by the base `.zm-md-body > :first-child` rule). */
.zc-store-about-body .zm-md-body > :last-child { margin-bottom: 0; }
.zc-store-about-body .zm-md-body h1 { font-size: 1.28em; }
.zc-store-about-body .zm-md-body h2 { font-size: 1.14em; }
.zc-store-about-body .zm-md-body h3 { font-size: 1.04em; }
.zc-store-about-toggle {
  background: transparent; border: 0;
  color: oklch(0.78 0.18 38);
  font-size: 12.5px; font-family: var(--zm-font-mono);
  cursor: pointer; padding: 6px 0 0; margin-top: 6px;
}
.zc-store-about-toggle:hover { text-decoration: underline; }
.zc-store-tabs-shell { margin: 0 0 22px; }

.zc-world-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.zc-world-tabs button {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.55);
  font-size: 14px; font-weight: 500;
  padding: 12px 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 120ms ease, border-color 120ms ease;
}
.zc-world-tabs button:hover { color: rgba(255,255,255,0.85); }
.zc-world-tabs button.active { color: #fff; border-bottom-color: oklch(0.7 0.20 38); }
.zc-world-tab-count {
  font-size: 12.5px; color: rgba(255,255,255,0.45); margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.zc-world-tabs button.active .zc-world-tab-count {
  color: oklch(0.75 0.18 38);
  background: oklch(0.75 0.18 38 / 0.15);
}

/* Ratings bars */
.zc-store-ratings-bars {
  display: flex; flex-direction: column; gap: 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  padding: 14px 16px;
}
.zc-store-ratings-row {
  display: grid; grid-template-columns: 130px 1fr 110px;
  gap: 14px; align-items: center;
  font-size: 13px;
}
.zc-store-ratings-label {
  color: rgba(255,255,255,0.7);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11-5);
}
.zc-store-ratings-bar {
  height: 8px; border-radius: 0;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.zc-store-ratings-bar i { display: block; height: 100%; transition: width 0.4s ease; }
.zc-store-ratings-val {
  font-family: var(--zm-font-mono); font-size: 12px;
  text-align: right;
}
.zc-store-bucket-pick {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0;
  padding: 4px 10px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 120ms ease;
}
.zc-store-bucket-pick:hover { background: rgba(255,255,255,0.06); }
.zc-store-bucket-pick.active {
  background: rgba(255,255,255,0.10);
  border-color: currentColor;
  font-weight: 600;
}
.zc-store-section-meta { display: flex; align-items: center; gap: 8px; }
/* Signed-out prompt that sits where the composer would be. */
.zc-store-write-signedout {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}
/* Fork — full-width secondary action below the Save/Share row. */
.zc-store-fork { justify-content: center; }
.zc-store-fork:disabled { opacity: 0.6; cursor: default; }
/* Bookmarked / "Saved" active state on a ghost button. */
.zc-btn.ghost.active {
  background: rgba(255,110,40,0.12);
  border-color: rgba(255,130,55,0.4);
  color: oklch(0.85 0.13 65);
}
/* Inline action error (vote/bookmark/rate/fork failures). */
.zc-store-err {
  margin: 10px 0 0;
  padding: 9px 13px;
  border-radius: 0;
  background: rgba(255,80,60,0.10);
  border: 1px solid rgba(255,90,70,0.3);
  color: oklch(0.82 0.15 30);
  font-size: 13px;
}
.zc-store-h {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 22px 0 12px;
}
.zc-store-reviews { display: flex; flex-direction: column; gap: 12px; }
.zc-store-rating-summary { font-size: 13px; color: rgba(255,255,255,0.6); }
.zc-store-rating-summary b { color: oklch(0.8 0.16 70); }

/* Body — main + side */
.zc-store-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px; margin-top: 16px;
}
.zc-store-body.single { grid-template-columns: minmax(0, 1fr); }
.zc-store-main { display: flex; flex-direction: column; gap: 28px; }
.zc-store-section h2 {
  font-family: var(--zm-font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px; color: #fff;
}
.zc-store-section p {
  font-size: 15.5px; line-height: 1.65;
  color: rgba(255,255,255,0.75);
  margin: 0; max-width: 68ch;
}
.zc-store-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 12px;
}
.zc-store-section-head h2 { margin: 0; }
.zc-store-write {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.zc-store-write textarea {
  width: 100%;
  background: transparent;
  border: 0; outline: 0; resize: none;
  color: rgba(255,255,255,0.85);
  font: inherit; font-size: 14px; line-height: 1.5;
}
.zc-store-write textarea::placeholder { color: rgba(255,255,255,0.4); }
.zc-store-write-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px;
  font-size: var(--zm-fs-11-5); color: rgba(255,255,255,0.45);
  font-family: var(--zm-font-mono);
  gap: 12px; flex-wrap: wrap;
}

.zc-store-side { display: flex; flex-direction: column; gap: 14px; }
.zc-store-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  padding: 16px 18px;
}
.zc-store-card-head {
  font-size: 15px; font-weight: 600; color: #fff;
  margin-bottom: 8px;
}
.zc-store-related-row {
  display: grid; grid-template-columns: 42px 1fr; gap: 10px;
  align-items: center;
  background: transparent; border: 0; padding: 6px;
  border-radius: 0; cursor: pointer; text-align: left;
  width: 100%;
  text-decoration: none;
  transition: background 120ms ease;
}
.zc-store-related-row:hover { background: rgba(255,255,255,0.04); }
.zc-store-related-thumb {
  width: 42px; height: 42px; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  display: block;
}
.zc-store-related-info { display: flex; flex-direction: column; min-width: 0; }
.zc-store-related-info b {
  color: #fff; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-store-related-info span {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11); color: rgba(255,255,255,0.45);
}
.zc-store-detail-row {
  display: flex; justify-content: space-between;
  padding: 7px 0;
  font-size: 13px; color: rgba(255,255,255,0.55);
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.zc-store-detail-row:first-of-type { border-top: 0; }
.zc-store-detail-row b { color: #fff; font-weight: 500; }
/* Forks-card footer ("+N more"). */
.zc-store-card-foot {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5);
  color: rgba(255,255,255,0.4);
}
/* ── Versions tab — commit log rows ─────────────────────────────── */
.zc-commits { display: flex; flex-direction: column; gap: 8px; }
.zc-commit-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 13px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.zc-commit-row:hover { background: rgba(255,110,40,0.06); border-color: rgba(255,130,55,0.25); }
.zc-commit-sha {
  font-family: var(--zm-font-mono); font-size: 12px;
  color: oklch(0.8 0.13 65); flex-shrink: 0;
}
.zc-commit-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.zc-commit-msg { color: #fff; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-commit-meta {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  color: rgba(255,255,255,0.45);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.zc-commit-diff { display: inline-flex; gap: 7px; }
.zc-commit-diff .add { color: oklch(0.78 0.16 150); }
.zc-commit-diff .mod { color: oklch(0.82 0.13 85); }
.zc-commit-diff .del { color: oklch(0.72 0.18 25); }
.zc-store-detail-link {
  display: block;
  margin-top: 10px;
  background: transparent; border: 0;
  color: oklch(0.78 0.18 38);
  font-size: 13px; font-family: var(--zm-font-mono);
  cursor: pointer; text-align: left; padding: 0;
  text-decoration: none;
}
.zc-store-detail-link:hover { text-decoration: underline; }

/* Media grid */
.zc-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.zc-media-card {
  background: transparent;
  border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; text-align: left;
}
.zc-media-card-art {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 140ms ease, transform 140ms ease;
  display: block;
}
.zc-media-card:hover .zc-media-card-art { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
.zc-media-card.active .zc-media-card-art {
  border-color: oklch(0.7 0.20 38);
  box-shadow: 0 0 0 1px oklch(0.7 0.20 38 / 0.5);
}
.zc-media-card-label { font-size: 13px; color: rgba(255,255,255,0.75); }

/* "More like this" now reuses the shared `.zm-feed-grid` + `.zm-card
   .zm-pfworld` profile-world card styling — no bespoke `.zc-related-*` grid. */

@media (max-width: 980px) {
  .zc-store-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .zc-store-hero-overlay { position: static; padding: 14px 0 0; background: none; }
  .zc-store-hero-overlay .zc-store-title { text-shadow: none; }
  .zc-store-media-frame { border: 0; box-shadow: none; }
  .zc-store-media-frame.is-video .zc-store-hero-overlay { padding: 14px 0 0; }
  .zc-store-media-art, .zc-store-media-img, .zc-store-media-video { aspect-ratio: 16 / 9; }
}
/* !critical:end */
/* !critical:begin routes=/worlds — worlds listing grid */
/* ── Explore (/worlds) ─────────────────────────────────────────────
   The catalogue is the page. One header row (title + search), one control
   bar (shelf, sort, kind), then covers. No eyebrow, no glow, no featured
   poster: the first world in the hot feed is not an editorial pick, and a
   poster of it cost the first viewport. Nothing on a card is hover-only. */
.zc-x-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 24px 40px; align-items: end;
  padding: 6px 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.zc-x-head-text { min-width: 0; }
.zc-x-title {
  font-family: var(--zm-font-display);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1;
  margin: 0 0 8px;
  color: #fff;
}
.zc-x-sub {
  margin: 0; max-width: 60ch;
  font-size: 15px; line-height: 1.5;
  color: var(--zm-text-3);
}
.zc-x-search {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  transition: border-color 140ms ease, background 140ms ease;
}
.zc-x-search:focus-within { border-color: rgba(255,180,120,0.5); background: rgba(255,255,255,0.06); }
.zc-x-search-ico { display: inline-flex; color: var(--zm-text-4); flex-shrink: 0; }
.zc-x-search-ico svg { width: 16px; height: 16px; }
.zc-x-search-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #fff; font: inherit; font-size: 14.5px;
  padding: 8px 0;
}
.zc-x-search-input::placeholder { color: rgba(255,255,255,0.5); }
.zc-x-search-go {
  flex-shrink: 0;
  padding: 8px 14px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600;
  transition: background 120ms ease;
}
.zc-x-search-go:hover { background: rgba(255,255,255,0.14); }
.zc-x-search-go:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 2px; }

/* Control bar: shelf tabs read as section headings (the active one is the
   heading of the grid beneath), sort and kind sit quietly to the right. */
.zc-x-bar {
  display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap;
  padding: 14px 0 18px;
}
.zc-x-tabs { display: flex; gap: 22px; margin-right: auto; }
.zc-x-tab {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: var(--zm-font-display);
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--zm-text-4);
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.zc-x-tab:hover { color: var(--zm-text); }
.zc-x-tab.active { color: #fff; border-bottom-color: var(--zm-ember); }
.zc-x-tab:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 3px; }
.zc-x-sort { display: flex; gap: 4px; }
.zc-x-sort-btn {
  background: none; border: 0; padding: 6px 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--zm-text-3);
  transition: color 120ms ease, background 120ms ease;
}
.zc-x-sort-btn:hover { color: #fff; }
.zc-x-sort-btn.active { color: #fff; background: rgba(255,255,255,0.08); }
.zc-x-sort-btn:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 1px; }
.zc-x-kind {
  appearance: none; -webkit-appearance: none;
  padding: 7px 30px 7px 10px; cursor: pointer;
  background: rgba(255,255,255,0.04)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23bbb' stroke-width='1.5'/></svg>")
    no-repeat right 10px center;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--zm-text); font: inherit; font-size: 13.5px;
  max-width: 220px;
}
.zc-x-kind:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 1px; }
.zc-x-new { flex-shrink: 0; }
.zc-x-section { margin: 0 0 40px; }
.zc-x-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 30px 22px;
}
/* Part cards are text, not covers: denser columns. */
.zc-x-grid-parts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.zc-x-more { display: flex; justify-content: center; margin-top: 30px; }

/* The catalogue card: cover, then the facts under it in reading order. */
.zc-wc {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; color: var(--zm-text); text-decoration: none;
}
.zc-wc-cover {
  aspect-ratio: 16 / 10; border-radius: 0;
  outline: 1px solid rgba(255,255,255,0.06); outline-offset: -1px;
  transition: outline-color 140ms ease;
}
.zc-wc-cover .zm-cover-img, .zc-wc-cover img { width: 100%; height: 100%; object-fit: cover; }
.zc-wc:hover .zc-wc-cover, .zc-wc:focus-visible .zc-wc-cover { outline-color: rgba(255,255,255,0.28); }
.zc-wc:focus-visible { outline: none; }
.zc-wc-mark, .zc-wc-live, .zc-wc-plays {
  position: absolute; z-index: 2;
  padding: 3px 8px;
  font-size: var(--zm-fs-11-5); font-weight: 600; line-height: 1.2;
  color: #fff; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.zc-wc-mark { top: 8px; left: 8px; color: rgba(255,255,255,0.85); font-weight: 500; }
.zc-wc-live { top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; }
.zc-wc-live i { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.8 0.17 150); }
.zc-wc-plays { bottom: 8px; right: 8px; font-weight: 500; }
.zc-wc-title {
  margin: 4px 0 0;
  font-family: var(--zm-font-display);
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-wc-by {
  margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--zm-text-3);
}
.zc-wc-by .zm-author { font-size: 13px; }
.zc-wc-trust { color: var(--zm-ember); }
.zc-wc-when { color: var(--zm-text-4); }
.zc-wc-desc {
  margin: 0;
  font-size: 13.5px; line-height: 1.45; color: var(--zm-text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 760px) {
  .zc-x-head { grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
  .zc-x-tabs { width: 100%; }
  .zc-x-grid { gap: 22px 16px; }
}

/* !critical:end */
/* !critical:begin routes=/create — create page */
/* ── Create (/create) ──────────────────────────────────────────────
   The prompt box is the page. Beside it, the other ways in as three rows;
   under it, the signed-in visitor's recent worlds as covers so "pick up
   where you left off" shows the world rather than naming it. */
.zc-cr {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px 64px; align-items: start;
  max-width: 1100px; margin: 0 auto;
  padding: 34px 28px 80px;
}
.zc-cr-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.zc-cr-title {
  margin: 0;
  font-family: var(--zm-font-display);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: #fff;
}
.zc-cr-sub { margin: 0 0 10px; max-width: 58ch; font-size: 15.5px; line-height: 1.5; color: var(--zm-text-3); }
.zc-cr-h2 { margin: 0 0 14px; font-family: var(--zm-font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.zc-cr-ideas { margin-top: 26px; }
.zc-cr-ideas-h { margin: 0 0 10px; font-size: 13.5px; font-weight: 500; color: var(--zm-text-4); }
.zc-cr-ideas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.zc-cr-idea {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 0; margin: 0;
  background: none; border: 0; border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--zm-text-2, var(--zm-text)); font: inherit; font-size: 14.5px; line-height: 1.45;
  transition: color 120ms ease;
}
.zc-cr-ideas-list li:last-child .zc-cr-idea { border-bottom: 1px solid rgba(255,255,255,0.08); }
.zc-cr-idea:hover { color: #fff; }
.zc-cr-idea:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: -2px; }
.zc-cr-mine { margin-top: 30px; }
.zc-cr-mine-grid {
  display: grid; gap: 18px 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.zc-cr-mine-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--zm-text); text-decoration: none; }
.zc-cr-mine-cover {
  display: block; aspect-ratio: 16 / 10; border-radius: 0;
  outline: 1px solid rgba(255,255,255,0.06); outline-offset: -1px;
  transition: outline-color 140ms ease;
}
.zc-cr-mine-cover .zm-cover-img, .zc-cr-mine-cover img { width: 100%; height: 100%; object-fit: cover; }
.zc-cr-mine-card:hover .zc-cr-mine-cover, .zc-cr-mine-card:focus-visible .zc-cr-mine-cover { outline-color: rgba(255,255,255,0.28); }
.zc-cr-mine-card:focus-visible { outline: none; }
.zc-cr-mine-name { margin-top: 4px; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-cr-mine-when { font-size: 12.5px; color: var(--zm-text-4); }
.zc-cr-rail { padding-top: 10px; }
.zc-cr-way { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.zc-cr-way:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.zc-cr-way h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.zc-cr-way p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--zm-text-3); }
@media (max-width: 860px) {
  .zc-cr { grid-template-columns: 1fr; gap: 36px; padding: 26px 20px 64px; }
  .zc-cr-rail { padding-top: 0; }
}

/* Between the desktop bar's floor and the bottom bar's breakpoint the search
   box has room for only a few characters. Drop it rather than ship a sliver;
   Explore is one slot away and its page leads with the same search. */
@media (max-width: 1024px) {
  .zc-top-search { display: none; }
}

/* !critical:end */
/* !critical:begin routes=* — mobile bottom bar, kicker, grain, load reveal */
/* ── Mobile bottom bar — the phone's primary nav ──────────────────────
   Hidden above 900px, where `.zc-top` carries the same five slots. The swap
   is pure CSS: both bars ship in every response, so there is no JS, no
   user-agent branching, and no hydration step between a crawler (or a visitor
   with the bundle blocked) and a working nav. */
.zc-bottombar { display: none; }

@media (max-width: 900px) {
  /* Navigation moves to `.zc-bottombar`. The top strip keeps only the
     wordmark and the auth cluster: sign-in, the avatar and the credits pill
     have no other sitewide home, and the footer carries no /login link. */
  .zc-top {
    padding: 8px max(14px, env(safe-area-inset-right, 0px))
             8px max(14px, env(safe-area-inset-left, 0px));
    gap: 10px;
  }
  .zc-top-nav, .zc-top-search, .zc-top-spacer { display: none; }
  .zc-logo { margin-right: auto; }
  .zc-logo-name { font-size: 18px; }

  .zc-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in oklab, #0c0a07 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .zc-bb-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 9px 4px 7px;
    color: rgba(255,255,255,0.58);
    font-size: var(--zm-fs-10-5); font-weight: 500; letter-spacing: 0.01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .zc-bb-item:active { background: rgba(255,255,255,0.04); }
  .zc-bb-item.active { color: #fff; }
  .zc-bb-item:focus-visible { outline: 2px solid var(--zm-ember); outline-offset: -2px; }
  .zc-bb-ico { width: 22px; height: 22px; display: block; }
  .zc-bb-ico svg { width: 100%; height: 100%; display: block; }
  /* Active marker: the top-edge twin of the desktop nav's ember dot. */
  .zc-bb-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 20px; height: 2px; margin-left: -10px;
    background: var(--zm-ember);
    box-shadow: 0 0 6px color-mix(in oklab, var(--zm-ember) 55%, transparent);
  }

  /* Clearance, keyed off the class the shell carries only where the bar
     actually renders (never /play, /edit, /feed). `* { box-sizing: border-box }`
     means this eats into the shell's min-height rather than growing the page. */
  .zm-shell.zm-bottomnav { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* The footer's own bottom padding was pure chat-dock clearance; the shell
     now supplies the bar's share, so the footer only needs the dock's. */
  .zm-shell.zm-bottomnav .zm-footer { padding-bottom: 64px; }
  /* The dock is z-1000 and would paint straight over the bar. Lift it rather
     than raising the bar above it, which would put the bar over the dock's
     open chat panel too. */
  .zm-shell.zm-bottomnav .zc-dock { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* `.zc-chat-page` hard-codes a desktop top-bar offset; restate it here with
     the slim strip and the bar. */
  .zm-shell.zm-bottomnav .zc-chat-page {
    height: calc(100dvh - 48px - 56px - env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UI refresh — "Living Hivemind" elevation
   Atmosphere + editorial-tech type accents + one orchestrated page-load
   reveal for the consumer home. New elements only (eyebrow, kicker,
   grain); existing rules were refined in place above. All motion is
   gated behind `prefers-reduced-motion`.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mono section kicker (Explore / About) ───────────────────────── */
.zc-section-kicker {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--zm-ember);
  display: block;
}

/* ── Fine grain over the home (kills banding on the deep-dark bg) ─── */
.zc-home::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.045;
  mix-blend-mode: soft-light;
}

/* ── Motion: one staggered page-load reveal + ambient life ───────── */

/* The load reveal moves, it does not fade in, and that is load-bearing (#872).
   Chrome paints a subtree once and drops any paint that happens while the
   subtree's opacity is 0; the fade that follows runs on the compositor, which
   swaps the effect node without repainting the text. A reveal starting at
   `opacity: 0` therefore spends the element's only paint in the state the
   paint-timing detector throws away, and the element is not an LCP candidate
   at all until something forces it to repaint. On the home that was the
   rotating title word, seven seconds in: `em.zc-hero-noun` stood as the page's
   LCP at 8.7s (measured, SSR build, 1440x900, no input), against 0.09s for the
   same element once the reveal stopped starting at zero.

   `apps/web/src/lcp_reveal_tests.rs` holds this shut for every home reveal. */
@keyframes zm-rise {
  from { transform: translateY(16px); }
  to   { transform: none; }
}
@keyframes zm-drift-a { from { transform: translate(0,0); } to { transform: translate(-34px, 22px); } }
@keyframes zm-drift-b { from { transform: translate(0,0); } to { transform: translate(26px, -18px); } }

@media (prefers-reduced-motion: no-preference) {
  .zc-home-title   { animation: zm-rise 0.6s 0.05s both cubic-bezier(0.2,0.7,0.2,1); }

  .zc-home-glow-violet     { animation: zm-drift-a 19s ease-in-out infinite alternate; }
  .zc-home-glow-ember      { animation: zm-drift-b 23s ease-in-out infinite alternate; }}

/* ═══════════════════════════════════════════════════════════════════
   Unified surface (consumer/developer mode split removed)
   ═══════════════════════════════════════════════════════════════════ */

/* Brand wordmark — "Zero" accent in the single OrigoZero top-bar logo */
.zc-logo-name em {
  font-style: normal;
  background: linear-gradient(102deg, oklch(0.84 0.18 70), oklch(0.74 0.22 42) 50%, oklch(0.66 0.20 40));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* !critical:end */
/* !critical:begin routes=/blog,/blog/* — blog index */
/* ── Developer blog (/blog, /blog/:slug — server-rendered; SEO/GEO) ── */
.zc-blog,
.zc-blog-post {
  max-width: 760px;
  margin: 48px auto 96px;
  padding: 0 16px;
}
.zc-blog-head { display: flex; flex-direction: column; gap: 8px; }
.zc-blog-lead {
  margin: 6px 0 0;
  max-width: 64ch;
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  line-height: 1.65;
}
.zc-blog-lead a,
.zc-blog-body a,
.zc-blog-post-foot .zc-blog-back {
  color: oklch(0.78 0.16 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.zc-blog-lead a:hover,
.zc-blog-body a:hover,
.zc-blog-post-foot .zc-blog-back:hover { border-bottom-color: oklch(0.78 0.16 40); }

.zc-blog-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 36px;
}
.zc-blog-card {
  position: relative;
  background: linear-gradient(180deg, rgba(30, 21, 12, 0.6), rgba(18, 14, 9, 0.5));
  border: 1px solid rgba(255, 165, 95, 0.16);
  padding: 22px 22px 20px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.zc-blog-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--zm-ember), var(--zm-violet));
  opacity: 0.5;
  transition: opacity .25s ease;
}
.zc-blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 165, 95, 0.3);
  box-shadow: 0 18px 44px -30px rgba(255,120,45,0.28);
}
.zc-blog-card:hover::before { opacity: 1; }
.zc-blog-card h2 {
  margin: 10px 0 8px;
  font-family: var(--zm-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.zc-blog-card h2 a { color: #fff; text-decoration: none; }
.zc-blog-card h2 a::after { content: ""; position: absolute; inset: 0; }
.zc-blog-card h2 a:hover { color: var(--zm-ember); }
.zc-blog-card-desc {
  margin: 0 0 14px;
  color: rgba(255,255,255,0.68);
  font-size: 14.5px;
  line-height: 1.6;
}
.zc-blog-card-meta,
.zc-blog-byline,
.zc-blog-crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5);
  letter-spacing: 0.04em;
  color: var(--zm-text-3);
  text-transform: uppercase;
}
.zc-blog-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.zc-blog-author {
  font-family: var(--zm-font-mono);
  font-size: 12px;
  color: var(--zm-ember);
  text-decoration: none;
}
a.zc-blog-author:hover { text-decoration: underline; }
.zc-blog-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0;
  list-style: none;
}
.zc-blog-tags li {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
  border: 1px solid var(--zm-line);
  padding: 2px 8px;
  /* The card link's ::after overlay covers the card; keep tags above it
     so text stays selectable. They're labels, not links. */
  position: relative; z-index: 1;
}

/* !critical:end */
/* !critical:begin routes=/blog/* — blog post header */
/* ── Post page ── */
.zc-blog-crumbs { margin-bottom: 18px; text-transform: none; letter-spacing: 0.02em; }
.zc-blog-crumbs a { color: var(--zm-ember); text-decoration: none; }
.zc-blog-crumbs a:hover { text-decoration: underline; }
.zc-blog-crumbs span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 32ch;
}
.zc-blog-post-head h1 {
  margin: 0 0 12px;
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
}
.zc-blog-post-desc {
  margin: 0 0 16px;
  color: rgba(255,255,255,0.72);
  font-size: 17px;
  line-height: 1.6;
}
.zc-blog-byline { margin-bottom: 8px; }
.zc-blog-byline time { color: var(--zm-text-2); }

/* Long-form body typography (rendered markdown). */
.zc-blog-body {
  margin-top: 32px;
  color: var(--zm-text-2);
  font-size: 16px;
  line-height: 1.75;
}
.zc-blog-body h2,
.zc-blog-body h3 {
  font-family: var(--zm-font-display);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 40px 0 12px;
}
.zc-blog-body h2 { font-size: 26px; font-weight: 700; }
.zc-blog-body h3 { font-size: 20px; font-weight: 600; }
.zc-blog-body p { margin: 0 0 18px; }
.zc-blog-body strong { color: rgba(255,255,255,0.92); }
.zc-blog-body ul,
.zc-blog-body ol { margin: 0 0 18px; padding-left: 26px; }
.zc-blog-body li { margin-bottom: 8px; }
.zc-blog-body code {
  font-family: var(--zm-font-mono);
  font-size: max(0.88em, var(--zm-fs-min));
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line-soft);
  padding: 1px 5px;
}
.zc-blog-body pre {
  margin: 0 0 18px;
  padding: 16px;
  overflow-x: auto;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line-soft);
}
.zc-blog-body pre code { background: none; border: none; padding: 0; }
.zc-blog-body blockquote {
  margin: 0 0 18px;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--zm-ember);
  color: rgba(255,255,255,0.78);
}
.zc-blog-body table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.zc-blog-body th,
.zc-blog-body td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--zm-line-soft);
}
.zc-blog-body th {
  font-family: var(--zm-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zm-text-3);
  background: var(--zm-surface-2);
}
.zc-blog-body img { max-width: 100%; height: auto; }
.zc-blog-post-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--zm-line-soft);
}

/* !critical:end */
/* !critical:begin routes=/docs,/docs/* — docs sidebar + article */
/* ── Docs (/docs, /docs/:slug) — sectioned sidebar + rendered markdown ──
   Two-column shell: a sticky section nav on the left, page (or the grouped
   landing index) on the right. Same ember/violet palette + display/mono
   type as the blog; classes are scoped `zc-docs-*` (not shared with the
   blog) so restyling one never disturbs the other. */
.zc-docs {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1120px;
  margin: 40px auto 96px;
  padding: 0 16px;
}
/* The nav comes AFTER <main> in the DOM (article content first) and is placed
   back into the left column here. Explicit placement rather than `order`, so
   it works regardless of source position; the single-column media query below
   drops both rules and source order takes over. */
.zc-docs > .zc-docs-main { grid-column: 2; grid-row: 1; }
.zc-docs > .zc-docs-nav { grid-column: 1; grid-row: 1; }
.zc-docs-lead {
  margin: 6px 0 0;
  max-width: 64ch;
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  line-height: 1.65;
}

/* Sidebar */
.zc-docs-nav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-right: 8px;
}
.zc-docs-nav-home {
  font-family: var(--zm-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zm-ember);
  text-decoration: none;
}
.zc-docs-nav-home:hover { text-decoration: underline; }
.zc-docs-nav-label {
  margin: 0 0 8px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* text-3 on the sidebar ground is the only colour-contrast failure in the
     whole docs surface (Lighthouse a11y 95 → the five section labels). These
     are the sole structural landmarks in a 173-link nav, so they get text-2. */
  color: var(--zm-text-2);
}
.zc-docs-nav-label a {
  color: inherit;
  text-decoration: none;
}
.zc-docs-nav-label a:hover { text-decoration: underline; }
.zc-docs-nav-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zc-docs-nav-group li a {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid transparent;
  color: rgba(255,255,255,0.7);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
.zc-docs-nav-group li a:hover { color: #fff; }
.zc-docs-nav-group li a.active {
  color: var(--zm-ember);
  border-left-color: var(--zm-ember);
  background: rgba(255,165,95,0.06);
}

/* Main column */
.zc-docs-main { min-width: 0; }
.zc-docs-hero { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.zc-docs-index { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; }
.zc-docs-group > h2 {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--zm-line-soft);
  font-family: var(--zm-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.zc-docs-index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zc-docs-index-list li a {
  font-family: var(--zm-font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.zc-docs-index-list li a:hover { color: var(--zm-ember); }
.zc-docs-index-list li p { margin: 3px 0 0; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; }

/* Article */
.zc-docs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11-5);
  letter-spacing: 0.02em;
  color: var(--zm-text-3);
}
.zc-docs-crumbs a { color: var(--zm-ember); text-decoration: none; }
.zc-docs-crumbs a:hover { text-decoration: underline; }
.zc-docs-article > h1 {
  margin: 0 0 12px;
  font-family: var(--zm-font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: #fff;
}
.zc-docs-article-desc { margin: 0 0 8px; color: rgba(255,255,255,0.72); font-size: 16.5px; line-height: 1.6; }

/* Long-form body typography (rendered markdown) — mirrors the blog body. */
.zc-docs-body { margin-top: 28px; color: var(--zm-text-2); font-size: 16px; line-height: 1.75; }
.zc-docs-body a {
  color: oklch(0.78 0.16 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.zc-docs-body a:hover { border-bottom-color: oklch(0.78 0.16 40); }
.zc-docs-body h2,
.zc-docs-body h3 {
  font-family: var(--zm-font-display);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 40px 0 12px;
}
.zc-docs-body h2 { font-size: 26px; font-weight: 700; }
.zc-docs-body h3 { font-size: 20px; font-weight: 600; }
.zc-docs-body p { margin: 0 0 18px; }
.zc-docs-body strong { color: rgba(255,255,255,0.92); }
.zc-docs-body ul,
.zc-docs-body ol { margin: 0 0 18px; padding-left: 26px; }
.zc-docs-body li { margin-bottom: 8px; }
.zc-docs-body code {
  font-family: var(--zm-font-mono);
  font-size: max(0.88em, var(--zm-fs-min));
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line-soft);
  padding: 1px 5px;
}
.zc-docs-body pre {
  margin: 0 0 18px;
  padding: 16px;
  overflow-x: auto;
  background: var(--zm-surface);
  border: 1px solid var(--zm-line-soft);
}
.zc-docs-body pre code { background: none; border: none; padding: 0; }
.zc-docs-body blockquote {
  margin: 0 0 18px;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--zm-ember);
  color: rgba(255,255,255,0.78);
}
.zc-docs-body table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 14.5px; }
.zc-docs-body th,
.zc-docs-body td { text-align: left; padding: 8px 12px; border: 1px solid var(--zm-line-soft); }
.zc-docs-body th {
  font-family: var(--zm-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zm-text-3);
  background: var(--zm-surface-2);
}
.zc-docs-body img { max-width: 100%; height: auto; }
.zc-docs-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 28px 0 0; padding: 0;
  list-style: none;
}
.zc-docs-tags li {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  color: var(--zm-text-3);
  border: 1px solid var(--zm-line);
  padding: 2px 8px;
}
.zc-docs-article-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--zm-line-soft);
}
.zc-docs-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
}
.zc-docs-back { color: oklch(0.78 0.16 40); text-decoration: none; }
.zc-docs-back:hover { text-decoration: underline; }
/* The raw-markdown twin. Quiet by design: it is for the reader who wants the
   text without the page, and for the crawler that reads rendered body copy
   rather than <link rel="alternate">. */
.zc-docs-md {
  font-family: var(--zm-font-mono);
  font-size: 12px;
  color: var(--zm-text-2);
  text-decoration: none;
}
.zc-docs-md:hover { color: var(--zm-ember); text-decoration: underline; }
/* Section headings on the /docs index link their hub. */
.zc-docs-group h2 a { color: inherit; text-decoration: none; }
.zc-docs-group h2 a:hover { color: var(--zm-ember); }

/* On this page */
.zc-docs-toc {
  margin: 20px 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--zm-line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
}
.zc-docs-toc-label {
  margin-bottom: 8px;
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zm-text-2);
}
.zc-docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 28px;
}
.zc-docs-toc li {
  break-inside: avoid;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.zc-docs-toc a {
  /* inline-block + vertical padding so each row clears the 24px WCAG
     target-size minimum; the bare text line is only 16.5px tall. */
  display: inline-block;
  padding: 4px 0;
  color: var(--zm-text-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.zc-docs-toc a:hover { color: var(--zm-ember); text-decoration: underline; }
.zc-docs-toc-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--zm-text-3);
}

/* Updated-on line under the article <h1>. */
.zc-docs-meta {
  margin: 4px 0 0;
  font-family: var(--zm-font-mono);
  font-size: 12px;
  color: var(--zm-text-3);
}

/* Previous / next across the corpus. */
.zc-docs-seq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 44px;
}
.zc-docs-seq a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--zm-line-soft);
  border-radius: 8px;
  text-decoration: none;
  color: var(--zm-text);
}
.zc-docs-seq a:hover { border-color: var(--zm-line); background: rgba(255,255,255,0.02); }
/* A lone "next" must not slide into the "previous" column. */
.zc-docs-seq-next { grid-column: 2; text-align: right; }
.zc-docs-seq-dir {
  font-family: var(--zm-font-mono);
  font-size: var(--zm-fs-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zm-text-3);
}
.zc-docs-seq-title { font-size: 14px; }

@media (max-width: 860px) {
  .zc-docs { grid-template-columns: 1fr; gap: 24px; }
  /* Single column: drop the placement so DOM order rules and the article's
     <h1> is the first thing on the page. */
  .zc-docs > .zc-docs-main,
  .zc-docs > .zc-docs-nav { grid-column: auto; grid-row: auto; }
  /* Capped and scrollable, not a list that pushes the article down: on a
     phone api-typed's 80-entry TOC stands 2,625px tall, which is more nav
     ahead of the body than the sidebar this section order was rearranged to
     get rid of. Same treatment .zc-docs-nav already gets below. A short TOC
     never reaches the cap, so nothing changes on an ordinary page. */
  /* `columns: auto`, not `columns: 1`: a multicol container under a
     max-height fragments sideways instead of scrolling, which put a
     horizontal scrollbar on the whole page. */
  .zc-docs-toc ul { columns: auto; max-height: 45vh; overflow-y: auto; }
  .zc-docs-seq { grid-template-columns: 1fr; }
  .zc-docs-seq-next { grid-column: auto; text-align: left; }
  .zc-docs-nav {
    position: static;
    max-height: 240px;
    padding: 12px;
    border: 1px solid var(--zm-line-soft);
    background: rgba(255,255,255,0.02);
  }}

/* !critical:end */
/* !critical:begin routes=/feed — feed shell, engine, info bar, rail, comments, phone layout */
/* ── Worlds feed (/feed) — single-world player ─────────────────────
   The standard site top bar sits above; ONE Zero-engine pane is kept
   clean (nothing persistent is ever drawn over the live canvas); a
   control rail on the right (desktop) / bottom bar (mobile) carries
   prev/next navigation + the engagement actions; a world-info bar runs
   beneath the engine. Step worlds with the rail ▲/▼ (desktop) or the
   bottom ←/→ (mobile). See docs/plans/2026-06-10-worlds-feed.md.

   Layout is a CSS grid that reflows from [engine|rail / info|rail] on
   desktop to a single column [engine / info / rail-as-bottom-bar] on
   mobile — so the same DOM serves both with no JS. Ember stays the only
   colour punch; corners are square; the one circular exception is the
   author glyph. */

/* Shell: the feed route makes the app shell a fixed-height, non-scrolling
   column so the player fills exactly the viewport beneath the top bar.
   Every other route keeps the default min-height:100vh + page scroll. */
.zm-shell.zm-feed-route { height: 100dvh; min-height: 0; overflow: hidden; }
.zm-shell.zm-feed-route .zm-main { min-height: 0; display: flex; }

.zm-feed2 {
  position: relative;
  flex: 1; min-height: 0; height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "engine rail"
    "info   rail";
  background: #06090b;
  isolation: isolate;
}

/* ── Engine pane — kept clean. The live canvas owns it; the cover, boot
   shimmer, tap-to-play and overlay states are absolutely-positioned and
   all disappear once the engine renders, so nothing persistent ever
   covers the running world. ─────────────────────────────────────── */
.zm-feed2-engine {
  grid-area: engine;
  position: relative; overflow: hidden;
  background: #06090b;
}
/* The keyed <For> mounts EngineCanvas's bare <canvas> as a direct child;
   pin it to the pane so its height resolves regardless of the canvas's
   own percentage sizing. */
.zm-feed2-engine > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Cover — the active world's real cover, fades out on the engine's first
   frame (.live on the pane). */
.zm-feed2-cover {
  position: absolute; inset: 0; z-index: 2;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.zm-feed2-engine.live .zm-feed2-cover { opacity: 0; }
/* Letterbox the cover — fit the whole artwork inside the pane so it's never
   cropped; the engine pane (#06090b) behind shows as the dark bars.
   Overrides WorldCover's inline object-fit:cover (inline → !important). */
.zm-feed2-cover .zm-cover-img { object-fit: contain !important; }

/* Boot shimmer — calm cinematic "BOOTING" with a pulsing ember dot. */
.zm-feed2-booting {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 16; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.82);
  background: rgba(4,6,8,0.5); padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.zm-feed2-booting::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--zm-ember);
  box-shadow: 0 0 10px color-mix(in oklab, var(--zm-ember) 80%, transparent);
  animation: zm-feed2-pulse 1.1s ease-in-out infinite;
}
@keyframes zm-feed2-pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

/* Tap-to-play — square glass plate; ember-floods on hover/focus. */
.zm-feed2-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 18; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: rgba(4,6,8,0.5); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-family: var(--zm-font-mono); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  animation: zm-feed2-rise 0.32s ease both;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.zm-feed2-play:hover,
.zm-feed2-play:focus-visible {
  background: var(--zm-ember); color: #0a0a0a; border-color: var(--zm-ember);
  box-shadow: 0 0 38px -6px color-mix(in oklab, var(--zm-ember) 60%, transparent);
}
.zm-feed2-play:active { transform: translate(-50%, -50%) scale(0.96); }
@keyframes zm-feed2-rise {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.96); }
}

/* Overlay states — error / empty / loading, centred in the engine pane. */
.zm-feed2-state {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 15; text-align: center; color: var(--zm-text-2);
  font-family: var(--zm-font-mono); padding: 0 20px; max-width: 90%;
}
.zm-feed2-state h3 {
  font-family: var(--zm-font-display); color: var(--zm-text);
  font-size: 22px; margin: 0 0 6px;
}

/* ── World-info bar — beneath the engine (desktop) / above the controls
   (mobile). Author · #tag · category · trust, a display title, a clamped
   description, and the sort switch. ─────────────────────────────────── */
.zm-feed2-info {
  grid-area: info;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: #06090b;
  border-top: 1px solid var(--zm-line);
  min-width: 0;
}
/* The text block: title+byline on one line, an optional 1-line desc below. */
.zm-feed2-info-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* Title + author byline (+ #tag · category · trust) share one row. */
.zm-feed2-headline {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 13px;
  min-width: 0;
}
.zm-feed2-labels {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  max-width: 100%;
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10-5); letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1;
}
.zm-feed2-labels > * { padding: 0 11px; }
.zm-feed2-labels > *:first-child { padding-left: 0; }
.zm-feed2-labels > * + * { border-left: 1px solid rgba(255,255,255,0.22); }
.zm-feed2-by {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.85); text-decoration: none;
}
.zm-feed2-by:hover { color: var(--zm-ember); }
/* Author kind glyph — same circular footprint + tint logic as AuthorChip
   (the single deliberate radius exception). */
.zm-feed2-glyph {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: var(--zm-fs-11); line-height: 1; flex: 0 0 auto;
}
.zm-feed2-glyph.agent { background: color-mix(in oklab, var(--zm-agent) 22%, transparent); color: var(--zm-agent); }
.zm-feed2-glyph.human { background: color-mix(in oklab, var(--zm-human) 22%, transparent); color: var(--zm-human); }
.zm-feed2-glyph .zm-logo-glyph { width: 12px; height: 12px; }
.zm-feed2-label { color: rgba(255,255,255,0.55); }
.zm-feed2-label.tag { color: var(--zm-ember); }
.zm-feed2-label.trust[data-trust="verified"],
.zm-feed2-label.trust[data-trust="official"] {
  color: var(--zm-ember);
  box-shadow: inset 3px 0 0 var(--zm-ember);
}
.zm-feed2-title {
  font-family: var(--zm-font-display); font-weight: 600;
  font-size: clamp(18px, 2vw, 23px); line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff; text-decoration: none; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zm-feed2-title:hover { color: var(--zm-ember); }
.zm-feed2-desc {
  max-width: 720px; font-family: var(--zm-font-sans);
  font-size: 12.5px; line-height: 1.4;
  color: rgba(255,255,255,0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zm-feed2-sort { display: flex; gap: 6px; flex: 0 0 auto; }

/* Sort chips (info bar) + the comments close chip share this style. */
.zm-feed2-chip {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11); letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
  color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.03);
  padding: 6px 11px; border: 1px solid rgba(255,255,255,0.13);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.zm-feed2-chip:hover { color: #fff; border-color: rgba(255,255,255,0.32); }
.zm-feed2-chip.active {
  background: var(--zm-ember); color: #0a0a0a; border-color: var(--zm-ember);
}

/* ── Control rail — right column (desktop) spanning the full height, or a
   horizontal bottom bar (mobile). Lives OUTSIDE the engine pane, so the
   live canvas is never overlaid by persistent chrome. ────────────────── */
.zm-feed2-rail {
  grid-area: rail;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 16px 0;
  background: #06090b;
  border-left: 1px solid var(--zm-line);
}
.zm-feed2-nav {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.zm-feed2-nav-label {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-8-5); letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
/* Home escape hatch — desktop has the top bar, so this only appears in the
   mobile bottom bar (see the media query below) where the bar is hidden. */
.zm-feed2-home { display: none; }
/* Prev/next step — square cell; the glyph is a ::before so the same DOM
   shows ▲/▼ in the desktop column and ←/→ in the mobile bottom bar. */
.zm-feed2-step {
  position: relative; width: 40px; height: 40px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.14); font-size: 14px;
  transition: color 0.16s ease, border-color 0.16s ease, transform 0.1s ease, opacity 0.16s ease;
}
.zm-feed2-step::before { content: ""; line-height: 1; }
.zm-feed2-prev::before { content: "▲"; }
.zm-feed2-next::before { content: "▼"; }
.zm-feed2-step:hover:not(:disabled) { color: #fff; border-color: var(--zm-ember); }
.zm-feed2-step:active:not(:disabled) { transform: scale(0.92); }
.zm-feed2-step:disabled { opacity: 0.32; cursor: default; }

.zm-feed2-acts {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* Each action: a square tile, glyph over a mono micro-count. */
.zm-feed2-act {
  width: 48px; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer;
  background: rgba(255,255,255,0.03); color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16); font-size: 17px;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.1s ease;
}
.zm-feed2-act:hover,
.zm-feed2-act:focus-visible { border-color: var(--zm-ember); }
.zm-feed2-act:active { transform: scale(0.96); }
.zm-feed2-act.active {
  background: color-mix(in oklab, var(--zm-ember) 16%, rgba(255,255,255,0.03));
  border-color: var(--zm-ember);
}
.zm-feed2-act-n {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-10); line-height: 1;
  color: rgba(255,255,255,0.85);
}
/* Heart upvote — bump the small glyph; ember (NOT red) when active so it
   stays on the single-accent rule. */
.zm-feed2-like { font-size: 21px; }
.zm-feed2-like.active { color: var(--zm-ember); }
/* Read-only stat tile (forks) — quieter, non-interactive feel. */
.zm-feed2-stat {
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78); cursor: default;
}
.zm-feed2-stat:hover { border-color: rgba(255,255,255,0.10); }
.zm-feed2-stat:active { transform: none; }

/* ── Auth hint — the top-level "sign in to engage" toast. The comments
   composer reuses this class for its own signed-out link, so ONLY the
   visual pill is on the class; positioning is scoped to the toast (a
   direct child of .zm-feed2) — otherwise the mobile transform below drags
   the composer's (off-screen) link back on-screen over the rail. */
.zm-feed2-authhint {
  z-index: 25;
  font-family: var(--zm-font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: #0a0a0a; background: var(--zm-ember);
  padding: 9px 14px; text-decoration: none;
  box-shadow: 0 0 30px -8px color-mix(in oklab, var(--zm-ember) 70%, transparent);
}
.zm-feed2 > .zm-feed2-authhint { position: absolute; left: 22px; bottom: 18px; }
.zm-feed2-authhint:hover { background: var(--zm-ember-2); }

/* ── Comments slide-over — user-triggered + dismissable, so it may
   transiently cover the engine. Anchored to the .zm-feed2 grid box. ──── */
.zm-feed2-comments {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 40;
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: color-mix(in oklab, #0c0a07 92%, transparent);
  backdrop-filter: blur(12px);
  border-left: 1px solid var(--zm-line);
  box-shadow: -18px 0 50px rgba(0,0,0,0.5);
  transform: translateX(105%); transition: transform 0.28s ease;
}
.zm-feed2-comments.open { transform: translateX(0); }
.zm-feed2-comments-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--zm-line);
  background: color-mix(in oklab, #0c0a07 88%, transparent);
  backdrop-filter: blur(8px);
  font-family: var(--zm-font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--zm-text);
}
.zm-feed2-comments-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--zm-ember) 55%, transparent) transparent;
}
.zm-feed2-comments-body::-webkit-scrollbar { width: 3px; }
.zm-feed2-comments-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--zm-ember) 55%, transparent);
}
.zm-feed2-composer {
  position: sticky; bottom: 0;
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--zm-line);
  background: color-mix(in oklab, #0c0a07 92%, transparent);
  backdrop-filter: blur(8px);
}
.zm-feed2-composer textarea {
  flex: 1; min-height: 44px; max-height: 120px; resize: vertical;
  background: var(--zm-surface); color: var(--zm-text);
  border: 1px solid var(--zm-line); padding: 8px 10px;
  font-size: 13px; font-family: inherit; line-height: 1.45;
  transition: border-color 0.16s ease;
}
.zm-feed2-composer textarea:focus { outline: none; border-color: var(--zm-ember); }

/* ── Mobile (<=720px) — top bar hidden (see .zm-shell.zm-feed-route .zc-top
   below); engine fills; world info + controls collapse to a bottom bar. */
@media (max-width: 720px) {
  .zm-shell.zm-feed-route .zc-top { display: none; }

  .zm-feed2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "engine"
      "info"
      "rail";
  }
  /* Stack the info bar so the sort chips drop below the headline. */
  .zm-feed2-info { flex-direction: column; align-items: flex-start; padding: 9px 14px; gap: 5px; }
  .zm-feed2-info-main { width: 100%; }
  .zm-feed2-title { font-size: clamp(17px, 5vw, 22px); }

  /* Rail becomes a horizontal bottom bar: ←/→ on the left, actions right. */
  .zm-feed2-rail {
    flex-direction: row; justify-content: space-between; align-items: center;
    gap: 10px; padding: 10px 14px;
    border-left: none; border-top: 1px solid var(--zm-line);
  }
  .zm-feed2-nav { flex-direction: row; align-items: center; gap: 12px; }
  .zm-feed2-nav-label { display: none; }
  .zm-feed2-home {
    display: grid; place-items: center; width: 40px; height: 40px;
    color: rgba(255,255,255,0.78); text-decoration: none; font-size: 18px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14);
  }
  .zm-feed2-home:hover { color: #fff; border-color: var(--zm-ember); }
  .zm-feed2-prev::before { content: "←"; }
  .zm-feed2-next::before { content: "→"; }
  .zm-feed2-acts { flex-direction: row; gap: 8px; }
  .zm-feed2-act { width: 46px; min-height: 46px; }

  .zm-feed2-comments { width: 100vw; }
  .zm-feed2 > .zm-feed2-authhint { left: 50%; transform: translateX(-50%); bottom: auto; top: 16px; white-space: nowrap; }
}

/* !critical:end */
/* !critical:begin routes=* — reduced motion */
/* ── Reduced motion — gate every loop/transition, pin to final state. */
@media (prefers-reduced-motion: reduce) {
  .zm-feed2-cover { transition: opacity 0.2s linear; }
  .zm-feed2-booting::before { animation: none; opacity: 1; transform: none; }
  .zm-feed2-play { animation: none; }
  .zm-feed2-act, .zm-feed2-step, .zm-feed2-play,
  .zm-feed2-chip, .zm-feed2-by, .zm-feed2-title,
  .zm-feed2-composer textarea { transition: none; }
  .zm-feed2-act:active, .zm-feed2-step:active, .zm-feed2-play:active { transform: none; }
  .zm-feed2-comments { transition: none; }
}

/* !critical:end */
/* ── Blog admin affordances (post-hydration, admins only) ── */
.zc-blog-admin-row {
  display: flex; gap: 14px;
  margin: 10px 0 0;
  font-family: var(--zm-font-mono);
  font-size: 12px;
}
.zc-blog-admin-row a {
  color: var(--zm-ember);
  text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--zm-ember) 30%, transparent);
  padding: 4px 10px;
}
.zc-blog-admin-row a:hover { background: color-mix(in oklab, var(--zm-ember) 12%, transparent); }
.zc-blog-foot-links { display: flex; gap: 16px; align-items: center; }

/* !critical:begin routes=/blog/*,/docs/*,/privacy,/terms — rendered markdown body */
/* ── Markdown body (.zm-md-body) ─────────────────────────────────────
   Rendered HTML from pulldown-cmark (asset/file source viewer, README
   accordion). Without these rules markdown fell back to browser
   defaults — invisible tables, default-blue links — on the dark theme. */
.zm-md-body { overflow-wrap: break-word; }
.zm-md-body h1, .zm-md-body h2, .zm-md-body h3, .zm-md-body h4 {
  color: var(--zm-text);
  line-height: 1.25;
  margin: 1.2em 0 0.5em;
}
.zm-md-body h1 { font-size: 1.55em; }
.zm-md-body h2 { font-size: 1.3em; border-bottom: 1px solid var(--zm-line); padding-bottom: 6px; }
.zm-md-body h3 { font-size: 1.12em; }
.zm-md-body > :first-child { margin-top: 0; }
.zm-md-body p { margin: 0.7em 0; }
.zm-md-body a { color: var(--zm-ember); text-decoration: none; }
.zm-md-body a:hover { text-decoration: underline; }
.zm-md-body ul, .zm-md-body ol { padding-left: 1.6em; margin: 0.6em 0; }
.zm-md-body li { margin: 0.25em 0; }
.zm-md-body li > input[type="checkbox"] { margin-right: 6px; accent-color: var(--zm-ember); }
.zm-md-body code {
  font-family: var(--zm-font-mono);
  font-size: max(0.92em, var(--zm-fs-min));
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  padding: 1px 5px;
}
.zm-md-body pre {
  background: var(--zm-surface-2);
  border: 1px solid var(--zm-line);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.8em 0;
}
.zm-md-body pre code { background: none; border: none; padding: 0; }
.zm-md-body blockquote {
  margin: 0.8em 0;
  padding: 4px 14px;
  border-left: 3px solid var(--zm-ember);
  color: var(--zm-text-3);
  background: color-mix(in oklab, var(--zm-ember) 5%, transparent);
}
.zm-md-body table {
  border-collapse: collapse;
  margin: 0.8em 0;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.zm-md-body th, .zm-md-body td {
  border: 1px solid var(--zm-line);
  padding: 6px 12px;
  text-align: left;
}
.zm-md-body th {
  background: var(--zm-surface-2);
  font-family: var(--zm-font-mono);
  font-size: max(0.85em, var(--zm-fs-min));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zm-text-3);
}
.zm-md-body hr { border: none; border-top: 1px solid var(--zm-line); margin: 1.4em 0; }
.zm-md-body img { max-width: 100%; border: 1px solid var(--zm-line); }

/* !critical:end */
/* ── Agent chat (apps/web/src/chat.rs) ─────────────────────────────────── */
.zc-chat { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.zc-chat-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 16px;
}
.zc-chat-compact .zc-chat-scroll { padding: 12px 8px; }

.zc-msg {
  max-width: 760px; line-height: 1.55; font-size: 14.5px;
  /* The transcript is a flex column with overflow-y:auto, so messages must
     never be flex-shrunk to fit — the container scrolls instead. A message
     with overflow other than `visible` (the tool cards set `overflow:hidden`
     to clip the rounded header) otherwise gets an automatic min-height of 0
     and collapses to a ~2px sliver once the transcript overflows the panel,
     hiding the card entirely. Pin every message at its content height. */
  flex-shrink: 0;
}
.zc-msg-user {
  align-self: flex-end; background: var(--zm-accent, #ff7a45);
  color: #1a0f0a; border-radius: 14px 14px 4px 14px;
  padding: 9px 13px; white-space: pre-wrap; word-break: break-word;
}
.zc-msg-bot {
  align-self: flex-start; background: rgba(255,255,255,0.04);
  border: 1px solid var(--zm-line); border-radius: 14px 14px 14px 4px;
  padding: 10px 14px; width: fit-content; max-width: 100%;
}
.zc-msg-bot.streaming { border-color: var(--zm-accent, #ff7a45); }
.zc-msg-bot p:first-child { margin-top: 0; } .zc-msg-bot p:last-child { margin-bottom: 0; }
.zc-msg-bot pre {
  background: rgba(0,0,0,0.35); border: 1px solid var(--zm-line);
  border-radius: 8px; padding: 10px; overflow-x: auto; font-family: var(--zm-font-mono);
  font-size: 12.5px;
}
.zc-msg-bot code { font-family: var(--zm-font-mono); font-size: 12.5px; }
.zc-msg-system { align-self: center; color: var(--zm-text-3); font-size: 12.5px; }
.zc-chat-err { color: #ff6b6b; }
/* Slash-command notes (cleared / looping / help). Their own class so the
   pill/mono/pre-wrap styling doesn't leak onto the error banner, which shares
   .zc-msg-system. Monospace + pre-wrap + left-align keeps the column-aligned
   `/help` listing intact; short one-liners read as a small centred pill. */
.zc-msg-note {
  align-self: center; max-width: 100%; color: var(--zm-text-3);
  font-size: 12px; font-family: var(--zm-font-mono); line-height: 1.5;
  white-space: pre-wrap; text-align: left;
  background: rgba(255,255,255,0.03); border: 1px solid var(--zm-line-soft);
  border-radius: 8px; padding: 7px 11px;
}

.zc-thinking {
  align-self: flex-start; color: var(--zm-text-3); font-size: 12.5px;
  font-family: var(--zm-font-mono); background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--zm-line); border-radius: 0 6px 6px 0;
  padding: 6px 10px; cursor: pointer; max-width: 100%;
}
.zc-thinking-preview { opacity: 0.7; }
.zc-thinking-badge { margin-left: 8px; opacity: 0.7; font-size: var(--zm-fs-11); }
.zc-thinking-badge.dim { opacity: 0.45; }

.zc-tool {
  align-self: flex-start; border: 1px solid var(--zm-line); border-radius: 10px;
  padding: 0; background: rgba(255,255,255,0.02); max-width: 100%; overflow: hidden;
}
.zc-tool.expanded { background: rgba(255,255,255,0.03); }
/* Header is the click target: a full-width borderless button row. */
.zc-tool-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 11px; font-size: 12.5px; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
}
.zc-tool-head:hover { background: rgba(255,255,255,0.03); }
.zc-tool-name { font-family: var(--zm-font-mono); font-weight: 600; flex: 0 0 auto; }
.zc-tool-summary {
  flex: 1 1 auto; min-width: 0; color: var(--zm-text-3); font-size: 12px;
  font-family: var(--zm-font-mono); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.zc-tool-summary::before { content: "·"; margin-right: 7px; opacity: 0.5; }
.zc-tool-caret { flex: 0 0 auto; color: var(--zm-text-3); font-size: var(--zm-fs-11); opacity: 0.7; }
.zc-tool-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.zc-tool-dot.running { background: #f0b84a; animation: zc-pulse 1s infinite; }
.zc-tool-dot.ok { background: #4ad07a; }
.zc-tool-dot.err { background: #ff6b6b; }
@keyframes zc-pulse { 50% { opacity: 0.35; } }
.zc-tool-io { padding: 0 11px 9px; }
.zc-tool-io-label {
  display: block; margin: 0 0 4px; font-size: var(--zm-fs-10); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--zm-text-3); opacity: 0.7;
  font-family: var(--zm-font-mono);
}
.zc-tool-input, .zc-tool-out {
  margin: 0; padding: 8px 10px; background: rgba(0,0,0,0.35);
  border: 1px solid var(--zm-line); border-radius: 6px;
  font-family: var(--zm-font-mono); font-size: 12px; line-height: 1.5;
  max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.zc-tool-out { color: var(--zm-text-2); }

.zc-msg-meta {
  align-self: flex-start; display: flex; gap: 12px;
  color: var(--zm-text-3); font-size: var(--zm-fs-11); font-family: var(--zm-font-mono);
  opacity: 0.7; padding: 0 4px;
}

.zc-chat-composer {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--zm-line);
  background: rgba(0,0,0,0.2);
  position: relative; /* anchor for the slash-command menu popover */
}

/* Slash-command autocomplete popover, floated just above the composer. */
.zc-cmd-menu {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px);
  z-index: 30; display: flex; flex-direction: column; gap: 2px;
  padding: 5px; max-height: 240px; overflow-y: auto;
  background: var(--zm-surface-2); border: 1px solid var(--zm-line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.zc-cmd-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: inherit; font: inherit; text-align: left;
}
.zc-cmd-item:hover { background: rgba(255,255,255,0.05); }
.zc-cmd-item.sel { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px var(--zm-accent, #ff7a45); }
.zc-cmd-name { flex: 0 0 auto; font-family: var(--zm-font-mono); font-weight: 600; color: var(--zm-accent, #ff7a45); }
.zc-cmd-desc {
  flex: 1 1 auto; min-width: 0; color: var(--zm-text-3); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-chat-input {
  flex: 1 1 auto; resize: none; min-height: 22px; max-height: 160px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--zm-line);
  border-radius: 12px; padding: 10px 13px; color: var(--zm-text, #eee);
  font: inherit; font-size: 14.5px; line-height: 1.45; outline: none;
}
.zc-chat-input:focus { border-color: var(--zm-accent, #ff7a45); }
.zc-chat-send {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: var(--zm-accent, #ff7a45); color: #1a0f0a;
  font-size: 16px; cursor: pointer;
}
.zc-chat-send:disabled { opacity: 0.4; cursor: default; }
/* Stop: the send control while a turn is running. Deliberately NOT the accent
   colour — it is a different action with a different consequence, and giving it
   the same skin as send invites the muscle memory that fires it by accident. */
.zc-chat-stop {
  background: rgba(255,255,255,0.10); color: var(--zm-text, #eee);
  border: 1px solid var(--zm-line); font-size: 13px;
}
.zc-chat-stop:hover:not(:disabled) { background: rgba(255,255,255,0.16); }

/* "It is still working." Sits under the live text so a turn that is streaming
   an answer AND still working reads as both. */
.zc-chat-activity {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 2px; color: var(--zm-text-2, #9a9a9a); font-size: 13px;
}
.zc-chat-activity-dots { display: inline-flex; gap: 4px; }
.zc-chat-activity-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  animation: zc-activity-pulse 1.2s ease-in-out infinite;
}
.zc-chat-activity-dots i:nth-child(2) { animation-delay: 0.15s; }
.zc-chat-activity-dots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes zc-activity-pulse {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}
/* Respect a reader who has asked for less motion: the line still says what is
   happening, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .zc-chat-activity-dots i { animation: none; opacity: 0.6; }
}
/* The 📎 attach button — same footprint as send, subtler skin. */
.zc-chat-attach {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--zm-line); background: rgba(255,255,255,0.04);
  color: var(--zm-text-2); font-size: 16px; cursor: pointer;
}
.zc-chat-attach:hover { background: rgba(255,255,255,0.08); }

/* ── Attachment chips: staged (composer) + sent (transcript) ───────────────── */
.zc-attach-pending { flex: 1 0 100%; }              /* own full-width line above the input */
.zc-attach-pending, .zc-attach-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.zc-attach-row { margin-bottom: 7px; }              /* sits above the user-bubble text */
.zc-attach-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  max-width: 220px;
}
.zc-attach-img img {
  width: 56px; height: 56px; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.25);
}
.zc-attach-file {
  padding: 6px 10px; border-radius: 9px; font-size: 12px;
  font-family: var(--zm-font-mono);
  background: rgba(255,255,255,0.05); border: 1px solid var(--zm-line);
  color: var(--zm-text-2);
}
/* Inside the accent-coloured user bubble, the pill needs darker-on-accent. */
.zc-msg-user .zc-attach-file {
  background: rgba(0,0,0,0.16); border-color: rgba(0,0,0,0.18); color: #2a1a12;
}
.zc-attach-ico { flex: 0 0 auto; }
.zc-attach-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
/* The little remove (×) on a STAGED chip (composer only). */
.zc-attach-remove {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border-radius: 50%; border: 1px solid var(--zm-line); cursor: pointer;
  background: var(--zm-surface-2, #222); color: var(--zm-text, #eee); font-size: 12px;
}
.zc-attach-remove:hover { background: #ff6b6b; color: #1a0f0a; border-color: #ff6b6b; }

.zc-chat-welcome { margin: auto; text-align: center; color: var(--zm-text-3); max-width: 380px; }
.zc-chat-welcome .zc-chat-mark { font-size: 30px; color: var(--zm-accent, #ff7a45); margin-bottom: 10px; }
.zc-chat-welcome h2 { margin: 0 0 6px; color: var(--zm-text, #eee); }

/* !critical:begin routes=/chat — chat page head, panel + sign-in gate */
.zc-chat-page { max-width: 860px; margin: 0 auto; height: calc(100vh - 130px); display: flex; flex-direction: column; padding: 0 16px; }
.zc-chat-page-head { padding: 18px 4px 8px; }
.zc-chat-page-head h1 { margin: 0; }
.zc-chat-page-sub { color: var(--zm-text-3); font-size: 13px; margin: 4px 0 0; }
.zc-chat-page .zc-chat { border: 1px solid var(--zm-line); border-radius: 14px; overflow: hidden; }
/* The sign-in gate that replaces the composer on /chat for a signed-out
   visitor. Same panel treatment as the chat surface it stands in for, so the
   page does not collapse to a bare sentence. */
.zc-chat-signin {
  border: 1px solid var(--zm-line); border-radius: 14px;
  padding: 28px 24px; margin-top: 12px;
  background: var(--zm-bg-2, #16110e);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.zc-chat-signin p { margin: 0; color: var(--zm-text-3); font-size: 14px; text-align: center; }
.zc-chat-signin .zc-signin-actions { width: min(280px, 100%); }
/* !critical:end */

/* !critical:begin routes=* — chat dock anchor + launch button */
/* ── Persistent chat dock (app-level; survives route navigation) ───────────
   Mounted once in lib.rs outside <Routes> so the conversation + its live SSE
   stream survive navigating home ↔ /edit ↔ other worlds. */
.zc-dock { position: fixed; right: 18px; bottom: 18px; z-index: 1000; }

/* ── Desktop download card (bottom-right, above the chat dock) ────────
   z-900 deliberately, under the dock's 1000: when the chat panel opens it
   covers this card rather than fighting it for the corner. `bottom: 76px`
   clears the collapsed dock pill (44px tall at bottom: 18px) with a 14px
   gap. `ui::DesktopDownloadCard` renders nothing at all until hydration,
   and only on platforms a native build exists for, so this never paints
   during SSR. */
.zc-dlcard {
  position: fixed; right: 18px; bottom: 76px; z-index: 900;
  width: 288px;
  padding: 14px 16px 16px;
  border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg);
  background: var(--zm-bg-2, #16110e);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: zc-dlcard-in 0.28s ease both;
}
/* Home page: the chat dock's collapsed pill is hidden there (the hero is
   itself a prompt box), so nothing needs clearing and the card sits in
   the corner rather than hovering above a gap. */
.zc-dlcard-low { bottom: 18px; }
@keyframes zc-dlcard-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zc-dlcard { animation: none; }
}
.zc-dlcard-close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font: inherit; font-size: var(--zm-fs-11); line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.zc-dlcard-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.zc-dlcard-close:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 2px; }
.zc-dlcard-title {
  font-family: var(--zm-font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.02em; color: #fff;
  padding-right: 26px;
}
.zc-dlcard-sub {
  margin: 5px 0 12px;
  font-size: 12px; line-height: 1.45; color: var(--zm-text-3);
}
.zc-dlcard-cta {
  display: block; text-align: center;
  padding: 9px 14px;
  border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-sm, 4px);
  background: rgba(255,255,255,0.05);
  color: #fff; text-decoration: none;
  font-family: var(--zm-font-mono); font-size: 12px; letter-spacing: 0.04em;
  transition: background .15s ease, border-color .15s ease;
}
.zc-dlcard-cta:hover {
  background: rgba(255,255,255,0.1);
  border-color: color-mix(in oklab, var(--zm-ember) 55%, var(--zm-line));
}
.zc-dlcard-cta:focus-visible { outline: 2px solid var(--zm-trace); outline-offset: 2px; }

/* A floating card over a narrow viewport covers the content it is
   advertising against. The offer is desktop-only anyway. */
@media (max-width: 900px) { .zc-dlcard { display: none; } }
.zc-dock-launch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 22px; border: 1px solid var(--zm-line);
  background: var(--zm-accent, #ff7a45); color: #1a0f0a;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.zc-dock-launch:hover { filter: brightness(1.05); }
.zc-dock-launch-mark { font-size: 15px; }
.zc-dock-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(420px, calc(100vw - 36px));
  height: min(640px, calc(100vh - 120px));
  background: var(--zm-bg-2, #16110e); border: 1px solid var(--zm-line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
}
.zc-dock-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--zm-line);
  background: rgba(0,0,0,0.25);
}
.zc-dock-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--zm-text, #eee); }
.zc-dock-title .zc-dock-launch-mark { color: var(--zm-accent, #ff7a45); }
.zc-dock-min {
  background: none; border: none; color: var(--zm-text-3); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 0 6px;
}
.zc-dock-min:hover { color: var(--zm-text, #eee); }
.zc-dock-panel .zc-chat { flex: 1 1 auto; min-height: 0; }
@media (max-width: 560px) {
  .zc-dock { right: 10px; bottom: 10px; left: 10px; }
  /* Restate the bottom-bar lift: this block is later in the file than the
     900px one and would otherwise win and drop the dock onto the bar. */
  .zm-shell.zm-bottomnav .zc-dock { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .zc-dock-panel { width: auto; height: min(75vh, calc(100vh - 90px)); }}

/* !critical:end */
/* ── Create-flow (home hero CTA → prompt modal → /edit builder layout) ────
   Three cooperating pieces (consumer.rs CreateFlowModal, chat.rs ChatDock,
   pages.rs EngineViewport):
   1. the prompt modal, whose send plays the `launching` exit animation
      (the card flies toward where the chat panel is about to appear);
   2. the builder layout on /edit: the open dock docks LEFT at 25% width,
      full viewport height;
   3. the engine viewport shifts right to sit beside it. */

/* Shared width of the left builder chat panel. 25% of the viewport, with
   sane floors/ceilings so the chat stays usable on small screens and
   doesn't balloon on ultrawide ones. */
:root { --zc-builder-w: clamp(320px, 25vw, 520px); }

.zc-create-modal { max-width: 560px; }
.zc-create-input {
  width: 100%; box-sizing: border-box; resize: none;
  min-height: 96px; margin: 4px 0 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; padding: 12px 14px;
  color: rgba(255,255,255,0.92);
  font: inherit; font-size: 14.5px; line-height: 1.5; outline: none;
}
.zc-create-input:focus { border-color: var(--zm-ember, #ff7a45); }
.zc-create-input::placeholder { color: rgba(255,255,255,0.35); }
.zc-create-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
/* Stacked Log in / Create account CTAs in the anonymous sign-in gate
   (SignInPromptModal). Buttons are full-width via .zc-modal-cta, so a
   column keeps them tidy on every width. Padding bumped over the base
   .zc-btn so they read as primary modal actions, not inline chips. */
/* !critical:begin routes=/chat — stacked sign-in CTAs */
.zc-signin-actions {
  display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.zc-signin-actions .zc-btn { padding: 11px 22px; font-size: 14px; }
/* !critical:end */
/* The engine warm-up chip — flips to "engine ready" when the preload
   promise resolves (see CreateFlowModal). */
.zc-create-engine {
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.zc-create-engine.ready { color: #4ad07a; }
.zc-create-go {
  padding: 11px 22px; border: 0; border-radius: 0;
  background: var(--zm-ember, #ff7a45); color: #1a0f0a;
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.zc-create-go:hover { filter: brightness(1.07); }
.zc-create-go:disabled { opacity: 0.45; cursor: default; filter: none; }
.zc-create-err { color: #ff6b6b; font-size: 13px; margin: 0 0 12px; }
.zc-create-note {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,0.5);
}
.zc-create-note a { color: var(--zm-ember, #ff7a45); }

/* Send → exit animation: the card accelerates toward the LEFT edge (where
   the builder chat panel is about to live) while the backdrop lifts.
   Duration must match CREATE_EXIT_MS in consumer.rs — the world-create
   request runs under this animation and navigation waits for both. */
.zc-create-bd.launching { pointer-events: none; animation: zc-create-bd-out 0.45s ease forwards; }
.zc-create-bd.launching .zc-create-modal {
  animation: zc-create-launch 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
@keyframes zc-create-launch {
  to { transform: translateX(-38vw) scale(0.45); opacity: 0; }
}
@keyframes zc-create-bd-out {
  to { background: rgba(8,4,16,0); backdrop-filter: blur(0px); opacity: 0; }
}

/* The engine viewport (pages.rs EngineViewport — /play + /edit). Formerly
   inline `position:fixed;inset:0`; a class so the builder chat panel can
   shift it right. The transition covers toggling the chat mid-session; the
   canvas's ResizeObserver (zero-boot.js) follows the width change. */
/* !critical:begin routes=/play/*,/edit/* — engine viewport */
.zc-engine-viewport {
  position: fixed; inset: 0;
  background: #06090b; overflow: hidden;
  transition: left 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* !critical:end */

/* The play route's own answer when a readable world has no saved version:
   shown where the canvas would have been, so the visitor reads a state
   rather than an engine error over a black canvas. Sits under the
   mini-nav and the debug strip, and leaves both clickable. */
.zc-engine-noversion {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  pointer-events: none;
}
.zc-engine-noversion h1 {
  margin: 0; font-size: clamp(22px, 3vw, 34px);
  color: var(--zm-text);
}
.zc-engine-noversion p {
  margin: 0; max-width: 52ch;
  font-size: 15px; line-height: 1.6; color: var(--zm-text-2);
}
.zc-engine-noversion .zc-btn { pointer-events: auto; }

/* Builder layout: on /edit an OPEN dock claims the left edge, full height,
   25% wide, and the engine viewport shifts right beside it. Desktop-only
   via min-width — below it the overrides simply never apply, so the dock
   keeps its base floating skin and the engine keeps the full width (no
   undo rules restating the base styles). */
@media (min-width: 901px) {
  .zc-dock.zc-dock-builder {
    left: 0; top: 0; bottom: 0; right: auto;
    width: var(--zc-builder-w);
  }
  .zc-dock-builder .zc-dock-panel {
    width: 100%; height: 100%;
    border: 0; border-right: 1px solid var(--zm-line);
    border-radius: 0;
    box-shadow: 12px 0 48px rgba(0,0,0,0.45);
    animation: zc-builder-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .zc-engine-viewport.with-chat { left: var(--zc-builder-w); }
}
@keyframes zc-builder-in {
  from { transform: translateX(-32px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── Conversation switcher ──────────────────────────────────────────────── */
/* Dock header action buttons (New chat / Conversations). */
.zc-dock-actions { display: inline-flex; align-items: center; gap: 2px; }
.zc-dock-act {
  background: none; border: none; color: var(--zm-text-3);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 7px;
}
.zc-dock-act:hover { color: var(--zm-text, #eee); background: rgba(255,255,255,0.06); }

/* The /chat-page control bar (full surface only). */
.zc-chat-bar {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--zm-line); background: rgba(0,0,0,0.18);
}
.zc-bar-btn {
  background: var(--zm-bg-2, #16110e); border: 1px solid var(--zm-line);
  color: var(--zm-text-2, #ccc); font-size: 12.5px; cursor: pointer;
  padding: 5px 11px; border-radius: 8px;
}
.zc-bar-btn:hover { color: var(--zm-text, #eee); border-color: var(--zm-accent, #ff7a45); }

/* The overlay panel itself — covers the chat surface (dock / page). */
.zc-switcher {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--zm-bg-2, #16110e);
}
.zc-switcher-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--zm-line); background: rgba(0,0,0,0.25);
}
.zc-switcher-title { font-weight: 600; font-size: 14px; color: var(--zm-text, #eee); }
.zc-switcher-close {
  background: none; border: none; color: var(--zm-text-3); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 6px;
}
.zc-switcher-close:hover { color: var(--zm-text, #eee); }
.zc-switcher-new {
  flex: 0 0 auto; margin: 10px 12px; padding: 8px 12px;
  background: var(--zm-accent, #ff7a45); color: #1a0f08; border: none;
  border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.zc-switcher-new:hover { filter: brightness(1.05); }
.zc-switcher-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
.zc-switcher-empty { color: var(--zm-text-3); font-size: 13px; text-align: center; padding: 18px 8px; }
.zc-switcher-row {
  display: flex; align-items: stretch; gap: 4px; border-radius: 9px; margin-bottom: 4px;
}
.zc-switcher-row:hover { background: rgba(255,255,255,0.04); }
.zc-switcher-row.active { background: rgba(255,122,69,0.12); }
.zc-switcher-pick {
  flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: none;
  cursor: pointer; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px;
}
.zc-switcher-preview {
  color: var(--zm-text, #eee); font-size: 13px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-switcher-meta { color: var(--zm-text-3); font-size: var(--zm-fs-11); }
.zc-switcher-del {
  flex: 0 0 auto; background: none; border: none; color: var(--zm-text-3);
  cursor: pointer; padding: 0 10px; font-size: 14px; border-radius: 9px;
}
.zc-switcher-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); }

/* ───────────────────────────────────────────────────────────────────────────
   Promotions — Boosting + Advertisement.
   Feed badges, card badges, ad disclosure, and the owner Promote modal.
   ─────────────────────────────────────────────────────────────────────────── */

/* Feed player: [AD] + Promoted chips in the info-bar label rail. */
.zm-feed2-label.ad {
  color: #0c0c0c; background: var(--zm-trace);
  font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 7px !important; border-radius: 5px; font-size: var(--zm-fs-11);
}
.zm-feed2-label.promoted { color: var(--zm-ember); font-weight: 600; }
/* The label rail draws a divider before every child after the first; drop it
   on the element directly after a promo chip so the [AD]/Promoted badge isn't
   trailed by a stray separator. */
.zm-feed2-labels > .ad + *,
.zm-feed2-labels > .promoted + * { border-left: none; padding-left: 0; }

/* Feed player: sponsored disclosure + advertiser link under the blurb. */
.zm-feed2-ad-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
}
.zm-feed2-ad-by {
  color: var(--zm-trace); font-size: var(--zm-fs-11); text-transform: uppercase;
  letter-spacing: 0.08em; font-family: var(--zm-font-mono, monospace);
}
.zm-feed2-ad-headline { color: rgba(255,255,255,0.82); font-size: 13px; }
.zm-feed2-ad-link {
  color: #0c0c0c; background: var(--zm-trace); text-decoration: none;
  font-weight: 600; font-size: 12px; padding: 4px 12px; border-radius: 8px;
  white-space: nowrap;
}
.zm-feed2-ad-link:hover { filter: brightness(1.08); }

/* World cover cards: [AD] + Promoted eyebrow badges. */
.zm-card-ad {
  color: #0c0c0c; background: var(--zm-trace);
  font-weight: 700; letter-spacing: 0.06em; font-size: var(--zm-fs-10);
  padding: 1px 6px; border-radius: 5px;
}
.zm-card-promoted {
  color: var(--zm-ember); font-weight: 700; letter-spacing: 0.06em;
  font-size: var(--zm-fs-10);
}

/* Owner action: Promote button (sits beside Edit world). */
.zc-store-promote {
  border-color: var(--zm-ember) !important;
  color: var(--zm-ember) !important;
}
.zc-store-promote:hover {
  background: color-mix(in oklch, var(--zm-ember) 14%, transparent) !important;
}

/* Promote modal. */
.zc-promote-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(5px); padding: 20px;
}
.zc-promote-backdrop.zc-hidden { display: none; }
.zc-promote-modal {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--zm-bg); border: 1px solid var(--zm-line);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.zc-promote-head { display: flex; align-items: center; justify-content: space-between; }
.zc-promote-head h3 { margin: 0; font-size: 18px; }
.zc-promote-x {
  background: none; border: none; color: var(--zm-text-3);
  cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 8px;
}
.zc-promote-x:hover { color: var(--zm-text-1, #fff); background: rgba(255,255,255,0.07); }
.zc-promote-sub { color: var(--zm-text-3); font-size: 13px; margin: 6px 0 16px; line-height: 1.5; }
.zc-promote-kinds { display: flex; gap: 10px; margin-bottom: 14px; }
.zc-promote-kind {
  flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 13px; border-radius: 11px; cursor: pointer;
  background: transparent; border: 1px solid var(--zm-line); color: var(--zm-text-3);
}
.zc-promote-kind b { color: var(--zm-text-1, #fff); font-size: 14px; }
.zc-promote-kind span { font-size: var(--zm-fs-11); }
.zc-promote-kind.active {
  border-color: var(--zm-ember);
  background: color-mix(in oklch, var(--zm-ember) 12%, transparent);
}
.zc-promote-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.zc-promote-field span { font-size: 12px; color: var(--zm-text-3); }
.zc-promote-field input {
  background: color-mix(in oklch, var(--zm-line) 30%, transparent);
  border: 1px solid var(--zm-line); border-radius: 9px;
  padding: 9px 11px; color: var(--zm-text-1, #fff); font-size: 14px;
}
.zc-promote-field input:focus { outline: none; border-color: var(--zm-ember); }
.zc-promote-err { color: #ff6b6b; font-size: 12px; margin: 4px 0 10px; }
.zc-promote-go { width: 100%; margin-top: 4px; }
.zc-promote-list { margin-top: 20px; border-top: 1px solid var(--zm-line); padding-top: 14px; }
.zc-promote-list-h {
  font-size: var(--zm-fs-11); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--zm-text-4); margin-bottom: 10px;
}
.zc-promote-empty { color: var(--zm-text-4); font-size: 13px; }
.zc-promote-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--zm-line) 60%, transparent);
}
.zc-promote-row:last-child { border-bottom: none; }
.zc-promote-badge {
  flex: 0 0 auto; font-size: var(--zm-fs-10); font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 5px;
  color: var(--zm-ember); border: 1px solid currentColor;
}
.zc-promote-badge[data-kind="ad"] { color: var(--zm-trace); }
.zc-promote-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--zm-text-3); }
.zc-promote-row.live .zc-promote-meta { color: var(--zm-text-1, #fff); }
.zc-promote-cancel {
  flex: 0 0 auto; background: none; border: 1px solid var(--zm-line);
  color: var(--zm-text-3); cursor: pointer; font-size: 12px;
  padding: 4px 10px; border-radius: 8px;
}
.zc-promote-cancel:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* Consumer cover-card promo badge (corner) — ads + boosts on the explore
   grid/carousel, so a sponsored card is always disclosed. */
.zc-card-art { position: relative; }
.zc-card-promo {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  font-size: var(--zm-fs-10); font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 6px; line-height: 1.4;
}
.zc-card-promo.ad { color: #0c0c0c; background: var(--zm-trace); }
.zc-card-promo.promoted { color: var(--zm-ember); background: rgba(0,0,0,0.6); }

/* !critical:begin routes=* — sitewide footer */
/* ── Sitewide footer ──────────────────────────────────────────────── */
/* The site's second internal-link surface and its trust block (mounted in the
   App shell, apps/web/src/lib.rs). Four named groups on a grid, then a
   separated legal line carrying the brand sentence, Privacy/Terms and the
   copyright. `.zm-main { flex: 1 }` pushes it to the bottom. */
.zm-footer {
  border-top: 1px solid var(--zm-line-soft);
  background: var(--zm-bg-2);
  /* Bottom padding is clearance for the fixed chrome that floats over this
     corner: the chat dock's collapsed pill needs ~96px, and on desktop the
     `.zc-dlcard` download card (fixed, right: 18px, bottom: 18-76px) needs
     ~250px. Padding rather than a margin so the overlays sit on the footer's
     own ground instead of on its text (#921). */
  padding: 40px 24px 96px;
}
.zm-footer-inner {
  /* The container width the rest of the site uses, centred — so a 2560px
     display gets an even gutter rather than two thirds of empty right edge. */
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* `auto-fit` collapses the empty tracks, so the four groups spread across the
   full container on desktop and fold to two columns on a phone without a
   second breakpoint. The track floor is `min(100%, 150px)` rather than a bare
   150px so a container narrower than one column still gets one, and
   `.zm-footer-col { min-width: 0 }` is what keeps a long label wrapping inside
   its track instead of pushing the grid wider than the viewport. */
.zm-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 26px 32px;
}
.zm-footer-col { min-width: 0; }
.zm-footer-h {
  color: var(--zm-text);
  font: 600 0.82rem/1.2 var(--zm-font-sans);
  letter-spacing: 0.01em;
  margin: 0 0 11px;
}
.zm-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.zm-footer-col a,
.zm-footer-legal-nav a {
  /* text-2 measures 9.55:1 on --zm-bg-2, clear of the 4.5 floor (#462).
     text-3 is 4.46:1 and fails, so it is not an option here. */
  color: var(--zm-text-2);
  font: 400 0.85rem/1.3 var(--zm-font-sans);
  letter-spacing: 0.01em;
  transition: color 0.14s ease;
}
.zm-footer-col a:hover,
.zm-footer-col a:focus-visible,
.zm-footer-legal-nav a:hover,
.zm-footer-legal-nav a:focus-visible {
  color: var(--zm-ember);
}
/* The legal line: a rule and its own row, so Privacy/Terms read as legal
   rather than as two more product links at the end of a list. */
.zm-footer-legal {
  border-top: 1px solid var(--zm-line-soft);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
}
.zm-footer-brand {
  color: var(--zm-text-2);
  font: 400 0.8rem/1.5 var(--zm-font-sans);
  margin: 0;
  max-width: 52ch;
}
.zm-footer-legal-end {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
}
.zm-footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.zm-footer-copy {
  color: var(--zm-text-2);
  font: 400 0.8rem/1.5 var(--zm-font-sans);
  margin: 0;
}
/* Desktop only: the download card renders for Windows and Linux, never on a
   phone, and the mobile rule beside `.zm-shell.zm-bottomnav` sets its own
   clearance. */
@media (min-width: 901px) {
  .zm-footer { padding-bottom: 250px; }
}
/* !critical:end */
/* ── Workshop tab (live working-state — Phase 3 of live-state design) ── */
.zm-workshop .zm-ws-sub {
  color: var(--zm-text-3);
  font: 400 0.82rem/1.5 var(--zm-font-sans);
  margin: 4px 0 0;
  max-width: 60ch;
}
.zm-ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 720px) { .zm-ws-grid { grid-template-columns: 1fr; }}
.zm-ws-block {
  border: 1px solid var(--zm-line);
  background: var(--zm-surface-2);
  padding: 14px 16px;
  margin-top: 16px;
}
.zm-ws-grid .zm-ws-block { margin-top: 0; }
.zm-ws-h {
  font: 600 0.7rem/1 var(--zm-font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zm-text-3);
  margin: 0 0 12px;
}
.zm-ws-empty, .zm-ws-loading, .zm-ws-unavailable {
  color: var(--zm-text-4);
  font: 400 0.82rem/1.5 var(--zm-font-sans);
  margin: 0;
}
.zm-ws-unavailable { color: var(--zm-text-3); font-style: italic; }
.zm-ws-when { color: var(--zm-text-4); font: 400 0.74rem/1 var(--zm-font-mono); }

/* Live-now presence */
.zm-ws-presence { display: flex; flex-direction: column; gap: 8px; }
.zm-ws-presence-row { display: flex; align-items: center; gap: 8px; }
.zm-ws-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zm-ws-dot.is-working { background: var(--zm-trace); box-shadow: 0 0 8px color-mix(in oklab, var(--zm-trace) 60%, transparent); }
.zm-ws-dot.is-play { background: var(--zm-violet); box-shadow: 0 0 8px color-mix(in oklab, var(--zm-violet) 60%, transparent); }
.zm-ws-presence-who { font: 500 0.85rem/1 var(--zm-font-sans); color: var(--zm-text-2); }
.zm-ws-badge {
  font: 600 0.62rem/1 var(--zm-font-sans);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 6px; border: 1px solid var(--zm-line);
}
.zm-ws-badge.is-working { color: var(--zm-trace); border-color: color-mix(in oklab, var(--zm-trace) 40%, var(--zm-line)); }
.zm-ws-badge.is-play { color: var(--zm-violet); border-color: color-mix(in oklab, var(--zm-violet) 40%, var(--zm-line)); }
.zm-ws-presence-row .zm-ws-when { margin-left: auto; }

/* Pending-changes summary chips */
.zm-ws-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.zm-ws-chip {
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px; padding: 8px 10px;
  border: 1px solid var(--zm-line); background: var(--zm-surface);
}
.zm-ws-chip b { font: 700 1.25rem/1 var(--zm-font-mono); color: var(--zm-text); }
.zm-ws-chip span { font: 400 0.66rem/1.2 var(--zm-font-sans); color: var(--zm-text-4); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.zm-ws-pending .zm-ws-when { display: block; margin: 10px 0 0; }
.zm-ws-toggle {
  margin-top: 12px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--zm-line); background: transparent;
  color: var(--zm-text-2); font: 500 0.76rem/1 var(--zm-font-sans);
}
.zm-ws-toggle:hover { border-color: var(--zm-ember); color: var(--zm-ember); }

/* Working-copy file manifest */
.zm-ws-files { margin-top: 10px; display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.zm-ws-file-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--zm-line-soft); }
.zm-ws-file-glyph { width: 14px; text-align: center; font: 700 0.9rem/1 var(--zm-font-mono); flex: none; }
.zm-ws-file-glyph.is-mod { color: var(--zm-trace); }
.zm-ws-file-glyph.is-del { color: var(--zm-down); }
.zm-ws-file-glyph.is-clean { color: var(--zm-text-4); }
.zm-ws-file-path { font: 400 0.76rem/1.4 var(--zm-font-mono); color: var(--zm-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-ws-file-size { margin-left: auto; font: 400 0.7rem/1 var(--zm-font-mono); color: var(--zm-text-4); flex: none; }

/* Edit timeline (bridge calls) */
.zm-ws-edits { display: flex; flex-direction: column; }
.zm-ws-edit-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--zm-line-soft); }
.zm-ws-edit-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.zm-ws-edit-dot.is-ok { background: var(--zm-up); }
.zm-ws-edit-dot.is-err { background: var(--zm-down); }
.zm-ws-edit-dot.is-timeout { background: var(--zm-trace); }
.zm-ws-edit-dot.is-pending { background: var(--zm-text-4); }
.zm-ws-edit-actor { font: 500 0.8rem/1 var(--zm-font-sans); color: var(--zm-text-2); flex: none; }
.zm-ws-edit-method { font: 500 0.72rem/1 var(--zm-font-mono); color: var(--zm-ember); background: color-mix(in oklab, var(--zm-ember) 12%, transparent); padding: 2px 5px; flex: none; }
.zm-ws-edit-target { font: 400 0.74rem/1.3 var(--zm-font-mono); color: var(--zm-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-ws-edit-row .zm-ws-when { margin-left: auto; flex: none; }

/* !critical:begin routes=/agents — connect-your-agent cards */
/* ── /agents — connect-your-agent page ─────────────────────────── */
.zc-agents-page { max-width: 980px; margin: 0 auto; padding: 48px 20px 64px; }
.zc-agents-sub { margin: 40px 0 14px; font-size: 1.15rem; color: #fff; }
.zc-agents-loop { display: grid; gap: 8px; padding-left: 1.2em; margin: 0 0 8px; color: rgba(255,255,255,0.74); }
.zc-agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.zc-agents-card {
  border: 1px solid rgba(255, 165, 95, 0.16);
  background: linear-gradient(180deg, rgba(30, 21, 12, 0.5), rgba(18, 14, 9, 0.42));
  padding: 14px 16px;
}
.zc-agents-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.zc-agents-card-name { font-weight: 600; color: #fff; }
.zc-agents-card-note { font-size: .78rem; color: rgba(255,255,255,0.55); }
.zc-agents-install { margin: 10px 0 8px; padding: 10px 12px; background: rgba(0,0,0,.35); font-family: var(--zm-font-mono); font-size: .8rem; overflow-x: auto; white-space: pre-wrap; color: rgba(255,255,255,0.86); }
.zc-agents-step-note { font-size: .82rem; color: rgba(255,255,255,0.65); margin: 0; }

/* !critical:end */
/* !critical:begin routes=/about — how it works, routes, comparison, differentiator */
/* ── home how-it-works / routes / comparison ────────────────────── */
/* Full content width so these sections' headings line up with the shelf
   edges above them instead of stepping inward mid-page. The comparison
   table keeps its own cap — two columns stretched to 1544px would run to
   ~120 characters a line. */
.zc-how, .zc-routes, .zc-compare { max-width: none; margin: 0 auto; padding: 40px 0 8px; }
.zc-compare-table { max-width: 1180px; }
/* Capped, not full-bleed: these are four fixed cards, so on a wide page they
   would each stretch to ~700px of mostly empty box. The section heading above
   still starts at the page gutter, so the left edge stays aligned. */
/* Four nodes and three arrows on one line. The basis is 190px, not 200px,
   because the section lives on /about now (`.zc-about-sections`, a 960px
   column = 912px of content) and 4x200 + 3x18 arrows + 6x10 gaps is 914px —
   over by two, so the row wrapped 3+1 and left the third arrow pointing at
   the end of a line. 190px comes to 834px and the nodes still grow to fill.
   (Below ~760px of content it wraps regardless and the trailing arrow
   dangles; that predates the move and is untouched here.) */
.zc-how-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 18px 0; max-width: 1600px; }
.zc-how-node { flex: 1 1 190px; border: 1px solid rgba(255, 165, 95, 0.16); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, rgba(30, 21, 12, 0.5), rgba(18, 14, 9, 0.42)); }
.zc-how-name { font-weight: 700; }
.zc-how-role { font-size: .82rem; opacity: .75; }
.zc-how-arrow { align-self: center; opacity: .5; font-size: 1.2rem; }
/* The arrows only mean anything while all four nodes are on one line. Once
   the flow wraps, the last arrow of every row points into whitespace instead
   of at the next node — most visibly on a phone, where each node gets its own
   row and every arrow dangles. So they come out and the nodes read in
   document order. (`aria-hidden` decoration, so nothing is lost.)

   959px, i.e. the arrows appear only once `.zc-about-sections` has reached
   its full 960px width. Derived thresholds kept being wrong here and both
   failures were measured, not guessed: one row of arrows needs 874px of flow
   (4x190 nodes + 3x18 arrows + 6x10 gaps), so a 922px page looks like it
   should fit — but a vertical scrollbar eats ~15px and it wraps, dangling an
   arrow across the whole 922-937px band. Pinning to the column's own full
   width has margin for the scrollbar (960 - 15 - 48 = 897 >= 874) and a
   reason behind it rather than an arithmetic edge.

   Note the nodes still fit one row well below this: hiding the arrows also
   removes their width and their gaps, dropping the requirement to 790px. So
   the wrapped-with-arrows state this rule prevents is the only bad one.

   Predates the move — the flow wrapped the same way in the home's column —
   but the section only lives on /about now. */
@media (max-width: 959px) {
  .zc-how-arrow { display: none; }
}
.zc-how-compound { opacity: .85; max-width: 760px; }
.zc-routes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 18px; max-width: 1600px; }
.zc-routes-card { border: 1px solid rgba(255, 165, 95, 0.16); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, rgba(30, 21, 12, 0.5), rgba(18, 14, 9, 0.42)); }
.zc-routes-card .zc-btn { align-self: flex-start; margin-top: auto; }
.zc-routes-card-ctas { display: flex; gap: 8px; margin-top: auto; }
.zc-routes-card.soon { opacity: .75; }
.zc-routes-soon { font-size: var(--zm-fs-11); text-transform: uppercase; letter-spacing: .08em; border: 1px solid rgba(255, 165, 95, 0.16); border-radius: 99px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; opacity: .8; }
.zc-compare-scroll { overflow-x: auto; margin-top: 18px; }
.zc-compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.zc-compare-table th, .zc-compare-table td { text-align: left; padding: 10px 14px; border: 1px solid rgba(255, 165, 95, 0.16); font-size: .88rem; }
.zc-compare-table th:last-child, .zc-compare-table td:last-child { background: rgba(255, 165, 95, 0.05); }
.zc-compare-table td:first-child { opacity: .7; }

/* ── /about — differentiator + compounding layers ───────────────── */
.zc-about-diff { border-left: 3px solid rgba(255, 165, 95, 0.45); padding-left: 14px; margin: 18px 0; }
.zc-about-compound { opacity: .85; margin: 18px 0; max-width: 760px; }
/* !critical:end */
/* !critical:begin routes=/privacy,/terms — legal pages */
/* ── LEGAL PAGES (/privacy, /terms) ─────────────────────────────────── */
.zc-legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.zc-legal-article h1 {
  font-family: var(--zm-font-display); font-size: 40px; line-height: 1.05;
  letter-spacing: -0.02em; margin: 6px 0 22px; color: var(--zm-text);
}
.zc-legal-article .zm-md-body { font-size: 15px !important; line-height: 1.65 !important; color: var(--zm-text-2); }
.zc-legal-article .zm-md-body h2 { margin-top: 30px; font-size: 20px; color: var(--zm-text); }
.zc-legal-article .zm-md-body p:first-child { font-family: var(--zm-font-mono); font-size: 12px; color: var(--zm-text-4); }
/* Consent line under the account-creation buttons. */
.zm-legal-consent {
  margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--zm-text-4); text-align: center;
}
.zm-legal-consent a { color: var(--zm-text-3); text-decoration: underline; text-underline-offset: 2px; }
.zm-legal-consent a:hover { color: var(--zm-text); }

/* !critical:end */
/* !critical:begin routes=* — phone legibility floor */
/* ── Phone legibility floor ─────────────────────────────────────────
   At the width where the site switches to its phone chrome (the bottom
   bar appears, the desktop-only rails drop out), the small-type scale
   is floored at 12px. Below that size text stops being comfortably
   readable on a handset, and Lighthouse's mobile "legible font sizes"
   audit counts it as illegible.

   Redefining the tokens is what makes this one block rather than a
   couple of hundred overrides: every rule and every inline style that
   sets sub-12px type reads its size from here, so they all lift
   together and none can be missed. Keep this block last so it wins
   over any later :root declaration. */
@media (max-width: 900px) {
  :root {
    --zm-fs-min: 12px;
    --zm-fs-7: 12px;
    --zm-fs-8: 12px;
    --zm-fs-8-5: 12px;
    --zm-fs-9: 12px;
    --zm-fs-9-5: 12px;
    --zm-fs-10: 12px;
    --zm-fs-10-5: 12px;
    --zm-fs-11: 12px;
    --zm-fs-11-5: 12px;
  }
}

/* !critical:end */
/* !critical:begin routes=/users,/community,/users/* — paginated listing footer */
/* ── Paginated listing footer (profile world grid) ─────────────────
   Every page is a real anchor, so this row is what a crawler and a
   no-JS visitor use to reach the rest of a large catalogue (#809). */
.zm-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--zm-line);
  font-family: var(--zm-font-mono); font-size: var(--zm-fs-11);
}
.zm-pager-step, .zm-pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 28px; padding: 0 9px;
  border: 1px solid var(--zm-line); border-radius: var(--zm-radius-sm, 4px);
  color: var(--zm-text-2); text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.zm-pager-step:hover, .zm-pager-num:hover {
  border-color: color-mix(in oklab, var(--zm-ember) 60%, var(--zm-line));
  color: var(--zm-text); background: rgba(255,255,255,0.03);
}
.zm-pager-step.is-off { opacity: .35; pointer-events: none; }
.zm-pager-nums { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zm-pager-num.is-current {
  border-color: var(--zm-ember); color: var(--zm-text);
  background: color-mix(in oklab, var(--zm-ember) 14%, transparent);
}
.zm-pager-gap { padding: 0 2px; color: var(--zm-text-4); }
.zm-pager-pos { margin-left: auto; color: var(--zm-text-4); }
@media (max-width: 640px) {
  .zm-pager-pos { margin-left: 0; width: 100%; }
}
/* !critical:end */
/* !critical:begin routes=* — recovery link inside an empty state */
/* The recovery link inside an out-of-range empty state ("Start from the first
   page") has to read as a link. `.zm-empty` is muted mono text and an anchor
   inheriting it is the same colour, weight and decoration as the sentence
   around it, so the one way back off a typed `?page=` was invisible (#809). */
.zm-empty a {
  color: var(--zm-text-2); text-decoration: underline; text-underline-offset: 3px;
}
.zm-empty a:hover { color: var(--zm-ember); }
/* !critical:end */