.spw-language {
  position: relative;
}

.spw-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.66em;
  border-radius: 4px;
  transition:
    background-color var(--transition-duration) var(--transition-function),
    color var(--transition-duration) var(--transition-function);
}

.spw-token:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
}

.spw-chunk {
  border-radius: 4px;
  transition:
    background-color var(--transition-duration) var(--transition-function),
    color var(--transition-duration) var(--transition-function);
}

.spw-chunk:hover,
.spw-chunk:focus-visible {
  background: color-mix(in srgb, var(--color-hover-bg) 70%, transparent 30%);
}

.spw-chunk:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
}

.spw-brace,
.spw-operator {
  cursor: pointer;
}

.spw-brace.is-active {
  background: rgba(141, 228, 255, 0.2);
  color: #dff9ff;
}

.spw-operator {
  color: #e5a7ff;
}

.spw-operator:hover,
.spw-operator:focus-visible {
  background: rgba(229, 167, 255, 0.2);
}

.spw-geometry-node.is-geometry-active {
  background: rgba(140, 227, 194, 0.28);
  color: #dffcf0;
}

.spw-language-controls {
  display: grid;
  gap: 0.36rem;
  margin-top: 0.38rem;
}

.spw-operator-controls,
.spw-geometry-nav {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.spw-operator-controls button,
.spw-geometry-nav button {
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, 0.75);
  color: var(--color-accent-alt);
  font-family: var(--font-family-heading);
  font-size: 0.73rem;
  line-height: 1;
  padding: 0.22rem 0.52rem;
}

.spw-operator-label,
.spw-geometry-label,
.spw-geometry-status {
  margin: 0;
  color: var(--color-text-alt);
  font-family: var(--font-family-heading);
  font-size: 0.76rem;
}

.spw-geometry-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.spw-register-controls {
  display: grid;
  gap: 0.44rem;
  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--border-color-main) 74%, var(--glass-border) 26%);
  border-radius: var(--border-radius-small);
  padding: 0.5rem;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.4)),
    var(--glass-bg);
  backdrop-filter: blur(calc(var(--panel-blur) * 0.9)) saturate(1.04);
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) * 0.9)) saturate(1.04);
}

.spw-register-label {
  margin: 0;
  color: var(--color-text-alt);
  font-family: var(--font-family-heading);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-handle-mode {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.spw-handle-mode-button {
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, 0.76);
  color: var(--color-accent-alt);
  font-family: var(--font-family-heading);
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.22rem 0.52rem;
}

.spw-handle-mode-button[aria-pressed="true"] {
  background: rgba(38, 88, 124, 0.14);
  border-color: rgba(38, 88, 124, 0.5);
  box-shadow: inset 0 0 0 1px rgba(38, 88, 124, 0.16);
}

.spw-handle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.spw-handle-button {
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-accent-alt);
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.26rem 0.58rem;
  transform: translateY(0);
  transition:
    transform var(--transition-duration) var(--transition-function),
    box-shadow var(--transition-duration) var(--transition-function);
  animation: spw-handle-stagger 420ms ease both;
  animation-delay: calc(var(--spw-handle-order, 1) * 24ms);
}

.spw-handle-button:hover,
.spw-handle-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-main);
}

.spw-cube-controls {
  display: grid;
  gap: 0.34rem;
  border: 1px solid color-mix(in srgb, var(--border-color-main) 68%, hsla(var(--shader-hue), 72%, 58%, 0.5) 32%);
  border-radius: var(--border-radius-small);
  padding: 0.44rem;
  background: rgba(255, 255, 255, 0.62);
}

.spw-cube-label,
.spw-cube-face-label,
.spw-cube-status {
  margin: 0;
  color: var(--color-text-alt);
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
}

.spw-cube-axis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.spw-cube-rotate,
.spw-cube-entry {
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-accent-alt);
  font-family: var(--font-family-heading);
  font-size: 0.7rem;
  line-height: 1.2;
  padding: 0.22rem 0.52rem;
}

.spw-cube-face {
  display: grid;
  gap: 0.26rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.spw-cube-entry {
  text-align: left;
}

.spw-cube-empty {
  color: var(--color-text-alt);
  font-size: 0.73rem;
  font-style: italic;
}

.spw-inspection-controls {
  display: grid;
  gap: 0.32rem;
  border: 1px solid color-mix(in srgb, var(--border-color-main) 68%, hsla(var(--shader-hue), 72%, 58%, 0.5) 32%);
  border-radius: var(--border-radius-small);
  padding: 0.42rem;
  background: rgba(255, 255, 255, 0.62);
}

.spw-inspection-label {
  margin: 0;
  color: var(--color-text-alt);
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spw-codelens-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.spw-codelens-link {
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-accent-alt);
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 0.18rem 0.5rem;
  text-decoration: none;
}

.spw-inlay-hints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
}

.spw-inlay-hint {
  border: 1px dashed rgba(42, 111, 127, 0.36);
  border-radius: var(--border-radius-pill);
  padding: 0.14rem 0.46rem;
  color: var(--color-text-alt);
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  background: rgba(255, 255, 255, 0.58);
}

.spw-hover-inspector {
  margin: 0;
  max-height: 9.5rem;
  overflow: auto;
  border: 1px solid rgba(42, 111, 127, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.86);
  color: #dffcf0;
  font-size: 0.66rem;
  line-height: 1.34;
  padding: 0.44rem;
}

.spw-payload-inspector {
  margin: 0;
  max-height: 14rem;
  overflow: auto;
  border: 1px solid rgba(42, 111, 127, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.9);
  color: #dffcf0;
  font-size: 0.68rem;
  line-height: 1.38;
  padding: 0.46rem;
}

footer {
  color: var(--color-text-alt);
}

.page-shell {
  width: min(100%, var(--max-width-content));
  margin: 0 auto;
  display: grid;
  gap: var(--spacing-large);
}

.page-panel {
  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--border-color-main) 68%, var(--glass-border) 32%);
  border-radius: var(--border-radius-main);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28)),
    var(--glass-bg);
  box-shadow: 0 calc(14px * var(--depth-shadow-strength)) calc(28px * var(--depth-shadow-strength)) rgba(16, 23, 42, 0.13);
  padding: clamp(1rem, 2.4vw, 1.85rem);
  backdrop-filter: blur(calc(var(--panel-blur) * 1.1)) saturate(1.08);
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) * 1.1)) saturate(1.08);
}

.page-meta {
  color: var(--color-text-alt);
  font-size: 0.95rem;
  font-family: var(--font-family-heading);
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.page-links a {
  display: inline-flex;
  align-items: center;
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  padding: 0.35rem 0.8rem;
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.lifecycle-hud {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(18.5rem, calc(100vw - 2rem));
  z-index: 40;
  display: grid;
  gap: 0.42rem;
  padding: 0.7rem;
  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--border-color-main) 60%, var(--glass-border) 40%);
  border-radius: var(--border-radius-main);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4)),
    var(--glass-bg-strong);
  box-shadow: 0 calc(14px * var(--depth-shadow-strength)) calc(28px * var(--depth-shadow-strength)) rgba(16, 23, 42, 0.13);
  color: var(--color-text-main);
  backdrop-filter: blur(calc(var(--panel-blur) * 1.2)) saturate(1.1);
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) * 1.2)) saturate(1.1);
}

.lifecycle-title,
.lifecycle-status {
  font-family: var(--font-family-heading);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.lifecycle-title {
  color: var(--color-text-alt);
  text-transform: uppercase;
}

.lifecycle-preloader,
.lifecycle-spinner-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.86rem;
}

.lifecycle-chip {
  border: var(--border-width) var(--border-style) var(--border-color-main);
  border-radius: var(--border-radius-pill);
  padding: 0.02rem 0.48rem;
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
}

.lifecycle-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(42, 111, 127, 0.25);
  border-top-color: var(--color-accent-main);
  border-radius: 50%;
  animation: lifecycle-spin 0.9s linear infinite;
}

.lifecycle-skeleton {
  display: grid;
  gap: 0.32rem;
}

.lifecycle-skeleton span {
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39, 94, 136, 0.14), rgba(39, 94, 136, 0.34), rgba(39, 94, 136, 0.14));
  background-size: 210% 100%;
  animation: lifecycle-shimmer 1.4s ease-in-out infinite;
}

body[data-load-stage="honk"] .lifecycle-hud {
  opacity: 0.66;
}

/* Lifecycle valence tinting + pipeline semantics */
body[data-load-stage="boon"] .lifecycle-hud {
  border-color: color-mix(in srgb, var(--spw-color-probe, #9fd8ff) 46%, var(--border-color-main) 54%);
}

body[data-load-stage="bane"] .lifecycle-hud {
  border-color: color-mix(in srgb, var(--spw-color-action, #ff8a8a) 54%, var(--border-color-main) 46%);
  box-shadow:
    0 calc(14px * var(--depth-shadow-strength)) calc(28px * var(--depth-shadow-strength)) rgba(16, 23, 42, 0.13),
    0 0 0 1px rgba(255, 138, 138, 0.22);
}

body[data-load-stage="bone"] .lifecycle-hud {
  border-color: color-mix(in srgb, var(--spw-color-potential, #ffb07a) 44%, var(--border-color-main) 56%);
}

body[data-load-stage="bonk"] .lifecycle-hud {
  border-color: color-mix(in srgb, var(--spw-color-measure, #a8c8e8) 48%, var(--border-color-main) 52%);
}

body[data-load-stage="honk"] .lifecycle-hud {
  border-color: color-mix(in srgb, var(--spw-color-integration, #e5a7ff) 46%, var(--border-color-main) 54%);
  opacity: 0.66;
}

body[data-pipeline-stage="select"] .lifecycle-chip {
  color: var(--spw-pipeline-select, var(--spw-color-probe, #9fd8ff));
}

body[data-pipeline-stage="transform"] .lifecycle-chip {
  color: var(--spw-pipeline-transform, var(--spw-color-potential, #ffb07a));
}

body[data-pipeline-stage="validate"] .lifecycle-chip {
  color: var(--spw-pipeline-validate, var(--spw-color-measure, #a8c8e8));
}

body[data-pipeline-stage="emit"] .lifecycle-chip {
  color: var(--spw-pipeline-emit, var(--spw-color-integration, #e5a7ff));
}

@layer motion {

html[data-enhanced="true"] [data-reveal] {
  opacity: 0;
  transform:
    translateY(calc(12px + var(--scroll-layer-offset, 0px)))
    rotateX(var(--scroll-layer-tilt-x, 0deg))
    rotateY(var(--scroll-layer-tilt-y, 0deg));
  transition:
    filter 420ms var(--transition-function),
    opacity 420ms var(--transition-function),
    transform 520ms var(--transition-function);
  transition-delay: var(--reveal-delay, 0ms);
  filter: saturate(0.92);
}

html[data-enhanced="true"] [data-reveal].is-visible {
  opacity: 1;
  transform:
    translateY(var(--scroll-layer-offset, 0px))
    rotateX(var(--scroll-layer-tilt-x, 0deg))
    rotateY(var(--scroll-layer-tilt-y, 0deg));
  filter: saturate(calc(1 + (var(--attention-scroll-progress) * 0.18)));
}

html[data-enhanced="true"] [data-scroll-layer] {
  --scroll-layer-offset: 0px;
  --scroll-layer-tilt-x: 0deg;
  --scroll-layer-tilt-y: 0deg;
  transition: transform 280ms var(--transition-function);
  transform-style: preserve-3d;
  transform-origin: calc(var(--focal-x) * 1%) calc(var(--focal-y) * 1%);
}

html[data-semantic-shader="active"] [data-component],
html[data-semantic-shader="active"] [data-spw-component] {
  transition:
    box-shadow 260ms var(--transition-function),
    border-color 260ms var(--transition-function);
}

html[data-semantic-shader="active"] [data-component]:hover,
html[data-semantic-shader="active"] [data-component]:focus-within,
html[data-semantic-shader="active"] [data-spw-component]:hover,
html[data-semantic-shader="active"] [data-spw-component]:focus-within {
  box-shadow: 0 0 0 1px hsla(var(--shader-hue), 72%, 62%, 0.32), var(--shadow-main);
}

html[data-genre~="boonhonk"] {
  --shader-strength: 0.72;
}

html[data-genre~="boonhonk"] [data-component],
html[data-genre~="boonhonk"] [data-spw-component] {
  border-color: color-mix(in srgb, var(--border-color-main) 62%, hsla(var(--shader-hue), 72%, 58%, 0.5) 38%);
}

html[data-genre~="boonhonk"] .spw-operator,
html[data-genre~="boonhonk"] .spw-brace.is-active {
  text-shadow: 0 0 0.42rem hsla(var(--shader-hue), 76%, 64%, 0.38);
}

@keyframes lifecycle-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lifecycle-shimmer {
  from {
    background-position: 210% 0;
  }

  to {
    background-position: -210% 0;
  }
}

@keyframes spw-handle-stagger {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

} /* @layer motion */

/*
 * Reduced-motion override — unlayered so it wins over all layer rules.
 * Accessibility preferences must not be defeated by cascade specificity.
 */
@media (prefers-reduced-motion: reduce) {
  .lifecycle-spinner,
  .lifecycle-skeleton span {
    animation: none;
  }

  html[data-enhanced="true"] [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    filter: none;
  }

  html[data-enhanced="true"] [data-scroll-layer] {
    transition: none;
    transform: none;
  }

  html[data-semantic-shader="active"] [data-component],
  html[data-semantic-shader="active"] [data-spw-component] {
    transition: none;
  }
}

/* ─── Spw v0.2.0-alpha operator role colors ─────────────────────────────── */
/* spirit_sequence = ?~<#.>@(#.)&[#.]*{#.}^  (phase 0 = !) */
:root {
  /* spirit-sequence phases 0-6 */
  --spw-color-action:      #ff8a8a;  /* !  phase 0 — fire effect, inject        */
  --spw-color-probe:       #9fd8ff;  /* ?  phase 1 — inspect, select, evaluate  */
  --spw-color-potential:   #ffb07a;  /* ~  phase 2 — defer, name, superpose     */
  --spw-color-perspective: #f5d07a;  /* @  phase 3 — root scope, observer point */
  --spw-color-confluence:  #86d4f5;  /* &  phase 4 — merge, combine frames      */
  --spw-color-value:       #c8e6a0;  /* *  phase 5 — collapse to concrete       */
  --spw-color-integration: #e5a7ff;  /* ^  phase 6 — bind upward, emit          */
  /* accessor / grammar operators */
  --spw-color-annotation:  #f0a0c8;  /* #  extrinsic / projection accessor      */
  --spw-color-ground:      #7cb87e;  /* .  intrinsic / reduction accessor       */
  --spw-color-config:      #b8d4a8;  /* =  constrain, bias state                */
  --spw-color-measure:     #a8c8e8;  /* %  quantify, observe depth              */
  --spw-color-substrate:   #d4b8f0;  /* $  introspection, meta-access           */
  /* container charge colors */
  --spw-color-charge-pos: rgba(134, 212, 245, 0.18);  /* accumulate / open     */
  --spw-color-charge-neg: rgba(245, 208, 122, 0.16);  /* discharge / close     */
  /* pipeline stage accents */
  --spw-pipeline-select: var(--spw-color-probe);
  --spw-pipeline-transform: var(--spw-color-potential);
  --spw-pipeline-validate: var(--spw-color-measure);
  --spw-pipeline-emit: var(--spw-color-integration);
  --spw-pipeline-fallback: var(--spw-color-action);
}

/* Token role colors via data-spw-role */
.spw-operator[data-spw-role="action"]      { color: var(--spw-color-action); }
.spw-operator[data-spw-role="probe"]       { color: var(--spw-color-probe); }
.spw-operator[data-spw-role="potential"]   { color: var(--spw-color-potential); }
.spw-operator[data-spw-role="perspective"] { color: var(--spw-color-perspective); }
.spw-operator[data-spw-role="confluence"]  { color: var(--spw-color-confluence); }
.spw-operator[data-spw-role="value"]       { color: var(--spw-color-value); }
.spw-operator[data-spw-role="integration"] { color: var(--spw-color-integration); }
.spw-operator[data-spw-role="annotation"]  { color: var(--spw-color-annotation); }
.spw-operator[data-spw-role="ground"]      { color: var(--spw-color-ground); }
.spw-operator[data-spw-role="config"]      { color: var(--spw-color-config); }
.spw-operator[data-spw-role="measure"]     { color: var(--spw-color-measure); }
.spw-operator[data-spw-role="substrate"]   { color: var(--spw-color-substrate); }

/* Accessor polarity — # extrinsic (projection), . intrinsic (reduction) */
.spw-operator[data-spw-role="annotation"] {
  font-style: normal;
  text-shadow: 0 0 0.42rem rgba(240, 160, 200, 0.4);
}
.spw-operator[data-spw-role="ground"] {
  text-shadow: 0 0 0.36rem rgba(124, 184, 126, 0.38);
}

/* @ direction — postfix (observer anchored left) vs prefix (path target right) */
.spw-operator[data-spw-direction="postfix"] {
  color: var(--spw-color-perspective);
  text-shadow: 0 0 0.55rem rgba(245, 208, 122, 0.45);
  font-style: italic;
}
.spw-operator[data-spw-direction="prefix"] {
  color: var(--spw-color-perspective);
  text-shadow: 0 0 0.55rem rgba(245, 208, 122, 0.6);
  font-weight: bold;
}

/* Hover glow per role */
.spw-operator[data-spw-role="ground"]:hover,
.spw-operator[data-spw-role="ground"]:focus-visible       { background: rgba(124, 184, 126, 0.18); }
.spw-operator[data-spw-role="annotation"]:hover,
.spw-operator[data-spw-role="annotation"]:focus-visible   { background: rgba(240, 160, 200, 0.2); }
.spw-operator[data-spw-role="confluence"]:hover,
.spw-operator[data-spw-role="confluence"]:focus-visible   { background: rgba(134, 212, 245, 0.2); }
.spw-operator[data-spw-role="perspective"]:hover,
.spw-operator[data-spw-role="perspective"]:focus-visible  { background: rgba(245, 208, 122, 0.2); }
.spw-operator[data-spw-role="integration"]:hover,
.spw-operator[data-spw-role="integration"]:focus-visible  { background: rgba(229, 167, 255, 0.2); }
.spw-operator[data-spw-role="probe"]:hover,
.spw-operator[data-spw-role="probe"]:focus-visible        { background: rgba(159, 216, 255, 0.2); }
.spw-operator[data-spw-role="action"]:hover,
.spw-operator[data-spw-role="action"]:focus-visible       { background: rgba(255, 138, 138, 0.2); }

/* ─── Brace charge model ─────────────────────────────────────────────────── */
/* Left braces accumulate (+charge); right braces discharge (−charge) */
.spw-brace[data-spw-charge^="+"] {
  background: var(--spw-color-charge-pos);
}
.spw-brace[data-spw-charge^="-"] {
  background: var(--spw-color-charge-neg);
}
.spw-brace[data-spw-charge^="+"]:hover { background: rgba(134, 212, 245, 0.28); }
.spw-brace[data-spw-charge^="-"]:hover { background: rgba(245, 208, 122, 0.24); }

/* Active brace pair — enhance with container name */
.spw-brace-frame.is-active   { background: rgba(159, 216, 255, 0.22); color: #dff9ff; }
.spw-brace-body.is-active    { background: rgba(229, 167, 255, 0.22); color: #f5e8ff; }
.spw-brace-scope.is-active   { background: rgba(124, 184, 126, 0.22); color: #dffce8; }
.spw-brace-capsule.is-active { background: rgba(245, 208, 122, 0.22); color: #fff8d8; }

/* ─── Drag-to-scope chip ─────────────────────────────────────────────────── */
.spw-scope-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(124, 184, 126, 0.5);
  border-radius: 999px;
  background: rgba(124, 184, 126, 0.14);
  color: var(--spw-color-ground);
  font-family: var(--font-family-heading);
  font-size: 0.7rem;
  padding: 0.16rem 0.5rem;
  margin-inline-start: 0.32rem;
  vertical-align: middle;
  animation: spw-scope-appear 180ms ease both, spw-scope-fade 2.8s ease forwards;
}

.has-spw-scope {
  outline: 1.5px dashed rgba(124, 184, 126, 0.44);
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes spw-scope-appear {
  from { opacity: 0; transform: translateY(3px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spw-scope-fade {
  0%, 72% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ─── Navigation shape hold modes ───────────────────────────────────────── */
/* breadth ({): expand concept rail, soften section filter opacity */
body[data-ebook-nav-shape="breadth"] .ebook-concept-rail {
  outline: 1.5px solid rgba(134, 212, 245, 0.5);
  outline-offset: 2px;
  border-radius: var(--border-radius-small);
}

body[data-ebook-nav-shape="breadth"] .ebook-perspective-switch,
body[data-ebook-nav-shape="breadth"] .ebook-concept-rail {
  box-shadow: 0 0 0 2px rgba(134, 212, 245, 0.22);
}

body[data-ebook-nav-shape="breadth"] main.chapter > [data-ebook-section="true"] {
  opacity: 1 !important;
  filter: none !important;
}

/* depth (}): highlight active section, mute others */
body[data-ebook-nav-shape="depth"] main.chapter > [data-ebook-section="true"]:not(.is-ebook-active) {
  opacity: 0.38;
  filter: saturate(0.7) blur(0.4px);
  transition: opacity 200ms ease, filter 200ms ease;
}

body[data-ebook-nav-shape="depth"] main.chapter > [data-ebook-section="true"].is-ebook-active {
  box-shadow: inset 3px 0 0 rgba(42, 111, 127, 0.66), var(--shadow-hover);
  transition: box-shadow 200ms ease;
}

body[data-ebook-nav-shape="depth"] .ebook-toc {
  outline: 1.5px solid rgba(240, 160, 200, 0.5);
  outline-offset: 2px;
  border-radius: var(--border-radius-small);
}

@media (max-width: 700px) {
  body {
    padding: var(--spacing-medium);
    gap: var(--spacing-medium);
  }

  .lifecycle-hud {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}