/* Generated by scripts/css-bundle.mjs — do not edit by hand. */
/* /public/css/routes/surfaces/website.css */
@layer routes {
/* ==========================================================================
   website-surface.css
   --------------------------------------------------------------------------
   Surface purpose
   - /about/website should feel like a field guide, observatory, and specimen
     surface for the site itself.
   - Support calm reading first, then richer microcosm detail.
   - Distinguish nooks / registers / specimens / workshop logic without making
     the page feel like a dashboard.
   ========================================================================== */

:where(body[data-spw-surface="website"]) {
  --website-accent: var(--semantic-accent, color-mix(in srgb, var(--teal, #008080) 76%, var(--amber, #c58b2a) 24%));
  --website-accent-soft: color-mix(in srgb, var(--website-accent) 14%, transparent);
  --website-accent-quiet: color-mix(in srgb, var(--website-accent) 8%, transparent);

  --website-ink: rgba(14, 18, 20, 0.92);
  --website-ink-soft: rgba(14, 18, 20, 0.68);
  --website-surface: rgba(255, 255, 255, 0.72);
  --website-surface-strong: rgba(255, 255, 255, 0.86);
  --website-surface-soft: rgba(255, 255, 255, 0.48);
  --website-surface-panel: rgba(255, 255, 255, 0.82);
  --website-surface-panel-strong: rgba(255, 255, 255, 0.9);
  --website-line: color-mix(in srgb, var(--website-accent) 22%, rgba(14, 18, 20, 0.1));
  --website-line-strong: color-mix(in srgb, var(--website-accent) 40%, transparent);
  --website-sheen: rgba(255, 255, 255, 0.18);
  --website-sheen-soft: rgba(255, 255, 255, 0.12);

  --website-paper:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--website-accent) 3%, var(--website-surface-strong)),
      color-mix(in srgb, var(--website-surface-strong) 96%, hsl(42 24% 96%)) 38%,
      color-mix(in srgb, var(--website-surface-panel-strong) 96%, hsl(36 28% 95%))
    );

  --website-panel:
    linear-gradient(
      180deg,
      var(--website-surface-panel-strong),
      color-mix(in srgb, var(--website-surface-panel) 96%, hsl(38 22% 94%))
    );
  --website-panel-strong:
    linear-gradient(
      180deg,
      var(--website-surface-panel-strong),
      color-mix(in srgb, var(--website-surface-panel) 94%, hsl(36 18% 93%))
    );
  --website-chip-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--website-accent) 7%, var(--website-surface-strong)),
      color-mix(in srgb, var(--website-surface) 92%, transparent)
    );

  --website-shadow:
    0 10px 26px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.03);

  --website-shadow-active:
    0 16px 36px rgba(0, 0, 0, 0.09),
    0 4px 14px rgba(0, 0, 0, 0.05);

  --spw-prompt-block-bg: var(--website-panel);
  --spw-prompt-block-line: color-mix(in srgb, var(--website-accent) 24%, var(--website-line));
  --spw-prompt-block-ink: var(--website-ink);

  --website-radius-lg: var(--shape-surface, 10px);
  --website-radius-md: var(--shape-component, 6px);
  --website-radius-sm: var(--shape-element, 4px);

  --ink: var(--website-ink);
  --ink-soft: var(--website-ink-soft);
  --line: var(--website-line);
  --line-strong: var(--website-line-strong);
  --surface: var(--website-surface);
  --surface-strong: var(--website-surface-strong);
  --surface-soft: var(--website-surface-soft);
  --surface-panel: var(--website-surface-panel);
  --surface-panel-strong: var(--website-surface-panel-strong);
  --card-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  --spw-philosophy-panel: var(--website-panel);
  --spw-philosophy-paper: var(--website-paper);
  --spw-philosophy-line: var(--website-line);
  color: var(--website-ink);
}

html[data-spw-color-mode="dark"] :where(body[data-spw-surface="website"]) {
  --website-accent: hsl(182 38% 66%);
  --website-accent-soft: color-mix(in srgb, var(--website-accent) 16%, transparent);
  --website-accent-quiet: color-mix(in srgb, var(--website-accent) 10%, transparent);
  --website-ink: rgba(235, 241, 240, 0.94);
  --website-ink-soft: rgba(205, 214, 212, 0.76);
  --website-surface: rgba(18, 24, 26, 0.82);
  --website-surface-strong: rgba(25, 31, 34, 0.92);
  --website-surface-soft: rgba(18, 24, 26, 0.58);
  --website-surface-panel: rgba(24, 30, 33, 0.92);
  --website-surface-panel-strong: rgba(31, 38, 41, 0.96);
  --website-line: color-mix(in srgb, var(--website-accent) 18%, rgba(226, 234, 231, 0.1));
  --website-line-strong: color-mix(in srgb, var(--website-accent) 28%, rgba(226, 234, 231, 0.16));
  --website-sheen: rgba(255, 255, 255, 0.06);
  --website-sheen-soft: rgba(255, 255, 255, 0.04);
  --website-paper:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--website-accent) 7%, rgba(16, 21, 23, 0.98)),
      rgba(18, 23, 26, 0.96) 38%,
      rgba(13, 17, 19, 0.99)
    );
  --website-panel:
    linear-gradient(180deg, rgba(30, 37, 40, 0.96), rgba(20, 25, 28, 0.98));
  --website-panel-strong:
    linear-gradient(180deg, rgba(33, 40, 43, 0.98), rgba(21, 26, 29, 0.99));
  --website-chip-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--website-accent) 10%, rgba(30, 37, 40, 0.96)),
      rgba(20, 25, 28, 0.98)
    );
  --website-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.18);
  --website-shadow-active:
    0 18px 40px rgba(0, 0, 0, 0.34),
    0 6px 18px rgba(0, 0, 0, 0.2);
  --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] :where(body[data-spw-surface="website"]) {
    --website-accent: var(--semantic-accent, hsl(182 38% 66%));
    --website-accent-soft: color-mix(in srgb, var(--website-accent) 16%, transparent);
    --website-accent-quiet: color-mix(in srgb, var(--website-accent) 10%, transparent);
    --website-ink: rgba(235, 241, 240, 0.94);
    --website-ink-soft: rgba(205, 214, 212, 0.76);
    --website-surface: rgba(18, 24, 26, 0.82);
    --website-surface-strong: rgba(25, 31, 34, 0.92);
    --website-surface-soft: rgba(18, 24, 26, 0.58);
    --website-surface-panel: rgba(24, 30, 33, 0.92);
    --website-surface-panel-strong: rgba(31, 38, 41, 0.96);
    --website-line: color-mix(in srgb, var(--website-accent) 18%, rgba(226, 234, 231, 0.1));
    --website-line-strong: color-mix(in srgb, var(--website-accent) 28%, rgba(226, 234, 231, 0.16));
    --website-sheen: rgba(255, 255, 255, 0.06);
    --website-sheen-soft: rgba(255, 255, 255, 0.04);
    --website-paper:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--website-accent) 7%, rgba(16, 21, 23, 0.98)),
        rgba(18, 23, 26, 0.96) 38%,
        rgba(13, 17, 19, 0.99)
      );
    --website-panel:
      linear-gradient(180deg, rgba(30, 37, 40, 0.96), rgba(20, 25, 28, 0.98));
    --website-panel-strong:
      linear-gradient(180deg, rgba(33, 40, 43, 0.98), rgba(21, 26, 29, 0.99));
    --website-chip-bg:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--website-accent) 10%, rgba(30, 37, 40, 0.96)),
        rgba(20, 25, 28, 0.98)
      );
    --website-shadow:
      0 14px 34px rgba(0, 0, 0, 0.28),
      0 4px 12px rgba(0, 0, 0, 0.18);
    --website-shadow-active:
      0 18px 40px rgba(0, 0, 0, 0.34),
      0 6px 18px rgba(0, 0, 0, 0.2);
    --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

/* ==========================================================================
   1. Article rhythm
   ========================================================================== */

:where(body[data-spw-surface="website"] main > article) {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

:where(body[data-spw-surface="website"] article > .site-frame) {
  position: relative;
  overflow: clip;
  border-color: var(--website-line);
  background: var(--website-paper);
  box-shadow: var(--website-shadow);
}

:where(body[data-spw-surface="website"] article > .site-frame:hover) {
  box-shadow: var(--website-shadow-active);
}

/* subtle topographic wash */
:where(body[data-spw-surface="website"] article > .site-frame)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--website-accent) 8%, transparent), transparent 28%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--op-ref-color, #1d57a3) 5%, transparent), transparent 26%);
}

/* ==========================================================================
   2. Hero / opening nook
   ========================================================================== */

:where(body[data-spw-surface="website"] #website-field-guide) {
  gap: 1.1rem;
  padding-top: clamp(1.2rem, 2.4vw, 1.6rem);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--website-accent) 10%, transparent), transparent 34%),
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--op-surface-color, #178282) 6%, transparent), transparent 24%),
    var(--website-paper);
}

:where(body[data-spw-surface="website"] #website-field-guide h1) {
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}

:where(body[data-spw-surface="website"] #website-field-guide > p) {
  max-width: 74ch;
}

:where(body[data-spw-surface="website"] #website-field-guide > p strong) {
  color: color-mix(in srgb, var(--website-accent) 72%, var(--ink));
}

:where(body[data-spw-surface="website"] #website-field-guide .spec-strip) {
  gap: 0.34rem;
}

:where(body[data-spw-surface="website"] #website-field-guide .spec-pill) {
  border-color: color-mix(in srgb, var(--website-accent) 18%, transparent);
  background: color-mix(in srgb, var(--website-accent) 7%, var(--website-surface-strong));
}

:where(body[data-spw-surface="website"] .palette-probe) {
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--website-accent)) 20%, var(--website-line));
}

:where(body[data-spw-surface="website"] .market-card) {
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--website-accent)) 18%, var(--website-line));
}

/* ==========================================================================
   3. Section identity by category family
   ========================================================================== */

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="nook"]) {
  --family-accent: color-mix(in srgb, var(--website-accent) 74%, var(--amber, #c58b2a) 26%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="register"]) {
  --family-accent: color-mix(in srgb, var(--op-ref-color, #1d57a3) 62%, var(--website-accent) 38%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="portal"]) {
  --family-accent: color-mix(in srgb, var(--op-probe-color, #4a2180) 54%, var(--website-accent) 46%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="specimen"]) {
  --family-accent: color-mix(in srgb, var(--op-object-color, #2f5d8d) 56%, var(--website-accent) 44%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="workshop"]) {
  --family-accent: color-mix(in srgb, var(--op-binding-color, #8f401f) 58%, var(--website-accent) 42%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="theatre"]) {
  --family-accent: color-mix(in srgb, var(--op-surface-color, #178282) 58%, var(--website-accent) 42%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family="archive"]) {
  --family-accent: color-mix(in srgb, var(--op-meta-color, #324a85) 56%, var(--website-accent) 44%);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family]) {
  border-left-width: 2px;
  border-left-color: color-mix(in srgb, var(--family-accent, var(--website-accent)) 34%, transparent);
}

:where(body[data-spw-surface="website"] .site-frame[data-spw-category-family] .frame-heading h2) {
  text-wrap: balance;
}

/* ==========================================================================
   4. Design details section
   ========================================================================== */

:where(body[data-spw-surface="website"] #design-details) {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--op-binding-color, #8f401f) 8%, transparent), transparent 28%),
    var(--website-paper);
}

:where(body[data-spw-surface="website"] #design-details .frame-panel) {
  background: var(--website-panel);
}

:where(body[data-spw-surface="website"] #design-details .frame-panel h3) {
  position: relative;
  padding-bottom: 0.3rem;
}

:where(body[data-spw-surface="website"] #design-details .frame-panel h3)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.2rem;
  height: 1px;
  background: color-mix(in srgb, var(--website-accent) 34%, transparent);
}

/* ==========================================================================
   5. Publishing register
   ========================================================================== */

:where(body[data-spw-surface="website"] #publishing-register) {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--op-surface-color, #178282) 7%, transparent), transparent 22%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--op-probe-color, #4a2180) 5%, transparent), transparent 18%),
    var(--website-paper);
}

:where(body[data-spw-surface="website"] .media-focus-card--daily) {
  border-color: color-mix(in srgb, var(--op-probe-color, #4a2180) 22%, transparent);
}

:where(body[data-spw-surface="website"] .media-card:hover),
:where(body[data-spw-surface="website"] .media-focus-card:hover) {
  transform: translateY(-1px);
}

/* ==========================================================================
   6. Machine register / SVG host
   ========================================================================== */

:where(body[data-spw-surface="website"] #machine-register) {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--op-ref-color, #1d57a3) 5%, transparent), transparent 32%),
    var(--website-paper);
}

:where(body[data-spw-surface="website"] .spw-svg-figure) {
  margin: 0;
  padding: clamp(0.75rem, 1.6vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--website-accent) 14%, transparent);
  border-radius: var(--website-radius-lg);
  background: var(--website-panel);
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(body[data-spw-surface="website"] .spw-svg-figure figcaption) {
  margin-top: 0.65rem;
  color: var(--website-ink-soft);
  font-size: var(--text-size-sm, 0.9rem);
}

:where(body[data-spw-surface="website"] .feature-ladder) {
  gap: var(--gap-panel, 0.85rem);
}

:where(body[data-spw-surface="website"] .feature-ladder .frame-panel) {
  background: var(--website-panel);
}

/* ==========================================================================
   7. Interaction + promptability registers
   ========================================================================== */

:where(body[data-spw-surface="website"] #interaction-register),
:where(body[data-spw-surface="website"] #promptability-register) {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--website-accent) 5%, transparent), transparent 24%),
    var(--website-paper);
}

:where(body[data-spw-surface="website"] #promptability-register .frame-card) {
  min-height: 10rem;
  background: var(--website-panel-strong);
}

:where(body[data-spw-surface="website"] #promptability-register .frame-card:hover) {
  border-color: color-mix(in srgb, var(--op-surface-color, #178282) 24%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--op-surface-color, #178282) 10%, transparent),
    0 12px 24px rgba(0,0,0,0.05);
}

:where(body[data-spw-surface="website"] #promptability-register .frame-card-sigil) {
  color: var(--op-surface-color, #178282);
}

/* latent promptability visual cue */
:where(body[data-spw-surface="website"] [data-spw-promptability="visible"]),
:where(body[data-spw-surface="website"] [data-spw-promptability="latent"]) {
  position: relative;
}

:where(body[data-spw-surface="website"] [data-spw-promptability="visible"]::after) {
  content: "";
  position: absolute;
  inset: auto 0.7rem 0.7rem auto;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--op-surface-color, #178282) 62%, var(--website-surface-strong) 38%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--op-surface-color, #178282) 10%, transparent);
  pointer-events: none;
  opacity: 0.84;
}

:where(body[data-spw-surface="website"] :is(#promptability-studio, #interactive-physics-lab)) {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--website-accent) 9%, transparent), transparent 30%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--op-ref-color, #1d57a3) 8%, transparent), transparent 24%),
    var(--website-paper);
}

:where(body[data-spw-surface="website"] :is(#promptability-studio, #interactive-physics-lab) .demo-control-group),
:where(body[data-spw-surface="website"] :is(#promptability-studio, #interactive-physics-lab) .trope-box) {
  border-color: color-mix(in srgb, var(--website-accent) 18%, var(--website-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--website-accent) 6%, transparent), transparent 30%),
    var(--website-panel);
}

/* ==========================================================================
   8. Motif grid
   ========================================================================== */

:where(body[data-spw-surface="website"] .motif-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gap-panel, 0.85rem);
}

:where(body[data-spw-surface="website"] .motif-card) {
  position: relative;
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  min-height: 10rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--website-accent) 14%, transparent);
  border-radius: var(--website-radius-md);
  background: var(--website-panel-strong);
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(body[data-spw-surface="website"] .motif-card .frame-card-sigil) {
  color: var(--website-ink-soft);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

:where(body[data-spw-surface="website"] .motif-card strong) {
  color: var(--website-ink);
}

:where(body[data-spw-surface="website"] .motif-card span:last-child) {
  color: var(--website-ink-soft);
}

:where(body[data-spw-surface="website"] .motif-card--operator) {
  border-left: 2px solid color-mix(in srgb, var(--op-probe-color, #4a2180) 28%, transparent);
}

:where(body[data-spw-surface="website"] .motif-card--land) {
  border-left: 2px solid color-mix(in srgb, var(--op-surface-color, #178282) 28%, transparent);
}

:where(body[data-spw-surface="website"] .motif-card--constellation) {
  border-left: 2px solid color-mix(in srgb, var(--op-ref-color, #1d57a3) 28%, transparent);
}

:where(body[data-spw-surface="website"] .motif-card--archive) {
  border-left: 2px solid color-mix(in srgb, var(--op-meta-color, #324a85) 28%, transparent);
}

/* ==========================================================================
   9. Lists / prose / route emphasis
   ========================================================================== */

:where(body[data-spw-surface="website"] .frame-list) {
  padding-left: 1.2rem;
}

:where(body[data-spw-surface="website"] .frame-list li) {
  margin-bottom: 0.5rem;
  max-width: 74ch;
}

:where(body[data-spw-surface="website"] .inline-note) {
  max-width: 72ch;
  color: var(--website-ink-soft);
}

:where(body[data-spw-surface="website"] code) {
  padding: 0.08rem 0.28rem;
  border-radius: var(--website-radius-sm);
  background: color-mix(in srgb, var(--website-accent) 8%, transparent);
  color: color-mix(in srgb, var(--website-accent) 70%, var(--website-ink) 30%);
}

/* ==========================================================================
   10. Route chips / operator chips
   ========================================================================== */

:where(body[data-spw-surface="website"] .frame-operators) {
  gap: 0.42rem;
}

:where(body[data-spw-surface="website"] .operator-chip) {
  border-color: color-mix(in srgb, var(--website-accent) 18%, transparent);
  background: var(--website-chip-bg);
}

:where(body[data-spw-surface="website"] .operator-chip:hover) {
  border-color: color-mix(in srgb, var(--website-accent) 30%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--website-accent) 10%, transparent);
}

:where(body[data-spw-surface="website"] .intent-cluster,
       body[data-spw-surface="website"] .context-edge-card,
       body[data-spw-surface="website"] .semantic-contract-card) {
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(body[data-spw-surface="website"] .intent-token,
       body[data-spw-surface="website"] .semantic-contract-token) {
  border-color: color-mix(in srgb, var(--website-accent) 18%, transparent);
}

/* ==========================================================================
   11. Footer calm
   ========================================================================== */

:where(body[data-spw-surface="website"] .site-footer) {
  opacity: 0.78;
}

/* ==========================================================================
   12. Responsive tuning
   ========================================================================== */

@media (max-width: 860px) {
  :where(body[data-spw-surface="website"] #website-field-guide h1) {
    max-width: 100%;
  }

  :where(body[data-spw-surface="website"] .motif-card),
  :where(body[data-spw-surface="website"] #promptability-register .frame-card) {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  :where(body[data-spw-surface="website"] article > .site-frame) {
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.05),
      0 1px 4px rgba(0, 0, 0, 0.03);
  }

  :where(body[data-spw-surface="website"] .spw-svg-figure) {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   13. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(
    body[data-spw-surface="website"] article > .site-frame,
    body[data-spw-surface="website"] .media-card,
    body[data-spw-surface="website"] .media-focus-card,
    body[data-spw-surface="website"] #promptability-register .frame-card,
    body[data-spw-surface="website"] .operator-chip
  ) {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   14. Composition reference (/design/composition/) — sizing & alignment
   ==========================================================================
   Lens chrome/track live on the mode-switch via data-spw-lens-chrome|track
   (handles/state-semantics — no route !important). This block only owns
   stage geometry: topline rows, hero packing, copy auto-fit.
   ========================================================================== */

:where(body[data-spw-page-role="composition-reference"] #composition-bundles.site-frame) {
  /* Keep the default flex stage — do NOT use display:grid here.
     Box-model annotates computed display onto data-spw-composition-flow; grid
     on a stage was activating multi-column auto-fit packing of children. */
  display: flex;
  flex-direction: column;
  overflow: visible;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  padding-block: clamp(1rem, 2vw, 1.35rem);
  padding-inline: clamp(0.95rem, 2.2vw, 1.45rem);
  min-inline-size: 0;
  width: 100%;
  max-inline-size: 100%;
  /* Container queries for hero packing when supported (PE fallback: media). */
  container-type: inline-size;
  container-name: composition-hub;
}

/* Topline is two rows: meta (sigil + pills) then full-width lens track.
   Lens track layout is data-spw-lens-track="row" on the mode-switch. */
:where(body[data-spw-page-role="composition-reference"] #composition-bundles > .composition-topline) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  min-inline-size: 0;
  position: relative;
  z-index: 2;
}

:where(body[data-spw-page-role="composition-reference"] .composition-topline__meta) {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  width: 100%;
  min-inline-size: 0;
}

:where(body[data-spw-page-role="composition-reference"] .composition-topline__meta > .frame-sigil) {
  flex: 0 1 auto;
  min-inline-size: 0;
}

:where(body[data-spw-page-role="composition-reference"] .composition-topline__meta > .spec-strip) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-inline-size: 0;
  margin-inline-start: 0;
}

/* Hero: stacked by default; side-by-side only when both columns can breathe */
:where(body[data-spw-page-role="composition-reference"] .composition-hero) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.85rem, 2vw, 1.25rem);
  align-items: start;
  width: 100%;
  min-inline-size: 0;
}

:where(body[data-spw-page-role="composition-reference"] #composition-hook.hook-call) {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--website-accent, var(--teal, #008080)) 22%, var(--website-line, rgba(14, 18, 20, 0.12)));
  border-radius: var(--website-radius-md, var(--shape-component, 8px));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--website-accent, var(--teal, #008080)) 6%, var(--website-surface-strong, #fff)),
      color-mix(in srgb, var(--website-surface-panel, #fff) 96%, transparent)
    );
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
  min-inline-size: min(100%, 16rem);
  max-inline-size: 100%;
  width: 100%;
  box-sizing: border-box;
}

:where(body[data-spw-page-role="composition-reference"] #composition-hook .hook-lede) {
  margin: 0;
  font-size: clamp(1.02rem, 0.92rem + 0.45vw, 1.18rem);
  font-weight: 650;
  line-height: 1.4;
  text-wrap: pretty;
  max-inline-size: none;
  overflow-wrap: normal;
  word-break: normal;
}

:where(body[data-spw-page-role="composition-reference"] #composition-hook .hook-sub) {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--website-ink-soft, var(--ink-soft, rgba(14, 18, 20, 0.72)));
  max-inline-size: none;
  overflow-wrap: normal;
  word-break: normal;
}

:where(body[data-spw-page-role="composition-reference"] #composition-hook .hook-sub + .hook-sub) {
  margin-block-start: 0.15rem;
}

:where(body[data-spw-page-role="composition-reference"] .composition-hero__title) {
  display: grid;
  gap: 0.55rem;
  min-inline-size: 0;
  width: 100%;
  align-content: start;
}

:where(body[data-spw-page-role="composition-reference"] .composition-hero__title > .page-kicker) {
  display: inline-flex;
  width: fit-content;
  max-inline-size: 100%;
  min-block-size: 1.7rem;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 999px;
}

:where(body[data-spw-page-role="composition-reference"] #composition-title) {
  margin: 0;
  max-inline-size: min(28ch, 100%);
  font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

/* Copy layers: auto-fit so hidden lens/depth cards don't leave empty tracks */
:where(body[data-spw-page-role="composition-reference"] .composition-copy-stack) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.65rem;
  width: 100%;
  min-inline-size: 0;
  align-items: stretch;
}

:where(
  body[data-spw-page-role="composition-reference"] .composition-copy-stack > [data-spw-copy-lens],
  body[data-spw-page-role="composition-reference"] .composition-copy-stack > [data-spw-copy-depth]
) {
  margin-block: 0;
  min-inline-size: 0;
  height: 100%;
  box-sizing: border-box;
}

:where(body[data-spw-page-role="composition-reference"] .composition-copy-stack code) {
  font-size: 0.88em;
  padding: 0.08em 0.28em;
  border-radius: 0.28rem;
  white-space: nowrap;
}

:where(body[data-spw-page-role="composition-reference"] .spw-metric-grid) {
  margin-block: 0.15rem 0.25rem;
  width: 100%;
}

:where(body[data-spw-page-role="composition-reference"] .frame-panel) {
  min-inline-size: 0;
  width: 100%;
}

:where(body[data-spw-page-role="composition-reference"] .spw-partial-lab-stack) {
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
  width: 100%;
}

/* Side-by-side when the hub has room for two ≥18rem columns.
   Prefer container queries; fall back to viewport when unsupported. */
@supports (container-type: inline-size) {
  @container composition-hub (min-width: 56rem) {
    :where(.composition-hero) {
      grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 1.15fr);
      column-gap: clamp(1rem, 2.5vw, 1.75rem);
      align-items: start;
    }
  }

  @container composition-hub (max-width: 40rem) {
    :where(#composition-title) {
      max-inline-size: none;
    }
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 56rem) {
    :where(body[data-spw-page-role="composition-reference"] .composition-hero) {
      grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 1.15fr);
      column-gap: clamp(1rem, 2.5vw, 1.75rem);
      align-items: start;
    }
  }

  @media (max-width: 40rem) {
    :where(body[data-spw-page-role="composition-reference"] #composition-title) {
      max-inline-size: none;
    }
  }
}
}

/* /public/css/routes/surfaces/design.css */
@layer routes {
/* ==========================================================================
   design-surface.css
   --------------------------------------------------------------------------
   Surface purpose
   - /design/ reuses the website surface vocabulary for coordination, but its
     hero and route cards need a stable light reading contract.
   - Keep these rules route-seeded so other website/design-register pages can
     make their own material choices.
   ========================================================================== */

:where(body[data-spw-page-seed="page_design_design_hub"]) {
  --design-surface-accent: var(--semantic-accent, color-mix(in srgb, var(--teal, #008080) 62%, var(--amber, #c58b2a) 38%));
  --design-surface-accent-strong: color-mix(in srgb, var(--design-surface-accent) 82%, #214e76 18%);
  --design-surface-accent-warm: color-mix(in srgb, var(--design-surface-accent) 72%, #8e5e2c 28%);
  --design-surface-ink: rgba(14, 18, 20, 0.94);
  --design-surface-ink-soft: rgba(14, 18, 20, 0.74);
  --design-surface-ink-mid: rgba(14, 18, 20, 0.58);
  /* New clear-contrast matte utilities for design hub (semantic + theming depth) */
  --design-surface-ink-on-matte: var(--ink-on-matte-strong, rgba(14, 18, 20, 0.98));
  --design-surface-ink-on-matte-soft: var(--ink-on-matte-soft, rgba(14, 18, 20, 0.78));
  --design-surface-line: color-mix(in srgb, var(--design-surface-accent) 30%, rgba(14, 18, 20, 0.12));
  --design-surface-line-strong: color-mix(in srgb, var(--design-surface-accent-strong) 48%, rgba(14, 18, 20, 0.16));
  --design-surface-base: rgba(255, 255, 255, 0.76);
  --design-surface-base-strong: rgba(255, 255, 255, 0.9);
  --design-surface-base-soft: rgba(255, 255, 255, 0.58);
  --design-surface-matte: var(--surface-matte, rgba(247, 244, 238, 0.96));
  --design-surface-matte-strong: var(--surface-matte-strong, rgba(252, 249, 243, 0.98));
  --design-surface-contrast: var(--surface-contrast, rgba(255, 253, 248, 0.99));
  --design-surface-panel: rgba(255, 255, 255, 0.84);
  --design-surface-panel-strong: rgba(255, 255, 255, 0.92);
  --design-surface-link: color-mix(in srgb, var(--design-surface-accent-strong) 84%, var(--design-surface-ink) 16%);
  --design-surface-shell-line: color-mix(in srgb, var(--design-surface-accent) 32%, rgba(14, 18, 20, 0.14));
  --design-surface-paper:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--design-surface-accent) 4%, var(--design-surface-base-strong)),
      color-mix(in srgb, var(--design-surface-base-strong) 96%, hsl(42 24% 96%)) 38%,
      color-mix(in srgb, var(--design-surface-panel-strong) 96%, hsl(36 28% 95%))
    );
  --design-surface-panel-bg:
    linear-gradient(
      180deg,
      var(--design-surface-panel-strong),
      color-mix(in srgb, var(--design-surface-panel) 96%, hsl(38 22% 94%))
    );
  --design-surface-panel-bg-strong:
    linear-gradient(
      180deg,
      var(--design-surface-panel-strong),
      color-mix(in srgb, var(--design-surface-panel) 94%, hsl(36 18% 93%))
    );

  --website-accent: var(--design-surface-accent);
  --website-ink: var(--design-surface-ink);
  --website-ink-soft: var(--design-surface-ink-soft);
  --website-line: var(--design-surface-line);
  --website-line-strong: var(--design-surface-line-strong);
  --website-surface: var(--design-surface-base);
  --website-surface-strong: var(--design-surface-base-strong);
  --website-surface-soft: var(--design-surface-base-soft);
  --website-surface-panel: var(--design-surface-panel);
  --website-surface-panel-strong: var(--design-surface-panel-strong);
  --website-paper: var(--design-surface-paper);
  --website-panel: var(--design-surface-panel-bg);
  --website-panel-strong: var(--design-surface-panel-bg-strong);

  --ink: var(--design-surface-ink);
  --ink-soft: var(--design-surface-ink-soft);
  --ink-mid: var(--design-surface-ink-mid);
  --line: var(--design-surface-line);
  --line-strong: var(--design-surface-line-strong);
  --surface: var(--design-surface-base);
  --surface-strong: var(--design-surface-base-strong);
  --surface-soft: var(--design-surface-base-soft);
  --surface-matte: var(--design-surface-matte);
  --surface-matte-strong: var(--design-surface-matte-strong);
  --surface-contrast: var(--design-surface-contrast);
  --surface-panel: var(--design-surface-panel);
  --surface-panel-strong: var(--design-surface-panel-strong);
  --grammar-surface: var(--design-surface-paper);
  --grammar-surface-strong: var(--design-surface-panel-bg-strong);
  --grammar-surface-soft: var(--design-surface-base-soft);
  --grammar-line: var(--design-surface-line);
  --grammar-ink: var(--design-surface-ink);
  --grammar-ink-soft: var(--design-surface-ink-soft);
  --spw-shell-chrome-accent: var(--design-surface-link);
  --spw-shell-chrome-line: var(--design-surface-shell-line);

  color: var(--design-surface-ink);
}

html[data-spw-color-mode="dark"] :where(body[data-spw-page-seed="page_design_design_hub"]) {
  --design-surface-ink: var(--ink-strong, rgba(246, 250, 248, 0.97));
  --design-surface-ink-soft: var(--ink-soft, rgba(220, 230, 226, 0.84));
  --design-surface-ink-mid: var(--ink-mid, rgba(202, 214, 210, 0.68));
  /* Dark clear-contrast matte utilities */
  --design-surface-ink-on-matte: var(--ink-on-matte-strong, rgba(255, 255, 255, 0.98));
  --design-surface-ink-on-matte-soft: var(--ink-on-matte-soft, rgba(220, 230, 226, 0.84));
  --design-surface-line: color-mix(in srgb, var(--active-op-color, #60d2d2) 24%, var(--line, rgba(246, 250, 248, 0.18)));
  --design-surface-line-strong: color-mix(in srgb, var(--active-op-color, #60d2d2) 44%, var(--line, rgba(246, 250, 248, 0.22)));
  --design-surface-base: var(--surface, rgba(18, 24, 28, 0.78));
  --design-surface-base-strong: var(--surface-strong, rgba(25, 32, 37, 0.92));
  --design-surface-base-soft: var(--surface-soft, rgba(18, 24, 28, 0.58));
  --design-surface-matte: var(--surface-matte, rgba(28, 36, 42, 0.96));
  --design-surface-matte-strong: var(--surface-matte-strong, rgba(34, 43, 50, 0.98));
  --design-surface-contrast: var(--surface-contrast, rgba(38, 48, 56, 0.98));
  --design-surface-panel: var(--surface-panel, rgba(24, 31, 36, 0.9));
  --design-surface-panel-strong: var(--surface-panel-strong, rgba(30, 38, 44, 0.95));
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] :where(body[data-spw-page-seed="page_design_design_hub"]) {
    --design-surface-ink: var(--ink-strong, rgba(246, 250, 248, 0.97));
    --design-surface-ink-soft: var(--ink-soft, rgba(220, 230, 226, 0.84));
    --design-surface-ink-mid: var(--ink-mid, rgba(202, 214, 210, 0.68));
    --design-surface-ink-on-matte: var(--ink-on-matte-strong, rgba(255, 255, 255, 0.98));
    --design-surface-ink-on-matte-soft: var(--ink-on-matte-soft, rgba(220, 230, 226, 0.84));
    --design-surface-line: color-mix(in srgb, var(--active-op-color, #60d2d2) 24%, var(--line, rgba(246, 250, 248, 0.18)));
    --design-surface-line-strong: color-mix(in srgb, var(--active-op-color, #60d2d2) 44%, var(--line, rgba(246, 250, 248, 0.22)));
    --design-surface-base: var(--surface, rgba(18, 24, 28, 0.78));
    --design-surface-base-strong: var(--surface-strong, rgba(25, 32, 37, 0.92));
    --design-surface-base-soft: var(--surface-soft, rgba(18, 24, 28, 0.58));
    --design-surface-matte: var(--surface-matte, rgba(28, 36, 42, 0.96));
    --design-surface-matte-strong: var(--surface-matte-strong, rgba(34, 43, 50, 0.98));
    --design-surface-contrast: var(--surface-contrast, rgba(38, 48, 56, 0.98));
    --design-surface-panel: var(--surface-panel, rgba(24, 31, 36, 0.9));
    --design-surface-panel-strong: var(--surface-panel-strong, rgba(30, 38, 44, 0.95));
  }
}

/* Reference / screenshot-friendly tightening for sync-specimen cards on palettes and similar surfaces.
   Makes token reference sections denser and more legible when screenshotted for docs, Notion, or shared notes. */
:where(body[data-spw-page-seed^="page_design_"]) .sync-specimen {
  --sync-pad: 0.65rem 0.8rem;
  padding: var(--sync-pad);
  gap: 0.35rem;
}

:where(body[data-spw-page-seed^="page_design_"]) .sync-specimen h4 {
  font-size: 0.82rem;
  margin: 0;
  letter-spacing: 0.02em;
}

:where(body[data-spw-page-seed^="page_design_"]) .sync-specimen code {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--design-surface-ink) 14%, var(--design-surface-base-strong));
  color: var(--design-surface-ink);
  border: 1px solid color-mix(in srgb, var(--design-surface-line) 65%, transparent);
  font-family: var(--font-family-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
}

:where(body[data-spw-page-seed^="page_design_"]) .sync-specimen .frame-note {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--design-surface-ink-mid);
  margin: 0;
}

/* Make reference token cards even tighter and more screenshot-native */
:where(body[data-spw-page-seed^="page_design_"]) .frame-grid--dense {
  gap: 0.55rem;
}

:where(body[data-spw-page-seed^="page_design_"]) .sync-specimen {
  border-radius: calc(var(--shape-surface, 10px) - 2px);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.site-frame) {
  position: relative;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--design-surface-line) 90%, transparent);
  border-radius: calc(var(--shape-surface, 10px) + 2px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-base-strong) 98%, transparent), color-mix(in srgb, var(--design-surface-base) 94%, transparent)),
    var(--design-surface-paper);
  box-shadow:
    0 12px 30px rgba(8, 18, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.site-hero) {
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--design-surface-accent) 14%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-base-strong) 98%, transparent), color-mix(in srgb, var(--design-surface-panel-strong) 96%, transparent));
}

:where(body[data-spw-page-seed^="page_design_"]) :where(.site-frame) .frame-grid--dense,
:where(body[data-spw-page-seed^="page_design_"]) :where(.site-frame) .panel-grid {
  gap: 0.6rem;
}

:where(body[data-spw-page-seed^="page_design_"]) :where(.site-frame) .frame-panel {
  padding: 0.65rem 0.8rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.site-frame h1) {
  max-inline-size: 18ch;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.frame-operators) {
  gap: 0.5rem 0.55rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.frame-operators > .operator-chip) {
  border-color: color-mix(in srgb, var(--design-surface-accent-strong) 52%, var(--design-surface-line) 48%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--design-surface-base-strong) 84%, var(--design-surface-accent) 16%),
      color-mix(in srgb, var(--design-surface-base) 86%, var(--design-surface-accent-warm) 14%));
  color: var(--design-surface-ink);
  box-shadow:
    0 8px 20px rgba(8, 18, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.frame-operators > .operator-chip:is(:hover, :focus-visible)) {
  border-color: color-mix(in srgb, var(--design-surface-accent-strong) 70%, var(--design-surface-line) 30%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--design-surface-base-strong) 72%, var(--design-surface-accent-strong) 28%),
      color-mix(in srgb, var(--design-surface-base) 76%, var(--design-surface-accent-warm) 24%));
  color: var(--design-surface-ink);
  box-shadow:
    0 12px 26px rgba(8, 18, 24, 0.1),
    0 0 0 1px color-mix(in srgb, var(--design-surface-accent-strong) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.spw-settings-cluster) {
  border: 1px solid color-mix(in srgb, var(--design-surface-line-strong) 72%, transparent);
  border-radius: calc(var(--shape-surface, 10px) + 2px);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--design-surface-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-panel-strong) 98%, transparent), color-mix(in srgb, var(--design-surface-panel) 94%, transparent));
  box-shadow:
    0 14px 30px rgba(8, 18, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.spw-settings-cluster__header .eyebrow) {
  color: color-mix(in srgb, var(--design-surface-accent-strong) 62%, var(--design-surface-ink-mid) 38%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.spw-settings-cluster__title) {
  color: var(--design-surface-ink);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.spw-settings-cluster__copy) {
  color: var(--design-surface-ink-soft);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.spw-settings-cluster__actions .operator-chip) {
  border-color: color-mix(in srgb, var(--design-surface-accent) 42%, var(--design-surface-line) 58%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--design-surface-base-strong) 84%, var(--design-surface-accent) 16%),
      color-mix(in srgb, var(--design-surface-base) 88%, var(--design-surface-accent-warm) 12%));
  color: var(--design-surface-ink);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.spw-settings-cluster__actions .operator-chip:is(:hover, :focus-visible)) {
  border-color: color-mix(in srgb, var(--design-surface-accent-strong) 60%, var(--design-surface-line) 40%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--design-surface-base-strong) 76%, var(--design-surface-accent-strong) 24%),
      color-mix(in srgb, var(--design-surface-base) 78%, var(--design-surface-accent-warm) 22%));
  color: var(--design-surface-ink);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(article > .site-frame) {
  color: var(--design-surface-ink);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(
  article > .site-frame :is(p, li, figcaption, .frame-note, .spec-kicker, .spec-pill)
) {
  color: var(--design-surface-ink-soft);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(
  article > .site-frame :is(h1, h2, h3, h4, strong)
) {
  color: var(--design-surface-ink);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(article > .site-frame a:not(.operator-chip)) {
  color: var(--design-surface-link);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-grid) {
  display: grid;
  gap: var(--page-stack-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
  perspective: 1200px;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card) {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  min-width: 0;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: calc(var(--shape-surface, 10px) + 1px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-panel-strong) 98%, transparent), color-mix(in srgb, var(--design-surface-panel) 96%, transparent));
  box-shadow:
    0 10px 24px rgba(10, 18, 24, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card:is(:hover, :focus-within)) {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(10, 18, 24, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card--state) {
  border: 1px solid color-mix(in srgb, var(--design-surface-line-strong) 60%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card--modify) {
  border: 1px solid color-mix(in srgb, var(--design-surface-accent) 22%, var(--design-surface-line) 78%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card--reset) {
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, var(--design-surface-line) 82%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-panel-strong) 98%, transparent), color-mix(in srgb, var(--design-surface-base) 96%, transparent));
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card h3) {
  margin: 0;
  color: var(--design-surface-ink);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.18rem);
  line-height: 1.18;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-state-list) {
  display: grid;
  gap: 0.55rem 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin: 0;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-state-list > div) {
  display: grid;
  gap: 0.12rem;
  padding: 0.6rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--design-surface-line) 84%, transparent);
  border-radius: var(--shape-component, 6px);
  background: color-mix(in srgb, var(--design-surface-base-strong) 92%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-state-list dt) {
  color: var(--design-surface-ink-mid);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-state-list dd) {
  margin: 0;
  color: var(--design-surface-ink);
  font-size: 0.92rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-status, .design-qa-copy) {
  margin: 0;
  color: var(--design-surface-ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card .palette-probe-header) {
  padding: 0;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card .palette-probe-title) {
  max-inline-size: 22ch;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card .palette-probe-actions) {
  margin-top: 0.2rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-qa-card--material) {
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--design-surface-accent-strong) 34%, var(--design-surface-line) 66%);
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--design-surface-accent) 12%, transparent), transparent 36%),
    linear-gradient(180deg, var(--design-surface-panel-strong), color-mix(in srgb, var(--design-surface-panel) 96%, transparent));
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-bench) {
  display: grid;
  gap: 0.75rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-controls) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-controls .operator-chip[aria-pressed="true"]) {
  --operator-chip-active-border-intent: color-mix(in srgb, var(--design-surface-accent-strong) 70%, var(--design-surface-line) 30%);
  --operator-chip-active-bg-intent: color-mix(in srgb, var(--design-surface-accent) 16%, var(--design-surface-matte-strong));
  --operator-chip-active-ink-intent: var(--design-surface-ink);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-stage) {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-specimen) {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border-radius: var(--shape-surface, 10px);
  opacity: 0.78;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-specimen[data-design-material-active="true"]) {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--design-surface-ink) 10%, transparent),
    0 0 0 2px color-mix(in srgb, var(--design-surface-accent-strong) 28%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-specimen code) {
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-readout) {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  color: var(--design-surface-ink-soft);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-material-readout div) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--design-surface-line) 84%, transparent);
  border-radius: var(--shape-component, 6px);
  background: color-mix(in srgb, var(--design-surface-matte-strong) 92%, transparent);
}

/* Promo specimen inside material bench: scaled notice preview for live style
   experimentation. Uses material tokens (via data-spw-metamaterial on the specimen)
   so toggling glass/matte/contrast updates its surface + text contrast live.
   This increases interactive page surface area on the design hub and makes the
   daily promo / discovery notice feature discoverable as a tunable surface. */
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen {
  padding: 0.5rem 0.6rem;
  font-size: 0.72em;
  line-height: 1.28;
  gap: 0.2rem;
  border-radius: var(--shape-component);
  /* material.css baseline + [data-spw-metamaterial] rules supply bg/color/border */
}
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen .spw-discovery-notice__label {
  font-size: 0.85em;
  letter-spacing: 0.1em;
  color: var(--design-surface-ink-mid, var(--ink-mid));
  margin: 0;
}
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen .spw-discovery-notice__title {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  color: var(--design-surface-ink, var(--ink-on-matte));
  margin: 0;
}
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen .spw-discovery-notice__summary,
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen .spw-discovery-notice__offer {
  font-size: 0.95em;
  color: var(--design-surface-ink-soft, var(--ink-on-matte-soft));
  margin: 0;
}
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen .spw-discovery-notice__handles {
  gap: 0.22rem;
  align-items: center;
}
:where(body[data-spw-page-seed="page_design_design_hub"]) .design-promo-specimen .spw-discovery-notice__handle {
  display: inline-flex;
  align-items: center;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  min-height: 0;
  min-block-size: 1.15rem;
  padding: 0.08rem 0.34rem;
  border-radius: var(--shape-element, 4px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal)) 12%);
  color: color-mix(in srgb, var(--ink-strong, #14181c) 88%, var(--active-op-color, var(--teal)) 12%);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(#component-ecology-specimens) {
  container: design-ecology-frame / inline-size;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-method) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-block: 0.8rem 0.2rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-method > div) {
  display: grid;
  gap: 0.28rem;
  min-inline-size: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--design-surface-accent) 18%, var(--design-surface-line) 82%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--design-surface-matte-strong) 91%, var(--design-surface-accent) 4%);
  transition:
    border-color 140ms var(--ease-mechanical, ease),
    background-color 140ms var(--ease-mechanical, ease),
    transform 140ms var(--ease-mechanical, ease);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-method > div:is(:hover, :focus-within)) {
  border-color: color-mix(in srgb, var(--design-surface-accent) 34%, var(--design-surface-line) 66%);
  background: color-mix(in srgb, var(--design-surface-matte-strong) 88%, var(--design-surface-accent) 8%);
  transform: translateY(-1px);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-method strong) {
  color: var(--design-surface-ink);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-method span) {
  color: var(--design-surface-ink-soft);
  font-size: 0.84rem;
  line-height: 1.42;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen) {
  --design-ecology-accent: var(--design-surface-accent-strong);
  --design-ecology-bubble-fill: color-mix(in srgb, var(--design-surface-panel-strong) 92%, var(--design-ecology-accent) 8%);
  --design-ecology-bubble-line: color-mix(in srgb, var(--design-ecology-accent) 28%, var(--design-surface-line) 72%);
  --design-ecology-bubble-radius: 1.2rem;
  --design-ecology-settle-y: 0px;
  display: grid;
  grid-template-columns: minmax(13rem, 0.72fr) minmax(18rem, 1.18fr) minmax(13rem, 0.76fr);
  grid-template-areas: "controls stage readout";
  gap: clamp(0.72rem, 1.7vw, 1.05rem);
  align-items: stretch;
  margin-block: 1rem;
  padding: clamp(0.72rem, 1.8vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--design-ecology-accent) 30%, var(--design-surface-line) 70%);
  border-radius: calc(var(--shape-surface, 10px) + 4px);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--design-ecology-accent) 12%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-panel-strong) 98%, transparent), color-mix(in srgb, var(--design-surface-panel) 96%, transparent));
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--design-ecology-accent) 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 34%, transparent);
  transition:
    border-color var(--component-transition-base),
    box-shadow var(--component-transition-base),
    transform var(--component-transition-base);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-design-ecology-posture="stack"]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "controls"
    "stage"
    "readout";
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-design-ecology-posture="atlas"]) {
  grid-template-columns: minmax(13rem, 0.62fr) minmax(22rem, 1.38fr);
  grid-template-areas:
    "controls stage"
    "readout stage";
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-packing-state="compact"]) {
  --design-ecology-bubble-radius: 0.85rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-packing-state="spacious"]) {
  --design-ecology-bubble-radius: 1.38rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen:is(:hover, :focus-within)) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--design-ecology-accent) 46%, var(--design-surface-line) 54%);
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--design-ecology-accent) 13%, transparent),
    0 0 0 2px color-mix(in srgb, var(--design-ecology-accent) 11%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 34%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-settle-state="settling"]) {
  transform: translateY(var(--spw-settle-offset-mid, 1px));
  box-shadow:
    0 24px 52px color-mix(in srgb, var(--design-ecology-accent) 16%, transparent),
    0 0 0 2px color-mix(in srgb, var(--design-ecology-accent) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 34%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-copied="true"]) {
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--design-ecology-accent) 15%, transparent),
    0 0 0 3px color-mix(in srgb, var(--op-action-color, #008080) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 34%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-design-ecology-environment="calm"]) {
  --design-ecology-accent: color-mix(in srgb, var(--op-frame-color, #008080) 74%, var(--design-surface-accent-warm) 26%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-design-ecology-environment="social"]) {
  --design-ecology-accent: color-mix(in srgb, var(--op-object-color, #c58b2a) 72%, var(--op-frame-color, #008080) 28%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-design-ecology-environment="inspect"]) {
  --design-ecology-accent: color-mix(in srgb, var(--op-probe-color, #6a3fb8) 72%, var(--op-ref-color, #1d57a3) 28%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-controls, .design-ecology-readout, .design-ecology-stage) {
  min-width: 0;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-controls) {
  grid-area: controls;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-controls) {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-control-group) {
  display: grid;
  gap: 0.38rem;
  padding: 0.62rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--design-ecology-accent) 18%, var(--design-surface-line) 82%);
  border-radius: var(--shape-component, 0.65rem);
  background: color-mix(in srgb, var(--design-surface-matte-strong) 90%, var(--design-ecology-accent) 5%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-control-group h3, .design-ecology-readout h3) {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-control-row) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-control-row .operator-chip) {
  min-block-size: 1.82rem;
  font-size: 0.74rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-control-row .operator-chip[aria-pressed="true"]) {
  --operator-chip-active-border-intent: color-mix(in srgb, var(--design-ecology-accent) 66%, var(--design-surface-line) 34%);
  --operator-chip-active-bg-intent: color-mix(in srgb, var(--design-ecology-accent) 18%, var(--design-surface-matte-strong));
  --operator-chip-active-shadow-intent:
    0 0 0 1px color-mix(in srgb, var(--design-ecology-accent) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 38%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-stage) {
  grid-area: stage;
  display: grid;
  align-content: center;
  gap: 0.72rem;
  min-block-size: 100%;
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--design-ecology-accent) 24%, var(--design-surface-line) 76%);
  border-radius: calc(var(--shape-surface, 10px) + 2px);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--design-ecology-accent) var(--design-ecology-resonance-ambient, 11%), transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--design-surface-base-strong) 88%, var(--design-ecology-accent) 8%), color-mix(in srgb, var(--design-surface-matte) 94%, transparent));
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-settle-state="settling"] .design-ecology-stage) {
  outline: 1px solid color-mix(in srgb, var(--design-ecology-accent) 22%, transparent);
  outline-offset: 3px;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble) {
  display: grid;
  gap: 0.32rem;
  max-inline-size: min(28rem, 92%);
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--design-ecology-bubble-line);
  border-radius: var(--design-ecology-bubble-radius);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--design-ecology-accent) var(--design-ecology-resonance-wash, 3%), transparent), transparent 70%),
    var(--design-ecology-bubble-fill);
  box-shadow:
    0 var(--design-ecology-resonance-lift, 0.49rem) 1.4rem color-mix(in srgb, var(--design-ecology-accent) var(--design-ecology-resonance-glow, 11%), transparent),
    inset 0 1px 0 color-mix(in srgb, white 32%, transparent);
  transition:
    transform var(--component-transition-base),
    box-shadow var(--component-transition-base),
    border-color var(--component-transition-base),
    background-color var(--component-transition-base);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble--incoming) {
  justify-self: start;
  border-end-start-radius: 0.35rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble--outgoing) {
  justify-self: end;
  border-end-end-radius: 0.35rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble[data-design-ecology-variant="soft"]) {
  --design-ecology-bubble-radius: 1.3rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble[data-design-ecology-variant="ledger"]) {
  --design-ecology-bubble-radius: 0.58rem;
  --design-ecology-bubble-fill:
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface-matte-strong) 92%, transparent), color-mix(in srgb, var(--design-surface-panel) 94%, transparent));
  font-family: var(--site-mono-font, monospace);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble[data-design-ecology-variant="signal"]) {
  --design-ecology-bubble-radius: 1rem 1rem 0.35rem 1rem;
  border-style: dashed;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble[data-design-ecology-behavior="selected"]) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--design-ecology-accent) 58%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble[data-design-ecology-behavior="collected"]) {
  transform: translateY(-3px) scale(1.01);
  border-color: color-mix(in srgb, var(--design-ecology-accent) 72%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble__tag) {
  color: color-mix(in srgb, var(--design-ecology-accent) 62%, var(--design-surface-ink-mid) 38%);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble p, .design-chat-bubble small) {
  margin: 0;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble p) {
  color: var(--design-surface-ink);
  line-height: 1.42;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-chat-bubble small) {
  color: var(--design-surface-ink-soft);
  font-size: 0.76rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-readout) {
  grid-area: readout;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.72rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--design-ecology-accent) 24%, var(--design-surface-line) 76%);
  border-radius: var(--shape-surface, 10px);
  background: color-mix(in srgb, var(--design-surface-matte-strong) 92%, var(--design-ecology-accent) 5%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-readout dl) {
  display: grid;
  gap: 0.34rem;
  margin: 0;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-readout dl > div) {
  display: flex;
  justify-content: space-between;
  gap: 0.52rem;
  min-inline-size: 0;
  padding: 0.36rem 0.45rem;
  border-radius: var(--shape-element, 0.42rem);
  background: color-mix(in srgb, var(--design-surface-base-strong) 88%, var(--design-ecology-accent) 4%);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-readout dt) {
  color: var(--design-surface-ink-mid);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-readout dd) {
  min-inline-size: 0;
  margin: 0;
  text-align: end;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-readout code) {
  display: inline-block;
  max-inline-size: 28ch;
  color: color-mix(in srgb, var(--design-surface-ink) 74%, var(--design-ecology-accent) 26%);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-actions .operator-chip) {
  min-block-size: 1.85rem;
  border-color: color-mix(in srgb, var(--design-ecology-accent) 24%, var(--design-surface-line) 76%);
  background: color-mix(in srgb, var(--design-ecology-accent) 8%, var(--design-surface-base-strong));
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-specimen-builder-rail) {
  margin-block: 1rem;
  border-color: color-mix(in srgb, var(--design-ecology-accent, var(--design-surface-accent)) 22%, var(--design-surface-line) 78%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--design-surface-accent) 7%, transparent), transparent 48%),
    color-mix(in srgb, var(--design-surface-panel) 96%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-meter) {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 1.7rem;
  overflow: hidden;
  padding-inline: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--design-ecology-accent) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--design-surface-base-strong) 88%, transparent);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-meter)::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--design-ecology-accent) 34%, transparent), color-mix(in srgb, var(--design-ecology-accent) 12%, transparent));
  opacity: 0.86;
  transform: scaleX(var(--design-ecology-resonance, 0.18));
  transform-origin: left center;
  transition: transform var(--component-transition-deliberate);
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-meter span) {
  position: relative;
  z-index: 1;
  color: var(--design-surface-ink);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-status) {
  margin: 0;
  color: var(--design-surface-ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 72rem) {
  :where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "controls"
      "stage"
      "readout";
  }

  :where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-method) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@supports (container-type: inline-size) {
  @container design-ecology-frame (max-width: 54rem) {
    :where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "controls"
        "stage"
        "readout";
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(body[data-spw-page-seed="page_design_design_hub"]) :where(
    .design-ecology-specimen,
    .design-ecology-method > div,
    .design-qa-card,
    .design-material-specimen
  ) {
    transition: none;
  }

  :where(body[data-spw-page-seed="page_design_design_hub"]) :where(
    .design-ecology-specimen:is(:hover, :focus-within),
    .design-ecology-method > div:is(:hover, :focus-within)
  ) {
    transform: none;
  }

  :where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-settle-state="settling"]) {
    transform: none;
  }

  :where(body[data-spw-page-seed="page_design_design_hub"]) :where(.design-ecology-specimen[data-spw-settle-state="settling"] .design-ecology-stage) {
    outline-offset: 1px;
  }
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-contract) {
  position: relative;
  display: grid;
  gap: 1rem;
  border-color: color-mix(in srgb, var(--op-action-color, #008080) 34%, var(--line, rgba(255, 255, 255, 0.18)) 66%);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--op-action-color, #008080) 14%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel, rgba(255, 255, 255, 0.08)) 94%, transparent), color-mix(in srgb, var(--surface, rgba(255, 255, 255, 0.06)) 90%, transparent));
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-contract__grid) {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-contract__step) {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.72rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--op-frame-color, #008080) 30%, var(--line, rgba(255, 255, 255, 0.2)));
  border-radius: var(--shape-component, 0.6rem);
  background: color-mix(in srgb, var(--surface-panel-strong, rgba(255, 255, 255, 0.12)) 86%, transparent);
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-contract__step strong) {
  color: var(--ink, currentColor);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-contract__step span) {
  color: var(--ink-soft, currentColor);
  font-size: 0.88rem;
  line-height: 1.4;
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo) {
  --spw-interaction-demo-line: color-mix(in srgb, var(--op-action-color, #008080) 46%, var(--line, rgba(255, 255, 255, 0.22)));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: clamp(0.82rem, 1.6vw, 1.1rem);
  border: 1px solid var(--spw-interaction-demo-line);
  border-radius: calc(var(--shape-surface, 0.8rem) + 0.2rem);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--op-frame-color, #008080) 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.12)) 86%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-interaction-demo-line) 18%, transparent),
    0 12px 28px color-mix(in srgb, var(--op-action-color, #008080) 10%, transparent);
  color: var(--ink, currentColor);
  cursor: pointer;
  touch-action: pan-y;
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo:is(:hover, :focus-visible)) {
  outline: none;
  border-color: color-mix(in srgb, var(--op-action-color, #008080) 66%, var(--line, rgba(255, 255, 255, 0.22)));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--op-action-color, #008080) 28%, transparent),
    0 16px 34px color-mix(in srgb, var(--op-action-color, #008080) 16%, transparent);
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo[data-spw-gesture="active"], .spw-interaction-demo[data-spw-gesture="armed"]) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--op-action-color, #008080) 24%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.12)) 88%, transparent);
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo[data-spw-gesture="projecting"]) {
  transform: translate(
    clamp(-0.35rem, calc(var(--drag-dx, 0px) * 0.08), 0.35rem),
    clamp(-0.2rem, calc(var(--drag-dy, 0px) * 0.05), 0.2rem)
  );
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo[data-spw-gesture="committed"]) {
  border-color: color-mix(in srgb, var(--op-object-color, #c58b2a) 58%, var(--spw-interaction-demo-line) 42%);
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo__copy) {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.18rem);
  font-weight: 700;
}

:where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo__hint) {
  grid-column: 2;
  color: var(--ink-soft, currentColor);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

@media (max-width: 42rem) {
  :where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  :where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo > .spw-delimiter:last-child) {
    grid-column: 1;
  }

  :where(body[data-spw-page-family="design"]) :where(.spw-interaction-demo__hint) {
    grid-column: 1 / -1;
  }
}

/* Screenshot + narrow-view density for the Spectral Workshop values section
   (probe swatches, resonance mode chips, granular pigment swatches).
   Increases information density and label legibility when the "values" cluster
   (violet-ink / teal-mineral / brass-warm etc. + low-friction resonance toggles)
   is captured in mobile/portrait crops or shared screenshots. Uses the existing
   semantic pigment token names as the primary readable labels. */

/* Data-driven spectral swatches for the granular families demo on /design/palettes/.
   Removes per-swatch inline background + margin + figcaption styles for cleaner
   component identity, better reflow/alignment in the grid, and consistent style
   application. Supports the review of alignment, combinatorial clustering, and
   visual poetry for screenshots/prompts. The data attr also makes them inspectable
   as material seeds (ties to component utility, page arch as material basis). */
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch {
  background: var(--spectral-swatch-bg, var(--surface));
  margin: 0;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-teal-mineral"] { --spectral-swatch-bg: var(--pigment-teal-mineral); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-teal-electric"] { --spectral-swatch-bg: var(--pigment-teal-electric); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-amber-resin"] { --spectral-swatch-bg: var(--pigment-amber-resin); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-copper-oxide"] { --spectral-swatch-bg: var(--pigment-copper-oxide); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-violet-ink"] { --spectral-swatch-bg: var(--pigment-violet-ink); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-rose-dust"] { --spectral-swatch-bg: var(--pigment-rose-dust); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-clay-red"] { --spectral-swatch-bg: var(--pigment-clay-red); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-brass-warm"] { --spectral-swatch-bg: var(--pigment-brass-warm); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-paper-cream"] {
  --spectral-swatch-bg: var(--pigment-paper-cream);
  color: #333;
  text-shadow: none;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-charcoal-fiber"] { --spectral-swatch-bg: var(--pigment-charcoal-fiber); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-moss-soft"] { --spectral-swatch-bg: var(--pigment-moss-soft); }
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-lapis-soft"] { --spectral-swatch-bg: var(--pigment-lapis-soft); }

:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch figcaption {
  font-size: 0.7rem;
  opacity: 0.85;
  line-height: 1.1;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .spectral-grid .spectral-swatch[data-spw-pigment-token="--pigment-paper-cream"] figcaption {
  color: #333;
}

/* Projection registry grid + image-study specimens on palettes.
   Stable alignment, no overflow on caption meta, consistent space usage,
   better reflow at narrow widths. Supports "material basis", "physical dimension",
   "AR/VR segue" review criteria with visual poetry for screenshots. */
:where(body[data-spw-page-seed="page_design_palettes"]) .palette-projection-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}
:where(body[data-spw-page-seed="page_design_palettes"]) .palette-projection-grid .image-study {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .palette-projection-grid .image-study img {
  width: 100%;
  height: auto;
  min-height: 200px;
  background: var(--surface-soft);
}
:where(body[data-spw-page-seed="page_design_palettes"]) .palette-projection-grid .image-study .study-summary {
  width: 100%;
  min-width: 0;
  padding: 1.2rem;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .palette-projection-grid .image-study .study-summary p {
  margin-top: 0.5rem;
}

/* Palettes page component refinements for alignment, overflow, reflow, space, semantic hierarchy,
   handles/labels, combinatoric clustering, and visual poetry per review brief.
   - theme-handle-test clusters now classed for consistent baseline alignment of mode buttons vs dials.
   - operator-cluster-demo and seed-composer-form replace inline grids/flex for stable layout when resonance or inputs change.
   - Adds data-driven locality/component-locality for inspectability (handles for clarification).
   - Improves scannability of the live operator cluster (combinatoric salience/flow) and form inputs. */
:where(body[data-spw-page-seed="page_design_palettes"]) .theme-handle-test {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .theme-handle-test--modes,
:where(body[data-spw-page-seed="page_design_palettes"]) .theme-handle-test--dials {
  margin-top: 0.4rem;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .theme-pack-chooser {
  margin-top: 0.85rem;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .operator-cluster-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-composer-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-composer-form label,
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-composer-form input,
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-composer-form select {
  font-size: 0.85rem;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-composer-form input,
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-composer-form select {
  width: 100%;
  margin-top: 0.2rem;
  font-family: var(--font-family-mono);
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
}
:where(body[data-spw-page-seed="page_design_palettes"]) .seed-output {
  display: none;
  margin-top: 0.6rem;
  padding: 0.6rem;
  background: var(--surface-code, #0f1418);
  color: #c9d1d9;
  font-size: 0.78rem;
  border-radius: 6px;
  white-space: pre-wrap;
  overflow: auto;
}

/* Premium timed verify cue for settings application (query wiring + feedback pass).
   The 260ms window (with crafted transition) is deliberate: it gives the visitor time to
   register the styling benefit ("the resonance just shifted the operator glow because I chose
   craft-led") and communicates the value of the change without noise or jank. Scoped to
   palettes hero cards and status for now; the data attr + class can be reused site-wide for
   communicable, premium-feel verification of material/UX changes. */
:where(body[data-spw-page-seed="page_design_palettes"]) [data-settings-state],
:where(body[data-spw-page-seed="page_design_palettes"]) .frame-panel[data-spw-component-identity] {
  transition:
    box-shadow 260ms var(--ease-mechanical, ease),
    border-color 260ms var(--ease-mechanical, ease),
    color 180ms ease;
}
:where(body[data-spw-page-seed="page_design_palettes"]) [data-spw-setting-just-verified="true"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 32%, transparent),
    var(--card-highlight),
    var(--card-shadow);
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 22%, var(--line));
}

/* Spacing + status for the "copy this look as query" affordance (query discoverability + communicability).
   The status appears with the verify timing to confirm the capture without cluttering the dial area. */
:where(body[data-spw-page-seed="page_design_palettes"]) [data-spw-copy-current-query] {
  margin-top: 0.4rem;
}
:where(body[data-spw-page-seed="page_design_palettes"]) .spw-query-copy-status {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  opacity: 0.82;
}
@media (max-width: 560px) {
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.spectral-grid) {
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 0.36rem;
  }
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.spectral-swatch) {
    padding: 0.38rem 0.18rem;
    font-size: 0.61rem;
    aspect-ratio: 1.08;
  }
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.spectral-swatch figcaption) {
    font-size: 0.60rem;
    line-height: 1.08;
    opacity: 0.94;
    font-weight: 500;
  }

  /* Tighten the live 4-voice probe readout row inside the workshop for the same captures */
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.palette-probe-swatches) {
    gap: 0.28rem;
  }
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.palette-probe-chip) {
    inline-size: 1.02rem;
    block-size: 1.02rem;
    border-radius: 0.30rem;
  }

  /* Slightly denser packing for the resonance chip row + surrounding workshop widgets */
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.vibe-widget-grid--compact) {
    gap: 0.62rem;
  }
  :where(body[data-spw-page-seed="page_design_palettes"]) :where(.vibe-widget, .palette-probe) {
    padding: 0.72rem 0.78rem 0.82rem;
    gap: 0.58rem;
  }
}

/* Folio archive — laminated artifact register under the design family */
:where(body[data-spw-page-seed="page_design_folios"]) {
  --active-op-color: color-mix(in srgb, var(--op-object-color, #c58b2a) 58%, var(--teal, #008080) 42%);
}

:where(body[data-spw-page-seed="page_design_folios"]) .spw-page-state-strip {
  margin-block: 0.65rem 0.35rem;
}

:where(body[data-spw-page-seed="page_design_folios"]) .spw-chrome-help {
  margin-block: 0.45rem 0.2rem;
  max-inline-size: 42rem;
}

:where(body[data-spw-page-seed="page_design_folios"]) .spw-chrome-help > summary {
  cursor: pointer;
  color: color-mix(in srgb, var(--ink-soft) 78%, var(--active-op-color) 22%);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

:where(body[data-spw-page-seed="page_design_folios"]) .folio-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

:where(body[data-spw-page-seed="page_design_folios"]) .folio-lens-switcher {
  --active-op-color: color-mix(in srgb, var(--op-object-color, #c58b2a) 70%, var(--teal, #008080) 30%);
  margin-block: 0.15rem 0.35rem;
}

:where(body[data-spw-page-seed="page_design_folios"]) .folio-card__readings {
  margin: 0;
  padding: 0.55rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: var(--shape-small, 0.55rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--active-op-color) 8%);
}

:where(body[data-spw-page-seed="page_design_folios"]) .folio-card__readings > div {
  margin: 0;
}

:where(body[data-spw-page-seed="page_design_folios"]) .folio-card__readings dt {
  margin: 0 0 0.18rem;
  color: color-mix(in srgb, var(--active-op-color) 72%, var(--ink));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

:where(body[data-spw-page-seed="page_design_folios"]) .folio-card__readings dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

:where(body[data-spw-page-seed="page_design_folios"]) #seed-studies .frame-grid {
  gap: 1rem;
}

@media (max-width: 720px) {
  :where(body[data-spw-page-seed="page_design_folios"]) .folio-lens-switcher .frame-sigil {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
  }
}
}

/* /public/css/routes/surfaces/design-experiments.css */
@layer routes {
/* ==========================================================================
   design-experiments.css
   --------------------------------------------------------------------------
   Purpose
   - Route-scoped experiment-lab styles keyed by
     body[data-spw-page-family="experiment-lab"].
   - Keep experimental controls readable while preserving the shared frame,
     slot, and semantic metadata contracts.
   - Keep experiment blocks mapped to visible HTML nouns.

   Debugging notes
   - Prefer data-spw-feature or data-spw-slot for durable clusters.
   - If a rule would help more than one route, move it to components or
     systems/surfaces instead of widening this file.
   ========================================================================== */

[data-spw-page-family="experiment-lab"] .design-experiment-hero,
[data-spw-page-family="experiment-lab"] .design-experiment-frame {
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--line-strong) 34%, transparent);
  border-radius: var(--shape-surface);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 96%, transparent), color-mix(in srgb, var(--surface) 97%, transparent));
  box-shadow:
    0 12px 28px rgba(10, 18, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

[data-spw-page-family="experiment-lab"] .design-experiment-actions,
[data-spw-page-family="experiment-lab"] .design-experiment-state,
[data-spw-page-family="experiment-lab"] .design-experiment-toolbar,
[data-spw-page-family="experiment-lab"] .design-experiment-axis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-flow);
}

[data-spw-page-family="experiment-lab"] .design-bundle-grid,
[data-spw-page-family="experiment-lab"] .design-token-grid,
[data-spw-page-family="experiment-lab"] .design-specimen-grid,
[data-spw-page-family="experiment-lab"] .design-rule-grid,
[data-spw-page-family="experiment-lab"] .design-reading-grid {
  display: grid;
  gap: var(--gap-surface);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

[data-spw-page-family="experiment-lab"] .design-bundle-btn {
  display: grid;
  gap: var(--gap-inline-tight);
  justify-items: start;
  min-height: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--line-strong) 44%, transparent);
  border-radius: var(--shape-surface);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong) 92%, var(--active-op-color) 8%),
      color-mix(in srgb, var(--surface) 96%, transparent)
    );
  color: inherit;
  text-align: left;
  box-shadow:
    0 6px 16px rgba(10, 18, 24, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition:
    transform var(--duration-fast) var(--ease-mechanical),
    box-shadow var(--duration-base) var(--ease-settle),
    border-color var(--duration-base) var(--ease-paper),
    background var(--duration-base) var(--ease-paper);
}

[data-spw-page-family="experiment-lab"] .design-bundle-btn:hover,
[data-spw-page-family="experiment-lab"] .design-bundle-btn:focus-visible,
[data-spw-page-family="experiment-lab"] .design-bundle-btn[data-design-bundle-active="true"] {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(10, 18, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
  border-color: color-mix(in srgb, var(--active-op-color) 36%, var(--line));
}

[data-spw-page-family="experiment-lab"] .design-bundle-btn strong {
  font-size: var(--text-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-spw-page-family="experiment-lab"] .design-bundle-btn span {
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-axis-card {
  display: grid;
  gap: var(--gap-block-tight);
  padding: var(--inset-panel);
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: var(--shape-surface);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
}

[data-spw-page-family="experiment-lab"] .design-axis-card h3,
[data-spw-page-family="experiment-lab"] .design-token-card h3,
[data-spw-page-family="experiment-lab"] .design-reading-card h3,
[data-spw-page-family="experiment-lab"] .design-specimen-card h3 {
  margin: 0;
  font-size: var(--text-size-base);
}

[data-spw-page-family="experiment-lab"] .design-axis-card p,
[data-spw-page-family="experiment-lab"] .design-token-card p,
[data-spw-page-family="experiment-lab"] .design-reading-card p,
[data-spw-page-family="experiment-lab"] .design-specimen-card p {
  margin: 0;
}

[data-spw-page-family="experiment-lab"] .design-token-card,
[data-spw-page-family="experiment-lab"] .design-rule-panel,
[data-spw-page-family="experiment-lab"] .design-reading-card,
[data-spw-page-family="experiment-lab"] .design-specimen-card {
  display: grid;
  gap: var(--gap-block-tight);
  padding: var(--inset-panel);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: var(--shape-surface);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow:
    0 8px 20px rgba(10, 18, 24, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

[data-spw-page-family="experiment-lab"] .design-variable-grid {
  display: grid;
  gap: var(--gap-surface);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

[data-spw-page-family="experiment-lab"] .design-variable-card {
  display: grid;
  gap: var(--gap-block-tight);
  padding: var(--inset-panel);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--shape-surface);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 97%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow:
    0 8px 20px rgba(10, 18, 24, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

[data-spw-page-family="experiment-lab"] .design-variable-card h3 {
  margin: 0;
  font-size: var(--text-size-base);
}

[data-spw-page-family="experiment-lab"] .design-variable-card p {
  margin: 0;
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-variable-control {
  display: grid;
  gap: 0.35rem;
}

[data-spw-page-family="experiment-lab"] .design-variable-control span {
  color: var(--ink-soft);
  font-size: var(--text-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-spw-page-family="experiment-lab"] .design-variable-control input[type="range"] {
  width: 100%;
}

[data-spw-page-family="experiment-lab"] .design-variable-readout {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--shape-component);
  background: color-mix(in srgb, var(--surface-code) 88%, transparent);
  color: color-mix(in srgb, white 90%, var(--active-op-color) 10%);
  font-family: var(--site-mono-font);
  font-size: var(--text-size-sm);
}

[data-spw-page-family="experiment-lab"] .design-variable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-tight);
  align-items: center;
  margin-top: var(--gap-block-tight);
}

[data-spw-page-family="experiment-lab"] .design-variable-status {
  margin: 0;
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-token-value {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--shape-component);
  background: color-mix(in srgb, var(--surface-code) 90%, transparent);
  color: color-mix(in srgb, white 88%, var(--active-op-color) 12%);
  font-family: var(--site-mono-font);
  font-size: var(--text-size-sm);
}

[data-spw-page-family="experiment-lab"] .design-token-meter {
  position: relative;
  height: 0.6rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--line) 42%, transparent);
}

[data-spw-page-family="experiment-lab"] .design-experiment-status {
  margin-top: var(--gap-block-tight);
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: var(--shape-component);
  background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-token-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--design-meter-fill, 0) * 100%);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--delight-color) 72%, white 28%),
      color-mix(in srgb, var(--wonder-accent-color) 84%, white 16%)
    );
}

[data-spw-page-family="experiment-lab"] .design-token-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-tight);
}

[data-spw-page-family="experiment-lab"] .design-experiment-status {
  margin-top: var(--gap-block-tight);
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-css-stage {
  display: grid;
  gap: var(--gap-surface);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--line-strong) 34%, transparent);
  border-radius: var(--shape-surface);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--active-op-color) 8%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--surface) 98%, transparent));
  box-shadow:
    0 10px 26px rgba(10, 18, 24, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

[data-spw-page-family="experiment-lab"] .design-css-stack {
  display: grid;
  gap: var(--gap-panel);
}

[data-spw-page-family="experiment-lab"] .design-css-rail {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

[data-spw-page-family="experiment-lab"] .design-css-divider {
  height: 0;
  border-top: var(--line-mid) solid color-mix(in srgb, var(--active-op-color) 26%, var(--line));
  border-radius: var(--shape-element);
}

[data-spw-page-family="experiment-lab"] .design-css-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-tight);
}

[data-spw-page-family="experiment-lab"] .design-css-annotation {
  padding-inline-start: 1rem;
  border-inline-start: var(--boundary-rail-width-strong) solid color-mix(in srgb, var(--active-op-color) 42%, transparent);
}

[data-spw-page-family="experiment-lab"] .design-literary-grid {
  display: grid;
  gap: var(--gap-surface);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

[data-spw-page-family="experiment-lab"] .design-literary-card {
  display: grid;
  gap: var(--gap-block-tight);
  padding: var(--inset-panel);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: var(--shape-surface);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 94%, var(--active-op-color) 6%), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow:
    0 8px 20px rgba(10, 18, 24, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

[data-spw-page-family="experiment-lab"] .design-literary-card h3 {
  margin: 0;
  font-size: var(--text-size-base);
}

[data-spw-page-family="experiment-lab"] .design-literary-card p {
  margin: 0;
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-literary-card--stanza {
  border-inline-start: var(--boundary-rail-width-strong) solid color-mix(in srgb, var(--op-ref-color) 38%, transparent);
}

[data-spw-page-family="experiment-lab"] .design-literary-stanza {
  margin: 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  border-radius: var(--shape-component);
  background: color-mix(in srgb, var(--surface-code) 88%, transparent);
  color: color-mix(in srgb, white 90%, var(--active-op-color) 10%);
  font-family: var(--site-mono-font);
  font-size: var(--text-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

[data-spw-page-family="experiment-lab"] .design-rule-stage {
  --design-rule-accent: var(--active-op-color);
  display: grid;
  gap: var(--gap-surface);
  margin-top: var(--gap-surface);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--line-strong) 32%, transparent);
  border-radius: var(--shape-surface);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--design-rule-accent) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-strong) 96%, transparent);
}

[data-spw-page-family="experiment-lab"] .design-rule-map {
  display: grid;
  gap: var(--gap-block-tight);
  align-content: start;
  min-width: 0;
  margin: 0;
}

[data-spw-page-family="experiment-lab"] .design-rule-map .spw-svg-surface {
  display: block;
  width: 100%;
  max-width: none;
  border-radius: var(--shape-surface);
}

[data-spw-page-family="experiment-lab"] .design-rule-map__frame,
[data-spw-page-family="experiment-lab"] .design-rule-map__node rect {
  fill: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  stroke: color-mix(in srgb, var(--design-rule-accent) 42%, var(--line));
  stroke-width: calc(var(--line-mid) * var(--spw-svg-stroke-scale, 1));
}

[data-spw-page-family="experiment-lab"] .design-rule-map__path {
  fill: none;
  stroke: color-mix(in srgb, var(--design-rule-accent) 68%, transparent);
  stroke-linecap: round;
  stroke-width: calc(2.5px * var(--spw-svg-stroke-scale, 1));
  opacity: 0.42;
}

[data-spw-page-family="experiment-lab"] .design-rule-map__node text,
[data-spw-page-family="experiment-lab"] .design-rule-map__scope text {
  fill: var(--ink);
  font-family: var(--site-mono-font);
  font-size: 20px;
  letter-spacing: 0.03em;
}

[data-spw-page-family="experiment-lab"] .design-rule-map__scope circle {
  fill: none;
  stroke: color-mix(in srgb, var(--design-rule-accent) 28%, transparent);
  stroke-dasharray: 8 10;
  stroke-width: 2;
}

[data-design-cascade-layer="tokens"] .design-rule-map__path--tokens,
[data-design-cascade-layer="components"] .design-rule-map__path--components,
[data-design-cascade-layer="ornament"] .design-rule-map__path--ornament {
  opacity: 1;
  stroke-width: calc(4px * var(--spw-svg-stroke-scale, 1));
}

[data-design-selector-scope="region"] .design-rule-map__scope circle {
  r: 142px;
}

[data-design-selector-scope="component"] .design-rule-map__scope circle {
  r: 104px;
}

[data-design-selector-scope="slot"] .design-rule-map__scope circle {
  r: 58px;
}

[data-design-cascade-layer="tokens"] .design-rule-stage {
  --design-rule-accent: var(--op-ref-color);
}

[data-design-cascade-layer="components"] .design-rule-stage {
  --design-rule-accent: var(--op-frame-color);
}

[data-design-cascade-layer="ornament"] .design-rule-stage {
  --design-rule-accent: var(--op-probe-color);
}

[data-spw-page-family="experiment-lab"] .design-rule-specimen {
  display: grid;
  gap: var(--gap-block-tight);
  width: min(100%, 28rem);
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--design-rule-accent) 46%, var(--line));
  border-radius: var(--shape-surface);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong) 92%, var(--design-rule-accent) 8%),
      color-mix(in srgb, var(--surface) 96%, transparent)
    );
  box-shadow:
    0 8px 18px rgba(10, 18, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

[data-design-cascade-layer="ornament"] .design-rule-specimen {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--design-rule-accent) 28%, transparent),
    0 14px 30px rgba(10, 18, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

[data-design-selector-scope="region"] .design-rule-stage :where(.design-rule-specimen, .design-rule-readout, .operator-chip, .spec-pill) {
  outline: 1px dashed color-mix(in srgb, var(--design-rule-accent) 46%, transparent);
  outline-offset: 0.18rem;
}

[data-design-selector-scope="component"] .design-rule-specimen {
  outline: 2px solid color-mix(in srgb, var(--design-rule-accent) 54%, transparent);
  outline-offset: 0.22rem;
}

[data-design-selector-scope="slot"] .design-rule-slot {
  border-radius: var(--shape-component);
  background: color-mix(in srgb, var(--design-rule-accent) 12%, transparent);
  outline: 1px solid color-mix(in srgb, var(--design-rule-accent) 34%, transparent);
  outline-offset: 0.12rem;
}

[data-design-box-model="content-box"] .design-rule-specimen {
  box-sizing: content-box;
  inline-size: min(100%, 24rem);
  padding: 1.35rem;
  border-width: 0.35rem;
}

[data-design-box-model="border-box"] .design-rule-specimen,
[data-design-box-model="contained"] .design-rule-specimen {
  box-sizing: border-box;
}

[data-design-box-model="contained"] .design-rule-specimen {
  contain: layout paint;
  inline-size: min(100%, 24rem);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

[data-spw-page-family="experiment-lab"] .design-rule-readout {
  display: grid;
  gap: var(--gap-block-tight);
  align-content: start;
  min-width: 0;
  padding: var(--inset-panel);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--shape-surface);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

[data-spw-page-family="experiment-lab"] .design-rule-readout dl {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

[data-spw-page-family="experiment-lab"] .design-rule-readout dl div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-inline-tight);
}

[data-spw-page-family="experiment-lab"] .design-rule-readout dt {
  color: var(--ink-soft);
}

[data-spw-page-family="experiment-lab"] .design-rule-readout dd {
  margin: 0;
}

[data-spw-page-family="experiment-lab"] .design-rule-readout pre {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0.8rem;
  overflow-x: auto;
  border-radius: var(--shape-component);
  background: color-mix(in srgb, var(--surface-code) 92%, transparent);
  color: color-mix(in srgb, white 90%, var(--design-rule-accent) 10%);
}

[data-spw-page-family="experiment-lab"] .design-svg-stage {
  display: grid;
  gap: var(--gap-surface);
}

[data-spw-page-family="experiment-lab"] .design-svg-stage .spw-svg-surface {
  max-width: var(--spw-svg-surface-max, none);
}

[data-spw-page-family="experiment-lab"] .design-svg-frame-rect {
  rx: var(--shape-surface);
  ry: var(--shape-surface);
}

[data-spw-page-family="experiment-lab"] .design-svg-node-rect {
  rx: var(--shape-component);
  ry: var(--shape-component);
}

[data-spw-page-family="experiment-lab"] .design-svg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-tight);
}

[data-spw-page-family="experiment-lab"] .design-svg-legend .spec-pill {
  min-height: 2rem;
}

[data-spw-page-family="experiment-lab"] .design-svg-note-grid {
  display: grid;
  gap: var(--gap-panel);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

[data-spw-page-family="experiment-lab"] .svg-workbench {
  --svg-workbench-accent: var(--active-op-color, #008080);
  display: grid;
  gap: var(--gap-panel, 1rem);
  margin-block-start: var(--gap-surface, 1.25rem);
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--svg-workbench-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--shape-surface, 10px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--svg-workbench-accent) 8%, transparent),
      transparent 42%
    ),
    color-mix(in srgb, var(--surface-strong) 94%, var(--surface) 6%);
  box-shadow: var(--shadow-sm);
}

[data-spw-page-family="experiment-lab"] .svg-workbench__head {
  display: grid;
  gap: var(--gap-inline-tight, 0.48rem);
  max-inline-size: min(100%, 70ch);
}

[data-spw-page-family="experiment-lab"] .svg-workbench__head h3 {
  margin: 0;
}

[data-spw-page-family="experiment-lab"] .svg-workbench__controls {
  display: grid;
  gap: var(--gap-panel, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

[data-spw-page-family="experiment-lab"] .svg-workbench__field {
  display: grid;
  gap: var(--gap-inline-tight, 0.48rem);
  min-inline-size: 0;
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--svg-workbench-accent) 14%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--shape-component, 8px);
  background: color-mix(in srgb, var(--surface) 92%, var(--svg-workbench-accent) 8%);
}

[data-spw-page-family="experiment-lab"] .svg-workbench__field > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.78rem);
  font-weight: 700;
}

[data-spw-page-family="experiment-lab"] .svg-workbench__field code {
  color: color-mix(in srgb, var(--ink) 72%, var(--svg-workbench-accent) 28%);
}

[data-spw-page-family="experiment-lab"] .svg-workbench__field input,
[data-spw-page-family="experiment-lab"] .svg-workbench__field select {
  inline-size: 100%;
  min-block-size: max(2.35rem, var(--touch-target-compact, 2.15rem));
}

[data-spw-page-family="experiment-lab"] .svg-workbench__field input[type="range"] {
  accent-color: var(--svg-workbench-accent);
}

[data-spw-page-family="experiment-lab"] .svg-workbench__carry {
  display: grid;
  gap: var(--gap-inline, 0.7rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

[data-spw-page-family="experiment-lab"] .svg-workbench__url {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-component, 8px);
  background: color-mix(in srgb, var(--surface-code) 92%, transparent);
  color: color-mix(in srgb, white 88%, var(--svg-workbench-accent) 12%);
  font-family: var(--site-mono-font);
  font-size: var(--text-size-xs, 0.78rem);
  white-space: nowrap;
}

[data-spw-page-family="experiment-lab"] .svg-workbench__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-inline-tight, 0.48rem);
}

[data-spw-page-family="experiment-lab"] .svg-environment-grid,
[data-spw-page-family="experiment-lab"] .svg-capture-packet {
  display: grid;
  gap: var(--gap-panel, 1rem);
}

[data-spw-page-family="experiment-lab"] .svg-environment-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

[data-spw-page-family="experiment-lab"] .svg-environment-card {
  display: grid;
  gap: var(--gap-inline-tight, 0.48rem);
  padding: 0.82rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color) 14%, var(--line));
  border-radius: var(--shape-component, 8px);
  background: color-mix(in srgb, var(--surface-strong) 94%, var(--active-op-color) 6%);
}

[data-spw-page-family="experiment-lab"] .svg-environment-card h3,
[data-spw-page-family="experiment-lab"] .svg-environment-card p {
  margin: 0;
}

[data-spw-page-family="experiment-lab"] .svg-capture-packet {
  margin-block-start: var(--gap-surface, 1.25rem);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--op-ref-color, #1d57a3) 20%, var(--line));
  border-radius: var(--shape-surface, 10px);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--op-ref-color, #1d57a3) 8%, transparent),
      transparent 44%
    ),
    var(--surface-strong);
}

[data-spw-page-family="experiment-lab"] .svg-capture-packet__fields {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-spw-page-family="experiment-lab"] .svg-capture-packet__fields li {
  display: grid;
  gap: 0.16rem;
  padding: 0.65rem;
  border-radius: var(--shape-component, 8px);
  background: color-mix(in srgb, var(--surface) 90%, var(--op-ref-color, #1d57a3) 10%);
}

[data-spw-page-family="experiment-lab"] .svg-capture-packet__fields strong {
  color: color-mix(in srgb, var(--ink) 78%, var(--op-ref-color, #1d57a3) 22%);
}

[data-spw-page-family="experiment-lab"] .design-reading-card {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong) 94%, var(--active-op-color) 6%),
      color-mix(in srgb, var(--surface) 96%, transparent)
    );
}

[data-spw-page-family="experiment-lab"] .design-reading-card code,
[data-spw-page-family="experiment-lab"] .design-axis-card code {
  font-family: var(--site-mono-font);
}

@media (min-width: 64rem) {
  [data-spw-page-family="experiment-lab"] .design-specimen-grid--wide {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.9fr);
  }

  [data-spw-page-family="experiment-lab"] .design-rule-stage {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.9fr) minmax(16rem, 0.7fr);
  }
}

@media (max-width: 48rem) {
  [data-spw-page-family="experiment-lab"] .svg-workbench__carry {
    grid-template-columns: 1fr;
  }

  [data-spw-page-family="experiment-lab"] .svg-workbench__actions {
    justify-content: flex-start;
  }
}
}

/* /public/css/routes/surfaces/review-surfaces.css */
@layer routes {
/* ==========================================================================
   routes/surfaces/review-surfaces.css
   --------------------------------------------------------------------------
   Focused review surfaces for split catalog and experiment slices.
   The JS enhancer injects the rail; this file gives it the right material,
   rhythm, and SVG readability.
   ========================================================================== */

:where(
  body[data-spw-page-role="asset-review"],
  body[data-spw-page-role="token-review"],
  body[data-spw-page-role="design-lab"]
) {
  --review-rail-accent: var(--active-op-color, var(--teal, #008080));
  --review-rail-line: color-mix(in srgb, var(--review-rail-accent) 18%, var(--line, rgba(14, 18, 20, 0.14)));
  --review-rail-line-strong: color-mix(in srgb, var(--review-rail-accent) 34%, var(--line, rgba(14, 18, 20, 0.14)));
  --review-rail-surface:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.88)) 98%, transparent),
      color-mix(in srgb, var(--surface, rgba(255, 255, 255, 0.72)) 94%, transparent)
    );
  --review-rail-shadow:
    0 10px 26px rgba(10, 18, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

:where(body[data-spw-page-role="asset-review"]) {
  --review-rail-accent: var(--op-surface-color, #178282);
}

:where(body[data-spw-page-role="token-review"]) {
  --review-rail-accent: var(--op-probe-color, #4a2180);
}

:where(body[data-spw-page-role="design-lab"]) {
  --review-rail-accent: var(--op-frame-color, #008080);
}

:where(.spw-review-rail) {
  display: grid;
  gap: var(--gap-surface, 1rem);
  align-self: start;
  min-width: 0;
  padding: var(--inset-panel, 1rem);
  border: 1px solid var(--review-rail-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--review-rail-surface);
  box-shadow: var(--review-rail-shadow);
}

:where(.review-surface-card) {
  display: grid;
  gap: var(--gap-block-tight, 0.45rem);
  min-width: 0;
  padding: 0;
}

:where(.review-surface-kicker) {
  margin: 0;
  color: color-mix(in srgb, var(--review-rail-accent) 62%, var(--ink-soft, rgba(14, 18, 20, 0.68)));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.review-surface-title) {
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.12;
  text-wrap: balance;
}

:where(.review-surface-subtitle) {
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: 0.92rem;
  line-height: 1.2;
}

:where(.review-surface-lede, .review-surface-note) {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.92rem;
  line-height: 1.5;
  text-wrap: pretty;
}

:where(.review-verb-row, .review-link-grid) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem 0.45rem;
  min-width: 0;
}

:where(.review-verb-chip, .review-link-chip) {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--review-rail-line) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.88)) 94%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

:where(.review-link-chip:is(:hover, :focus-visible), .review-verb-chip[data-review-active="true"], .review-link-chip[data-review-active="true"]) {
  color: color-mix(in srgb, var(--review-rail-accent) 72%, var(--ink, rgba(14, 18, 20, 0.92)));
  border-color: color-mix(in srgb, var(--review-rail-accent) 34%, var(--review-rail-line));
  background: color-mix(in srgb, var(--review-rail-accent) 8%, var(--surface-strong, rgba(255, 255, 255, 0.88)));
}

:where(.review-constellation) {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

:where(.review-constellation__svg) {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 5 / 4;
}

:where(.review-constellation__caption) {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.82rem;
  line-height: 1.35;
}

:where(.review-constellation__flow) {
  opacity: 0.36;
  transition: opacity var(--duration-base, 200ms) var(--ease-mechanical, ease);
}

:where(.review-constellation__node) {
  transition:
    transform var(--duration-base, 200ms) var(--ease-mechanical, ease),
    fill var(--duration-base, 200ms) var(--ease-mechanical, ease),
    stroke var(--duration-base, 200ms) var(--ease-mechanical, ease);
  transform-box: fill-box;
  transform-origin: center;
}

:where(.review-constellation__label) {
  pointer-events: none;
}

:where(.review-constellation__link):is(:hover, :focus-visible) .review-constellation__node,
:where(.review-constellation__link[data-review-active="true"]) .review-constellation__node {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--review-rail-accent) 20%, transparent));
}

:where(.review-constellation__link):is(:hover, :focus-visible) .review-constellation__flow,
:where(.review-constellation__link[data-review-active="true"]) .review-constellation__flow {
  opacity: 0.82;
}

:where(.review-constellation__link[data-review-active="true"]) .review-constellation__label,
:where(.review-link-chip[data-review-active="true"]) {
  color: color-mix(in srgb, var(--review-rail-accent) 76%, var(--ink, rgba(14, 18, 20, 0.92)));
}

@media (max-width: 760px) {
  :where(.spw-review-rail) {
    padding: 0.9rem;
  }
}
}