/* ————————————————————————————————————————————————
   SINGULARITY — FABLE / 25 · the finale
   iridescent particles on black · spectral oil-slick accents
   type: Major Mono Display (display) · Epilogue (body)
   ———————————————————————————————————————————————— */

:root {
  --black: #050507;
  --ink: #edeef6;
  --body-c: #b9bcc9;
  --mute: #83889a;
  --line: rgba(232, 233, 242, 0.1);
  --line-hot: rgba(53, 224, 200, 0.24);
  --teal: #35e0c8;
  --violet: #9d6bff;
  --gold: #ffc86b;
  --spectral: linear-gradient(100deg, var(--teal) 0%, var(--violet) 48%, var(--gold) 100%);
  --spectral-hard: linear-gradient(90deg, #35e0c8 0%, #6aa7ff 28%, #9d6bff 52%, #ffc86b 100%);
  --mono: 'Major Mono Display', monospace;
  --sans: 'Epilogue', sans-serif;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  scrollbar-color: rgba(53, 224, 200, 0.62) #050507;
  scrollbar-width: thin;
}
html, body { overflow-x: clip; }

body {
  background: var(--black);
  color: var(--body-c);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.72;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "kern" 1, "tnum" 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(53, 224, 200, 0.18);
}

::-webkit-scrollbar { width: 0.72rem; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(53, 224, 200, 0.86), rgba(157, 107, 255, 0.76), rgba(255, 200, 107, 0.74));
  border: 3px solid #050507;
}
::-webkit-scrollbar-thumb:hover { background: var(--spectral-hard); }

::selection { background: rgba(53, 224, 200, 0.88); color: #050507; }
::-moz-selection { background: rgba(53, 224, 200, 0.88); color: #050507; }

a { color: inherit; }
button { font: inherit; }
p { text-wrap: pretty; }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  left: var(--pad);
  top: 0.85rem;
  z-index: 100;
  transform: translateY(-170%);
  background: var(--ink);
  color: var(--black);
  font: 700 0.78rem var(--sans);
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ——— fixed layers ——— */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, rgba(58, 44, 112, 0.22), transparent 70%),
    var(--black);
}

.field-aura {
  position: fixed;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.46;
  mix-blend-mode: screen;
  background:
    linear-gradient(108deg, transparent 8%, rgba(53, 224, 200, 0.16) 24%, transparent 42%),
    linear-gradient(152deg, transparent 34%, rgba(157, 107, 255, 0.2) 52%, transparent 70%),
    linear-gradient(24deg, transparent 50%, rgba(255, 200, 107, 0.14) 68%, transparent 82%);
  filter: blur(22px) saturate(132%);
  animation: aura-drift 16s ease-in-out infinite alternate;
}
@keyframes aura-drift {
  from { transform: translate3d(-1.2%, 0, 0) skewX(-4deg); }
  to { transform: translate3d(1.4%, -1%, 0) skewX(4deg); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(2, 2, 4, 0.55) 100%);
}

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

.exposure-wash {
  position: fixed;
  inset: -14%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 62% 38%, rgba(237, 238, 246, 0.22), transparent 18rem),
    conic-gradient(from 126deg at 56% 48%, rgba(53, 224, 200, 0), rgba(53, 224, 200, 0.2), rgba(157, 107, 255, 0.2), rgba(255, 200, 107, 0.18), rgba(53, 224, 200, 0));
  filter: blur(20px) saturate(142%);
  transform: scale(0.96) rotate(-2deg);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
body.exposure-held .exposure-wash {
  opacity: 0.62;
  transform: scale(1.02) rotate(2deg);
  animation: exposure-breathe 4.8s ease-in-out infinite alternate;
}
@keyframes exposure-breathe {
  from { filter: blur(22px) saturate(132%); }
  to { filter: blur(16px) saturate(172%); }
}

/* ——— spectral text ——— */

.spectral {
  background: var(--spectral);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectral-drift 9s ease-in-out infinite alternate;
}
@keyframes spectral-drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* ——— header ——— */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.65rem, env(safe-area-inset-top)) var(--pad) 0.65rem;
  background:
    linear-gradient(90deg, rgba(5, 5, 7, 0.98), rgba(9, 8, 14, 0.92)),
    linear-gradient(90deg, rgba(53, 224, 200, 0.08), rgba(157, 107, 255, 0.06), rgba(255, 200, 107, 0.05));
  border-bottom: 1px solid rgba(232, 233, 242, 0.11);
  box-shadow: 0 18px 52px rgba(5, 5, 7, 0.66);
  backdrop-filter: blur(14px);
  animation: topbar-load 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes topbar-load {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

.brand {
  font-family: var(--mono);
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand-num {
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar nav { display: flex; gap: clamp(0.15rem, 1.5vw, 1rem); }
.topbar nav a {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #a5a9b8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.55rem;
  position: relative;
  transition: color 0.25s, text-shadow 0.25s;
}
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.55rem;
  height: 1px;
  background: var(--spectral-hard);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.topbar nav a:hover { color: var(--ink); text-shadow: 0 0 18px rgba(53, 224, 200, 0.28); }
.topbar nav a:hover::after,
.topbar nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ——— formation rail (right edge) ——— */

.rail {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.rail-dot { position: relative; display: block; }
.rail-dot i {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(232, 233, 242, 0.22);
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
}
.rail-dot b {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font: 400 0.62rem var(--mono);
  color: var(--mute);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s;
}
.rail-dot.on i {
  background: var(--teal);
  box-shadow: 0 0 10px rgba(53, 224, 200, 0.8);
  transform: scale(1.35);
}
.rail-dot.on b { opacity: 1; }

/* ——— formation HUD (bottom-left) ——— */

.hud {
  position: fixed;
  left: var(--pad);
  bottom: 1.15rem;
  z-index: 9;
  font: 400 0.66rem var(--mono);
  letter-spacing: 0;
  color: var(--mute);
  transition: opacity 0.5s;
}

/* ——— hero ——— */

main { position: relative; z-index: 4; isolation: isolate; }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: end;
  padding: 7.2rem var(--pad) 4.75rem;
  position: relative;
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 4.6rem var(--pad) 3.6rem;
  z-index: -1;
  opacity: 0.42;
  background:
    linear-gradient(rgba(232, 233, 242, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 242, 0.035) 1px, transparent 1px);
  background-size: 12rem 8rem;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.36), rgba(0,0,0,0.12) 36%, transparent 74%);
}
.hero::after {
  content: "final exposure / generated field / no bitmap media";
  position: absolute;
  right: var(--pad);
  bottom: 3.95rem;
  max-width: min(28rem, 42vw);
  color: rgba(232, 233, 242, 0.22);
  font: 400 0.64rem var(--mono);
  text-align: right;
  border-top: 1px solid rgba(232, 233, 242, 0.12);
  padding-top: 0.8rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1.4vw, 0.82rem);
  letter-spacing: 0;
  color: var(--teal);
  margin-bottom: 1.4rem;
}

.hero-copy {
  align-self: end;
  max-width: 46rem;
}

.hero h1 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(2.15rem, 6.1vw, 5.15rem);
  line-height: 1.06;
  color: var(--ink);
  text-transform: lowercase;
  max-width: 14.5ch;
  text-wrap: balance;
}
.hero h1 span { display: block; }

.hero-sub {
  margin-top: 1.6rem;
  max-width: 37rem;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  color: var(--body-c);
  text-shadow: 0 1px 18px rgba(5, 5, 7, 0.9);
}

.hero-ledger {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 0.72fr 1.48fr;
  max-width: 44rem;
  border-top: 1px solid rgba(232, 233, 242, 0.16);
  border-bottom: 1px solid rgba(232, 233, 242, 0.11);
  background:
    linear-gradient(90deg, rgba(53, 224, 200, 0.08), transparent 38%, rgba(157, 107, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 55px rgba(5, 5, 7, 0.28);
}
.hero-ledger div {
  min-width: 0;
  padding: 0.8rem 0.9rem 0.9rem;
  border-right: 1px solid rgba(232, 233, 242, 0.08);
}
.hero-ledger div:last-child { border-right: 0; }
.hero-ledger dt {
  font: 400 0.6rem var(--mono);
  color: var(--mute);
  margin-bottom: 0.28rem;
}
.hero-ledger dd {
  font: 400 clamp(0.92rem, 1.7vw, 1.35rem) var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.hero-ledger div:last-child dd {
  font-size: clamp(0.76rem, 1.05vw, 1rem);
  white-space: nowrap;
}
.hero-ledger div:nth-child(2) dd,
.hero-ledger div:nth-child(4) dd {
  background: var(--spectral-hard);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scroll-cue {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font: 400 0.66rem var(--mono);
  letter-spacing: 0;
  color: var(--mute);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.cue-line {
  display: block;
  width: 2.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal));
  animation: cue-pulse 2.4s ease-in-out infinite;
}
@keyframes cue-pulse {
  0%, 100% { opacity: 0.25; transform: scaleX(0.6); transform-origin: right; }
  50% { opacity: 1; transform: scaleX(1); }
}

/* ——— chapters ——— */

.chapter {
  min-height: 150vh;
  display: flex;
  align-items: center;
  padding: 12vh var(--pad);
  position: relative;
}
.chapter::before {
  content: "";
  position: absolute;
  inset: 18vh auto 16vh var(--pad);
  width: min(42rem, 42vw);
  border-top: 1px solid rgba(232, 233, 242, 0.08);
  border-bottom: 1px solid rgba(232, 233, 242, 0.04);
  pointer-events: none;
}
.align-right::before {
  left: auto;
  right: var(--pad);
}
.align-right { justify-content: flex-end; }

.ghost-num {
  position: absolute;
  top: 8vh;
  font-family: var(--mono);
  font-size: clamp(7rem, 22vw, 19rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 233, 242, 0.07);
  pointer-events: none;
  user-select: none;
}
.align-left .ghost-num { right: var(--pad); }
.align-right .ghost-num { left: var(--pad); }

.block {
  max-width: 37rem;
  position: relative;
  padding: 2.55rem 2.15rem;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(5, 5, 7, 0.98), rgba(5, 5, 7, 0.86) 70%, rgba(5, 5, 7, 0.5)),
    linear-gradient(145deg, rgba(53, 224, 200, 0.12), transparent 36%, rgba(157, 107, 255, 0.08));
  box-shadow: 0 0 70px rgba(5, 5, 7, 0.76), -34px 0 60px rgba(5, 5, 7, 0.42);
}
.block::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--spectral-hard);
  opacity: 0.78;
}
.block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background:
    repeating-linear-gradient(180deg, rgba(237, 238, 246, 0.24) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 12% 10%, rgba(53, 224, 200, 0.38), transparent 14rem);
  mix-blend-mode: screen;
}
.align-right .block {
  border-left: none;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(270deg, rgba(5, 5, 7, 0.98), rgba(5, 5, 7, 0.86) 70%, rgba(5, 5, 7, 0.5)),
    linear-gradient(215deg, rgba(255, 200, 107, 0.1), transparent 38%, rgba(157, 107, 255, 0.1));
  box-shadow: 0 0 70px rgba(5, 5, 7, 0.76), 34px 0 60px rgba(5, 5, 7, 0.42);
}
.align-right .block::before {
  left: auto;
  right: -1px;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--teal);
  margin-bottom: 1.2rem;
}

.chapter h2, .index-sec h2 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.12;
  color: var(--ink);
  text-transform: lowercase;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}

.block p + p { margin-top: 1.05rem; }

.micro-ledger {
  margin-top: 1.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(232, 233, 242, 0.09);
  color: #d2d5df;
  font-size: 0.9rem;
}
.micro-ledger span {
  display: block;
  margin-bottom: 0.3rem;
  font: 400 0.62rem var(--mono);
  color: var(--gold);
}

/* stats strip */
.stats {
  margin-top: 2.1rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1.4rem 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.stats dt {
  font: 400 0.6rem var(--mono);
  letter-spacing: 0;
  color: var(--mute);
  margin-bottom: 0.3rem;
}
.stats dd {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* pass-notes excerpts */
.notes {
  list-style: none;
  margin-top: 2rem;
  display: grid;
  gap: 0.9rem;
}
.notes li {
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  color: var(--body-c);
  font-style: italic;
  background:
    linear-gradient(90deg, rgba(53, 224, 200, 0.05), transparent 26%),
    rgba(5, 5, 7, 0.62);
  transition: border-color 0.35s, transform 0.35s, background 0.35s;
}
.notes li:hover {
  border-color: rgba(157, 107, 255, 0.45);
  transform: translateX(4px);
  background:
    linear-gradient(90deg, rgba(157, 107, 255, 0.09), transparent 30%),
    rgba(10, 9, 15, 0.78);
}
.note-src {
  display: block;
  font: 400 0.62rem var(--mono);
  font-style: normal;
  letter-spacing: 0;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

/* definition block */
.define {
  border: 1px solid var(--line);
  border-left: 2px solid;
  border-image: linear-gradient(180deg, var(--teal), var(--violet), var(--gold)) 1;
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0;
  background: rgba(5, 5, 7, 0.5);
}
.define-word {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.define-word span { font: 300 0.78rem var(--sans); color: var(--mute); letter-spacing: 0; }
.define-body { font-size: 0.98rem; }

/* three passes */
.passes {
  list-style: none;
  margin: 1.8rem 0;
  display: grid;
  gap: 1rem;
}
.passes li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  font-size: 0.95rem;
  color: var(--mute);
}
.passes li { grid-template-areas: "n t" "n d"; }
.pass-n {
  grid-area: n;
  font-family: var(--mono);
  font-size: 1.5rem;
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pass-t {
  grid-area: t;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink);
  letter-spacing: 0;
}
.pass-d { grid-area: d; }

/* ——— index ——— */

.index-sec {
  position: relative;
  min-height: 118vh;
  padding: 18vh var(--pad) 13vh;
  overflow: clip;
}
.index-sec::before {
  content: "";
  position: absolute;
  inset: 8vh var(--pad) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 224, 200, 0.5), rgba(157, 107, 255, 0.28), transparent);
  box-shadow: 0 0 60px rgba(53, 224, 200, 0.22);
}
.index-head {
  max-width: 48rem;
  margin-bottom: 3.2rem;
  position: relative;
  z-index: 1;
}
.index-sub { color: var(--mute); max-width: 36rem; margin-top: 0.4rem; }

.index-rune {
  position: absolute;
  right: var(--pad);
  top: 10vh;
  font: 400 clamp(8rem, 20vw, 21rem) / 0.8 var(--mono);
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 233, 242, 0.08);
  opacity: 0.8;
  pointer-events: none;
}

.closing-shot {
  max-width: 52rem;
  margin: -1.2rem 0 2.6rem auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid rgba(232, 233, 242, 0.16);
  box-shadow: 0 28px 80px rgba(5, 5, 7, 0.5);
  position: relative;
  z-index: 1;
}
.closing-shot::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(53, 224, 200, 0.34), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%);
  opacity: 0.18;
  mix-blend-mode: screen;
}
.closing-shot p {
  background:
    linear-gradient(120deg, rgba(53, 224, 200, 0.1), transparent 36%),
    rgba(5, 5, 7, 0.88);
  padding: 1.05rem 1.2rem;
  color: var(--body-c);
  font-size: 0.9rem;
}
.closing-shot span {
  display: block;
  margin-bottom: 0.45rem;
  font: 400 0.62rem var(--mono);
  letter-spacing: 0;
  color: var(--gold);
  text-transform: lowercase;
}

.exposure-trigger {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 0.8rem 1.2rem;
  border: 0;
  border-top: 1px solid rgba(232, 233, 242, 0.12);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(53, 224, 200, 0.1), rgba(157, 107, 255, 0.06), rgba(255, 200, 107, 0.08)),
    rgba(5, 5, 7, 0.94);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: 400 0.72rem var(--mono);
  letter-spacing: 0;
  text-transform: lowercase;
  transition: color 0.35s, background 0.35s, box-shadow 0.35s;
}
.exposure-trigger::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--spectral-hard);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.exposure-trigger i {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(237, 238, 246, 0.24);
  background:
    radial-gradient(circle, rgba(237, 238, 246, 0.94) 0 0.18rem, transparent 0.22rem),
    conic-gradient(from 90deg, rgba(53, 224, 200, 0.92), rgba(157, 107, 255, 0.8), rgba(255, 200, 107, 0.86), rgba(53, 224, 200, 0.92));
  box-shadow: 0 0 22px rgba(53, 224, 200, 0.2);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.exposure-trigger:hover,
.exposure-trigger:focus-visible,
body.exposure-held .exposure-trigger {
  background:
    linear-gradient(90deg, rgba(53, 224, 200, 0.18), rgba(157, 107, 255, 0.12), rgba(255, 200, 107, 0.14)),
    rgba(9, 8, 14, 0.98);
  box-shadow: inset 0 0 0 1px rgba(53, 224, 200, 0.18);
}
.exposure-trigger:hover::before,
.exposure-trigger:focus-visible::before,
body.exposure-held .exposure-trigger::before { transform: scaleX(1); }
.exposure-trigger:hover i,
.exposure-trigger:focus-visible i,
body.exposure-held .exposure-trigger i {
  transform: rotate(90deg) scale(1.06);
  box-shadow: 0 0 30px rgba(53, 224, 200, 0.42), 0 0 48px rgba(157, 107, 255, 0.24);
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 1px;
  background: rgba(232, 233, 242, 0.12);
  border: 1px solid rgba(232, 233, 242, 0.16);
  box-shadow: 0 32px 120px rgba(5, 5, 7, 0.6);
  position: relative;
  z-index: 1;
  --mx: 86%;
  --my: 86%;
}
.index-grid::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(20rem circle at var(--mx) var(--my), rgba(237, 238, 246, 0.16), rgba(53, 224, 200, 0.18) 18%, rgba(157, 107, 255, 0.13) 34%, transparent 66%);
  mix-blend-mode: screen;
  transition: opacity 0.35s var(--ease-out);
}
.index-grid.is-lit::before,
.index-grid:focus-within::before { opacity: 0.82; }
.index-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 7.25rem;
  padding: 1.05rem 1.2rem 1.15rem;
  background:
    linear-gradient(145deg, rgba(232, 233, 242, 0.018), transparent 45%),
    rgba(5, 5, 7, 0.92);
  text-decoration: none;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
  overflow: hidden;
  isolation: isolate;
}
.index-grid a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--spectral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.index-grid a:hover,
.index-grid a:focus-visible {
  background:
    linear-gradient(145deg, rgba(53, 224, 200, 0.08), transparent 38%, rgba(157, 107, 255, 0.06)),
    rgba(14, 13, 22, 0.97);
  transform: translateY(-2px);
}
.index-grid a:hover::after,
.index-grid a:focus-visible::after { transform: scaleX(1); }
.index-grid b {
  font: 400 0.62rem var(--mono);
  letter-spacing: 0;
  color: var(--mute);
}
.index-grid .slug {
  font-family: var(--mono);
  font-size: clamp(0.94rem, 1.1vw, 1.09rem);
  color: var(--ink);
  text-transform: lowercase;
  margin-top: auto;
  transition: color 0.3s;
}
.index-grid a:hover .slug,
.index-grid a:focus-visible .slug {
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.index-grid .desc {
  font-size: 0.78rem;
  color: var(--mute);
  letter-spacing: 0;
}
.index-grid a.here {
  background:
    linear-gradient(145deg, rgba(53, 224, 200, 0.1), rgba(5, 5, 7, 0.9) 44%, rgba(255, 200, 107, 0.08)) padding-box,
    var(--spectral) border-box;
  border: 1px solid transparent;
  margin: -1px;
  z-index: 1;
  box-shadow: 0 0 38px rgba(53, 224, 200, 0.14);
}
.index-grid a.here .slug {
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.index-grid a.here .desc { color: var(--body-c); }

/* ——— footer ——— */

.site-foot {
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--line);
  padding: 2.35rem var(--pad) calc(2.55rem + env(safe-area-inset-bottom));
  text-align: center;
  background:
    linear-gradient(90deg, transparent, rgba(53, 224, 200, 0.05), transparent),
    linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.9) 40%);
}
.foot-mark {
  font-family: var(--mono);
  font-size: 1.65rem;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.foot-mark span {
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-line { font-size: 0.88rem; color: var(--mute); margin-bottom: 1rem; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  font: 400 0.74rem var(--mono);
  color: var(--mute);
}
.foot-links a {
  color: var(--body-c);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.35rem;
  transition: color 0.25s;
}
.foot-links a:hover {
  background: var(--spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-links a:focus-visible {
  background: rgba(53, 224, 200, 0.1);
  color: var(--ink);
}

/* ——— reveal choreography ——— */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }
.reveal.d4 { transition-delay: 0.5s; }
.reveal.d5 { transition-delay: 0.66s; }
.in .reveal, .reveal.in {
  opacity: 1;
  transform: none;
}

/* ——— responsive ——— */

@media (max-width: 1000px) {
  .rail { display: none; }
  .hud { display: none; }
  .hero {
    grid-template-columns: 1fr;
    align-items: end;
  }
  .hero::after { display: none; }
  .index-grid a.here { grid-column: 1 / -1; }
}

@media (max-width: 834px) {
  .field-aura { opacity: 0.34; filter: blur(18px) saturate(128%); }
  .hero {
    padding-top: 6.8rem;
    padding-bottom: 5.5rem;
  }
  .hero::before {
    inset: 4.8rem 1.25rem 3.8rem;
    background-size: 7rem 6rem;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.14), transparent 70%);
  }
  .hero-copy { max-width: 38rem; }
  .hero-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 28rem; }
  .hero-ledger div:nth-child(2) { border-right: 0; }
  .hero-ledger div:nth-child(-n+2) { border-bottom: 1px solid rgba(232, 233, 242, 0.08); }
  .chapter { min-height: 130vh; }
  .chapter::before { display: none; }
  .align-right { justify-content: flex-start; }
  .align-right .block {
    border-right: none;
    border-left: 1px solid var(--line);
    background:
      linear-gradient(90deg, rgba(5, 5, 7, 0.98), rgba(5, 5, 7, 0.86) 74%, rgba(5, 5, 7, 0.5)),
      linear-gradient(145deg, rgba(53, 224, 200, 0.12), transparent 36%, rgba(157, 107, 255, 0.08));
  }
  .align-right .block::before { left: -1px; right: auto; }
  .stats { grid-template-columns: repeat(2, auto); }
  .topbar nav a.nav-wide { display: none; }
  .index-rune { top: 12vh; opacity: 0.48; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .topbar { padding-left: 1.25rem; padding-right: 1.25rem; }
  .topbar nav a { padding: 0 0.45rem; }
  .hero { padding: 6.4rem 1.25rem 5.3rem; }
  .hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.65rem); }
  .hero-sub { margin-top: 1.25rem; }
  .hero-ledger {
    margin-top: 1.25rem;
    max-width: 100%;
  }
  .hero-ledger div { padding: 0.7rem 0.75rem 0.75rem; }
  .hero-ledger dd { font-size: 0.94rem; }
  .block { padding: 1.6rem 1.1rem; }
  .chapter { min-height: 120vh; padding: 10vh 1.25rem; }
  .chapter h2, .index-sec h2 { font-size: clamp(1.55rem, 8vw, 2.15rem); }
  .closing-shot { grid-template-columns: 1fr; margin-left: 0; }
  .index-grid { grid-template-columns: 1fr 1fr; }
  .index-grid a { min-height: 5.25rem; padding: 0.85rem 0.75rem; }
  .index-grid .desc { display: none; }
  .scroll-cue { font-size: 0.58rem; }
  .topbar nav a:first-child { display: none; }
  .foot-links span { display: none; }
  .foot-links { gap: 0.15rem 0.65rem; }
  .index-sec { padding: 14vh 1.25rem 10vh; }
  .index-rune {
    right: 1.25rem;
    top: 7vh;
    font-size: 8rem;
  }
  .micro-ledger { font-size: 0.86rem; }
}

@media (max-width: 400px) {
  .index-grid .slug { font-size: 0.84rem; overflow-wrap: anywhere; }
  .brand { font-size: 0.92rem; }
  .topbar nav a { font-size: 0.7rem; padding: 0 0.36rem; }
}

/* ——— reduced motion ——— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .field-aura { animation: none; opacity: 0.25; }
  .spectral { animation: none; }
  .cue-line { animation: none; opacity: 0.6; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .topbar { animation: none; }
  .notes li, .index-grid a, .index-grid a::after, .topbar nav a, .topbar nav a::after { transition: none; }
}

/* ——— guide route ——— */

.guide-body {
  min-height: 100vh;
  background:
    linear-gradient(118deg, rgba(53, 224, 200, 0.14), transparent 34%),
    linear-gradient(154deg, transparent 44%, rgba(157, 107, 255, 0.15) 62%, transparent 84%),
    linear-gradient(23deg, transparent 42%, rgba(255, 200, 107, 0.09) 70%, transparent 92%),
    var(--black);
}
.guide-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.44;
  background:
    radial-gradient(circle at 78% 22%, rgba(53, 224, 200, 0.18), transparent 17rem),
    radial-gradient(circle at 18% 76%, rgba(157, 107, 255, 0.15), transparent 20rem),
    repeating-linear-gradient(115deg, transparent 0 5.2rem, rgba(237, 238, 246, 0.035) 5.2rem 5.26rem);
  mix-blend-mode: screen;
}

.guide-main {
  position: relative;
  z-index: 4;
  padding: 8.5rem var(--pad) 5rem;
  overflow: clip;
}
.guide-main::before {
  content: "";
  position: absolute;
  inset: 5rem 0 auto;
  height: min(34rem, 48vh);
  width: 100%;
  background:
    linear-gradient(rgba(232, 233, 242, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 242, 0.04) 1px, transparent 1px),
    conic-gradient(from 16deg at 72% 40%, rgba(53, 224, 200, 0.18), rgba(157, 107, 255, 0.16), rgba(255, 200, 107, 0.13), rgba(53, 224, 200, 0.18));
  background-size: 6rem 6rem, 6rem 6rem, auto;
  filter: blur(0.2px) saturate(122%);
  opacity: 0.42;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.44) 52%, transparent 90%);
  animation: guide-orbit 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes guide-orbit {
  from { transform: translateX(-1.5%); }
  to { transform: translateX(1.5%); }
}

.guide-hero {
  min-height: 42svh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 5rem);
  margin-bottom: 5rem;
}
.guide-hero h1 {
  font-family: var(--mono);
  font-size: clamp(2rem, 6vw, 5.5rem);
  line-height: 1.02;
  color: var(--ink);
  text-transform: lowercase;
  max-width: 10ch;
}
.guide-hero p {
  max-width: 37rem;
  color: var(--body-c);
  font-size: 1.06rem;
}
.guide-deck {
  margin-top: 1.4rem;
  border-left: 2px solid var(--line-hot);
  padding-left: 1rem;
  text-shadow: 0 1px 18px rgba(5, 5, 7, 0.78);
}

.guide-visual {
  width: 100%;
  max-width: 35rem;
  margin-left: auto;
  filter: drop-shadow(0 0 28px rgba(53, 224, 200, 0.2));
}
.guide-visual circle,
.guide-visual path,
.guide-visual text,
.guide-dust {
  transform-origin: 50% 50%;
  animation: guide-pulse 7s ease-in-out infinite alternate;
}
.guide-visual path:nth-of-type(2) { animation-delay: -1.8s; }
.guide-visual circle:nth-of-type(odd) { animation-delay: -3s; }
.guide-dust { animation-delay: -2.4s; }
@keyframes guide-pulse {
  to { opacity: 0.55; transform: scale(1.02); }
}

.guide-article {
  max-width: 70rem;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.guide-index {
  position: sticky;
  top: 6rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.guide-index a {
  display: flex;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  font: 400 0.72rem var(--mono);
  text-decoration: none;
  transition: color 0.25s, padding-left 0.25s;
}
.guide-index a:hover,
.guide-index a:focus-visible { color: var(--ink); padding-left: 0.35rem; }

.guide-copy {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(90deg, rgba(5, 5, 7, 0.55), rgba(5, 5, 7, 0.2));
  box-shadow: -28px 0 70px rgba(5, 5, 7, 0.22);
}
.guide-copy section + section { margin-top: 2.8rem; }
.guide-copy h2 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.18;
  color: var(--ink);
  text-transform: lowercase;
  margin-bottom: 1rem;
}
.guide-copy p { margin-top: 1rem; }
.guide-copy code {
  font-family: var(--mono);
  font-size: 0.78em;
  color: var(--gold);
}
.guide-tokens {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.guide-token {
  min-height: 7.8rem;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(232, 233, 242, 0.02), transparent 44%),
    rgba(5, 5, 7, 0.9);
}
.guide-token::before {
  content: "";
  display: block;
  width: 100%;
  height: 2.2rem;
  margin-bottom: 0.8rem;
  background: var(--swatch);
}
.guide-token b {
  display: block;
  font: 400 0.72rem var(--mono);
  color: var(--ink);
}
.guide-token span {
  display: block;
  margin-top: 0.25rem;
  color: var(--mute);
  font-size: 0.78rem;
}
.prompt-box {
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(53, 224, 200, 0.34);
  background:
    linear-gradient(112deg, rgba(53, 224, 200, 0.1), transparent 28%, rgba(157, 107, 255, 0.08)),
    rgba(5, 5, 7, 0.82);
  color: var(--ink);
  box-shadow: 0 22px 70px rgba(5, 5, 7, 0.38);
}

@media (max-width: 834px) {
  .guide-main { padding-top: 7.5rem; }
  .guide-main::before { width: 48vw; opacity: 0.22; }
  .guide-hero { grid-template-columns: 1fr; align-items: start; }
  .guide-visual { max-width: 25rem; margin: 0; }
  .guide-article { grid-template-columns: 1fr; }
  .guide-index { position: relative; top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); padding: 0; background: var(--line); }
  .guide-index a { border: 0; background: rgba(5, 5, 7, 0.88); padding: 0 0.8rem; }
  .guide-copy { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
  .guide-main { padding: 7rem 1.25rem 4rem; }
  .guide-hero { margin-bottom: 3.2rem; }
  .guide-hero h1 { font-size: 2.15rem; }
  .guide-visual { max-width: 100%; }
  .guide-index { grid-template-columns: 1fr; }
  .guide-tokens { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .exposure-wash,
  .guide-main::before,
  .guide-visual circle,
  .guide-visual path,
  .guide-visual text {
    animation: none;
  }
}