/* demo bundle — generated by build-demo-bundles.mjs; do not hand-edit */
@layer reset, tokens, shell, typography, grammar, components, systems, routes, handles, effects, ornament;

/* /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/circuit-anatomy.css */
@layer effects {
/* ==========================================================================
   circuit-anatomy.css
   --------------------------------------------------------------------------
   Opt-in electrical component anatomy for frames and cards.
   ========================================================================== */

html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role]) {
  --spw-circuit-color: var(--active-op-color, var(--semantic-accent, #008080));
  --spw-circuit-line: color-mix(in srgb, var(--spw-circuit-color) 28%, var(--line, rgba(14, 18, 20, 0.14)) 72%);
  --spw-circuit-wash: color-mix(in srgb, var(--spw-circuit-color) 7%, transparent);
  position: relative;
  isolation: isolate;
}

html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role])::after {
  content: "";
  position: absolute;
  inset: 0.62rem auto 0.62rem 0;
  z-index: -1;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--spw-circuit-line), transparent);
  opacity: 0.68;
  pointer-events: none;
}

html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role="resistor"]) {
  --spw-circuit-color: var(--op-object-color, #a67c00);
  background-image:
    linear-gradient(135deg, var(--spw-circuit-wash) 0 10%, transparent 10% 24%),
    var(--component-background-image, none);
  background-size: 0.82rem 0.82rem, auto;
}

html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role="capacitor"]) {
  --spw-circuit-color: var(--op-ref-color, #355f77);
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--spw-circuit-color) 28%, transparent),
    inset -4px 0 0 color-mix(in srgb, var(--spw-circuit-color) 12%, transparent),
    var(--spw-local-shadow, none);
}

html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role="inductor"]) {
  --spw-circuit-color: var(--op-frame-color, #008080);
  background-image:
    radial-gradient(circle at 0.4rem 50%, var(--spw-circuit-wash) 0 0.28rem, transparent 0.3rem),
    var(--component-background-image, none);
  background-size: 1.1rem 100%, auto;
}

html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role="transformer"]) {
  --spw-circuit-color: var(--op-probe-color, #4a2180);
  border-color: color-mix(in srgb, var(--spw-circuit-color) 30%, var(--line, rgba(14, 18, 20, 0.14)) 70%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-circuit-color) 10%, transparent),
    0 0.6rem 1.5rem color-mix(in srgb, var(--spw-circuit-color) 7%, transparent),
    var(--spw-local-shadow, none);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-spw-features~="circuit-anatomy"] :where([data-spw-circuit-role]:is(:hover, :focus-within))::after {
    animation: spw-arc-residue 720ms ease-out both;
  }
}

}

/* /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-curiosity-color:
    color-mix(in srgb, var(--op-probe-color, #8f5cff) 70%, var(--amber, #ffbf00));
  --spw-relationship-color:
    color-mix(in srgb, var(--op-ref-color, #2f6fba) 64%, var(--op-topic-color, #2e9f7f));
  --spw-architecture-color:
    color-mix(in srgb, var(--op-frame-color, #008080) 62%, var(--op-object-color, #c2872b));
  --spw-curiosity-reward: 0;
  --spw-relationship-reward: 0;
  --spw-architecture-reward: 0;
  --spw-conceptual-nuance: 0;

  --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],
  [data-spw-accent-concept],
  [data-spw-visual-cues],
  [data-spw-region-role]
) {
  /* 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. Conceptual color rewards
   --------------------------------------------------------------------------
   Curiosity, relationship, and architecture states are projected by the
   charge-field runtime and by local semantic attributes. This keeps color
   responsive to what the visitor is exploring rather than only to route theme.
   ========================================================================== */

html[data-spw-concept-relation="curiosity"],
html[data-spw-interaction-wonder="curiosity"] {
  --wonder-accent-color: var(--spw-curiosity-color);
}

html[data-spw-concept-relation="relationship"],
html[data-spw-interaction-wonder="relationship"] {
  --wonder-accent-color: var(--spw-relationship-color);
}

html[data-spw-concept-relation="architecture"],
html[data-spw-interaction-wonder="architecture"] {
  --wonder-accent-color: var(--spw-architecture-color);
}

:where(
  [data-spw-operator="wonder"],
  [data-spw-operator="probe"],
  [data-spw-operator="action"],
  [data-spw-accent-concept],
  [data-spw-visual-cues]
) {
  --spw-reward-color: var(--spw-curiosity-color);
}

:where(
  [data-spw-operator="ref"],
  [data-spw-operator="route"],
  [data-spw-operator="stream"],
  [data-spw-operator="surface"],
  main [data-spw-related-routes],
  main [data-spw-route-link],
  main [data-spw-route-family]
) {
  --spw-reward-color: var(--spw-relationship-color);
}

:where(
  [data-spw-operator="frame"],
  [data-spw-operator="address"],
  [data-spw-operator="object"],
  [data-spw-operator="integration"],
  main [data-spw-region-role],
  main [data-spw-component-kind],
  main [data-spw-kind="frame"],
  main [data-spw-kind="surface"]
) {
  --spw-reward-color: var(--spw-architecture-color);
}

:where(
  main [data-spw-feature],
  main [data-spw-region-role],
  main [data-spw-component-kind],
  main [data-spw-accent-concept],
  main [data-spw-visual-cues],
  .operator-chip,
  .frame-sigil,
  .spw-component-tag,
  .spw-guide-chip
) {
  transition:
    background-color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    border-color var(--spw-wonder-duration-base) var(--spw-wonder-ease-mechanical),
    box-shadow 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);
}

:where(
  main [data-spw-feature],
  main [data-spw-region-role],
  main [data-spw-component-kind],
  main [data-spw-accent-concept],
  main [data-spw-visual-cues],
  .operator-chip,
  .frame-sigil,
  .spw-component-tag,
  .spw-guide-chip
):is(:hover, :focus-within, :focus-visible) {
  border-color:
    color-mix(in srgb, var(--spw-reward-color, var(--wonder-accent-color)) 34%, var(--line, transparent));
  background-color:
    color-mix(in srgb, var(--spw-reward-color, var(--wonder-accent-color)) 9%, transparent);
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-reward-color, var(--wonder-accent-color)) 18%, transparent),
    0 10px 24px color-mix(in srgb, var(--spw-reward-color, var(--wonder-accent-color)) 9%, transparent);
}

:where(
  main [data-spw-feature],
  main [data-spw-region-role],
  main [data-spw-component-kind],
  main [data-spw-accent-concept],
  main [data-spw-visual-cues]
):is(:hover, :focus-within) {
  --spw-local-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spw-reward-color, var(--wonder-accent-color)) 10%, transparent);
}

:where(html[data-spw-concept-relation="curiosity"]) :where(
  main [data-spw-accent-concept],
  main [data-spw-visual-cues],
  .operator-chip[data-spw-operator="probe"],
  .operator-chip[data-spw-operator="wonder"]
) {
  --spw-reward-color: var(--spw-curiosity-color);
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-curiosity-color) 10%, transparent),
    0 0 18px color-mix(in srgb, var(--spw-curiosity-color) calc(var(--spw-curiosity-reward, 0) * 14%), transparent);
}

:where(html[data-spw-concept-relation="relationship"]) :where(
  main [data-spw-related-routes],
  main [data-spw-feature],
  .operator-chip[data-spw-operator="ref"],
  .operator-chip[data-spw-operator="route"]
) {
  --spw-reward-color: var(--spw-relationship-color);
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-relationship-color) 10%, transparent),
    0 0 18px color-mix(in srgb, var(--spw-relationship-color) calc(var(--spw-relationship-reward, 0) * 14%), transparent);
}

:where(html[data-spw-concept-relation="architecture"]) :where(
  main [data-spw-region-role],
  main [data-spw-component-kind],
  .operator-chip[data-spw-operator="frame"],
  .operator-chip[data-spw-operator="address"],
  .operator-chip[data-spw-operator="object"]
) {
  --spw-reward-color: var(--spw-architecture-color);
  box-shadow:
    var(--spw-local-shadow, none),
    0 0 0 1px color-mix(in srgb, var(--spw-architecture-color) 10%, transparent),
    0 0 18px color-mix(in srgb, var(--spw-architecture-color) calc(var(--spw-architecture-reward, 0) * 14%), transparent);
}

@supports selector(:has(*)) {
  :where(main, body):has(:where([data-spw-operator="wonder"], [data-spw-operator="probe"]):is(:hover, :focus-visible))
    :where(main [data-spw-feature], main [data-spw-accent-concept], main [data-spw-visual-cues]) {
    --spw-reward-color: var(--spw-curiosity-color);
    --spw-resonance: 0.42;
  }

  :where(main, body):has(:where([data-spw-operator="ref"], [data-spw-operator="route"], [data-spw-operator="stream"]):is(:hover, :focus-visible))
    :where(main [data-spw-related-routes], main [data-spw-route-link], main [data-spw-feature]) {
    --spw-reward-color: var(--spw-relationship-color);
    --spw-resonance: 0.4;
  }

  :where(main, body):has(:where([data-spw-operator="frame"], [data-spw-operator="address"], [data-spw-operator="object"]):is(:hover, :focus-visible))
    :where(main [data-spw-region-role], main [data-spw-component-kind], main [data-spw-kind]) {
    --spw-reward-color: var(--spw-architecture-color);
    --spw-resonance: 0.38;
  }
}

/* ==========================================================================
   5. 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);
}

/* ==========================================================================
   6. 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);
}

/* ==========================================================================
   7. 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;
  }
}

/* ==========================================================================
   8. 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);
}

/* ==========================================================================
   9. 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;
}

/* ==========================================================================
   10. 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:
    background 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 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;
  }
}

/*# sourceMappingURL=debug.css.map */

}

/* /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);
}

/* Final visual layer: mobile route scrims must sit behind the active drawer. */
@media (max-width: 720px) {
  .site-header[data-spw-menu-mode="toggle"][data-spw-menu-overlay="active"]:has(.spw-nav-toggle[aria-expanded="true"]),
  body > header[data-spw-menu-mode="toggle"][data-spw-menu-overlay="active"]:has(.spw-nav-toggle[aria-expanded="true"]) {
    position: relative;
    z-index: 2020;
  }

  .site-header[data-spw-menu-mode="toggle"][data-spw-menu-overlay="active"]:has(.spw-nav-toggle[aria-expanded="true"]) nav,
  body > header[data-spw-menu-mode="toggle"][data-spw-menu-overlay="active"]:has(.spw-nav-toggle[aria-expanded="true"]) nav {
    z-index: 2020;
  }
}

/* Topics register: keep brace grammar at the card edge instead of as a layout rail. */
body[data-spw-surface="topics"] #topics-register.site-frame[data-spw-form="brace"]::before,
body[data-spw-surface="topics"] #topics-register.site-frame:has(> :where(.frame-topline, .frame-heading) > .spw-delimiter)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  min-inline-size: 0;
  min-block-size: 0;
  width: clamp(1.4rem, 3vw, 2.6rem);
  height: 1px;
  inline-size: clamp(1.4rem, 3vw, 2.6rem);
  block-size: 1px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--topics-accent, var(--active-op-color, #70cbd2)) 42%, transparent),
      color-mix(in srgb, var(--topics-accent, var(--active-op-color, #70cbd2)) 10%, transparent)
    );
  opacity: 0.42;
  filter: none;
}

body[data-spw-surface="topics"] #topics-register.site-frame[data-spw-form="brace"]::before {
  top: 0.72rem;
  left: 0.72rem;
}

body[data-spw-surface="topics"] #topics-register.site-frame:has(> :where(.frame-topline, .frame-heading) > .spw-delimiter)::after {
  bottom: 0.72rem;
  left: 0.72rem;
}

body[data-spw-surface="topics"] #topics-register.site-frame > :where(.frame-topline, .frame-heading):has(> .spw-delimiter) {
  position: relative;
  align-items: center;
  padding-inline-start: clamp(1.15rem, 2vw, 1.55rem);
}

body[data-spw-surface="topics"] #topics-register.site-frame > :where(.frame-topline, .frame-heading) > .spw-delimiter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  display: inline-grid;
  place-items: center;
  min-inline-size: 0.9rem;
  min-block-size: 1.28rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--topics-accent, var(--active-op-color, #70cbd2));
  line-height: 1;
  opacity: 0.88;
  transform: translateY(-50%);
}

body[data-spw-surface="topics"] #topics-register .frame-topline .spec-pill {
  border-color: color-mix(in srgb, var(--topics-accent, var(--active-op-color, #70cbd2)) 58%, rgba(255, 255, 255, 0.2));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 62%),
    color-mix(in srgb, var(--topics-surface-strong, rgba(20, 26, 28, 0.96)) 74%, var(--topics-accent, var(--active-op-color, #70cbd2)) 26%);
  color: var(--topics-ink, rgba(244, 248, 246, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px color-mix(in srgb, var(--topics-accent, var(--active-op-color, #70cbd2)) 14%, transparent);
}

/* Compact reading clarity: avoid glow + screen overlays reading as a blur scrim. */
@media (max-width: 720px) {
  html[data-spw-scroll-cadence="on"] main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state]::before {
    opacity: 0.16;
    filter: none;
    mix-blend-mode: normal;
  }

  html[data-spw-scroll-cadence="on"] main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]
    :where(.page-lede, .frame-note, .inline-note) {
    opacity: 1;
    text-shadow: none;
  }

  html[data-spw-scroll-cadence="on"] main > :is(section.site-frame, article > section.site-frame)[data-spw-section-state="active"]
    :where(.frame-note, .inline-note) {
    color: color-mix(in srgb, var(--ink, #eae4dc) 78%, var(--ink-muted, #c5bcb1) 22%);
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame)::before {
    opacity: 0.16;
    filter: none;
    mix-blend-mode: normal;
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame) {
    background: var(--topics-paper, var(--surface-strong, rgba(255, 255, 255, 0.94)));
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame)::after {
    background: none;
    opacity: 0;
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame) .spec-strip {
    display: none;
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame)
    :where(.page-lede, .frame-note, .inline-note) {
    opacity: 1;
    transform: none;
    letter-spacing: 0;
    text-shadow: none;
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame)
    :where(.frame-sigil, h1, h2, h3) {
    transform: none;
  }

  body[data-spw-surface="topics"] :is(main > section.site-frame, article > section.site-frame)
    :where(.frame-note, .inline-note) {
    color: color-mix(in srgb, var(--ink, #eae4dc) 78%, var(--ink-muted, #c5bcb1) 22%);
  }

  body[data-spw-surface="topics"] #topics-register .frame-operators {
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.38rem;
    max-block-size: 2.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding-block: 0.08rem 0.18rem;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  body[data-spw-surface="topics"] #topics-register .frame-operators > .operator-chip {
    flex: 0 0 auto;
    max-inline-size: min(78vw, 22rem);
    min-block-size: 2.05rem;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

}