/* ==========================================================================
   Scroll of Fire — Codex of Reality
   codex.css v3.3  (Electric–Aetheric • Living Tech • Mobile-first)
   Big polish: denser tokens, sturdier header, calmer math FX, better a11y,
   faster paint, tighter mobile ergonomics, safer fallbacks.
   ========================================================================== */

/* ------------------------------ Design tokens ------------------------------ */
:root{
  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Layout */
  --maxw: 1160px;               /* +60px breathing room for wide math */
  --pad-card: 14px;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* Typographic scale */
  --fs--1: 12px;
  --fs-0: 14px;
  --fs-1: 16px;
  --fs-2: 18px;
  --fs-3: clamp(18px, 2.4vw, 22px);
  --fs-4: clamp(20px, 2.8vw, 26px);
  --fs-5: clamp(22px, 4.4vw, 34px);

  /* Palette base (dark) */
  --bg: #0a0a0e;
  --bg-elev: #0e0f15;
  --ink: #dfe9ef;
  --muted: #a9b4c0;
  --line: rgba(255,255,255,.12);

  /* Spectral accents */
  --spec-cyan: #7af3ff;
  --spec-gold: #f3c97a;
  --spec-violet: #b18cff;

  /* Focus ring */
  --ring: rgba(122,243,255,.72);
  --ring-outer: rgba(122,243,255,.24);
  --ring-inset: rgba(255,255,255,.06);

  /* Motion & easing */
  --tempo: 1;
  --dur-1: .16s; --dur-2: .28s; --dur-3: .45s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,.72,.08,1);

  /* Sticky */
  --head-h: clamp(52px, 7.2vh, 64px);
  --tabs-h: 42px;

  /* Hero */
  --hero-fit: contain;
  --hero-focal-mobile: 50% 40%;
  --hero-focal-desktop: 58% 50%;

  /* JS-driven coherence */
  --xi: .35;

  /* Primary accent alias */
  --accent: var(--spec-cyan);
}

/* ====================== CARRIER SKINS (living tech palettes) ====================== */
:root.carrier-432{ --accent:#7af3ff; --spec-cyan:#7af3ff; --tempo:1 }
:root.carrier-528{ --accent:#a4ff90; --spec-cyan:#a4ff90; --tempo:.9 }
:root.carrier-369{ --accent:#f3c97a; --spec-cyan:#f3c97a; --tempo:1.1 }
:root.carrier-144{ --accent:#b3e1ff; --spec-cyan:#b3e1ff; --tempo:1 }
:root.carrier-963{ --accent:#ffd1f3; --spec-cyan:#ffd1f3; --tempo:1 }

/* ------------------------------ Reset & Base ------------------------------ */
*,::before,::after{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; color-scheme:dark light; scroll-behavior:smooth }
body{
  margin:0; font:400 var(--fs-1)/1.62 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--ink); overflow-x:hidden; padding-bottom:var(--safe-bottom);
  background-image:
    radial-gradient(1100px 700px at 58% -8%, rgba(122,243,255,.06), transparent 60%),
    radial-gradient(1600px 900px at 20% 10%, rgba(200,140,255,.06), transparent 65%),
    linear-gradient(180deg,#0a0a0e 0%, #0a0a0d 40%, #0b0b10 100%);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:contain;
}
@media (prefers-color-scheme: light){
  body{
    background-image:
      radial-gradient(1200px 600px at 50% -5%, rgba(122,168,255,.08), transparent 60%),
      linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%)
  }
}
::selection{ background:rgba(122,243,255,.25); color:var(--ink) }
:focus-visible{ outline:2px solid var(--ring); box-shadow:0 0 0 4px var(--ring-outer), 0 0 0 1px var(--ring-inset) inset; outline-offset:2px; border-radius:10px }
a{ color:var(--ink); text-underline-offset:2px; transition:color var(--dur-1) var(--ease), text-shadow var(--dur-1) var(--ease) }
a:hover{ color:#fff; text-shadow:0 0 10px rgba(122,243,255,.35) }
a:focus-visible{ text-decoration:underline }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.center{text-align:center}.right{text-align:right}.nowrap{white-space:nowrap}
.hidden{display:none!important}
.kbd{ background:#11131a; border:1px solid #343842; border-bottom-width:3px; padding:.15em .4em; border-radius:6px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); font-family:ui-monospace,Menlo,Consolas,monospace }

/* ------------------------------ Header / Nav ------------------------------ */
header.site{
  position: sticky; top: 0; z-index: 1000;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  background: linear-gradient(180deg, rgba(9,10,14,.92), rgba(9,10,14,.84));
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(52,56,66,.8);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  max-width: var(--maxw); margin: 0 auto; padding: 10px 16px; position: relative;
}
.nav::after{ content:none }
.brand{ display:flex; gap:10px; align-items:center }
.brand .logo{
  width:28px; height:28px; border-radius:8px;
  background: conic-gradient(from 210deg, var(--spec-cyan), var(--spec-gold), var(--spec-violet));
  box-shadow: inset 0 0 12px rgba(122,243,255,.35), 0 0 18px rgba(200,140,255,.18);
}
.brand .kicker{ margin:0; font:800 clamp(18px,3.6vw,22px)/1 "Crimson Pro", Georgia, serif }

/* Quick actions bar */
.quick{
  display:flex; align-items:center; gap:8px; flex:1 1 auto; justify-content:flex-end;
  overflow-x:auto; overflow-y:hidden; padding:6px; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  background:rgba(16,18,24,.55); border:1px solid rgba(52,56,66,.9); border-radius:14px; flex-wrap:nowrap;
}
.quick a,.quick button{
  appearance:none; border:1px solid #343846; background:rgba(255,255,255,.04); color:var(--ink);
  padding:0 10px; min-width:80px; height:36px; line-height:34px; border-radius:10px; font:600 14px/1 Inter; cursor:pointer; text-decoration:none; scroll-snap-align:start; white-space:nowrap;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.quick .cta:hover{ border-color:#3b424e; box-shadow:0 0 0 1px rgba(122,243,255,.18) inset, 0 6px 18px rgba(0,0,0,.35); transform:translateY(-1px) }
.quick .cta:active{ transform:translateY(0) scale(.997) }

@media (max-width: 560px){
  .quick{
    flex:1 1 100%;
    min-width:0;
    -webkit-overflow-scrolling:touch;
    padding: 4px 4px 8px;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }
  .quick .cta{ white-space:nowrap }
  .brand .kicker{ font-size:18px }
}
@media (max-width:540px){ .quick a,.quick button{ height:34px; line-height:32px; padding:0 8px; font-size:13px } }
@media (max-width:520px){
  .quick{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px }
  .quick a,.quick button{ min-width:auto; padding:0 8px }
}

/* ------------------------------ Wrapper & Titles ------------------------------ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:16px 16px calc(80px + var(--safe-bottom)) }
.title{
  font-family:"Crimson Pro",Georgia,serif; font-weight:800; text-align:center; font-size:var(--fs-5);
  margin:8px 0 4px; letter-spacing:.3px;
  background:linear-gradient(90deg, var(--spec-cyan), var(--spec-gold), var(--spec-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(122,243,255,.18), 0 0 28px rgba(200,140,255,.16);
  animation:titleGlow 2.2s var(--ease-slow) both;
}
@keyframes titleGlow{ 0%{filter:drop-shadow(0 0 0 rgba(122,243,255,0))} 100%{filter:drop-shadow(0 0 12px rgba(122,243,255,.25)) drop-shadow(0 0 16px rgba(200,140,255,.22))} }
.subtitle{ text-align:center; color:var(--muted); font-style:italic; margin:0 0 12px }
.divider{ height:1px; margin:18px auto 24px; background:linear-gradient(90deg,transparent,rgba(122,243,255,.45),transparent), linear-gradient(90deg,transparent,var(--line),transparent); filter:drop-shadow(0 0 6px rgba(122,243,255,.18)) }
.goldline{ height:1px; margin:28px auto; background:linear-gradient(90deg,transparent,rgba(243,201,122,.55),transparent), linear-gradient(90deg,transparent,rgba(122,243,255,.15),transparent) }

/* ------------------------------ Tabs ------------------------------ */
.tabs{
  position:sticky; top:calc(var(--head-h) + var(--safe-top)); z-index:60;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 14px; padding:8px 12px;
  overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable both-edges;
  background:linear-gradient(180deg, rgba(12,14,18,.72), rgba(12,14,18,.58));
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border:1px solid rgba(52,56,66,.85); border-radius:14px;
  --ink-x:0px; --ink-w:8px; justify-content:center;
}
.tabs .tab{
  display:inline-flex; align-items:center; padding:8px 12px; min-height:38px;
  border:1px solid var(--line); border-radius:10px; text-decoration:none; font:600 14px/1 Inter;
  background:rgba(255,255,255,.04); color:var(--ink); transition:transform .14s var(--ease), background-color .14s var(--ease), border-color .14s var(--ease);
}
.tab--primary{ border-color:#35404a; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)) }
.tabs .tab:hover,.tabs .tab:focus-visible{ transform:translateY(-1px); background:rgba(255,255,255,.07); border-color:#3a3a44 }
.tabs .tab-ink{ position:absolute; left:var(--ink-x); width:var(--ink-w); height:2px; bottom:-6px; background:linear-gradient(90deg, var(--spec-cyan), var(--spec-gold), var(--spec-violet)); border-radius:2px; box-shadow:0 0 12px rgba(122,243,255,.45); opacity:.95; transition:left .25s var(--ease), width .25s var(--ease), opacity .25s var(--ease) }
:target{ scroll-margin-top: calc(var(--head-h) + var(--tabs-h) + 12px) }
@supports selector(body:has(.tabs)){ html{ scroll-padding-top: calc(var(--head-h) + var(--tabs-h) + 12px) } }
@media (max-width: 420px){ .tabs{ flex-wrap:nowrap; justify-content:flex-start } }

/* ------------------------------ Grid ------------------------------ */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.col-12{grid-column:span 12}.col-9{grid-column:span 9}.col-8{grid-column:span 8}.col-7{grid-column:span 7}.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
@media (max-width:980px){ .col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3{ grid-column:span 12 } }
@media (max-width:360px){ .grid{ gap:12px } }

/* ------------------------------ Cards / Tiles / CTAs ------------------------------ */
.card{
  position:relative; z-index:1; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--pad-card) var(--pad-card) calc(var(--pad-card) - 2px);
  box-shadow:0 6px 14px rgba(0,0,0,.35); transform:translateZ(0); overflow:hidden; isolation:isolate;
  opacity:0; transform:translateY(8px) scale(.995);
}
.reveal{ opacity:0; transform:translateY(8px) scale(.995); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); will-change: opacity, transform; }
.reveal.in,.card.visible{ opacity:1; transform:none }
.card::before,.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none }
.card::before{ box-shadow: inset 0 0 0 1px rgba(122,243,255,.18), inset 0 0 22px rgba(122,243,255,.08), inset 0 0 36px rgba(122,168,255,.06); mix-blend-mode:screen }
.card::after{
  background:
    conic-gradient(from 0deg at 12px 12px, rgba(122,243,255,.45) 0 25%, transparent 0 100%),
    conic-gradient(from 90deg at calc(100% - 12px) 12px, rgba(122,168,255,.45) 0 25%, transparent 0 100%),
    conic-gradient(from 180deg at 12px calc(100% - 12px), rgba(156,255,221,.45) 0 25%, transparent 0 100%),
    conic-gradient(from 270deg at calc(100% - 12px) calc(100% - 12px), rgba(243,201,122,.35) 0 25%, transparent 0 100%);
  mask:
    radial-gradient(12px 12px at 12px 12px, #000 90%, transparent 100%),
    radial-gradient(12px 12px at calc(100% - 12px) 12px, #000 90%, transparent 100%),
    radial-gradient(12px 12px at 12px calc(100% - 12px), #000 90%, transparent 100%),
    radial-gradient(12px 12px at calc(100% - 12px) calc(100% - 12px), #000 90%, transparent 100%);
  mask-composite:exclude; opacity:.26;
}
html:not(.js-ready) .card{ opacity:1!important; transform:none!important }

h1,h2,h3{ color:#fff; margin:8px 0 10px; line-height:1.22; text-shadow:0 0 10px rgba(122,243,255,.08) }
h2{ font-size:var(--fs-4) } h3{ font-size:var(--fs-3) }
p{ margin:8px 0 10px } .meta{ color:var(--muted); font-size:var(--fs-0) } .hint{ color:var(--muted); font-size:.95em }

.list{ margin:0; padding-left:18px } .list li{ margin:6px 0 }
.cta{
  display:inline-block; margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)); text-decoration:none; position:relative; overflow:hidden;
  transition:border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cta::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(122,243,255,.25), inset 0 0 16px rgba(122,243,255,.08); opacity:.75 }
@media (hover:hover){ .cta:hover{ border-color:#3a3a44; transform:translateY(-1px); box-shadow:0 0 18px rgba(122,243,255,.2) } }

.tile{
  display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  position:relative; isolation:isolate;
}
.tile::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(122,243,255,.18), inset 0 0 18px rgba(122,243,255,.06); opacity:.75; transition:opacity .18s var(--ease) }
@media (hover:hover){ .tile:hover{ transform:translateY(-2px); border-color:#3a3a44; box-shadow:0 10px 22px rgba(0,0,0,.35) } .tile:hover::after{ opacity:1 } }

/* ------------------------------ Hero (locked & auto-fit) ------------------------------ */
.hero{
  position:relative; margin:0 auto 10px; max-width:var(--maxw);
  border-radius:var(--radius-xl); overflow:clip; background:var(--bg-elev); isolation:isolate;
  box-shadow:0 16px 48px rgba(0,0,0,.46), inset 0 0 0 1px rgba(122,243,255,.10);
  aspect-ratio:21/9; will-change:transform;
}
@media (max-width:600px){ .hero{ aspect-ratio:16/9 } }
.hero .hero-img{
  display:block; width:100%; height:auto; object-fit:var(--hero-fit, contain);
  object-position:var(--hero-focal-mobile);
  background:var(--bg-elev);
}
@media (min-width:860px){ .hero .hero-img{ object-position:var(--hero-focal-desktop) } }
.hero::after{
  content:""; position:absolute; left:6%; right:6%; bottom:-14px; height:28px; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(0,0,0,.35), transparent 70%); filter:blur(8px);
}

/* Lightfield */
.hero-lights{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 78% 22%, rgba(164,255,144,.35), transparent 60%),
    radial-gradient(1px 1px at 32% 68%, rgba(122,243,255,.35), transparent 60%),
    radial-gradient(1px 1px at 88% 56%, rgba(255,209,243,.35), transparent 60%);
  opacity:.85; filter: blur(.2px);
  animation: lightsFlicker 7.5s ease-in-out infinite alternate;
}
.hero-lights.off{ display:none }
.hero-lights::before{
  content:""; position:absolute; inset:-10% -20%;
  background:
    linear-gradient(90deg, transparent 0%,
      color-mix(in srgb, var(--accent) 22%, #ffffff 8%) 35%,
      color-mix(in srgb, var(--accent) 45%, #ffffff 0%) 50%,
      color-mix(in srgb, var(--accent) 22%, #ffffff 8%) 65%,
      transparent 100%);
  opacity:.55; filter: blur(24px);
  transform: translate3d(-30%,-2%,0);
  animation: auroraSweep 18s linear infinite, auroraBob 7s ease-in-out infinite alternate;
  mix-blend-mode:screen; will-change: transform, opacity;
}
.hero-lights::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 30% at 18% 20%, color-mix(in srgb, var(--accent) 18%, #ffffff 0%) 0%, transparent 65%),
    radial-gradient(48% 38% at 82% 22%, rgba(255,209,243,.14) 0%, transparent 68%),
    radial-gradient(36% 28% at 50% 86%, rgba(164,255,144,.10) 0%, transparent 70%);
  filter: blur(10px); opacity:.7;
  animation: glowBreath 9.5s ease-in-out infinite alternate; mix-blend-mode:screen;
}
@keyframes auroraSweep{ 0%{ transform: translate3d(-30%,-2%,0)} 50%{ transform: translate3d(10%,3%,0)} 100%{ transform: translate3d(50%,-1%,0)} }
@keyframes auroraBob{ 0%{opacity:.48; filter: blur(22px)} 50%{opacity:.72; filter: blur(26px)} 100%{opacity:.58; filter: blur(24px)} }
@keyframes glowBreath{ 0%{opacity:.52; filter: blur(9px)} 50%{opacity:.80; filter: blur(12px)} 100%{opacity:.62; filter: blur(10px)} }
@keyframes lightsFlicker{ 0%{opacity:.70} 50%{opacity:.92} 100%{opacity:.80} }
@media (prefers-reduced-motion: reduce){
  .hero-lights, .hero-lights::before, .hero-lights::after { animation:none!important }
}

/* ------------------------------ Explore Dock ------------------------------ */
.explore-dock{
  position: fixed;
  left: 50%;
  bottom: calc(12px + var(--safe-bot, env(safe-area-inset-bottom, 0px)));
  transform: translate(-50%, calc(100% + 24px));
  z-index: 1000;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line, #2a2f3a);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(122,243,255,.12);
  transition: transform .28s var(--ease), opacity .28s var(--ease);
  opacity: 0; pointer-events: none;
}
.explore-dock.show{ transform: translate(-50%, 0); opacity: 1; pointer-events: auto }
.explore-dock .btn{
  appearance:none; border:1px solid #363c49; border-radius:10px; padding:8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color: var(--ink); font:600 14px/1 Inter, system-ui; text-decoration:none; white-space: nowrap;
}
.explore-dock .btn--primary{ border-color:#3a4250; box-shadow:0 0 0 1px rgba(122,243,255,.18) inset }
@media (min-width:900px){ .explore-dock{ display:none } }

/* ------------------------------ Tables ------------------------------ */
table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:var(--fs-0); box-shadow:0 0 0 1px rgba(122,243,255,.12) inset }
thead th{ background:linear-gradient(180deg,#16161d,#12121a); border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; font-weight:600; color:#f2f1ec; text-shadow:0 0 8px rgba(122,243,255,.12) }
tbody td{ border-top:1px solid var(--line); padding:10px 12px; vertical-align:top; color:var(--ink) }
tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015) }
@media (max-width:560px){ table{ display:block; overflow-x:auto; border-radius:12px } thead,tbody,tr,th,td{ white-space:nowrap } }

/* ------------------------------ Equations (MathJax) ------------------------------ */
.eq{
  position:relative; overflow:hidden; border-radius:12px; background:#111115; border:1px solid #26262c;
  box-shadow:
    inset 0 0 20px rgba(255,200,107,.03),
    0 0 14px rgba(122,243,255,.10),
    0 0 calc(8px + 18px * var(--xi,0)) rgba(122,243,255,.14);
  margin:8px 0 10px;
}
.eq .eq-scroll{
  overflow-x:auto; max-width:100%; padding:12px 16px; -webkit-overflow-scrolling:touch;
  background:repeating-linear-gradient(90deg, rgba(122,243,255,.05) 0 1px, transparent 1px 24px), linear-gradient(180deg, rgba(200,140,255,.05), transparent);
  scroll-snap-type:x proximity; scroll-padding-inline:16px;
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  scrollbar-gutter:stable both-edges; cursor:grab;
}
.eq .eq-scroll:active{ cursor:grabbing }
.eq mjx-container{
  display:block!important;
  font-size:clamp(16px, 2.2vw, 28px);
  line-height:1.35;
  filter:drop-shadow(0 0 10px rgba(255,200,107,.08));
  scroll-snap-align:start;
  padding-right:24px;
}
@media (max-width:560px){ .eq mjx-container{ font-size:clamp(16px, 4.8vw, 22px) } }
.eq mjx-container svg{ overflow:visible }

/* Equation card polish */
.eq-card{
  position: relative; display:flex; flex-direction:column;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 6%, rgba(10,12,18,.66)) 0%,
    rgba(10,12,18,.66) 8%,
    rgba(10,12,18,.66) 100%
  );
  border-radius:14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 8px 24px rgba(0,0,0,.35),
    0 1px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}
.eq-card::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:12px; border-radius:14px 14px 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  opacity:.25; pointer-events:none;
}
.eq-card .eq{
  border-radius:12px;
  background: radial-gradient(120% 120% at 100% 100%, rgba(255,255,255,.02), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  min-height:160px;
}
.eq-card.eq-sm .eq{ min-height:120px }
.eq-card.eq-lg .eq{ min-height:220px }
.eq-card .eq-scroll{
  padding:14px 12px;
  max-height: clamp(140px, 22vh, 260px);
  overflow:auto; scrollbar-gutter:stable both-edges;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
}
.eq-card .eq-scroll::-webkit-scrollbar{ height:10px; width:10px }
.eq-card .eq-scroll::-webkit-scrollbar-thumb{ background:#2b2f3a; border-radius:10px; border:2px solid #0e1118 }
.eq .mjx-svg{ overflow:visible }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .eq-card .eq{ transition: transform .18s ease, box-shadow .18s ease }
  .eq-card:hover .eq{
    transform: translateY(-1px) scale(1.01);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.02)),
      0 6px 18px rgba(0,0,0,.35);
  }
}

/* ====== EQUATION FX PRIMITIVES ====== */
.eq{ position:relative }
.eq .fx-layer{ pointer-events:none; position:absolute; inset:0; mix-blend-mode:screen; opacity:.9 }
.eq .beam{
  position:absolute; width:2px; height:160%; top:-30%;
  background:linear-gradient(180deg, rgba(122,243,255,0), rgba(122,243,255,.75), rgba(122,243,255,0));
  filter:blur(.5px) drop-shadow(0 0 10px rgba(122,243,255,.45));
  transform:translateX(0) rotate(12deg);
  animation: beamSlide var(--beam-speed, 24s) linear infinite; animation-delay: var(--d,0s);
}
.eq .beam.alt{
  width:1px;
  background:linear-gradient(180deg, rgba(243,201,122,0), rgba(243,201,122,.8), rgba(243,201,122,0));
  transform:translateX(0) rotate(-11deg);
  animation-duration: var(--beam-speed-alt, 28s);
}
@keyframes beamSlide{0%{left:-12%}100%{left:112%}}

.eq .orbit{
  position:absolute; inset:-12% -6%; transform: rotate(var(--tilt,10deg));
  animation: orbitSpin var(--orbit-speed, 32s) linear infinite;
  filter: drop-shadow(0 0 12px rgba(122,243,255,.25));
}
.eq .orbit.counter{ animation-direction: reverse; filter: drop-shadow(0 0 12px rgba(243,201,122,.25)) }
.eq .orb{
  position:absolute; top:50%; left:50%; width:2px; height:38%; transform-origin:0% -20%;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(122,243,255,.85), rgba(255,255,255,0));
  border-radius:2px; box-shadow:0 0 10px rgba(122,243,255,.4), 0 0 18px rgba(122,243,255,.24) inset;
}
.eq .orb.gold{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(243,201,122,.9), rgba(255,255,255,0));
  box-shadow:0 0 10px rgba(243,201,122,.45), 0 0 18px rgba(243,201,122,.25) inset;
}
@keyframes orbitSpin{ from{transform:rotate(var(--tilt,10deg)) rotate(0deg)} to{transform:rotate(var(--tilt,10deg)) rotate(360deg)} }

.eq .spiral{
  position:absolute; inset:-20%; border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(122,243,255,0) 0 40%, rgba(122,243,255,.18) 50%, rgba(122,243,255,0) 60%),
    radial-gradient(60% 60% at 50% 50%, rgba(122,243,255,.08), transparent 70%);
  animation: spiralSpin var(--spiral-speed, 36s) linear infinite; filter: blur(0.6px);
}
.eq .spiral.alt{
  background:
    conic-gradient(from 0deg, rgba(243,201,122,0) 0 42%, rgba(243,201,122,.18) 52%, rgba(243,201,122,0) 62%),
    radial-gradient(60% 60% at 50% 50%, rgba(243,201,122,.06), transparent 70%);
  animation-duration: var(--spiral-speed-alt, 40s);
}
@keyframes spiralSpin{ from{transform:rotate(0)} to{transform:rotate(360)} }

.eq .nebula{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 35%, rgba(122,243,255,.5), transparent 60%),
    radial-gradient(2px 2px at 40% 75%, rgba(243,201,122,.5), transparent 60%),
    radial-gradient(1px 1px at 85% 60%, rgba(200,140,255,.45), transparent 60%);
  animation: nebulaBlink 3.6s ease-in-out infinite alternate; opacity:.55; filter: blur(.2px);
}
@keyframes nebulaBlink{ 0%{opacity:.35; transform:translateY(0)} 50%{opacity:.7; transform:translateY(-1px)} 100%{opacity:.5} }

.eq .rays, .eq .dust, .eq .flare{ position:absolute; pointer-events:none }
.eq .rays{
  inset:-6% -4%;
  background:
    repeating-linear-gradient(115deg, rgba(122,243,255,.06), rgba(122,243,255,.06) 2px, transparent 2px 6px),
    repeating-linear-gradient(-65deg, rgba(243,201,122,.05), rgba(243,201,122,.05) 2px, transparent 2px 7px);
  mix-blend-mode:screen; opacity:.35; filter:blur(.6px);
  animation: raysDrift var(--rays-speed, 38s) linear infinite;
}
@keyframes raysDrift{ from{transform:translateX(-3%) rotate(0deg)} to{transform:translateX(3%) rotate(360deg)} }

.eq .dust{
  inset:0; opacity:.35; mix-blend-mode:screen;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 62% 66%, rgba(122,243,255,.35), transparent 60%),
    radial-gradient(1px 1px at 84% 44%, rgba(243,201,122,.35), transparent 60%);
  animation: dustBlink 4.2s ease-in-out infinite alternate;
}
@keyframes dustBlink{ 0%{opacity:.25} 50%{opacity:.55} 100%{opacity:.35} }

.eq .flare{
  width:120px; height:120px; right:-40px; bottom:-40px; border-radius:50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, #ffffff) , transparent 68%);
  filter: blur(10px); opacity:.25; transform:rotate(0.01deg);
}

@media (prefers-reduced-motion:reduce){
  .eq .fx-layer{display:none}
  .eq mjx-container{ filter:none!important }
}

/* Calmer variant */
.eq[data-fx="calm"] .fx-layer{
  opacity:.5; mix-blend-mode:screen;
  background:
    radial-gradient(120px 80px at 85% 90%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(80px 60px at 15% 15%, rgba(243,201,122,.06), transparent 60%);
}
.eq[data-fx="calm"] .beam,
.eq[data-fx="calm"] .orbit,
.eq[data-fx="calm"] .spiral,
.eq[data-fx="calm"] .nebula,
.eq[data-fx="calm"] .rays,
.eq[data-fx="calm"] .dust,
.eq[data-fx="calm"] .flare { display:none !important }

/* ------------------------------ HUD / Laser Grid ------------------------------ */
.laser-grid{
  position:fixed; inset:-10% -10% 0 -10%; pointer-events:none; z-index:0; mix-blend-mode:screen; opacity:.44;
  background:
    radial-gradient(1200px 600px at 65% -5%, rgba(122,243,255,.08), transparent 60%),
    repeating-linear-gradient(90deg, rgba(122,243,255,.08) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(243,201,122,.06) 0 1px, transparent 1px 26px);
  transform:translateZ(0);
}
@media (prefers-reduced-motion:no-preference){
  @keyframes gridDriftA{ 0%{transform:translateY(0)} 50%{transform:translateY(8px)} 100%{transform:translateY(0)} }
  @keyframes gridDriftB{ 0%{background-position:0 0, 0 0, 0 0} 100%{background-position:0 0, 60px 0, 0 60px} }
  .laser-grid{ animation:gridDriftA calc(16s * var(--tempo,1)) ease-in-out infinite, gridDriftB calc(22s * var(--tempo,1)) linear infinite }
}
@media (prefers-reduced-motion: reduce){
  .laser-grid{ animation:none!important }
}

/* ------------------------------ Ξ Coherence Meter ------------------------------ */
.xi-meter{position:fixed;right:16px;top:calc(var(--safe-top) + 10px);z-index:80;display:flex;align-items:center;gap:8px}
.xi-ring{width:28px;height:28px;border-radius:50%;border:1px solid rgba(122,243,255,.28);
  box-shadow:inset 0 0 8px rgba(122,243,255,.15), 0 0 18px rgba(122,243,255,.15);
  background:radial-gradient(circle at 50% 50%, rgba(122,243,255,.15), transparent 60%);
  position:relative;overflow:hidden}
.xi-dot{position:absolute;inset:5px;border-radius:50%;background:rgba(122,243,255,.9);
  box-shadow:0 0 16px rgba(122,243,255,.75), 0 0 28px rgba(200,140,255,.35)}
.xi-label{font:700 12px/1 Inter,system-ui;color:#dffeff;text-shadow:0 0 8px rgba(122,243,255,.45)}
@media (prefers-reduced-motion:no-preference){
  .xi-dot{animation:xiBreath calc(3.8s * var(--tempo,1)) ease-in-out infinite}
  @keyframes xiBreath{0%,100%{transform:scale(.85)}50%{transform:scale(1)}}
}

/* ------------------------------ Simple / Echo Mode ------------------------------ */
.simple-toggle{ display:flex; align-items:center; gap:10px; justify-content:center; margin:0 0 14px }
.simple-toggle input{ accent-color:#8be9ff; transform:scale(1.1) }
.eq-note{ display:none; color:var(--muted); font-style:italic; margin:8px 2px 0 }

body.simple-on .eq,
body.simple-on .eq-card .eq,
body.simple-on .eq-scroll,
body.simple-on .eq .fx-layer,
body.simple-on .eq .beam,
body.simple-on .eq .orbit,
body.simple-on .eq .spiral,
body.simple-on .eq .nebula,
body.simple-on .eq .rays,
body.simple-on .eq .dust,
body.simple-on .eq .flare { display:none !important }
body.simple-on .eq-note{ display:block; font-size: var(--fs-2) }

/* ------------------------------ Back to Top ------------------------------ */
.to-top{
  position:fixed; right:14px; bottom:calc(16px + var(--safe-bottom)); z-index:20;
  border-radius:12px; border:1px solid #2a2a33; background:rgba(12,12,16,.55); backdrop-filter:blur(6px);
  padding:10px 12px; font:600 13px/1 Inter; color:var(--ink); cursor:pointer; display:none;
}
.to-top.visible{ display:block }
.to-top:hover{ border-color:#3a3a44 }

/* Legacy id hook for existing JS */
#toTop{
  position:fixed;right:20px;bottom:20px;border-radius:50%;width:48px;height:48px;background:var(--accent);
  color:#000;font-weight:700;border:none;cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s
}
#toTop.visible{opacity:1;transform:none}

/* ------------------------------ Command Palette ------------------------------ */
.palette{ position:fixed; inset:0; z-index:80; display:none; background:rgba(10,10,14,.6); backdrop-filter:blur(8px) }
.palette.open{ display:block }
.palette .panel{ max-width:760px; margin:12vh auto; background:#101017; border:1px solid #2a2a33; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45) }
.palette input{
  width:100%; padding:14px 16px; background:#0c0c12; color:var(--ink); border:0; border-bottom:1px solid #23232c; font:500 16px/1.4 Inter
}
.palette ul{ list-style:none; margin:0; padding:10px }
.palette li{ padding:8px 10px; border-radius:10px; cursor:pointer }
.palette li:hover{ background:#15151e }
.palette li.sel{ background:#161621; outline:2px solid rgba(122,243,255,.35); box-shadow:0 0 0 4px rgba(122,243,255,.12) }
.palette input:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }
.palette a:focus-visible{ outline:2px solid var(--ring); border-radius:8px }

/* ------------------------------ Footer ------------------------------ */
footer.footer{ text-align:center; color:var(--muted); margin-top:20px; font-size:var(--fs-0) }

/* ------------------------------ Site Search Suggest ------------------------------ */
#site-suggest{
  position:absolute; top:100%; left:0; right:0; margin-top:8px; z-index:90;
  border:1px solid var(--line); border-radius:12px; background:#0f0f14;
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(122,243,255,.12);
  padding:10px;
}
#site-suggest a{
  display:block; padding:8px 10px; border-radius:10px; text-decoration:none; border:1px solid transparent
}
#site-suggest a:hover,#site-suggest a:focus-visible{ border-color:#3a3a44; background:rgba(255,255,255,.04) }

/* ------------------------------ Print ------------------------------ */
@media print{
  :root{ --bg:#fff; --ink:#000; --muted:#333; --line:#ccc }
  *{ box-shadow:none!important; text-shadow:none!important; background-image:none!important; animation:none!important }
  body{ background:#fff!important; color:#000!important }
  .wrap{ max-width:100%; padding:0 12mm }
  .hero,.laser-grid,.hero-caption,.mini-toc,header.site,.to-top{ display:none!important }
  .card{ border:1px solid #ccc; page-break-inside:avoid }
  a{ color:#000; text-decoration:underline }
  .cta{ border:1px solid #aaa }
  .goldline,.divider{ background:#ccc!important }
  .eq{ background:#fff; border:1px solid #ccc; box-shadow:none!important }
  mjx-container{ filter:none!important }
  table{ border:1px solid #ccc } thead th{ background:#f4f4f4; color:#000; text-shadow:none }
}

/* ------------------------------ Scrollbar ------------------------------ */
body{ scrollbar-width:thin; scrollbar-color:#2b2b35 #0f0f14 }
body::-webkit-scrollbar{ width:12px }
body::-webkit-scrollbar-track{ background:#0f0f14 }
body::-webkit-scrollbar-thumb{ background:#2b2b35; border-radius:10px; border:2px solid #0f0f14; box-shadow: inset 0 0 12px rgba(122,243,255,.15) }

/* ------------------------------ Performance / Fallbacks ------------------------------ */
@supports (content-visibility:auto){
  main>.grid,section,article,.card{ content-visibility:auto; contain-intrinsic-size:600px }
  .card{ contain-intrinsic-size:360px }
}
body.performance-warming .hero::before,
body.performance-warming .hero::after,
body.performance-warming .card::after,
body.performance-warming .card::before{ opacity:0!important }
body.performance-warming .card{ box-shadow:none!important }
@keyframes warmOff{ to{ opacity:1 } }
body.performance-warming{ animation:warmOff .9s linear forwards }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .card,.reveal{ opacity:1!important; transform:none!important }
  .laser-grid{ display:none!important }
}
@media (prefers-reduced-data:reduce){
  body{ background-image:none!important }
  .laser-grid,.card::before,.card::after{ display:none!important }
  .eq{ box-shadow:inset 0 0 12px rgba(255,200,107,.03) }
  .eq .fx-layer{ display:none!important }
}

/* Webview / platform fallbacks */
header.site,.tabs,.quick,.explore-dock,.palette .panel{
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px)
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  header.site,.tabs,.quick,.explore-dock,.palette{ background: rgba(12,14,18,.92) !important }
  .palette .panel{ background:#101017 !important }
}
header.site,.tabs{ position:-webkit-sticky; position:sticky }
@supports not (-webkit-mask-image: radial-gradient(#000, transparent)) {
  .hero .hero-img{ -webkit-mask-image:none !important; mask-image:none !important }
}
/* Aspect-ratio fallback */
@supports not (aspect-ratio: 1 / 1) {
  .hero { position: relative; height:auto }
  @media (max-width:600px){ .hero::before{ content:""; display:block; padding-top:56.25% } }
  @media (min-width:601px){ .hero::before{ content:""; display:block; padding-top:42.85% } }
  .hero > picture, .hero > img { position:absolute; inset:0 }
}
/* Scroll momentum fallback */
html, body { -webkit-overflow-scrolling: touch }

/* Color-mix fallbacks */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  a { text-decoration-color: var(--accent) }
  .divider { filter:none }
  .goldline { background: linear-gradient(90deg,transparent,var(--accent),transparent) }
  .tabs .tab-ink { box-shadow:none }
  input::placeholder, textarea::placeholder { color: #a7b0bb }
  .eq {
    box-shadow:
      inset 0 0 20px rgba(255,200,107,.03),
      0 0 14px rgba(122,243,255,.10),
      0 0 calc(8px + 18px * var(--xi,0)) var(--accent);
  }
  @media (hover:hover){
    .eq-card:hover .eq{
      box-shadow:
        inset 0 0 0 1px var(--accent),
        0 6px 18px rgba(0,0,0,.35);
    }
  }
}

/* Forced colors / High contrast */
@media (forced-colors: active) {
  :root { --line: GrayText; --ink: ButtonText; --muted: GrayText }
  * { forced-color-adjust: auto }
  header.site, .tabs, .quick, .explore-dock, .palette .panel {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
  }
  .card, .tile, .cta, .tab, .eq {
    border-color: CanvasText !important;
    box-shadow: none !important;
    background: Canvas !important;
  }
  .tab-ink, .divider, .goldline { background: CanvasText !important; box-shadow:none !important }
  a { text-decoration: underline }
}

/* Density + small view polish */
@media (max-width:320px){
  .brand .kicker { font-size: 16px }
  .quick { padding:4px }
  .quick a,.quick button{ height:32px; line-height:30px; font-size:12px }
  .tabs { padding:6px 8px }
  .tile { padding:10px }
}
.searchbox{ margin-top:6px }
@media (max-width:560px){ .searchbox{ margin-top:2px } }

/* Interop with “affect-off” kill switch */
.affect-off .title,
.affect-off h1, .affect-off h2, .affect-off h3,
.affect-off a, .affect-off .meta, .affect-off .hint { text-shadow:none!important }
.affect-off .eq { box-shadow: inset 0 0 12px rgba(255,200,107,.03), 0 0 0 rgba(0,0,0,0)!important }
.affect-off .tile, .affect-off .card, .affect-off .cta, .affect-off .tab { box-shadow:none!important; transform:none!important }

/* ------------------------------ Living text (home “living-all”) ------------------------------ */
body.living-all :where(h1,h2,h3,p,li,small,em,strong,span,a,button,label,.kicker,.subtitle,.meta,.hint,.eq-note){
  background: linear-gradient(90deg, rgba(255,255,255,.95), var(--accent), rgba(255,255,255,.9));
  background-size: 300% 100%;
  -webkit-background-clip:text; background-clip:text; color: transparent;
  animation: living-slide 9s linear infinite;
  filter: drop-shadow(0 0 calc(2px + 6px*var(--xi)) color-mix(in srgb, var(--accent) 25%, transparent));
}
.no-living, .logo, .laser-grid, img, video, canvas, svg path, svg rect, svg circle, svg polygon {
  background:none!important; color:inherit!important; -webkit-background-clip:initial!important; filter:none!important; animation:none!important
}
@keyframes living-slide{ 0%{ background-position: 0% 50% } 100%{ background-position: 300% 50% } }

/* ========================================================================== */
/* 13-Moon Skin Booster — aligns moons.html + mini bar with Codex styling     */
/* ========================================================================== */
.moon-badge{ gap:10px }
.pill{
  border-color: color-mix(in srgb, var(--spec-cyan) 28%, #2a3242);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(80% 60% at 50% 20%, rgba(122,243,255,.06), transparent 60%);
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Progress ring */
.ring{ width:132px; height:132px }
.ring-bg{ stroke:#1b2231 }
.ring-fg{
  stroke:url(#rg);
  filter: drop-shadow(0 0 6px rgba(122,243,255,.25)) drop-shadow(0 0 8px rgba(243,201,122,.2));
  transition: stroke-dasharray var(--dur-3) var(--ease);
}
.ring .label .big{ font-weight:900; letter-spacing:.3px }

/* Week dots */
.week{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-color:#2b3444 }
.dot{ background:#1b2231 }
.dot.on{
  background: radial-gradient(circle at 40% 35%, var(--spec-cyan), var(--spec-gold));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 10px rgba(122,243,255,.35);
}

/* Today/controls */
.lab-input{
  background:#0e1116; border-color:#2b3344;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 2px 10px rgba(0,0,0,.24) inset;
}
.lab-btn{
  border-color:#2b3344;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.lab-btn:hover{ border-color:#3a4250 }
a.dl{ border-color:#2b3344; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) }

/* Sim canvas frame */
#simMoon{
  border:1px solid #2b3344;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}

/* Year map highlight */
.is-today{
  box-shadow:0 0 0 1px #7af3ff55, inset 0 0 0 1px #7af3ff33, 0 10px 22px rgba(0,0,0,.35);
}

/* Source chip resonance glow (toggled by JS) */
#sourceChip{ transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease) }
#sourceChip:hover{ transform: translateY(-1px) }

/* Toast polish */
.toast{
  background:#0f141d; border-color:#30394a; color:#e6fbff;
  box-shadow: 0 14px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
}

/* 13-Moon Mini Bar (index.html widget) */
.moonbar{
  --ring-size: 76px;
  border-color:#2b3344;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    radial-gradient(140% 80% at 100% 0%, rgba(122,243,255,.05), transparent 60%);
  box-shadow:0 10px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.02);
}
.moonbar .mb-bg{ stroke:#1b2231 }
.moonbar .mb-fg{
  stroke:url(#mbGrad);
  filter: drop-shadow(0 0 6px rgba(122,243,255,.25)) drop-shadow(0 0 8px rgba(243,201,122,.2));
  transition: stroke-dasharray var(--dur-3) var(--ease);
}
.moonbar .tag.yhwh{ box-shadow:0 0 0 1px #7af3ff22, inset 0 0 0 1px #7af3ff18 }
.moonbar.yhwh-on .tag.yhwh{
  box-shadow:0 0 0 1px #7af3ff66, 0 0 18px #7af3ff33, inset 0 0 0 1px #7af3ff33;
}

/* Reduced motion: freeze arc transitions if added later */
@media (prefers-reduced-motion: reduce){
  .ring-fg,.moonbar .mb-fg{ transition:none!important }
}

/* ------------------------------ Heavenly toggle ------------------------------ */
.heaven-cta{
  position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1000; border:1px solid var(--line); border-radius:12px;
  padding:.48rem .7rem; font-weight:800; letter-spacing:.2px; cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.heaven-cta[aria-pressed="true"]{
  box-shadow:0 0 0 1px #7af3ff55, 0 0 16px #7af3ff33, inset 0 0 0 1px #7af3ff22;
}
@media (max-width:560px){ .heaven-cta{ right:10px } }
@media (prefers-reduced-motion:reduce){ .heaven-cta{ display:none !important } }
@media (prefers-reduced-data:reduce){ .heaven-cta{ display:none !important } }