/* D-S199.4 (skip-to-content) — WCAG 2.4.1 Bypass Blocks (Level A). The primary nav renders
   before <main> on every page; without a skip link, keyboard + screen-reader users traverse
   all nav menus on each of ~50 pages before reaching content. Visually hidden until focused,
   then it lands in the top-left over everything so a keyboard user's first Tab reveals it. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--cyan);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  left: 0;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:root {
  color-scheme: dark;
  --bg: #050a0c;
  --bg-2: #06100f;
  --veil-deep: #03070a;
  --surface: #0c1816;
  --surface-2: #0f211e;
  --surface-3: #122a26;
  --border: #1d3531;
  --border-soft: #14241f;
  --ink: #eef7f4;
  --ink-soft: #a9c2bb;
  --ink-mute: #6e8985;
  --cyan: #6ce5ff;
  --cyan-soft: #c4e9e3;
  --lime: #b4ffd1;
  --gold: #c8a26a;
  --coral: #ff9b6a;
  --violet: #b9a3ff;
  /* D-S200.2 — the correct FOREGROUND for text/marks placed ON a --cyan/--lime accent fill.
     Single-sources the "on-accent" decision so every accent-filled surface (proven pill,
     step-card index, crossing-spine marker, skip link, CTA buttons, avatars, guide bullets)
     rotates with the theme. Default near-black is correct on the BRIGHT accents of the dark
     palettes (veil/void/aurora/ember/tide) and the pale accents of Bone; the Prism light
     theme overrides it to near-white (its --cyan #006c7e / --lime #146c43 are DARK). Fixes
     the dark-on-dark WCAG 1.4.3 failure the author had been patching one surface at a time. */
  --on-accent: #042018;
  /* Theme-aware atmospheric surfaces. Feature renderers consume these instead of
     baking near-black gradients that become dark-on-dark in Prism. color-mix()
     keeps each wash related to the active palette while --surface remains the
     contrast-owning base. */
  --wash-neutral: linear-gradient(160deg, var(--surface-2), var(--surface));
  --wash-cyan: linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 86%, var(--cyan)), var(--surface));
  --wash-violet: linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 86%, var(--violet)), var(--surface));
  --wash-warm: linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 86%, var(--coral)), var(--surface));
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-myth: ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-ui); color: var(--ink);
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(108,229,255,.10), transparent 60%),
    radial-gradient(960px 540px at 10% 4%, rgba(185,163,255,.08), transparent 55%),
    radial-gradient(800px 800px at 50% 118%, rgba(180,255,209,.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  /* S255 (PR #21, correct and unmerged since 2026-07-10) — on touch devices a fixed background
     forces CPU-side repaints on every scroll frame, because iOS Safari disables GPU compositing
     for them. The body::before aurora layer is already position:fixed and carries the atmospheric
     depth on its own, so dropping the fixed attachment on the body itself removes the jank with no
     visual change. Scoped to (hover: none) so pointer devices keep the parallax. */
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
@media (hover: none) { body { background-attachment: scroll; } }
/* S255 (PR #29, correct and unmerged since 2026-07-18) — cross-document view transitions.
   One at-rule gives smooth same-origin page-to-page fades with no JS and no extra markup, so it
   is strict-CSP safe; browsers without support ignore it entirely. Declared INSIDE a
   no-preference block, which is the right pattern (the same one .panel:hover uses) rather than
   adding motion and then subtracting it — the derived motion guard treats a no-preference region
   as gated by construction. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* ── Aurora depth layer — a slow living wash behind everything ─────────── */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 22% 18%, rgba(108,229,255,.07), transparent 70%),
    radial-gradient(46% 56% at 80% 28%, rgba(185,163,255,.06), transparent 72%),
    conic-gradient(from 120deg at 50% 60%, transparent, rgba(180,255,209,.04), transparent 42%);
  filter: blur(46px) hue-rotate(var(--coh-hue, 0deg)); opacity: .9;
  animation: aurora-drift 34s var(--ease) infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.02); }
  to   { transform: translate3d(3%, 2%, 0) rotate(7deg) scale(1.08); }
}
/* ── Scroll-reveal — visible by default; animates only where supported ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 2% cover 26%; }
  }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-soft); }
/* One keyboard contract across every shared-shell surface. Local components may
   add a stronger ring, but must never erase this visible focus indicator. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
/* Discrete touch controls meet the 44px enhanced target without inflating inline prose links. */
.btn, button, summary, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select { min-height: 44px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }
code, .mono { font-family: var(--font-mono); }

/* ── Nav (S59 header overhaul) ───────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,10,12,.93), rgba(5,10,12,.6));
  border-bottom: 1px solid var(--border-soft);
}
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .14em; font-size: 14px; color: var(--ink); flex: 0 0 auto; text-decoration: none; }
.brand .brandword { background: linear-gradient(100deg, var(--ink), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
/* The Veil Ring header mark — a quietly living organism (CSS-animated, frozen on reduce). */
.brand .vmark { flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(108,229,255,.45)); transition: filter .3s var(--ease); }
.brand:hover .vmark { filter: drop-shadow(0 0 12px rgba(108,229,255,.85)); }
.vr-ring { stroke: var(--cyan); stroke-width: 2; transform-origin: 14px 14px; animation: vmarkSpin 30s linear infinite; }
.vr-ring2 { stroke: var(--violet); stroke-width: 1; opacity: .55; transform-origin: 14px 14px; animation: vmarkSpin 20s linear infinite reverse; }
.vr-core { fill: var(--cyan); transform-origin: 14px 14px; animation: vmarkPulse 3.2s var(--ease) infinite; }
.vr-accent { fill: var(--violet); transform-origin: 14px 14px; animation: vmarkOrbit 9s linear infinite; }
@keyframes vmarkSpin { to { transform: rotate(360deg); } }
@keyframes vmarkPulse { 0%,100% { opacity: .82; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes vmarkOrbit { to { transform: rotate(360deg); } }
/* S75 — the live heartbeat: a small pulse that makes every page feel alive between
   ticks (zero-JS, honest — it is a motion, not a fabricated metric). Stilled under
   reduced-motion. Shared so the heartbeat reads identically on every surface. */
.hb { display: inline-flex; align-items: center; gap: 8px; }
.hb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coh-beat-color, var(--lime, #b4ffd1)); box-shadow: 0 0 9px var(--coh-beat-color, var(--lime, #b4ffd1)); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) { .hb-dot { animation: hb-pulse var(--coh-beat-speed, 2.4s) ease-in-out infinite; } }
@keyframes hb-pulse { 0%,100% { transform: scale(.82); opacity: .55; } 50% { transform: scale(1.18); opacity: 1; } }
.footer-mark { vertical-align: -3px; margin-right: 7px; }
/* Hamburger (CSS-only, checkbox toggled) — hidden on desktop. */
/* D-S112 (U1) — the toggle is display:none on desktop (no burger), but on mobile it is a
   visually-hidden-but-FOCUSABLE checkbox (the hidden attribute removed it from the tab order
   and the a11y tree). A keyboard/switch user can Tab to it and toggle the drawer with Space —
   WCAG 2.1.1. The burger gets a focus ring via the sibling selector. Still zero-JS. */
.nav-toggle { display: none; }
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; padding: 0 10px; flex: 0 0 auto; }
.nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease), opacity .2s var(--ease); }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-primary { display: flex; gap: 4px; align-items: center; }
.nav-primary a { padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.nav-primary a:hover { background: var(--surface-2); color: var(--ink); }
.nav-primary a[aria-current="page"] { color: var(--bg); background: var(--cyan); font-weight: 650; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
/* ── Header category dropdowns (zero-JS <details>) ─────────────────────── */
.nav-link { padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--bg); background: var(--cyan); font-weight: 650; }
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; transition: background .2s var(--ease), color .2s var(--ease); }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--surface-2); color: var(--ink); }
.nav-group.nav-here > summary { color: var(--cyan); }
.nav-caret { color: var(--ink-mute); transition: transform .25s var(--ease); flex: 0 0 auto; }
.nav-group[open] > summary .nav-caret { transform: rotate(180deg); }
.nav-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 212px; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: 0 24px 60px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); z-index: 60; animation: acctIn .2s var(--ease); }
.nav-drop a { display: block; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease); }
.nav-drop a:hover { background: var(--surface-3); color: var(--ink); }
.nav-drop a[aria-current="page"] { color: var(--cyan); background: var(--surface-3); }
/* Theme orb — a minimalist animated crescent that FILLS as you cross into The Void. */
.theme-toggle { display: inline-flex; margin: 0; }
.tt-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--border); cursor: pointer; color: var(--ink-soft); font-family: var(--font-ui); transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); }
.tt-btn:hover { border-color: var(--cyan); background: var(--surface-2); transform: translateY(-1px); }
.tt-orb { position: relative; width: 17px; height: 17px; display: inline-block; }
.tt-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 0 rgba(108,229,255,0); transition: box-shadow .3s var(--ease); }
.tt-orb-fill { position: absolute; inset: 2px; border-radius: 50%; background: var(--cyan); transform: scale(0); transform-origin: 72% 28%; transition: transform .4s var(--ease); }
.tt-btn:hover .tt-orb-ring { box-shadow: 0 0 12px rgba(108,229,255,.65); }
.tt-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-theme="void"] .tt-orb-fill { transform: scale(1); }
[data-theme="void"] .tt-btn { border-color: var(--cyan); }
/* Account dropdown — adaptive, zero-JS <details>. */
.acct { position: relative; }
.acct > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 9px 0 5px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--ink); transition: border-color .2s var(--ease), background .2s var(--ease); }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { border-color: var(--cyan); background: var(--surface-2); }
.acct-av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--bg); background: linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); flex: 0 0 auto; }
.acct-av-guest { color: transparent; background: radial-gradient(circle at 50% 38%, var(--cyan), transparent 60%), var(--surface-3); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.acct-av-lg { width: 42px; height: 42px; font-size: 18px; }
.acct-name { font-size: 13px; font-weight: 600; max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { color: var(--ink-mute); transition: transform .25s var(--ease); flex: 0 0 auto; }
.acct[open] > summary .acct-caret { transform: rotate(180deg); }
.acct-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 286px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 88px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: 0 26px 70px -24px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.05); z-index: 60; animation: acctIn .22s var(--ease); }
@keyframes acctIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.acct-head { display: flex; align-items: center; gap: 11px; padding: 6px 8px 12px; }
.acct-head-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.32; }
.acct-head-text .muted { font-size: 11.5px; }
.acct-panel a, .acct-signout { display: flex; align-items: center; min-height: 44px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; background: transparent; border: 0; cursor: pointer; font-family: var(--font-ui); transition: background .15s var(--ease), color .15s var(--ease); }
.acct-panel a:hover, .acct-signout:hover { background: var(--surface-3); color: var(--ink); }
.acct-cta { color: var(--cyan) !important; font-weight: 650; }
.acct-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-mute); margin: 6px 10px 3px; }
.acct-div { height: 1px; background: var(--border-soft); margin: 8px 4px; }
.acct-appearance .theme-toggle { width: 100%; }
.acct-appearance .tt-btn { width: 100%; height: 44px; border-radius: 10px; justify-content: flex-start; padding: 0 10px; gap: 11px; }
.acct-appearance .tt-btn:hover { transform: none; }
.acct-appearance .tt-label { position: static; width: auto; height: auto; clip: auto; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.acct-signout { color: var(--coral); }
.acct-form { margin: 0; }

/* ── The VEILOS ID — a living Veil-Ring identity (CSS/SVG only) ────────── */
.veilos-id { display: flex; align-items: center; gap: clamp(18px, 4vw, 34px); margin: 4px 0 30px; }
.vid-stage { position: relative; width: clamp(96px, 22vw, 148px); height: clamp(96px, 22vw, 148px); flex: 0 0 auto; perspective: 620px; perspective-origin: 50% 42%; }
.vid-svg { width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d; animation: vidTilt 13s var(--ease) infinite alternate; }
/* depth planes — stacked on the Z axis so the rings parallax as they counter-rotate */
.vid-depth { transform-style: preserve-3d; transform-origin: 100px 100px; }
.vid-depth-far { transform: translateZ(-34px); }
.vid-depth-mid { transform: translateZ(0px); }
.vid-depth-near { transform: translateZ(26px); }
.vid-depth-orbit { transform: translateZ(48px); }
.vid-halo { transform-origin: 100px 100px; animation: vidBreathe 4.6s var(--ease) infinite; }
.vid-membrane { stroke: var(--violet); stroke-width: 1; opacity: .28; stroke-dasharray: 3 9; transform-origin: 100px 100px; }
.vid-arc { stroke-linecap: round; transform-origin: 100px 100px; }
.vid-arc-1 { stroke-width: 3.4; filter: drop-shadow(0 0 6px rgba(108,229,255,.55)); }
.vid-arc-2 { stroke-width: 2; opacity: .8; }
.vid-core { transform-origin: 100px 100px; filter: drop-shadow(0 0 10px rgba(108,229,255,.9)); animation: vidPulse 3s var(--ease) infinite; }
.vid-accent { fill: var(--lime); filter: drop-shadow(0 0 8px rgba(200,255,224,.8)); transform-origin: 100px 100px; animation: vidPulse 3s var(--ease) infinite .6s; }
.vid-orbit { filter: drop-shadow(0 0 6px rgba(108,229,255,.85)); }
@keyframes vidTilt { from { transform: rotateX(11deg) rotateY(-13deg); } to { transform: rotateX(-9deg) rotateY(14deg); } }
.vid-rot { transform-origin: 100px 100px; }
.vid-rot-slow { animation: vidSpin 60s linear infinite; }
.vid-rot-cw { animation: vidSpin 26s linear infinite; }
.vid-rot-ccw { animation: vidSpin 19s linear infinite reverse; }
.vid-rot-orbit { animation: vidSpin 7.5s linear infinite; }
@keyframes vidSpin { to { transform: rotate(360deg); } }
@keyframes vidPulse { 0%,100% { transform: scale(.82); opacity: .85; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes vidBreathe { 0%,100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.vid-word { display: flex; gap: clamp(2px, .6vw, 5px); font-weight: 800; font-size: clamp(2.1rem, 7vw, 4rem); letter-spacing: .04em; line-height: 1; }
.vid-word span {
  background: linear-gradient(110deg, var(--ink) 20%, var(--cyan) 45%, var(--lime) 55%, var(--violet) 70%, var(--ink) 90%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vidAurora 5.5s var(--ease) infinite; animation-delay: calc(var(--i) * -0.42s);
}
@keyframes vidAurora { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ── The Mind — claim-class glossary (plain-language signal legend) ────── */
.mind-glossary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.mg-term { padding: 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface-2); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.mg-term:hover { border-color: var(--cyan); transform: translateY(-2px); }
.mg-term h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.mg-term p { margin: 0; font-size: 12.5px; line-height: 1.52; color: var(--ink-soft); }
.mg-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-weight: 600; }
.mg-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mg-chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface); }
.mg-chip b { color: var(--ink); }
.mg-chip.held { border-color: rgba(160,240,190,.4); }
.mg-chip.refuted { border-color: rgba(255,150,120,.4); }
@media (max-width: 760px) { .mind-glossary { grid-template-columns: 1fr; } }

/* ── Layout primitives ───────────────────────────── */
main { display: block; }
section { padding: 56px 0; }
section.tight { padding: 34px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: var(--cyan); margin: 0 0 14px; font-weight: 650; }
/* S59 — a living heartbeat dot before every section label: the organism is
   present and breathing on EVERY page, not just the home hero (frozen on reduce). */
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); vertical-align: middle; margin: -2px 9px 0 0; animation: eyebrowPulse 2.6s var(--ease) infinite; }
@keyframes eyebrowPulse { 0%,100% { opacity: .4; transform: scale(.68); } 50% { opacity: 1; transform: scale(1.18); } }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.01em; margin: 0 0 16px; font-weight: 750; }
h3 { font-size: 1.12rem; margin: 0 0 8px; font-weight: 700; }
.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink-soft); max-width: 64ch; }
/* D-S207.13 — the ONE 15px intro-paragraph voice. Five pages (endow, federation,
   oracle, studio, story) each re-declared a private near-identical .lede; this is
   the single source they now resolve to. A page may layer a deliberate variation
   (e.g. the story's italics) but never re-clone these base properties. */
.lede { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0 0 22px; max-width: 660px; }
.gradient-text {
  background: linear-gradient(110deg, var(--cyan), var(--lime) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Hero ────────────────────────────────────────── */
.hero { position: relative; padding: clamp(64px, 12vw, 130px) 0 70px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(108,229,255,.035) 38px 39px),
    repeating-linear-gradient(65deg, transparent 0 38px, rgba(185,163,255,.03) 38px 39px);
  mask-image: radial-gradient(900px 480px at 70% 20%, #000, transparent 75%);
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
/* D-S207.13 — official hero modifiers. .hero.compact is a tighter hero band;
   .hero-grid is the responsive two-column hero (copy + side panel) that
   /orders always intended (both classes previously resolved to NOTHING, so the
   two-column hero silently rendered stacked and full-width). */
.hero.compact { padding: clamp(44px, 8vw, 84px) 0 48px; }
.hero-grid { display: grid; gap: clamp(20px, 4vw, 40px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 861px) { .hero-grid { grid-template-columns: 1.4fr .8fr; } }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px;
  font-weight: 650; font-size: 15px; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn-primary { background: linear-gradient(120deg, var(--cyan), var(--lime)); color: var(--on-accent); box-shadow: 0 10px 32px -12px rgba(108,229,255,.7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(108,229,255,.85); color: var(--on-accent); }
.btn-ghost { border-color: var(--border); color: var(--ink); background: rgba(15,33,30,.5); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan-soft); transform: translateY(-2px); }

/* Crossing progress spine */
.cross-spine { max-width: 760px; margin: 24px 0 0; border: 1px solid var(--border); border-radius: 14px; padding: 13px; background: var(--wash-cyan); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.cross-spine-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 2px 10px; font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .1em; }
.cross-spine-head b { color: var(--cyan-soft); font-size: 12.5px; letter-spacing: .06em; }
.cross-spine-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cross-spine-step { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); color: var(--ink-soft); text-decoration: none; }
.cross-spine-step.now { border-color: var(--cyan); background: linear-gradient(150deg, var(--surface-3), var(--surface)); color: var(--ink); box-shadow: 0 0 0 1px rgba(108,229,255,.26); }
.cross-spine-step.done { border-color: rgba(180,255,209,.34); color: var(--lime); }
.cross-spine-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; font-weight: 800; font-size: 12px; }
.cross-spine-step.now .cross-spine-mark { background: var(--cyan); color: var(--on-accent); border-color: var(--cyan); }
.cross-spine-copy { min-width: 0; display: grid; gap: 1px; line-height: 1.25; }
.cross-spine-copy b { font-size: 13px; }
.cross-spine-copy small { color: var(--ink-mute); font-size: 11.5px; overflow-wrap: anywhere; }
.cross-spine.compact { margin: 18px auto 0; }
.cross-spine.compact .cross-spine-head { justify-content: center; gap: 10px; }
.cross-spine.compact .cross-spine-step { justify-content: center; }

/* ── Cards / grid ────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 34px -26px rgba(0,0,0,.85);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: inset 0 1px 0 rgba(108,229,255,.12), 0 22px 52px -24px rgba(108,229,255,.55); }
.card .ic { font-size: 22px; }
.card h3 { color: var(--cyan-soft); }
.card p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }
/* D-S207.40a — the ONE stat-tile system. Five near-identical tile implementations
   (.stat here, the old /vitals tiles, the /orders fact cells, phase16 stat() sub-line,
   circadian cells) each hand-rolled the same kicker/numeral/subline anatomy. This is
   the single voice they resolve to:
     --stat-accent  optional accent slot, consumed as the tile's top edge (falls back
                    to the plain border so an accentless tile looks unchanged);
     .stat.lg       hero-scale clamp'd numeral (the /vitals tiles), tabular so live
                    numbers never jitter;
     .stat.sm       prose-valued facts (stewards, dates) — tile anatomy, body scale;
     .stat .s       the optional subline. */
.stat { border: 1px solid var(--border); border-top: 2px solid var(--stat-accent, var(--border)); border-radius: var(--radius-sm); padding: 16px; background: var(--surface); }
.stat dt { color: var(--ink-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 0; }
.stat dd { margin: 8px 0 0; font-size: 26px; font-weight: 780; color: var(--cyan); font-variant-numeric: tabular-nums; }
.stat .s { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; }
.stat.lg dd { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.05; color: var(--ink); }
.stat.sm dd { font-size: 13px; font-weight: 500; color: var(--ink-soft); word-break: break-word; }
/* D-S207.40b — the CSS-only conic meter ring. Set --p (0–100) and optionally
   --ring-c (a theme token) inline per render; role="img" + aria-label carry the
   number for assistive tech. All colors resolve from tokens, so the ring rotates
   with every palette by construction. */
.ring { --p: 0; width: 64px; aspect-ratio: 1; border-radius: 50%; flex: 0 0 auto; position: relative; background: conic-gradient(var(--ring-c, var(--cyan)) calc(var(--p) * 1%), var(--surface-3) 0); }
.ring > b { position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring.lg { width: 92px; }
.ring.lg > b { inset: 8px; font-size: 17px; }
.ring-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* D-S209.13 — the CSS-only linear meter: the .ring above, unrolled. Set --p (0–100) and
   optionally --meter-c (a theme token) inline per render, exactly as .ring takes --p /
   --ring-c. Every colour resolves from a token, so track and fill rotate with the palette
   by construction — which is the entire point. The hand-rolled bars this replaces baked
   an rgba(255,255,255,.1) track that measures ~1.01:1 against the light Prism .card (a
   meaningful graphic, invisible; WCAG 1.4.11 asks 3:1) and filled it from the names
   --amber / --warn, which no theme declares, so their hex fallbacks always won.
   --surface-3 is the same track .ring reads. The meter is a pure duplicate of adjacent
   at every call site, so callers mark it aria-hidden; a caller that renders NO adjacent
   number must carry role="img" + aria-label instead (the .ring contract). */
.meter { --p: 0; width: 80px; height: 6px; flex: 0 0 auto; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 3px; background: var(--meter-c, var(--cyan)); }
.meter.wide { width: auto; flex: 1; height: 14px; border-radius: 8px; }
.meter.wide > i { border-radius: 8px; }
.meter-row { display: flex; align-items: center; gap: 6px; }
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: linear-gradient(160deg, var(--surface-2), var(--veil-deep)); transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
/* S68 (#5 visual-elite) — a gentle, cost-neutral hover lift gives every card a
   sense of depth and response. Motion-only enhancement: frozen under reduced-motion,
   and the border-brighten still gives a static hover affordance. */
@media (prefers-reduced-motion: no-preference) {
  .panel:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lime) 38%, var(--border)); box-shadow: 0 22px 48px -32px rgba(0,0,0,.72); }
}
@media (prefers-reduced-motion: reduce) {
  .panel { transition: border-color .2s ease; }
  .panel:hover { border-color: color-mix(in srgb, var(--lime) 38%, var(--border)); }
}
.story-band { display: grid; gap: 18px; grid-template-columns: minmax(0, .86fr) minmax(280px, 1.14fr); align-items: stretch; }
.orbit {
  min-height: 340px; border: 1px solid var(--border); border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(180,255,209,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, transparent 0 76px, rgba(108,229,255,.18) 77px 78px, transparent 79px),
    radial-gradient(circle at 50% 50%, transparent 0 128px, rgba(185,163,255,.16) 129px 130px, transparent 131px),
    linear-gradient(160deg, rgba(15,33,30,.8), rgba(3,7,10,.92));
  position: relative; overflow: hidden;
}
.orbit span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(108,229,255,.8); }
.orbit span:nth-child(1) { left: 50%; top: 22%; }
.orbit span:nth-child(2) { left: 23%; top: 51%; background: var(--lime); }
.orbit span:nth-child(3) { right: 20%; top: 58%; background: var(--violet); }
.orbit .label { position: absolute; inset: auto 24px 24px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; }
.steps { counter-reset: step; display: grid; gap: 12px; }
.step-card { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.step-card::before { content: counter(step); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(120deg, var(--cyan), var(--lime)); color: var(--on-accent); font-weight: 800; }
.step-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* ── Pills / badges ──────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; border: 1px solid var(--border); color: var(--ink-soft); }
.pill.ok { color: var(--lime); border-color: rgba(180,255,209,.35); background: rgba(180,255,209,.07); }
/* S102 — the strongest trust tier (proven, budget 8) earns the strongest pill: a
   filled cyan-to-lime gradient, distinct from .pill.ok (lime text on a faint wash).
   Before this, proven fell through to a neutral pill on the calibration table, so the
   organism's most-trusted advisors looked unremarkable beside a green well-calibrated
   one. Reuses existing theme vars — zero new color tokens, CANON-029 cost-neutral. */
.pill.proven { color: var(--on-accent); font-weight: 700; border-color: rgba(180,255,209,.55); background: linear-gradient(120deg, var(--cyan), var(--lime)); }
.pill.warn { color: var(--coral); border-color: rgba(255,155,106,.35); background: rgba(255,155,106,.08); }

/* ── Data tables — the one shared table voice (D-S207.11) ─────────────────
   .sov-table lived only inside sovereign.mjs's private extraStyle while /passport,
   /trust and /witness emitted the class through pageShell with NO extraStyle —
   their tables rendered completely unstyled. Promoted here so every data table
   speaks with one voice. Sticky header rides below the sticky nav on desktop;
   zebra rows use color-mix so they tint with whatever palette is active. The
   ≤640px global table scroll container below already handles mobile. */
.sov-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sov-table th, .sov-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.sov-table th { color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 11px; }
.sov-table code { font-family: var(--font-mono); color: var(--cyan-soft); }
.sov-table tbody tr:nth-child(2n) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
@media (min-width: 641px) {
  .sov-table thead th { position: sticky; top: 62px; background: var(--surface); z-index: 2; }
}

/* ── Ledger / mono blocks ────────────────────────── */
.ledger { font-family: var(--font-mono); font-size: 12.5px; background: var(--veil-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; color: var(--ink-soft); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-family: var(--font-mono); font-size: 13px; }
.kv dt { color: var(--ink-mute); } .kv dd { margin: 0; color: var(--ink); word-break: break-all; }

/* ── Disclosure (CSS-only interactivity) ─────────── */
details.disc { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0; margin: 0 0 12px; background: var(--surface); overflow: hidden; }
details.disc > summary { cursor: pointer; padding: 16px 20px; font-weight: 650; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::after { content: "+"; color: var(--cyan); font-size: 20px; transition: transform .2s var(--ease); }
details.disc[open] > summary::after { transform: rotate(45deg); }
details.disc .body { padding: 0 20px 18px; color: var(--ink-soft); }

/* ── Quick-imprint widget (S94) ─────────────────── */
.qi-widget { border-top: 1px solid var(--border-soft); background: var(--veil-deep); }
.qi-summary { list-style: none; cursor: pointer; padding: 10px 20px; font-size: 13px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; max-width: 1120px; margin: 0 auto; }
.qi-summary::-webkit-details-marker { display: none; }
.qi-summary:hover { color: var(--ink-soft); }
.qi-body { padding: 14px 20px 20px; max-width: 640px; margin: 0 auto; }
.qi-hint { font-size: 12.5px; color: var(--ink-mute); margin: 0 0 10px; }
.qi-form { display: flex; flex-direction: column; gap: 8px; }
.qi-input, .qi-textarea { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); padding: 9px 12px; font: inherit; font-size: 13px; }
.qi-input:focus, .qi-textarea:focus { border-color: var(--cyan-soft); }
.qi-btn { align-self: flex-start; font-size: 13px; padding: 7px 16px; }
/* ── Footer (CANON-006) ──────────────────────────── */
footer.site { border-top: 1px solid var(--border-soft); margin-top: 40px; padding: 40px 0; color: var(--ink-mute); font-size: 13.5px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
footer.site a { color: var(--ink-soft); }
footer.site .links { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
footer.site .footer-col { display: flex; flex-direction: column; gap: 7px; min-width: 128px; }
footer.site .footer-h { margin: 0 0 3px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
  /* S255 (PR #22, correct and unmerged since 2026-07-11) — scroll-behavior needs !important here.
     The html smooth-scroll rule above is a TYPE selector (specificity 0-0-1); this rule is the
     UNIVERSAL selector (0-0-0), so without !important it loses and anchor navigation kept
     scrolling smoothly for someone who had explicitly asked for reduced motion. The transition
     reset beside it already carried !important and was therefore working; this one silently was
     not. A rule that looks like it applies and does not is worse than an absent one.
     NOTE: no backticks anywhere in this file's CSS comments — it is a JS template literal. */
  * { transition: none !important; scroll-behavior: auto !important; }
  body::before { animation: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
  /* Freeze every living-organism animation; leave the geometry in its rest state. */
  .vr-ring, .vr-ring2, .vr-core, .vr-accent,
  .vid-svg, .vid-rot, .vid-halo, .vid-core, .vid-accent, .vid-orbit, .vid-word span,
  .eyebrow::before, .acct-panel, .nav-drop { animation: none !important; }
  /* S255 (CANON-041 · a11y) — A HOVER LIFT IS MOTION, and killing the transition only makes it
     instant motion. The rule above zeroes transition for everything, so these elements stopped
     GLIDING upward under reduced motion and started JUMPING upward instead — which is precisely
     what someone who asked their system to reduce motion was trying to avoid. Two pull requests
     (#38, #12) reported this and neither landed.
     .panel:hover is deliberately absent: S68 already solved it the better way, by declaring the
     lift only inside a no-preference block and giving reduce its own static border affordance.
     That is the pattern to copy for anything new. Here the transform is dropped and every
     non-motion affordance (border, colour, shadow) is left untouched, so hover still responds.
     NOTE: no backticks — this stylesheet is a JS template literal and one would terminate it. */
  .tt-btn:hover, .mg-term:hover, .btn-primary:hover, .btn-ghost:hover, .card:hover { transform: none; }
  .vid-svg { transform: rotateX(4deg) rotateY(-6deg); }
  .vid-core, .vid-accent, .vid-halo { transform: none; opacity: 1; }
  .vid-word span { background-position: 30% 0; }
}
@media (max-width: 800px) { .story-band { grid-template-columns: 1fr; } }
/* ── Mobile nav — CSS-only collapsible drawer; actions stay pinned (no JS) ── */
@media (max-width: 860px) {
  .nav .wrap { flex-wrap: wrap; height: auto; min-height: 58px; padding-top: 9px; padding-bottom: 9px; gap: 12px; row-gap: 0; }
  .nav-burger { display: flex; order: 0; }
  /* Focusable-but-invisible checkbox, pinned at the burger so focus reads naturally. */
  .nav-toggle { display: block; position: absolute; top: 14px; left: 14px; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .brand { order: 1; }
  .nav-actions { order: 2; margin-left: auto; }
  /* S255 (CANON-041) — the drawer ANIMATES instead of snapping.
     It was display:none becoming display:flex, and display is not an animatable property, so no
     transition could ever apply no matter what easing was declared elsewhere. The element is now
     always laid out and collapsed by size/opacity instead, which IS animatable in a strict-CSP
     zero-JS checkbox drawer. visibility is transitioned with a delay so it flips to hidden only
     AFTER the collapse finishes — that keeps the links out of the tab order when closed rather
     than merely invisible. Margin and padding collapse too, or a closed drawer would still
     occupy about 10px under the header. Reduced motion needs no guard here: the global
     prefers-reduced-motion rule above already zeroes every transition with !important, so the
     drawer snaps instantly for anyone who asked for that.
     NOTE: no backticks in this comment — the whole stylesheet is a JS template literal, and a
     stray backtick here terminates it and breaks the module. */
  .nav-primary {
    order: 3; display: flex; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 3px; margin: 0; padding-bottom: 0;
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    -webkit-overflow-scrolling: touch;
    transition: max-height .28s var(--ease), opacity .18s var(--ease),
                margin .28s var(--ease), padding-bottom .28s var(--ease),
                visibility 0s linear .28s;
  }
  .nav-toggle:checked ~ .nav-primary {
    max-height: calc(100dvh - 150px); opacity: 1; visibility: visible; overflow-y: auto;
    /* Scroll chaining: without this, reaching the end of the drawer keeps scrolling the PAGE
       behind it, so the menu drifts away under the reader's thumb. Open PR #16 asked for this
       and it belongs with the drawer, not after it. */
    overscroll-behavior: contain;
    margin: 4px 0 6px; padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
    transition: max-height .28s var(--ease), opacity .18s var(--ease) .04s,
                margin .28s var(--ease), padding-bottom .28s var(--ease),
                visibility 0s linear 0s;
  }
  .nav-primary a { padding: 13px 15px; border-radius: 12px; font-size: 15.5px; min-height: 44px; display: flex; align-items: center; }
  .nav-primary a[aria-current="page"] { background: var(--surface-3); color: var(--cyan); }
  /* Category dropdowns become inline accordions in the drawer (full parity). */
  .nav-link, .nav-group { width: 100%; }
  .nav-group > summary { width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: 12px; font-size: 15.5px; min-height: 44px; justify-content: space-between; }
  .nav-group[open] > summary { color: var(--cyan); background: var(--surface-2); }
  .nav-drop { position: static; min-width: 0; padding: 2px 0 8px 12px; border: 0; background: transparent; box-shadow: none; animation: none; }
  .nav-drop a { padding: 11px 13px; min-height: 44px; font-size: 14.5px; }
  .acct-panel { width: min(330px, calc(100vw - 22px)); }
}
@media (max-width: 540px) { .acct-name { display: none; } .acct > summary { padding: 0 7px; } }
/* ── Small phones — tighten rhythm + keep wide blocks scrollable ──────── */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  section { padding: 40px 0; }
  .orbit { min-height: 260px; }
  .grid { gap: 14px; }
  .card, .panel { padding: 18px; }
  .hero { padding: clamp(48px, 14vw, 90px) 0 52px; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .cross-spine-track { grid-template-columns: 1fr; }
  .cross-spine-step { min-height: 56px; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ════ THE ROTATION — alternate themes (one-click rotation) ═══════════════
   Veil (default · :root above) → Void → Aurora → Ember → Tide → Bone. Every
   non-default palette is defined ONCE in themeRegistry.mjs (CSS variable
   overrides + a body wash) and emitted here, so the whole rotation ships in
   this single inline <style>. Each is inert until applyShellPersonalization()
   marks the root element with the chosen data-theme (zero-JS, strict-CSP). The
   reduced-motion freezes and component CSS above apply to every theme. */
[data-theme="void"] {
  --bg: #000000; --bg-2: #000000; --veil-deep: #000000; --surface: #0a0c0d; --surface-2: #0d1112; --surface-3: #11181a; --border: #284743; --border-soft: #182a27; --ink: #ffffff; --ink-soft: #d3e9e3; --ink-mute: #8fada6; --cyan: #7df0ff; --cyan-soft: #d9fbff; --lime: #c8ffe0; --violet: #cdb9ff; --gold: #e2bf88; --coral: #ffb088;
}
[data-theme="void"] body {
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(125,240,255,.16), transparent 60%),
    radial-gradient(960px 540px at 10% 4%, rgba(205,185,255,.12), transparent 55%),
    radial-gradient(800px 800px at 50% 118%, rgba(200,255,224,.08), transparent 60%),
    #000000;
}
[data-theme="void"] body::before { opacity: 1; }
[data-theme="void"] .brand .vmark { filter: drop-shadow(0 0 10px rgba(125,240,255,.8)); }
[data-theme="void"] .vr-ring2 { opacity: .75; }
[data-theme="void"] .btn-primary { box-shadow: 0 10px 38px -10px rgba(125,240,255,.9); }
[data-theme="void"] .card:hover { border-color: var(--cyan); box-shadow: inset 0 1px 0 rgba(125,240,255,.2), 0 24px 60px -22px rgba(125,240,255,.7); }
[data-theme="void"] .tt-btn { color: var(--cyan-soft); border-color: var(--cyan); }
[data-theme="void"] .tt-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
[data-theme="aurora"] {
  --bg: #070512; --bg-2: #0a0718; --veil-deep: #050310; --surface: #130f24; --surface-2: #181230; --surface-3: #1e1740; --border: #33285a; --border-soft: #241b40; --ink: #f4eeff; --ink-soft: #cfc1ec; --ink-mute: #9588b8; --cyan: #8ad7ff; --cyan-soft: #d6ecff; --lime: #a9ffe6; --violet: #c79bff; --gold: #ffc6e6; --coral: #ff8ad0;
}
[data-theme="aurora"] body {
  background:
    radial-gradient(1200px 640px at 80% -8%, rgba(199,155,255,.18), transparent 60%),
    radial-gradient(980px 560px at 8% 2%, rgba(255,138,208,.12), transparent 56%),
    radial-gradient(820px 820px at 50% 120%, rgba(138,215,255,.09), transparent 60%),
    #070512;
}
[data-theme="aurora"] body::before { opacity: 1; }
[data-theme="ember"] {
  --bg: #0c0705; --bg-2: #100906; --veil-deep: #080403; --surface: #1a0f0a; --surface-2: #21130c; --surface-3: #2a1810; --border: #4a2c1c; --border-soft: #2e1b12; --ink: #fdeee2; --ink-soft: #e8c6ac; --ink-mute: #b08a72; --cyan: #ffb86b; --cyan-soft: #ffd9b0; --lime: #ffd166; --violet: #ff8f6a; --gold: #ffcf7a; --coral: #ff7a59;
}
[data-theme="ember"] body {
  background:
    radial-gradient(1200px 640px at 78% -8%, rgba(255,184,107,.16), transparent 60%),
    radial-gradient(960px 560px at 10% 4%, rgba(255,122,89,.12), transparent 55%),
    radial-gradient(820px 820px at 50% 120%, rgba(255,207,122,.08), transparent 60%),
    #0c0705;
}
[data-theme="ember"] body::before { opacity: 1; }
[data-theme="tide"] {
  --bg: #03080f; --bg-2: #040b15; --veil-deep: #02060c; --surface: #08151f; --surface-2: #0b1b29; --surface-3: #0f2436; --border: #1b3a52; --border-soft: #122838; --ink: #e7f4ff; --ink-soft: #a7c8e0; --ink-mute: #6c8ba3; --cyan: #54d6ff; --cyan-soft: #bfecff; --lime: #8affdf; --violet: #8fb6ff; --gold: #9adfff; --coral: #67c6ff;
}
[data-theme="tide"] body {
  background:
    radial-gradient(1200px 640px at 78% -8%, rgba(84,214,255,.15), transparent 60%),
    radial-gradient(960px 560px at 10% 4%, rgba(143,182,255,.10), transparent 55%),
    radial-gradient(820px 820px at 50% 120%, rgba(138,255,223,.07), transparent 60%),
    #03080f;
}
[data-theme="tide"] body::before { opacity: 1; }
[data-theme="prism"] {
  --bg: #f7fbff; --bg-2: #eef7f8; --veil-deep: #e6f0f1; --surface: #ffffff; --surface-2: #edf7f5; --surface-3: #dff0f2; --border: #a8c4c6; --border-soft: #cfdddd; --ink: #14201f; --ink-soft: #344f4d; --ink-mute: #506d6b; --cyan: #006c7e; --cyan-soft: #034b57; --lime: #146c43; --violet: #6d4cc2; --gold: #8a5a00; --coral: #b9422b; --on-accent: #f7fbff;
}
[data-theme="prism"] { color-scheme: light; }
[data-theme="prism"] body {
  background:
    radial-gradient(1200px 620px at 80% -8%, rgba(0,108,126,.12), transparent 60%),
    radial-gradient(960px 560px at 8% 2%, rgba(109,76,194,.10), transparent 56%),
    radial-gradient(820px 820px at 50% 120%, rgba(20,108,67,.10), transparent 60%),
    #f7fbff;
}
[data-theme="prism"] body::before { opacity: .48; filter: blur(42px) saturate(.9); }
[data-theme="prism"] .nav { background: linear-gradient(180deg, rgba(247,251,255,.94), rgba(247,251,255,.72)); }
[data-theme="prism"] .brand .vmark { filter: drop-shadow(0 0 5px rgba(0,108,126,.35)); }
[data-theme="prism"] .btn-primary { box-shadow: 0 10px 28px -14px rgba(0,108,126,.55); }
[data-theme="prism"] .btn-primary, [data-theme="prism"] .nav-primary a[aria-current="page"], [data-theme="prism"] .nav-link[aria-current="page"] { color: #f7fbff; }
[data-theme="prism"] .card, [data-theme="prism"] .panel, [data-theme="prism"] .stat { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 34px -28px rgba(20,32,31,.42); }
[data-theme="prism"] .cross-spine { background: linear-gradient(150deg, rgba(0,108,126,.08), rgba(255,255,255,.86)); }
[data-theme="bone"] {
  --bg: #0a0a0b; --bg-2: #0d0d0f; --veil-deep: #070708; --surface: #141416; --surface-2: #1a1a1d; --surface-3: #212125; --border: #34343a; --border-soft: #242428; --ink: #f3f1ec; --ink-soft: #c2c0b8; --ink-mute: #86847d; --cyan: #d9d6cc; --cyan-soft: #efece4; --lime: #cfd6c8; --violet: #c0bdd2; --gold: #d8b878; --coral: #d8b878;
}
[data-theme="bone"] body {
  background:
    radial-gradient(1200px 640px at 78% -8%, rgba(217,214,204,.07), transparent 60%),
    radial-gradient(960px 560px at 10% 4%, rgba(216,184,120,.05), transparent 55%),
    radial-gradient(820px 820px at 50% 120%, rgba(192,189,210,.04), transparent 60%),
    #0a0a0b;
}
[data-theme="bone"] body::before { opacity: .55; }

/* The rotation toggle shows ONLY the active theme's name (CSS resolves it from
   html[data-theme], so it stays correct after the post-cache theme injection). */
.tt-name { display: none; }
.tt-name-veil { display: inline; }
[data-theme="void"] .tt-name-veil { display: none; }
[data-theme="void"] .tt-name-void { display: inline; }
[data-theme="aurora"] .tt-name-veil { display: none; }
[data-theme="aurora"] .tt-name-aurora { display: inline; }
[data-theme="ember"] .tt-name-veil { display: none; }
[data-theme="ember"] .tt-name-ember { display: inline; }
[data-theme="tide"] .tt-name-veil { display: none; }
[data-theme="tide"] .tt-name-tide { display: inline; }
[data-theme="prism"] .tt-name-veil { display: none; }
[data-theme="prism"] .tt-name-prism { display: inline; }
[data-theme="bone"] .tt-name-veil { display: none; }
[data-theme="bone"] .tt-name-bone { display: inline; }

.scope-note{margin-top:10px;font-size:12.5px}
.scope-note>summary{cursor:pointer;color:var(--cyan-soft);list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.scope-note>summary::before{content:"\2317";opacity:.7}
.scope-note>summary::-webkit-details-marker{display:none}
.scope-note[open]>summary{margin-bottom:2px}
.scope-dl{display:grid;gap:4px}
.scope-dl>div{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border-bottom:1px solid var(--border-soft)}
.scope-dl dt{color:var(--ink-mute)}
.scope-dl dd{margin:0;font-family:var(--font-mono);font-size:12px;text-align:right}
@media (max-width:640px){.scope-note>summary{min-height:44px}.scope-dl>div{flex-direction:column;gap:2px}.scope-dl dd{text-align:left}}