/* Generated by scripts/css-bundle.mjs — do not edit by hand. */
@import url("https://fonts.googleapis.com/css2");

@import url("https://fonts.googleapis.com/css2");

/* /public/css/reset/base.css */
@layer reset {
/* ==========================================================================
   base.css
   --------------------------------------------------------------------------
   Purpose:
   - Global baseline, interaction resets, flow defaults, and default typography.
   - Own shared reading rhythm, anchor behavior, overflow safety, and semantic
     document flow before route/shell layers specialize the page.
   Dependency: None (includes hardcoded fallbacks if tokens are missing).
   ========================================================================== */

/* ── 0. Shared Baseline Flow Variables ─────────────────────────────────── */

:root {
  --site-root-font-size: 100%;
  --site-line-height: 1.68;

  --flow-gap-2xs: 0.35rem;
  --flow-gap-xs: 0.55rem;
  --flow-gap-sm: 0.8rem;
  --flow-gap-md: 1rem;
  --flow-gap-lg: 1.4rem;
  --flow-gap-xl: 2rem;
  --flow-gap-2xl: 3rem;

  --flow-section-gap: clamp(1.4rem, 3vw, 2.6rem);
  --flow-stack-gap: clamp(0.9rem, 1.8vw, 1.25rem);
  --flow-reading-gap: clamp(0.8rem, 1.6vw, 1.1rem);

  --focus-ring-color: var(--teal, #008080);
  --focus-ring-offset: 3px;
  --selection-bg: var(--active-op-bg-soft, rgba(0, 128, 128, 0.18));
  --selection-ink: var(--ink, #161c1d);
}

/* ── 1. Core Box Model & Interaction Limits ────────────────────────────── */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 4rem);
  font-size: var(--site-root-font-size, 100%);
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  --spw-debug-layer-owner: "reset";
  --spw-debug-layer-color: #888888;

  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--bg, #f7f4ee);
  background-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    color-mix(in oklab, var(--bg-deep, var(--bg, #efebe0)) 0%, transparent) 0%,
    transparent 70%
  );
  background-attachment: fixed;
  color: var(--ink, #161c1d);

  font-family: var(
    --site-mono-font,
    'JetBrains Mono',
    'Cascadia Code',
    'Fira Code',
    'Roboto Mono',
    ui-monospace,
    monospace
  );
  line-height: var(--site-line-height, 1.68);
  font-optical-sizing: auto;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  overflow-wrap: break-word;
}

/* ── 2. Document Flow Defaults ──────────────────────────────────────────── */

main,
article,
section,
aside,
nav,
header,
footer,
figure,
figcaption,
details,
summary,
fieldset,
form,
blockquote {
  min-width: 0;
}

main,
article,
section,
aside,
nav,
figure,
form {
  display: block;
}

main > article,
main > section,
main > aside {
  min-width: 0;
}

article,
section,
aside {
  contain: inline-size style;
}

:where(main > article),
:where(main > section),
:where(main > aside),
:where(article > section),
:where(article > aside),
:where(section > section),
:where(section > aside),
:where(aside > section),
:where(aside > aside) {
  display: flex;
  flex-direction: column;
  gap: var(--flow-stack-gap);
}

:where(main > * + *),
:where(article > * + *),
:where(section > * + *),
:where(aside > * + *),
:where(nav > * + *),
:where(figure > * + *) {
  margin-block-start: 0;
}

:where(main > section + section),
:where(main > section + nav),
:where(main > nav + section),
:where(main > article + section),
:where(main > section + article),
:where(article > section + section),
:where(article > section + aside),
:where(article > aside + section) {
  margin-top: var(--flow-section-gap);
}

/* Keep sparse pages from carrying accidental edge gaps. */
main > :where(h1, h2, h3, p, ul, ol, figure):first-child {
  margin-top: 0;
}

main > :where(h1, h2, h3, p, ul, ol, figure):last-child {
  margin-bottom: 0;
}

/* useful generic stack */
.flow-stack,
.reading-stack,
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--flow-stack-gap);
  min-width: 0;
}

/* ── 3. Media & Objects ─────────────────────────────────────────────────── */

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  height: auto;
  font-style: italic;
}

svg {
  color: inherit;
}

svg text {
  fill: currentColor;
}

iframe,
embed,
object {
  width: 100%;
  border: 0;
}

/* ── 4. Typography & Text Flow ──────────────────────────────────────────── */

::selection {
  background: var(--selection-bg);
  color: var(--selection-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 4vw, 1.7rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.25rem); }

h4 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal, #008080);
}

p,
blockquote,
figcaption,
dd {
  margin: 0;
}

p + p,
p + ul,
p + ol,
ul + p,
ol + p,
blockquote + p,
p + blockquote {
  margin-top: var(--flow-reading-gap);
}

ul,
ol {
  margin: 0;
  padding-left: 1.5rem;
}

:where(ul, ol) {
  display: grid;
  gap: 0.45rem;
}

li > :where(p, ul, ol) {
  margin-top: 0.45rem;
}

dt {
  font-weight: 700;
  margin: 0;
}

dd + dt {
  margin-top: var(--flow-gap-sm);
}

blockquote {
  padding-left: 1rem;
  border-left: 2px solid color-mix(in oklab, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

small {
  font-size: 0.86em;
}

/* code-heavy or machine-readable regions */
pre,
code,
kbd,
samp {
  font-family: inherit;
}

kbd {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border: 1px solid color-mix(in oklab, var(--line, rgba(14,18,20,0.14)) 90%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in oklab, var(--surface, rgba(255,255,255,0.72)) 92%, transparent);
  line-height: 1.2;
  font-size: 0.92em;
}

/* ── 5. Links & Focus States ────────────────────────────────────────────── */

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
}

article a,
.frame-panel a,
.inline-note a,
.site-lede a,
.page-lede a,
.frame-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--active-op-color, #008080) 45%, transparent);
  font-weight: 500;
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

article a:hover,
.frame-panel a:hover,
.inline-note a:hover,
.page-lede a:hover,
.frame-note a:hover {
  text-decoration-color: var(--active-op-color, #008080);
  color: var(--active-op-color, #008080);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* Improve deep-link landing behavior */
[id] {
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
}

/* ── 6. Tables, Rules, Disclosure ──────────────────────────────────────── */

hr {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent);
  margin: var(--flow-gap-lg) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  overflow-x: auto;
}

th,
td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in oklab, var(--line, rgba(14,18,20,0.14)) 88%, transparent);
}

th {
  font-weight: 700;
}

details {
  min-width: 0;
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* ── 7. Form Controls & Code ───────────────────────────────────────────── */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

pre {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-code, #12171b);
  color: #f9e8bf;
  line-height: 1.55;
  tab-size: 2;
}

pre > code {
  display: block;
  min-width: max-content;
}

code {
  overflow-wrap: anywhere;
}

/* ── 8. Scrollbars ─────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 128, 128, 0.22);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 128, 128, 0.40);
}

/* ── 10. Website Flow Safety Defaults ──────────────────────────────────── */

/* Prevent flex/grid children from blowing out widths */
:where(
  main,
  article,
  section,
  aside,
  nav,
  figure,
  .site-frame,
  .frame-grid,
  .frame-panel,
  .frame-card,
  .mode-panels,
  .mode-panel,
  .spec-grid,
  .plans-grid,
  .plan-card,
  .contact-grid,
  .gallery-overlays,
  .compare-sets,
  .spec-column
) {
  min-width: 0;
}

/* Common interactive regions should allow vertical scroll gestures */
:where(main, article, section, aside, .site-frame, .mode-panel, .plan-card) {
  touch-action: pan-y;
}

/* Safer text wrapping for long symbolic strings */
:where(
  .frame-sigil,
  .frame-card-sigil,
  .operator-chip,
  .spec-pill,
  .plan-status,
  .syntax-token,
  code,
  pre
) {
  overflow-wrap: anywhere;
}

/* ── 11. Surface-specific baseline bridges ─────────────────────────────── */

body[data-spw-surface="software"] pre {
  display: block;
  inline-size: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

body[data-spw-surface="software"] pre > code {
  display: block;
  width: max-content;
  min-width: 100%;
}

/* ── 12. Animation & Accessibility Toggles ─────────────────────────────── */

html[data-spw-animation-throttling="light"]:not([data-spw-reduce-motion="on"]) *,
html[data-spw-animation-throttling="light"]:not([data-spw-reduce-motion="on"]) *::before,
html[data-spw-animation-throttling="light"]:not([data-spw-reduce-motion="on"]) *::after {
  animation-duration: 120ms !important;
  transition-duration: 120ms !important;
}

html[data-spw-animation-throttling="heavy"]:not([data-spw-reduce-motion="on"]) *,
html[data-spw-animation-throttling="heavy"]:not([data-spw-reduce-motion="on"]) *::before,
html[data-spw-animation-throttling="heavy"]:not([data-spw-reduce-motion="on"]) *::after {
  animation-duration: 60ms !important;
  transition-duration: 60ms !important;
  animation-iteration-count: 1 !important;
}

html[data-spw-reduce-motion="on"] {
  scroll-behavior: auto;
}

html[data-spw-reduce-motion="on"] *,
html[data-spw-reduce-motion="on"] *::before,
html[data-spw-reduce-motion="on"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body {
    background-image: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}

/* /public/css/tokens/core.css */
@layer tokens {
/* ==========================================================================
   core.css
   --------------------------------------------------------------------------
   Purpose
   - Define primitive scales, semantic aliases, and runtime-facing state
     contracts for Spw surfaces.
   - Support granular expressive styling for authoring, reading, revision,
     publishing, SVG diagrams, narrative interfaces, and JS-managed semantic
     surfaces.
   - Keep climate, theme, author workflow, and component expression separable.

   Architecture
   1. Registered state properties
   2. Primitive scales
   3. Typography and manuscript rhythm
   4. Color, material, line, and depth substrate
   5. Motion and interaction grammar
   6. Operator and semantic-role colors
   7. Author workflow tokens
   8. Developmental climate interface
   9. Boonhonk / taste combinatorics
   10. Runtime density, dark mode, contrast, and reduced motion

   Token System Balance Principles
   - Primitive scales remain as few and stable as possible.
   - Semantic aliases are introduced only when they provide clear expressive or cognitive value.
   - Runtime state properties (@property) are preferred for dynamic, inspectable concerns over static magic numbers.
   - "Balance" in the token system is maintained through clear categorization, consistent naming, and separation of visual, semantic, and behavioral concerns rather than through generic numeric dials.
   - Surfaces should prefer composing from central semantic tokens (operator colors, --active-op-color, field tokens) over proliferating local *-accent tokens. Local accents are acceptable for strong route identity but should still reference central tokens as fallbacks where possible.
   - Ornament and effects layers should consume the ornament field visualization tokens and field-balance rather than re-inventing parallel state.
   ========================================================================== */


/* ==========================================================================
   1. Registered Runtime State Properties
   --------------------------------------------------------------------------
   These @property declarations define the core runtime state that drives
   much of the site's adaptive behavior (wonder, attention, collection,
   resonance, etc.).

   Cascading & Reference Logic Notes:
   - Most field-related properties use `inherits: true` so they naturally
     cascade from ancestors. This supports the diffusive attention-field
     model (see attention-field.spw).
   - A few early properties (`--charge`, `--spw-valence`, `--spw-resonance`)
     use `inherits: false` because they are frequently written directly
     onto specific elements by JS for performance or to create isolated
     interaction contexts. Consumers should treat them as local-first.
   - Token references throughout the CSS use layered fallbacks:
       var(--semantic-accent, var(--active-op-color, var(--teal)))
     This pattern provides robustness while allowing progressive override
     from data attributes, surface-specific CSS, or JS.
   - When adding new runtime state, prefer `inherits: true` unless there
     is a clear reason (performance, isolation, or explicit per-element
     control) to use `inherits: false`.
   ========================================================================== */

@property --active-op-color {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(180 72% 30%);
}

@property --charge {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Goal-relative direction: -1 avoid → 0 neutral → +1 approach */
@property --spw-valence {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Cross-context coherence: 0 isolated → 1 strongly coupled */
@property --spw-resonance {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Shared-structure vs situated-meaning stance */
@property --spw-bias {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Spatial/contextual focus */
@property --spw-attention {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Local liftedness / projection */
@property --spw-depth {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Practical leverage */
@property --spw-utility {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Match to audience taste */
@property --spw-taste-proximity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

/* Spatial / semantic demand */
@property --spw-allocation {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Semantic modulation */
@property --spw-drift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Local attention-field strength */
@property --spw-field-intensity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Distribution entropy across a page or surface */
@property --spw-field-entropy {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* How firmly a token is pinned in memory */
@property --spw-collection-strength {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --spw-debug-layer-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #888888;
}


/* ==========================================================================
   Ornament Field Visualization Tokens (canonical bridge)
   --------------------------------------------------------------------------
   These are the preferred tokens for the ornament layer to consume when
   expressing the attentional field (resonance, collection, deviation, wonder
   trail, etc.). They act as a thin, stable projection of the runtime state
   properties above so ornament.css and effects can remain decoupled from
   the full field model implementation.

   Ornament should prefer these over inventing parallel --ornament-* state
   variables where possible.
   ========================================================================== */

@property --ornament-field-intensity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --ornament-collection-mark {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --ornament-deviation-visibility {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --ornament-wonder-trail {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --ornament-resonance {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Field balance: equilibrium between resonance (outward pull) and collection/ground (inward stability).
   Useful for ornament and effects to express "calm vs charged" without hard-coding numbers.

   This token is designed to be set by JS (wonder-memory, attention-architecture, etc.)
   and read by CSS. Because it inherits, a value set on a parent can naturally
   influence descendant ornament without per-element JS writes. */
@property --field-balance {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

/* Runtime module layer influence tokens — driven by data-spw-active-layers on root.
   These allow CSS to react to which parts of the JS runtime are currently live,
   supporting smoother transitions, attentional modulation, and "computational"
   awareness of module cost / presence without per-module selectors everywhere. */
@property --spw-runtime-enhancement-intensity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.6;
}
@property --spw-runtime-feature-intensity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.4;
}

/* Cauldron / spell candidate differential visibility tokens (for visual mode toggle).
   Driven by data-spw-cauldron-candidate-visibility on root (subtle|balanced|prominent).
   Allows CSS to make cauldron ingredients vs. primed spell candidates (living terms, charged braces, etc.)
   stand out differently without hard-coded colors. Cascade safe in tokens layer. */
@property --cauldron-candidate-wash {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --spell-candidate-wash {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --cauldron-highlight {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --region-jump-target {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --spw-runtime-layer-count {
  syntax: "<integer>";
  inherits: true;
  initial-value: 2;
}

/* ==========================================================================
   2. Primitive Scales
   ========================================================================== */

:root {
  /* -- Debug / Inspection -- */
  --spw-debug-layer-owner: "tokens";
  --spw-debug-layer-color: #888888;

  /* -- Spacing Primitives -- */
  --space-4xs: 0.0625rem;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* -- Shared Layout Rhythm -- */
  --spw-flow-space: 1rem;
  --spw-heading-flow-space-multiplier: 1.5;

  --spw-component-gap: 0.84rem;
  --spw-component-gap-tight: 0.48rem;
  --spw-component-gap-loose: 1.08rem;
  --spw-component-gap-roomy: 1.42rem;

  --spw-component-pad: 0.84rem;
  --spw-component-pad-tight: 0.65rem;
  --spw-component-pad-loose: 1.02rem;
  --spw-component-pad-roomy: 1.28rem;

  --spw-surface-gap: 0.84rem;
  --spw-surface-padding: clamp(1rem, 2.25vw, 1.55rem);
  --spw-slot-gap: clamp(0.54rem, 1.4vw, 0.8rem);
  --spw-slot-gap-tight: 0.45rem 0.6rem;
  --spw-hero-gap: clamp(1rem, 1.8vw, 1.35rem);

  --spw-shell-row-gap: 0.45rem;
  --spw-shell-trace-gap: 0.7rem;
  --spw-shell-surface-padding-block: 0.42rem;
  --spw-shell-surface-padding-inline: 0.52rem;
  --spw-shell-link-gap: 0.38rem;

  --spw-control-gap: 0.28rem;
  --spw-control-min-height: 2.15rem;
  --spw-control-padding-block: 0.26rem;
  --spw-control-padding-inline: 0.68rem;
  --spw-control-line-height: 1.04;
  --spw-control-radius: var(--shape-control, 0.78rem);
  --spw-control-transition-fast: var(--duration-snap, 90ms) var(--ease-mechanical, ease);
  --spw-control-transition-base: var(--duration-fast, 140ms) var(--ease-mechanical, ease);

  --spw-frame-sigil-padding-inline-start: 0.52rem;
  --spw-frame-sigil-line-height: 1.04;

  /* -- Semantic Spacing Aliases -- */
  --gap-inline-micro: var(--space-3xs);
  --gap-inline-tight: var(--space-2xs);
  --gap-inline-flow: var(--space-xs);
  --gap-inline-breath: var(--space-sm);

  --gap-block-tight: var(--space-xs);
  --gap-block-stack: var(--space-sm);
  --gap-block-flow: var(--space-lg);
  --gap-block-drift: var(--space-xl);

  --gap-surface: var(--spw-surface-gap);
  --gap-panel: clamp(0.65rem, 1.2vw, 0.9rem);
  --gap-cluster: clamp(0.35rem, 1vw, 0.6rem);

  --inset-element: var(--space-2xs) var(--space-xs);
  --inset-component: var(--spw-component-pad) calc(var(--spw-component-pad) + 0.12rem);
  --inset-surface: var(--spw-surface-padding);
  --inset-overlay: clamp(0.55rem, 2vw, 1rem);
  --inset-console: clamp(0.75rem, 2vw, 1rem);
  --inset-panel: var(--spw-component-pad-tight);
  --inset-ritual: clamp(1.2rem, 2.4vw, 1.8rem);

  /* -- Spatial Anchors -- */
  --header-height: 4rem;
  --shell-header-height: var(--header-height);
  --page-width: 72rem;
  --page-width-reading: 56rem;
  --page-width-wide: 84rem;
  --page-width-atlas: 104rem;
  --page-gutter: clamp(0.75rem, 2.5vw, 1.5rem);

  --touch-target-min: 2.75rem;
  --touch-target-compact: 2.15rem;

  /* -- Attention Architecture -- */
  --attention-rail-width: clamp(14rem, 18vw, 20rem);
  --attention-rail-gap: clamp(1rem, 2vw, 1.5rem);
  --attention-handle-offset: clamp(0.55rem, 2vw, 1rem);
  --attention-field-radius: 0.4;
  --attention-field-decay: 0.65;
  --attention-echo-duration: 480ms;

  /* -- Grid Thresholds -- */
  --grid-min-compact: 12rem;
  --grid-min-card: 15rem;
  --grid-min-panel: 17rem;
  --grid-min-feature: 19rem;
  --grid-min-surface: 22rem;
  --grid-min-reading: 28rem;

  /* -- Shape Primitives -- */
  --radius-2xs: 3px;
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* -- Semantic Shape Aliases -- */
  --shape-element: var(--radius-xs);
  --shape-component: var(--radius-sm);
  --shape-control: clamp(0.54rem, 0.5rem + 0.14vw, 0.68rem);
  --shape-surface: var(--radius-md);
  --shape-floating: var(--radius-lg);
  --shape-cinematic: var(--radius-xl);
}


/* ==========================================================================
   3. Typography and Manuscript Rhythm
   ========================================================================== */

:root {
  --font-family-sans: Inter, "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-family-display: Inter, "Segoe UI", system-ui, sans-serif;
  --font-family-manuscript: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --text-size-2xs: clamp(0.69rem, 0.67rem + 0.05vw, 0.74rem);
  --text-size-xs: clamp(0.76rem, 0.73rem + 0.08vw, 0.82rem);
  --text-size-sm: clamp(0.88rem, 0.84rem + 0.1vw, 0.95rem);
  --text-size-base: clamp(1rem, 0.98rem + 0.12vw, 1.06rem);
  --text-size-lg: clamp(1.1rem, 1.04rem + 0.2vw, 1.22rem);
  --text-size-xl: clamp(1.22rem, 1.12rem + 0.36vw, 1.42rem);
  --text-size-2xl: clamp(1.46rem, 1.28rem + 0.7vw, 1.86rem);
  --text-size-3xl: clamp(1.82rem, 1.52rem + 1.1vw, 2.45rem);

  --text-size-chip: clamp(0.78rem, 0.75rem + 0.08vw, 0.86rem);
  --text-size-nav: clamp(0.82rem, 0.79rem + 0.12vw, 0.92rem);
  --text-size-label: clamp(0.74rem, 0.71rem + 0.08vw, 0.81rem);

  --site-root-font-size: 100%;
  --site-line-height: 1.68;
  --site-line-height-tight: 1.35;
  --site-line-height-loose: 1.82;

  --site-mono-font: var(--font-family-mono);
  --site-sans-font: var(--font-family-sans);
  --site-display-font: var(--font-family-display);

  --measure-compact: 32ch;
  --measure-card: 42ch;
  --measure-panel: 52ch;
  --measure-reading: 68ch;
  --measure-code: 84ch;
  --measure-maximal: 96ch;

  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.04em;
  --tracking-spec: 0.06em;

  /* Author-app manuscript layer */
  --manuscript-font: var(--font-family-manuscript);
  --manuscript-font-size: clamp(1.04rem, 1rem + 0.18vw, 1.18rem);
  --manuscript-line-height: 1.74;
  --manuscript-measure: 72ch;
  --manuscript-paragraph-gap: 0.9em;
  --manuscript-margin-width: clamp(2.5rem, 8vw, 7rem);
  --manuscript-comment-width: clamp(14rem, 22vw, 22rem);
  --manuscript-rule-opacity: 0.16;

  /* Semantic metadata */
  --semantic-metadata-font-size: 0.58rem;
  --semantic-metadata-tracking: 0.04em;
  --semantic-metadata-ink: color-mix(in srgb, var(--ink) 82%, var(--teal, #008080) 18%);
  --semantic-metadata-line: color-mix(in srgb, var(--line-strong) 42%, transparent);
  --semantic-metadata-bg: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  --semantic-metadata-bg-strong: color-mix(in srgb, var(--surface-matte) 96%, transparent);
  --semantic-metadata-shadow: 0 6px 16px rgba(14, 18, 20, 0.06);

  /* Pretext formatting */
  --pretext-width-floor: 160px;
  --pretext-phone-scale: 0.72;
  --pretext-tablet-scale: 1;
  --pretext-poster-scale: 1.38;

  --objective-brace-width: 28px;
  --subjective-brace-width: 28px;
  --brace-strip-width: var(--objective-brace-width);
  --right-strip-width: var(--subjective-brace-width);

  /* Typographical Aerodynamics Study (variable flow + encouraged pausing)
     - "Aerodynamics" here means the felt resistance, lift, and breath of reading
       as content, climate, density, motif, and trope state change.
     - Goal: variable flow that feels alive and cathartic, with deliberate "pauses"
       (micro-breaths, emphasis shifts, rhythm changes) to support active wonder,
       taste development, and genre resonance rather than relentless forward motion.
     - Content-based: denser measures/SVGs/operators increase "drag" (tighter tracking,
       more breath space); lighter prose increases lift (looser, faster flow).
     - Climate/mode sensitive: weave/rehearse climates favor more pausing breath;
       draft vs publish author modes shift overall aerodynamic character.
     - Performance: all via tokens + data attrs; no JS-driven per-element reflow.
     - Future: expose via query (?typography-flow=variable) and trope 'typography-flow'. */
  --text-aerodynamic-base: 1;          /* 0.7 compressed → 1.3 lifted */
  --text-pause-breath: 0.25rem;        /* micro space that encourages micro-pauses */
  --text-flow-variable: 1;             /* multiplier driven by content density + climate */
  --text-rhythm-drag: 0;               /* positive when content is dense (measures, code, SVGs) */
}


/* ==========================================================================
   4. Color, Material, Line, and Depth Substrate
   ========================================================================== */

:root {
  --charcoal-rgb: 14, 18, 20;
  --charcoal-light: rgb(26, 32, 35);
  --charcoal-dark: rgb(6, 8, 10);

  /* Page substrate */
  --bg: hsl(42 62% 84%);
  --bg-deep: hsl(43 44% 76%);
  --bg-field: hsl(42 38% 94%);
  --bg-ritual: hsl(40 48% 89%);

  /* Manuscript substrate */
  --paper-hue: 42;
  --paper-sat: 38%;
  --paper-light: 94%;
  --paper: hsl(var(--paper-hue) var(--paper-sat) var(--paper-light));
  --paper-warm: hsl(39 50% 92%);
  --paper-cool: hsl(210 24% 94%);
  --paper-ink: rgba(var(--charcoal-rgb), 0.92);
  --paper-rule: rgba(var(--charcoal-rgb), 0.12);

  /* Surfaces */
  --surface: rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --surface-soft: rgba(255, 255, 255, 0.58);
  --surface-code: rgba(18, 23, 27, 0.96);
  --surface-matte: rgba(247, 244, 238, 0.93);
  --surface-matte-strong: rgba(252, 249, 243, 0.98);
  --surface-contrast: rgba(255, 253, 248, 0.98);
  --surface-contrast-soft: rgba(247, 242, 232, 0.96);
  --surface-panel: rgba(255, 255, 255, 0.82);
  --surface-panel-strong: rgba(255, 255, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.22);
  --surface-shadowed: rgba(255, 255, 255, 0.68);

  /* Ink */
  --ink-strong: rgba(var(--charcoal-rgb), 0.96);
  --ink: rgba(var(--charcoal-rgb), 0.92);
  --ink-soft: rgba(var(--charcoal-rgb), 0.8);
  --ink-mid: rgba(var(--charcoal-rgb), 0.68);
  --ink-faint: rgba(var(--charcoal-rgb), 0.42);
  --ink-speculative: rgba(var(--charcoal-rgb), 0.24);
  --ink-disabled: rgba(var(--charcoal-rgb), 0.24);
  --ink-on-matte: rgba(var(--charcoal-rgb), 0.96);
  --ink-on-matte-soft: rgba(var(--charcoal-rgb), 0.78);
  --ink-on-matte-strong: rgba(var(--charcoal-rgb), 0.98);
  --ink-on-contrast: rgba(var(--charcoal-rgb), 0.98);
  --ink-on-contrast-soft: rgba(var(--charcoal-rgb), 0.86);

  /* Semantic surface text contrast families (improved utility)
     - Prefer these over raw --ink when the surface material is known.
     - Matte variants are the "clear opaque contrast safeguard" for dense text,
       mobile cards, forms, inspection readouts, and high-legibility needs.
     - Clear/strong variants ensure excellent contrast on matte under theme packs,
       dark mode, and high-contrast; fall back gracefully.
     - Routes and material.css should alias to these rather than redeclaring
       parallel --*-ink families where possible. */
  --text-on-matte: var(--ink-on-matte);
  --text-on-matte-soft: var(--ink-on-matte-soft);
  --text-on-matte-strong: var(--ink-on-matte-strong);
  --text-on-contrast: var(--ink-on-contrast);
  --text-on-contrast-soft: var(--ink-on-contrast-soft);

  /* Material surface aliases (redistributed to tokens for earlier cascade value + broad availability).
     These provide a stable "tunable material surface" API: component authors and effects can use
     --material-ink / --material-surface / --material-text-on-* without depending on effects layer order.
     Supports the site's role as a live-tunable narrative material for cross-disciplinary work
     (engineers + storytellers dialing glass vs matte "feel", density, physics-reason for production tone).
     Matte variants = clear opaque contrast safeguard (dense text, forms, inspection).
     See surface_material_contract, page_architecture_vocabulary, and baseMetamaterial/physicsReason runtime. */
  --material-ink: var(--ink, #161c1d);
  --material-ink-soft: var(--ink-soft, rgba(14, 18, 20, 0.68));
  --material-ink-strong: var(--ink-strong, #0e1214);
  --material-ink-matte: var(--ink-on-matte, var(--ink, #161c1d));
  --material-ink-matte-soft: var(--ink-on-matte-soft, var(--ink-soft, rgba(14, 18, 20, 0.74)));
  --material-ink-matte-strong: var(--ink-on-matte-strong, var(--ink-strong, #0e1214));
  --material-ink-contrast: var(--ink-on-contrast, var(--ink-strong, #0e1214));
  --material-surface: var(--surface, rgba(255, 255, 255, 0.62));
  --material-surface-strong: var(--surface-strong, rgba(255, 255, 255, 0.78));
  --material-surface-soft: var(--surface-soft, rgba(255, 255, 255, 0.44));
  --material-surface-matte: var(--surface-matte, rgba(247, 244, 238, 0.94));
  --material-surface-matte-strong: var(--surface-matte-strong, rgba(252, 249, 243, 0.98));
  --material-surface-contrast: var(--surface-contrast, rgba(255, 253, 248, 0.98));
  --material-text-on-matte: var(--text-on-matte, var(--ink-on-matte));
  --material-text-on-matte-strong: var(--text-on-matte-strong, var(--ink-on-matte-strong));
  --material-line: var(--line, rgba(14, 18, 20, 0.14));
  --material-line-strong: var(--line-strong, rgba(0, 128, 128, 0.34));
  --material-shadow-rest: var(--shadow-base, 0 4px 12px rgba(0, 0, 0, 0.06));
  --material-shadow-lift: var(--shadow-active, 0 8px 28px rgba(0, 0, 0, 0.10));

  /* Lines */
  --line-hair: 0.5px;
  --line-thin: 1px;
  --line-mid: 1.5px;
  --line-thick: 2.5px;
  --line-heavy: 3px;

  --line: rgba(var(--charcoal-rgb), 0.14);
  --line-strong: rgba(0, 128, 128, 0.34);
  --line-matte: rgba(var(--charcoal-rgb), 0.09);
  --line-quiet: rgba(var(--charcoal-rgb), 0.07);

  /* SVG structural helpers */
  --spw-svg-stroke-scale: 1;
  --spw-svg-flow-dash: 5;
  --spw-svg-flow-gap: 9;
  --spw-svg-label-spacing: 0.04em;

  /* Enhanced theme depth for project development + regional screenshots.
     Project motifs can tune these for local personality while staying within the site's artistic composability.
     Use with data-spw-svg-semantic="project-motif" and responsive="project" for unique capture value. */
  --spw-svg-project-regional-accent: color-mix(in oklab, var(--active-op-color) 70%, var(--op-topic-color) 30%);

  /* Shell chrome */
  --spw-shell-chrome-accent: color-mix(in oklab, var(--teal, #008080) 68%, var(--ink-strong) 32%);
  --spw-shell-chrome-line: color-mix(in oklab, var(--spw-shell-chrome-accent) 18%, var(--line) 82%);
  --spw-shell-chrome-ink: color-mix(in oklab, var(--ink) 84%, var(--spw-shell-chrome-accent) 16%);
  --spw-shell-chrome-fill: color-mix(in oklab, var(--surface-strong) 93%, var(--spw-shell-chrome-accent) 7%);
  --spw-shell-chrome-fill-strong: color-mix(in oklab, var(--surface-strong) 88%, var(--spw-shell-chrome-accent) 12%);

  --focus-ring: 0 0 0 3px rgba(0, 128, 128, 0.18);

  /* Material properties */
  --material-blur: 6px;
  --material-saturation: 1.02;
  --material-specular: 0.22;
  --material-transmission: 0.08;
  --material-shadow-strength: 0.08;
  --material-glow-strength: 0.08;

  --phase-paper-weight: 1;
  --phase-glass-weight: 0;
  --phase-metal-weight: 0;
  --phase-density: 0.3;
  --phase-ink-weight: 0.4;
  --phase-fiber-weight: 0.6;

  /* Depth */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-active: 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-projecting: 0 14px 34px rgba(0, 0, 0, 0.14);

  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
  0 2px 8px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 4px 18px rgba(0, 0, 0, 0.09),
  0 2px 6px rgba(0, 0, 0, 0.04);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.52);

  --spw-depth-card-shadow: var(--card-shadow);
  --spw-depth-card-shadow-active: var(--card-highlight), var(--card-shadow-hover);
  --spw-depth-frame-shadow: var(--card-highlight), var(--card-shadow);
  --spw-depth-frame-shadow-active: var(--card-highlight), var(--card-shadow-hover);

  --floating-bg: var(--surface-strong);
  --floating-bg-warm: rgba(255, 251, 242, 0.92);
  --floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
  0 2px 8px rgba(0, 0, 0, 0.06);
  --floating-shadow-side: 2px 0 20px rgba(0, 0, 0, 0.09);

  --spw-depth-floating-shadow: var(--floating-shadow);
  --spw-depth-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  --spw-depth-shell-shadow-lifted: 0 6px 18px rgba(0, 0, 0, 0.06);
  --spw-depth-shell-shadow-deep: 0 10px 28px rgba(0, 0, 0, 0.08);

  --projection-lift-xs: 1px;
  --projection-lift-sm: 2px;
  --projection-lift-md: 4px;
  --projection-lift-lg: 8px;

  --projection-scale-rest: 1;
  --projection-scale-focus: 1.01;
  --projection-scale-projecting: 1.03;

  --glow-soft: 0 0 0 1px color-mix(in srgb, var(--active-op-color) 12%, transparent),
  0 0 12px color-mix(in srgb, var(--active-op-color) 10%, transparent);
  --glow-strong: 0 0 0 1px color-mix(in srgb, var(--active-op-color) 18%, transparent),
  0 0 22px color-mix(in srgb, var(--active-op-color) 14%, transparent);

  /* Layers */
  --layer-ground: 1;
  --layer-substrate: 0;
  --layer-content: 1;
  --layer-overlay: 2;
  --layer-surface: 20;
  --layer-floating: 100;
  --layer-docked: 900;
  --layer-header: 1000;
  --layer-priority: 2000;
  --layer-popover: calc(var(--layer-priority) + 8);
  --layer-toast: calc(var(--layer-priority) + 18);
  --layer-drawer: calc(var(--layer-priority) + 20);
  --layer-modal: calc(var(--layer-priority) + 30);

  /* Canonical z-index aliases for runtime-created chrome. */
  --z-ground: var(--layer-ground);
  --z-substrate: var(--layer-substrate);
  --z-content: var(--layer-content);
  --z-overlay: var(--layer-overlay);
  --z-surface: var(--layer-surface);
  --z-floating: var(--layer-floating);
  --z-docked: var(--layer-docked);
  --z-header: var(--layer-header);
  --z-priority: var(--layer-priority);
  --z-popover: var(--layer-popover);
  --z-toast: var(--layer-toast);
  --z-drawer: var(--layer-drawer);
  --z-modal: var(--layer-modal);

  /* Local surface stack aliases */
  --spw-local-layer-substrate: var(--layer-substrate);
  --spw-local-layer-content: var(--layer-content);
  --spw-local-layer-overlay: var(--layer-overlay);

  --depth-ambient: 1;
  --depth-settled: 10;
  --depth-active: 50;
  --depth-projected: 100;
  --depth-cinematic: 140;

  /* Cross-layer material aliases */
  --spw-surface-fill-rest: var(--surface);
  --spw-surface-fill-strong: var(--surface-strong);
  --spw-surface-fill-soft: var(--surface-soft);
  --spw-surface-fill-matte: var(--surface-matte);
  --spw-surface-fill-matte-strong: var(--surface-matte-strong);
  --spw-surface-fill-contrast: var(--surface-contrast);
  --spw-surface-fill-contrast-soft: var(--surface-contrast-soft);
  --spw-surface-ink-matte: var(--ink-on-matte);
  --spw-surface-ink-matte-soft: var(--ink-on-matte-soft);
  --spw-surface-ink-matte-strong: var(--ink-on-matte-strong);
  --spw-surface-ink-contrast: var(--ink-on-contrast);
  --spw-surface-ink-contrast-soft: var(--ink-on-contrast-soft);
  --spw-surface-line-rest: var(--line);
  --spw-surface-line-active: var(--line-strong);
  --spw-surface-shadow-rest: var(--shadow-base);
  --spw-surface-shadow-raised: var(--shadow-active);
  --spw-surface-shadow-floating: var(--floating-shadow);
}

/* ==========================================================================
   Preflight + runtime load timing contract (page load architecture)
   --------------------------------------------------------------------------
   public/js/runtime/prepaint-state.js (inlined via template into <head> before
   the stylesheet <link>) writes critical data-* and style props synchronously
   on script parse. This guarantees first paint sees stable:
     colorMode, themePack, componentDensity, semanticDensity, enhancementLevel,
     pedagogicalFlavor + componentMotif (for pigment-context-boost + motif rules),
     font metrics, grain, headerOpacity, etc.
   data-spwSettingsPreflight="ready" and data-spwRuntimeStage="preflight" are
   observable hooks.
   Full applySiteSettings (kernel/site-settings, mounted early in bootSite after
   DOMContentLoaded but before interactive state) normalizes, adds events/bus,
   more datasets, and re-asserts (no visual change for preflight attrs).
   CSS rules in tokens/ that depend on these must live in the tokens layer (as they
   do) so they participate in initial cascade before shell/components.
   This improves event timing (no late motif/flavor flip after paint) and makes
   the load stages queryable for architecture, audit, and progressive CSS.
   See also: site.js bootSite (early apply + marks), runtime-helpers (policy),
   and performance marks (spw:preflight-complete, spw:settings-early-apply-complete).
*/


/* ==========================================================================
   5. Motion and Interaction Grammar
   ========================================================================== */

:root {
  --duration-instant: 50ms;
  --duration-snap: 90ms;

  /* Modular interaction patterns (touch/drag/snap) tunable via component motifs for mood.
     Base behavior (pointer capture, snap, drag feedback) is in JS (brace-gestures, svg-tunability, image-metaphysics).
     CSS/ornament provides the visual "mood" personality: crisp vs soft, etc.
     Usage: <div data-spw-interaction="touch-drag-snap" data-spw-component-motif="lab">...</div>
     Inline labels inside can be color swatches or discrete text via data-spw-label-style. */
  --interaction-drag-feedback: 0.03; /* multiplier for visual lift during drag */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-deliberate: 360ms;
  --duration-slow: 480ms;
  --duration-ceremonial: 720ms;

  --ease-mechanical: cubic-bezier(0.32, 0, 0, 1);
  --ease-precise: cubic-bezier(0.20, 0, 0.12, 1);
  --ease-joint: cubic-bezier(0.28, 0.02, 0.12, 0.98);
  --ease-release: cubic-bezier(0.18, 0.72, 0.18, 1);
  --ease-paper: cubic-bezier(0.40, 0, 0.20, 1);
  --ease-chassis: cubic-bezier(0.22, 0, 0, 1);
  --ease-settle: cubic-bezier(0.20, 0.80, 0.20, 1);
  --ease-reveal: cubic-bezier(0, 0, 0, 1);
  --ease-pivot: var(--ease-paper);
  --ease-orbit: cubic-bezier(0.16, 0.84, 0.22, 1);

  --touch-acknowledge: 90ms;
  --touch-commit: 180ms;
  --touch-emit: 360ms;
  --touch-recover: 520ms;

  /* Shared settling field: small offsets/opacities that page-state and components can spend together. */
  --spw-micro-lift-distance: 1px;
  --spw-micro-press-scale: 0.998;
  /* Machined chassis: century-scale handles meant to be inspected, not merely clicked. */
  --spw-chassis-highlight: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
  --spw-chassis-shadow: inset 0 -1px 0 color-mix(in srgb, var(--shadow-color, #111) 7%, transparent);
  --spw-control-hover-lift: -1px;
  --spw-control-press-depth: 1px;
  --spw-interaction-acknowledge: var(--touch-acknowledge, 90ms) var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1));
  --spw-interaction-commit: var(--touch-commit, 180ms) var(--ease-mechanical, cubic-bezier(0.32, 0, 0, 1));
  --spw-settle-offset-start: 2px;
  --spw-settle-offset-mid: 1px;
  --spw-settle-offset-end: 0.25px;
  --spw-settle-opacity-start: 0.96;
  --spw-settle-opacity-mid: 0.985;
  --spw-settle-opacity-end: 0.995;
  --spw-settle-stagger-step: 18ms;
  --spw-layout-measure-settle: 220ms var(--ease-settle);

  --crescendo-structural: 0ms;
  --crescendo-compositional: 32ms;
  --crescendo-component: 64ms;
  --crescendo-surface: 100ms;
  --crescendo-ornament: 160ms;
  --crescendo-grain: 200ms;
  --crescendo-cinematic: 260ms;

  --brace-settle-duration: var(--duration-base);
  --brace-settle-ease: var(--ease-mechanical);
  --pivot-arc-duration: var(--duration-deliberate);
  --pivot-arc-ease: var(--ease-chassis);
  --threshold-cross-duration: var(--duration-base);
  --threshold-cross-ease: var(--ease-paper);
  --charge-release-duration: var(--duration-fast);
  --charge-release-ease: var(--ease-mechanical);

  --spw-motion-quick: var(--duration-fast) var(--ease-mechanical);
  --spw-motion-settle: var(--duration-base) var(--ease-settle);
  --spw-motion-expressive: var(--duration-deliberate) var(--ease-paper);

  /* Page/region timing aliases. Keep JS-readable values concrete. */
  --spw-page-arrival-step-1-delay: 0ms;
  --spw-page-arrival-step-2-delay: 64ms;
  --spw-page-arrival-step-3-delay: 148ms;
  --spw-page-arrival-duration: 280ms;
  --spw-page-return-duration: 180ms;
  --spw-region-profile-refresh-duration: 220ms;
  --spw-region-profile-intensity: 1;
  --spw-layout-cascade-hold: 0;
  --spw-layout-shift-guard: 1px;
  --spw-region-outline-reserve: 0px;
  --spw-component-arrival-transition: 140ms var(--ease-settle);
  --spw-component-settle-transition: 220ms var(--ease-settle);

  --utility-shift-duration: var(--duration-deliberate);
  --utility-shift-ease: var(--ease-settle);
  --taste-drift-duration: var(--duration-base);
  --taste-drift-ease: var(--ease-joint);
  --projection-orbit-duration: var(--duration-ceremonial);
  --projection-orbit-ease: var(--ease-orbit);
}


/* ==========================================================================
   6. Operator and Semantic-Role Colors
   ========================================================================== */

:root {
  --teal: hsl(180 72% 30%);
  --teal-deep: hsl(180 70% 18%);
  --teal-soft: hsla(180, 72%, 30%, 0.7);
  --connector-color: hsla(180, 72%, 30%, 0.32);

  --amber: hsl(42 78% 48%);
  --amber-soft: hsla(42, 78%, 48%, 0.68);
  --pink: hsl(342 48% 46%);
  --pink-soft: hsla(342, 48%, 46%, 0.68);
  --violet: hsl(268 36% 42%);
  --violet-soft: hsla(268, 36%, 42%, 0.68);

  --resonance-accent: hsl(188 54% 45%);
  --valence-pos: hsl(160 45% 34%);
  --valence-neg: hsl(8 54% 42%);

  /* Granular Spectral / Pigment Families
     Stable, theme-agnostic reference colors for art direction, SVG,
     textural backgrounds, and the Spectral Workshop on /design/palettes/.
     These are the single source of truth; the palettes page and catalog
     now reference them instead of magic strings. */
  --pigment-teal-mineral: hsl(182 58% 30%);
  --pigment-teal-electric: hsl(186 88% 38%);
  --pigment-amber-resin: hsl(38 82% 50%);
  --pigment-copper-oxide: hsl(22 58% 40%);
  --pigment-violet-ink: hsl(268 48% 36%); /* tiny sat+depth bump for better math resonance distinction and swatch pop (low-attachment original) */
  /* Balanced for motif/lighting composability: probe color in curriculum or lab motifs under different theme packs. */
  --pigment-rose-dust: hsl(342 44% 46%);
  --pigment-clay-red: hsl(10 52% 42%);
  --pigment-brass-warm: hsl(40 58% 45%); /* slight warm/craft lean for better distinction in craft-led mode (low-attachment original) */
  --pigment-paper-cream: hsl(42 44% 94%);
  --pigment-charcoal-fiber: hsl(205 16% 12%);
  --pigment-moss-soft: hsl(102 26% 34%);
  --pigment-lapis-soft: hsl(214 58% 42%);

  /* Context-aware pigment modulation tokens.
     These allow artistically selected palettes/theme packs to compose with
     lighting conditions and component motifs (curriculum, lab, artifact, etc.)
     without per-motif token explosion. Used by ornament, tuning, and operator
     surfaces for readable, balanced color across contexts. */
  --pigment-context-boost: 1;        /* 0.8 subdued motif → 1.2 emphatic motif */
  --pigment-lighting-guard: var(--spw-lighting-guard, 0.34);
  --pigment-motif-bias: 0;           /* set via data-spw-component-motif for evolutionary semantic tuning */

  --active-op-color: var(--teal);

  /* Easy artistic tuning via single data attr on body or container.
     Combines with data-spw-color-mode + data-spw-theme-pack + data-spw-palette-resonance
     for logical, learnable composability. Falls back gracefully. */
  html[data-spw-component-motif="curriculum"] {
    --pigment-context-boost: 1.15;
    --active-op-color: var(--pigment-teal-electric);
  }
  html[data-spw-component-motif="lab"] {
    --pigment-context-boost: 1.08;
    --active-op-color: var(--pigment-lapis-soft);
  }
  html[data-spw-component-motif="artifact"] {
    --pigment-context-boost: 0.95;
    --active-op-color: var(--pigment-brass-warm);
  }
  /* Minimalist motif for playful experimentation with material properties (glass/matte depth, ink strength, no ornament).
     Use on design hub or any surface: data-spw-component-motif="minimal" + enhancement-level=minimal + density=minimal
     for pure tunable material play without visual noise. Ties to prior material contract and physics-reason for storytellers/engineers.
     Low boost keeps focus on surface/contrast tokens. */
  html[data-spw-component-motif="minimal"] {
    --pigment-context-boost: 0.7;
    --active-op-color: var(--ink-mid, rgba(var(--charcoal-rgb), 0.68));
  }
  --active-op-border: color-mix(in srgb, var(--active-op-color) 34%, transparent);
  --active-op-bg-soft: color-mix(in srgb, var(--active-op-color) 7%, transparent);

  --objective-brace-color: hsl(188 46% 31%);
  --subjective-brace-color: hsl(342 38% 35%);
  --objective-brace-wash: hsla(188, 46%, 31%, 0.1);
  --subjective-brace-wash: hsla(342, 38%, 35%, 0.08);
  --boon-glow: var(--objective-brace-wash);
  --bane-glow: var(--subjective-brace-wash);

  --op-frame-color: var(--teal);
  --op-frame-border: color-mix(in srgb, var(--op-frame-color) 32%, transparent);
  --op-frame-bg-soft: color-mix(in srgb, var(--op-frame-color) 7%, transparent);

  --op-topic-color: hsl(192 48% 32%);
  --op-topic-border: hsla(192, 48%, 32%, 0.24);
  --op-topic-bg-soft: rgba(228, 246, 252, 0.72);

  --op-object-color: hsl(36 62% 35%);
  --op-object-border: hsla(36, 62%, 35%, 0.22);
  --op-object-bg-soft: rgba(255, 248, 235, 0.72);

  --op-ref-color: hsl(210 48% 38%);
  --op-ref-border: hsla(210, 48%, 38%, 0.2);
  --op-ref-bg-soft: rgba(235, 244, 255, 0.72);

  --op-probe-color: hsl(268 36% 42%);
  --op-probe-border: hsla(268, 36%, 42%, 0.2);
  --op-probe-bg-soft: rgba(245, 238, 255, 0.72);
  /* Balanced for lighting + motif composability (e.g., curriculum or lab motifs under ritual-vellum or electric-studio).
     Uses pigment context for evolutionary semantic readability across conditions. */
  --op-probe-color-balanced: color-mix(in srgb, var(--pigment-violet-ink) calc(100% * var(--pigment-context-boost, 1)), var(--op-probe-color));

  --op-action-color: hsl(180 64% 25%);
  --op-action-border: hsla(180, 64%, 25%, 0.35);
  --op-action-bg-soft: rgba(230, 248, 248, 0.72);

  --op-layer-color: var(--ink-soft);
  --op-layer-border: rgba(14, 18, 20, 0.14);
  --op-layer-bg-soft: rgba(255, 255, 255, 0.5);

  --op-baseline-color: hsl(42 18% 30%);
  --op-baseline-border: rgba(14, 18, 20, 0.16);
  --op-baseline-bg-soft: rgba(255, 255, 255, 0.58);

  --op-pragma-color: hsl(0 34% 38%);
  --op-pragma-border: hsla(0, 34%, 38%, 0.18);
  --op-pragma-bg-soft: rgba(255, 240, 240, 0.65);

  --op-stream-color: hsl(160 44% 32%);
  --op-stream-border: hsla(160, 44%, 32%, 0.22);
  --op-stream-bg-soft: rgba(231, 249, 242, 0.68);

  --op-merge-color: hsl(188 42% 34%);
  --op-merge-border: hsla(188, 42%, 34%, 0.22);
  --op-merge-bg-soft: rgba(232, 247, 250, 0.68);

  --op-binding-color: hsl(24 48% 34%);
  --op-binding-border: hsla(24, 48%, 34%, 0.22);
  --op-binding-bg-soft: rgba(255, 242, 232, 0.68);

  --op-meta-color: hsl(220 34% 36%);
  --op-meta-border: hsla(220, 34%, 36%, 0.2);
  --op-meta-bg-soft: rgba(236, 241, 255, 0.68);

  /* Recommended semantic accent for surfaces that want a primary accent
     without creating yet another local token. Falls back to the active
     operator color but can be tuned per surface via data attributes or
     the ornament field model.

     Reference logic: semantic → active operator → hard teal fallback.
     This three-layer fallback is intentional for maximum resilience. */
  --semantic-accent: var(--active-op-color, var(--teal));

  /* Secondary semantic accent — provides a clear second level of visual
     weight within the same semantic system. Useful for contrast within
     cards, sections, or when a surface needs two related but distinct
     accent voices. */
  --semantic-accent-secondary: var(--op-topic-color, color-mix(in srgb, var(--semantic-accent) 75%, var(--ink-soft)));

  /* Subtle semantic accent — low-salience version for borders, faint
     highlights, or background accents. Helps maintain visual hierarchy
     without competing with the primary semantic accent. */
  --semantic-accent-subtle: color-mix(in srgb, var(--semantic-accent) 18%, var(--line, transparent));

  /* Emphasis semantic accent — higher salience version for drawing
     attention within a semantic context (e.g., active states, key
     calls to action, or highlighted content). */
  --semantic-accent-emphasis: var(--op-action-color, color-mix(in srgb, var(--semantic-accent) 85%, var(--ink-strong)));

  /* Surface-aware semantic accents (utility for clear contrast on matte)
     These allow accents that remain legible on the "clear opaque" matte
     surfaces without local re-mixing. Material and route layers can fall
     back to these. */
  --semantic-accent-on-matte: color-mix(in srgb, var(--semantic-accent) 92%, var(--ink-on-matte) 8%);
  --semantic-accent-on-matte-strong: color-mix(in srgb, var(--semantic-accent) 82%, var(--ink-on-matte-strong) 18%);

  --op-normalize-color: hsl(95 28% 34%);
  --op-normalize-border: hsla(95, 28%, 34%, 0.2);
  --op-normalize-bg-soft: rgba(239, 248, 230, 0.68);

  --op-surface-color: hsl(180 52% 30%);
  --op-surface-border: hsla(180, 52%, 30%, 0.24);
  --op-surface-bg-soft: rgba(230, 248, 248, 0.6);

  /* Canonical Spw sigil aliases. Older component names remain as CSS
     compatibility handles while public semantics use the learnable map. */
  --op-potential-color: var(--op-ref-color);
  --op-potential-border: var(--op-ref-border);
  --op-potential-bg-soft: var(--op-ref-bg-soft);
  --op-vibration-color: var(--op-frame-color);
  --op-vibration-border: var(--op-frame-border);
  --op-vibration-bg-soft: var(--op-frame-bg-soft);
  --op-ground-color: var(--op-baseline-color);
  --op-ground-border: var(--op-baseline-border);
  --op-ground-bg-soft: var(--op-baseline-bg-soft);
  --op-wonder-color: var(--op-probe-color);
  --op-wonder-border: var(--op-probe-border);
  --op-wonder-bg-soft: var(--op-probe-bg-soft);
  --op-value-color: var(--op-stream-color);
  --op-value-border: var(--op-stream-border);
  --op-value-bg-soft: var(--op-stream-bg-soft);
  --op-subject-color: var(--op-merge-color);
  --op-subject-border: var(--op-merge-border);
  --op-subject-bg-soft: var(--op-merge-bg-soft);
  --op-perspective-color: var(--op-action-color);
  --op-perspective-border: var(--op-action-border);
  --op-perspective-bg-soft: var(--op-action-bg-soft);
  --op-integration-color: var(--op-object-color);
  --op-integration-border: var(--op-object-border);
  --op-integration-bg-soft: var(--op-object-bg-soft);
  --op-concept-color: var(--op-topic-color);
  --op-concept-border: var(--op-topic-border);
  --op-concept-bg-soft: var(--op-topic-bg-soft);
  --op-scene-color: var(--op-surface-color);
  --op-scene-border: var(--op-surface-border);
  --op-scene-bg-soft: var(--op-surface-bg-soft);
  --op-mode-color: var(--op-probe-color);
  --op-mode-border: var(--op-probe-border);
  --op-mode-bg-soft: var(--op-probe-bg-soft);
  --op-direction-color: var(--op-frame-color);
  --op-direction-border: var(--op-frame-border);
  --op-direction-bg-soft: var(--op-frame-bg-soft);
}


/* ==========================================================================
   7. Author Workflow Tokens
   --------------------------------------------------------------------------
   These are distinct from developmental climate. Author workflow describes
   the work-state of the manuscript; developmental climate describes the
   learning/attention stance applied to the work.
   ========================================================================== */

:root {
  --author-mode: draft;

  --author-mode-accent: var(--op-frame-color);
  --author-mode-line: color-mix(in srgb, var(--author-mode-accent) 22%, var(--line));
  --author-mode-wash: color-mix(in srgb, var(--author-mode-accent) 6%, transparent);
  --author-mode-wash-strong: color-mix(in srgb, var(--author-mode-accent) 10%, transparent);
  --author-mode-ink: color-mix(in srgb, var(--ink) 86%, var(--author-mode-accent) 14%);

  --manuscript-draft-accent: hsl(210 34% 40%);
  --manuscript-revise-accent: hsl(34 50% 39%);
  --manuscript-polish-accent: hsl(276 24% 42%);
  --manuscript-publish-accent: hsl(168 36% 32%);
  --manuscript-archive-accent: hsl(42 16% 36%);

  --author-annotation-strength: 0.35;
  --author-margin-presence: 0.4;
  --author-thread-density: 0.5;
  --author-draft-privacy: 0.7;
  --author-publication-readiness: 0;

  --annotation-accent: color-mix(in srgb, var(--author-mode-accent) 70%, var(--ink) 30%);
  --annotation-line: color-mix(in srgb, var(--author-mode-accent) calc(var(--author-annotation-strength) * 55%), var(--line));
  --annotation-bg: color-mix(in srgb, var(--author-mode-accent) calc(var(--author-annotation-strength) * 18%), transparent);

  --revision-insert-accent: hsl(154 42% 34%);
  --revision-delete-accent: hsl(8 48% 42%);
  --revision-move-accent: hsl(216 38% 42%);
  --revision-comment-accent: hsl(42 54% 38%);

  --thread-line: color-mix(in srgb, var(--author-mode-accent) calc(var(--author-thread-density) * 32%), var(--line));
  --thread-bg: color-mix(in srgb, var(--author-mode-accent) calc(var(--author-thread-density) * 8%), transparent);
}

html[data-author-mode="draft"] {
  --author-mode: draft;
  --author-mode-accent: var(--manuscript-draft-accent);
  --author-annotation-strength: 0.26;
  --author-margin-presence: 0.34;
  --author-thread-density: 0.32;
  --author-draft-privacy: 0.82;
  --author-publication-readiness: 0.08;
}

html[data-author-mode="revise"] {
  --author-mode: revise;
  --author-mode-accent: var(--manuscript-revise-accent);
  --author-annotation-strength: 0.56;
  --author-margin-presence: 0.58;
  --author-thread-density: 0.56;
  --author-draft-privacy: 0.56;
  --author-publication-readiness: 0.32;
}

html[data-author-mode="polish"] {
  --author-mode: polish;
  --author-mode-accent: var(--manuscript-polish-accent);
  --author-annotation-strength: 0.42;
  --author-margin-presence: 0.46;
  --author-thread-density: 0.44;
  --author-draft-privacy: 0.36;
  --author-publication-readiness: 0.68;
}

html[data-author-mode="publish"] {
  --author-mode: publish;
  --author-mode-accent: var(--manuscript-publish-accent);
  --author-annotation-strength: 0.32;
  --author-margin-presence: 0.38;
  --author-thread-density: 0.28;
  --author-draft-privacy: 0.18;
  --author-publication-readiness: 0.92;
}

html[data-author-mode="archive"] {
  --author-mode: archive;
  --author-mode-accent: var(--manuscript-archive-accent);
  --author-annotation-strength: 0.22;
  --author-margin-presence: 0.3;
  --author-thread-density: 0.22;
  --author-draft-privacy: 0.24;
  --author-publication-readiness: 0.5;
}


/* ==========================================================================
   8. Developmental Climate Interface
   --------------------------------------------------------------------------
   Climate should be an editorial weather layer, not a full recolor theme.

   Meaning:
   orient   = find the page
   anchor   = hold the structure
   weave    = connect the material
   rehearse = test the voice
   offer    = prepare the gift

   This section defines both modern --climate-* tokens and compatibility
   aliases for existing --developmental-* consumers.
   ========================================================================== */

:root {
  /* Stable climate accent defaults */
  --climate-orient-accent: hsl(42 48% 43%);
  --climate-anchor-accent: hsl(215 28% 38%);
  --climate-weave-accent: hsl(155 32% 34%);
  --climate-rehearse-accent: hsl(274 24% 42%);
  --climate-offer-accent: hsl(184 42% 32%);

  --climate-accent: var(--climate-orient-accent);
  --climate-accent-ink: color-mix(in srgb, var(--ink) 86%, var(--climate-accent) 14%);
  --climate-accent-line: color-mix(in srgb, var(--climate-accent) 24%, var(--line));
  --climate-accent-line-strong: color-mix(in srgb, var(--climate-accent) 36%, var(--line));
  --climate-accent-wash: color-mix(in srgb, var(--climate-accent) 7%, transparent);
  --climate-accent-wash-strong: color-mix(in srgb, var(--climate-accent) 12%, transparent);

  /* Behavioral climate axes */
  --climate-clarity-bias: 0.64;
  --climate-pressure-bias: 0.34;
  --climate-atmosphere-bias: 0.18;
  --climate-memory-bias: 0.18;
  --climate-resonance-bias: 0.16;
  --climate-charge-bias: 0.24;
  --climate-selection-bias: 0.24;

  /* Author-facing behavior */
  --climate-hint-opacity: 0.65;
  --climate-outline-strength: 0.22;
  --climate-annotation-strength: 0.28;
  --climate-connection-strength: 0.22;
  --climate-publication-strength: 0.12;

  --climate-paper-tint: color-mix(in srgb, var(--climate-accent) 3%, transparent);
  --climate-margin-tint: color-mix(in srgb, var(--climate-accent) 5%, transparent);
  --climate-selection-ring: color-mix(in srgb, var(--climate-accent) 22%, transparent);
  --climate-seam: linear-gradient(
      90deg,
      color-mix(in srgb, var(--climate-accent) calc(var(--climate-outline-strength) * 18%), transparent) 0 0.32rem,
      transparent 0.32rem
  );

  /* Climate menu / badge interface */
  --climate-badge-bg: color-mix(in srgb, var(--climate-accent) 8%, var(--surface-strong));
  --climate-badge-text: color-mix(in srgb, var(--climate-accent) 64%, var(--ink));
  --climate-menu-bg: color-mix(in srgb, var(--surface-strong) 94%, var(--climate-accent) 6%);
  --climate-menu-line: color-mix(in srgb, var(--climate-accent) 22%, transparent);
  --climate-menu-shadow: 0 10px 28px color-mix(in srgb, var(--climate-accent) 8%, transparent);

  /* Timing */
  --climate-transition-duration: var(--duration-base);
  --climate-transition-slow: var(--duration-deliberate);
  --climate-transition-timing: var(--ease-mechanical);

  /* Compatibility aliases for developmental-climate.css */
  --developmental-transition-duration: var(--climate-transition-duration);
  --developmental-transition-slow: var(--climate-transition-slow);
  --developmental-transition-timing: var(--climate-transition-timing);

  --developmental-accent: var(--climate-accent);
  --developmental-accent-soft: var(--climate-accent-wash);
  --developmental-accent-strong: var(--climate-accent-line-strong);
  --developmental-surface-tint: var(--climate-paper-tint);
  --developmental-surface-tint-strong: var(--climate-margin-tint);
  --developmental-border: var(--climate-accent-line);
  --developmental-border-strong: var(--climate-accent-line-strong);
  --developmental-badge-bg: var(--climate-badge-bg);
  --developmental-badge-text: var(--climate-badge-text);
  --developmental-menu-bg: var(--climate-menu-bg);
  --developmental-menu-line: var(--climate-menu-line);
  --developmental-menu-shadow: var(--climate-menu-shadow);

  --developmental-seam-opacity: var(--climate-hint-opacity);
  --developmental-guide-opacity: calc(0.62 + var(--climate-clarity-bias) * 0.18);
  --developmental-indicator-opacity: calc(0.72 + var(--climate-selection-bias) * 0.18);

  --developmental-clarity: var(--climate-clarity-bias);
  --developmental-pressure: var(--climate-pressure-bias);
  --developmental-atmosphere: var(--climate-atmosphere-bias);
  --developmental-memory: var(--climate-memory-bias);
  --developmental-resonance: var(--climate-resonance-bias);
  --developmental-charge-bias: var(--climate-charge-bias);
  --developmental-selection-bias: var(--climate-selection-bias);

  /* Handoff to existing components */
  --card-border-emphasis: var(--climate-accent-line);
  --badge-bg: var(--climate-badge-bg);
  --badge-text: var(--climate-badge-text);
}

/* Orient: find the page */
:where(html:is([data-spw-developmental-climate="orient"], [data-spw-spirit-phase="orient"], [data-spw-spirit-phase="initiation"])) {
  --climate-accent: var(--climate-orient-accent);
  --climate-clarity-bias: 0.56;
  --climate-pressure-bias: 0.22;
  --climate-atmosphere-bias: 0.34;
  --climate-memory-bias: 0.12;
  --climate-resonance-bias: 0.18;
  --climate-charge-bias: 0.18;
  --climate-selection-bias: 0.18;

  --climate-hint-opacity: 0.86;
  --climate-outline-strength: 0.14;
  --climate-annotation-strength: 0.22;
  --climate-connection-strength: 0.12;
  --climate-publication-strength: 0.06;
}

/* Anchor: hold the structure */
:where(html:is([data-spw-developmental-climate="anchor"], [data-spw-spirit-phase="anchor"], [data-spw-spirit-phase="resistance"], [data-spw-spirit-phase="attune"], [data-spw-spirit-phase="settle"])) {
  --climate-accent: var(--climate-anchor-accent);
  --climate-clarity-bias: 0.76;
  --climate-pressure-bias: 0.46;
  --climate-atmosphere-bias: 0.10;
  --climate-memory-bias: 0.32;
  --climate-resonance-bias: 0.14;
  --climate-charge-bias: 0.22;
  --climate-selection-bias: 0.34;

  --climate-hint-opacity: 0.55;
  --climate-outline-strength: 0.34;
  --climate-annotation-strength: 0.26;
  --climate-connection-strength: 0.16;
  --climate-publication-strength: 0.10;
}

/* Weave: connect the material */
:where(html:is([data-spw-developmental-climate="weave"], [data-spw-spirit-phase="weave"], [data-spw-spirit-phase="transformation"], [data-spw-spirit-phase="compose"])) {
  --climate-accent: var(--climate-weave-accent);
  --climate-clarity-bias: 0.68;
  --climate-pressure-bias: 0.38;
  --climate-atmosphere-bias: 0.20;
  --climate-memory-bias: 0.22;
  --climate-resonance-bias: 0.40;
  --climate-charge-bias: 0.26;
  --climate-selection-bias: 0.24;

  --climate-hint-opacity: 0.68;
  --climate-outline-strength: 0.22;
  --climate-annotation-strength: 0.34;
  --climate-connection-strength: 0.48;
  --climate-publication-strength: 0.16;
}

/* Rehearse: test the voice */
:where(html:is([data-spw-developmental-climate="rehearse"], [data-spw-spirit-phase="rehearse"], [data-spw-spirit-phase="return"], [data-spw-spirit-phase="practice"])) {
  --climate-accent: var(--climate-rehearse-accent);
  --climate-clarity-bias: 0.70;
  --climate-pressure-bias: 0.36;
  --climate-atmosphere-bias: 0.14;
  --climate-memory-bias: 0.46;
  --climate-resonance-bias: 0.22;
  --climate-charge-bias: 0.20;
  --climate-selection-bias: 0.30;

  --climate-hint-opacity: 0.60;
  --climate-outline-strength: 0.28;
  --climate-annotation-strength: 0.52;
  --climate-connection-strength: 0.26;
  --climate-publication-strength: 0.22;
}

/* Offer: prepare the gift */
:where(html:is([data-spw-developmental-climate="offer"], [data-spw-spirit-phase="offer"], [data-spw-spirit-phase="expression"], [data-spw-spirit-phase="project"])) {
  --climate-accent: var(--climate-offer-accent);
  --climate-clarity-bias: 0.84;
  --climate-pressure-bias: 0.30;
  --climate-atmosphere-bias: 0.08;
  --climate-memory-bias: 0.24;
  --climate-resonance-bias: 0.30;
  --climate-charge-bias: 0.30;
  --climate-selection-bias: 0.36;

  --climate-hint-opacity: 0.42;
  --climate-outline-strength: 0.38;
  --climate-annotation-strength: 0.28;
  --climate-connection-strength: 0.22;
  --climate-publication-strength: 0.58;
}


/* ==========================================================================
   9. Boonhonk / Taste Combinatorics
   ========================================================================== */

:root {
  --boon-color: hsl(160 44% 38%);
  --bane-color: hsl(6 48% 42%);
  --bone-color: hsl(42 58% 46%);
  --bonk-color: hsl(212 46% 44%);
  --honk-color: hsl(320 40% 44%);

  --boon-border: color-mix(in srgb, var(--boon-color) 24%, transparent);
  --bane-border: color-mix(in srgb, var(--bane-color) 24%, transparent);
  --bone-border: color-mix(in srgb, var(--bone-color) 24%, transparent);
  --bonk-border: color-mix(in srgb, var(--bonk-color) 24%, transparent);
  --honk-border: color-mix(in srgb, var(--honk-color) 24%, transparent);

  --boon-bg-soft: color-mix(in srgb, var(--boon-color) 8%, transparent);
  --bane-bg-soft: color-mix(in srgb, var(--bane-color) 8%, transparent);
  --bone-bg-soft: color-mix(in srgb, var(--bone-color) 8%, transparent);
  --bonk-bg-soft: color-mix(in srgb, var(--bonk-color) 8%, transparent);
  --honk-bg-soft: color-mix(in srgb, var(--honk-color) 8%, transparent);

  --taste-density: 0.5;
  --taste-explicitness: 0.5;
  --taste-whimsy: 0.45;
  --taste-materiality: 0.55;
  --taste-canonicality: 0.65;
}


/* ==========================================================================
   10. Runtime Density, Theme, Contrast, and Motion Modes
   ========================================================================== */

/* Density */
html[data-spw-component-density="dense"] {
  --spw-flow-space: 0.9rem;
  --spw-component-gap: 0.8rem;
  --spw-component-gap-tight: 0.42rem;
  --spw-component-gap-loose: 1rem;
  --spw-component-gap-roomy: 1.28rem;
  --spw-component-pad: 0.78rem;
  --spw-component-pad-tight: 0.56rem;
  --spw-component-pad-loose: 0.92rem;
  --spw-component-pad-roomy: 1.12rem;
  --spw-surface-gap: 0.8rem;
  --spw-surface-padding: clamp(1rem, 2.1vw, 1.35rem);
  --spw-control-min-height: 2.05rem;
  --spw-control-padding-block: 0.22rem;
  --spw-control-padding-inline: 0.62rem;
}

html[data-spw-component-density="roomy"] {
  --spw-flow-space: 1.08rem;
  --spw-component-gap: 1rem;
  --spw-component-gap-tight: 0.66rem;
  --spw-component-gap-loose: 1.3rem;
  --spw-component-gap-roomy: 1.72rem;
  --spw-component-pad: 1rem;
  --spw-component-pad-tight: 0.74rem;
  --spw-component-pad-loose: 1.24rem;
  --spw-component-pad-roomy: 1.56rem;
  --spw-surface-gap: 1rem;
  --spw-surface-padding: clamp(1.25rem, 2.7vw, 1.9rem);
  --spw-control-min-height: 2.22rem;
  --spw-control-padding-block: 0.3rem;
  --spw-control-padding-inline: 0.76rem;
}

/* Dark mode */
html[data-spw-color-mode="dark"] {
  --bg: hsl(214 18% 10%);
  --bg-deep: hsl(214 22% 7%);
  --bg-field: hsl(214 15% 13%);
  --bg-ritual: hsl(216 14% 15%);

  --paper: hsl(214 14% 13%);
  --paper-warm: hsl(32 12% 15%);
  --paper-cool: hsl(214 14% 16%);
  --paper-ink: rgba(228, 235, 232, 0.92);
  --paper-rule: rgba(228, 235, 232, 0.14);

  --surface: rgba(18, 24, 28, 0.78);
  --surface-strong: rgba(25, 32, 37, 0.92);
  --surface-soft: rgba(18, 24, 28, 0.58);
  --surface-code: rgba(10, 14, 17, 0.98);
  --surface-matte: rgba(24, 30, 35, 0.96);
  --surface-matte-strong: rgba(31, 38, 44, 0.98);
  --surface-contrast: rgba(34, 42, 48, 0.98);
  --surface-contrast-soft: rgba(26, 33, 39, 0.97);
  --surface-panel: rgba(24, 31, 36, 0.9);
  --surface-panel-strong: rgba(30, 38, 44, 0.95);
  --surface-glass: rgba(255, 255, 255, 0.08);
  --surface-shadowed: rgba(20, 26, 31, 0.72);

  --ink-strong: rgba(236, 241, 238, 0.96);
  --ink: rgba(228, 235, 232, 0.92);
  --ink-soft: rgba(202, 214, 210, 0.84);
  --ink-mid: rgba(202, 214, 210, 0.68);
  --ink-faint: rgba(202, 214, 210, 0.52);
  --ink-speculative: rgba(190, 202, 198, 0.18);
  --ink-disabled: rgba(190, 202, 198, 0.24);
  --ink-on-matte: rgba(246, 250, 248, 0.97);
  --ink-on-matte-soft: rgba(220, 230, 226, 0.84);
  --ink-on-matte-strong: rgba(255, 255, 255, 0.98);
  --ink-on-contrast: rgba(255, 255, 255, 0.98);
  --ink-on-contrast-soft: rgba(240, 246, 245, 0.9);

  /* Dark matte clear contrast text (semantic utility) */
  --text-on-matte: var(--ink-on-matte);
  --text-on-matte-soft: var(--ink-on-matte-soft);
  --text-on-matte-strong: var(--ink-on-matte-strong);
  --text-on-contrast: var(--ink-on-contrast);
  --text-on-contrast-soft: var(--ink-on-contrast-soft);

  --line: rgba(228, 235, 232, 0.14);
  --line-strong: rgba(96, 210, 210, 0.34);
  --line-matte: rgba(228, 235, 232, 0.09);
  --line-quiet: rgba(228, 235, 232, 0.07);

  --focus-ring: 0 0 0 3px rgba(96, 210, 210, 0.22);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-active: 0 8px 28px rgba(0, 0, 0, 0.32);
  --shadow-projecting: 0 14px 34px rgba(0, 0, 0, 0.38);

  --climate-badge-bg: color-mix(in srgb, var(--climate-accent) 16%, var(--surface-strong));
  --climate-badge-text: color-mix(in srgb, var(--climate-accent) 56%, white);
  --climate-menu-bg: color-mix(in srgb, var(--surface-strong) 90%, var(--climate-accent) 10%);
}

/* Theme packs */
html[data-spw-theme-pack="neutral-paper"] {
  --bg: hsl(42 28% 93%);
  --bg-field: hsl(44 32% 97%);
  --paper: hsl(42 30% 97%);
  --paper-warm: hsl(40 30% 94%);
  --surface: rgba(255, 253, 249, 0.78);
  --surface-strong: rgba(255, 254, 251, 0.92);
  --surface-matte: rgba(249, 244, 235, 0.96);
  --surface-matte-strong: rgba(255, 251, 244, 0.98);
  --surface-contrast: rgba(255, 254, 250, 0.99);
  --surface-panel: rgba(253, 250, 245, 0.86);
  --surface-panel-strong: rgba(255, 252, 248, 0.96);
  --teal: hsl(184 60% 29%);
  --amber: hsl(35 68% 42%);
  --ink-strong: rgba(28, 26, 22, 0.98);
  --ink: rgba(36, 33, 28, 0.94);
  --ink-soft: rgba(62, 56, 48, 0.76);
  --line: rgba(58, 48, 36, 0.14);
  --line-strong: rgba(22, 110, 118, 0.26);
}

html[data-spw-theme-pack="ritual-vellum"] {
  --bg: hsl(34 48% 86%);
  --bg-field: hsl(40 40% 94%);
  --surface: rgba(252, 244, 232, 0.78);
  --surface-strong: rgba(254, 248, 238, 0.92);
  --surface-panel: rgba(250, 241, 227, 0.86);
  --surface-panel-strong: rgba(253, 246, 235, 0.95);
  --surface-matte: rgba(250, 244, 230, 0.94);
  --surface-matte-strong: rgba(255, 249, 238, 0.98);
  --surface-contrast: rgba(255, 250, 242, 0.99);
  --paper: hsl(38 46% 94%);
  --paper-warm: hsl(32 54% 90%);
  --teal: hsl(176 40% 28%);
  --amber: hsl(34 74% 44%);
  --violet: hsl(320 22% 40%);
  --ink-strong: rgba(34, 26, 20, 0.98);
  --ink: rgba(42, 33, 25, 0.94);
  --ink-soft: rgba(78, 60, 44, 0.78);
  --line: rgba(84, 61, 42, 0.15);
  --line-strong: rgba(126, 82, 39, 0.26);
}

html[data-spw-theme-pack="oxide-ledger"] {
  --bg: hsl(164 24% 84%);
  --bg-field: hsl(170 30% 94%);
  --paper: hsl(164 30% 95%);
  --paper-warm: hsl(38 20% 91%);
  --surface: rgba(244, 251, 248, 0.8);
  --surface-strong: rgba(249, 254, 251, 0.93);
  --surface-matte: rgba(238, 248, 244, 0.96);
  --surface-matte-strong: rgba(247, 253, 250, 0.98);
  --surface-contrast: rgba(251, 255, 253, 0.99);
  --surface-panel: rgba(239, 248, 244, 0.88);
  --surface-panel-strong: rgba(246, 252, 249, 0.96);
  --teal: hsl(172 58% 26%);
  --amber: hsl(24 48% 40%);
  --ink-strong: rgba(19, 30, 28, 0.98);
  --ink: rgba(24, 39, 36, 0.94);
  --ink-soft: rgba(48, 72, 67, 0.78);
  --line: rgba(31, 74, 66, 0.15);
  --line-strong: hsla(172, 58%, 26%, 0.32);
}

html[data-spw-theme-pack="electric-studio"] {
  --bg: hsl(208 54% 91%);
  --bg-field: hsl(212 62% 97%);
  --paper: hsl(208 58% 96%);
  --paper-warm: hsl(222 36% 94%);
  --surface: rgba(247, 251, 255, 0.76);
  --surface-strong: rgba(251, 253, 255, 0.92);
  --surface-matte: rgba(238, 246, 255, 0.96);
  --surface-matte-strong: rgba(247, 252, 255, 0.98);
  --surface-contrast: rgba(252, 254, 255, 0.99);
  --surface-panel: rgba(241, 248, 255, 0.86);
  --surface-panel-strong: rgba(247, 251, 255, 0.95);
  --teal: hsl(186 78% 30%);
  --violet: hsl(264 58% 48%);
  --blue: hsl(214 74% 46%);
  --resonance-accent: hsl(192 78% 50%);
  --ink-strong: rgba(18, 24, 35, 0.98);
  --ink: rgba(24, 30, 42, 0.94);
  --ink-soft: rgba(53, 67, 92, 0.76);
  --line: rgba(39, 83, 130, 0.16);
  --line-strong: rgba(34, 138, 156, 0.3);
}

html[data-spw-theme-pack="copper-brace"] {
  --bg: hsl(28 56% 86%);
  --bg-field: hsl(34 50% 95%);
  --paper: hsl(30 54% 95%);
  --paper-warm: hsl(26 50% 91%);
  --surface: rgba(253, 246, 238, 0.78);
  --surface-strong: rgba(255, 249, 242, 0.92);
  --surface-matte: rgba(250, 238, 225, 0.96);
  --surface-matte-strong: rgba(255, 247, 238, 0.98);
  --surface-contrast: rgba(255, 250, 244, 0.99);
  --surface-panel: rgba(249, 239, 228, 0.87);
  --surface-panel-strong: rgba(253, 244, 234, 0.95);
  --teal: hsl(178 44% 27%);
  --amber: hsl(30 72% 43%);
  --op-binding-color: hsl(20 58% 34%);
  --ink-strong: rgba(34, 23, 18, 0.98);
  --ink: rgba(42, 29, 23, 0.94);
  --ink-soft: rgba(80, 58, 45, 0.78);
  --line: rgba(94, 63, 36, 0.16);
  --line-strong: rgba(153, 91, 31, 0.28);
}

html[data-spw-theme-pack="glass-console"] {
  --bg: hsl(204 28% 88%);
  --bg-field: hsl(206 34% 95%);
  --paper: hsl(206 34% 96%);
  --paper-warm: hsl(198 20% 93%);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.88);
  --surface-matte: rgba(239, 247, 252, 0.96);
  --surface-matte-strong: rgba(248, 252, 255, 0.98);
  --surface-contrast: rgba(252, 254, 255, 0.99);
  --surface-panel: rgba(255, 255, 255, 0.78);
  --surface-panel-strong: rgba(255, 255, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.24);
  --teal: hsl(192 62% 30%);
  --blue: hsl(214 62% 42%);
  --ink-strong: rgba(var(--charcoal-rgb), 0.98);
  --ink: rgba(var(--charcoal-rgb), 0.94);
  --ink-soft: rgba(var(--charcoal-rgb), 0.82);
  --ink-mid: rgba(var(--charcoal-rgb), 0.7);
  --line: rgba(28, 64, 88, 0.14);
  --line-strong: rgba(26, 122, 146, 0.24);
  --material-blur: 10px;
  --material-transmission: 0.18;
}

html[data-spw-color-mode="dark"][data-spw-theme-pack="neutral-paper"] {
  --bg: hsl(34 14% 11%);
  --bg-field: hsl(36 12% 14%);
  --paper: hsl(34 12% 14%);
  --paper-warm: hsl(28 14% 16%);
  --surface: rgba(28, 24, 20, 0.78);
  --surface-strong: rgba(36, 31, 26, 0.92);
  --surface-matte: rgba(41, 35, 29, 0.96);
  --surface-matte-strong: rgba(48, 41, 34, 0.98);
  --surface-contrast: rgba(54, 46, 38, 0.98);
  --surface-panel: rgba(33, 28, 24, 0.9);
  --surface-panel-strong: rgba(40, 34, 29, 0.95);
  --surface-glass: rgba(255, 245, 232, 0.06);
  --teal: hsl(184 52% 63%);
  --amber: hsl(36 66% 62%);
  --ink-strong: rgba(242, 237, 230, 0.97);
  --ink: rgba(234, 228, 220, 0.93);
  --ink-soft: rgba(197, 188, 177, 0.78);
  --ink-mid: rgba(197, 188, 177, 0.6);
  --line: rgba(234, 228, 220, 0.14);
  --line-strong: rgba(112, 196, 196, 0.3);
}

html[data-spw-color-mode="dark"][data-spw-theme-pack="glass-console"] {
  --bg: hsl(214 18% 10%);
  --bg-field: hsl(210 18% 13%);
  --paper: hsl(212 16% 13%);
  --paper-warm: hsl(206 12% 16%);
  --surface: rgba(18, 24, 28, 0.78);
  --surface-strong: rgba(25, 32, 37, 0.92);
  --surface-matte: rgba(28, 36, 42, 0.96);
  --surface-matte-strong: rgba(34, 43, 50, 0.98);
  --surface-contrast: rgba(38, 48, 56, 0.98);
  --surface-panel: rgba(24, 31, 36, 0.9);
  --surface-panel-strong: rgba(30, 38, 44, 0.95);
  --surface-glass: rgba(255, 255, 255, 0.08);
  --teal: hsl(190 70% 64%);
  --blue: hsl(214 70% 66%);
  --ink-strong: rgba(236, 241, 238, 0.96);
  --ink: rgba(228, 235, 232, 0.92);
  --ink-soft: rgba(190, 202, 198, 0.78);
  --ink-mid: rgba(190, 202, 198, 0.6);
  --line: rgba(228, 235, 232, 0.14);
  --line-strong: rgba(96, 210, 210, 0.34);
}

html[data-spw-color-mode="dark"][data-spw-theme-pack="ritual-vellum"] {
  --bg: hsl(18 18% 11%);
  --bg-field: hsl(24 18% 14%);
  --paper: hsl(22 18% 14%);
  --paper-warm: hsl(16 20% 17%);
  --surface: rgba(36, 26, 22, 0.78);
  --surface-strong: rgba(44, 32, 26, 0.92);
  --surface-matte: rgba(48, 36, 30, 0.96);
  --surface-matte-strong: rgba(56, 42, 34, 0.98);
  --surface-contrast: rgba(64, 48, 38, 0.98);
  --surface-panel: rgba(41, 30, 24, 0.9);
  --surface-panel-strong: rgba(48, 35, 28, 0.95);
  --surface-glass: rgba(255, 244, 232, 0.06);
  --teal: hsl(176 42% 62%);
  --amber: hsl(35 70% 60%);
  --violet: hsl(330 30% 68%);
  --ink-strong: rgba(245, 233, 224, 0.97);
  --ink: rgba(237, 225, 216, 0.93);
  --ink-soft: rgba(201, 183, 169, 0.78);
  --ink-mid: rgba(201, 183, 169, 0.6);
  --line: rgba(237, 225, 216, 0.14);
  --line-strong: rgba(196, 145, 86, 0.32);
}

html[data-spw-color-mode="dark"][data-spw-theme-pack="oxide-ledger"] {
  --bg: hsl(166 24% 10%);
  --bg-field: hsl(170 22% 13%);
  --paper: hsl(168 20% 13%);
  --paper-warm: hsl(34 14% 15%);
  --surface: rgba(18, 31, 28, 0.78);
  --surface-strong: rgba(24, 39, 35, 0.92);
  --surface-matte: rgba(27, 44, 39, 0.96);
  --surface-matte-strong: rgba(33, 51, 46, 0.98);
  --surface-contrast: rgba(38, 59, 53, 0.98);
  --surface-panel: rgba(23, 36, 33, 0.9);
  --surface-panel-strong: rgba(29, 43, 39, 0.95);
  --surface-glass: rgba(229, 255, 248, 0.06);
  --teal: hsl(168 58% 62%);
  --amber: hsl(28 46% 61%);
  --ink-strong: rgba(231, 244, 239, 0.97);
  --ink: rgba(223, 236, 231, 0.93);
  --ink-soft: rgba(181, 201, 194, 0.78);
  --ink-mid: rgba(181, 201, 194, 0.6);
  --line: rgba(223, 236, 231, 0.14);
  --line-strong: rgba(92, 204, 183, 0.32);
}

html[data-spw-color-mode="dark"][data-spw-theme-pack="electric-studio"] {
  --bg: hsl(226 26% 11%);
  --bg-field: hsl(220 24% 14%);
  --paper: hsl(222 22% 14%);
  --paper-warm: hsl(234 16% 16%);
  --surface: rgba(18, 25, 38, 0.8);
  --surface-strong: rgba(25, 33, 48, 0.93);
  --surface-matte: rgba(27, 36, 52, 0.96);
  --surface-matte-strong: rgba(34, 44, 61, 0.98);
  --surface-contrast: rgba(39, 51, 72, 0.98);
  --surface-panel: rgba(24, 32, 46, 0.9);
  --surface-panel-strong: rgba(30, 39, 54, 0.96);
  --surface-glass: rgba(233, 246, 255, 0.07);
  --teal: hsl(188 78% 62%);
  --violet: hsl(266 70% 68%);
  --blue: hsl(214 76% 68%);
  --resonance-accent: hsl(194 84% 62%);
  --ink-strong: rgba(235, 241, 250, 0.97);
  --ink: rgba(226, 233, 244, 0.93);
  --ink-soft: rgba(185, 197, 220, 0.79);
  --ink-mid: rgba(185, 197, 220, 0.6);
  --line: rgba(226, 233, 244, 0.14);
  --line-strong: rgba(105, 191, 224, 0.34);
}

html[data-spw-color-mode="dark"][data-spw-theme-pack="copper-brace"] {
  --bg: hsl(20 22% 10%);
  --bg-field: hsl(28 22% 13%);
  --paper: hsl(24 20% 13%);
  --paper-warm: hsl(18 22% 16%);
  --surface: rgba(36, 24, 19, 0.79);
  --surface-strong: rgba(44, 30, 24, 0.93);
  --surface-matte: rgba(49, 34, 27, 0.96);
  --surface-matte-strong: rgba(58, 40, 31, 0.98);
  --surface-contrast: rgba(66, 46, 36, 0.98);
  --surface-panel: rgba(41, 28, 22, 0.9);
  --surface-panel-strong: rgba(48, 34, 27, 0.96);
  --surface-glass: rgba(255, 240, 230, 0.06);
  --teal: hsl(178 46% 62%);
  --amber: hsl(31 74% 60%);
  --op-binding-color: hsl(20 62% 66%);
  --ink-strong: rgba(244, 234, 226, 0.97);
  --ink: rgba(236, 226, 218, 0.93);
  --ink-soft: rgba(201, 184, 171, 0.78);
  --ink-mid: rgba(201, 184, 171, 0.6);
  --line: rgba(236, 226, 218, 0.14);
  --line-strong: rgba(214, 141, 77, 0.32);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"][data-spw-theme-pack="neutral-paper"] {
    --bg: hsl(34 14% 11%);
    --bg-field: hsl(36 12% 14%);
    --paper: hsl(34 12% 14%);
    --paper-warm: hsl(28 14% 16%);
    --surface: rgba(28, 24, 20, 0.78);
    --surface-strong: rgba(36, 31, 26, 0.92);
    --surface-panel: rgba(33, 28, 24, 0.9);
    --surface-panel-strong: rgba(40, 34, 29, 0.95);
    --surface-glass: rgba(255, 245, 232, 0.06);
    --teal: hsl(184 52% 63%);
    --amber: hsl(36 66% 62%);
    --ink-strong: rgba(242, 237, 230, 0.97);
    --ink: rgba(234, 228, 220, 0.93);
    --ink-soft: rgba(197, 188, 177, 0.78);
    --ink-mid: rgba(197, 188, 177, 0.6);
    --line: rgba(234, 228, 220, 0.14);
    --line-strong: rgba(112, 196, 196, 0.3);
  }

  html[data-spw-color-mode="auto"][data-spw-theme-pack="glass-console"],
  html[data-spw-color-mode="auto"][data-spw-theme-pack="ritual-vellum"],
  html[data-spw-color-mode="auto"][data-spw-theme-pack="oxide-ledger"],
  html[data-spw-color-mode="auto"][data-spw-theme-pack="electric-studio"],
  html[data-spw-color-mode="auto"][data-spw-theme-pack="copper-brace"] {
    --bg: hsl(214 18% 10%);
    --bg-field: hsl(214 15% 13%);
    --paper: hsl(214 14% 13%);
    --paper-warm: hsl(32 12% 15%);
    --surface: rgba(18, 24, 28, 0.78);
    --surface-strong: rgba(25, 32, 37, 0.92);
    --surface-panel: rgba(24, 31, 36, 0.9);
    --surface-panel-strong: rgba(30, 38, 44, 0.95);
    --surface-glass: rgba(255, 255, 255, 0.08);
    --ink-strong: rgba(236, 241, 238, 0.96);
    --ink: rgba(228, 235, 232, 0.92);
    --ink-soft: rgba(190, 202, 198, 0.78);
    --ink-mid: rgba(190, 202, 198, 0.6);
    --line: rgba(228, 235, 232, 0.14);
    --line-strong: rgba(96, 210, 210, 0.34);
  }

  html[data-spw-color-mode="auto"][data-spw-theme-pack="glass-console"] {
    --bg: hsl(214 18% 10%);
    --bg-field: hsl(210 18% 13%);
    --paper: hsl(212 16% 13%);
    --paper-warm: hsl(206 12% 16%);
    --surface: rgba(18, 24, 28, 0.78);
    --surface-strong: rgba(25, 32, 37, 0.92);
    --surface-panel: rgba(24, 31, 36, 0.9);
    --surface-panel-strong: rgba(30, 38, 44, 0.95);
    --surface-glass: rgba(255, 255, 255, 0.08);
    --teal: hsl(190 70% 64%);
    --blue: hsl(214 70% 66%);
  }

  html[data-spw-color-mode="auto"][data-spw-theme-pack="ritual-vellum"] {
    --bg: hsl(18 18% 11%);
    --bg-field: hsl(24 18% 14%);
    --paper: hsl(22 18% 14%);
    --paper-warm: hsl(16 20% 17%);
    --surface: rgba(36, 26, 22, 0.78);
    --surface-strong: rgba(44, 32, 26, 0.92);
    --surface-panel: rgba(41, 30, 24, 0.9);
    --surface-panel-strong: rgba(48, 35, 28, 0.95);
    --surface-glass: rgba(255, 244, 232, 0.06);
    --teal: hsl(176 42% 62%);
    --amber: hsl(35 70% 60%);
    --violet: hsl(330 30% 68%);
    --line-strong: rgba(196, 145, 86, 0.32);
  }

  html[data-spw-color-mode="auto"][data-spw-theme-pack="oxide-ledger"] {
    --bg: hsl(166 24% 10%);
    --bg-field: hsl(170 22% 13%);
    --paper: hsl(168 20% 13%);
    --paper-warm: hsl(34 14% 15%);
    --surface: rgba(18, 31, 28, 0.78);
    --surface-strong: rgba(24, 39, 35, 0.92);
    --surface-panel: rgba(23, 36, 33, 0.9);
    --surface-panel-strong: rgba(29, 43, 39, 0.95);
    --surface-glass: rgba(229, 255, 248, 0.06);
    --teal: hsl(168 58% 62%);
    --amber: hsl(28 46% 61%);
    --line-strong: rgba(92, 204, 183, 0.32);
  }

  html[data-spw-color-mode="auto"][data-spw-theme-pack="electric-studio"] {
    --bg: hsl(226 26% 11%);
    --bg-field: hsl(220 24% 14%);
    --paper: hsl(222 22% 14%);
    --paper-warm: hsl(234 16% 16%);
    --surface: rgba(18, 25, 38, 0.8);
    --surface-strong: rgba(25, 33, 48, 0.93);
    --surface-panel: rgba(24, 32, 46, 0.9);
    --surface-panel-strong: rgba(30, 39, 54, 0.96);
    --surface-glass: rgba(233, 246, 255, 0.07);
    --teal: hsl(188 78% 62%);
    --violet: hsl(266 70% 68%);
    --blue: hsl(214 76% 68%);
    --resonance-accent: hsl(194 84% 62%);
    --line-strong: rgba(105, 191, 224, 0.34);
  }

  html[data-spw-color-mode="auto"][data-spw-theme-pack="copper-brace"] {
    --bg: hsl(20 22% 10%);
    --bg-field: hsl(28 22% 13%);
    --paper: hsl(24 20% 13%);
    --paper-warm: hsl(18 22% 16%);
    --surface: rgba(36, 24, 19, 0.79);
    --surface-strong: rgba(44, 30, 24, 0.93);
    --surface-panel: rgba(41, 28, 22, 0.9);
    --surface-panel-strong: rgba(48, 34, 27, 0.96);
    --surface-glass: rgba(255, 240, 230, 0.06);
    --teal: hsl(178 46% 62%);
    --amber: hsl(31 74% 60%);
    --op-binding-color: hsl(20 62% 66%);
    --line-strong: rgba(214, 141, 77, 0.32);
  }
}

/* ==========================================================================
   Motif + Lighting Balance (color + mind context composability)
   --------------------------------------------------------------------------
   Extends the pigment-context-boost + motif active-op overrides (defined earlier)
   with explicit dark + auto-dark variants. This guarantees that artistically
   chosen theme packs + lighting conditions + component motifs (curriculum for
   mind/care, lab for technical depth, artifact for reflection) remain balanced,
   readable, and distinct without per-page overrides.

   "Mind context" here refers to developmental climate + pedagogical flavor
   influencing the felt weight of operators/measures/ornament; the boost and
   lifted dark colors keep visual weight aligned with cognitive stance across
   the full combinatoric tree (motif × theme × color-mode × climate × measure-kind).

   These rules are the minimal necessary to make tuning to theme packs logical
   and learnable: change one data attr (or flavor preset) and the entire
   operator/measure/accent system rebalances gracefully.
   ========================================================================== */
html[data-spw-color-mode="dark"][data-spw-component-motif="curriculum"] {
  --pigment-context-boost: 1.12;
  /* Lifted electric teal keeps curriculum "mind" (care, memory, boundary) emphasis
     distinct and vibrant on dark ritual/electric/copper packs. */
  --active-op-color: hsl(186 68% 58%);
}

html[data-spw-color-mode="dark"][data-spw-component-motif="lab"] {
  --pigment-context-boost: 1.06;
  --active-op-color: hsl(214 62% 62%); /* lifted lapis for technical clarity in dark */
}

html[data-spw-color-mode="dark"][data-spw-component-motif="artifact"] {
  --pigment-context-boost: 0.98;
  --active-op-color: hsl(40 52% 58%); /* lifted brass for reflective artifact weight */
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"][data-spw-component-motif="curriculum"] {
    --pigment-context-boost: 1.12;
    --active-op-color: hsl(186 68% 58%);
  }

  html[data-spw-color-mode="auto"][data-spw-component-motif="lab"] {
    --pigment-context-boost: 1.06;
    --active-op-color: hsl(214 62% 62%);
  }

  html[data-spw-color-mode="auto"][data-spw-component-motif="artifact"] {
    --pigment-context-boost: 0.98;
    --active-op-color: hsl(40 52% 58%);
  }
}

/* Semantic density */
html[data-spw-semantic-density="minimal"] {
  --semantic-metadata-font-size: 0.54rem;
  --taste-density: 0.32;
}

html[data-spw-semantic-density="rich"] {
  --semantic-metadata-font-size: 0.62rem;
  --taste-density: 0.72;
  --semantic-metadata-line: color-mix(in srgb, var(--line-strong) 60%, transparent);
}

/* Presentation QA / mood-reading tuner */
:root {
  --spw-lighting-guard: 0.34;
  --spw-region-frame-alpha: 0.26;
  --spw-region-fill-alpha: 0.07;
  --spw-control-contrast-lift: 0.16;
  --spw-spacing-scale: 1;
  --spw-layout-measure: 72ch;
  --spw-layout-frame-max: var(--page-width-reading, 68rem);
  --spw-layout-column-min: 16rem;
  --spw-interaction-scale: 1;
  --spw-region-frame-line: color-mix(in srgb, var(--active-op-color) calc(var(--spw-region-frame-alpha) * 100%), var(--line));
  --spw-region-frame-fill: color-mix(in srgb, var(--active-op-color) calc(var(--spw-region-fill-alpha) * 100%), var(--surface-panel));
  --spw-control-safe-bg: color-mix(in srgb, var(--surface-strong) calc(94% - (var(--spw-control-contrast-lift) * 12%)), var(--ink) calc(var(--spw-control-contrast-lift) * 10%));
  --spw-control-safe-ink: color-mix(in srgb, var(--ink) calc(92% + (var(--spw-control-contrast-lift) * 8%)), var(--active-op-color));
}

html[data-spw-color-tuner="guarded"],
html[data-spw-high-contrast="on"] {
  --spw-region-frame-line: color-mix(in srgb, var(--active-op-color) 44%, var(--line-strong));
  --spw-control-safe-bg: var(--surface-panel-strong);
  --spw-control-safe-ink: var(--ink-strong);
}

html[data-spw-pedagogical-flavor="culinary"] {
  --spw-flavor-accent: var(--op-object-color);
}

html[data-spw-pedagogical-flavor="garden"] {
  --spw-flavor-accent: var(--op-stream-color);
}

html[data-spw-pedagogical-flavor="studio"] {
  --spw-flavor-accent: var(--op-probe-color);
}

html[data-spw-pedagogical-flavor="runtime"] {
  --spw-flavor-accent: var(--op-frame-color);
}

/* High contrast */
html[data-spw-high-contrast="on"] {
  --ink-strong: rgba(var(--charcoal-rgb), 1);
  --ink: rgba(var(--charcoal-rgb), 0.98);
  --ink-soft: rgba(var(--charcoal-rgb), 0.9);
  --ink-on-matte: rgba(var(--charcoal-rgb), 1);
  --ink-on-matte-strong: rgba(var(--charcoal-rgb), 1);
  --line: rgba(var(--charcoal-rgb), 0.28);
  --line-strong: color-mix(in srgb, var(--active-op-color) 58%, black);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--active-op-color) 32%, transparent);
  --climate-outline-strength: max(var(--climate-outline-strength), 0.36);
}

html[data-spw-color-mode="dark"][data-spw-high-contrast="on"] {
  --ink-strong: rgba(255, 255, 255, 0.98);
  --ink: rgba(246, 248, 248, 0.96);
  --ink-soft: rgba(230, 238, 236, 0.88);
  --ink-on-matte: rgba(255, 255, 255, 0.98);
  --ink-on-matte-strong: rgba(255, 255, 255, 0.99);
  --line: rgba(246, 248, 248, 0.26);
  --line-strong: color-mix(in srgb, var(--active-op-color) 62%, white);
}

/* Reduced motion */
html[data-spw-reduce-motion="on"] {
  --duration-instant: 1ms;
  --duration-snap: 1ms;
  --duration-fast: 1ms;
  --duration-base: 1ms;
  --duration-deliberate: 1ms;
  --duration-slow: 1ms;
  --duration-ceremonial: 1ms;
  --attention-echo-duration: 1ms;
  --climate-transition-duration: 1ms;
  --climate-transition-slow: 1ms;
  --spw-page-arrival-step-1-delay: 0ms;
  --spw-page-arrival-step-2-delay: 1ms;
  --spw-page-arrival-step-3-delay: 1ms;
  --spw-page-arrival-duration: 1ms;
  --spw-page-return-duration: 1ms;
  --spw-region-profile-refresh-duration: 1ms;
  --spw-component-arrival-transition: 1ms linear;
  --spw-component-settle-transition: 1ms linear;
  --spw-micro-lift-distance: 0px;
  --spw-micro-press-scale: 1;
  --spw-settle-offset-start: 0px;
  --spw-settle-offset-mid: 0px;
  --spw-settle-offset-end: 0px;
  --spw-settle-opacity-start: 1;
  --spw-settle-opacity-mid: 1;
  --spw-settle-opacity-end: 1;
}

/* Mobile rhythm */
@media (max-width: 900px) {
  :root {
    --spw-surface-padding: clamp(0.98rem, 2.4vw, 1.3rem);
    --spw-hero-gap: 1rem;
    --spw-slot-gap: 0.72rem;
    --spw-shell-row-gap: 0.4rem;
    --spw-shell-trace-gap: 0.58rem;
    --spw-shell-surface-padding-inline: 0.46rem;
  }
}

@media (max-width: 760px) {
  :root {
    --spw-flow-space: 0.88rem;
    --spw-heading-flow-space-multiplier: 1.32;
    --spw-component-gap: 0.78rem;
    --spw-component-gap-tight: 0.4rem;
    --spw-component-gap-loose: 0.96rem;
    --spw-component-gap-roomy: 1.2rem;
    --spw-component-pad: 0.76rem;
    --spw-component-pad-tight: 0.56rem;
    --spw-component-pad-loose: 0.92rem;
    --spw-component-pad-roomy: 1.08rem;
    --spw-surface-gap: 0.78rem;
    --spw-surface-padding: 0.82rem;
    --spw-slot-gap: 0.56rem;
    --spw-slot-gap-tight: 0.34rem 0.46rem;
    --spw-hero-gap: 0.92rem;
    --spw-shell-row-gap: 0.36rem;
    --spw-shell-trace-gap: 0.46rem;
    --spw-shell-surface-padding-block: 0.34rem;
    --spw-shell-surface-padding-inline: 0.4rem;
    --spw-shell-link-gap: 0.32rem;
    --touch-target-compact: 2.08rem;
    --spw-control-min-height: 2.02rem;
    --spw-control-padding-block: 0.2rem;
    --spw-control-padding-inline: 0.6rem;
    --spw-control-gap: 0.24rem;
    --manuscript-margin-width: clamp(1rem, 5vw, 2rem);
    --manuscript-comment-width: min(100%, 20rem);
  }
}

@media (max-width: 760px) and (orientation: landscape), (max-width: 640px) and (max-height: 520px) {
  :root {
    --spw-flow-space: 0.8rem;
    --spw-component-gap: 0.72rem;
    --spw-component-gap-tight: 0.36rem;
    --spw-component-pad: 0.7rem;
    --spw-component-pad-tight: 0.5rem;
    --spw-surface-gap: 0.72rem;
    --spw-surface-padding: 0.72rem;
    --spw-shell-row-gap: 0.3rem;
    --spw-shell-surface-padding-block: 0.28rem;
    --spw-shell-surface-padding-inline: 0.34rem;
    --spw-shell-link-gap: 0.28rem;
    --touch-target-compact: 1.98rem;
    --spw-control-min-height: 1.96rem;
    --spw-control-padding-block: 0.18rem;
    --spw-control-padding-inline: 0.56rem;
  }
}

@media (max-width: 420px) {
  :root {
    --spw-flow-space: 0.78rem;
    --spw-surface-padding: 0.68rem;
    --spw-component-pad: 0.68rem;
    --spw-shell-trace-gap: 0.38rem;
    --spw-shell-surface-padding-inline: 0.3rem;
    --spw-control-padding-inline: 0.54rem;
    --spw-control-gap: 0.22rem;
  }
}
}

/* /public/css/shell/layout.css */
@layer shell {
/* ==========================================================================
   layout.css
   --------------------------------------------------------------------------
   Purpose
   - Site shell, viewport framing, page scaffolding, safe-area behavior,
     generic page rhythm, header/footer/navigation contracts, and broad
     “default page” presentation for spwashi.com.
   - This file should be trustworthy even on pages with minimal markup.
   - It should provide a pleasant generic page by default, while leaving room
     for routes to bias identity later.

   Design stance
   - The shell should feel materially calm, structurally clear, and subtly
     dimensional before any route-specific CSS loads.
   - Defaults should never aggressively tint the whole site into one operator.
   - Generic pages should still feel authored: readable measure, good spacing,
     decent panels, figure treatment, and useful empty-state behavior.
   - Shell semantics should remain low-specificity enough that route files can
     override them without fighting.

   Responsibilities
   - viewport / body / safe area scaffolding
   - generic page surfaces and reading defaults
   - generic page shell defaults beneath the shared site chrome
   - global side walls / brace rails
   - main / article / section / aside / figure shell defaults
   - generic cards, panels, notes, and page intro scaffolds
   - generic responsive behavior
   ========================================================================== */

/* ==========================================================================
   1. Shell root tokens
   ========================================================================== */

:root {
  /* Widths */
  --page-width: 72rem;
  --page-width-reading: 56rem;
  --page-width-wide: 84rem;
  --page-gutter-inline: var(--page-gutter, clamp(0.75rem, 2.5vw, 1.5rem));
  --page-gutter-block: clamp(0.9rem, 2.2vw, 1.8rem);

  /* Vertical rhythm */
  --surface-gap: clamp(1rem, 2vw, 1.35rem);
  --page-stack-gap: clamp(1.1rem, 2.3vw, 1.7rem);
  --page-stack-gap-loose: clamp(1.6rem, 3vw, 2.4rem);
  --page-section-gap: clamp(2rem, 4vw, 3.25rem);
  --page-section-gap-tight: clamp(1.3rem, 2.8vw, 2rem);

  /* Header — alias core token so scroll chrome stays aligned sitewide */
  --shell-header-height: var(--header-height, 4rem);
  --shell-header-min-height: 0;
  --shell-header-pad-inline: clamp(0.85rem, 2vw, 1.2rem);
  --shell-header-pad-block: 0.28rem;
  --shell-header-grid-gap: 0.5rem;

  /* Nav */
  --shell-nav-min-height: max(2.5rem, var(--touch-target-min, 2.75rem));
  --shell-nav-font-size: var(--text-size-nav, 0.88rem);
  --shell-nav-padding-inline: clamp(0.72rem, 1.3vw, 0.92rem);
  --shell-nav-padding-block: 0.38rem;
  --shell-nav-gap-inline: 0.58rem;
  --shell-nav-gap-block: 0.4rem;
  --shell-nav-radius: var(--shape-control, 0.78rem);

  /* Generic surface shell */
  --shell-panel-radius: var(--shape-surface, 10px);
  --shell-panel-radius-tight: var(--shape-component, 6px);
  --shell-panel-radius-loose: var(--shape-floating, 16px);

  --shell-panel-bg:
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.78)) 92%, transparent);
  --shell-panel-bg-soft:
    color-mix(in srgb, var(--surface, rgba(255, 255, 255, 0.62)) 90%, transparent);
  --shell-panel-bg-matte:
    color-mix(in srgb, var(--surface-matte, rgba(247, 244, 238, 0.93)) 94%, transparent);

  --shell-panel-line:
    color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 96%, transparent);
  --shell-panel-line-strong:
    color-mix(in srgb, var(--active-op-border, rgba(0, 128, 128, 0.34)) 90%, transparent);

  --shell-panel-shadow:
    var(--card-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.52)),
    var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03));

  --shell-panel-shadow-hover:
    var(--card-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.52)),
    var(--card-shadow-hover, 0 4px 18px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04));

  --shell-panel-pad-inline: clamp(0.9rem, 2vw, 1.25rem);
  --shell-panel-pad-block: clamp(0.8rem, 1.7vw, 1.1rem);

  /* Generic reading */
  --shell-reading-measure: var(--measure-reading, 68ch);
  --shell-reading-measure-tight: var(--measure-panel, 52ch);
  --shell-reading-measure-compact: var(--measure-card, 42ch);
  --shell-nav-max-width: 74rem;

  /* Generic page hero */
  --shell-hero-pad-inline: clamp(1rem, 2.4vw, 1.5rem);
  --shell-hero-pad-block: clamp(1rem, 2.4vw, 1.4rem);

  /* Footer */
  --shell-footer-min-height: 3.5rem;
  --shell-footer-font-size: var(--text-size-sm, 0.92rem);
  --shell-footer-opacity: 0.92;

  /* Main page shell */
  --spw-main-display: flex;
  --spw-main-direction: column;
  --spw-main-width: var(--page-width);
  --spw-main-gap: var(--surface-gap);
  --spw-main-padding-inline: var(--page-gutter-inline);
  --spw-main-padding-block-start: clamp(1.2rem, 3vw, 2.2rem);
  --spw-main-padding-block-end: calc(
    clamp(2.8rem, 5.5vw, 4.2rem)
    + env(safe-area-inset-bottom)
    + var(--spw-bottom-chrome-clearance, 0px)
  );

  /* Rails / walls */
  --shell-wall-width: 2px;
  --shell-wall-opacity: 0.72;
  --shell-wall-active-opacity: 1;

  /* Motion */
  --shell-duration-fast: var(--duration-fast, 140ms);
  --shell-duration-base: var(--duration-base, 220ms);
  --shell-duration-deliberate: var(--duration-deliberate, 360ms);

  --shell-ease: var(--ease-mechanical, ease);
  --shell-settle-ease: var(--ease-settle, ease);

  /* Z layers */
  --z-base: var(--layer-ground, 1);
  --z-surface: var(--layer-surface, 20);
  --z-floating: var(--layer-floating, 100);
  --z-header: var(--layer-header, 1000);
  --z-priority: var(--layer-priority, 2000);
}

/* ==========================================================================
   2. Body / viewport scaffolding
   ========================================================================== */

/* Shell defaults keep raw HTML routes usable before route CSS loads. */
html {
  min-height: 100%;
  scroll-padding-top: calc(var(--shell-header-height) + 1rem);
  scroll-padding-bottom: calc(
    env(safe-area-inset-bottom)
    + var(--spw-bottom-chrome-clearance, 0px)
    + 0.75rem
  );
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  background:
    linear-gradient(180deg, var(--bg-field, var(--bg, hsl(42 77% 82%))), var(--bg, hsl(42 77% 82%)));
  text-rendering: optimizeLegibility;

  /* Ensure the body itself respects the safe area to prevent horizontal bleed */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);

  /* Shell-friendly defaults */
  line-height: var(--site-line-height, 1.68);
  overflow-wrap: break-word;
}

/* Density is page rhythm; components consume it rather than rename it. */
body[data-spw-shell-density="compact"] {
  --surface-gap: clamp(0.8rem, 1.5vw, 1rem);
  --page-stack-gap: clamp(0.9rem, 1.8vw, 1.2rem);
  --page-section-gap: clamp(1.4rem, 2.6vw, 2rem);
}

body[data-spw-shell-density="roomy"] {
  --surface-gap: clamp(1.15rem, 2.2vw, 1.55rem);
  --page-stack-gap: clamp(1.35rem, 2.8vw, 1.95rem);
  --page-section-gap: clamp(2.4rem, 4.4vw, 3.8rem);
}

/* Generic top-level flow belongs to page regions, not floating chrome. */
body > :where(header, main, footer) {
  position: relative;
}

:where(header, main, footer, [data-spw-layout]) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "shell";
  --spw-debug-layer-color: #22aa66;
}

/* ==========================================================================
   3. Generic page defaults
   --------------------------------------------------------------------------
   These make an otherwise plain page look intentional before route CSS adds
   more specific identity.
   ========================================================================== */

/* main owns the page gutter; nested sections should not add a second page edge. */
main {
  /* Layout */
  display: var(--spw-main-display);
  flex-direction: var(--spw-main-direction);
  gap: var(--spw-main-gap);

  /* Box */
  width: 100%;
  max-width: var(--spw-main-width);
  padding-inline: var(--spw-main-padding-inline);
  margin:
    var(--spw-main-padding-block-start)
    auto
    var(--spw-main-padding-block-end);

  /* Interaction */
  touch-action: pan-y;

  /* Layering / containment */
  container-type: inline-size;
}

:where(main > :where(section, article, aside)) {
  box-sizing: border-box;
  min-width: 0;
  max-inline-size: 100%;
}

/* Stack rhythm stays stable while region metadata arrives after first paint. */
:where(html[data-spw-page-state="booting"], html[data-spw-page-state="interactive"]) :where(main > :where(section, article)) {
  contain: layout style;
}

:where(html[data-spw-page-state="region-enhanced"], html[data-spw-page-state="enhanced"]) :where(main > :where(section, article)) {
  contain: style;
}

/* Layout variants: body[data-spw-layout] / main[data-spw-layout] opt a route into
   different uses of horizontal space on wide screens. Reading is the default.
   "wide" lets key clusters breathe; "atlas" gives a rail for auxiliary content;
   "split" is reading-column + rail for reading routes with navigation context. */
:where(body[data-spw-layout="reading"]) main,
main[data-spw-layout="reading"] {
  --spw-main-width: var(--page-width-reading);
}

:where(body[data-spw-layout="wide"]) main,
main[data-spw-layout="wide"] {
  --spw-main-width: var(--page-width-wide);
}

:where(body[data-spw-layout="atlas"]) main,
main[data-spw-layout="atlas"] {
  --spw-main-width: var(--page-width-atlas);
}

@media (min-width: 92rem) {
  :where(body[data-spw-layout="wide"]) main,
  main[data-spw-layout="wide"] {
    --spw-main-width: min(92rem, calc(100vw - (var(--page-gutter-inline) * 2)));
  }

  :where(body[data-spw-layout="split"]) main,
  main[data-spw-layout="split"],
  :where(body[data-spw-layout="atlas"]) main,
  main[data-spw-layout="atlas"] {
    --spw-main-width: min(var(--page-width-atlas), calc(100vw - (var(--page-gutter-inline) * 2)));
  }
}

/* Split layouts place a narrower reading column next to a rail for
   related-routes, quick-jumps, or locally-collected items. */
@media (min-width: 72rem) {
  /* Split is the shell-owned reading-column + rail contract. */
  :where(body[data-spw-layout="split"]) main,
  main[data-spw-layout="split"] {
    --spw-main-width: var(--page-width-wide);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--attention-rail-width);
    column-gap: var(--attention-rail-gap);
    align-items: start;
  }

  :where(body[data-spw-layout="split"]) main > :not(.spw-gutter-rail),
  main[data-spw-layout="split"] > :not(.spw-gutter-rail) {
    grid-column: 1;
    min-width: 0;
  }

  :where(body[data-spw-layout="split"]) main > .spw-gutter-rail,
  main[data-spw-layout="split"] > .spw-gutter-rail {
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    align-self: start;
    max-height: calc(100dvh - var(--header-height) - 2rem);
    overflow-y: auto;
  }
}

@media (min-width: 72rem) and (max-width: 82rem) {
  :where(body[data-spw-layout="split"]) main,
  main[data-spw-layout="split"] {
    grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 0.28fr);
    column-gap: clamp(0.75rem, 1.4vw, 1rem);
  }
}

/* Gutter rail: auxiliary content that lives beside reading on wide screens
   and collapses into the document flow on narrow ones. */
.spw-gutter-rail {
  display: flex;
  flex-direction: column;
  gap: var(--gap-surface);
  font-size: var(--text-size-sm);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

@media (max-width: 72rem) {
  .spw-gutter-rail {
    order: 99;
    border-top: 1px solid var(--line, rgba(0, 128, 128, 0.18));
    padding-top: var(--gap-surface);
  }
}

main > article {
  display: flex;
  flex-direction: column;
  gap: var(--page-section-gap);
  touch-action: pan-y;
}

/* Gap handles section separation; prevent typography flow from double-spacing */
main > article > * {
  margin-block-start: 0;
}

main > :where(section, aside, nav, article, figure) + :where(section, aside, nav, article, figure) {
  margin-top: 0;
}

:where(main > article > *, main > section > *, main > aside > *) {
  min-width: 0;
}

main :where(section, aside, figure) {
  min-width: 0;
}

main :where(section, aside) {
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
}

main :where(article > h1:first-child, section > h1:first-child) {
  margin-bottom: 0.25rem;
}

main :where(article > p, section > p, aside > p, li, blockquote, figcaption) {
  max-width: var(--shell-reading-measure);
}

main :where(article > ul, article > ol, section > ul, section > ol) {
  max-width: var(--shell-reading-measure-tight);
}

/* Generic page hero / intro */
.page-intro,
.page-hero,
.shell-hero,
.site-hero {
  position: relative;
  display: grid;
  gap: clamp(0.85rem, 1.8vw, 1.2rem);
  padding: var(--shell-hero-pad-block) var(--shell-hero-pad-inline);
  border: 1px solid var(--shell-panel-line);
  border-radius: var(--shell-panel-radius-loose);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 4%, transparent),
      transparent 26%
    ),
    var(--shell-panel-bg);
  box-shadow: var(--shell-panel-shadow);
}

.page-intro > :first-child,
.page-hero > :first-child,
.shell-hero > :first-child,
.site-hero > :first-child {
  margin-top: 0;
}

.page-intro > :last-child,
.page-hero > :last-child,
.shell-hero > :last-child,
.site-hero > :last-child {
  margin-bottom: 0;
}

.page-kicker,
.hero-kicker,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  min-height: 1.7rem;
  padding: 0.14rem 0.54rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 92%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.page-lede,
.hero-lede,
.shell-lede {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: clamp(1rem, 1.2rem + 0.2vw, 1.15rem);
  line-height: 1.72;
  max-width: min(56ch, 100%);
}

/* Generic page clusters and grids */
.page-grid,
.panel-grid,
.card-grid,
.generic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card, 15rem)), 1fr));
  gap: var(--surface-gap);
  min-width: 0;
}

.panel-grid--wide,
.card-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-panel, 17rem)), 1fr));
}

.page-cluster,
.generic-cluster,
.meta-cluster,
.action-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: center;
  min-width: 0;
}

.meta-cluster > :is(code, kbd, samp) {
  flex: 1 1 12rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   4. Generic surface defaults for common page content
   --------------------------------------------------------------------------
   This is intentionally broad so a route with sparse markup still looks good.
   ========================================================================== */

:where(
  .page-panel,
  .generic-panel,
  .info-panel,
  .page-card,
  .generic-card,
  .reading-card,
  .note-card,
  .callout-card
) {
  position: relative;
  min-width: 0;
  padding: var(--shell-panel-pad-block) var(--shell-panel-pad-inline);
  border: 1px solid var(--shell-panel-line);
  border-radius: var(--shell-panel-radius);
  background: var(--shell-panel-bg);
  box-shadow: var(--shell-panel-shadow);
  transition:
    border-color var(--shell-duration-base) var(--shell-ease),
    box-shadow var(--shell-duration-deliberate) var(--shell-settle-ease),
    background-color var(--shell-duration-fast) var(--shell-ease),
    transform var(--shell-duration-fast) var(--shell-settle-ease);
}

:where(
  .page-panel,
  .generic-panel,
  .info-panel,
  .page-card,
  .generic-card,
  .reading-card,
  .note-card,
  .callout-card
):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--active-op-border, rgba(0, 128, 128, 0.34)) 88%, transparent);
  box-shadow: var(--shell-panel-shadow-hover);
}

.callout-card,
.note-card {
  border-inline-start: 0.28rem solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, transparent);
}

.page-panel--matte,
.generic-panel--matte {
  background: var(--shell-panel-bg-matte);
}

.page-card--soft,
.generic-card--soft {
  background: var(--shell-panel-bg-soft);
}

:where(
  .page-panel,
  .generic-panel,
  .info-panel,
  .page-card,
  .generic-card,
  .reading-card,
  .note-card,
  .callout-card
) > :first-child {
  margin-top: 0;
}

:where(
  .page-panel,
  .generic-panel,
  .info-panel,
  .page-card,
  .generic-card,
  .reading-card,
  .note-card,
  .callout-card
) > :last-child {
  margin-bottom: 0;
}

/* Generic panels for figures and screenshots */
figure.page-figure,
figure.generic-figure,
.screenshot-frame,
.media-frame {
  display: grid;
  gap: 0.75rem;
  padding: var(--shell-panel-pad-block) var(--shell-panel-pad-inline);
  border: 1px solid var(--shell-panel-line);
  border-radius: var(--shell-panel-radius);
  background: var(--shell-panel-bg);
  box-shadow: var(--shell-panel-shadow);
}

:where(figure.page-figure, figure.generic-figure, .screenshot-frame, .media-frame) > img,
:where(figure.page-figure, figure.generic-figure, .screenshot-frame, .media-frame) > svg,
:where(figure.page-figure, figure.generic-figure, .screenshot-frame, .media-frame) > video,
:where(figure.page-figure, figure.generic-figure, .screenshot-frame, .media-frame) > canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--shell-panel-radius) - 2px);
}

:where(figure.page-figure, figure.generic-figure, .screenshot-frame, .media-frame) > figcaption {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Generic data / list surfaces */
.data-stack,
.page-index,
.link-index,
.file-index,
.section-index {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.link-row,
.file-row,
.index-row,
.page-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  min-width: 0;
  padding: 0.82rem 0.95rem;
  border: 1px solid var(--shell-panel-line);
  border-radius: var(--shell-panel-radius);
  background: var(--shell-panel-bg);
  box-shadow: var(--shell-panel-shadow);
}

.index-sigil,
.row-sigil,
.file-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--shell-panel-radius-tight);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 64%),
    color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 8%, transparent);
  color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 84%, var(--ink));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ==========================================================================
   5. Side rails / brace walls
   --------------------------------------------------------------------------
   Keep these subtle. The old defaults were too assertive for generic pages.
   ========================================================================== */

.spw-objective-wall,
.spw-boon-wall {
  position: fixed;
  left: 0;
  top: var(--shell-header-height);
  bottom: 0;
  width: var(--shell-wall-width);
  z-index: 198;
  pointer-events: none;
  background: transparent;
  opacity: var(--shell-wall-opacity);
  box-shadow:
    inset -1px 0 0 color-mix(in srgb, var(--objective-brace-color, var(--active-op-color, var(--teal, #008080))) 18%, transparent);
  transition:
    box-shadow var(--shell-duration-deliberate) var(--shell-settle-ease),
    background-color var(--shell-duration-fast) var(--shell-ease),
    opacity var(--shell-duration-fast) var(--shell-ease);
}

.spw-subjective-wall,
.spw-bane-wall {
  position: fixed;
  right: 0;
  top: var(--shell-header-height);
  bottom: 0;
  width: var(--shell-wall-width);
  z-index: 198;
  pointer-events: none;
  background: transparent;
  opacity: var(--shell-wall-opacity);
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--subjective-brace-color, var(--active-op-color, var(--teal, #008080))) 18%, transparent);
  transition:
    box-shadow var(--shell-duration-deliberate) var(--shell-settle-ease),
    background-color var(--shell-duration-fast) var(--shell-ease),
    opacity var(--shell-duration-fast) var(--shell-ease);
}

/* Hide interior content from walls by default */
.spw-objective-wall-char,
.spw-boon-wall-char,
.spw-subjective-wall-char,
.spw-bane-wall-char,
.spw-objective-label,
.spw-subjective-label,
.spw-bane-label,
.spw-pivot-label,
.spw-subjective-scroll-track,
.spw-bane-scroll-track {
  display: none;
}

.spw-objective-wall[role="button"],
.spw-subjective-wall[role="button"],
.spw-boon-wall[role="button"],
.spw-bane-wall[role="button"] {
  cursor: pointer;
  pointer-events: auto;
}

.spw-objective-wall[role="button"]:hover,
.spw-boon-wall[role="button"]:hover {
  opacity: var(--shell-wall-active-opacity);
  background: color-mix(in srgb, var(--objective-brace-wash, rgba(0, 128, 128, 0.08)) 170%, transparent);
  box-shadow:
    inset -2px 0 0 color-mix(in srgb, var(--objective-brace-color, var(--active-op-color, var(--teal, #008080))) 34%, transparent);
}

.spw-subjective-wall[role="button"]:hover,
.spw-bane-wall[role="button"]:hover {
  opacity: var(--shell-wall-active-opacity);
  background: color-mix(in srgb, var(--subjective-brace-wash, rgba(160, 42, 77, 0.08)) 170%, transparent);
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--subjective-brace-color, var(--active-op-color, var(--teal, #008080))) 34%, transparent);
}

.spw-objective-wall[data-spw-pivot-active="true"],
.spw-boon-wall[data-spw-pivot-active="true"] {
  background: color-mix(in srgb, var(--objective-brace-wash, rgba(0, 128, 128, 0.08)) 280%, transparent);
}

.spw-subjective-wall[data-spw-pivot-active="true"],
.spw-bane-wall[data-spw-pivot-active="true"] {
  background: color-mix(in srgb, var(--subjective-brace-wash, rgba(160, 42, 77, 0.08)) 280%, transparent);
}

/* ==========================================================================
   6. Utility shell defaults for common authoring structures
   --------------------------------------------------------------------------
   These support a generic page with decent style depth even without route CSS.
   ========================================================================== */

.page-columns,
.columns-2,
.columns-3 {
  display: grid;
  gap: var(--surface-gap);
  min-width: 0;
}

.page-columns,
.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-meta,
.page-note,
.page-transition,
.inline-note,
.section-note {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.86rem;
  line-height: 1.55;
}

.page-note,
.page-transition,
.section-note {
  padding-left: 0.95rem;
  border-left: 2px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 96%, transparent);
}

.page-rule,
.section-rule,
.soft-rule {
  width: 100%;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent);
  margin: 0;
}

.page-label,
.section-label,
.meta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.page-actions,
.card-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  align-items: center;
}

.page-chip,
.meta-chip,
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.7rem;
  padding: 0.14rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 92%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .page-columns,
  .columns-2,
  .columns-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-intro,
  .page-hero,
  .shell-hero,
  .site-hero {
    padding-inline: 1rem;
  }
}

@media (max-width: 600px) {
  main {
    width: min(calc(100vw - (var(--page-gutter-inline) * 2)), var(--page-width));
  }

  :where(
    .page-panel,
    .generic-panel,
    .info-panel,
    .page-card,
    .generic-card,
    .reading-card,
    .note-card,
    .callout-card,
    figure.page-figure,
    figure.generic-figure,
    .screenshot-frame,
    .media-frame
  ) {
    padding-inline: 0.95rem;
  }
}

@media (max-width: 480px) {
  .index-sigil,
  .row-sigil,
  .file-ext {
    min-width: 3rem;
  }

  .link-row,
  .file-row,
  .index-row,
  .page-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   8. Reduced motion / low processing defaults
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .spw-objective-wall,
  .spw-subjective-wall,
  .spw-boon-wall,
  .spw-bane-wall,
  :where(
    .page-panel,
    .generic-panel,
    .info-panel,
    .page-card,
    .generic-card,
    .reading-card,
    .note-card,
    .callout-card,
    .link-row,
    .file-row,
    .index-row,
    .page-row
  ) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   11. Missing shell integration defaults
   --------------------------------------------------------------------------
   Patch-level shell ownership for skip links, nav interior containment, and
   fallback frame header structures when route/component styling is incomplete.
   ========================================================================== */

/* Frame header structures are owned by the components layer.
   No shell-layer fallbacks needed — components always overrides shell in cascade. */

/* ==========================================================================
   12. A few targeted compatibility bridges
   --------------------------------------------------------------------------
   Keep these at the end so older markup still works while the shell becomes
   more reasonable.
   ========================================================================== */

/* Push floating UI above the home indicator */
[data-attn-register] {
  bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* Old pages sometimes place the header directly under body without classes */
body > header:empty {
  display: none;
}
}

/* /public/css/shell/chrome.css */
@layer shell {
/* ==========================================================================
   chrome.css
   --------------------------------------------------------------------------
   Purpose
   - Own the shared site chrome: sticky header, primary navigation, nav
     disclosure affordances, and the shared site footer.
   - Keep shell chrome concerns separate from generic page scaffolding so
     route surfaces and shell defaults are easier to reason about.
   ========================================================================== */

/* ==========================================================================
   1. Header shell
   ========================================================================== */

/* Skip link is chrome, not shell scaffold. */
.skip-link {
  position: fixed;
  top: 0.55rem;
  left: max(0.55rem, env(safe-area-inset-left));
  z-index: calc(var(--z-priority, 2000) + 10);
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 90%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.92)) 96%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.74rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--shell-duration-fast) var(--shell-ease),
    opacity var(--shell-duration-fast) var(--shell-ease),
    border-color var(--shell-duration-fast) var(--shell-ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: none;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 26%, transparent);
}

:root {
  --spw-bottom-chrome-clearance: 0px;
}

:root:has(.spw-console) {
  --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 3.1rem);
}

:root:has(.spw-console:not(.is-collapsed)) {
  --spw-bottom-chrome-clearance: 5.5rem;
}

:root:has([data-spw-state-inspector-root]) {
  --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 3.35rem);
}

:root:has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) {
  --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 11.5rem);
}

:root:has(.spw-console):has([data-spw-state-inspector-root]) {
  --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 4.85rem);
}

@media (max-width: 720px) {
  :root:has([data-spw-state-inspector-root]) {
    --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 4.1rem);
  }

  :root:has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) {
    --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 13.5rem);
  }

  :root:has(.spw-section-handle, [data-spw-chrome-role="section-handle"]) {
    --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 3.85rem);
  }

  :root:has(.spw-section-handle, [data-spw-chrome-role="section-handle"]):has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) {
    --spw-bottom-chrome-clearance: max(var(--spw-bottom-chrome-clearance, 0px), 14.25rem);
  }
}

/* Chrome owns the persistent page frame. */
:where(.site-header, body > header) {
  --spw-shell-chrome-accent-local:
    var(--spw-shell-chrome-accent, color-mix(in oklab, var(--teal, #008080) 68%, var(--ink, rgba(14, 18, 20, 0.92)) 32%));
  --spw-shell-chrome-line-local:
    var(--spw-shell-chrome-line, color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, var(--line, rgba(14, 18, 20, 0.14)) 82%));
  --spw-header-opacity-local: var(--site-header-opacity, 0.98);
  --spw-header-indicator-opacity: 0.66;
  --spw-header-indicator-shift: 0px;
  --spw-header-trace-opacity: 1;
  --spw-header-trace-shift: 0px;
  --spw-shell-pointer-x: 50%;
  --spw-shell-pointer-y: 0%;
  --spw-shell-pointer-opacity: 0.18;
  --active-op-color: var(--spw-shell-chrome-accent-local);
  --shell-panel-bg:
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 96%, var(--spw-shell-chrome-accent-local) 4%);
  --shell-panel-bg-soft:
    color-mix(in oklab, var(--surface, rgba(255,255,255,0.62)) 98%, var(--spw-shell-chrome-accent-local) 2%);
  --spw-shell-grid-columns: max-content minmax(0, 1fr) max-content max-content max-content;
  --spw-shell-grid-areas: "sigil nav actions tune toggle";
  min-height: var(--shell-header-min-height, 0);
  display: grid;
  grid-template-columns: var(--spw-shell-grid-columns);
  grid-template-areas: var(--spw-shell-grid-areas);
  align-items: center;
  align-content: start;
  row-gap: var(--spw-shell-row-gap, 0.45rem);
  column-gap: var(--shell-header-grid-gap);

  position: sticky;
  top: 0;
  z-index: var(--z-header);

  padding-top: 0;
  padding-bottom: max(var(--shell-header-pad-block), 0.16rem);
  padding-left: max(var(--shell-header-pad-inline), env(safe-area-inset-left));
  padding-right: max(var(--shell-header-pad-inline), env(safe-area-inset-right));

  color: var(--ink, rgba(14, 18, 20, 0.92));
  opacity: var(--spw-header-opacity-local);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--shell-panel-bg, var(--surface-strong, rgba(255,255,255,0.78))) 98%, transparent),
      color-mix(in srgb, var(--shell-panel-bg-soft, var(--surface, rgba(255,255,255,0.62))) 99%, transparent)
    );
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent),
    var(--spw-depth-shell-shadow, 0 2px 10px rgba(0, 0, 0, 0.03));

  backdrop-filter: blur(6px) saturate(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);

  transition:
    background 160ms var(--shell-ease),
    box-shadow 160ms var(--shell-ease),
    opacity 120ms var(--shell-ease),
    border-color 160ms var(--shell-ease);
}

/* shell-trace is gated because it changes header geometry. */
:where(body:not([data-spw-features~="shell-trace"]) .site-header, body:not([data-spw-features~="shell-trace"]) > header) {
  --spw-shell-grid-areas: "sigil nav actions tune toggle";
}

:where(body[data-spw-features~="shell-trace"] .site-header, body[data-spw-features~="shell-trace"] > header),
:where(.site-header:has(.spw-spell-path), body > header:has(.spw-spell-path)) {
  --spw-shell-grid-areas:
    "sigil nav actions tune toggle"
    "trace trace trace trace trace";
}

:where(.site-header.is-scrolled, body > header.is-scrolled) {
  --spw-header-opacity-local: 0.97;
}

@media (pointer: fine) {
  /* Menu lock is for shell navigation only. */
  :where(html[data-spw-shell-menu-lock="true"], body[data-spw-shell-menu-lock="true"]) {
    overflow: hidden;
  }
}

:where(.site-header[data-spw-shell-scroll="lifted"], body > header[data-spw-shell-scroll="lifted"]) {
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent),
    var(--spw-depth-shell-shadow-lifted, 0 6px 18px rgba(0, 0, 0, 0.06));
}

:where(.site-header[data-spw-shell-scroll="deep"], body > header[data-spw-shell-scroll="deep"]) {
  --spw-header-opacity-local: 0.99;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 90%, transparent),
    var(--spw-depth-shell-shadow-deep, 0 10px 28px rgba(0, 0, 0, 0.08));
}

:where(.site-header[data-spw-shell-scroll-direction="down"], body > header[data-spw-shell-scroll-direction="down"]) {
  --spw-header-indicator-opacity: 0.52;
  --spw-header-indicator-shift: -0.08rem;
  --spw-header-trace-opacity: 0.86;
  --spw-header-trace-shift: -0.08rem;
}

:where(.site-header[data-spw-shell-scroll-direction="up"], body > header[data-spw-shell-scroll-direction="up"]) {
  --spw-header-indicator-opacity: 0.72;
  --spw-header-trace-opacity: 1;
}

/* Header guide chrome must never displace the primary nav from the top edge. */
:where(.site-header, body > header) > .spw-semantic-seam,
:where(.site-header, body > header) > .spw-component-guides,
:where(.site-header, body > header) > .spw-component-meta {
  display: none;
}

:where(.site-header, body > header)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in oklab, var(--spw-shell-chrome-accent-local) 6%, transparent) var(--spw-shell-pointer-x, 50%),
      transparent
    );
  opacity: var(--spw-shell-pointer-opacity, 0.26);
  transition: opacity 180ms var(--shell-ease);
}

:where(.site-header[data-spw-shell-pointer="tracking"], body > header[data-spw-shell-pointer="tracking"]) {
  --spw-shell-pointer-opacity: 0.24;
}

/* The bottom line is chrome's objective/subjective brace rail. */
:where(.site-header, body > header)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--objective-brace-color, var(--active-op-color, var(--teal, #008080))) 58%, transparent),
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 72%, transparent) 50%,
      color-mix(in srgb, var(--subjective-brace-color, var(--active-op-color, var(--teal, #008080))) 58%, transparent)
    );
  opacity: 0.34;
  transition: background-color var(--shell-duration-base) var(--shell-ease);
}

.header-sigil {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.5rem;
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 74%, var(--active-op-color, var(--teal, #008080)) 26%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.header-brand {
  grid-area: sigil;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.header-sigil::before,
.site-footer__brand::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: 0.95rem;
  aspect-ratio: 48 / 52;
  background: currentColor;
  opacity: 0.88;
  mask: url('/public/images/logo/spw-mark-mask.svg') center / contain no-repeat;
  -webkit-mask: url('/public/images/logo/spw-mark-mask.svg') center / contain no-repeat;
}

.header-sigil:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
}

.header-sigil[data-spw-grounded="true"] {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.header-op-indicator {
  grid-area: toggle;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding-right: calc(var(--subjective-brace-width, 28px) + 0.75rem);
  color: var(--ink-soft, rgba(14, 18, 20, 0.74));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: var(--spw-header-indicator-opacity, 0.66);
  text-align: right;
  white-space: nowrap;
  transform: translateY(var(--spw-header-indicator-shift, 0px));
  transition:
    opacity 120ms var(--shell-ease),
    color 120ms var(--shell-ease),
    transform 140ms var(--shell-ease);
  user-select: none;
}

.spw-header-actions {
  grid-area: actions;
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.28rem;
  min-width: 0;
  inline-size: max-content;
  max-inline-size: min(38vw, 26rem);
}

:where(.site-header:has(.spw-spell-path),
       body > header:has(.spw-spell-path)) .spw-header-actions {
  min-inline-size: min(14rem, 32vw);
  overflow: clip;
}

.site-header:has(.spw-spell-path) .spw-header-actions,
body > header:has(.spw-spell-path) .spw-header-actions {
  min-inline-size: min(14rem, 32vw);
  overflow: clip;
}

.spw-header-action,
.spw-attention-posture-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: max(2rem, var(--spw-control-min-height, 2.15rem));
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 14%, var(--line, rgba(14,18,20,0.14)) 86%);
  border-radius: var(--shape-control, 0.78rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 96%, var(--spw-shell-chrome-accent-local) 4%);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 84%, var(--spw-shell-chrome-accent-local) 16%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 1px 4px rgba(14, 18, 20, 0.026);
  transition:
    border-color 140ms var(--shell-ease),
    background-color 140ms var(--shell-ease),
    color 140ms var(--shell-ease),
    box-shadow 160ms var(--shell-settle-ease),
    transform 120ms var(--shell-ease);
}

.spw-header-action:is(:hover, :focus-visible),
.spw-attention-posture-pill:is(:hover, :focus-visible) {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 28%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 90%, var(--spw-shell-chrome-accent-local) 10%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 10%, transparent),
    0 2px 7px rgba(14, 18, 20, 0.034);
  outline: none;
  transform: translateY(-1px);
}

.spw-header-action--cauldron {
  flex: 0 0 auto;
  inline-size: 5.6rem;
  padding-inline: 0.7rem;
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 78%, var(--op-action-color, var(--spw-shell-chrome-accent-local)) 22%);
  font-size: var(--text-size-label, 0.76rem);
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(.site-header:has(.spw-spell-path),
       body > header:has(.spw-spell-path)) .spw-header-action--cauldron {
  flex: 0 1 5.4rem;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header:has(.spw-spell-path) .spw-header-action--cauldron,
body > header:has(.spw-spell-path) .spw-header-action--cauldron {
  flex: 0 1 5.4rem;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spw-attention-posture-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.08rem;
  flex: 0 0 auto;
  inline-size: 14.5rem;
  max-inline-size: 14.5rem;
  padding: 0.32rem 0.62rem;
  text-align: left;
}

:where(.site-header:has(.spw-spell-path),
       body > header:has(.spw-spell-path)) .spw-attention-posture-pill {
  flex: 1 1 8.5rem;
  min-inline-size: 0;
  inline-size: auto;
  max-inline-size: 12.4rem;
  overflow: hidden;
}

.site-header:has(.spw-spell-path) .spw-attention-posture-pill,
body > header:has(.spw-spell-path) .spw-attention-posture-pill {
  flex: 1 1 8.5rem;
  min-inline-size: 0;
  inline-size: auto;
  max-inline-size: 12.4rem;
  overflow: hidden;
}

.spw-attention-posture-pill__kicker,
.spw-attention-posture-pill__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spw-attention-posture-pill__kicker {
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.68)) 88%, transparent);
  font-size: 0.56rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-attention-posture-pill__value {
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--spw-shell-chrome-accent-local) 18%);
  font-size: 0.66rem;
  font-weight: 640;
  letter-spacing: 0;
}

.spw-attention-posture-panel {
  position: absolute;
  z-index: calc(var(--spw-shell-z-index, 80) + 4);
  inset-block-start: calc(100% + 0.42rem);
  inset-inline-end: 0;
  display: grid;
  gap: 0.54rem;
  inline-size: min(21rem, calc(100vw - (var(--page-gutter-inline, 1rem) * 2)));
  padding: 0.72rem;
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, var(--line, rgba(14,18,20,0.14)) 82%);
  border-radius: var(--shape-panel, 0.82rem);
  background:
    linear-gradient(180deg, color-mix(in oklab, white 18%, transparent), transparent 64%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.9)) 95%, var(--spw-shell-chrome-accent-local) 5%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 48%, transparent),
    0 14px 34px rgba(14, 18, 20, 0.14);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-family: var(--site-sans-font, Inter, system-ui, sans-serif);
  text-align: left;
}

.spw-attention-posture-panel[hidden] {
  display: none;
}

.spw-attention-posture-panel__topline,
.spw-attention-posture-panel__values > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.spw-attention-posture-panel__topline strong {
  font-size: var(--text-size-label, 0.76rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-attention-posture-panel__close {
  appearance: none;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 1.72rem;
  padding-inline: 0.58rem;
  border: 1px solid color-mix(in oklab, var(--line, rgba(14,18,20,0.14)) 82%, transparent);
  border-radius: calc(var(--shape-control, 0.78rem) - 0.24rem);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 88%, transparent);
  color: color-mix(in oklab, var(--ink, rgba(14,18,20,0.92)) 76%, transparent);
  cursor: pointer;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  font-weight: 680;
  line-height: 1;
  text-transform: uppercase;
}

.spw-attention-posture-panel__summary {
  margin: 0;
  color: color-mix(in oklab, var(--ink-soft, rgba(14,18,20,0.72)) 92%, var(--spw-shell-chrome-accent-local) 8%);
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.35;
}

.spw-attention-posture-panel__values {
  display: grid;
  gap: 0.28rem;
  margin: 0;
}

.spw-attention-posture-panel__values dt,
.spw-attention-posture-panel__values dd {
  margin: 0;
  font-size: var(--text-size-2xs, 0.72rem);
}

.spw-attention-posture-panel__values dt {
  color: color-mix(in oklab, var(--ink-soft, rgba(14,18,20,0.68)) 86%, transparent);
  font-weight: 680;
}

.spw-attention-posture-panel__values dd {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  color: color-mix(in oklab, var(--ink, rgba(14,18,20,0.92)) 84%, var(--spw-shell-chrome-accent-local) 16%);
  font-weight: 680;
  text-align: right;
}

.spw-attention-posture-panel__action {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 1.9rem;
  padding-inline: 0.68rem;
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 24%, var(--line, rgba(14,18,20,0.14)) 76%);
  border-radius: calc(var(--shape-control, 0.78rem) - 0.18rem);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 84%, var(--spw-shell-chrome-accent-local) 10%);
  color: color-mix(in oklab, var(--ink, rgba(14,18,20,0.92)) 82%, var(--spw-shell-chrome-accent-local) 18%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  font-weight: 720;
  text-decoration: none;
  text-transform: uppercase;
}

.header-op-indicator__token {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 76%, var(--spw-shell-chrome-accent-local) 24%);
  font-weight: 700;
}

:where(.site-header, body > header):is(:hover, :focus-within) .header-op-indicator {
  opacity: 0.86;
}

.header-annotation {
  display: inline-flex;
  align-items: center;
  max-width: min(18ch, 28vw);
  padding: 0.1rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--spw-shell-chrome-line-local) 82%, transparent);
  border-radius: var(--shell-panel-radius-tight, 6px);
  background: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 88%, transparent);
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.74)) 78%, var(--spw-shell-chrome-accent-local) 22%);
  font: inherit;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.74;
  transition:
    background-color 140ms var(--shell-ease),
    border-color 140ms var(--shell-ease),
    color 140ms var(--shell-ease),
    opacity 140ms var(--shell-ease),
    transform 140ms var(--shell-ease);
}

.header-annotation:is(:hover, :focus-visible),
.header-annotation[data-spw-annotation-state="preview"],
.header-annotation[data-spw-annotation-state="pinned"] {
  border-color: color-mix(in srgb, var(--spw-shell-chrome-accent-local) 34%, transparent);
  background: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.86)) 86%, var(--spw-shell-chrome-accent-local) 14%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  opacity: 1;
}

.header-annotation[data-spw-annotation-state="pinned"] {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 0 0 1px color-mix(in srgb, var(--spw-shell-chrome-accent-local) 10%, transparent);
}

.spw-header-trace {
  grid-area: trace;
  grid-column: 1 / -1;
  display: none;
  align-items: start;
  min-block-size: 0;
  min-width: 0;
  padding-inline: 0;
  justify-self: stretch;
  opacity: var(--spw-header-trace-opacity, 1);
  transform: translateY(var(--spw-header-trace-shift, 0px));
  transition:
    opacity 120ms var(--shell-ease),
    transform 140ms var(--shell-ease);
}

:where(body[data-spw-features~="shell-trace"]) .spw-header-trace,
:where(.site-header, body > header) .spw-header-trace:has(.spw-spell-path) {
  display: block;
  min-block-size: var(--spw-header-trace-min-block, 2.35rem);
}

@media (min-width: 721px) {
  :where(.site-header, body > header) .spw-header-trace:has(.spw-spell-path[data-spw-breadcrumb-state="open"]) {
    max-block-size: min(9rem, 26dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.spw-header-trace > .spw-experience-memo {
  margin-top: 0.18rem;
}

:where(.site-header, body > header) .spw-spell-path {
  margin: 0;
  min-width: 0;
  max-inline-size: min(100%, 62rem);
  padding: 0.12rem 0.16rem 0;
  border-radius: var(--shape-control, 0.78rem);
  font-size: var(--text-size-label, 0.76rem);
}

.spw-spell-dock {
  min-width: min(26rem, 100%);
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 84%, transparent);
  border-radius: var(--shell-panel-radius);
  background: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 94%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 4px 10px rgba(0,0,0,0.028);
  overflow: clip;
}

.spw-spell-dock-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.38rem;
  min-height: 2rem;
  padding: 0.26rem 0.58rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
  letter-spacing: 0.04em;
}

.spw-spell-dock-summary::-webkit-details-marker {
  display: none;
}

.spw-spell-dock-summary:is(:hover, :focus-visible),
.spw-spell-dock[open] > .spw-spell-dock-summary {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  background: color-mix(in srgb, var(--semantic-accent, var(--active-op-color, var(--teal))) 8%, transparent);
  outline: none;
}

.spw-spell-dock-op,
.spw-spell-dock-count {
  color: var(--semantic-accent, var(--active-op-color, var(--teal)));
  font-weight: 700;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

.spw-spell-dock-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spw-spell-dock-body {
  display: grid;
  gap: 0.5rem;
  padding: 0.16rem 0.58rem 0.62rem;
}

.spw-spell-dock:not([open]) > .spw-spell-dock-body {
  display: none;
}

.spw-sample-dock {
  touch-action: pan-y;
}

.spw-sample-dock-body {
  gap: 0.62rem;
}

.spw-sample-dock__lead {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.spw-sample-preview {
  display: grid;
  gap: 0.34rem;
  padding: 0.56rem 0.62rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 84%, transparent);
  border-radius: calc(var(--shell-panel-radius, 0.9rem) - 0.1rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 68%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 94%, var(--semantic-accent, var(--spw-shell-chrome-accent-local)) 6%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.spw-sample-preview__header {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}

.spw-sample-preview__kind {
  color: var(--semantic-accent, var(--active-op-color, var(--teal)));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spw-sample-preview__label {
  min-width: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
}

.spw-sample-preview__note {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.72rem;
  line-height: 1.35;
}

.spw-sample-preview__confidence {
  margin: 0;
  padding: 0.46rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--semantic-accent-subtle, var(--line)) 82%, transparent);
  border-radius: calc(var(--shell-panel-radius, 0.9rem) - 0.22rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--semantic-accent, var(--spw-shell-chrome-accent-local)) 7%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 92%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.7rem;
  line-height: 1.36;
}

.spw-sample-preview__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.34rem 0.5rem;
  margin: 0;
}

.spw-sample-preview__field {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.spw-sample-preview__field dt {
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 84%, var(--spw-shell-chrome-accent-local) 16%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-sample-preview__field dd,
.spw-sample-preview__ancestry strong {
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: 0.71rem;
  line-height: 1.3;
  word-break: break-word;
}

.spw-sample-preview__field--confidence dd,
.spw-sample-preview__field--inventory dd,
.spw-sample-preview__field--recover dd {
  color: color-mix(in srgb, var(--semantic-accent-emphasis, var(--spw-shell-chrome-accent-local)) 68%, var(--ink, #111) 32%);
  font-weight: 650;
}

.spw-sample-preview__ancestry {
  display: grid;
  gap: 0.1rem;
  margin: 0;
}

.spw-sample-preview__ancestry > span {
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 84%, var(--spw-shell-chrome-accent-local) 16%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-sample-chip-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.spw-sample-chip {
  /* Align with operator-chip + semantic accent system for consistency across chrome */
  --sample-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 94%, var(--semantic-accent, var(--active-op-color, var(--teal))) 6%);
  --sample-chip-border: color-mix(in oklab, var(--semantic-accent, var(--active-op-color, var(--teal))) 16%, var(--line, rgba(14,18,20,0.14)) 84%);
  --sample-chip-ink: var(--ink, rgba(14, 18, 20, 0.92));

  display: inline-flex;
  align-items: center;
  gap: var(--spw-control-gap, 0.28rem);
  min-height: var(--spw-control-min-height, 2.15rem);
  padding: var(--spw-control-padding-block, 0.26rem) var(--spw-control-padding-inline, 0.72rem);
  border: 1px solid var(--sample-chip-border);
  border-radius: var(--spw-control-radius, var(--shape-control, 0.78rem));
  background: var(--sample-chip-bg);
  color: var(--sample-chip-ink);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-chip, 0.82rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--spw-control-transition-fast),
    border-color var(--spw-control-transition-fast),
    color var(--spw-control-transition-fast),
    transform var(--spw-control-transition-fast),
    box-shadow var(--spw-control-transition-base);
}

.spw-sample-chip:is(:hover, :focus-visible),
.spw-sample-chip[aria-pressed="true"] {
  --sample-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 90%, var(--semantic-accent, var(--active-op-color, var(--teal))) 10%);
  --sample-chip-border: color-mix(in oklab, var(--semantic-accent, var(--active-op-color, var(--teal))) 28%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--semantic-accent, var(--active-op-color, var(--teal))) 18%, transparent);
}

.spw-sample-chip__token {
  color: var(--semantic-accent, var(--active-op-color, var(--teal)));
  font-weight: 700;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

.spw-sample-chip[data-spw-sample-kind="route"] {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--semantic-accent, var(--active-op-color, var(--teal))) 12%);
}

/* ==========================================================================
   2. Primary navigation
   ========================================================================== */

:where(.site-header nav, body > header nav) {
  grid-area: nav;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-inline-size: min(100%, var(--shell-nav-max-width));
  justify-self: stretch;
  z-index: var(--z-base);
  position: relative;
  margin-inline: auto;
  padding: var(--spw-shell-surface-padding-block, 0.42rem) var(--spw-shell-surface-padding-inline, 0.52rem);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  border: 1.5px solid color-mix(in oklab, var(--spw-shell-chrome-line-local) 86%, transparent);
  border-radius: var(--shell-panel-radius-loose);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 60%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 92%, var(--spw-shell-chrome-accent-local) 8%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    var(--spw-depth-card-shadow, 0 4px 12px rgba(0,0,0,0.032));
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 1.1rem,
    #000 calc(100% - 1.1rem),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 1.1rem,
    #000 calc(100% - 1.1rem),
    transparent
  );
}

/* Mobile responsiveness + ornament distribution for nav:
   - Better horizontal rhythm on small screens via snap + slightly larger
     comfortable targets.
   - Nav surface can host .spw-site-rhythm for living momentum without
     competing with link text. */
@media (max-width: 720px) {
  :where(.site-header nav, body > header nav) {
    padding-inline: 0.35rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  :where(.site-header nav a, body > header nav a) {
    scroll-snap-align: center;
    padding-inline: 0.35rem; /* slightly more comfortable touch targets */
  }
}

/* Linking surface + ornament + momentum distribution on primary nav.
   Nav links (the main linking surface in chrome) participate in site rhythm
   and spell-grounded states for stronger visual momentum. Uses existing
   operator and rhythm primitives so distribution feels native. */
:where(.site-header nav a, body > header nav a) {
  transition:
    color var(--ornament-duration-fast) var(--ornament-ease),
    opacity var(--ornament-duration-base) var(--ornament-ease),
    transform var(--ornament-duration-fast) var(--ornament-settle-ease);
}

/* When a nav link is the current route or carries spell momentum (grounded),
   it picks up a bit more of the living rhythm without overpowering text. */
:where(.site-header nav a[data-spw-grounded="true"],
       body > header nav a[data-spw-grounded="true"],
       .site-header nav a[aria-current="page"],
       body > header nav a[aria-current="page"]) {
  opacity: 0.98;
}

:where(.site-header nav .spw-site-rhythm,
       body > header nav .spw-site-rhythm) {
  opacity: 0.5;
  margin-inline-start: 0.2rem;
}

:where(.site-header[data-spw-menu-mode="inline"] nav, body > header[data-spw-menu-mode="inline"] nav) {
  justify-content: flex-start;
}

:where(.site-header nav, body > header nav)::-webkit-scrollbar {
  display: none;
}

:where(.site-header nav[hidden], body > header nav[hidden]) {
  display: none !important;
}

:where(.site-header[data-spw-menu="closed"] nav, body > header[data-spw-menu="closed"] nav) {
  background: color-mix(in oklab, var(--surface, rgba(255,255,255,0.62)) 92%, var(--spw-shell-chrome-accent-local) 8%);
}

:where(.site-header[data-spw-menu-phase="approach"] nav, body > header[data-spw-menu-phase="approach"] nav) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 11px rgba(0,0,0,0.03);
}

:where(.site-header[data-spw-menu-phase="contact"] nav, body > header[data-spw-menu-phase="contact"] nav) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 24%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 8%, transparent),
    0 5px 13px rgba(0,0,0,0.032);
}

:where(.site-header[data-spw-menu-phase="projecting"] nav, body > header[data-spw-menu-phase="projecting"] nav) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 30%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent),
    0 6px 14px rgba(0,0,0,0.036);
}

/* Menu pressure is a documented shell signal, not a hidden layout accident. */
:where(.site-header[data-spw-menu-pressure="compressed"] nav, body > header[data-spw-menu-pressure="compressed"] nav),
:where(.site-header[data-spw-menu-pressure="crowded"] nav, body > header[data-spw-menu-pressure="crowded"] nav) {
  border-style: solid;
  border-width: 1.5px;
}

:where(.site-header[data-spw-menu-topology="drawer-field"] nav, body > header[data-spw-menu-topology="drawer-field"] nav) {
  background:
    linear-gradient(180deg, var(--spw-shell-mobile-sheen, rgba(255,255,255,0.18)), transparent 64%),
    var(--spw-shell-mobile-panel-bg, color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 94%, var(--spw-shell-chrome-accent-local) 6%));
}

:where(.site-header[data-spw-menu-topology="screen-field"] nav, body > header[data-spw-menu-topology="screen-field"] nav) {
  background:
    linear-gradient(180deg, var(--spw-shell-mobile-sheen, rgba(255,255,255,0.2)), transparent 64%),
    var(--spw-shell-mobile-panel-bg, color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 90%, var(--spw-shell-chrome-accent-local) 10%));
}

:where(.site-header[data-spw-menu-reversible="true"] nav, body > header[data-spw-menu-reversible="true"] nav) {
  --spw-shell-return-ring:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 6%, transparent);
  box-shadow: var(--spw-shell-return-ring), 0 4px 12px rgba(0,0,0,0.032);
}

/* Shell motion stays local: explain state changes with transform/opacity on the field itself. */
:where(.site-header nav, body > header nav) {
  contain: paint style;
  transform-origin: top center;
}

:where(.site-header:has(.spw-route-menu[open]) nav, body > header:has(.spw-route-menu[open]) nav) {
  overflow: visible;
  contain: style;
}

@keyframes spw-shell-field-project {
  0% {
    opacity: 0.7;
    transform: translateY(-0.2rem) scaleY(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes spw-shell-toggle-project {
  0% {
    transform: translateY(-0.12rem) scale(0.985);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes spw-shell-toggle-settle {
  0% {
    transform: translateY(0.08rem);
    opacity: 0.84;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes spw-shell-copy-clarify {
  0% {
    opacity: 0.66;
    transform: translateY(-0.08rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(.site-header[data-spw-menu-clarity="project"] nav:not([hidden]), body > header[data-spw-menu-clarity="project"] nav:not([hidden])) {
  animation: spw-shell-field-project 240ms var(--shell-settle-ease);
}

.spw-nav-toggle {
  grid-area: toggle;
  display: inline-flex;
  justify-self: end;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spw-shell-link-gap, 0.38rem) + 0.14rem);
  min-height: max(var(--shell-nav-min-height), var(--spw-control-min-height, 2.15rem));
  margin-inline-end: 0;
  padding:
    calc(var(--spw-control-padding-block, 0.26rem) + 0.1rem)
    calc(var(--spw-control-padding-inline, 0.68rem) + 0.08rem);
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 16%, var(--line, rgba(14,18,20,0.14)) 84%);
  border-radius: var(--shape-control, 0.78rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 62%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 98%, var(--spw-shell-chrome-accent-local) 2%);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--spw-shell-chrome-accent-local) 18%);
  font: inherit;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  contain: paint style;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    var(--spw-depth-card-shadow, 0 2px 6px rgba(0, 0, 0, 0.022));
  transition:
    border-color var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    background var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    color var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    box-shadow var(--spw-motion-settle, var(--shell-duration-base) var(--shell-settle-ease)),
    transform var(--spw-motion-settle, var(--shell-duration-fast) var(--shell-settle-ease));
}

.spw-nav-toggle-copy {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  text-align: left;
  transform-origin: left center;
}

.spw-nav-toggle-label {
  line-height: 1;
}

.spw-nav-toggle-state,
.spw-nav-toggle-meta {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: none;
}

.spw-nav-toggle-state {
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.68)) 88%, transparent);
}

.spw-nav-toggle-meta {
  color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 74%, var(--ink-soft, rgba(14, 18, 20, 0.68)) 26%);
  white-space: nowrap;
}

.spw-nav-toggle:hover,
.spw-nav-toggle:focus-visible {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 28%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 92%, var(--spw-shell-chrome-accent-local) 8%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 12%, transparent),
    0 3px 8px rgba(0, 0, 0, 0.024);
  transform: translateY(var(--spw-control-hover-lift, -1px));
  outline: none;
}

.spw-nav-toggle[aria-expanded="true"] {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 34%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 88%, var(--spw-shell-chrome-accent-local) 12%);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 72%, var(--spw-shell-chrome-accent-local) 28%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 14%, transparent),
    0 4px 10px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 6%, rgba(0, 0, 0, 0.08));
}

.spw-nav-toggle:active {
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition-duration: var(--touch-acknowledge, 90ms);
  transition-timing-function: var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1));
}

:where(.site-header[data-spw-menu-phase="contact"] .spw-nav-toggle, body > header[data-spw-menu-phase="contact"] .spw-nav-toggle),
:where(.site-header[data-spw-menu-phase="projecting"] .spw-nav-toggle, body > header[data-spw-menu-phase="projecting"] .spw-nav-toggle) {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 24%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 92%, var(--spw-shell-chrome-accent-local) 8%);
}

:where(.site-header[data-spw-menu-phase="settling"] .spw-nav-toggle, body > header[data-spw-menu-phase="settling"] .spw-nav-toggle) {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 10%, transparent),
    0 2px 5px rgba(0, 0, 0, 0.02);
}

:where(.site-header[data-spw-menu-reversible="true"] .spw-nav-toggle-meta, body > header[data-spw-menu-reversible="true"] .spw-nav-toggle-meta) {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.16rem;
}

:where(.site-header[data-spw-menu-clarity="project"] .spw-nav-toggle, body > header[data-spw-menu-clarity="project"] .spw-nav-toggle) {
  animation: spw-shell-toggle-project 220ms var(--shell-settle-ease);
}

:where(.site-header[data-spw-menu-clarity="settle"] .spw-nav-toggle, body > header[data-spw-menu-clarity="settle"] .spw-nav-toggle) {
  animation: spw-shell-toggle-settle 180ms var(--shell-settle-ease);
}

:where(.site-header[data-spw-menu-changed~="pressure"] .spw-nav-toggle-copy, body > header[data-spw-menu-changed~="pressure"] .spw-nav-toggle-copy),
:where(.site-header[data-spw-menu-changed~="mode"] .spw-nav-toggle-copy, body > header[data-spw-menu-changed~="mode"] .spw-nav-toggle-copy),
:where(.site-header[data-spw-menu-changed~="state"] .spw-nav-toggle-copy, body > header[data-spw-menu-changed~="state"] .spw-nav-toggle-copy) {
  animation: spw-shell-copy-clarify 180ms ease-out;
}

.spw-nav-toggle-glyph {
  position: relative;
  display: inline-block;
  width: 0.9rem;
  height: 0.65rem;
}

.spw-nav-toggle-glyph::before,
.spw-nav-toggle-glyph::after,
.spw-nav-toggle-glyph {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
}

.spw-nav-toggle-glyph {
  background-size: 100% 1.5px;
  background-position: center;
}

.spw-nav-toggle-glyph::before,
.spw-nav-toggle-glyph::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background-size: 100% 100%;
}

.spw-nav-toggle-glyph::before {
  top: 0;
}

.spw-nav-toggle-glyph::after {
  bottom: 0;
}

:where(.site-header ul, body > header ul) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--shell-nav-gap-block) + 0.08rem) calc(var(--shell-nav-gap-inline) - 0.06rem);
  list-style: none;
  margin: 0;
  padding: 0.48rem 0;
  min-width: 0;
  width: max-content;
  min-width: 100%;
  max-width: none;
}

:where(.site-header[data-spw-menu-mode="inline"] ul, body > header[data-spw-menu-mode="inline"] ul) {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

:where(.site-header li, body > header li) {
  margin: 0;
  min-width: 0;
  flex: 0 0 auto;
}

:where(.site-header nav a, body > header nav a) {
  --spw-shell-link-trace-scale: 0.24;
  --spw-shell-link-trace-opacity: 0;
  --spw-shell-link-trace-weight: 1.5px;
  --spw-shell-link-hover-trace-opacity: 0.74;
  --spw-shell-link-hover-trace-weight: 2px;
  --spw-shell-link-hover-surface-mix: 96%;
  --spw-shell-link-hover-bg-mix: 4%;
  --spw-shell-link-hover-border-mix: 12%;
  --spw-shell-link-current-trace-opacity: 0.88;
  --spw-shell-link-current-surface-mix: 94%;
  --spw-shell-link-current-bg-mix: 6%;
  --spw-shell-link-current-border-mix: 18%;
  --spw-shell-link-grounded-trace-opacity: 0.58;
  --spw-shell-link-grounded-surface-mix: 96%;
  --spw-shell-link-grounded-bg-mix: 4%;
  --spw-shell-link-grounded-border-mix: 12%;
  --spw-shell-guided-accent:
    color-mix(in oklab, var(--spw-shell-chrome-accent-local) 56%, var(--ink, rgba(14, 18, 20, 0.92)) 44%);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--spw-shell-link-gap, 0.38rem);
  min-height: max(var(--shell-nav-min-height), var(--spw-control-min-height, 2.15rem));
  min-width: 0;
  padding: calc(var(--shell-nav-padding-block) + 0.05rem) calc(var(--shell-nav-padding-inline) - 0.04rem);
  border: 1px solid transparent;
  border-radius: var(--shell-nav-radius);
  position: relative;
  overflow: clip;
  text-decoration: none;
  font-size: var(--shell-nav-font-size);
  font-weight: 500;
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 86%, transparent);
  line-height: var(--spw-control-line-height, 1.04);
  text-align: center;
  text-wrap: nowrap;
  white-space: nowrap;
  transition:
    background-color var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    border-color var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    color var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    box-shadow var(--spw-motion-settle, var(--shell-duration-base) var(--shell-settle-ease)),
    transform var(--spw-motion-settle, var(--shell-duration-fast) var(--shell-settle-ease));
}

:where(html[data-spw-interaction-tuner="responsive"]) :where(.site-header nav a, body > header nav a) {
  --spw-shell-link-hover-trace-opacity: 0.82;
  --spw-shell-link-hover-surface-mix: 94%;
  --spw-shell-link-hover-bg-mix: 6%;
  --spw-shell-link-hover-border-mix: 16%;
  --spw-shell-link-current-surface-mix: 92%;
  --spw-shell-link-current-bg-mix: 8%;
  --spw-shell-link-grounded-surface-mix: 95%;
  --spw-shell-link-grounded-bg-mix: 5%;
}

:where(html[data-spw-interaction-tuner="expressive"]) :where(.site-header nav a, body > header nav a) {
  --spw-shell-link-hover-trace-opacity: 0.92;
  --spw-shell-link-hover-trace-weight: 2.5px;
  --spw-shell-link-hover-surface-mix: 92%;
  --spw-shell-link-hover-bg-mix: 8%;
  --spw-shell-link-hover-border-mix: 20%;
  --spw-shell-link-current-trace-opacity: 1;
  --spw-shell-link-current-surface-mix: 90%;
  --spw-shell-link-current-bg-mix: 10%;
  --spw-shell-link-current-border-mix: 24%;
  --spw-shell-link-grounded-trace-opacity: 0.72;
  --spw-shell-link-grounded-surface-mix: 93%;
  --spw-shell-link-grounded-bg-mix: 7%;
  --spw-shell-link-grounded-border-mix: 18%;
}

:where(.site-header nav a, body > header nav a)::after {
  content: "";
  position: absolute;
  inset: auto 0.62rem 0.32rem;
  height: var(--spw-shell-link-trace-weight, 1.5px);
  border-radius: 999px;
  background: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 70%, transparent);
  opacity: var(--spw-shell-link-trace-opacity, 0);
  transform: scaleX(var(--spw-shell-link-trace-scale, 0.24));
  transform-origin: center;
  transition:
    opacity var(--spw-motion-quick, var(--shell-duration-fast) var(--shell-ease)),
    transform var(--spw-motion-settle, var(--shell-duration-base) var(--shell-settle-ease));
  pointer-events: none;
}

:where(.site-header nav a, body > header nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip) {
  gap: 0.34rem;
}

:where(.site-header nav a, body > header nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip)::before {
  content: attr(data-spw-nav-prefix);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  color: color-mix(in srgb, var(--spw-shell-chrome-accent-local) 72%, var(--ink));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

:where(.site-header nav a, body > header nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip)::after {
  display: none;
}

:where(.site-header nav a, body > header nav a)[data-spw-nav-destination="projection"]:not(.operator-chip) {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 14%, transparent);
}

:where(.site-header nav a, body > header nav a)[data-spw-nav-destination="settle"][aria-current="page"] {
  --spw-shell-link-current-border-mix: 22%;
}

:where(.site-header nav a, body > header nav a):is(:hover, :focus-visible) {
  --spw-shell-link-trace-scale: 1;
  --spw-shell-link-trace-opacity: var(--spw-shell-link-hover-trace-opacity, 0.74);
  --spw-shell-link-trace-weight: var(--spw-shell-link-hover-trace-weight, 2px);
  background-color: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) var(--spw-shell-link-hover-surface-mix, 96%), var(--spw-shell-chrome-accent-local) var(--spw-shell-link-hover-bg-mix, 4%));
  color: var(--ink, rgba(14, 18, 20, 0.92));
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) var(--spw-shell-link-hover-border-mix, 12%), transparent);
  box-shadow: none;
  outline: none;
}

:where(.site-header[data-spw-shell-pointer="tracking"] nav a:is(:hover, :focus-visible),
body > header[data-spw-shell-pointer="tracking"] nav a:is(:hover, :focus-visible)) {
  box-shadow: none;
}

:where(.site-header nav a[aria-current="page"], body > header nav a[aria-current="page"]) {
  --spw-shell-link-trace-scale: 1;
  --spw-shell-link-trace-opacity: var(--spw-shell-link-current-trace-opacity, 0.88);
  --spw-shell-link-trace-weight: 2px;
  background-color: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) var(--spw-shell-link-current-surface-mix, 94%), var(--spw-shell-chrome-accent-local) var(--spw-shell-link-current-bg-mix, 6%));
  color: var(--ink, rgba(14, 18, 20, 0.92));
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) var(--spw-shell-link-current-border-mix, 18%), transparent);
  box-shadow: none;
}

:where(.site-header nav a[data-spw-grounded="true"], body > header nav a[data-spw-grounded="true"]) {
  --spw-shell-link-trace-scale: 0.82;
  --spw-shell-link-trace-opacity: var(--spw-shell-link-grounded-trace-opacity, 0.58);
  --spw-shell-link-trace-weight: 1.5px;
  background-color: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) var(--spw-shell-link-grounded-surface-mix, 96%), var(--spw-shell-chrome-accent-local) var(--spw-shell-link-grounded-bg-mix, 4%));
  color: var(--spw-shell-guided-accent);
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) var(--spw-shell-link-grounded-border-mix, 12%), transparent);
  box-shadow: none;
  text-decoration: none;
}

@media (min-width: 981px) {
  :where(.site-header, body > header) {
    --shell-header-height: 3.1rem;
    --shell-header-pad-block: 0.12rem;
    --spw-shell-row-gap: 0.28rem;
  }

  :where(.site-header nav, body > header nav) {
    justify-self: stretch;
    width: 100%;
    max-inline-size: min(100%, var(--shell-nav-max-width));
    padding: 0.28rem 0.42rem;
    border-radius: calc(var(--shell-panel-radius-loose) - 0.16rem);
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 0.85rem,
      #000 calc(100% - 0.85rem),
      transparent
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 0.85rem,
      #000 calc(100% - 0.85rem),
      transparent
    );
  }

  :where(.site-header ul, body > header ul) {
    width: max-content;
    min-width: 0;
    padding-block: 0.22rem;
    gap: 0.12rem 0.2rem;
  }

  :where(.site-header nav a, body > header nav a) {
    min-height: 1.9rem;
    padding: 0.18rem 0.44rem;
  }

  .spw-nav-toggle {
    min-inline-size: clamp(8.75rem, 10vw, 10.75rem);
  }

  :where(.site-header[data-spw-menu-mode="inline"] .spw-shell-tools-summary__label,
         body > header[data-spw-menu-mode="inline"] .spw-shell-tools-summary__label) {
    display: inline;
  }

  :where(.site-header[data-spw-shell-layout="inline-stacked"] nav,
         body > header[data-spw-shell-layout="inline-stacked"] nav,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] nav,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] nav,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] nav,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] nav) {
    justify-self: stretch;
    width: 100%;
    max-inline-size: none;
  }

  :where(.site-header[data-spw-shell-layout="inline-stacked"] ul,
         body > header[data-spw-shell-layout="inline-stacked"] ul,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] ul,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] ul,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] ul,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] ul) {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.2rem 0.28rem;
  }

  :where(.site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] .spw-nav-toggle-meta,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] .spw-nav-toggle-meta,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] .spw-nav-toggle-meta,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] .spw-nav-toggle-meta) {
    display: none;
  }

  .header-sigil {
    font-size: var(--text-size-2xs, 0.72rem);
  }

  .spw-header-actions {
    max-inline-size: min(36vw, 19rem);
  }

  .spw-attention-posture-pill {
    inline-size: 12.4rem;
    max-inline-size: 12.4rem;
  }

  .header-op-indicator {
    font-size: var(--text-size-2xs, 0.72rem);
    padding-right: calc(var(--subjective-brace-width, 28px) * 0.35);
  }

  .spw-shell-tools-summary {
    min-block-size: 1.92rem;
    padding-inline: 0.42rem 0.5rem;
  }

  .spw-shell-tools-summary__label {
    font-size: 0.64rem;
    letter-spacing: 0.07em;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  :where(.site-header[data-spw-menu-mode="inline"] ul, body > header[data-spw-menu-mode="inline"] ul) {
    flex-wrap: wrap;
    justify-content: center;
  }
}

:where(.site-header[data-spw-nav-fit="tight"], body > header[data-spw-nav-fit="tight"]) {
  --shell-nav-font-size: var(--text-size-chip, 0.84rem);
  --shell-nav-gap-inline: 0.48rem;
}

:where(.site-header[data-spw-nav-fit="compressed"], body > header[data-spw-nav-fit="compressed"]) {
  --shell-nav-font-size: var(--text-size-label, 0.8rem);
  --shell-nav-gap-inline: 0.36rem;
  --shell-nav-padding-inline: 0.64rem;
}

.spw-route-menu-host {
  position: relative;
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.spw-route-menu {
  position: relative;
}

/* Shell header placement — grid ownership lives here; control grammar in components/shell-controls.css */

:where(.site-header[data-spw-shell-end-slot="indicator"] .spw-nav-toggle,
       body > header[data-spw-shell-end-slot="indicator"] .spw-nav-toggle) {
  display: none;
}

:where(.site-header[data-spw-shell-end-slot="toggle"] .header-op-indicator,
       body > header[data-spw-shell-end-slot="toggle"] .header-op-indicator) {
  display: none;
}

:where(.site-header[data-spw-shell-layout="inline-ribbon"], body > header[data-spw-shell-layout="inline-ribbon"]) {
  --spw-shell-grid-columns: max-content minmax(0, 1fr) max-content max-content max-content;
  --spw-shell-grid-areas: "sigil nav actions tune toggle";
}

:where(.site-header[data-spw-shell-layout="inline-tablet"], body > header[data-spw-shell-layout="inline-tablet"]) {
  --spw-shell-grid-columns: minmax(0, 1fr) auto auto auto;
  --spw-shell-grid-areas:
    "sigil actions tune toggle"
    "nav nav nav nav";
  row-gap: 0.34rem;
}

:where(.site-header[data-spw-shell-layout="inline-stacked"], body > header[data-spw-shell-layout="inline-stacked"]) {
  --spw-shell-grid-columns: minmax(0, 1fr) auto auto auto;
  --spw-shell-grid-areas:
    "sigil actions tune toggle"
    "nav nav nav nav";
  align-items: start;
}

@media (min-width: 981px) {
  :where(.site-header[data-spw-shell-layout="inline-stacked"], body > header[data-spw-shell-layout="inline-stacked"]) {
    --spw-shell-grid-columns: minmax(0, 1fr) minmax(14rem, 19rem) 0 max-content;
  }

  :where(.site-header[data-spw-shell-layout="inline-stacked"] .spw-header-actions,
         body > header[data-spw-shell-layout="inline-stacked"] .spw-header-actions) {
    inline-size: 100%;
    max-inline-size: min(32vw, 19rem);
  }

  .site-header[data-spw-shell-layout="inline-stacked"] .spw-header-actions,
  body > header[data-spw-shell-layout="inline-stacked"] .spw-header-actions {
    inline-size: 100%;
    max-inline-size: min(32vw, 19rem);
  }
}

:where(.site-header[data-spw-shell-layout="toggle-field"], body > header[data-spw-shell-layout="toggle-field"]) {
  --spw-shell-grid-columns: minmax(0, 1fr) auto auto;
  --spw-shell-grid-areas:
    "sigil actions toggle"
    "tools tools tools";
  gap: var(--spw-shell-row-gap, 0.25rem);
}

:where(body[data-spw-features~="shell-trace"] .site-header[data-spw-shell-layout="inline-ribbon"],
       body[data-spw-features~="shell-trace"] > header[data-spw-shell-layout="inline-ribbon"]) {
  --spw-shell-grid-areas:
    "sigil nav actions tune toggle"
    "trace trace trace trace trace";
}

@media (min-width: 981px) {
  .site-header:has(.spw-spell-path),
  body > header:has(.spw-spell-path) {
    --spw-shell-grid-columns: max-content minmax(0, 1fr) minmax(14rem, 19rem) 0 max-content;
  }

  :where(body[data-spw-features~="shell-trace"] .site-header[data-spw-shell-layout="inline-ribbon"]:has(.spw-spell-path),
         body[data-spw-features~="shell-trace"] > header[data-spw-shell-layout="inline-ribbon"]:has(.spw-spell-path)) {
    --spw-shell-grid-columns: max-content minmax(0, 1fr) minmax(14rem, 19rem) 0 max-content;
  }
}

:where(body[data-spw-features~="shell-trace"] .site-header[data-spw-shell-layout="inline-tablet"],
       body[data-spw-features~="shell-trace"] > header[data-spw-shell-layout="inline-tablet"],
       body[data-spw-features~="shell-trace"] .site-header[data-spw-shell-layout="inline-stacked"],
       body[data-spw-features~="shell-trace"] > header[data-spw-shell-layout="inline-stacked"]) {
  --spw-shell-grid-areas:
    "sigil actions tune toggle"
    "nav nav nav nav"
    "trace trace trace trace";
}

:where(.site-header[data-spw-shell-tune-surface="knob"] .spw-shell-tools-disclosure,
       body > header[data-spw-shell-tune-surface="knob"] .spw-shell-tools-disclosure) {
  display: block;
  grid-area: tune;
  justify-self: end;
  align-self: center;
}

:where(.site-header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-disclosure,
       body > header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-disclosure) {
  display: block;
  grid-area: actions;
  justify-self: end;
  align-self: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

:where(.site-header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-summary,
       body > header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-summary) {
  min-block-size: 1.82rem;
  padding-inline: 0.34rem;
}

:where(.site-header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-summary__label,
       body > header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-summary__label) {
  display: none;
}

:where(.site-header[data-spw-shell-tune-surface="strip"] .spw-shell-tools-disclosure,
       body > header[data-spw-shell-tune-surface="strip"] .spw-shell-tools-disclosure) {
  display: block;
  grid-area: tools;
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: stretch;
  overflow: clip;
}

:where(.site-header[data-spw-shell-tune-surface="knob"] .spw-shell-tools-disclosure[open] > .spw-shell-utility-row,
       body > header[data-spw-shell-tune-surface="knob"] .spw-shell-tools-disclosure[open] > .spw-shell-utility-row) {
  position: absolute;
  z-index: calc(var(--z-header, 1000) + 6);
  inset-block-start: calc(100% + 0.38rem);
  inset-inline-end: 0;
  inline-size: min(24rem, calc(100vw - (var(--page-gutter-inline, 1rem) * 2)));
  max-inline-size: min(24rem, calc(100vw - (var(--page-gutter-inline, 1rem) * 2)));
  border-radius: var(--shape-panel, 0.82rem);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 48%, transparent),
    0 14px 34px rgba(14, 18, 20, 0.14);
}

:where(.site-header[data-spw-shell-tune-surface="strip"] .spw-shell-tools-disclosure[open] > .spw-shell-utility-row,
       body > header[data-spw-shell-tune-surface="strip"] .spw-shell-tools-disclosure[open] > .spw-shell-utility-row) {
  position: static;
  inline-size: 100%;
  max-inline-size: 100%;
  box-shadow: none;
}

:where(.site-header[data-spw-shell-tune-surface="strip"] .spw-attention-posture-panel,
       body > header[data-spw-shell-tune-surface="strip"] .spw-attention-posture-panel) {
  position: fixed;
  inset-block-start: calc(var(--spw-shell-menu-offset, var(--shell-header-height, 4rem)) + 0.55rem);
  inset-inline: var(--page-gutter-inline, 1rem);
  inline-size: auto;
  max-inline-size: none;
}

@media (max-width: 720px) {
  :where(.site-header:not([data-spw-shell-layout]), body > header:not([data-spw-shell-layout])) {
    --spw-shell-grid-columns: minmax(0, 1fr) auto auto;
    --spw-shell-grid-areas:
      "sigil actions toggle"
      "tools tools tools";
  }
}

@media (max-width: 420px) {
  :where(.site-header[data-spw-shell-tune-surface="strip"] .spw-shell-tools-summary__label,
         body > header[data-spw-shell-tune-surface="strip"] .spw-shell-tools-summary__label),
  :where(.site-header[data-spw-shell-tune-surface="knob"] .spw-shell-tools-summary__label,
         body > header[data-spw-shell-tune-surface="knob"] .spw-shell-tools-summary__label),
  :where(.site-header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-summary__label,
         body > header[data-spw-shell-tune-surface="nested"] .spw-shell-tools-summary__label) {
    display: none;
  }
}
.spw-route-menu[data-spw-flow="pretext"] {
  --pretext-radius: var(--shell-nav-radius);
  --pretext-inline-pad: 0;
  --pretext-block-pad: 0;
  --pretext-rail-width: 0px;
  --pretext-edge-opacity: 0;
  --pretext-outline-width: 0px;
  --pretext-rail-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 24%, transparent);
  --pretext-surface-wash: transparent;
  --pretext-rail-glow: 0 0 0 transparent;
}

.spw-route-menu[data-spw-flow="pretext"][data-text-mode="approach"] {
  --pretext-rail-width: 1px;
  --pretext-surface-wash: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 95%, var(--spw-shell-chrome-accent-local) 5%);
}

.spw-route-menu[data-spw-flow="pretext"][data-text-mode="contact"] {
  --pretext-rail-width: 2px;
  --pretext-surface-wash: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 93%, var(--spw-shell-chrome-accent-local) 7%);
}

.spw-route-menu[data-spw-flow="pretext"][data-text-mode="projecting"] {
  --pretext-rail-width: 2px;
  --pretext-surface-wash: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 91%, var(--spw-shell-chrome-accent-local) 9%);
}

.spw-route-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--shell-nav-min-height);
  padding: var(--shell-nav-padding-block) calc(var(--shell-nav-padding-inline) * 0.72);
  border: 1px solid transparent;
  border-radius: var(--shell-nav-radius);
  background: var(--pretext-surface-wash, transparent);
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 78%, transparent);
  cursor: pointer;
  list-style: none;
  transition:
    background-color var(--shell-duration-fast) var(--shell-ease),
    border-color var(--shell-duration-fast) var(--shell-ease),
    color var(--shell-duration-fast) var(--shell-ease),
    box-shadow var(--shell-duration-base) var(--shell-settle-ease),
    transform var(--shell-duration-fast) var(--shell-settle-ease);
}

.spw-route-menu-trigger::-webkit-details-marker {
  display: none;
}

.spw-route-menu-trigger:is(:hover, :focus-visible),
.spw-route-menu[open] > .spw-route-menu-trigger {
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 93%, var(--spw-shell-chrome-accent-local) 7%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 8%, transparent);
  outline: none;
}

.spw-route-menu[data-spw-route-menu-scope="related"] > .spw-route-menu-trigger {
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 72%, var(--spw-shell-chrome-accent-local) 28%);
}

.spw-route-menu-trigger:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

.spw-route-menu[open] > .spw-route-menu-trigger {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 24%, transparent);
}

.spw-route-menu-trigger::after {
  content: "";
  inline-size: 0.45rem;
  aspect-ratio: 1;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.62;
  transform: rotate(45deg) translateY(-0.08rem);
  transition:
    opacity var(--shell-duration-fast) var(--shell-ease),
    transform var(--shell-duration-fast) var(--shell-ease);
}

.spw-route-menu[open] > .spw-route-menu-trigger::after {
  opacity: 0.88;
  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.spw-route-menu-label {
  min-width: 0;
  font-weight: 700;
}

.spw-route-menu-count,
.spw-route-menu-link-token {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 68%, var(--spw-shell-chrome-accent-local) 32%);
  opacity: 1;
}

.spw-route-menu-panel {
  z-index: calc(var(--z-floating, var(--layer-floating, 100)) + 4);
  display: grid;
  gap: 0.26rem;
  position: absolute;
  inset-block-start: calc(100% + 0.38rem);
  inset-inline-end: 0;
  width: min(22rem, calc(100vw - 2rem));
  min-width: 0;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100dvh - var(--spw-shell-menu-offset, 4rem) - 1rem));
  padding: 0.36rem 0;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 84%, transparent);
  border-radius: var(--shell-panel-radius);
  background:
    var(--pretext-surface-wash, transparent),
    color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 96%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 6px 14px rgba(0,0,0,0.032);
  overflow: auto;
}

.spw-route-menu-panel[data-spw-route-menu-layout="compact"] {
  min-width: min(17rem, 88vw);
  max-width: min(18rem, calc(100vw - 2rem));
}

.spw-route-menu-panel[data-spw-route-menu-layout="compact"] .spw-route-menu-link {
  min-height: 2.3rem;
  padding: 0.4rem 0.58rem;
}

.spw-route-menu-panel[data-spw-route-menu-layout="compact"] .spw-route-menu-link-note {
  display: none;
}

.spw-route-menu:not([open]) > .spw-route-menu-panel {
  display: none;
}

.spw-route-menu-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  min-height: 2.45rem;
  padding: 0.38rem 0.62rem;
  border-radius: var(--shell-panel-radius-tight);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  text-decoration: none;
  line-height: 1.22;
  font-size: var(--text-size-sm, 0.92rem);
  transition:
    background-color var(--shell-duration-fast) var(--shell-ease),
    box-shadow var(--shell-duration-base) var(--shell-settle-ease),
    transform var(--shell-duration-fast) var(--shell-settle-ease);
}

.spw-route-menu-link-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.spw-route-menu-link-label {
  font-weight: 600;
}

.spw-route-menu-link-note {
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 72%, var(--spw-shell-chrome-accent-local) 28%);
  font-size: var(--text-size-label, 0.76rem);
  line-height: 1.35;
  text-wrap: balance;
}

.spw-route-menu-link-token {
  align-self: center;
  text-align: right;
}

.spw-route-menu-link:is(:hover, :focus-visible) {
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 94%, var(--spw-shell-chrome-accent-local) 6%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 8%, transparent);
  outline: none;
  transform: translateY(-1px);
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) {
  --spw-shell-mobile-accent: var(--spw-shell-chrome-accent-local);
  --spw-shell-mobile-sheen: rgba(255, 255, 255, 0.24);
  --spw-shell-mobile-panel-bg:
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 96%, var(--spw-shell-mobile-accent) 4%);
  --spw-shell-mobile-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  --spw-shell-mobile-card-border: color-mix(in oklab, var(--spw-shell-mobile-accent) 12%, var(--line, rgba(14, 18, 20, 0.14)) 88%);
  --spw-shell-mobile-card-border-strong: color-mix(in oklab, var(--spw-shell-mobile-accent) 22%, transparent);
  --spw-shell-mobile-card-bg:
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 98%, var(--spw-shell-mobile-accent) 2%);
  --spw-shell-mobile-card-bg-strong:
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 94%, var(--spw-shell-mobile-accent) 6%);
  --spw-shell-mobile-card-bg-current:
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 92%, var(--spw-shell-mobile-accent) 8%);
  --spw-shell-mobile-card-ink:
    color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 94%, var(--spw-shell-mobile-accent) 6%);
  --spw-shell-mobile-focus-ring:
    0 0 0 2px color-mix(in oklab, var(--spw-shell-mobile-accent) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] :where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]),
  html[data-spw-color-mode="dark"] :where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) {
    --spw-shell-mobile-sheen: color-mix(in oklab, var(--ink-strong, var(--ink)) 10%, transparent);
    --spw-shell-mobile-panel-bg:
      color-mix(in oklab, var(--surface-panel-strong, var(--surface-strong)) 90%, var(--spw-shell-mobile-accent) 10%);
    --spw-shell-mobile-panel-shadow: 0 20px 46px color-mix(in oklab, #000 78%, transparent);
    --spw-shell-mobile-card-border: color-mix(in oklab, var(--spw-shell-mobile-accent) 30%, var(--line) 70%);
    --spw-shell-mobile-card-border-strong: color-mix(in oklab, var(--spw-shell-mobile-accent) 42%, transparent);
    --spw-shell-mobile-card-bg:
      color-mix(in oklab, var(--surface-panel, var(--surface-strong)) 86%, var(--spw-shell-mobile-accent) 14%);
    --spw-shell-mobile-card-bg-strong:
      color-mix(in oklab, var(--surface-panel-strong, var(--surface-strong)) 80%, var(--spw-shell-mobile-accent) 20%);
    --spw-shell-mobile-card-bg-current:
      color-mix(in oklab, var(--surface-panel-strong, var(--surface-strong)) 72%, var(--spw-shell-mobile-accent) 28%);
    --spw-shell-mobile-card-ink:
      color-mix(in oklab, var(--ink-strong, var(--ink)) 90%, var(--spw-shell-mobile-accent) 10%);
    --spw-shell-mobile-focus-ring:
      0 0 0 2px color-mix(in oklab, var(--spw-shell-mobile-accent) 34%, transparent);
  }
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .header-sigil,
:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .spw-nav-toggle {
  padding-inline: 1rem;
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .header-sigil {
  grid-row: 1;
  grid-column: 1;
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .spw-nav-toggle {
  grid-area: toggle;
  grid-row: 1;
  grid-column: 3;
  display: inline-flex;
  margin-inline-end: 0;
  justify-self: end;
  align-self: start;
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) > .spw-semantic-seam {
  display: none;
}

:where(.site-header[data-spw-menu-mode="toggle"] nav, body > header[data-spw-menu-mode="toggle"] nav) {
  position: fixed;
  inset-block-start: calc(var(--spw-shell-menu-offset, var(--shell-header-height, 4rem)) + 0.45rem);
  inset-inline: clamp(0.65rem, 2vw, 1rem);
  width: auto;
  max-width: none;
  z-index: calc(var(--z-header, 1000) + 4);
  border-color: color-mix(in oklab, var(--spw-shell-chrome-line-local) 86%, transparent);
  border-radius: var(--shape-control, 0.78rem);
  background:
    linear-gradient(180deg, var(--spw-shell-mobile-sheen), transparent 10rem),
    var(--spw-shell-mobile-panel-bg);
  box-shadow:
    inset 0 1px 0 var(--spw-shell-mobile-sheen),
    var(--spw-shell-mobile-panel-shadow);
  backdrop-filter: blur(12px) saturate(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(1.03);
}

:where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"],
       body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"]) .spw-header-trace {
  display: none;
  min-block-size: 0;
  max-block-size: 0;
  overflow: hidden;
}

:where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="closed"], body > header[data-spw-menu-mode="toggle"][data-spw-menu="closed"]) .spw-header-trace:has(.spw-spell-path) {
  display: block;
}

:where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="closed"] nav, body > header[data-spw-menu-mode="toggle"][data-spw-menu="closed"] nav) {
  display: none;
}

:where(.site-header[data-spw-menu-mode="toggle"] nav, body > header[data-spw-menu-mode="toggle"] nav) {
  max-block-size: min(32rem, calc(100dvh - var(--spw-shell-menu-offset, var(--shell-header-height, 4rem)) - 1rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 0.5rem;
  scrollbar-width: thin;
}

:where(.site-header[data-spw-menu-mode="toggle"] ul, body > header[data-spw-menu-mode="toggle"] ul) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.28rem;
  width: 100%;
  max-width: none;
  padding: 0.36rem;
}

:where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a) {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  min-height: 2.28rem;
  padding: 0.34rem 0.58rem;
  border: 1px solid var(--spw-shell-mobile-card-border);
  border-radius: calc(var(--shape-control, 0.78rem) - 0.16rem);
  background: var(--spw-shell-mobile-card-bg);
  color: var(--spw-shell-mobile-card-ink);
  box-shadow:
    inset 0 1px 0 var(--spw-shell-mobile-sheen),
    0 0 0 0 transparent;
}

:where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip)::before,
:where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip)::after {
  content: none;
  display: none;
}

:where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a):is(:hover, :focus-visible) {
  border-color: var(--spw-shell-mobile-card-border-strong);
  background: var(--spw-shell-mobile-card-bg-strong);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow:
    inset 0 1px 0 var(--spw-shell-mobile-sheen),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-mobile-accent) 8%, transparent),
    var(--spw-shell-mobile-focus-ring);
}

:where(.site-header[data-spw-menu-mode="toggle"] nav a[aria-current="page"], body > header[data-spw-menu-mode="toggle"] nav a[aria-current="page"]) {
  border-color: color-mix(in oklab, var(--spw-shell-mobile-accent) 24%, transparent);
  background: var(--spw-shell-mobile-card-bg-current);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 84%, var(--spw-shell-mobile-accent) 16%);
  box-shadow:
    inset 0 1px 0 var(--spw-shell-mobile-sheen),
    inset 0 -2px 0 color-mix(in oklab, var(--spw-shell-mobile-accent) 52%, transparent),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-mobile-accent) 10%, transparent);
}

:where(.site-header[data-spw-menu-mode="toggle"] .spw-route-menu-host, body > header[data-spw-menu-mode="toggle"] .spw-route-menu-host) {
  grid-column: 1 / -1;
}

:where(.site-header[data-spw-menu-mode="toggle"] .spw-route-menu-trigger, body > header[data-spw-menu-mode="toggle"] .spw-route-menu-trigger) {
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  border-radius: var(--shell-panel-radius);
  border-color: var(--spw-shell-mobile-card-border);
  background: var(--spw-shell-mobile-card-bg);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 90%, var(--spw-shell-mobile-accent) 10%);
}

:where(.site-header[data-spw-menu-mode="toggle"] .spw-route-menu-trigger, body > header[data-spw-menu-mode="toggle"] .spw-route-menu-trigger):is(:hover, :focus-visible),
:where(.site-header[data-spw-menu-mode="toggle"] .spw-route-menu[open] > .spw-route-menu-trigger, body > header[data-spw-menu-mode="toggle"] .spw-route-menu[open] > .spw-route-menu-trigger) {
  border-color: var(--spw-shell-mobile-card-border-strong);
  background: var(--spw-shell-mobile-card-bg-strong);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow: var(--spw-shell-mobile-focus-ring);
}

:where(.site-header[data-spw-menu-mode="toggle"] .spw-route-menu-panel, body > header[data-spw-menu-mode="toggle"] .spw-route-menu-panel) {
  position: static;
  min-width: 0;
  margin-top: 0.35rem;
  padding: 0.28rem;
  border-color: var(--spw-shell-mobile-card-border);
  background: var(--spw-shell-mobile-card-bg);
}

:where(.site-header[data-spw-menu-topology="screen-field"], body > header[data-spw-menu-topology="screen-field"]) {
  --spw-shell-mobile-accent: var(--spw-shell-chrome-accent-local);
}

:where(.site-header[data-spw-menu-topology="screen-field"] nav, body > header[data-spw-menu-topology="screen-field"] nav) {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: max(0.65rem, env(safe-area-inset-bottom));
  inset-inline: max(0.65rem, env(safe-area-inset-left)) max(0.65rem, env(safe-area-inset-right));
  z-index: calc(var(--z-header) + 1);
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-height: 0;
  width: auto;
  max-width: none;
  max-height: min(80dvh, 38rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  padding: 0.3rem;
  border-width: 1px;
  border-radius: clamp(0.82rem, 3vw, 1.05rem);
  background:
    linear-gradient(180deg, var(--spw-shell-mobile-sheen), transparent 12rem),
    var(--spw-shell-mobile-panel-bg);
  box-shadow:
    inset 0 1px 0 var(--spw-shell-mobile-sheen),
    var(--spw-shell-mobile-panel-shadow);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

:where(.site-header[data-spw-menu-topology="screen-field"][data-spw-menu="closed"] nav, body > header[data-spw-menu-topology="screen-field"][data-spw-menu="closed"] nav) {
  display: none;
}

:where(.site-header[data-spw-menu-topology="screen-field"] ul, body > header[data-spw-menu-topology="screen-field"] ul) {
  align-content: start;
  gap: 0.28rem;
  width: 100%;
  min-width: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

:where(.site-header[data-spw-menu-topology="screen-field"] nav a, body > header[data-spw-menu-topology="screen-field"] nav a) {
  justify-content: flex-start;
  align-items: flex-start;
  min-height: max(2.02rem, var(--shell-nav-min-height));
  padding: 0.36rem 0.5rem 0.44rem;
  border-radius: calc(var(--shell-panel-radius) + 0.08rem);
  line-height: 1.02;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

:where(.site-header[data-spw-menu-topology="screen-field"] nav a, body > header[data-spw-menu-topology="screen-field"] nav a)::after {
  inset: auto 0.82rem 0.42rem;
}

:where(.site-header[data-spw-menu-topology="screen-field"] .spw-route-menu-host, body > header[data-spw-menu-topology="screen-field"] .spw-route-menu-host) {
  grid-column: 1 / -1;
}

:where(.site-header[data-spw-menu-topology="screen-field"] .spw-route-menu, body > header[data-spw-menu-topology="screen-field"] .spw-route-menu) {
  width: 100%;
}

:where(.site-header[data-spw-menu-topology="screen-field"] .spw-route-menu-trigger, body > header[data-spw-menu-topology="screen-field"] .spw-route-menu-trigger) {
  width: 100%;
  justify-content: space-between;
  min-height: 2.18rem;
  padding: 0.42rem 0.58rem;
  border-radius: calc(var(--shell-panel-radius) + 0.08rem);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.92)) 97%, var(--spw-shell-mobile-accent) 3%);
}

:where(.site-header[data-spw-menu-topology="screen-field"] .spw-route-menu-panel, body > header[data-spw-menu-topology="screen-field"] .spw-route-menu-panel) {
  margin-top: 0.24rem;
  padding: 0.18rem;
  border-radius: calc(var(--shell-panel-radius) + 0.08rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 60%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.94)) 99%, var(--spw-shell-mobile-accent) 1%);
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"])
  :where(.spw-nav-toggle, .spw-route-menu-trigger, nav a, .spw-route-menu-link):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--spw-shell-mobile-accent) 24%, transparent);
  outline-offset: 2px;
}

:where(.site-header[data-spw-menu-topology="screen-field"][data-spw-menu-clarity="project"] nav, body > header[data-spw-menu-topology="screen-field"][data-spw-menu-clarity="project"] nav) {
  animation-duration: 280ms;
}

:where(.site-header[data-spw-menu-mode="toggle"] .spw-route-menu-link, body > header[data-spw-menu-mode="toggle"] .spw-route-menu-link) {
  min-height: 0;
}

@media (min-width: 721px) and (max-width: 980px) {
  :where(.site-header[data-spw-shell-layout="inline-tablet"] nav,
         body > header[data-spw-shell-layout="inline-tablet"] nav,
         .site-header[data-spw-shell-layout="inline-stacked"] nav,
         body > header[data-spw-shell-layout="inline-stacked"] nav,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] nav,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] nav,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] nav,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] nav) {
    justify-self: stretch;
    width: 100%;
    max-inline-size: none;
  }

  :where(.site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] ul,
         .site-header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] ul,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="compressed"] ul,
         body > header[data-spw-menu-mode="inline"][data-spw-menu-pressure="crowded"] ul) {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
  }

  :where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) {
    --shell-nav-min-height: 2.55rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] nav, body > header[data-spw-menu-mode="toggle"] nav) {
    max-height: min(24rem, calc(100dvh - var(--spw-shell-menu-offset, var(--shell-header-height)) - 2rem));
  }

  :where(.site-header[data-spw-menu-mode="toggle"] ul, body > header[data-spw-menu-mode="toggle"] ul) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    padding-inline: clamp(0.52rem, 2vw, 0.9rem);
  }

  :where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a) {
    align-items: center;
    min-height: 2.55rem;
  }
}

/* ==========================================================================
   3. Site footer
   ========================================================================== */

:where(.site-footer, body > footer) {
  --footer-accent: var(--active-op-color, var(--teal, #008080));
  --footer-bg: color-mix(in srgb, var(--surface, rgba(255,255,255,0.62)) 88%, transparent);
  --footer-bg-strong: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.78)) 94%, transparent);
  --footer-panel-bg: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.92)) 82%, transparent);
  --footer-panel-bg-soft: color-mix(in srgb, var(--surface, rgba(255,255,255,0.72)) 72%, transparent);
  --footer-panel-line: color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 76%, transparent);
  --footer-panel-line-strong: color-mix(in srgb, var(--footer-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);

  margin-top: auto;
  min-height: var(--shell-footer-min-height);
  padding:
    clamp(1rem, 2.1vw, 1.55rem)
    max(var(--page-gutter-inline), env(safe-area-inset-right))
    calc(clamp(1rem, 2.1vw, 1.55rem) + env(safe-area-inset-bottom) + var(--spw-bottom-chrome-clearance, 0px))
    max(var(--page-gutter-inline), env(safe-area-inset-left));
  box-sizing: border-box;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--footer-bg) 86%, transparent),
      var(--footer-bg-strong)
    );
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--shell-footer-font-size);
  letter-spacing: 0.02em;
  opacity: 1;
  border-top: 1px solid var(--footer-panel-line-strong);
}

html[data-spw-show-footer="off"] :is(.site-footer, body > footer) {
  display: none;
}

.site-footer__inner {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(20rem, 1.08fr) minmax(17rem, 0.78fr);
  gap: clamp(0.9rem, 2vw, 1.45rem) clamp(1.2rem, 3.2vw, 2.35rem);
  align-items: start;
}

/* Mobile responsiveness: stack identity and architecture on narrow viewports
   while preserving semantic structure and safe-area padding already present
   on the parent .site-footer. Keeps touch targets comfortable and rhythm
   intact. */
@media (max-width: 520px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .site-footer__page-architecture {
    margin-top: 0.35rem;
    padding-top: 0.45rem;
  }
}

.site-footer__identity {
  display: grid;
  gap: 0.44rem;
  min-width: 0;
  max-inline-size: 60ch;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Ornament distribution: the footer brand participates in site rhythm.
   Uses the existing .spw-site-rhythm vocabulary (or data attr) so the
   chrome footer feels connected to the runtime pulse without adding
   new visual weight. Works on desktop and mobile. */
.site-footer__brand .spw-site-rhythm,
.site-footer__brand [data-spw-ornament="site-rhythm"] {
  margin-left: 0.35rem;
  opacity: 0.65;
}

.site-footer__brand .spw-site-rhythm__rail {
  min-width: 2.1rem;
}

.site-footer__brand:is(:hover, :focus-visible) {
  color: var(--active-op-color, var(--teal, #008080));
  outline: none;
}

.site-footer__summary,
.site-footer__legal {
  margin: 0;
}

.site-footer__summary {
  max-width: 44ch;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.18rem);
  font-weight: 520;
  line-height: 1.36;
  letter-spacing: normal;
}

.site-footer__page-architecture {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.12rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--footer-panel-line);
  border-inline-start-color: var(--footer-panel-line-strong);
  border-radius: var(--shape-component, 6px);
  background: var(--footer-panel-bg-soft);
}

.site-footer__page-architecture-kicker,
.site-footer__page-architecture-copy,
.site-footer__page-architecture-meta {
  margin: 0;
}

.site-footer__page-architecture-kicker {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__page-architecture-copy {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: var(--text-size-xs, 0.84rem);
  line-height: 1.4;
  letter-spacing: normal;
}

.site-footer__page-architecture-copy strong {
  color: var(--active-op-color, var(--teal, #008080));
  font-weight: 600;
}

.site-footer__page-architecture-meta {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.35;
  letter-spacing: normal;
}

.site-footer__settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.7rem;
  margin-top: 0.14rem;
  padding: 0.68rem;
  border: 1px solid var(--footer-panel-line);
  border-radius: var(--shape-surface, 8px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--footer-accent) 4%, transparent), transparent 48%),
    var(--footer-panel-bg);
}

.site-footer__settings-title,
.site-footer__settings-copy {
  margin: 0;
}

.site-footer__settings-copy {
  flex: 1 1 18rem;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: var(--text-size-xs, 0.84rem);
  line-height: 1.45;
  letter-spacing: normal;
}

.site-footer__settings-copy strong {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-weight: 600;
}

.site-footer__settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
}

.site-footer__settings-actions .operator-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
}

.site-footer__note-entry {
  display: grid;
  flex: 1 1 18rem;
  gap: 0.36rem;
  min-width: min(100%, 18rem);
  padding-block-start: 0.18rem;
}

.site-footer__note-label {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__note-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: stretch;
}

.site-footer__note-row .operator-chip {
  min-height: 2.2rem;
}

.site-footer__note-input {
  flex: 1 1 12rem;
  min-height: 2.2rem;
  padding: 0.5rem 0.72rem;
  border: 1px solid var(--footer-panel-line);
  border-radius: var(--shape-component, 6px);
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 88%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
}

.site-footer__note-input::placeholder {
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.68)) 84%, transparent);
}

.site-footer__note-input:focus-visible {
  outline: none;
  border-color: var(--active-op-color, var(--teal, #008080));
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 128, 128, 0.18));
}

.site-footer__note-preview {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.42;
  letter-spacing: normal;
}

.site-footer__settings-meta {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.28rem 0.62rem;
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.62));
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.35;
}

.site-footer__settings-link {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.site-footer__settings-link:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 22%, transparent);
  text-decoration-thickness: 0.08em;
}

.site-footer__settings-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.35;
}

.site-footer__settings-status[data-status="success"] {
  color: var(--op-action-color, #005959);
}

.site-footer__settings-status[data-status="info"] {
  color: var(--op-probe-color, #4a2180);
}

.site-footer__settings-status:empty {
  display: none;
}

.site-footer__nav {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--footer-panel-line);
  border-radius: var(--shape-surface, 8px);
  background: var(--footer-panel-bg-soft);
}

.site-footer__nav-kicker {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0.42rem;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: var(--touch-target-compact, 2.15rem);
  padding: 0.28rem 0.44rem;
  border: 1px solid transparent;
  border-radius: 0.42rem;
  background: transparent;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-xs, 0.84rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  touch-action: manipulation;
  transition:
    color var(--shell-duration-fast) var(--shell-ease),
    background-color var(--shell-duration-fast) var(--shell-ease),
    transform var(--shell-duration-fast) var(--shell-settle-ease);
}

.site-footer__nav a[data-spw-nav-tokenized="true"]::before {
  content: attr(data-spw-nav-prefix);
  flex: 0 0 auto;
  color: color-mix(in oklab, var(--active-op-color, var(--teal, #008080)) 62%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
}

.site-footer__return-top {
  justify-self: start;
  margin-top: 0.08rem;
  padding: 0.18rem 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.62));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer__return-top:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (min-width: 760px) {
  .site-footer__nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
    gap: 0.28rem 0.42rem;
  }

  .site-footer__nav a {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.site-footer__nav a:visited,
.site-footer__brand:visited {
  color: color-mix(in oklab, var(--ink-soft, rgba(14, 18, 20, 0.68)) 84%, var(--active-op-color, var(--teal, #008080)) 16%);
}

.site-footer__nav a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 8%, transparent);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 20%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
  transform: translateY(-1px);
}

.site-footer__nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 24%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-weight: 600;
}

.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: 0.72rem;
  border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
}

/* Discovery notices stay fixed, readable, and easy to dismiss. */
.spw-discovery-notice-stack {
  position: fixed;
  /* Safer bottom/right offsets to avoid sitting under the collapsed console ( ~2.35rem + safe-area )
     and other bottom-right chrome. Mirrors the "film credits" / ephemeral chrome spirit: the notices
     should feel deliberately placed, not fighting for space. */
  inset-block-end: calc(max(1.15rem, env(safe-area-inset-bottom)) + 2.65rem + var(--spw-floating-menu-clearance, 0px));
  inset-inline-end: max(1.1rem, env(safe-area-inset-right));
  display: grid;
  gap: 0.65rem;
  width: min(24rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
  box-sizing: border-box;
  pointer-events: none;
  z-index: var(--spw-floating-tier-z, var(--z-toast, calc(var(--z-priority, 2000) + 18)));
}

.spw-discovery-notice-modal {
  position: fixed;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.8rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  pointer-events: none;
  z-index: var(--spw-floating-tier-z, var(--z-modal, calc(var(--z-priority, 2000) + 30)));
  isolation: isolate;
}

.spw-discovery-notice-modal:not(:empty) > .spw-discovery-notice {
  position: relative;
  z-index: 1;
}

.spw-discovery-notice-modal > .spw-discovery-notice {
  width: min(34rem, calc(100vw - 2.2rem));
  max-height: min(72vh, 24rem); /* too tall for role — keep focal brief compact; content inside constrained */
  overflow: hidden; /* internal content stays readable without making the chrome itself giant */
}

.spw-discovery-notice {
  pointer-events: auto;
  display: grid;
  gap: 0.55rem;
  box-sizing: border-box;
  max-inline-size: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 84%, transparent);
  border-radius: var(--shape-component, 6px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 64%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 96%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  overflow-wrap: anywhere;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  transition:
    opacity var(--shell-duration-fast) var(--shell-ease),
    transform var(--shell-duration-fast) var(--shell-ease),
    border-color var(--shell-duration-fast) var(--shell-ease);
}

.spw-discovery-notice--modal {
  gap: 0.6rem; /* tighter for role as quick brief, better internal spacing without feeling cramped */
  padding: 0.95rem 1rem 0.9rem;
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal-dark, #006b6b)) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);
  /* Stronger modal material: higher surface mix + more gradient weight so it competes less with page content.
     Still glass by default for atmosphere, but opaque enough for its focal role. When global matte or high-contrast
     is active the data-spw-metamaterial rule below wins for clear-contrast "credits-like" readability. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 48%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.985)) 99%, transparent);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
}

.spw-discovery-notice--popup {
  border-color: color-mix(in srgb, var(--op-object-color, #a67c00) 24%, var(--line, rgba(14, 18, 20, 0.14)) 76%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--op-object-color, #a67c00) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 97%, transparent);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.1),
    0 0 0 1px color-mix(in srgb, var(--op-object-color, #a67c00) 12%, transparent);
}

.spw-discovery-notice--popup .spw-discovery-notice__title {
  font-size: var(--text-size-sm, 0.92rem);
}

.spw-discovery-notice--popup .spw-discovery-notice__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.spw-discovery-notice[data-spw-cadence="daily"] {
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal, #008080)) 16%, var(--line, rgba(14, 18, 20, 0.14)) 84%);
}

.spw-discovery-notice[data-spw-cadence="weekly"] {
  border-color: color-mix(in srgb, var(--op-probe-color, #4a2180) 18%, var(--line, rgba(14, 18, 20, 0.14)) 82%);
}

.spw-discovery-notice[data-spw-cadence="cycle"] {
  border-color: color-mix(in srgb, var(--op-frame-color, var(--teal, #008080)) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);
}

.spw-discovery-notice[data-spw-cadence="streak"] {
  border-color: color-mix(in srgb, var(--op-object-color, #a67c00) 28%, var(--line, rgba(14, 18, 20, 0.14)) 72%);
}

.spw-discovery-notice[data-spw-cadence-motion]::before {
  content: attr(data-spw-cadence-motion);
  justify-self: start;
  margin-bottom: -0.3rem;
  padding: 0.18rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 64%, var(--ink-soft, rgba(14, 18, 20, 0.72)) 36%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.04em;
}

/* Cadence-driven micro-variation on the motion label for rhythm feel (no new JS). */
.spw-discovery-notice[data-spw-cadence="daily"][data-spw-cadence-motion]::before {
  filter: saturate(0.92);
}
.spw-discovery-notice[data-spw-cadence="cycle"][data-spw-cadence-motion]::before,
.spw-discovery-notice[data-spw-cadence="streak"][data-spw-cadence-motion]::before {
  font-weight: 650;
  letter-spacing: 0.01em;
}

.spw-discovery-notice[data-spw-promo-theme="glass"] {
  border-color: color-mix(in srgb, var(--op-ref-color, #276ea8) 16%, var(--line, rgba(14, 18, 20, 0.14)) 84%);
}

.spw-discovery-notice[data-spw-promo-theme="signal"] {
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal-dark, #006b6b)) 24%, var(--line, rgba(14, 18, 20, 0.14)) 76%);
}

.spw-discovery-notice.is-dismissing {
  opacity: 0;
  transform: translateY(0.35rem);
}

.spw-discovery-notice__label {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-discovery-notice__title {
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: var(--text-size-body, 1rem);
  font-weight: 600;
  line-height: 1.35;
}

.spw-discovery-notice__summary {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.7));
  font-size: var(--text-size-xs, 0.84rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.spw-discovery-notice--modal .spw-discovery-notice__summary {
  color: var(--ink, rgba(14, 18, 20, 0.9));
}

.spw-discovery-notice__offer {
  margin: -0.05rem 0 0;
  color: var(--ink, rgba(14, 18, 20, 0.9));
  font-size: var(--text-size-sm, 0.92rem);
  font-weight: 600;
  line-height: 1.42;
}

.spw-discovery-notice__why {
  margin: -0.1rem 0 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.64));
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.38;
}

.spw-discovery-notice__handles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.spw-discovery-notice__handle {
  font-size: var(--text-size-2xs, 0.72rem);
}

.spw-discovery-notice__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.7rem;
  margin: 0;
  padding-top: 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 70%, transparent);
}

.spw-discovery-notice__meta-label {
  color: var(--ink-soft, rgba(14, 18, 20, 0.64));
  font-size: var(--text-size-2xs, 0.72rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spw-discovery-notice__meta-value {
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.9));
  font-size: var(--text-size-xs, 0.84rem);
  line-height: 1.4;
}

.spw-discovery-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
}

.spw-discovery-notice--modal .spw-discovery-notice__actions {
  margin-top: 0.15rem;
}

.spw-discovery-notice__cta,
.spw-discovery-notice__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.38rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  border-radius: 0.46rem;
  font: inherit;
  font-size: var(--text-size-xs, 0.84rem);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--shell-duration-fast) var(--shell-ease),
    color var(--shell-duration-fast) var(--shell-ease),
    border-color var(--shell-duration-fast) var(--shell-ease),
    transform var(--shell-duration-fast) var(--shell-settle-ease);
}

.spw-discovery-notice__cta {
  background: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spw-discovery-notice--modal .spw-discovery-notice__cta {
  background: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 16%, transparent);
}

.spw-discovery-notice__dismiss {
  background: transparent;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
}

/* Dark mode theming depth + surface text contrast for discovery notices / promos.
   The hard-coded glass wash is toned down; text uses stronger inks.
   When the global matte clear-contrast option (or high-contrast) is active,
   notices become opaque matte surfaces with --ink-on-matte-strong for legibility. */
html[data-spw-color-mode="dark"] .spw-discovery-notice {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(25, 32, 37, 0.92)) 97%, transparent);
  color: var(--ink, rgba(228, 235, 232, 0.92));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}
html[data-spw-color-mode="dark"] .spw-discovery-notice--modal {
  /* Stronger for dark glass too — the image showed translucency letting dense text bleed through the promo. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 46%),
    color-mix(in srgb, var(--surface-strong, rgba(25, 32, 37, 0.97)) 99%, transparent);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal-dark, #006b6b)) 32%, var(--line, rgba(246, 248, 248, 0.18)) 68%);
}

html[data-spw-color-mode="dark"] .spw-discovery-notice__label,
html[data-spw-color-mode="dark"] .spw-discovery-notice__dismiss {
  color: var(--ink-soft, rgba(202, 214, 210, 0.78));
}
html[data-spw-color-mode="dark"] .spw-discovery-notice--modal .spw-discovery-notice__summary,
html[data-spw-color-mode="dark"] .spw-discovery-notice__offer,
html[data-spw-color-mode="dark"] .spw-discovery-notice__meta-value {
  color: var(--ink, rgba(236, 241, 238, 0.95));
}

html[data-spw-color-mode="auto"] .spw-discovery-notice--modal {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink, rgba(236, 241, 238, 0.95)) 7%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-strong, rgba(25, 32, 37, 0.96)) 98%, transparent);
  color: var(--ink, rgba(236, 241, 238, 0.95));
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 26%, var(--line, rgba(246, 248, 248, 0.18)) 74%);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
}

html[data-spw-color-mode="auto"] .spw-discovery-notice--modal :is(
  .spw-discovery-notice__title,
  .spw-discovery-notice__summary,
  .spw-discovery-notice__offer,
  .spw-discovery-notice__meta-value
) {
  color: var(--ink, rgba(236, 241, 238, 0.95));
}

html[data-spw-color-mode="auto"] .spw-discovery-notice--modal :is(
  .spw-discovery-notice__label,
  .spw-discovery-notice__dismiss,
  .spw-discovery-notice__why
) {
  color: var(--ink-soft, rgba(202, 214, 210, 0.78));
}

/* "Film credits" style ephemeral chrome for module / settings application.
   After a "preloading phase" (scan mount hooks/handles, measure layout via rAF/ResizeObserver),
   queued modules or settings that impact style/layout can surface here as a configurable,
   timed, low-attention roll (like end credits after opening sequence). Configurable via
   presentation=credits, linger via data attr or enhancement-level, position variants.
   Improves communicability of "what just applied and why it matters" with visual poetry
   and touch-friendly targets. */
.spw-discovery-notice--credits {
  --credits-linger: 3800ms;
  position: fixed;
  inset-block-end: calc( max(0.9rem, env(safe-area-inset-bottom)) + 2.4rem );
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: min(28rem, calc(100vw - 2.5rem));
  max-inline-size: calc(100vw - 2.5rem);
  padding: 0.55rem 0.8rem;
  font-size: var(--text-size-2xs, 0.72rem);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,0.94)) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 70%, transparent);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  color: var(--ink-soft, rgba(14,18,20,0.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  opacity: 0.96;
  transition: opacity 420ms ease, transform 420ms var(--shell-settle-ease);
  z-index: 1050;
}
.spw-discovery-notice--credits[data-spw-notice-click-target="href"] {
  cursor: pointer;
}
.spw-discovery-notice--credits[data-spw-notice-click-target="href"]:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 28%, var(--line, rgba(14,18,20,0.14)) 72%);
}
.spw-discovery-notice--credits.is-dismissing {
  opacity: 0;
  transform: translateX(-50%) translateY(0.25rem);
}
.spw-discovery-notice--credits .spw-discovery-notice__label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
.spw-discovery-notice--credits .spw-discovery-notice__title {
  font-size: 0.78rem;
  font-weight: 500;
}
.spw-discovery-notice--credits .spw-discovery-notice__summary {
  font-size: 0.68rem;
  line-height: 1.25;
}
.spw-discovery-notice--credits .spw-discovery-notice__actions {
  gap: 0.25rem;
}
.spw-discovery-notice--credits .spw-discovery-notice__cta,
.spw-discovery-notice--credits .spw-discovery-notice__dismiss {
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  border-radius: 999px;
}

/* Matte high-contrast variant for credits (clear, premium, readable on any material) */
.spw-discovery-notice--credits[data-spw-metamaterial="matte"],
html[data-spw-base-metamaterial="matte"] .spw-discovery-notice--credits,
html[data-spw-high-contrast="on"] .spw-discovery-notice--credits {
  background: var(--surface-matte, rgba(247,244,238,0.97));
  color: var(--ink-on-matte-strong, var(--ink));
  border-color: var(--line-matte, var(--line));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.spw-discovery-notice--credits[data-spw-metamaterial="matte"] .spw-discovery-notice__label,
html[data-spw-base-metamaterial="matte"] .spw-discovery-notice--credits .spw-discovery-notice__label {
  color: var(--ink-on-matte-soft, var(--ink-soft));
}

/* Matte clear contrast treatment for notices (when user chooses the matte option
   for clear reading, or high-contrast is on). Removes blur, uses strong ink. */
.spw-discovery-notice[data-spw-metamaterial="matte"],
html[data-spw-base-metamaterial="matte"] .spw-discovery-notice,
html[data-spw-high-contrast="on"] .spw-discovery-notice {
  background: var(--surface-matte, rgba(247, 244, 238, 0.96));
  color: var(--ink-on-matte-strong, var(--ink-on-matte));
  border-color: var(--line-matte, var(--line));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
html[data-spw-color-mode="dark"] .spw-discovery-notice[data-spw-metamaterial="matte"],
html[data-spw-color-mode="dark"][data-spw-base-metamaterial="matte"] .spw-discovery-notice,
html[data-spw-color-mode="dark"][data-spw-high-contrast="on"] .spw-discovery-notice {
  background: var(--surface-matte, rgba(24, 30, 35, 0.96));
  color: var(--ink-on-matte-strong, rgba(255, 255, 255, 0.98));
}
.spw-discovery-notice[data-spw-metamaterial="matte"] .spw-discovery-notice__label,
.spw-discovery-notice[data-spw-metamaterial="matte"] .spw-discovery-notice__dismiss,
html[data-spw-base-metamaterial="matte"] .spw-discovery-notice .spw-discovery-notice__label {
  color: var(--ink-on-matte-soft, var(--ink-soft));
}
.spw-discovery-notice[data-spw-metamaterial="matte"] .spw-discovery-notice__title,
.spw-discovery-notice[data-spw-metamaterial="matte"] .spw-discovery-notice__summary,
.spw-discovery-notice[data-spw-metamaterial="matte"] .spw-discovery-notice__offer,
.spw-discovery-notice[data-spw-metamaterial="matte"] .spw-discovery-notice__meta-value {
  color: var(--ink-on-matte-strong, var(--ink));
}

.spw-discovery-notice__cta:is(:hover, :focus-visible),
.spw-discovery-notice__dismiss:is(:hover, :focus-visible) {
  outline: none;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 26%, transparent);
  transform: translateY(-1px);
}

/* ==========================================================================
   4. Responsive
   ========================================================================== */

@media (max-width: 720px) {
  .spw-discovery-notice-stack {
    inset-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
    /* Keep extra for console + touch affordance on mobile; the +2.65rem desktop logic scaled for small screens. */
    inset-block-end: calc( max(0.9rem, env(safe-area-inset-bottom)) + 3.1rem );
    width: auto;
    max-inline-size: none;
  }

  .spw-discovery-notice {
    padding: 0.82rem 0.86rem;
    border-radius: clamp(0.72rem, 3vw, 0.92rem);
  }

  :where(.site-header, body > header) {
    min-height: auto;
    align-content: start;
    row-gap: 0.32rem;
    column-gap: 0.42rem;
    padding-block: var(--spw-shell-surface-padding-block, 0.38rem);
  }

  :where(.site-header nav, body > header nav) {
    justify-self: stretch;
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 0.75rem,
      #000 calc(100% - 0.75rem),
      transparent
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 0.75rem,
      #000 calc(100% - 0.75rem),
      transparent
    );
  }

  .header-sigil,
  .spw-nav-toggle {
    padding-inline: max(0.85rem, env(safe-area-inset-left));
  }

  .spw-nav-toggle {
    grid-area: toggle;
    display: inline-flex;
    margin-inline-end: 0;
    justify-self: end;
  }

  .spw-header-actions {
    justify-self: end;
    gap: 0.2rem;
    max-inline-size: min(48vw, 16.5rem);
  }

  .spw-header-action--cauldron {
    inline-size: 3.9rem;
    padding-inline: 0.44rem;
    font-size: 0.66rem;
  }

  .spw-attention-posture-pill {
    inline-size: 8.8rem;
    max-inline-size: 8.8rem;
    padding-inline: 0.42rem;
  }

  .spw-attention-posture-pill__kicker {
    display: none;
  }

  .spw-attention-posture-pill__value {
    font-size: 0.62rem;
  }

  .site-header[data-spw-shell-layout="toggle-field"] .spw-header-actions,
  body > header[data-spw-shell-layout="toggle-field"] .spw-header-actions {
    display: none;
  }

  .header-annotation {
    max-width: min(100%, 24ch);
    text-align: left;
  }

  .header-brand {
    gap: 0.35rem;
    padding-inline-start: 0;
  }

  .header-brand,
  .header-sigil {
    min-width: 0;
  }

  :where(.site-header nav, body > header nav) {
    grid-area: nav;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }

  .site-header[data-spw-menu-mode="toggle"] nav,
  body > header[data-spw-menu-mode="toggle"] nav {
    grid-area: auto;
    grid-column: auto;
    width: auto;
    max-width: none;
  }

  :where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="closed"] nav,
         body > header[data-spw-menu-mode="toggle"][data-spw-menu="closed"] nav) {
    display: none;
  }

  :where(.site-header:not([data-spw-menu-mode]), body > header:not([data-spw-menu-mode])) nav ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    grid-template-columns: unset;
    gap: 0.28rem;
    padding-block-end: 0.12rem;
  }

  :where(.site-header:not([data-spw-menu-mode]), body > header:not([data-spw-menu-mode])) nav a {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  :where(.site-header ul, body > header ul) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.4rem), 1fr));
    gap: 0.35rem;
    width: 100%;
    max-width: none;
    padding-inline: var(--page-gutter-inline);
  }

  :where(.site-header nav a, body > header nav a) {
    width: 100%;
    border-radius: var(--shell-panel-radius);
    justify-content: start;
  }

  :where(.site-header:not([data-spw-shell-disclosure-init]) nav,
         body > header:not([data-spw-shell-disclosure-init]) nav) {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  :where(.site-header:not([data-spw-shell-disclosure-init]) ul,
         body > header:not([data-spw-shell-disclosure-init]) ul) {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    padding-inline: max(0.55rem, env(safe-area-inset-left)) max(0.55rem, env(safe-area-inset-right));
  }

  :where(.site-header:not([data-spw-shell-disclosure-init]) nav a,
         body > header:not([data-spw-shell-disclosure-init]) nav a) {
    width: auto;
    white-space: nowrap;
  }

  .spw-route-menu-host {
    grid-column: 1 / -1;
  }

  .spw-route-menu-trigger {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--shell-panel-radius);
  }

  .spw-route-menu-panel {
    position: static;
    min-width: 0;
    margin-top: 0.35rem;
    padding: 0.35rem;
  }

  :where(.site-header, body > header) .spw-header-trace:has(.spw-spell-path) {
    display: block;
    grid-column: 1 / -1;
    min-block-size: 0;
    padding-inline: max(0.35rem, env(safe-area-inset-left)) max(0.35rem, env(safe-area-inset-right));
  }

  :where(.site-header[data-spw-menu-mode="toggle"] .spw-header-trace:has(.spw-spell-path),
         body > header[data-spw-menu-mode="toggle"] .spw-header-trace:has(.spw-spell-path)) {
    max-block-size: min(7.5rem, 28dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .site-header[data-spw-menu-mode="toggle"][data-spw-menu="closed"] .spw-header-trace:has(.spw-spell-path[data-spw-breadcrumb-state="closed"]),
  body > header[data-spw-menu-mode="toggle"][data-spw-menu="closed"] .spw-header-trace:has(.spw-spell-path[data-spw-breadcrumb-state="closed"]) {
    max-block-size: 3.2rem;
    overflow: hidden;
  }

  :where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"],
         body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"]) .spw-header-trace {
    display: none;
    min-block-size: 0;
    max-block-size: 0;
    overflow: hidden;
    padding-block: 0;
  }

  :where(.site-header, body > header) .spw-spell-path {
    margin: 0;
    padding: 0.08rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
  }

  :where(.site-header[data-spw-menu-mode="toggle"] .spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-trail,
         body > header[data-spw-menu-mode="toggle"] .spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-trail) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, transparent, #000 0.6rem, #000 calc(100% - 0.6rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.6rem, #000 calc(100% - 0.6rem), transparent);
  }

  :where(.site-header[data-spw-menu-mode="toggle"] .spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-crumb,
         body > header[data-spw-menu-mode="toggle"] .spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-crumb) {
    flex: 0 0 auto;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] .spw-spell-path .spw-spell-meaning,
         .site-header[data-spw-menu-mode="toggle"] .spw-spell-path__garden-trace,
         body > header[data-spw-menu-mode="toggle"] .spw-spell-path .spw-spell-meaning,
         body > header[data-spw-menu-mode="toggle"] .spw-spell-path__garden-trace) {
    display: none;
  }

  .spw-spell-dock {
    display: none;
  }

  .spw-shell-utility-row {
    flex-wrap: wrap;
    overflow-x: visible;
    touch-action: pan-y;
    scroll-snap-type: none;
    scrollbar-width: auto;
    row-gap: 0.22rem;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 0.55rem 0;
  }

  .site-footer__identity {
    /* Dense children (cauldron + settings form + architecture) need tighter, consistent rhythm on stack */
    gap: 0.32rem;
  }

  .site-footer__settings {
    margin-top: 0.45rem;
    padding-top: 0.3rem;
    border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 65%, transparent);
  }

  .site-footer__nav {
    padding-top: 0.2rem;
  }

  .site-footer__nav-links {
    gap: 0.28rem 0.34rem;
  }

  .site-footer__cauldron-ingredients {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .spw-header-actions {
    gap: 0.22rem;
    max-inline-size: 6.8rem;
  }

  .spw-header-action--cauldron {
    inline-size: 4.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spw-attention-posture-pill {
    inline-size: 2.5rem;
    max-inline-size: 2.5rem;
    padding-inline: 0.28rem;
  }

  .spw-attention-posture-pill::before {
    content: "attn";
    color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--spw-shell-chrome-accent-local) 18%);
    font-size: 0.55rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .spw-attention-posture-pill__value {
    display: none;
  }
}

/* Richer cauldron ingredient list — supports the force-gathering / emergence model */
.site-footer__cauldron-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem 0.3rem;
  margin: 0.3rem 0 0.15rem;
  font-size: 0.71rem;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  align-items: flex-end; /* buttons/actions at bottom of footer cauldron layout */
}

.site-footer__cauldron-status {
  margin: 0.18rem 0 0;
  max-inline-size: 58ch;
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 86%, var(--component-accent, var(--active-op-color, var(--teal))) 14%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Compact instruction link for footer cauldron discoverability (links to palettes hooks section with contract/demo/learnability text).
   Small, inline, doesn't disrupt the status reflection of state. */
.site-footer__cauldron-status .cauldron-instruction-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.78em;
  opacity: 0.75;
  text-decoration: underline;
  margin-inline-start: 0.35em;
  white-space: nowrap;
}

.site-footer__cauldron-availability {
  display: inline;
  color: color-mix(in srgb, var(--ink-muted, rgba(14,18,20,0.58)) 84%, var(--component-accent, var(--active-op-color, var(--teal))) 16%);
}
.site-footer__cauldron-status .cauldron-instruction-link:hover,
.site-footer__cauldron-status .cauldron-instruction-link:focus {
  opacity: 1;
}

/* Improved footer cauldron layout: status + ingredients flex container with actions (clear etc) bottom-aligned; resonates with .spw-cauldron-footer pattern for cards. Better ergonomics, visual grouping for learnability of collection state. */
.site-footer__cauldron {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-top: 0.12rem;
  padding: 0.68rem;
  border: 1px solid var(--footer-panel-line);
  border-radius: var(--shape-surface, 8px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--footer-accent, var(--active-op-color, var(--teal))) 5%, transparent), transparent 54%),
    var(--footer-panel-bg);
}
.site-footer__cauldron .site-footer__cauldron-status + .site-footer__cauldron-ingredients {
  margin-top: 0.1rem;
}

.site-footer__cauldron[data-spw-cauldron-state="empty"] {
  opacity: 0.88;
}

.site-footer__cauldron[data-spw-cauldron-state="empty"] .site-footer__cauldron-actions .operator-chip:not([data-spw-cauldron-action="clear"]) {
  opacity: 0.42;
}

.site-footer__cauldron[data-spw-cauldron-state="spell-ready"] {
  border-color: color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 28%, var(--footer-panel-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 16%, transparent);
}

.site-footer__spell-preview {
  display: grid;
  gap: 0.12rem;
  padding: 0.48rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 18%, transparent);
  border-radius: calc(var(--shape-control, 0.78rem) - 0.18rem);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

.site-footer__spell-preview[hidden] {
  display: none;
}

.site-footer__spell-preview-meta,
.site-footer__spell-preview-path {
  margin: 0;
}

.site-footer__spell-preview-meta {
  color: var(--ink-muted, rgba(14, 18, 20, 0.58));
  font-size: var(--text-size-2xs, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-footer__spell-preview-path {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: var(--text-size-xs, 0.82rem);
  overflow-wrap: anywhere;
  letter-spacing: 0.01em;
  transition: color var(--spw-control-transition-fast, 120ms ease);
}

.site-footer__spell-preview[data-spw-spell-state="draft"] .site-footer__spell-preview-meta {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 58%, var(--component-accent, var(--active-op-color, var(--teal))) 42%);
}

.site-footer__cauldron[data-spw-cauldron-state="spell-ready"] .site-footer__spell-preview {
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal-dark)) 28%, transparent);
}

/* Visual state reflection on footer cauldron (data-spw-cauldron-phase from computeCauldronPhase + sync).
   Improves state UX discoverability: resonant/mature states get subtle "charged" accent/emphasis so the garden feels alive and tended.
   Compact, uses existing tokens, no new heavy rules. */
.site-footer__cauldron[data-spw-cauldron-garden-phase="resonant"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent), var(--card-shadow);
}
.site-footer__cauldron[data-spw-cauldron-garden-phase="mature"] {
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal-dark)) 24%, var(--line));
}
.site-footer__cauldron[data-spw-cauldron-phase="empty"] {
  opacity: 0.85;
}

/* Cauldron ingredients — styled as inspectable semantic chips using shared tokens */
.cauldron-ingredient {
  --cauldron-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 94%, var(--component-accent, var(--active-op-color, var(--teal))) 6%);
  --cauldron-chip-border: color-mix(in oklab, var(--component-accent, var(--active-op-color, var(--teal))) 16%, var(--line, rgba(14,18,20,0.14)) 84%);
  --cauldron-chip-ink: var(--ink-soft, rgba(14, 18, 20, 0.72));

  display: inline-flex;
  align-items: center;
  gap: var(--spw-control-gap, 0.28rem);
  min-height: var(--spw-control-min-height, 2.15rem);
  padding: var(--spw-control-padding-block, 0.26rem) calc(var(--spw-control-padding-inline, 0.68rem) * 0.7);
  border: 1px solid var(--cauldron-chip-border);
  border-radius: var(--spw-control-radius, var(--shape-control, 0.78rem));
  background: var(--cauldron-chip-bg);
  color: var(--cauldron-chip-ink);
  font-size: var(--text-size-chip, 0.82rem);
  line-height: var(--spw-control-line-height, 1.08);
  white-space: nowrap;
  transition:
    background-color var(--spw-control-transition-fast),
    border-color var(--spw-control-transition-fast),
    color var(--spw-control-transition-fast),
    box-shadow var(--spw-control-transition-base),
    transform var(--spw-control-transition-fast);
  cursor: grab;
  touch-action: manipulation;
  position: relative;
}

/* Primed / state reflection on individual cauldron ingredients (data-spw-ingredient-primed from gesture).
   Enhances state UX visibility in footer: primed ones "glow" with the action color to reflect the charged origin.
   Improves discoverability of the primed containment concept without extra elements. */
.cauldron-ingredient[data-spw-ingredient-primed] {
  --cauldron-chip-border: color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
}

/* Make cauldron ingredients feel like true "ingredients" — clear prime/gather affordance */
.cauldron-ingredient::before {
  content: "⟐";
  font-size: 0.7em;
  opacity: 0.5;
  margin-right: -0.1em;
}

.cauldron-ingredient[data-spw-ingredient-primed="true"] {
  --cauldron-chip-border: color-mix(in oklab, var(--component-accent, var(--active-op-color, var(--teal))) 38%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 22%, transparent);
  transform: translateY(-0.5px);
}

/* Device optimization for cauldron ingredients (larger comfortable tap targets on narrow viewports) */
@media (max-width: 720px) {
  .cauldron-ingredient {
    min-height: 2.4rem;
    padding: 0.32rem 0.55rem;
    font-size: 0.78rem;
  }
  .cauldron-ingredient-remove {
    min-width: 1.6rem;
    min-height: 1.6rem;
  }
}

.cauldron-ingredient:hover,
.cauldron-ingredient:focus-visible {
  --cauldron-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 90%, var(--component-accent, var(--active-op-color, var(--teal))) 10%);
  --cauldron-chip-border: color-mix(in oklab, var(--component-accent, var(--active-op-color, var(--teal))) 28%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 18%, transparent);
  transform: translateY(-1px);
}

/* Cauldron locality: ingredients can be scoped to a cognitive container for more natural, local gathering/reset cycles */
[data-spw-cognitive-container] .cauldron-ingredient {
  font-size: 0.68rem;
  min-height: 1.9rem;
}

[data-spw-cognitive-container] .site-footer__cauldron-ingredients {
  gap: 0.18rem 0.24rem;
}

.cauldron-ingredient:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 40%, transparent);
  outline-offset: 1px;
}

.cauldron-ingredient[data-spw-ingredient-inspect="active"] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 35%, transparent);
}

.cauldron-ingredient-op {
  font-weight: 700;
  color: var(--active-op-color, var(--component-accent, var(--teal)));
  opacity: 0.9;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

.cauldron-ingredient-expr {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
}

.cauldron-ingredient-meta-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  opacity: 0.7;
  font-size: 0.72em;
}

.cauldron-ingredient-meta,
.cauldron-origin {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 12%, transparent);
  font-size: 0.68em;
  letter-spacing: 0.02em;
}

.cauldron-origin {
  font-style: italic;
  opacity: 0.65;
}

/* Further cauldron UX polish for funding/self-imagination tranche:
   Ingredients carrying character-capacity or budgeting origin get a subtle, inspectable accent.
   This makes the "trace changes and wonder about variants" path from budgeting/character tools
   immediately visible in the memory garden without adding rules, chrome, or cognitive load.
   Powerusers can query [data-spw-origin*="budgeting"] or [data-spw-wonder="character-capacity"].
   Scoped, additive, respects existing meta styles and locality. */
.cauldron-ingredient[data-spw-origin*="budgeting"],
.cauldron-ingredient[data-spw-wonder="character-capacity"],
.cauldron-ingredient[data-spw-origin*="character"] {
  --cauldron-chip-border: color-mix(in oklab, var(--op-object-color, #c48a28) 28%, var(--cauldron-chip-border, currentColor) 72%);
}
.cauldron-ingredient[data-spw-wonder="character-capacity"] .cauldron-origin,
.cauldron-ingredient[data-spw-origin*="character"] .cauldron-origin {
  font-weight: 600;
  opacity: 0.82;
}

/* Deeper higher-order dimension rendering in cauldron (from budgeting macros + resource modeling).
   Keeps the memory garden as a first-class viewer for complex, shareable, higher-order models.
   Small, scoped, additive — reuses existing meta chip aesthetics. */
.cauldron-dimension-chip {
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--op-object-color, #c48a28) 12%, transparent);
  font-size: 0.65em;
  margin-right: 0.15rem;
}
.cauldron-ingredient-meta.cauldron-dimensions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}

.cauldron-primed {
  border: 1px dashed color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 32%, transparent);
  background: color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 10%, transparent);
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 78%, var(--component-accent, var(--active-op-color, var(--teal))) 22%);
  font-weight: 700;
}

.cauldron-ingredient-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  font-size: 1.05em;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
  border-radius: 999px;
  transition: opacity var(--spw-control-transition-fast), color var(--spw-control-transition-fast);
  align-self: flex-end; /* button alignment at bottom of cauldron chip / footer layout */
  min-width: 1.5rem;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cauldron-ingredient-remove:hover,
.cauldron-ingredient-remove:focus-visible {
  opacity: 1;
  color: var(--danger, #9d2f2f);
  background: color-mix(in srgb, var(--danger, #9d2f2f) 12%, transparent);
}

/* Consistent disabled state for cauldron controls (mix/clear use .operator-chip) */
.site-footer__cauldron button[disabled],
.site-footer__cauldron [data-spw-cauldron-action][disabled] {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.6);
}

/* Improve footer cauldron layout and action buttons for better visual ergonomics and learnability.
   Actions in a responsive flex wrap (2-col on narrow like screenshot, more on wide).
   Soft, cohesive pill styling to match the "Memory Garden" presentation in reference views (light bg, subtle borders, consistent with operator-chip but tuned for cauldron context).
   Buttons have good tap targets, left-aligned operator+label for scannability, hover feedback.
   The row uses gap for breathing room; on wider viewports they can breathe more or wrap cleanly.
   Ties to learnability (clear actions with operators), configurable (the actions themselves are the "verbs" for feedback level of engagement with the garden).
*/
.site-footer__cauldron-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.site-footer__cauldron-actions .operator-chip {
  flex: 1 1 calc(50% - 0.125rem);
  min-height: 2.1rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  justify-content: flex-start;
  background: color-mix(in srgb, var(--surface-strong, #f8f5f0) 96%, var(--component-accent, var(--active-op-color, #2a6b6b)) 4%);
  border: 1px solid color-mix(in srgb, var(--line, rgba(0,0,0,0.1)) 40%, transparent);
  color: color-mix(in srgb, var(--ink, #222) 85%, var(--component-accent, #2a6b6b) 15%);
  border-radius: 10px;
  box-shadow: none;
  transition: transform 80ms, background 80ms, border-color 80ms, color 80ms;
}

.site-footer__cauldron-actions .operator-chip[data-spw-action-tier="primary"] {
  flex-basis: 100%;
  justify-content: center;
  font-weight: 800;
  background: color-mix(in srgb, var(--surface-strong, #f8f5f0) 82%, var(--component-accent, var(--active-op-color, #2a6b6b)) 18%);
  border-color: color-mix(in srgb, var(--component-accent, #2a6b6b) 34%, transparent);
}

.site-footer__cauldron-actions .operator-chip[data-spw-action-tier="cleanup"] {
  flex-grow: 0;
  opacity: 0.72;
}

.site-footer__cauldron-actions .operator-chip[data-spw-action-tier="output"] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--op-object-color, #c48a28) 30%, transparent);
}

.site-footer__cauldron[data-spw-cauldron-state="empty"] .operator-chip[data-spw-action-tier="primary"],
.site-footer__cauldron[data-spw-cauldron-state="primed"] .operator-chip[data-spw-action-tier="primary"] {
  background: color-mix(in srgb, var(--surface-strong, #f8f5f0) 97%, transparent);
  border-color: color-mix(in srgb, var(--line, rgba(0,0,0,0.1)) 42%, transparent);
  color: color-mix(in srgb, var(--ink-soft, #555) 68%, transparent);
}
.site-footer__cauldron-actions .operator-chip:hover:not(:disabled),
.site-footer__cauldron-actions .operator-chip:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--surface-strong, #f8f5f0) 90%, var(--component-accent, #2a6b6b) 10%);
  border-color: color-mix(in srgb, var(--component-accent, #2a6b6b) 25%, transparent);
  color: var(--ink, #111);
  transform: translateY(-1px);
}

.site-footer__cauldron[data-spw-cauldron-state="primed"] .operator-chip[data-spw-action-tier="primary"]:not(:disabled),
.site-footer__cauldron[data-spw-cauldron-discoverability="compose-next"] .operator-chip[data-spw-cauldron-action="mix"]:not(:disabled) {
  border-color: color-mix(in srgb, var(--component-accent, #2a6b6b) 38%, transparent);
  color: color-mix(in srgb, var(--ink, #111) 78%, var(--component-accent, #2a6b6b) 22%);
}
@media (min-width: 640px) {
  .site-footer__cauldron-actions .operator-chip {
    flex: 0 1 auto;
    min-width: 7.5rem;
  }
}

/* Lifecycle phases for memory gardening (additive, respects existing layers) */
.cauldron-ingredient[data-spw-ingredient-phase="mature"] {
  opacity: 0.78;
  filter: saturate(0.75);
}
.cauldron-ingredient[data-spw-ingredient-phase="decayed"] {
  opacity: 0.55;
  text-decoration: line-through;
  filter: grayscale(0.6) saturate(0.4);
}

.site-footer__cauldron[data-spw-cauldron-garden-phase="mature"],
.site-footer__cauldron[data-spw-cauldron-garden-phase="resonant"] {
  border-color: color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 18%, var(--line, rgba(14,18,20,0.14)) 82%);
}

/* Visual mode toggle + settings wiring for differential cauldron / spell candidate visibility.
   Uses data-spw-cauldron-candidate-visibility (subtle|balanced|prominent) from site-settings.
   Prominent: stronger wash/highlight on ingredients and primed/candidate items for learnability when "visual" mode.
   Subtle: muted for clean reading. Balanced default. Improves token logic (reuses --cauldron-candidate-wash etc from tokens).
   Cascade: tokens first, then these rules in shell (after material in effects). */
html[data-spw-cauldron-candidate-visibility="prominent"] {
  --cauldron-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 20%, transparent);
  --spell-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
  --cauldron-highlight: color-mix(in srgb, var(--active-op-color, var(--teal)) 28%, transparent);
  --region-jump-target: color-mix(in srgb, var(--active-op-color, var(--teal)) 24%, transparent);
}
html[data-spw-cauldron-candidate-visibility="prominent"] .cauldron-ingredient,
[data-spw-cauldron-candidate-visibility="prominent"] .cauldron-ingredient {
  --cauldron-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 80%, var(--component-accent, var(--active-op-color, var(--teal))) 20%);
  --cauldron-chip-border: color-mix(in oklab, var(--component-accent, var(--active-op-color, var(--teal))) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 25%, transparent);
}
html[data-spw-cauldron-candidate-visibility="balanced"] {
  --cauldron-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
  --spell-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 7%, transparent);
}
html[data-spw-cauldron-candidate-visibility="subtle"] {
  --cauldron-candidate-wash: transparent;
  --spell-candidate-wash: transparent;
  --cauldron-highlight: transparent;
}
html[data-spw-cauldron-candidate-visibility="subtle"] .cauldron-ingredient,
[data-spw-cauldron-candidate-visibility="subtle"] .cauldron-ingredient {
  --cauldron-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 98%, var(--component-accent, var(--active-op-color, var(--teal))) 2%);
  --cauldron-chip-border: color-mix(in oklab, var(--component-accent, var(--active-op-color, var(--teal))) 8%, transparent);
  opacity: 0.82;
}
/* Spell candidates (primed living terms, charged interactables) differentially visible in prominent mode */
html[data-spw-cauldron-candidate-visibility="prominent"] [data-spw-ingredient-primed],
html[data-spw-cauldron-candidate-visibility="prominent"] .spw-living-term[data-spw-gesture],
html[data-spw-cauldron-candidate-visibility="prominent"] [data-spw-primed] {
  --spell-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
  background: var(--spell-candidate-wash);
  outline: 1px dashed color-mix(in srgb, var(--active-op-color, var(--teal)) 40%, transparent);
  outline-offset: 1px;
}
html[data-spw-cauldron-candidate-visibility="subtle"] [data-spw-ingredient-primed],
html[data-spw-cauldron-candidate-visibility="subtle"] .spw-living-term[data-spw-gesture] {
  opacity: 0.7;
}

/* Subtle gardening affordance on prune/plant/nourish when the garden has material */
.site-footer__cauldron [data-spw-cauldron-action="prune"],
.site-footer__cauldron [data-spw-cauldron-action="nourish"],
.site-footer__cauldron [data-spw-cauldron-action="plant"] {
  transition: opacity 120ms ease, filter 120ms ease;
}
.site-footer__cauldron[data-spw-cauldron-garden-phase="mature"] [data-spw-cauldron-action="prune"],
.site-footer__cauldron[data-spw-cauldron-garden-phase="decayed"] [data-spw-cauldron-action="prune"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--op-action-color, var(--teal-dark)) 34%, transparent);
}

[data-spw-cauldron-mirror] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

[data-spw-cauldron-mirror] [data-spw-mirror-label] {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.16rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
}

/* Header/nav transitional behavior tied to active runtime layers */
:root[data-spw-active-layers="core"] :where(.site-header, body > header) {
  --spw-header-opacity-local: 0.7;
  transition-duration: 80ms;
}

:root[data-spw-active-layers~="enhancement"] :where(.site-header, body > header) {
  --spw-header-opacity-local: 0.98;
}

/* Structures that help the learner stay with the actual combination
   rather than over-valuing any single mnemonic */
.cauldron-combination-record {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--spw-shell-chrome-line-local) 65%, transparent);
  border-radius: 6px;
  background: color-mix(in oklab, var(--surface, rgba(255,255,255,0.65)) 96%, transparent);
}

.cauldron-section-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.35rem;
}

.cauldron-crystallization {
  padding-top: 0.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 70%, transparent);
}

/* Subtle visual reflection of the suggested cast liminality (deeper projection of semantics into the UI) */
.cauldron-crystallization[data-spw-liminality="deep"] {
  border-left: 3px solid color-mix(in srgb, var(--semantic-accent, var(--component-accent)) 35%, transparent);
}
.cauldron-crystallization[data-spw-liminality="nested"] {
  border-left: 2px solid color-mix(in srgb, var(--semantic-accent, var(--component-accent)) 25%, transparent);
}

.cauldron-mnemonic-note,
.cauldron-test-prompt {
  font-size: 0.72rem;
  opacity: 0.75;
  margin: 0.35rem 0;
}

.cauldron-mnemonic {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  white-space: pre-wrap;
}

.cauldron-plus {
  opacity: 0.5;
  margin: 0 0.2rem;
}

@media (max-width: 600px) {
  :where(.site-header, body > header) {
    padding-top: max(0.12rem, env(safe-area-inset-top));
  }

  .spw-nav-toggle {
    min-height: max(2.24rem, var(--spw-control-min-height, 2.02rem));
    padding:
      calc(var(--spw-control-padding-block, 0.2rem) + 0.14rem)
      calc(var(--spw-control-padding-inline, 0.6rem) + 0.18rem);
  }

  .spw-shell-utility-row {
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.18rem;
    touch-action: pan-y;
    scroll-snap-type: none;
    scrollbar-width: auto;
    row-gap: 0.22rem;
  }

  .spw-utility-cluster {
    flex: 0 0 auto;
    min-block-size: 1.58rem;
    border-radius: calc(var(--shape-control, 0.78rem) - 0.2rem);
  }

  .spw-shell-utility-button {
    min-inline-size: 1.72rem;
    min-height: 1.58rem;
    padding: 0.12rem 0.32rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
}

@media (hover: none), (pointer: coarse) {
  .spw-route-menu-host {
    grid-column: 1 / -1;
  }

  .spw-route-menu {
    width: 100%;
  }

  .spw-route-menu-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .spw-route-menu-panel {
    position: static;
    inset: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-top: 0.35rem;
  }

  .spw-shell-utility-row {
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.18rem;
    touch-action: pan-y;
    scroll-snap-type: none;
    scrollbar-width: auto;
    row-gap: 0.22rem;
  }

  .spw-utility-cluster {
    flex: 0 0 auto;
  }

  .spw-shell-utility-button {
    min-inline-size: 1.72rem;
    min-height: 1.58rem;
    padding: 0.12rem 0.32rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  :where(.site-header, body > header) .spw-spell-path {
    font-size: var(--text-size-2xs, 0.72rem);
  }

  .spw-spell-dock-summary {
    font-size: var(--text-size-2xs, 0.72rem);
  }

  :where(.site-header ul, body > header ul) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .spw-spell-dock {
    display: none;
  }

  .spw-spell-dock-summary {
    min-height: 1.82rem;
    padding: 0.22rem 0.5rem;
  }

  .spw-spell-dock-body {
    gap: 0.38rem;
    padding: 0.12rem 0.5rem 0.5rem;
  }

  .spw-spell-dock[data-spw-viewport="compact"] .spell-source--compact {
    display: none;
  }

  .spw-spell-dock[data-spw-viewport="compact"] .spell-visual--compact {
    gap: 0.22rem 0.28rem;
  }

  .spw-spell-dock[data-spw-viewport="compact"] .spell-ingredient {
    min-height: 1.72rem;
    padding: 0.18rem 0.42rem;
    font-size: var(--text-size-2xs, 0.72rem);
  }

  .spw-spell-dock[data-spw-viewport="compact"] .spell-register-strip {
    gap: 0.24rem 0.3rem;
  }

  .spw-spell-dock[data-spw-viewport="compact"] .spell-register {
    padding: 0.12rem 0.36rem;
    font-size: var(--text-size-2xs, 0.72rem);
  }

  .spw-spell-dock[data-spw-viewport="compact"] .spell-note--compact {
    font-size: var(--text-size-xs, 0.8rem);
    line-height: 1.4;
  }
}

@media (max-width: 340px) {
  :where(.site-header ul, body > header ul) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"])::after,
  html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"])::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header, 1000) + 6);
    background: color-mix(in oklab, var(--bg, #111) 52%, transparent);
    backdrop-filter: blur(4px) saturate(0.94);
    -webkit-backdrop-filter: blur(4px) saturate(0.94);
    pointer-events: none;
  }

  .site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"] nav,
  body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"] nav {
    z-index: calc(var(--z-drawer, calc(var(--z-priority, 2000) + 20)) + 4);
  }

  html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"]) .spw-state-inspector[data-spw-state-inspector="closed"]:not([data-spw-satchel-positioned="user"]),
  html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"]) .spw-state-inspector[data-spw-state-inspector="closed"]:not([data-spw-satchel-positioned="user"]) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.45rem);
    transition:
      opacity 160ms var(--shell-ease, ease),
      transform 160ms var(--shell-ease, ease);
  }

  .site-header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] nav,
  body > header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] nav {
    grid-area: nav;
    grid-column: 1 / -1;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: none;
    margin-block-start: 0.12rem;
  }

  .site-header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] ul,
  body > header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(6.2rem, 35vw, 8.5rem)), 1fr));
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.36rem clamp(0.38rem, 2.8vw, 0.8rem);
  }

  :where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] li,
         body > header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] li) {
    min-width: 0;
  }

  :where(.site-header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] nav a,
         body > header[data-spw-menu-mode="toggle"][data-spw-menu-topology="drawer-field"][data-spw-menu="open"] nav a) {
    min-width: 0;
    min-height: 2.6rem;
    align-items: center;
  }
}

/* ==========================================================================
   5. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(.site-header, body > header) {
    --spw-shell-pointer-opacity: 0.22;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :where(.site-header, body > header, .site-header nav, body > header nav, .spw-nav-toggle, .spw-nav-toggle-copy, .site-header nav a, body > header nav a, .site-footer__nav a) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   4. Section-context handle (mobile + narrow viewports)
   --------------------------------------------------------------------------
   A slim sticky locomotion field that surfaces where you are inside a long
   page and lets you move top / previous / current / next / bottom without
   losing the section trail.

   Progressive enhancement: the route-level <spw-section-handle> markup is
   the no-JS fallback. The runtime can project a richer control beside it
   while keeping the fallback semantics intact.
   ========================================================================== */

.spw-section-handle,
.spw-section-handle-shell {
  --active-op-color: var(--semantic-accent, var(--spw-shell-chrome-accent, var(--teal, #008080)));
  --spw-handle-direction-glow: 0 0 0 transparent;
  position: fixed;
  left: 50%;
  bottom: calc(
    var(--attention-handle-offset, 1rem)
    + env(safe-area-inset-bottom)
    + var(--spw-floating-menu-clearance, 0px)
  );
  transform: translateX(-50%);
  z-index: var(--spw-floating-tier-z, var(--z-floating, 100));

  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--touch-target-compact, 2.25rem);
  max-width: calc(100vw - 2rem);
  padding: 0.36rem 0.8rem;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--semantic-accent, var(--active-op-color, var(--teal, #008080))) 28%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 92%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 6px 18px color-mix(in srgb, var(--semantic-accent, var(--active-op-color, var(--teal, #008080))) 10%, rgba(0, 0, 0, 0.08)),
    var(--spw-handle-direction-glow);

  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-xs, 0.78rem);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms var(--ease-settle, ease),
    transform 140ms var(--ease-settle, ease),
    border-color 140ms var(--ease-settle, ease);
}

.spw-section-handle[data-spw-handle-state="visible"],
.spw-section-handle-shell[data-spw-handle-state="visible"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.spw-section-handle[data-spw-handle-state="hidden"],
.spw-section-handle-shell[data-spw-handle-state="hidden"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
}

.spw-section-handle .spw-section-handle__op {
  color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 82%, var(--ink));
  font-weight: 600;
}

.spw-section-handle .spw-section-handle__label {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-weight: 500;
  max-width: min(40ch, 64vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.spw-section-handle:is(:hover, :focus-visible),
.spw-section-handle-shell:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 52%, transparent);
  outline: none;
}

.spw-section-handle[hidden] {
  display: none !important;
}

.spw-section-handle-shell {
  gap: 0.24rem;
  min-height: calc(var(--touch-target-compact, 2.25rem) + 0.08rem);
  max-width: min(42rem, calc(100vw - 1rem));
  padding: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  contain: layout paint style;
  border-radius: calc(var(--shape-control, 0.78rem) + 0.36rem);
  isolation: isolate;
}

.spw-section-handle-shell::before,
.spw-section-handle-shell::after {
  content: "";
  position: absolute;
  inset-block-end: 0.13rem;
  inset-inline-start: 0.42rem;
  inset-inline-end: 0.42rem;
  block-size: 0.12rem;
  border-radius: 999px;
  pointer-events: none;
}

.spw-section-handle-shell::before {
  background: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 12%, transparent);
  opacity: 0.72;
  z-index: 0;
}

.spw-section-handle-shell::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 36%, transparent),
    color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 72%, var(--surface-strong, #fff) 8%)
  );
  box-shadow: 0 0 0.65rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 22%, transparent);
  opacity: 0.9;
  transform: scaleX(var(--spw-section-progress, 0));
  transform-origin: left center;
  transition:
    transform 180ms var(--ease-settle, ease),
    opacity 180ms var(--ease-settle, ease);
  z-index: 0;
}

.spw-section-handle-shell > * {
  position: relative;
  z-index: 1;
}

/* Improved touch/keyboard UX for floating chrome (section handle shell).
   Larger comfortable hit areas on narrow viewports, stronger focus-visible for keyboard users,
   subtle active feedback without layout shift. Ties into existing touch-target tokens. */
.spw-section-handle-shell button,
.spw-section-handle-shell .spw-section-handle-current {
  min-height: var(--touch-target-compact, 2.25rem);
  min-width: var(--touch-target-compact, 2.25rem);
  padding: 0.25rem 0.45rem;
  border-radius: calc(var(--shape-control, 0.78rem) + 0.1rem);
  transition: transform 80ms var(--ease-settle, ease), box-shadow 120ms ease;
}

.spw-section-handle-shell button:is(:hover, :focus-visible),
.spw-section-handle-shell .spw-section-handle-current:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

.spw-section-handle-shell button:active {
  transform: scale(0.98);
}

.spw-section-handle-shell button:focus-visible,
.spw-section-handle-shell .spw-section-handle-current:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 65%, transparent);
  outline-offset: 2px;
}

.spw-section-handle-shell[data-spw-handle-phase="traveling"] {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 48%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 10px 26px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 16%, rgba(0, 0, 0, 0.12));
}

/* Enhanced UX for floating chrome (section handle) with vocabulary resonance + wonder priming
   - The handle becomes more "alive" and context-sensitive when near primable vocabulary terms
     or active wonder/resonance states (ties directly to recent interactive vocabulary work).
   - Supports page-specific attentional rhythm and cathartic, playful discovery.
   - Modern, performant: attribute-driven, no new observers. */
body:has([data-spw-vocabulary-term]:hover, [data-spw-vocabulary-term]:focus-visible) .spw-section-handle,
body:has([data-spw-wonder-state]:not([data-spw-wonder-state=""])) .spw-section-handle {
  --active-op-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 15%, var(--op-probe-color, #6a3fb8));
}

body:has([data-spw-vocabulary-term]:hover, [data-spw-vocabulary-term]:focus-visible) .spw-section-handle-shell::after,
body:has([data-spw-wonder-state]:not([data-spw-wonder-state=""])) .spw-section-handle-shell::after {
  opacity: 1;
  box-shadow:
    0 0 0.55rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 35%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
}

/* When the current section has strong vocabulary or wonder content, the handle invites priming
   (subtle persistent cue without clutter — supports wonder priming mechanics and game-like discoverability). */
.spw-section-handle[data-spw-section-has-vocabulary="true"],
.spw-section-handle-shell[data-spw-section-has-vocabulary="true"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent),
    var(--handle-shadow-rest, 0 1px 3px rgba(0,0,0,0.06));
}

.spw-section-handle-shell[data-spw-handle-phase="traveling"]::after {
  opacity: 1;
  box-shadow:
    0 0 0.55rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 28%, transparent),
    0 0 1.2rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent);
}

html[data-spw-page-section-direction="forward"] .spw-section-handle-shell {
  --spw-handle-direction-glow:
    0 0.3rem 1.2rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
}

html[data-spw-page-section-direction="back"] .spw-section-handle-shell {
  --spw-handle-direction-glow:
    0 -0.12rem 1rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 8%, transparent);
}

.spw-section-handle-step,
.spw-section-handle-current,
.spw-section-handle-toggle {
  min-height: calc(var(--touch-target-compact, 2.25rem) - 0.12rem);
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 12%, transparent);
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 96%, transparent);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

.spw-section-handle-step,
.spw-section-handle-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--touch-target-compact, 2.25rem) - 0.12rem);
  padding: 0 0.56rem;
  border-radius: var(--shape-control, 0.78rem);
  font: inherit;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 120ms var(--ease-settle, ease),
    border-color 120ms var(--ease-settle, ease),
    transform 120ms var(--ease-settle, ease),
    opacity 120ms var(--ease-settle, ease);
}

.spw-section-handle-step:is(:hover, :focus-visible),
.spw-section-handle-current:is(:hover, :focus-visible),
.spw-section-handle-toggle:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 34%, transparent);
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
  outline: none;
}

.spw-section-handle-step:disabled,
.spw-section-handle-toggle:disabled {
  opacity: 0.36;
  cursor: default;
  transform: none;
}

.spw-section-handle-current {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.2rem 0.56rem;
  border-radius: var(--shape-control, 0.78rem);
}

.spw-section-handle-current-token {
  color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 82%, var(--ink));
  font-weight: 700;
  font-size: 0.72rem;
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spw-section-handle-current-copy {
  display: flex;
  align-items: baseline;
  gap: 0.34rem;
  min-width: 0;
}

.spw-section-handle-current-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-weight: 600;
}

.spw-section-handle-progress {
  flex: 0 0 auto;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-section-handle-shell[data-spw-handle-shell-state="collapsed"] [data-spw-handle-advanced="true"] {
  display: none;
}

.spw-section-handle-shell[data-spw-handle-shell-state="collapsed"] .spw-section-handle-current {
  min-width: min(18rem, calc(100vw - 12rem));
}

.spw-section-handle-shell[data-spw-handle-shell-state="expanded"] {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.44) inset,
    0 12px 28px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, rgba(0, 0, 0, 0.1)),
    var(--spw-handle-direction-glow);
}

.spw-section-handle-shell[data-spw-cauldron-resonance="active"] {
  border-color: color-mix(in srgb, var(--op-object-color, #a67c00) 36%, var(--active-op-color, var(--teal, #008080)) 24%);
}

html[data-spw-page-section-phase="traveling"] .spw-section-handle-shell {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 54%, transparent);
}

.spw-section-handle-step[aria-disabled="true"],
.spw-section-handle-toggle[aria-disabled="true"] {
  opacity: 0.34;
  cursor: default;
  pointer-events: none;
}

.spw-section-handle-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body:has(.spw-section-handle-shell[data-spw-handle-enhanced="true"]) > .spw-section-handle:not(.spw-section-handle-shell) {
  display: none !important;
}

@media (max-width: 720px) {
  :where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) {
    --shell-nav-min-height: 2.5rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] .spw-shell-utility-row,
         body > header[data-spw-menu-mode="toggle"] .spw-shell-utility-row) {
    min-block-size: 2rem;
    padding-block: 0.18rem;
    padding-inline: 0.22rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] .spw-shell-utility-button,
         body > header[data-spw-menu-mode="toggle"] .spw-shell-utility-button) {
    height: 1.62rem;
    min-width: 1.62rem;
    min-height: 1.62rem;
    font-size: 0.74rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] ul, body > header[data-spw-menu-mode="toggle"] ul) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.26rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a) {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.36rem;
    padding: 0.38rem 0.64rem;
    text-align: left;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip) {
    gap: 0.42rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip)::before {
    content: attr(data-spw-nav-prefix);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    min-height: 1.15rem;
    color: color-mix(in oklab, var(--spw-shell-mobile-accent) 72%, var(--spw-shell-mobile-card-ink) 28%);
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    flex: 0 0 auto;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] nav a, body > header[data-spw-menu-mode="toggle"] nav a)::after {
    inset: auto 0.5rem 0.32rem;
  }

  :where(.site-header[data-spw-menu-topology="screen-field"] ul, body > header[data-spw-menu-topology="screen-field"] ul) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.26rem;
  }

  :where(.site-header[data-spw-menu-topology="screen-field"] nav a, body > header[data-spw-menu-topology="screen-field"] nav a) {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.34rem;
    padding: 0.38rem 0.64rem;
    text-align: left;
    font-size: min(var(--shell-nav-font-size), 0.82rem);
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(.site-header[data-spw-menu-topology="screen-field"] nav a, body > header[data-spw-menu-topology="screen-field"] nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip) {
    gap: 0.42rem;
  }

  :where(.site-header[data-spw-menu-topology="screen-field"] nav a, body > header[data-spw-menu-topology="screen-field"] nav a)[data-spw-nav-tokenized="true"]:not(.operator-chip)::before {
    content: attr(data-spw-nav-prefix);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.22rem;
    min-height: 1.22rem;
    color: inherit;
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    flex: 0 0 auto;
  }

  .spw-nav-toggle {
    margin-inline-end: calc(var(--subjective-brace-width, 28px) + 0.3rem);
    padding:
      calc(var(--spw-control-padding-block, 0.2rem) + 0.08rem)
      calc(var(--spw-control-padding-inline, 0.52rem) + 0.04rem);
    gap: 0.42rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .spw-nav-toggle-copy {
    gap: 0;
  }

  .spw-nav-toggle-state,
  .spw-nav-toggle-meta {
    display: none;
  }

  .spw-shell-utility-row {
    width: 100%;
    gap: 0.18rem;
    flex-wrap: wrap;
    overflow-x: visible;
    touch-action: pan-y;
    scroll-snap-type: none;
    scrollbar-width: auto;
    row-gap: 0.22rem;
    padding-inline-end: 0;
  }

  .spw-utility-cluster {
    flex: 0 0 auto;
    min-block-size: 1.58rem;
    border-radius: calc(var(--shape-control, 0.78rem) - 0.2rem);
  }

  .spw-shell-utility-button {
    min-height: 1.58rem;
    min-inline-size: 1.72rem;
    padding: 0.12rem 0.32rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }

  .spw-section-handle,
  .spw-section-handle-shell {
    display: inline-flex;
  }

  .spw-section-handle-shell {
    bottom: calc(
      var(--attention-handle-offset, 0.56rem)
      + env(safe-area-inset-bottom)
      + var(--spw-floating-menu-clearance, 0px)
    );
    max-width: calc(100vw - 0.75rem);
    padding: 0.16rem;
    gap: 0.16rem;
    border-radius: calc(var(--shape-control, 0.78rem) + 0.28rem);
  }

  .spw-section-handle-step,
  .spw-section-handle-toggle {
    min-width: 1.84rem;
    min-height: 1.84rem;
    padding-inline: 0.4rem;
    font-size: 0.62rem;
  }

  .spw-section-handle-current {
    min-width: min(16.5rem, calc(100vw - 8rem));
    padding: 0.14rem 0.42rem;
    gap: 0.24rem;
  }

  .spw-section-handle-current-copy {
    gap: 0.2rem;
  }

  .spw-section-handle-current-token {
    display: none;
  }

  .spw-section-handle-progress {
    font-size: 0.58rem;
  }
}

@media (min-width: 520px) and (max-width: 720px) {
  :where(.site-header[data-spw-menu-mode="toggle"] ul,
         body > header[data-spw-menu-mode="toggle"] ul,
         .site-header[data-spw-menu-topology="screen-field"] ul,
         body > header[data-spw-menu-topology="screen-field"] ul) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 421px) and (max-width: 720px) {
  .spw-section-handle-current-token {
    display: inline-flex;
    max-width: 7ch;
  }
}

/*
 * Desktop opt-in: pages with many inline SVG hosts can declare
 * data-spw-section-handle-desktop="auto" on <html> or <body> to keep the
 * handle visible above the mobile breakpoint so long-display readers gain
 * "you are inside SVG X" orientation.
 */
:is(html, body)[data-spw-section-handle-desktop="auto"] .spw-section-handle {
  display: inline-flex;
}

:is(html, body)[data-spw-section-handle-desktop="auto"] .spw-section-handle-shell {
  display: inline-flex;
}

html[data-spw-section-handle="off"] .spw-section-handle {
  display: none !important;
}

html[data-spw-section-handle="off"] .spw-section-handle-shell {
  display: none !important;
}

:where(html[data-spw-shell-menu-lock="true"], body[data-spw-shell-menu-lock="true"]) :where(.spw-section-handle, .spw-section-handle-shell) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

@media (max-width: 540px) {
  :where(.site-header[data-spw-menu-mode="toggle"] ul, body > header[data-spw-menu-mode="toggle"] ul),
  :where(.site-header[data-spw-menu-topology="screen-field"] ul, body > header[data-spw-menu-topology="screen-field"] ul) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
  }

  :where(.site-header[data-spw-menu-mode="toggle"] li, body > header[data-spw-menu-mode="toggle"] li),
  :where(.site-header[data-spw-menu-topology="screen-field"] li, body > header[data-spw-menu-topology="screen-field"] li) {
    width: 100%;
  }

  .spw-section-handle-shell {
    max-width: calc(100vw - 0.5rem);
  }
}

@media (max-width: 360px) {
  :where(.site-header[data-spw-menu-mode="toggle"] ul, body > header[data-spw-menu-mode="toggle"] ul),
  :where(.site-header[data-spw-menu-topology="screen-field"] ul, body > header[data-spw-menu-topology="screen-field"] ul) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spw-section-handle,
  .spw-section-handle-shell,
  .spw-section-handle-step,
  .spw-section-handle-current {
    transition: none !important;
    animation: none !important;
  }
}

/*
 * These chrome affordances are inserted as direct children of <body>.
 * Keep them out of body flex/grid flow even if generic shell or component
 * child selectors assign `position: relative` to top-level descendants.
 */
body > a.skip-link {
  position: fixed;
  top: 0.55rem;
  left: max(0.55rem, env(safe-area-inset-left));
  margin: 0;
  flex: none;
  align-self: auto;
}

body > .spw-section-handle,
body > nav.spw-section-handle-shell {
  position: fixed;
  left: 50%;
  bottom: calc(
    var(--attention-handle-offset, 1rem)
    + env(safe-area-inset-bottom)
    + var(--spw-floating-menu-clearance, 0px)
  );
  margin: 0;
  flex: none;
  align-self: auto;
}
}

/* /public/css/typography/base.css */
@layer typography {
/* ==========================================================================
 * base.css
 * --------------------------------------------------------------------------
 * Spw General & Operator Typography
 * * Defines the core reading rhythm, heading scales, and rich-text semantics.
 * Also houses the dynamic operator typography, where font axes
 * (weight, tracking, size, oblique) interpolate based on the `--charge` state.
 * ========================================================================== */

/* ==========================================================================
   1. General Reading Rhythm & Flow
   ========================================================================== */

/* Establish vertical rhythm for standard prose content */
:where(.prose, article, .frame-copy, .frame-note) {
  --flow-space: var(--spw-flow-space, var(--space-md, 1rem));
}

:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  figcaption,
  li,
  pre,
  code,
  mark,
  [data-reading-region],
  [data-spw-readable]
) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "typography";
  --spw-debug-layer-color: #ddaa33;
}

:where(.prose > * + *, article > * + *, .frame-copy > * + *) {
  margin-block-start: var(--flow-space);
}

:where(p) {
  margin: 0;
  max-inline-size: var(--measure-reading, 68ch);
  text-wrap: pretty;
  color: var(--ink, #161c1d);
}

/* ==========================================================================
   2. Heading Hierarchy
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--ink-strong, #090b0c);
  font-family: var(--site-sans-font, system-ui, sans-serif);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Ensure headings clear preceding content slightly more than standard flow */
  margin-block-start: calc(var(--flow-space, 1rem) * var(--spw-heading-flow-space-multiplier, 1.5));
}

:where(h1:first-child, h2:first-child, h3:first-child) {
  margin-block-start: 0;
}

:where(h1) { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; }
:where(h2) { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; }
:where(h3) { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; }
:where(h4) { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 600; }
:where(h5) { font-size: 1rem; font-weight: 600; }
:where(h6) {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

/* ==========================================================================
   3. Rich Text & Inline Semantics
   ========================================================================== */

:where(blockquote) {
  margin: 0;
  padding-inline-start: var(--space-md, 1rem);
  border-left: 3px solid var(--active-op-border, rgba(0, 128, 128, 0.34));
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-style: italic;
}

:where(ul, ol) {
  margin: 0;
  padding-inline-start: 1.5rem;
  max-inline-size: var(--measure-reading, 68ch);
}

:where(blockquote, figcaption, dd, li) {
  max-inline-size: var(--measure-reading, 68ch);
  overflow-wrap: break-word;
}

:where(.frame-note, .inline-note) {
  max-inline-size: min(100%, var(--measure-panel, 52ch));
}

:where(.plan-thesis, .plan-wonder p) {
  max-inline-size: min(100%, var(--measure-panel, 52ch));
}

:where(pre, code, .demo-code-output, .seed-card pre) {
  max-inline-size: min(100%, var(--measure-code, 84ch));
}

:where([data-reading-region], [data-spw-readable]) {
  max-inline-size: var(--measure-reading, 68ch);
}

:where(
  article :is(p, li, blockquote, pre, code, kbd, samp),
  .site-lede,
  .page-lede,
  :is(.frame-panel, .frame-details) p,
  .frame-panel li,
  .inline-note,
  .frame-note,
  .plan-thesis,
  .plan-wonder p,
  .plan-considerations li,
  :is([data-reading-region], [data-spw-readable], [contenteditable])
) {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

:where(li) {
  margin-block-start: var(--space-2xs, 0.25rem);
}

:where(li::marker) {
  color: var(--active-op-color, #008080);
}

:where(hr) {
  border: none;
  border-top: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  margin-block: var(--space-xl, 2rem);
}

:where(strong, b) {
  font-weight: 700;
  color: var(--ink-strong, #090b0c);
}

:where(em, i) {
  font-style: italic;
}

:where(mark) {
  background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.12));
  color: inherit;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

:where(del) {
  text-decoration: line-through;
  opacity: 0.6;
}

:where(a:any-link) {
  --spw-link-visited-color:
    color-mix(in oklab, var(--ink, #161c1d) 68%, var(--active-op-color, #008080) 32%);
  --spw-link-grounded-color:
    color-mix(in oklab, var(--ink, #161c1d) 82%, var(--active-op-color, #008080) 18%);
}

:where(a:visited):not(.operator-chip):not(.frame-sigil):not(.frame-card-sigil):not(.header-sigil) {
  color: var(--spw-link-visited-color);
}

:where(a[data-spw-grounded='true']):not(.operator-chip):not(.frame-sigil):not(.frame-card-sigil):not(.header-sigil) {
  color: var(--spw-link-grounded-color);
}

/* ==========================================================================
   4. Monospace Alignment
   ========================================================================== */
/* Chips, tokens, sigils, and code blocks must all render on the same
   character grid. JetBrains Mono's contextual alternates ("calt") improve
   operator glyph sequences (#>, ->, =>, etc.); "zero" keeps 0 legible.    */

:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil
) {
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-feature-settings: "calt" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

/* Code surfaces: tab stops and pre-layout */
:where(
  pre,
  code,
  kbd,
  samp,
  .spw-transparent-block,
  .spw-state-block code
) {
  tab-size: 2;
  -moz-tab-size: 2;
  font-feature-settings: "calt" 1;
}

/* ==========================================================================
   5. Shared Operator Typographic Custom Properties
   ========================================================================== */
/* Each operator sets these on its own element so --charge calc expressions
   stay generic. Charge-driven calc() handles the actual interpolation.      */

:where([data-spw-operator]) {
  --type-weight-base: 400;
  --type-weight-range: 0;
  --type-tracking-base: 0em;
  --type-tracking-range: 0em;
  --type-size-surge: 0;
  --type-oblique-range: 0;

  font-weight: calc(var(--type-weight-base) + var(--charge, 0) * var(--type-weight-range));
  letter-spacing: calc(var(--type-tracking-base) + var(--charge, 0) * var(--type-tracking-range));
  font-size: calc(1em * (1 + var(--charge, 0) * var(--type-size-surge)));
  font-style: oblique calc(var(--charge, 0) * var(--type-oblique-range) * 1deg);

  transition:
    font-weight var(--duration-base, 220ms) var(--ease-mechanical, ease),
    letter-spacing var(--duration-base, 220ms) var(--ease-mechanical, ease),
    font-size var(--duration-base, 220ms) var(--ease-mechanical, ease),
    font-style var(--duration-base, 220ms) var(--ease-mechanical, ease),
    color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

/* Disable size surge for structural framing logic to prevent layout shift */
:where(.site-frame [data-spw-operator]) {
  --type-size-surge: 0;
}

/* Apply minimal size surge directly to specific inline token handles */
:where(
  .operator-chip[data-spw-operator],
  .spec-pill[data-spw-operator],
  .badge[data-spw-operator],
  .syntax-token[data-spw-operator]
) {
  --type-size-surge: 0.04;
}

/* ==========================================================================
   6. Operator Specific Typographic Axes
   ========================================================================== */

:where([data-spw-operator='frame'], [data-spw-operator='vibration']) {
  --type-weight-base: 500;
  --type-weight-range: 300;
  --type-tracking-base: 0.04em;
  --type-tracking-range: -0.06em;
  --type-size-surge: 0.04;
}

:where([data-spw-operator='probe'], [data-spw-operator='wonder']) {
  --type-weight-base: 400;
  --type-weight-range: 100;
  --type-tracking-base: 0.03em;
  --type-tracking-range: 0.12em;
  --type-oblique-range: 8;
}

:where([data-spw-operator='action']) {
  --type-weight-base: 500;
  --type-weight-range: 400;
  --type-tracking-base: 0.02em;
  --type-tracking-range: -0.02em;
}

:where([data-spw-charge]:is([data-spw-charge='active'], [data-spw-charge='sustained'], [data-spw-charge='manifest'])[data-spw-operator='action']) {
  font-variant-caps: all-small-caps;
}

:where([data-spw-charge]:is([data-spw-charge='sustained'], [data-spw-charge='manifest'])[data-spw-operator='action']) {
  text-transform: uppercase;
  font-variant-caps: normal;
}

:where([data-spw-operator='ref'], [data-spw-operator='potential']) {
  --type-weight-base: 400;
  --type-weight-range: 100;
  --type-tracking-base: 0.02em;
  --type-tracking-range: 0.06em;
  --type-oblique-range: 12;
}

:where([data-spw-operator='stream'], [data-spw-operator='value']) {
  --type-weight-base: 400;
  --type-weight-range: 200;
  --type-tracking-base: 0.04em;
  --type-tracking-range: -0.08em;
}

:where([data-spw-operator='pragma']) {
  --type-weight-base: 600;
  --type-weight-range: 300;
  --type-tracking-base: 0.01em;
  --type-tracking-range: 0.04em;
}

:where([data-spw-charge='charging'][data-spw-operator='pragma']) {
  font-variant-caps: small-caps;
}

:where([data-spw-charge]:is([data-spw-charge='active'], [data-spw-charge='sustained'])[data-spw-operator='pragma']) {
  font-variant-caps: all-small-caps;
}

:where([data-spw-operator='object'], [data-spw-operator='integration']) {
  --type-weight-base: 400;
  --type-weight-range: 300;
  --type-tracking-base: 0.01em;
  --type-tracking-range: 0.03em;
  --type-size-surge: 0.12;
}

:where([data-spw-operator='merge'], [data-spw-operator='subject']) {
  --type-weight-base: 400;
  --type-weight-range: 0;
  --type-tracking-base: 0.04em;
  --type-tracking-range: 0.14em;
}

:where([data-spw-operator='binding']) {
  --type-weight-base: 500;
  --type-weight-range: 100;
  --type-tracking-base: 0;
  --type-tracking-range: -0.01em;
  font-variant-numeric: tabular-nums;
}

:where([data-spw-charge]:is([data-spw-charge='active'], [data-spw-charge='sustained'])[data-spw-operator='binding']) {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-variant-ligatures: none;
}

:where([data-spw-operator='meta']) {
  --type-weight-base: 400;
  --type-weight-range: -100;
  --type-tracking-base: 0.02em;
  --type-tracking-range: 0.06em;
  --type-oblique-range: 16;
}

:where([data-spw-operator='surface'], [data-spw-operator='scene']) {
  --type-weight-base: 500;
  --type-weight-range: 300;
  --type-tracking-base: 0.03em;
  --type-tracking-range: 0.08em;
  --type-size-surge: 0.18;
}

:where([data-spw-operator='layer']) {
  --type-weight-base: 300;
  --type-weight-range: 200;
  --type-tracking-base: 0.06em;
  --type-tracking-range: 0.04em;
  font-variant-caps: small-caps;
}

:where([data-spw-operator='baseline'], [data-spw-operator='ground']) {
  --type-weight-base: 400;
  --type-weight-range: -100;
  --type-tracking-base: 0.01em;
  --type-tracking-range: -0.01em;
  --type-size-surge: -0.06;
  opacity: calc(0.88 - var(--charge, 0) * 0.08);
}

:where([data-spw-operator='perspective']) {
  --type-weight-base: 450;
  --type-weight-range: 160;
  --type-tracking-base: 0.02em;
  --type-tracking-range: 0.05em;
  --type-oblique-range: 10;
}

:where([data-spw-operator='concept']) {
  --type-weight-base: 480;
  --type-weight-range: 180;
  --type-tracking-base: 0.03em;
  --type-tracking-range: 0.08em;
}

:where([data-spw-operator='mode']) {
  --type-weight-base: 500;
  --type-weight-range: 120;
  --type-tracking-base: 0.06em;
  --type-tracking-range: -0.02em;
  font-variant-caps: small-caps;
}

:where([data-spw-operator='direction']) {
  --type-weight-base: 500;
  --type-weight-range: 220;
  --type-tracking-base: 0.02em;
  --type-tracking-range: -0.03em;
}

:where([data-spw-operator='normalize']) {
  --type-weight-base: 500;
  --type-weight-range: 200;
  --type-tracking-base: 0.02em;
  --type-tracking-range: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. Grounding Override
   ========================================================================== */

:where([data-spw-grounded='true']) {
  --charge: 0 !important;
  --type-weight-range: 0;
  --type-tracking-range: 0em;
  --type-size-surge: 0;
  --type-oblique-range: 0;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  text-transform: none;
  font-family: inherit;
}

/* Base operator tinting */
:where([data-spw-grounded-in='probe'])     { color: var(--op-probe-color, #4a2180); }
:where([data-spw-grounded-in='frame'])     { color: var(--op-frame-color, #008080); }
:where([data-spw-grounded-in='action'])    { color: var(--op-action-color, #005959); }
:where([data-spw-grounded-in='ref'])       { color: var(--op-ref-color, #1d57a3); }
:where([data-spw-grounded-in='stream'])    { color: var(--op-stream-color, #208259); }
:where([data-spw-grounded-in='pragma'])    { color: var(--op-pragma-color, #883a3a); }
:where([data-spw-grounded-in='object'])    { color: var(--op-object-color, #a67c00); }
:where([data-spw-grounded-in='binding'])   { color: var(--op-binding-color, #8f401f); }
:where([data-spw-grounded-in='meta'])      { color: var(--op-meta-color, #324a85); }
:where([data-spw-grounded-in='normalize']) { color: var(--op-normalize-color, #4d7539); }
:where([data-spw-grounded-in='surface'])   { color: var(--op-surface-color, #178282); }
:where([data-spw-grounded-in='layer'])     { color: var(--op-layer-color, rgba(14, 18, 20, 0.68)); }
:where([data-spw-grounded-in='baseline'])  { color: var(--op-baseline-color, #594d3f); }
}

/* /public/css/typography/context.css */
@layer typography {
/* ==========================================================================
 * context.css
 * --------------------------------------------------------------------------
 * Spw Typography Context Routing
 * Modulates the base typography and operator axes based on the surrounding
 * environmental state (density, rhythm, and layout stability).
 * ========================================================================== */

/* ==========================================================================
   1. Text Context Routing (Density & Pressure)
   ========================================================================== */

/* Base application of field physics to typography */
:where([data-text-kind]) {
  /* Pressure tightens the vertical rhythm and tracking */
  line-height: calc(var(--site-line-height, 1.68) - (var(--type-field-pressure, 0) * 0.25));
  letter-spacing: calc((var(--type-field-pressure, 0) * -0.01em));
}

:where([data-text-kind] [data-spw-operator]) {
  /* Salience dictates how brightly operators punch through the text */
  opacity: calc(0.35 + (var(--type-field-sigil-salience, 0.5) * 0.65));
  filter: saturate(calc(0.5 + var(--type-field-sigil-salience, 0.5)));
}

/* -- Specific Context Profiles -- */

:where([data-text-kind='operator-dense']) {
  --type-field-sigil-salience: 0.85;
  --type-field-pressure: 0.72;
  --type-weight-bias: 100;
}

:where([data-text-kind='prose']) {
  --type-field-sigil-salience: 0.32;
  --type-field-pressure: 0.18; /* Relaxed for reading */
}

:where([data-text-kind='question']) {
  --type-field-sigil-salience: 0.6;
  --type-field-pressure: 0.4;
  --type-field-rhythm-bias: 0.6;
  font-style: italic;
  color: var(--ink-strong, #090b0c);
}

:where([data-text-kind='metadata']) {
  --type-field-sigil-salience: 0.4;
  --type-field-pressure: 0.85; /* Tightly packed */
  font-size: var(--text-size-xs, 0.85em);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

/* ==========================================================================
   2. Rhythm Ensembles (Group Dynamics)
   ========================================================================== */

/* Chorus: Staggered transition delays for cascading activation */
:where([data-spw-rhythm='chorus'] [data-spw-operator]) {
  transition-delay: calc(var(--rhythm-index, 0) * 18ms);
}

/* Anchor: Grounds the structure by heavily weighting bounding operators */
:where(
  [data-spw-rhythm='anchor'] [data-spw-operator='frame'],
  [data-spw-rhythm='anchor'] [data-spw-operator='binding'],
  [data-spw-rhythm='anchor'] [data-spw-operator='baseline']
) {
  --type-weight-range: calc(var(--type-weight-range-base, 300) + 120);
  --type-size-surge: calc(var(--type-size-surge-base, 0) + 0.05);
}

/* Pulse: Creates a breathing rhythm for long-running processes */
:where([data-spw-rhythm='pulse'] [data-spw-operator]) {
  animation: type-pulse-rhythm var(--duration-slow, 480ms) alternate infinite var(--ease-settle, ease-in-out);
  animation-delay: calc(var(--rhythm-index, 0) * 45ms);
}

@keyframes type-pulse-rhythm {
  0%   { opacity: 0.6; transform: scale(0.98); }
  100% { opacity: 1;   transform: scale(1.02); }
}

/* ==========================================================================
   3. Measurement-Aware Adaptation
   ========================================================================== */
/* Protects layout integrity during reflows or in highly constrained spaces */

/* Volatile: Container is resizing or extremely narrow. Restrict horizontal/vertical surges. */
:where([data-text-wrap='volatile'] [data-spw-operator]) {
  --type-size-surge: calc(var(--type-size-surge-base, 0.1) * 0.4);
  --type-tracking-range: calc(var(--type-tracking-range-base, 0.05em) * 0.5);
  transition-duration: var(--duration-instant, 50ms); /* Snap to prevent layout lag */
}

:where([data-text-wrap='volatile'] [data-spw-operator='surface']) {
  --type-size-surge: calc(var(--type-size-surge-base, 0.18) * 0.3); /* Surface surges the most, reign it in */
}

/* Stable: Container has guaranteed width. Allow full typographic expression. */
:where([data-text-wrap='stable'] [data-spw-operator='probe']) {
  --type-tracking-range: calc(var(--type-tracking-range-base, 0.12em) + 0.04em);
}

:where([data-text-wrap='stable'] [data-spw-operator='stream']) {
  --type-tracking-range: calc(var(--type-tracking-range-base, -0.08em) - 0.02em);
}

/* ==========================================================================
   4. Reduced Motion Handler
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where([data-spw-rhythm='pulse'] [data-spw-operator]) {
    animation: none !important;
    opacity: 1 !important;
  }

  :where([data-spw-rhythm='chorus'] [data-spw-operator]) {
    transition-delay: 0ms !important;
  }
}
}

/* /public/css/typography/typesetting.css */
@layer typography {
/* ==========================================================================
 * typesetting.css
 * --------------------------------------------------------------------------
 * Editorial Typography & Interactive Publishing
 * Provides utility for expressive layouts, "wonder" mode reading,
 * fluid typography scaling, optical sizing, and reading lenses.
 *
 * Activated via: [data-spw-typeset="editorial"]
 * ========================================================================== */

/* Editorial mode defines shared variables, but only explicit surfaces opt in. */
:where([data-spw-typeset="editorial"]) {
  --site-editorial-font: "Newsreader", var(--site-serif-font, "Georgia", serif);
  --surface-editorial: color-mix(in srgb, var(--paper-wash, #fdfbfa) 90%, var(--op-object-color, #a67c00) 2%);
}

/* ==========================================================================
   1. Typographic Adjustments
   ========================================================================== */

/* Only explicit editorial surfaces adopt the serif treatment. */
:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"]) {
  --site-body-font: var(--site-editorial-font);
  font-family: var(--site-editorial-font);
  font-optical-sizing: auto;
  line-height: 1.6;
  font-size: clamp(1.1rem, 2vw, 1.25rem); /* Fluid type for optimal reading */
  max-inline-size: 65ch; /* Ideal line length for serifs */
  margin-inline: auto; /* Center structural columns */
  background-color: var(--surface-editorial);
}

/* Headings scale elegantly and adjust optical sizing based on viewport */
:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] :is(h1, h2)) {
  font-family: var(--site-editorial-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36; /* Request display optics for large text */
  text-wrap: balance;
  margin-block-end: 1rem;
}

:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] :is(h3, h4)) {
  font-family: var(--site-editorial-font);
  font-weight: 600;
  font-variation-settings: "opsz" 24;
}

/* Base text requests smaller optical sizes for better legibility */
:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] p) {
  font-variation-settings: "opsz" 16;
  text-wrap: pretty;
  hanging-punctuation: first last;
}

/* Contextual Spacing */
:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] p + p) {
  margin-block-start: 1.5em;
}

/* ==========================================================================
   2. Expressive Elements
   ========================================================================== */

/* Drop Cap Support */
:where(.drop-cap::first-letter) {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  margin-inline-end: 0.15em;
  padding-block-start: 0.05em;
  font-weight: 600;
  color: var(--active-op-color, var(--op-frame-color, #008080));
  font-variation-settings: "opsz" 72; /* Enormous optical size */
}

/* Hanging Pull Quotes */
:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] blockquote) {
  position: relative;
  margin-block: 2.5rem;
  padding-inline: 2rem;
  border-left: none;
  font-size: 1.4em;
  line-height: 1.4;
  font-style: italic;
  text-align: center;
  color: var(--ink-strong);
  font-variation-settings: "opsz" 24;
}

:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] blockquote::before, [data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] blockquote::after) {
  position: absolute;
  font-size: 3rem;
  line-height: 1;
  color: color-mix(in srgb, var(--active-op-color, #008080) 20%, transparent);
  font-family: var(--site-sans-font);
}

:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] blockquote::before) {
  content: "“";
  top: -1rem;
  left: 0;
}

:where([data-spw-typeset="editorial"] [data-spw-typeset-surface="editorial"] blockquote::after) {
  content: "”";
  bottom: -2rem;
  right: 0;
}

/* ==========================================================================
   3. The "Focus Lens" (Interactive Reading)
   ========================================================================== */

/*
 * Dim siblings when hovering over a paragraph in a focus-enabled container.
 * This encourages deep reading and "creative wondering" by isolating meaning.
 */
:where([data-spw-focus-lens="editorial"]) {
  transition: opacity var(--duration-base) var(--ease-mechanical);
}

:where([data-spw-focus-lens="editorial"] p) {
  transition: opacity var(--duration-base) var(--ease-mechanical), filter var(--duration-base) var(--ease-mechanical);
}

@media (hover: hover) and (pointer: fine) {
  :where([data-spw-focus-lens="editorial"]:has(p:hover)) p:not(:hover) {
    opacity: 0.35;
    filter: blur(1px);
    transition: opacity var(--duration-deliberate) var(--ease-settle), filter var(--duration-deliberate) var(--ease-settle);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-spw-focus-lens="editorial"], [data-spw-focus-lens="editorial"] p) {
    transition: none;
  }

  :where([data-spw-focus-lens="editorial"]:has(p:hover)) p:not(:hover) {
    opacity: 1;
    filter: none;
  }
}

/* ==========================================================================
   3b. Reading Groove (Scroll Activation)
   ========================================================================== */

:where(html[data-spw-reading-groove="on"], body[data-spw-reading-groove="on"]) {
  --spw-reading-rest-opacity: 0.86;
  --spw-reading-near-opacity: 0.96;
  --spw-reading-lead-opacity: 1;
  --spw-reading-rest-shift: 0rem;
  --spw-reading-near-shift: 0.035rem;
  --spw-reading-lead-shift: 0.06rem;
  --spw-reading-rest-color:
    color-mix(in oklab, var(--ink-soft, rgba(14, 18, 20, 0.74)) 96%, var(--ink, rgba(14, 18, 20, 0.92)) 4%);
  --spw-reading-near-color:
    color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 98%, var(--active-op-color, #008080) 2%);
  --spw-reading-lead-color:
    color-mix(in oklab, var(--ink-strong, #090b0c) 97%, var(--active-op-color, #008080) 3%);
  --spw-reading-lead-accent:
    color-mix(in oklab, var(--active-op-color, #008080) 12%, transparent);
  --spw-reading-near-accent:
    color-mix(in oklab, var(--active-op-color, #008080) 4%, transparent);
  --spw-reading-lead-glow:
    inset 0.08rem 0 0 var(--spw-reading-lead-accent, transparent);
}

:where(html[data-spw-reading-groove="off"], body[data-spw-reading-groove="off"]) {
  --spw-reading-rest-opacity: 1;
  --spw-reading-near-opacity: 1;
  --spw-reading-lead-opacity: 1;
}

:where(
  html[data-spw-reading-groove="on"] main :is(article, > section) :is(
    p, li, blockquote, figcaption, .inline-note, .frame-note, h2, h3
  )
) {
  transition:
    opacity 320ms var(--ease-settle, ease),
    transform 420ms var(--ease-settle, ease),
    filter 320ms var(--ease-settle, ease),
    color 260ms var(--ease-settle, ease),
    text-shadow 320ms var(--ease-settle, ease),
    box-shadow 420ms var(--ease-settle, ease);
}

:where(html[data-spw-reading-groove="on"] [data-spw-reading-beat="rest"]) {
  opacity: var(--spw-reading-rest-opacity, 0.86);
  color: var(--spw-reading-rest-color, inherit);
  filter: saturate(0.98);
}

:where(html[data-spw-reading-groove="on"] [data-spw-reading-beat="near"]) {
  opacity: var(--spw-reading-near-opacity, 0.92);
  color: var(--spw-reading-near-color, inherit);
  transform: translateX(var(--spw-reading-near-shift, 0.035rem));
  text-shadow: 0 0 0.45rem var(--spw-reading-near-accent, transparent);
}

:where(html[data-spw-reading-groove="on"] [data-spw-reading-beat="lead"]) {
  opacity: var(--spw-reading-lead-opacity, 1);
  color: var(--spw-reading-lead-color, var(--ink-strong, #090b0c));
  transform: translateX(var(--spw-reading-lead-shift, 0.06rem));
  text-shadow: 0 0 0.02em color-mix(in oklab, var(--ink-strong, #090b0c) 12%, transparent);
  box-shadow: var(--spw-reading-lead-glow);
}

:where(
  html[data-spw-reading-groove="on"] [data-spw-reading-beat-role="heading"][data-spw-reading-beat="lead"],
  html[data-spw-reading-groove="on"] [data-spw-reading-beat-role="note"][data-spw-reading-beat="lead"]
) {
  letter-spacing: -0.012em;
}

:where(html[data-spw-reading-groove="on"] [data-spw-reading-beat-role="list"][data-spw-reading-beat="lead"]) {
  transform: translateX(0.08rem);
}

@media (max-width: 52rem) {
  :where(html[data-spw-reading-groove="on"] [data-spw-reading-beat="near"]) {
    transform: translateX(0.04rem);
  }

  :where(html[data-spw-reading-groove="on"] [data-spw-reading-beat="lead"]) {
    transform: translateX(0.06rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    html[data-spw-reading-groove="on"] [data-spw-reading-beat],
    body[data-spw-reading-groove="on"] [data-spw-reading-beat]
  ) {
    transition: none;
    transform: none;
    filter: none;
    text-shadow: none;
  }

  :where(html[data-spw-reading-groove="on"] [data-spw-reading-beat="rest"]) {
    opacity: 0.92;
  }
}

:where(html[data-spw-pinch-scaling="true"], body[data-spw-pinch-scaling="true"]) {
  cursor: ns-resize;
}

/* ==========================================================================
   4. Marginalia (Responsive Outer Columns)
   ========================================================================== */

/*
 * Float notes into the right margin on sufficiently wide screens
 * Uses intrinsic calculations instead of explicit media queries where possible,
 * but relies on a minimum width to step out.
 */
:where(.margin-note) {
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
  padding: 1rem;
  font-family: var(--site-sans-font);
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  margin-block: 1.5rem;
  border-left: 2px solid var(--op-meta-color, #324a85);
  font-variation-settings: normal; /* Disables opsz inheritance if any */
}

@media (min-width: 76rem) {
  :where([data-spw-layout="split"] [data-spw-typeset-surface="editorial"] .margin-note) {
    position: absolute;
    right: -18rem;
    width: 14rem;
    margin-block: 0;
    margin-top: 0.5rem; /* align optically with paragraph */
    background: transparent;
    border-left: none;
    border-top: 2px solid var(--op-meta-color, #324a85);
    padding-inline: 0;
    padding-block-start: 0.5rem;
  }
}
}

/* /public/css/grammar/syntax.css */
@layer grammar {
/* ==========================================================================
   syntax.css
   --------------------------------------------------------------------------
   Purpose
   - Shared spatial/container grammar for frames, clusters, concepts, forms,
     delimiters, topic lenses, semantic metadata, and brace/rail distinctions.
   - Bridge token physics to reusable structural semantics.
   - Keep route flavor additive while preserving predictable component grammar.
   - Prepare grammar for future JS cooperation, scoped enhancement, and richer
     testing across pages/contexts.

   Design stance
   - Structural grammar should remain legible without JS.
   - Metadata should be useful to CSS and runtime without requiring visible UI.
   - Motion should bias toward opacity / color / transform, not costly layout.
   - Forms should express semantic stance, not only decoration.
   ========================================================================== */

/* ==========================================================================
   1. Grammar tokens
   ========================================================================== */

:root {
  /* timing */
  --grammar-duration-instant: var(--duration-instant, 50ms);
  --grammar-duration-fast: var(--duration-fast, 140ms);
  --grammar-duration-base: var(--duration-base, 220ms);
  --grammar-duration-deliberate: var(--duration-deliberate, 360ms);

  /* easing */
  --grammar-ease-mechanical: var(--ease-mechanical, ease);
  --grammar-ease-settle: var(--ease-settle, ease);
  --grammar-ease-paper: var(--ease-paper, ease);
  --grammar-ease-joint: var(--ease-joint, ease);

  /* shared surfaces */
  --grammar-radius: var(--shape-surface, var(--radius-md, 10px));
  --grammar-radius-sm: var(--shape-component, var(--radius-sm, 6px));
  --grammar-radius-xs: var(--shape-element, var(--radius-xs, 4px));

  --grammar-surface: var(--surface, rgba(255, 255, 255, 0.62));
  --grammar-surface-strong: var(--surface-strong, rgba(255, 255, 255, 0.78));
  --grammar-surface-soft: var(--surface-soft, rgba(255, 255, 255, 0.44));
  --grammar-surface-panel: var(--surface-panel, rgba(255, 255, 255, 0.72));
  --grammar-surface-panel-strong: var(--surface-panel-strong, rgba(255, 255, 255, 0.84));
  --grammar-surface-matte: var(--surface-matte, rgba(247, 244, 238, 0.93));

  --grammar-line: var(--line, rgba(14, 18, 20, 0.14));
  --grammar-line-strong: var(--line-strong, rgba(0, 128, 128, 0.34));
  --grammar-line-quiet: var(--line-quiet, rgba(14, 18, 20, 0.07));

  --grammar-ink: var(--ink, rgba(14, 18, 20, 0.92));
  --grammar-ink-soft: var(--ink-soft, rgba(14, 18, 20, 0.68));
  --grammar-ink-mid: var(--ink-mid, rgba(14, 18, 20, 0.52));

  /* shadow / lift */
  --grammar-shadow: var(--shadow-base, 0 4px 12px rgba(0, 0, 0, 0.06));
  --grammar-shadow-active: var(--shadow-active, 0 8px 28px rgba(0, 0, 0, 0.1));
  --grammar-shadow-projecting: var(--shadow-projecting, 0 14px 34px rgba(0, 0, 0, 0.14));

  /* sizing */
  --grammar-surface-gap: var(--gap-surface, 1rem);
  --grammar-panel-gap: var(--gap-panel, 0.85rem);
  --grammar-cluster-gap: var(--gap-cluster, 0.45rem);

  --grammar-surface-padding: var(--inset-surface, 1rem);
  --grammar-panel-padding: var(--inset-panel, 0.75rem);
  --grammar-component-padding: var(--inset-component, 0.75rem 1rem);

  /* typography */
  --grammar-mono-font: var(--site-mono-font, var(--font-family-mono, "JetBrains Mono", monospace));
  --grammar-reading-measure: var(--measure-reading, 68ch);

  /* focus */
  --grammar-focus-outline: 2px solid var(--active-op-color, var(--teal, #008080));
  --grammar-focus-offset: 2px;

  /* form defaults */
  --grammar-form-open: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 28%, transparent);
  --grammar-form-close: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);

  /* objective / subjective rails */
  --grammar-objective-brace-color: var(--objective-brace-color, hsl(188 58% 32%));
  --grammar-subjective-brace-color: var(--subjective-brace-color, hsl(342 48% 36%));

  /* grammar energy / motion safety */
  --grammar-motion-budget: var(--local-motion-budget, var(--energy-budget-motion, 0.26));
  --grammar-ornament-budget: var(--local-ornament-budget, var(--energy-ornamental, 0.16));
  --grammar-boundary-weight: var(--local-boundary-weight, var(--fixture-annotation-weight, 0.34));
  --grammar-edge-softness: var(--local-edge-softness, var(--edge-softness, 0.24));
}

/* ==========================================================================
   2. Shared ownership and safe defaults
   ========================================================================== */

/* Grammar owns route-portable structural semantics. */
:where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  [data-spw-container],
  [data-spw-form]
) {
  position: relative;
  min-width: 0;
}

/* Lift ordinary flow content above generated braces, rails, and ornaments.
   Out-of-flow roles keep their own geometry contract. */
:where(
  .site-frame > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .frame-panel > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .frame-card > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .software-card > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .mode-panel > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .plan-card > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .compare-card > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"]),
  .spec-column > :not([data-spw-overlay], [data-spw-region-flow="popout"], [data-spw-floating-chrome="true"])
) {
  position: relative;
  z-index: 1;
  min-width: 0;
}

:where(
  .frame-topline,
  .frame-heading,
  .spec-strip,
  .frame-operators,
  .spw-component-meta,
  .spw-component-guides
) {
  min-width: 0;
}

:where(
  .spw-component-tag,
  .frame-sigil,
  .operator-chip,
  .frame-card-sigil,
  .spec-kicker,
  .syntax-token,
  .spw-topic,
  [data-spw-topic]
) {
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   3. Container depth vocabulary
   ========================================================================== */

/* Depth is semantic distance, not a one-off shadow knob. */
[data-spw-depth="0"] {
  --container-surface: transparent;
  --container-border: transparent;
  --container-shadow: none;
}

[data-spw-depth="1"] {
  --container-surface: var(--grammar-surface);
  --container-border: var(--grammar-line);
  --container-shadow: none;
}

[data-spw-depth="2"] {
  --container-surface: var(--grammar-surface-panel);
  --container-border: color-mix(in srgb, var(--grammar-ink) 12%, transparent);
  --container-shadow: var(--grammar-shadow);
}

[data-spw-depth="3"] {
  --container-surface: color-mix(in srgb, white 92%, var(--grammar-surface));
  --container-border: color-mix(in srgb, var(--grammar-ink) 18%, transparent);
  --container-shadow: var(--grammar-shadow-active);
}

:where([data-spw-depth]) {
  background: var(--container-surface);
  border-color: var(--container-border);
  box-shadow: var(--container-shadow);
  transition:
    background var(--grammar-duration-deliberate) var(--grammar-ease-mechanical),
    border-color var(--grammar-duration-base) var(--grammar-ease-mechanical),
    box-shadow var(--grammar-duration-base) var(--grammar-ease-settle);
}

/* ==========================================================================
   4. Container type vocabulary
   ========================================================================== */

/* Container names describe how meaning is held: field, cluster, concept. */
:where([data-spw-container="field"]) {
  background: transparent;
  border-color: transparent;
}

:where([data-spw-container="cluster"]) {
  border: 1px solid var(--grammar-line);
  border-radius: var(--grammar-radius);
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  background: var(--grammar-surface-soft);
  transition:
    background var(--grammar-duration-base) var(--grammar-ease-mechanical),
    border-color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    box-shadow var(--grammar-duration-base) var(--grammar-ease-settle);
}

:where([data-spw-container="concept"]) {
  display: inline-block;
  min-width: 0;
  padding: 0.15rem 0.5rem;
  border: 1.5px solid var(--active-op-color, var(--teal, #008080));
  border-radius: var(--grammar-radius-sm);
  background: var(--token-bg, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 8%, transparent));
  transition:
    border-color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    background var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    box-shadow var(--grammar-duration-base) var(--grammar-ease-settle);
}

:where([data-spw-container="concept"][data-spw-interactivity="controllable"]) {
  cursor: pointer;
}

:where([data-spw-container="concept"][data-spw-inspectability="deep"]) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 12%, transparent);
}

/* ==========================================================================
   5. Spatial stance
   ========================================================================== */

:where([data-spw-stance="entry"]) {
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--grammar-ink) 78%, transparent);
  transition: color var(--grammar-duration-deliberate) var(--grammar-ease-mechanical);
}

:where([data-spw-stance="ground"]) {
  letter-spacing: 0.01em;
  transition: color var(--grammar-duration-deliberate) var(--grammar-ease-mechanical);
}

:where([data-spw-stance="exit"]) {
  opacity: 0.76;
  letter-spacing: 0.01em;
  transition:
    opacity var(--grammar-duration-deliberate) var(--grammar-ease-mechanical),
    color var(--grammar-duration-deliberate) var(--grammar-ease-mechanical);
}

/* ==========================================================================
   6. Frame primitives
   ========================================================================== */

:where(.site-frame, [data-spw-form], [data-spw-brace], .spw-topic, [data-spw-topic]) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "grammar";
  --spw-debug-layer-color: #ee6622;
}

:where(.site-frame) {
  /* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--grammar-surface-gap);

  /* Box */
  min-width: 0;
  padding: var(--grammar-surface-padding);
  border: 1px solid var(--grammar-line);
  border-radius: var(--grammar-radius);
  overflow: clip;

  /* Visual */
  background: var(--grammar-surface);
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
  background-repeat: no-repeat;
  background-size: calc(100% - (var(--grammar-surface-padding) * 2)) 1px;
  background-position: var(--grammar-surface-padding) 1rem;
  box-shadow: var(--grammar-shadow);

  /* Interaction */
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
  touch-action: pan-y;
  transition:
    background var(--grammar-duration-deliberate) var(--grammar-ease-mechanical),
    border-color var(--grammar-duration-base) var(--grammar-ease-mechanical),
    box-shadow var(--grammar-duration-deliberate) var(--grammar-ease-mechanical);

  /* Layering / containment */
  position: relative;
  container-type: inline-size;
}

:where(.site-frame[data-state~="active"]) {
  border-color: var(--grammar-line-strong);
  background: var(--grammar-surface-strong);
  box-shadow: var(--grammar-shadow-active);
}

:where(.site-frame[data-spw-attention="focused"]) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent),
    var(--grammar-shadow-active);
}

:where(.site-hero) {
  gap: 1.1rem;
}

:where(.frame-topline, .frame-heading) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}

:where(.frame-topline) {
  margin-bottom: -0.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in oklab, var(--active-op-color, var(--teal, #008080)) 16%, transparent);
  transition: border-color var(--grammar-duration-base) var(--grammar-ease-mechanical);
}

:where(.site-frame[data-state~="active"] .frame-topline) {
  border-bottom-color: color-mix(in oklab, var(--active-op-color, var(--teal, #008080)) 32%, transparent);
}

:where(.frame-heading > .frame-sigil) {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 0.78rem;
  opacity: 0.6;
}

:where(.frame-topline, .frame-heading) > .spw-delimiter {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.28rem;
  min-block-size: 1.9rem;
  margin-inline-end: -0.18rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 26%, transparent);
  border-inline-end: 0;
  border-radius: var(--shape-small, 0.55rem) 0 0 var(--shape-small, 0.55rem);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 11%, transparent),
      transparent 74%
    ),
    color-mix(in srgb, var(--surface-strong, #fff) 86%, transparent);
  box-shadow: inset 0.12rem 0 0 color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 28%, transparent);
  opacity: 0.72;
}

:where(.frame-actions > .spw-delimiter) {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.28rem;
  min-block-size: 1.9rem;
  justify-self: end;
  margin-inline-start: auto;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 22%, transparent);
  border-inline-start: 0;
  border-radius: 0 var(--shape-small, 0.55rem) var(--shape-small, 0.55rem) 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 7%, transparent),
      transparent 76%
    ),
    color-mix(in srgb, var(--surface-strong, #fff) 84%, transparent);
  box-shadow: inset -0.12rem 0 0 color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 24%, transparent);
  opacity: 0.62;
}

:where(.site-frame:has(> :where(.frame-topline, .frame-heading) > .spw-delimiter)) {
  position: relative;
}

:where(.site-frame:has(> :where(.frame-topline, .frame-heading) > .spw-delimiter))::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0.7rem auto 0.7rem 0.72rem;
  inline-size: 1px;
  border-radius: var(--shape-small, 0.55rem);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 24%, transparent),
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 7%, transparent) 46%,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 20%, transparent)
    );
  opacity: 0.26;
}

:where(.site-frame:has(> :where(.frame-topline, .frame-heading) > .spw-delimiter):is(:hover, :focus-within))::after {
  opacity: 0.48;
}

:where(.frame-heading > .frame-sigil[data-spw-operator], .frame-topline > .frame-sigil[data-spw-operator]) {
  --spw-sigil-accent: var(--spw-operator-color, var(--active-op-color, var(--teal, #008080)));
  position: relative;
  isolation: isolate;
  border-radius: var(--shape-micro, 0.35rem);
  transition:
    opacity var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    text-shadow var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    transform var(--grammar-duration-fast) var(--grammar-ease-settle);
}

:where(.frame-heading > .frame-sigil[data-spw-operator], .frame-topline > .frame-sigil[data-spw-operator])::after {
  content: attr(data-spw-operator);
  position: absolute;
  z-index: 1;
  inset: calc(100% + 0.22rem) auto auto 0;
  max-inline-size: 18ch;
  padding: 0.12rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--spw-sigil-accent) 28%, transparent);
  border-radius: var(--shape-micro, 0.35rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--spw-sigil-accent) 8%);
  box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--shadow-color, #111) 10%, transparent);
  color: color-mix(in srgb, var(--ink, #111) 78%, var(--spw-sigil-accent) 22%);
  font-family: var(--grammar-mono-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(-0.18rem);
  transition:
    opacity var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    transform var(--grammar-duration-fast) var(--grammar-ease-settle);
}

:where(.frame-heading > .frame-sigil[data-spw-operator], .frame-topline > .frame-sigil[data-spw-operator]):is(:hover, :focus-visible) {
  opacity: 1;
  text-shadow: 0 0 0.72rem color-mix(in srgb, var(--spw-sigil-accent) 34%, transparent);
  transform: translateY(-0.04rem);
}

:where(.frame-heading > .frame-sigil[data-spw-operator], .frame-topline > .frame-sigil[data-spw-operator]):is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateY(0);
}

:where(.frame-heading:has(> .frame-sigil:is(:hover, :focus-visible)),
       .frame-topline:has(> .frame-sigil:is(:hover, :focus-visible))) > .spw-delimiter,
:where(.site-frame:focus-within > .frame-actions > .spw-delimiter) {
  opacity: 0.9;
  text-shadow: 0 0 0.66rem color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 32%, transparent);
}

:where([data-spw-region-menu-target="true"]) {
  outline: 2px solid color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 52%, transparent);
  outline-offset: 0.18rem;
}

:where([data-spw-region-preview="true"]) {
  --spw-region-preview: 1;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.22em;
}

:where(.frame-sigil[data-spw-region-preview="true"],
       .operator-chip[data-spw-region-preview="true"],
       [data-spw-semantic-expression][data-spw-region-preview="true"]) {
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 34%, transparent),
    0 0 1.1rem color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 12%, transparent);
}

:where(.frame-sigil[data-spw-region-preview="true"], .operator-chip[data-spw-region-preview="true"])::before {
  content: "?";
  position: absolute;
  z-index: 2;
  inset: -0.46rem -0.42rem auto auto;
  display: inline-grid;
  place-items: center;
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 86%, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 14%);
  color: color-mix(in srgb, var(--ink, #111) 72%, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 28%);
  font: 800 0.62rem/1 var(--grammar-mono-font);
  pointer-events: none;
}

:where(.site-frame[data-spw-region-mark="active"], .site-frame[data-spw-region-charge="active"]) {
  --spw-region-current: 1;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 48%, var(--card-border));
  box-shadow:
    var(--shadow-sm),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 22%, transparent),
    0 0 2rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
}

:where(.site-frame[data-spw-region-mark="active"], .site-frame[data-spw-region-charge="active"]) > :where(.frame-topline, .frame-heading) > .spw-delimiter,
:where(.site-frame[data-spw-region-mark="active"], .site-frame[data-spw-region-charge="active"]) > .frame-actions > .spw-delimiter {
  opacity: 0.96;
  color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 72%, var(--ink));
}

:where(.site-frame[data-spw-region-mark="active"][data-spw-signature], .site-frame[data-spw-region-charge="active"][data-spw-signature]) > :where(.frame-topline, .frame-heading)::after {
  content: attr(data-spw-signature);
  flex-basis: 100%;
  color: color-mix(in srgb, var(--ink-muted) 72%, var(--active-op-color, var(--teal, #008080)) 28%);
  font-family: var(--grammar-mono-font);
  font-size: clamp(0.66rem, 1.5vw, 0.8rem);
  letter-spacing: 0.045em;
  line-height: 1.35;
}

:where([data-spw-inspect-semantic-focused="true"]) {
  --spw-expression-focus: 1;
  outline: 2px solid color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 48%, transparent);
  outline-offset: 0.16rem;
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0.82rem color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 18%, transparent);
}

:where([data-spw-inspect-semantic-match="true"]) {
  --spw-expression-match: 1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal, #008080))) 9%, transparent),
      transparent 72%
    ),
    var(--spw-local-bg, transparent);
}

.spw-region-menu {
  position: fixed;
  z-index: var(--z-popover, 50);
  display: grid;
  gap: 0.42rem;
  inline-size: min(19rem, calc(100vw - 1.5rem));
  max-block-size: min(26rem, calc(100vh - 1.5rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 28%, var(--card-border));
  border-radius: var(--shape-medium, 0.85rem);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 8%, transparent),
      transparent 56%
    ),
    color-mix(in srgb, var(--surface-strong, #fff) 93%, var(--matte-surface, #f5efe4) 7%);
  box-shadow:
    0 0.8rem 2.2rem color-mix(in srgb, var(--shadow-color, #111) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 36%, transparent);
  color: var(--ink, #111);
}

.spw-region-menu[data-spw-state="closed"] {
  display: none;
}

.spw-region-menu__title,
.spw-region-menu__summary {
  margin: 0;
}

.spw-region-menu__title {
  font-family: var(--grammar-mono-font);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.spw-region-menu__summary {
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.spw-region-menu__handles,
.spw-region-menu__suggestions,
.spw-region-menu__action-group {
  display: grid;
  gap: 0.34rem;
}

.spw-region-menu__handle-row {
  display: grid;
  grid-template-columns: minmax(5.8rem, max-content) minmax(6rem, 1fr);
  align-items: center;
  gap: 0.52rem;
  font: 700 0.68rem/1.2 var(--grammar-mono-font);
  letter-spacing: 0.045em;
}

.spw-region-menu__handle-row input[type="range"] {
  inline-size: 100%;
  accent-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 72%, var(--ink));
}

.spw-region-menu__subtitle {
  margin: 0.16rem 0 0;
  color: var(--ink-muted);
  font: 800 0.64rem/1.2 var(--grammar-mono-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.spw-region-menu__suggestions {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.spw-region-menu__contract {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.18rem 0.55rem;
  margin: 0.08rem 0 0.12rem;
  padding: 0.48rem;
  border: 1px dashed color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, var(--card-border));
  border-radius: var(--shape-small, 0.55rem);
  background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
}

.spw-region-menu__contract dt,
.spw-region-menu__contract dd {
  margin: 0;
  font-size: 0.69rem;
  line-height: 1.35;
}

.spw-region-menu__contract dt {
  color: color-mix(in srgb, var(--ink-muted) 76%, var(--active-op-color, var(--teal, #008080)) 24%);
  font-family: var(--grammar-mono-font);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-region-menu__contract dd {
  color: var(--ink);
}

.spw-region-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 2.1rem;
  padding: 0.45rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 20%, var(--card-border));
  border-radius: var(--shape-small, 0.55rem);
  background: color-mix(in srgb, var(--surface, #fff) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
  color: var(--ink);
  cursor: pointer;
  font: 700 0.75rem/1.2 var(--grammar-mono-font);
  letter-spacing: 0.035em;
  text-align: start;
}

.spw-region-menu button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 44%, var(--card-border));
  background: color-mix(in srgb, var(--surface-strong, #fff) 78%, var(--active-op-color, var(--teal, #008080)) 22%);
  outline: none;
  transform: translateY(-0.03rem);
}

.spw-region-menu__handles {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(0, 0, 0, 0.1)) 82%, transparent);
  border-radius: var(--shape-small, 0.55rem);
  background: color-mix(in srgb, var(--surface, #fff) 42%, transparent);
}

.spw-region-menu__handle-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 0.5rem;
}

.spw-region-menu__handle-row label {
  font-family: var(--grammar-mono-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.spw-region-menu__handle-row input[type="range"] {
  cursor: ew-resize;
  accent-color: var(--active-op-color, var(--teal, #008080));
}

.spw-region-menu__subtitle {
  margin: 0.35rem 0 0.15rem;
  font-family: var(--grammar-mono-font);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.spw-region-menu__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.spw-region-menu__action-group {
  grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr));
  padding-block-start: 0.28rem;
  border-block-start: 1px solid color-mix(in srgb, var(--line, rgba(0, 0, 0, 0.1)) 72%, transparent);
}

.spw-region-menu__action-group[data-spw-interaction-lane="inspect"] {
  --active-op-color: var(--op-probe-color, var(--teal, #008080));
}

.spw-region-menu__action-group[data-spw-interaction-lane="collect"] {
  --active-op-color: var(--op-action-color, var(--teal, #008080));
}

.spw-region-menu__action-group[data-spw-interaction-lane="mark"] {
  --active-op-color: var(--op-object-color, var(--teal, #008080));
}

.spw-region-menu__action-group[data-spw-interaction-lane="reset"] {
  --active-op-color: var(--ink-muted, #66706b);
}

@media (max-width: 720px) {
  .spw-region-menu[data-spw-region-menu-placement="sheet"] {
    inset-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
    inset-block-start: auto;
    inset-block-end: calc(
      max(0.75rem, env(safe-area-inset-bottom))
      + var(--spw-bottom-chrome-clearance, 3.1rem)
      + var(--spw-floating-menu-clearance, 0px)
    );
    inline-size: auto;
    max-block-size: min(42dvh, 22rem);
    border-radius: var(--shape-floating, 1rem) var(--shape-floating, 1rem) var(--shape-medium, 0.85rem) var(--shape-medium, 0.85rem);
    box-shadow:
      0 -0.35rem 1.4rem color-mix(in srgb, var(--shadow-color, #111) 14%, transparent),
      0 0.8rem 2.2rem color-mix(in srgb, var(--shadow-color, #111) 18%, transparent);
  }

  .spw-region-menu[data-spw-region-menu-placement="sheet"] .spw-region-menu__action-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.spw-suggestion-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.62rem !important;
  padding: 0.12rem 0.48rem !important;
  border: 1px dashed color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 32%, var(--card-border)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, transparent) !important;
  color: color-mix(in srgb, var(--ink) 82%, var(--active-op-color, var(--teal, #008080)) 18%) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  cursor: copy !important;
}

.spw-suggestion-chip:hover {
  border-style: solid !important;
  background: color-mix(in srgb, var(--surface-strong, #fff) 96%, var(--active-op-color, var(--teal, #008080)) 4%) !important;
  transform: scale(1.02) !important;
}

@container (max-width: 38rem) {
  :where(.frame-topline, .frame-heading) {
    align-items: stretch;
  }

  :where(
    .frame-topline > .spec-strip,
    .frame-topline > .mode-switch,
    .frame-topline > .frame-operators,
    .frame-topline > .spw-component-meta,
    .frame-heading > .spw-component-meta
  ) {
    width: 100%;
    margin-left: 0;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  :where(.mode-switch[aria-label]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(7.25rem, 1fr));
    gap: calc(var(--spw-control-gap, 0.24rem) + 0.14rem);
  }

  :where(.mode-switch[aria-label])::before {
    grid-column: 1 / -1;
    max-inline-size: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-wrap: balance;
  }

  :where(
    .frame-topline > .mode-switch > *,
    .frame-topline > .frame-operators > *
  ) {
    flex: 1 1 min(100%, 8rem);
    justify-content: center;
    min-inline-size: 0;
  }
}

@container (max-width: 32rem) {
  :where(.frame-topline, .frame-heading) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.frame-topline > .frame-sigil, .frame-heading > .frame-sigil, .frame-topline > .spw-delimiter) {
    align-self: flex-start;
  }
}

@container (max-width: 28rem) {
  :where(.frame-heading > .frame-sigil) {
    display: none;
  }
}

@container (max-width: 26rem) {
  :where(.frame-topline) {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   7. Role-based frame identity
   ========================================================================== */

:where(.site-frame[data-spw-role="probe"]) {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--op-probe-bg-soft, rgba(0, 128, 128, 0.04)) 50%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="surface"]) {
  background-image:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--op-surface-bg-soft, rgba(0, 128, 128, 0.04)) 40%, transparent) 0%,
      transparent 50%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="reference"]) {
  border-left-width: 2px;
  border-left-color: var(--op-ref-border, rgba(0, 128, 128, 0.22));
}

:where(.site-frame[data-spw-role="schema"]) {
  border-style: dashed;
  border-color: var(--grammar-line);
}

:where(.site-frame[data-spw-role="broadcast"]) {
  background-image:
    linear-gradient(
      180deg,
      transparent 40%,
      color-mix(in srgb, var(--op-surface-bg-soft, rgba(0, 128, 128, 0.04)) 40%, transparent) 100%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="pragma"]) {
  border-bottom-width: 2px;
  border-bottom-color: var(--op-pragma-border, rgba(0, 128, 128, 0.22));
}

:where(.site-frame[data-spw-harmony="indexed"]) {
  --grammar-boundary-weight: 0.5;
}

:where(.site-frame[data-spw-harmony="structured"]) {
  --grammar-edge-softness: 0.12;
}

:where(.site-frame[data-spw-harmony="responsive"]) {
  --grammar-motion-budget: 0.32;
}

/* Region lifecycle harmonizes grammar tokens after deferred enrichment lands. */
:where(.site-frame[data-spw-region-state="queued"], .site-frame[data-spw-region-state="primed"]) {
  --grammar-motion-budget: min(var(--grammar-motion-budget, 0.26), 0.14);
  --grammar-boundary-weight: min(var(--grammar-boundary-weight, 0.34), 0.22);
}

:where(.site-frame[data-spw-region-state="hydrating"], .site-frame[data-spw-region-state="interactive"]) {
  --grammar-motion-budget: calc(
    min(var(--grammar-motion-budget, 0.26), 0.32)
    * (0.42 + (0.58 * var(--spw-region-profile-intensity, 1)))
  );
}

:where(.site-frame[data-spw-region-state="enhanced"], .site-frame[data-spw-region-state="settling"]) {
  --grammar-motion-budget: var(--grammar-motion-budget, var(--local-motion-budget, var(--energy-budget-motion, 0.26)));
}

/* ==========================================================================
   8. Semantic metadata tags
   ========================================================================== */

:where(.spw-component-tag) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.18rem 0.42rem;
  white-space: normal;
  border: 1px solid var(--semantic-metadata-line);
  border-radius: var(--shape-element, 0.35rem);
  background: var(--semantic-metadata-bg);
  color: var(--semantic-metadata-ink);
  font-size: var(--semantic-metadata-font-size);
  letter-spacing: var(--semantic-metadata-tracking);
  text-transform: uppercase;
  text-wrap: pretty;
}

:where(.spw-component-meta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem 0.32rem;
  min-width: 0;
}

:where(.frame-topline > .spw-component-meta, .frame-heading > .spw-component-meta) {
  margin-left: auto;
  justify-content: flex-end;
}

:where(.spw-component-guides) {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem 0.3rem;
}

:where(.spw-guide-chip) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.16rem 0.4rem;
  white-space: normal;
  border: 1px solid var(--semantic-metadata-line);
  border-radius: var(--shape-element, 0.35rem);
  background: var(--semantic-metadata-bg);
  color: var(--semantic-metadata-ink);
  font-size: calc(var(--semantic-metadata-font-size) - 0.01rem);
  letter-spacing: calc(var(--semantic-metadata-tracking) * 0.92);
  text-transform: uppercase;
  text-wrap: pretty;
}

:where(.spw-guide-chip[data-spw-guide-kind="realization"][data-spw-guide-value="conceptual"]) {
  border-style: dashed;
}

:where(.spw-guide-chip[data-spw-guide-kind="realization"][data-spw-guide-value="realized"]) {
  border-style: solid;
}

:where(.spw-guide-chip[data-spw-guide-kind="realization"][data-spw-guide-value="hybrid"]) {
  border-style: dotted;
}

:where(.spw-guide-chip[data-spw-operator]) {
  color: var(--spw-operator-color, var(--grammar-ink-soft));
  border-color: var(--spw-operator-border, var(--grammar-line));
  background: color-mix(in srgb, var(--spw-operator-bg-soft, var(--grammar-surface-soft)) 90%, transparent);
}

:where(html[data-spw-show-semantic-metadata="on"] .spw-component-guides) {
  display: inline-flex;
}

/* semantic bias by interactivity / configurability */
:where(
  [data-spw-interactivity="controllable"] > .spw-component-meta > .spw-component-tag,
  [data-spw-interactivity="controllable"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  color: var(--op-action-color);
  border-color: var(--op-action-border);
  background: var(--op-action-bg-soft);
}

:where(
  [data-spw-inspectability="deep"] > .spw-component-meta > .spw-component-tag,
  [data-spw-inspectability="deep"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
}

:where(
  [data-spw-config-domain="site-settings"] > .spw-component-meta > .spw-component-tag,
  [data-spw-config-domain="site-settings"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  color: var(--op-surface-color);
  border-color: var(--op-surface-border);
  background: var(--op-surface-bg-soft);
}

/* meta tag bias by component kind / role */
:where(
  [data-spw-component-kind="frame"] > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="frame"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="frame"] > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="frame"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  .frame-topline > .spw-component-meta > .spw-component-tag,
  .frame-heading > .spw-component-meta > .spw-component-tag
) {
  color: var(--teal-deep, hsl(180 100% 18%));
  border-color: rgba(0, 128, 128, 0.18);
  background: rgba(230, 248, 248, 0.74);
}

:where(
  [data-spw-component-kind="card"] > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="card"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="card"] > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="card"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  color: hsl(210 70% 34%);
  border-color: hsla(210, 70%, 34%, 0.16);
  background: rgba(235, 244, 255, 0.72);
}

:where(
  [data-spw-component-kind="panel"] > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="panel"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="surface"] > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="surface"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="panel"] > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="panel"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="surface"] > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="surface"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  color: hsl(36 80% 32%);
  border-color: hsla(36, 80%, 32%, 0.16);
  background: rgba(255, 248, 235, 0.76);
}

:where(
  [data-spw-component-kind="lens"] > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="lens"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="lens"] > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="lens"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  color: hsl(268 55% 38%);
  border-color: hsla(268, 55%, 38%, 0.16);
  background: rgba(245, 238, 255, 0.78);
}

:where(
  [data-spw-component-kind="metric"] > .spw-component-meta > .spw-component-tag,
  [data-spw-component-kind="metric"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="metric"] > .spw-component-meta > .spw-component-tag,
  [data-spw-kind="metric"] > .spw-semantic-seam > .spw-component-meta > .spw-component-tag
) {
  color: hsl(180 100% 22%);
  border-color: rgba(0, 100, 100, 0.18);
  background: rgba(230, 248, 248, 0.78);
}

:where([data-spw-role-cluster="reference"]) > .spw-component-meta > .spw-component-tag,
:where([data-spw-role-cluster="reference"]) > .spw-semantic-seam > .spw-component-meta > .spw-component-tag {
  color: var(--op-ref-color);
  border-color: var(--op-ref-border);
  background: var(--op-ref-bg-soft);
}

:where([data-spw-role-cluster="schema"]) > .spw-component-meta > .spw-component-tag,
:where([data-spw-role-cluster="schema"]) > .spw-semantic-seam > .spw-component-meta > .spw-component-tag {
  color: var(--op-object-color);
  border-color: var(--op-object-border);
  background: var(--op-object-bg-soft);
}

:where([data-spw-role-cluster="probe"]) > .spw-component-meta > .spw-component-tag,
:where([data-spw-role-cluster="probe"]) > .spw-semantic-seam > .spw-component-meta > .spw-component-tag {
  color: var(--op-probe-color);
  border-color: var(--op-probe-border);
  background: var(--op-probe-bg-soft);
}

:where([data-spw-role-cluster="surface"]) > .spw-component-meta > .spw-component-tag,
:where([data-spw-role-cluster="surface"]) > .spw-semantic-seam > .spw-component-meta > .spw-component-tag {
  color: var(--op-surface-color);
  border-color: var(--op-surface-border);
  background: var(--op-surface-bg-soft);
}

:where([data-spw-role-cluster="pragma"]) > .spw-component-meta > .spw-component-tag,
:where([data-spw-role-cluster="pragma"]) > .spw-semantic-seam > .spw-component-meta > .spw-component-tag {
  color: var(--op-pragma-color);
  border-color: var(--op-pragma-border);
  background: var(--op-pragma-bg-soft);
}

/* ==========================================================================
   9. Substrate mapping
   ========================================================================== */

:where(
  [data-spw-form="brace"]::before,
  [data-spw-form="brace"]::after,
  [data-spw-form="angle"]::before,
  [data-spw-form="angle"]::after,
  [data-spw-form="circle"]::before,
  [data-spw-form="circle"]::after,
  [data-spw-form="square"]::before,
  [data-spw-form="square"]::after,
  [data-spw-form="block"]::before
) {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

:where([data-spw-substrate="frame"]) {
  --spw-substrate-color: var(--op-frame-color);
  --spw-substrate-border: var(--op-frame-border);
  --spw-substrate-bg-soft: var(--op-frame-bg-soft);
}

:where([data-spw-substrate="object"]) {
  --spw-substrate-color: var(--op-object-color);
  --spw-substrate-border: var(--op-object-border);
  --spw-substrate-bg-soft: var(--op-object-bg-soft);
}

:where([data-spw-substrate="ref"]) {
  --spw-substrate-color: var(--op-ref-color);
  --spw-substrate-border: var(--op-ref-border);
  --spw-substrate-bg-soft: var(--op-ref-bg-soft);
}

:where([data-spw-substrate="probe"]) {
  --spw-substrate-color: var(--op-probe-color);
  --spw-substrate-border: var(--op-probe-border);
  --spw-substrate-bg-soft: var(--op-probe-bg-soft);
}

:where([data-spw-substrate="action"]) {
  --spw-substrate-color: var(--op-action-color);
  --spw-substrate-border: var(--op-action-border);
  --spw-substrate-bg-soft: var(--op-action-bg-soft);
}

:where([data-spw-substrate="layer"]) {
  --spw-substrate-color: var(--op-layer-color);
  --spw-substrate-border: var(--op-layer-border);
  --spw-substrate-bg-soft: var(--op-layer-bg-soft);
}

:where([data-spw-substrate="baseline"]) {
  --spw-substrate-color: var(--op-baseline-color);
  --spw-substrate-border: var(--op-baseline-border);
  --spw-substrate-bg-soft: var(--op-baseline-bg-soft);
}

:where([data-spw-substrate="meta"]) {
  --spw-substrate-color: var(--op-meta-color);
  --spw-substrate-border: var(--op-meta-border);
  --spw-substrate-bg-soft: var(--op-meta-bg-soft);
}

:where([data-spw-substrate="pragma"]) {
  --spw-substrate-color: var(--op-pragma-color);
  --spw-substrate-border: var(--op-pragma-border);
  --spw-substrate-bg-soft: var(--op-pragma-bg-soft);
}

:where([data-spw-substrate="surface"]) {
  --spw-substrate-color: var(--op-surface-color);
  --spw-substrate-border: var(--op-surface-border);
  --spw-substrate-bg-soft: var(--op-surface-bg-soft);
}

/* ==========================================================================
   10. Brace form
   ========================================================================== */

:where([data-spw-form="brace"]) {
  --brace-corner-offset: 0.55rem;
  --brace-corner-width: 1.6rem;
  --brace-corner-height: 1.2rem;
  --brace-corner-radius: 0.9rem;
  --brace-corner-stroke: 1.5px;
  --brace-open-color: var(--grammar-form-open);
  --brace-close-color: var(--grammar-form-close);
}

:where([data-spw-form="brace"]::before) {
  top: var(--brace-corner-offset);
  left: var(--brace-corner-offset);
  width: var(--brace-corner-width);
  height: var(--brace-corner-height);
  border-top: var(--brace-corner-stroke) solid var(--brace-open-color);
  border-left: var(--brace-corner-stroke) solid var(--brace-open-color);
  border-top-left-radius: var(--brace-corner-radius);
  transition: border-color var(--grammar-duration-base) var(--grammar-ease-mechanical);
}

:where([data-spw-form="brace"]::after) {
  right: var(--brace-corner-offset);
  bottom: var(--brace-corner-offset);
  width: var(--brace-corner-width);
  height: var(--brace-corner-height);
  border-right: var(--brace-corner-stroke) solid var(--brace-close-color);
  border-bottom: var(--brace-corner-stroke) solid var(--brace-close-color);
  border-bottom-right-radius: var(--brace-corner-radius);
  transition: border-color var(--grammar-duration-base) var(--grammar-ease-mechanical);
}

:where(.site-frame[data-spw-form="brace"]) {
  --brace-corner-width: 2.2rem;
  --brace-corner-height: 1.6rem;
  --brace-corner-stroke: 2px;
}

:where([data-spw-form="brace"][data-spw-realization="conceptual"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal, #008080)) 36%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal, #008080)) 14%, transparent);
}

:where([data-spw-form="brace"][data-spw-realization="realized"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal, #008080)) 18%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal, #008080)) 38%, transparent);
}

:where([data-spw-form="brace"][data-spw-realization="hybrid"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal, #008080)) 26%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal, #008080)) 24%, transparent);
}

:where(.site-frame[data-state~="active"][data-spw-form="brace"]) {
  --brace-open-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 40%, transparent);
  --brace-close-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 24%, transparent);
}

/* operator-specific brace hues */
:where([data-spw-form="brace"][data-spw-operator="frame"]) {
  --brace-open-color: color-mix(in srgb, var(--op-frame-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-frame-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="object"]) {
  --brace-open-color: color-mix(in srgb, var(--op-object-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-object-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="ref"]) {
  --brace-open-color: color-mix(in srgb, var(--op-ref-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-ref-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="probe"]) {
  --brace-open-color: color-mix(in srgb, var(--op-probe-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-probe-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="action"]) {
  --brace-open-color: color-mix(in srgb, var(--op-action-color) 42%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-action-color) 24%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="stream"]) {
  --brace-open-color: color-mix(in srgb, var(--op-stream-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-stream-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="merge"]) {
  --brace-open-color: color-mix(in srgb, var(--op-merge-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-merge-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="pragma"]) {
  --brace-open-color: color-mix(in srgb, var(--op-pragma-color) 36%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-pragma-color) 18%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="meta"]) {
  --brace-open-color: color-mix(in srgb, var(--op-meta-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-meta-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="surface"]) {
  --brace-open-color: color-mix(in srgb, var(--op-surface-color) 40%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-surface-color) 22%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="binding"]) {
  --brace-open-color: color-mix(in srgb, var(--op-binding-color) 38%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-binding-color) 20%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="normalize"]) {
  --brace-open-color: color-mix(in srgb, var(--op-normalize-color) 36%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-normalize-color) 18%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="layer"]) {
  --brace-open-color: color-mix(in srgb, var(--op-layer-color) 30%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-layer-color) 14%, transparent);
}

:where([data-spw-form="brace"][data-spw-operator="baseline"]) {
  --brace-open-color: color-mix(in srgb, var(--op-baseline-color) 32%, transparent);
  --brace-close-color: color-mix(in srgb, var(--op-baseline-color) 16%, transparent);
}

:where([data-spw-form="brace"][data-spw-inspect-semantic-expanded="true"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 52%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 28%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 14%, transparent),
    var(--container-shadow, none);
}

:where([data-spw-form="brace"][data-spw-inspect-semantic-focused="true"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 64%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 36%, transparent);
}

:where([data-spw-form="brace"][data-spw-inspect-semantic-match="true"]) {
  opacity: 0.96;
}

:where(.frame-card[data-spw-form="brace"]) {
  --brace-corner-offset: 0.4rem;
  --brace-corner-width: 1.55rem;
  --brace-corner-height: 1.1rem;
}

:where(.frame-panel[data-spw-form="brace"]) {
  --brace-corner-offset: 0.3rem;
  --brace-corner-width: 1.2rem;
  --brace-corner-height: 0.85rem;
  --brace-corner-stroke: 1.2px;
}

:where(.mode-panel[data-spw-form="brace"]) {
  --brace-corner-offset: 0.25rem;
  --brace-corner-width: 0.95rem;
  --brace-corner-height: 0.7rem;
  --brace-corner-radius: 0.5rem;
  --brace-corner-stroke: 1px;
}

/* ==========================================================================
   11. Angle / circle / square forms
   ========================================================================== */

:where([data-spw-form="angle"]) {
  --angle-offset: 0.45rem;
  --angle-width: 0.85rem;
  --angle-height: 1.4rem;
  --angle-stroke: 1.2px;
  --angle-open-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 25%, transparent);
  --angle-close-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 25%, transparent);
}

:where([data-spw-form="angle"]::before) {
  left: var(--angle-offset);
  top: 50%;
  width: var(--angle-width);
  height: var(--angle-height);
  transform: translateY(-50%);
  border-left: var(--angle-stroke) solid var(--angle-open-color);
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 85% 100%, -15% 50%, 85% 0%);
}

:where([data-spw-form="angle"]::after) {
  right: var(--angle-offset);
  top: 50%;
  width: var(--angle-width);
  height: var(--angle-height);
  transform: translateY(-50%);
  border-right: var(--angle-stroke) solid var(--angle-close-color);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 15% 100%, 115% 50%, 15% 0%);
}

:where([data-spw-form="circle"]) {
  --circle-offset: 0.5rem;
  --circle-width: 1.2rem;
  --circle-height: 2.2rem;
  --circle-stroke: 1.5px;
  --circle-open-color: color-mix(in srgb, var(--op-meta-color, hsl(260 38% 42%)) 24%, transparent);
  --circle-close-color: color-mix(in srgb, var(--op-meta-color, hsl(260 38% 42%)) 24%, transparent);
}

:where([data-spw-form="circle"]::before) {
  left: var(--circle-offset);
  top: 50%;
  width: var(--circle-width);
  height: var(--circle-height);
  transform: translateY(-50%);
  border-left: var(--circle-stroke) solid var(--circle-open-color);
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}

:where([data-spw-form="circle"]::after) {
  right: var(--circle-offset);
  top: 50%;
  width: var(--circle-width);
  height: var(--circle-height);
  transform: translateY(-50%);
  border-right: var(--circle-stroke) solid var(--circle-close-color);
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

:where([data-spw-form="square"]) {
  --square-offset: 0.6rem;
  --square-width: 0.6rem;
  --square-height: 2rem;
  --square-stroke: 2px;
  --square-open-color: color-mix(in srgb, var(--op-object-color, hsl(210 48% 42%)) 24%, transparent);
  --square-close-color: color-mix(in srgb, var(--op-object-color, hsl(210 48% 42%)) 24%, transparent);
}

:where([data-spw-form="square"]::before) {
  left: var(--square-offset);
  top: 50%;
  width: var(--square-width);
  height: var(--square-height);
  transform: translateY(-50%);
  border-top: var(--square-stroke) solid var(--square-open-color);
  border-bottom: var(--square-stroke) solid var(--square-open-color);
  border-left: var(--square-stroke) solid var(--square-open-color);
}

:where([data-spw-form="square"]::after) {
  right: var(--square-offset);
  top: 50%;
  width: var(--square-width);
  height: var(--square-height);
  transform: translateY(-50%);
  border-top: var(--square-stroke) solid var(--square-close-color);
  border-bottom: var(--square-stroke) solid var(--square-close-color);
  border-right: var(--square-stroke) solid var(--square-close-color);
}

/* ==========================================================================
   12. Block form
   ========================================================================== */

:where([data-spw-form="block"]) {
  --block-inset: 0.42rem;
  --block-border-width: 1px;
  --block-border-color: color-mix(in srgb, var(--grammar-ink) 6%, transparent);
  --block-radius: calc(var(--grammar-radius-sm) - 0.1rem);
  --block-highlight-offset: 1px;
  --block-highlight-color: rgba(255, 255, 255, 0.44);
  --block-depth-size: 0.38rem;
  --block-depth-color: color-mix(in srgb, var(--grammar-ink) 2.5%, transparent);
  --block-hover-border-color: color-mix(in srgb, var(--grammar-ink) 8%, transparent);
  --block-hover-highlight-color: rgba(255, 255, 255, 0.5);
  --block-hover-depth-color: color-mix(in srgb, var(--grammar-ink) 4%, transparent);
}

:where([data-spw-form="block"]::before) {
  inset: var(--block-inset);
  border: var(--block-border-width) solid var(--block-border-color);
  border-radius: var(--block-radius);
  box-shadow:
    inset 0 var(--block-highlight-offset) 0 var(--block-highlight-color),
    inset 0 0 0 var(--block-depth-size) var(--block-depth-color);
  transition:
    border-color var(--grammar-duration-base) var(--grammar-ease-mechanical),
    box-shadow var(--grammar-duration-base) var(--grammar-ease-mechanical);
}

:where([data-spw-form="block"]:hover::before) {
  border-color: var(--block-hover-border-color);
  box-shadow:
    inset 0 var(--block-highlight-offset) 0 var(--block-hover-highlight-color),
    inset 0 0 0 var(--block-depth-size) var(--block-hover-depth-color);
}

:where(.frame-card[data-spw-form="block"]) {
  --block-inset: 0.32rem;
  --block-radius: calc(var(--grammar-radius-sm) - 0.08rem);
  --block-highlight-offset: 0.8px;
  --block-highlight-color: rgba(255, 255, 255, 0.42);
  --block-depth-size: 0.28rem;
  --block-depth-color: color-mix(in srgb, var(--grammar-ink) 2%, transparent);
}

:where(.frame-panel[data-spw-form="block"]) {
  --block-inset: 0.25rem;
  --block-radius: calc(var(--grammar-radius-sm) - 0.06rem);
  --block-highlight-offset: 0.6px;
  --block-highlight-color: rgba(255, 255, 255, 0.4);
  --block-depth-size: 0.22rem;
  --block-depth-color: color-mix(in srgb, var(--grammar-ink) 1.5%, transparent);
}

:where(.mode-panel[data-spw-form="block"]) {
  --block-inset: 0.2rem;
  --block-border-width: 0.8px;
  --block-border-color: color-mix(in srgb, var(--grammar-ink) 5%, transparent);
  --block-radius: calc(var(--grammar-radius-sm) - 0.05rem);
  --block-highlight-offset: 0.5px;
  --block-highlight-color: rgba(255, 255, 255, 0.38);
  --block-depth-size: 0.18rem;
  --block-depth-color: color-mix(in srgb, var(--grammar-ink) 1%, transparent);
}

/* ==========================================================================
   13. Tag placement
   ========================================================================== */

:where(
  .site-frame > .spw-component-tag,
  .frame-panel > .spw-component-tag,
  .frame-card > .spw-component-tag,
  .software-card > .spw-component-tag,
  .mode-panel > .spw-component-tag,
  [data-spw-features~="pretext-lab"] .pretext-metric > .spw-component-tag
) {
  align-self: flex-end;
  margin-bottom: -0.2rem;
}

:where(.frame-topline > .spw-component-tag, .frame-heading > .spw-component-tag) {
  margin-left: auto;
}

:where(
  [data-spw-form="brace"] > .spw-component-tag,
  .frame-topline > .spw-component-tag,
  .frame-heading > .spw-component-tag
) {
  border-radius: 999px;
}

:where(.frame-topline > .spw-component-meta > .spw-component-tag,
       .frame-heading > .spw-component-meta > .spw-component-tag) {
  min-inline-size: 10.5ch;
  max-inline-size: min(100%, 34ch);
  padding-inline: 0.7rem;
}

:where([data-spw-form="brace"] > .spw-component-tag::before) {
  content: "{";
  margin-right: 0.25em;
  opacity: 0.5;
  font-weight: 700;
}

:where([data-spw-form="brace"] > .spw-component-tag::after) {
  content: "}";
  margin-left: 0.25em;
  opacity: 0.28;
  font-weight: 700;
}

/* ==========================================================================
   14. Objective / subjective brace rails
   ========================================================================== */

:where([data-spw-brace="objective"]) {
  border-left: 2px solid color-mix(in oklab, var(--grammar-objective-brace-color) 22%, transparent);
  background: transparent;
  background-image: none;
}

:where([data-spw-brace="subjective"]) {
  border-right: 2px solid color-mix(in oklab, var(--grammar-subjective-brace-color) 22%, transparent);
  background: transparent;
  background-image: none;
}

:where([data-spw-brace="objective"][data-state~="active"], [data-spw-brace="objective"]:hover) {
  border-left-color: color-mix(in oklab, var(--grammar-objective-brace-color) 44%, transparent);
}

:where([data-spw-brace="subjective"][data-state~="active"], [data-spw-brace="subjective"]:hover) {
  border-right-color: color-mix(in oklab, var(--grammar-subjective-brace-color) 44%, transparent);
}

/* ==========================================================================
   15. Topic lens
   ========================================================================== */

:where([data-spw-operator="topic"]) {
  --spw-operator-color: var(--op-topic-color, hsl(192 62% 32%));
  --angle-open-color: color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 38%, transparent);
  --angle-close-color: color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 38%, transparent);
}

:where(.spw-topic, [data-spw-topic]) {
  display: inline;
  min-width: 0;
  padding: 0 0.18em 0.05em;
  border: 0;
  border-bottom: 1px solid var(--op-topic-border, hsla(192, 62%, 32%, 0.3));
  border-radius: 0.22rem;
  background:
    linear-gradient(
      180deg,
      transparent 0 58%,
      color-mix(in srgb, var(--op-topic-bg-soft, rgba(228, 246, 252, 0.72)) 72%, transparent) 58% 100%
    );
  color: var(--op-topic-color, hsl(192 62% 32%));
  font-family: var(--grammar-mono-font);
  font-size: 0.89em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-user-select: text;
  user-select: text;
  transition:
    background var(--grammar-duration-base) var(--grammar-ease-mechanical),
    border-color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    box-shadow var(--grammar-duration-base) var(--grammar-ease-settle),
    outline-offset var(--grammar-duration-fast) var(--grammar-ease-mechanical);
}

:where(.spw-topic, [data-spw-topic])::before {
  content: "<";
  opacity: 0.34;
  font-weight: 400;
}

:where(.spw-topic, [data-spw-topic])::after {
  content: ">";
  opacity: 0.34;
  font-weight: 400;
}

:where(.spw-topic:hover, [data-spw-topic]:hover) {
  background:
    linear-gradient(
      180deg,
      transparent 0 48%,
      color-mix(in srgb, var(--op-topic-bg-soft, rgba(228, 246, 252, 0.72)) 88%, rgba(255, 255, 255, 0.36)) 48% 100%
    );
  border-color: color-mix(in srgb, var(--op-topic-border, hsla(192, 62%, 32%, 0.24)) 82%, transparent);
  color: color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 85%, black);
}

:where(.spw-topic--highlighted) {
  background:
    linear-gradient(
      180deg,
      transparent 0 44%,
      color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 14%, rgba(255, 255, 255, 0.66)) 44% 100%
    );
  border-color: color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 52%, transparent);
  box-shadow: inset 0 -0.08em 0 color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 10%, transparent);
}

:where(.spw-topic--active) {
  outline: 2px solid color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 32%, transparent);
  outline-offset: 2px;
  background:
    linear-gradient(
      180deg,
      transparent 0 38%,
      color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 18%, rgba(255, 255, 255, 0.74)) 38% 100%
    );
  border-color: var(--op-topic-color, hsl(192 62% 32%));
  box-shadow:
    inset 0 -0.08em 0 color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 28%, transparent),
    0 0 0 3px color-mix(in srgb, var(--op-topic-color, hsl(192 62% 32%)) 14%, transparent);
}

:where(.spw-topic-popover, .spw-semantic-popover) {
  position: fixed;
  inset: auto;
  max-width: min(28rem, calc(100vw - 1.25rem));
  padding: 0.72rem 0.88rem 0.68rem;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  border: 1px solid color-mix(in srgb, var(--grammar-line, rgba(14, 18, 20, 0.14)) 72%, var(--active-op-color, var(--teal, #008080)) 28%);
  border-radius: var(--grammar-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 52%),
    var(--floating-bg, color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.97)) 96%, transparent));
  box-shadow:
    var(--floating-shadow, 0 14px 34px rgba(0, 0, 0, 0.16)),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
  color: var(--grammar-ink);
  font-family: var(--grammar-mono-font);
  font-size: 0.82rem;
  transition:
    opacity var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    transform var(--grammar-duration-fast) var(--grammar-ease-settle),
    visibility var(--grammar-duration-fast) var(--grammar-ease-mechanical);
}

:where(.spw-topic-popover.is-visible, .spw-semantic-popover.is-visible) {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}

:where(.spw-popover-dismiss) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--grammar-line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  border-radius: var(--grammar-radius-sm);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  color: var(--grammar-ink-soft);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
}

:where(.spw-popover-dismiss:is(:hover, :focus-visible)) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 34%, transparent);
  color: var(--grammar-ink);
  outline: none;
}

:where(.spw-topic-popover-header, .spw-semantic-popover-header) {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

:where(.spw-topic-popover-hint, .spw-semantic-popover-hint) {
  margin: 0.45rem 0 0;
  padding-top: 0.42rem;
  border-top: 1px solid color-mix(in srgb, var(--grammar-line, rgba(14, 18, 20, 0.14)) 72%, transparent);
  color: var(--grammar-ink-soft);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-charge="arming"] {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 12%, transparent);
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-hold-state="open"],
:where(.spw-component-tag, .spw-guide-chip)[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 54%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-hold-state="latched"] {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 22%, transparent),
    0 0 0.55rem color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 16%, transparent);
}

html[data-spw-color-mode="dark"] :where(.spw-topic-popover, .spw-semantic-popover) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 48%),
    color-mix(in srgb, var(--surface-strong, rgba(25, 32, 37, 0.96)) 98%, transparent);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
}

:where(.spw-topic-popover-header) {
  align-items: baseline;
  margin-bottom: 0.4rem;
}

:where(.spw-topic-popover-header .spw-popover-dismiss) {
  align-self: flex-start;
  margin-block-start: -0.08rem;
}

:where(.spw-topic-popover-sigil) {
  font-weight: 600;
  color: var(--op-topic-color, hsl(192 62% 32%));
}

:where(.spw-topic-popover-count) {
  font-size: 0.75rem;
  color: var(--grammar-ink-soft);
}

:where(.spw-topic-popover-sections) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

:where(.spw-topic-popover-link) {
  display: block;
  padding: 0.2rem 0.4rem;
  border-radius: var(--grammar-radius-sm);
  color: var(--teal, #008080);
  text-decoration: none;
  transition: background var(--grammar-duration-fast) var(--grammar-ease-mechanical);
}

:where(.spw-topic-popover-link:hover) {
  background: var(--grammar-surface-soft);
}

:where(.spw-topic-popover-operators) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

:where(.spw-topic-popover-op) {
  padding: 0.12rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 20%, transparent);
  border-radius: var(--grammar-radius-sm);
  background: color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 8%, transparent);
  font-size: 0.75rem;
}

:where(.spw-semantic-popover-heading) {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  flex: 1 1 auto;
}

:where(.spw-semantic-popover-header) {
  margin-bottom: 0.5rem;
}

:where(.spw-semantic-popover-header .spw-popover-dismiss) {
  align-self: flex-start;
  margin-block-start: -0.08rem;
}

:where(.spw-semantic-popover-token) {
  font-weight: 600;
  color: var(--teal, #008080);
  text-transform: lowercase;
}

:where(.spw-semantic-popover-host) {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grammar-ink-soft);
}

:where(.spw-semantic-popover-summary) {
  margin: 0 0 0.55rem;
  color: var(--grammar-ink);
  line-height: 1.5;
}

:where(.spw-semantic-popover-grid) {
  display: grid;
  gap: 0.35rem;
}

:where(.spw-semantic-popover-row) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

:where(.spw-semantic-popover-label) {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grammar-ink-soft);
}

:where(.spw-semantic-popover-value) {
  min-width: 0;
  color: var(--grammar-ink);
}

:where(.is-badge-active) {
  background: color-mix(in srgb, var(--teal, #008080) 16%, rgba(255, 255, 255, 0.5));
  border-color: var(--teal, #008080);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal, #008080) 14%, transparent);
}

/* ==========================================================================
   16. Connectors and delimiters
   ========================================================================== */

:where(.spw-connector) {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  vertical-align: middle;
  pointer-events: none;
  color: var(--connector-color, color-mix(in srgb, var(--teal, #008080) 32%, transparent));
  font-family: var(--grammar-mono-font);
  font-size: 0.88em;
  -webkit-user-select: none;
  user-select: none;
}

:where(.spw-delimiter) {
  display: inline-block;
  cursor: pointer;
  color: var(--spw-operator-color);
  font-family: var(--grammar-mono-font);
  font-weight: 700;
  transition:
    color var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    text-shadow var(--grammar-duration-fast) var(--grammar-ease-mechanical),
    transform var(--grammar-duration-fast) var(--grammar-ease-settle),
    opacity var(--grammar-duration-fast) var(--grammar-ease-mechanical);
}

:where(.spw-delimiter--paren) {
  color: var(--teal-soft);
  --spw-operator-color: var(--teal);
}

:where(.spw-delimiter--square) {
  color: var(--pink-soft);
  --spw-operator-color: var(--pink);
}

:where(.spw-delimiter--angle) {
  color: var(--amber-soft);
  --spw-operator-color: var(--amber);
}

:where(.spw-delimiter:hover, [data-spw-gesture="charging"].spw-delimiter) {
  color: var(--spw-operator-color);
  text-shadow: 0 0 8px var(--spw-operator-color);
  transform: scale(1.1);
}

:where([data-spw-gesture="active"].spw-delimiter) {
  color: #fff;
  text-shadow: 0 0 15px var(--spw-operator-color);
  transform: scale(1.2);
}

:where([data-spw-popped="true"].spw-delimiter) {
  opacity: 1;
  border-bottom: 1px solid var(--spw-operator-color);
}

:where([data-spw-selection="selected"].spw-delimiter) {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--delight-color, color-mix(in srgb, var(--spw-operator-color, var(--teal, #008080)) 22%, transparent));
  color: #fff !important;
  box-shadow: 0 0 15px var(--delight-color, var(--spw-operator-color, var(--teal, #008080)));
}

/* ==========================================================================
   17. Persona-aware salience
   ========================================================================== */

:where([data-spw-persona="viewer"] .spw-delimiter--paren) {
  animation: viewer-pulse 2s infinite ease-in-out;
}

@keyframes viewer-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 0 0 10px var(--teal-soft);
  }
}

:where([data-spw-persona="scribe"] .spw-delimiter--angle) {
  position: relative;
  color: var(--amber);
  border-bottom: 1px dotted var(--amber);
}

:where([data-spw-persona="scribe"] .spw-delimiter--angle:hover::after) {
  content: " [projection]";
  font-size: 0.5rem;
  vertical-align: super;
  opacity: 0.7;
}

:where([data-spw-persona="doodler"] .spw-delimiter--square) {
  color: var(--pink);
  background: color-mix(in srgb, var(--pink) 10%, transparent);
  border-radius: 2px;
}

:where([data-spw-persona="doodler"] .spw-delimiter--square:hover) {
  animation: doodler-hop 0.4s ease-out;
}

@keyframes doodler-hop {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px) rotate(5deg);
  }
}

/* ==========================================================================
   18. Accessibility
   ========================================================================== */

:where([data-spw-form], .spw-topic, [data-spw-topic], .spw-delimiter):focus-visible {
  outline: var(--grammar-focus-outline);
  outline-offset: var(--grammar-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  :where(
    [data-spw-persona="viewer"] .spw-delimiter--paren,
    [data-spw-persona="doodler"] .spw-delimiter--square:hover,
    .spw-delimiter,
    .spw-topic-popover,
    [data-spw-depth],
    [data-spw-container="cluster"],
    [data-spw-container="concept"],
    .site-frame,
    .frame-topline,
    .spw-topic,
    [data-spw-topic]
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
}

/* /public/css/components/foundation.css */
@layer components {
/* ==========================================================================
   components/foundation.css
   --------------------------------------------------------------------------
   Component-layer foundations: tokens, ownership boundaries, slots, module semantics, bleed, and stance utilities.
   ========================================================================== */


/* ==========================================================================
   1. Component tokens
   ========================================================================== */

:root {
  /* Spacing */
  --component-gap: var(--spw-component-gap, 0.9rem);
  --component-gap-tight: var(--spw-component-gap-tight, 0.55rem);
  --component-gap-loose: var(--spw-component-gap-loose, 1.2rem);
  --component-gap-roomy: var(--spw-component-gap-roomy, 1.6rem);

  --component-pad: var(--spw-component-pad, 0.9rem);
  --component-pad-tight: var(--spw-component-pad-tight, 0.65rem);
  --component-pad-loose: var(--spw-component-pad-loose, 1.15rem);
  --component-pad-roomy: var(--spw-component-pad-roomy, 1.45rem);

  /* Shape */
  --component-radius: var(--shape-surface, 10px);
  --component-radius-tight: var(--shape-component, 6px);
  --component-radius-loose: var(--shape-floating, 16px);
  --component-radius-pill: var(--shape-control, 999px);

  /* Line */
  --component-border: 1px solid var(--line, rgba(0, 128, 128, 0.18));
  --component-border-strong: 1px solid var(--line-strong, rgba(0, 128, 128, 0.32));
  --component-border-quiet: 1px solid color-mix(in srgb, var(--line, rgba(0, 128, 128, 0.18)) 72%, transparent);

  /* Surface */
  --component-surface: var(--surface, rgba(255, 255, 255, 0.92));
  --component-surface-strong: var(--surface-strong, rgba(255, 255, 255, 0.98));
  --component-surface-soft: color-mix(in srgb, var(--component-surface) 86%, transparent);
  --component-surface-matte: color-mix(in srgb, var(--component-surface-strong) 94%, var(--bg, #f7f4ee));
  --component-surface-elevated:
    color-mix(in srgb, var(--component-surface-strong) 96%, var(--component-accent) 4%);

  /* Shadow */
  --component-shadow: var(--spw-depth-card-shadow, var(--shadow-base, 0 10px 24px rgba(0, 0, 0, 0.06)));
  --component-shadow-active: var(--spw-depth-card-shadow-active, var(--shadow-active, 0 16px 34px rgba(0, 0, 0, 0.10)));
  --component-shadow-quiet: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.03));
  --component-frame-shadow: var(--spw-depth-frame-shadow, var(--component-shadow));
  --component-frame-shadow-active: var(--spw-depth-frame-shadow-active, var(--component-shadow-active));

  /* Accent — prefer semantic accent family for theme coherence across routes and ornament projection.
     Falls back through active-op-color (runtime) then teal primitive. */
  --component-accent: var(--semantic-accent, var(--active-op-color, var(--teal, #008080)));
  --component-accent-soft: color-mix(in srgb, var(--component-accent) 20%, transparent);
  --component-accent-strong: color-mix(in srgb, var(--component-accent) 42%, transparent);
  --component-accent-wash: color-mix(in srgb, var(--component-accent) 8%, transparent);

  /* Semantic accent aliases for component contexts (secondary weight, subtle wash, emphasis) */
  --component-accent-secondary: var(--semantic-accent-secondary, color-mix(in srgb, var(--component-accent) 72%, var(--ink-soft, var(--component-accent)) 28%));
  --component-accent-subtle: var(--semantic-accent-subtle, color-mix(in srgb, var(--component-accent) 18%, transparent));
  --component-accent-emphasis: var(--semantic-accent-emphasis, var(--component-accent));

  /* Route accent */
  --component-route-accent: var(--component-accent);
  --component-route-marker-bg: color-mix(in srgb, var(--component-surface-strong) 94%, var(--component-route-accent) 6%);
  --component-route-marker-line: color-mix(in srgb, var(--component-route-accent) 18%, transparent);
  --component-route-marker-text: color-mix(in srgb, var(--component-route-accent) 78%, var(--ink-soft, rgba(14, 18, 20, 0.68)) 22%);

  /* Module semantics */
  --component-module-rail-start: color-mix(in srgb, var(--component-accent) 28%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--component-accent) 18%, transparent);
  --component-module-hydration-ring: color-mix(in srgb, var(--component-accent) 10%, transparent);
  --component-module-active-ring: color-mix(in srgb, var(--component-accent) 16%, transparent);
  --component-module-context-ring: color-mix(in srgb, var(--component-accent) 18%, transparent);

  /* Measures */
  --component-measure: 68ch;
  --component-measure-tight: 58ch;
  --component-measure-wide: 78ch;
  --component-code-measure: 84ch;

  /* Motion */
  --component-transition-fast: var(--spw-control-transition-fast, var(--spw-motion-quick, var(--duration-fast, 120ms) var(--ease-mechanical, ease)));
  --component-transition-base: var(--spw-control-transition-base, var(--spw-motion-settle, var(--duration-base, 180ms) var(--ease-mechanical, ease)));
  --component-transition-deliberate: var(--spw-motion-expressive, var(--duration-deliberate, 260ms) var(--ease-mechanical, ease));
  --component-transition-arrival: var(--spw-component-settle-transition, var(--component-transition-fast));
  --component-micro-lift: var(--spw-micro-lift-distance, 1px);
  --component-micro-press-scale: var(--spw-micro-press-scale, 0.998);

  /* Pretext */
  --pretext-line-gap: 0.18rem;
  --pretext-line-height: 1.55;
  --pretext-width: auto;
  --pretext-canonical-width: auto;
  --pretext-projected-width: auto;
  --pretext-influence: 0;
  --pretext-direction: 0;
  --pretext-scaffold-opacity: 0.74;

  /* Component chrome */
  --component-rail-width: 3px;
  --component-header-min-height: 1.5rem;
  --component-chip-height: var(--spw-control-min-height, 2rem);

  /* Layering */
  --component-layer-base: 0;
  --component-layer-raised: 1;
  --component-layer-overlay: 2;
}

/* Component spacing/layout review notes (2026-04 context):
   - Tokens map from core primitives + semantic aliases; prefer these over magic numbers in cards.
   - Container-type: inline-size applied broadly for @container queries (see frames.css, content.css examples).
   - Fluid rhythm via clamp + auto-fit minmax + --grid-min-* thresholds handles most device sizes.
   - Specialty vessels (seed/profile/payment) retain characterful local pads/gaps but now bridge accent family.
   - Field-balance and ornament tokens inherit naturally; card [data-*charge] states can consume for projection if extended.
   - Repeated gap/pad clusters normalized to --component-gap-* / --spw-list-* where low risk.
   - No new generic numeric dials introduced; specific grounded tokens preferred per core balance principles.
*/


/* ==========================================================================
   2. Base component ownership
   ========================================================================== */

/* Shared registry: add only route-portable component nouns. */
:where(
  [data-spw-component-kind],
  [data-spw-kind],
  .site-frame,
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card,
  .payment-card
) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "components";
  --spw-debug-layer-color: #9933cc;
  --component-card-detail-opacity: 0.86;
  --component-card-detail-shift: 0;
  --component-card-detail-weight: 0;

  /* Box */
  min-width: 0;
  box-sizing: border-box;

  /* Layering / containment */
  position: relative;
  z-index: var(--component-layer-base);
  isolation: isolate;
}

:where(
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main),
  .site-frame,
  .frame-card,
  .media-card,
  .media-focus-card,
  .topic-reference-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card,
  .payment-card
) {
  container-type: inline-size;
}

/* Region flow utilities: opt in when a region or component needs explicit
   containment behavior rather than inheriting the route default. */
:where(
  .site-frame,
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .vibe-widget,
  .pwa-status-card,
  .payment-card,
  .seed-card,
  .spw-region-shell
)[data-spw-region-flow="popout"] {
  overflow: visible;
}

:where(
  .site-frame,
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .vibe-widget,
  .pwa-status-card,
  .payment-card,
  .seed-card,
  .spw-region-shell
)[data-spw-region-flow="clip"] {
  overflow: clip;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .pwa-status-card
) {
  --component-card-detail-opacity: 0.86;
  --component-card-detail-shift: 0;
  --component-card-detail-weight: 0;
  transition:
    box-shadow var(--component-transition-deliberate),
    border-color var(--component-transition-base),
    transform var(--component-transition-fast),
    background-color var(--component-transition-base),
    color var(--component-transition-base);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .pwa-status-card
):is(:hover, :focus-within, [data-spw-gesture="armed"], [data-spw-card-state="active"], [data-spw-card-state="expanded"]) {
  --component-card-detail-opacity: 1;
  --component-card-detail-shift: -1;
  --component-card-detail-weight: 1;
  z-index: var(--component-layer-raised);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .pwa-status-card
):is(:focus-within, [data-spw-gesture="charging"], [data-spw-card-state="expanded"]) {
  --component-surface-lift: var(--component-micro-lift, 1px);
  box-shadow: var(--component-shadow-active);
}

@media (pointer: coarse) {
  :where(
    .frame-card,
    .media-card,
    .media-focus-card,
    .software-card,
    .operator-card,
    .frame-panel,
    .mode-panel,
    .plan-card,
    .compare-card,
    .ref-card,
    .settings-state-card,
    .settings-nav-card,
    .settings-structure-card,
    .settings-map-card,
    .pwa-status-card
  ) {
    --component-card-detail-opacity: 0.9;
  }
}

:where([data-spw-region-flow="stack"], .spw-region-stack) {
  /* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap, 1rem);

  /* Box */
  min-width: 0;
}

:where([data-spw-region-flow="cluster"], .spw-region-cluster) {
  /* Layout */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--component-gap-tight, 0.55rem);

  /* Box */
  min-width: 0;
}

:where([data-spw-region-flow="overlay"], .spw-region-overlay) {
  /* Layout */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;

  /* Box */
  min-width: 0;
}

:where([data-spw-region-flow="overlay"] > *, .spw-region-overlay > *) {
  grid-area: 1 / 1;
  min-width: 0;
}

/* Lift ordinary flow content above generated rails, seams, and debug labels.
   Floating chrome keeps its own geometry contract and must opt out here. */
:where(
  [data-spw-component-kind] > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  [data-spw-kind] > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .site-frame > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .frame-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .media-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .media-focus-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .software-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .operator-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .frame-panel > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .mode-panel > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .plan-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .compare-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .spec-column > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell),
  .ref-card > :not([data-spw-floating-chrome="true"], .skip-link, .spw-section-handle, .spw-section-handle-shell)
) {
  position: relative;
  z-index: 1;
  min-width: 0;
}


/* ==========================================================================
   3. Slot conventions
   ========================================================================== */

/* Slots are stable anatomy; prefer them over child-order selectors. */
:where([data-spw-slot]) {
  min-width: 0;
}

:where([data-spw-slot="header"], .frame-topline, .frame-heading) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spw-slot-gap, clamp(0.6rem, 1.6vw, 0.9rem));
  min-width: 0;
}

:where(.frame-topline) {
  align-items: center;
  min-height: var(--component-header-min-height);
  margin-bottom: 0;
  padding-bottom: 0.28rem;
  gap: clamp(0.42rem, 1.2vw, 0.62rem);
  border-bottom: 1px solid color-mix(in srgb, var(--component-accent) 16%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--component-accent) 6%, transparent);
  transition:
    border-color var(--component-transition-base),
    box-shadow var(--spw-component-settle-transition, 220ms var(--ease-settle, ease));
}

:where(.site-frame[data-state~="active"] .frame-topline) {
  border-bottom-color: color-mix(in srgb, var(--component-accent) 32%, transparent);
}

:where(.frame-heading > :is(h1, h2, h3)) {
  margin: 0;
  min-width: 0;
  flex: 1 1 12rem;
}

:where([data-spw-slot="meta"], [data-spw-slot="actions"], .spec-strip, .button-group, .frame-operators) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spw-slot-gap-tight, 0.45rem 0.6rem);
  min-width: 0;
}

:where([data-spw-slot="figure"]) {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

/* Captions share measure across figure-like surfaces. */
:where([data-spw-slot="caption"]) {
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  font-size: 0.88em;
  max-inline-size: 65ch;
}

:where(.spw-semantic-seam) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--spw-slot-gap-tight, 0.45rem 0.8rem);
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  min-width: 0;
}

:where(.spw-semantic-seam:empty, .spw-semantic-seam[hidden], .spw-semantic-seam[data-spw-empty="true"]) {
  display: none;
}

:where(.spw-semantic-seam[data-spw-generated="semantic-chrome"]) {
  display: none;
}

/* Semantic chrome stays hidden until metadata or debug mode asks for it. */
:where(
  html[data-spw-show-semantic-metadata="on"],
  html[data-spw-debug-mode="on"]
) :where(.spw-semantic-seam[data-spw-generated="semantic-chrome"][data-spw-empty="false"]) {
  display: flex;
}

:where(.spw-semantic-seam > .spw-component-guides) {
  margin-inline-start: 0;
  justify-content: flex-start;
}

/* Low-visual-weight contract for empty/default component states.
   Reduces noise for placeholder or initial UI without hiding structure.
   Families (cards, frames, controls, handles) extend or opt-in via selectors.
   Routes through --spw-variant-accent (see cards.css for example usage). */
:where([data-spw-empty="true"], [data-spw-component-state="empty"], [data-spw-component-state="default"]) {
  --spw-variant-accent: color-mix(in srgb, var(--spw-variant-accent, var(--component-accent, var(--semantic-accent, var(--active-op-color, var(--teal))))) 32%, var(--line, rgba(14,18,20,0.14)) 68%);
}

:where([data-spw-empty="true"], [data-spw-component-state="empty"], [data-spw-component-state="default"])
  :where(.frame-sigil, .spw-component-tag, .spw-guide-chip, .operator-chip[data-spw-nav-tokenized]) {
  opacity: 0.58;
}


/* ==========================================================================
   4. Module semantics
   ========================================================================== */

/* Module rails mark machine-readable ownership without crowding content. */
:where(
  [data-spw-module],
  [data-spw-component-genome]
) {
  --spw-perspective-weight: 0.5;
  --spw-potential-weight: 0.5;
  --spw-salience-weight: 0.34;
  --spw-dimension-count: 1;
  --component-module-rail-width: 2px;
  --component-module-rail-opacity: 0.32;
}

:where([data-spw-module])::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--component-module-rail-width);
  opacity: var(--component-module-rail-opacity);
  pointer-events: none;
  background: linear-gradient(
      180deg,
      var(--component-module-rail-start),
      var(--component-module-rail-end)
  );
}

/* Hydration/context states are visual confidence cues, not layout states. */
:where([data-spw-module][data-spw-module-hydration="ready"]) {
  --component-module-rail-opacity: 0.44;
  box-shadow: inset 0 0 0 1px var(--component-module-hydration-ring),
  var(--component-shadow-quiet);
}

:where([data-spw-module][data-spw-module-status="loading"]) {
  --component-module-rail-opacity: 0.38;
}

:where([data-spw-module][data-spw-module-status="failed"]) {
  --component-module-rail-width: 3px;
  --component-module-rail-opacity: 0.68;
  --component-module-rail-start: color-mix(in srgb, var(--danger, #9d2f2f) 40%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--danger, #9d2f2f) 22%, transparent);
}

:where([data-spw-module-evaluates~="semantics"]) {
  --component-module-rail-start: color-mix(in srgb, var(--op-probe-color, var(--component-accent)) 34%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--op-probe-color, var(--component-accent)) 20%, transparent);
}

:where([data-spw-module-evaluates~="visual"]) {
  --component-module-rail-start: color-mix(in srgb, var(--op-object-color, var(--component-accent)) 30%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--op-object-color, var(--component-accent)) 18%, transparent);
}

:where([data-spw-module-evaluates~="state"]) {
  --component-module-rail-start: color-mix(in srgb, var(--op-ref-color, var(--component-accent)) 30%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--op-ref-color, var(--component-accent)) 18%, transparent);
}

:where([data-spw-module-evaluates~="interaction"]) {
  --component-module-rail-start: color-mix(in srgb, var(--op-action-color, var(--component-accent)) 34%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--op-action-color, var(--component-accent)) 20%, transparent);
}

:where([data-spw-module-evaluates~="routing"]) {
  --component-module-rail-start: color-mix(in srgb, var(--op-frame-color, var(--component-accent)) 34%, transparent);
  --component-module-rail-end: color-mix(in srgb, var(--op-frame-color, var(--component-accent)) 18%, transparent);
}

:where([data-spw-module-evaluates~="semantic-density"]) {
  --component-module-rail-width: 3px;
  --spw-salience-weight: 0.42;
}

:where([data-spw-module-evaluates~="visual-model"]) {
  --component-module-rail-opacity: 0.48;
  --spw-potential-weight: 0.62;
}

:where([data-spw-module-evaluates~="spacing-semantics"]) {
  --spw-perspective-weight: 0.62;
}

/* Map active runtime layers into computational/attentional tokens for CSS consumers.
   Inline style tokens from module-loader win during settled mounts; these are the
   authored fallback cascade when data-spw-active-layers is present without inline overrides. */
:root[data-spw-active-layers]:not([data-spw-runtime-mount-batch="active"]) {
  --spw-runtime-layer-count: 2;
}
:root[data-spw-active-layers~="enhancement"]:not([data-spw-runtime-mount-batch="active"]) {
  --spw-runtime-enhancement-intensity: 0.85;
  --spw-runtime-layer-count: 3;
}
:root[data-spw-active-layers~="feature"]:not([data-spw-runtime-mount-batch="active"]) {
  --spw-runtime-feature-intensity: 0.7;
  --spw-runtime-layer-count: calc(var(--spw-runtime-layer-count, 2) + 1);
}

:where(html[data-spw-space-motion="fold"]) :where([data-spw-module-evaluates~="spacing-semantics"]) {
  --component-module-rail-width: 1px;
  --component-module-rail-opacity: 0.26;
}

:where(html[data-spw-space-motion="expand"]) :where([data-spw-module-evaluates~="spacing-semantics"]) {
  --component-module-rail-width: 3px;
  --component-module-rail-opacity: 0.5;
}

:where(html[data-spw-module-visuals="on"]) :where(
  [data-spw-module-evaluates~="semantics"] .operator-chip,
  [data-spw-module-evaluates~="semantics"] .frame-sigil,
  [data-spw-module-evaluates~="semantics"] .frame-card-sigil,
  [data-spw-module-evaluates~="semantics"] .spec-pill
) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--op-probe-color, currentColor) 42%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

:where(html[data-spw-module-visuals="on"]) :where([data-spw-module-evaluates~="semantic-density"]) :where(.spw-copy-motif-strip, .spec-strip, .frame-operators) {
  border-inline-start: 2px solid color-mix(in srgb, var(--op-probe-color, currentColor) 34%, transparent);
  padding-inline-start: max(0.6rem, var(--spw-slot-gap-tight, 0.45rem));
}

:where(html[data-spw-module-visuals="on"]) :where(
  [data-spw-module-evaluates~="visual"] .spw-svg-figure,
  [data-spw-module-evaluates~="visual"] .image-study,
  [data-spw-module-evaluates~="visual"] [data-spw-image-surface]
) {
  filter: saturate(1.02) contrast(1.01);
}

:where(html[data-spw-module-visuals="on"][data-spw-space-motion="fold"]) :where(
  [data-spw-module-evaluates~="spacing-semantics"] .spec-strip,
  [data-spw-module-evaluates~="spacing-semantics"] .frame-operators
) {
  gap: max(0.25rem, calc(var(--spw-slot-gap-tight, 0.45rem) * 0.75));
}

:where([data-spw-module][data-spw-salience-state="active"]) {
  --component-module-rail-width: 3px;
  --component-module-rail-opacity: 0.56;
  z-index: var(--component-layer-raised);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--component-module-active-ring),
  var(--component-shadow-active);
}

:where([data-spw-box-model]) {
  --spw-box-model-accent: var(--component-accent, var(--active-op-color, var(--teal, #008080)));
  --spw-box-model-rail-opacity: 0;
  --spw-box-model-rail-width: 0;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  contain: layout style;
  outline: var(--spw-layout-shift-guard, 1px) solid transparent;
  outline-offset: var(--spw-region-outline-reserve, 0px);
}

:where(html[data-spw-module-visuals="on"] [data-spw-box-model]) {
  --spw-box-model-rail-opacity: 0.34;
  --spw-box-model-rail-width: 2px;
  box-shadow:
    inset var(--spw-box-model-rail-width) 0 0 color-mix(in srgb, var(--spw-box-model-accent) calc(var(--spw-box-model-rail-opacity) * 100%), transparent),
    var(--component-shadow-quiet);
}

:where(html[data-spw-module-visuals="on"] [data-spw-box-presence="overfull"]) {
  --spw-box-model-accent: var(--op-probe-color, #4a2180);
  --spw-box-model-rail-opacity: 0.52;
  outline: 1px dashed color-mix(in srgb, var(--spw-box-model-accent) 42%, transparent);
  outline-offset: 3px;
}

:where(html[data-spw-module-visuals="on"] [data-spw-composition-flow="grid"]) {
  --spw-box-model-accent: var(--op-object-color, #b17812);
}

:where(html[data-spw-module-visuals="on"] [data-spw-composition-flow="flex"]) {
  --spw-box-model-accent: var(--op-ref-color, #276ea8);
}

:where(html[data-spw-module-visuals="on"] [data-spw-box-model="control-card"], html[data-spw-module-visuals="on"] [data-spw-box-model="control-group"]) {
  border-color: color-mix(in srgb, var(--spw-box-model-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)));
}

:where(html[data-spw-module-visuals="on"] [data-spw-box-story])::after {
  content: attr(data-spw-box-model) " · " attr(data-spw-composition-flow) " · " attr(data-spw-box-measure);
  position: absolute;
  inset-block-start: 0.42rem;
  inset-inline-end: 0.5rem;
  max-width: min(22ch, calc(100% - 1rem));
  padding: 0.16rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--spw-box-model-accent) 24%, transparent);
  border-radius: var(--shape-element, 4px);
  background: color-mix(in srgb, var(--component-surface-strong) 92%, transparent);
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.68)) 82%, var(--spw-box-model-accent) 18%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  pointer-events: none;
  opacity: 0.78;
  z-index: var(--component-layer-overlay);
}

/* Granular architecture selectors for vocabulary development, component locality (esp. settings/menus/pattern locks),
   and flexible physics-reason affecting gamified navigability. These make the data structures that drive visuals
   (semanticDensity, locality, interaction physics reason) directly addressable in CSS and inspectable by interns/designers
   without taking the "magic" for granted. Business vs experiential: high-locality + rich-density for tool compellingness;
   medium/low + calm-reason for relationship reading.
   Gravitational "down": vertical block flow + translateY "lift" act against page gravity (reading scroll direction).
   Cognitive lines/planes: 2-element groups (lines for binary) and 3-element clusters (planes) as in utility clusters.
   Tunable material: these + material tokens let the surface be dialed for narrative productions.
   See .spw#page_architecture_vocabulary + #cognitive_gravity_planes + #tunable_material_narrative_surface. */
:root[data-spw-locality="high"] { --spw-architecture-salience: 0.9; }
:root[data-spw-locality="medium"] { --spw-architecture-salience: 0.6; }
[data-spw-component-locality="settings-material"],
[data-spw-component-locality="settings-contrast"],
[data-spw-component-locality="pattern-lock-satchel"] {
  /* locality-specific hooks for controls that manage state/physics; designers can extend */
}
:root[data-spw-physics-reason="playful"],
:root[data-spw-physics-reason="springy"] {
  --spw-motion-scale: calc(var(--spw-motion-scale, 1) * 1.08);
  --attention-echo-duration: 620ms; /* more gamified "bounce" */
}
:root[data-spw-physics-reason="precise"],
:root[data-spw-physics-reason="locked"] {
  --spw-motion-scale: calc(var(--spw-motion-scale, 1) * 0.92);
  --attention-echo-duration: 320ms;
}
:root[data-spw-physics-reason="calm"] {
  --spw-motion-scale: calc(var(--spw-motion-scale, 1) * 0.82);
}

/* RPG Wednesday driver extensions (speech bubble metaphysics, card spacing explicit, charge/discharge
   generalizable with steps/variability, component state + machinability, regional hub/path, nook,
   disappearing toasts, prefix/postfix symmetry, cauldron notes, component ecology, state traversability).
   Extend the architecture vocabulary + cognitive gravity + tunable material contracts.
   data-spw-spacing, data-spw-charge-*, data-spw-card-state, data-spw-machinability, data-spw-region*,
   data-spw-artifact, data-spw-cauldron* etc. now modulate component foundations for consistent
   "materials as paint" play (spacing=brush, charge=layer, metamaterial=ground) + real physics
   (charge quanta, variability damping via reason, snap/fluid via chrome + gesture).
   Inclusive: accuracy players use precise charge counts + low-machinability; fantasy describe
   "speech bubble swell" or "golem mass". See cards.css for card-specific + .spw frames. */
:root[data-spw-spacing="interactive"] { --spw-component-pad: 0.92rem; }
:root[data-spw-spacing="descriptively-absent"] { --spw-component-pad: 0.42rem; }
:root[data-spw-spacing="null"] { --spw-component-pad: 0.1rem; }

[data-spw-charge="2"] { --spw-architecture-salience: calc(var(--spw-architecture-salience, 0.6) * 1.1); }
[data-spw-charge="3"], [data-spw-charge="full"], [data-spw-charge="artifact"] {
  --spw-architecture-salience: calc(var(--spw-architecture-salience, 0.6) * 1.22);
}
[data-spw-machinability="high"] { --spw-motion-scale: calc(var(--spw-motion-scale, 1) * 1.06); }
[data-spw-machinability="low"] { --spw-motion-scale: calc(var(--spw-motion-scale, 1) * 0.9); }

[data-spw-region="hub"] { --spw-architecture-salience: calc(var(--spw-architecture-salience, 0.6) * 0.95); }
[data-spw-region="path"], [data-spw-region-role="path-node"] {
  --spw-architecture-salience: calc(var(--spw-architecture-salience, 0.6) * 1.05);
}

/* Color/contrast audit across components: ensure material tunability and semantic contrast tokens
   (from tokens/core: --text-on-matte*, --material-ink-matte-strong, --ink-on-*) propagate to component
   foundations (cards, frames, controls) for better legibility on glass/matte/contrast, dark, high-contrast.
   Components previously mixed raw --ink-soft / color-mix which could fail contrast on certain surfaces.
   Prefer aliases; local component-* fall back. This supports minimalist motifs (low ornament, focus on material ink/surface)
   and immediate design tuning previews. See surface_material_contract, page_architecture_vocabulary. */
:where([data-spw-metamaterial="matte"]) {
  --component-ink: var(--material-ink-matte-strong, var(--ink-on-matte-strong));
  --component-surface: var(--material-surface-matte, var(--surface-matte));
}
:where([data-spw-metamaterial="glass"]) {
  --component-ink: var(--material-ink, var(--ink));
  --component-surface: var(--material-surface, var(--surface));
}
:where([data-spw-metamaterial="contrast"]) {
  --component-ink: var(--material-ink-contrast, var(--ink-on-contrast));
  --component-surface: var(--material-surface-contrast, var(--surface-contrast));
}
:where([data-spw-high-contrast="on"]) {
  /* boost for a11y in components */
  --component-ink: var(--ink-strong);
}

:where([data-spw-module][data-spw-context-match="active"]) {
  --component-module-rail-width: 3px;
  --component-module-rail-opacity: 0.5;
  box-shadow: inset 0 0 0 1px var(--component-module-context-ring),
  var(--component-shadow);
}

:where([data-spw-component-genome~="importance-primary"]) {
  --component-module-rail-width: 3px;
  --component-module-rail-opacity: 0.5;
}

:where([data-spw-component-genome~="interactivity-controllable"]) {
  --component-route-accent: var(--op-action-color, var(--component-accent));
}

/* Broad support for cauldron hook highlights + visual mode candidates outside specific cards.
   Jump targets and categories get focus ring + wash using tokens for cascade.
   Spell/cauldron candidates get differential presence based on visibility mode (wired from settings). */
.is-cauldron-jump-target,
[data-spw-cauldron-category] {
  box-shadow: 0 0 0 2px var(--cauldron-highlight, color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent)), var(--component-shadow, none);
}
html[data-spw-cauldron-candidate-visibility="prominent"] [data-spw-ingredient-primed],
html[data-spw-cauldron-candidate-visibility="prominent"] [data-spw-spell-candidate],
html[data-spw-cauldron-candidate-visibility="prominent"] .spw-living-term[aria-pressed="true"] {
  background: var(--spell-candidate-wash, color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent));
  outline: 1px dashed color-mix(in srgb, var(--active-op-color, var(--teal)) 35%, transparent);
}

[data-spw-prime-state="candidate"] {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-decoration-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, transparent);
  text-underline-offset: 0.18em;
  transition:
    text-decoration-color var(--spw-control-transition-fast, 120ms ease),
    background-color var(--spw-control-transition-fast, 120ms ease),
    outline-color var(--spw-control-transition-fast, 120ms ease);
}

:is(.spw-living-term, [data-spw-living-term], [data-spw-gesture-contract*="prime"])[data-spw-cauldron-candidate="true"]:not([data-spw-prime-state]):not(.cauldron-ingredient):not([data-spw-groundable="false"]) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.06em;
  text-decoration-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 24%, transparent);
  text-underline-offset: 0.16em;
}

[data-spw-prime-state="primed"] {
  outline: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 30%, transparent);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 7%, transparent);
  animation: spw-prime-arm 320ms ease-out 1;
}

[data-spw-prime-state="collected"] {
  box-shadow: inset 0 -0.16rem 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  animation: spw-prime-collect 420ms ease-out 1;
}

:is(
  .spw-living-term,
  [data-spw-living-term],
  [data-spw-cauldron-candidate="true"]
)[data-spw-gesture="charging"][data-spw-prime-state="candidate"] {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent),
    0 0 0 3px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
}

:is(
  .spw-living-term,
  [data-spw-living-term],
  [data-spw-cauldron-candidate="true"]
)[data-spw-gesture="armed"][data-spw-prime-state="candidate"] {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 34%, transparent),
    0 0 0 4px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
}

@keyframes spw-prime-arm {
  from {
    outline-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
    background: color-mix(in srgb, var(--active-op-color, var(--teal)) 2%, transparent);
  }
  to {
    outline-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 30%, transparent);
    background: color-mix(in srgb, var(--active-op-color, var(--teal)) 7%, transparent);
  }
}

@keyframes spw-prime-collect {
  0% {
    box-shadow: inset 0 -0.28rem 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 34%, transparent);
  }
  100% {
    box-shadow: inset 0 -0.16rem 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-spw-prime-state="primed"],
  [data-spw-prime-state="collected"] {
    animation: none;
  }
}

/* Root token application for visibility modes (cascade from tokens/core) */
html[data-spw-cauldron-candidate-visibility="prominent"] {
  --cauldron-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 20%, transparent);
  --spell-candidate-wash: color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
  --cauldron-highlight: color-mix(in srgb, var(--active-op-color, var(--teal)) 28%, transparent);
  --region-jump-target: color-mix(in srgb, var(--active-op-color, var(--teal)) 24%, transparent);
}
html[data-spw-cauldron-candidate-visibility="subtle"] {
  --cauldron-candidate-wash: transparent;
  --spell-candidate-wash: transparent;
  --cauldron-highlight: transparent;
  --region-jump-target: transparent;
}

:where([data-spw-component-genome~="interactivity-inspectable"]) {
  --component-route-accent: var(--op-probe-color, var(--component-accent));
}

:where([data-spw-region-genome~="harmony-indexed"]) {
  --component-module-rail-end: color-mix(in srgb, var(--op-ref-color, var(--component-accent)) 20%, transparent);
}

:where([data-spw-region-genome~="harmony-structured"]) {
  --component-module-rail-end: color-mix(in srgb, var(--op-object-color, var(--component-accent)) 20%, transparent);
}

/* Region profiler + deferred enrichment: reserve outline budget before harmony rails activate. */
:where([data-spw-region-state]) {
  contain: layout style;
  min-width: 0;
  outline: var(--spw-layout-shift-guard, 1px) solid transparent;
  outline-offset: var(--spw-region-outline-reserve, 0px);
}

:where([data-spw-region-state="queued"], [data-spw-region-state="primed"]) {
  --component-module-rail-width: 0;
  --component-module-rail-opacity: 0;
}

:where([data-spw-region-state="hydrating"], [data-spw-region-state="interactive"]) {
  --component-module-rail-width: 2px;
  --component-module-rail-opacity: calc(0.22 * var(--spw-region-profile-intensity, 1));
}

:where([data-spw-region-state="enhanced"], [data-spw-region-state="settling"]) {
  --component-module-rail-width: 3px;
  --component-module-rail-opacity: calc(0.34 * var(--spw-region-profile-intensity, 1));
}

:where(html[data-spw-harmony-field]) {
  --spw-region-outline-reserve: 2px;
}


/* ==========================================================================
   5. Bleed utilities
   ========================================================================== */

:where(.spw-bleed) {
  --local-bleed-offset: var(--surface-padding, var(--component-pad));
  width: calc(100% + (var(--local-bleed-offset) * 2));
  margin-inline: calc(var(--local-bleed-offset) * -1);
}

:where(.spw-bleed-block) {
  --local-bleed-offset: var(--surface-padding, var(--component-pad));
  margin-block: calc(var(--local-bleed-offset) * -1);
}

:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed:first-child,
:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed-block:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed:last-child,
:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed-block:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}


/* ==========================================================================
   6. Stance utilities
   ========================================================================== */

:where([data-spw-stance="entry"]) {
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink, currentColor) 78%, transparent);
  transition: color var(--component-transition-deliberate);
}

:where([data-spw-stance="ground"]) {
  letter-spacing: 0.01em;
  transition: color var(--component-transition-deliberate);
}

:where([data-spw-stance="exit"]) {
  opacity: 0.76;
  letter-spacing: 0.01em;
  transition: opacity var(--component-transition-deliberate),
  color var(--component-transition-deliberate);
}
}

/* /public/css/components/surfaces.css */
@layer components {
/* ==========================================================================
   components/surfaces.css
   --------------------------------------------------------------------------
   Reusable card and panel surface shells shared across routes.
   ========================================================================== */

/* ==========================================================================
   7. Shared card / panel shell
   ========================================================================== */

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
) {
  --component-arrival-offset: 0px;
  --component-arrival-opacity: 1;
  --component-surface-lift: 0px;

  display: grid;
  align-content: start;
  gap: var(--component-gap-tight);
  min-width: 0;
  min-height: 100%;
  padding: var(--component-pad);
  color: var(--ink, currentColor);
  background: color-mix(in srgb, var(--component-surface-strong) 94%, var(--component-route-accent) 6%);
  border: var(--component-border);
  border-radius: var(--component-radius-tight);
  box-shadow: var(--component-shadow);
  opacity: var(--component-arrival-opacity);
  transform: translateY(calc(var(--component-arrival-offset) - var(--component-surface-lift, 0px)));
  overflow: clip;
  contain: paint style;
  transition: background var(--component-transition-deliberate),
  border-color var(--component-transition-base),
  box-shadow var(--component-transition-deliberate),
  color var(--component-transition-fast),
  opacity var(--component-transition-fast),
  transform var(--component-transition-arrival);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) {
  --component-text: var(--ink-strong, currentColor);
  --component-text-soft: var(--ink-mid, currentColor);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) :is(p, li, .frame-note, .frame-copy, .media-card-summary, .media-focus-card > p, .media-focus-copy) {
  color: var(--component-text-soft);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) :is(strong, h2, h3, h4, h5, h6, .frame-card-sigil, .media-card-title, .media-focus-title h3) {
  color: var(--component-text);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

:where(.mode-panel[hidden]) {
  display: none;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
):is(:hover, :focus-within) {
  --spw-depth: 0.24;
  --spw-utility: 0.32;
  border-color: color-mix(in srgb, var(--component-accent) 28%, var(--line, transparent));
  box-shadow: var(--component-shadow-active);
  transform: translateY(calc(var(--component-micro-lift, var(--projection-lift-xs, 1px)) * -1));
  z-index: var(--component-layer-raised, 1);
}

:where(
  a.frame-card,
  .frame-card > a:first-child,
  button.settings-preset-btn,
  .media-card[href],
  .software-card[href],
  .operator-card[href],
  .plan-card[href],
  .ref-card[href]
):active {
  --spw-depth: 0.12;
  --spw-utility: 0.42;
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 0 1px color-mix(in srgb, var(--component-accent) 18%, transparent),
    var(--component-shadow-quiet);
}

@media (hover: none) {
  :where(
    .frame-card,
    .media-card,
    .media-focus-card,
    .software-card,
    .operator-card,
    .frame-panel,
    .mode-panel,
    .plan-card,
    .compare-card,
    .spec-column,
    .ref-card,
    .settings-state-card,
    .settings-nav-card,
    .settings-structure-card,
    .settings-map-card,
    .settings-preset-btn,
    .vibe-widget,
    .pwa-status-card
  ):is(:hover, :focus-within) {
    transform: none;
  }

  :where(
    a.frame-card,
    .frame-card > a:first-child,
    button.settings-preset-btn,
    .media-card[href],
    .software-card[href],
    .operator-card[href],
    .plan-card[href],
    .ref-card[href]
  ):active {
    transform: translateY(calc(var(--component-micro-lift, 1px) * -1)) scale(var(--component-micro-press-scale, 0.998));
  }
}

:where(.media-focus-card) {
  --media-focus-accent: var(--component-accent);
}

:where(.media-focus-card .media-focus-title) {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

:where(.media-focus-card .media-focus-title h3) {
  margin: 0;
  color: color-mix(in srgb, var(--ink, currentColor) 92%, var(--media-focus-accent) 8%);
  font-size: clamp(1.02rem, 0.94rem + 0.35vw, 1.18rem);
  line-height: 1.2;
}

:where(.media-focus-card .media-focus-operator) {
  align-self: flex-start;
}

:where(.media-focus-card .spec-kicker) {
  margin: 0;
}

:where(.media-focus-card > p) {
  margin: 0;
}

:where(.media-focus-card .operator-chip) {
  justify-self: start;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) > :last-child:is(
  .operator-chip,
  .media-card-cta,
  .frame-operators,
  .plan-links,
  .card-sub-links,
  [data-spw-slot="actions"]
) {
  margin-top: auto;
}
}

/* /public/css/components/signals.css */
@layer components {
/* ==========================================================================
   components/signals.css
   --------------------------------------------------------------------------
   Operator accent mapping, arrival states, and component presence signals.
   ========================================================================== */

/* ==========================================================================
   8. Operator / route accent mapping
   ========================================================================== */

:where([data-spw-primary-operator="probe"]) {
  --component-route-accent: var(--op-probe-color, var(--component-accent));
}

:where([data-spw-primary-operator="action"]) {
  --component-route-accent: var(--op-action-color, var(--component-accent));
}

:where([data-spw-primary-operator="merge"]) {
  --component-route-accent: var(--op-merge-color, var(--component-accent));
}

:where([data-spw-primary-operator="binding"]) {
  --component-route-accent: var(--op-binding-color, var(--component-accent));
}

:where([data-spw-primary-operator="frame"]) {
  --component-route-accent: var(--op-frame-color, var(--component-accent));
}

:where([data-spw-primary-operator="surface"]) {
  --component-route-accent: var(--op-surface-color, var(--component-accent));
}

:where([data-spw-primary-operator="ref"]) {
  --component-route-accent: var(--op-ref-color, var(--component-accent));
}

:where([data-spw-feature]) {
  --component-feature-accent: color-mix(in srgb, var(--component-accent) 82%, var(--op-frame-color, #008080) 18%);
  --component-route-accent: var(--component-feature-accent, var(--component-accent));
}

:where(
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main)
)[data-spw-route-state]:not([data-spw-route-state="none"]) {
  padding-block-start: calc(var(--component-pad) + 0.82rem);
}

:where(
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main)
)[data-spw-route-state]:not([data-spw-route-state="none"]):not(.media-focus-card):not(.plan-card)::before,
:where(.media-focus-card, .plan-card)[data-spw-route-state]:not([data-spw-route-state="none"])::after {
  content: attr(data-spw-route-marker);
  position: absolute;
  inset: 0.46rem 0.58rem auto auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.3rem;
  max-inline-size: calc(100% - 1.16rem);
  padding: 0.08rem 0.42rem;
  overflow: hidden;
  border: 1px solid var(--component-route-marker-line);
  border-radius: 999px;
  background: var(--component-route-marker-bg);
  color: var(--component-route-marker-text);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0.88;
  transition: border-color var(--component-transition-fast),
  background var(--component-transition-fast),
  color var(--component-transition-fast),
  opacity var(--component-transition-fast),
  transform var(--component-transition-fast);
}

:where(
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main)
)[data-spw-route-state="branching"] {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--component-route-accent) 12%, transparent),
  var(--component-shadow);
}

:where(
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main)
)[data-spw-route-state="branching"] :where(.card-sub-links, .frame-operators, [data-spw-slot="actions"]) {
  padding-top: 0.14rem;
  border-top: 1px dashed color-mix(in srgb, var(--component-route-accent) 18%, transparent);
}

:where(
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main)
)[data-spw-route-state]:not([data-spw-route-state="none"]):not(.media-focus-card):not(.plan-card):is(:hover, :focus-within)::before,
:where(.media-focus-card, .plan-card)[data-spw-route-state]:not([data-spw-route-state="none"]):is(:hover, :focus-within)::after {
  border-color: color-mix(in srgb, var(--component-route-accent) 28%, transparent);
  background: color-mix(in srgb, var(--component-surface-strong) 88%, var(--component-route-accent) 12%);
  color: color-mix(in srgb, var(--component-route-accent) 86%, var(--ink, rgba(14, 18, 20, 0.92)) 14%);
  opacity: 1;
  transform: translateY(-1px);
}


/* ==========================================================================
   9. Arrival / presence states
   ========================================================================== */

:where(html[data-spw-page-settling="true"]) {
  --spw-site-rhythm-tempo: min(var(--spw-site-rhythm-tempo, 1), 0.88);
}

:where(html[data-spw-page-arrival="settled"]) :where(.site-frame[data-state~="active"]) {
  --site-frame-seam-color: color-mix(in srgb, var(--component-accent) 28%, transparent);
}

:where(html[data-spw-page-arrival="settled"]) :where(
  .operator-chip,
  .frame-sigil,
  .mode-switch .frame-sigil,
  .spw-nav-toggle,
  .spw-spell-path-toggle
) {
  transition-timing-function: var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1));
}

:where(
  html[data-spw-page-arrival]:not([data-spw-page-arrival="settled"]),
  html[data-spw-page-transition-phase]:not([data-spw-page-transition-phase="settled"]),
  html[data-spw-page-settling="true"]
) :where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
) {
  --component-transition-arrival: var(--spw-component-arrival-transition, 140ms var(--ease-settle));
}

:where(
  html[data-spw-page-arrival]:not([data-spw-page-arrival="settled"]),
  html[data-spw-page-settling="true"]
) :where(main > .site-frame, main > article > .site-frame) {
  transition:
    opacity var(--component-transition-arrival),
    transform var(--component-transition-arrival);
}

:where(html[data-spw-page-arrival-step="1"]) :where(main > .site-frame, main > article > .site-frame):not(:target):not(:focus-within) {
  --frame-arrival-offset: var(--spw-settle-offset-start, 2px);
  --frame-arrival-opacity: var(--spw-settle-opacity-start, 0.96);
}

:where(html[data-spw-page-arrival-step="2"]) :where(main > .site-frame, main > article > .site-frame):not(:target):not(:focus-within) {
  --frame-arrival-offset: var(--spw-settle-offset-mid, 1px);
  --frame-arrival-opacity: var(--spw-settle-opacity-mid, 0.985);
}

:where(html[data-spw-page-arrival-step="3"]) :where(main > .site-frame, main > article > .site-frame):not(:target):not(:focus-within) {
  --frame-arrival-offset: var(--spw-settle-offset-end, 0.25px);
  --frame-arrival-opacity: var(--spw-settle-opacity-end, 0.995);
}

:where(html[data-spw-page-settling="true"]) main > :where(.site-frame, article > .site-frame):nth-child(1) {
  transition-delay: 0ms;
}

:where(html[data-spw-page-settling="true"]) main > :where(.site-frame, article > .site-frame):nth-child(2) {
  transition-delay: var(--spw-settle-stagger-step, 18ms);
}

:where(html[data-spw-page-settling="true"]) main > :where(.site-frame, article > .site-frame):nth-child(3) {
  transition-delay: calc(var(--spw-settle-stagger-step, 18ms) * 2);
}

:where(html[data-spw-page-settling="true"]) main > :where(.site-frame, article > .site-frame):nth-child(4) {
  transition-delay: calc(var(--spw-settle-stagger-step, 18ms) * 3);
}

:where(html[data-spw-page-settling="true"]) main > :where(.site-frame, article > .site-frame):nth-child(5) {
  transition-delay: calc(var(--spw-settle-stagger-step, 18ms) * 4);
}

:where(html[data-spw-page-settling="true"]) main > :where(.site-frame, article > .site-frame):nth-child(6) {
  transition-delay: calc(var(--spw-settle-stagger-step, 18ms) * 5);
}

:where([data-spw-box-settle-phase="step-1"], [data-spw-box-settle-phase="entering"]) {
  --component-arrival-offset: var(--spw-settle-offset-start, 2px);
  --component-arrival-opacity: var(--spw-settle-opacity-start, 0.96);
}

:where([data-spw-box-settle-phase="step-2"], [data-spw-box-settle-phase="returning"], [data-spw-box-settle-phase="restored"]) {
  --component-arrival-offset: var(--spw-settle-offset-mid, 1px);
  --component-arrival-opacity: var(--spw-settle-opacity-mid, 0.985);
}

:where([data-spw-box-settle-phase="step-3"]) {
  --component-arrival-offset: var(--spw-settle-offset-end, 0.25px);
  --component-arrival-opacity: var(--spw-settle-opacity-end, 0.995);
}

:where(html[data-spw-page-arrival-step="1"]) :where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
):not(:hover):not(:focus-within) {
  --component-arrival-offset: var(--spw-settle-offset-start, 2px);
  --component-arrival-opacity: var(--spw-settle-opacity-start, 0.96);
}

:where(html[data-spw-page-arrival-step="2"]) :where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
):not(:hover):not(:focus-within) {
  --component-arrival-offset: var(--spw-settle-offset-mid, 1px);
  --component-arrival-opacity: var(--spw-settle-opacity-mid, 0.985);
}

:where(html[data-spw-page-arrival-step="3"]) :where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
):not(:hover):not(:focus-within) {
  --component-arrival-offset: var(--spw-settle-offset-end, 0.25px);
  --component-arrival-opacity: var(--spw-settle-opacity-end, 0.995);
}

:where(
  html[data-spw-page-presence="background"],
  html[data-spw-page-transition-phase="background"]
) :where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .settings-state-card,
  .settings-nav-card,
  .settings-structure-card,
  .settings-map-card,
  .settings-preset-btn,
  .vibe-widget,
  .pwa-status-card
):not(:hover):not(:focus-within) {
  --component-arrival-offset: 0px;
  --component-arrival-opacity: 0.98;
}
}

/* /public/css/components/cards.css */
@layer components {
/* ==========================================================================
   components/cards.css
   --------------------------------------------------------------------------
   Frame cards, link cards, and inner type hygiene for reusable card composition.
   ========================================================================== */

/* ==========================================================================
   10. Frame cards and link cards
   ========================================================================== */

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .ref-card) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "components";
  --spw-debug-layer-color: #9933cc;

  /* Component accent now inherits semantic accent family via foundation bridge for consistent theming */
}

:where(
  .frame-card,
  .frame-panel,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .ref-card,
  .compare-card
) {
  --card-secondary-opacity: var(--component-card-detail-opacity, 0.86);
  --card-secondary-shift: calc(var(--component-card-detail-shift, 0) * 1px);
  --card-secondary-weight: var(--component-card-detail-weight, 0);
}

:where(a.frame-card, .frame-card > a:first-child) {
  /* Layout */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--component-gap-tight);

  /* Box */
  inline-size: 100%;
  max-inline-size: 100%;
  min-width: 0;

  /* Typography */
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

:where(.frame-card, .frame-card > a:first-child) {
  /* Layout */
  justify-items: start;

  /* Visual */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-route-accent) 5%, transparent) 0%,
      transparent 22%
    ),
    color-mix(in srgb, var(--component-surface-strong) 95%, var(--component-route-accent) 5%);
  box-shadow: var(--component-shadow);

  /* Interaction */
  transition:
    background var(--component-transition-deliberate),
    border-color var(--component-transition-base),
    box-shadow var(--component-transition-deliberate),
    transform var(--component-transition-fast);
}

:where(.frame-card) {
  --card-rhythm: clamp(0.58rem, 1.15vw, 0.85rem);
}

/* Explicit defaults for consistent layout/wrapping/alignment across cards and panels */
:where(.frame-card, .frame-panel, .math-lens-card, .topic-reference-card, .spw-principle-card) {
  --card-internal-gap: 0.45rem;
  display: grid;
  gap: var(--card-internal-gap);
  align-content: start;
  text-align: start;
}

/* Screenshot-utility defaults for reference-style token/spec cards across the site.
   Makes sections like Environment Synchronization, sync specimens, and similar
   denser, higher-contrast, and more legible when captured. */
:where(.frame-panel.sync-specimen, .sync-specimen) {
  padding: 0.6rem 0.75rem;
  gap: 0.32rem;
}

:where(.frame-panel.sync-specimen h4, .sync-specimen h4) {
  font-size: 0.8rem;
  margin: 0;
  letter-spacing: 0.015em;
}

:where(.frame-panel.sync-specimen code, .sync-specimen code) {
  font-size: 0.76rem;
  padding: 0.1rem 0.38rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 13%, var(--surface-strong, #fff));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-family: var(--font-family-mono);
  font-weight: 600;
}

:where(.frame-panel.sync-specimen .frame-note, .sync-specimen .frame-note) {
  font-size: 0.7rem;
  line-height: 1.32;
  color: var(--ink-mid, color-mix(in srgb, var(--ink) 58%, transparent));
  margin: 0;
}

/* Brace placement + box model consistency for card anatomy.
   When a frame-card itself carries the brace form (common for semantic grouping),
   the corner visuals (from grammar) "bite" into the corners. Compensate the
   internal vertical rhythm slightly using central tokens so content doesn't
   feel cramped at top/bottom compared to non-braced cards. This improves
   consistency of the slot-like anatomy (even without explicit data-spw-slot
   on every card child) and works with gesture states (charging etc. on braces).
   Gesture affordances (haptics, pivots) that change density will still compose
   cleanly because we use the component rhythm tokens. */
:where(.frame-card[data-spw-form="brace"]) {
  --card-rhythm: calc(var(--card-rhythm, 0.92rem) * 1.08);
  padding-top: calc(var(--spw-component-pad-tight, 0.65rem) + 0.1rem);
  padding-bottom: calc(var(--spw-component-pad-tight, 0.65rem) + 0.1rem);
}

:where(.frame-card > a:first-child) {
  gap: var(--card-rhythm);
}

:where(.frame-card, .frame-card > a:first-child) > :where(
  .spw-semantic-seam,
  p,
  ul,
  ol,
  figure,
  .frame-note,
  .frame-copy,
  .card-sub-links,
  span:not(.frame-card-sigil):not(.spw-component-tag):not(.spw-guide-chip)
) {
  justify-self: stretch;
}

:where(.frame-card, .frame-card > a:first-child) > :is(strong, h2, h3, h4, h5, h6) {
  max-inline-size: 30ch;
  line-height: 1.22;
  text-wrap: balance;
}

/* Light upgrade for .frame-panel used in card-like roles on landing pages.
   Gives them better wrapping, rhythm, and hover behavior without requiring a full class change.
   This is especially useful on design, blog, about, math, and play hubs. */
/* Content-specific card variants: authored intent + runtime tone feedback. */
:where([data-spw-content-variant]) {
  --spw-content-variant-accent: var(--active-op-color, var(--component-accent));
  --spw-content-variant-pad: var(--component-pad, 0.85rem);
  --spw-content-variant-gap: var(--card-internal-gap, 0.45rem);
}

:where(.frame-panel[data-spw-content-variant="entry"], .frame-card[data-spw-content-variant="entry"]) {
  --spw-content-variant-accent: var(--op-frame-color, var(--component-accent));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  min-height: 100%;
  gap: var(--spw-content-variant-gap);
  padding: var(--spw-content-variant-pad);
}

:where([data-spw-content-variant="entry"]) :where(h3, h4) {
  max-inline-size: 30ch;
  line-height: 1.2;
  text-wrap: balance;
}

:where([data-spw-content-variant="entry"]) :where(.spw-card-reason, .card-sub-links, .frame-operators) {
  margin-block-start: auto;
}

:where([data-spw-content-variant="compact"]) {
  --spw-content-variant-pad: 0.72rem;
  --spw-content-variant-gap: 0.34rem;
  padding: var(--spw-content-variant-pad);
  gap: var(--spw-content-variant-gap);
}

:where([data-spw-content-variant="rich"]) {
  --spw-content-variant-pad: clamp(0.9rem, 1.6vw, 1.05rem);
  --spw-content-variant-gap: 0.52rem;
  padding: var(--spw-content-variant-pad);
  gap: var(--spw-content-variant-gap);
}

:where([data-spw-content-variant="rich"]) :where(p, .frame-note) {
  max-inline-size: 48ch;
}

:where(.frame-panel[data-spw-content-tone="dense"],
       .frame-panel[data-spw-content-tone="operator-heavy"],
       .frame-card[data-spw-content-tone="dense"],
       .frame-card[data-spw-content-tone="operator-heavy"]) {
  --spw-content-variant-gap: 0.36rem;
  --spw-content-variant-pad: calc(var(--component-pad, 0.85rem) * 0.9);
  padding: var(--spw-content-variant-pad);
  gap: var(--spw-content-variant-gap);
}

:where(.frame-panel[data-spw-content-tone="text-long"],
       .frame-card[data-spw-content-tone="text-long"]) {
  --spw-content-variant-gap: 0.5rem;
}

:where(.frame-panel[data-spw-content-tone="light"],
       .frame-card[data-spw-content-tone="light"]) {
  --spw-content-variant-pad: calc(var(--component-pad, 0.85rem) * 1.06);
  padding: var(--spw-content-variant-pad);
}

:where(.frame-panel[data-spw-kind="card"], .frame-panel[data-spw-role="reference"][data-spw-category-family]) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-route-accent, var(--active-op-color, #008080)) 4%, transparent) 0%,
      transparent 20%
    ),
    color-mix(in srgb, var(--component-surface-strong, #fff) 96%, var(--component-route-accent, var(--active-op-color, #008080)) 4%);
  border: 1px solid color-mix(in srgb, var(--component-line, var(--line, rgba(14, 18, 20, 0.14))) 70%, transparent);
  border-radius: var(--component-radius, 10px);
  padding: var(--component-pad, 0.85rem);
  transition: box-shadow var(--component-transition-base), border-color var(--component-transition-fast);
}

:where(.frame-panel[data-spw-kind="card"], .frame-panel[data-spw-role="reference"][data-spw-category-family]):is(:hover, :focus-within) {
  box-shadow: var(--component-shadow-active);
  border-color: color-mix(in srgb, var(--component-route-accent, var(--active-op-color, #008080)) 35%, transparent);
}

:where(.frame-panel[data-spw-kind="card"] p,
       .frame-panel[data-spw-role="reference"][data-spw-category-family] p) {
  max-inline-size: 42ch;
  text-wrap: pretty;
}

/* Gesture state enhancements for cards, panels, and variants.
   Provides visual feedback during tap/hold/drag on recognizable card surfaces
   (math-lens-card, topic-reference-card, principle cards, gratitude/returner variants, etc.).
   Works alongside brace-gestures.js armed/charging states. */
:where(
  .frame-card, .frame-panel, .math-lens-card, .topic-reference-card,
  .spw-principle-card, .gratitude-card, .returner-card
)[data-spw-gesture="armed"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, #008080) 35%, transparent);
  transition: box-shadow var(--component-transition-fast);
}

:where(
  .frame-card, .frame-panel, .math-lens-card, .topic-reference-card,
  .spw-principle-card, .gratitude-card, .returner-card
)[data-spw-gesture="charging"] {
  transform: translateY(calc(var(--component-micro-lift, 1px) * -1));
  box-shadow: var(--component-shadow-active);
}

:where(
  .frame-card, .frame-panel, .math-lens-card, .topic-reference-card,
  .spw-principle-card, .gratitude-card, .returner-card
)[data-spw-gesture="sustained"] {
  border-color: color-mix(in srgb, var(--active-op-color, #008080) 28%, transparent);
}

/* Card/region layout + variant selection enhancements for cauldron hook + visual modes.
   Jump targets (from cauldron ingredient click) get temporary highlight.
   Regions or cards can carry data-spw-region="cauldron-target" or data-spw-component-variant="cauldron-candidate"
   for persistent differential styling when visibility=prominent.
   Improves token cascade (uses --cauldron-highlight, --region-jump-target from tokens) + layout (breathing, focus ring). */
.is-cauldron-jump-target,
[data-spw-cauldron-category],
[data-spw-component-variant="cauldron-candidate"],
[data-spw-region="cauldron-target"] {
  --cauldron-highlight: color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  box-shadow: 0 0 0 2px var(--cauldron-highlight), var(--component-shadow);
  transition: box-shadow 120ms var(--component-transition-fast);
}
.cauldron-highlight,
.is-cauldron-jump-target {
  animation: cauldron-jump-pulse 1.8s ease-out 1;
}
@keyframes cauldron-jump-pulse {
  0% { box-shadow: 0 0 0 0 var(--cauldron-highlight); }
  70% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cauldron-highlight) 40%, transparent); }
  100% { box-shadow: 0 0 0 2px var(--cauldron-highlight); }
}
/* When visibility prominent, candidates get stronger presence in cards/regions too */
html[data-spw-cauldron-candidate-visibility="prominent"] [data-spw-component-variant="cauldron-candidate"],
html[data-spw-cauldron-candidate-visibility="prominent"] [data-spw-region="cauldron-target"] {
  --region-jump-target: color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent);
  border-color: var(--region-jump-target);
}

:where(.frame-card, .frame-card > a:first-child) > :is(
  p,
  .frame-note,
  .frame-copy,
  span:not(.frame-card-sigil):not(.spw-component-tag):not(.spw-guide-chip)
) {
  max-inline-size: 42ch;
  line-height: 1.54;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Stronger defaults for layout, wrapping, and alignment in cards/panels */
:where(.frame-card, .frame-panel, .math-lens-card, .topic-reference-card) {
  text-align: start;
  align-items: start;
}

:where(.frame-card, .frame-panel) > * {
  min-width: 0;
}

:where(a.frame-card, .frame-card > a:first-child):is(:hover, :focus-visible) {
  color: inherit;
  text-decoration: none;
}

:where(a.frame-card, .frame-card > a:first-child):is(:hover, :focus-visible) {
  box-shadow: var(--component-shadow-active);
}

.frame-card > a:first-child:last-child {
  min-block-size: 100%;
}

:where(.frame-card-sigil, .operator-symbol, .ref-card-sigil) {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 72%, var(--active-op-color, var(--component-accent)) 28%);
  transition: color var(--component-transition-fast);
}

:where(.frame-card:is(:hover, :focus-within) .frame-card-sigil, .operator-symbol:is(:hover, :focus-visible)) {
  color: var(--active-op-color, var(--component-accent));
}

:where(.frame-card[data-spw-role="routing"], .frame-card[data-spw-role="routing"] > a:first-child) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-route-accent) 11%, transparent) 0%,
      transparent 24%
    ),
    color-mix(in srgb, var(--component-surface-strong) 93%, var(--component-route-accent) 7%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--component-route-accent) 18%, transparent),
    var(--component-shadow);
}

:where(.frame-card[data-spw-role="reference"], .frame-card[data-spw-role="reference"] > a:first-child) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent) 4%, transparent) 0%,
      transparent 18%
    ),
    color-mix(in srgb, var(--component-surface-strong) 97%, var(--component-accent) 3%);
}

:where(.frame-card.frame-card--illustrated > a:first-child) {
  gap: var(--spw-component-gap, var(--space-md, 1rem));
}

:where(.frame-card.frame-card--illustrated .frame-card-media) {
  margin-block-end: var(--space-3xs, 0.125rem);
}

:where(
  .frame-card,
  .frame-panel,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .ref-card,
  .compare-card
) :where(.card-sub-links, .ref-links, .plan-links) {
  opacity: var(--card-secondary-opacity);
  transform: translateY(var(--card-secondary-shift));
  transition:
    opacity var(--component-transition-base),
    transform var(--component-transition-base),
    max-height var(--component-transition-deliberate),
    margin-top var(--component-transition-base);
}

:where(.card-sub-links, .ref-links, .plan-links) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--component-gap-tight, 0.4rem) var(--component-gap-tight, 0.5rem);
  min-width: 0;
  margin-top: auto;
}

:where(:is(.card-sub-links, .ref-links) a, a.ref-link) {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: var(--space-3xs, 0.125rem);
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}

:where(:is(.card-sub-links, .ref-links) a, a.ref-link):is(:hover, :focus-visible) {
  color: var(--component-accent);
}

:where(.frame-card[data-spw-evidence]) {
  border-color: color-mix(in srgb, var(--op-action-color, var(--component-accent)) 24%, var(--line, transparent));
}

:where(.frame-card[data-spw-evidence]) :where(.spw-evidence-protocol) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
  margin-block-start: auto;
  padding-block-start: 0.45rem;
}

:where(.spw-evidence-protocol__chip) {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  max-inline-size: 100%;
  padding: 0.16rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--op-action-color, var(--component-accent)) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--component-surface-soft, #fff) 88%, var(--op-action-color, var(--component-accent)) 8%);
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--op-action-color, var(--component-accent)) 18%);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

:where(.spw-evidence-brief-btn) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  max-inline-size: 100%;
  padding: 0.2rem 0.56rem;
  border: 1px solid color-mix(in srgb, var(--op-frame-color, var(--component-accent)) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--component-surface-strong, #fff) 84%, var(--op-frame-color, var(--component-accent)) 10%);
  color: var(--ink, #111);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  transition:
    transform var(--component-transition-fast, 140ms ease),
    border-color var(--component-transition-fast, 140ms ease),
    box-shadow var(--component-transition-fast, 140ms ease);
}

:where(.spw-evidence-brief-btn):is(:hover, :focus-visible) {
  transform: translateY(calc(var(--component-micro-lift, 1px) * -1));
  border-color: color-mix(in srgb, var(--op-frame-color, var(--component-accent)) 58%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-frame-color, var(--component-accent)) 16%, transparent);
}

:where(.frame-card[data-spw-card-state="copied"]) :where(.spw-evidence-brief-btn) {
  border-color: color-mix(in srgb, var(--op-topic-color, var(--component-accent)) 54%, transparent);
  background: color-mix(in srgb, var(--component-surface-strong, #fff) 80%, var(--op-topic-color, var(--component-accent)) 14%);
}

:where(
  .frame-card,
  .frame-panel,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .ref-card,
  .compare-card
):is(:hover, :focus-within, [data-spw-card-state="expanded"], [data-spw-gesture="charging"]) :where(.card-sub-links, .ref-links, .plan-links) {
  --card-secondary-opacity: 1;
  --card-secondary-shift: 0;
  margin-top: auto;
}

:where(
  .frame-card,
  .frame-panel,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .ref-card,
  .compare-card
)[data-spw-card-state="compact"] :where(.card-sub-links, .ref-links, .plan-links) {
  --card-secondary-opacity: 0.76;
}

@media (pointer: coarse) {
  :where(
    .frame-card,
    .frame-panel,
    .media-card,
    .media-focus-card,
    .software-card,
    .operator-card,
    .plan-card,
    .ref-card,
    .compare-card
  ) :where(.card-sub-links, .ref-links, .plan-links) {
    gap: var(--component-gap-tight, 0.45rem);
  }

  :where(:is(.card-sub-links, .ref-links) a, a.ref-link) {
    min-height: max(2.3rem, var(--touch-target-min, 2.75rem));
    align-items: center;
  }
}

.spw-playable-hook {
  max-inline-size: 64ch;
  margin-block: var(--component-gap) var(--component-gap-loose);
  padding: var(--spw-component-pad-tight, 0.65rem) var(--spw-component-pad, 0.84rem);
  border-inline-start: 0.25rem solid var(--active-op-color, var(--component-accent));
  border-radius: var(--component-radius-loose);
  background: color-mix(in srgb, var(--component-surface-strong) 88%, var(--active-op-color, var(--component-accent)) 8%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

:where(.spw-reason-strip, .spw-role-hooks) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--component-gap-tight);
  min-width: 0;
  margin-block: var(--component-gap) var(--component-gap-loose);
  padding: 0;
  list-style: none;
}

:where(.spw-copy-motif-strip) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spw-list-charge-gap, 0.38rem);
  min-width: 0;
  margin: var(--component-gap-tight) 0 0;
  padding: 0;
  list-style: none;
}

:where(.spw-copy-motif-strip li) {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.18rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 86%, transparent);
  border-radius: var(--component-radius-pill, 999px);
  background: color-mix(in srgb, var(--component-surface-soft) 80%, var(--active-op-color, var(--component-accent)) 10%);
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 70%, var(--active-op-color, var(--component-accent)) 30%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  white-space: nowrap;
}

:where(.spw-reason-strip > *, .spw-role-hooks > *) {
  min-width: 0;
  padding: var(--component-pad-tight);
  border: var(--component-border-quiet);
  border-radius: var(--component-radius-loose);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--active-op-color, var(--component-accent)) 7%, transparent) 0%,
      transparent 46%
    ),
    color-mix(in srgb, var(--component-surface-strong) 94%, var(--active-op-color, var(--component-accent)) 4%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--component-accent)) 6%, transparent),
    var(--component-shadow-quiet);
}

:where(.spw-reason-strip strong, .spw-role-hooks strong, .spw-card-meta strong) {
  display: block;
  margin-block-end: var(--space-2xs, 0.25rem);
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--component-accent)) 18%);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

:where(.spw-reason-strip > * > strong, .spw-role-hooks > * > strong) {
  padding-block-end: var(--space-3xs, 0.125rem);
  border-bottom: 1px dotted color-mix(in srgb, var(--active-op-color, var(--component-accent)) 22%, transparent);
}

:where(.spw-reason-strip p, .spw-role-hooks p, .spw-card-meta p) {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.46;
  text-wrap: pretty;
}

:where(.spw-learning-game, .spw-semantic-emphasis-map) {
  --spw-learning-accent: var(--active-op-color, var(--component-accent));
  display: grid;
  gap: var(--component-gap-tight);
  margin-block: var(--component-gap) var(--component-gap-loose);
  padding: var(--spw-component-pad-tight, 0.65rem);
  border: 1px solid color-mix(in srgb, var(--spw-learning-accent) 24%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--spw-learning-accent) 12%, transparent),
      transparent 34%
    ),
    color-mix(in srgb, var(--component-surface-strong) 92%, var(--spw-learning-accent) 4%);
  box-shadow: var(--component-shadow-quiet);
}

:where(.spw-learning-game header, .spw-semantic-emphasis-map header) {
  display: grid;
  gap: 0.25rem;
}

:where(.spw-learning-game h3, .spw-semantic-emphasis-map h3) {
  margin: 0;
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-learning-accent) 18%);
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.2;
  text-wrap: balance;
}

:where(.spw-learning-game p, .spw-semantic-emphasis-map p) {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.45;
}

:where(.spw-learning-game ol) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--space-xs, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: spw-learning-step;
}

:where(.spw-learning-game li) {
  counter-increment: spw-learning-step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.32rem 0.55rem;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--spw-learning-accent) 18%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background: color-mix(in srgb, var(--component-surface-soft) 88%, var(--spw-learning-accent) 5%);
}

:where(.spw-learning-game li)::before {
  content: counter(spw-learning-step);
  display: grid;
  place-items: center;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--spw-learning-accent) 18%, transparent);
  color: color-mix(in srgb, var(--ink, #111) 72%, var(--spw-learning-accent) 28%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.76rem;
  font-weight: 850;
}

:where(.spw-learning-game li strong) {
  color: color-mix(in srgb, var(--ink, #111) 84%, var(--spw-learning-accent) 16%);
  line-height: 1.2;
}

:where(.spw-learning-game li span) {
  grid-column: 2;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.36;
}

:where(.spw-semantic-emphasis-map) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(.spw-semantic-emphasis-map header) {
  grid-column: 1 / -1;
}

:where(.spw-emphasis-tier) {
  --spw-emphasis-accent: var(--spw-learning-accent);
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-width: 0;
  padding: 0.7rem 0.76rem;
  border: 1px solid color-mix(in srgb, var(--spw-emphasis-accent) 20%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background: color-mix(in srgb, var(--component-surface-soft) 88%, var(--spw-emphasis-accent) 5%);
}

:where(.spw-emphasis-tier[data-spw-emphasis="primary"]) {
  --spw-emphasis-accent: var(--op-action-color, var(--component-accent));
  border-width: 2px;
}

:where(.spw-emphasis-tier[data-spw-emphasis="secondary"]) {
  --spw-emphasis-accent: var(--op-frame-color, var(--component-accent));
}

:where(.spw-emphasis-tier[data-spw-emphasis="tertiary"]) {
  --spw-emphasis-accent: var(--op-ref-color, var(--component-accent));
  opacity: 0.92;
}

:where([data-spw-emphasis="primary"]) {
  /* Primary emphasis leans action-oriented but routes through semantic accent first (see operator-semantics.spw#spell_evolution_note for the shift away from treating raw operator colors as universal surface defaults). */
  --component-route-accent: var(--semantic-accent, var(--op-action-color, var(--component-accent)));
}

:where([data-spw-emphasis="secondary"]) {
  --component-route-accent: var(--semantic-accent, var(--op-frame-color, var(--component-accent)));
}

:where([data-spw-emphasis="tertiary"]) {
  --component-route-accent: var(--semantic-accent, var(--op-ref-color, var(--component-accent)));
}

:where(.spw-emphasis-tier strong) {
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-emphasis-accent) 18%);
  font-size: 0.96rem;
  line-height: 1.2;
}

:where(.spw-emphasis-tier code) {
  justify-self: start;
  overflow-wrap: anywhere;
  padding: 0.14rem 0.38rem;
  border-radius: var(--component-radius-pill, 999px);
  background: color-mix(in srgb, var(--component-surface-soft) 78%, var(--spw-emphasis-accent) 9%);
  color: color-mix(in srgb, var(--ink, #111) 72%, var(--spw-emphasis-accent) 28%);
  font-size: 0.72rem;
}

:where(.spw-resonance-lab) {
  --spw-resonance-ground: color-mix(in srgb, var(--component-surface-strong) 92%, var(--active-op-color, var(--component-accent)) 5%);
  --spw-resonance-line: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 22%, var(--line, rgba(14, 18, 20, 0.14)));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--component-gap-tight);
  margin-block: var(--component-gap) var(--component-gap-loose);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 1px solid var(--spw-resonance-line);
  border-radius: var(--component-radius-loose);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--active-op-color, var(--component-accent)) 7%, transparent),
      transparent 42%
    ),
    var(--spw-resonance-ground);
  box-shadow: var(--component-shadow-quiet);
}

:where(.spw-resonance-lab > *) {
  min-width: 0;
  padding-block: 0.15rem;
}

:where(.spw-resonance-lab h3) {
  margin: 0 0 0.35rem;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: clamp(0.98rem, 1.8vw, 1.16rem);
  line-height: 1.2;
}

:where(.spw-resonance-lab p) {
  margin: 0;
  color: color-mix(in srgb, var(--ink-soft, rgba(0, 0, 0, 0.62)) 90%, var(--ink, #111) 10%);
  line-height: 1.48;
}

:where(.spw-resonance-lab [data-spw-resonance-axis]) {
  position: relative;
  padding-inline-start: 0.8rem;
}

:where(.spw-resonance-lab [data-spw-resonance-axis])::before {
  content: "";
  position: absolute;
  inset: 0.18rem auto 0.18rem 0;
  inline-size: 0.22rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 48%, transparent);
  opacity: var(--spw-resonance-axis-opacity, 0.58);
}

:where(.spw-resonance-lab [data-spw-resonance-axis="ground"]) {
  --spw-resonance-axis-opacity: 0.38;
}

:where(.spw-resonance-lab [data-spw-resonance-axis="precision"]) {
  --spw-resonance-axis-opacity: 0.7;
}

:where(.spw-resonance-lab [data-spw-resonance-axis="projection"]) {
  --spw-resonance-axis-opacity: 0.84;
}

:where([data-spw-copy-depth]) {
  --spw-copy-depth-line: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 18%, var(--line, rgba(14, 18, 20, 0.14)));
  --spw-copy-depth-bg: color-mix(in srgb, var(--component-surface-strong) 90%, var(--active-op-color, var(--component-accent)) 4%);
  display: none;
  margin-block: 0.75rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--spw-copy-depth-line);
  border-radius: var(--component-radius-loose);
  background: var(--spw-copy-depth-bg);
  color: color-mix(in srgb, var(--ink-soft, rgba(0, 0, 0, 0.62)) 88%, var(--ink, #111) 12%);
  line-height: 1.5;
}

:where([data-spw-copy-depth])::before {
  display: block;
  margin-block-end: 0.32rem;
  color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 72%, var(--ink, #111) 28%);
  content: attr(data-spw-copy-label);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

:where(html[data-spw-semantic-density="normal"]) :where([data-spw-copy-depth="normal"]),
:where(html[data-spw-semantic-density="rich"]) :where([data-spw-copy-depth="normal"]),
:where(html[data-spw-semantic-density="rich"]) :where([data-spw-copy-depth="rich"]),
:where(html[data-spw-runtime-posture="resonant"]) :where([data-spw-copy-depth="genre"]),
:where(html[data-spw-runtime-posture="theatrical"]) :where([data-spw-copy-depth="genre"]) {
  display: block;
}

:where([data-spw-copy-depth="normal"]) {
  --spw-copy-depth-line: color-mix(in srgb, var(--op-ref-color, var(--component-accent)) 22%, var(--line, rgba(14, 18, 20, 0.14)));
}

:where([data-spw-copy-depth="rich"]) {
  --spw-copy-depth-line: color-mix(in srgb, var(--op-probe-color, var(--component-accent)) 28%, var(--line, rgba(14, 18, 20, 0.14)));
  --spw-copy-depth-bg: color-mix(in srgb, var(--component-surface-strong) 88%, var(--op-probe-color, var(--component-accent)) 5%);
}

:where([data-spw-copy-depth="genre"]) {
  --spw-copy-depth-line: color-mix(in srgb, var(--op-object-color, var(--component-accent)) 30%, var(--line, rgba(14, 18, 20, 0.14)));
  --spw-copy-depth-bg: color-mix(in srgb, var(--component-surface-strong) 86%, var(--op-object-color, var(--component-accent)) 7%);
}

:where([data-spw-copy-depth][data-spw-semantic-expression]) {
  position: relative;
}

:where([data-spw-copy-depth][data-spw-semantic-expression])::after {
  content: attr(data-spw-semantic-expression);
  display: inline-flex;
  margin-block-start: 0.55rem;
  padding: 0.16rem 0.48rem;
  border-radius: var(--component-radius-pill, 999px);
  background: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 10%, transparent);
  color: color-mix(in srgb, var(--ink-soft, #555) 78%, var(--active-op-color, var(--component-accent)) 22%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

:where([data-spw-component-variant]) {
  --spw-variant-accent: var(--active-op-color, var(--component-accent));
  --spw-variant-line: color-mix(in srgb, var(--spw-variant-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)));
}

:where([data-spw-component-variant="primary"]) {
  --spw-variant-accent: var(--op-action-color, var(--component-accent));
}

:where([data-spw-component-variant="reference"]) {
  --spw-variant-accent: var(--op-ref-color, var(--component-accent));
}

:where([data-spw-component-variant="prompt"]) {
  --spw-variant-accent: var(--op-probe-color, var(--component-accent));
}

:where([data-spw-component-variant="ambient"]) {
  --spw-variant-accent: var(--op-frame-color, var(--component-accent));
}

:where([data-spw-component-variant]) :where(.frame-card-sigil, .frame-sigil, code) {
  color: color-mix(in srgb, var(--ink, #111) 68%, var(--spw-variant-accent) 32%);
}

:where(a[data-spw-link-intent="route"]) {
  color: color-mix(in srgb, var(--op-frame-color) 72%, var(--ink) 28%);
}

:where(a[data-spw-link-intent="query"], a[href*="?"]) {
  color: color-mix(in srgb, var(--op-probe-color) 68%, var(--ink) 32%);
}

:where(a[data-spw-link-intent="flavor"]) {
  color: color-mix(in srgb, var(--spw-flavor-accent, var(--op-object-color)) 70%, var(--ink) 30%);
}

:where(a[data-spw-link-intent="artifact"]) {
  color: color-mix(in srgb, var(--op-object-color) 72%, var(--ink) 28%);
}

:where(.frame-card, .frame-panel, .spw-wisdom-card, .returner-card, .gratitude-card) {
  border-color: color-mix(in srgb, var(--spw-region-frame-line, var(--line)) 78%, transparent);
}

:where(.frame-card[data-spw-component-variant], .spw-wisdom-card[data-spw-component-variant]) {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--spw-variant-accent) 5%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-panel) 96%, transparent);
}

:where(.spw-settings-cluster) {
  display: grid;
  gap: var(--gap-panel, 0.75rem);
  padding: calc(var(--inset-panel, 1rem) * var(--spw-spacing-scale, 1));
  border: 1px solid var(--spw-region-frame-line, var(--line));
  border-radius: var(--shape-surface, 12px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--spw-flavor-accent, var(--active-op-color)) 6%, transparent), transparent 62%),
    var(--spw-region-frame-fill, var(--surface-panel));
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--surface-strong) 28%, transparent),
    0 10px 24px color-mix(in srgb, var(--active-op-color) calc(var(--spw-lighting-guard, 0.34) * 8%), transparent);
}

:where(.spw-settings-cluster__header) {
  display: grid;
  gap: 0.28rem;
}

:where(.spw-settings-cluster__header > *) {
  margin: 0;
}

:where(.spw-settings-cluster__copy) {
  max-width: 68ch;
  color: var(--ink-soft);
}

:where(.spw-settings-cluster__actions, .spw-settings-cluster__readout) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-tight, 0.45rem);
}

:where(.spw-settings-cluster__note) {
  display: grid;
  gap: var(--space-3xs, 0.125rem);
  max-inline-size: 74ch;
  padding: 0.68rem 0.78rem;
  border: 1px dashed color-mix(in srgb, var(--active-op-color) 22%, var(--line));
  border-radius: var(--shape-component, 8px);
  background: color-mix(in srgb, var(--surface-strong) 76%, var(--active-op-color) 4%);
}

:where(.spw-settings-cluster__note > *) {
  margin: 0;
}

:where(.spw-settings-cluster__note kbd) {
  padding: 0.04rem 0.24rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--shape-micro, 4px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.82em;
}

:where(.spw-settings-cluster :is(button, .operator-chip, .theme-pack-chip-btn)) {
  background-color: var(--spw-control-safe-bg);
  color: var(--spw-control-safe-ink);
}

/* Button layout audit (semantic emphasis): operator-chip provides op sigil/arg distinction for localization/styling (see chrome utility sigil+arg spans); nooks use side-by-side chips for embedded component feel (bottom align via flex/baseline in shell/chrome); cauldron actions use operator-chip soft-pill cluster with flex-wrap for emphasis on action verbs while preserving resonance. Regional/nook + charge on lists discharge on tap for state semantics. No broad changes; preserves operator taxonomy emphasis over generic buttons. */

:where([data-spw-region], .site-frame, .frame-panel) {
  --spw-region-local-line: var(--spw-region-frame-line, var(--line));
  --spw-region-local-fill: var(--spw-region-frame-fill, var(--surface-panel));
}

:where([data-spw-region="read"], [data-spw-region-role="reading"]) {
  max-inline-size: var(--spw-layout-measure, 72ch);
}

:where([data-spw-region="wide"], [data-spw-region-role="atlas"]) {
  max-inline-size: var(--spw-layout-frame-max, var(--page-width-wide, 82rem));
}

:where([data-spw-region="cluster"], [data-spw-region-role="settings-cluster"]) {
  padding: calc(var(--inset-panel, 1rem) * var(--spw-spacing-scale, 1));
  border-color: var(--spw-region-local-line);
  background-color: var(--spw-region-local-fill);
}

:where([data-spw-component-lifecycle="draft"], html[data-spw-component-lifecycle="draft"] [data-spw-component-variant]) {
  border-style: dashed;
}

:where([data-spw-component-lifecycle="stable"], html[data-spw-component-lifecycle="stable"] [data-spw-component-variant]) {
  border-style: solid;
  opacity: 1;
}

:where([data-spw-component-lifecycle="active"], html[data-spw-component-lifecycle="active"] [data-spw-component-variant]) {
  box-shadow:
    inset 0.22rem 0 0 color-mix(in srgb, var(--spw-variant-accent, var(--active-op-color)) 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--spw-variant-accent, var(--active-op-color)) 18%, transparent),
    var(--component-shadow-quiet);
}

:where([data-spw-component-lifecycle="archived"], html[data-spw-component-lifecycle="archived"] [data-spw-component-variant]) {
  filter: saturate(0.78);
  opacity: 0.9;
}

/* Low-noise treatment for empty or default states — specific wisdom/card extensions only.
   The base --spw-variant-accent contract + broad opacity lives in foundation.css (components layer).
   This keeps the repeated rule in one shared location per containment audit guidance. */
:where([data-spw-empty="true"], [data-spw-component-state="empty"], [data-spw-component-state="default"]) :where(.spw-wisdom-card, .card-sub-links) {
  opacity: 0.6;
}

:where([data-spw-empty="true"] .spw-wisdom-card, [data-spw-component-state="empty"] .spw-wisdom-card) {
  box-shadow: var(--component-shadow-quiet);
  border-color: color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 70%, transparent);
}

:where(html[data-spw-module-visuals="on"], html[data-spw-semantic-density="rich"])
  :where([data-spw-component-variant]) {
  box-shadow:
    inset 0.18rem 0 0 color-mix(in srgb, var(--spw-variant-accent) 34%, transparent),
    var(--component-shadow-quiet);
}

:where(html[data-spw-semantic-density="rich"])
  :where([data-spw-component-variant][data-spw-semantic-expression])::before {
  content: attr(data-spw-component-variant) " · " attr(data-spw-semantic-expression);
  display: inline-flex;
  justify-self: start;
  max-inline-size: 100%;
  margin-block-end: var(--space-2xs, 0.25rem);
  padding: 0.16rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--spw-variant-accent) 18%, transparent);
  border-radius: var(--component-radius-pill, 999px);
  background: color-mix(in srgb, var(--component-surface-soft) 84%, var(--spw-variant-accent) 7%);
  color: color-mix(in srgb, var(--ink, #111) 70%, var(--spw-variant-accent) 30%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  overflow-wrap: anywhere;
}

:where([data-spw-semantic-cluster]) {
  --spw-cluster-accent: var(--active-op-color, var(--component-accent));
  --spw-cluster-line: color-mix(in srgb, var(--spw-cluster-accent) 22%, transparent);
}

:where([data-spw-semantic-cluster~="culinary"], [data-spw-vocab="culinary"]) {
  --spw-cluster-accent: var(--op-object-color, #a67c00);
}

:where([data-spw-semantic-cluster~="programming"], [data-spw-vocab="programming"]) {
  --spw-cluster-accent: var(--op-action-color, #005959);
}

:where([data-spw-semantic-cluster~="learning"], [data-spw-vocab="learning"]) {
  --spw-cluster-accent: var(--op-probe-color, #4a2180);
}

:where([data-spw-semantic-cluster~="genre"], [data-spw-vocab="genre"]) {
  --spw-cluster-accent: var(--op-stream-color, var(--op-ref-color, #1d57a3));
}

:where([data-spw-vocab]) {
  border-radius: 0.22em;
  background:
    linear-gradient(
      180deg,
      transparent 62%,
      color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color)) 14%, transparent) 62%
    );
  text-decoration: underline dotted color-mix(in srgb, var(--spw-cluster-accent, currentColor) 34%, transparent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
}

:where([data-spw-crossref-source="true"]) {
  outline: 2px solid color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color, #1a9999)) 50%, transparent);
  outline-offset: 0.18rem;
}

:where([data-spw-crossref="peer"]) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color, #1a9999)) 24%, transparent),
    0 0 0.9rem color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color, #1a9999)) 10%, transparent);
}

:where(
  html[data-spw-runtime-posture="resonant"],
  html[data-spw-runtime-posture="theatrical"]
) :where([data-spw-crossref="peer"]) {
  background-color: color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color, #1a9999)) 6%, transparent);
}

:where([data-spw-crossref="peer"][data-spw-semantic-expression])::after {
  border-color: color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color, #1a9999)) 26%, transparent);
  background: color-mix(in srgb, var(--component-surface-soft, #fff) 84%, var(--spw-cluster-accent, var(--active-op-color, #1a9999)) 8%);
}

:where(
  html[data-spw-palette-resonance="craft"],
  html[data-spw-palette-resonance="route"][data-spw-developmental-climate="weave"],
  html[data-spw-developmental-climate="offer"]
) :where([data-spw-semantic-cluster~="culinary"], [data-spw-vocab="culinary"]) {
  background:
    linear-gradient(
      180deg,
      transparent 48%,
      color-mix(in srgb, var(--spw-cluster-accent) 22%, transparent) 48%
    );
  text-decoration-color: color-mix(in srgb, var(--spw-cluster-accent) 52%, transparent);
}

:where(html[data-spw-runtime-posture="precision"]) :where([data-spw-semantic-cluster~="programming"], [data-spw-vocab="programming"]),
:where(html[data-spw-runtime-posture="resonant"]) :where([data-spw-semantic-cluster], [data-spw-vocab]),
:where(html[data-spw-runtime-posture="theatrical"]) :where([data-spw-semantic-cluster], [data-spw-vocab]) {
  box-shadow: inset 0 -0.12em 0 color-mix(in srgb, var(--spw-cluster-accent, var(--active-op-color)) 12%, transparent);
}

:where(.spw-route-bridge) {
  --spw-route-bridge-accent: var(--active-op-color, var(--component-accent));
  display: grid;
  gap: 0.75rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-block: var(--component-gap) var(--component-gap-loose);
  padding: clamp(0.8rem, 2vw, 1rem);
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--spw-route-bridge-accent) 20%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--spw-route-bridge-accent) 10%, transparent),
      transparent 34%
    ),
    color-mix(in srgb, var(--component-surface-strong) 92%, var(--spw-route-bridge-accent) 4%);
  view-transition-name: var(--spw-route-transition-name, none);
}

:where(.spw-route-bridge header) {
  display: grid;
  gap: var(--space-3xs, 0.125rem);
  min-width: 0;
}

:where(.spw-route-bridge h3) {
  margin: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.2;
}

:where(.spw-route-bridge p) {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.48;
  max-width: 68ch;
  overflow-wrap: anywhere;
}

:where(.spw-route-bridge__links) {
  --spw-list-charge-gap: 0.55rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--spw-list-charge-gap);
  padding: 0;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  list-style: none;
  transition: gap var(--component-transition-base);
}

:where(.spw-route-bridge__links > li) {
  min-width: 0;
}

:where(.spw-copy-motif-strip, [data-spw-list-behavior]) {
  --spw-list-charge-gap: 0.38rem;
  gap: var(--spw-list-charge-gap);
  transition: gap var(--component-transition-base);
}

:where([data-spw-charge="arming"]) :where(.spw-route-bridge__links, .spw-copy-motif-strip, [data-spw-list-behavior]),
:where(.spw-route-bridge__links, .spw-copy-motif-strip, [data-spw-list-behavior])[data-spw-charge="arming"] {
  --spw-list-charge-gap: 0.68rem;
}

:where([data-spw-charge="preview"]) :where(.spw-route-bridge__links, .spw-copy-motif-strip, [data-spw-list-behavior]),
:where(.spw-route-bridge__links, .spw-copy-motif-strip, [data-spw-list-behavior])[data-spw-charge="preview"] {
  --spw-list-charge-gap: 0.78rem;
}

:where(.spw-route-bridge__links a) {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  padding: 0.62rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--spw-route-bridge-accent) 18%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background: color-mix(in srgb, var(--component-surface-soft) 88%, var(--spw-route-bridge-accent) 5%);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    background var(--component-transition-base),
    border-color var(--component-transition-base),
    transform var(--component-transition-fast);
}

:where(.spw-route-bridge__links[data-spw-charge="arming"] a, [data-spw-charge="arming"] .spw-route-bridge__links a) {
  border-style: dashed;
}

:where(.spw-route-bridge__links[data-spw-charge="preview"] a, [data-spw-charge="preview"] .spw-route-bridge__links a) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--spw-route-bridge-accent) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--component-surface-soft) 88%, var(--spw-route-bridge-accent) 5%);
}

:where(.spw-route-bridge__links a:is(:hover, :focus-visible)) {
  border-color: color-mix(in srgb, var(--spw-route-bridge-accent) 42%, var(--line, rgba(14, 18, 20, 0.14)));
  transform: translateY(-1px);
}

:where(.spw-route-bridge__links strong) {
  color: color-mix(in srgb, var(--ink, #111) 80%, var(--spw-route-bridge-accent) 20%);
  font-size: 0.92rem;
  line-height: 1.25;
}

:where(.spw-route-bridge__links span) {
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  font-size: 0.84rem;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  :where(.spw-route-bridge) {
    gap: 0.68rem;
    margin-block: var(--component-gap-tight, 0.5rem) var(--component-gap, 0.75rem);
    padding: 0.78rem;
  }

  :where(.spw-route-bridge__links) {
    gap: 0.48rem;
  }

  :where(.spw-route-bridge__links a) {
    grid-template-columns: 1fr;
    gap: 0.28rem;
    padding: 0.68rem;
  }

  :where(.spw-route-bridge__links strong) {
    max-inline-size: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }
}

:where(.spw-wisdom-deck) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--component-gap-tight);
  margin-block: var(--component-gap) var(--component-gap-loose);
}

:where(.spw-wisdom-deck[data-spw-charge="arming"], [data-spw-charge="arming"] .spw-wisdom-deck) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

:where(.spw-wisdom-deck[data-spw-charge="preview"], [data-spw-charge="preview"] .spw-wisdom-deck) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

:where(html[data-spw-semantic-density="rich"] [data-spw-vocab],
html[data-spw-font-size-scale="110"] [data-spw-vocab],
html[data-spw-font-size-scale="120"] [data-spw-vocab]) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 42%, transparent);
}

:where([data-spw-charge="arming"], [data-spw-charge="preview"]) :where([data-spw-vocab], [data-spw-semantic-expression]),
:where([data-spw-vocab], [data-spw-semantic-expression]):is([data-spw-charge="arming"], [data-spw-charge="preview"]) {
  color: color-mix(in srgb, currentColor 82%, var(--active-op-color, var(--component-accent)) 18%);
}

:where(.spw-wisdom-card) {
  --spw-wisdom-accent: var(--active-op-color, var(--component-accent));
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  padding: 0.82rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--spw-wisdom-accent) 18%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--spw-wisdom-accent) 7%, transparent),
      transparent 46%
    ),
    color-mix(in srgb, var(--component-surface-strong) 92%, var(--spw-wisdom-accent) 4%);
  box-shadow: var(--component-shadow-quiet);
}

:where(.spw-wisdom-card[data-spw-semantic-cluster~="culinary"]) {
  --spw-wisdom-accent: var(--op-object-color, #a67c00);
}

:where(.spw-wisdom-card[data-spw-semantic-cluster~="garden"]) {
  --spw-wisdom-accent: color-mix(in srgb, var(--op-topic-color, #2f7a5c) 88%, var(--op-frame-color, #008080));
}

:where(.spw-wisdom-card[data-spw-semantic-cluster~="play"]) {
  --spw-wisdom-accent: var(--op-stream-color, var(--op-ref-color, #1d57a3));
}

:where(.spw-wisdom-card[data-spw-background-motion="pie-attention"]) {
  background:
    radial-gradient(
      ellipse at 18% 16%,
      color-mix(in srgb, var(--spw-wisdom-accent) 12%, transparent),
      transparent 34%
    ),
    conic-gradient(
      from 0.12turn at 84% 18%,
      color-mix(in srgb, var(--spw-wisdom-accent) 10%, transparent),
      transparent 0.18turn,
      color-mix(in srgb, var(--op-object-color, #a67c00) 9%, transparent),
      transparent 0.42turn
    ),
    color-mix(in srgb, var(--component-surface-strong) 92%, var(--spw-wisdom-accent) 4%);
}

:where(.spw-wisdom-card[data-spw-background-motion="pie-attention"])::before {
  content: "";
  inline-size: 2.6rem;
  block-size: 2.6rem;
  grid-row: 1 / span 3;
  justify-self: end;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--spw-wisdom-accent) 24%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(36deg, transparent 48%, color-mix(in srgb, var(--spw-wisdom-accent) 34%, transparent) 49% 51%, transparent 52%),
    linear-gradient(108deg, transparent 48%, color-mix(in srgb, var(--op-object-color, #a67c00) 26%, transparent) 49% 51%, transparent 52%);
  opacity: 0.72;
}

:where(.spw-wisdom-card strong) {
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-wisdom-accent) 18%);
  font-size: 1rem;
  line-height: 1.18;
}

:where(.spw-wisdom-card p) {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.45;
}

:where(.spw-wisdom-card code) {
  justify-self: start;
  padding: 0.12rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--spw-wisdom-accent) 22%, transparent);
  border-radius: var(--component-radius-pill, 999px);
  background: color-mix(in srgb, var(--component-surface-soft) 86%, var(--spw-wisdom-accent) 6%);
  color: color-mix(in srgb, var(--ink, #111) 72%, var(--spw-wisdom-accent) 28%);
  font-size: 0.72rem;
}

:where(.spw-cuisine-taxonomy) {
  --spw-cuisine-accent: var(--op-object-color, #a67c00);
  display: grid;
  gap: 0.8rem;
  margin-block: var(--component-gap) var(--component-gap-loose);
  padding: var(--spw-component-pad-tight, 0.65rem);
  border: 1px solid color-mix(in srgb, var(--spw-cuisine-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--spw-cuisine-accent) 9%, transparent), transparent 42%),
    color-mix(in srgb, var(--component-surface-strong, #fff) 92%, var(--spw-cuisine-accent) 4%);
  box-shadow: var(--component-shadow-quiet);
}

:where(.spw-cuisine-taxonomy header) {
  display: grid;
  gap: 0.25rem;
}

:where(.spw-cuisine-taxonomy h3, .spw-cuisine-taxonomy p) {
  margin: 0;
}

:where(.spw-cuisine-taxonomy h3) {
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-cuisine-accent) 18%);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.2;
}

:where(.spw-cuisine-taxonomy p) {
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.45;
}

:where(.spw-cuisine-taxonomy dl) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-xs, 0.5rem);
  margin: 0;
}

:where(.spw-cuisine-taxonomy dl > div) {
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px dashed color-mix(in srgb, var(--spw-cuisine-accent) 24%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose);
  background: color-mix(in srgb, var(--component-surface-soft, #fff) 88%, var(--spw-cuisine-accent) 5%);
}

:where(.spw-cuisine-taxonomy dt) {
  margin: 0 0 0.2rem;
  color: color-mix(in srgb, var(--ink, #111) 78%, var(--spw-cuisine-accent) 22%);
  font-weight: 850;
}

:where(.spw-cuisine-taxonomy dd) {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.4;
}

:where([data-spw-transition-surface]) {
  view-transition-name: var(--spw-transition-surface-name, none);
  contain: layout paint;
}

:where([data-spw-transition-surface="hero"]) {
  --spw-transition-surface-name: route-hero;
}

:where([data-spw-transition-surface="bridge"]) {
  --spw-transition-surface-name: route-bridge;
}

@media (prefers-reduced-motion: reduce) {
  :where(.spw-route-bridge__links a:is(:hover, :focus-visible)) {
    transform: none;
  }
}

@media (max-width: 54rem) {
  :where(.spw-semantic-emphasis-map) {
    grid-template-columns: 1fr;
  }
}

:where(html[data-spw-runtime-posture="minimal"] .spw-resonance-lab) {
  --spw-resonance-ground: color-mix(in srgb, var(--component-surface-strong) 96%, var(--bg, #f7f4ee) 4%);
  --spw-resonance-line: color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 84%, transparent);
}

:where(html[data-spw-runtime-posture="precision"] .spw-resonance-lab) {
  --spw-resonance-line: color-mix(in srgb, var(--op-ref-color, var(--component-accent)) 28%, var(--line, rgba(14, 18, 20, 0.14)));
}

:where(html[data-spw-runtime-posture="resonant"] .spw-resonance-lab) {
  --spw-resonance-line: color-mix(in srgb, var(--op-probe-color, var(--component-accent)) 34%, var(--line, rgba(14, 18, 20, 0.14)));
  --spw-resonance-ground: color-mix(in srgb, var(--component-surface-strong) 88%, var(--op-probe-color, var(--component-accent)) 8%);
}

:where(html[data-spw-runtime-posture="theatrical"] .spw-resonance-lab) {
  --spw-resonance-line: color-mix(in srgb, var(--op-object-color, var(--component-accent)) 42%, var(--line, rgba(14, 18, 20, 0.14)));
  --spw-resonance-ground: color-mix(in srgb, var(--component-surface-strong) 84%, var(--op-object-color, var(--component-accent)) 11%);
}

.spw-card-meta {
  display: grid;
  gap: 0.35rem;
}

.spw-card-reason {
  justify-self: stretch;
  min-width: 0;
  margin-block-start: var(--component-gap-tight);
  padding: 0.65rem 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent);
  border-radius: var(--component-radius-loose);
  background: color-mix(in srgb, var(--component-surface-soft) 82%, transparent);
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
}

.spw-card-reason > summary {
  cursor: pointer;
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 80%, var(--active-op-color, var(--component-accent)) 20%);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

.spw-card-reason > :where(p, ul, ol) {
  margin-block-start: 0.65rem;
}

.spw-card-reason > :where(p, li) {
  max-inline-size: 60ch;
  line-height: 1.48;
}

:where(.frame-card, .frame-panel, .returner-card):is(:hover, :focus-within)
  :where(.spw-card-meta strong, .spw-card-reason > summary) {
  color: var(--active-op-color, var(--component-accent));
}

.card-sub-links a[data-spw-nav-tokenized="true"]::before,
.card-sub-links a[data-spw-nav-tokenized="true"]::after {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.76em;
  color: color-mix(in srgb, var(--component-accent) 58%, transparent);
}

.card-sub-links a[data-spw-nav-tokenized="true"]::before {
  content: attr(data-spw-nav-prefix);
}

.card-sub-links a[data-spw-nav-tokenized="true"]::after {
  content: attr(data-spw-nav-postfix);
}


/* ==========================================================================
   11. Inner type hygiene
   ========================================================================== */

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  li,
  blockquote,
  pre,
  code,
  figure,
  figcaption,
  .frame-note,
  .frame-copy,
  .specimen-material,
  .operator-snippet-note,
  .plan-thesis,
  .plan-wonder p
) {
  min-width: 0;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) :is(h2, h3, h4, p, ul, ol, pre, figure, figcaption) {
  margin: 0;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card
) :is(
  p,
  li,
  span:not(.frame-card-sigil):not(.media-card-tag):not(.media-focus-operator):not(.operator-symbol):not(.spec-pill):not(.plan-status)
) {
  line-height: 1.46;
  max-inline-size: 60ch;
}

/* ==========================================================================
   RPG Wednesday driver (l'n'd'r Bjrknptpf, clay/golem, "speech bubble metaphysical expertise")
   Explicit spacing when interactive / descriptively absent / truly null.
   Component state, machinability, generalizable charge/discharge + steps/variability.
   Regional (hub vs path), nook embedded side-by-side, disappearing transient toasts/chips.
   Artifact relationships, combinatoric play, Spw symmetry (prefix sigil vs postfix arg/concept label),
   modes (selection/activation/skimming), state traversability, text/layout ecology.
   Reuses catalogued families: data-spw-spacing, data-spw-charge*, data-spw-card-state,
   data-spw-region*, data-spw-artifact, data-spw-machinability/state-contract, data-spw-perspective,
   data-spw-gesture, data-spw-selection, data-spw-cauldron* for collecting notes to cauldron.
   Ties to linguistic metaphysics (operators as speech acts / bubbles, higher-order markup),
   materials-as-paint (tunable card surfaces, spacing as brush, charge as layer, metamaterial as ground),
   real physics (charge cycles, snap inertia, variability damping via physics-reason; inclusive for
   accuracy/fantasy players to describe dynamics). RPG Wednesday as recurring quality + PWA/cultural
   curiosity driver (wonder about community, art, software, math, physics, writing, production,
   storytelling, gardening).
   ========================================================================== */

:where(.frame-card, .frame-panel, .topic-reference-card, .spw-principle-card, .operator-card, .plan-card) {
  /* Base card rhythm tokens already provide defaults; spacing attrs make "absent vs present"
     intent explicit for research, inclusive dynamics, and component ecology experiments. */
}

/* Explicit spacing states for cards/panels. Supports "make spacing explicit when interactive
   or descriptively absent or truly null". Values align with catalogued data-spw-spacing. */
:where([data-spw-spacing="interactive"]) {
  --card-internal-gap: clamp(0.65rem, 1.4vw, 1.05rem);
  --card-rhythm: clamp(0.72rem, 1.5vw, 1.1rem);
  padding: var(--spw-component-pad, 0.85rem);
  /* Generous for touch, combinatoric selection, skimming modes, badge tunability play. */
}
:where([data-spw-spacing="descriptively-absent"]) {
  --card-internal-gap: 0.18rem;
  --card-rhythm: 0.22rem;
  /* Tight but labels/meaning remain; for dense registers or when description is "absent" yet
     the slot is semantically present (stub thoroughness, path nodes). */
}
:where([data-spw-spacing="null"]) {
  --card-internal-gap: 0;
  --card-rhythm: 0;
  padding-block: 0;
  gap: 0;
  /* Truly null/collapsed space. For overlay, null states, or testing machinability of absence.
     Use with data-spw-charge="0" or data-spw-card-state="compact" for full traversability. */
}
:where([data-spw-spacing="explicit"]) {
  --card-internal-gap: clamp(0.55rem, 1.1vw, 0.9rem);
  /* When the space itself is the described/interactive thing (e.g. layout experiments, prefix/postfix
     distinction visible as breathing room between sigil and concept label). */
}

/* Charge / discharge generalizable + steps for state traversability and ease of variability.
   Different "ease" via physics-reason or data-spw-variability on ancestor; steps 0-3+ let
   accuracy players count precise quanta while fantasy players feel the "speech bubble" swell. */
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge="0"],
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge=""] {
  /* discharged / null / resting */
  opacity: 0.92;
  filter: saturate(0.85);
}
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge="1"] {
  border-color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 22%, transparent);
}
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge="2"] {
  transform: translateY(-0.5px);
  box-shadow: var(--component-shadow-active);
}
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge="3"],
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge="full"],
:where(.frame-card, .frame-panel, .operator-card)[data-spw-charge="artifact"] {
  /* charged / active / artifact relationship state (component as "artifact" in cauldron sense) */
  border-color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 48%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--component-accent)) 25%, transparent);
}

/* Machinability / component state: how easily the card yields to tuning, selection, activation.
   High = loose, playful, combinatoric; low = deliberate, precise physics. */
:where(.frame-card, .frame-panel, .operator-card)[data-spw-machinability="high"],
:where(.frame-card, .frame-panel, .operator-card)[data-spw-state-contract*="machin"] {
  cursor: pointer;
  transition-duration: var(--component-transition-fast);
}
:where(.frame-card, .frame-panel, .operator-card)[data-spw-machinability="low"] {
  transition-duration: var(--component-transition-deliberate);
  /* slower, weightier for "real physics" or fantasy mass feel */
}
:where(.frame-card, .frame-panel)[data-spw-card-state="skim"] {
  --card-secondary-opacity: 0.6;
  filter: saturate(0.7);
}
:where(.frame-card, .frame-panel)[data-spw-card-state="select"],
:where(.frame-card, .frame-panel)[data-spw-selection="active"] {
  outline: 1px dashed color-mix(in srgb, var(--active-op-color, var(--component-accent)) 40%, transparent);
  outline-offset: 2px;
}
:where(.frame-card, .frame-panel)[data-spw-card-state="activate"] {
  box-shadow: var(--component-shadow-active);
  border-color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 55%, transparent);
}

/* Regional semantics to clarify hub pages from pages along paths.
   data-spw-region / data-spw-region-role / data-spw-region-flow already exist in catalog;
   these rules give visual distinction so visitors develop page-architecture vocabulary. */
:where([data-spw-region="hub"] .frame-card,
       [data-spw-region-role="hub"] .frame-card,
       [data-spw-page-role*="hub"] .frame-card) {
  /* Hubs: more exploratory, combinatoric, layout sampling, collect-to-cauldron invitations. */
}
:where([data-spw-region="path"],
       [data-spw-region-role="path-node"],
       [data-spw-region-role="path"]) {
  /* Path nodes: grounded, stateful, traversable charge/cauldron, deeper notes. */
}

/* Nook region: side-by-side buttons shaded to feel like an embedded component.
   Use data-spw-region-role="nook" or data-spw-locality="nook" + component-locality for
   settings toggles, mode switches, charge controls, badge actions. Embedded feel. */
:where(.spw-nook,
       [data-spw-region-role="nook"],
       [data-spw-locality*="nook"],
       [data-spw-component-locality*="nook"]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--component-gap-tight, 0.4rem);
  align-items: center;
  padding: 0.32rem 0.48rem;
  border-radius: var(--component-radius, 8px);
  background: color-mix(in srgb, var(--matte-surface, var(--surface-strong, #f8f5f0)) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, rgba(0,0,0,0.1)) 38%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
  /* Shaded embedded: not page primary actions, but controls of the local surface (like paint mixing nook). */
}
:where(.spw-nook > button,
       .spw-nook > .operator-chip,
       [data-spw-region-role="nook"] > button,
       [data-spw-region-role="nook"] > .operator-chip) {
  font-size: 0.76rem;
  padding: 0.12rem 0.42rem;
  min-height: 1.7rem;
}

/* Small disappearing toasts / chips for state traversability feedback.
   (charge step, collect to cauldron, snap, mode change, inline toggle result).
   Composes with existing floating-chrome [data-spw-chrome-tier="toast"] + discovery learning toasts.
   Transient auto-fade; useful for RPG "speech bubble" affirmations or physics event pings. */
:where(.spw-toast--transient,
       [data-spw-toast="transient"],
       .spw-disappear-chip,
       [data-spw-badge-type="transient"]) {
  animation: spw-toast-disappear 2200ms 380ms forwards;
  pointer-events: none;
}
@keyframes spw-toast-disappear {
  0% { opacity: 1; transform: translateY(0); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-3px); }
}

/* Text interaction semantic enhancement + component ecology + prefix/postfix for Spw symmetry.
   Encourages exploration of behavior semantics, layouts, higher-order markup (speech bubble as
   labeled operator: prefix sigil "speech act" + postfix concept label "meaning").
   data-spw-concept-label or .spw-prefix / .spw-postfix can be used on operator-like children. */
:where(.frame-card .spw-concept-label,
       .frame-card [data-spw-concept-label],
       .frame-card .spw-postfix) {
  font-size: 0.72em;
  opacity: 0.68;
  letter-spacing: 0.015em;
}
:where(.frame-card .spw-prefix,
       .frame-card [data-spw-prefix]) {
  font-weight: 700;
  margin-inline-end: 0.2em;
  opacity: 0.85;
}
/* When prefix/postfix distinction is part of the card (linguistic metaphysics play), give
   explicit breathing via spacing="explicit" or default rhythm so symmetry is felt. */

/* Improve cauldron layout in the footer (and button alignment at bottom of cards).
   Cauldron collection often lives as "memory garden" at page/card bottom (see rpg library, tools, about).
   Make consistent: flex with space-between for status + actions, bottom-aligned buttons for sub-links + cauldron controls.
   Ties to spell/cauldron as discovery + tangential control; visual variety for flow; semantic salience. */
:where(.card-sub-links, .ref-links, .plan-links, .spw-cauldron-footer) {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--component-gap-tight, 0.4rem);
}
:where(.spw-cauldron-footer) {
  font-size: 0.82rem;
  opacity: 0.9;
  padding-block: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--line, rgba(0,0,0,0.1)) 30%, transparent);
}
:where(.card-sub-links > *, .spw-cauldron-footer > *) {
  /* buttons/links bottom aligned within their cluster */
  align-self: flex-end;
}
:where(.spw-cauldron-footer [data-spw-collection-status]) {
  flex: 1 1 auto;
  min-width: 8ch;
}

/* Consider what happens on activate/tap/discharge for list items, sections, cards (per considerations).
   E.g. [data-spw-charge] or [data-spw-selection=active] on ul/li or section shows discharge (opacity/scale down after use),
   or "activated" glow for topical composition awareness + site layout (hubs vs paths). Ties to state traversability,
   charge/discharge general, modes (skim/activate), semantic density. */
:where(ul, ol, .frame-operators, .topic-list, section[data-spw-kind="frame"])[data-spw-selection="active"],
:where(li, .operator-chip, .frame-card)[data-spw-charge="full"] {
  /* discharged or activated state visual */
  transition: filter 200ms, opacity 200ms;
}
:where(li, .operator-chip, .frame-card)[data-spw-gesture="discharged"],
:where(ul, section)[data-spw-charge="0"] {
  opacity: 0.7;
  filter: saturate(0.6);
}
:where(.topic-hero-grid li, .frame-operators a)[data-spw-active="true"] {
  /* awareness of topical composition / site layout on tap */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--component-accent)) 30%, transparent);
}
}

/* /public/css/components/frames.css */
@layer components {
/* ==========================================================================
   components/frames.css
   --------------------------------------------------------------------------
   Site-frame structure, frame stance, hero thresholds, and metamaterial selectors.
   ========================================================================== */

/* ==========================================================================
   12. Site frame
   ========================================================================== */

:where(.site-frame) {
  --surface-gap: var(--spw-surface-gap, clamp(0.72rem, 1.55vw, 1.14rem));
  --surface-padding: var(--spw-surface-padding, clamp(0.88rem, 1.85vw, 1.28rem));
  --site-frame-seam-color: color-mix(in srgb, var(--component-accent) 18%, transparent);
  --frame-arrival-offset: 0px;
  --frame-arrival-opacity: 1;

  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
  min-width: 0;
  overflow: clip;
  padding: var(--surface-padding);
  border: var(--component-border);
  border-radius: var(--component-radius);
  background: color-mix(in srgb, var(--component-surface) 97%, var(--component-accent) 3%);
  box-shadow:
    var(--component-frame-shadow),
    var(--spw-chassis-highlight, inset 0 1px 0 color-mix(in srgb, white 18%, transparent)),
    var(--spw-chassis-shadow, inset 0 -1px 0 color-mix(in srgb, var(--shadow-color, #111) 5%, transparent));
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
  opacity: var(--frame-arrival-opacity);
  transform: translateY(calc(var(--frame-arrival-offset) - (var(--interaction-excitement, 0) * 1px)));
  transition:
    background var(--component-transition-deliberate),
    border-color var(--component-transition-base),
    box-shadow var(--component-transition-deliberate),
    opacity var(--component-transition-arrival),
    transform var(--component-transition-arrival);
}

:where(.site-frame)::before {
  content: "";
  position: absolute;
  inset: 1rem var(--surface-padding) auto var(--surface-padding);
  height: 1px;
  background: linear-gradient(
      90deg,
      var(--site-frame-seam-color) 0 clamp(3.5rem, 12vw, 4.5rem),
      transparent clamp(3.5rem, 12vw, 4.5rem)
  );
  pointer-events: none;
  opacity: 0.92;
}

:where(.site-frame[data-state~="active"]),
:where(.site-frame[data-spw-active="true"]) {
  border-color: var(--line-strong, color-mix(in srgb, var(--component-accent) 34%, transparent));
  background: var(--component-surface-strong);
  box-shadow:
    var(--component-frame-shadow-active),
    var(--spw-chassis-highlight, inset 0 1px 0 color-mix(in srgb, white 22%, transparent));
  --interaction-excitement: 1;
  --site-frame-seam-color: color-mix(in srgb, var(--component-accent) 26%, transparent);
}

/* Cognitive container enhancements (observational resonance, meaning depth, inline memory/annotation)
   - Frames as rich semantic vessels that support inline memory/annotation affordances
     and carry interpretable meaning attributes for screenshots, catalog, and active wonder.
   - Reduces dead space by making the seam/header area carry light inline controls when
     memory or annotation state is present.
   - Supports cathartic, resonant experience: containers that "remember" and "invite annotation"
     rather than remaining passive.
   - Performance-minded: uses existing data attrs and :has() where already supported; no new
     heavy selectors or forced reflows. */
:where(.site-frame[data-spw-memory-managed="true"],
       .site-frame[data-spw-annotation-scope]) {
  --cognitive-container-tint: color-mix(in srgb, var(--component-accent) 8%, transparent);
}

:where(.site-frame[data-spw-memory-managed="true"])::before {
  background: linear-gradient(
    90deg,
    var(--cognitive-container-tint) 0 clamp(3.5rem, 12vw, 4.5rem),
    transparent clamp(3.5rem, 12vw, 4.5rem)
  );
}

/* Meaning and design depth attributes — portable signals for screenshots,
   AI interpretation, catalog, and authorial intent layering.
   These turn a static frame into a medium with observable depth. */
:where(.site-frame[data-spw-meaning-depth="light"]) {
  --meaning-contrast: 0.6;
  --meaning-density: 0.4;
}

:where(.site-frame[data-spw-meaning-depth="rich"]) {
  --meaning-contrast: 1.15;
  --meaning-density: 0.85;
}

:where(.site-frame[data-spw-design-interpretation]) {
  /* Subtle visual cue that this container carries explicit design/semantic intent */
  box-shadow: var(--component-frame-shadow),
    0 0 0 1px color-mix(in srgb, var(--component-accent) 12%, transparent);
}

/* Inline interaction affordance in header/seam area when memory or annotation is active
   (encourages engagement without dedicated panels — reduces dead space). */
:where(.site-frame[data-spw-memory-managed="true"] .frame-heading,
       .site-frame[data-spw-annotation-scope] .frame-heading) {
  position: relative;
}

:where(.site-frame[data-spw-memory-managed="true"] .frame-heading)::after,
:where(.site-frame[data-spw-annotation-scope] .frame-heading)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--component-accent) 55%, transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* Context-aware typography, alignment, and overflow hygiene inside resonant containers.
   When a frame carries memory/annotation state (active wonder), tighten rhythm
   slightly to reduce dead space while preserving readability. Prevents overflow
   bugs in dense inline + annotated content. Performance-friendly (no layout thrash). */
:where(.site-frame[data-spw-memory-managed="true"],
       .site-frame[data-spw-annotation-scope]) {
  --surface-gap: calc(var(--spw-surface-gap, 1rem) * 0.92);
  --surface-padding: calc(var(--spw-surface-padding, 1.2rem) * 0.95);
}

:where(.site-frame[data-spw-memory-managed="true"] p,
       .site-frame[data-spw-annotation-scope] p,
       .site-frame[data-spw-memory-managed="true"] li,
       .site-frame[data-spw-annotation-scope] li) {
  max-inline-size: 68ch; /* slightly tighter for resonant reading */
  overflow-wrap: break-word;
}

.site-frame h1 {
  font-size: clamp(1.55rem, 1.2rem + 2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.site-frame h2 {
  font-size: clamp(1.1rem, 0.9rem + 1.1vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.site-frame h3 {
  font-size: clamp(0.92rem, 0.85rem + 0.5vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.site-lede,
.page-lede {
  font-size: clamp(1rem, 0.85rem + 0.9vw, 1.25rem);
  font-weight: 500;
  line-height: 1.58;
  max-inline-size: 48ch;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--ink, #161c1d) 88%, transparent);
}

:where(.site-frame > p:not(.frame-note):not(.inline-note):not(.site-lede):not(.page-lede):not(.spec-kicker):not(.page-kicker)) {
  max-inline-size: 66ch;
  text-wrap: pretty;
}

:where(
  .site-frame > .frame-heading + p,
  .site-frame > header.frame-heading + p,
  .site-frame > h1 + p,
  .site-frame > h2 + p,
  .site-frame > h3 + p,
  .site-frame > .spec-kicker + h1 + p,
  .site-frame > .spec-kicker + h2 + p,
  .site-frame > .frame-topline + .spec-kicker + h1 + p,
  .site-frame > .frame-topline + .spec-kicker + h2 + p
):not(.frame-note):not(.inline-note):not(.site-lede):not(.page-lede):not(.spec-kicker):not(.page-kicker) {
  font-size: clamp(1.01rem, 0.96rem + 0.34vw, 1.12rem);
  font-weight: 500;
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink, #161c1d) 92%, transparent);
}

/* Slot-based layout */
.frame-topline,
.frame-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--surface-gap);
  min-width: 0;
  z-index: var(--material-layer-overlay, 2);
  transition: transform var(--component-transition-base);
}

.frame-body {
  display: grid;
  gap: var(--surface-gap);
  min-width: 0;
  z-index: var(--material-layer-content, 1);
  transition: opacity var(--component-transition-deliberate), transform var(--component-transition-deliberate);
}

.frame-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--surface-gap);
  margin-top: auto;
  padding-top: var(--surface-gap);
  border-top: 1px solid var(--line-quiet, rgba(0, 0, 0, 0.05));
  z-index: var(--material-layer-overlay, 2);
  transition: transform var(--component-transition-base), opacity var(--component-transition-base);
}

:where(.site-frame > :is(h1, h2, h3, .site-lede, .page-lede) + p) {
  margin-block-start: calc(-1 * var(--space-3xs, 0.125rem));
}

:where(.frame-actions:has(> .spw-delimiter:only-child)) {
  gap: 0;
  margin-top: 0;
  padding-top: var(--space-xs, 0.5rem);
  border-top: 0;
  min-block-size: 0;
}

:where(.frame-actions:has(> .spw-delimiter:only-child) > .spw-delimiter) {
  min-block-size: 1.5rem;
}

[data-spw-slot="header"] { order: -2; }
[data-spw-slot="meta"] { margin-left: auto; order: -1; }
[data-spw-slot="body"] { order: 0; flex: 1 1 auto; }
[data-spw-slot="figure"] { order: 1; }
[data-spw-slot="actions"] { order: 2; }

/* Slot interaction */
:where(.site-frame[data-spw-active="true"]) [data-spw-slot="header"] {
  transform: translateY(-1px);
}

:where(.site-frame[data-spw-active="true"]) [data-spw-slot="actions"] {
  transform: translateY(1px);
}

:where(.site-frame[data-spw-attention="ambient"]) [data-spw-slot="body"] {
  opacity: 0.92;
}

:where(.site-frame[data-spw-attention="focused"]) [data-spw-slot="body"] {
  opacity: 1;
}

@keyframes frame-bloom {
  0% { box-shadow: var(--component-frame-shadow); filter: brightness(1); }
  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--component-accent) 24%, transparent); filter: brightness(1.02); }
  100% { box-shadow: var(--component-frame-shadow-active); filter: brightness(1); }
}

:where(.site-frame[data-spw-active="true"]) {
  animation: frame-bloom var(--component-transition-deliberate) ease-out forwards;
}

@keyframes frame-slot-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

:where(.site-frame[data-spw-active="true"]) [data-spw-slot] {
  animation: frame-slot-reveal var(--component-transition-deliberate) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

:where(.site-frame[data-spw-active="true"]) [data-spw-slot="header"] { animation-delay: 40ms; }
:where(.site-frame[data-spw-active="true"]) [data-spw-slot="body"] { animation-delay: 120ms; }
:where(.site-frame[data-spw-active="true"]) [data-spw-slot="figure"] { animation-delay: 240ms; }
:where(.site-frame[data-spw-active="true"]) [data-spw-slot="actions"] { animation-delay: 360ms; }


/* ==========================================================================
   13. Role-based frame stance
   ========================================================================== */

:where(.site-frame[data-spw-role="probe"]) {
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--op-probe-bg-soft, var(--component-accent-soft)) 50%, transparent),
      transparent 55%
  ),
  var(--component-surface);
}

:where(.site-frame[data-spw-role="surface"]) {
  background: linear-gradient(
      0deg,
      color-mix(in srgb, var(--op-surface-bg-soft, var(--component-accent-soft)) 40%, transparent),
      transparent 50%
  ),
  var(--component-surface);
}

:where(.site-frame[data-spw-role="reference"]) {
  border-left-width: 2px;
  border-left-color: var(--op-ref-border, color-mix(in srgb, var(--component-accent) 22%, transparent));
  --component-measure: 74ch;
  --surface-gap: 1.15rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-surface-strong) 95%, var(--component-accent) 5%),
      color-mix(in srgb, var(--component-surface) 98%, transparent)
    );
}

:where(.site-frame[data-spw-role="reference"] p) {
  line-height: 1.65;
}

:where(.site-frame[data-spw-role="status"]) {
  background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent) 10%, transparent),
      transparent 42%
  ),
  var(--component-surface);
}

:where(.site-frame[data-spw-role="routing"]) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--component-accent) 24%, var(--line, transparent));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent) 8%, transparent) 0%,
      transparent 18%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent) 12%, transparent) 0 18%,
      transparent 18% 100%
    ),
    var(--component-surface);
  --surface-gap: clamp(0.95rem, 1.9vw, 1.32rem);
}

:where(.site-frame[data-spw-role="schema"]) {
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent) 6%, transparent),
      transparent 32%
  ),
  var(--component-surface);
  --surface-gap: clamp(0.82rem, 1.6vw, 1.08rem);
}

:where(.site-frame[data-spw-role="gallery"]) {
  background: radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--component-accent) 8%, transparent),
      transparent 30%
  ),
  var(--component-surface);
}

:where(.site-frame[data-spw-role="broadcast"]) {
  background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent) 10%, transparent),
      transparent 28%
  ),
  var(--component-surface);
}


/* ==========================================================================
   14. Hero + heading thresholds
   ========================================================================== */

:where(.site-hero) {
  gap: var(--spw-hero-gap, clamp(1.1rem, 2vw, 1.5rem));
}

:where(.site-hero--split-figure) > :where([data-spw-slot="header"], [data-spw-slot="body"], [data-spw-slot="figure"], [data-spw-slot="actions"]) {
  min-width: 0;
}

:where(.site-hero--split-figure) {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  container-type: normal;
}

:where(.site-hero--split-figure) > [data-spw-slot="body"] {
  display: grid;
  gap: var(--spw-surface-gap, var(--space-md, 1rem));
  align-content: start;
}

:where(.site-hero--split-figure) > [data-spw-slot="figure"] {
  align-self: start;
}

@container (min-width: 70rem) {
  :where(.site-hero--split-figure) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap-inline-flow, var(--space-xs, 0.5rem)) var(--gap-block-flow, var(--space-lg, 1.5rem));
  }

  :where(.site-hero--split-figure) > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  :where(.site-hero--split-figure) > [data-spw-slot="header"] {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  :where(.site-hero--split-figure) > [data-spw-slot="body"] {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  :where(.site-hero--split-figure) > [data-spw-slot="figure"] {
    grid-column: 8 / -1;
    grid-row: 2;
    width: 100%;
  }

  :where(.site-hero--split-figure) > [data-spw-slot="actions"] {
    grid-column: 1 / span 7;
    grid-row: 3;
  }
}

/* ==========================================================================
   Context feedback (size + content tone) — Phase 1 of context-sensitive variants
   These attrs are written at runtime by the composition box model resolver.
   They let frames/cards feel their actual container situation and content pressure.
   Explicit author values win; the rules below are additive and safe.
   ========================================================================== */

:where(.site-frame[data-spw-size-context="narrow-hero"],
       .site-frame[data-spw-size-context="narrow-panel"]) {
  --surface-padding: clamp(0.7rem, 2.2vw, 1.05rem);
  --surface-gap: clamp(0.7rem, 1.6vw, 0.95rem);
}

:where(.site-frame[data-spw-content-tone="dense"],
       .site-frame[data-spw-content-tone="operator-heavy"]) {
  --surface-gap: calc(var(--surface-gap, 1rem) * 0.82);
}

:where(.site-frame[data-spw-content-tone="light"]) {
  --surface-gap: calc(var(--surface-gap, 1rem) * 1.15);
}


/* ==========================================================================
   15. Metamaterial selectors
   ========================================================================== */

:where([data-spw-metamaterial]) {
  --component-material-border: var(--component-border);
  --component-material-bg: var(--component-surface);
  --component-material-shadow: var(--component-shadow);

  background: var(--component-material-bg);
  border: var(--component-material-border);
  box-shadow: var(--component-material-shadow);
}

:where([data-spw-metamaterial="paper"]) {
  --component-material-bg: linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface, #fff) 96%, var(--component-accent-soft)) 0%,
      var(--surface, #fff) 100%
  );
  --component-material-border: 1px solid color-mix(in srgb, var(--line, transparent) 82%, var(--component-accent-soft));
}

:where([data-spw-metamaterial="ledger"]) {
  --component-material-bg: linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent) 6%, transparent) 0 1px,
      transparent 1px 100%
  ),
  var(--component-surface);
  --component-material-border: 1px solid color-mix(in srgb, var(--component-accent) 22%, var(--line, transparent));
}

:where([data-spw-metamaterial="signal"]) {
  --component-material-bg: linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent) 10%, transparent),
      transparent 30%
  ),
  var(--component-surface);
  --component-material-border: 1px solid color-mix(in srgb, var(--component-accent) 30%, var(--line, transparent));
}

:where([data-spw-metamaterial="field"]) {
  --component-material-bg: radial-gradient(
      circle at 12% 18%,
      color-mix(in srgb, var(--component-accent) 9%, transparent) 0%,
      transparent 34%
  ),
  var(--component-surface);
}

:where([data-spw-metamaterial="glass"]) {
  --component-material-bg: linear-gradient(
      180deg,
      color-mix(in srgb, #fff 14%, transparent) 0%,
      color-mix(in srgb, var(--component-surface) 92%, transparent) 100%
  );
  --component-material-border: 1px solid color-mix(in srgb, #fff 12%, var(--line, transparent));
}

:where([data-spw-metamaterial="shell"]) {
  --component-material-bg: linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent) 5%, transparent) 0%,
      transparent 48%
  ),
  var(--component-surface);
  --component-material-border: 1px solid color-mix(in srgb, var(--component-accent) 18%, var(--line, transparent));
}

/* ==========================================================================
   Hook region anatomy (volatile high-value entry peak)
   --------------------------------------------------------------------------
   A top-of-landing "call to wonder or action" — more charged and configurable
   than a standard frame. Lives at the head of vertical progression on routes
   like home, topics, about, services. Reuses existing tokens; feels like an
   amplified, operator-forward playable-hook with gesture affordance.
   See: .agents/plans/hook-region-anatomy/PLAN.md + page-model.spw
   ========================================================================== */

:where(
  .frame-body > [data-spw-kind="hook"]:first-child,
  .frame-body > [data-spw-component-kind="hook"]:first-child,
  .site-frame > [data-spw-kind="hook"]:first-child,
  .site-frame > [data-spw-component-kind="hook"]:first-child
) {
  margin-block-end: var(--component-gap-tight, 0.55rem);
}

:where(
  .frame-body [data-spw-kind="hook"],
  .frame-body [data-spw-component-kind="hook"],
  .site-frame [data-spw-kind="hook"]:not(.site-frame),
  .site-frame [data-spw-component-kind="hook"]:not(.site-frame)
) {
  scroll-margin-top: calc(var(--header-height, 4rem) + 0.75rem);
}

:where([data-spw-section-tier="hook"][data-spw-section-state="active"]) {
  outline: 1px solid color-mix(in srgb, var(--active-op-color, var(--component-accent)) 22%, transparent);
  outline-offset: 3px;
}

:where([data-spw-kind="hook"], [data-spw-component-kind="hook"]) {
  /* Slightly more charged than default frame for "volatile" entry presence */
  border-color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 38%, transparent);
  background: color-mix(
    in srgb,
    var(--component-surface) 93%,
    var(--active-op-color, var(--component-accent)) 7%
  );
  --surface-gap: 0.7rem;
  --surface-padding: clamp(0.85rem, 1.6vw, 1.2rem);
  box-shadow: var(--component-frame-shadow);

  /* Layout hygiene: proper containment when used as grid/flex child inside hero bodies or split layouts */
  min-width: 0;
  width: 100%;
}

/* Text fit inside hooks: ensure body paragraphs and direct content wrap well in narrow viewports or grid columns */
:where([data-spw-kind="hook"], [data-spw-component-kind="hook"]) > p,
:where([data-spw-kind="hook"], [data-spw-component-kind="hook"]) .frame-note,
:where([data-spw-kind="hook"], [data-spw-component-kind="hook"]) .page-lede {
  text-wrap: pretty;
  max-inline-size: 62ch;
}

/* When the hook carries a primary operator, surface it more strongly */
:where([data-spw-kind="hook"][data-spw-operator], [data-spw-component-kind="hook"][data-spw-operator]) {
  border-left-width: 3px;
  border-left-color: var(--active-op-color, var(--component-accent));
}

/* Variant flavors for different calls (wonder vs action vs operator-forward) */
:where([data-spw-kind="hook"][data-spw-hook-variant="wonder"], [data-spw-component-kind="hook"][data-spw-hook-variant="wonder"]) {
  background: color-mix(
    in srgb,
    var(--component-surface) 91%,
    var(--op-probe-color, var(--violet, #7c3aed)) 9%
  );
}

:where([data-spw-kind="hook"][data-spw-hook-variant="action"], [data-spw-component-kind="hook"][data-spw-hook-variant="action"]) {
  background: color-mix(
    in srgb,
    var(--component-surface) 92%,
    var(--op-action-color, var(--teal-dark)) 8%
  );
}

/* Gesture-ready state (pairs with brace-gestures armed/charging) */
:where([data-spw-kind="hook"][data-spw-gesture="armed"], [data-spw-component-kind="hook"][data-spw-gesture="armed"]) {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--active-op-color, var(--component-accent)) 55%, transparent);
}

:where([data-spw-kind="hook"], [data-spw-component-kind="hook"]) :where(.spw-playable-hook, [data-spw-semantic-expression]) {
  /* Hooks often contain or are the memorable playable line.
     Slightly tighter than base playable-hook for call-to-action density, but respects parent grid constraints. */
  font-weight: 600;
  max-inline-size: min(58ch, 100%);
  text-wrap: balance;
}

/* (numericity now lives inside the real cauldron as typed ingredients with derived quantifiers — see composition.js) */
}

/* /public/css/components/content.css */
@layer components {
/* ==========================================================================
   components/content.css
   --------------------------------------------------------------------------
   Content utilities: meaningful cards, grouping grids, references, chips, notes, lists, and media figures.
   ========================================================================== */

/* ==========================================================================
   17. Meaningful card utilities
   ========================================================================== */

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-density="soft"] {
  --component-pad: 1rem;
  --component-gap-tight: 0.65rem;
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-density="dense"] {
  --component-pad: 0.75rem;
  --component-gap-tight: 0.4rem;
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-density="roomy"] {
  --component-pad: 1.2rem;
  --component-gap-tight: 0.8rem;
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-reading="measure"] {
  max-inline-size: min(100%, var(--component-measure));
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-reading="code"] {
  max-inline-size: min(100%, var(--component-code-measure));
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-reading="ambient"] {
  color: color-mix(in srgb, var(--ink, currentColor) 94%, transparent);
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-attention="focused"] {
  border-color: color-mix(in srgb, var(--component-accent) 34%, var(--line, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent) 18%, transparent),
  var(--component-shadow);
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column, .ref-card)[data-spw-attention="held"] {
  border-color: color-mix(in srgb, var(--component-accent) 44%, var(--line, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent) 24%, transparent),
  var(--component-shadow-active);
}


/* ==========================================================================
   18. Grouping and grid helpers
   ========================================================================== */

:where(
  .frame-grid,
  .plans-grid,
  .contact-grid,
  .gallery-overlays,
  .compare-sets,
  .spec-grid,
  .directory-grid,
  .ref-grid,
  .settings-state-grid,
  .settings-navigator-grid,
  .settings-structures-grid,
  .settings-quickstart-grid,
  .vibe-widget-grid,
  .spw-principle-grid,
  .pwa-status-grid
) {
  --spw-grid-min-base: 18rem;
  --spw-grid-min-mid: 16.5rem;
  --spw-grid-min-narrow: 14.5rem;
  --spw-grid-min-compact: 12.5rem;
  --spw-grid-gap-base: var(--component-gap);
  --spw-grid-gap-mid: 0.84rem;
  --spw-grid-gap-narrow: 0.74rem;
  --spw-grid-gap-compact: 0.66rem;
  --spw-grid-min-active: var(--spw-grid-min-base);
  --spw-grid-gap-active: var(--spw-grid-gap-base);

  display: grid;
  gap: var(--spw-grid-gap-active);
  align-items: stretch;
  min-width: 0;
}

:where(
  .frame-grid,
  .contact-grid,
  .gallery-overlays,
  .compare-sets,
  .spec-grid,
  .directory-grid,
  .ref-grid,
  .settings-state-grid,
  .settings-navigator-grid,
  .settings-structures-grid,
  .settings-quickstart-grid,
  .vibe-widget-grid,
  .spw-principle-grid,
  .pwa-status-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spw-grid-min-active)), 1fr));
}

:where(.plans-grid) {
  grid-template-columns: 1fr;
}

:where(.ref-grid) {
  --spw-grid-min-base: 17rem;
  --spw-grid-min-mid: 16rem;
  --spw-grid-min-narrow: 14.5rem;
  --spw-grid-min-compact: 12.75rem;
}

:where(.frame-grid--dense, .ref-grid--dense),
:where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid, .ref-grid)[data-spw-density="dense"] {
  --spw-grid-min-base: 17.5rem;
  --spw-grid-min-mid: 15.75rem;
  --spw-grid-min-narrow: 13.25rem;
  --spw-grid-min-compact: 11.5rem;
  --spw-grid-gap-base: 0.72rem;
  --spw-grid-gap-mid: 0.68rem;
  --spw-grid-gap-narrow: 0.62rem;
  --spw-grid-gap-compact: 0.56rem;
}

:where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid, .ref-grid)[data-spw-density="soft"] {
  --spw-grid-min-base: 15.5rem;
  --spw-grid-min-mid: 15rem;
  --spw-grid-min-narrow: 14rem;
  --spw-grid-min-compact: 12.5rem;
  --spw-grid-gap-base: 0.88rem;
  --spw-grid-gap-mid: 0.82rem;
  --spw-grid-gap-narrow: 0.76rem;
  --spw-grid-gap-compact: 0.68rem;
}

:where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid, .ref-grid)[data-spw-density="roomy"] {
  --spw-grid-min-base: 17rem;
  --spw-grid-min-mid: 16.25rem;
  --spw-grid-min-narrow: 15rem;
  --spw-grid-min-compact: 13rem;
  --spw-grid-gap-base: 1rem;
  --spw-grid-gap-mid: 0.92rem;
  --spw-grid-gap-narrow: 0.82rem;
  --spw-grid-gap-compact: 0.72rem;
}

:where(.frame-grid--media) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

:where(.frame-grid--2up) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.frame-grid--3up) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 64rem) {
  :where(.frame-grid--2up, .frame-grid--3up) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spw-grid-min-active)), 1fr));
  }
}

html[data-spw-viewport-tier="mid"] :where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid, .ref-grid, .spw-principle-grid) {
  --spw-grid-min-active: var(--spw-grid-min-mid);
  --spw-grid-gap-active: var(--spw-grid-gap-mid);
}

html[data-spw-viewport-tier="narrow"] :where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid, .ref-grid, .spw-principle-grid) {
  --spw-grid-min-active: var(--spw-grid-min-narrow);
  --spw-grid-gap-active: var(--spw-grid-gap-narrow);
}

html[data-spw-viewport-tier="compact"] :where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid, .ref-grid, .spw-principle-grid) {
  --spw-grid-min-active: var(--spw-grid-min-compact);
  --spw-grid-gap-active: var(--spw-grid-gap-compact);
}

:where(.frame-actions > :is(.frame-grid, .spec-grid, .directory-grid, .ref-grid, .spw-principle-grid)) {
  flex: 1 1 100%;
  width: 100%;
}

/* Composition flow: wire authored layout intent without duplicating grid class lists. */
:where([data-spw-composition-flow="grid"]:not(
  .frame-grid,
  .plans-grid,
  .contact-grid,
  .gallery-overlays,
  .compare-sets,
  .spec-grid,
  .directory-grid,
  .ref-grid,
  .settings-state-grid,
  .settings-navigator-grid,
  .settings-structures-grid,
  .settings-quickstart-grid,
  .vibe-widget-grid,
  .spw-principle-grid,
  .pwa-status-grid,
  .spw-amount-grid,
  .spw-character-card-grid,
  .spw-wisdom-deck,
  .spw-reason-strip,
  .spw-role-hooks,
  .spw-route-bridge__links,
  .spw-resonance-lab,
  .spw-learning-game,
  .spw-semantic-emphasis-map
)) {
  display: grid;
  gap: var(--spw-grid-gap-active, var(--component-gap));
  align-items: stretch;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spw-grid-min-active, 15rem)), 1fr));
}

:where([data-spw-composition-flow="stack"]:not(
  .spw-narration,
  .spw-route-bridge,
  .spw-settings-cluster,
  .settings-form
)) {
  display: grid;
  gap: var(--component-gap-tight, 0.45rem);
  align-content: start;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

:where([data-spw-composition-flow="inline-wrap"]:not(.spw-copy-motif-strip)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spw-list-charge-gap, 0.38rem);
  min-width: 0;
}

/* Opportunistic packing: auto-fill keeps spare tracks; dense back-fills span gaps. */
:where(
  .frame-grid[data-spw-pack~="fill"],
  [data-spw-composition-flow="grid"][data-spw-pack~="fill"]
) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--spw-grid-min-active, 15rem)), 1fr));
}

:where(
  .frame-grid[data-spw-pack~="dense"],
  [data-spw-composition-flow="grid"][data-spw-pack~="dense"]
) {
  grid-auto-flow: row dense;
}

:where(
  .frame-grid > [data-spw-pack-span],
  [data-spw-composition-flow="grid"] > [data-spw-pack-span]
) {
  min-width: 0;
}

:where(
  .frame-grid > [data-spw-pack-span="2"],
  [data-spw-composition-flow="grid"] > [data-spw-pack-span="2"]
) {
  grid-column: span 2;
}

:where(
  .frame-grid > [data-spw-pack-span="full"],
  [data-spw-composition-flow="grid"] > [data-spw-pack-span="full"]
) {
  grid-column: 1 / -1;
}

@media (max-width: 48rem) {
  :where(
    .frame-grid > [data-spw-pack-span="2"],
    [data-spw-composition-flow="grid"] > [data-spw-pack-span="2"]
  ) {
    grid-column: span 1;
  }
}

/* Box-model grid profiles: content-specific minimums and gaps. */
:where([data-spw-box-model="entry-card-grid"]) {
  --spw-grid-min-base: 17.25rem;
  --spw-grid-min-mid: 16.5rem;
  --spw-grid-min-narrow: 15rem;
  --spw-grid-min-compact: 13.25rem;
  --spw-grid-gap-base: 0.78rem;
}

:where([data-spw-box-model="role-hook-grid"]) {
  --spw-role-hook-min: 14.25rem;
}

:where(.spw-role-hooks[data-spw-box-model="role-hook-grid"]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spw-role-hook-min)), 1fr));
}

:where(.spw-role-hooks[data-spw-pack~="fill"]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--spw-role-hook-min, 14.25rem)), 1fr));
}

:where([data-spw-box-model="route-choice-field"]) {
  --spw-route-choice-min: 12.75rem;
}

:where(.spw-route-bridge__links[data-spw-box-model="route-choice-field"]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--spw-route-choice-min)), 1fr));
}

:where([data-spw-box-model="concept-details-grid"]) {
  --spw-grid-min-base: 15.75rem;
  --spw-grid-min-mid: 15rem;
  --spw-grid-min-narrow: 14rem;
  --spw-grid-min-compact: 12.75rem;
}

:where([data-spw-box-model="wisdom-deck"]) {
  --spw-wisdom-deck-min: 13.25rem;
}

:where(.spw-wisdom-deck[data-spw-box-model="wisdom-deck"]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--spw-wisdom-deck-min)), 1fr));
}

/* Tighter mobile behavior for dense illustrated card grids (e.g. "Three good first loops") */
@media (max-width: 640px) {
  :where(.frame-grid--dense) {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  :where(.frame-card--illustrated .frame-card-media) {
    margin: calc(var(--component-pad) * -0.75);
    margin-bottom: 0.35rem;
  }

  :where(#entry-loops .frame-card--illustrated .frame-card-media) {
    position: relative;
    max-block-size: 8rem;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 72%, transparent);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent), transparent 62%),
      color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  }

  :where(#entry-loops .frame-card--illustrated .frame-card-media)::before {
    content: "route card";
    position: absolute;
    inset: 0.55rem auto auto 0.6rem;
    z-index: 1;
    padding: 0.12rem 0.36rem;
    border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 72%, transparent);
    border-radius: var(--shape-control, 0.78rem);
    background: color-mix(in srgb, var(--surface-strong, #fff) 86%, transparent);
    color: var(--ink-muted, rgba(14,18,20,0.58));
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  :where(#entry-loops .frame-card--illustrated .frame-card-media img) {
    block-size: 8rem;
    object-fit: cover;
  }
}

:where(.frame-grid > li, .contact-grid > li, .compare-sets > li, .spec-grid > li, .directory-grid > li, .ref-grid > li) {
  display: grid;
  min-width: 0;
}

:where(.frame-grid > *, .contact-grid > *, .compare-sets > *, .spec-grid > *, .directory-grid > *, .ref-grid > *) {
  min-width: 0;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .frame-panel,
  .mode-panel,
  .site-frame
) :is(code, kbd, samp) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .compare-card,
  .spec-column,
  .ref-card,
  .frame-panel,
  .mode-panel,
  .site-frame
) :is(pre, .frame-code-enrichment, .demo-code-output) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

/* Responsive comparison bases: tables stay semantic on desktop and become readable
   stacked cards on narrow screens when cells provide data-spw-label. */
:where([data-spw-table="responsive-comparison"]) {
  display: table;
  inline-size: 100%;
  overflow: visible;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 100%, transparent);
  border-radius: var(--component-radius-loose, 1rem);
  background: color-mix(in srgb, var(--component-surface-strong, #fff) 94%, var(--active-op-color, #1a9999) 3%);
  box-shadow: var(--component-shadow-quiet, none);
}

:where([data-spw-table="responsive-comparison"] caption) {
  caption-side: top;
  padding-block: 0 0.55rem;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  font-size: var(--text-size-sm, 0.92rem);
  line-height: 1.45;
  text-align: left;
}

:where([data-spw-table="responsive-comparison"] :is(th, td)) {
  padding: 0.68rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
}

:where([data-spw-table="responsive-comparison"] th) {
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--active-op-color, #1a9999) 18%);
  font-size: var(--text-size-sm, 0.92rem);
}

:where([data-spw-table="responsive-comparison"] tbody tr:last-child :is(th, td)) {
  border-bottom: 0;
}

:where(.spw-amount-grid) {
  --spw-amount-accent: var(--op-object-color, var(--active-op-color, #a67c00));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--component-gap-tight, 0.65rem);
  margin-block: var(--component-gap, 1rem);
}

:where(.spw-amount-card) {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.78rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--spw-amount-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose, 1rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spw-amount-accent) 7%, transparent), transparent 56%),
    color-mix(in srgb, var(--component-surface-soft, #fff) 91%, var(--spw-amount-accent) 4%);
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
}

:where(.spw-amount-card)::before {
  content: attr(data-spw-lens);
  justify-self: start;
  max-inline-size: 100%;
  padding: 0.08rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--spw-amount-accent) 18%, transparent);
  border-radius: var(--component-radius-pill, 999px);
  color: color-mix(in srgb, var(--ink-soft, #555) 76%, var(--spw-amount-accent) 24%);
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.spw-amount-card strong) {
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-amount-accent) 18%);
  line-height: 1.18;
}

:where(.spw-amount-card p) {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  font-size: var(--text-size-sm, 0.92rem);
  line-height: 1.38;
}

:where([data-spw-ingredient-lab]) {
  --spw-ingredient-lab-accent: var(--op-object-color, var(--active-op-color, #a67c00));
  container-type: inline-size;
}

:where(.spw-ingredient-lenses) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block: 0.35rem 0.75rem;
}

:where([data-spw-ingredient-lab][data-spw-ingredient-mode="shop"] [data-spw-lens~="scene"]),
:where([data-spw-ingredient-lab][data-spw-ingredient-mode="scene"] [data-spw-lens~="shop"]) {
  opacity: 0.64;
}

:where([data-spw-list-timing]) > * {
  --spw-list-step-index: 0;
}

:where([data-spw-list-timing="stagger"]) > * {
  transform: translateY(0);
  transition:
    transform var(--component-transition-base, 180ms ease),
    border-color var(--component-transition-base, 180ms ease),
    background var(--component-transition-base, 180ms ease),
    opacity var(--component-transition-base, 180ms ease);
  transition-delay: calc(var(--spw-list-step-index, 0) * 28ms);
}

:where([data-spw-list-timing="stagger"]:is(:hover, :focus-within)) > * {
  transform: translateY(calc(var(--spw-list-step-index, 0) * -0.04rem));
}

:where([data-spw-list-timing="stagger"]) > :nth-child(1) { --spw-list-step-index: 1; }
:where([data-spw-list-timing="stagger"]) > :nth-child(2) { --spw-list-step-index: 2; }
:where([data-spw-list-timing="stagger"]) > :nth-child(3) { --spw-list-step-index: 3; }
:where([data-spw-list-timing="stagger"]) > :nth-child(4) { --spw-list-step-index: 4; }
:where([data-spw-list-timing="stagger"]) > :nth-child(5) { --spw-list-step-index: 5; }
:where([data-spw-list-timing="stagger"]) > :nth-child(6) { --spw-list-step-index: 6; }
:where([data-spw-list-timing="stagger"]) > :nth-child(n + 7) { --spw-list-step-index: 7; }

@container (min-width: 46rem) {
  :where([data-spw-ingredient-lab] .spw-amount-grid) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  :where([data-spw-table="responsive-comparison"]) {
    display: block;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  :where([data-spw-table="responsive-comparison"] thead) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  :where([data-spw-table="responsive-comparison"] :is(tbody, tr, th, td)) {
    display: block;
  }

  :where([data-spw-table="responsive-comparison"] tr) {
    margin-block: 0 0.68rem;
    padding: 0.68rem;
    border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 100%, transparent);
    border-radius: var(--component-radius-loose, 1rem);
    background: color-mix(in srgb, var(--component-surface-soft, #fff) 92%, var(--active-op-color, #1a9999) 4%);
  }

  :where([data-spw-table="responsive-comparison"] :is(th, td)) {
    padding: 0.42rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 70%, transparent);
  }

  :where([data-spw-table="responsive-comparison"] tr > :last-child) {
    border-bottom: 0;
  }

  :where([data-spw-table="responsive-comparison"] td[data-spw-label])::before {
    content: attr(data-spw-label);
    display: block;
    margin-block-end: 0.08rem;
    color: color-mix(in srgb, var(--ink, #111) 74%, var(--active-op-color, #1a9999) 26%);
    font-size: var(--text-size-2xs, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-spw-list-timing="stagger"]) > * {
    transition-delay: 0ms;
    transform: none;
  }
}

:where(.spw-character-card-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--component-gap-tight, 0.65rem);
  margin-block: var(--component-gap, 1rem) 0;
}

:where(.spw-character-prompt-card) {
  --spw-character-card-accent: var(--op-probe-color, var(--active-op-color, #7f5bbd));
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 1fr);
  gap: var(--component-gap-tight, 0.65rem);
  min-width: 0;
  padding: clamp(0.78rem, 2vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--spw-character-card-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--component-radius-loose, 1rem);
  background:
    radial-gradient(
      circle at 16% 18%,
      color-mix(in srgb, var(--spw-character-card-accent) 12%, transparent),
      transparent 38%
    ),
    color-mix(in srgb, var(--component-surface-strong, #fff) 93%, var(--spw-character-card-accent) 4%);
  box-shadow: var(--component-shadow-quiet, none);
}

:where(.spw-character-art-slot) {
  display: grid;
  place-items: center;
  min-block-size: clamp(7rem, 22vw, 10rem);
  border: 1px dashed color-mix(in srgb, var(--spw-character-card-accent) 28%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: calc(var(--component-radius-loose, 1rem) * 0.85);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--spw-character-card-accent) 8%, transparent), transparent),
    color-mix(in srgb, var(--component-surface-soft, #fff) 88%, var(--spw-character-card-accent) 4%);
  color: color-mix(in srgb, var(--ink-soft, #555) 72%, var(--spw-character-card-accent) 28%);
  font-family: var(--site-mono-font, monospace);
  font-size: var(--text-size-xs, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.spw-character-prompt-card strong) {
  display: block;
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-character-card-accent) 18%);
  line-height: 1.2;
}

:where(.spw-character-prompt-card p) {
  margin-block: 0.35rem 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.62));
  line-height: 1.45;
}

@media (max-width: 36rem) {
  :where(.spw-character-prompt-card) {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   19. Reference cards
   ========================================================================== */

:where(.ref-card) {
  gap: var(--component-gap-tight, 0.45rem);
}

:where(.ref-card-sigil) {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-sm, 0.92rem);
  color: var(--component-accent);
}

:where(.ref-terms) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  list-style: none;
  padding: 0;
  margin: 0.45rem 0 0;
}

:where(.ref-terms li) {
  padding: 0.12rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--component-accent) 18%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--shape-control, 999px);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.2;
  color: color-mix(in srgb, var(--component-accent) 78%, var(--ink, rgba(14, 18, 20, 0.92)) 22%);
}


/* ==========================================================================
   20. Chips, badges, metadata
   ========================================================================== */

:where(.operator-chip, .spec-pill, .spw-component-tag, .media-card-tag, .plan-status) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  min-height: var(--component-chip-height);
  padding: 0.18rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--component-accent) 18%, var(--line, transparent));
  border-radius: var(--component-radius-pill);
  background: color-mix(in srgb, var(--component-accent) 7%, var(--component-surface-strong));
  color: color-mix(in srgb, var(--component-accent) 68%, var(--ink, currentColor));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-xs, 0.78rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--component-transition-fast),
  border-color var(--component-transition-fast),
  color var(--component-transition-fast),
  transform var(--component-transition-fast),
  box-shadow var(--component-transition-fast);
}

:where(.operator-chip:is(:hover, :focus-visible), a.spec-pill:is(:hover, :focus-visible)) {
  border-color: color-mix(in srgb, var(--component-accent) 34%, transparent);
  background: color-mix(in srgb, var(--component-accent) 11%, var(--component-surface-strong));
  color: color-mix(in srgb, var(--component-accent) 84%, var(--ink, currentColor));
  transform: translateY(-1px);
  text-decoration: none;
}

:where(.operator-chip[aria-pressed="true"], .operator-chip[data-site-setting-active="true"]) {
  border-color: color-mix(in srgb, var(--component-accent) 44%, transparent);
  background: color-mix(in srgb, var(--component-accent) 14%, var(--component-surface-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent) 16%, transparent);
}

:where(.spec-strip) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
}

:where(.spw-component-meta, .spw-component-guides) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
  min-width: 0;
  color: var(--semantic-metadata-ink, var(--ink-soft));
  font-size: var(--semantic-metadata-font-size, 0.62rem);
  letter-spacing: var(--semantic-metadata-tracking, 0.04em);
}


/* ==========================================================================
   21. Notes, prose helpers, lists
   ========================================================================== */

:where(.frame-note, .inline-note, .settings-note, .settings-start-note) {
  max-inline-size: var(--component-measure);
  color: var(--ink-mid, rgba(14, 18, 20, 0.68));
  line-height: 1.58;
  text-wrap: pretty;
}

:where(.frame-copy) {
  max-inline-size: var(--component-measure-wide);
  line-height: 1.62;
  text-wrap: pretty;
}

:where(.frame-list) {
  display: grid;
  gap: 0.38rem;
  padding-inline-start: 1.1rem;
  margin-block: 0.4rem 0;
}

:where(.frame-list li) {
  max-inline-size: 68ch;
  line-height: 1.5;
}

/* Portable literary surfaces. Safe to copy into a rogue page or generator
   output when the stylesheet itself needs to read like an annotated text. */
:where(.spw-literary-note, [data-spw-textual-role="note"]) {
  max-inline-size: var(--component-measure);
  line-height: 1.68;
  text-wrap: pretty;
  color: var(--ink-mid, rgba(14, 18, 20, 0.68));
}

:where(.spw-literary-verse, .spw-literary-stanza, [data-spw-textual-role="verse"]) {
  display: block;
  padding: 0.9rem 1rem;
  border-inline-start: var(--boundary-rail-width-strong) solid color-mix(in srgb, var(--component-accent) 34%, transparent);
  border-radius: var(--component-radius-tight);
  background: color-mix(in srgb, var(--component-surface-strong) 94%, transparent);
  color: color-mix(in srgb, var(--ink, currentColor) 92%, var(--component-accent) 8%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  line-height: 1.62;
  text-wrap: pretty;
  white-space: pre-wrap;
}

:where(.spw-literary-verse code, .spw-literary-stanza code) {
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}

:where(.spw-literary-chapter, [data-spw-textual-role="chapter"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--component-text-soft);
  font-size: var(--text-size-2xs, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.spw-narration, [data-spw-textual-role="narration"]) {
  display: grid;
  gap: 0.45rem;
  max-inline-size: var(--component-measure-wide);
  padding: 0.95rem 1rem 1rem;
  border-inline-start: var(--boundary-rail-width-strong) solid color-mix(in srgb, var(--component-accent) 30%, transparent);
  border-radius: var(--component-radius-loose);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--component-surface-strong) 98%, transparent), color-mix(in srgb, var(--component-surface-strong) 94%, transparent)),
    var(--component-surface);
  box-shadow: var(--component-shadow-quiet);
}

:where(.spw-narration__cue, [data-spw-textual-role="cue"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--component-route-marker-text);
  font-size: var(--text-size-2xs, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.spw-narration__text, .spw-cold-read, [data-spw-textual-role="narration-text"], [data-spw-textual-role="aside"]) {
  margin: 0;
  max-inline-size: var(--component-measure-wide);
  line-height: 1.68;
  text-wrap: pretty;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

:where(.spw-narration__text strong, .spw-cold-read strong, [data-spw-textual-role="narration-text"] strong, [data-spw-textual-role="aside"] strong) {
  color: var(--component-accent);
  font-weight: 700;
}

:where(.spw-narration__text em, .spw-cold-read em, [data-spw-textual-role="narration-text"] em, [data-spw-textual-role="aside"] em) {
  color: color-mix(in srgb, var(--ink, currentColor) 80%, var(--component-accent) 20%);
}


/* ==========================================================================
   22. Media cards and figures
   ========================================================================== */

:where(.frame-card-media, .media-card figure, .media-focus-card figure, .image-study, .topic-photo-card) {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  overflow: clip;
  border-radius: var(--component-radius-tight);
}

:where(.frame-card-media img, .media-card img, .media-focus-card img, .image-study img, .topic-photo-card img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}

:where(.frame-card--illustrated .frame-card-media) {
  margin: calc(var(--component-pad) * -1);
  margin-bottom: 0.2rem;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

:where(figcaption, .media-card-caption) {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-sm, 0.88rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Tighter, more balanced spacing for long narration / "Current Direction" style blocks on desktop */
:where(.spw-narration, [data-spw-box-model="narration-card"]) {
  max-inline-size: 72ch;
}

@media (min-width: 900px) {
  :where(.spw-narration, [data-spw-box-model="narration-card"]) {
    max-inline-size: 68ch;
  }
}

:where([data-spw-image-reward], [data-spw-image-discovery]) {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surface-strong, #fff) 72%, transparent),
    0 0.6rem 1.6rem color-mix(in srgb, var(--shadow-color, #111) 8%, transparent);
}

:where([data-spw-image-reward], [data-spw-image-discovery])::after {
  content: "? image seed";
  position: absolute;
  z-index: 2;
  inset: 0.55rem 0.55rem auto auto;
  max-inline-size: calc(100% - 1.1rem);
  padding: 0.22rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 24%, transparent);
  border-radius: var(--shape-micro, 4px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent);
  color: var(--ink, currentColor);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}

:where([data-spw-image-reward][data-spw-discovery-motion], [data-spw-image-discovery][data-spw-discovery-motion])::after {
  content: "? " attr(data-spw-discovery-motion);
}

:where([data-spw-image-reward][data-spw-image-discovered="true"], [data-spw-image-discovery][data-spw-image-discovered="true"])::after {
  content: "* discovered";
}
}

/* /public/css/components/controls.css */
@layer components {
/* ==========================================================================
   components/controls.css
   --------------------------------------------------------------------------
   Interactive component families for settings controls, vibe widgets, and local note surfaces.
   ========================================================================== */

/* ==========================================================================
   23. Settings components
   ========================================================================== */

:where(.settings-form) {
  display: grid;
  gap: var(--component-gap);
}

:where(.settings-category) {
  border: var(--component-border);
  border-radius: var(--component-radius);
  background: var(--component-surface-soft);
  overflow: clip;

  &[open] > .settings-category-header {
    border-bottom: 1px solid color-mix(in srgb, var(--component-accent) 16%, transparent);
  }
}

:where(.settings-category-header) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: var(--component-pad-tight) var(--component-pad);
  cursor: pointer;
  font-weight: 750;
  color: var(--ink, currentColor);
}

:where(.settings-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--component-gap);
  padding: var(--component-pad);
}

:where(.settings-fieldset) {
  display: grid;
  gap: 0.52rem;
  min-width: 0;
  padding: var(--component-pad);
  border: var(--component-border-quiet);
  border-radius: var(--component-radius-tight);
  background: color-mix(in srgb, var(--component-surface-strong) 82%, transparent);

  & legend {
    padding-inline: 0.24rem;
    font-weight: 750;
    color: var(--ink, currentColor);
  }
}

:where(.settings-option) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid transparent;
  border-radius: var(--component-radius-tight);
  cursor: pointer;

  &:is(:hover, :focus-within) {
    border-color: color-mix(in srgb, var(--component-accent) 18%, transparent);
    background: color-mix(in srgb, var(--component-accent) 5%, transparent);
  }

  & input {
    margin-block-start: 0.14rem;
  }
}

:where(.settings-option-copy) {
  display: grid;
  gap: 0.18rem;
  min-width: 0;

  & strong {
    line-height: 1.2;
  }
}

:where(.settings-option-copy span, .settings-option-hint) {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-sm, 0.88rem);
  line-height: 1.42;
}

:where(.settings-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding-top: var(--component-gap-tight);
}

:where(.settings-status) {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-sm, 0.88rem);

  &[data-status="success"] {
    color: var(--valence-pos, hsl(160 45% 34%));
  }

  &[data-status="error"] {
    color: var(--valence-neg, hsl(8 54% 42%));
  }
}

:where(.settings-presets) {
  display: grid;
  gap: 0.55rem;
}

:where(.settings-preset-btn) {
  text-align: left;
  cursor: pointer;
  appearance: none;

  & strong {
    display: block;
  }

  & span {
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: var(--text-size-sm, 0.88rem);
    line-height: 1.42;
  }

  &:is([data-site-setting-active="true"], [data-preset-active="exact"]) {
    border-color: color-mix(in srgb, var(--component-accent) 42%, transparent);
    background: color-mix(in srgb, var(--component-accent) 9%, var(--component-surface-strong));
  }
}

:where(.settings-shortcuts) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.72rem;
}

:where(.settings-shortcut-card) {
  display: grid;
  gap: 0.28rem;
  padding: var(--component-pad);
  border: var(--component-border);
  border-radius: var(--component-radius-tight);
  background: var(--component-surface-soft);
  color: inherit;
  text-decoration: none;

  &:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--component-accent) 30%, transparent);
    background: color-mix(in srgb, var(--component-accent) 6%, var(--component-surface-strong));
    text-decoration: none;
  }
}

:where(.settings-shortcut-kicker, .settings-state-label, .vibe-widget-kicker) {
  color: var(--ink-faint, rgba(14, 18, 20, 0.42));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-2xs, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.settings-state-card strong) {
  font-size: var(--text-size-lg, 1.1rem);
  line-height: 1.2;
}

:where(.settings-nav-card, .settings-structure-card, .settings-map-card) {
  gap: 0.55rem;

  & code {
    width: fit-content;
  }
}


/* ==========================================================================
   24. Vibe widgets and local note surfaces
   ========================================================================== */

:where(.vibe-widget) {
  gap: var(--component-gap-tight);
}

:where(.vibe-widget-header) {
  display: grid;
  gap: 0.28rem;
}

:where(.vibe-widget-title) {
  margin: 0;
}

:where(.vibe-widget-copy) {
  color: var(--ink-mid, rgba(14, 18, 20, 0.68));
  line-height: 1.5;
  margin: 0;
}

:where(.vibe-widget-actions, .vibe-widget-meta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

:where(.site-deviation-surface, .settings-note-list) {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

:where(.site-deviation-list) {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.site-deviation-item) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.45rem;
  border: var(--component-border-quiet);
  border-radius: var(--component-radius-tight);
  background: color-mix(in srgb, var(--component-surface-strong) 72%, transparent);
}

:where(.site-deviation-reset) {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--component-accent) 20%, transparent);
  border-radius: var(--component-radius-pill);
  background: transparent;
  color: var(--component-accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.12rem 0.46rem;
}

:where(.settings-note-form) {
  display: grid;
  gap: 0.55rem;

  & .settings-note-form__label {
    font-weight: 700;
  }

  & .settings-note-form__input {
    width: 100%;
    min-height: 8rem;
    resize: vertical;
    padding: var(--component-pad-tight);
    border: var(--component-border);
    border-radius: var(--component-radius-tight);
    background: var(--component-surface-strong);
    color: var(--ink, currentColor);
    font: inherit;
    line-height: 1.5;
  }
}

:where(.settings-note-form__actions, .settings-note-form__meta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* ==========================================================================
   JSON hydration and skeleton projection
   ========================================================================== */

:where([data-spw-hydration="loading"]) {
  position: relative;
  min-height: 2.4rem;
  overflow: clip;
}

:where([data-spw-hydration="loading"])::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--component-accent, var(--ink, currentColor)) 8%, transparent) 42%,
    transparent 84%
  );
  background-size: 220% 100%;
  animation: spw-hydration-shimmer var(--spw-hydration-shimmer-duration, 1.1s) var(--ease-reveal, ease-in-out) infinite;
}

:where([data-spw-hydration="loading"]) :where(.spw-skeleton) {
  opacity: var(--spw-settle-opacity-mid, 0.985);
}

:where([data-spw-hydration="ready"]) {
  animation: spw-hydration-settle var(--spw-component-settle-transition, 260ms ease-out) both;
}

:where([data-spw-hydration="error"]) {
  position: relative;
  padding-inline-start: 1.35rem;
  color: color-mix(in srgb, var(--danger, #9d2f2f) 72%, var(--ink, currentColor));
  transition:
    color var(--component-transition-base),
    opacity var(--component-transition-base);
}

:where([data-spw-hydration="error"])::before {
  content: "!";
  position: absolute;
  inset-inline-start: 0;
  top: 0.08rem;
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  color: var(--danger, #9d2f2f);
  background: color-mix(in srgb, var(--danger, #9d2f2f) 12%, transparent);
}

:where(.spw-skeleton) {
  display: block;
  border-radius: var(--component-radius-tight, 0.45rem);
  background: color-mix(in srgb, var(--component-accent, var(--ink, currentColor)) 10%, transparent);
}

:where(.spw-skeleton[data-spw-skeleton-role="heading"]) {
  width: min(72%, 18rem);
  height: 1.1rem;
}

:where(.spw-skeleton[data-spw-skeleton-role="line"]) {
  width: 100%;
  height: 0.82rem;
}

:where(.spw-skeleton[data-spw-skeleton-role="card"]) {
  width: 100%;
  min-height: 5.5rem;
}

@keyframes spw-hydration-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes spw-hydration-settle {
  from {
    opacity: 0.72;
    transform: translateY(var(--spw-settle-offset-mid, 1px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-spw-hydration="loading"])::after,
  :where([data-spw-hydration="ready"]) {
    animation: none;
    transform: none;
  }
}
}

/* /public/css/components/shell-controls.css */
@layer components {
/* ==========================================================================
   components/shell-controls.css
   --------------------------------------------------------------------------
   Shell header tune dial, utility clusters, and quick-display control grammar.
   Placement and grid ownership stay in shell/chrome.css.
   ========================================================================== */

.spw-shell-tools-disclosure {
  position: relative;
  display: none;
  min-width: 0;
  max-inline-size: 100%;
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 10%, var(--line, rgba(14,18,20,0.14)) 90%);
  border-radius: var(--shape-control, 0.78rem);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 94%, var(--spw-shell-chrome-accent-local) 6%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 1px 4px rgba(14, 18, 20, 0.035);
  overflow: visible;
}

.spw-shell-tools-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-block-size: max(2rem, var(--spw-control-min-height, 2.15rem));
  padding: 0.24rem 0.58rem 0.24rem 0.42rem;
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 78%, var(--spw-shell-chrome-accent-local) 22%);
  cursor: pointer;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--text-size-label, 0.76rem);
  font-weight: 680;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
  touch-action: manipulation;
  user-select: none;
}

.spw-shell-tools-summary__knob {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 1.42rem;
  block-size: 1.42rem;
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 22%, var(--line, rgba(14,18,20,0.14)) 78%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 58%),
    conic-gradient(
      from 210deg,
      color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, transparent),
      color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 88%, var(--spw-shell-chrome-accent-local) 12%) 42%,
      color-mix(in oklab, var(--spw-shell-chrome-accent-local) 24%, transparent)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 1px 3px rgba(14, 18, 20, 0.05);
  transition:
    transform 180ms var(--shell-settle-ease),
    border-color 140ms var(--shell-ease),
    box-shadow 160ms var(--shell-settle-ease);
}

.spw-shell-tools-summary__knob-glyph {
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 72%, var(--spw-shell-chrome-accent-local) 28%);
}

.spw-shell-tools-disclosure:is(:hover, :focus-within) .spw-shell-tools-summary__knob,
.spw-shell-tools-disclosure[open] .spw-shell-tools-summary__knob {
  transform: rotate(18deg);
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 10%, transparent),
    0 2px 6px rgba(14, 18, 20, 0.06);
}

.spw-shell-tools-disclosure[open] .spw-shell-tools-summary__knob {
  transform: rotate(132deg);
}

.spw-shell-tools-summary::-webkit-details-marker {
  display: none;
}

.spw-shell-tools-summary::after {
  content: "";
  inline-size: 0.46rem;
  block-size: 0.46rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  opacity: 0.72;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform 140ms var(--shell-ease);
}

.spw-shell-tools-disclosure[open] > .spw-shell-tools-summary::after {
  transform: translateY(0.08rem) rotate(225deg);
}

.spw-shell-tools-disclosure:is(:hover, :focus-within),
.spw-shell-tools-disclosure[open] {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 20%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.78)) 90%, var(--spw-shell-chrome-accent-local) 10%);
}

.spw-shell-utility-row {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.22rem;
  padding: 0.2rem 0.28rem;
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 10%, var(--line, rgba(14, 18, 20, 0.12)) 90%);
  border-radius: var(--shape-control, 0.78rem);
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 96%, var(--spw-shell-chrome-accent-local) 4%),
      color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 99%, var(--spw-shell-chrome-accent-local) 1%));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 54%, transparent),
    0 1px 3px rgba(14, 18, 20, 0.045);
  opacity: 0.86;
  scrollbar-width: none;
  box-sizing: border-box;
  contain: layout paint;
  transition:
    opacity 140ms var(--shell-ease),
    border-color 160ms var(--shell-ease),
    background-color 180ms var(--shell-ease),
    box-shadow 180ms var(--shell-settle-ease);
  /* Utility chrome lives in its own scroll lane so condensed menus cannot visually collide with route copy. */
}

.spw-shell-tools-disclosure[open] > .spw-shell-utility-row {
  display: flex;
}

.spw-shell-utility-row:is(:hover, :focus-within) {
  opacity: 1;
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, var(--line, rgba(14, 18, 20, 0.12)) 82%);
}

.spw-shell-utility-row::before {
  content: "weather";
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  min-block-size: 1.35rem;
  padding-inline: 0.34rem 0.46rem;
  border-inline-end: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 16%, transparent);
  color: color-mix(in oklab, var(--ink-soft, rgba(14, 18, 20, 0.68)) 84%, var(--spw-shell-chrome-accent-local) 16%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.56rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  scroll-snap-align: start;
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .spw-shell-utility-button {
  white-space: nowrap;
}

/* Compact shell utility rail: grouped controls, quiet inactive state, clear active state. */
:where(.site-header .spw-shell-utility-row, body > header .spw-shell-utility-row) .spw-shell-utility-button {
  width: auto;
  height: 1.62rem;
  min-width: 1.62rem;
  min-height: 1.62rem;
  padding: 0;
  border-radius: calc(var(--shape-control, 0.78rem) - 0.3rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
}

:where(.site-header .spw-shell-utility-row, body > header .spw-shell-utility-row) .spw-shell-utility-button[data-spw-utility-size="text"] {
  min-inline-size: 2.3rem;
  padding-inline: 0.42rem;
  font-size: 0.66rem;
}

:where(.site-header .spw-shell-utility-row, body > header .spw-shell-utility-row) .spw-shell-utility-button[data-spw-shell-action="settings"] {
  min-inline-size: 2.8rem;
}
:where(.site-header .spw-shell-utility-row, body > header .spw-shell-utility-row) .spw-shell-utility-button .spw-utility-sigil {
  margin: 0;
  font-size: 1em;
}

/* Conceptual clustering for shell utility controls.
   Clusters group related actions (e.g. color-mode, typography-scale, material-contrast).
   Provides semantic structure for styling, a11y (role=group), and future configurable interaction metaphors
   (data attr can drive different hover, gesture, or visual treatments per cluster type). */
.spw-utility-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  min-block-size: 1.76rem;
  flex: 0 0 auto;
  padding: 0.08rem;
  border: 1px solid color-mix(in oklab, var(--spw-shell-chrome-accent-local) 10%, transparent);
  border-radius: calc(var(--shape-control, 0.78rem) - 0.08rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 58%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 78%, transparent);
  box-shadow:
    inset 0 1px 2px rgba(14, 18, 20, 0.04),
    inset 0 -1px 0 rgba(255,255,255,0.28);
  scroll-snap-align: start;
}

.spw-utility-cluster[data-spw-utility-cluster="color-mode"] {
  border-radius: 999px;
  padding: 0.1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 62%),
    color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 84%, var(--spw-shell-chrome-accent-local) 16%);
}

.spw-utility-cluster[data-spw-utility-cluster="typography-scale"] {
  gap: 0.12rem;
  padding-inline: 0.14rem;
}

.spw-utility-cluster[data-spw-utility-cluster="typography-scale"]::before,
.spw-utility-cluster[data-spw-utility-cluster="typography-scale"]::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.18rem;
  block-size: 0.18rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 28%, transparent);
  opacity: 0.5;
}

.spw-shell-utility-row[data-spw-color-mode="dark"] [data-spw-utility-cluster="color-mode"],
.spw-shell-utility-row[data-spw-base-material="matte"] [data-spw-utility-cluster="material-contrast"],
.spw-shell-utility-row[data-spw-high-contrast="on"] [data-spw-utility-cluster="material-contrast"],
.spw-shell-utility-row:not([data-spw-font-scale="1"]) [data-spw-utility-cluster="typography-scale"],
.spw-shell-utility-row[data-spw-cauldron-visibility="prominent"] [data-spw-utility-cluster="cauldron-visibility"] {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 82%, var(--spw-shell-chrome-accent-local) 8%);
}
.spw-shell-utility-row > .spw-utility-cluster {
  margin-inline-end: 0.08rem;
}
.spw-shell-utility-row > .spw-utility-cluster:last-child {
  margin-inline-end: 0;
}

.spw-shell-utility-row::-webkit-scrollbar {
  display: none;
}

.spw-shell-utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 1.58rem;
  padding: 0.12rem 0.34rem;
  border: 1px solid transparent;
  border-radius: calc(var(--shape-control, 0.78rem) - 0.3rem);
  background: transparent;
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 68%, var(--spw-shell-chrome-accent-local) 32%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  flex: 0 1 auto;
  position: relative;
  transition:
    background-color 100ms var(--shell-ease),
    border-color 100ms var(--shell-ease),
    color 100ms var(--shell-ease),
    opacity 100ms var(--shell-ease),
    transform 100ms var(--shell-ease),
    box-shadow 140ms var(--shell-settle-ease);
}

.spw-shell-utility-button[data-spw-shell-action^="color-"] {
  min-width: 1.62rem;
  padding-inline: 0.28rem;
  border-radius: 999px;
}

.spw-utility-cluster[data-spw-utility-cluster="color-mode"] .spw-shell-utility-button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 30%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 82%, var(--spw-shell-chrome-accent-local) 18%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -2px 0 color-mix(in oklab, var(--spw-shell-chrome-accent-local) 52%, transparent);
}

.spw-utility-cluster[data-spw-utility-cluster="typography-scale"] .spw-shell-utility-button[data-spw-shell-action="font-down"],
.spw-utility-cluster[data-spw-utility-cluster="typography-scale"] .spw-shell-utility-button[data-spw-shell-action="font-up"] {
  border-radius: 999px;
  min-inline-size: 1.72rem;
}

.spw-shell-utility-button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 22%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 86%, var(--spw-shell-chrome-accent-local) 14%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow:
    inset 0 -2px 0 color-mix(in oklab, var(--spw-shell-chrome-accent-local) 48%, transparent),
    0 1px 2px rgba(14, 18, 20, 0.04);
}

/* Semantic distinction for sigils (icons/Spw operators) vs arguments (labels/text).
   - Sigil stays fixed (localization convenience: not translated).
   - Argument carries localizable/human text (styling: can be sized, weighted independently).
   - Allows targeting sigil for operator-like colors, reduced opacity, etc.
   - In compact utility mode, hide argument to keep icon/metaphor prominent (space + visual clarity). */
.spw-shell-utility-button .spw-utility-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.92em;
  margin-inline-end: 0.12em;
  opacity: 0.82;
  color: currentColor;
  line-height: 1;
}
.spw-shell-utility-button .spw-utility-argument {
  font-weight: 500;
  align-self: baseline;
}
.spw-utility-sigil + .spw-utility-argument {
  margin-inline-start: 0.08em;
}
:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .spw-shell-utility-row[data-spw-utility-mode="compact"] .spw-utility-argument,
.spw-shell-utility-row[data-spw-utility-mode="compact"] .spw-utility-argument {
  display: none;
}

:where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .spw-shell-utility-row .spw-utility-argument {
  display: none;
}

@media (min-width: 76rem) {
  :where(.site-header[data-spw-menu-mode="toggle"], body > header[data-spw-menu-mode="toggle"]) .spw-shell-utility-row:not([data-spw-utility-mode="compact"]) .spw-utility-argument {
    display: inline;
  }
}

.spw-shell-utility-row[data-spw-utility-mode="compact"] {
  gap: 0.18rem;
}

.spw-shell-utility-row[data-spw-utility-mode="compact"] > .spw-utility-cluster {
  margin-inline-end: 0.08rem;
}

.spw-shell-utility-button:is(:hover, :focus-visible) {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 18%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 90%, var(--spw-shell-chrome-accent-local) 10%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--spw-shell-chrome-accent-local) 8%, transparent);
  outline: none;
}

.spw-shell-utility-button:active {
  transform: translateY(1px);
}

.spw-shell-utility-button[disabled],
.spw-shell-utility-button[aria-disabled="true"] {
  opacity: 0.46;
  pointer-events: none;
}

/* Theming depth + clear contrast for shell utilities.
   Buttons now respect dark mode, high-contrast, and the matte clear-contrast
   option (baseMetamaterial=matte) for excellent text legibility on header chrome.
   Uses the semantic matte ink tokens introduced for surface text contrast. */
html[data-spw-color-mode="dark"] .spw-shell-utility-button {
  background: color-mix(in oklab, var(--surface-strong, rgba(25, 32, 37, 0.92)) 94%, var(--spw-shell-chrome-accent-local) 6%);
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 22%, var(--line, rgba(246, 248, 248, 0.18)) 78%);
  color: color-mix(in oklab, var(--ink, rgba(228, 235, 232, 0.92)) 90%, var(--spw-shell-chrome-accent-local) 10%);
}

html[data-spw-color-mode="dark"] .spw-shell-utility-button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--surface-strong, rgba(25, 32, 37, 0.92)) 88%, var(--spw-shell-chrome-accent-local) 12%);
  color: var(--ink, rgba(236, 241, 238, 0.96));
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 36%, transparent);
}

/* Matte clear contrast treatment for utility buttons (when user selects the
   matte option for clear reading surfaces in the shell). Stronger ink, more
   opaque matte bg, no subtle glass wash — for max legibility of quick controls. */
html[data-spw-base-metamaterial="matte"] .spw-shell-utility-button,
html[data-spw-high-contrast="on"] .spw-shell-utility-button {
  background: var(--surface-matte, rgba(247, 244, 238, 0.96));
  border-color: var(--line-matte, color-mix(in srgb, var(--spw-shell-chrome-accent-local) 18%, var(--line, rgba(14, 18, 20, 0.14)) 82%));
  color: var(--ink-on-matte-strong, rgba(14, 18, 20, 0.98));
  box-shadow: none;
}

html[data-spw-color-mode="dark"][data-spw-base-metamaterial="matte"] .spw-shell-utility-button,
html[data-spw-color-mode="dark"][data-spw-high-contrast="on"] .spw-shell-utility-button {
  background: var(--surface-matte, rgba(24, 30, 35, 0.96));
  color: var(--ink-on-matte-strong, rgba(255, 255, 255, 0.98));
  border-color: color-mix(in srgb, var(--spw-shell-chrome-accent-local) 28%, var(--line, rgba(246, 248, 248, 0.2)) 72%);
}

html[data-spw-base-metamaterial="matte"] .spw-shell-utility-button[aria-pressed="true"],
html[data-spw-high-contrast="on"] .spw-shell-utility-button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--surface-matte-strong, rgba(252, 249, 243, 0.98)) 92%, var(--spw-shell-chrome-accent-local) 8%);
  color: var(--ink-on-matte, rgba(14, 18, 20, 0.96));
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 40%, transparent);
}

.spw-shell-utility-row .spw-shell-utility-button {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.spw-shell-utility-row .spw-shell-utility-button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 22%, transparent);
  background: color-mix(in oklab, var(--surface-strong, rgba(255,255,255,0.86)) 86%, var(--spw-shell-chrome-accent-local) 14%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  box-shadow:
    inset 0 -2px 0 color-mix(in oklab, var(--spw-shell-chrome-accent-local) 48%, transparent),
    0 1px 2px rgba(14, 18, 20, 0.04);
}

.spw-shell-utility-row .spw-shell-utility-button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset-block-end: 0.2rem;
  inset-inline: 0.42rem;
  block-size: 2px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 72%, var(--ink, currentColor) 28%);
}

html[data-spw-color-mode="dark"] .spw-shell-utility-row {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--surface-strong, rgba(25, 32, 37, 0.92)) 90%, var(--spw-shell-chrome-accent-local) 10%),
      color-mix(in oklab, var(--surface-strong, rgba(25, 32, 37, 0.92)) 96%, var(--spw-shell-chrome-accent-local) 4%));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

html[data-spw-color-mode="dark"] .spw-shell-utility-row .spw-utility-cluster {
  background: color-mix(in oklab, var(--surface-strong, rgba(25, 32, 37, 0.92)) 68%, transparent);
}

html[data-spw-color-mode="dark"] .spw-shell-utility-row .spw-shell-utility-button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--surface-strong, rgba(25, 32, 37, 0.92)) 82%, var(--spw-shell-chrome-accent-local) 18%);
  color: var(--ink, rgba(236, 241, 238, 0.96));
  border-color: color-mix(in oklab, var(--spw-shell-chrome-accent-local) 34%, transparent);
}

/* Special affordance for the clear-matte action button itself when active. */
.spw-shell-utility-button[data-spw-shell-action="clear-matte"][aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--op-action-color, var(--teal)) 32%, transparent);
  background: color-mix(in oklab, var(--surface-matte-strong, rgba(252, 249, 243, 0.98)) 90%, var(--op-action-color, var(--teal)) 10%);
}
}

/* /public/css/components/gesture-anatomy.css */
@layer components {
/* ==========================================================================
   components/gesture-anatomy.css
   --------------------------------------------------------------------------
   Slot anatomy rails and gesture-contract learnability — how components
   invite tap, hold, and inspect without rewriting content.
   ========================================================================== */

:where(html[data-spw-cognitive-handles="on"], html[data-spw-tuning-discoverability="revealed"]) {
  --gesture-anatomy-opacity: 0.72;
  --gesture-anatomy-size: 0.58rem;
}

:where(html[data-spw-tuning-discoverability="ambient"]) {
  --gesture-anatomy-opacity: 0.38;
  --gesture-anatomy-size: 0.54rem;
}

/* Slot role labels on framed components */
:where(
  html[data-spw-cognitive-handles="on"],
  html[data-spw-tuning-discoverability="ambient"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(
  .site-frame [data-spw-slot],
  .frame-card [data-spw-slot],
  .vibe-widget [data-spw-slot]
) {
  position: relative;
}

:where(
  html[data-spw-cognitive-handles="on"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(
  .site-frame [data-spw-slot]:not([data-spw-slot=""]),
  .frame-card [data-spw-slot]:not([data-spw-slot=""])
) {
  outline: 1px dashed color-mix(in srgb, var(--active-op-color) 14%, transparent);
  outline-offset: 3px;
}

:where(
  html[data-spw-cognitive-handles="on"],
  html[data-spw-tuning-discoverability="ambient"],
  html[data-spw-tuning-discoverability="revealed"]
) :where([data-spw-slot-label])::before {
  content: attr(data-spw-slot-label);
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-start: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--active-op-color) 20%, transparent);
  background: color-mix(in srgb, var(--surface-strong) 90%, var(--active-op-color) 10%);
  color: color-mix(in srgb, var(--active-op-color) 62%, var(--ink-soft) 38%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: var(--gesture-anatomy-size, 0.56rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: var(--gesture-anatomy-opacity, 0.5);
  pointer-events: none;
  text-transform: uppercase;
}

/* Vertical anatomy stack rail on multi-slot frames */
:where(
  html[data-spw-cognitive-handles="on"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(.site-frame[data-spw-anatomy-stack="true"]) {
  border-inline-start: 3px solid color-mix(
    in srgb,
    var(--active-op-color) 16%,
    transparent
  );
  padding-inline-start: 0.35rem;
}

:where(.spw-anatomy-stack-rail) {
  display: none;
  flex-direction: column;
  gap: 0.22rem;
  margin-block: 0.2rem 0.45rem;
  padding: 0.38rem 0.48rem;
  border: 1px dashed color-mix(in srgb, var(--active-op-color) 16%, transparent);
  border-radius: calc(var(--shape-component, 6px) - 1px);
  background: color-mix(in srgb, var(--surface-strong) 94%, var(--active-op-color) 6%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(
  html[data-spw-cognitive-handles="on"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(.spw-anatomy-stack-rail) {
  display: flex;
}

:where(html[data-spw-tuning-discoverability="ambient"]) :where(.spw-anatomy-stack-rail) {
  display: flex;
  opacity: 0.62;
  border-style: dotted;
}

:where(.spw-anatomy-stack-rail__item) {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--ink-soft);
}

:where(.spw-anatomy-stack-rail__item[data-spw-slot-active="true"]) {
  color: var(--ink);
  font-weight: 700;
}

:where(.spw-anatomy-stack-rail__sigil) {
  opacity: 0.72;
}

/* Gesture contract hints */
:where([data-spw-gesture-hint]) {
  position: relative;
}

:where(
  html[data-spw-cognitive-handles="on"],
  html[data-spw-tuning-discoverability="ambient"],
  html[data-spw-tuning-discoverability="revealed"]
) :where([data-spw-gesture-hint]:is(:hover, :focus-visible, [data-spw-gesture="charging"], [data-spw-gesture="armed"], [data-spw-gesture="sustained"]))::after {
  content: attr(data-spw-gesture-hint);
  position: absolute;
  z-index: 4;
  inset-block-end: calc(100% + 0.28rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  display: inline-flex;
  max-inline-size: 14rem;
  padding: 0.16rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 92%, var(--active-op-color) 8%);
  box-shadow: 0 4px 14px rgba(14, 18, 20, 0.08);
  color: var(--ink);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  opacity: 0.96;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

:where(.spw-living-term[data-spw-gesture-hint])::after {
  content: attr(data-spw-gesture-hint);
  right: auto;
  left: 0;
  top: calc(100% + 0.12rem);
  translate: none;
  font-size: 0.54rem;
  opacity: 0;
  transition: opacity 140ms var(--ease-mechanical, ease);
}

:where(
  .spw-living-term[data-spw-gesture-hint]:is(:hover, :focus-visible, [data-spw-gesture="charging"], [data-spw-gesture="armed"])
)::after {
  opacity: 0.88;
  color: color-mix(in srgb, var(--active-op-color) 70%, var(--ink) 30%);
}

/* Gesture state anatomy on interactive cards */
:where(
  [data-spw-gesture="charging"],
  [data-spw-gesture="armed"],
  [data-spw-gesture="sustained"]
) {
  --gesture-anatomy-ring: color-mix(in srgb, var(--active-op-color) 28%, transparent);
}

:where([data-spw-gesture="charging"]) {
  box-shadow:
    inset 0 0 0 1px var(--gesture-anatomy-ring, transparent),
    0 0 0 3px color-mix(in srgb, var(--active-op-color) 10%, transparent);
}

:where([data-spw-gesture="armed"]) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color) 34%, transparent),
    0 0 0 4px color-mix(in srgb, var(--active-op-color) 14%, transparent);
}

:where([data-spw-gesture="sustained"]) {
  background-image: linear-gradient(
    118deg,
    color-mix(in srgb, var(--active-op-color) 7%, transparent),
    transparent 46%
  );
}
}

/* /public/css/components/floating-chrome.css */
@layer components {
/* ==========================================================================
   floating-chrome.css
   --------------------------------------------------------------------------
   Purpose
   - Define shared layer and containment semantics for runtime-created chrome:
     popovers, drawers, toasts, route menus, section handles, and status panels.
   - Keep feature files responsible for visual personality, not z-index policy.
   ========================================================================== */

:where([data-spw-floating-chrome="true"]) {
  --spw-floating-tier-z: var(--z-floating, var(--layer-floating, 100));
  --spw-floating-safe-inset: max(1rem, env(safe-area-inset-bottom));
  --spw-floating-menu-clearance: 0px;
  box-sizing: border-box;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="floating"]) {
  --spw-floating-tier-z: var(--z-floating, var(--layer-floating, 100));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="header"]) {
  --spw-floating-tier-z: var(--z-header, var(--layer-header, 1000));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="priority"]) {
  --spw-floating-tier-z: var(--z-priority, var(--layer-priority, 2000));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="modal"]) {
  --spw-floating-tier-z: var(--z-modal, calc(var(--z-priority, var(--layer-priority, 2000)) + 30));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="popover"]) {
  --spw-floating-tier-z: var(--z-popover, calc(var(--z-priority, var(--layer-priority, 2000)) + 8));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="toast"]) {
  --spw-floating-tier-z: var(--z-toast, calc(var(--z-priority, var(--layer-priority, 2000)) + 18));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="drawer"]) {
  --spw-floating-tier-z: var(--z-drawer, calc(var(--z-priority, var(--layer-priority, 2000)) + 20));
}

:where([data-spw-floating-chrome="true"][data-spw-layout-owner="floating-chrome"]) {
  z-index: var(--spw-floating-tier-z);
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role$="popover"]) {
  max-inline-size: min(28rem, calc(100vw - 1rem));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role$="drawer"]) {
  max-inline-size: min(24rem, calc(100vw - 2rem));
  max-block-size: min(34rem, calc(100vh - 2rem));
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role="surface-map"]) {
  position: fixed;
  inset: 50% max(0.65rem, env(safe-area-inset-right)) auto auto;
  transform: translateY(-50%);
  display: grid;
  justify-items: end;
  gap: 0.42rem;
  pointer-events: none;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role="surface-map"] > *) {
  pointer-events: auto;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role="surface-map-panel"]) {
  z-index: calc(var(--spw-floating-tier-z, var(--z-priority, 2000)) + 2);
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role="section-handle"],
       [data-spw-floating-chrome="true"][data-spw-chrome-role="section-handle-shell"]) {
  position: fixed;
  left: 50%;
  bottom: calc(
    var(--attention-handle-offset, 1rem)
    + env(safe-area-inset-bottom)
    + var(--spw-floating-menu-clearance, 0px)
  );
  transform: translateX(-50%);
  margin: 0;
  flex: none;
  align-self: auto;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="popover"][data-spw-chrome-role$="popover"]) {
  position: fixed;
  inset: auto;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="popover"][data-spw-chrome-role$="popover"].is-visible) {
  pointer-events: auto;
  visibility: visible;
}

:where([data-spw-floating-chrome="true"][data-spw-overlay="scrim-dark"])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: auto;
  background: color-mix(in srgb, var(--shadow-color, #111) 48%, transparent);
  backdrop-filter: blur(3px) saturate(0.92);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role="state-inspector"]) {
  position: fixed;
  inset: auto max(0.8rem, env(safe-area-inset-right)) calc(max(0.8rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px)) auto;
  display: grid;
  justify-items: end;
  gap: 0.45rem;
  inline-size: min(25rem, calc(100vw - 1.2rem));
  pointer-events: none;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role="state-inspector"] > *) {
  pointer-events: auto;
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-role$="toast-stack"]) {
  inline-size: min(24rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
}

/* Improved ephemeral chrome architecture: shared ergonomics/layout tokens for resonance between state satchel, visible console, toasts, handles.
   - Common padding, font-scale, material application (glass/matte via data-spw-metamaterial on chrome elements).
   - Ergonomics: consistent min targets, baseline text, gap for actions (like utility clusters).
   - Layout: use grid/flex patterns that echo satchel (launch/panel) and console (bar/body) for predictable positioning/collapse.
   - Configurable feedback/learnability: opacity/scale can respond to data-spw-enhancement-level or feedback (subtle vs rich).
   - Snap/fluid already supported; architecture keeps feature files (console.js, state-inspector) focused on content, chrome.css on containment + resonance.
   See also shell/chrome for utility menu integration, cards for cauldron footer.
*/
:where([data-spw-floating-chrome="true"]) {
  --chrome-pad: 0.45rem;
  --chrome-font: 0.82rem;
  --chrome-gap: 0.35rem;
  font-size: var(--chrome-font);
  padding: var(--chrome-pad);
}
:where([data-spw-floating-chrome="true"][data-spw-enhancement-level="minimal"]) {
  --chrome-pad: 0.32rem;
  --chrome-font: 0.76rem;
  opacity: 0.9;
}
:where([data-spw-floating-chrome="true"][data-spw-metamaterial]) {
  /* resonance: material from global or local for glass/matte clear contrast on ephemeral too */
}

@media (max-width: 720px) {
  :where([data-spw-floating-chrome="true"][data-spw-chrome-role="state-inspector"]:not([data-spw-state-inspector="open"]):not([data-spw-satchel-anchor="chrome-rail"])) {
    /* Reserve the mobile section-handle rail so floating tools do not stack on one tap target. */
    inset-block-end: calc(max(0.8rem, env(safe-area-inset-bottom)) + var(--touch-target-compact, 2.15rem) + 1rem + var(--spw-floating-menu-clearance, 0px));
  }

  :where([data-spw-floating-chrome="true"][data-spw-chrome-role="state-inspector"][data-spw-state-inspector="open"],
         [data-spw-floating-chrome="true"][data-spw-chrome-role="state-inspector"][data-spw-satchel-anchor="chrome-rail"]) {
    inset: auto;
    inline-size: auto;
    max-inline-size: none;
    justify-items: stretch;
  }

  :where(html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"]),
         html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"])) {
    --spw-floating-menu-clearance: 4.25rem;
  }

  :where([data-spw-floating-chrome="true"][data-spw-chrome-role$="toast-stack"]) {
    inline-size: auto;
    max-inline-size: none;
  }
}

/* ==========================================================================
   RPG Wednesday / physics / page regions: snap options, fluid semantics, scroll/swipe
   competition handling for floating chrome (state satchel, toasts, etc.).
   data-spw-snap, data-spw-chrome-fluid, data-spw-gesture (already used in drag) enable
   options for snapping (corners, edges), fluid (springy vs precise), and awareness that
   drag/swipe may compete with page scroll (pointer handling in JS already marks sustained).
   Small transient toasts get tighter max-size and safe stacking.
   ========================================================================== */

:where([data-spw-floating-chrome="true"][data-spw-snap]) {
  transition:
    left var(--component-transition-deliberate),
    top var(--component-transition-deliberate),
    inset var(--component-transition-deliberate);
}

:where([data-spw-floating-chrome="true"][data-spw-snap="corners"]) {
  /* Snap affordance hint; JS or user can drive to nearest corner via data or buttons. */
}
:where([data-spw-floating-chrome="true"][data-spw-snap="edges"]) {
  /* Edge magnetic feel for fluid region navigation. */
}

:where([data-spw-floating-chrome="true"][data-spw-chrome-fluid="springy"],
       [data-spw-physics-reason*="spring"]) {
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
:where([data-spw-floating-chrome="true"][data-spw-chrome-fluid="precise"],
       [data-spw-physics-reason*="precise"]) {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Transient/disappearing toasts in stack: smaller footprint, auto-fade via cards.css
   animation class or attr; keeps competition with scroll low (pointer-events none during fade). */
:where([data-spw-floating-chrome="true"][data-spw-chrome-tier="toast"] .spw-toast--transient,
       [data-spw-floating-chrome="true"][data-spw-chrome-tier="toast"] [data-spw-toast="transient"]) {
  max-inline-size: 18rem;
  font-size: 0.82rem;
  padding: 0.25rem 0.55rem;
}
}

/* /public/css/components/runtime-states.css */
@layer components {
/* ==========================================================================
   components/runtime-states.css
   --------------------------------------------------------------------------
   Selection, active, accessibility, visibility, and responsive component states.
   ========================================================================== */

/* ==========================================================================
   25. Selection, active, and section states
   ========================================================================== */

:where(main > section[id], main > article > section[id]) {
  scroll-margin-top: calc(var(--shell-header-height, var(--header-height, 4rem)) + 1.1rem);
}

:where([data-spw-deep-link]) {
  scroll-margin-top: calc(var(--shell-header-height, var(--header-height, 4rem)) + 1.25rem);
}

:where([data-spw-deep-link]:target) {
  outline: 2px solid color-mix(in srgb, var(--component-accent, var(--active-op-color, var(--teal))) 38%, transparent);
  outline-offset: 0.32rem;
}

:where([data-spw-deep-link]) > :where(.frame-topline, .frame-heading) :where(.frame-sigil[href^="#"]) {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.24em;
}

:where([data-spw-deep-link]:hover, [data-spw-deep-link]:focus-within) > :where(.frame-topline, .frame-heading) :where(.frame-sigil[href^="#"]) {
  text-decoration-line: underline;
}

:where([data-spw-module-trigger]) {
  --spw-module-trigger-color: var(--component-accent, var(--active-op-color, var(--teal)));
}

:where(html[data-spw-module-visuals="on"], html[data-spw-debug-mode="on"]) :where([data-spw-module-trigger]) {
  position: relative;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-module-trigger-color) 12%, transparent),
    var(--component-shadow, none);
}

:where(html[data-spw-module-visuals="on"]:not([data-spw-debug-mode="on"])) :where([data-spw-module-trigger]) > :where(.frame-topline, .frame-heading)::after {
  content: none;
}

:where(html[data-spw-module-visuals="on"], html[data-spw-debug-mode="on"]) :where([data-spw-module-trigger]) > :where(.frame-topline, .frame-heading)::after {
  content: "mount trigger";
  display: inline-flex;
  max-inline-size: min(32ch, 100%);
  overflow: hidden;
  margin-inline-start: auto;
  padding: 0.18rem 0.44rem;
  border: 1px solid color-mix(in srgb, var(--spw-module-trigger-color) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--spw-module-trigger-color) 8%);
  color: color-mix(in srgb, var(--ink, #111) 84%, var(--spw-module-trigger-color) 16%);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(html[data-spw-module-visuals="on"], html[data-spw-debug-mode="on"]) :where([data-spw-module-trigger-status="queued"], [data-spw-module-trigger-status="waiting"]) > :where(.frame-topline, .frame-heading)::after {
  opacity: 0.72;
}


/* ==========================================================================
   Reading-quiet inspect overlays (public routes, non-debug)
   --------------------------------------------------------------------------
   Suppress slot anatomy and passive module-visual rails on editorial surfaces.
   Settings, website, and plans lab routes stay fully inspectable. Show mounts
   (module-visuals) still applies box-model rails when explicitly toggled on.
   ========================================================================== */

html:not([data-spw-debug-mode="on"]):not([data-spw-cognitive-handles="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .site-frame [data-spw-slot-label]::before,
  .site-frame .spw-anatomy-stack-rail,
  .frame-card [data-spw-slot-label]::before,
  .frame-card .spw-anatomy-stack-rail,
  .vibe-widget [data-spw-slot-label]::before,
  .vibe-widget .spw-anatomy-stack-rail
) {
  display: none;
  content: none;
}

html:not([data-spw-debug-mode="on"]):not([data-spw-cognitive-handles="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .site-frame[data-spw-anatomy-stack="true"],
  .frame-card[data-spw-anatomy-stack="true"]
) {
  border-inline-start: 0;
  padding-inline-start: 0;
}

html:not([data-spw-debug-mode="on"]):not([data-spw-cognitive-handles="on"]):not([data-spw-module-visuals="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .site-frame [data-spw-box-model],
  .site-frame [data-spw-box-presence="overfull"],
  .frame-card [data-spw-box-model],
  .frame-card [data-spw-box-presence="overfull"]
) {
  --spw-box-model-rail-opacity: 0;
  --spw-box-model-rail-width: 0;
  box-shadow: none;
  outline: none;
}

html:not([data-spw-debug-mode="on"]):not([data-spw-cognitive-handles="on"]):not([data-spw-module-visuals="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .site-frame [data-spw-box-story],
  .frame-card [data-spw-box-story]
)::after {
  display: none;
  content: none;
}

html:not([data-spw-debug-mode="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .spw-header-trace:has(.spw-spell-path[data-spw-breadcrumb-state="closed"])
) {
  min-block-size: 0;
  opacity: 0.84;
}

html:not([data-spw-debug-mode="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__header
) {
  padding-block: 0.04rem;
}

html:not([data-spw-debug-mode="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__summary,
  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-sorter-chip
) {
  font-size: 0.58rem;
  opacity: 0.78;
}

html:not([data-spw-debug-mode="on"]) body:not(
  [data-spw-surface="settings"],
  [data-spw-surface="website"],
  [data-spw-surface="plans"]
) :where(
  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__hint
) {
  display: none;
}

html[data-spw-debug-mode="on"] :where(
  .site-frame [data-spw-slot],
  .frame-card [data-spw-slot]
) {
  scroll-margin-top: calc(var(--header-height, 4rem) + 0.5rem);
}

.spw-state-inspector {
  --state-inspector-accent: var(--op-probe-color, #4a2180);
  color: var(--ink, #111);
  font-family: var(--site-mono-font, monospace);
}

.spw-state-inspector__launch {
  min-block-size: 2.2rem;
  padding: 0.38rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--state-inspector-accent) 24%, transparent);
  border-radius: var(--shape-control, 0.78rem);
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--state-inspector-accent) 18%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-strong, #fff) 94%, var(--state-inspector-accent) 6%);
  box-shadow:
    0 0.7rem 1.8rem color-mix(in srgb, var(--shadow-color, #111111) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 16%, transparent);
  color: color-mix(in srgb, var(--ink, #111) 78%, var(--state-inspector-accent) 22%);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  touch-action: none; /* helps with drag vs scroll */
  user-select: none;
}

.spw-state-inspector__launch:active,
.spw-state-inspector__launch[data-spw-dragging="true"],
.spw-state-inspector__launch[data-spw-drag-state="dragging"] {
  cursor: grabbing;
  transition: none !important;
  box-shadow: var(--floating-shadow, 0 8px 32px rgba(0, 0, 0, 0.12)), 0 0 0 1px color-mix(in srgb, var(--state-inspector-accent) 35%, transparent);
  will-change: left, top;
}

.spw-state-inspector__launch:active:not([data-spw-drag-state="dragging"]) {
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
}

.spw-state-inspector__launch[data-spw-drag-state="dragging"] {
  opacity: 0.95;
}

.spw-state-inspector[data-spw-drag-state="dragging"] {
  --state-inspector-accent: color-mix(in srgb, var(--op-probe-color, #4a2180) 70%, var(--active-op-color, #008080));
}

.spw-state-inspector__panel {
  display: grid;
  gap: 0.65rem;
  inline-size: 100%;
  max-block-size: min(34rem, calc(100vh - 5rem));
  overflow: auto;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--state-inspector-accent) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);
  border-radius: var(--shape-control, 0.78rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, var(--state-inspector-accent) 6%);
  box-shadow: var(--floating-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
}

.spw-state-inspector__panel[hidden] {
  display: none;
}

.spw-state-inspector__panel h2,
.spw-state-inspector__summary,
.spw-state-inspector__status {
  margin: 0;
}

.spw-state-inspector__panel h2 {
  font-size: 0.9rem;
}

.spw-state-inspector__summary,
.spw-state-inspector__status {
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.72rem;
  line-height: 1.45;
}

.spw-state-inspector__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.spw-state-inspector__toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--state-inspector-accent) 42%, transparent);
  background: color-mix(in srgb, var(--state-inspector-accent) 14%, var(--surface-strong, #fff));
}

.spw-state-inspector__toggle[data-spw-state-toggle-state="off"] {
  opacity: 0.72;
}

:where(html[data-spw-feature-learning="off"]) .spw-state-inspector__launch::after {
  content: " quiet";
  opacity: 0.62;
}

@media (max-width: 560px) {
  .spw-state-inspector__actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 721px) {
  .spw-state-inspector[data-spw-state-inspector="open"][data-spw-satchel-anchor="chrome-rail"] {
    position: fixed;
    inset: auto max(0.85rem, env(safe-area-inset-right)) calc(max(0.85rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px)) auto;
    top: auto !important;
    left: auto !important;
    right: max(0.85rem, env(safe-area-inset-right)) !important;
    bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px)) !important;
    inline-size: min(22rem, calc(100vw - 1.6rem));
    max-inline-size: min(22rem, calc(100vw - 1.6rem));
    max-block-size: min(42dvh, calc(100dvh - var(--spw-shell-menu-offset, 4rem) - 6rem));
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.45rem;
    z-index: var(--z-drawer, calc(var(--z-priority, 2000) + 20));
    pointer-events: none;
  }

  .spw-state-inspector[data-spw-state-inspector="open"][data-spw-satchel-anchor="chrome-rail"] > * {
    pointer-events: auto;
  }

  .spw-state-inspector[data-spw-state-inspector="open"][data-spw-satchel-anchor="chrome-rail"] .spw-state-inspector__panel {
    max-block-size: min(34dvh, calc(100dvh - var(--spw-shell-menu-offset, 4rem) - 8.5rem));
    margin-block-end: 0;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] .spw-state-inspector__launch,
  html[data-spw-color-mode="dark"] .spw-state-inspector__launch {
    border-color: color-mix(in srgb, var(--state-inspector-accent) 36%, transparent);
    background:
      radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--state-inspector-accent) 22%, transparent), transparent 32%),
      color-mix(in srgb, var(--surface-panel-strong, var(--surface-strong, #2a221c)) 88%, var(--state-inspector-accent) 12%);
    box-shadow:
      0 0.7rem 1.8rem color-mix(in srgb, #000 42%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--ink-strong, #fff) 10%, transparent);
    color: color-mix(in srgb, var(--ink-strong, var(--ink)) 88%, var(--state-inspector-accent) 12%);
  }

  html[data-spw-color-mode="auto"] .spw-state-inspector__panel,
  html[data-spw-color-mode="dark"] .spw-state-inspector__panel {
    border-color: color-mix(in srgb, var(--state-inspector-accent) 32%, var(--line) 68%);
    background: color-mix(in srgb, var(--surface-panel-strong, var(--surface-strong, #2a221c)) 90%, var(--state-inspector-accent) 10%);
    box-shadow: 0 1rem 2.2rem color-mix(in srgb, #000 48%, transparent);
  }

  html[data-spw-color-mode="auto"] .spw-state-inspector__summary,
  html[data-spw-color-mode="auto"] .spw-state-inspector__status,
  html[data-spw-color-mode="dark"] .spw-state-inspector__summary,
  html[data-spw-color-mode="dark"] .spw-state-inspector__status {
    color: color-mix(in srgb, var(--ink-soft) 88%, var(--state-inspector-accent) 12%);
  }
}

@media (max-width: 720px) {
  .spw-state-inspector[data-spw-state-inspector="open"],
  .spw-state-inspector[data-spw-satchel-anchor="chrome-rail"] {
    position: fixed;
    inset-inline: max(0.65rem, env(safe-area-inset-left)) max(0.65rem, env(safe-area-inset-right));
    inset-block-end: calc(
      max(0.65rem, env(safe-area-inset-bottom))
      + var(--touch-target-compact, 2.15rem)
      + 0.55rem
      + var(--spw-floating-menu-clearance, 0px)
    );
    inset-block-start: auto;
    top: auto !important;
    left: max(0.65rem, env(safe-area-inset-left)) !important;
    right: max(0.65rem, env(safe-area-inset-right)) !important;
    inline-size: auto;
    max-block-size: min(68dvh, calc(100dvh - var(--spw-shell-menu-offset, 4rem) - 5.5rem));
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.45rem;
    z-index: var(--z-drawer, calc(var(--z-priority, 2000) + 20));
    pointer-events: none;
  }

  .spw-state-inspector[data-spw-state-inspector="open"] > *,
  .spw-state-inspector[data-spw-satchel-anchor="chrome-rail"] > * {
    pointer-events: auto;
  }

  .spw-state-inspector[data-spw-state-inspector="open"] .spw-state-inspector__panel,
  .spw-state-inspector[data-spw-satchel-anchor="chrome-rail"] .spw-state-inspector__panel {
    max-block-size: min(58dvh, calc(100dvh - var(--spw-shell-menu-offset, 4rem) - 8.5rem));
    margin-block-end: 0;
  }

  .spw-state-inspector[data-spw-state-inspector="closed"]:not([data-spw-satchel-positioned="user"]) .spw-state-inspector__launch {
    max-inline-size: min(11.5rem, calc(100vw - 1.4rem));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

:where(main > section.site-frame[data-spw-section-state], main > article > section.site-frame[data-spw-section-state]) {
  transition:
    box-shadow var(--spw-layout-measure-settle, var(--component-transition-deliberate)),
    border-color var(--spw-component-settle-transition, var(--component-transition-deliberate)),
    transform var(--spw-component-settle-transition, var(--component-transition-deliberate)),
    opacity var(--component-transition-arrival);
}

:where(main > section.site-frame[data-spw-section-state="active"], main > article > section.site-frame[data-spw-section-state="active"]) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--component-accent) 12%, transparent),
  var(--component-shadow-active);
}

:where(main > section.site-frame[data-spw-section-state="active"], main > article > section.site-frame[data-spw-section-state="active"]) :where(h1, h2, h3) {
  color: color-mix(in srgb, var(--ink, currentColor) 90%, var(--component-accent) 10%);
}

:where(html[data-spw-scroll-cadence="on"]) {
  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state] {
    position: relative;
    overflow: clip;
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state]::before {
    content: "";
    position: absolute;
    inset-block: 1rem;
    inset-inline-start: 0.55rem;
    width: 0.16rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--component-accent) 46%, transparent);
    opacity: 0;
    transform: scaleY(0.24);
    transform-origin: center top;
    transition:
      opacity var(--component-transition-deliberate),
      transform var(--component-transition-deliberate);
    pointer-events: none;
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, var(--component-accent) 2.5%, transparent);
    opacity: 0;
    transition: opacity var(--component-transition-deliberate);
    pointer-events: none;
  }

  & main > :is(section.site-frame, article > section.site-frame):is(
    [data-spw-section-state="previous"],
    [data-spw-section-state="next"]
  )::before {
    opacity: 0.24;
    transform: scaleY(0.56);
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"] {
    border-color: color-mix(in oklab, var(--component-accent) 18%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--component-accent) 10%, transparent),
      0 0.55rem 1.4rem color-mix(in oklab, var(--component-accent) 5%, transparent),
      var(--component-shadow-active);
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]::before {
    opacity: 0.58;
    transform: scaleY(1);
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]::after {
    opacity: 1;
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]
    :where(.frame-sigil, h1, h2, h3, .inline-note, .frame-note) {
    transition:
      transform var(--component-transition-deliberate),
      color var(--component-transition-deliberate),
      opacity var(--component-transition-deliberate);
  }

  & main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]
    :where(.frame-sigil, h1, h2, h3) {
    transform: translateX(0.08rem);
  }

  & main > :is(section.site-frame, article > section.site-frame):is(
    [data-spw-section-state="previous"],
    [data-spw-section-state="next"]
  ) :where(.inline-note, .frame-note) {
    opacity: 0.94;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[data-spw-scroll-cadence="on"] main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state])::before,
  :where(html[data-spw-scroll-cadence="on"] main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]) :where(.frame-sigil, h1, h2, h3, .inline-note, .frame-note) {
    transition: none;
    transform: none;
  }
}

:where([data-spw-selection]) {
  transition:
    background-color var(--spw-component-settle-transition, var(--component-transition-base)),
    border-color var(--spw-component-settle-transition, var(--component-transition-base)),
    box-shadow var(--spw-component-settle-transition, var(--component-transition-base)),
    opacity var(--component-transition-arrival),
    transform var(--component-transition-arrival);
}

:where([data-spw-selection="focused"]) {
  background-color: color-mix(in srgb, var(--component-accent) 3%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent) 16%, transparent);
}

:where([data-spw-selection="active"]) {
  background-color: color-mix(in srgb, var(--component-accent) 4%, transparent);
  border-color: color-mix(in srgb, var(--component-accent) 34%, transparent);
}

:where([data-spw-selection="selected"]) {
  border-color: color-mix(in srgb, var(--component-accent) 42%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent) 22%, transparent),
  0 0 0 4px color-mix(in srgb, var(--component-accent) 7%, transparent);
}

/* Coalesce parallel module mounts: hold cascade tokens steady until the batch settles. */
:where(html[data-spw-runtime-mount-batch="active"]) {
  --spw-runtime-enhancement-intensity: 0.32;
  --spw-runtime-feature-intensity: 0.22;
  --spw-site-rhythm-tempo: 0.72;
  --spw-layout-cascade-hold: 1;
  --spw-region-profile-intensity: min(var(--spw-region-profile-intensity, 1), 0.28);
}

:where(html:not([data-spw-runtime-mount-batch="active"])) {
  transition:
    --spw-runtime-enhancement-intensity var(--duration-base, 200ms) ease,
    --spw-runtime-feature-intensity var(--duration-base, 200ms) ease,
    --spw-site-rhythm-tempo var(--duration-base, 200ms) ease,
    --spw-site-rhythm-density var(--duration-base, 200ms) ease,
    --spw-region-profile-intensity var(--spw-region-profile-refresh-duration, 220ms) var(--ease-settle, ease);
}

/* Page lifecycle cascade — region metadata enrichment is deferred until interactive. */
:where(html[data-spw-page-state="booting"], html[data-spw-page-state="interactive"]) {
  --spw-layout-cascade-hold: 1;
  --spw-region-profile-intensity: 0;
}

:where(html[data-spw-page-state="hydrated"]) {
  --spw-region-profile-intensity: 0.48;
}

:where(html[data-spw-page-state="region-enhanced"], html[data-spw-page-state="enhanced"]) {
  --spw-region-profile-intensity: 1;
}

/* During cascade hold, limit transitions to paint-safe properties so runtime
   dataset writes do not trigger layout-affecting interpolation. */
:where(
  html[data-spw-runtime-mount-batch="active"],
  html[data-spw-page-state="booting"],
  html[data-spw-page-state="interactive"]
) {
  --spw-component-settle-transition: 0ms linear;
}

:where(
  html[data-spw-runtime-mount-batch="active"],
  html[data-spw-page-state="booting"],
  html[data-spw-page-state="interactive"]
) :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  [data-spw-kind]:not(body):not(main),
  [data-spw-box-model]
) {
  transition-property: color, background-color, opacity, filter;
}

:where(html[data-spw-page-state="region-enhanced"], html[data-spw-page-state="enhanced"]) :where(
  [data-spw-harmony],
  [data-spw-region-state],
  [data-spw-region-genome],
  [data-spw-tempo],
  [data-spw-density]
) {
  transition:
    border-color var(--spw-region-profile-refresh-duration, 220ms) var(--ease-settle, ease),
    box-shadow var(--spw-region-profile-refresh-duration, 220ms) var(--ease-settle, ease),
    outline-color var(--spw-region-profile-refresh-duration, 220ms) var(--ease-settle, ease),
    transform var(--spw-component-arrival-transition, 140ms var(--ease-settle, ease));
}

:where(html[data-spw-connection-posture="offline"], html[data-spw-prefetch-mode="deferred"]) {
  --spw-runtime-enhancement-intensity: min(var(--spw-runtime-enhancement-intensity, 0.5), 0.48);
  --spw-site-rhythm-tempo: min(var(--spw-site-rhythm-tempo, 1), 0.82);
}

:where(html[data-spw-connection-posture="offline"]) :where(.site-frame, .frame-panel, .frame-card) {
  --component-accent:
    color-mix(in srgb, var(--component-accent, var(--teal, #008080)) 72%, var(--ink-soft, rgba(14, 18, 20, 0.72)) 28%);
}

:where(html[data-spw-prefetch-mode="selective"]) :where([data-spw-module], [data-spw-image-reward], [data-spw-image-discovery]) {
  --spw-runtime-readiness-ring:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 10%, transparent);
  box-shadow: var(--spw-runtime-readiness-ring), var(--spw-local-shadow, var(--component-shadow, none));
}


/* ==========================================================================
   26. Accessibility and visibility
   ========================================================================== */

:where([hidden]) {
  display: none !important;
}

:where(:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 128, 128, 0.18));
}

:where(button, a, input, select, textarea, summary) {
  -webkit-tap-highlight-color: color-mix(in srgb, var(--component-accent) 18%, transparent);
}

:where(button, summary, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]) {
  cursor: pointer;
}

:where(html[data-spw-high-contrast="on"]) {
  --component-border: 1px solid color-mix(in srgb, var(--ink, currentColor) 34%, var(--line, transparent));
  --component-border-strong: 2px solid color-mix(in srgb, var(--component-accent) 58%, var(--ink, currentColor));
}

:where(html[data-spw-high-contrast="on"]) :where(.operator-chip, .spec-pill, .settings-option, .settings-fieldset) {
  border-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

:where(html[data-spw-reduce-motion="on"]) :where(*, *::before, *::after) {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}


/* ==========================================================================
   27. Responsive container behavior
   ========================================================================== */

@container (max-width: 36rem) {
  :where([data-spw-slot="header"], .frame-topline, .frame-heading) {
    gap: var(--spw-slot-gap-tight, 0.34rem 0.46rem);
  }

  :where([data-spw-slot="meta"], [data-spw-slot="actions"], .spec-strip, .button-group, .frame-operators) {
    width: 100%;
    gap: var(--spw-slot-gap-tight, 0.34rem 0.46rem);
  }

  :where(.frame-topline > .spw-component-meta, .frame-heading > .spw-component-meta) {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  :where(.frame-topline > .mode-switch, [data-spw-slot="actions"] > .mode-switch) {
    width: 100%;
    justify-content: flex-start;
  }

  :where(.mode-switch[aria-label]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(7.25rem, 1fr));
  }

  :where(.mode-switch[aria-label])::before {
    grid-column: 1 / -1;
    max-inline-size: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-wrap: balance;
  }

  :where(.site-hero--split-figure) > [data-spw-slot="body"] {
    gap: var(--component-gap);
  }

  :where(.site-lede, .page-lede) {
    font-size: clamp(0.96rem, 0.9rem + 0.24vw, 1.08rem);
    line-height: 1.5;
  }
}

@media (max-width: 760px) {
  :where(.site-frame) {
    --surface-padding: var(--spw-surface-padding, 0.82rem);
    border-radius: var(--component-radius-tight);
  }

  :where(.site-frame)::before {
    inset-inline: var(--surface-padding);
  }

  :where(.frame-grid--2up, .frame-grid--3up) {
    grid-template-columns: 1fr;
  }

  :where(.settings-grid) {
    grid-template-columns: 1fr;
    padding: var(--component-pad-tight);
  }

  :where(.settings-category-header) {
    padding-inline: var(--component-pad-tight);
  }

  :where(.operator-chip, .spec-pill) {
    white-space: normal;
  }

  :where(.frame-operators, .card-sub-links, .ref-links, .plan-links) {
    gap: 0.4rem;
  }

  :where(.frame-operators > .operator-chip, .card-sub-links a, .ref-links a, .plan-links a) {
    flex: 1 1 11rem;
    justify-content: flex-start;
    min-height: 2.55rem;
    padding-inline: 0.82rem;
    text-align: left;
  }

  :where(.frame-operators, .card-sub-links, .ref-links, .plan-links) {
    padding: 0.14rem;
    border: 1px solid color-mix(in srgb, var(--component-route-marker-line) 60%, transparent);
    border-radius: calc(var(--component-radius, 10px) + 2px);
    background: color-mix(in srgb, var(--component-surface-strong) 84%, transparent);
  }
}

@media (max-width: 420px) {
  :where(.site-frame, .frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .frame-panel, .mode-panel, .plan-card, .compare-card, .spec-column, .ref-card) {
    --component-pad: 0.68rem;
    --component-gap-tight: 0.42rem;
  }

  :where(.frame-operators > .operator-chip, .card-sub-links a, .ref-links a, .plan-links a) {
    flex-basis: 100%;
  }

  :where(.settings-shortcuts) {
    grid-template-columns: 1fr;
  }

  :where(.settings-state-grid, .settings-navigator-grid, .settings-structures-grid, .settings-quickstart-grid) {
    grid-template-columns: 1fr;
  }
}

/* Defensive layout hardening for frame-card / brace surfaces when debug or state inspection is active.
   Prevents bad wrapping and "missing element" visual breakage under seams, metadata, or dense inspect content.
   Also protects padding/chrome areas as potential gesture surfaces. */
:where(html[data-spw-debug-mode="on"], [data-spw-state-inspector="open"]) :where(
  .frame-card, .site-frame, .frame-panel, .brace-surface, [data-spw-brace]
) {
  /* Stronger wrapping defense */
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: wrap;
}

:where(html[data-spw-debug-mode="on"], [data-spw-state-inspector="open"]) :where(
  .frame-card, .site-frame, .frame-panel, .brace-surface, [data-spw-brace]
) :where(.frame-topline, .frame-heading, .card-body, [data-spw-slot]) {
  min-height: 0; /* prevent flex/grid collapse */
}

:where(html[data-spw-debug-mode="on"], [data-spw-state-inspector="open"]) :where(
  .frame-card, .site-frame
) :where(p, li, .prose, [data-spw-content]) {
  /* Give prose areas inside cards breathing room even when seams/overlays are present */
  max-width: 100%;
}
}

/* /public/css/components/embedded-workshop.css */
@layer components {
/* ==========================================================================
   embedded-workshop.css
   --------------------------------------------------------------------------
   Compact route-embedded tuning frames (exported from home climate-tuning).
   ========================================================================== */

:where(.spw-embedded-workshop.site-frame) {
  margin-block: var(--flow-section-gap, clamp(1.4rem, 3vw, 2.6rem));
  border-color: color-mix(in srgb, var(--active-op-color, #008080) 18%, var(--line, rgba(14, 18, 20, 0.14)) 82%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--active-op-color, #008080) 5%, transparent), transparent 52%),
    var(--surface-strong, rgba(255, 255, 255, 0.94));
}

:where(.spw-embedded-workshop .vibe-widget-grid--compact) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.65rem;
}

:where(.spw-embedded-workshop .vibe-widget) {
  min-width: 0;
}

:where(.spw-embedded-workshop .vibe-widget-meta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

:where(.spw-embedded-workshop .frame-note) {
  max-inline-size: 62ch;
}

@media (max-width: 720px) {
  :where(.spw-embedded-workshop .vibe-widget-actions) {
    gap: 0.34rem;
  }

  :where(.spw-embedded-workshop .operator-chip) {
    font-size: 0.72rem;
  }
}
}

/* /public/css/components/frame-controls.css */
@layer components {
/* ==========================================================================
   frame-controls.css
   --------------------------------------------------------------------------
   Distinguish lens (content filter) from form (structural grammar) controls.
   ========================================================================== */

/* Lens axis — mode-switch filters panels without changing frame grammar */
:where(.frame-topline .mode-switch, .frame-heading .mode-switch) {
  --spw-control-axis: lens;
  --spw-control-axis-color: var(--op-probe-color, #4a2180);
  padding: 0.14rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--spw-control-axis-color) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 90%, var(--spw-control-axis-color) 10%);
}

:where(html[data-spw-tuning-discoverability="ambient"], html[data-spw-tuning-discoverability="revealed"])
  :where(.frame-topline .mode-switch, .frame-heading .mode-switch)[aria-label]::before {
  content: "lens";
  display: block;
  margin-block-end: 0.12rem;
  color: color-mix(in srgb, var(--spw-control-axis-color) 62%, var(--ink-soft) 38%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

/* Form axis — brace/block/angle grammar swaps on the frame container */
:where(.site-frame[data-spw-form-options], .frame-card[data-spw-form-options]) {
  --spw-control-axis: form;
  --spw-control-axis-color: var(--op-object-color, #a67c00);
}

:where(
  html[data-spw-tuning-discoverability="ambient"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(.site-frame[data-spw-form-options] > :is(.frame-topline, .frame-heading, header)) {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--spw-control-axis-color) 42%, transparent);
}

:where(
  html[data-spw-tuning-discoverability="ambient"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(.site-frame[data-spw-form-options] > :is(.frame-topline, .frame-heading, header))::after {
  content: "form";
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--spw-control-axis-color) 28%, transparent);
  color: color-mix(in srgb, var(--spw-control-axis-color) 68%, var(--ink-soft) 32%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
}

/* /public/css/components/charge-cycle.css */
@layer components {
/* ==========================================================================
   charge-cycle.css
   --------------------------------------------------------------------------
   Field-level charge/discharge projection when explore posture reveals anatomy.
   ========================================================================== */

:root {
  --spw-charge-field: 0;
}

/* Ambient field wash — stronger in workshop, subtle in field */
:where(html[data-spw-explore-posture="field"], html[data-spw-explore-posture="workshop"]) {
  background-image:
    radial-gradient(
      ellipse 120% 80% at 50% -10%,
      color-mix(in srgb, var(--op-probe-color, #4a2180) calc(var(--spw-charge-field, 0) * 14%), transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 90% 60% at 88% 100%,
      color-mix(in srgb, var(--active-op-color, #008080) calc(var(--spw-charge-field, 0) * 10%), transparent),
      transparent 62%
    );
  background-attachment: fixed;
}

:where(html[data-spw-tuning-discoverability="revealed"]) {
  background-image:
    radial-gradient(
      ellipse 120% 80% at 50% -10%,
      color-mix(in srgb, var(--op-probe-color, #4a2180) calc(var(--spw-charge-field, 0) * 18%), transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 90% 60% at 88% 100%,
      color-mix(in srgb, var(--active-op-color, #008080) calc(var(--spw-charge-field, 0) * 12%), transparent),
      transparent 62%
    );
  background-attachment: fixed;
}

/* Live consequence on frames during charge/discharge */
:where(
  html[data-spw-explore-posture="field"],
  html[data-spw-explore-posture="workshop"],
  html[data-spw-tuning-discoverability="ambient"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(.site-frame[data-spw-charge-phase="preview"], .site-frame[data-spw-charge-phase="charged"]) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, #008080) 16%, transparent),
    0 0 0 calc(1px + (var(--spw-charge-field, 0) * 2px))
    color-mix(in srgb, var(--op-probe-color, #4a2180) calc(var(--spw-charge-field, 0) * 28%), transparent);
}

:where(
  html[data-spw-explore-posture="field"],
  html[data-spw-explore-posture="workshop"],
  html[data-spw-tuning-discoverability="revealed"]
) :where(.site-frame[data-spw-discharge-kind]) {
  animation: spw-discharge-echo 1.1s ease-out both;
}

@keyframes spw-discharge-echo {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--active-op-color, #008080) 42%, transparent),
      inset 3px 0 0 color-mix(in srgb, var(--active-op-color, #008080) 55%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 12px transparent,
      inset 3px 0 0 color-mix(in srgb, var(--active-op-color, #008080) 18%, transparent);
  }
}

/* Discharge kind accent on frame edge */
:where(.site-frame[data-spw-discharge-kind="release"]) {
  --spw-discharge-color: var(--op-probe-color, #4a2180);
}

:where(.site-frame[data-spw-discharge-kind="transfer"]) {
  --spw-discharge-color: var(--op-ref-color, #355f77);
}

:where(.site-frame[data-spw-discharge-kind="ground"]) {
  --spw-discharge-color: var(--op-frame-color, #008080);
}

:where(.site-frame[data-spw-discharge-kind="project"]) {
  --spw-discharge-color: var(--op-object-color, #a67c00);
}

:where(.site-frame[data-spw-discharge-kind]) {
  border-color: color-mix(in srgb, var(--spw-discharge-color, var(--active-op-color)) 24%, var(--line, rgba(14, 18, 20, 0.14)) 76%);
}

/* Embedded workshop charge readout */
:where(.spw-embedded-workshop [data-charge-field-readout]) {
  font-variant-numeric: tabular-nums;
}
}

/* /public/css/systems/substrate-ecology.css */
@layer systems {
/* ==========================================================================
   substrate-ecology.css
   --------------------------------------------------------------------------
   Purpose
   - Shared ecological contract for Spw surfaces.
   - Defines context, room, permeability, succession, and field-state tokens
     that other surface files can consume.
   - Keeps memo seams, helper seams, and environmental response generic enough
     to work across cards, labs, settings, figures, navigator, and console.

   Design rules
   - Surface ecology should be composable and medium-agnostic.
   - Local field state should feel environmental, not gimmicky.
   - Room-aware seams should appear only when the substrate has enough space.
   - This file sets contracts; feature shells consume them.
   ========================================================================== */

/* ==========================================================================
   1. Root ecology tokens
   ========================================================================== */

:root {
  --spw-surface-clarity: 0.62;
  --spw-surface-pressure: 0.34;
  --spw-surface-atmosphere: 0.18;
  --spw-surface-permeability: 0.3;
  --spw-surface-memory: 0.16;
  --spw-surface-resonance: 0.18;

  --spw-surface-room-scale: 1;
  --spw-surface-seam-opacity: 0.72;
  --spw-surface-seam-gap: var(--space-xs, 0.5rem);
  --spw-surface-seam-radius: var(--shape-surface, 10px);

  --spw-field-charge: 0;
  --spw-field-orientation: 0;
  --spw-field-inquiry: 0;
  --spw-field-comparison: 0;
  --spw-field-memory: 0;
  --spw-field-projection: 0;
  --spw-field-constraint: 0;
  --spw-field-resonance: 0;
}

/* ==========================================================================
   2. Generic ecology hosts
   ========================================================================== */

:where(
  [data-spw-surface-kind],
  .site-frame,
  .frame-card,
  .frame-panel,
  .mode-panel,
  .operator-card,
  .media-card,
  .media-focus-card,
  .pretext-surface,
  .settings-category,
  .settings-fieldset,
  .spw-console,
  .spw-nav-panel
) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "systems";
  --spw-debug-layer-color: #008080;

  /* Local tokens */
  --spw-surface-local-clarity: var(--spw-surface-clarity, 0.62);
  --spw-surface-local-pressure: var(--spw-surface-pressure, 0.34);
  --spw-surface-local-atmosphere: var(--spw-surface-atmosphere, 0.18);
  --spw-surface-local-permeability: var(--spw-surface-permeability, 0.3);
  --spw-surface-local-memory: var(--spw-surface-memory, 0.16);
  --spw-surface-local-resonance: var(--spw-surface-resonance, 0.18);

  /* Box */
  min-width: 0;

  /* Layering / containment */
  position: relative;
}

/* ==========================================================================
   3. Context routing
   --------------------------------------------------------------------------
   reading | analysis | routing | ritual | play | settings | publishing
   ========================================================================== */

:where([data-spw-context='reading']) {
  --spw-surface-local-clarity: 0.82;
  --spw-surface-local-pressure: 0.22;
  --spw-surface-local-atmosphere: 0.08;
  --spw-surface-local-permeability: 0.24;
}

:where([data-spw-context='analysis']) {
  --spw-surface-local-clarity: 0.76;
  --spw-surface-local-pressure: 0.48;
  --spw-surface-local-atmosphere: 0.14;
  --spw-surface-local-permeability: 0.38;
}

:where([data-spw-context='routing']) {
  --spw-surface-local-clarity: 0.68;
  --spw-surface-local-pressure: 0.54;
  --spw-surface-local-atmosphere: 0.12;
  --spw-surface-local-permeability: 0.34;
}

:where([data-spw-context='ritual']) {
  --spw-surface-local-clarity: 0.52;
  --spw-surface-local-pressure: 0.56;
  --spw-surface-local-atmosphere: 0.34;
  --spw-surface-local-permeability: 0.42;
}

:where([data-spw-context='play']) {
  --spw-surface-local-clarity: 0.58;
  --spw-surface-local-pressure: 0.42;
  --spw-surface-local-atmosphere: 0.28;
  --spw-surface-local-permeability: 0.46;
}

:where([data-spw-context='settings']) {
  --spw-surface-local-clarity: 0.84;
  --spw-surface-local-pressure: 0.24;
  --spw-surface-local-atmosphere: 0.06;
  --spw-surface-local-permeability: 0.18;
}

:where([data-spw-context='publishing']) {
  --spw-surface-local-clarity: 0.74;
  --spw-surface-local-pressure: 0.32;
  --spw-surface-local-atmosphere: 0.16;
  --spw-surface-local-permeability: 0.28;
}

/* ==========================================================================
   4. Room routing
   --------------------------------------------------------------------------
   compact | standard | roomy
   ========================================================================== */

:where([data-spw-room='compact']) {
  --spw-surface-room-scale: 0.82;
  --spw-surface-seam-opacity: 0.58;
}

:where([data-spw-room='standard']) {
  --spw-surface-room-scale: 1;
  --spw-surface-seam-opacity: 0.72;
}

:where([data-spw-room='roomy']) {
  --spw-surface-room-scale: 1.14;
  --spw-surface-seam-opacity: 0.86;
}

/* ==========================================================================
   5. Permeability routing
   --------------------------------------------------------------------------
   sealed | porous | annotatable | mutable
   ========================================================================== */

:where([data-spw-permeability='sealed']) {
  --spw-surface-local-permeability: 0.08;
}

:where([data-spw-permeability='porous']) {
  --spw-surface-local-permeability: 0.34;
}

:where([data-spw-permeability='annotatable']) {
  --spw-surface-local-permeability: 0.52;
}

:where([data-spw-permeability='mutable']) {
  --spw-surface-local-permeability: 0.68;
}

/* ==========================================================================
   6. Succession routing
   --------------------------------------------------------------------------
   raw | measured | resolved | visited | latched
   ========================================================================== */

:where([data-spw-succession='raw']) {
  --spw-surface-local-clarity: calc(var(--spw-surface-local-clarity, 0.62) * 0.88);
  --spw-surface-local-memory: 0.08;
}

:where([data-spw-succession='measured']) {
  --spw-surface-local-clarity: calc(var(--spw-surface-local-clarity, 0.62) * 1.02);
  --spw-surface-local-memory: 0.18;
}

:where([data-spw-succession='resolved']) {
  --spw-surface-local-clarity: calc(var(--spw-surface-local-clarity, 0.62) * 1.08);
  --spw-surface-local-memory: 0.24;
}

:where([data-spw-succession='visited']) {
  --spw-surface-local-memory: 0.42;
  --spw-surface-local-resonance: 0.32;
}

:where([data-spw-succession='latched']) {
  --spw-surface-local-memory: 0.58;
  --spw-surface-local-pressure: calc(var(--spw-surface-local-pressure, 0.34) * 1.08);
}

/* ==========================================================================
   7. Wonder-field routing
   --------------------------------------------------------------------------
   The gesture / experiential layers can set data-spw-field-wonder on local
   roots. This file turns that into generic environmental tuning.
   ========================================================================== */

:where([data-spw-field-wonder='orientation']) {
  --spw-field-orientation: max(var(--spw-field-orientation, 0), 0.65);
}

:where([data-spw-field-wonder='inquiry']) {
  --spw-field-inquiry: max(var(--spw-field-inquiry, 0), 0.65);
}

:where([data-spw-field-wonder='comparison']) {
  --spw-field-comparison: max(var(--spw-field-comparison, 0), 0.65);
}

:where([data-spw-field-wonder='memory']) {
  --spw-field-memory: max(var(--spw-field-memory, 0), 0.65);
}

:where([data-spw-field-wonder='projection']) {
  --spw-field-projection: max(var(--spw-field-projection, 0), 0.65);
}

:where([data-spw-field-wonder='constraint']) {
  --spw-field-constraint: max(var(--spw-field-constraint, 0), 0.65);
}

:where([data-spw-field-wonder='resonance']) {
  --spw-field-resonance: max(var(--spw-field-resonance, 0), 0.65);
}

/* ==========================================================================
   8. Generic seams
   --------------------------------------------------------------------------
   These are shared ecological seams, not feature-specific widgets.
   ========================================================================== */

:where(.spw-context-memo, .spw-experience-memo) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs, 0.35rem);
  max-width: min(100%, 72ch);
  margin-top: var(--space-2xs, 0.4rem);
  padding: 0.22rem 0.54rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, #008080) 18%, transparent);
  border-radius: var(--radius-pill, 999px);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, #008080) 8%, transparent) 0,
      transparent 48%
    ),
    color-mix(in srgb, var(--surface, #ffffff) 90%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-xs, 0.66rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  opacity: var(--spw-surface-seam-opacity, 0.72);
  transition:
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    opacity var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.spw-context-memo[hidden], .spw-experience-memo[hidden]) {
  display: none !important;
}

:where(.spw-surface-helper-strip) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs, 0.4rem);
  max-width: 100%;
}

:where(.spw-surface-helper-chip) {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0.16rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, #008080) 18%, transparent);
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--surface, #ffffff) 86%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.64rem;
  line-height: 1.3;
  transition: border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

/* ==========================================================================
   9. Memo-wonder tinting
   ========================================================================== */

:where([data-spw-memo-wonder='orientation']) .spw-context-memo,
:where([data-spw-field-wonder='orientation']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-frame-color, #008080) 24%, transparent);
}

:where([data-spw-memo-wonder='inquiry']) .spw-context-memo,
:where([data-spw-field-wonder='inquiry']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-probe-color, #4a2180) 24%, transparent);
}

:where([data-spw-memo-wonder='memory']) .spw-context-memo,
:where([data-spw-field-wonder='memory']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-object-color, #a67c00) 24%, transparent);
}

:where([data-spw-memo-wonder='projection']) .spw-context-memo,
:where([data-spw-field-wonder='projection']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-surface-color, #178282) 24%, transparent);
}

:where([data-spw-memo-wonder='constraint']) .spw-context-memo,
:where([data-spw-field-wonder='constraint']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-pragma-color, #883a3a) 24%, transparent);
}

:where([data-spw-memo-wonder='comparison']) .spw-context-memo,
:where([data-spw-field-wonder='comparison']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-merge-color, #277a87) 24%, transparent);
}

:where([data-spw-memo-wonder='resonance']) .spw-context-memo,
:where([data-spw-field-wonder='resonance']) .spw-context-memo {
  border-color: color-mix(in srgb, var(--op-ref-color, #1d57a3) 24%, transparent);
}

/* ==========================================================================
   10. Room-aware visibility
   ========================================================================== */

:where([data-spw-room='compact']) :is(.spw-context-memo, .spw-surface-helper-strip) {
  display: none;
}

:where([data-spw-room='standard']) .spw-context-memo {
  max-width: min(100%, var(--measure-panel, 52ch));
}

:where([data-spw-room='roomy']) .spw-context-memo {
  max-width: min(100%, var(--measure-reading, 72ch));
}

@container (max-width: 42rem) {
  :where(.spw-context-memo, .spw-experience-memo) {
    max-width: 100%;
    font-size: 0.62rem;
  }
}

/* ==========================================================================
   11. Surface-field seam
   ========================================================================== */

:where([data-spw-field-wonder])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  opacity: calc(0.12 + (var(--spw-field-charge, 0) * 0.28));
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, #008080) 22%, transparent) 0%,
      transparent 62%
    );
}

/* ==========================================================================
   12. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(.spw-context-memo, .spw-experience-memo, .spw-surface-helper-chip) {
    transition: none !important;
    animation: none !important;
  }
}
}

/* /public/css/systems/surfaces/base.css */
@layer systems {
/* ==========================================================================
   surfaces/base.css
   --------------------------------------------------------------------------
   Shared shell variables and macro-layout normalization.
   ========================================================================== */

:root {
  --spw-shell-card-gap:   var(--gap-inline-flow, clamp(0.75rem, 1.4vw, 1rem));
  --spw-shell-panel-gap:  var(--gap-surface, clamp(0.85rem, 1.8vw, 1.15rem));
  --spw-shell-inline-gap: var(--space-xs, 0.55rem);

  --spw-shell-card-pad:   var(--inset-component, 1rem);
  --spw-shell-panel-pad:  var(--inset-surface, 0.9rem);

  --spw-shell-soft-bg:        var(--spw-surface-fill-soft, var(--surface-soft, rgba(255, 255, 255, 0.44)));
  --spw-shell-card-bg:        var(--spw-surface-fill-rest, var(--surface, rgba(255, 255, 255, 0.68)));
  --spw-shell-card-bg-strong: var(--spw-surface-fill-strong, var(--surface-strong, rgba(255, 255, 255, 0.74)));
  --spw-shell-panel-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--spw-shell-card-bg-strong) 92%, transparent),
      color-mix(in srgb, var(--spw-shell-card-bg) 92%, transparent)
    );
  --spw-shell-panel-bg-strong:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-panel-strong, var(--spw-shell-card-bg-strong)) 94%, transparent),
      color-mix(in srgb, var(--surface-panel, var(--spw-shell-card-bg)) 94%, transparent)
    );
  --spw-shell-sheen: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.78)) 22%, transparent);
  --spw-shell-overlay: var(--overlay-gradient-fade-bottom);

  --spw-shell-line:        var(--spw-surface-line-rest, var(--line, rgba(14, 18, 20, 0.14)));
  --spw-shell-line-strong: var(--spw-surface-line-active, var(--line-strong, rgba(0, 128, 128, 0.34)));
  --spw-shell-card-shadow: var(--spw-surface-shadow-rest, var(--card-shadow));
  --spw-shell-card-shadow-raised: var(--spw-surface-shadow-raised, var(--card-shadow-hover));
  --spw-shell-card-transition:
    transform var(--duration-base, 220ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-base, 220ms) var(--ease-mechanical, ease);
  --spw-palette-probe-1: var(--active-op-color, #008080);
  --spw-palette-probe-2: var(--op-object-color, #c68a22);
  --spw-palette-probe-3: var(--op-ref-color, #1d57a3);
  --spw-palette-probe-4: var(--op-probe-color, #6a3fb8);
}

/* Generic shell card/panel rhythm */
:where(
  .media-focus-card,
  .media-card,
  .pretext-controls-panel,
  .pretext-summary-panel,
  .pretext-surface,
  .rpg-gameplay-panel,
  .settings-category,
  .settings-fieldset,
  .pwa-status-card,
  .spw-nav-panel,
  .spw-console
) {
  min-width: 0;
}

:where(.media-focus-card, .media-card, .topic-reference-card) {
  position: relative;
  min-height: 100%;
  padding: var(--spw-shell-card-pad);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--spw-shell-panel-bg);
  color: inherit;
  box-sizing: border-box;
  box-shadow: var(--spw-shell-card-shadow);
  overflow: hidden;
  transition: var(--spw-shell-card-transition);
}

:where(.media-focus-card, .media-card) {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.62rem);
}

:where(.topic-reference-card) {
  display: grid;
  gap: 0.55rem;
}

:where(.frame-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card, 16rem)), 1fr));
  gap: var(--spw-shell-panel-gap, var(--component-gap, 0.9rem));
  min-width: 0;
}

:where(.frame-grid--dense) {
  gap: var(--component-gap-tight, 0.55rem);
}

:where(
  .frame-grid,
  .media-card-grid,
  .media-focus-layout,
  .feature-map,
  .domain-grid,
  .spec-grid
) {
  align-items: stretch;
}

:where(
  .frame-grid > :is(.frame-card, .software-card),
  .media-card-grid > .media-card,
  .media-focus-layout > * > .media-focus-card,
  .feature-map > .frame-card,
  .domain-grid > .frame-panel,
  .spec-grid > :is(.software-card, .frame-panel)
) {
  height: 100%;
}
}

/* /public/css/systems/surfaces/media.css */
@layer systems {
/* ==========================================================================
   surfaces/media.css
   --------------------------------------------------------------------------
   Media publishing and collection layouts.
   ========================================================================== */

:where([data-spw-features~="media-publishing"] .media-publishing-frame) {
  gap: var(--space-md, 1rem);
}

:where([data-spw-features~="media-publishing"] :is(.media-focus-layout, .media-card-grid)) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card, 15rem)), 1fr));
  gap: var(--spw-shell-panel-gap);
}

:where([data-spw-features~="media-publishing"] .media-collection-stack) {
  display: grid;
  gap: var(--gap-block-flow, 1.1rem);
}

:where([data-spw-features~="media-publishing"] :is(.media-focus-card, .media-card)) {
  background: var(--spw-shell-card-bg);
}

:where([data-spw-features~="media-publishing"] a.media-card) {
  text-decoration: none;
}

:where([data-spw-features~="media-publishing"] a.media-card:is(:hover, :focus-visible)) {
  transform: translateY(-2px);
  border-color: var(--card-border-hover, var(--line-strong));
  background: var(--card-bg-hover, var(--surface-strong));
  box-shadow: var(--spw-shell-card-shadow-raised);
}

:where([data-spw-features~="media-publishing"] .media-focus-card--daily) {
  background: var(--spw-shell-card-bg-strong);
  box-shadow: var(--spw-shell-card-shadow);
}

:where([data-spw-features~="media-publishing"] :is(.media-focus-title, .media-card-topline)) {
  display: flex;
  align-items: center;
  gap: var(--spw-shell-inline-gap);
  flex-wrap: wrap;
}

:where([data-spw-features~="media-publishing"] :is(.media-focus-title h3, .media-card-title)) {
  margin: 0;
}

:where([data-spw-features~="media-publishing"] .media-card-tag) {
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.72rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where([data-spw-features~="media-publishing"] .media-card-summary) {
  color: var(--ink-soft);
  font-size: var(--text-size-sm, 0.92rem);
  line-height: var(--site-line-height, 1.55);
}

:where([data-spw-features~="media-publishing"] .media-card-cta) {
  margin-top: auto;
  color: var(--active-op-color, #008080);
  font-size: var(--text-size-xs, 0.78rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
}

/* /public/css/systems/surfaces/topics.css */
@layer systems {
/* ==========================================================================
   surfaces/topics.css
   --------------------------------------------------------------------------
   Topic reference, study surfaces, and illustrated cards.
   ========================================================================== */

:where(.topic-reference-grid, .topic-photo-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--spw-shell-panel-gap);
}

:where(.topic-reference-card) {
  background: var(--spw-shell-panel-bg);
}

:where(.topic-reference-card > h3) {
  margin: 0;
}

:where(.topic-reference-card > p) {
  margin: 0;
  color: var(--ink-soft);
}

:where(.topic-reference-card > a) {
  color: var(--active-op-color, #008080);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.05em;
  text-decoration: none;
}

:where(.topic-reference-card > a:is(:hover, :focus-visible)) {
  text-decoration: underline;
}

:where(.topic-photo-card) {
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--spw-shell-line-strong) 46%, var(--spw-shell-line));
  background:
    linear-gradient(180deg, var(--spw-shell-sheen), transparent 44%),
    var(--spw-shell-card-bg-strong);
}

:where(.topic-photo-card img) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

:where(.topic-photo-card figcaption) {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1rem 1.05rem;
  color: var(--ink-soft);
}

:where(.topic-photo-card figcaption strong) {
  color: var(--ink);
  font-size: 0.98rem;
}

:where(.topic-photo-card figcaption a) {
  color: var(--active-op-color, #008080);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.05em;
  text-decoration: none;
}

:where(.topic-photo-card figcaption a:is(:hover, :focus-visible)) {
  text-decoration: underline;
}

/* Illustrated Frame Cards */
:where(.frame-card--illustrated > a:first-child) {
  gap: 0.72rem;
}

:where(.frame-card-sigil) {
  width: fit-content;
}

:where(.frame-card-media) {
  position: relative;
  margin:
    calc(var(--component-pad, 0.9rem) * -1)
    calc(var(--component-pad, 0.9rem) * -1)
    0;
  justify-self: stretch;
  overflow: clip;
  border-radius: calc(var(--component-radius-tight, 8px) - 1px) calc(var(--component-radius-tight, 8px) - 1px) 0 0;
  border-bottom: 1px solid color-mix(in srgb, var(--component-accent, #008080) 18%, var(--spw-shell-line, rgba(0, 0, 0, 0.08)));
  background:
    linear-gradient(180deg, var(--spw-shell-sheen), transparent 44%),
    color-mix(in srgb, var(--component-surface-strong, rgba(255, 255, 255, 0.98)) 90%, var(--component-accent, #008080));
}

:where(.frame-card-media::after) {
  content: "";
  position: absolute;
  inset: auto 0 0;
  min-height: 34%;
  pointer-events: none;
  background: var(--spw-shell-overlay);
}

:where(.frame-card-media img) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition:
    transform var(--duration-deliberate, 360ms) var(--ease-mechanical, ease),
    filter var(--duration-deliberate, 360ms) var(--ease-mechanical, ease);
}

:where(.frame-card-media[data-spw-image-shape="square"] img) {
  aspect-ratio: 1 / 1;
}

:where(.frame-card-media[data-spw-image-shape="portrait"] img) {
  aspect-ratio: 4 / 5;
}
}

/* /public/css/systems/surfaces/drift.css */
@layer systems {
/* ==========================================================================
   surfaces/drift.css
   --------------------------------------------------------------------------
   Return-visitor, gratitude, and wonder reward surfaces.
   ========================================================================== */

/* Return-visitor / drift surfaces */
:where(.returner-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--spw-shell-panel-gap);
  align-items: start;
}

:where(.returner-card, .returner-ledger) {
  min-width: 0;
  padding: var(--spw-shell-panel-pad);
  border: 1px solid color-mix(in srgb, var(--spw-shell-line-strong) 42%, var(--spw-shell-line));
  border-radius: var(--shape-floating, 14px);
  background:
    linear-gradient(180deg, var(--spw-shell-sheen), transparent 42%),
    var(--spw-shell-panel-bg-strong);
  box-shadow: var(--spw-shell-card-shadow);
}

:where(.returner-card) {
  display: grid;
  gap: 0.72rem;
  align-content: start;
}

:where(.returner-card > :last-child, .returner-ledger > :last-child) {
  margin-block-end: 0;
}

:where(.returner-card--warm) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--op-object-color, #c68a22) 8%, var(--spw-shell-sheen)),
      transparent 42%
    ),
    var(--spw-shell-panel-bg-strong);
}

:where(.returner-card-kicker) {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.returner-card > h3, .returner-ledger-title) {
  margin: 0;
}

:where(.returner-card > p, .returner-ledger-item > p) {
  margin: 0;
  color: var(--ink-soft);
}

:where(.returner-chip-row) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

:where(.returner-ledger) {
  display: grid;
  gap: 0.72rem;
  align-content: start;
}

:where(.returner-ledger-item) {
  display: grid;
  gap: 0.32rem;
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--active-op-color, #008080) 28%, transparent);
}

:where(.returner-ledger-item > strong) {
  color: var(--ink);
}

@media (max-width: 960px) {
  :where(.returner-grid) {
    grid-template-columns: 1fr;
  }
}

/* Gratitude / wonder reward surfaces */
:where(.gratitude-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spw-shell-panel-gap);
}

:where(.gratitude-card) {
  display: grid;
  gap: 0.72rem;
  min-width: 0;
  min-height: 100%;
  padding: var(--spw-shell-panel-pad);
  border: 1px solid color-mix(in srgb, var(--spw-shell-line-strong) 38%, var(--spw-shell-line));
  border-radius: var(--shape-floating, 14px);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--op-topic-color, #2f8b6d) 8%, var(--spw-shell-sheen)),
      transparent 44%
    ),
    var(--spw-shell-panel-bg-strong);
  box-shadow: var(--spw-shell-card-shadow);
}

:where(.gratitude-card--reward) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--op-object-color, #c68a22) 10%, var(--spw-shell-sheen)),
      transparent 44%
    ),
    var(--spw-shell-panel-bg-strong);
}

:where(.gratitude-kicker) {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.gratitude-card > h3, .gratitude-item > strong) {
  margin: 0;
}

:where(.gratitude-card > p, .gratitude-item > p) {
  margin: 0;
  color: var(--ink-soft);
}

:where(.gratitude-list) {
  display: grid;
  gap: 0.6rem;
}

:where(.gratitude-item) {
  display: grid;
  gap: 0.24rem;
  padding-left: 0.8rem;
  border-left: 2px solid color-mix(in srgb, var(--active-op-color, #008080) 26%, transparent);
}

@media (max-width: 960px) {
  :where(.gratitude-grid) {
    grid-template-columns: 1fr;
  }
}
}

/* /public/css/systems/surfaces/tuning.css */
@layer systems {
/* ==========================================================================
   surfaces/tuning.css
   --------------------------------------------------------------------------
   Climate tuning, vibe widgets, palette probes, and theme choosers.
   ========================================================================== */

:where(.vibe-widget-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--spw-shell-panel-gap);
  align-items: stretch;
}

:where(.vibe-widget-grid--compact) {
  gap: 0.8rem;
}

:where(.vibe-widget, .palette-probe) {
  position: relative;
  display: grid;
  gap: 0.72rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-height: 100%;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 18%, var(--spw-shell-line));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 9%, var(--surface-strong, rgba(255, 255, 255, 0.92))), transparent 62%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--spw-palette-probe-2, var(--op-object-color, #c68a22)) 10%, transparent), transparent 24%),
    var(--spw-shell-panel-bg-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 6px 16px rgba(17, 18, 20, 0.035),
    var(--card-highlight),
    var(--card-shadow);
  overflow: clip;
}

:where(.vibe-widget::before) {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 0.18rem;
  background:
    linear-gradient(
      90deg,
      var(--spw-palette-probe-1, var(--active-op-color, #008080)),
      var(--spw-palette-probe-2, var(--op-object-color, #c68a22)),
      var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)),
      var(--spw-palette-probe-4, var(--op-probe-color, #6a3fb8))
    );
  opacity: 0.42;
}

:where(.vibe-widget > *) {
  min-inline-size: 0;
  max-inline-size: 100%;
  position: relative;
  z-index: 1;
}

:where(.vibe-widget--feature) {
  grid-column: 1 / -1;
}

:where(.vibe-widget-header, .palette-probe-header > header) {
  display: grid;
  gap: 0.3rem;
}

:where(:is(.vibe-widget, .palette-probe)-kicker) {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(:is(.vibe-widget, .palette-probe)-title) {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.2;
}

:where(:is(.vibe-widget, .palette-probe)-copy) {
  margin: 0;
  color: color-mix(in srgb, var(--ink-soft) 88%, var(--ink) 12%);
  max-inline-size: 70ch;
}

:where(
  .vibe-widget-kicker,
  .vibe-widget-title,
  .vibe-widget-copy,
  .palette-probe-kicker,
  .palette-probe-title,
  .palette-probe-copy
) {
  overflow-wrap: anywhere;
}

:where(:is(.vibe-widget, .palette-probe, .wonder-memory)-actions, .palette-probe-paths) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

:where(:is(.vibe-widget, .palette-probe, .wonder-memory)-actions > *, .vibe-widget-meta > *, .palette-probe-paths > *) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(:is(.vibe-widget, .wonder-memory, .palette-probe)-actions :is(.operator-chip, .spec-pill)[data-site-setting-active="true"],
       :is(.vibe-widget, .palette-probe)-actions [data-spw-palette-probe-active="true"]) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 64%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 90%, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 10%);
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 38%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 14%, transparent);
  color: var(--ink);
}

:where(.vibe-widget-meta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  align-items: center;
}

:where(:is(.vibe-widget, .palette-probe)-state) {
  color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 74%, var(--ink) 26%);
  font-weight: 600;
}

:where(.vibe-widget-status) {
  min-block-size: 1.15rem;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.8rem);
}

:where(.vibe-widget-status[data-status="info"]) {
  color: color-mix(in srgb, var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)) 68%, var(--ink) 32%);
}

:where(.vibe-widget-status[data-status="success"]) {
  color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 72%, var(--ink) 28%);
}

/* Wonder Memory */
:where(.wonder-memory-strip) {
  display: grid;
  gap: 0.65rem;
  margin-block: 0.2rem 0.35rem;
  padding: 0.8rem 0.95rem;
  border: 1px dashed color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 28%, transparent);
  border-radius: calc(var(--shape-surface, 10px) - 2px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 10%, var(--surface-strong, rgba(255, 255, 255, 0.92))) 0%,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 94%, transparent) 58%,
      color-mix(in srgb, var(--delight-color, var(--op-object-color, #c68a22)) 8%, var(--surface-panel-strong, rgba(255, 255, 255, 0.94))) 100%
    );
}

:where(.wonder-memory-actions .operator-chip[data-site-setting-active="true"]) {
  color: var(--wonder-accent-color, var(--active-op-color, #008080));
}

/* Palette Probe */
:where(.palette-probe-header) {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

:where(:is(.vibe-widget, .wonder-memory, .palette-probe)-actions .operator-chip, .market-card .operator-chip) {
  justify-content: center;
}

:where(.palette-probe-swatches) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.44rem;
  align-items: center;
}

:where(.palette-probe-chip) {
  inline-size: 1.18rem;
  block-size: 1.18rem;
  border-radius: 0.42rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1, var(--spw-shell-line)) 16%, var(--spw-shell-line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 18%, transparent),
    0 3px 8px rgba(17, 18, 20, 0.04);
}

:where(.palette-probe-chip:nth-child(1)) { background: var(--spw-palette-probe-1, var(--active-op-color, #008080)); }
:where(.palette-probe-chip:nth-child(2)) { background: var(--spw-palette-probe-2, var(--op-object-color, #c68a22)); }
:where(.palette-probe-chip:nth-child(3)) { background: var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)); }
:where(.palette-probe-chip:nth-child(4)) { background: var(--spw-palette-probe-4, var(--op-probe-color, #6a3fb8)); }

/* Theme Packs */
:where(.theme-pack-chip-row) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  align-items: center;
}

:where(.theme-pack-chip-btn) {
  --theme-pack-preview-light: linear-gradient(135deg, #fff7ec 0%, #f2e4cf 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #232a30 0%, #11161a 100%);
  appearance: none;
  inline-size: 1.48rem;
  block-size: 1.48rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 30%, var(--spw-shell-line));
  border-radius: var(--shape-control, 0.78rem);
  background:
    var(--theme-pack-preview-light) top / 100% 50% no-repeat,
    var(--theme-pack-preview-dark) bottom / 100% 50% no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 12px rgba(17, 18, 20, 0.08);
  cursor: pointer;
  transition:
    transform var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.theme-pack-chip-btn:is(:hover, :focus-visible)) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--active-op-color, #008080) 28%, var(--line-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 6px 14px rgba(17, 18, 20, 0.12);
}

:where(.theme-pack-chip-btn[data-site-setting-active="true"]) {
  border-color: color-mix(in srgb, var(--active-op-color, #008080) 54%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, #008080) 18%, transparent),
    0 8px 16px rgba(17, 18, 20, 0.14);
}

:where(.theme-pack-chooser) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: 0.7rem;
}

:where(.theme-pack-swatch) {
  --theme-pack-preview-light: linear-gradient(135deg, #fff7ec 0%, #f2e4cf 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #232a30 0%, #11161a 100%);
  appearance: none;
  display: grid;
  gap: 0.5rem;
  padding: 0.82rem 0.88rem 0.9rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--line-strong) 18%, var(--spw-shell-line));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), transparent 60%),
    var(--spw-shell-panel-bg-strong);
  box-shadow: var(--card-highlight), var(--card-shadow);
  cursor: pointer;
  transition:
    transform var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    background-color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.theme-pack-swatch:is(:hover, :focus-visible)) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--active-op-color, #008080) 30%, var(--line-strong));
}

:where(.theme-pack-swatch[data-site-setting-active="true"]) {
  border-color: color-mix(in srgb, var(--active-op-color, #008080) 50%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--active-op-color, #008080) 10%, var(--surface-strong)) 0%, transparent 66%),
    var(--spw-shell-panel-bg-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, #008080) 16%, transparent),
    var(--card-highlight),
    var(--card-shadow);
}

:where(.theme-pack-swatch__header) {
  display: grid;
  gap: 0.18rem;
}

:where(.theme-pack-swatch__label) {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.16;
}

:where(.theme-pack-swatch__tone) {
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where(.theme-pack-swatch__palettes) {
  display: grid;
  gap: 0.28rem;
  align-content: end; /* stable alignment of the two mini bars even when header text wraps */
}

:where(.theme-pack-swatch__palette) {
  min-block-size: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--line-strong) 12%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:where(.theme-pack-swatch__palette[data-theme-pack-variant="light"]) {
  background: var(--theme-pack-preview-light);
}

:where(.theme-pack-swatch__palette[data-theme-pack-variant="dark"]) {
  background: var(--theme-pack-preview-dark);
}

:where([data-theme-pack-preview="neutral-paper"]) {
  --theme-pack-preview-light: linear-gradient(135deg, #f7efdc 0%, #efe5ce 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #1d2429 0%, #0f1418 100%);
}

:where([data-theme-pack-preview="oxide-ledger"]) {
  --theme-pack-preview-light: linear-gradient(135deg, #f6e8d4 0%, #ceb184 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #382821 0%, #17110d 100%);
}

:where([data-theme-pack-preview="electric-studio"]) {
  --theme-pack-preview-light: linear-gradient(135deg, #e6f4ff 0%, #74b8ff 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #10182a 0%, #2c45a5 100%);
}

:where([data-theme-pack-preview="ritual-vellum"]) {
  --theme-pack-preview-light: linear-gradient(135deg, #f6ecdd 0%, #caa7c7 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #261a2d 0%, #5f3358 100%);
}

:where([data-theme-pack-preview="copper-brace"]) {
  --theme-pack-preview-light: linear-gradient(135deg, #fae7d7 0%, #cb7a41 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #291912 0%, #6c462d 100%);
}

:where([data-theme-pack-preview="glass-console"]) {
  --theme-pack-preview-light: linear-gradient(135deg, #edf5fb 0%, #9bc2de 100%);
  --theme-pack-preview-dark: linear-gradient(135deg, #141d24 0%, #2b4f69 100%);
}

:where(.context-readout) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.45rem 0.6rem;
}

:where(.context-readout > div) {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

:where(.context-readout dt, .context-readout dd) {
  margin: 0;
}

:where(.context-readout dt) {
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.78rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  :where(:is(.vibe-widget, .palette-probe)-actions, .palette-probe-paths) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  :where(:is(.vibe-widget, .palette-probe)-actions > *, .palette-probe-paths > *) {
    width: 100%;
    min-width: 0;
  }

  :where(.palette-probe, .vibe-widget) {
    gap: 0.68rem;
  }
}

/* ==========================================================================
   Compact contextual tuning clusters (low-verbosity, low-friction widgets)
   Used for paletteResonance, wonderMemory, semanticDensity, operatorSaturation,
   themePack, colorMode etc. near demonstrative content. Reuses the existing
   data-site-setting-set + sync system 100%.
   ========================================================================== */

:where(.tuning-strip, .vibe-widget--compact) {
  --tuning-strip-gap: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tuning-strip-gap);
  align-items: center;
}

:where(.tuning-strip > .operator-chip,
       .vibe-widget--compact .operator-chip) {
  font-size: 0.8rem;
  padding: 0.18rem 0.55rem;
  min-height: 1.6rem; /* comfortable touch target while staying compact */
}

/* Stronger, unmistakable active state for compact clusters.
   Uses the live resonance probe colors so it feels connected to the current
   paletteResonance setting. Wins over generic pressed states in most contexts. */
:where(.tuning-strip, .vibe-widget--compact)
  :is(.operator-chip, .spec-pill)[data-site-setting-active="true"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 70%),
    color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 18%, var(--surface-strong, rgba(255,255,255,0.96)));
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 52%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 22%, transparent),
    0 1px 3px rgba(0,0,0,0.06);
  color: var(--ink);
  font-weight: 600;
  transform: translateY(-0.5px);
}

:where(.tuning-strip .operator-chip[data-site-setting-active="true"]::after,
       .vibe-widget--compact .operator-chip[data-site-setting-active="true"]::after) {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: var(--spw-palette-probe-1, var(--active-op-color, #008080));
  margin-left: 0.35em;
  vertical-align: middle;
  opacity: 0.9;
}

/* Broad fallback: give every standalone data-site-setting-set operator-chip the strong resonance-colored active treatment.
   This improves visual clarity everywhere with zero markup changes (addresses scattered active styling across surfaces). */
:where(.operator-chip[data-site-setting-active="true"]:not(.tuning-strip *):not(.vibe-widget--compact *)) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 68%),
    color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 14%, var(--surface-strong, rgba(255,255,255,0.94)));
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 46%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 18%, transparent);
  color: var(--ink);
  font-weight: 600;
}

/* Responsive packing: never let compact strips become awkward vertical stacks on narrow screens */
@media (max-width: 520px) {
  :where(.tuning-strip, .vibe-widget--compact) {
    --tuning-strip-gap: 0.32rem;
  }
  :where(.tuning-strip > .operator-chip,
         .vibe-widget--compact .operator-chip) {
    font-size: 0.78rem;
    padding: 0.16rem 0.48rem;
  }
}
}

/* /public/css/systems/surfaces/tuning-discoverability.css */
@layer systems {
/* ==========================================================================
   surfaces/tuning-discoverability.css
   --------------------------------------------------------------------------
   Marginalia and discoverability for embedded tuning surfaces — the site as
   a magic book whose presentation can be explored without rewriting content.
   ========================================================================== */

:where(html[data-spw-tuning-discoverability="ambient"], html[data-spw-tuning-discoverability="revealed"]) {
  --tuning-marginalia-opacity: 0.42;
  --tuning-edge-strength: 0.14;
  --tuning-pulse-color: var(--active-op-color, #008080);
}

:where(html[data-spw-tuning-discoverability="revealed"]) {
  --tuning-marginalia-opacity: 0.88;
  --tuning-edge-strength: 0.28;
}

/* Ambient vellum edge on outermost tunable scopes */
:where(html[data-spw-tuning-discoverability="ambient"], html[data-spw-tuning-discoverability="revealed"])
  :where(
    [data-spw-tuning-surface="true"][data-site-settings-scope],
    [data-spw-tuning-surface="true"][data-spw-affordance="tune"]
  ) {
  position: relative;
  border-inline-start: 2px solid color-mix(
    in srgb,
    var(--tuning-pulse-color) calc(var(--tuning-edge-strength) * 100%),
    transparent
  );
  background-image:
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--tuning-pulse-color) 5%, transparent),
      transparent 42%
    );
  transition:
    border-color 220ms var(--ease-mechanical, ease),
    background-image 260ms var(--ease-mechanical, ease);
}

:where(html[data-spw-tuning-discoverability="revealed"])
  :where(
    [data-spw-tuning-surface="true"][data-site-settings-scope],
    [data-spw-tuning-surface="true"][data-spw-affordance="tune"],
    [data-spw-tuning-surface="true"][data-site-settings-panel],
    [data-spw-tuning-surface="true"].vibe-widget
  ) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tuning-pulse-color) 12%, transparent),
    inset 3.2rem 0 0 -3rem color-mix(in srgb, var(--tuning-pulse-color) 6%, transparent);
}

:where(html[data-spw-tuning-discoverability="ambient"], html[data-spw-tuning-discoverability="revealed"])
  :where([data-spw-tuning-surface="true"]:is(:hover, :focus-within)) {
  border-inline-start-color: color-mix(in srgb, var(--tuning-pulse-color) 38%, transparent);
}

/* Corner marginalia sigils (revealed mode) */
:where(.spw-tuning-marginalia) {
  position: absolute;
  inset-block-start: 0.42rem;
  inset-inline-end: 0.5rem;
  z-index: 2;
  display: inline-flex;
  gap: 0.22rem;
  align-items: center;
  padding: 0.12rem 0.34rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--tuning-pulse-color) 28%, transparent);
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 88%, var(--tuning-pulse-color) 12%);
  color: color-mix(in srgb, var(--tuning-pulse-color) 72%, var(--ink) 28%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 1;
  opacity: var(--tuning-marginalia-opacity, 0.5);
  pointer-events: none;
  text-transform: uppercase;
}

:where([data-spw-tuning-pulse="true"]) {
  animation: spw-tuning-pulse 1.1s var(--ease-mechanical, ease);
}

@keyframes spw-tuning-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
  38% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--tuning-pulse-color) 34%, transparent),
      0 0 0 6px color-mix(in srgb, var(--tuning-pulse-color) 12%, transparent);
  }
}

/* Shell lexicon strip — reading weather vocabulary in the header menu */
:where(.spw-tuning-lexicon-strip) {
  display: grid;
  gap: 0.38rem;
  inline-size: 100%;
  padding: 0.48rem 0.55rem 0.55rem;
  border-block-start: 1px solid color-mix(in srgb, var(--spw-shell-chrome-accent-local, var(--active-op-color)) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 92%, var(--active-op-color) 8%), transparent 72%);
}

:where(.spw-shell-tools-disclosure:not([open]) .spw-tuning-lexicon-strip) {
  display: none;
}

:where(.spw-tuning-lexicon-strip__kicker) {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:where(.spw-tuning-lexicon-strip__chips) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

:where(.spw-tuning-lexicon-chip) {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-block-size: 1.45rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 90%, var(--active-op-color) 10%);
  color: var(--ink);
  font-size: 0.62rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

:where(.spw-tuning-lexicon-chip__sigil) {
  opacity: 0.78;
}

:where(.spw-tuning-lexicon-strip__meta) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.62rem;
  line-height: 1.35;
}

:where(.spw-tuning-lexicon-strip__actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  align-items: center;
}

:where(.spw-tuning-lexicon-strip__actions .spw-shell-utility-button) {
  min-block-size: 1.5rem;
  padding-inline: 0.5rem;
  font-size: 0.58rem;
}

/* Settings route vocabulary atlas */
:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary) {
  display: grid;
  gap: 0.65rem;
  margin-block: 0.85rem 0.2rem;
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary__grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.55rem;
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary-card) {
  display: grid;
  gap: 0.28rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color) 14%, var(--line));
  border-radius: calc(var(--shape-surface, 10px) - 2px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--active-op-color) 6%, var(--surface-strong)), transparent 58%),
    var(--surface-strong);
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary-card__topline) {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary-card__sigil) {
  font-size: 0.82rem;
  opacity: 0.82;
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary-card strong) {
  font-size: 0.92rem;
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary-card p) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

:where(body[data-spw-surface="settings"] .spw-tuning-vocabulary-card__relation) {
  color: color-mix(in srgb, var(--active-op-color) 58%, var(--ink-soft) 42%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
}

/* /public/css/systems/surfaces/learnability-ledger.css */
@layer systems {
/* ==========================================================================
   surfaces/learnability-ledger.css
   --------------------------------------------------------------------------
   Metacognitive posture, feature learnability, layout-contract alignment,
   and gesture resonance — accounting for how the visitor relates to Spw
   features without rewriting authored content.
   ========================================================================== */

:where(html[data-spw-learnability-ledger="active"]) {
  --learnability-resonance-color: var(--active-op-color, #008080);
}

/* Footer posture accounting */
.site-footer__page-architecture-meta[data-spw-learnability-posture] {
  color: var(--ink-muted, rgba(14, 18, 20, 0.58));
  font-size: var(--text-size-2xs, 0.72rem);
  line-height: 1.45;
}

.site-footer__page-architecture-meta [data-spw-learnability-stance-label] {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

html[data-spw-learnability-resonance] .site-footer__page-architecture-meta[data-spw-learnability-posture] {
  color: color-mix(in srgb, var(--learnability-resonance-color) 42%, var(--ink-muted, rgba(14, 18, 20, 0.58)));
}

/* Layout contract alignment (developmental indicators) */
html[data-spw-developmental-indicators="on"] :where([data-spw-layout-contract="implicit"]) {
  outline: 1px dotted color-mix(in srgb, var(--op-probe-color, #4a2180) 24%, transparent);
  outline-offset: 3px;
}

html[data-spw-developmental-indicators="on"] :where([data-spw-layout-contract="slotted"]) {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--active-op-color) 10%, transparent);
}

html[data-spw-developmental-indicators="on"] :where([data-spw-layout-contract="feature-gestural"]) {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--op-action-color) 14%, transparent);
}

/* Feature tier discoverability */
html[data-spw-metacognitive-stance="composer"] :where([data-spw-learnability-tier="interactive"]),
html[data-spw-metacognitive-stance="composer"] :where([data-spw-learnability-tier="gestural"]) {
  --spw-perspective-salience: max(var(--spw-perspective-salience, 0), 0.32);
}

html[data-spw-metacognitive-stance="explorer"] :where([data-spw-learnability-tier="named"]) {
  --spw-perspective-salience: max(var(--spw-perspective-salience, 0), 0.24);
}

html[data-spw-metacognitive-stance="integrator"] :where([data-spw-layout-contract="slotted"]) {
  border-inline-start: 2px solid color-mix(in srgb, var(--op-ref-color) 18%, transparent);
}

html[data-spw-metacognitive-stance="overflow"] :where([data-spw-feature]) {
  --spw-perspective-salience: max(var(--spw-perspective-salience, 0), 0.28);
}

html[data-spw-developmental-indicators="on"] :where([data-spw-feature]) {
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0 calc(1px * var(--spw-perspective-salience, 0))
    color-mix(in srgb, var(--spw-perspective-salience-color, var(--active-op-color)) 36%, transparent);
}

html[data-spw-developmental-indicators="on"] :where([data-spw-feature]:is(:hover, :focus-within)) {
  --spw-perspective-salience: max(var(--spw-perspective-salience, 0), 0.62);
}

/* Process-attention resonance with gesture anatomy */
html[data-spw-learnability-process="compose"] :where([data-spw-gesture-hint])::after,
html[data-spw-learnability-process="trace"] :where([data-spw-gesture-hint])::after {
  border-color: color-mix(in srgb, var(--op-action-color) 34%, transparent);
}

html[data-spw-learnability-process="scan"] :where(.spw-tuning-marginalia) {
  opacity: max(var(--tuning-marginalia-opacity, 0.5), 0.72);
}

html[data-spw-learnability-resonance] :where(
  [data-spw-feature="cauldron"],
  [data-spw-tuning-surface="true"],
  [data-spw-gesture-hint]
) {
  animation: learnability-resonance-pulse 1.1s ease-out 1;
}

@keyframes learnability-resonance-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--learnability-resonance-color) 24%, transparent);
  }
  70% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--learnability-resonance-color) 8%, transparent);
  }
  100% {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-spw-learnability-resonance] :where(
    [data-spw-feature="cauldron"],
    [data-spw-tuning-surface="true"],
    [data-spw-gesture-hint]
  ) {
    animation: none;
  }
}
}

/* /public/css/systems/surfaces/palette-depth.css */
@layer systems {
/* ==========================================================================
   surfaces/palette-depth.css
   --------------------------------------------------------------------------
   Palette depth layers: shadow, wash, glow, and atmospheric probes that make
   theme packs and resonance bias feel like layered metaphysical material.
   ========================================================================== */

:root {
  --palette-depth-strength: 1;
  --spw-palette-depth-shadow: color-mix(
    in srgb,
    var(--spw-palette-probe-1, var(--active-op-color)) calc(58% * var(--palette-depth-strength)),
    #101418 calc(42% * var(--palette-depth-strength))
  );
  --spw-palette-depth-mid: color-mix(
    in srgb,
    var(--spw-palette-probe-2, var(--op-object-color)) calc(44% * var(--palette-depth-strength)),
    var(--surface-strong) calc(56% * var(--palette-depth-strength))
  );
  --spw-palette-depth-highlight: color-mix(
    in srgb,
    var(--spw-palette-probe-1, var(--active-op-color)) calc(24% * var(--palette-depth-strength)),
    #fff calc(76% * var(--palette-depth-strength))
  );
  --spw-palette-depth-wash: color-mix(
    in srgb,
    var(--spw-palette-probe-1, var(--active-op-color)) calc(9% * var(--palette-depth-strength)),
    transparent
  );
  --spw-palette-depth-glow: color-mix(
    in srgb,
    var(--spw-palette-probe-4, var(--op-probe-color)) calc(18% * var(--palette-depth-strength)),
    transparent
  );
  --spw-palette-depth-field: color-mix(
    in srgb,
    var(--spw-palette-probe-3, var(--op-ref-color)) calc(12% * var(--palette-depth-strength)),
    var(--surface-strong) calc(88% * var(--palette-depth-strength))
  );
}

html[data-spw-color-tuner="soft"] {
  --palette-depth-strength: 0.72;
  --pigment-lighting-guard: 0.22;
}

html[data-spw-color-tuner="guarded"],
html[data-spw-high-contrast="on"] {
  --palette-depth-strength: 1.18;
  --pigment-lighting-guard: 0.52;
}

/* Resonance-specific depth bias */
html[data-spw-palette-resonance="craft"] {
  --spw-palette-depth-mid: color-mix(in srgb, var(--spw-palette-probe-2) 52%, var(--spw-palette-probe-3) 48%);
  --spw-palette-depth-wash: color-mix(in srgb, var(--spw-palette-probe-2) 11%, transparent);
}

html[data-spw-palette-resonance="software"] {
  --spw-palette-depth-glow: color-mix(in srgb, var(--spw-palette-probe-3) 22%, transparent);
  --spw-palette-depth-field: color-mix(in srgb, var(--spw-palette-probe-1) 10%, var(--surface-strong) 90%);
}

html[data-spw-palette-resonance="math"] {
  --spw-palette-depth-highlight: color-mix(in srgb, var(--spw-palette-probe-4) 20%, #fff 80%);
  --spw-palette-depth-shadow: color-mix(in srgb, var(--spw-palette-probe-3) 48%, #0d1218 52%);
}

/* Theme pack atmospheric depth */
html[data-spw-theme-pack="ritual-vellum"] {
  --spw-palette-depth-wash: color-mix(in srgb, var(--spw-palette-probe-4) 14%, transparent);
  --spw-palette-depth-field: color-mix(in srgb, var(--spw-palette-probe-2) 8%, var(--surface-strong) 92%);
}

html[data-spw-theme-pack="oxide-ledger"],
html[data-spw-theme-pack="copper-brace"] {
  --spw-palette-depth-mid: color-mix(in srgb, var(--spw-palette-probe-2) 58%, var(--spw-palette-probe-1) 42%);
  --spw-palette-depth-shadow: color-mix(in srgb, var(--spw-palette-probe-2) 36%, #1a100c 64%);
}

html[data-spw-theme-pack="electric-studio"],
html[data-spw-theme-pack="glass-console"] {
  --spw-palette-depth-glow: color-mix(in srgb, var(--spw-palette-probe-3) 26%, transparent);
  --spw-palette-depth-highlight: color-mix(in srgb, var(--spw-palette-probe-1) 18%, #fff 82%);
}

/* Apply depth to tuning surfaces and palette probes */
:where(.vibe-widget, .palette-probe) {
  background:
    radial-gradient(circle at 84% 8%, var(--spw-palette-depth-glow), transparent 38%),
    linear-gradient(
      155deg,
      var(--spw-palette-depth-wash),
      transparent 48%,
      color-mix(in srgb, var(--spw-palette-depth-field) 72%, transparent) 100%
    ),
    var(--spw-shell-panel-bg-strong, var(--surface-strong));
  box-shadow:
    inset 0 1px 0 var(--spw-palette-depth-highlight),
    inset 0 -1px 0 color-mix(in srgb, var(--spw-palette-depth-shadow) 22%, transparent),
    var(--card-highlight, none),
    var(--card-shadow, none);
}

:where(.palette-probe-chip--depth-shadow) {
  background: var(--spw-palette-depth-shadow);
}

:where(.palette-probe-chip--depth-highlight) {
  background: var(--spw-palette-depth-highlight);
}

:where(.palette-probe-chip--depth-glow) {
  background: var(--spw-palette-depth-glow);
}

:where(.palette-probe-swatches--depth) {
  gap: 0.34rem;
  margin-block-start: 0.12rem;
  padding: 0.28rem 0.34rem;
  border: 1px dashed color-mix(in srgb, var(--spw-palette-probe-3) 16%, transparent);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--spw-palette-depth-field) 42%, transparent);
}

:where(.palette-probe-swatches--depth)::before {
  content: "depth";
  display: inline-flex;
  align-items: center;
  margin-inline-end: 0.18rem;
  color: var(--ink-soft);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.palette-probe-chip--depth-shadow, .palette-probe-chip--depth-highlight, .palette-probe-chip--depth-glow) {
  inline-size: 1.02rem;
  block-size: 1.02rem;
  border-radius: 999px;
}

:where(.palette-probe-swatches) {
  position: relative;
}

:where(.palette-probe-swatches)::after {
  content: "";
  position: absolute;
  inset: -0.18rem;
  border-radius: 0.55rem;
  background: radial-gradient(circle at 30% 20%, var(--spw-palette-depth-glow), transparent 62%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

:where(.palette-probe-chip) {
  position: relative;
  z-index: 1;
}

/* Shell theme utility depth */
:where(.spw-shell-theme-utility) {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.1rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1) 14%, var(--spw-shell-line));
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--spw-palette-depth-highlight), transparent 58%),
    color-mix(in srgb, var(--surface-strong) 88%, var(--spw-palette-depth-wash) 12%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--spw-palette-depth-highlight) 40%, transparent);
}

:where(.spw-shell-theme-utility .theme-pack-chip-btn) {
  inline-size: 1.22rem;
  block-size: 1.22rem;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 5px color-mix(in srgb, var(--spw-palette-depth-shadow) 18%, transparent);
}

:where(.spw-shell-theme-utility .theme-pack-chip-btn[data-site-setting-active="true"]) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1) 34%, transparent),
    0 0 0 2px var(--spw-palette-depth-glow);
}

/* Live resonance swatches beside the cycle control */
:where(.spw-shell-resonance-utility) {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.1rem 0.14rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1) 12%, var(--spw-shell-line));
  border-radius: 999px;
  background:
    radial-gradient(circle at 80% 12%, var(--spw-palette-depth-glow), transparent 58%),
    color-mix(in srgb, var(--surface-strong) 90%, var(--spw-palette-depth-wash) 10%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--spw-palette-depth-highlight) 34%, transparent);
}

:where(.spw-shell-resonance-utility .palette-probe-chip--shell) {
  inline-size: 0.68rem;
  block-size: 0.68rem;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 3px color-mix(in srgb, var(--spw-palette-depth-shadow) 14%, transparent);
}

:where(.spw-shell-resonance-utility .palette-probe-chip--shell:nth-child(1)) {
  background: var(--spw-palette-probe-1, var(--active-op-color, #008080));
}

:where(.spw-shell-resonance-utility .palette-probe-chip--shell:nth-child(2)) {
  background: var(--spw-palette-probe-2, var(--op-object-color, #c68a22));
}

:where(.spw-shell-resonance-utility .palette-probe-chip--shell:nth-child(3)) {
  background: var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3));
}

:where(.spw-shell-resonance-utility .palette-probe-chip--shell:nth-child(4)) {
  background: var(--spw-palette-probe-4, var(--op-probe-color, #6a3fb8));
}
}

/* /public/css/systems/surfaces/reading-layout.css */
@layer systems {
/* ==========================================================================
   surfaces/reading-layout.css
   --------------------------------------------------------------------------
   Reading posture and vertical flow — newspaper-dense desktop columns,
   diverse mobile section rhythm, and attention-architecture coupling.
   Driven by html[data-spw-layout-tuner] and html[data-spw-layout-flow].
   ========================================================================== */

/* Newspaper posture tokens (desktop-first) */
html[data-spw-layout-tuner="newspaper"] {
  --site-line-height: 1.52;
  --site-line-height-tight: 1.28;
  --measure-reading: var(--spw-layout-measure, 54ch);
  --spw-flow-space: 0.72rem;
  --page-stack-gap: clamp(0.75rem, 1.4vw, 1rem);
  --page-section-gap: clamp(0.85rem, 1.5vw, 1.2rem);
  --surface-gap: clamp(0.62rem, 1.1vw, 0.82rem);
  --text-rhythm-drag: 0.34;
  --text-flow-variable: 1.08;
  --spw-grid-min-base: 11.25rem;
  --spw-grid-min-mid: 10.75rem;
  --spw-grid-gap-base: 0.56rem;
  --spw-grid-gap-mid: 0.52rem;
  --semantic-metadata-font-size: 0.52rem;
}

html[data-spw-layout-tuner="newspaper"] main > article {
  gap: var(--page-section-gap);
}

html[data-spw-layout-tuner="newspaper"] :where(p, li, .frame-note, .frame-copy) {
  font-size: clamp(0.94rem, 0.9rem + 0.08vw, 1.02rem);
  line-height: var(--site-line-height, 1.52);
  hyphens: auto;
}

html[data-spw-layout-tuner="newspaper"] :where(h2) {
  font-size: clamp(1.18rem, 1.05rem + 0.35vw, 1.42rem);
  margin-block-end: 0.35rem;
}

html[data-spw-layout-tuner="newspaper"] :where(h3) {
  font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.16rem);
}

@media (min-width: 64rem) {
  html[data-spw-layout-tuner="newspaper"] :where(.frame-body, .frame-copy, [data-spw-slot="body"]) {
    column-count: 2;
    column-gap: clamp(1rem, 2vw, 1.45rem);
    column-rule: 1px solid color-mix(in srgb, var(--paper-rule, rgba(14, 18, 20, 0.12)) 88%, transparent);
    column-fill: balance;
  }

  html[data-spw-layout-tuner="newspaper"] :where(.frame-body, .frame-copy) > :is(h2, h3, figure, .frame-grid, .site-frame, pre, blockquote) {
    break-inside: avoid;
    column-span: all;
  }

  html[data-spw-layout-tuner="newspaper"] :where(.frame-grid--dense, .frame-grid[data-spw-density="dense"]) {
    grid-template-columns: repeat(auto-fill, minmax(var(--spw-layout-column-min, 11.25rem), 1fr));
    gap: 0.52rem;
  }

  html[data-spw-layout-tuner="newspaper"] :where(.frame-card, .site-frame) {
    --component-pad: 0.68rem;
    --component-gap-tight: 0.34rem;
  }
}

/* Mobile vertical ribbon — alternating section rhythm */
html[data-spw-layout-flow="vertical-ribbon"] main > article {
  gap: clamp(0.9rem, 3.2vw, 1.35rem);
}

@media (max-width: 48rem) {
  html[data-spw-layout-flow="vertical-ribbon"] main > article > :where(.site-frame, section.site-frame) {
    --spw-mobile-rhythm: stack;
  }

  html[data-spw-layout-flow="vertical-ribbon"] main > article > :where(.site-frame, section.site-frame):nth-child(3n + 1) {
    --spw-mobile-rhythm: full-bleed;
    margin-inline: calc(var(--page-gutter-inline, 1rem) * -0.42);
    border-radius: 0;
    border-inline: none;
  }

  html[data-spw-layout-flow="vertical-ribbon"] main > article > :where(.site-frame, section.site-frame):nth-child(3n + 2) {
    --spw-mobile-rhythm: inset;
  }

  html[data-spw-layout-flow="vertical-ribbon"] main > article > :where(.site-frame, section.site-frame):nth-child(3n) {
    --spw-mobile-rhythm: ribbon;
    padding-block: 0.35rem;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  html[data-spw-layout-flow="vertical-ribbon"] main > article > :where(.site-frame, section.site-frame):nth-child(3n)::before {
    opacity: 0.28;
  }

  html[data-spw-layout-flow="vertical-ribbon"] :where(.frame-grid, .frame-grid--dense) {
    grid-template-columns: 1fr;
    gap: 0.78rem;
  }

  html[data-spw-layout-flow="vertical-ribbon"] :where(.frame-card--illustrated .frame-card-media) {
    max-block-size: 10.5rem;
  }
}

/* Attention architecture: active section emphasis */
html[data-spw-page-section-phase="settled"] :where(
  .site-frame[data-spw-section-state="active"],
  section[data-spw-section-state="active"]
) {
  border-color: color-mix(in srgb, var(--active-op-color) 22%, var(--line, transparent));
}

html[data-spw-page-section-phase="traveling"] :where(
  .site-frame[data-spw-section-state="active"],
  section[data-spw-section-state="active"]
) {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--active-op-color) 42%, transparent),
    var(--card-shadow, none);
  transition: box-shadow 280ms var(--ease-settle, ease);
}

html[data-spw-reading-groove="on"][data-spw-layout-flow="vertical-ribbon"] :where(
  [data-spw-reading-beat-role="heading"][data-spw-reading-beat="lead"]
) {
  letter-spacing: -0.018em;
  padding-block-start: 0.12rem;
}

/* Section handle alignment with vertical flow */
@media (max-width: 48rem) {
  html[data-spw-layout-flow="vertical-ribbon"] :where(.spw-section-handle-shell) {
    inset-inline: max(0.45rem, env(safe-area-inset-left)) max(0.45rem, env(safe-area-inset-right));
    max-inline-size: calc(100vw - 0.9rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-spw-page-section-phase="traveling"] :where(
    .site-frame[data-spw-section-state="active"],
    section[data-spw-section-state="active"]
  ) {
    transition: none;
  }
}
}

/* /public/css/systems/surfaces/philosophy.css */
@layer systems {
/* ==========================================================================
   surfaces/philosophy.css
   --------------------------------------------------------------------------
   Intent lattices, context edges, and semantic contracts.
   ========================================================================== */

:where(body[data-spw-surface="software"]) {
  --spw-philosophy-panel:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 94%, transparent),
      color-mix(in srgb, var(--surface-panel, rgba(244, 241, 236, 0.96)) 94%, transparent)
    );
  --spw-philosophy-paper:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.96)) 96%, transparent),
      color-mix(in srgb, var(--surface-panel-strong, rgba(246, 244, 240, 0.96)) 96%, transparent)
    );
  --spw-philosophy-line:
    color-mix(in srgb, var(--active-op-color, #008080) 20%, var(--spw-shell-line));
}

:where(.intent-lattice, .context-edges, .semantic-contract-grid) {
  display: grid;
  gap: var(--spw-shell-panel-gap);
  margin-block: var(--space-sm, 0.8rem) var(--space-md, 1rem);
}

:where(.intent-lattice, .semantic-contract-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

:where(.semantic-contract-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

:where(.intent-cluster, .context-edge-card, .semantic-contract-card) {
  display: grid;
  gap: 0.72rem;
  min-width: 0;
  padding: clamp(0.95rem, 1.7vw, 1.15rem);
  border: 1px solid var(--spw-philosophy-line, var(--spw-shell-line));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(.intent-cluster, .semantic-contract-card) {
  background: var(--spw-philosophy-panel, var(--spw-shell-card-bg-strong));
}

:where(.intent-cluster) {
  --intent-accent: var(--active-op-color, #008080);
  border-color: color-mix(in srgb, var(--intent-accent) 22%, var(--spw-philosophy-line, var(--spw-shell-line)));
}

:where(.intent-cluster[data-spw-intent="orient"])  { --intent-accent: var(--op-frame-color, #178282); }
:where(.intent-cluster[data-spw-intent="inspect"]) { --intent-accent: var(--op-probe-color, #4a2180); }
:where(.intent-cluster[data-spw-intent="commit"])  { --intent-accent: var(--op-action-color, #0c5f5f); }
:where(.intent-cluster[data-spw-intent="project"]) { --intent-accent: var(--op-surface-color, #178282); }

:where(.intent-cluster-kicker) {
  margin: 0;
  color: color-mix(in srgb, var(--intent-accent) 70%, var(--ink-soft));
  font-size: var(--text-size-xs, 0.76rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:where(.intent-cluster h3, .context-edge-card h3) {
  margin: 0;
  font-size: clamp(1rem, 1.1rem + 0.22vw, 1.18rem);
  text-wrap: balance;
}

:where(.intent-cluster ul, .context-edge-list) {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.intent-cluster li > a, .context-edge-list li > a) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

:where(.intent-cluster li > a:is(:hover, :focus-visible),
       .context-edge-list li > a:is(:hover, :focus-visible)) {
  text-decoration: underline;
}

:where(.intent-token, .semantic-contract-token) {
  flex: 0 0 auto;
  padding: 0.12rem 0.42rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, currentColor 74%, var(--ink-soft));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

:where(.intent-link-note, .context-edge-note) {
  display: block;
  margin-top: 0.24rem;
  color: var(--ink-soft);
  font-size: var(--text-size-sm, 0.9rem);
  line-height: 1.5;
}

/* Context Edges */
:where(.context-edges) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--space-md, 1rem);
}

:where(.context-edge-card) {
  --edge-accent: var(--active-op-color, #008080);
  border-color: color-mix(in srgb, var(--edge-accent) 24%, var(--spw-philosophy-line, var(--spw-shell-line)));
  background: var(--spw-philosophy-paper, var(--spw-shell-card-bg));
}

:where(.context-edge-card[data-spw-edge="nearby"])     { --edge-accent: var(--op-ref-color, #1d57a3); }
:where(.context-edge-card[data-spw-edge="subsequent"]) { --edge-accent: var(--op-probe-color, #4a2180); }
:where(.context-edge-card[data-spw-edge="projected"])  { --edge-accent: var(--op-surface-color, #178282); }

/* Semantic Contracts */
:where(.semantic-contract-card) {
  border-color: color-mix(in srgb, var(--spw-philosophy-line, var(--spw-shell-line-strong)) 70%, transparent);
}

:where(.semantic-contract-token) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  background: color-mix(in srgb, var(--active-op-color, #008080) 6%, var(--surface-strong, rgba(255, 255, 255, 0.72)));
  color: color-mix(in srgb, var(--active-op-color, #008080) 76%, var(--ink) 24%);
  font-size: 0.76rem;
}

:where(.semantic-contract-card strong) {
  color: var(--ink);
  font-size: 1rem;
}

:where(.semantic-contract-card p) {
  margin: 0;
  color: var(--ink-soft);
}
}

/* /public/css/handles/cognitive-handles.css */
@layer handles {
/* ==========================================================================
   cognitive-handles.css
   --------------------------------------------------------------------------
   Purpose:
   - Semantic affordances for depth, phase, relation, and foldable layers.
   - Handles should read as paper creases and Spw braces, not decoration.
   - Tied directly to the operator palette and precision motion grammar.
   ========================================================================== */

/* ==========================================================================
   1. Handle Tokens & Matrix Mapping
   ========================================================================== */

:root {
    /* Dimensional increments */
    --depth-0: 0px;
    --depth-1: 4px;
    --depth-2: 8px;
    --depth-3: 12px;
    --depth-4: 16px;

    /* Semantic mappings to the Operator matrix */
    --handle-entry:    var(--op-frame-color,  #008080);
    --handle-concept:  var(--op-meta-color,   #324a85);
    --handle-instance: var(--op-object-color, #a67c00);
    --handle-relation: var(--op-merge-color,  #277a87);
    --handle-phase:    var(--op-stream-color, #208259);

    /* Phase specific mappings */
    --phase-initiation:     var(--op-action-color, #005959);
    --phase-resistance:     var(--op-pragma-color, #883a3a);
    --phase-transformation: var(--op-merge-color,  #277a87);
    --phase-expression:     var(--op-stream-color, #208259);
    --phase-return:         var(--op-baseline-color, #594d3f);

    /* Material properties */
    --handle-line:        var(--line, rgba(14, 18, 20, 0.14));
    --handle-line-active: var(--active-op-color, #008080);

    /* Motion alignment */
    --handle-duration: var(--duration-fast, 140ms);
    --handle-ease:     var(--ease-mechanical, ease);
}

/* ==========================================================================
   2. Base State & Anchors
   ========================================================================== */

:where(
    [data-cognitive-handle],
    [data-handle-corner],
    [data-dimension],
    [data-nested-container],
    [data-nested-bracket],
    [data-abstraction-level],
    [data-relation-pair],
    [data-phase-dimension],
    [data-scale-handle],
    [data-cognitive-anchor],
    [data-dimensional-link],
    [data-foldable]
) {
    /* Debug / inspection */
    --spw-debug-layer-owner: "handles";
    --spw-debug-layer-color: #1d57a3;

    position: relative;
}

:where(
    [data-cognitive-handle],
    [data-scale-handle],
    [data-foldable],
    [data-cognitive-anchor]
) {
    cursor: pointer;
}

/* Universal Focus */
:where(
    [data-cognitive-handle]:focus-visible,
    [data-scale-handle]:focus-visible,
    [data-foldable]:focus-visible,
    [data-cognitive-anchor]:focus-visible,
    [data-dimensional-link]:focus-visible
) {
    outline: 2px solid var(--handle-line-active);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   3. Primary Handle: Left Crease
   ========================================================================== */

:where([data-cognitive-handle]) {
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        background-color var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-handle])::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    border-left: 2px solid var(--handle-line);
    opacity: 0.58;
    pointer-events: none;
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        opacity var(--handle-duration) var(--handle-ease),
        width var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-handle]:hover::before, [data-cognitive-handle]:focus-within::before) {
    width: 5px;
    border-color: var(--handle-line-active);
    opacity: 0.92;
}

:where([data-cognitive-handle][data-depth="0"])::before { height: 22%; }
:where([data-cognitive-handle][data-depth="1"])::before { height: 42%; }
:where([data-cognitive-handle][data-depth="2"])::before { height: 62%; }
:where([data-cognitive-handle][data-depth="3"])::before { height: 82%; }
:where([data-cognitive-handle][data-depth="4"])::before { height: 100%; }

/* ==========================================================================
   4. Corner Braces
   ========================================================================== */

:where([data-handle-corner])::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--handle-duration) var(--handle-ease),
        border-color var(--handle-duration) var(--handle-ease);
}

:where([data-handle-corner="tl"])::after {
    top: 0;
    left: 0;
    border-top-color: var(--handle-entry);
    border-left-color: var(--handle-entry);
}

:where([data-handle-corner="tr"])::after {
    top: 0;
    right: 0;
    border-top-color: var(--handle-concept);
    border-right-color: var(--handle-concept);
}

:where([data-handle-corner="bl"])::after {
    bottom: 0;
    left: 0;
    border-bottom-color: var(--handle-instance);
    border-left-color: var(--handle-instance);
}

:where([data-handle-corner="br"])::after {
    right: 0;
    bottom: 0;
    border-right-color: var(--handle-relation);
    border-bottom-color: var(--handle-relation);
}

:where([data-handle-corner]:hover::after, [data-handle-corner]:focus-within::after) {
    opacity: 0.82;
}

/* ==========================================================================
   5. Dimensional Creases & Nesting
   ========================================================================== */

:where([data-dimension])::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--depth-indicator-width, 2px);
    border-left: var(--depth-indicator-width, 2px) double var(--handle-line);
    opacity: 0;
    pointer-events: none;
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        opacity var(--handle-duration) var(--handle-ease);
}

:where([data-dimension]:hover::before, [data-dimension]:focus-within::before) {
    border-color: var(--handle-line-active);
    opacity: 1;
}

:where([data-dimension="0"])::before { --depth-indicator-width: 1px; }
:where([data-dimension="1"])::before { --depth-indicator-width: 2px; }
:where([data-dimension="2"])::before { --depth-indicator-width: 3px; }
:where([data-dimension="3"])::before { --depth-indicator-width: 4px; }

:where([data-nested-container]) {
    padding-left: calc(var(--nesting-level, 0) * 14px);
    border-left: 1px solid transparent;
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        padding-left var(--handle-duration) var(--handle-ease);
}

:where([data-nested-container][data-nesting-level="1"]) { border-left-color: color-mix(in srgb, var(--active-op-color, #008080) 22%, transparent); }
:where([data-nested-container][data-nesting-level="2"]) { border-left-color: color-mix(in srgb, var(--active-op-color, #008080) 30%, transparent); }
:where([data-nested-container][data-nesting-level="3"]) { border-left-color: color-mix(in srgb, var(--active-op-color, #008080) 38%, transparent); }

:where([data-nested-container]:hover, [data-nested-container]:focus-within) {
    border-left-color: var(--handle-line-active);
}

:where([data-nested-bracket]) {
    display: inline-block;
}

:where([data-nested-bracket])::before,
:where([data-nested-bracket])::after {
    position: absolute;
    color: var(--handle-concept);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-nested-bracket])::before { content: '{'; left: -1em; }
:where([data-nested-bracket])::after  { content: '}'; right: -1em; }

:where([data-nested-bracket]:hover::before, [data-nested-bracket]:hover::after,
       [data-nested-bracket]:focus-within::before, [data-nested-bracket]:focus-within::after) {
    opacity: 0.66;
}

/* ==========================================================================
   6. Abstraction Labels
   ========================================================================== */

:where([data-abstraction-level])::after {
    content: attr(data-abstraction-label);
    position: absolute;
    top: -1.5em;
    right: 0;
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: var(--text-size-xs, 0.75rem);
    font-weight: 600;
    opacity: 0;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-abstraction-level]:hover::after, [data-abstraction-level]:focus-within::after) {
    opacity: 1;
}

:where([data-abstraction-level="entry"])::after    { color: var(--handle-entry); }
:where([data-abstraction-level="concept"])::after  { color: var(--handle-concept); }
:where([data-abstraction-level="instance"])::after { color: var(--handle-instance); }
:where([data-abstraction-level="relation"])::after { color: var(--handle-relation); }

/* ==========================================================================
   7. Relation & Phase
   ========================================================================== */

:where([data-relation-pair][data-paired="true"]) {
    border-radius: var(--shape-component, 6px);
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.05));
    transition: outline-color var(--handle-duration) var(--handle-ease);
}

:where([data-relation-pair][data-paired="true"]:hover, [data-relation-pair][data-paired="true"]:focus-within) {
    outline: 1px solid var(--handle-line-active);
    outline-offset: 2px;
}

:where([data-relation-pair])::before {
    content: '&';
    position: absolute;
    top: 50%;
    left: -1.1em;
    color: var(--handle-relation);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-relation-pair]:hover::before, [data-relation-pair]:focus-within::before) {
    opacity: 0.72;
}

:where([data-relation-line]) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    stroke: var(--handle-relation);
    stroke-width: var(--line-thick, 2px);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-relation-pair]:hover ~ [data-relation-line], [data-relation-pair]:focus-within ~ [data-relation-line]) {
    opacity: 0.42;
}

:where([data-phase-dimension])::before {
    content: attr(data-phase);
    position: absolute;
    top: 50%;
    right: -1rem;
    color: var(--handle-phase);
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.72rem);
    opacity: 0;
    transform: translate(100%, -50%);
    white-space: nowrap;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-phase-dimension]:hover::before, [data-phase-dimension]:focus-within::before) {
    opacity: 0.8;
}

:where([data-phase="initiation"])::before     { color: var(--phase-initiation); }
:where([data-phase="resistance"])::before     { color: var(--phase-resistance); }
:where([data-phase="transformation"])::before { color: var(--phase-transformation); }
:where([data-phase="expression"])::before     { color: var(--phase-expression); }
:where([data-phase="return"])::before         { color: var(--phase-return); }

/* ==========================================================================
   8. Scale, Anchors, Portals, Folds
   ========================================================================== */

:where([data-scale-handle])::after {
    content: '#';
    position: absolute;
    top: 50%;
    right: -1em;
    color: var(--handle-line-active);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-scale-handle]:hover::after, [data-scale-handle]:focus-visible::after) {
    opacity: 0.75;
}

:where([data-dimensional-breadcrumb]) {
    display: flex;
    gap: var(--space-xs, 0.5rem);
    align-items: center;
    margin-bottom: var(--space-md, 1rem);
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-size: var(--text-size-sm, 0.85rem);
}

:where([data-dimensional-breadcrumb] > span) {
    position: relative;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--handle-line);
    border-radius: var(--shape-component, 6px);
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
    transition:
        border-color var(--handle-duration) var(--handle-ease),
        color var(--handle-duration) var(--handle-ease);
}

:where([data-dimensional-breadcrumb] > span:hover, [data-dimensional-breadcrumb] > span:focus-visible) {
    border-color: var(--handle-line-active);
    color: var(--ink);
}

:where([data-cognitive-anchor])::before {
    content: '#{';
    position: absolute;
    left: -1.55em;
    color: var(--handle-relation);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-anchor])::after {
    content: '}';
    color: var(--handle-relation);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-cognitive-anchor]:hover::before, [data-cognitive-anchor]:hover::after,
       [data-cognitive-anchor]:focus-visible::before, [data-cognitive-anchor]:focus-visible::after) {
    opacity: 0.8;
}

:where([data-dimensional-link])::after {
    content: ' ~{}';
    color: var(--handle-concept);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-dimensional-link]:hover::after, [data-dimensional-link]:focus-visible::after) {
    opacity: 0.72;
}

:where([data-foldable])::before {
    content: '{';
    position: absolute;
    top: 50%;
    left: -0.75rem;
    color: var(--handle-line-active);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--handle-duration) var(--handle-ease);
}

:where([data-foldable][data-folded="true"])::before {
    content: '}';
}

:where([data-foldable]:hover::before, [data-foldable]:focus-visible::before) {
    opacity: 0.85;
}

/* ==========================================================================
   9. Responsive & Accessibility Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    :where([data-cognitive-handle])::before {
        opacity: 0.72;
        width: 4px;
    }

    :where([data-handle-corner])::after {
        opacity: 0.48;
    }

    :where([data-dimensional-breadcrumb]) {
        gap: var(--space-2xs, 0.25rem);
        font-size: var(--text-size-xs, 0.75rem);
    }

    :where([data-dimensional-breadcrumb] > span) {
        padding: 0.2rem 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        [data-cognitive-handle],
        [data-cognitive-handle]::before,
        [data-handle-corner]::after,
        [data-nested-container],
        [data-nested-bracket]::before,
        [data-nested-bracket]::after,
        [data-abstraction-level]::after,
        [data-relation-pair],
        [data-relation-pair]::before,
        [data-relation-line],
        [data-phase-dimension]::before,
        [data-scale-handle]::after,
        [data-cognitive-anchor]::before,
        [data-cognitive-anchor]::after,
        [data-dimensional-link]::after,
        [data-foldable]::before
    ) {
        transition: none !important;
        animation: none !important;
    }
}
}

/* /public/css/handles/operators.css */
@layer handles {
/* ==========================================================================
   operators.css
   --------------------------------------------------------------------------
   Purpose
   - Interactive handles, inline affordances, compact control seams, and
     literate gesture states.
   - This layer owns "how something can be grasped", not full material,
     phase, or pretext layout systems.

   Mental model
   - Tokens can be grasped as text, pills, seams, or room-signs.
   - Handles should expose semantic allocation without overwhelming prose.
   - A good handle explains what can be touched, how it will respond, and
     which operator / substrate / stance / role it belongs to.

   Does own
   - sigils, operator chips, syntax tokens, inline delimiters, spec pills
   - selection / activation / latch / bookmark / allocation states
   - compact breadcrumbs and frame metrics seams
   - room-aware swap hints and memo surfaces
   - subtle gesture signaling for inline and card-adjacent handles
   - semantic seams for operator, substrate, role, stance, and flow hints
   ========================================================================== */

/* ==========================================================================
   1. Layering + handle tokens
   ========================================================================== */

header,
.header-op-indicator {
  z-index: var(--z-header, var(--layer-header, 1000));
}

.spw-navigator,
.spw-console,
.spw-nav {
  z-index: var(--z-priority, var(--layer-priority, 2000));
}

/* Surface map / frame navigator (spw-nav) */
.spw-nav {
  --spw-nav-accent: var(--op-frame-color, var(--teal, #008080));
  position: fixed;
  inset: 50% max(0.65rem, env(safe-area-inset-right)) auto auto;
  transform: translateY(-50%);
  display: grid;
  justify-items: end;
  gap: 0.42rem;
  inline-size: min(22rem, calc(100vw - 1.2rem));
  max-inline-size: calc(100vw - 1.2rem);
  pointer-events: none;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.78rem;
}

.spw-nav > * {
  pointer-events: auto;
}

.spw-nav-strip {
  display: grid;
  justify-items: end;
}

.spw-nav-trigger {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.28rem 0.42rem;
  min-height: var(--touch-target-compact, 2.15rem);
  padding: 0.28rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--spw-nav-accent) 28%, var(--line, rgba(14, 18, 20, 0.14)) 72%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 58%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 94%, var(--spw-nav-accent) 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 20px color-mix(in srgb, var(--spw-nav-accent) 10%, rgba(0, 0, 0, 0.08));
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.spw-nav-trigger:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 44%, transparent);
  outline: none;
  transform: translateX(-2px);
}

.spw-nav.is-open .spw-nav-trigger,
.spw-nav-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 52%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 52%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.96)) 90%, var(--spw-nav-accent) 10%);
}

.spw-nav-strip-label {
  color: color-mix(in srgb, var(--spw-nav-accent) 82%, var(--ink));
  font-weight: 700;
  letter-spacing: 0.03em;
}

.spw-nav-strip-sublabel {
  color: var(--ink-soft, rgba(14, 18, 20, 0.64));
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-nav-panel {
  display: grid;
  gap: 0.42rem;
  inline-size: min(22rem, calc(100vw - 1.2rem));
  max-block-size: min(34rem, calc(100dvh - 2rem - var(--spw-floating-menu-clearance, 0px)));
  padding: 0.62rem 0.68rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--spw-nav-accent) 24%, var(--line, rgba(14, 18, 20, 0.14)) 76%);
  border-radius: var(--shape-medium, 0.85rem);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--spw-nav-accent) 8%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.97)) 96%, transparent);
  box-shadow:
    0 1rem 2.4rem rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.45rem) scale(0.985);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.spw-nav.is-open .spw-nav-panel:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.spw-nav-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.spw-nav-title {
  min-width: 0;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-weight: 600;
}

.spw-nav-title [data-spw-operator] {
  color: var(--spw-nav-accent);
}

.spw-nav-counter {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.spw-nav-close {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  border-radius: var(--shape-element, 0.28rem);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.spw-nav-close:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 30%, transparent);
  color: var(--ink);
  outline: none;
}

.spw-nav-search-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
  border-radius: var(--shape-control, 0.78rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
}

.spw-nav-search-op {
  color: var(--op-probe-color, #4a2180);
  font-weight: 700;
}

.spw-nav-search {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}

.spw-nav-list {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.spw-nav-section-label {
  margin-block: 0.18rem 0.06rem;
  padding-inline: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.spw-nav-item-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.38rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.34rem 0.46rem;
  border: 1px solid transparent;
  border-radius: var(--shape-control, 0.78rem);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}

.spw-nav-item-btn:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 20%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--spw-nav-accent) 8%);
  outline: none;
  transform: translateX(-1px);
}

.spw-nav-item-btn.is-active,
.spw-nav-item-btn[aria-current="true"] {
  border-color: color-mix(in srgb, var(--spw-nav-accent) 34%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--spw-nav-accent) 12%);
}

.spw-nav-op-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.1rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--spw-operator-color, var(--spw-nav-accent)) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--spw-operator-color, var(--spw-nav-accent)) 10%, transparent);
  color: var(--spw-operator-color, var(--spw-nav-accent));
  font-size: 0.66rem;
  font-weight: 700;
}

.spw-nav-item-body {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.spw-nav-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.spw-nav-item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 0.64rem;
}

.spw-nav-empty {
  padding: 0.5rem 0.35rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.spw-nav-spells {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.42rem;
  align-items: center;
  padding-top: 0.12rem;
  border-top: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 72%, transparent);
  color: var(--ink-soft);
  font-size: 0.62rem;
}

.spw-nav-spells .spw-spell {
  padding: 0.1rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 78%, transparent);
  border-radius: 0.28rem;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  color: var(--ink);
  font-weight: 600;
}

html[data-spw-navigator="hidden"] .spw-nav {
  display: none !important;
}

html[data-spw-navigator="quiet"] .spw-nav:not(.is-open) .spw-nav-trigger {
  opacity: 0.58;
}

html[data-spw-navigator="quiet"] .spw-nav:not(.is-open):is(:hover, :focus-within) .spw-nav-trigger,
html[data-spw-navigator="full"] .spw-nav-trigger {
  opacity: 1;
}

html[data-spw-spell-path-state="open"] .spw-spell-path[data-spw-breadcrumb-state="open"] {
  border-color: color-mix(in srgb, var(--teal, #008080) 22%, var(--line, rgba(14, 18, 20, 0.14)) 78%);
}

html[data-spw-dimensional-breadcrumbs="on"] .spw-spell-path .spw-spell-meaning {
  display: block;
}

@media (max-width: 720px) {
  .spw-nav {
    inset: auto max(0.55rem, env(safe-area-inset-right)) calc(max(0.8rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px) + 3.2rem) auto;
    transform: none;
    inline-size: min(20rem, calc(100vw - 1rem));
  }

  .spw-nav-panel {
    max-block-size: min(28rem, calc(100dvh - 6.5rem - var(--spw-floating-menu-clearance, 0px)));
  }

  html[data-spw-dimensional-breadcrumbs="on"] .spw-spell-path__guide,
  html[data-spw-dimensional-breadcrumbs="on"] .spw-spell-meaning {
    display: block;
  }
}

.spw-console {
  --spw-console-ink: #f3efe6;
  --spw-console-ink-muted: rgba(243, 239, 230, 0.72);
  --spw-console-token-bg: rgba(8, 18, 20, 0.74);
  --spw-console-token-line: rgba(126, 210, 204, 0.42);
  --spw-console-offset-block: max(0.9rem, env(safe-area-inset-bottom));
  --spw-console-offset-inline: max(0.9rem, env(safe-area-inset-left));
  --spw-floating-menu-clearance: 0px;
  --handle-ink: var(--spw-console-ink);
  --handle-bg: var(--spw-console-token-bg);
  --handle-line: var(--spw-console-token-line);
  /* Resonance with state satchel: use floating chrome vars for shared ephemeral ergonomics (pad, gap, material), fixed inset consistent with satchel bottom-right, grid for layout predictability. Improves visible console chrome + overall ephemeral arch. */
  position: fixed;
  inset: auto auto calc(var(--spw-console-offset-block) + var(--spw-floating-menu-clearance, 0px)) var(--spw-console-offset-inline);
  display: grid;
  inline-size: min(31rem, calc(100vw - 1.8rem));
  max-block-size: min(29rem, calc(100dvh - 4.25rem));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--op-probe-color, #4a2180) 32%, transparent);
  border-radius: var(--shape-component, 0.42rem);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-code, #151515) 92%, var(--op-frame-color, #008080) 8%),
      color-mix(in srgb, var(--surface-code, #151515) 88%, var(--op-probe-color, #4a2180) 12%)
    );
  box-shadow:
    0 1rem 2.4rem color-mix(in srgb, var(--shadow-color, #111111) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
  color: var(--spw-console-ink);
  contain: layout paint style;
  /* Ephemeral chrome shared */
  padding: var(--chrome-pad, 0.45rem);
  gap: var(--chrome-gap, 0.35rem);
  font-size: var(--chrome-font, 0.82rem);
}

.spw-console.spw-console {
  position: fixed;
  inset: auto auto calc(var(--spw-console-offset-block) + var(--spw-floating-menu-clearance, 0px)) var(--spw-console-offset-inline);
}

.spw-console.is-idle:not(:hover):not(:focus-within) {
  opacity: var(--console-idle-opacity, 0.76);
}

.spw-console-collapsed-bar,
.spw-console-body {
  min-inline-size: 0;
}

.spw-console-collapsed-bar {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.6rem;
  /* Collapsed ergonomics resonate satchel launch: baseline/center, compact pill content for utility-like quick feedback/learnability.
     The token is the "sigil/prompt", chevron is the expand affordance (tap target). */
}

.spw-console.is-collapsed .spw-console-collapsed-bar .spw-console-action-token,
.spw-console.is-collapsed .spw-console-collapsed-bar .frame-sigil {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}

.spw-console.is-collapsed .spw-console-expand-btn {
  min-width: 1.6rem;
  min-height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.7em;
  line-height: 1;
  opacity: 0.85;
}

.spw-console.is-collapsed {
  inline-size: min(18rem, calc(100vw - 1.2rem));
  min-block-size: 2.35rem; /* match satchel launch height for resonance */
  border-radius: 999px; /* full pill like satchel launch */
  box-shadow: 0 8px 32px color-mix(in srgb, var(--shadow-color, #111) 22%, transparent);
  /* Ephemeral chrome resonance + ergonomics: pill shape, height, shadow match satchel launch for family feel;
     layout of the bar inside is compact prompt + action chevron, baseline aligned, good tap target for expand.
     Position lifted slightly so it doesn't bury footer nav text; uses floating safe inset. */
  inset-inline-start: max(0.75rem, env(safe-area-inset-left));
  inset-inline-end: auto;
  bottom: calc(max(0.6rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px));
}

:root:has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) {
  --spw-console-satchel-clearance: 0px;
}

@media (min-width: 721px) {
  :root:has([data-spw-state-inspector-root][data-spw-state-inspector="open"]) .spw-console.is-collapsed {
    bottom: calc(max(0.6rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px));
  }
}

.spw-console.is-collapsed .spw-console-collapsed-bar {
  display: grid;
  align-items: center;
  padding: 0.35rem 0.65rem;
  gap: 0.5rem;
}

.spw-console.is-collapsed .spw-console-body {
  display: none;
}

.spw-console-body {
  display: grid;
  gap: 0.32rem;
  min-block-size: 0;
  max-block-size: inherit;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--chrome-pad, 0.45rem);
  /* Layout resonance with satchel panel: grid for sections (header, diagnostics, history like actions/toggles), better learnability spacing. */
}

.spw-console-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: 0.42rem;
  min-inline-size: 0;
}

.spw-console-line:not(.spw-console-header-line) {
  grid-template-columns: max-content minmax(0, 1fr);
}

.spw-console-copy,
.spw-console-history-copy,
.spw-console-history-meta {
  color: var(--spw-console-ink);
  min-inline-size: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.spw-console-diagnostics-line {
  padding-block: 0.1rem;
  border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.spw-console-mode-buttons,
.spw-console-spells {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-inline-size: 0;
}

.spw-console-diagnostics-copy,
.spw-console-history-meta {
  color: var(--spw-console-ink-muted);
  font-size: 0.78rem;
}

.spw-console .frame-sigil,
.spw-console-history-token,
.spw-console-token,
.spw-console-action-token,
.spw-console-diagnostics-token {
  display: inline-flex;
  inline-size: auto;
  min-inline-size: max-content;
  max-inline-size: 100%;
  flex: 0 0 auto;
  justify-content: flex-start;
  color: var(--spw-console-ink);
  font-size: 0.78rem;
  white-space: nowrap;
}

.spw-console-history {
  display: grid;
  gap: 0.26rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spw-console-history-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.36rem;
  min-inline-size: 0;
  opacity: calc(1 - (var(--history-age, 0) * 0.11));
}

.spw-console-history-meta {
  grid-column: 2;
}

@media (max-width: 720px) {
  :where(html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"]),
         html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"])) .spw-console {
    --spw-floating-menu-clearance: 4.25rem;
  }

  :where(html:has(.site-header[data-spw-menu-mode="toggle"][data-spw-menu="open"]),
         html:has(body > header[data-spw-menu-mode="toggle"][data-spw-menu="open"])) .spw-console.is-collapsed {
    opacity: 0.82;
  }

  .spw-console:not(.is-collapsed) {
    inset-inline: max(0.7rem, env(safe-area-inset-left)) max(0.7rem, env(safe-area-inset-right));
    inset-block-end: calc(max(0.7rem, env(safe-area-inset-bottom)) + var(--spw-floating-menu-clearance, 0px));
    inline-size: auto;
    max-block-size: min(24rem, calc(100dvh - 4.6rem));
  }

  .spw-console-line:not(.spw-console-header-line),
  .spw-console-history-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .spw-console-history-meta {
    grid-column: 1;
  }

  .spw-console .frame-sigil,
  .spw-console-history-token,
  .spw-console-token,
  .spw-console-action-token,
  .spw-console-diagnostics-token {
    white-space: normal;
  }
}

@media (max-height: 620px) {
  .spw-console:not(.is-collapsed) {
    max-block-size: calc(100dvh - 1.4rem);
  }
}

.spw-console-expand-btn,
.spw-console-collapse-btn {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.9rem;
  min-block-size: 1.9rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--shape-element, 0.28rem);
  background: color-mix(in srgb, var(--surface-strong, #ffffff) 10%, transparent);
  color: inherit;
  cursor: pointer;
}

/* Handles sit above content but below site-level overlays. */
.mode-switch,
.demo-controls,
.spw-spell-path,
.frame-metrics-bar,
.frame-topline,
.frame-heading {
  position: relative;
  z-index: 120;
}

:root {
  --handle-min-height: max(2.2rem, var(--touch-target-min, 2.2rem));
  --handle-min-height-compact: 1.64rem;
  --handle-baseline-offset: 0.08em;

  --handle-radius: var(--shape-component, 0.42rem);
  --handle-radius-tight: var(--shape-element, 0.28rem);
  --handle-radius-pill: 999px;

  --handle-pad-y: 0.2rem;
  --handle-pad-x: 0.54rem;
  --handle-pad-inline-inline: 0.24rem;
  --handle-pad-block-inline: 0.04rem;
  --handle-gap: 0.38rem;
  --handle-gap-tight: 0.22rem;

  --handle-bg: var(--surface-strong, rgba(255, 255, 255, 0.82));
  --handle-bg-soft: color-mix(in srgb, var(--handle-bg) 82%, transparent);
  --handle-bg-active:
    color-mix(in srgb, var(--active-op-color, var(--teal)) 6%, var(--handle-bg));
  --handle-bg-selected:
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 90%, var(--active-op-color, var(--teal)) 10%);

  --handle-ink: var(--active-op-color, var(--teal));
  --handle-ink-soft: var(--ink-soft, rgba(14, 18, 20, 0.62));
  --handle-ink-quiet: color-mix(in srgb, var(--handle-ink-soft) 78%, transparent);

  --handle-line:
    color-mix(in srgb, var(--active-op-color, var(--teal)) 62%, transparent);
  --handle-line-soft:
    color-mix(in srgb, var(--active-op-color, var(--teal)) 26%, transparent);
  --handle-line-quiet:
    color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent);

  --handle-shadow-rest: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.06));
  --handle-shadow-focus:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent),
    0 3px 10px rgba(0, 0, 0, 0.025);
  --handle-shadow-latched:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent);
  --handle-shadow-guided:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-substrate-color, var(--teal)) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--spw-substrate-color, var(--teal)) 12%, transparent);

  --handle-duration-fast: var(--duration-fast, 120ms);
  --handle-duration-base: var(--duration-base, 180ms);
  --handle-duration-deliberate: var(--duration-deliberate, 280ms);

  --handle-ease: var(--ease-mechanical, ease);
  --handle-settle-ease: var(--brace-settle-ease, cubic-bezier(0.22, 0, 0.15, 1));

  --handle-underline-thickness: 1.5px;
  --handle-underline-offset: 0.16em;

  --handle-roomy-hint-threshold: 44rem;
  --handle-meta-font: var(--site-mono-font, "JetBrains Mono", monospace);
}

:where(.spec-strip, .frame-operators, .spw-component-meta, .spw-component-guides) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--handle-gap);
  align-items: baseline;
  min-width: 0;
}

:where([data-spw-operator], .operator-chip, .frame-sigil, .frame-card-sigil) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "handles";
  --spw-debug-layer-color: #1d57a3;
}

/* Measure kind support (aligns with .spw operator-site-projection for %)
   Subjective measures (practitioner judgment, felt resonance) get softer treatment
   and can be visually distinguished from objective instrumented values.
   This supports both cognitive and computational communication of % measures. */
[data-spw-measure-kind="subjective"] {
  --measure-tint: color-mix(in srgb, var(--op-probe-color, #6a3fb8) 18%, currentColor);
  font-style: italic;
  border-style: dashed;
  opacity: 0.92;
}
[data-spw-measure-kind="objective"] {
  --measure-tint: color-mix(in srgb, var(--op-value-color, currentColor) 12%, currentColor);
  font-style: normal;
}
[data-spw-measure-kind] {
  box-sizing: border-box;
  padding-inline: calc(var(--handle-pad-x) * 0.8);
  border: 1px solid transparent;
  border-color: var(--measure-tint, currentColor);
}

/* Responsive tightening for narrow viewports and tall aspect ratios (mobile portrait, etc.)
   Prevents measure elements from causing wrapping or overflow inside frames/labs while preserving the subjective/objective distinction. */
@media (max-width: 40rem) {
  [data-spw-measure-kind],
  .status[data-spw-measure-kind],
  .math-diagram-status[data-spw-measure-kind] {
    font-size: 0.9em;
    padding-inline: calc(var(--handle-pad-x) * 0.6);
    line-height: 1.35;
  }

  .math-interactive-lab [data-spw-measure-kind] {
    max-inline-size: 100%;
  }
}

/* Extend to general status and artifact elements for curriculum / labs coherence */
.status[data-spw-measure-kind],
[data-spw-artifact] [data-spw-measure-kind],
.proof-textarea[data-spw-measure-kind],
.math-diagram-status[data-spw-measure-kind],
[data-spw-proof] [data-spw-measure] {
  font-family: var(--font-mono, monospace);
  border: 1px dashed var(--measure-tint, currentColor);
}

/* Measurement phases + interactivity + wrapping (component layout + interactivity audit)
   - Stronger focus-visible and active coordination when measures live inside frames
     that are active, attention-focused, or under developmental/author phases.
   - Preserves subjective (dashed/italic) vs objective distinction while giving
     tactile "graspable" feedback — supports both manuscript layering and
     fidget-toy style tuning of measurement surfaces.
   - Scoped wrapping safeguard for long subjective reflections or objective
     status text inside frames to reduce awkward breaks during phase transitions
     (authorMode/climate changes, frame activation, motif application).
   - Ties into expressive layout tropes: these states are now more observable
     and less likely to produce surprising layout shifts. */
:where(.site-frame, [data-spw-feature*="measure"], .math-interactive-lab)
  [data-spw-measure-kind]:is(:focus-visible, :focus-within) {
  outline: 2px solid color-mix(in srgb, var(--measure-tint, var(--op-probe-color)) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--measure-tint, currentColor);
}

:where(.site-frame[data-spw-active="true"], .site-frame[data-spw-attention="focused"])
  [data-spw-measure-kind] {
  /* Gentle common-fate lift during frame phases without causing extra wrap */
  transform: translateY(-0.5px);
  transition: transform var(--duration-fast, 140ms) var(--ease-settle, ease);
}

:where(.site-frame, .proof-capture, .boundary-test-form)
  [data-spw-measure-kind="subjective"] {
  /* Extra wrapping protection for long practitioner reflections in manuscript contexts */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

@media (max-width: 48rem) {
  :where(.site-frame, .math-interactive-lab)
    [data-spw-measure-kind] {
    /* Tighter intermediate-width wrapping guard for measurement phases */
    max-inline-size: calc(100% - 0.5rem);
    line-height: 1.38;
  }
}

/* ==========================================================================
   2. Shared handle primitive
   --------------------------------------------------------------------------
   The handle primitive is intentionally broad. Specific nouns bias from here.
   Raw semantic attributes only get handle treatment on inline-capable tags.
   ========================================================================== */

/* Handle gateway: add only things visitors can grasp or scan. */
:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil,
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-handle="true"],
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
) {
  --handle-arrival-lift: 0px;
  --handle-arrival-opacity: 1;
  --interaction-excitement: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  min-width: 0;
  max-width: 100%;
  min-height: var(--handle-min-height);
  padding: var(--handle-pad-y) var(--handle-pad-x);
  padding-top: calc(var(--handle-pad-y) + var(--handle-baseline-offset));
  box-sizing: border-box;
  border: 1.25px solid var(--handle-line);
  border-radius: var(--handle-radius);
  background: var(--handle-bg);
  color: var(--handle-ink);
  text-decoration: none;
  text-shadow: none;
  opacity: var(--handle-arrival-opacity);
  box-shadow:
      var(--handle-shadow-rest),
      0 0 calc(var(--interaction-excitement) * 12px) color-mix(in srgb, currentColor calc(var(--interaction-excitement) * 40%), transparent);
  transform: translateY(calc(var(--handle-arrival-lift) + (var(--interaction-excitement) * -2px)));
  cursor: pointer;
  contain: paint style;
  transition:
    color var(--handle-duration-fast) var(--handle-ease),
    background-color var(--handle-duration-fast) var(--handle-ease),
    border-color var(--handle-duration-base) var(--handle-ease),
    box-shadow var(--handle-duration-base) var(--handle-settle-ease),
    transform var(--handle-duration-fast) var(--handle-settle-ease),
    opacity var(--handle-duration-fast) var(--handle-ease),
    filter var(--handle-duration-base) var(--handle-settle-ease);
}

:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil,
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-handle="true"]
):is(:hover, :focus-visible) {
  --interaction-excitement: 0.82;
}

@keyframes spw-operator-breath {
  0%, 100% {
    box-shadow:
      var(--handle-shadow-rest),
      0 0 8px color-mix(in srgb, currentColor 20%, transparent);
  }
  50% {
    box-shadow:
      var(--handle-shadow-rest),
      0 0 16px color-mix(in srgb, currentColor 40%, transparent);
  }
}

:where(
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .resonance-sigil,
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-handle="true"]
):is([data-spw-selection="active"], [data-spw-selection="selected"], [aria-current="page"], [aria-pressed="true"]) {
  --interaction-excitement: 1;
  animation: spw-operator-breath 2s ease-in-out infinite;
}

@keyframes spw-operator-ripple {
  0% { box-shadow: 0 0 0 0px color-mix(in srgb, currentColor 40%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

:where(
  .operator-chip,
  .syntax-token,
  .frame-sigil,
  .frame-card-sigil
):active {
  --interaction-excitement: 0.42;
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition-duration: var(--touch-acknowledge, 90ms);
  transition-timing-function: var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1));
  animation: spw-operator-ripple 0.4s ease-out;
}

/* Inline handles should read like annotated language before they read as pills. */
/* The :not() list keeps full controls from flattening into prose tokens. */
:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):not(.operator-chip):not(.frame-sigil):not(.spec-pill):not(.spw-component-tag):not(.spw-guide-chip) {
  min-height: auto;
  padding-inline: var(--handle-pad-inline-inline);
  padding-block: var(--handle-pad-block-inline);
  border-color: transparent;
  background: transparent;
  border-radius: var(--handle-radius-tight);
  box-shadow: none;
}

/* Handles that mostly communicate metadata should stay compact. */
:where(.spw-component-tag, .spw-guide-chip, .frame-card-sigil, .resonance-sigil) {
  min-height: var(--handle-min-height-compact);
  padding-inline: 0.42rem;
  font-family: var(--handle-meta-font);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Visual refinement for .spw-component-tag (rune slip / codex treatment)
   --------------------------------------------------------------------------
   The tag is the visible face of the semantic kernel (the system inspected
   in the reference screenshot). Default remains compact metadata. When the
   kernel is projected (data-spw-projection, rpg-wednesday surface, or the
   home gateway we enhanced), the tag becomes a "codex slip" — textured,
   lifted, and resonant — so the computational labels feel like artifacts
   that belong in the overgrown library stacks.
   ========================================================================== */

:where(.spw-component-tag) {
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, var(--handle-line-soft, rgba(0, 0, 0, 0.12)) 84%);
  border-radius: var(--handle-radius-tight, 0.28rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 95%, var(--active-op-color, var(--teal)) 5%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.38);
  transition:
    background var(--handle-duration-fast, 140ms) var(--handle-ease),
    border-color var(--handle-duration-fast, 140ms) var(--handle-ease),
    box-shadow var(--handle-duration-fast, 140ms) var(--handle-ease),
    transform var(--handle-duration-fast, 140ms) var(--handle-ease);
}

/* Projection / portal fantasy variant — feels like a physical slip from the codex */
:where([data-spw-projection] .spw-component-tag),
:where(body[data-spw-surface="rpg-wednesday"] .spw-component-tag),
:where(#town-library-gateway .spw-component-tag) {
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, var(--active-op-color, var(--teal)) 10%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 26%, var(--handle-line-soft) 74%);
  box-shadow:
    var(--projection-lift-xs, 1px) var(--projection-lift-xs, 1px) 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.48);
}

:where([data-spw-projection] .spw-component-tag):hover,
:where([data-spw-projection] .spw-component-tag):focus-visible,
:where(body[data-spw-surface="rpg-wednesday"] .spw-component-tag):hover,
:where(body[data-spw-surface="rpg-wednesday"] .spw-component-tag):focus-visible,
:where(#town-library-gateway .spw-component-tag):hover,
:where(#town-library-gateway .spw-component-tag):focus-visible {
  background: color-mix(in srgb, var(--surface-strong, #fff) 86%, var(--active-op-color, var(--teal)) 14%);
  box-shadow:
    var(--projection-lift-sm, 2px) var(--projection-lift-sm, 2px) 0 color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent),
    0 0 0 calc(1px * var(--spw-resonance, 0.55)) color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, transparent);
  transform: translateY(-0.5px);
}

/* Better containment for metas hosting tags in dense inspect/home contexts
   (directly addresses the long raw attribute lists visible in the reference screenshot) */
:where(.spw-component-meta) {
  max-inline-size: 100%;
}

/* Dense control rows inside custom inspector panels (e.g. the header bar with
   Light/Dark, text size, and CHOOSE WHAT pills in the read/inspect sidebar).
   Prevents over-packing, clipping at panel edges, and awkward wrapping. */
:where(.spw-state-inspector__panel, .read-inspect-panel, .kernel-inspector, [data-spw-state-inspector]) .spw-component-meta,
:where(.spw-state-inspector__panel, .read-inspect-panel, .kernel-inspector, [data-spw-state-inspector]) .frame-operators,
:where(.spw-state-inspector__panel, .read-inspect-panel, .kernel-inspector, [data-spw-state-inspector]) .spec-strip {
  flex-wrap: wrap;
  gap: var(--handle-gap, 0.38rem);
  align-items: center;
}

html[data-spw-show-semantic-metadata="on"] :where(.spw-component-meta) {
  flex-wrap: wrap;
  gap: var(--handle-gap-tight, 0.22rem);
}

/* Extra breathing room for component tags and dense control groups when inside
   inspector / read-mode panels (addresses clipping and over-packing visible in
   the custom left sidebar in the reference screenshot). */
:where(.spw-state-inspector, [data-spw-state-inspector], .read-inspect-panel, .kernel-inspector) :where(.spw-component-meta, .spw-component-tag, .spec-pill, .operator-chip) {
  gap: var(--handle-gap, 0.38rem);
}

:where(.spw-state-inspector, [data-spw-state-inspector], .read-inspect-panel, .kernel-inspector) .spw-component-tag {
  min-inline-size: 2.8rem; /* prevent aggressive shrinking that causes clipping */
  padding-inline: 0.5rem;
}

/* ==========================================================================
   3. Handle layout, siblings, and room seams
   ========================================================================== */

:where(.frame-topline, .frame-heading) > :where(.spec-strip, .frame-operators, .spw-component-meta) {
  min-width: 0;
}

:where(.frame-topline, .frame-heading) > .spw-component-meta {
  margin-left: auto;
  justify-content: flex-end;
}

:where(.frame-topline > .frame-sigil + .spec-strip) {
  margin-inline-start: 0.1rem;
}

:where(.frame-topline > .frame-sigil + .spw-component-meta) {
  margin-inline-start: auto;
}

:where(.frame-operators > * + *, .spec-strip > * + *)::before {
  content: none;
}

/* Dense seams become descriptive when metadata mode is on. */
html[data-spw-show-semantic-metadata="on"] :where(.frame-operators > *, .spec-strip > *)[data-spw-operator]::after {
  content: attr(data-spw-operator);
  position: absolute;
  inset: auto auto calc(100% + 0.2rem) 50%;
  transform: translateX(-50%);
  padding: 0.08rem 0.32rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--handle-radius-pill);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  color: var(--handle-ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--handle-duration-fast) var(--handle-ease);
}

html[data-spw-show-semantic-metadata="on"] :where(.frame-operators > *, .spec-strip > *)[data-spw-operator]:is(:hover, :focus-visible)::after {
  opacity: 0.92;
}

/* Rich route choices and card-body links carry operator metadata, but their
   contents are card anatomy rather than inline handles. Preserve the component
   grid contract instead of letting the handle primitive compress them. */
:where(.spw-route-bridge__links a[data-spw-operator], a.frame-card[data-spw-operator], .frame-card > a:first-child[data-spw-operator]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  justify-content: stretch;
  justify-items: start;
  gap: var(--card-rhythm, var(--component-gap-tight, 0.65rem));
  inline-size: 100%;
  max-inline-size: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  overflow-wrap: anywhere;
  text-align: start;
  white-space: normal;
}

/* ==========================================================================
   4. Frame sigils
   --------------------------------------------------------------------------
   Frame sigils are anchor handles. Hidden by default except in room-sign seams.
   ========================================================================== */

.frame-sigil {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  overflow: hidden;
  font-size: 0;
}

.frame-topline .frame-sigil,
.frame-heading .frame-sigil {
  position: static;
  display: inline-flex;
  inline-size: fit-content;
  width: auto;
  max-width: 100%;
  overflow: visible;
  min-height: 1.62rem;
  padding: 0.12rem 0.54rem 0.12rem 0.62rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-inline-start-width: 1.5px;
  border-radius: var(--shape-control, 0.78rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  color: color-mix(in srgb, var(--ink-soft) 88%, var(--active-op-color, var(--teal)) 12%);
  font-size: var(--text-size-label, 0.76rem);
  line-height: var(--spw-frame-sigil-line-height, 1);
  opacity: 0.82;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    opacity var(--handle-duration-fast) var(--handle-ease),
    color var(--handle-duration-fast) var(--handle-ease),
    border-color var(--handle-duration-fast) var(--handle-ease);
}

:where(.frame-topline .frame-sigil, .frame-heading .frame-sigil):hover,
:where(.frame-topline .frame-sigil, .frame-heading .frame-sigil):focus-visible {
  opacity: 1;
  color: var(--active-op-color, var(--teal));
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 36%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, var(--active-op-color, var(--teal)) 10%);
  outline: none;
}

:where(.frame-topline .frame-sigil + .spec-strip, .frame-heading .frame-sigil + .spw-component-meta) {
  align-self: flex-start;
  margin-inline-start: 0.22rem;
}

/* ==========================================================================
   5. Operator chips, spec pills, and component tags
   ========================================================================== */

.operator-chip {
  --operator-chip-border-width: 1px;
  --operator-chip-border-style: solid;
  --operator-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 92%, var(--active-op-color, var(--teal)) 8%);
  --operator-chip-border: color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, transparent);
  --operator-chip-ink: color-mix(in oklab, var(--active-op-color, var(--teal)) 76%, var(--ink, rgba(14, 18, 20, 0.92)));
  --operator-chip-shadow: none;
  --operator-chip-hover-bg: color-mix(in oklab, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal)) 12%);
  --operator-chip-hover-border: var(--operator-chip-border);
  --operator-chip-hover-ink: var(--ink);
  --operator-chip-hover-shadow: var(--operator-chip-shadow);
  --operator-chip-hover-lift: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spw-control-gap, 0.28rem);
  min-height: var(--spw-control-min-height, max(2.15rem, var(--touch-target-compact, 2.25rem)));
  padding: var(--spw-control-padding-block, 0.28rem) var(--spw-control-padding-inline, 0.72rem);
  border-width: var(--operator-chip-border-width);
  border-style: var(--operator-chip-border-style);
  border-radius: var(--spw-control-radius, var(--shape-control, 0.78rem));
  white-space: nowrap;
  text-decoration: none;
  line-height: var(--spw-control-line-height, 1.08);
  font-size: var(--text-size-chip, 0.82rem);
  background: var(--operator-chip-bg);
  border-color: var(--operator-chip-border);
  color: var(--operator-chip-ink);
  font-weight: 500;
  box-shadow: var(--operator-chip-shadow);
  transition:
    background-color var(--spw-control-transition-fast, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    border-color var(--spw-control-transition-fast, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    color var(--spw-control-transition-fast, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    box-shadow var(--spw-control-transition-base, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    transform var(--spw-control-transition-fast, var(--handle-duration-fast, 140ms) var(--handle-ease, ease));
}

.operator-chip:hover,
.operator-chip:focus-visible {
  background: var(--operator-chip-hover-bg);
  border-color: var(--operator-chip-hover-border);
  color: var(--operator-chip-hover-ink);
  box-shadow: var(--operator-chip-hover-shadow);
  transform: translateY(var(--operator-chip-hover-lift));
  outline: none;
}

/* Microinteraction refinement tied to runtime load posture/timing.
   When the page was loaded in a "quiet" or "defer" posture (user or editor choice),
   tone down the physical feedback (lift, shadow) for calmer feel.
   This is rule refinement using the explicit load attrs we added for discovery/customization. */
html[data-spw-load-posture="quiet"] .operator-chip:hover,
html[data-spw-load-posture="quiet"] .operator-chip:focus-visible,
html[data-spw-load-timing="quiet"] .operator-chip:hover,
html[data-spw-load-timing="quiet"] .operator-chip:focus-visible,
html[data-spw-load-timing="defer"] .operator-chip:hover,
html[data-spw-load-timing="defer"] .operator-chip:focus-visible {
  transform: none;
  box-shadow: var(--operator-chip-hover-shadow, 0 1px 3px rgba(0,0,0,0.06));
}

/* Probe and pragma chips should not feel interchangeable.
   Probe stays open/reversible; pragma reads as a stronger local constraint. */
.operator-chip[data-spw-operator="probe"],
.operator-chip[data-spw-operator="wonder"] {
  --operator-chip-border-style: dashed;
  --operator-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 95%, var(--op-probe-color, var(--active-op-color, var(--teal))) 5%);
  --operator-chip-border: color-mix(in oklab, var(--op-probe-color, var(--active-op-color, var(--teal))) 28%, transparent);
  --operator-chip-hover-bg: color-mix(in oklab, var(--surface-strong, #fff) 90%, var(--op-probe-color, var(--active-op-color, var(--teal))) 10%);
}

.operator-chip[data-spw-operator="pragma"],
.operator-chip[data-spw-operator="action"] {
  --operator-chip-bg: color-mix(in oklab, var(--surface-strong, #fff) 88%, var(--op-pragma-color, var(--active-op-color, var(--teal))) 12%);
  --operator-chip-border: color-mix(in oklab, var(--op-pragma-color, var(--active-op-color, var(--teal))) 34%, transparent);
  --operator-chip-hover-bg: color-mix(in oklab, var(--surface-strong, #fff) 84%, var(--op-pragma-color, var(--active-op-color, var(--teal))) 16%);
  --operator-chip-hover-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--op-pragma-color, var(--active-op-color, var(--teal))) 16%, transparent);
}

:where(.operator-chip, .spec-pill, .syntax-token)[data-spw-collected="true"] {
  --operator-chip-border-style: solid;
  --operator-chip-hover-lift: -1px;
  box-shadow:
    var(--operator-chip-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal))) 26%, transparent),
    0 0 calc(0.7rem + var(--spw-collection-strength, 0) * 0.4rem) color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal))) 14%, transparent);
}

html[data-spw-color-mode="dark"] .operator-chip {
  --operator-chip-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
  --operator-chip-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%);
  --operator-chip-ink: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
  --operator-chip-hover-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 78%, var(--active-op-color, var(--teal, #008080)) 22%);
  --operator-chip-hover-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 54%, rgba(255, 255, 255, 0.18) 46%);
  --operator-chip-hover-ink: var(--ink-strong, rgba(245, 247, 250, 0.98));
  --operator-chip-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.08);
  --operator-chip-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] .operator-chip {
    --operator-chip-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
    --operator-chip-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%);
    --operator-chip-ink: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
    --operator-chip-hover-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 78%, var(--active-op-color, var(--teal, #008080)) 22%);
    --operator-chip-hover-border: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 54%, rgba(255, 255, 255, 0.18) 46%);
    --operator-chip-hover-ink: var(--ink-strong, rgba(245, 247, 250, 0.98));
    --operator-chip-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 0 1px rgba(0,0,0,0.08);
    --operator-chip-hover-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 14%, transparent);
  }
}

.spec-pill {
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--active-op-color, var(--teal)) 12%);
  border-color: color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft) 82%);
  background: color-mix(in oklab, var(--surface-strong, #fff) 94%, var(--active-op-color, var(--teal)) 6%);
  border-radius: var(--shape-control, 0.78rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.spw-discovery-notice__handle.spec-pill {
  display: inline-flex;
  align-items: center;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  min-height: 0;
  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, rgba(14, 18, 20, 0.96) 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(html[data-spw-color-mode="dark"]) :where(.site-frame, .frame-card, .frame-panel, .mode-panel) :where(.spw-component-tag, .spec-pill) {
  background: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 36%, rgba(255, 255, 255, 0.16) 64%);
  color: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
  :where(html[data-spw-color-mode="auto"]) :where(.site-frame, .frame-card, .frame-panel, .mode-panel) :where(.spw-component-tag, .spec-pill) {
    background: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 88%, var(--active-op-color, var(--teal, #008080)) 12%);
    border-color: color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 36%, rgba(255, 255, 255, 0.16) 64%);
    color: color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 0 1px rgba(0,0,0,0.08);
  }
}

.spw-discovery-notice__handle.spec-pill {
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--active-op-color, var(--teal)) 12%);
  color: color-mix(in srgb, rgba(14, 18, 20, 0.96) 88%, var(--active-op-color, var(--teal)) 12%);
}

:where(
  a.spec-pill,
  a.badge,
  a.tag,
  a.pill,
  a.frame-sigil,
  a.frame-card-sigil,
  a.spw-component-tag,
  a.spw-guide-chip
):visited {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%);
  background: var(--handle-bg);
  border-color: var(--handle-line-soft);
}

a.operator-chip:visited {
  color: var(--operator-chip-ink);
  background: var(--operator-chip-bg);
  border-color: var(--operator-chip-border);
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
)[data-spw-grounded="true"]:not([aria-current="page"]) {
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 68%),
    color-mix(in oklab, var(--surface-strong, #fff) 90%, var(--active-op-color, var(--teal)) 10%);
  border-color: color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 0 0 1px color-mix(in oklab, var(--active-op-color, var(--teal)) 8%, transparent);
}

:where(html[data-spw-color-mode="dark"]) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
)[data-spw-grounded="true"]:not([aria-current="page"]) {
  color: var(--operator-chip-ink, color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 68%),
    var(--operator-chip-bg, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 86%, var(--active-op-color, var(--teal, #008080)) 14%));
  border-color: var(--operator-chip-border, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(0,0,0,0.12);
}

@media (prefers-color-scheme: dark) {
  :where(html[data-spw-color-mode="auto"]) :where(
    .operator-chip,
    .spec-pill,
    .badge,
    .tag,
    .pill,
    .frame-sigil,
    .frame-card-sigil,
    .spw-component-tag,
    .spw-guide-chip,
    .header-annotation
  )[data-spw-grounded="true"]:not([aria-current="page"]) {
    color: var(--operator-chip-ink, color-mix(in srgb, var(--ink-strong, rgba(245, 247, 250, 0.98)) 90%, var(--active-op-color, var(--teal, #008080)) 10%));
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), transparent 68%),
      var(--operator-chip-bg, color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.94)) 86%, var(--active-op-color, var(--teal, #008080)) 14%));
    border-color: var(--operator-chip-border, color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 42%, rgba(255, 255, 255, 0.16) 58%));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 0 1px rgba(0,0,0,0.12);
  }
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
)[data-spw-grounded="true"]:not([aria-current="page"])::before {
  content: "";
  inline-size: 0.36rem;
  block-size: 0.36rem;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-inline-end: 0.14rem;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 38%),
    color-mix(in oklab, var(--active-op-color, var(--teal)) 72%, transparent);
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--active-op-color, var(--teal)) 16%, transparent);
}

.spw-component-tag {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
  flex: 0 1 auto;
  width: fit-content;
  max-inline-size: min(100%, 28ch);
  min-inline-size: 8ch;
  border-radius: var(--handle-radius-tight);
  color: var(--ink);
  background: var(--semantic-metadata-bg, color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent));
  border-color: var(--semantic-metadata-line, color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent));
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  font: inherit;
  line-height: 1.16;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spw-guide-chip {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--handle-radius-tight);
  background: var(--semantic-metadata-bg, color-mix(in oklab, var(--surface-soft, #fff) 88%, var(--active-op-color, var(--teal)) 12%));
  color: var(--semantic-metadata-ink, color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%));
  border-color: var(--semantic-metadata-line, color-mix(in oklab, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft) 82%));
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  font: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Substrate-aware tags and guide chips inherit the broader linguistic system. */
:where(.spw-component-tag, .spw-guide-chip)[data-spw-substrate] {
  color: var(--spw-substrate-color, color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 78%, var(--active-op-color, var(--teal)) 22%));
  border-color: color-mix(in oklab, var(--spw-substrate-border, var(--handle-line-soft)) 94%, transparent);
  background: color-mix(in oklab, var(--spw-substrate-bg-soft, var(--surface-soft)) 82%, var(--active-op-color, var(--teal)) 18%);
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before,
:where(.spw-component-tag, .spw-guide-chip)[data-spw-stance]::after {
  font-size: 0.9em;
  opacity: 0.6;
}

:where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before {
  margin-right: 0.24em;
}

html[data-spw-show-semantic-metadata="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before,
html[data-spw-debug-mode="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-role]::before {
  content: attr(data-spw-role);
}

html[data-spw-show-semantic-metadata="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-stance]::after {
  content: attr(data-spw-stance);
  margin-left: 0.28em;
  text-transform: uppercase;
}

html[data-spw-debug-mode="on"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-stance]::after {
  content: attr(data-spw-stance);
  margin-left: 0.28em;
  text-transform: uppercase;
}

:where(.spw-component-tag, .spw-guide-chip, .header-annotation):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--delight-color, var(--teal, #008080)) 28%, transparent);
  background: color-mix(in oklab, var(--surface-strong, #fff) 88%, var(--delight-color, var(--teal, #008080)) 12%);
  color: color-mix(in oklab, var(--ink, rgba(14, 18, 20, 0.92)) 84%, var(--delight-color, var(--teal, #008080)) 16%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--delight-color, var(--teal, #008080)) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  outline: none;
}

:where([data-spw-annotation-match="true"]) {
  --spw-field-intensity: max(var(--spw-field-intensity, 0), 0.42);
  outline: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal, #008080)) 18%, transparent);
  outline-offset: 2px;
}

:where([data-spw-annotation-state="preview"]) {
  --spw-field-intensity: max(var(--spw-field-intensity, 0), 0.34);
}

:where([data-spw-annotation-state="pinned"]) {
  --spw-field-intensity: max(var(--spw-field-intensity, 0), 0.58);
}

:where(html[data-spw-meaning-mode="quiet"]) :where(
  .spw-component-meta,
  .spw-component-guides,
  .spw-semantic-seam,
  .spw-section-handle-shell
) {
  opacity: 0.78;
}

:where(html[data-spw-meaning-mode="inspect"]) :where(
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation,
  [data-spw-annotation-match="true"]
) {
  --handle-line: color-mix(in srgb, var(--active-op-color, var(--teal)) 48%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent),
    var(--handle-shadow-rest);
}

:where(html[data-spw-meaning-mode="screenshot"]) :where(
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation,
  .operator-chip,
  .spec-pill,
  [data-spw-annotation-match="true"]
) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, var(--line, rgba(14, 18, 20, 0.14)));
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent);
  color: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--active-op-color, var(--teal)) 12%);
}

/* ==========================================================================
   6. Hover / focus / keyboard states
   ========================================================================== */

:where(
  .syntax-token,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .spw-delimiter,
  .operator-chip,
  [data-spw-handle="true"],
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 76%, transparent);
  background: var(--handle-bg-active);
  box-shadow: var(--handle-shadow-focus);
  outline: none;
}

:where(.spec-pill, .badge, .tag, .pill):hover {
  transform: none;
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .spw-spell-button,
  .spw-spell-shell,
  .spw-spell-link
):is(
  [data-spw-operator-reversibility="reversible"],
  [data-spw-operator-reversibility="recoverable"],
  [data-spw-operator-reversibility="returnable"],
  [data-spw-operator-reversibility="deferrable"],
  [data-spw-operator-reversibility="inspectable"],
  [data-spw-operator-reversibility="revisable"],
  [data-spw-operator-reversibility="replayable"]
) {
  border-style: dashed;
}

:where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .spw-spell-button,
  .spw-spell-shell,
  .spw-spell-link
):is(
  [data-spw-operator-reversibility="committing"],
  [data-spw-operator-reversibility="sticky"],
  [data-spw-operator-reversibility="constraining"],
  [data-spw-operator-reversibility="projected"],
  [data-spw-operator-reversibility="scoping"]
) {
  box-shadow:
    inset 0 -1.5px 0 color-mix(in srgb, currentColor 22%, transparent),
    var(--handle-shadow-rest);
}

:where(
  html[data-spw-page-arrival]:not([data-spw-page-arrival="settled"]),
  html[data-spw-page-transition-phase]:not([data-spw-page-transition-phase="settled"])
) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip
) {
  transition-timing-function: var(--ease-settle, ease);
}

:where(html[data-spw-page-arrival-step="1"]) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip
):not(:hover):not(:focus-visible) {
  --handle-arrival-lift: 1px;
  --handle-arrival-opacity: 0.96;
}

:where(html[data-spw-page-arrival-step="2"]) :where(
  .operator-chip,
  .spec-pill,
  .badge,
  .tag,
  .pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip
):not(:hover):not(:focus-visible) {
  --handle-arrival-lift: 0.5px;
  --handle-arrival-opacity: 0.985;
}

:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):hover {
  transform: none;
}

/* ==========================================================================
   7. Literate underline seam
   --------------------------------------------------------------------------
   These seams help inline semantics remain readable inside prose.
   ========================================================================== */

:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):not(.operator-chip):not(.frame-sigil):not(.spw-component-tag):not(.spw-guide-chip) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-decoration-thickness: var(--handle-underline-thickness);
  text-underline-offset: var(--handle-underline-offset);
  text-decoration-skip-ink: auto;
}

:where(
  .syntax-token,
  .spw-delimiter,
  :where(a, button, span, strong, em, i, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])
):not(.operator-chip):not(.frame-sigil):not(.spw-component-tag):not(.spw-guide-chip):is(:hover, :focus-visible) {
  text-decoration-color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ARIA + navigation-spells hygiene: directional affordance for destination semantics on key link families.
   projection (cross-route) gets a distinct forward-leaning treatment; scope/settle stay more contained. */
:where(
  .operator-chip,
  .header-sigil,
  .frame-operators a,
  .site-header nav a,
  body > header nav a
)[data-spw-nav-destination="projection"] {
  text-decoration-style: solid;
  text-decoration-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, transparent);
  text-decoration-thickness: calc(var(--handle-underline-thickness, 1.5px) * 1.1);
}

:where(
  .operator-chip,
  .header-sigil,
  .frame-operators a,
  .site-header nav a,
  body > header nav a
)[data-spw-nav-destination="scope"] {
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

:where(
  .operator-chip,
  .header-sigil,
  .frame-operators a,
  .site-header nav a,
  body > header nav a
)[data-spw-nav-destination="settle"] {
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
}

:where(em .syntax-token, em .spw-delimiter, em :where(a, button, span, strong, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])),
:where(i .syntax-token, i .spw-delimiter, i :where(a, button, span, strong, code, kbd, mark, small, time):where([data-spw-charge-key], [data-spw-inline-form], [data-spw-operator])) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ==========================================================================
   8. Handle state semantics
   --------------------------------------------------------------------------
   Selection, activation, latch, bookmark, knowledge, and allocation states.
   ========================================================================== */

:where([data-spw-selection="focused"]) {
  --handle-line: color-mix(in srgb, var(--active-op-color, var(--teal)) 54%, transparent);
}

:where(
  .operator-chip[aria-current="page"],
  [data-spw-selection="active"],
  [data-spw-selection="selected"]
) {
  background: var(--handle-bg-selected);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 38%, transparent);
  border-width: 1.5px;
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 86%, var(--ink, rgba(14, 18, 20, 0.92)));
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent),
    0 2px 8px color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
}

:where(
  .frame-sigil.is-selected,
  .frame-sigil[aria-pressed="true"]
) {
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 92%, var(--active-op-color, var(--teal)) 8%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 76%, var(--ink, rgba(14, 18, 20, 0.92)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 2px 8px color-mix(in srgb, var(--active-op-color, var(--teal)) 5%, transparent);
}

:where([data-spw-latched="true"]) {
  background: color-mix(in srgb, var(--handle-bg) 86%, var(--active-op-color, var(--teal)) 8%);
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 48%, transparent);
  box-shadow: var(--handle-shadow-latched);
  transform: translateY(0.5px);
}

:where([data-spw-pinned="true"], [data-spw-bookmarked="true"]) {
  border-color: color-mix(in srgb, var(--amber, #ffaa00) 62%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--amber, #ffaa00) 9%, transparent) 0%,
      transparent 100%
    ),
    var(--handle-bg);
}

:where([data-spw-pinned="true"], [data-spw-bookmarked="true"])::after {
  content: "";
  position: absolute;
  inset: auto 0.28rem 0.16rem auto;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber, #ffaa00) 72%, transparent);
  opacity: 0.82;
}

:where([data-spw-knowledge="gained"]) {
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, var(--line, transparent));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent),
      transparent 52%
    ),
    var(--handle-bg);
}

/* Allocation helps later copy generation: where is this token trying to live? */
:where([data-spw-allocation]) {
  --handle-allocation-color: var(--spw-substrate-color, var(--active-op-color, var(--teal)));
}

:where([data-spw-allocation="inline"]) {
  border-style: solid;
}

:where([data-spw-allocation="adjacent"]) {
  border-style: dashed;
}

:where([data-spw-allocation="room"]) {
  border-style: double;
}

html[data-spw-show-semantic-metadata="on"] :where([data-spw-allocation])::before {
  content: attr(data-spw-allocation);
  position: absolute;
  inset: auto auto calc(100% + 0.2rem) 50%;
  transform: translateX(-50%);
  padding: 0.08rem 0.28rem;
  border-radius: var(--handle-radius-pill);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--handle-allocation-color) 22%, transparent);
  color: var(--handle-ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

html[data-spw-show-semantic-metadata="on"] :where([data-spw-allocation]:is(:hover, :focus-visible))::before {
  opacity: 0.92;
}

.mode-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spw-control-gap, 0.24rem) + 0.1rem);
  min-width: 0;
}

.mode-switch[aria-label]::before {
  content: attr(aria-label);
  flex: 0 0 auto;
  max-inline-size: min(100%, 22ch);
  overflow: hidden;
  padding: 0.14rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
  border-radius: 999px;
  box-shadow: var(--spw-chassis-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.2));
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 82%, var(--active-op-color, var(--teal)) 18%);
  font-family: var(--handle-meta-font, var(--site-mono-font, monospace));
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-wrap: balance;
  white-space: nowrap;
}

body[data-spw-surface="home"] #home-frame .mode-switch[aria-label]::before {
  content: "lens \2192";
  max-inline-size: max-content;
  overflow: visible;
  padding: 0.14rem 0.42rem 0.14rem 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 78%, var(--active-op-color, var(--teal)) 22%);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-overflow: clip;
  white-space: nowrap;
}

/* Narrow viewports: unwrap the lens label and give pills a stable 2×2 grid. */
@media (max-width: 56rem) {
  .mode-switch[aria-label] {
    display: grid;
    grid-template-columns: repeat(2, minmax(7.25rem, 1fr));
    align-items: stretch;
    width: 100%;
    gap: calc(var(--spw-control-gap, 0.24rem) + 0.14rem);
  }

  .mode-switch[aria-label]::before {
    grid-column: 1 / -1;
    flex: none;
    width: 100%;
    max-inline-size: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-wrap: balance;
  }

  .mode-switch .frame-sigil {
    flex: 1 1 auto;
    inline-size: auto;
    width: auto;
    min-inline-size: 0;
    font-size: calc(var(--text-size-chip, 0.84rem) - 0.05rem);
    padding-inline: calc(var(--spw-control-padding-inline, 0.72rem) - 0.2rem);
  }
}

/* Shared mode-switch state lives here; routes should specialize with the
   --mode-switch-* variables instead of re-describing pressed/hover logic. */
.mode-switch .frame-sigil {
  --mode-switch-border-width: 1px;
  --mode-switch-idle-bg: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 90%, var(--active-op-color, var(--teal)) 10%);
  --mode-switch-idle-border: color-mix(in srgb, var(--active-op-color, var(--teal)) 34%, var(--line, rgba(14, 18, 20, 0.14)) 66%);
  --mode-switch-idle-ink: color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 88%, var(--active-op-color, var(--teal)) 12%);
  --mode-switch-idle-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
  --mode-switch-idle-weight: 500;
  --mode-switch-hover-bg: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 84%, var(--active-op-color, var(--teal)) 16%);
  --mode-switch-hover-border: color-mix(in srgb, var(--active-op-color, var(--teal)) 42%, transparent);
  --mode-switch-hover-ink: var(--ink, rgba(14, 18, 20, 0.92));
  --mode-switch-hover-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
  --mode-switch-hover-lift: var(--spw-control-hover-lift, -1px);
  --mode-switch-active-bg: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 72%, var(--active-op-color, var(--teal)) 28%);
  --mode-switch-active-border: color-mix(in srgb, var(--active-op-color, var(--teal)) 58%, transparent);
  --mode-switch-active-ink: var(--ink, rgba(14, 18, 20, 0.92));
  --mode-switch-active-weight: 600;
  --mode-switch-active-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent),
    0 2px 6px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
  --mode-switch-active-lift: 0px;
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  flex: 1 1 max(7.5rem, 20%);
  inline-size: auto;
  width: auto;
  max-width: 100%;
  min-height: calc(var(--spw-control-min-height, 2.1rem) - 0.22rem);
  padding: calc(var(--spw-control-padding-block, 0.24rem) - 0.04rem) calc(var(--spw-control-padding-inline, 0.72rem) - 0.08rem);
  border: var(--mode-switch-border-width) solid var(--mode-switch-idle-border);
  border-radius: var(--spw-control-radius, var(--shape-control, 0.68rem));
  background: var(--mode-switch-idle-bg);
  box-shadow: var(--mode-switch-idle-shadow);
  opacity: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mode-switch-idle-ink);
  font-weight: var(--mode-switch-idle-weight);
  font-size: var(--text-size-chip, 0.84rem);
  line-height: 1.02;
  transition:
    background-color var(--spw-interaction-commit, var(--spw-control-transition-fast, 140ms ease)),
    border-color var(--spw-interaction-commit, var(--spw-control-transition-fast, 140ms ease)),
    color var(--spw-interaction-commit, var(--spw-control-transition-fast, 140ms ease)),
    box-shadow var(--spw-interaction-commit, var(--spw-control-transition-base, 140ms ease)),
    transform var(--spw-interaction-acknowledge, var(--spw-control-transition-fast, 140ms ease)),
    font-weight var(--spw-interaction-commit, var(--spw-control-transition-fast, 140ms ease));
}

.mode-switch .frame-sigil:active {
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition-duration: var(--touch-acknowledge, 90ms);
  transition-timing-function: var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1));
}

.mode-switch .frame-sigil[aria-pressed]::after {
  content: "";
  inline-size: 0.38rem;
  block-size: 0.38rem;
  margin-inline-start: 0.38rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
  transform: scale(0.72);
  transition:
    opacity var(--spw-control-transition-fast, var(--handle-duration-fast, 140ms) var(--handle-ease, ease)),
    transform var(--spw-control-transition-fast, var(--handle-duration-fast, 140ms) var(--handle-ease, ease));
}

@media (prefers-color-scheme: dark) {
  .mode-switch .frame-sigil {
    --mode-switch-idle-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.92)) 82%, var(--active-op-color, var(--teal)) 18%);
    --mode-switch-idle-border: color-mix(in srgb, var(--active-op-color, var(--teal)) 44%, rgba(255, 255, 255, 0.18) 56%);
    --mode-switch-idle-ink: color-mix(in srgb, var(--ink, rgba(245, 247, 250, 0.96)) 92%, var(--active-op-color, var(--teal)) 8%);
    --mode-switch-hover-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.92)) 74%, var(--active-op-color, var(--teal)) 26%);
    --mode-switch-active-bg: color-mix(in srgb, var(--surface-strong, rgba(18, 22, 28, 0.92)) 64%, var(--active-op-color, var(--teal)) 36%);
    --mode-switch-active-ink: color-mix(in srgb, var(--ink, rgba(245, 247, 250, 0.98)) 96%, var(--active-op-color, var(--teal)) 4%);
  }
}

.mode-switch .frame-sigil:is(:hover, :focus-visible) {
  background: var(--mode-switch-hover-bg);
  border-color: var(--mode-switch-hover-border);
  color: var(--mode-switch-hover-ink);
  box-shadow: var(--mode-switch-hover-shadow);
  opacity: 1;
  transform: translateY(var(--mode-switch-hover-lift));
}

/* Explicit selected state must come after the base .mode-switch .frame-sigil rule to win cascade. */
.mode-switch .frame-sigil[aria-pressed="true"] {
  background: var(--mode-switch-active-bg);
  border-color: var(--mode-switch-active-border);
  color: var(--mode-switch-active-ink);
  font-weight: var(--mode-switch-active-weight);
  box-shadow: var(--mode-switch-active-shadow);
  opacity: 1;
  transform: translateY(var(--mode-switch-active-lift));
}

body[data-spw-surface="home"] .mode-switch .frame-sigil[aria-pressed="true"] {
  animation: none;
}

.mode-switch .frame-sigil[aria-pressed="true"]::after {
  opacity: 0.72;
  transform: scale(1);
}

.mode-switch .frame-sigil[aria-pressed="false"] {
  opacity: 1;
  background: var(--mode-switch-idle-bg);
  border-color: var(--mode-switch-idle-border);
  color: var(--mode-switch-idle-ink);
  box-shadow: var(--mode-switch-idle-shadow);
  font-weight: var(--mode-switch-idle-weight);
  transform: none;
}

.mode-switch .frame-sigil[aria-pressed="false"]:is(:hover, :focus-visible) {
  opacity: 1;
}

/* ==========================================================================
   9. Gesture states
   ========================================================================== */

:where([data-spw-form]) {
  transition:
    filter var(--handle-duration-base) var(--handle-settle-ease),
    transform var(--handle-duration-base) var(--handle-settle-ease),
    box-shadow var(--handle-duration-base) var(--handle-settle-ease),
    border-color var(--handle-duration-base) var(--handle-settle-ease);
}

:where([data-spw-gesture="charging"][data-spw-form="brace"]),
:where([data-spw-form="brace"]:hover),
:where([data-spw-form="brace"]:focus-within) {
  --brace-open-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 54%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 34%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 16%, transparent));
}

[data-spw-charge="active"],
[data-spw-charge="sustained"],
[data-spw-charge="manifest"] {
  transform: none !important;
}

[data-spw-touch]:active,
[data-spw-touch="tap"]:active {
  transform: scale(0.985);
  transition: transform 60ms var(--ease-mechanical, ease);
}

:where([data-spw-gesture="active"][data-spw-form="brace"]) {
  --brace-open-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 76%, transparent);
  --brace-close-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 58%, transparent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 22%, transparent));
}

:where([data-spw-gesture="active"][data-spw-form="block"]) {
  box-shadow: var(--shadow-active, 0 4px 20px rgba(0, 0, 0, 0.10));
  transform: translateY(0.5px);
}

/* Cohesion patch (Patch 008): living garden terms and tended disclosures inherit core gesture charge/armed visuals for unified feel */
.spw-living-term[data-spw-gesture="armed"],
.spw-garden-tended [data-spw-living-term][data-spw-gesture="armed"] {
  border-bottom-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 55%, transparent);
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
}

/* ARIA hygiene: armed state on any focusable gesture target shows distinct "hold to commit" affordance.
   This bridges the data-spw-gesture state written by brace-gestures.js to visual + AT users. */
:where([data-spw-gesture="armed"]):focus-visible {
  outline: 1px dashed color-mix(in srgb, var(--active-op-color, var(--teal)) 65%, transparent);
  outline-offset: 2px;
}

.spw-living-term[data-spw-gesture="charging"],
.spw-garden-tended [data-spw-living-term][data-spw-gesture="charging"] {
  border-bottom-color: var(--active-op-color, var(--teal));
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 25%, transparent);
}

.spw-living-term[data-spw-gesture="sustained"],
.spw-garden-tended [data-spw-living-term][data-spw-gesture="sustained"] {
  border-bottom-style: solid;
  border-bottom-color: var(--active-op-color, var(--teal));
}

@keyframes spw-handle-sustain-breath {
  0%,
  100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 18%, transparent);
  }

  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--teal)) 30%, transparent);
  }
}

:where([data-spw-gesture="sustained"][data-spw-form="brace"]),
:where([data-spw-gesture="sustained"][data-spw-form="block"]) {
  animation: spw-handle-sustain-breath 1.6s ease-in-out infinite;
}

:where([data-spw-gesture="projecting"][data-spw-form="brace"]) {
  transform: translate(calc(var(--drag-dx, 0px) * 0.03), calc(var(--drag-dy, 0px) * 0.03));
}

/* Interactive vocabulary development + resonance (vocabulary-resonance trope)
   - Terms carrying Spw/operator/brace/measure language become primable, wonder-charged objects.
   - Hover/prime/focus creates resonance (echo via wonder-memory, charge, annotation invitation).
   - Supports page-specific attentional rhythm and game/poetry-style discoverability.
   - Ties directly to 'vocabulary-resonance' trope and imagination-development north star.
   - Modern CSS: uses :has() + :focus-visible for clean, context-sensitive behavior. */
[data-spw-vocabulary-term],
[data-spw-semantic-expression],
.inline-note code,
.frame-note code {
  transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
  cursor: help;
}

[data-spw-vocabulary-term]:is(:hover, :focus-visible),
[data-spw-semantic-expression]:is(:hover, :focus-visible),
.inline-note code:is(:hover, :focus-visible),
.frame-note code:is(:hover, :focus-visible) {
  color: var(--active-op-color);
  background: color-mix(in srgb, var(--active-op-color) 8%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color) 25%, transparent);
}

/* When a vocabulary term is primed (via wonder-memory, annotation, or explicit data attr)
   it participates in the larger resonance field — supports priming wonder mechanics
   and easter-egg-like moments of recognition. */
body:has([data-spw-wonder-state]:not([data-spw-wonder-state=""])) [data-spw-vocabulary-term],
body:has([data-spw-annotation-match]) [data-spw-vocabulary-term] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Brace + operator + measurement topology enhancement (gestalt + phase coordination)
   When a brace is in a strong gesture/phase state and contains or is near
   measurement elements, strengthen proximity and common fate without causing
   wrapping surprises. Supports the "brace as manuscript layer container" and
   "fidget-tunable brace physics" directions. */
:where([data-spw-form="brace"][data-spw-gesture]:has([data-spw-measure-kind]),
       [data-spw-form="brace"][data-spw-gesture] [data-spw-measure-kind]) {
  --brace-measure-tint: color-mix(in srgb, var(--measure-tint, var(--spw-operator-color)) 22%, transparent);
  border-color: var(--brace-measure-tint);
  transition: border-color var(--duration-fast) var(--ease-settle);
}

:where([data-spw-form="brace"][data-spw-gesture="sustained"] [data-spw-measure-kind]) {
  /* Sustained brace gesture makes contained measures participate in the breath */
  animation: spw-handle-sustain-breath 1.6s ease-in-out infinite;
}

:where([data-spw-gesture="projecting"][data-spw-form="block"]) {
  transform: translate(calc(var(--drag-dx, 0px) * 0.02), calc(var(--drag-dy, 0px) * 0.02));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

/* Primed containment → cauldron tether (additive, inside gesture block).
   A charged/armed brace signals local value ready for gathering; the cauldron
   host and any primed ingredients receive a soft visual echo without new tokens. */
body:has([data-spw-gesture="armed"][data-spw-form="brace"]) [data-spw-cauldron],
body:has([data-spw-gesture="charging"][data-spw-form="brace"]) [data-spw-cauldron],
body:has([data-spw-gesture="sustained"][data-spw-form="brace"]) [data-spw-cauldron],
body:has([data-spw-gesture="armed"][data-spw-form="brace"]) [data-spw-cauldron-mirror],
body:has([data-spw-gesture="charging"][data-spw-form="brace"]) [data-spw-cauldron-mirror],
body:has([data-spw-gesture="sustained"][data-spw-form="brace"]) [data-spw-cauldron-mirror] {
  --cauldron-tether: color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  box-shadow: 0 0 0 1px var(--cauldron-tether);
}

.cauldron-ingredient[data-spw-ingredient-primed] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 32%, var(--cauldron-chip-border));
}

/* ==========================================================================
   10. Operator, substrate, role, and stance bias
   --------------------------------------------------------------------------
   This is where the file becomes more semantically integrated with the site.
   ========================================================================== */

:where([data-spw-features~="operators"] :where(main, footer) [data-spw-operator],
       [data-spw-features~="console"] .spw-console [data-spw-operator]) {
  color: var(--spw-operator-color, currentColor);
  border-color: var(--spw-operator-border, currentColor);
}

:where([data-spw-features~="operators"] :where(main, footer) [data-spw-operator]) {
  background: var(--spw-operator-bg-soft, transparent);
}

:where([data-spw-features~="operators"] :where(main, footer) [data-spw-operator]:is(:hover, :focus-visible)) {
  filter: brightness(1.04);
}

:where([data-spw-substrate]) {
  --handle-line:
    color-mix(in srgb, var(--spw-substrate-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--spw-substrate-bg-soft, var(--surface-strong)) 72%, transparent);
  --handle-ink:
    var(--spw-substrate-color, var(--active-op-color, var(--teal)));
}

:where([data-spw-role-cluster="reference"]) {
  --handle-line:
    color-mix(in srgb, var(--op-ref-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-ref-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-ref-color, var(--handle-ink));
}

:where([data-spw-role-cluster="schema"]) {
  --handle-line:
    color-mix(in srgb, var(--op-object-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-object-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-object-color, var(--handle-ink));
}

:where([data-spw-role-cluster="probe"]) {
  --handle-line:
    color-mix(in srgb, var(--op-probe-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-probe-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-probe-color, var(--handle-ink));
}

:where([data-spw-role-cluster="surface"]) {
  --handle-line:
    color-mix(in srgb, var(--op-surface-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-surface-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-surface-color, var(--handle-ink));
}

:where([data-spw-role-cluster="pragma"]) {
  --handle-line:
    color-mix(in srgb, var(--op-pragma-border, var(--handle-line)) 92%, transparent);
  --handle-bg:
    color-mix(in srgb, var(--op-pragma-bg-soft, var(--surface-soft)) 72%, transparent);
  --handle-ink:
    var(--op-pragma-color, var(--handle-ink));
}

:where([data-spw-stance="entry"]) {
  --handle-underline-offset: 0.18em;
}

:where([data-spw-stance="ground"]) {
  --handle-underline-offset: 0.14em;
}

:where([data-spw-stance="exit"]) {
  opacity: 0.86;
}

/* ==========================================================================
   11. Inline delimiters and brace phrases
   ========================================================================== */

.spw-delimiter {
  padding-inline: 0.08rem;
  border-radius: 0.18rem;
  font-family: var(--handle-meta-font);
  font-weight: 700;
  cursor: help;
}

.spw-delimiter--angle {
  color: var(--op-concept-color, var(--op-surface-color, var(--teal)));
}

.spw-delimiter--circle {
  color: var(--op-scene-color, var(--op-ref-color, rgba(60, 40, 120, 0.82)));
}

.spw-delimiter--square {
  color: var(--op-mode-color, var(--op-probe-color, var(--teal)));
}

.spw-delimiter--brace {
  color: var(--op-direction-color, var(--op-frame-color, var(--teal)));
}

[data-spw-inline-form] {
  position: relative;
  display: inline;
  border-radius: 0.2rem;
  transition:
    background-color var(--handle-duration-fast) var(--handle-ease),
    color var(--handle-duration-fast) var(--handle-ease);
}

[data-spw-inline-form="brace"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-direction-color, var(--op-frame-color, var(--teal))) 14%, transparent) 72%
  );
}

[data-spw-inline-form="angle"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-concept-color, var(--op-surface-color, var(--teal))) 14%, transparent) 72%
  );
}

[data-spw-inline-form="square"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-mode-color, var(--op-probe-color, var(--teal))) 14%, transparent) 72%
  );
}

[data-spw-inline-form="circle"] {
  background: linear-gradient(
    180deg,
    transparent 72%,
    color-mix(in srgb, var(--op-scene-color, var(--op-ref-color, rgba(60, 40, 120, 0.82))) 14%, transparent) 72%
  );
}

/* Children and sibling integration for inline learning surfaces. */
:where([data-spw-inline-form] > .spw-delimiter:first-child) {
  margin-inline-end: 0.04em;
}

:where([data-spw-inline-form] > .spw-delimiter:last-child) {
  margin-inline-start: 0.04em;
}

:where([data-spw-inline-form] + [data-spw-inline-form]) {
  margin-inline-start: 0.08em;
}

/* ==========================================================================
   12. Swappable affordance and roomy hints
   ========================================================================== */

:where([data-spw-swappable] .frame-sigil, [data-spw-swappable] .frame-card-sigil) {
  cursor: pointer;
}

:where([data-spw-swappable] .frame-sigil)::before {
  content: "";
  position: absolute;
  inset: auto 0 0.08rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--teal, #008080) 36%, transparent);
  opacity: 0.66;
}

:where([data-spw-gesture="charging"][data-spw-swappable] .frame-sigil)::before,
:where([data-spw-swappable] .frame-sigil:is(:hover, :focus-visible))::before {
  border-color: color-mix(in srgb, var(--teal, #008080) 72%, transparent);
  opacity: 1;
}

[data-spw-hint-surface] {
  display: none;
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.64rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

@container (min-width: 44rem) {
  [data-spw-hint-surface][data-spw-hint-density="roomy"] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
}

:where([data-spw-hint-surface] > [data-spw-handle="true"] + [data-spw-handle="true"]) {
  margin-inline-start: 0.1rem;
}

/* ==========================================================================
   13. Spell breadcrumbs
   ========================================================================== */

.spw-spell-path {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  position: relative;
  margin-block: 0.24rem 0.56rem;
  padding: 0.18rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--teal, #008080) 16%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--handle-meta-font);
  font-size: 0.72rem;
  contain: layout style;
  transition:
    color 120ms ease,
    opacity 120ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.spw-spell-path[data-spw-breadcrumb-state="open"] {
  padding: 0.18rem 0.24rem 0.22rem;
  border: 1px solid color-mix(in srgb, var(--teal, #008080) 10%, var(--line, rgba(14, 18, 20, 0.14)) 90%);
  border-radius: var(--shape-control, 0.78rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 52%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.9)) 96%, var(--teal, #008080) 4%);
}

:where(.site-header, body > header) .spw-spell-path {
  align-self: start;
  justify-self: stretch;
  margin-block: 0;
}

.spw-spell-path[data-spw-breadcrumb-reversible="true"] {
  box-shadow: none;
}

.spw-spell-path__header {
  display: flex;
  align-items: center;
  gap: 0.28rem 0.5rem;
  min-width: 0;
}

.spw-spell-path-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem 0.4rem;
  min-width: 0;
  min-height: var(--touch-target-compact, 2.15rem);
  padding: 0.12rem 0.28rem 0.12rem 0;
  border: 1px solid transparent;
  border-radius: var(--shape-control, 0.78rem);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--spw-interaction-commit, 180ms ease),
    border-color var(--spw-interaction-commit, 180ms ease),
    color var(--spw-interaction-commit, 180ms ease),
    transform var(--spw-interaction-acknowledge, 90ms ease),
    box-shadow var(--spw-interaction-commit, 180ms ease);
}

.spw-spell-path-toggle::after {
  content: "›";
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--teal, #008080) 58%, var(--ink-soft));
  font-size: 0.92rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform var(--spw-interaction-commit, 180ms var(--ease-chassis, ease));
}

.spw-spell-path-toggle[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.spw-spell-path-toggle:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  border-color: color-mix(in srgb, var(--teal, #008080) 18%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--teal, #008080) 8%);
  box-shadow: var(--spw-chassis-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.2));
  transform: translateY(var(--spw-control-hover-lift, -1px));
  outline: none;
}

.spw-spell-path-toggle:active {
  transform: translateY(var(--spw-control-press-depth, 1px)) scale(var(--spw-micro-press-scale, 0.998));
  transition-duration: var(--touch-acknowledge, 90ms);
  transition-timing-function: var(--ease-chassis, cubic-bezier(0.22, 0, 0, 1));
}

.spw-spell-path__title {
  color: var(--ink-soft);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spw-spell-path__summary {
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--ink, rgba(14, 18, 20, 0.92)) 18%);
  font-size: 0.68rem;
  line-height: 1.2;
}

.spw-spell-shell {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  transition:
    color 140ms ease,
    opacity 140ms ease;
}

.spw-spell-shell:is(:hover, :focus-visible) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
}

.spw-spell-shell-token {
  color: var(--teal);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-spell-shell-state {
  color: var(--ink-soft);
  font-size: 0.64rem;
}

.spw-spell-sorter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: var(--touch-target-compact, 2.15rem);
  margin-inline-start: auto;
  padding: 0.18rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--op-action-color, #0d7a72) 28%, var(--line, rgba(14, 18, 20, 0.14)) 72%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 58%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 92%, var(--op-action-color, #0d7a72) 8%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.spw-spell-sorter-chip:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--op-action-color, #0d7a72) 46%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.spw-spell-sorter-chip:active {
  transform: translateY(0);
  background: color-mix(in srgb, var(--op-action-color, #0d7a72) 12%, var(--surface-strong, #fff) 88%);
}

.spw-spell-sorter-chip__label-short {
  display: none;
}

.spw-spell-sorter-chip__token {
  color: var(--op-action-color, #0d7a72);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spw-spell-sorter-chip__label {
  color: var(--ink-soft);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
}

.spw-spell-crumb[data-spw-crumb-kind="region"] .spw-spell-token {
  color: var(--op-probe-color, #7c4dff);
}

.spw-spell-crumb[data-spw-crumb-kind="region"][data-spw-current="true"] .spw-spell-button {
  border-color: color-mix(in srgb, var(--op-probe-color, #7c4dff) 42%, transparent);
  background: color-mix(in srgb, var(--op-probe-color, #7c4dff) 10%, var(--surface-strong, #fff) 90%);
}

.spw-spell-path[data-spw-breadcrumb-region-menu="open"] .spw-spell-crumb[data-spw-crumb-kind="region"] .spw-spell-label {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spw-spell-path__hint {
  display: none;
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.64));
  font-size: 0.62rem;
  line-height: 1.35;
}

.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__hint {
  display: block;
  padding-inline: 0.12rem 0;
}

.spw-spell-button,
.spw-spell-link,
.spw-spell-shell {
  touch-action: manipulation;
}

.spw-spell-button:active,
.spw-spell-sorter-chip:active {
  opacity: 0.92;
}

.spw-spell-trail {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem 0.36rem;
  list-style: none;
  margin: 0;
  padding: 0.08rem 0.12rem 0.12rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  mask-image: linear-gradient(90deg, transparent, #000 0.65rem, #000 calc(100% - 0.65rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.65rem, #000 calc(100% - 0.65rem), transparent);
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
  scroll-snap-type: none;
  mask-image: none;
  -webkit-mask-image: none;
  touch-action: pan-y;
  gap: 0.28rem 0.32rem;
  padding: 0.12rem 0.04rem 0.16rem;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-crumb {
  flex: 0 1 auto;
  max-inline-size: 100%;
  scroll-snap-align: none;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-crumb:not(:last-child)::after {
  margin-inline-start: 0.1rem;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-path__header {
  flex-wrap: wrap;
  row-gap: 0.22rem;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-path-toggle {
  flex: 1 1 min(100%, 14rem);
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-sorter-chip {
  margin-inline-start: 0;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-sorter-chip__label {
  display: none;
}

.spw-spell-path[data-spw-breadcrumb-viewport="compact"] .spw-spell-sorter-chip__label-short {
  display: inline;
}

.spw-spell-path__guide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.16rem 0.34rem;
  align-items: baseline;
  margin: 0.06rem 0 0;
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.35;
}

.spw-spell-path__guide-lead,
.spw-spell-path__guide-action {
  min-width: 0;
}

.spw-spell-path__guide-action {
  color: var(--ink);
}

.spw-spell-path__guide-details {
  color: var(--ink-soft);
  opacity: 0.88;
}

.spw-spell-neighborhood {
  display: grid;
  gap: 0.22rem;
  margin: 0.06rem 0 0;
}

.spw-spell-neighborhood__label {
  color: var(--ink-soft);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spw-spell-neighborhood__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.34rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.spw-spell-neighborhood__item {
  min-width: 0;
}

.spw-spell-neighborhood__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.18rem 0.28rem;
  min-height: 1.84rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--teal, #008080) 8%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  text-decoration: none;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.spw-spell-neighborhood__link:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--teal, #008080) 24%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 88%, var(--teal, #008080) 12%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
  transform: translateY(-1px);
}

.spw-spell-neighborhood__name {
  color: var(--teal);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spw-spell-neighborhood__note {
  color: var(--ink-soft);
  font-size: 0.6rem;
  line-height: 1.25;
}

.spw-spell-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.spw-spell-crumb:not(:last-child)::after {
  content: "→";
  margin-inline-start: 0.18rem;
  color: var(--line-strong);
  opacity: 0.72;
}

.spw-spell-link,
.spw-spell-button {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-height: max(2.05rem, var(--spw-control-min-height, 2.15rem));
  min-width: 0;
  padding: calc(var(--spw-control-padding-block, 0.22rem) + 0.02rem) calc(var(--spw-control-padding-inline, 0.48rem) - 0.04rem);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font: inherit;
  text-decoration: none;
  contain: paint style;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.spw-spell-link:is(:hover, :focus-visible),
.spw-spell-button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--semantic-accent, var(--active-op-color, var(--teal, #008080))) 18%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, var(--semantic-accent, var(--active-op-color, var(--teal, #008080))) 6%);
  color: var(--ink, rgba(14, 18, 20, 0.92));
  outline: none;
  transform: translateY(-1px);
}

.spw-spell-crumb[data-spw-current="true"] .spw-spell-link,
.spw-spell-crumb[data-spw-current="true"] .spw-spell-button {
  border-color: color-mix(in srgb, var(--semantic-accent-emphasis, var(--semantic-accent, var(--active-op-color, var(--teal, #008080)))) 22%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--semantic-accent-emphasis, var(--semantic-accent, var(--active-op-color, var(--teal, #008080)))) 8%);
}

.spw-spell-token {
  color: var(--semantic-accent, var(--active-op-color, var(--teal, #008080)));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spw-spell-label {
  min-width: 0;
  color: var(--ink);
  text-wrap: nowrap;
}

.spw-spell-meaning {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.66rem;
  line-height: 1.45;
}

.spell-register-strip--effects .spell-register {
  border-color: color-mix(in srgb, var(--teal, #008080) 22%, transparent);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, var(--teal, #008080) 10%);
}

.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-trail,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-meaning,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__guide,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-neighborhood,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__inspect,
.spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-path__garden-trace {
  display: none;
}

.spw-spell-path[data-spw-breadcrumb-state="open"] .spw-spell-path__hint {
  display: none;
}

.spw-spell-path__inspect {
  margin: 0.08rem 0 0;
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.4;
}

.spw-spell-path__inspect > summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.08rem 0.2rem;
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--teal, #008080) 18%);
  cursor: pointer;
  list-style: none;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-spell-path__inspect > summary::-webkit-details-marker {
  display: none;
}

.spw-spell-path__inspect > summary::before {
  content: "›";
  margin-inline-end: 0.28rem;
  color: color-mix(in srgb, var(--teal, #008080) 58%, var(--ink-soft));
}

.spw-spell-path__inspect[open] > summary::before {
  transform: rotate(90deg);
}

.spw-spell-path__inspect .spw-spell-meaning {
  margin: 0.2rem 0 0;
  padding: 0.34rem 0.42rem;
  border: 1px dashed color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 88%, transparent);
  border-radius: var(--shape-small, 0.55rem);
  background: color-mix(in srgb, var(--surface-strong, #fff) 90%, transparent);
}

.spw-spell-neighborhood__note {
  display: none;
}

.spw-spell-path__garden-trace {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.38rem;
  margin: 0.12rem 0 0;
  padding: 0.2rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--teal, #008080) 14%, var(--line, rgba(14, 18, 20, 0.14)) 86%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--teal, #008080) 8%);
  font-size: 0.64rem;
}

.spell-provenance__label {
  color: color-mix(in srgb, var(--teal, #008080) 68%, var(--ink-soft));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-spell-path__guide-lead {
  color: color-mix(in srgb, var(--ink-soft) 78%, var(--ink, rgba(14, 18, 20, 0.92)) 22%);
  font-size: 0.66rem;
  line-height: 1.38;
}

@keyframes spw-breadcrumb-shell-project {
  0% {
    opacity: 0.86;
    transform: translateY(-0.06rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spw-breadcrumb-shell-settle {
  0% {
    opacity: 0.9;
    transform: translateY(0.04rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spw-breadcrumb-copy-clarify {
  0% {
    opacity: 0.82;
    transform: translateY(-0.04rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The breadcrumb and shell expose the same settle/open physics as the header. */
.spw-spell-path[data-spw-breadcrumb-menu-state="open"] {
  color: color-mix(in srgb, var(--ink-soft) 76%, var(--ink, rgba(14, 18, 20, 0.92)) 24%);
}

.spw-spell-path[data-spw-breadcrumb-menu-clarity="project"] {
  animation: spw-breadcrumb-shell-project 120ms ease-out;
}

.spw-spell-path[data-spw-breadcrumb-menu-clarity="settle"] {
  animation: spw-breadcrumb-shell-settle 100ms ease-out;
}

.spw-spell-path[data-spw-breadcrumb-menu-state="open"] .spw-spell-shell {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spw-spell-path[data-spw-breadcrumb-menu-state="closed"][data-spw-breadcrumb-reversible="true"] {
  border-style: solid;
}

.spw-spell-path[data-spw-breadcrumb-menu-phase="settling"][data-spw-breadcrumb-reversible="true"] .spw-spell-shell-state,
.spw-spell-path[data-spw-breadcrumb-menu-mode="toggle"][data-spw-breadcrumb-reversible="true"] .spw-spell-shell-state {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.16rem;
}

.spw-spell-path[data-spw-breadcrumb-menu-changed~="state"] .spw-spell-shell,
.spw-spell-path[data-spw-breadcrumb-menu-changed~="mode"] .spw-spell-shell,
.spw-spell-path[data-spw-breadcrumb-menu-changed~="phase"] .spw-spell-meaning {
  animation: spw-breadcrumb-copy-clarify 100ms ease-out;
}

@media (max-width: 720px) {
  :where(.site-header, body > header) .spw-spell-path {
    width: 100%;
    margin-block: 0;
  }

  .spw-spell-path {
    gap: 0.12rem;
    margin-block: 0.08rem 0.18rem;
    padding: 0.12rem 0 0;
  }

  .spw-spell-path__header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.32rem;
  }

  .spw-spell-path-toggle {
    flex: 1 1 auto;
    min-width: 0;
  }

  .spw-spell-path__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spw-spell-path__guide,
  .spw-spell-neighborhood {
    display: none;
  }

  .spw-spell-sorter-chip__label-full {
    display: none;
  }

  .spw-spell-sorter-chip__label-short {
    display: inline;
  }

  .spw-spell-path[data-spw-breadcrumb-state="closed"] {
    padding-block: 0.08rem 0;
  }

  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-shell {
    min-height: auto;
    padding: 0;
  }

  .spw-spell-path[data-spw-breadcrumb-state="closed"] .spw-spell-shell-state {
    display: none;
  }
}

.spell-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.48rem;
  align-items: center;
  min-width: 0;
}

.spell-board-content {
  display: grid;
  gap: 0.75rem;
}

.spell-visual--compact {
  gap: 0.3rem 0.36rem;
}

.spell-ingredient {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 0.08rem;
  min-height: 2rem;
  padding: 0.26rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--teal, #008080) 20%, transparent);
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--surface-strong, #fff) 96%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.76rem;
  line-height: 1.1;
}

.spell-ingredient-prefix,
.spell-ingredient-postfix {
  color: var(--teal, #008080);
  font-weight: 700;
}

.spell-ingredient-nucleus {
  color: var(--ink, rgba(14, 18, 20, 0.92));
}

.spell-ledger {
  display: grid;
  gap: 0.55rem;
}

.spell-register-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0.42rem;
  min-width: 0;
}

.spell-register {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.16rem 0.46rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 74%, transparent);
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
}

.spell-note {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.8rem;
  line-height: 1.55;
}

.spell-source {
  margin: 0;
  padding: 0.72rem 0.84rem;
  border-radius: 0.48rem;
  background: color-mix(in srgb, var(--surface-code, rgba(18, 23, 30, 0.94)) 90%, transparent);
  color: color-mix(in srgb, white 90%, var(--teal, #008080) 10%);
  overflow: auto;
}

.spell-source code {
  display: block;
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.74rem;
  line-height: 1.6;
}

.spell-source--compact {
  max-block-size: 12rem;
  padding: 0.56rem 0.68rem;
}

.spell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.spell-actions--bundles {
  margin-top: 0.1rem;
}

.spell-bundle-bank {
  display: grid;
  gap: 0.7rem;
}

.spell-bundle-grid {
  display: grid;
  gap: 0.65rem;
}

.spell-bundle-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.72rem 0.84rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(14,18,20,0.14)) 78%, transparent);
  border-radius: 0.56rem;
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
}

.spell-bundle-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

.spell-bundle-card__title {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  font-size: 0.82rem;
}

.spell-bundle-card__meta {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.72));
  font-size: 0.74rem;
  line-height: 1.5;
}

/* ==========================================================================
   14. Frame metrics
   ========================================================================== */

:where([data-spw-features~="metrics"] .frame-metrics-bar) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-top: 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 0.76rem;
  opacity: 0.68;
  transition:
    opacity var(--handle-duration-base) var(--handle-settle-ease),
    color var(--handle-duration-fast) var(--handle-ease);
}

:where([data-spw-features~="metrics"] .site-frame[data-state~="active"] .frame-metrics-bar,
       [data-spw-features~="metrics"] .frame-metrics-bar:hover) {
  opacity: 1;
}

.frame-metrics-label {
  flex-shrink: 0;
  color: var(--teal);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-spw-metric-kind] {
  padding: 0.1rem 0.36rem;
  border-radius: var(--handle-radius-pill);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

/* Sibling metric seams read as grouped data instead of isolated pills. */
:where([data-spw-metric-kind] + [data-spw-metric-kind]) {
  margin-inline-start: -0.12rem;
}

/* ==========================================================================
   15. Guided / cognitive handles
   --------------------------------------------------------------------------
   Makes semantic instruction legible without requiring dedicated panels.
   ========================================================================== */

/* Guiding should only style component-family containers, not arbitrary nodes. */
:where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] {
  box-shadow: var(--handle-shadow-guided);
  background-image:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--spw-substrate-bg-soft, transparent) 38%, transparent),
      transparent 52%
    );
}

/* Guided threshold states should read as an earned seam, not a generic highlight. */
:where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"][data-spw-liminality="threshold"] {
  border-color: color-mix(in srgb, var(--spw-substrate-color, var(--teal)) 34%, var(--handle-line-soft));
}

html[data-spw-show-semantic-metadata="on"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] > .spw-component-guides,
html[data-spw-show-semantic-metadata="on"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] > .spw-semantic-seam > .spw-component-guides {
  display: inline-flex;
}

html[data-spw-cognitive-handles="off"] :is(.spw-smart-console-host, .cognitive-surface-panel) {
  display: none !important;
}

html[data-spw-cognitive-handles="off"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .software-card,
  .operator-card,
  .mode-panel
)[data-spw-guided="true"] {
  box-shadow: none;
  background-image: none;
}

/* ==========================================================================
   16. Resonance seam
   ========================================================================== */

.resonance-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  color: var(--active-op-color, var(--teal));
  font-weight: 700;
}

.resonance-sigil {
  font-size: 0.8rem;
  font-family: var(--handle-meta-font);
  opacity: 0.72;
}

/* ==========================================================================
   17. Responsive alignment
   ========================================================================== */

@container (max-width: 38rem) {
  :where(.frame-topline, .frame-heading) {
    align-items: stretch;
  }

  :where(.frame-topline > .spec-strip,
         .frame-topline > .frame-operators,
         .frame-topline > .spw-component-meta,
         .frame-heading > .spw-component-meta) {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  :where(.frame-operators > *, .spec-strip > *, .spw-component-meta > *) {
    flex: 0 1 auto;
  }
}

@media (max-width: 600px) {
  .operator-chip {
    min-height: var(--spw-control-min-height, 2.02rem);
    padding: var(--spw-control-padding-block, 0.2rem) var(--spw-control-padding-inline, 0.6rem);
  }

  .mode-switch .frame-sigil {
    min-height: calc(var(--spw-control-min-height, 2.02rem) - 0.06rem);
    padding-inline: var(--spw-control-padding-inline, 0.6rem);
  }

  .spw-component-tag,
  .spw-guide-chip {
    max-inline-size: 100%;
    padding: 0.17rem 0.42rem;
    font-size: calc(var(--semantic-metadata-font-size, 0.58rem) + 0.01rem);
    letter-spacing: calc(var(--semantic-metadata-tracking, 0.04em) * 0.88);
  }
}

@media (max-width: 720px) {
  html[data-spw-show-semantic-metadata="on"] .spw-component-guides {
    display: none !important;
  }

  :where(.frame-topline, .frame-heading) {
    align-items: stretch;
    gap: calc(var(--spw-slot-gap-tight, 0.45rem) + 0.04rem);
  }

  :where(
    .frame-topline > .spw-component-meta,
    .frame-heading > .spw-component-meta,
    .frame-topline > .spec-strip,
    .frame-topline > .frame-operators
  ) {
    width: 100%;
    margin-left: 0;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  :where(.frame-topline > .spw-component-meta > :nth-child(n + 2),
         .frame-heading > .spw-component-meta > :nth-child(n + 2),
         .spw-semantic-seam > .spw-component-meta > :nth-child(n + 2)) {
    display: none;
  }
}

@media (max-width: 32rem) {
  :where(.frame-topline, .frame-heading) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.frame-topline > .frame-sigil, .frame-heading > .frame-sigil, .frame-topline > .spw-delimiter) {
    align-self: flex-start;
  }
}

/* ==========================================================================
   18. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(
    .operator-chip,
    .syntax-token,
    .spec-pill,
    .badge,
    .tag,
    .pill,
    .frame-sigil,
    .frame-card-sigil,
    .spw-delimiter,
    .spw-component-tag,
    .spw-guide-chip,
    .persona-chip,
    [data-spw-form],
    [data-spw-charge-key],
    [data-spw-inline-form],
    .spw-spell-path,
    .spw-spell-shell,
    .spw-spell-link,
    .spw-spell-button,
    .spw-spell-meaning,
    .frame-metrics-bar
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Pronunciation Hints */
.spw-pronunciation-hint {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spw-pronunciation-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.spw-pronunciation-hint__inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 28%, transparent);
  border-radius: var(--handle-radius-tight);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  white-space: nowrap;
}

.spw-pronunciation-hint__pronunciation {
  color: var(--active-op-color, var(--teal));
  font-family: var(--handle-meta-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spw-pronunciation-hint__mnemonic {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.2;
}

/* Garden-tended disclosures and living terms (Patch 007)
   — cozy, inspectable, gesture-aware markers for the four core practices.
   Uses existing projection lifts, operator colors, and wonder effects. */
.spw-garden-tended {
  border-left: 2px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, var(--handle-line-soft, rgba(0,0,0,0.12)) 82%);
  background: color-mix(in srgb, var(--surface-strong, #fff) 97%, var(--active-op-color, var(--teal)) 3%);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.5);
}

.spw-living-term {
  border-bottom: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 35%, transparent);
  cursor: default;
  position: relative;
  transition: border-color var(--handle-duration-fast, 140ms) var(--handle-ease);
}

/* Make gestureability easy to discover even when idle — subtle garden marker that only appears on interaction or focus */
.spw-living-term::after {
  content: "✧";
  position: absolute;
  right: -0.45em; /* tighter to reduce line-box pressure and wrapping artifacts at end of balanced text */
  top: -0.08em;
  font-size: 0.52em;
  color: color-mix(in srgb, var(--active-op-color, var(--teal)) 25%, transparent);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 120ms ease, color 120ms ease;
}

.spw-living-term:hover::after,
.spw-living-term:focus-visible::after {
  opacity: 0.85;
  color: var(--active-op-color, var(--teal));
}

.spw-living-term:hover,
.spw-living-term:focus-visible {
  border-bottom-color: var(--active-op-color, var(--teal));
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 6%, transparent);
}

.spw-living-term[tabindex="0"]:focus-visible {
  outline: 1px solid var(--active-op-color, var(--teal));
  outline-offset: 2px;
}

/* Numericity emphasis mode — makes rhythm numbers easy to discover and interact with.
   The baker's dozen (13-modulo) specifics are an easter egg: they surface in quantifiers, tooltips, and cauldron outputs when the mode is prominent or cauldron-first, or when you hold living-terms. Keeps the motif delightful for those who engage the system rather than announced in prose. */
html[data-spw-numericity-emphasis="prominent"] .spw-living-term[data-spw-concept*="day"],
html[data-spw-numericity-emphasis="prominent"] .spw-living-term[data-spw-concept*="step"],
html[data-spw-numericity-emphasis="prominent"] .spw-living-term[data-spw-concept*="trace"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="day"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="step"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="trace"] {
  font-weight: 600;
  border-bottom-width: 2px;
  --spw-numericity-lift: var(--spw-numericity-emphasis-factor, 1.35);
}

html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="day"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="step"],
html[data-spw-numericity-emphasis="cauldron-first"] .spw-living-term[data-spw-concept*="trace"] {
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent);
}

/* Garden consequence live strip (home inspector + KERNEL ENTRY carry surface)
   — the direct answer to "are the consequences meaningfully visible with effects that maintain temporal momentum?"
   Reuses cauldron-tether, garden-tended, and gesture state inheritance. Lives in handles layer. */
.garden-consequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-block-start: 0.35rem;
  padding-block-start: 0.35rem;
  border-top: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 70%, var(--active-op-color, var(--teal)) 30%);
}

.garden-consequence__label {
  font-weight: 720;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.garden-consequence [data-spw-mirror-label] {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.08rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent);
  font-size: 0.65rem;
  white-space: nowrap;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garden-consequence .garden-trail[data-spw-mirror-label="trail"] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 28%, transparent);
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 6%, transparent);
}

.garden-action {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 22%, transparent);
  background: transparent;
  color: var(--active-op-color, var(--teal));
  font-family: inherit;
  font-size: 0.64rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.garden-action:hover,
.garden-action:focus-visible {
  background: color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
  border-color: var(--active-op-color, var(--teal));
}

/* The KERNEL ENTRY carry surface — makes the prose promise of "gestures can be carried" have a live, traversable consequence */
.garden-carried {
  margin-block-start: 0.25rem;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 78%, var(--active-op-color, var(--teal)) 22%);
}
.garden-carried__label {
  opacity: 0.75;
  margin-inline-end: 0.35em;
}
.garden-carried__value {
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 30%, transparent);
}

/* When a re-gather happens, the footer cauldron receives a short "still warm" flash via the JS class */
.site-footer__cauldron.is-recently-tended,
[data-spw-cauldron].is-recently-tended {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 35%, transparent),
              0 0 0 3px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
  transition: box-shadow 200ms ease;
}

/* Spell provenance + garden trace on spell paths and atoms (direct "enhance spells similarly" continuation).
   Cohesive with the Garden State mirror and garden-consequence styles. Lives in handles layer. */
.spell-provenance,
.cauldron-garden-provenance,
.spw-spell-path__garden-trace {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  margin-block-start: 0.3rem;
  padding-block-start: 0.3rem;
  border-top: 1px dotted color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--ink-soft, rgba(27, 31, 35, 0.68)) 72%, var(--active-op-color, var(--teal)) 28%);
}

.spell-provenance__label,
.cauldron-garden-provenance .spell-provenance__label {
  font-weight: 720;
  letter-spacing: 0.02em;
  opacity: 0.82;
}

.spell-provenance__trace,
.spell-provenance__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.06rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, #fff) 95%, transparent);
  font-size: 0.63rem;
  white-space: nowrap;
}

.spell-provenance__chip {
  padding: 0 0.18rem;
  font-size: 0.58rem;
  opacity: 0.7;
}

.spell-provenance .garden-action,
.spell-provenance .spell-action {
  font-size: 0.62rem;
  padding: 0.08rem 0.36rem;
}

/* When a spell atom itself carries provenance (from garden mix or planted trail) */
.spell-ingredient[data-spw-garden-provenance] {
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--active-op-color, var(--teal)) 30%, transparent);
  position: relative;
}

.spw-spell-path__garden-trace {
  margin-block-start: 0.2rem;
  font-size: 0.64rem;
}

@media (max-width: 720px) {
  :is(.site-header, body > header)[data-spw-menu-mode="toggle"]
    .spw-spell-path[data-spw-breadcrumb-viewport="compact"]
    .spw-spell-path__header {
    flex-wrap: nowrap;
  }

  :is(.site-header, body > header)[data-spw-menu-mode="toggle"]
    .spw-spell-path[data-spw-breadcrumb-viewport="compact"][data-spw-breadcrumb-state="closed"] {
    gap: 0;
    padding-block: 0;
  }

  :is(.site-header, body > header)[data-spw-menu-mode="toggle"]
    .spw-spell-path[data-spw-breadcrumb-viewport="compact"][data-spw-breadcrumb-state="closed"]
    :is(.spw-spell-sorter-chip, .spw-spell-path__hint, .spw-spell-path__garden-trace) {
    display: none;
  }

  :is(.site-header, body > header)[data-spw-menu-mode="toggle"][data-spw-menu="open"]
    .spw-spell-path,
  :is(.site-header, body > header)[data-spw-menu-mode="toggle"][data-spw-menu="open"]
    .spw-header-trace {
    display: none;
  }
}
}

/* /public/css/handles/phase-controls.css */
@layer handles {
/* ==========================================================================
 * phase-controls.css
 * --------------------------------------------------------------------------
 * Phase Layer Menu
 * Spw phase choice appears as a braced layer control, not arrow navigation.
 * Integrated with the operator matrix, depth tiers, and motion grammar.
 * ========================================================================== */

:where(.phase-controls) {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;

    /* Support the inline HSL injection, but fallback safely to the active operator hue */
    --local-phase-color: hsl(
        var(--current-phase-hue, 180)
        var(--current-phase-sat, 100%)
        var(--current-phase-light, 28%)
    );
    color: var(--local-phase-color, var(--active-op-color, #008080));
}

/* ─── Trigger Button ────────────────────────────────────────────────────── */

:where(.phase-menu-trigger) {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--touch-target-min, 2.75rem) * 0.75);
    padding: var(--space-2xs, 0.25rem) var(--space-xs, 0.55rem);
    border: 1px solid currentColor;
    border-radius: var(--shape-component, 6px);
    background: var(--surface-soft, rgba(255, 255, 255, 0.44));
    color: currentColor;
    cursor: pointer;
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.75rem);
    line-height: 1.2;
    list-style: none;
    transition:
        background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.phase-menu-trigger::-webkit-details-marker) {
    display: none;
}

:where(.phase-menu-trigger::before) {
    content: '#:layer · ';
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    letter-spacing: 0.02em;
    transition: color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.phase-menu-trigger:hover) {
    background: var(--surface, rgba(255, 255, 255, 0.68));
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}

:where(.phase-menu-trigger:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

:where(.phase-menu[open] .phase-menu-trigger) {
    background: var(--surface-strong, rgba(255, 255, 255, 0.88));
}

/* ─── Dropdown Options Panel ────────────────────────────────────────────── */

:where(.phase-menu-options) {
    position: absolute;
    z-index: var(--layer-floating, 100);
    top: calc(100% + var(--space-2xs, 0.35rem));
    right: 0;
    display: grid;
    min-width: 13rem;
    gap: var(--space-3xs, 0.25rem);
    padding: var(--space-2xs, 0.45rem);
    border: 1px solid var(--spw-shell-line-strong, rgba(0, 128, 128, 0.34));
    border-radius: var(--shape-surface, 10px);
    background: var(--floating-bg, rgba(255, 255, 255, 0.95));
    box-shadow: var(--floating-shadow, 0 8px 32px rgba(0,0,0,0.12));
    -webkit-backdrop-filter: blur(var(--material-blur, 12px));
    backdrop-filter: blur(var(--material-blur, 12px));
}

:where(.phase-menu:not([open]) .phase-menu-options) {
    display: none;
}

/* ─── Menu Choices ──────────────────────────────────────────────────────── */

:where(.phase-menu-choice) {
    width: 100%;
    min-height: calc(var(--touch-target-min, 2.75rem) * 0.75);
    padding: var(--space-2xs, 0.35rem) var(--space-xs, 0.5rem);
    border: 1px solid transparent;
    border-radius: var(--shape-component, 6px);
    background: transparent;
    color: var(--ink, #161c1d);
    cursor: pointer;
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.75rem);
    text-align: left;
    transition:
        background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.phase-menu-choice:hover, .phase-menu-choice:focus-visible) {
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    outline: none;
}

/* Use color-mix to tint the active state with the inherited phase color */
:where(.phase-menu-choice[aria-pressed="true"]) {
    color: currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    font-weight: 700;
}

:where(.phase-menu-choice[aria-pressed="true"]::after) {
    content: ' = current';
    color: var(--ink-soft, rgba(14, 18, 20, 0.68));
    font-weight: 400;
}

/* ─── Responsive & Accessibility ────────────────────────────────────────── */

@media (max-width: 640px) {
    :where(.phase-controls) {
        width: 100%;
        margin-left: 0;
    }

    :where(.phase-menu-options) {
        right: auto;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.phase-menu-trigger, .phase-menu-trigger::before, .phase-menu-choice) {
        transition: none !important;
    }
}
}

/* /public/css/handles/logo.css */
@layer handles {
/* ==========================================================================
 * logo.css
 * --------------------------------------------------------------------------
 * Spwashi Logo Runtime
 * The logo is the smallest unit of the site's physics.
 * Every state it can enter — preview, charged, emitting, settled —
 * matches the site-wide canonical state vocabulary.
 *
 * Component topology: island (self-contained, interactive, serializable)
 * Touch: tap channel
 * State contract: settled → preview → charged → emitting → settled
 * ========================================================================== */

:where(.spw-logo) {
  --logo-charge: 0;
  --logo-arc-color: currentColor;
  --logo-w-color: currentColor;
  --logo-wordmark-opacity: 1;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 0.45em);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;

  transition:
    color var(--touch-acknowledge, 90ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    opacity var(--touch-acknowledge, 90ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
}

/* ── Mark (SVG glyph) ── */

:where(.spw-logo-mark) {
  flex-shrink: 0;
  display: block;
  width: 1.4em;
  height: 1.52em;  /* preserves 48:52 aspect ratio */
  color: var(--active-op-color, #008080);
  transition:
    color var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    transform var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    filter var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
  will-change: transform, filter;
}

:where(.mark-layer) {
  transition:
    stroke-opacity var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    stroke-width var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1)),
    stroke var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
}

:where(.mark-layer--arc) { stroke-opacity: 0.85; }
:where(.mark-layer--w)   { stroke-opacity: 0.65; }

/* ── Wordmark ── */

:where(.spw-logo-wordmark) {
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-sm, 0.88em);
  letter-spacing: 0.02em;
  font-weight: 400;
  opacity: var(--logo-wordmark-opacity);
  transition: opacity var(--touch-commit, 180ms) var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
  white-space: nowrap;
}

/* ── State: settled (default) ── */

:where(.spw-logo[data-logo-state="settled"], .spw-logo:not([data-logo-state])) {
  --logo-charge: 0;
}

/* ── State: preview ── */

:where(.spw-logo[data-logo-state="preview"]) {
  --logo-charge: 0.3;
}

:where(.spw-logo[data-logo-state="preview"] .spw-logo-mark) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

:where(.spw-logo[data-logo-state="preview"] .mark-layer--arc) {
  stroke-opacity: 1;
}

/* ── State: charged ── */

:where(.spw-logo[data-logo-state="charged"]) {
  --logo-charge: 0.7;
}

:where(.spw-logo[data-logo-state="charged"] .spw-logo-mark) {
  filter: brightness(1.08) saturate(1.12);
  transform: translateY(-1px) scale(1.04);
}

:where(.spw-logo[data-logo-state="charged"] .mark-layer--arc) {
  stroke-opacity: 1;
  stroke-width: 2.8;
}

:where(.spw-logo[data-logo-state="charged"] .mark-layer--w) {
  stroke-opacity: 0.9;
}

/* ── State: emitting ── */

:where(.spw-logo[data-logo-state="emitting"]) {
  --logo-charge: 1;
}

:where(.spw-logo[data-logo-state="emitting"] .spw-logo-mark) {
  filter: brightness(1.12) saturate(1.2);
  transform: scale(1.06);
}

@keyframes logo-emit-pulse {
  0%   { opacity: 0; transform: scale(0.95); }
  40%  { opacity: 0.3; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.2); }
}

:where(.spw-logo[data-logo-state="emitting"])::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--active-op-color, #008080);
  border-radius: var(--radius-pill, 50%);
  pointer-events: none;
  animation: logo-emit-pulse var(--duration-slow, 480ms) var(--ease-release, cubic-bezier(0.18, 0.72, 0.18, 1)) forwards;
}

/* ── Scroll-charge: driven by --logo-charge from JS ── */

:where(.spw-logo[data-logo-scroll] .spw-logo-mark) {
  filter:
    brightness(calc(1 + var(--logo-charge, 0) * 0.08))
    saturate(calc(1 + var(--logo-charge, 0) * 0.15));
}

/* ── Header placement ── */

:where(.header-logo) {
  display: flex;
  align-items: center;
}

/* ── Responsive & Accessibility ── */

@media (max-width: 480px) {
  :where(.spw-logo-wordmark) {
    display: none;
  }
}

@media (max-width: 360px) {
  :where(.spw-logo-mark) {
    width: 1.1em;
    height: 1.28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.spw-logo[data-logo-state="emitting"])::after {
    animation: none !important;
    display: none;
  }

  :where(.spw-logo-mark, .mark-layer, .spw-logo) {
    transition: none !important;
    transform: none !important;
  }
}
}

/* /public/css/handles/page-region-rail.css */
@layer handles {
/* ==========================================================================
   page-region-rail.css
   --------------------------------------------------------------------------
   Auto-built region index for long editorial routes (desktop explore aid).
   ========================================================================== */

:where(.spw-page-region-rail) {
  display: none;
}

@media (min-width: 68rem) {
  :where(html[data-spw-page-region-rail="on"]) :where(.spw-page-region-rail) {
    position: fixed;
    inset-block: calc(var(--header-height, 4rem) + 1rem) max(1rem, env(safe-area-inset-bottom));
    inset-inline-end: max(0.65rem, env(safe-area-inset-right));
    z-index: calc(var(--z-priority, 2000) + 6);
    display: grid;
    align-content: start;
    gap: 0.42rem;
    inline-size: min(11.5rem, calc(100vw - 1.2rem));
    max-block-size: calc(100vh - var(--header-height, 4rem) - 2rem);
    overflow: auto;
    padding: 0.55rem 0.5rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--line, rgba(14, 18, 20, 0.14)) 82%, transparent);
    border-radius: var(--shape-component, 6px);
    background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.94)) 92%, var(--active-op-color, #008080) 8%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
  }

  :where(.spw-page-region-rail__kicker) {
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  :where(.spw-page-region-rail__list) {
    display: grid;
    gap: 0.22rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(.spw-page-region-rail__link) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.32rem;
    align-items: baseline;
    padding: 0.22rem 0.34rem;
    border-radius: calc(var(--shape-element, 4px) + 1px);
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.25;
    text-decoration: none;
    transition:
      background-color 160ms ease,
      color 160ms ease;
  }

  :where(.spw-page-region-rail__link:is(:hover, :focus-visible)) {
    background: color-mix(in srgb, var(--active-op-color, #008080) 8%, transparent);
    color: var(--ink);
    outline: none;
  }

  :where(.spw-page-region-rail__link[data-spw-region-active="true"]) {
    background: color-mix(in srgb, var(--active-op-color, #008080) 12%, transparent);
    color: var(--ink);
    font-weight: 600;
  }

  :where(.spw-page-region-rail__link[data-spw-affordance="tune"]) {
    border-inline-start: 2px solid color-mix(in srgb, var(--op-action-color, #006b6b) 44%, transparent);
  }

  :where(.spw-page-region-rail__sigil) {
    font-family: var(--site-mono-font, "JetBrains Mono", monospace);
    font-size: 0.58rem;
    opacity: 0.78;
  }

  :where(.spw-page-region-rail__label) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

:where(html[data-spw-tuning-discoverability="quiet"]) :where(.spw-page-region-rail) {
  opacity: 0.72;
}
}

/* /public/css/effects/material.css */
@layer effects {
/* ==========================================================================
 * material.css
 * --------------------------------------------------------------------------
 * Purpose:
 * - Physics-informed material language for Spwashi.com.
 * - Provide depth, context, and low-cost material tuning for cards, panels,
 * chips, scenes, and text hosts.
 * - Support present interaction systems and modern oklab/oklch color mixing.
 *
 * Tunable material surface: the combination of data-spw-base-metamaterial (glass/matte
 * from site-settings/prepaint), data-spw-physics-reason, semanticDensity, and these
 * rules lets the entire visual substrate (ink strength, blur, lift, contrast) be
 * dialed live. Valuable for principal engineers collaborating with niche storytellers
 * on complex productions: "set matte + rich density + locked physics-reason for the
 * technical evidence layer; glass + playful for the emotional beat."
 * ========================================================================== */

/* ==========================================================================
   1. Root material tokens
   ========================================================================== */

:root {
  --material-settle-ease: var(--ease-settle, cubic-bezier(0.20, 0.80, 0.20, 1));
  --material-lift-ease:   var(--ease-mechanical, cubic-bezier(0.32, 0, 0.0, 1));
  --material-glide-ease:  var(--ease-paper, cubic-bezier(0.40, 0, 0.20, 1));

  --material-duration-fast:       var(--duration-fast, 140ms);
  --material-duration-base:       var(--duration-base, 220ms);
  --material-duration-deliberate: var(--duration-deliberate, 360ms);

  --material-prime-color:   var(--active-op-color, #008080);
  --material-highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.52);

  --material-depth-opacity-1: 0.88;
  --material-depth-opacity-2: 0.93;
  --material-depth-opacity-3: 0.97;

  --material-layer-substrate: var(--spw-local-layer-substrate, 0);
  --material-layer-content: var(--spw-local-layer-content, 1);
  --material-layer-overlay: var(--spw-local-layer-overlay, 2);

  --material-blur-frame: var(--material-blur, 12px);
  --material-blur-card:  calc(var(--material-blur, 12px) * 0.8);
  --material-blur-soft:  calc(var(--material-blur, 12px) * 0.5);

  /* Interaction Field */
  --interaction-excitement: 0;
  --interaction-glow: 0 0 0 0px transparent;
}

/* ==========================================================================
   2. Baseline material behavior
   ========================================================================== */

:where(
  .site-frame,
  .frame-card,
  .media-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  [data-spw-component-kind]:not(body):not(main),
  [data-spw-kind]:not(body):not(main),
  .design-promo-specimen
) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "effects";
  --spw-debug-layer-color: #d23669;

  /* Local tokens */
  --material-depth-opacity: var(--material-depth-opacity-2);
  --material-local-surface:
    color-mix(
      in oklab,
      var(--material-surface) calc(var(--material-depth-opacity) * 100%),
      transparent
    );
  --material-local-background: var(--material-local-surface);
  --material-local-border-color: var(--material-line);
  --material-local-shadow: var(--material-shadow-rest);

  /* Typography */
  color: var(--material-ink);

  /* Visual */
  background: var(--material-local-background);
  border: 1px solid var(--material-local-border-color);
  outline: 1px solid transparent;
  outline-offset: 2px;
  box-shadow:
    var(--material-local-shadow),
    var(--interaction-glow);

  /* Interaction */
  transition:
    transform    var(--material-duration-fast) var(--material-lift-ease),
    box-shadow   var(--material-duration-base) var(--material-settle-ease),
    border-color var(--material-duration-base) var(--material-glide-ease),
    background   var(--material-duration-base) var(--material-glide-ease),
    color        var(--material-duration-fast) var(--material-glide-ease),
    outline-color var(--material-duration-fast) var(--material-glide-ease);

  &:hover {
    --interaction-excitement: 0.08;
    --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 18%, var(--material-line));
  }

  &:focus-visible {
    --interaction-excitement: 0.16;
    --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 30%, var(--material-line));
    outline-color: color-mix(in oklab, var(--material-prime-color) 28%, transparent);
  }

  &[data-state~="active"] {
    --interaction-excitement: 0.24;
    --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 34%, var(--material-line));
    --material-local-shadow: var(--material-shadow-lift);
    --interaction-glow: 0 0 0 1px color-mix(in oklab, var(--material-prime-color) 12%, transparent);
  }

  &[data-spw-attention="dimmed"] {
    --material-depth-opacity: var(--material-depth-opacity-1);
    opacity: 0.5;
    filter: grayscale(0.28) contrast(0.94);
  }

  &[data-spw-attention="focused"] {
    --interaction-excitement: 0.32;
    --material-depth-opacity: var(--material-depth-opacity-3);
    z-index: var(--material-layer-content);
  }
}

/* ==========================================================================
   3. Material kinds (Refined with oklab)
   ========================================================================== */

:where([data-spw-metamaterial="matte"]) {
  --material-local-background:
    linear-gradient(
      180deg,
      var(--material-surface-matte-strong),
      color-mix(in oklab, var(--material-surface-matte) 96%, var(--material-prime-color) 4%)
    );
  --material-local-border-color: color-mix(in oklab, var(--material-line) 92%, var(--material-prime-color) 8%);
  --material-local-shadow: 0 1px 0 color-mix(in oklab, var(--material-ink-matte) 8%, transparent);
  /* Matte as the clear contrast safeguard: use strong ink for primary text by default.
     This fulfills the surface_material_contract for dense reading, forms, inspection. */
  color: var(--material-ink-matte-strong, var(--ink-on-matte-strong, var(--material-ink-matte)));
}

:where([data-spw-metamaterial="matte"]) :where(p, li, dd, figcaption, .frame-note, .spec-kicker) {
  color: var(--material-ink-matte-soft);
}

:where([data-spw-metamaterial="contrast"]) {
  --material-local-background:
    linear-gradient(
      180deg,
      var(--material-surface-contrast),
      color-mix(in oklab, var(--material-surface-matte-strong) 96%, var(--material-prime-color) 4%)
    );
  --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 24%, var(--material-line));
  --material-local-shadow:
    0 10px 24px color-mix(in oklab, var(--material-ink-contrast) 8%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--material-ink-contrast) 6%, transparent);
  color: var(--material-ink-contrast);
}

:where([data-spw-metamaterial="contrast"]) :where(p, li, dd, figcaption, .frame-note, .spec-kicker) {
  color: color-mix(in oklab, var(--material-ink-contrast) 82%, var(--material-prime-color) 18%);
}

:where([data-spw-metamaterial="paper"]) {
  --material-local-background: color-mix(in oklab, var(--material-surface) 96%, rgba(215, 193, 160, 0.12));
  --material-local-border-color: color-mix(in oklab, var(--material-line) 82%, rgba(120, 92, 64, 0.08));
}

:where([data-spw-metamaterial="bioplastic"]) {
  --material-local-background: color-mix(in oklab, var(--material-surface) 94%, var(--material-prime-color) 6%);
  --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 22%, var(--material-line));
}

:where([data-spw-metamaterial="field"]) {
  --material-local-background:
    radial-gradient(
      circle at 14% 18%,
      color-mix(in oklab, var(--material-prime-color) 10%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--material-surface) 94%, transparent) 0%,
      var(--material-surface) 100%
    );
  --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 16%, var(--material-line));
}

:where([data-spw-metamaterial="signal"]) {
  --material-local-background: color-mix(in oklab, var(--material-surface) 95%, var(--material-prime-color) 5%);
  --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 28%, var(--material-line));
}

:where([data-spw-metamaterial="glass"]) {
  --material-local-background:
    linear-gradient(
      180deg,
      color-mix(in oklab, #fff 12%, transparent) 0%,
      color-mix(in oklab, var(--material-surface) 92%, transparent) 100%
    );
  --material-local-border-color: color-mix(in oklab, #fff 14%, var(--material-line));
  --material-local-shadow:
    var(--material-shadow-rest),
    var(--material-highlight-inset);
}

/* Site utility and satchel (floating chrome) participate in material definition/tunability.
   When they carry data-spw-metamaterial (synced from global base or local), their surfaces use the
   current glass/matte/contrast treatment. This audits consistency: utilities/satchel now mind the
   same material contract as frames, specimens, notices. Tap/hold/drag on them are attentional gestures
   that should feel the material physics (e.g. no blur on matte, strong ink for legibility). */
:where(.spw-shell-utility-row, .spw-state-inspector__launch, .spw-state-inspector__panel)[data-spw-metamaterial="matte"] {
  background: var(--material-surface-matte);
  color: var(--material-ink-matte-strong);
  backdrop-filter: none;
}
:where(.spw-shell-utility-row, .spw-state-inspector__launch, .spw-state-inspector__panel)[data-spw-metamaterial="glass"] {
  background: var(--material-surface);
  color: var(--material-ink);
}
@supports (backdrop-filter: blur(1px)) {
  :where(html:not([data-spw-filters="off"])) :where(
    .spw-shell-utility-row[data-spw-metamaterial="glass"],
    .spw-state-inspector__panel[data-spw-metamaterial="glass"]
  ) {
    backdrop-filter: blur(var(--material-blur-soft));
    -webkit-backdrop-filter: blur(var(--material-blur-soft));
  }
}

/* Global page treatment via baseMetamaterial (for "matte clear contrast" option site-wide).
   Local data-spw-metamaterial on elements wins (cascade + specificity).
   This makes matte a reliable clear-contrast page posture when chosen in settings
   without forcing every child to carry the attr. Used by design hub experiments and
   any route that wants the safeguard for its primary reading surfaces. */
:where(body[data-spw-base-metamaterial="matte"]) :where(.site-frame, .frame-card, .frame-panel, .mode-panel, [data-spw-component-kind]:not(body):not(main), [data-spw-kind]:not(body):not(main)) {
  /* Inherit the matte projection; explicit metamaterial on a child can still override. */
}
:where(body[data-spw-base-metamaterial="matte"][data-spw-high-contrast="on"]) :where(.site-frame, .frame-card, .frame-panel, .mode-panel, [data-spw-component-kind]:not(body):not(main), [data-spw-kind]:not(body):not(main)) {
  /* When matte + high-contrast, force the strongest clear ink for the treatment. */
  color: var(--material-ink-matte-strong);
}

/* ==========================================================================
   4. Lore routing
   ========================================================================== */

:where([data-spw-lore-role]) {
  --material-prime-color: var(--amber, #c9a86e);
  --material-local-background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--material-prime-color) 10%, transparent) 0%,
      transparent 24%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--material-surface-strong) 96%, var(--material-prime-color) 4%) 0%,
      var(--material-surface) 100%
    );
  --material-local-border-color: color-mix(in oklab, var(--material-prime-color) 24%, var(--material-line));
  --material-local-shadow: var(--material-shadow-rest), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

/* ==========================================================================
   5. Capability-gated glass depth
   ========================================================================== */

@supports (backdrop-filter: blur(1px)) {
  :where(html:not([data-spw-filters="off"])) :where(
    [data-spw-metamaterial="glass"],
    .frame-card[data-spw-metamaterial="glass"],
    [data-spw-component-kind="frame"][data-spw-metamaterial="glass"]
  ) {
    backdrop-filter: blur(var(--material-blur-soft)) saturate(1.04);
    -webkit-backdrop-filter: blur(var(--material-blur-soft)) saturate(1.04);

    &[data-spw-charge="sustained"],
    &[data-state~="active"] {
      backdrop-filter: blur(var(--material-blur-card)) saturate(1.12);
      -webkit-backdrop-filter: blur(var(--material-blur-card)) saturate(1.12);
    }
  }
}

/* ─── Automated Content-Aware Overlays (Refined) ────────────────────────── */

@supports selector(:has(*)) {
  :where(
    .frame-card:has(img, video, canvas, .frame-card-media):not([data-spw-overlay]),
    .site-frame:has(img, video, canvas):not([data-spw-overlay])
  )::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    min-height: 42%;
    pointer-events: none;
    background: linear-gradient(to top, color-mix(in oklab, var(--ink) 18%, transparent), transparent);
    opacity: calc(0.28 + var(--interaction-excitement) * 0.4);
    z-index: var(--material-layer-overlay);
    border-radius: inherit;
    transition: opacity var(--material-duration-base) var(--material-glide-ease);
  }
}
}

/* /public/css/effects/enhancements.css */
@layer effects {
/* ==========================================================================
 * enhancements.css
 * --------------------------------------------------------------------------
 * Progressive enhancement layer.
 *
 * These selectors make planned features easier to read, but they do not own
 * route structure. Removing this file should leave the pages navigable.
 * Integrated with Spw semantic tokens, surface depths, and motion grammar.
 * ========================================================================== */

:where(.feature-map, .feature-ladder, .motif-grid, .capture-preset-grid) {
    display: grid;
    gap: var(--space-md, 1rem);
}

:where(.feature-map) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(.feature-map--asymmetric) {
    grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.9fr));
}

:where(.feature-card--primary) {
    grid-row: span 2;
    background: var(--surface, rgba(255, 255, 255, 0.68));
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.05));
    border-radius: var(--shape-surface, 10px);
}

:where(.feature-ladder) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

:where(.feature-ladder .frame-panel) {
    min-height: auto;
}

:where(.motif-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(.motif-card, .capture-preset) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.5rem);
    padding: var(--inset-component, 1rem);
    border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
    border-radius: var(--shape-component, 8px);
    background: var(--surface, rgba(255, 255, 255, 0.68));
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
    overflow: hidden;
    transition:
        transform var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        background-color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.motif-card:hover, .capture-preset:hover,
       .motif-card:focus-within, .capture-preset:focus-within) {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover, 0 4px 18px rgba(0, 0, 0, 0.09));
    border-color: var(--card-border-hover, rgba(0, 128, 128, 0.32));
    background: var(--surface-strong, rgba(255, 255, 255, 0.88));
}

:where(.motif-card::before, .capture-preset::before) {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: var(--active-op-color, #008080);
    opacity: 0.5;
    transition:
        width var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        opacity var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.motif-card:hover::before, .capture-preset:hover::before,
       .motif-card:focus-within::before, .capture-preset:focus-within::before) {
    width: 0.35rem;
    opacity: 0.85;
}

:where(.motif-card > *, .capture-preset > *) {
    position: relative;
    z-index: 1;
}

/* Operator Tints for Motif Cards */
:where(.motif-card--operator::before)     { background: var(--op-probe-color, #4a2180); }
:where(.motif-card--land::before)         { background: var(--op-ref-color, #1d57a3); }
:where(.motif-card--constellation::before){ background: var(--op-stream-color, #208259); }
:where(.motif-card--archive::before)      { background: var(--op-binding-color, #8f401f); }

:where(.capture-preset-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(.capture-preset) {
    min-height: 9.5rem;
    justify-content: flex-end;
}

:where(.capture-preset--portrait) { aspect-ratio: 4 / 5; }
:where(.capture-preset--square)   { aspect-ratio: 1 / 1; }
:where(.capture-preset--wide)     { aspect-ratio: 16 / 10; }
:where(.capture-preset--tall)     { aspect-ratio: 9 / 13; }

/* ==========================================================================
 * Responsive Breakpoints
 * ========================================================================== */

@media (max-width: 860px) {
    :where(.feature-map, .feature-map--asymmetric, .feature-ladder, .motif-grid, .capture-preset-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(.feature-card--primary) {
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    :where(.feature-map, .feature-map--asymmetric, .feature-ladder, .motif-grid, .capture-preset-grid) {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
 * Reduced Motion Handlers
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :where(.motif-card, .capture-preset, .motif-card::before, .capture-preset::before) {
        transition: none !important;
        transform: none !important;
    }
}
}

/* /public/css/effects/grain-texture.css */
@layer effects {
/* ==========================================================================
   grain-texture.css
   --------------------------------------------------------------------------
   Purpose
   - Subtle substrate texture providing tactile depth, semantic atmosphere,
     and artist-friendly background panels behind type.
   - Grain reads as layered material (texture + shadow/glow context),
     never raw visual noise.
   - Theming substrate for CSS + JS effects: grain, paper bloom,
     edge shadow, ambient residue, panel glow, and focusable overlays.
   Design stance
   - Body grain     = ambient field memory
   - Surface grain  = local material presence
   - Handle grain   = smallest, quietest tactile cue
   - Glow/shadow    = semantic light & containment
   Core contracts
   - CSS vars: --grain-opacity, --grain-panel-*, --grain-ambient-tint, etc.
   - Data attrs: html[data-spw-*], [data-spw-context], [data-spw-room], etc.
   - Fully controllable via JS (intensify, quiet, tint, project)
   ========================================================================== */

/* ==========================================================================
   1. Root grain system
   ========================================================================== */
:root {
  /* Base grain */
  --grain-opacity: 0.028;
  --grain-blend: multiply;
  --grain-body-opacity: calc(var(--grain-opacity) * 0.88);
  --grain-surface-opacity: calc(var(--grain-opacity) * 0.66);
  --grain-handle-opacity: calc(var(--grain-opacity) * 0.4);

  /* Scale & contrast per layer */
  --grain-body-scale: 224px;
  --grain-surface-scale: 176px;
  --grain-handle-scale: 136px;
  --grain-body-contrast: 1;
  --grain-surface-contrast: 1;
  --grain-handle-contrast: 0.94;

  /* Climate / bias tuners (tiny values for organic feel) */
  --grain-atmosphere-bias: 0;
  --grain-memory-bias: 0;
  --grain-resonance-bias: 0;

  /* Panel-friendly material vars */
  --grain-ambient-tint: color-mix(in srgb, var(--page-bg, #f8f7f5) 92%, transparent);
  --grain-panel-fill: color-mix(in srgb, var(--material-surface-strong, var(--surface-strong, rgba(255, 255, 255, 0.84))) 92%, transparent);
  --grain-panel-fill-strong: color-mix(in srgb, var(--material-surface-strong, var(--surface-strong, rgba(255, 255, 255, 0.84))) 98%, transparent);
  --grain-panel-edge: color-mix(in srgb, var(--material-line, var(--line, rgba(14, 18, 20, 0.14))) 82%, transparent);

  --grain-shadow-strength: 0.06;
  --grain-shadow-soft: var(--material-shadow-rest, 0 1px 2px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.65)),
    0 6px 16px rgba(0, 0, 0, var(--grain-shadow-strength));
  );

  --grain-glow-strength: 0.08;
  --grain-panel-glow: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) calc(var(--grain-glow-strength)*120%), transparent),
    0 0 18px color-mix(in srgb, var(--active-op-color, var(--teal)) calc(var(--grain-glow-strength)*100%), transparent);

  --grain-panel-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  --grain-panel-overlay-opacity: 0.22;
  --grain-panel-rim-opacity: 0.18;
  --grain-panel-tint-opacity: 0.08;

  /* SVG procedural grain textures (fractalNoise → desaturated → alpha ramp) */
  --grain-texture-ambient: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="224" height="224" viewBox="0 0 224 224"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="4" seed="7" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 0.4"/></feComponentTransfer></filter><rect width="224" height="224" filter="url(%23n)" opacity="0.44"/></svg>');
  --grain-texture-surface: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="176" height="176" viewBox="0 0 176 176"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.84" numOctaves="4" seed="11" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 0.48"/></feComponentTransfer></filter><rect width="176" height="176" filter="url(%23n)" opacity="0.5"/></svg>');
  --grain-texture-handle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="136" height="136" viewBox="0 0 136 136"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" seed="19" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 0.42"/></feComponentTransfer></filter><rect width="136" height="136" filter="url(%23n)" opacity="0.48"/></svg>');
}

/* ==========================================================================
   2. Global semantic tuning
   ========================================================================== */
html[data-spw-semantic-density="minimal"] {
  --grain-body-opacity: calc(var(--grain-opacity) * 0.62);
  --grain-surface-opacity: calc(var(--grain-opacity) * 0.46);
  --grain-handle-opacity: calc(var(--grain-opacity) * 0.26);
  --grain-shadow-strength: 0.045;
  --grain-glow-strength: 0.05;
}

html[data-spw-semantic-density="normal"] {
  --grain-body-opacity: calc(var(--grain-opacity) * 0.88);
  --grain-surface-opacity: calc(var(--grain-opacity) * 0.66);
  --grain-handle-opacity: calc(var(--grain-opacity) * 0.4);
  --grain-shadow-strength: 0.06;
  --grain-glow-strength: 0.08;
}

html[data-spw-semantic-density="rich"] {
  --grain-body-opacity: calc(var(--grain-opacity) * 1.02);
  --grain-surface-opacity: calc(var(--grain-opacity) * 0.8);
  --grain-handle-opacity: calc(var(--grain-opacity) * 0.46);
  --grain-shadow-strength: 0.075;
  --grain-glow-strength: 0.1;
}

html[data-spw-enhancement-level="minimal"] {
  --grain-surface-contrast: 0.92;
  --grain-handle-contrast: 0.86;
  --grain-panel-overlay-opacity: 0.14;
}

html[data-spw-enhancement-level="balanced"] {
  --grain-surface-contrast: 1;
  --grain-handle-contrast: 0.94;
  --grain-panel-overlay-opacity: 0.22;
}

html[data-spw-enhancement-level="rich"] {
  --grain-surface-contrast: 1.06;
  --grain-handle-contrast: 1;
  --grain-panel-overlay-opacity: 0.28;
  --grain-panel-rim-opacity: 0.24;
}

/* ==========================================================================
   3. Developmental climate tuning (grain as "climate residue")
   ========================================================================== */
html[data-spw-developmental-climate="orient"] {
  --grain-atmosphere-bias: 0.07;
  --grain-memory-bias: -0.01;
  --grain-resonance-bias: 0.02;
}

html[data-spw-developmental-climate="anchor"] {
  --grain-atmosphere-bias: -0.02;
  --grain-memory-bias: 0.08;
  --grain-resonance-bias: -0.02;
}

html[data-spw-developmental-climate="weave"] {
  --grain-atmosphere-bias: 0.02;
  --grain-memory-bias: 0.03;
  --grain-resonance-bias: 0.09;
}

html[data-spw-developmental-climate="rehearse"] {
  --grain-atmosphere-bias: -0.01;
  --grain-memory-bias: 0.09;
  --grain-resonance-bias: 0.02;
}

html[data-spw-developmental-climate="offer"] {
  --grain-atmosphere-bias: -0.04;
  --grain-memory-bias: 0.02;
  --grain-resonance-bias: 0.04;
}

/* ==========================================================================
   4. Scope-local grain controls (prevents leakage between nested surfaces)
   ========================================================================== */
:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper,
  .operator-chip, .spec-pill, .badge, .tag, .pill) {
  --grain-scope-opacity-multiplier: 1;
  --grain-scope-scale-multiplier: 1;
  --grain-scope-contrast-multiplier: 1;

  --grain-panel-shadow-local: var(--grain-shadow-soft);
  --grain-panel-glow-local: var(--grain-panel-glow);
  --grain-panel-fill-local: var(--grain-panel-fill);
  --grain-panel-edge-local: var(--grain-panel-edge);
  --grain-panel-overlay-local-opacity: var(--grain-panel-overlay-opacity);
  --grain-panel-rim-local-opacity: var(--grain-panel-rim-opacity);
  --grain-panel-tint-local-opacity: var(--grain-panel-tint-opacity);
}

/* ==========================================================================
   5. Ambient field grain (body substrate)
   ========================================================================== */
html,
body {
  min-height: 100%;
}

body {
  position: relative;
  background-image: var(--grain-texture-ambient);
  background-repeat: repeat;
  background-size: var(--grain-body-scale) var(--grain-body-scale);
  background-attachment: fixed;
  background-blend-mode: normal;
}

/* Optional atmosphere veil (JS-controllable) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: clamp(0,
      calc((var(--grain-atmosphere-bias) * 0.5) + (var(--grain-resonance-bias) * 0.24)),
      0.05);
  background:
    linear-gradient(180deg, var(--grain-ambient-tint), transparent 32%);
  mix-blend-mode: normal;
}

/* ==========================================================================
   6. Grain-bearing surfaces (texture + shading/glow layers)
   ========================================================================== */
:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper) {
  position: relative;
  isolation: isolate;
}

.spw-console {
  position: fixed;
}

:where(.operator-chip, .spec-pill, .badge, .tag, .pill) {
  position: relative;
  isolation: isolate;
  --grain-scope-opacity-multiplier: 0.8;
  --grain-scope-scale-multiplier: 0.92;
  --grain-scope-contrast-multiplier: 0.95;
}

/* Shared pseudo-element scaffolding */
:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper,
  .operator-chip, .spec-pill, .badge, .tag, .pill)::before,
:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: var(--spw-local-layer-substrate, 0);
}

:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper,
  .operator-chip, .spec-pill, .badge, .tag, .pill)> :not([data-spw-overlay]) {
  position: relative;
  z-index: var(--spw-local-layer-content, 1);
}

/* Surface grain layer */
:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper)::before {
  opacity: clamp(0,
      calc(var(--grain-surface-opacity) * var(--grain-scope-opacity-multiplier) + (var(--grain-memory-bias) * 0.16) + (var(--grain-resonance-bias) * 0.1)),
      0.08);
  background-image: var(--grain-texture-surface);
  background-repeat: repeat;
  background-size: calc(var(--grain-surface-scale) * var(--grain-scope-scale-multiplier)) calc(var(--grain-surface-scale) * var(--grain-scope-scale-multiplier));
  mix-blend-mode: var(--grain-blend);
  filter: contrast(calc(var(--grain-surface-contrast) * var(--grain-scope-contrast-multiplier)));
}

/* Panel shading / glow / bloom (artist + JS friendly) */
:where(.site-frame, .frame-card, .frame-panel, .mode-panel,
  .software-card, .operator-card, .media-card, .media-focus-card,
  .pretext-surface, .settings-category, .settings-fieldset,
  .domain-visual, .spw-console, .spw-nav-panel,
  .payment-card, .seed-card, .profile-card, .svc-wrapper)::after {
  opacity: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--grain-panel-fill-local) calc(var(--grain-panel-tint-local-opacity) * 100%), transparent), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, calc(var(--grain-panel-overlay-local-opacity)*0.42)), transparent 36%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--active-op-color, var(--teal)) calc(var(--grain-panel-rim-local-opacity)*40%), transparent), transparent 48%);
  box-shadow:
    var(--grain-panel-inset-highlight),
    var(--grain-panel-shadow-local);
}

/* Handle grain (chips, pills, badges – quietest layer) */
:where(.operator-chip, .spec-pill, .badge, .tag, .pill)::before {
  opacity: clamp(0,
      calc(var(--grain-handle-opacity) * var(--grain-scope-opacity-multiplier) + (var(--grain-memory-bias) * 0.06)),
      0.055);
  background-image: var(--grain-texture-handle);
  background-repeat: repeat;
  background-size: calc(var(--grain-handle-scale) * var(--grain-scope-scale-multiplier)) calc(var(--grain-handle-scale) * var(--grain-scope-scale-multiplier));
  mix-blend-mode: var(--grain-blend);
  filter: contrast(calc(var(--grain-handle-contrast) * var(--grain-scope-contrast-multiplier)));
}

:where(.operator-chip, .spec-pill, .badge, .tag, .pill)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.4));
}

/* ==========================================================================
   7. Artist-friendly background panel helpers
   ========================================================================== */
:where(.grain-panel, .grain-type-panel, .grain-backplate) {
  --grain-panel-fill-local: var(--grain-panel-fill-strong);
  --grain-panel-shadow-local: 0 2px 4px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.55)),
    0 10px 24px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.9));
  --grain-panel-glow-local: var(--grain-panel-glow);
  --grain-panel-overlay-local-opacity: 0.28;
  --grain-panel-rim-local-opacity: 0.24;

  position: relative;
  isolation: isolate;
  border: 1px solid var(--grain-panel-edge-local);
  border-radius: var(--shape-surface, 0.85rem);
  background: var(--grain-panel-fill-local);
  box-shadow: var(--grain-panel-shadow-local);
}

:where(.grain-panel, .grain-type-panel, .grain-backplate)::before,
:where(.grain-panel, .grain-type-panel, .grain-backplate)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

:where(.grain-panel, .grain-type-panel, .grain-backplate)::before {
  opacity: clamp(0, calc(var(--grain-surface-opacity) * 0.9), 0.09);
  background-image: var(--grain-texture-surface);
  background-repeat: repeat;
  background-size: var(--grain-surface-scale) var(--grain-surface-scale);
  mix-blend-mode: var(--grain-blend);
}

:where(.grain-panel, .grain-type-panel, .grain-backplate)::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--active-op-color, var(--teal)) 8%, transparent), transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    var(--grain-panel-glow-local);
  opacity: 1;
}

/* Contextual variants */
:where(.grain-type-panel) {
  padding: 0.5rem 0.7rem;
  border-radius: var(--shape-component, 0.6rem);
}

:where(.grain-backplate)[data-grain-panel-tone="quiet"] {
  --grain-panel-overlay-local-opacity: 0.14;
  --grain-panel-rim-local-opacity: 0.1;
}

:where(.grain-backplate)[data-grain-panel-tone="glow"] {
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent),
    0 0 20px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
}

:where(.grain-backplate)[data-grain-panel-tone="shadow"] {
  --grain-panel-shadow-local: 0 2px 5px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.65)),
    0 12px 28px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*1.15));
}

/* ==========================================================================
   8–14. Context, room, permeability, succession, wonder, theme, state, mode & motion tuning
   ========================================================================== */
/* (All remaining sections are unchanged in logic – only whitespace / grouping refined for readability) */

:where([data-spw-context="reading"]) {
  --grain-scope-opacity-multiplier: 0.92;
  --grain-scope-scale-multiplier: 1.04;
}

:where([data-spw-context="analysis"]) {
  --grain-scope-opacity-multiplier: 0.8;
  --grain-scope-scale-multiplier: 0.94;
  --grain-scope-contrast-multiplier: 1.05;
}

:where([data-spw-context="routing"]) {
  --grain-scope-opacity-multiplier: 0.66;
  --grain-scope-scale-multiplier: 0.9;
}

:where([data-spw-context="ritual"]) {
  --grain-scope-opacity-multiplier: 1.1;
  --grain-scope-scale-multiplier: 1.08;
  --grain-scope-contrast-multiplier: 1.06;
  --grain-panel-rim-local-opacity: calc(var(--grain-panel-rim-opacity)*1.2);
}

:where([data-spw-context="play"]) {
  --grain-scope-opacity-multiplier: 1;
}

:where([data-spw-context="settings"]) {
  --grain-scope-opacity-multiplier: 0.54;
  --grain-scope-scale-multiplier: 0.9;
}

:where([data-spw-context="publishing"]) {
  --grain-scope-opacity-multiplier: 0.88;
  --grain-scope-scale-multiplier: 1.02;
}

:where([data-spw-room="compact"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.82);
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*0.9);
}

:where([data-spw-room="roomy"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.04);
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*1.04);
}

:where([data-spw-permeability="sealed"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.72);
}

:where([data-spw-permeability="porous"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1);
}

:where([data-spw-permeability="annotatable"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.08);
}

:where([data-spw-permeability="mutable"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.12);
  --grain-scope-contrast-multiplier: calc(var(--grain-scope-contrast-multiplier)*1.05);
  --grain-panel-overlay-local-opacity: calc(var(--grain-panel-overlay-local-opacity)*1.08);
}

:where([data-spw-succession="raw"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.04);
}

:where([data-spw-succession="measured"]) {
  --grain-scope-contrast-multiplier: calc(var(--grain-scope-contrast-multiplier)*1.03);
}

:where([data-spw-succession="resolved"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.9);
}

:where([data-spw-succession="visited"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.02);
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*1.03);
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent), 0 0 16px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
}

:where([data-spw-succession="latched"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.86);
  --grain-scope-contrast-multiplier: calc(var(--grain-scope-contrast-multiplier)*0.96);
}

:where([data-spw-field-wonder="orientation"]) {
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*1.06);
}

:where([data-spw-field-wonder="inquiry"]) {
  --grain-scope-contrast-multiplier: calc(var(--grain-scope-contrast-multiplier)*1.08);
}

:where([data-spw-field-wonder="comparison"]) {
  --grain-scope-contrast-multiplier: calc(var(--grain-scope-contrast-multiplier)*1.04);
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*0.98);
}

:where([data-spw-field-wonder="memory"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.08);
}

:where([data-spw-field-wonder="projection"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.82);
  --grain-scope-contrast-multiplier: calc(var(--grain-scope-contrast-multiplier)*0.94);
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent), 0 0 22px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
}

:where([data-spw-field-wonder="constraint"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.76);
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*0.92);
}

:where([data-spw-field-wonder="resonance"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.1);
  --grain-scope-scale-multiplier: calc(var(--grain-scope-scale-multiplier)*1.04);
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent), 0 0 24px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent);
}

/* Theme & state overrides */
:where([data-spw-grain-theme="paper"]) {
  --grain-panel-fill-local: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.84)) 94%, #f3eadf 6%);
}

:where([data-spw-grain-theme="ink"]) {
  --grain-panel-fill-local: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.84)) 92%, var(--active-op-color, var(--teal)) 8%);
  --grain-panel-rim-local-opacity: calc(var(--grain-panel-rim-opacity)*1.1);
}

:where([data-spw-grain-theme="glow"]) {
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent), 0 0 24px color-mix(in srgb, var(--active-op-color, var(--teal)) 16%, transparent);
}

:where([data-spw-grain-theme="shadow"]) {
  --grain-panel-shadow-local: 0 2px 5px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.7)), 0 14px 30px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*1.2));
}

:where([data-spw-grain-state="quiet"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*0.74);
  --grain-panel-overlay-local-opacity: calc(var(--grain-panel-overlay-local-opacity)*0.72);
}

:where([data-spw-grain-state="active"]) {
  --grain-scope-opacity-multiplier: calc(var(--grain-scope-opacity-multiplier)*1.08);
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 14%, transparent), 0 0 18px color-mix(in srgb, var(--active-op-color, var(--teal)) 12%, transparent);
}

:where([data-spw-grain-state="projecting"]) {
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent), 0 0 24px color-mix(in srgb, var(--active-op-color, var(--teal)) 10%, transparent);
  --grain-panel-shadow-local: 0 4px 10px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.75)), 0 14px 28px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*1.05));
}

:where([data-spw-grain-state="glowing"]) {
  --grain-panel-glow-local: 0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent), 0 0 28px color-mix(in srgb, var(--active-op-color, var(--teal)) 18%, transparent);
}

:where([data-spw-grain-state="shadowed"]) {
  --grain-panel-shadow-local: 0 3px 8px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*0.85)), 0 18px 36px rgba(0, 0, 0, calc(var(--grain-shadow-strength)*1.2));
}

/* Mode / contrast */
html[data-spw-color-mode="light"] {
  --grain-blend: multiply;
}

html[data-spw-color-mode="dark"] {
  --grain-blend: screen;
  --grain-body-opacity: calc(var(--grain-body-opacity)*1.08);
  --grain-surface-opacity: calc(var(--grain-surface-opacity)*1.04);
  --grain-panel-fill: color-mix(in srgb, rgba(255, 255, 255, 0.08) 82%, transparent);
  --grain-panel-fill-strong: color-mix(in srgb, rgba(255, 255, 255, 0.12) 88%, transparent);
  --grain-panel-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] {
    --grain-blend: screen;
    --grain-body-opacity: calc(var(--grain-body-opacity)*1.08);
    --grain-surface-opacity: calc(var(--grain-surface-opacity)*1.04);
    --grain-panel-fill: color-mix(in srgb, rgba(255, 255, 255, 0.08) 82%, transparent);
    --grain-panel-fill-strong: color-mix(in srgb, rgba(255, 255, 255, 0.12) 88%, transparent);
    --grain-panel-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-color-scheme: light) {
  html[data-spw-color-mode="auto"] {
    --grain-blend: multiply;
  }
}

html[data-spw-high-contrast="on"] {
  --grain-body-opacity: 0;
  --grain-surface-opacity: calc(var(--grain-opacity)*0.14);
  --grain-handle-opacity: 0;
  --grain-blend: normal;
  --grain-panel-overlay-opacity: 0;
  --grain-panel-rim-opacity: 0;
  --grain-glow-strength: 0;
}

/* Gesture / grounded states */
:where([data-spw-grounded="true"], [data-spw-latched="true"], [data-spw-pinned="true"])::before {
  opacity: calc(var(--grain-surface-opacity)*0.68);
}

:where([data-spw-gesture="active"], [data-spw-gesture="armed"], [data-spw-charge="active"], [data-spw-charge="sustained"])::before {
  opacity: calc(var(--grain-surface-opacity)*0.68);
}

:where([data-spw-gesture="active"], [data-spw-gesture="armed"], [data-spw-charge="active"], [data-spw-charge="sustained"])::after {
  box-shadow: var(--grain-panel-inset-highlight), var(--grain-panel-shadow-local);
}

:where(.operator-chip[data-spw-gesture], .spec-pill[data-spw-gesture], .badge[data-spw-gesture], .tag[data-spw-gesture], .pill[data-spw-gesture])::before {
  opacity: calc(var(--grain-handle-opacity)*0.78);
}

/* Reduced motion / reduced load */
@media (prefers-reduced-motion: reduce) {
  body {
    background-image: none;
  }

  :where(.site-frame, .frame-card, .frame-panel, .mode-panel,
    .software-card, .operator-card, .media-card, .media-focus-card,
    .pretext-surface, .settings-category, .settings-fieldset,
    .domain-visual, .spw-console, .spw-nav-panel,
    .payment-card, .seed-card, .profile-card, .svc-wrapper,
    .operator-chip, .spec-pill, .badge, .tag, .pill,
    .grain-panel, .grain-type-panel, .grain-backplate)::before {
    opacity: 0.006;
  }

  :where(.site-frame, .frame-card, .frame-panel, .mode-panel,
    .software-card, .operator-card, .media-card, .media-focus-card,
    .pretext-surface, .settings-category, .settings-fieldset,
    .domain-visual, .spw-console, .spw-nav-panel,
    .payment-card, .seed-card, .profile-card, .svc-wrapper,
    .grain-panel, .grain-type-panel, .grain-backplate)::after {
    box-shadow: none;
  }
}
}

/* /public/css/effects/electromagnetic-container.css */
@layer effects {
/* ==========================================================================
 * electromagnetic-container.css
 * --------------------------------------------------------------------------
 * Charged Paper Containers
 * Containers hold state through crease weight, edge bias, and braced labels.
 * The metaphor remains charge/coherence, but the material is paper-machine.
 * Enhanced for dynamic text contrast and thematic resonance.
 * ========================================================================== */

/* ==========================================================================
   1. Field Tokens & Matrix Mapping
   ========================================================================== */

:root {
    /* Physics thresholds */
    --charge-none: 0;
    --charge-potential: 0.33;
    --charge-kinetic: 0.66;
    --charge-manifest: 1;

    /* Tied to the global operator matrix for emergent resonance */
    --conception-color: var(--op-probe-color, hsl(268 55% 42%));
    --potential-color:  var(--op-action-color, hsl(180 100% 22%));
    --kinetic-color:    var(--op-merge-color, hsl(188 55% 34%));
    --manifest-color:   var(--active-op-color, hsl(180 100% 28%));

    /* Motion routing */
    --resonance-freq: var(--duration-base, 220ms);
    --resonance-ease: var(--ease-mechanical, ease);
}

/* ==========================================================================
   2. Base Container Physics
   ========================================================================== */

:where([data-container-type]) {
    position: relative;

    /* Default state: Potential */
    --charge-state: var(--charge-potential);
    --field-intensity: 0.5;
    --coherence: 0.8;

    /* Dynamic Resonance Variables */
    --charge-accent: var(--potential-color);
    --charge-wash: color-mix(in srgb, var(--charge-accent) 6%, transparent);
    --charge-ink: var(--ink, #161c1d);

    color: var(--charge-ink);
    transition:
        border-color var(--resonance-freq) var(--resonance-ease),
        background-color var(--resonance-freq) var(--resonance-ease),
        outline-color var(--resonance-freq) var(--resonance-ease),
        color var(--resonance-freq) var(--resonance-ease);
}

/* The Crease (Left border logic) */
:where([data-container-type])::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(2px + (var(--coherence) * 2px));
    border-left: 2px solid var(--charge-accent);
    opacity: calc(0.38 + (var(--field-intensity) * 0.42));
    pointer-events: none;
    transition:
        opacity var(--resonance-freq) var(--resonance-ease),
        width var(--resonance-freq) var(--resonance-ease),
        border-color var(--resonance-freq) var(--resonance-ease);
}

/* The Tab (Top-right corner bias) */
:where([data-container-type])::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 0.8rem solid var(--charge-accent);
    border-left: 0.8rem solid transparent;
    opacity: calc(0.08 + (var(--field-intensity) * 0.16));
    pointer-events: none;
    transition: opacity var(--resonance-freq) var(--resonance-ease);
}

:where([data-container-type]:hover, [data-container-type]:focus-within) {
    border-color: var(--charge-accent);
    background-color: var(--charge-wash);
}

:where([data-container-type]:hover::before, [data-container-type]:focus-within::before) {
    opacity: 0.9;
}

/* ==========================================================================
   3. Charge States & Contrast Modulation
   ========================================================================== */

:where([data-charge="conception"]) {
    --charge-state: var(--charge-none);
    --field-intensity: 0.3;
    --coherence: 0.6;
    --charge-accent: var(--conception-color);
    --charge-wash: color-mix(in srgb, var(--charge-accent) 4%, transparent);
    --charge-ink: var(--ink-soft, rgba(14, 18, 20, 0.68)); /* Low contrast for early ideas */
}

:where([data-charge="potential"]) {
    --charge-state: var(--charge-potential);
    --field-intensity: 0.6;
    --coherence: 0.7;
    --charge-accent: var(--potential-color);
    --charge-wash: color-mix(in srgb, var(--charge-accent) 6%, transparent);
    --charge-ink: var(--ink, #161c1d); /* Standard reading contrast */
}

:where([data-charge="kinetic"]) {
    --charge-state: var(--charge-kinetic);
    --field-intensity: 0.8;
    --coherence: 0.85;
    --charge-accent: var(--kinetic-color);
    --charge-wash: color-mix(in srgb, var(--charge-accent) 8%, transparent);
    --charge-ink: var(--ink-strong, rgba(6, 8, 10, 0.96)); /* High contrast for active motion */
}

:where([data-charge="manifest"]) {
    --charge-state: var(--charge-manifest);
    --field-intensity: 0.9;
    --coherence: 0.95;
    --charge-accent: var(--manifest-color);
    --charge-wash: color-mix(in srgb, var(--charge-accent) 10%, transparent);
    --charge-ink: var(--ink-strong, rgba(6, 8, 10, 0.96)); /* Maximum contrast */
}

:where([data-charge-transitioning]) {
    outline: 2px solid var(--charge-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ==========================================================================
   4. Subjective Slices
   ========================================================================== */

:where([data-container-slice]) {
    position: relative;
    border-left: 3px solid var(--conception-color);
    transition:
        border-color var(--resonance-freq) var(--resonance-ease),
        background-color var(--resonance-freq) var(--resonance-ease);
}

:where([data-container-slice="conception"]) { border-left-color: var(--conception-color); }
:where([data-container-slice="potential"])  { border-left-color: var(--potential-color); }
:where([data-container-slice="kinetic"])    { border-left-color: var(--kinetic-color); }
:where([data-container-slice="manifest"])   { border-left-color: var(--manifest-color); }

/* ==========================================================================
   5. State Labels & Coherence Rings
   ========================================================================== */

:where([data-charge-indicator])::before {
    content: '#{' attr(data-charge-indicator) '}';
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    color: var(--charge-accent);
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.72rem);
    font-weight: 600;
    opacity: calc(var(--field-intensity) * 0.78);
    text-transform: lowercase;
}

:where([data-field-coherence]) {
    outline: 1px solid var(--charge-accent);
    outline-offset: -1px;
}

:where([data-container-type][data-charge-label]) {
    scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
}

/* ==========================================================================
   6. Conception to Realization Typographic Resonance
   ========================================================================== */

:where([data-conception-level]) {
    position: relative;
    opacity: calc(0.7 + (var(--charge-state) * 0.3));
    transition:
        opacity var(--resonance-freq) var(--resonance-ease),
        color var(--resonance-freq) var(--resonance-ease);
}

:where([data-conception-level="idea"]) {
    color: var(--conception-color);
    font-style: italic;
    font-weight: 400;
}

:where([data-conception-level="design"]) {
    color: var(--potential-color);
    font-weight: 500;
}

:where([data-conception-level="implementation"]) {
    color: var(--kinetic-color);
    font-family: var(--site-mono-font, monospace);
    font-weight: 600;
}

:where([data-conception-level="instance"]) {
    color: var(--manifest-color);
    font-weight: 700;
}

/* ==========================================================================
   7. Accessibility & High Contrast Constraints
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :where(
        [data-container-type],
        [data-container-type]::before,
        [data-container-type]::after,
        [data-container-slice],
        [data-conception-level]
    ) {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-contrast: more) {
    :where([data-container-type]::before, [data-container-slice]) {
        border-left-width: 4px;
    }

    :where([data-field-coherence]) {
        outline-width: 2px;
    }

    :where([data-container-type]::after) {
        opacity: 0.28;
    }
}
}

/* /public/css/effects/cinematic.css */
@layer effects {
/* ==========================================================================
 * cinematic.css
 * --------------------------------------------------------------------------
 * Purpose
 * - Shared motion, field, and depth physics for Spw surfaces and handles.
 * - Consumes semantic state from bus-driven charge, developmental climate,
 * component semantics, and authored HTML attributes.
 * - Serves as a seed layer for ethos: not just "animation", but the felt
 * mechanics of attention, pressure, memory, and release.
 * ========================================================================== */

/* ==========================================================================
   1. Typed property registration
   ========================================================================== */

@property --charge {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* ==========================================================================
   2. Root cinematic contracts
   ========================================================================== */

:root {
  /* Timing */
  --cinematic-arrive-duration:  var(--duration-fast, 140ms);
  --cinematic-dwell-duration:   var(--duration-base, 220ms);
  --cinematic-release-duration: var(--duration-slow, 480ms);

  --cinematic-arrive-ease:  cubic-bezier(0.22, 0, 0.0, 1);
  --cinematic-dwell-ease:   cubic-bezier(0.32, 0, 0.0, 1);
  --cinematic-release-ease: cubic-bezier(0.08, 0, 0.0, 1);

  /* Shared intensity */
  --cinematic-intensity: 1;
  --cinematic-depth-scale: 1;
  --cinematic-outline-scale: 1;
  --cinematic-wash-scale: 1;
  --cinematic-glow-scale: 1;
  --spw-motion-puppet-response: 0.36;
  --spw-motion-puppet-lag: calc(18ms + (var(--spw-motion-puppet-response) * 90ms));
  --spw-motion-puppet-lift: calc(var(--spw-motion-puppet-response) * -2px);

  /* Developmental climate handoff */
  --cinematic-climate-clarity:        var(--developmental-clarity, 0.64);
  --cinematic-climate-pressure:       var(--developmental-pressure, 0.34);
  --cinematic-climate-atmosphere:     var(--developmental-atmosphere, 0.18);
  --cinematic-climate-memory:         var(--developmental-memory, 0.18);
  --cinematic-climate-resonance:      var(--developmental-resonance, 0.16);
  --cinematic-climate-charge-bias:    var(--developmental-charge-bias, 0.24);
  --cinematic-climate-selection-bias: var(--developmental-selection-bias, 0.24);

  /* Default derived values */
  --cinematic-field-opacity:
    calc((0.08 + (var(--charge, 0) * 0.34) + (var(--cinematic-climate-atmosphere) * 0.08)) * var(--cinematic-glow-scale));
  --cinematic-field-radius:
    calc((4px + (var(--charge, 0) * 18px) + (var(--cinematic-climate-resonance) * 8px)) * var(--cinematic-depth-scale));
  --cinematic-outline-alpha:
    calc((0.14 + (var(--charge, 0) * 0.34) + (var(--cinematic-climate-charge-bias) * 0.12)) * var(--cinematic-outline-scale));
  --cinematic-wash-alpha:
    calc((0.04 + (var(--charge, 0) * 0.12) + (var(--cinematic-climate-atmosphere) * 0.04)) * var(--cinematic-wash-scale));
  --cinematic-shadow-alpha:
    calc(0.04 + (var(--charge, 0) * 0.12) + (var(--cinematic-climate-pressure) * 0.06));
}

/* ==========================================================================
   3. Learning-mode ethos
   ========================================================================== */

:where(html[data-spw-learning-mode="entry"]) {
  --cinematic-intensity: 0.9;
  --cinematic-depth-scale: 0.9;
  --cinematic-outline-scale: 0.88;
  --cinematic-wash-scale: 1.08;
  --cinematic-glow-scale: 0.9;
}

:where(html[data-spw-learning-mode="stabilize"]) {
  --cinematic-intensity: 1;
  --cinematic-depth-scale: 1.04;
  --cinematic-outline-scale: 1.06;
  --cinematic-wash-scale: 0.94;
  --cinematic-glow-scale: 0.94;
}

:where(html[data-spw-learning-mode="connect"]) {
  --cinematic-intensity: 1.04;
  --cinematic-depth-scale: 1;
  --cinematic-outline-scale: 0.96;
  --cinematic-wash-scale: 1;
  --cinematic-glow-scale: 1.08;
}

:where(html[data-spw-learning-mode="practice"]) {
  --cinematic-intensity: 0.96;
  --cinematic-depth-scale: 0.98;
  --cinematic-outline-scale: 1.08;
  --cinematic-wash-scale: 0.9;
  --cinematic-glow-scale: 0.92;
}

:where(html[data-spw-learning-mode="publish"]) {
  --cinematic-intensity: 1.08;
  --cinematic-depth-scale: 1.06;
  --cinematic-outline-scale: 1.12;
  --cinematic-wash-scale: 1.02;
  --cinematic-glow-scale: 1.06;
}

/* ==========================================================================
   3b. Query-tunable physics presets
   --------------------------------------------------------------------------
   These are deliberately root-level dispositions. Query strings and console
   tools can choose them without rewriting component CSS.
   ========================================================================== */

:where(html[data-spw-physics="calm"]) {
  --cinematic-intensity: 0.82;
  --cinematic-depth-scale: 0.78;
  --cinematic-outline-scale: 0.84;
  --cinematic-wash-scale: 0.72;
  --cinematic-glow-scale: 0.7;
  --spw-motion-puppet-response: 0.24;
}

:where(html[data-spw-physics="tactile"]) {
  --cinematic-intensity: 1;
  --cinematic-depth-scale: 1.08;
  --cinematic-outline-scale: 1;
  --cinematic-wash-scale: 0.9;
  --cinematic-glow-scale: 0.88;
  --spw-motion-puppet-response: 0.46;
}

:where(html[data-spw-physics="puppet"]) {
  --cinematic-intensity: 1.12;
  --cinematic-depth-scale: 1.18;
  --cinematic-outline-scale: 1.14;
  --cinematic-wash-scale: 1.04;
  --cinematic-glow-scale: 1.12;
  --spw-motion-puppet-response: 0.72;
}

:where(html[data-spw-physics="screenshot"]) {
  --cinematic-intensity: 0.92;
  --cinematic-depth-scale: 1;
  --cinematic-outline-scale: 1.24;
  --cinematic-wash-scale: 0.7;
  --cinematic-glow-scale: 0.58;
  --spw-motion-puppet-response: 0.18;
}

/* ==========================================================================
   4. Shared tracked elements
   ========================================================================== */

:where(
  [data-spw-form],
  [data-spw-charge],
  [data-spw-handle="true"],
  [data-spw-affordance],
  [data-spw-groundable="true"],
  .spw-delimiter,
  .operator-chip,
  .syntax-token,
  .spec-pill,
  .frame-sigil,
  .frame-card-sigil
) {
  transition:
    --charge         var(--cinematic-arrive-duration) var(--cinematic-arrive-ease),
    filter           var(--cinematic-arrive-duration) var(--cinematic-arrive-ease),
    box-shadow       var(--cinematic-dwell-duration)  var(--cinematic-dwell-ease),
    outline-color    var(--cinematic-dwell-duration)  var(--cinematic-dwell-ease),
    outline-offset   var(--cinematic-dwell-duration)  var(--cinematic-dwell-ease),
    border-color     var(--cinematic-dwell-duration)  var(--cinematic-dwell-ease),
    background-color var(--cinematic-release-duration) var(--cinematic-release-ease),
    opacity          var(--cinematic-release-duration) var(--cinematic-release-ease),
    text-shadow      var(--cinematic-dwell-duration) var(--cinematic-dwell-ease),
    transform        var(--cinematic-dwell-duration) var(--cinematic-dwell-ease);
}

:where(html[data-spw-physics="puppet"]) :where(
  .operator-chip,
  .spec-pill,
  .frame-sigil,
  .frame-card-sigil,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
):is(:hover, :focus-visible, [data-spw-gesture], [data-spw-annotation-state="pinned"]) {
  transform: translateY(var(--spw-motion-puppet-lift));
  transition-delay: var(--spw-motion-puppet-lag);
}

:where(html[data-spw-physics="screenshot"]) :where(
  [data-spw-kind],
  [data-spw-role],
  .operator-chip,
  .spec-pill,
  .spw-component-tag,
  .spw-guide-chip,
  .header-annotation
) {
  transition-duration: 0ms;
  animation: none;
}

:where(
  [data-spw-form]:not([data-spw-charge]):not(:hover),
  .operator-chip:not([data-spw-charge]):not(:hover),
  .syntax-token:not([data-spw-charge]):not(:hover),
  .spec-pill:not([data-spw-charge]):not(:hover),
  .frame-sigil:not([data-spw-charge]):not(:hover)
) {
  transition:
    --charge         var(--cinematic-release-duration) var(--cinematic-release-ease),
    filter           var(--cinematic-release-duration) var(--cinematic-release-ease),
    box-shadow       var(--cinematic-release-duration) var(--cinematic-release-ease),
    outline-color    var(--cinematic-release-duration) var(--cinematic-release-ease),
    outline-offset   var(--cinematic-release-duration) var(--cinematic-release-ease),
    border-color     var(--cinematic-release-duration) var(--cinematic-release-ease),
    background-color var(--cinematic-release-duration) var(--cinematic-release-ease),
    opacity          var(--cinematic-release-duration) var(--cinematic-release-ease),
    text-shadow      var(--cinematic-release-duration) var(--cinematic-release-ease),
    transform        var(--cinematic-release-duration) var(--cinematic-release-ease);
}

/* ==========================================================================
   5. Operator color resolution
   ========================================================================== */

:where([data-spw-operator="frame"])     { --spw-operator-color: var(--op-frame-color, #008080); }
:where([data-spw-operator="object"])    { --spw-operator-color: var(--op-object-color, #a67c00); }
:where([data-spw-operator="ref"])       { --spw-operator-color: var(--op-ref-color, #1d57a3); }
:where([data-spw-operator="probe"])     { --spw-operator-color: var(--op-probe-color, #4a2180); }
:where([data-spw-operator="action"])    { --spw-operator-color: var(--op-action-color, #005959); }
:where([data-spw-operator="stream"])    { --spw-operator-color: var(--op-stream-color, #208259); }
:where([data-spw-operator="merge"])     { --spw-operator-color: var(--op-merge-color, #277a87); }
:where([data-spw-operator="binding"])   { --spw-operator-color: var(--op-binding-color, #8f401f); }
:where([data-spw-operator="meta"])      { --spw-operator-color: var(--op-meta-color, #324a85); }
:where([data-spw-operator="normalize"]) { --spw-operator-color: var(--op-normalize-color, #4d7539); }
:where([data-spw-operator="pragma"])    { --spw-operator-color: var(--op-pragma-color, #883a3a); }
:where([data-spw-operator="surface"])   { --spw-operator-color: var(--op-surface-color, #178282); }
:where([data-spw-operator="layer"])     { --spw-operator-color: var(--op-layer-color, #404040); }
:where([data-spw-operator="baseline"])  { --spw-operator-color: var(--op-baseline-color, #594d3f); }
:where([data-spw-operator="topic"])     { --spw-operator-color: var(--op-topic-color, #1f6b80); }
:where([data-spw-operator="potential"])   { --spw-operator-color: var(--op-potential-color, var(--op-ref-color, #1d57a3)); }
:where([data-spw-operator="vibration"])   { --spw-operator-color: var(--op-vibration-color, var(--op-frame-color, #008080)); }
:where([data-spw-operator="ground"])      { --spw-operator-color: var(--op-ground-color, var(--op-baseline-color, #594d3f)); }
:where([data-spw-operator="wonder"])      { --spw-operator-color: var(--op-wonder-color, var(--op-probe-color, #4a2180)); }
:where([data-spw-operator="value"])       { --spw-operator-color: var(--op-value-color, var(--op-stream-color, #208259)); }
:where([data-spw-operator="subject"])     { --spw-operator-color: var(--op-subject-color, var(--op-merge-color, #277a87)); }
:where([data-spw-operator="perspective"]) { --spw-operator-color: var(--op-perspective-color, var(--op-action-color, #005959)); }
:where([data-spw-operator="integration"]) { --spw-operator-color: var(--op-integration-color, var(--op-object-color, #a67c00)); }
:where([data-spw-operator="concept"])     { --spw-operator-color: var(--op-concept-color, var(--op-topic-color, #1f6b80)); }
:where([data-spw-operator="scene"])       { --spw-operator-color: var(--op-scene-color, var(--op-surface-color, #178282)); }
:where([data-spw-operator="mode"])        { --spw-operator-color: var(--op-mode-color, var(--op-probe-color, #4a2180)); }
:where([data-spw-operator="direction"])   { --spw-operator-color: var(--op-direction-color, var(--op-frame-color, #008080)); }
:where([data-spw-sigil^="~"]) { --spw-operator-color: var(--op-potential-color, var(--op-ref-color, #1d57a3)); }
:where([data-spw-sigil^="#"]) { --spw-operator-color: var(--op-vibration-color, var(--op-frame-color, #008080)); }
:where([data-spw-sigil^="."]) { --spw-operator-color: var(--op-ground-color, var(--op-baseline-color, #594d3f)); }
:where([data-spw-sigil^="?"]) { --spw-operator-color: var(--op-wonder-color, var(--op-probe-color, #4a2180)); }
:where([data-spw-sigil^="!"]) { --spw-operator-color: var(--op-action-color, #005959); }
:where([data-spw-sigil^="*"]) { --spw-operator-color: var(--op-value-color, var(--op-stream-color, #208259)); }
:where([data-spw-sigil^="&"]) { --spw-operator-color: var(--op-subject-color, var(--op-merge-color, #277a87)); }
:where([data-spw-sigil^="@"]) { --spw-operator-color: var(--op-perspective-color, var(--op-action-color, #005959)); }
:where([data-spw-sigil^="^"]) { --spw-operator-color: var(--op-integration-color, var(--op-object-color, #a67c00)); }

/* ==========================================================================
   6. Shared charged field
   ========================================================================== */

:where(
  [data-spw-form][data-spw-charge],
  .operator-chip[data-spw-charge],
  .syntax-token[data-spw-charge],
  .spec-pill[data-spw-charge],
  .frame-sigil[data-spw-charge],
  .frame-card-sigil[data-spw-charge]
) {
  --cinematic-field-color: color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 26%, transparent);

  filter: none;

  outline: 1px solid color-mix(
    in srgb,
    var(--spw-operator-color, var(--active-op-color, #008080))
      calc(6% + (var(--charge, 0) * 14%)),
    transparent
  );
  outline-offset: calc(1px + (var(--charge, 0) * 1.5px));

  box-shadow:
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--spw-operator-color, var(--active-op-color, #008080))
        calc(4% + (var(--charge, 0) * 12%)),
      transparent
    ),
    0 4px 12px rgba(17, 18, 20, 0.04);
}

:where([data-spw-form="brace"][data-spw-charge]) {
  background-color: color-mix(
    in srgb,
    var(--spw-operator-color, var(--active-op-color, #008080))
      calc(var(--cinematic-wash-alpha) * 72%),
    transparent
  );
}

:where([data-spw-charge="active"], [data-spw-charge="sustained"], [data-spw-charge="manifest"]) {
  filter: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 16%, transparent),
    0 6px 16px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 8%, transparent);
}

:where([data-spw-charge="sustained"], [data-spw-gesture="armed"]) {
  animation: none;
}

@keyframes spw-cinematic-sustain-breath {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 24%, transparent))
      drop-shadow(0 0 4px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 56%, white));
  }
  50% {
    filter:
      drop-shadow(0 0 24px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 42%, transparent))
      drop-shadow(0 0 8px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 74%, white));
  }
}

/* ==========================================================================
   7. Gesture nuance
   ========================================================================== */

:where([data-spw-gesture="charging"]) {
  --cinematic-wash-scale: 0.92;
}

:where([data-spw-gesture="active"]) {
  --cinematic-outline-scale: 1.08;
  transform: none;
}

:where([data-spw-gesture="armed"]) {
  --cinematic-outline-scale: 1.14;
  --cinematic-glow-scale: 1.08;
}

:where([data-spw-gesture="committed"]) {
  --cinematic-depth-scale: 1.08;
  --cinematic-outline-scale: 1.1;
}

:where([data-spw-gesture="projecting"]) {
  --drag-dx: 0px;
  --drag-dy: 0px;
  transition: none;
  filter:
    drop-shadow(
      calc(var(--drag-dx) * 0.08)
      calc(var(--drag-dy) * 0.08)
      16px
      color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 40%, transparent)
    );
}

/* ==========================================================================
   8. Selection depth
   ========================================================================== */

:where([data-spw-selection="focused"]) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) calc((0.18 + var(--cinematic-climate-selection-bias)) * 100%), transparent);
}

:where([data-spw-selection="active"]) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 22%, transparent),
    0 8px 24px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 8%, transparent);
}

:where([data-spw-selection="selected"]) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 24%, transparent),
    0 0 0 4px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 8%, transparent);
}

/* ==========================================================================
   9. Brace dielectric physics
   ========================================================================== */

:where([data-spw-form="brace"]) {
  --brace-glow-alpha: calc(var(--charge, 0) * 0.24);
  --brace-edge-alpha: calc(0.12 + (var(--charge, 0) * 0.42));
  --brace-inner-density: calc(0.018 + (var(--charge, 0) * 0.06));
  position: relative;
}

:where([data-spw-form="brace"])::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(0, 128, 128, var(--brace-inner-density)) 0%,
      transparent 28%,
      transparent 68%,
      rgba(160, 42, 77, calc(var(--brace-inner-density) * 0.8)) 100%
    );
  opacity: calc(0.4 + (var(--charge, 0) * 0.5));
  transition: opacity var(--cinematic-release-duration) var(--cinematic-release-ease);
  z-index: 0;
}

:where([data-spw-form="brace"][data-spw-charge="charging"]) {
  box-shadow:
    inset 2px 0 0 rgba(0, 128, 128, calc(var(--brace-edge-alpha) * 0.92)),
    0 6px 14px rgba(0, 128, 128, calc(var(--brace-glow-alpha) * 0.24));
}

:where([data-spw-form="brace"][data-spw-charge="active"]) {
  box-shadow:
    inset 3px 0 0 rgba(0, 128, 128, calc(var(--brace-edge-alpha) + 0.08)),
    inset -2px 0 0 rgba(160, 42, 77, 0.1),
    0 8px 18px rgba(0, 128, 128, calc(var(--brace-glow-alpha) * 0.34));
}

:where([data-spw-form="brace"][data-spw-charge="sustained"], [data-spw-form="brace"][data-spw-charge="manifest"]) {
  box-shadow:
    inset 4px 0 0 rgba(0, 128, 128, 0.46),
    inset -3px 0 0 rgba(160, 42, 77, 0.18),
    0 10px 20px rgba(0, 128, 128, 0.1);
}

:where([data-spw-brace-state="emitting"]) {
  animation: spw-brace-emit 360ms var(--cinematic-release-ease) 1;
}

@keyframes spw-brace-emit {
  0%   { filter: brightness(1) scale(1); }
  38%  { filter: brightness(1.07) scale(1.008); }
  100% { filter: brightness(1) scale(1); }
}

:where([data-spw-form="brace"][data-spw-inspect-semantic-expanded="true"]) {
  --cinematic-outline-scale: 1.1;
  --cinematic-depth-scale: 1.04;
  --cinematic-wash-scale: 0.96;
}

:where([data-spw-form="brace"][data-spw-inspect-semantic-focused="true"]) {
  --cinematic-outline-scale: 1.16;
  --cinematic-glow-scale: 1.06;
  --cinematic-depth-scale: 1.06;
}

:where([data-spw-form="brace"][data-spw-inspect-semantic-match="true"]) {
  --cinematic-wash-scale: 0.92;
  --cinematic-glow-scale: 0.96;
}

/* ==========================================================================
   10. Grounding / pinning / latching
   ========================================================================== */

:where([data-spw-pinned="true"], [data-spw-latched="true"]) {
  --charge: 0.3;
  outline: 1px dashed color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 38%, transparent);
  outline-offset: 3px;
}

:where([data-spw-grounded="true"]) {
  opacity: calc(0.9 + (var(--cinematic-climate-memory) * 0.08));
  text-decoration: none;
  filter: none;
}

:where(.frame-card[data-spw-grounded="true"], .frame-panel[data-spw-grounded="true"], .software-card[data-spw-grounded="true"], .site-frame[data-spw-grounded="true"]) {
  opacity: 1;
  text-decoration: none;
}

:where([data-spw-grounded="false"]) {
  opacity: 1;
  text-decoration: none;
}

/* ==========================================================================
   11. Wonder-conditioned bias
   ========================================================================== */

:where([data-spw-field-wonder="orientation"]) { --cinematic-wash-scale: calc(1 + (var(--cinematic-climate-atmosphere) * 0.2)); }
:where([data-spw-field-wonder="inquiry"])     { --cinematic-glow-scale: calc(1 + (var(--cinematic-climate-clarity) * 0.12)); }
:where([data-spw-field-wonder="comparison"])  { --cinematic-depth-scale: calc(1 + (var(--cinematic-climate-resonance) * 0.12)); }
:where([data-spw-field-wonder="memory"])      { --cinematic-outline-scale: calc(1 + (var(--cinematic-climate-memory) * 0.16)); }
:where([data-spw-field-wonder="projection"])  { --cinematic-glow-scale: calc(1 + (var(--cinematic-intensity) * 0.08)); }
:where([data-spw-field-wonder="constraint"])  { --cinematic-outline-scale: calc(1 + (var(--cinematic-climate-pressure) * 0.18)); }
:where([data-spw-field-wonder="resonance"])   { --cinematic-depth-scale: calc(1 + (var(--cinematic-climate-resonance) * 0.16)); }

/* ==========================================================================
   12. Directionality
   ========================================================================== */

:where([data-spw-charge-direction="prefix"] .frame-card-sigil, [data-spw-charge-direction="prefix"] .frame-sigil) {
  text-shadow: 4px 0 8px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 18%, transparent);
}

:where([data-spw-charge-direction="postfix"] .frame-card-sigil, [data-spw-charge-direction="postfix"] .frame-sigil) {
  text-shadow: -4px 0 8px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 12%, transparent);
}

/* ==========================================================================
   13. Cinematic hosts and SVG surfaces
   ========================================================================== */

:where(.cinematic-host) {
  filter: drop-shadow(0 0 0 transparent);
  transition: filter var(--cinematic-release-duration) var(--cinematic-dwell-ease);
}

:where(.cinematic-host:hover) {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--active-op-color, #008080) 22%, transparent));
}

:where(.spw-svg-surface) {
  transition: transform var(--cinematic-arrive-duration) var(--cinematic-release-ease);
}

:where(.spw-svg-surface:hover) {
  transform: scale(1.005);
}

@keyframes flow-dash {
  to { stroke-dashoffset: -40; }
}

:where(.spw-svg-flow--animated) {
  animation: flow-dash 4s linear infinite;
}

:where([data-spw-charge="active"] .spw-svg-flow--animated)    { animation-duration: 2.2s; }
:where([data-spw-charge="sustained"] .spw-svg-flow--animated) { animation-duration: 1.2s; }

:where(.filter-aberration) {
  filter: url('#cinematic-aberration');
}

/* ==========================================================================
   14. Reactive spine (SVG Network)
   ========================================================================== */

:where(.op-node circle) {
  transition:
    opacity var(--cinematic-arrive-duration) var(--cinematic-arrive-ease),
    filter var(--cinematic-arrive-duration) var(--cinematic-arrive-ease),
    r var(--cinematic-dwell-duration) var(--cinematic-dwell-ease);
}

:where(.op-node text) {
  transition: opacity var(--cinematic-arrive-duration) var(--cinematic-arrive-ease);
}

:where(.op-node--charged circle) {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--active-op-color, #008080) 32%, transparent));
  opacity: 1;
}

:where(.op-node--charged[data-spw-charge="charging"] circle) {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--active-op-color, #008080) 28%, transparent));
}

:where(.op-node--charged[data-spw-charge="active"] circle) {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--active-op-color, #008080) 42%, transparent)) brightness(1.06);
}

:where(.op-node--charged[data-spw-charge="sustained"] circle) {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--active-op-color, #008080) 58%, transparent)) brightness(1.1);
  animation: spine-sustain 900ms var(--cinematic-dwell-ease) infinite;
}

@keyframes spine-sustain {
  0%, 100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--active-op-color, #008080) 42%, transparent)) brightness(1.06); }
  50%      { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--active-op-color, #008080) 64%, transparent)) brightness(1.12); }
}

:where(.op-node--frame)     { --active-op-color: var(--op-frame-color, #008080); }
:where(.op-node--object)    { --active-op-color: var(--op-object-color, #a67c00); }
:where(.op-node--probe)     { --active-op-color: var(--op-probe-color, #4a2180); }
:where(.op-node--ref)       { --active-op-color: var(--op-ref-color, #1d57a3); }
:where(.op-node--action)    { --active-op-color: var(--op-action-color, #005959); }
:where(.op-node--stream)    { --active-op-color: var(--op-stream-color, #208259); }
:where(.op-node--surface)   { --active-op-color: var(--op-surface-color, #178282); }
:where(.op-node--layer)     { --active-op-color: var(--op-layer-color, #404040); }
:where(.op-node--baseline)  { --active-op-color: var(--op-baseline-color, #594d3f); }
:where(.op-node--binding)   { --active-op-color: var(--op-binding-color, #8f401f); }
:where(.op-node--meta)      { --active-op-color: var(--op-meta-color, #324a85); }
:where(.op-node--merge)     { --active-op-color: var(--op-merge-color, #277a87); }
:where(.op-node--normalize) { --active-op-color: var(--op-normalize-color, #4d7539); }
:where(.op-node--pragma)    { --active-op-color: var(--op-pragma-color, #883a3a); }

/* ==========================================================================
   15. Parallel shimmer / resonance
   ========================================================================== */

:where(.spw-parallel-shimmer, [data-spw-parallel="active"]) {
  animation: spw-parallel-pulse 1.8s var(--cinematic-dwell-ease) infinite;
}

@keyframes spw-parallel-pulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 14px color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, #008080)) 40%, transparent); }
}

@keyframes spw-resonance-breathe {
  0%, 100% { outline-offset: 2px; outline-width: 1.5px; }
  50%      { outline-offset: 6px; outline-width: 1px; }
}

:where([data-spw-resonance="high"]) {
  outline: 1.5px solid color-mix(in srgb, var(--resonance-accent, var(--active-op-color, #008080)) 60%, transparent);
  animation: spw-resonance-breathe 1100ms var(--cinematic-dwell-ease) infinite;
}

:where([data-spw-resonance="medium"]) {
  outline: 1px solid color-mix(in srgb, var(--resonance-accent, var(--active-op-color, #008080)) 35%, transparent);
}

/* ==========================================================================
   16. Pop snap and emission cues
   ========================================================================== */

@keyframes spw-pop-snap {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(0.88); opacity: 0.9; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

:where(.spw-pop-snap) {
  animation: spw-pop-snap 180ms var(--cinematic-dwell-ease) forwards;
}

/* ==========================================================================
   17. Selective touch interaction
   ========================================================================== */

:where(
  button, [role="button"], [role="tab"], [data-spw-operator], [data-spw-wall],
  [data-spw-handle], [data-touch-ui], .operator-chip, .spec-pill, .mode-switch,
  .frame-sigil, .frame-card-sigil, .spw-objective-wall, .spw-subjective-wall,
  .spw-boon-wall, .spw-bane-wall
) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

:where(
  p, li, pre, code, blockquote, [data-copyable], [data-readable],
  .frame-panel p, .frame-card span, .inline-note, .frame-note
) {
  -webkit-user-select: text;
  user-select: text;
}

/* ==========================================================================
   18. Copy button states
   ========================================================================== */

:where([data-copy-button][aria-busy="true"], .copy-button[aria-busy="true"]) {
  opacity: 0.7;
  pointer-events: none;
}

:where(.copy-status) {
  min-height: 1.1em;
  font-size: var(--text-size-xs, 0.78rem);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  transition: opacity var(--duration-fast, 120ms) var(--cinematic-dwell-ease);
}

/* ==========================================================================
   19. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(
    [data-spw-form], [data-spw-charge], [data-spw-handle="true"],
    [data-spw-affordance], [data-spw-groundable="true"], .spw-delimiter,
    .operator-chip, .syntax-token, .spec-pill, .frame-sigil, .frame-card-sigil,
    .cinematic-host, .spw-svg-surface, .spw-svg-flow--animated, .op-node circle,
    .op-node text, .spw-parallel-shimmer, [data-spw-parallel="active"],
    [data-spw-resonance="high"], [data-spw-resonance="medium"], .spw-pop-snap, .copy-status
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
}

/* /public/css/effects/developmental-climate.css */
@layer effects {
/* ==========================================================================
   developmental-climate.css
   --------------------------------------------------------------------------
   Purpose:
   - Treats "climate" as editorial/learning weather rather than a full theme.
   - Uses subtle structural, spatial, and interaction cues.
   - Maintains full backward compatibility with older [data-spw-spirit-phase].
   - Consumes modern --climate-* variables when available.
   ========================================================================== */

/* ==========================================================================
   1. Climate Interface + Legacy Aliases
   ========================================================================== */

:root {
  /* Motion */
  --developmental-transition-duration: var(--climate-transition-duration, var(--duration-base, 180ms));
  --developmental-transition-slow: var(--climate-transition-slow, var(--duration-deliberate, 320ms));
  --developmental-transition-timing: var(--climate-transition-timing, var(--ease-mechanical, cubic-bezier(0.22, 0, 0.15, 1)));

  /* Default accent (fallback) */
  --climate-accent: var(--climate-orient-accent, hsl(42 48% 43%));

  /* Core climate accents */
  --climate-orient-accent: hsl(42 48% 43%);
  --climate-anchor-accent: hsl(215 28% 38%);
  --climate-weave-accent: hsl(155 32% 34%);
  --climate-rehearse-accent: hsl(274 24% 42%);
  --climate-offer-accent: hsl(184 42% 32%);

  /* Derived colors */
  --climate-accent-ink: color-mix(in srgb, var(--ink, currentColor) 86%, var(--climate-accent) 14%);
  --climate-accent-line: color-mix(in srgb, var(--climate-accent) 24%, var(--line, transparent));
  --climate-accent-line-strong: color-mix(in srgb, var(--climate-accent) 38%, var(--line, transparent));
  --climate-accent-wash: color-mix(in srgb, var(--climate-accent) 7%, transparent);
  --climate-accent-wash-strong: color-mix(in srgb, var(--climate-accent) 12%, transparent);

  /* Behavioral axes - defaults */
  --climate-clarity: 0.64;
  --climate-density: 0.5;
  --climate-annotation: 0.28;
  --climate-interaction: 0.28;
  --climate-relation: 0.22;
  --climate-publication: 0.12;

  /* Legacy behavioral aliases */
  --climate-clarity-bias: var(--climate-clarity);
  --climate-pressure-bias: 0.34;
  --climate-atmosphere-bias: 0.18;
  --climate-memory-bias: 0.18;
  --climate-resonance-bias: var(--climate-relation);
  --climate-charge-bias: var(--climate-interaction);
  --climate-selection-bias: var(--climate-interaction);

  /* Output tokens */
  --climate-hint-opacity: 0.65;
  --climate-outline-strength: 0.22;
  --climate-annotation-strength: var(--climate-annotation);
  --climate-connection-strength: var(--climate-relation);
  --climate-publication-strength: var(--climate-publication);
  --climate-selection-ring: color-mix(in srgb, var(--climate-accent) 22%, transparent);
  --climate-seam-width: 3px;
  --climate-gap-scale: 1;
  --climate-pad-scale: 1;
  --climate-hover-lift: -2px;

  --climate-seam-color: color-mix(in srgb, var(--climate-accent) 7%, transparent);
  --climate-seam: linear-gradient(
      90deg,
      var(--climate-seam-color) 0 var(--climate-seam-width),
      transparent var(--climate-seam-width)
  );

  --climate-frame-left-rail: color-mix(in srgb, var(--climate-accent) 24%, transparent);
  --climate-frame-header-line: color-mix(in srgb, var(--climate-accent) 18%, transparent);

  --climate-paper-tint: color-mix(in srgb, var(--climate-accent) 3%, transparent);
  --climate-margin-tint: color-mix(in srgb, var(--climate-accent) 5%, transparent);

  /* Menu / badge */
  --climate-badge-bg: color-mix(in srgb, var(--climate-accent) 8%, var(--surface-strong, rgba(255, 255, 255, 0.88)));
  --climate-badge-text: color-mix(in srgb, var(--climate-accent) 64%, var(--ink, currentColor));
  --climate-menu-bg: color-mix(in srgb, var(--surface-strong, #fff) 94%, var(--climate-accent) 6%);
  --climate-menu-line: color-mix(in srgb, var(--climate-accent) 22%, transparent);
  --climate-menu-shadow: 0 10px 28px color-mix(in srgb, var(--climate-accent) 8%, transparent);
}

/* ==========================================================================
   2. Climate Phase Mappings
   ========================================================================== */

/* ORIENT / KINDLE */
:where(html:is(
  [data-spw-developmental-climate="orient"],
  [data-spw-spirit-phase="orient"],
  [data-spw-spirit-phase="initiation"],
  [data-spw-spirit-phase="kindle"]
)) {
  --climate-accent: var(--climate-orient-accent);

  --climate-clarity: 0.56;
  --climate-density: 0.38;
  --climate-annotation: 0.18;
  --climate-interaction: 0.18;
  --climate-relation: 0.16;
  --climate-publication: 0.06;

  --climate-pressure-bias: 0.22;
  --climate-atmosphere-bias: 0.34;
  --climate-memory-bias: 0.12;

  --climate-gap-scale: 1.08;
  --climate-pad-scale: 1.04;
  --climate-hover-lift: -1px;
  --climate-seam-width: 2px;
  --climate-hint-opacity: 0.86;
  --climate-outline-strength: 0.14;
}

/* ANCHOR */
:where(html:is(
  [data-spw-developmental-climate="anchor"],
  [data-spw-spirit-phase="anchor"],
  [data-spw-spirit-phase="resistance"],
  [data-spw-spirit-phase="attune"],
  [data-spw-spirit-phase="settle"],
  [data-spw-spirit-phase="stabilize"]
)) {
  --climate-accent: var(--climate-anchor-accent);

  --climate-clarity: 0.78;
  --climate-density: 0.72;
  --climate-annotation: 0.24;
  --climate-interaction: 0.2;
  --climate-relation: 0.14;
  --climate-publication: 0.1;

  --climate-pressure-bias: 0.46;
  --climate-atmosphere-bias: 0.1;
  --climate-memory-bias: 0.32;

  --climate-gap-scale: 0.86;
  --climate-pad-scale: 0.9;
  --climate-hover-lift: -1px;
  --climate-seam-width: 4px;
  --climate-hint-opacity: 0.55;
  --climate-outline-strength: 0.38;
}

/* WEAVE */
:where(html:is(
  [data-spw-developmental-climate="weave"],
  [data-spw-spirit-phase="weave"],
  [data-spw-spirit-phase="transformation"],
  [data-spw-spirit-phase="compose"],
  [data-spw-spirit-phase="connect"]
)) {
  --climate-accent: var(--climate-weave-accent);

  --climate-clarity: 0.68;
  --climate-density: 0.48;
  --climate-annotation: 0.34;
  --climate-interaction: 0.34;
  --climate-relation: 0.54;
  --climate-publication: 0.16;

  --climate-pressure-bias: 0.38;
  --climate-atmosphere-bias: 0.2;
  --climate-memory-bias: 0.22;

  --climate-gap-scale: 1.14;
  --climate-pad-scale: 1.04;
  --climate-hover-lift: -2px;
  --climate-seam-width: 3px;
  --climate-hint-opacity: 0.68;
  --climate-outline-strength: 0.24;
}

/* REHEARSE */
:where(html:is(
  [data-spw-developmental-climate="rehearse"],
  [data-spw-spirit-phase="rehearse"],
  [data-spw-spirit-phase="return"],
  [data-spw-spirit-phase="practice"],
  [data-spw-spirit-phase="revise"]
)) {
  --climate-accent: var(--climate-rehearse-accent);

  --climate-clarity: 0.7;
  --climate-density: 0.58;
  --climate-annotation: 0.62;
  --climate-interaction: 0.44;
  --climate-relation: 0.28;
  --climate-publication: 0.24;

  --climate-pressure-bias: 0.36;
  --climate-atmosphere-bias: 0.14;
  --climate-memory-bias: 0.46;

  --climate-gap-scale: 1;
  --climate-pad-scale: 1;
  --climate-hover-lift: -3px;
  --climate-seam-width: 3px;
  --climate-hint-opacity: 0.62;
  --climate-outline-strength: 0.3;
}

/* OFFER */
:where(html:is(
  [data-spw-developmental-climate="offer"],
  [data-spw-spirit-phase="offer"],
  [data-spw-spirit-phase="expression"],
  [data-spw-spirit-phase="project"],
  [data-spw-spirit-phase="publish"]
)) {
  --climate-accent: var(--climate-offer-accent);

  --climate-clarity: 0.86;
  --climate-density: 0.5;
  --climate-annotation: 0.28;
  --climate-interaction: 0.34;
  --climate-relation: 0.3;
  --climate-publication: 0.68;

  --climate-pressure-bias: 0.3;
  --climate-atmosphere-bias: 0.08;
  --climate-memory-bias: 0.24;

  --climate-gap-scale: 0.96;
  --climate-pad-scale: 1.02;
  --climate-hover-lift: -2px;
  --climate-seam-width: 4px;
  --climate-hint-opacity: 0.48;
  --climate-outline-strength: 0.42;
}

/* ==========================================================================
   3. Legacy Compatibility Layer
   ========================================================================== */

:where(html:is([data-spw-developmental-climate], [data-spw-spirit-phase])) {
  color-scheme: light dark;

  /* Map new climate system → old developmental system */
  --developmental-hue: 42; /* fallback only */
  --developmental-sat: 48%;
  --developmental-light: 43%;

  --developmental-accent: var(--climate-accent);
  --developmental-accent-soft: var(--climate-accent-wash);
  --developmental-accent-strong: var(--climate-accent-line-strong);

  --developmental-surface-tint: var(--climate-paper-tint);
  --developmental-surface-tint-strong: var(--climate-margin-tint);

  --developmental-border: var(--climate-accent-line);
  --developmental-border-strong: var(--climate-accent-line-strong);

  --developmental-badge-bg: var(--climate-badge-bg);
  --developmental-badge-text: var(--climate-badge-text);

  --developmental-menu-bg: var(--climate-menu-bg);
  --developmental-menu-line: var(--climate-menu-line);
  --developmental-menu-shadow: var(--climate-menu-shadow);

  --developmental-seam-opacity: var(--climate-hint-opacity);
  --developmental-guide-opacity: calc(0.62 + var(--climate-clarity) * 0.18);
  --developmental-indicator-opacity: calc(0.72 + var(--climate-interaction) * 0.18);

  --developmental-clarity: var(--climate-clarity);
  --developmental-pressure: var(--climate-pressure-bias);
  --developmental-atmosphere: var(--climate-atmosphere-bias);
  --developmental-memory: var(--climate-memory-bias);
  --developmental-resonance: var(--climate-relation);
  --developmental-charge-bias: var(--climate-interaction);
  --developmental-selection-bias: var(--climate-interaction);
  --developmental-live-accent: color-mix(in srgb, var(--climate-accent) 18%, transparent);

  /* Design system handoff */
  --card-border-emphasis: var(--climate-accent-line);
  --badge-bg: var(--climate-badge-bg);
  --badge-text: var(--climate-badge-text);
}

/* ==========================================================================
   4. Global Application
   ========================================================================== */

body {
  transition:
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    color var(--developmental-transition-duration) var(--developmental-transition-timing);
}

/* Subtle structural cues only */
:where(.site-frame) {
  background-image: var(--climate-seam);
  border-inline-start: var(--climate-seam-width) solid var(--climate-frame-left-rail);
  transition:
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    border-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    box-shadow var(--developmental-transition-slow) var(--developmental-transition-timing),
    transform var(--developmental-transition-duration) var(--developmental-transition-timing);
}

:where(.frame-topline, .frame-heading) {
  border-color: var(--climate-frame-header-line);
}

/* Card-like surfaces */
:where(
  .frame-card, .media-card, .media-focus-card, .operator-card,
  .frame-panel, .mode-panel, .pretext-surface, .settings-category,
  .settings-fieldset, .spw-console, .spw-nav-panel, .vibe-widget,
  .settings-state-card, .settings-nav-card, .settings-structure-card
) {
  border-color: color-mix(in srgb, var(--climate-accent-line) 72%, var(--line, transparent));
  transition:
    border-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    box-shadow var(--developmental-transition-slow) var(--developmental-transition-timing),
    transform var(--developmental-transition-duration) var(--developmental-transition-timing);
}

:where(
  .frame-card, .media-card, .media-focus-card, .operator-card,
  .frame-panel, .mode-panel, .vibe-widget,
  .settings-state-card, .settings-nav-card, .settings-structure-card
):is(:hover, :focus-within) {
  transform: translateY(var(--climate-hover-lift));
  border-color: var(--climate-accent-line-strong);
}

/* Active semantic badges only */
:where(.spec-pill, .badge, .tag, .pill) {
  transition:
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    color var(--developmental-transition-duration) var(--developmental-transition-timing),
    border-color var(--developmental-transition-duration) var(--developmental-transition-timing);
}

:where(
  .spec-pill[data-active="true"],
  .spec-pill[data-site-setting-active="true"],
  .spec-pill[aria-current="true"],
  .badge[data-active="true"],
  .tag[data-active="true"],
  .pill[data-active="true"]
) {
  background: var(--climate-badge-bg);
  color: var(--climate-badge-text);
  border-color: var(--climate-accent-line);
}

/* Guidance elements */
:where(
  .spw-context-memo, .spw-experience-memo,
  .spw-guide-chip, .spw-surface-helper-chip
) {
  border-color: var(--climate-accent-line);
  background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--climate-accent) 6%, transparent) 0,
      transparent 48%
  ), var(--surface, #fff);
  opacity: var(--climate-hint-opacity);
  transition:
    opacity var(--developmental-transition-duration) var(--developmental-transition-timing),
    border-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing);
}

:where(.spw-component-meta) {
  opacity: var(--developmental-guide-opacity);
  transition: opacity var(--developmental-transition-duration) var(--developmental-transition-timing);
}

/* ==========================================================================
   5. Density & Spacing
   ========================================================================== */

:where(
  .site-frame, .frame-panel, .frame-card, .media-card,
  .media-focus-card, .operator-card, .mode-panel, .vibe-widget, .settings-fieldset
) {
  --climate-local-gap: calc(var(--component-gap, 0.9rem) * var(--climate-gap-scale));
  --climate-local-pad: calc(var(--component-pad, 0.9rem) * var(--climate-pad-scale));
}

:where(.site-frame) {
  gap: var(--climate-local-gap, 1rem);
}

:where(
  .frame-panel, .frame-card, .media-card, .media-focus-card,
  .operator-card, .mode-panel, .vibe-widget, .settings-fieldset
) {
  gap: var(--climate-local-gap, 0.55rem);
}

/* Only affect authoring surfaces to avoid layout jumps */
:where(
  [data-spw-role="climate-tuning"],
  [data-spw-author-surface],
  [data-author-surface],
  .author-surface,
  .manuscript-surface
) :where(.frame-panel, .frame-card, .vibe-widget, .settings-fieldset) {
  padding: var(--climate-local-pad, 0.9rem);
}

/* ==========================================================================
   6. Authoring Surfaces & Semantic Cues
   ========================================================================== */

:where(
  .manuscript-surface, .author-surface, .editorial-surface,
  [data-author-surface], [data-spw-author-surface],
  [data-spw-typeset-surface="editorial"]
) {
  background-image: linear-gradient(
      90deg,
      var(--climate-margin-tint) 0 var(--manuscript-margin-width, 4rem),
      transparent var(--manuscript-margin-width, 4rem)
  );
}

:where(
  .annotation, .annotation-card, .margin-note, .editor-note,
  [data-author-annotation], [data-spw-annotation]:not(html):not(body)
) {
  opacity: calc(0.44 + var(--climate-annotation-strength) * 0.64);
  border-color: color-mix(in srgb, var(--climate-accent) 24%, var(--annotation-line, transparent));
  background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--climate-accent) 6%, transparent),
      transparent 62%
  ), var(--annotation-bg, transparent);
}

:where(
  .relation-line, .thread-line, .motif-link,
  [data-spw-relation], [data-author-thread]
) {
  opacity: calc(0.48 + var(--climate-connection-strength) * 0.52);
  --thread-line: color-mix(in srgb, var(--climate-accent) 28%, var(--line, transparent));
}

:where(
  .publish-card, .export-card, .reader-preview,
  [data-author-publication], [data-spw-publication]
) {
  border-color: color-mix(in srgb, var(--climate-accent) 34%, var(--line, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--climate-accent) 8%, transparent);
}

/* ==========================================================================
   7. Interaction States
   ========================================================================== */

:where(
  .site-frame, .frame-card, .media-card, .media-focus-card, .operator-card,
  .frame-panel, .mode-panel, .spec-pill, .operator-chip, .frame-sigil,
  .syntax-token, .spw-delimiter
)[data-spw-selection="focused"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--climate-accent) 16%, transparent);
}

:where(
  .site-frame, .frame-card, .media-card, .media-focus-card, .operator-card,
  .frame-panel, .mode-panel, .spec-pill, .operator-chip, .frame-sigil
)[data-spw-selection="active"],
:where(
  .site-frame, .frame-card, .media-card, .media-focus-card, .operator-card,
  .frame-panel, .mode-panel, .spec-pill, .operator-chip, .frame-sigil
)[data-spw-selection="selected"] {
  border-color: var(--climate-accent-line-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--climate-accent) 22%, transparent),
  0 0 0 4px color-mix(in srgb, var(--climate-accent) 7%, transparent);
}

/* Gesture phases */
:where([data-spw-gesture]) {
  border-color: var(--developmental-live-accent);
  box-shadow: 0 0 0 1px var(--developmental-live-accent);
}

:where([data-spw-gesture="charging"]) {
  --developmental-live-accent: color-mix(in srgb, var(--climate-accent) 14%, transparent);
}

:where([data-spw-gesture="active"]) {
  --developmental-live-accent: color-mix(in srgb, var(--climate-accent) 22%, transparent);
}

:where([data-spw-gesture="armed"]) {
  --developmental-live-accent: color-mix(in srgb, var(--climate-accent) 28%, transparent);
}

:where([data-spw-gesture="committed"]) {
  --developmental-live-accent: color-mix(in srgb, var(--climate-accent) 32%, transparent);
}

:where([data-spw-latched="true"], [data-spw-pinned="true"], [data-spw-grounded="true"]) {
  border-color: var(--climate-accent-line-strong);
  background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--climate-accent) 8%, transparent),
      transparent 54%
  ), var(--climate-badge-bg);
}

/* ==========================================================================
   8. Climate Controls UI
   ========================================================================== */

:where(.developmental-climate-controls, .phase-controls) {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--climate-badge-text);
}

:where(.climate-menu-trigger, .phase-menu-trigger) {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: calc(var(--touch-target-min, 2.75rem) * 0.75);
  padding: 0.22rem 0.68rem;
  border: 1px solid var(--climate-menu-line);
  border-radius: var(--radius-pill, 999px);
  background: var(--climate-menu-bg);
  color: var(--climate-badge-text);
  cursor: pointer;
  list-style: none;
  font: inherit;
  font-size: var(--text-size-xs, 0.72rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--climate-menu-shadow);
  transition:
    border-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    color var(--developmental-transition-duration) var(--developmental-transition-timing),
    box-shadow var(--developmental-transition-duration) var(--developmental-transition-timing),
    transform var(--developmental-transition-duration) var(--developmental-transition-timing);
}

:where(.climate-menu-trigger::-webkit-details-marker, .phase-menu-trigger::-webkit-details-marker) {
  display: none;
}

:where(.climate-menu-trigger:hover, .phase-menu-trigger:hover,
      .climate-menu-trigger:focus-visible, .phase-menu-trigger:focus-visible) {
  border-color: var(--climate-accent-line-strong);
  transform: translateY(-1px);
}

:where(.climate-menu-options, .phase-menu-options) {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  display: grid;
  gap: 0.35rem;
  min-width: 15rem;
  padding: 0.55rem;
  border: 1px solid var(--climate-menu-line);
  border-radius: 0.75rem;
  background: var(--climate-menu-bg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

:where(.climate-menu-choice, .phase-menu-choice) {
  display: grid;
  grid-template-columns: minmax(4rem, auto) 1fr;
  gap: 0.54rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    background-color var(--developmental-transition-duration) var(--developmental-transition-timing),
    color var(--developmental-transition-duration) var(--developmental-transition-timing);
}

:where(.climate-menu-choice:hover, .phase-menu-choice:hover,
      .climate-menu-choice:focus-visible, .phase-menu-choice:focus-visible) {
  border-color: var(--climate-accent-line);
  background: color-mix(in srgb, var(--climate-accent) 7%, transparent);
}

:where(.climate-menu-choice[aria-pressed="true"], .phase-menu-choice[aria-pressed="true"]) {
  border-color: var(--climate-accent-line-strong);
  background: color-mix(in srgb, var(--climate-accent) 10%, transparent);
  color: var(--climate-badge-text);
  font-weight: 600;
}

/* ==========================================================================
   9. Indicators & Special Cases
   ========================================================================== */

:where([data-developmental-indicator], [data-phase-indicator]) {
  color: var(--climate-accent);
  opacity: var(--developmental-indicator-opacity);
}

:where([data-developmental-author-label])::before {
  content: attr(data-developmental-author-label);
}

:where(html[data-spw-developmental-climate="orient"]) :where([data-spw-learning-surface="overview"]) {
  --climate-hint-opacity: 0.78;
}

:where(html[data-spw-developmental-climate="anchor"]) :where([data-spw-learning-surface="archive"]) {
  --climate-outline-strength: 0.38;
}

:where(html[data-spw-developmental-climate="weave"]) :where([data-spw-learning-surface="comparison"]) {
  --climate-connection-strength: 0.54;
}

:where(html[data-spw-developmental-climate="rehearse"]) :where([data-spw-learning-surface="practice"]) {
  --climate-annotation-strength: 0.58;
}

:where(html[data-spw-developmental-climate="offer"]) :where([data-spw-learning-surface="publication"]) {
  --climate-publication-strength: 0.64;
}

/* Indicator-off mode */
:where(html:is([data-spw-developmental-indicators="off"], [data-spw-phase-indicators="off"])) {
  --climate-hint-opacity: 0;
  --developmental-indicator-opacity: 0;
}

:where(html:is([data-spw-developmental-indicators="off"], [data-spw-phase-indicators="off"]))
:where(.site-frame) {
  background-image: none;
  border-inline-start-color: transparent;
}

:where(html:is([data-spw-developmental-indicators="off"], [data-spw-phase-indicators="off"]))
:where(.developmental-climate-controls, .phase-controls) {
  color: var(--ink-soft);
}

/* ==========================================================================
   10. Dark Mode + High Contrast + Reduced Motion
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="dark"],
  html:not([data-spw-color-mode="light"]) {
    --climate-badge-bg: color-mix(in srgb, var(--climate-accent) 16%, rgba(22, 24, 28, 0.92));
    --climate-badge-text: color-mix(in srgb, var(--climate-accent) 56%, white);
    --climate-menu-bg: color-mix(in srgb, rgba(18, 20, 24, 0.94) 90%, var(--climate-accent) 10%);
    --climate-menu-shadow: 0 12px 30px color-mix(in srgb, black 24%, transparent);
  }
}

:where(html[data-spw-high-contrast="on"]) {
  --climate-accent-line: color-mix(in srgb, var(--climate-accent) 58%, var(--ink, currentColor));
  --climate-accent-line-strong: color-mix(in srgb, var(--climate-accent) 72%, var(--ink, currentColor));
  --climate-hint-opacity: 0.82;
  --climate-seam-width: 5px;
  --climate-outline-strength: 0.44;
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

:where(html[data-spw-reduce-motion="on"]) :where(*, *::before, *::after) {
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
}

/* /public/css/effects/enrichment.css */
@layer effects {
/* ==========================================================================
 * enrichment.css
 * --------------------------------------------------------------------------
 * Purpose:
 * - Touch ecology, swipe physics, and enriched code block interactions.
 * - Establishes strict boundaries for CSS scroll-snapping and prepares
 * state hooks for JavaScript physics handoffs.
 * ========================================================================== */

/* ==========================================================================
   1. Horizontal Swipe Ecology
   ========================================================================== */

/* * Apply to token strips, operator arrays, and horizontal card stacks.
 * Uses `overscroll-behavior-x: contain` to prevent the browser from
 * triggering "swipe to go back/forward" navigation during component use.
 */
:where(
    [data-spw-swipe="container"],
    .operator-snippet-grid--horizontal,
    .media-card-grid--horizontal
) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    /* CSS Snapping Defaults */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter, clamp(0.75rem, 2.5vw, 1.5rem));

    /* Hide scrollbars for a native app feel */
    scrollbar-width: none; /* Firefox */

    /* Allow browser to optimize horizontal panning */
    touch-action: pan-x pan-y;

    /* Ensure child margins don't collapse in flex containers */
    gap: var(--space-sm, 0.75rem);
    padding-bottom: var(--space-xs, 0.5rem); /* Safe area for hidden scrollbars */
}

:where([data-spw-swipe="container"])::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
}

/* ==========================================================================
   2. Swipe Items & Snap Alignment
   ========================================================================== */

:where(
    [data-spw-swipe="item"],
    [data-spw-swipe="container"] > *
) {
    scroll-snap-align: start;
    scroll-margin-inline-start: var(--page-gutter, 1.5rem);
    flex-shrink: 0;
}

/* Cards usually feel better snapped to the center on mobile */
:where(.media-card-grid--horizontal > .media-card, .frame-card--swipeable) {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: min(85vw, var(--measure-card, 42ch));
    /* The transform transition acts as the return-to-rest physics */
    transition:
        transform var(--duration-deliberate, 360ms) var(--ease-settle, cubic-bezier(0.2, 0.8, 0.2, 1)),
        box-shadow var(--duration-base, 220ms) var(--ease-mechanical, ease);
}

/* ==========================================================================
   3. JS Physics Handoff & Interaction States
   ========================================================================== */

/* * CRITICAL: When JavaScript initiates a drag or applies spring physics,
 * CSS snapping and transitions MUST be disabled to prevent stuttering.
 */
:where([data-spw-swipe="container"].is-js-driven) {
    scroll-snap-type: none !important;
}

:where([data-spw-swipe="container"].is-dragging) {
    scroll-snap-type: none !important;
    cursor: grabbing !important;
}

:where([data-spw-swipe="container"].is-dragging > *) {
    /* Kill transitions while finger/mouse is actively dragging */
    transition: none !important;
    user-select: none;
    pointer-events: none; /* Prevent accidental link clicks during swipe */
}

/* ==========================================================================
   4. Mobile Touch Nuances
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* * On touch devices, 'hover' sticks. We rely on ':active' for
     * physical press feedback instead.
     */
    :where(
        .frame-card:active,
        .operator-chip:active,
        .spec-pill:active,
        button:active
    ) {
        transform: scale(calc(1 - (0.008 * var(--spw-interaction-scale, 1))));
        transition-duration: var(--touch-acknowledge, 90ms);
        transition-timing-function: var(--ease-precise, cubic-bezier(0.2, 0, 0.12, 1));
    }

    :where(html[data-spw-interaction-tuner="calm"] .frame-card:active) {
        transform: none;
    }

    /* Ensure swipeable containers feel loose, not rigid, on phones */
    :where([data-spw-swipe="container"]) {
        scroll-snap-type: x proximity;
    }
}

/* ==========================================================================
   5. Perspective Posture Salience
   ========================================================================== */

:where(
    [data-spw-concept],
    [data-spw-semantic-expression],
    [data-spw-promptability],
    [data-spw-collectability],
    [data-spw-related-routes],
    [data-spw-role],
    [data-spw-operator]
) {
    --spw-perspective-salience: 0;
    --spw-perspective-salience-color: var(--active-op-color, #008080);
}

html[data-spw-metacognitive-stance="witness"] :where(
    [data-spw-role="orientation"],
    [data-spw-role="reference"],
    [data-spw-context="reading"],
    [data-spw-grounding]
) {
    --spw-perspective-salience: 0.22;
    --spw-perspective-salience-color: var(--op-frame-color, var(--active-op-color, #008080));
}

html[data-spw-metacognitive-stance="composer"] :where(
    [data-spw-role="action"],
    [data-spw-role="practice"],
    [data-spw-promptability="visible"],
    [data-spw-collectability="high"],
    [data-spw-semantic-expression]
) {
    --spw-perspective-salience: 0.38;
    --spw-perspective-salience-color: var(--op-action-color, var(--active-op-color, #005959));
}

html[data-spw-metacognitive-stance="explorer"] :where(
    [data-spw-role="routing"],
    [data-spw-related-routes],
    [data-spw-promptability="ambient"],
    [data-spw-wonder],
    .spw-route-bridge
) {
    --spw-perspective-salience: 0.34;
    --spw-perspective-salience-color: var(--op-probe-color, var(--active-op-color, #4a2180));
}

html[data-spw-metacognitive-stance="integrator"] :where(
    [data-spw-role="reference"],
    [data-spw-role="translation"],
    [data-spw-role="sync"],
    [data-spw-semantic-cluster],
    .spw-route-bridge
) {
    --spw-perspective-salience: 0.34;
    --spw-perspective-salience-color: var(--op-ref-color, var(--active-op-color, #286bb7));
}

html[data-spw-metacognitive-stance="overflow"] :where(
    [data-spw-concept],
    [data-spw-semantic-expression],
    [data-spw-feature],
    [data-spw-vocabulary-term],
    [data-spw-collectability]
) {
    --spw-perspective-salience: 0.46;
    --spw-perspective-salience-color: var(--op-stream-color, var(--active-op-color, #208259));
}

html[data-spw-operational-visibility="on"] :where(
    [data-spw-semantic-expression],
    [data-spw-concept],
    [data-spw-operator],
    [data-spw-measure-kind],
    [data-spw-ingredient-primed]
) {
    --spw-perspective-salience: max(var(--spw-perspective-salience), 0.44);
}

html[data-spw-developmental-indicators="on"] :where(
    [data-spw-concept],
    [data-spw-semantic-expression],
    [data-spw-promptability],
    [data-spw-collectability],
    [data-spw-related-routes],
    [data-spw-role],
    [data-spw-operator],
    [data-spw-feature]
):where(:not(.spw-discovery-notice)) {
    box-shadow:
        var(--spw-local-shadow, none),
        0 0 0 calc(1px * var(--spw-perspective-salience, 0))
        color-mix(in srgb, var(--spw-perspective-salience-color) 42%, transparent);
}

html[data-spw-developmental-indicators="on"] :where(
    [data-spw-concept],
    [data-spw-semantic-expression],
    [data-spw-promptability],
    [data-spw-collectability],
    [data-spw-related-routes],
    [data-spw-role],
    [data-spw-operator],
    [data-spw-feature]
):where(:hover, :focus-within, :focus-visible) {
    --spw-perspective-salience: max(var(--spw-perspective-salience), 0.7);
}

/* ==========================================================================
   6. Enriched Code Surfaces
   ========================================================================== */

:where(.frame-code-enrichment) {
    position: relative;
    border: 1px solid var(--line-strong, rgba(0, 128, 128, 0.34));
    border-radius: var(--shape-component, 8px);
    background: var(--surface-code, rgba(18, 23, 27, 0.96));
    overflow: hidden;
    margin: var(--space-md, 1rem) 0;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
    transition:
        border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

:where(.frame-code-enrichment:hover, .frame-code-enrichment:focus-within) {
    border-color: var(--active-op-border, rgba(0, 128, 128, 0.55));
    box-shadow: var(--shadow-base, 0 4px 12px rgba(0,0,0,0.06));
}

/* Execution / Terminal Badge */
:where(.frame-code-enrichment::after) {
    content: attr(data-lang);
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2rem 0.5rem;
    background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.15));
    color: var(--active-op-color, #008080);
    border-bottom-left-radius: var(--shape-element, 4px);
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: var(--text-size-xs, 0.65rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    pointer-events: none;
    transition:
        opacity var(--duration-fast, 140ms) var(--ease-mechanical, ease),
        background-color var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

/* Interactive States for Enriched Code */
:where(.frame-code-enrichment[data-code-state="ready"]:hover::after) {
    content: 'run = { enter }';
    background: var(--active-op-color, #008080);
    color: var(--surface-strong, #fff);
    opacity: 1;
}

:where(.frame-code-enrichment[data-code-state="executing"]) {
    border-color: var(--op-stream-color, #208259);
}

:where(.frame-code-enrichment[data-code-state="executing"]::after) {
    content: 'executing...';
    background: var(--op-stream-color, #208259);
    color: var(--surface-strong, #fff);
    opacity: 1;
    animation: code-pulse var(--duration-slow, 480ms) infinite alternate ease-in-out;
}

@keyframes code-pulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* ==========================================================================
   6. Touch Target Accessibility
   ========================================================================== */

/* Ensure internal buttons (like 'copy' or 'run' inside code blocks) are tappable */
:where(.frame-code-enrichment button) {
    min-height: var(--touch-target-min, 2.75rem);
    min-width: var(--touch-target-min, 2.75rem);
    touch-action: manipulation;
}
}

/* /public/css/effects/demos.css */
@layer effects {
/* ==========================================================================
 * demos.css
 * --------------------------------------------------------------------------
 * Purpose:
 * - Documentation, lab, and pattern-library components.
 * - Houses Specimen Indexes, Kernel Code blocks, Demo surfaces, and
 * Fiber Linguistic visualizers.
 * - Entirely portable: relies on global tokens, not route-specific scoping.
 * ========================================================================== */

/* ==========================================================================
   1. Specimen Index & Cards
   ========================================================================== */

:where(.specimen-index-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-sm, 0.65rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.specimen-axis-grid) {
  margin-bottom: var(--space-md, 1rem);
}

:where(a.specimen-index-card, div.specimen-index-card) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs, 0.3rem);
  padding: var(--inset-element, 0.75rem);
  color: var(--ink, #161c1d);
  text-decoration: none;
  background: var(--surface, rgba(255, 255, 255, 0.68));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-component, 8px);
  transition:
    border-color var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    transform var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(a.specimen-index-card:is(:hover, :focus-visible)) {
  outline: none;
  transform: translateY(-2px);
  border-color: var(--active-op-border, rgba(0, 128, 128, 0.34));
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.05));
}

:where(.specimen-index-sigil) {
  font-size: var(--text-size-sm, 0.9rem);
  font-weight: 700;
  color: var(--active-op-color, #008080);
}

:where(.specimen-index-name) {
  font-size: var(--text-size-sm, 0.85rem);
  font-weight: 600;
}

:where(.specimen-index-tag) {
  font-size: var(--text-size-xs, 0.72rem);
  letter-spacing: 0.04em;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

:where(.specimen-card) {
  border-left: 4px solid var(--active-op-color, #008080);
}

:where(.specimen-api-tag) {
  padding: 0.18rem 0.5rem;
  font-size: var(--text-size-xs, 0.72rem);
  letter-spacing: 0.04em;
  color: var(--active-op-color, #008080);
  border: 1px solid var(--line-strong, rgba(0, 128, 128, 0.34));
  border-radius: 3px;
  user-select: none;
}

:where(.specimen-material) {
  margin: 0 0 var(--space-sm, 0.8rem);
  font-size: var(--text-size-sm, 0.82rem);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

:where(.specimen-material strong) {
  color: var(--active-op-color, #008080);
}

/* ==========================================================================
   2. Kernel Code Blocks
   ========================================================================== */

:where(.specimen-kernel-code) {
  overflow-x: auto;
  padding: var(--inset-component, 1rem 1.2rem);
  font-size: var(--text-size-sm, 0.82rem);
  line-height: 1.7;
  background: var(--surface-strong, rgba(255, 255, 255, 0.88));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-component, 8px);
  max-width: var(--measure-code, 84ch);
}

:where(.specimen-kernel-code .sk-key) {
  color: var(--op-frame-color, #008080);
  font-weight: 600;
  user-select: none;
}

:where(.specimen-kernel-code .sk-op) {
  color: var(--op-probe-color, #4a2180);
  font-weight: 700;
  user-select: none;
}

:where(.specimen-kernel-code .sk-comment) {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-style: italic;
}

/* ==========================================================================
   3. Interactive Demo Blocks
   ========================================================================== */

:where(.specimen-demo) {
  background: var(--surface, rgba(255, 255, 255, 0.68));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-surface, 10px);
  padding: var(--inset-component, 1rem);
}

:where(.demo-sliders) {
  display: grid;
  gap: var(--space-xs, 0.55rem);
}

:where(.demo-slider-row) {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.6rem);
  font-size: var(--text-size-sm, 0.8rem);
}

:where(.demo-slider-row label) {
  min-width: 9rem;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
}

:where(.demo-slider-row input[type="range"], .demo-audio-controls input[type="range"]) {
  flex: 1;
  accent-color: var(--active-op-color, #008080);
}

:where(.demo-slider-out) {
  min-width: 3.5rem;
  text-align: right;
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-xs, 0.78rem);
  color: var(--active-op-color, #008080);
}

:where(.demo-note) {
  margin-bottom: var(--space-sm, 0.6rem);
}

:where(.demo-color-preview) {
  width: 100%;
  height: 2.5rem;
  margin-top: var(--space-sm, 0.7rem);
  background: var(--demo-color, hsl(192 62% 44%));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-element, 5px);
  transition: background var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(.demo-code-output) {
  margin: 0.65rem 0 0;
  padding: var(--inset-element, 0.5rem 0.8rem);
  overflow-x: auto;
  white-space: pre;
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-xs, 0.78rem);
  color: var(--active-op-color, #008080);
  background: var(--surface-strong, rgba(255, 255, 255, 0.88));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-element, 4px);
  max-width: var(--measure-code, 84ch);
}

/* Intersection Observer Demo */
:where(.demo-io-scroll-area) {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 8rem;
  overflow-y: auto;
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-element, 5px);
  scroll-behavior: smooth;
  background: var(--surface-strong, rgba(255, 255, 255, 0.88));
}

:where(.demo-io-fiber) {
  display: flex;
  align-items: center;
  min-height: 5rem;
  padding: 0.5rem 0.8rem;
  font-size: var(--text-size-xs, 0.78rem);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  background: color-mix(in srgb, var(--active-op-color, #008080) calc(var(--io-ratio, 10) * 1%), transparent);
  border-bottom: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  transition: background var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(.demo-io-fiber--10) { --io-ratio: 10; }
:where(.demo-io-fiber--30) { --io-ratio: 14; }
:where(.demo-io-fiber--50) { --io-ratio: 18; }
:where(.demo-io-fiber--70) { --io-ratio: 22; }
:where(.demo-io-fiber--90) { --io-ratio: 26; }

:where(.demo-io-target) {
  font-weight: 600;
  color: var(--active-op-color, #008080);
  border-color: var(--active-op-border, rgba(0, 128, 128, 0.34));
}

:where(.demo-io-threshold-indicator) {
  min-height: 1.4em;
  margin-top: var(--space-xs, 0.5rem);
  font-size: var(--text-size-xs, 0.78rem);
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  color: var(--active-op-color, #008080);
}

/* Audio Demo */
:where(.demo-audio-controls) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.6rem);
  font-size: var(--text-size-sm, 0.8rem);
}

:where(.demo-audio-controls label) {
  min-width: 7rem;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

:where(.demo-audio-controls--spaced) {
  margin-top: var(--space-xs, 0.5rem);
}

:where(.demo-audio-frequency) {
  width: 12rem;
}

:where(.demo-audio-controls select) {
  padding: 0.2rem 0.4rem;
  font: inherit;
  color: var(--ink, #161c1d);
  background: var(--surface, rgba(255, 255, 255, 0.68));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-element, 4px);
}

:where(.demo-audio-btn) {
  margin-top: var(--space-sm, 0.8rem);
}

:where(.demo-audio-btn[aria-pressed="true"]) {
  color: #fff;
  background: var(--op-pragma-color, #883a3a);
  border-color: var(--op-pragma-color, #883a3a);
}

:where(.demo-audio-waveform) {
  display: block;
  width: 100%;
  height: 4rem;
  margin-top: var(--space-sm, 0.6rem);
  background: var(--surface-strong, rgba(255, 255, 255, 0.88));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-element, 5px);
}

/* Canvas Demo */
:where(.demo-canvas-wrap canvas) {
  display: block;
  max-width: 100%;
  cursor: crosshair;
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-component, 6px);
}

:where(.demo-canvas-wrap canvas:focus-visible) {
  outline: 2px solid var(--active-op-color, #008080);
  outline-offset: 3px;
}

:where(.demo-canvas-note) {
  margin-top: var(--space-xs, 0.5rem);
  font-size: var(--text-size-sm, 0.8rem);
}

:where(.demo-canvas-clear) {
  margin-top: var(--space-2xs, 0.4rem);
}

/* Filter Demo */
:where(.demo-filter-text-wrap) {
  overflow: hidden;
}

:where(.demo-filter-target) {
  margin: var(--space-md, 1rem) 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--active-op-color, #008080);
  filter: url(#f-svg-demo);
}

/* ==========================================================================
   4. Discoverable Demo Rails
   ========================================================================== */

:where(.spw-demo-rail) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-sm, 0.8rem);
  margin-block: var(--space-md, 1rem);
}

:where(.spw-demo-card) {
  --spw-demo-accent: var(--active-op-color, #008080);
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs, 0.5rem);
  min-width: 0;
  padding: var(--inset-component, 1rem);
  overflow: clip;
  color: var(--ink, #161c1d);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--spw-demo-accent) 7%, transparent), transparent 54%),
    var(--surface, rgba(255, 255, 255, 0.68));
  border: 1px solid color-mix(in srgb, var(--spw-demo-accent) 20%, var(--line, rgba(14, 18, 20, 0.14)));
  border-radius: var(--shape-component, 8px);
  box-shadow: var(--shadow-xs, 0 1px 4px rgba(0, 0, 0, 0.04));
}

:where(.spw-demo-card::before) {
  content: attr(data-spw-demo-kind);
  justify-self: start;
  padding: 0.14rem 0.44rem;
  color: var(--spw-demo-accent);
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-xs, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--spw-demo-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--spw-demo-accent) 22%, transparent);
  border-radius: 999px;
}

:where(.spw-demo-card[data-spw-operator="action"]) { --spw-demo-accent: var(--op-action-color, #005959); }
:where(.spw-demo-card[data-spw-operator="frame"]) { --spw-demo-accent: var(--op-frame-color, #008080); }
:where(.spw-demo-card[data-spw-operator="object"]) { --spw-demo-accent: var(--op-object-color, #a67c00); }
:where(.spw-demo-card[data-spw-operator="probe"]) { --spw-demo-accent: var(--op-probe-color, #4a2180); }
:where(.spw-demo-card[data-spw-operator="ref"]) { --spw-demo-accent: var(--op-ref-color, #1d57a3); }
:where(.spw-demo-card[data-spw-operator="surface"]) { --spw-demo-accent: var(--op-surface-color, #178282); }

:where(.spw-demo-card h3) {
  margin: 0;
  font-size: var(--text-size-md, 1rem);
  line-height: 1.25;
}

:where(.spw-demo-card p) {
  margin: 0;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-size: var(--text-size-sm, 0.86rem);
}

:where(.spw-demo-card__actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs, 0.35rem);
  margin-top: var(--space-2xs, 0.4rem);
}

:where(.spw-demo-card__route) {
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-xs, 0.7rem);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   5. Fiber Linguistics & Palimpsest Frames
   ========================================================================== */

:where(.palimpsest-frame) {
  position: relative;
  height: 3.5rem;
  margin-bottom: var(--space-lg, 1.2rem);
  overflow: hidden;
  border-radius: var(--shape-surface, 10px);
  background: var(--surface-soft, rgba(255, 255, 255, 0.44));
}

:where(.palimpsest-layer) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 var(--space-md, 1rem);
  font-size: var(--text-size-xs, 0.78rem);
  letter-spacing: 0.18em;
  white-space: nowrap;
}

:where(.palimpsest-layer--generation-1) {
  opacity: 0.28;
  font-weight: 700;
  color: var(--active-op-color, #008080);
  filter: url(#f-blur-soft);
}

:where(.palimpsest-layer--generation-2) {
  top: 1.2rem;
  opacity: 0.18;
  letter-spacing: 0.25em;
  color: var(--op-probe-color, #4a2180);
}

:where(.fiber-linguistics-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-sm, 0.8rem);
}

:where(.fiber-pair) {
  display: grid;
  gap: var(--space-3xs, 0.35rem);
  padding: var(--inset-component, 1rem);
  background: var(--surface, rgba(255, 255, 255, 0.68));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-surface, 10px);
}

:where(.fiber-pair-title) {
  font-size: var(--text-size-sm, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--active-op-color, #008080);
  user-select: none;
}

:where(.fiber-pair-material) {
  font-size: var(--text-size-sm, 0.8rem);
  color: var(--ink, #161c1d);
}

:where(.fiber-pair-linguistic) {
  font-size: var(--text-size-sm, 0.8rem);
  color: var(--op-probe-color, #4a2180);
}

:where(.fiber-pair-note) {
  margin-top: 0.2rem;
  padding-top: 0.35rem;
  font-size: var(--text-size-xs, 0.75rem);
  font-style: italic;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
  border-top: 1px solid var(--line, rgba(14, 18, 20, 0.14));
}

:where(.fiber-pair-note a) {
  color: var(--active-op-color, #008080);
  text-decoration: none;
  border-bottom: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  transition: border-color var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(.fiber-pair-note a:hover) {
  border-color: var(--active-op-color, #008080);
}

/* ==========================================================================
   6. Field Notes
   ========================================================================== */

:where(.field-notes-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-sm, 0.8rem);
}

:where(.field-note) {
  position: relative;
  display: grid;
  gap: var(--space-xs, 0.5rem);
  padding: var(--inset-component, 1rem);
  background: var(--surface, rgba(255, 255, 255, 0.68));
  border: 1px solid var(--line, rgba(14, 18, 20, 0.14));
  border-radius: var(--shape-surface, 10px);
}

:where(.field-note::before) {
  content: attr(data-note-id);
  opacity: 0.7;
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: var(--text-size-xs, 0.68rem);
  letter-spacing: 0.08em;
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

:where(.field-note h3) {
  margin: 0;
  font-size: var(--text-size-sm, 0.92rem);
  color: var(--ink, #161c1d);
}

:where(.field-note p) {
  margin: 0;
  font-size: var(--text-size-sm, 0.82rem);
  line-height: var(--site-line-height, 1.55);
  color: var(--ink-soft, rgba(14, 18, 20, 0.68));
}

:where(.field-note-tags) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs, 0.35rem);
}

:where(.field-note-tag) {
  padding: 0.15rem 0.45rem;
  font-size: var(--text-size-xs, 0.68rem);
  letter-spacing: 0.04em;
  color: var(--active-op-color, #008080);
  border: 1px solid var(--line-strong, rgba(0, 128, 128, 0.34));
  border-radius: 3px;
  user-select: none;
  cursor: pointer;
  transition:
    background var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(.field-note-tag:hover) {
  background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
}

/* ==========================================================================
   7. Responsive Adjustments
   ========================================================================== */

@container (max-width: 32rem) {
  :where(.specimen-index-grid, .fiber-linguistics-grid, .field-notes-grid) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 32rem) {
  :where(.specimen-index-grid, .fiber-linguistics-grid, .field-notes-grid) {
    grid-template-columns: 1fr;
  }
}
}

/* /public/css/effects/wonder.css */
@layer effects {
/* ==========================================================================
   wonder.css
   --------------------------------------------------------------------------
   Purpose
   - Wonder, delight, threshold charge, and semantic celebration layers.
   - Ambient affordances that can be driven by JS without requiring JS.
   - Persona-aware modulation for related surfaces, tokens, images, and frames.

   Notes
   - This file should remain additive. It should not redefine baseline layout.
   - Most selectors are low-specificity and attach to existing component nouns.
   - JS can safely toggle data attributes such as:
       [data-spw-charge]
       [data-spw-wonder-state]
       [data-spw-delight]
       [data-spw-visited]
       [data-spw-hold-state]
       [data-spw-semantic-density]
       html[data-spw-persona]
   ========================================================================== */

:root {
  --wonder-accent-color: var(--spw-wonder-accent-base-color, var(--amber, #ffbf00));
  --delight-color: var(--spw-delight-base-color, var(--teal, #008080));

  --spw-wonder-duration-fast: var(--duration-fast, 120ms);
  --spw-wonder-duration-base: var(--duration-base, 200ms);
  --spw-wonder-duration-deliberate: var(--duration-deliberate, 420ms);

  --spw-wonder-ease: var(--cinematic-ease, ease-in-out);
  --spw-wonder-ease-settle: var(--ease-settle, ease-out);
  --spw-wonder-ease-mechanical: var(--ease-mechanical, ease);

  --spw-wonder-ring:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color) 20%, transparent),
    0 6px 14px color-mix(in srgb, var(--wonder-accent-color) 8%, transparent);

  --spw-delight-ring:
    0 0 0 1px color-mix(in srgb, var(--delight-color) 22%, transparent),
    0 6px 14px color-mix(in srgb, var(--delight-color) 8%, transparent);
}

/* ==========================================================================
   1. Shared wonder-ready targets
   --------------------------------------------------------------------------
   These selectors establish a common semantic substrate for JS and styling to
   act upon across frames, cards, panels, chips, SVG surfaces, and image hosts.
   ========================================================================== */

:where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .mode-panel,
  .software-card,
  .operator-chip,
  .spec-pill,
  .spw-topic,
  [data-spw-topic],
  .spw-delimiter,
  .spw-svg-surface,
  .spw-metaphysics-host,
  .spw-wonder-block,
  .spw-scaffold,
  .persona-chip,
  .spw-component-tag,
  .spw-guide-chip,
  [data-spw-charge],
  [data-spw-wonder-state],
  [data-spw-delight],
  [data-spw-visited]
) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "effects";
  --spw-debug-layer-color: #d23669;

  /* Layering / containment */
  position: relative;
}

/* ==========================================================================
   2. Delight bursts
   --------------------------------------------------------------------------
   Conceptual grounding, successful interpretation, and local semantic reward.
   ========================================================================== */

@keyframes spw-delight-burst {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--delight-color) 60%, transparent);
    transform: scale(1);
  }

  30% {
    transform: scale(1.12);
  }

  100% {
    box-shadow: 0 0 20px 10px transparent;
    transform: scale(1);
  }
}

.spw-delight,
[data-spw-delight="burst"],
[data-spw-delight="settled"] {
  z-index: var(--z-floating, var(--layer-floating, 100));
  animation: spw-delight-burst 0.6s var(--spw-wonder-ease-settle) forwards;
}

:where(
  .operator-chip.spw-delight,
  .spec-pill.spw-delight,
  .spw-topic.spw-delight,
  [data-spw-topic].spw-delight,
  .spw-delimiter.spw-delight,
  [data-spw-delight="settled"]
) {
  box-shadow: var(--spw-delight-ring);
}

:where(
  .site-frame[data-spw-delight="settled"],
  .frame-panel[data-spw-delight="settled"],
  .frame-card[data-spw-delight="settled"],
  .mode-panel[data-spw-delight="settled"]
) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--delight-color) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--delight-color) 14%, transparent);
}

/* ==========================================================================
   3. Wonder accents
   --------------------------------------------------------------------------
   Ambient guidance toward related concepts or semantically resonant clusters.
   ========================================================================== */

@keyframes spw-wonder-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px var(--wonder-accent-color));
    opacity: 0.85;
  }

  50% {
    filter: drop-shadow(0 0 12px var(--wonder-accent-color));
    opacity: 1;
    transform: translateY(-2px);
  }
}

.spw-wonder-accent,
[data-spw-wonder-state="accented"],
[data-spw-wonder-state="resonant"] {
  z-index: 50;
  color: color-mix(in srgb, var(--wonder-accent-color) 72%, currentColor) !important;
  border-color: color-mix(in srgb, var(--wonder-accent-color) 36%, transparent) !important;
  animation: none;
}

:where(
  .site-frame[data-spw-wonder-state="resonant"],
  .frame-panel[data-spw-wonder-state="resonant"],
  .frame-card[data-spw-wonder-state="resonant"],
  .mode-panel[data-spw-wonder-state="resonant"],
  .intent-cluster[data-spw-wonder-state="resonant"],
  .context-edge-card[data-spw-wonder-state="resonant"],
  .topic-photo-card[data-spw-wonder-state="resonant"],
  .math-lens-card[data-spw-wonder-state="resonant"]
) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color) 14%, transparent),
    0 6px 18px color-mix(in srgb, var(--wonder-accent-color) 7%, transparent);
}

:where(
  .intent-cluster[data-spw-wonder-state="resonant"],
  .context-edge-card[data-spw-wonder-state="resonant"],
  .topic-photo-card[data-spw-wonder-state="resonant"],
  .math-lens-card[data-spw-wonder-state="resonant"]
) {
  color: inherit !important;
  animation: none;
}

:where(
  .intent-cluster[data-spw-wonder-state="resonant"] .intent-cluster-kicker,
  .context-edge-card[data-spw-wonder-state="resonant"] .intent-cluster-kicker,
  .topic-photo-card[data-spw-wonder-state="resonant"] figcaption strong,
  .math-lens-card[data-spw-wonder-state="resonant"] .frame-card-sigil
) {
  color: var(--wonder-accent-color) !important;
}

/* ==========================================================================
   4. Charge states
   --------------------------------------------------------------------------
   JS can toggle these states to create a lightweight semantic lifecycle:
   idle → preview → arming → sustained → settled
   ========================================================================== */

:where(
  .operator-chip,
  .spec-pill,
  .spw-topic,
  [data-spw-topic],
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-charge]
)[data-spw-charge="preview"] {
  background:
    color-mix(in srgb, var(--wonder-accent-color) 8%, transparent);
  border-color:
    color-mix(in srgb, var(--wonder-accent-color) 26%, transparent);
}

:where(
  .operator-chip,
  .spec-pill,
  .spw-topic,
  [data-spw-topic],
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-charge]
)[data-spw-charge="arming"] {
  background:
    color-mix(in srgb, var(--delight-color) 10%, transparent);
  border-color:
    color-mix(in srgb, var(--delight-color) 32%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--delight-color) 18%, transparent);
}

:where(
  .operator-chip,
  .spec-pill,
  .spw-topic,
  [data-spw-topic],
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-charge]
)[data-spw-charge="sustained"] {
  background:
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 92%, var(--delight-color) 8%);
  border-color:
    color-mix(in srgb, var(--delight-color) 28%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--delight-color) 14%, transparent),
    0 4px 12px color-mix(in srgb, var(--delight-color) 6%, transparent);
}

:where(
  .operator-chip,
  .spec-pill,
  .spw-topic,
  [data-spw-topic],
  .spw-delimiter,
  .spw-component-tag,
  .spw-guide-chip,
  .persona-chip,
  [data-spw-charge]
)[data-spw-charge="settled"] {
  background:
    color-mix(in srgb, var(--delight-color) 10%, transparent);
  border-color: var(--delight-color);
}

/* ==========================================================================
   5. Brace thresholds and large structural surfaces
   ========================================================================== */

[data-spw-form="brace"][data-spw-charge="sustained"]::before,
[data-spw-form="brace"][data-spw-charge="sustained"]::after,
[data-spw-form="brace"][data-spw-wonder-state="resonant"]::before,
[data-spw-form="brace"][data-spw-wonder-state="resonant"]::after {
  animation: none;
  opacity: 0.42;
  filter: none;
}

@keyframes brace-threshold-pulse {
  0%,
  100% {
    border-color: var(--spw-operator-color, var(--teal));
    opacity: 0.4;
  }

  50% {
    border-color: color-mix(in srgb, var(--spw-operator-color, var(--teal)) 80%, white);
    opacity: 0.9;
    filter: blur(1px);
  }
}

:where(
  .site-frame[data-spw-charge="sustained"],
  .frame-panel[data-spw-charge="sustained"],
  .frame-card[data-spw-charge="sustained"],
  .mode-panel[data-spw-charge="sustained"]
) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-operator-color, var(--delight-color)) 16%, transparent),
    0 8px 18px color-mix(in srgb, var(--spw-operator-color, var(--delight-color)) 6%, transparent);
}

/* ==========================================================================
   6. Persona selector
   ========================================================================== */

.persona-selector-mount {
  margin-right: 0;
  max-width: 100%;
  min-width: 0;
}

html[data-spw-semantic-density="minimal"] .persona-selector-mount {
  display: none;
}

.persona-selector-frame {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.25rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--active-op-border, var(--line)) 70%, var(--line));
  border-radius: var(--shape-element, 4px);
  background: color-mix(
    in srgb,
    var(--floating-bg-warm, var(--surface-strong)) 92%,
    transparent
  );
  font-family: var(--site-mono-font, monospace);
  font-size: 0.75rem;
}

.persona-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.persona-chip {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: var(--touch-target-min);
  padding: 0.2rem 0.45rem;
  border: none;
  border-radius: 2px;
  background: none;
  color: var(--ink-soft, #888);
  cursor: pointer;
  transition:
    color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    background var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    box-shadow var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    transform var(--spw-wonder-duration-fast) var(--spw-wonder-ease-mechanical);
}

.persona-chip:hover {
  color: var(--ink, #fff);
  background: color-mix(in srgb, var(--surface-strong, #fff) 82%, transparent);
}

.persona-chip.is-active,
.persona-chip[aria-pressed="true"] {
  color: var(--teal, #1a9999);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--active-op-border, var(--teal)) 80%, transparent);
}

.persona-chip[data-spw-charge="preview"] {
  transform: translateY(-1px);
}

.persona-sigil {
  font-weight: 700;
  opacity: 0.6;
}

@media (max-width: 640px) {
  .persona-selector-frame {
    width: 100%;
    justify-content: space-between;
  }

  .persona-chips {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   7. Persona-aware learnable surfaces
   ========================================================================== */

[data-spw-persona="doodler"] .spec-pill {
  text-decoration: underline wavy var(--wonder-accent-color);
  text-underline-offset: 4px;
}

[data-spw-persona="scribe"] .spec-pill {
  font-family: var(--site-mono-font, monospace);
  letter-spacing: -0.02em;
  background: var(--charcoal-dark, #111) !important;
  border-color: var(--teal-soft, #1a9999) !important;
}

[data-spw-persona="viewer"] :where(.site-frame, .frame-panel, .frame-card)[data-spw-wonder-state="resonant"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color) 18%, transparent),
    0 0 14px color-mix(in srgb, var(--wonder-accent-color) 10%, transparent);
}

[data-spw-persona="scribe"] :where(.spw-component-tag, .spw-guide-chip)[data-spw-charge="sustained"] {
  font-family: var(--site-mono-font, monospace);
  letter-spacing: 0.05em;
}

[data-spw-persona="doodler"] :where(.operator-chip, .spw-topic, [data-spw-topic])[data-spw-wonder-state="accented"] {
  transform: rotate(-1deg);
}

/* ==========================================================================
   8. Persona-specific micro events
   ========================================================================== */

[data-spw-persona="doodler"] .spw-delight::after,
[data-spw-persona="doodler"] [data-spw-delight="burst"]::after {
  content: "✧";
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2em;
  color: var(--wonder-accent-color);
  animation: doodler-sparkle 0.6s ease-out forwards;
}

@keyframes doodler-sparkle {
  0% {
    transform: translate(-50%, 0) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -1.5em) scale(1.5) rotate(45deg);
    opacity: 0;
  }
}

[data-spw-persona="scribe"] [data-scribe-meta]:hover::after,
[data-spw-persona="scribe"] [data-scribe-meta][data-spw-wonder-state="accented"]::after {
  content: attr(data-scribe-meta);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-priority, var(--layer-priority, 2000)) + 8);
  padding: 2px 6px;
  border: 1px solid var(--ink-soft, #333);
  border-radius: 2px;
  background: var(--charcoal, #1a1a1a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  color: var(--teal-soft, #1a9999);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.55rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
}

/* ==========================================================================
   9. Wonder blocks
   --------------------------------------------------------------------------
   Good JS hooks:
   - [data-spw-wonder-block-state="idle|thinking|revealed|expanded"]
   - .wonder-action[aria-pressed]
   ========================================================================== */

.frame-prompt-copy {
  position: absolute;
  inset: 0.9rem 0.9rem auto auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 1.95rem;
  padding: 0.2rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 92%, transparent);
  color: color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 84%, var(--ink, currentColor));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  transition:
    transform var(--spw-wonder-duration-fast) var(--spw-wonder-ease-mechanical),
    box-shadow var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    border-color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    background-color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical);
}

:where(.frame-topline, .frame-heading) > .frame-prompt-copy {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  margin-left: 0;
  box-shadow: none;
}

.frame-topline > .spec-strip + .frame-prompt-copy,
.frame-heading > .spec-strip + .frame-prompt-copy {
  margin-left: 0.1rem;
}

.frame-prompt-copy:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 16%, transparent),
    0 12px 24px rgba(0, 0, 0, 0.08);
}

.spw-wonder-block {
  --spw-prompt-block-bg: var(--surface-panel, var(--surface-code, #12171b));
  --spw-prompt-block-ink: var(--ink, var(--teal-soft, #1a9999));
  --spw-prompt-block-line:
    color-mix(in srgb, var(--active-op-color, var(--line-strong, #008080)) 28%, transparent);
  --spw-prompt-block-quiet:
    color-mix(in srgb, var(--ink-soft, currentColor) 84%, transparent);
  position: relative;
  overflow: hidden;
  margin: 1.5rem 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--spw-prompt-block-line);
  border-radius: var(--shape-surface, 4px);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 8%, transparent),
      transparent 30%
    ),
    var(--spw-prompt-block-bg);
  color: var(--spw-prompt-block-ink);
  font-family: var(--site-mono-font, monospace);
  font-size: 0.82rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    box-shadow var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    border-color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    background-color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical);
}

.spw-wonder-block[data-spw-wonder-block-state="thinking"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--wonder-accent-color) 12%, transparent);
}

.spw-wonder-block[data-spw-wonder-block-state="revealed"],
.spw-wonder-block[data-spw-wonder-block-state="expanded"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--delight-color) 24%, transparent),
    0 0 20px color-mix(in srgb, var(--delight-color) 14%, transparent);
}

.wonder-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  gap: 0.45rem 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--spw-prompt-block-line) 88%, transparent);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wonder-title {
  color: color-mix(in srgb, var(--spw-prompt-block-ink) 82%, var(--active-op-color, var(--teal-soft, #1a9999)));
  font-weight: 700;
}

.wonder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.wonder-action {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 42%, transparent);
  border-radius: 2px;
  background: none;
  color: color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 84%, var(--spw-prompt-block-ink));
  cursor: pointer;
  font-size: 0.65rem;
  transition:
    background var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    transform var(--spw-wonder-duration-fast) var(--spw-wonder-ease-mechanical);
}

.wonder-action:hover,
.wonder-action:focus-visible,
.wonder-action[aria-pressed="true"] {
  background: color-mix(in srgb, var(--active-op-color, var(--teal-soft, #1a9999)) 14%, transparent);
  color: var(--spw-prompt-block-ink);
}

.wonder-body {
  line-height: 1.52;
  opacity: 0.9;
  color: var(--spw-prompt-block-quiet);
  text-wrap: pretty;
}

.spw-wonder-block[data-spw-wonder-block-state="idle"] .wonder-body {
  font-style: normal;
  opacity: 0.78;
}

.wonder-body[data-spw-charge="settled"] {
  opacity: 1;
}

@media (max-width: 720px) {
  .frame-prompt-copy {
    position: static;
    margin-top: 0.2rem;
  }
}

/* ==========================================================================
   10. Metaphysics scaffolding
   --------------------------------------------------------------------------
   Supports related JS for progressive reveal, attention pinning, and stateful
   image or figure inspection.
   ========================================================================== */

.spw-scaffold {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  border: 1px dashed var(--line-strong, #008080);
  border-radius: 6px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.05));
}

.spw-scaffold::before {
  content: "SCFFLD@METAPHYSICS";
  position: absolute;
  top: -10px;
  left: 10px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  background: var(--charcoal-dark, #111);
  color: var(--teal, #1a9999);
  font-size: 0.6rem;
}

.spw-scaffold[data-spw-wonder-state="accented"] {
  border-style: solid;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--wonder-accent-color) 10%, transparent);
}

/* ==========================================================================
   11. Semantic unlocks
   ========================================================================== */

[data-spw-semantics="unlocked"] .spw-wonder-block {
  border-width: 3px;
  border-style: double;
  box-shadow: 0 0 15px rgba(26, 153, 153, 0.3);
}

[data-spw-semantics="unlocked"] .wonder-body {
  opacity: 1;
  font-weight: 500;
}

[data-spw-semantics="unlocked"] :where(
  .site-frame,
  .frame-panel,
  .frame-card,
  .mode-panel,
  .spw-svg-surface,
  .spw-metaphysics-host
) {
  --wonder-accent-color: var(
    --spw-wonder-accent-emphasis-color,
    color-mix(in srgb, var(--amber, #ffbf00) 72%, white)
  );
}

/* ==========================================================================
   12. Visited glow
   --------------------------------------------------------------------------
   Keep broad enough for JS to reuse, but avoid assuming every visited target
   wants identical ornament. Specialized files can override locally.
   ========================================================================== */

[data-spw-visited="true"] {
  outline: 1px solid var(--delight-color) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--delight-color, #008080) 10%, transparent) !important;
  filter: none !important;
  transition:
    box-shadow 1s var(--spw-wonder-ease),
    filter 1s var(--spw-wonder-ease),
    outline-color 1s var(--spw-wonder-ease);
}

[data-spw-visited="true"]::after {
  content: "◈";
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: var(--delight-color);
  font-size: 0.8rem;
  opacity: 0.8;
}

[data-spw-visited="true"].spw-svg-surface {
  filter: url("#scribe-grid") drop-shadow(0 0 12px var(--delight-color));
}

/* ==========================================================================
   13. SVG and image-adjacent wonder
   --------------------------------------------------------------------------
   Pairs with metaphysical-paper.css and svg-surfaces.css without replacing
   them. This gives JS one common semantic vocabulary across media.
   ========================================================================== */

:where(
  .spw-svg-surface[data-spw-wonder-state="accented"],
  .spw-metaphysics-host[data-spw-wonder-state="accented"]
) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--wonder-accent-color) 12%, transparent);
}

:where(
  .spw-svg-surface[data-spw-charge="sustained"],
  .spw-metaphysics-host[data-spw-charge="sustained"]
) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--delight-color) 14%, transparent),
    0 8px 18px color-mix(in srgb, var(--delight-color) 6%, transparent);
}

/* ==========================================================================
   14. Route/header integration hooks
   --------------------------------------------------------------------------
   These references help the file participate in the wider site system.
   ========================================================================== */

:where(
  .site-header [data-header-op-slot][data-spw-wonder-state="accented"],
  .frame-topline .frame-sigil[data-spw-wonder-state="accented"],
  .frame-heading .frame-sigil[data-spw-wonder-state="accented"]
) {
  color: color-mix(in srgb, var(--wonder-accent-color) 78%, currentColor);
  text-shadow: none;
}

:where(
  .frame-topline .spec-strip [data-spw-charge="preview"],
  .frame-operators [data-spw-charge="preview"]
) {
  transform: none;
}

/* ==========================================================================
   15. Runtime layer attentional polish (data-spw-active-layers driven)
   ========================================================================== */

/* When enhancement layer is active, boost resonance and collection cues for better attention on dynamic content */
html[data-spw-active-layers~="enhancement"] :where(
  [data-spw-wonder-state],
  .spw-wonder-accent,
  .intent-cluster,
  .frame-card[data-spw-feature]
) {
  --spw-resonance: calc(var(--attention-field-radius, 0.4) * (1 + var(--spw-runtime-enhancement-intensity, 0.6) * 0.4));
  transition-duration: calc(280ms + (var(--spw-runtime-enhancement-intensity, 0.6) * 120ms));
}

/* During heavy feature loading, soften aggressive transitions for calmer attentional experience */
html[data-spw-active-layers~="feature"]:not([data-spw-active-layers~="enhancement"]) :where(
  .spw-delight,
  [data-spw-delight],
  .wonder-action
) {
  transition-duration: 180ms;
  animation-duration: 1.2s;
}

/* Core-only early load: reduce visual noise until more layers are ready */
html[data-spw-active-layers="core"] :where(
  .spw-wonder-accent,
  [data-spw-wonder-state="resonant"]
) {
  opacity: 0.6;
  transition: none;
}

/* Computational modulation: higher layer count = slightly more expressive wonder (architectural hook) */
:root {
  --spw-wonder-layer-mod: calc(1 + (var(--spw-runtime-layer-count, 2) - 2) * 0.08);
}
[data-spw-wonder-state] {
  animation-duration: calc(1.8s / var(--spw-wonder-layer-mod, 1));
}

/* ==========================================================================
   16. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(
    .spw-delight,
    [data-spw-delight],
    .spw-wonder-accent,
    [data-spw-wonder-state],
    .spw-delimiter,
    .spw-topic,
    [data-spw-topic],
    .spw-topic-popover,
    .persona-chip,
    .wonder-action,
    .spw-image-helper,
    .spw-svg-surface,
    .spw-metaphysics-host
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  [data-spw-form="brace"][data-spw-charge="sustained"]::before,
  [data-spw-form="brace"][data-spw-charge="sustained"]::after,
  [data-spw-form="brace"][data-spw-wonder-state="resonant"]::before,
  [data-spw-form="brace"][data-spw-wonder-state="resonant"]::after {
    animation: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   Conceptual resonance
   --------------------------------------------------------------------------
   When a visitor hovers or focuses an operator chip, the page identifies
   elements that share the same operator and lifts them with a soft echo.
   This makes composition visible: hover "^syntax" and every `^` chip on
   the page breathes with the same color signature. Attentional model,
   not decoration — the hover teaches the grammar.

   Driven by `:has()` so no JS is required for the baseline case. A future
   JS enhancement can pin a resonance-probe on `<html>` to hold the echo
   while the user explores related reading.
   ========================================================================== */

@supports selector(:has(*)) {
  :where(main, body):has(:where([data-spw-operator="frame"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="frame"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }
  :where(main, body):has(:where([data-spw-operator="object"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="object"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }
  :where(main, body):has(:where([data-spw-operator="probe"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="probe"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }
  :where(main, body):has(:where([data-spw-operator="ref"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="ref"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }
  :where(main, body):has(:where([data-spw-operator="action"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="action"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }
  :where(main, body):has(:where([data-spw-operator="stream"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="stream"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }
  :where(main, body):has(:where([data-spw-operator="surface"]:is(:hover, :focus-visible)))
    :where([data-spw-operator="surface"]:not(:hover):not(:focus-visible)) {
    --spw-resonance: calc(var(--attention-field-radius, 0.4) * 1);
  }

  /* The visual effect of resonance: a subtle operator-tinted border glow.
     Low opacity — the point is peripheral awareness, not demand. */
  :where([data-spw-operator]) {
    transition:
      box-shadow var(--attention-echo-duration, 480ms) var(--ease-settle, ease),
      border-color var(--attention-echo-duration, 480ms) var(--ease-settle, ease),
      background-color var(--attention-echo-duration, 480ms) var(--ease-settle, ease);
  }

  :where([data-spw-operator]:not(:hover):not(:focus-visible))[style*="--spw-resonance"],
  :where([data-spw-operator]) {
    box-shadow:
      var(--spw-local-shadow, none),
      0 0 0 calc(1px * var(--spw-resonance, 0))
        color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal))) 42%, transparent);
  }
}

/* Pinned resonance: when JS (or a future interaction) places
   [data-spw-resonance-probe] on <html>, it acts as a sustained probe
   across the whole page for that operator family. */
html[data-spw-resonance-probe="frame"] :where([data-spw-operator="frame"]:not(:hover):not(:focus-visible)),
html[data-spw-resonance-probe="object"] :where([data-spw-operator="object"]:not(:hover):not(:focus-visible)),
html[data-spw-resonance-probe="probe"] :where([data-spw-operator="probe"]:not(:hover):not(:focus-visible)),
html[data-spw-resonance-probe="ref"] :where([data-spw-operator="ref"]:not(:hover):not(:focus-visible)),
html[data-spw-resonance-probe="action"] :where([data-spw-operator="action"]:not(:hover):not(:focus-visible)),
html[data-spw-resonance-probe="stream"] :where([data-spw-operator="stream"]:not(:hover):not(:focus-visible)),
html[data-spw-resonance-probe="surface"] :where([data-spw-operator="surface"]:not(:hover):not(:focus-visible)) {
  --spw-resonance: calc(var(--attention-field-radius, 0.4) * var(--attention-field-decay, 0.65) + 0.25);
}

html[data-spw-resonance-probe="frame"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="frame"]:not(:hover):not(:focus-visible),
html[data-spw-resonance-probe="object"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="object"]:not(:hover):not(:focus-visible),
html[data-spw-resonance-probe="probe"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="probe"]:not(:hover):not(:focus-visible),
html[data-spw-resonance-probe="ref"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="ref"]:not(:hover):not(:focus-visible),
html[data-spw-resonance-probe="action"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="action"]:not(:hover):not(:focus-visible),
html[data-spw-resonance-probe="stream"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="stream"]:not(:hover):not(:focus-visible),
html[data-spw-resonance-probe="surface"] :where(a, button, .operator-chip, .frame-sigil, .spec-pill)[data-spw-operator="surface"]:not(:hover):not(:focus-visible) {
  border-color: color-mix(
    in srgb,
    var(--spw-operator-color, var(--active-op-color, var(--teal))) 28%,
    var(--line, rgba(14, 18, 20, 0.14))
  );
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--spw-operator-color, var(--active-op-color, var(--teal))) 8%, transparent),
      color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent)
    );
}

@media (prefers-reduced-motion: reduce) {
  :where([data-spw-operator]) {
    transition: none !important;
  }
}
}

/* /public/css/effects/metaphysical-paper.css */
@layer effects {
/*
 * metaphysical-paper.css
 *
 * Semantic ornament for image-bearing surfaces. The goal is not to impose a
 * universal card treatment, but to let image studies, SVG figures, and page
 * artifacts share a readable image ritual: semantic treatment, hold-to-visit,
 * and a persistent visited glow.
 */

.spw-metaphysics-host {
  --spw-image-accent: var(--teal);
  --spw-image-paper:
    color-mix(in srgb, var(--spw-image-accent) 5%, rgba(255, 248, 236, 0.94));
  --spw-image-line:
    color-mix(in srgb, var(--spw-image-accent) 18%, rgba(17, 18, 20, 0.14));
  --spw-image-glow:
    color-mix(in srgb, var(--spw-image-accent) 18%, rgba(255, 208, 131, 0.12));
  --spw-image-focus-x: 50%;
  --spw-image-focus-y: 42%;
  --spw-image-tilt-x: 0deg;
  --spw-image-tilt-y: 0deg;
  --spw-image-drift-x: 0px;
  --spw-image-drift-y: 0px;
  --spw-image-energy: 0;
  --spw-image-scale: 1;
  --spw-image-pixel-cell: clamp(8px, 1vw + 2px, 13px);
  --spw-image-pixel-line: clamp(1px, 0.12vw + 0.4px, 2px);
  --spw-image-helper-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 62%),
    color-mix(in srgb, var(--spw-image-paper) 90%, rgba(17, 18, 20, 0.08));
  --spw-image-helper-bg-strong:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 62%),
    color-mix(in srgb, var(--spw-image-paper) 84%, rgba(17, 18, 20, 0.12));
  --spw-image-helper-border:
    color-mix(in srgb, var(--spw-image-accent) 20%, rgba(17, 18, 20, 0.14));
  --spw-image-helper-ink:
    color-mix(in srgb, var(--spw-image-accent) 68%, var(--ink, rgba(14, 18, 20, 0.92)));
  --spw-image-helper-secondary-ink:
    color-mix(in srgb, var(--spw-image-accent) 24%, var(--ink-mid, rgba(14, 18, 20, 0.64)));
  --spw-image-memory-ink:
    color-mix(in srgb, var(--ink-soft, rgba(14, 18, 20, 0.72)) 88%, var(--spw-image-accent));
  --spw-image-helper-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 8px 18px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
  --spw-image-helper-lift-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 22px color-mix(in srgb, var(--spw-image-accent) 14%, transparent);
  --spw-image-caption-ink:
    color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.92)) 82%, var(--spw-image-accent));
  --spw-image-caption-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);

  position: relative;
  isolation: isolate;
  cursor: grab;
  outline: none;
  touch-action: manipulation;
  container-type: inline-size;
  transition:
    box-shadow var(--duration-base, 200ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

.spw-metaphysics-host[data-spw-image-resonance="amber"] {
  --spw-image-accent: var(--op-object-color, #c68a22);
}

.spw-metaphysics-host[data-spw-image-resonance="violet"] {
  --spw-image-accent: var(--op-probe-color, #6a3fb8);
}

.spw-metaphysics-host[data-spw-image-resonance="sea"] {
  --spw-image-accent: var(--op-topic-color, #2a8c76);
}

.spw-metaphysics-host[data-spw-image-resonance="blue"] {
  --spw-image-accent: var(--op-ref-color, #1d57a3);
}

.spw-metaphysics-host[data-spw-image-resonance="ink"] {
  --spw-image-accent: color-mix(in srgb, var(--ink, #1f2423) 78%, var(--teal));
}

.spw-metaphysics-host[data-spw-image-gesture="drag"],
.spw-metaphysics-host[data-spw-hold-state="arming"] {
  cursor: grabbing;
}

.spw-metaphysics-host[data-spw-image-prominence="hero"] {
  touch-action: pan-y pinch-zoom;
}


.spw-metaphysics-host:focus-visible {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-image-accent) 28%, transparent),
    0 0 0 4px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
}

.spw-metaphysics-host.spw-scaffold::before {
  content: none;
}

.spw-metaphysics-host::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: calc(0.44 + (var(--spw-image-energy) * 0.28));
  mix-blend-mode: screen;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 38%),
    radial-gradient(
      circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
      color-mix(in srgb, var(--spw-image-accent) 16%, rgba(255, 243, 215, 0.14)),
      transparent 44%
    );
  transition:
    opacity var(--duration-base, 200ms) var(--ease-mechanical, ease),
    background var(--duration-base, 200ms) var(--ease-mechanical, ease);
}

:where(.spw-metaphysics-host img, .spw-metaphysics-host svg) {
  position: relative;
  z-index: 0;
  transform-origin: var(--spw-image-focus-x) var(--spw-image-focus-y);
  transform:
    perspective(1200px)
    translate3d(var(--spw-image-drift-x), var(--spw-image-drift-y), 0)
    rotateX(var(--spw-image-tilt-x))
    rotateY(var(--spw-image-tilt-y))
    scale(var(--spw-image-scale));
  transition:
    filter var(--duration-base, 200ms) var(--ease-mechanical, ease),
    transform var(--duration-base, 200ms) var(--ease-mechanical, ease),
    opacity var(--duration-base, 200ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-base, 200ms) var(--ease-mechanical, ease);
}

.spw-metaphysics-host figcaption {
  position: relative;
  z-index: 1;
  color: var(--spw-image-caption-ink);
  text-shadow: var(--spw-image-caption-shadow);
  transition:
    color var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    text-shadow var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    opacity var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

.spw-metaphysics-host[data-spw-contrast-state="raised"] {
  --spw-image-helper-border:
    color-mix(in srgb, var(--spw-image-accent) 28%, rgba(17, 18, 20, 0.14));
  --spw-image-helper-secondary-ink:
    color-mix(in srgb, var(--spw-image-accent) 34%, var(--ink-mid, rgba(14, 18, 20, 0.64)));
  --spw-image-caption-ink:
    color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.94)) 74%, var(--spw-image-accent));
  --spw-image-caption-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 10px color-mix(in srgb, var(--spw-image-accent) 6%, transparent);
}

.spw-metaphysics-host[data-spw-contrast-state="focused"] {
  --spw-image-helper-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 62%),
    color-mix(in srgb, var(--spw-image-paper) 80%, rgba(17, 18, 20, 0.14));
  --spw-image-helper-bg-strong:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 62%),
    color-mix(in srgb, var(--spw-image-paper) 74%, rgba(17, 18, 20, 0.18));
  --spw-image-helper-border:
    color-mix(in srgb, var(--spw-image-accent) 36%, rgba(17, 18, 20, 0.18));
  --spw-image-helper-ink:
    color-mix(in srgb, var(--spw-image-accent) 76%, var(--ink, rgba(14, 18, 20, 0.96)));
  --spw-image-helper-secondary-ink:
    color-mix(in srgb, var(--spw-image-accent) 46%, var(--ink, rgba(14, 18, 20, 0.92)));
  --spw-image-memory-ink:
    color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.94)) 74%, var(--spw-image-accent));
  --spw-image-caption-ink:
    color-mix(in srgb, var(--ink, rgba(14, 18, 20, 0.96)) 68%, var(--spw-image-accent));
  --spw-image-caption-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 14px color-mix(in srgb, var(--spw-image-accent) 8%, transparent);
}

.spw-metaphysics-host[data-spw-medium="raster"] img {
  filter: saturate(0.98) contrast(1.01);
}

:where(
  .spw-metaphysics-host[data-spw-image-preview="on"] img,
  .spw-metaphysics-host[data-spw-image-preview="on"] svg,
  .spw-metaphysics-host:focus-within img,
  .spw-metaphysics-host:focus-within svg
) {
  --spw-image-scale: 1.008;
}

.spw-metaphysics-host[data-spw-image-effect="pixelize"][data-spw-medium="raster"] img {
  image-rendering: pixelated;
  --spw-image-scale: 1.018;
  filter: saturate(0.84) contrast(1.18) brightness(1.01);
}

.spw-metaphysics-host[data-spw-image-effect="pixelize"]::after {
  opacity: calc(0.58 + (var(--spw-image-energy) * 0.26));
  mix-blend-mode: soft-light;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 40%),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--spw-image-accent) 16%, rgba(255, 255, 255, 0.05)) 0 var(--spw-image-pixel-line),
      transparent var(--spw-image-pixel-line) var(--spw-image-pixel-cell)
    ),
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--spw-image-accent) 12%, rgba(255, 255, 255, 0.03)) 0 var(--spw-image-pixel-line),
      transparent var(--spw-image-pixel-line) var(--spw-image-pixel-cell)
    ),
    radial-gradient(
      circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
      color-mix(in srgb, var(--spw-image-accent) 20%, rgba(255, 243, 215, 0.18)),
      transparent 46%
    );
}

:where(
  .spw-metaphysics-host[data-spw-image-effect="pixelize"][data-spw-medium="raster"][data-spw-image-preview="on"] img,
  .spw-metaphysics-host[data-spw-image-effect="pixelize"][data-spw-medium="raster"]:focus-within img
) {
  --spw-image-scale: 1.028;
  filter: saturate(0.92) contrast(1.22) brightness(1.03);
}

.spw-metaphysics-host[data-spw-image-effect="pixelize"][data-spw-medium="vector"] svg {
  shape-rendering: crispEdges;
  filter:
    contrast(1.08)
    saturate(0.92)
    drop-shadow(0 0 10px color-mix(in srgb, var(--spw-image-accent) 12%, transparent));
}

.spw-metaphysics-host[data-spw-image-effect="watercolor"]::after {
  opacity: calc(0.68 + (var(--spw-image-energy) * 0.22));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(
      circle at 18% 20%,
      color-mix(in srgb, var(--spw-image-accent) 11%, rgba(255, 243, 215, 0.2)),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 72%,
      color-mix(in srgb, var(--spw-image-accent) 9%, rgba(255, 243, 215, 0.16)),
      transparent 36%
    ),
    linear-gradient(
      132deg,
      color-mix(in srgb, var(--spw-image-accent) 8%, rgba(255, 243, 215, 0.1)) 0 14%,
      transparent 28% 68%,
      color-mix(in srgb, var(--spw-image-accent) 7%, rgba(255, 243, 215, 0.08)) 84% 100%
    ),
    repeating-linear-gradient(
      160deg,
      color-mix(in srgb, var(--spw-image-accent) 6%, transparent) 0 2px,
      transparent 2px 24px
    ),
    radial-gradient(
      circle at 46% 42%,
      rgba(255, 247, 232, 0.16),
      transparent 44%
    ),
    radial-gradient(
      circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
      color-mix(in srgb, var(--spw-image-accent) 16%, rgba(255, 243, 215, 0.18)),
      transparent 48%
    );
}

.spw-metaphysics-host[data-spw-image-effect="watercolor"][data-spw-medium="raster"] img {
  filter: saturate(0.94) contrast(1.02) brightness(1.04) sepia(0.04);
}

.spw-metaphysics-host[data-spw-image-effect="watercolor"][data-spw-medium="vector"] svg {
  filter:
    saturate(0.96)
    contrast(0.99)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1))
    drop-shadow(0 0 16px color-mix(in srgb, var(--spw-image-accent) 6%, transparent));
}

:where(
  .spw-metaphysics-host[data-spw-image-effect="watercolor"][data-spw-medium="raster"][data-spw-image-preview="on"] img,
  .spw-metaphysics-host[data-spw-image-effect="watercolor"][data-spw-medium="raster"]:focus-within img
) {
  --spw-image-scale: 1.014;
  filter: saturate(0.98) contrast(1.05) brightness(1.05) sepia(0.03);
}

:where(
  .spw-metaphysics-host[data-spw-image-effect="watercolor"][data-spw-medium="vector"][data-spw-image-preview="on"] svg,
  .spw-metaphysics-host[data-spw-image-effect="watercolor"][data-spw-medium="vector"]:focus-within svg
) {
  --spw-image-scale: 1.012;
}

:where(
  .spw-metaphysics-host[data-spw-image-effect="clarify"] img,
  .spw-metaphysics-host[data-spw-image-effect="clarify"] svg
) {
  filter: saturate(1.06) contrast(1.08) brightness(0.99);
}

.spw-metaphysics-host[data-spw-image-effect="clarify"]::after {
  opacity: calc(0.32 + (var(--spw-image-energy) * 0.16));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(
      180deg,
      transparent 0 58%,
      color-mix(in srgb, var(--spw-image-accent) 5%, rgba(255, 255, 255, 0.12)) 100%
    ),
    radial-gradient(
      circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
      color-mix(in srgb, var(--spw-image-accent) 12%, rgba(255, 243, 215, 0.12)),
      transparent 40%
    );
}

.spw-metaphysics-host[data-spw-image-effect="clarify"][data-spw-medium="vector"] svg {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 0 14px color-mix(in srgb, var(--spw-image-accent) 10%, transparent));
}

/* ─── Frame hint (discoverability) ──────────────────────────────────── */
/*
 * A breathing accent line at the bottom edge of the image. Visible on hover,
 * not a button — just a signal that something can happen here.
 * Clicking it (via .spw-image-hint) opens the control strip.
 */
.spw-image-hint {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 2.6rem;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--spw-image-accent) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    width 220ms ease,
    background 220ms ease;
}

.spw-metaphysics-host[data-spw-image-preview="on"] .spw-image-hint {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.spw-metaphysics-host[data-spw-image-state="primed"] .spw-image-hint {
  width: 3.4rem;
  opacity: 0.96;
}

.spw-metaphysics-host[data-spw-image-input="coarse"] .spw-image-hint {
  height: 4px;
}

.spw-metaphysics-host[data-spw-controls-open="true"] .spw-image-hint {
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

/* ─── Control strip (frame-integrated, bottom edge) ─────────────────── */
/*
 * Collapsed by default. Expands upward from the image bottom edge when the
 * hint is clicked. Controls feel like part of the frame, not a floating HUD.
 */
.spw-image-helper-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.36rem;
  padding: 0 0.72rem 0.6rem;
  pointer-events: none;

  /* Collapsed: zero-height, content hidden */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition:
    max-height 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 200ms ease,
    transform 200ms ease;
}

.spw-metaphysics-host[data-spw-controls-open="true"] .spw-image-helper-strip {
  max-height: 8rem;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

:where(.spw-image-helper, .spw-image-memory) {
  pointer-events: auto;
  flex: 0 1 auto;
  box-sizing: border-box;
  border: 1px solid var(--spw-image-helper-border, var(--spw-image-line));
  border-radius: calc(var(--shape-control, 0.68rem) + 0.06rem);
  backdrop-filter: blur(16px);
  box-shadow: var(--spw-image-helper-shadow);
}

.spw-image-helper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow value"
    "track track";
  gap: 0.1rem 0.55rem;
  min-height: max(2.15rem, var(--touch-target-compact, 2.15rem));
  min-width: min(100%, 9.25rem);
  padding: 0.42rem 0.66rem 0.46rem;
  background: var(--spw-image-helper-bg);
  color: var(--spw-image-helper-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  line-height: 1;
  transition:
    border-color var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    background var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    transform var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(.spw-image-helper:hover, .spw-image-helper:focus-visible) {
  border-color: color-mix(in srgb, var(--spw-image-accent) 40%, transparent);
  background: var(--spw-image-helper-bg-strong);
  transform: translateY(-1.5px);
  box-shadow: var(--spw-image-helper-lift-shadow);
  outline: none;
}

.spw-image-helper[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--spw-image-accent) 30%, transparent);
  background: var(--spw-image-helper-bg-strong);
  box-shadow: var(--spw-image-helper-lift-shadow);
}

.spw-image-helper__eyebrow {
  grid-area: eyebrow;
  align-self: end;
  color: var(--spw-image-helper-secondary-ink, var(--ink-mid));
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.spw-image-helper__value {
  grid-area: value;
  justify-self: end;
  align-self: end;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.spw-image-helper__track {
  grid-area: track;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.22rem;
  margin-top: 0.06rem;
}

.spw-image-helper__stop {
  height: 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--spw-image-accent) 10%, rgba(255, 255, 255, 0.16));
  opacity: 0.72;
  transition:
    background var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    opacity var(--duration-fast, 120ms) var(--ease-mechanical, ease),
    transform var(--duration-fast, 120ms) var(--ease-mechanical, ease);
}

:where(.spw-image-helper:hover, .spw-image-helper:focus-visible) .spw-image-helper__stop {
  opacity: 0.92;
}

:where(
  .spw-image-helper[data-spw-effect="semantic"] [data-spw-effect-stop="semantic"],
  .spw-image-helper[data-spw-effect="pixelize"] [data-spw-effect-stop="pixelize"],
  .spw-image-helper[data-spw-effect="watercolor"] [data-spw-effect-stop="watercolor"],
  .spw-image-helper[data-spw-effect="clarify"] [data-spw-effect-stop="clarify"]
) {
  background: color-mix(in srgb, var(--spw-image-accent) 44%, rgba(255, 255, 255, 0.92));
  opacity: 1;
  transform: scaleY(1.08);
}

.spw-image-helper[data-spw-override-state="manual"] .spw-image-helper__eyebrow,
.spw-image-memory[data-spw-override-state="manual"] .spw-image-memory__logic {
  color: color-mix(in srgb, var(--spw-image-accent) 58%, var(--ink-mid));
}

.spw-image-memory {
  display: grid;
  align-content: center;
  gap: 0.08rem;
  min-height: max(2.15rem, var(--touch-target-compact, 2.15rem));
  max-width: min(100%, 13rem);
  padding: 0.42rem 0.58rem 0.46rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 62%),
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.86)) 90%, transparent);
}

.spw-image-memory__logic {
  color: var(--spw-image-helper-secondary-ink, var(--ink-mid));
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spw-image-memory__value {
  color: var(--spw-image-memory-ink, var(--ink-soft));
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spw-image-memory[data-spw-visited="true"] {
  border-color: color-mix(in srgb, var(--spw-image-accent) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 22px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
}

.spw-image-memory[data-spw-visited="true"] .spw-image-memory__logic {
  color: color-mix(in srgb, var(--spw-image-accent) 70%, var(--ink));
}

.spw-image-memory[data-spw-visited="true"] .spw-image-memory__value {
  color: color-mix(in srgb, var(--spw-image-accent) 46%, var(--ink-soft));
}

/* ─── Strip close button ────────────────────────────────────────────── */
.spw-image-strip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  background: none;
  border: 1px solid color-mix(in srgb, var(--spw-image-accent) 16%, transparent);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 140ms ease, border-color 140ms ease;
  flex-shrink: 0;
}

.spw-image-strip-close:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--spw-image-accent) 32%, transparent);
}

/* ─── Palette swatches ──────────────────────────────────────────────── */
/*
 * Shows the image's own extracted palette as interactive chips.
 * Clicking a swatch sets it as the active brush color.
 * This makes palette integration tangible — paint with the image's own colors.
 */
.spw-image-palette-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  flex: 1;
}

.spw-image-palette-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
  background: var(--swatch-color, var(--spw-image-accent));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.spw-image-palette-swatch:hover {
  transform: scale(1.18);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.spw-image-palette-swatch[data-active="true"] {
  transform: scale(1.24);
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--swatch-color), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ─── Brush Mode Controls ──────────────────────────────────────────────── */

.spw-image-brush-toggle {
  min-height: max(2.15rem, var(--touch-target-compact, 2.15rem));
  padding: 0.32rem 0.56rem;
  background: color-mix(in srgb, var(--spw-image-accent) 6%, var(--surface-strong, #ffffff));
  border: 1px solid color-mix(in srgb, var(--spw-image-accent) 18%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
  border-radius: 0.64rem;
  color: var(--spw-image-accent);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spw-image-brush-toggle:hover:not([data-spw-brush-active="true"]) {
  background: color-mix(in srgb, var(--spw-image-accent) 12%, var(--surface-strong, #ffffff));
  border-color: color-mix(in srgb, var(--spw-image-accent) 28%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
  transform: translateY(-1px);
}

.spw-image-brush-toggle[data-spw-brush-active="true"] {
  background: color-mix(in srgb, var(--spw-image-accent) 22%, var(--surface-strong, #ffffff));
  border-color: color-mix(in srgb, var(--spw-image-accent) 42%, var(--spw-shell-line, rgba(14, 18, 20, 0.14)));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.24), 0 4px 10px color-mix(in srgb, var(--spw-image-accent) 12%, transparent);
}

.spw-image-brush-toggle:active {
  transform: translateY(0);
  opacity: 0.88;
}

.spw-image-brush-controls {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.32rem 0.48rem;
  padding: 0.48rem 0.56rem;
  background: color-mix(in srgb, var(--surface, #ffffff) 90%, transparent);
  border: 1px solid var(--spw-shell-line, rgba(14, 18, 20, 0.14));
  border-radius: 0.64rem;
  font-size: 0.64rem;
}

.spw-image-brush-size-label,
.spw-image-brush-opacity-label {
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.spw-image-brush-size-slider,
.spw-image-brush-opacity-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--spw-shell-line, rgba(14, 18, 20, 0.14));
  outline: none;
  cursor: pointer;
}

.spw-image-brush-size-slider::-webkit-slider-thumb,
.spw-image-brush-opacity-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--spw-image-accent) 68%, var(--ink));
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--spw-image-accent) 28%, transparent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.spw-image-brush-size-slider::-moz-range-thumb,
.spw-image-brush-opacity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--spw-image-accent) 68%, var(--ink));
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--spw-image-accent) 28%, transparent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

@media (max-width: 700px) {
  .spw-image-brush-controls {
    display: none;
    grid-template-columns: 1fr;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: max-content;
    z-index: calc(var(--z-floating, var(--layer-floating, 100)) + 8);
  }

  .spw-metaphysics-host[data-spw-brush-mode="true"] .spw-image-brush-controls {
    display: grid;
  }
}

html[data-spw-show-semantic-metadata="off"] .spw-image-memory__value {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spw-metaphysics-host[data-spw-visited="true"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-image-accent) 24%, transparent),
    0 8px 20px color-mix(in srgb, var(--spw-image-accent) 8%, transparent);
}

.spw-metaphysics-host[data-spw-image-prominence="hero"] {
  box-shadow:
    var(--card-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.42)),
    0 8px 22px color-mix(in srgb, var(--spw-image-accent) 7%, rgba(0, 0, 0, 0.1));
}

.spw-metaphysics-host[data-spw-image-prominence="hero"][data-spw-image-preview="on"],
.spw-metaphysics-host[data-spw-image-prominence="hero"]:focus-within,
.spw-metaphysics-host[data-spw-image-prominence="hero"][data-spw-image-gesture="drag"],
.spw-metaphysics-host[data-spw-image-prominence="hero"][data-spw-salience-state="active"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-image-accent) 20%, transparent),
    0 10px 24px color-mix(in srgb, var(--spw-image-accent) 10%, rgba(0, 0, 0, 0.12));
}

.spw-metaphysics-host[data-spw-visited="true"]::after {
  opacity: 0.94;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 34%),
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--spw-image-accent) 12%, rgba(255, 236, 196, 0.2)),
      transparent 48%
    );
}

.spw-metaphysics-host[data-spw-visited="true"] .spw-image-memory {
  color: color-mix(in srgb, var(--spw-image-accent) 58%, var(--ink));
}

:where(
  .spw-metaphysics-host[data-spw-visited="true"] img,
  .spw-metaphysics-host[data-spw-visited="true"] svg
) {
  box-shadow: 0 0 12px color-mix(in srgb, var(--spw-image-accent) 8%, transparent);
}

:where(
  .spw-metaphysics-host[data-spw-image-gesture="drag"] img,
  .spw-metaphysics-host[data-spw-image-gesture="drag"] svg
) {
  --spw-image-scale: 1.018;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
}

.spw-metaphysics-host[data-spw-hold-state="arming"] {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-image-accent) 24%, transparent),
    0 0 12px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
}

.spw-metaphysics-host[data-spw-hold-state="arming"] .spw-image-helper {
  animation: spw-image-hold-pulse 0.72s ease-in-out infinite;
}

.spw-metaphysics-host[data-spw-visit-burst="true"] {
  animation: spw-image-visit-burst 0.82s ease;
}

.spw-metaphysics-host[data-spw-medium="vector"] {
  padding: clamp(0.6rem, 2vw, 0.9rem);
  border-radius: var(--shape-surface, 8px);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--spw-image-paper) 82%, transparent),
      transparent 56%
    ),
    rgba(255, 255, 255, 0.4);
}

.spw-metaphysics-host[data-spw-image-layout="compact"] .spw-image-helper-strip {
  gap: 0.3rem;
  padding-inline: 0.56rem;
}

.spw-metaphysics-host[data-spw-image-layout="compact"] .spw-image-palette-swatches {
  flex: 1 1 100%;
  order: 1;
}

.spw-metaphysics-host[data-spw-image-layout="compact"] .spw-image-helper {
  min-width: 0;
  flex: 1 1 8rem;
}

.spw-metaphysics-host[data-spw-image-layout="compact"] .spw-image-memory {
  order: 4;
  flex: 1 1 100%;
  max-width: none;
}

.spw-metaphysics-host[data-spw-image-layout="compact"] .spw-image-strip-close {
  order: 3;
}

.spw-metaphysics-host[data-spw-image-layout="compact"][data-spw-image-input="coarse"] :where(
  .spw-image-helper,
  .spw-image-memory,
  .spw-image-brush-toggle
) {
  min-height: max(2.3rem, var(--touch-target-compact, 2.15rem));
}


@media (max-width: 48rem) {
  .spw-metaphysics-host {
    --spw-image-pixel-cell: clamp(10px, 3vw, 15px);
    --spw-image-pixel-line: 1px;
  }

  .spw-image-helper-strip {
    justify-content: space-between;
    gap: 0.34rem;
  }

  .spw-image-helper {
    flex: 1 1 9.5rem;
    min-width: 8.5rem;
    padding-inline: 0.6rem;
  }

  .spw-image-memory {
    flex: 1 1 7rem;
    min-width: 0;
    max-width: 10rem;
  }

  .spw-image-memory__value {
    font-size: 0.64rem;
  }

  .spw-metaphysics-host[data-spw-image-layout="compact"] .spw-image-memory__value {
    white-space: normal;
  }

  .spw-metaphysics-host[data-spw-image-effect="pixelize"]::after {
    opacity: calc(0.64 + (var(--spw-image-energy) * 0.22));
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.11), transparent 42%),
      repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--spw-image-accent) 18%, rgba(255, 255, 255, 0.04)) 0 var(--spw-image-pixel-line),
        transparent var(--spw-image-pixel-line) var(--spw-image-pixel-cell)
      ),
      repeating-linear-gradient(
        180deg,
        color-mix(in srgb, var(--spw-image-accent) 14%, rgba(255, 255, 255, 0.02)) 0 var(--spw-image-pixel-line),
        transparent var(--spw-image-pixel-line) var(--spw-image-pixel-cell)
      ),
      radial-gradient(
        circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
        color-mix(in srgb, var(--spw-image-accent) 20%, rgba(255, 243, 215, 0.18)),
        transparent 52%
      );
  }

  .spw-metaphysics-host[data-spw-image-effect="watercolor"]::after {
    opacity: calc(0.72 + (var(--spw-image-energy) * 0.18));
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.14), transparent 42%),
      radial-gradient(
        circle at 14% 18%,
        color-mix(in srgb, var(--spw-image-accent) 12%, rgba(255, 243, 215, 0.22)),
        transparent 32%
      ),
      radial-gradient(
        circle at 74% 72%,
        color-mix(in srgb, var(--spw-image-accent) 10%, rgba(255, 243, 215, 0.18)),
        transparent 38%
      ),
      radial-gradient(
        circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
        color-mix(in srgb, var(--spw-image-accent) 18%, rgba(255, 243, 215, 0.18)),
        transparent 52%
      );
  }
}

@container (max-width: 28rem) {
  .spw-image-helper-strip {
    gap: 0.3rem;
    padding-inline: 0.54rem;
  }

  .spw-image-helper {
    min-width: 0;
    flex: 1 1 8rem;
  }

  .spw-image-memory {
    flex: 1 1 100%;
    max-width: none;
  }

  .spw-image-memory__value {
    white-space: normal;
  }
}

@media (min-width: 72rem), (min-width: 48rem) and (min-height: 58rem) {
  .spw-metaphysics-host[data-spw-image-prominence="hero"] {
    --spw-image-pixel-cell: clamp(8px, 0.85vw + 2px, 13px);
  }

  .spw-metaphysics-host[data-spw-image-prominence="hero"] .spw-image-helper-strip {
    gap: 0.5rem;
  }

  .spw-metaphysics-host[data-spw-image-prominence="hero"] .spw-image-helper {
    min-width: 9.9rem;
    padding-inline: 0.74rem;
  }

  .spw-metaphysics-host[data-spw-image-prominence="hero"] .spw-image-memory {
    max-width: 13.5rem;
  }

  .spw-metaphysics-host[data-spw-image-effect="pixelize"]::after {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 40%),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--spw-image-accent) 7%, transparent) 0 18%,
        transparent 34% 68%,
        color-mix(in srgb, var(--spw-image-accent) 6%, transparent) 84% 100%
      ),
      repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--spw-image-accent) 16%, rgba(255, 255, 255, 0.05)) 0 var(--spw-image-pixel-line),
        transparent var(--spw-image-pixel-line) var(--spw-image-pixel-cell)
      ),
      repeating-linear-gradient(
        180deg,
        color-mix(in srgb, var(--spw-image-accent) 12%, rgba(255, 255, 255, 0.03)) 0 var(--spw-image-pixel-line),
        transparent var(--spw-image-pixel-line) var(--spw-image-pixel-cell)
      ),
      radial-gradient(
        circle at var(--spw-image-focus-x) var(--spw-image-focus-y),
        color-mix(in srgb, var(--spw-image-accent) 20%, rgba(255, 243, 215, 0.18)),
        transparent 46%
      );
  }

  .spw-metaphysics-host[data-spw-image-effect="watercolor"]::after {
    opacity: calc(0.64 + (var(--spw-image-energy) * 0.22));
  }

  :where(
    .spw-metaphysics-host[data-spw-image-effect="clarify"] img,
    .spw-metaphysics-host[data-spw-image-effect="clarify"] svg
  ) {
    filter: saturate(1.08) contrast(1.1) brightness(0.99);
  }
}

@keyframes spw-image-hold-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--spw-image-accent) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
  }
}

@keyframes spw-image-visit-burst {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--spw-image-accent) 18%, transparent),
      0 0 0 color-mix(in srgb, var(--spw-image-accent) 0%, transparent);
  }

  55% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--spw-image-accent) 26%, transparent),
      0 0 18px color-mix(in srgb, var(--spw-image-accent) 10%, transparent);
  }

  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--spw-image-accent) 24%, transparent),
      0 8px 20px color-mix(in srgb, var(--spw-image-accent) 8%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spw-metaphysics-host {
    touch-action: auto;
  }

  :where(.spw-metaphysics-host img, .spw-metaphysics-host svg) {
    transform: none;
    transition:
      filter var(--duration-base, 200ms) var(--ease-mechanical, ease),
      opacity var(--duration-base, 200ms) var(--ease-mechanical, ease),
      box-shadow var(--duration-base, 200ms) var(--ease-mechanical, ease);
  }

  .spw-metaphysics-host::after {
    opacity: 0.56;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .spw-metaphysics-host img,
    .spw-metaphysics-host svg,
    .spw-image-helper
  ) {
    transition: none;
  }

  :where(
    .spw-metaphysics-host[data-spw-hold-state="arming"] .spw-image-helper,
    .spw-metaphysics-host[data-spw-visit-burst="true"]
  ) {
    animation: none;
  }
}
}

/* /public/css/effects/narrative.css */
@layer effects {
/**
 * public/css/effects/narrative.css
 * ---------------------------------------------------------------------------
 * Scope: inline tokenized narrative elements, resonance effects, and the
 * floating inspector drawer used by narrative and debug surfaces.
 */

/* Inline grammar tokens */
.grammar-token {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.35em;
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
  font-weight: 500;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 4px;
  cursor: pointer;
  background: color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 20%, transparent);
  color: var(--token-op-color, inherit);
  scroll-margin-block: calc(var(--site-header-height, 5rem) + 1rem);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease;
}

.grammar-token::after {
  content: "";
  inline-size: 0.24em;
  block-size: 0.24em;
  margin-inline-start: 0.32em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.32;
}

.grammar-token:hover,
.grammar-token:focus-visible {
  outline: none;
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 15%, transparent);
  border-color: color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 50%, transparent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 15%, transparent);
}

.grammar-token:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 70%, white);
  outline-offset: 2px;
}

/* Sigils and Operator maps */
.token-sigil {
  font-size: 0.85em;
  opacity: 0.65;
  margin-right: 3px;
  user-select: none;
}

.token-character {
  --token-op-color: var(--op-ref-color, #3b82f6);
}

.token-location {
  --token-op-color: var(--op-frame-color, #14b8a6);
}

.token-prop {
  --token-op-color: var(--op-object-color, #f59e0b);
}

.token-action {
  --token-op-color: var(--op-action-color, #0f766e);
}

.token-theme {
  --token-op-color: var(--op-probe-color, #8b5cf6);
}

/* Dialogue representation */
.token-dialogue {
  display: inline;
  font-family: var(--font-serif, "Newsreader", serif);
  font-style: italic;
  font-size: 1.05em;
  font-weight: 400;
  padding: 0 4px;
  background: transparent;
  border: none;
  border-left: 2px solid color-mix(in srgb, var(--op-topic-color, #22c55e) 30%, transparent);
  color: var(--text-color, inherit);
  cursor: default;
}

.token-dialogue::after {
  content: none;
}

.token-dialogue:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--op-topic-color, #22c55e) 5%, transparent);
}

/* Resonance effects */
html[data-spw-resonance-token] .grammar-token:not(.token-dialogue) {
  opacity: 0.35;
  filter: grayscale(0.4);
}

html[data-spw-resonance-token] .grammar-token[data-spw-resonant="true"] {
  opacity: 1;
  filter: none;
  transform: scale(1.05) translateY(-1px);
  background: color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 20%, transparent);
  border-color: var(--token-op-color, var(--accent, #707070));
  box-shadow: 0 0 14px color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 30%, transparent);
}

:where([data-spw-narrative-copy]) {
  --spw-narrative-copy-color: var(--active-op-color, var(--op-probe-color, #8b5cf6));
}

html[data-spw-narrative-mode="on"] :where([data-spw-narrative-copy]) {
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--spw-narrative-copy-color) 32%, transparent),
    var(--spw-local-shadow, none);
}

html[data-spw-narrative-mode="on"] :where([data-spw-narrative-copy])::selection {
  background: color-mix(in srgb, var(--spw-narrative-copy-color) 22%, transparent);
}

/* Floating Glassmorphic Inspector Drawer */
.spw-narrative-drawer {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2rem));
  display: flex;
  flex-direction: column;
  border-radius: var(--shape-surface, 12px);
  background: var(--card-bg, rgba(23, 23, 23, 0.82));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  isolation: isolate;
  overflow: hidden;
  animation: drawer-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-color, #e0e0e0);
}

@keyframes drawer-slide-in {
  from {
    transform: translateY(30px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  transition: background-color 0.2s, color 0.2s;
}

.drawer-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color, #fff);
}

.drawer-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-header h3 {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.drawer-header .operator-chip {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-stats {
  font-size: 0.9rem;
  color: var(--text-muted, #aaa);
}

.drawer-metadata {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-metadata h4 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  font-weight: 600;
}

.drawer-metadata-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.drawer-metadata-list li {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
  gap: 8px;
  align-items: baseline;
  font-size: 0.88rem;
}

.drawer-metadata-list span {
  color: var(--text-muted, #999);
}

.drawer-metadata-list strong {
  color: var(--text-color, #fff);
  font-weight: 600;
}

.drawer-stats strong {
  color: var(--text-color, #fff);
  font-family: var(--font-mono, monospace);
}

.drawer-sentences h4,
.drawer-spw-seed h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  font-weight: 600;
}

.drawer-sentences ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.context-jump-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  color: var(--text-color, #d0d0d0);
  font-family: var(--font-serif, serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.context-jump-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-color, #fff);
}

/* Entity seed container */
.drawer-spw-seed pre {
  margin: 0 0 10px;
  background: var(--surface-code, rgba(10, 10, 10, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}

.drawer-spw-seed code {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--code-color, #a7f3d0);
}

.copy-seed-btn {
  width: 100%;
  justify-content: center;
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

.copy-seed-btn.copy-success {
  background-color: var(--op-action-color, #0f766e) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .grammar-token,
  .grammar-token:hover,
  .grammar-token:focus-visible,
  .spw-narrative-drawer,
  .prose-pulse-highlight {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* Visual pulse when jumping to sentence */
@keyframes prose-pulse {
  0% {
    background-color: transparent;
  }
  25% {
    background-color: color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 20%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--token-op-color, var(--accent, #707070)) 15%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.prose-pulse-highlight {
  animation: prose-pulse 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 4px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .spw-narrative-drawer {
    inset-block-end: 0;
    inset-inline: 0;
    width: auto;
    border-radius: var(--shape-surface, 12px) var(--shape-surface, 12px) 0 0;
    max-height: 65vh;
  }

  .drawer-metadata-list li {
    grid-template-columns: 1fr;
  }
}
}

/* /public/css/effects/debug.css */
@layer effects {
/* ==========================================================================
   debug.css
   --------------------------------------------------------------------------
   Purpose
   - Debug-only overlays for page surface -> feature/module -> slots.
   - Optional layer-owner labels for cascade-resolved diagnostic markers.

   Activation
   - html[data-spw-debug-mode="on"] or [data-spw-debug~="css"] or
     [data-spw-debug~="layout"].
   - html[data-spw-debug-layers="on"] or [data-spw-debug~="layers"].

   Ownership
   - Expose structure only; move required UI rules to the semantic owner.
   - Layer labels show diagnostic owner markers, not full CSS provenance.
   ========================================================================== */

:where(
  html[data-spw-debug-mode="on"],
  [data-spw-debug~="css"],
  [data-spw-debug~="layout"]
) :where(
  [data-spw-page-role],
  [data-spw-page-family],
  [data-spw-route-family],
  [data-spw-page-zone],
  [data-spw-page-status],
  [data-spw-page-responsibility],
  [data-spw-page-primary-action],
  [data-spw-layout],
  [data-spw-context],
  [data-spw-surface],
  [data-spw-feature],
  [data-spw-module],
  [data-spw-module-evaluates],
  [data-spw-slot],
  [data-spw-kind],
  [data-spw-component-id],
  [data-spw-semantic-owner],
  [data-spw-layout-owner],
  [data-spw-floating-chrome="true"]
) {
  --spw-css-debug-color: var(--active-op-color, var(--teal, #008080));
  outline: 1px dashed color-mix(in srgb, var(--spw-css-debug-color) 46%, transparent);
  outline-offset: 3px;
}

:where(
  html[data-spw-debug-mode="on"],
  [data-spw-debug~="css"],
  [data-spw-debug~="layout"]
) :where(
  [data-spw-page-role],
  [data-spw-page-family],
  [data-spw-route-family],
  [data-spw-page-zone],
  [data-spw-page-status],
  [data-spw-page-responsibility],
  [data-spw-page-primary-action],
  [data-spw-layout],
  [data-spw-context],
  [data-spw-feature],
  [data-spw-module],
  [data-spw-module-evaluates],
  [data-spw-slot],
  [data-spw-kind],
  [data-spw-component-id],
  [data-spw-semantic-owner],
  [data-spw-layout-owner],
  [data-spw-floating-chrome="true"]
) {
  position: relative;
}

:where(
  html[data-spw-debug-mode="on"],
  [data-spw-debug~="css"],
  [data-spw-debug~="layout"]
) :where(
  [data-spw-page-role],
  [data-spw-page-family],
  [data-spw-route-family],
  [data-spw-page-zone],
  [data-spw-page-status],
  [data-spw-page-responsibility],
  [data-spw-page-primary-action],
  [data-spw-layout],
  [data-spw-context],
  [data-spw-feature],
  [data-spw-module],
  [data-spw-module-evaluates],
  [data-spw-slot],
  [data-spw-kind],
  [data-spw-component-id],
  [data-spw-semantic-owner],
  [data-spw-layout-owner],
  [data-spw-floating-chrome="true"]
)::before {
  position: absolute;
  z-index: 20;
  inset: auto auto calc(100% + 0.18rem) 0;
  max-inline-size: min(32ch, calc(100vw - 2rem));
  overflow: hidden;
  padding: 0.16rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--spw-css-debug-color) 42%, transparent);
  border-radius: var(--shape-micro, 4px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 92%, var(--spw-css-debug-color) 8%);
  box-shadow: 0 0.2rem 0.8rem rgba(14, 18, 20, 0.12);
  color: color-mix(in srgb, var(--ink, #111) 82%, var(--spw-css-debug-color) 18%);
  content: "semantic";
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  pointer-events: none;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-feature]::before {
  content: "feature:" attr(data-spw-feature);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-role]::before {
  content: "page-role:" attr(data-spw-page-role);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-family]::before {
  content: "page-family:" attr(data-spw-page-family);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-zone]::before {
  content: "page-zone:" attr(data-spw-page-zone);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-status]::before {
  content: "page-status:" attr(data-spw-page-status);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-responsibility]::before {
  content: "page-responsibility:" attr(data-spw-page-responsibility);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-primary-action]::before {
  content: "page-primary-action:" attr(data-spw-page-primary-action);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-route-family]::before {
  content: "route-family:" attr(data-spw-route-family);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-layout]::before {
  content: "layout:" attr(data-spw-layout);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-context]::before {
  content: "context:" attr(data-spw-context);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-module]::before {
  content: "module:" attr(data-spw-module) " [" attr(data-spw-module-status) " / " attr(data-spw-module-when) "]";
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-module][data-spw-module-evaluates]::before {
  content: "module:" attr(data-spw-module) " {" attr(data-spw-module-evaluates) "}";
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-slot]::before {
  content: "slot:" attr(data-spw-slot);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-kind]::before {
  content: "kind:" attr(data-spw-kind);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-component-id]::before {
  content: "component:" attr(data-spw-component-id);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-semantic-owner]::before {
  content: "owner:" attr(data-spw-semantic-owner);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-layout-owner]::before {
  content: "layout:" attr(data-spw-layout-owner);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-floating-chrome="true"]::before {
  content: "floating chrome";
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-surface] {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--spw-css-debug-color) 16%, transparent);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-slot] {
  --spw-css-debug-color: var(--op-ref-color, #1d57a3);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-feature] {
  --spw-css-debug-color: var(--op-frame-color, #008080);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-role] {
  --spw-css-debug-color: var(--op-object-color, #a67c00);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-zone] {
  --spw-css-debug-color: var(--op-frame-color, #008080);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-status] {
  --spw-css-debug-color: var(--op-action-color, #005959);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-responsibility] {
  --spw-css-debug-color: var(--op-probe-color, #4a2180);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-primary-action] {
  --spw-css-debug-color: color-mix(in srgb, var(--op-object-color, #a67c00) 72%, var(--teal, #008080));
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-family],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-zone],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-status],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-responsibility],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-page-primary-action],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-route-family],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-layout],
:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-context] {
  --spw-css-debug-color: color-mix(in srgb, var(--op-probe-color, #4a2180) 72%, var(--teal, #008080));
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-module] {
  --spw-css-debug-color: var(--op-action-color, #005959);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) body::after {
  position: fixed;
  z-index: 200;
  inset: auto 0.6rem 0.6rem auto;
  max-inline-size: min(44ch, calc(100vw - 1.2rem));
  padding: 0.48rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--op-action-color, #005959) 34%, transparent);
  border-radius: var(--shape-small, 8px);
  background: color-mix(in srgb, var(--surface-strong, #fff) 94%, var(--op-action-color, #005959) 6%);
  box-shadow: 0 0.5rem 1.6rem color-mix(in srgb, var(--shadow-color, #111) 14%, transparent);
  color: color-mix(in srgb, var(--ink, #111) 88%, var(--op-action-color, #005959) 12%);
  content:
    "posture: " attr(data-spw-runtime-posture)
    " | "
    "runtime modules: " attr(data-spw-runtime-module-count)
    " | last: " attr(data-spw-runtime-last-module)
    " {" attr(data-spw-runtime-last-module-evaluates) "}";
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  line-height: 1.35;
  pointer-events: none;
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-kind] {
  --spw-css-debug-color: var(--op-object-color, #a67c00);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-semantic-owner] {
  --spw-css-debug-color: var(--op-probe-color, #4a2180);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-layout-owner] {
  --spw-css-debug-color: var(--op-action-color, #005959);
}

:where(html[data-spw-debug-mode="on"], [data-spw-debug~="css"], [data-spw-debug~="layout"]) [data-spw-floating-chrome="true"] {
  --spw-css-debug-color: color-mix(in srgb, var(--op-action-color, #005959) 70%, var(--teal, #008080));
}

/* Layer labels show cascade-resolved diagnostic markers, not full CSS provenance. */
:where(
  html[data-spw-debug-layers="on"],
  html[data-spw-debug~="layers"],
  [data-spw-debug~="layers"]
) :where(
  header,
  main,
  footer,
  section,
  article,
  nav,
  aside,
  .site-frame,
  .frame-panel,
  .frame-card,
  .media-card,
  .operator-card,
  .mode-panel,
  .operator-chip,
  .frame-sigil,
  [data-cognitive-handle],
  [data-spw-feature],
  [data-spw-box-model],
  [data-spw-box-story],
  [data-spw-composition-flow],
  [data-spw-component-kind],
  [data-spw-kind],
  [data-spw-metamaterial],
  [data-spw-wonder-state],
  [data-spw-charge],
  [data-spw-accent],
  [data-spw-ornament-state]
) {
  /* Local tokens */
  --spw-layer-debug-color: var(--spw-debug-layer-color, #888888);

  /* Visual */
  outline: 2px solid color-mix(in srgb, var(--spw-layer-debug-color) 72%, transparent);
  outline-offset: 3px;

  /* Layering / containment */
  position: relative;
}

:where(
  html[data-spw-debug-layers="on"],
  html[data-spw-debug~="layers"],
  [data-spw-debug~="layers"]
) :where(
  header,
  main,
  footer,
  section,
  article,
  nav,
  aside,
  .site-frame,
  .frame-panel,
  .frame-card,
  .media-card,
  .operator-card,
  .mode-panel,
  .operator-chip,
  .frame-sigil,
  [data-cognitive-handle],
  [data-spw-feature],
  [data-spw-box-model],
  [data-spw-box-story],
  [data-spw-composition-flow],
  [data-spw-component-kind],
  [data-spw-kind],
  [data-spw-metamaterial],
  [data-spw-wonder-state],
  [data-spw-charge],
  [data-spw-accent],
  [data-spw-ornament-state]
)::after {
  /* Layout */
  display: inline-block;
  max-inline-size: min(42ch, calc(100vw - 2rem));
  overflow: hidden;
  padding: 0.18rem 0.42rem;
  margin-block-start: 0.24rem;

  /* Box */
  border: 1px solid color-mix(in srgb, var(--spw-layer-debug-color) 50%, transparent);
  border-radius: var(--shape-micro, 4px);

  /* Typography */
  color: color-mix(in srgb, var(--ink, #111) 86%, var(--spw-layer-debug-color) 14%);
  content:
    "layer: " var(--spw-debug-layer-owner, "none")
    " | box: " attr(data-spw-box-model)
    " | flow: " attr(data-spw-composition-flow)
    " | story: " attr(data-spw-box-story);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* Visual */
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--spw-layer-debug-color) 16%, var(--surface-strong, #fff)),
      color-mix(in srgb, var(--surface-strong, #fff) 94%, transparent)
    );
  box-shadow: 0 0.24rem 0.85rem color-mix(in srgb, var(--shadow-color, #111) 14%, transparent);

  /* Interaction */
  pointer-events: none;

  /* Layering / containment */
  position: absolute;
  z-index: 180;
  inset: calc(100% + 0.22rem) auto auto 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    html[data-spw-debug-mode="on"],
    html[data-spw-debug-layers="on"],
    [data-spw-debug~="css"],
    [data-spw-debug~="layout"],
    [data-spw-debug~="layers"]
  ) * {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}
}

/* /public/css/ornament/whimsy.css */
@layer ornament {
/* ==========================================================================
 * whimsy.css
 * --------------------------------------------------------------------------
 * Spw Material Surface
 * Quiet interaction grammar for sigils, folds, and paper-like layers.
 * This file avoids decorative motion; state changes should read as
 * alignment, focus, or revealed structure.
 * ========================================================================== */

:root {
    /* Route local whimsy timing through the global precision motion grammar */
    --spw-fold-duration: var(--duration-fast, 140ms);
    --spw-fold-ease:     var(--ease-mechanical, ease);

    /* Route local shapes and washes through the global material system */
    --spw-paper-corner:  var(--shape-component, 6px);
    --spw-paper-focus:   var(--active-op-border, rgba(0, 128, 128, 0.34));
    --spw-paper-wash:    var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));

    /* Route phase colors through the thematic operator matrix */
    --phase-initiation:     var(--op-action-color, #005959);
    --phase-resistance:     var(--op-pragma-color, #883a3a);
    --phase-transformation: var(--op-merge-color, #277a87);
    --phase-expression:     var(--op-stream-color, #208259);
    --phase-return:         var(--op-baseline-color, #594d3f);
}

/* ==========================================================================
   1. Sigils & Operators
   ========================================================================== */

:where(.frame-sigil, [data-spw-operator], .operator-chip) {
    position: relative;
    transition:
        color var(--spw-fold-duration) var(--spw-fold-ease),
        background-color var(--spw-fold-duration) var(--spw-fold-ease),
        border-color var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(.frame-sigil:hover, .frame-sigil:focus-visible,
       [data-spw-operator]:hover, [data-spw-operator]:focus-visible) {
    background: var(--spw-paper-wash);
    color: var(--active-op-color, #008080);
}

:where(.frame-sigil::before, .frame-sigil::after) {
    content: none;
}

/* ==========================================================================
   2. Frames
   ========================================================================== */

:where(.site-frame) {
    position: relative;
    transition:
        border-color var(--spw-fold-duration) var(--spw-fold-ease),
        background-color var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(.site-frame:hover) {
    border-color: var(--spw-paper-focus);
}

:where(.frame-heading) {
    display: flex;
    align-items: baseline;
    gap: var(--space-md, 1rem);
    margin-bottom: var(--space-lg, 1.5rem);
    position: relative;
}

:where(.frame-heading::after) {
    content: '';
    flex: 1;
    border-top: 1px solid var(--line, rgba(14, 18, 20, 0.14));
    opacity: 0.75;
    transition: border-color var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(.site-frame:hover .frame-heading::after) {
    border-color: var(--active-op-border, rgba(0, 128, 128, 0.34));
}

/* ==========================================================================
   3. Cards
   ========================================================================== */

:where(.plan-card, .frame-card, .media-focus-card) {
    position: relative;
    transition:
        border-color var(--spw-fold-duration) var(--spw-fold-ease),
        background-color var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(.plan-card::before, .frame-card::after, .media-focus-card::before) {
    content: none;
}

:where(.plan-card:hover .plan-thesis,
       .plan-card:hover .plan-wonder,
       .frame-card:hover .frame-card-sigil,
       .media-focus-card:hover) {
    color: var(--ink, #161c1d);
}

:where(.frame-card:hover, .media-focus-card:hover) {
    border-color: var(--active-op-border, rgba(0, 128, 128, 0.34));
}

/* ==========================================================================
   4. Buttons & Chips
   ========================================================================== */

:where(.operator-chip, button, input[type="button"], input[type="submit"]) {
    border-radius: var(--spw-paper-corner);
    transition:
        background-color var(--spw-fold-duration) var(--spw-fold-ease),
        border-color var(--spw-fold-duration) var(--spw-fold-ease),
        color var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(.operator-chip::before, button::before) {
    content: none;
}

:where(.operator-chip:hover, button:hover,
       input[type="button"]:hover, input[type="submit"]:hover) {
    border-color: var(--active-op-border, rgba(0, 128, 128, 0.34));
    background:
        color-mix(
            in srgb,
            var(--surface-strong, #fff) 88%,
            var(--active-op-color, #008080) 12%
        );
    color: var(--ink-strong, var(--ink, #161c1d));
}

:where(button:active, .operator-chip:active) {
    border-color: var(--active-op-color, #008080);
}

/* ==========================================================================
   5. Spec Tokens
   ========================================================================== */

:where(.spec-pill) {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--token-border, rgba(0, 128, 128, 0.55));
    border-radius: var(--spw-paper-corner);
    background: var(--token-bg, rgba(255, 255, 255, 0.82));
    color: var(--ink, #161c1d);
    font-size: var(--text-size-sm, 0.8rem);
    font-weight: 600;
    transition:
        background-color var(--spw-fold-duration) var(--spw-fold-ease),
        border-color var(--spw-fold-duration) var(--spw-fold-ease);
}

.spw-discovery-notice__handle.spec-pill {
    display: inline-flex;
    align-items: center;
    inline-size: auto;
    block-size: auto;
    min-inline-size: 0;
    min-block-size: 0;
    min-height: 0;
    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, rgba(14, 18, 20, 0.96) 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(.spec-pill::before) {
    content: none;
}

:where(.spec-strip:hover .spec-pill) {
    border-color: var(--token-border-strong, rgba(0, 128, 128, 0.8));
    background:
        color-mix(
            in srgb,
            var(--surface-strong, #fff) 92%,
            var(--active-op-color, #008080) 8%
        );
    color: var(--ink-strong, var(--ink, #161c1d));
}

/* ==========================================================================
   6. Forms & Controls
   ========================================================================== */

:where(input[type="radio"], input[type="checkbox"], label.settings-option, .settings-option) {
    cursor: pointer;
    transition:
        background-color var(--spw-fold-duration) var(--spw-fold-ease),
        border-color var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(input[type="radio"]:hover, input[type="checkbox"]:hover) {
    outline: 1px solid var(--active-op-border, rgba(0, 128, 128, 0.34));
    outline-offset: 2px;
    border-radius: 2px;
}

:where(label.settings-option:hover, .settings-option:hover) {
    background: var(--op-frame-bg-soft, rgba(0, 128, 128, 0.06));
    color: var(--ink-strong, var(--ink, #161c1d));
}

:where(html[data-spw-color-mode="dark"]) :where(.operator-chip:hover, button:hover,
       input[type="button"]:hover, input[type="submit"]:hover),
:where(html[data-spw-color-mode="dark"]) :where(.spec-strip:hover .spec-pill),
:where(html[data-spw-color-mode="dark"]) :where(label.settings-option:hover, .settings-option:hover) {
    background:
        color-mix(
            in srgb,
            var(--surface-strong, rgba(18, 22, 28, 0.94)) 78%,
            var(--active-op-color, #7bd1d1) 22%
        );
    color: var(--ink-strong, rgba(245, 247, 250, 0.98));
}

@media (prefers-color-scheme: dark) {
    :where(html[data-spw-color-mode="auto"]) :where(.operator-chip:hover, button:hover,
           input[type="button"]:hover, input[type="submit"]:hover),
    :where(html[data-spw-color-mode="auto"]) :where(.spec-strip:hover .spec-pill),
    :where(html[data-spw-color-mode="auto"]) :where(label.settings-option:hover, .settings-option:hover) {
        background:
            color-mix(
                in srgb,
                var(--surface-strong, rgba(18, 22, 28, 0.94)) 78%,
                var(--active-op-color, #7bd1d1) 22%
            );
        color: var(--ink-strong, rgba(245, 247, 250, 0.98));
    }
}

/* ==========================================================================
   7. Typography & Navigation Indicators
   ========================================================================== */

:where(code) {
    font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
    font-size: 0.9em;
    background: var(--surface-code, #12171b);
    color: #f9e8bf; /* Accessible code literal fallback */
    padding: 0.15em 0.35em;
    border-radius: 4px;
}

:where(pre code) {
    padding: 0;
    background: transparent;
    color: inherit;
}

:where(a[href^="#"]::after) {
    content: none;
}

:where(nav a::after, .breadcrumb a::before) {
    content: '';
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--spw-fold-duration) var(--spw-fold-ease);
}

:where(nav a:hover::after, nav a[aria-current="page"]::after, .breadcrumb a:hover::before) {
    opacity: 0.7;
}

/* ==========================================================================
   8. Role Edges (Top-Border Context Hooks)
   ========================================================================== */

:where([data-spw-role="hub"], [data-spw-role="orientation"]) { --phase-color: var(--phase-initiation); }
:where([data-spw-role="category"], [data-spw-role="schema"]) { --phase-color: var(--phase-expression); }
:where([data-spw-role="reference"], [data-spw-role="projection"]) { --phase-color: var(--phase-return); }
:where([data-spw-role="control"], [data-spw-role="settings"]) { --phase-color: var(--phase-resistance); }

:where([data-spw-role])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 2px solid var(--phase-color, var(--active-op-border));
    opacity: 0.35;
    transition: opacity var(--spw-fold-duration) var(--spw-fold-ease);
}

:where([data-spw-role]:hover)::before {
    opacity: 0.65;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

:where(footer:not(.site-footer)) {
    position: relative;
    margin-top: var(--space-3xl, 4rem);
    padding: var(--space-xl, 2rem) 0;
    border-top: 1px solid var(--line, rgba(14, 18, 20, 0.14));
}

:where(footer:not(.site-footer)::before) {
    content: none;
}

:where(footer:not(.site-footer) p) {
    opacity: 0.75;
}

/* ==========================================================================
   10. Accessibility & Touch Constraints
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    :where(button, .operator-chip, label) {
        min-height: var(--touch-target-min, 2.75rem);
        display: flex;
        align-items: center;
    }
}
}

/* /public/css/ornament/relational-state.css */
@layer ornament {
/* ==========================================================================
   relational-state.css
   --------------------------------------------------------------------------
   Environmental effects driven by the State Orchestrator.
   Implements Attentional Cueing and Relational Resonance.
   ========================================================================== */

/* 1. Attentional Cueing (Environmental Dimming) */
:where(main:has(.site-frame[data-spw-attention="focused"])) .site-frame[data-spw-attention="dimmed"] {
  opacity: 0.45;
  filter: grayscale(0.4) contrast(0.9);
  transition:
    opacity var(--duration-deliberate) var(--ease-settle),
    filter var(--duration-deliberate) var(--ease-settle);
  pointer-events: none; /* Soft lockout to encourage focus */
}

:where(main:has(.site-frame[data-spw-attention="focused"])) .site-frame[data-spw-attention="dimmed"]:hover {
  opacity: 0.72;
  filter: grayscale(0.2) contrast(0.95);
  pointer-events: auto;
}

/* 2. Arrival Pulse (Genetic Animation) */
:where(.site-frame[data-state~="arrival"]) {
  animation: spw-arrival-flare 420ms var(--ease-reveal) both;
}

@keyframes spw-arrival-flare {
  0% {
    box-shadow: 0 0 0 0px var(--active-op-color);
    transform: scale(1);
  }

  40% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--active-op-color) 20%, transparent);
    transform: scale(1.002);
  }

  100% {
    box-shadow: 0 0 0 0px transparent;
    transform: scale(1);
  }
}

/* 3. Relational Resonance (Cross-Component Glow) */
:where(.site-frame[data-state~="active"]:has([data-state~="resolved"])) {
  --active-op-color: var(--teal);
  border-color: color-mix(in srgb, var(--active-op-color) 42%, transparent);
  box-shadow: var(--glow-soft);
}

/* 4. Global State Proxies */
:where(html[data-state~="preview"]) .budget-tier-card {
  opacity: 1 !important;
}

:where(html[data-state~="preview"]) .bhm-node-label {
  opacity: 1 !important;
}

:where(html[data-state~="preview"]) .svc-cta {
  display: flex !important;
}
}

/* /public/css/ornament/canvas-accents.css */
@layer ornament {
/* ==========================================================================
 * canvas-accents.css
 * --------------------------------------------------------------------------
 * Spw Canvas Accent Styles
 * Positions the generative canvases as background layers within
 * Spw components. Integrated with global semantic tokens and motion grammar.
 * ========================================================================== */

/* ─── Base Host & Canvas Configuration ──────────────────────────────────── */

:where(.spw-accent-host) {
    /* Debug / inspection */
    --spw-debug-layer-owner: "ornament";
    --spw-debug-layer-color: #b58900;

    /* Local tokens */
    --canvas-opacity: 0.6;
    --canvas-blend: multiply;

    /* Box */
    overflow: hidden !important;

    /* Layering / containment */
    position: relative;
    z-index: 1; /* Establishes local stacking context */
}

:where([data-spw-accent]) {
    /* Debug / inspection */
    --spw-debug-layer-owner: "ornament";
    --spw-debug-layer-color: #b58900;
}

:where(.spw-accent-host[data-spw-image-prominence="hero"]) {
    --canvas-opacity: 0.72;
}

:where(.spw-accent-host canvas) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: var(--canvas-opacity);
    mix-blend-mode: var(--canvas-blend);
    transition: opacity var(--duration-deliberate, 360ms) var(--ease-mechanical, ease);
}

/* Flow children sit above the canvas; explicit overlays own their own geometry. */
:where(.spw-accent-host > *:not(canvas):not([data-spw-overlay])) {
    position: relative;
    z-index: 2;
}

/* Hovering the host intensifies the accent via JS,
   but we add a CSS transition for smooth opacity swelling. */
:where(.spw-accent-host:hover canvas, .spw-accent-host:focus-within canvas) {
    opacity: calc(var(--canvas-opacity) + 0.2);
}

:where(.spw-accent-host[data-spw-salience-state="active"] canvas) {
    opacity: calc(var(--canvas-opacity) + 0.12);
}

/* ─── Wave / Vortex / Crystal Accent Variants ───────────────────────────── */
/* These use multiply on light, screen on dark for palette resonance */

:where([data-spw-accent="wave"] canvas, [data-spw-accent="vortex"] canvas) {
    --canvas-opacity: 0.55;
}

:where([data-spw-accent="crystal"] canvas) {
    --canvas-opacity: 0.42;
}

:where([data-spw-accent="resonance"]) {
    --canvas-opacity: calc(0.44 + (var(--spw-accent-strength, 0.86) * 0.18));
    --canvas-blend: soft-light;
}

:where([data-spw-accent="resonance"] canvas) {
    filter: saturate(1.08);
}

/* ─── Dark Mode & Color Scheme Logic ────────────────────────────────────── */

html[data-spw-color-mode="dark"] :where(.spw-accent-host) {
    --canvas-blend: screen;
    --canvas-opacity: 0.35;
}

html[data-spw-color-mode="dark"] :where([data-spw-accent="resonance"]) {
    --canvas-opacity: calc(0.3 + (var(--spw-accent-strength, 0.86) * 0.14));
}

@media (prefers-color-scheme: dark) {
    html[data-spw-color-mode="auto"] :where(.spw-accent-host) {
        --canvas-blend: screen;
        --canvas-opacity: 0.35;
    }
}

/* ─── Palette Adjustments ───────────────────────────────────────────────── */

/* Warm-palette accents tint slightly toward amber */
:where([data-spw-accent-palette="warm"] canvas) {
    filter: saturate(1.1) hue-rotate(-8deg);
}

/* Cool-palette accents tint slightly toward deep teal/blue */
:where([data-spw-accent-palette="cool"] canvas) {
    filter: saturate(1.05) hue-rotate(12deg);
}

/* ─── Motion & Accessibility Constraints ────────────────────────────────── */

/* Reduced motion: static snapshot, no animation, dimmed presence */
@media (prefers-reduced-motion: reduce) {
    :where(.spw-accent-host canvas) {
        animation: none !important;
        transition: none !important;
        opacity: calc(var(--canvas-opacity) * 0.4);
    }
}
}

/* /public/css/ornament/ornament.css */
@layer ornament {
/* ==========================================================================
   ornament.css
   --------------------------------------------------------------------------
   Purpose
   - Decorative and semi-semantic ornament built from site tokens.
   - This file acts as a concrete shadow of tokens/core.css: it turns token
     families into visible rails, seams, halos, sequences, ribbons, and
     ornamental hierarchies that can later be driven by JS.
   - Ornament should remain additive. It should not own primary layout.

   Design stance
   - Expose variables generously so routes and components can bias ornament.
   - Treat sibling and child relationships as part of the visible grammar.
   - Make it easy for JS to toggle states such as hover, charge, reveal,
     resonance, activation, sequencing, and staging.

   Suggested JS-facing attributes
   - [data-spw-ornament-state="idle|glowing|revealed|active|settled"]
   - [data-spw-ornament-density="low|medium|high"]
   - [data-spw-ornament-axis="inline|stack|radial"]
   - [data-spw-stage="entry|ground|exit"]
   - [data-spw-sequence-state="idle|playing|paused|complete"]
   - [data-spw-child-active="true"]
   - [data-spw-sibling-resonance="true"]
   ========================================================================== */

/* ==========================================================================
   1. Root ornament variables
   ========================================================================== */

:root {
  --ornament-font: var(--site-mono-font, "JetBrains Mono", monospace);

  --ornament-opacity-rest: 0.28;
  --ornament-opacity-hover: 0.62;
  --ornament-opacity-active: 0.88;
  --ornament-opacity-quiet: 0.18;

  --ornament-gap-1: 0.22rem;
  --ornament-gap-2: 0.3rem;
  --ornament-gap-3: 0.45rem;
  --ornament-gap-4: 0.7rem;

  --ornament-pad-1: 0.12rem;
  --ornament-pad-2: 0.24rem;
  --ornament-pad-3: 0.42rem;
  --ornament-pad-4: 0.6rem;

  --ornament-radius-tight: var(--shape-element, 0.22rem);
  --ornament-radius: var(--shape-component, 0.42rem);
  --ornament-radius-loose: var(--shape-surface, 0.7rem);
  --ornament-pill-radius: 999px;

  --ornament-line-width: 1px;
  --ornament-line-strong-width: 1.5px;
  --ornament-dash: 4px;
  --ornament-dash-gap: 4px;

  --ornament-duration-fast: var(--duration-fast, 120ms);
  --ornament-duration-base: var(--duration-base, 180ms);
  --ornament-duration-deliberate: var(--duration-deliberate, 320ms);

  --ornament-ease: var(--ease-mechanical, ease);
  --ornament-settle-ease: var(--brace-settle-ease, cubic-bezier(0.22, 0, 0.15, 1));

  --ornament-accent: var(--semantic-accent, var(--active-op-color, var(--teal)));
  /* These aliases prefer the new semantic accent tokens from core, falling back
     to the previous ornament logic. This improves the reference chain while
     maintaining backward compatibility for any existing local overrides. */
  --ornament-accent-secondary: var(--semantic-accent-secondary, var(--ornament-accent));
  --ornament-accent-subtle: var(--semantic-accent-subtle, color-mix(in srgb, var(--ornament-accent) 18%, var(--line, transparent)));
  --ornament-accent-emphasis: var(--semantic-accent-emphasis, var(--ornament-accent));

  --ornament-accent-soft:
    color-mix(in srgb, var(--ornament-accent) 18%, transparent);
  --ornament-line:
    color-mix(in srgb, var(--ornament-accent) 24%, var(--line, transparent));
  --ornament-line-quiet:
    color-mix(in srgb, var(--ornament-accent-subtle) 65%, transparent);
  --ornament-surface:
    color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.82)) 90%, transparent);
  --ornament-glow:
    0 0 0 1px color-mix(in srgb, var(--ornament-accent) 18%, transparent),
    0 2px 8px color-mix(in srgb, var(--ornament-accent) 8%, transparent);

  --ornament-sequence-font-size: 0.95rem;
  --ornament-sequence-letter-spacing: 0.1em;
  --ornament-sequence-gap: 0.3em;

  --ornament-rail-thickness: 2px;
  --ornament-rail-length: 2.4rem;
  --ornament-node-size: 0.36rem;
  --ornament-node-ring: 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);

  --ornament-stage-entry-opacity: 0.34;
  --ornament-stage-ground-opacity: 0.52;
  --ornament-stage-exit-opacity: 0.28;
}

/* ==========================================================================
   2. Shared ornament host
   --------------------------------------------------------------------------
   Anything ornamental can inherit from this host vocabulary.
   ========================================================================== */

:where(
  [data-spw-ornament-state],
  [data-spw-ornament-density],
  [data-spw-ornament-axis],
  .spw-ornament-host,
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-cluster,
  .spw-ornament-field,
  .spw-ornament-kicker,
  .spw-ornament-meter,
  .spw-ornament-braid,
  .spw-ornament-ladder,
  .spw-svg-figure .spw-ornament-rail,
  .spw-svg-figure .spw-ornament-ribbon,
  .spw-svg-figure .spw-ornament-kicker,
  .spw-svg-figure .spw-ornament-meter,
  .spw-svg-figure .spw-ornament-cluster,
  .spw-svg-figure .spw-ornament-field
) {
  /* Debug / inspection */
  --spw-debug-layer-owner: "ornament";
  --spw-debug-layer-color: #b58900;

  /* Local tokens — prefer the new field-visualization bridge when available */
  --ornament-local-accent: var(--ornament-accent);
  --ornament-local-line: var(--ornament-line);
  --ornament-local-surface: var(--ornament-surface);
  --ornament-svg-accent: var(--spw-svg-brand-accent, var(--ornament-accent));
  --ornament-svg-field: var(--spw-svg-brand-field, var(--ornament-surface));

  /* Field-driven ornament intensity (new canonical tokens) */
  --ornament-field-intensity: var(--ornament-field-intensity, var(--spw-field-intensity, 0));
  --ornament-collection-mark: var(--ornament-collection-mark, 0);
  --ornament-deviation-visibility: var(--ornament-deviation-visibility, 0);
  --ornament-wonder-trail: var(--ornament-wonder-trail, 0);
  --ornament-resonance: var(--ornament-resonance, var(--spw-resonance, 0));

  /* Balance semantics (field equilibrium) — prefer when expressing calm vs charged ornament */
  --ornament-field-balance: var(--field-balance, 0.5);

  /* Box */
  min-width: 0;

  /* Interaction */
  transition:
    opacity var(--ornament-duration-base) var(--ornament-ease),
    color var(--ornament-duration-fast) var(--ornament-ease),
    border-color var(--ornament-duration-base) var(--ornament-ease),
    box-shadow var(--ornament-duration-base) var(--ornament-settle-ease),
    transform var(--ornament-duration-fast) var(--ornament-settle-ease),
    background-color var(--ornament-duration-fast) var(--ornament-ease);

  /* Field-driven ornament (new tokens in action) */
  opacity: calc(var(--ornament-opacity-rest) + (var(--ornament-field-intensity) * 0.3));
  box-shadow: var(--ornament-glow),
    0 0 0 calc(1px * var(--ornament-resonance)) color-mix(in srgb, var(--ornament-accent) 22%, transparent);

  /* Layering / containment */
  position: relative;
}

/* Stage-aware ornament opacity can be inherited from container contexts. */
:where([data-spw-stage="entry"]) {
  --ornament-stage-opacity: var(--ornament-stage-entry-opacity);
}

:where([data-spw-stage="ground"]) {
  --ornament-stage-opacity: var(--ornament-stage-ground-opacity);
}

:where([data-spw-stage="exit"]) {
  --ornament-stage-opacity: var(--ornament-stage-exit-opacity);
}

/* ==========================================================================
   3. Spirit sequence display
   --------------------------------------------------------------------------
   This is the source component from your snippet, now expanded into a richer
   tokenized surface and a better JS target.
   ========================================================================== */

.spw-spirit-sequence {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ornament-sequence-gap);
  margin: 0.6rem 0 0;
  padding: 0;
  font-family: var(--ornament-font);
  font-size: var(--ornament-sequence-font-size);
  letter-spacing: var(--ornament-sequence-letter-spacing);
  opacity: var(--ornament-stage-opacity, var(--ornament-opacity-rest));
  user-select: none;
  -webkit-user-select: none;
  list-style: none;
  transition:
    opacity var(--ornament-duration-deliberate) var(--ornament-ease),
    filter var(--ornament-duration-base) var(--ornament-settle-ease),
    transform var(--ornament-duration-fast) var(--ornament-settle-ease);
}

.spw-spirit-sequence:hover,
.spw-spirit-sequence:focus-within {
  opacity: var(--ornament-opacity-hover);
}

.spw-spirit-sequence[data-spw-sequence-state="playing"] {
  opacity: var(--ornament-opacity-active);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ornament-accent) 14%, transparent));
}

.spw-spirit-sequence[data-spw-sequence-state="paused"] {
  opacity: 0.48;
}

.spw-spirit-sequence[data-spw-sequence-state="complete"] {
  opacity: 0.72;
}

.spw-spirit-sequence > * {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1ch;
}

/* Sibling seams reveal rhythm and ordering. */
.spw-spirit-sequence > * + *::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ornament-sequence-gap) / 2);
  top: 50%;
  width: calc(var(--ornament-sequence-gap) * 0.55);
  border-top: var(--ornament-line-width) dashed color-mix(in srgb, currentColor 22%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0.52;
}

.spw-spirit-sequence[data-spw-sibling-resonance="true"] > * + *::before {
  border-top-style: solid;
  opacity: 0.74;
}

/* Child nodes can become active independently through JS. */
.spw-spirit-sequence > [data-op] {
  padding-inline: 0.08em;
  border-radius: var(--ornament-radius-tight);
  transition:
    color var(--ornament-duration-fast) var(--ornament-ease),
    text-shadow var(--ornament-duration-base) var(--ornament-settle-ease),
    transform var(--ornament-duration-fast) var(--ornament-settle-ease),
    opacity var(--ornament-duration-fast) var(--ornament-ease);
}

.spw-spirit-sequence > [data-op][data-spw-child-active="true"] {
  transform: translateY(-1px);
  text-shadow: 0 0 8px color-mix(in srgb, currentColor 20%, transparent);
}

.spw-spirit-sequence > [data-op][data-spw-ornament-state="glowing"] {
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 28%, transparent);
}

.spw-spirit-sequence > [data-op="probe"]  { color: var(--op-probe-color); }
.spw-spirit-sequence > [data-op="ref"]    { color: var(--op-ref-color); }
.spw-spirit-sequence > [data-op="action"] { color: var(--op-action-color); }
.spw-spirit-sequence > [data-op="stream"] { color: var(--op-stream-color); }
.spw-spirit-sequence > [data-op="object"] { color: var(--op-object-color); }
.spw-spirit-sequence > [data-op="frame"]  { color: var(--op-frame-color); }
.spw-spirit-sequence > [data-op="surface"] { color: var(--op-surface-color, var(--teal)); }
.spw-spirit-sequence > [data-op="merge"] { color: var(--op-merge-color, var(--teal)); }
.spw-spirit-sequence > [data-op="meta"] { color: var(--op-meta-color, var(--ink-soft)); }
.spw-spirit-sequence > [data-op="pragma"] { color: var(--op-pragma-color, var(--ink-soft)); }

/* ==========================================================================
   4. Decorative operator rails
   --------------------------------------------------------------------------
   Concrete implementation of token hierarchy as a visible sequence or meter.
   ========================================================================== */

.spw-ornament-rail {
  display: inline-flex;
  align-items: center;
  gap: var(--ornament-gap-2);
  padding: var(--ornament-pad-2) var(--ornament-pad-3);
  border: var(--ornament-line-width) solid var(--ornament-local-line);
  border-radius: var(--ornament-radius-pill);
  background: var(--ornament-local-surface);
  color: var(--ornament-local-accent);
  font-family: var(--ornament-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.spw-ornament-rail::before,
.spw-ornament-rail::after {
  content: "";
  flex: 0 0 auto;
  width: var(--ornament-rail-length);
  border-top: var(--ornament-rail-thickness) solid color-mix(in srgb, currentColor 24%, transparent);
  opacity: 0.42;
}

.spw-ornament-rail[data-spw-ornament-axis="stack"] {
  flex-direction: column;
  align-items: flex-start;
}

.spw-ornament-rail[data-spw-ornament-axis="stack"]::before,
.spw-ornament-rail[data-spw-ornament-axis="stack"]::after {
  width: 0;
  height: 1rem;
  border-top: none;
  border-left: var(--ornament-rail-thickness) solid color-mix(in srgb, currentColor 24%, transparent);
}

.spw-ornament-rail > .spw-ornament-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 0.1rem;
}

.spw-ornament-rail > .spw-ornament-node::before {
  content: "";
  width: var(--ornament-node-size);
  height: var(--ornament-node-size);
  border-radius: 999px;
  background: currentColor;
  box-shadow: var(--ornament-node-ring);
  opacity: 0.72;
}

.spw-ornament-rail > .spw-ornament-node[data-spw-child-active="true"]::before {
  opacity: 1;
  transform: scale(1.18);
}

/* ==========================================================================
   5. Ornament ribbons and kickers
   --------------------------------------------------------------------------
   Useful for frame toplines, captions, cards, and route descriptors.
   ========================================================================== */

.spw-ornament-ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--ornament-gap-2);
  max-width: 100%;
  padding: var(--ornament-pad-1) var(--ornament-pad-3);
  border: 1px solid var(--ornament-local-line);
  border-radius: var(--ornament-radius-pill);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ornament-local-accent) 8%, transparent),
      transparent 48%
    ),
    var(--ornament-local-surface);
  color: var(--ornament-local-accent);
  font-family: var(--ornament-font);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spw-ornament-ribbon[data-spw-ornament-state="active"] {
  box-shadow: var(--ornament-glow);
}

.spw-ornament-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: color-mix(in srgb, var(--ornament-local-accent) 76%, var(--ink-soft));
  font-family: var(--ornament-font);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: var(--ornament-opacity-rest);
}

/* Example of using the new semantic accent aliases for different visual weights */
.spw-ornament-kicker[data-accent="secondary"] {
  color: color-mix(in srgb, var(--ornament-accent-secondary) 70%, var(--ink-soft));
}

.spw-ornament-kicker[data-accent="subtle"] {
  color: color-mix(in srgb, var(--ornament-accent-subtle) 80%, var(--ink-soft));
  opacity: 0.7;
}

.spw-ornament-kicker::before {
  content: "";
  width: 0.85rem;
  border-top: 1px solid color-mix(in srgb, currentColor 36%, transparent);
}

/* ==========================================================================
   6. Ladders, braids, and dimensional grouping
   --------------------------------------------------------------------------
   These are ornamental implementations of hierarchy and sibling relations.
   ========================================================================== */

.spw-ornament-ladder {
  display: grid;
  gap: var(--ornament-gap-2);
}

.spw-ornament-ladder > * {
  position: relative;
  padding-left: calc(var(--ornament-pad-3) + 0.55rem);
}

.spw-ornament-ladder > *::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.15rem;
  bottom: 0.15rem;
  width: var(--ornament-rail-thickness);
  background: color-mix(in srgb, var(--ornament-accent) 18%, transparent);
  border-radius: 999px;
}

.spw-ornament-ladder > *::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 50%;
  width: 0.7rem;
  border-top: 1px dashed color-mix(in srgb, var(--ornament-accent) 20%, transparent);
  transform: translateY(-50%);
}

.spw-ornament-ladder > * + * {
  margin-top: -0.08rem;
}

.spw-ornament-braid {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.spw-ornament-braid > * {
  position: relative;
  padding-inline: 0.42rem;
}

.spw-ornament-braid > * + * {
  margin-left: -0.08rem;
}

.spw-ornament-braid > * + *::before {
  content: "⋯";
  position: absolute;
  left: -0.18rem;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, currentColor 24%, transparent);
  font-family: var(--ornament-font);
  font-size: 0.68em;
}

/* ==========================================================================
   7. Ornament field and cluster containers
   --------------------------------------------------------------------------
   Dimensional hierarchy and concrete token application.
   ========================================================================== */

.spw-ornament-field {
  display: grid;
  gap: var(--ornament-gap-4);
  padding: var(--ornament-pad-4);
  border: 1px solid color-mix(in srgb, var(--ornament-accent) 12%, transparent);
  border-radius: var(--ornament-radius-loose);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ornament-accent) 4%, transparent),
      transparent 52%
    );
}

.spw-ornament-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ornament-gap-2);
  align-items: center;
  padding: var(--ornament-pad-2) var(--ornament-pad-3);
  border: 1px dashed color-mix(in srgb, var(--ornament-accent) 18%, transparent);
  border-radius: var(--ornament-radius);
  background: color-mix(in srgb, var(--surface-soft, #fff) 88%, transparent);
}

.spw-ornament-cluster > * + * {
  margin-left: 0;
}

.spw-ornament-cluster[data-spw-ornament-density="high"] {
  gap: var(--ornament-gap-1);
}

.spw-svg-figure .spw-ornament-rail,
.spw-svg-figure .spw-ornament-ribbon,
.spw-svg-figure .spw-ornament-kicker,
.spw-svg-figure .spw-ornament-meter {
  --ornament-local-accent: var(--ornament-svg-accent);
  --ornament-local-line: color-mix(in srgb, var(--ornament-svg-accent) 22%, transparent);
  --ornament-local-surface: color-mix(in srgb, var(--ornament-svg-field) 88%, transparent);
}

.spw-svg-figure .spw-ornament-cluster,
.spw-svg-figure .spw-ornament-field {
  --ornament-local-accent: var(--ornament-svg-accent);
  --ornament-local-line: color-mix(in srgb, var(--ornament-svg-accent) 18%, transparent);
  --ornament-local-surface: color-mix(in srgb, var(--ornament-svg-field) 92%, transparent);
}

.spw-svg-figure .spw-ornament-rail,
.spw-svg-figure .spw-ornament-ribbon,
.spw-svg-figure .spw-ornament-kicker {
  font-size: 0.7rem;
}

/* ==========================================================================
   8. Decorative meters
   --------------------------------------------------------------------------
   Good for progress, semantic charge, reveal, or copy-generation guidance.
   ========================================================================== */

.spw-ornament-meter {
  --ornament-meter-fill: 0.38;
  display: inline-grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: var(--ornament-gap-2);
  min-width: 0;
  font-family: var(--ornament-font);
  font-size: 0.68rem;
  color: var(--ornament-local-accent);
}

.spw-ornament-meter__track {
  position: relative;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ornament-local-accent) 10%, transparent);
  overflow: hidden;
}

.spw-ornament-meter__track::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--ornament-meter-fill) * 100%);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ornament-local-accent) 58%, transparent),
      color-mix(in srgb, var(--ornament-local-accent) 82%, transparent)
    );
  border-radius: inherit;
  transition:
    width var(--ornament-duration-deliberate) var(--ornament-settle-ease),
    background-color var(--ornament-duration-base) var(--ornament-ease);
}

.spw-ornament-meter[data-spw-ornament-state="active"] .spw-ornament-meter__track::before {
  box-shadow: 0 0 12px color-mix(in srgb, var(--ornament-local-accent) 18%, transparent);
}

/* ==========================================================================
   9. Operator-aware ornament bias
   --------------------------------------------------------------------------
   Ornament should inherit the semantic physics of the operator palette.
   ========================================================================== */

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-kicker,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-operator] {
  --ornament-local-accent: var(--spw-operator-color, var(--ornament-accent));
  --ornament-local-line:
    color-mix(in srgb, var(--spw-operator-border, var(--ornament-line)) 92%, transparent);
  --ornament-local-surface:
    color-mix(in srgb, var(--spw-operator-bg-soft, var(--ornament-surface)) 76%, transparent);
}

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-kicker,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-substrate] {
  --ornament-local-accent: var(--spw-substrate-color, var(--ornament-accent));
  --ornament-local-line:
    color-mix(in srgb, var(--spw-substrate-border, var(--ornament-line)) 92%, transparent);
  --ornament-local-surface:
    color-mix(in srgb, var(--spw-substrate-bg-soft, var(--ornament-surface)) 76%, transparent);
}

/* ==========================================================================
   10. Role and stance integration
   --------------------------------------------------------------------------
   Lets ornament echo room semantics without owning layout.
   ========================================================================== */

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-role-cluster="reference"] {
  --ornament-local-accent: var(--op-ref-color);
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-role-cluster="schema"] {
  --ornament-local-accent: var(--op-object-color);
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-role-cluster="probe"] {
  --ornament-local-accent: var(--op-probe-color);
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-role-cluster="surface"] {
  --ornament-local-accent: var(--op-surface-color, var(--teal));
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-role-cluster="pragma"] {
  --ornament-local-accent: var(--op-pragma-color, var(--ink-soft));
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-stance="entry"] {
  opacity: var(--ornament-stage-entry-opacity);
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-stance="ground"] {
  opacity: var(--ornament-stage-ground-opacity);
}

:where(.spw-ornament-host, .spw-ornament-ribbon, .spw-ornament-kicker)[data-spw-stance="exit"] {
  opacity: var(--ornament-stage-exit-opacity);
}

/* ==========================================================================
   11. Pseudo-element examples for semantic scaffolding
   --------------------------------------------------------------------------
   These are decorative, but teach good CSS by example.
   ========================================================================== */

.spw-ornament-host[data-spw-ornament-state="revealed"]::before {
  content: "";
  position: absolute;
  inset: 0.18rem;
  border: 1px solid color-mix(in srgb, var(--ornament-local-accent) 16%, transparent);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.82;
}

.spw-ornament-host[data-spw-ornament-state="active"]::after {
  content: "";
  position: absolute;
  inset: auto 0.42rem 0.22rem 0.42rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--ornament-local-accent) 34%, transparent);
  pointer-events: none;
  opacity: 0.92;
}

/* Child and sibling resonance examples. */
.spw-ornament-cluster[data-spw-sibling-resonance="true"] > * {
  opacity: 0.92;
}

.spw-ornament-cluster[data-spw-sibling-resonance="true"] > * + *::before {
  content: "·";
  margin-right: 0.28rem;
  color: color-mix(in srgb, currentColor 24%, transparent);
}

.spw-ornament-field[data-spw-child-active="true"] > .spw-ornament-cluster {
  box-shadow: var(--ornament-glow);
}

:where(
  .frame-card,
  .frame-panel,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .compare-card,
  .ref-card
) :where(.spw-ornament-kicker, .spw-ornament-ribbon, .spw-ornament-meter) {
  opacity: var(--component-card-detail-opacity, 0.86);
  transform: translateY(calc(var(--component-card-detail-shift, 0) * 1px));
}

:where(
  .frame-card,
  .frame-panel,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .compare-card,
  .ref-card
):is(:hover, :focus-within, [data-spw-card-state="expanded"], [data-spw-gesture="charging"]) :where(.spw-ornament-kicker, .spw-ornament-ribbon, .spw-ornament-meter) {
  opacity: 1;
  transform: translateY(0);
}

@media (pointer: coarse) {
  :where(
    .frame-card,
    .frame-panel,
    .media-card,
    .media-focus-card,
    .software-card,
    .operator-card,
    .plan-card,
    .compare-card,
    .ref-card
  ) :where(.spw-ornament-kicker, .spw-ornament-ribbon, .spw-ornament-meter) {
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   12. Integration with existing site components
   --------------------------------------------------------------------------
   These rules let ornament softly attach to known nouns from the site.
   ========================================================================== */

:where(.frame-topline, .frame-heading) > .spw-spirit-sequence {
  margin-top: 0;
  margin-left: auto;
  align-self: center;
}

:where(.site-frame, .frame-panel, .frame-card, .mode-panel) > .spw-ornament-kicker:first-child {
  margin-top: -0.1rem;
}

:where(.spw-component-meta, .spec-strip, .frame-operators) > .spw-ornament-ribbon {
  max-width: 100%;
}

:where(.spw-component-meta) > .spw-ornament-meter {
  width: min(14rem, 100%);
}

:where(.spw-component-meta) > .spw-ornament-meter .spw-ornament-meter__track {
  min-width: 4.5rem;
}

:where(.spw-spell-path) + .spw-ornament-kicker {
  margin-top: -0.2rem;
}

:where(.frame-metrics-bar) > .spw-ornament-ribbon {
  font-size: 0.62rem;
}

/* ==========================================================================
   13. Interactive hints for JS
   --------------------------------------------------------------------------
   This is intentionally declarative: JS can toggle these attributes and the
   ornament will visibly explain the state transition.
   ========================================================================== */

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-ornament-state="glowing"] {
  box-shadow: var(--ornament-glow);
}

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-ornament-state="settled"] {
  opacity: 0.74;
}

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-ornament-state="active"] {
  opacity: var(--ornament-opacity-active);
  transform: translateY(-1px);
}

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-ornament-density="low"] {
  --ornament-gap-2: 0.22rem;
  --ornament-pad-2: 0.16rem;
}

:where(
  .spw-spirit-sequence,
  .spw-ornament-rail,
  .spw-ornament-ribbon,
  .spw-ornament-meter,
  .spw-ornament-cluster,
  .spw-ornament-field
)[data-spw-ornament-density="high"] {
  --ornament-gap-2: 0.42rem;
  --ornament-pad-2: 0.3rem;
  --ornament-opacity-rest: 0.38;
}

/* ==========================================================================
   14. Responsive adjustments
   ========================================================================== */

@container (max-width: 34rem) {
  .spw-ornament-rail {
    max-width: 100%;
  }

  .spw-ornament-rail::before,
  .spw-ornament-rail::after {
    width: 1.3rem;
  }

  .spw-spirit-sequence {
    --ornament-sequence-font-size: 0.84rem;
    --ornament-sequence-gap: 0.22em;
  }

  .spw-ornament-meter {
    grid-template-columns: auto 1fr;
  }

  .spw-ornament-meter > :last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(
    .spw-ornament-host,
    .spw-spirit-sequence,
    .spw-ornament-rail,
    .spw-ornament-ribbon,
    .spw-ornament-cluster,
    .spw-ornament-field,
    .spw-ornament-kicker,
    .spw-ornament-meter,
    .spw-ornament-braid,
    .spw-ornament-ladder,
    .spw-ornament-meter__track::before
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   N. Reserved ornament vocabulary
   --------------------------------------------------------------------------
   These selectors are the concrete shadow of the ornament contract
   (ornament-contract.spw). Each visual form is reserved for a single
   semantic meaning so that the grammar stays diagnosable:

     color_wash     → field intensity / resonance
     corner_dot     → explicit collection state
     border_shift   → deviation from authored default
     accent_bar     → region-level field intensity gradient
     opacity_pulse  → just-collected signal
     stable_accent  → persistent collected state (paired with corner_dot)
     fade_trail     → wonder trail (session attention history)

   An element opts in via data attributes or utility classes; writing the
   runtime attribute alone is enough to activate the ornament.
   ========================================================================== */

:where(.ornament-color-wash, [data-spw-ornament~='color-wash']) {
  position: relative;
}

:where(.ornament-color-wash, [data-spw-ornament~='color-wash'])::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: color-mix(
    in srgb,
    var(--wonder-accent-color, transparent)
      calc(var(--spw-field-intensity, 0) * 24%),
    transparent
  );
  opacity: var(--spw-field-intensity, 0);
  transition: opacity var(--ornament-duration-base, 180ms) var(--ornament-ease, ease),
    background-color var(--ornament-duration-base, 180ms) var(--ornament-ease, ease);
}

:where([data-spw-collected='true']) {
  --ornament-collection-dot-size: 0.42rem;
}

:where([data-spw-collection-intention='study']) {
  --spw-collection-intention-color: var(--op-probe-color, #4a2180);
}

:where([data-spw-collection-intention='revisit']) {
  --spw-collection-intention-color: var(--op-topic-color, #2f8f6b);
}

:where([data-spw-collection-intention='build']) {
  --spw-collection-intention-color: var(--op-action-color, #005959);
}

:where([data-spw-collection-intention='refer']) {
  --spw-collection-intention-color: var(--op-ref-color, #1d57a3);
}

:where([data-spw-collection-intention='support']) {
  --spw-collection-intention-color: var(--op-object-color, #bd7f23);
}

:where(.ornament-corner-dot, [data-spw-ornament~='corner-dot'], [data-spw-collected='true']) {
  position: relative;
}

:where(
  .ornament-corner-dot,
  [data-spw-ornament~='corner-dot'],
  [data-spw-collected='true']
)::before {
  content: '';
  position: absolute;
  top: calc(var(--ornament-pad-1, 0.12rem) * -1);
  right: calc(var(--ornament-pad-1, 0.12rem) * -1);
  width: var(--ornament-collection-dot-size, 0.38rem);
  height: var(--ornament-collection-dot-size, 0.38rem);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--spw-collection-intention-color, var(--wonder-accent-color, currentColor)) 70%,
    var(--delight-color, currentColor)
  );
  opacity: calc(0.55 + var(--spw-collection-strength, 0.6) * 0.45);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #2a2a2a) 14%, transparent);
  pointer-events: none;
}

:where([data-spw-collected='false'], [data-spw-collected=''])::before {
  display: none;
}

:where(.ornament-border-shift, [data-spw-ornament~='border-shift'], [data-spw-deviation='true']) {
  border-color: color-mix(
    in srgb,
    var(--wonder-accent-color, currentColor) 48%,
    var(--line, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(
    in srgb,
    var(--wonder-accent-color, currentColor) 18%,
    transparent
  );
}

:where(.ornament-accent-bar, [data-spw-ornament~='accent-bar']) {
  position: relative;
}

:where(.ornament-accent-bar, [data-spw-ornament~='accent-bar'])::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ornament-line-strong-width, 1.5px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(
      in srgb,
      var(--wonder-accent-color, currentColor)
        calc(var(--spw-region-field-intensity, 0) * 80%),
      transparent
    ) 50%,
    transparent 100%
  );
  opacity: calc(0.35 + var(--spw-region-field-intensity, 0) * 0.55);
  border-radius: inherit;
  pointer-events: none;
}

@keyframes spw-ornament-opacity-pulse {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

:where(.ornament-opacity-pulse, [data-spw-ornament~='opacity-pulse']) {
  position: relative;
}

:where(.ornament-opacity-pulse, [data-spw-ornament~='opacity-pulse'])::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: color-mix(
    in srgb,
    var(--wonder-accent-color, currentColor) 24%,
    transparent
  );
  animation: spw-ornament-opacity-pulse var(--ornament-duration-deliberate, 320ms)
    var(--ornament-settle-ease, ease-out) 1;
}

:where(.ornament-stable-accent, [data-spw-ornament~='stable-accent']) {
  color: color-mix(
    in srgb,
    var(--wonder-accent-color, currentColor)
      calc(40% + var(--spw-collection-strength, 0.6) * 25%),
    currentColor
  );
}

:where(.ornament-fade-trail, [data-spw-ornament~='fade-trail'], [data-spw-wonder-state='resonant'] a:visited) {
  text-decoration-color: color-mix(
    in srgb,
    var(--spw-wonder-memory-color, var(--wonder-accent-color, currentColor))
      calc(30% + var(--spw-field-intensity, 0) * 40%),
    transparent
  );
}

/* Interaction-context ornament intensity — these read the canonical
   data-spw-interaction-context value established in page-model.spw. */
:where([data-spw-interaction-context='reading'])   { --spw-field-intensity: 0.12; }
:where([data-spw-interaction-context='browsing'])  { --spw-field-intensity: 0.28; }
:where([data-spw-interaction-context='inspecting']) { --spw-field-intensity: 0.6; }
:where([data-spw-interaction-context='collecting']) { --spw-field-intensity: 0.88; }
:where([data-spw-interaction-context='comparing'])  { --spw-field-intensity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  :where(.ornament-opacity-pulse, [data-spw-ornament~='opacity-pulse'])::after {
    animation: none;
    opacity: 0;
  }
}

/* ==========================================================================
   Runtime layer influence on ornament (architectural + computational)
   ========================================================================== */

/* Enhancement presence makes ornament more responsive and "field-aware" */
:root[data-spw-active-layers~="enhancement"] :where(
  .spw-ornament-host,
  [data-spw-ornament]
) {
  --ornament-field-intensity: var(--spw-runtime-enhancement-intensity, 0.85);
  --ornament-resonance: calc(var(--spw-runtime-enhancement-intensity, 0.85) * 0.65);
}

/* Feature activity increases wonder-trail and potential */
:root[data-spw-active-layers~="feature"] :where(
  .spw-ornament-host,
  [data-spw-ornament]
) {
  --ornament-wonder-trail: calc(var(--spw-runtime-feature-intensity, 0.7) * 0.85);
}

/* Early/core-only phase: keep ornament restrained and fast */
:root[data-spw-active-layers="core"] :where(
  .spw-ornament-host,
  [data-spw-ornament]
) {
  --ornament-field-intensity: 0.22;
  transition-duration: 60ms;
}

/* ==========================================================================
   Site rhythm ornament
   --------------------------------------------------------------------------
   Visual projection of runtime load + activity cadence.
   Uses the existing rail / meter / node / sequence primitives so the
   visual language stays consistent with the rest of the ornament system.

   Driven by:
   - --spw-site-rhythm-tempo (higher = livelier / faster pulse)
   - --spw-site-rhythm-density (more nodes / stronger presence)
   - data-spw-site-rhythm + the pre-existing runtime layer tokens

   Placement: author-controlled. Can be a small persistent chrome element,
   a floating minimal handle (mobile-friendly, following spw-section-handle
   patterns), or inside any [data-spw-feature] region. Works on desktop
   and narrow screens by default (small footprint, inherits shell tokens).

   No new JS module required — the tokens are written by the central
   runtime state sync that already powers the other visual intensities.
   ========================================================================== */

.spw-site-rhythm,
[data-spw-ornament="site-rhythm"] {
  --rhythm-tempo: var(--spw-site-rhythm-tempo, 1);
  --rhythm-density: var(--spw-site-rhythm-density, 0.8);

  display: inline-flex;
  align-items: center;
  gap: var(--ornament-gap-1);
  padding: var(--ornament-pad-1) var(--ornament-pad-2);
  font-family: var(--ornament-font);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--ornament-local-accent, var(--ornament-accent));
  opacity: calc(0.35 + (var(--rhythm-density) * 0.35));
  transition: opacity var(--ornament-duration-base) var(--ornament-ease);
}

/* The rhythm rail itself — a living meter whose "playhead" speed and
   node activation reflect current site activity / recent load rhythm. */
.spw-site-rhythm__rail {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 0.32rem;
  min-width: 3.8rem;
  padding-inline: 0.18rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  overflow: hidden;
}

/* Animated nodes inside the rail. Number and speed driven by the runtime tokens. */
.spw-site-rhythm__node {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  margin-inline: 0.08rem;
  animation: spw-site-rhythm-pulse calc(820ms / var(--rhythm-tempo)) var(--ornament-settle-ease) infinite alternate;
  animation-play-state: var(--spw-site-rhythm, running);
}

.spw-site-rhythm[data-spw-site-rhythm="quiet"] .spw-site-rhythm__node,
[data-spw-ornament="site-rhythm"][data-spw-site-rhythm="quiet"] .spw-site-rhythm__node {
  animation-duration: calc(1450ms / var(--rhythm-tempo));
  opacity: 0.38;
}

.spw-site-rhythm__node:nth-child(2) { animation-delay: calc(-120ms / var(--rhythm-tempo)); }
.spw-site-rhythm__node:nth-child(3) { animation-delay: calc(-260ms / var(--rhythm-tempo)); }

@keyframes spw-site-rhythm-pulse {
  from { opacity: 0.32; transform: scale(0.82); }
  to   { opacity: 0.92; transform: scale(1.05); }
}

/* When the runtime reports high layer activity or recent enhancement work,
   the whole rhythm ornament becomes more present (still subtle). */
:root[data-spw-active-layers~="enhancement"] .spw-site-rhythm,
[data-spw-ornament="site-rhythm"][data-spw-active-layers~="enhancement"] {
  opacity: calc(0.48 + (var(--rhythm-density) * 0.38));
}

/* Compact form for tight chrome or mobile handles */
.spw-site-rhythm[data-compact],
[data-spw-ornament="site-rhythm"][data-compact] {
  font-size: 0.5rem;
  min-width: 2.6rem;
}

.spw-site-rhythm[data-compact] .spw-site-rhythm__rail {
  min-width: 2.4rem;
  height: 0.26rem;
}

/* RPG Mode is injected after route content and uses ordinary spec pills.
   Keep those pills readable when global ornament color-mode rules make
   surface and text tokens converge. */
:where(body[data-spw-surface="rpg-wednesday"] .rpg-mode-widget .spec-pill) {
  border-color: color-mix(in srgb, var(--rpg-accent, #5d9367) 34%, rgba(18, 24, 28, 0.16));
  background: color-mix(in srgb, #f4efe5 88%, var(--rpg-accent, #5d9367) 12%);
  color: #18211f;
}

:where(html[data-spw-color-mode="dark"] body[data-spw-surface="rpg-wednesday"] .rpg-mode-widget .spec-pill) {
  border-color: color-mix(in srgb, var(--rpg-accent, #5d9367) 42%, rgba(244, 239, 229, 0.24));
  background: color-mix(in srgb, #f4efe5 84%, var(--rpg-accent, #5d9367) 16%);
  color: #121816;
}

/* RPG syntax-list labels sit inside operator-enabled pages, so later
   operator/effect projections flatten them back into inline handles.
   This final ornament pass restores their local "step chip" hierarchy
   without changing the shared syntax-token contract elsewhere. */
:where(body[data-spw-surface="rpg-wednesday"] .syntax-list .syntax-token) {
  justify-self: start;
  padding-block: 0.12rem;
  padding-inline: 0.36rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--rpg-accent, var(--active-op-color, #4bcedd)) 13%, transparent);
  color: color-mix(in srgb, var(--rpg-accent, var(--active-op-color, #4bcedd)) 72%, var(--ink, #eae4dc) 28%);
  text-decoration-color: color-mix(in srgb, var(--rpg-accent, var(--active-op-color, #4bcedd)) 44%, transparent);
}
}