:root {
  /* Source Sans 3** for explanations to make the experience feel personal and inviting. */
  --morning-peach: #FFC8A2;
  --soft-apricot: #FF9F6E;
  --logic-coral: #F45D6C;
  --glass-lavender: #BBA7FF;
  --clear-sky-cyan: #75D9F0;
  --deep-ink-plum: #241A38;
  --milky-frost: #FFF7EE;
  --panel-white: rgba(255, 247, 238, 0.34);
  --edge: rgba(255,255,255,0.46);
  --inner-cyan: rgba(117,217,240,0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--deep-ink-plum);
  font-family: "Source Sans 3", system-ui, sans-serif;
  background: linear-gradient(135deg, #FFF7EE 0%, #FFC8A2 28%, #BBA7FF 62%, #75D9F0 100%);
  overflow-x: hidden;
}

.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 247, 238, 0.8), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(117, 217, 240, 0.42), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(244, 93, 108, 0.26), transparent 32%);
}

.orb { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .76; mix-blend-mode: screen; }
.orb-peach { width: 34vw; height: 34vw; left: -8vw; top: 10vh; background: #FFC8A2; animation: breathe 10s ease-in-out infinite; }
.orb-cyan { width: 28vw; height: 28vw; right: -5vw; top: 38vh; background: #75D9F0; animation: breathe 12s ease-in-out infinite reverse; }
.orb-coral { width: 22vw; height: 22vw; left: 44vw; bottom: -7vw; background: #F45D6C; animation: breathe 14s ease-in-out infinite; }
.scanlines { position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(36, 26, 56, .22) 8px); }

.bead-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.46);
  border-radius: 999px;
  background: rgba(255, 247, 238, 0.22);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 26px rgba(117,217,240,0.18), 0 18px 60px rgba(36,26,56,.12);
}

.nav-bead {
  width: 18px;
  height: 18px;
  position: relative;
  border-radius: 50%;
  text-decoration: none;
  background: rgba(255,247,238,.42);
  border: 1px solid rgba(255,255,255,.56);
  transition: width .35s ease, background .35s ease, box-shadow .35s ease;
}
.nav-bead span { position: absolute; inset: 5px; border-radius: 50%; background: var(--deep-ink-plum); opacity: .34; }
.nav-bead::after {
  content: attr(data-label);
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  font-family: "Alegreya Sans", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--milky-frost);
  background: rgba(36,26,56,.42);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: 4px 9px;
  backdrop-filter: blur(12px);
  transition: .25s ease;
}
.nav-bead:hover::after, .nav-bead:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.nav-bead.is-current { width: 36px; background: rgba(255,200,162,.5); box-shadow: 0 0 24px #FFC8A2; }
.nav-bead.is-current span { background: #F45D6C; opacity: 1; box-shadow: 0 0 18px #F45D6C; }

main { position: relative; z-index: 1; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  padding: 10vh 7vw;
  overflow: hidden;
  isolation: isolate;
}

.chamber::before {
  content: attr(data-chapter);
  position: absolute;
  right: 7vw;
  top: 12vh;
  font-family: "Recursive", monospace;
  font-size: clamp(64px, 12vw, 170px);
  font-weight: 800;
  color: rgba(255,247,238,.2);
  text-shadow: 2px 0 rgba(117,217,240,.24), -2px 0 rgba(244,93,108,.2);
  z-index: -1;
}

.chamber-dawn { background: linear-gradient(135deg, #FFF7EE 0%, #FFC8A2 28%, #BBA7FF 62%, #75D9F0 100%); }
.chamber-morning { background: radial-gradient(circle at 20% 20%, rgba(255,247,238,.72), transparent 30%), linear-gradient(145deg, #FFC8A2 0%, #FFF7EE 38%, #75D9F0 100%); }
.chamber-noon { background: radial-gradient(circle at 50% 42%, rgba(244,93,108,.42), transparent 22%), linear-gradient(135deg, #BBA7FF 0%, #FFF7EE 45%, #FF9F6E 100%); }
.chamber-afternoon { background: linear-gradient(135deg, #FFF7EE 0%, #BBA7FF 42%, #FFC8A2 74%, #75D9F0 100%); }
.chamber-evening { color: var(--milky-frost); background: radial-gradient(circle at 75% 20%, #F45D6C 0%, #241A38 68%); }

.glass-pane, .logic-note, .truth-table, .decision-note, .counter-stack, .clarity-meter, .glitch-card {
  border: 1px solid var(--edge);
  background: var(--panel-white);
  backdrop-filter: blur(23px) saturate(140%);
  box-shadow: inset 0 0 42px var(--inner-cyan), 0 28px 90px rgba(36,26,56,.18), 18px 20px 0 rgba(244,93,108,.08);
}

.glass-pane {
  grid-column: 2 / span 5;
  border-radius: 34px;
  padding: clamp(28px, 5vw, 64px);
  transform: translate3d(0, var(--float, 0px), 0) rotate(-1.4deg);
}
.diagonal-pane { grid-column: 5 / span 5; transform: translate3d(0, var(--float, 0px), 0) rotate(1.6deg); }
.contradiction-pane { grid-column: 2 / span 6; }
.repair-pane { grid-column: 4 / span 5; }
.final-pane { grid-column: 3 / span 6; text-align: center; background: rgba(255,247,238,.18); }

.chapter-label {
  margin: 0 0 18px;
  font-family: "Alegreya Sans", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 13px;
}

h1, h2 {
  margin: 0;
  font-family: "Alegreya Sans", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .94;
  font-size: clamp(48px, 7vw, 104px);
}
h2 { font-size: clamp(42px, 6vw, 86px); }
.copy { max-width: 620px; font-size: clamp(18px, 2vw, 24px); line-height: 1.42; margin: 24px 0 0; }

.domain-ghost, .evening-wordmark {
  position: absolute;
  inset-inline: 3vw;
  top: 22vh;
  font-family: "Alegreya Sans", system-ui, sans-serif;
  font-size: clamp(82px, 17vw, 260px);
  font-weight: 900;
  letter-spacing: -.08em;
  opacity: .22;
  filter: blur(4px);
  z-index: -1;
  white-space: nowrap;
}
.domain-ghost span, .evening-wordmark span { color: #F45D6C; text-shadow: 0 0 35px #FFC8A2; }
.evening-wordmark { color: #FFF7EE; top: 18vh; opacity: .12; }

.proof-path { position: absolute; left: 9vw; top: 18vh; display: flex; align-items: center; gap: 16px; }
.sun-dot { width: 24px; height: 24px; border-radius: 50%; background: #F45D6C; box-shadow: 0 0 36px #FFC8A2, 0 0 10px #FFF7EE inset; }
.path-line { width: 22vw; height: 2px; background: linear-gradient(90deg, #F45D6C, #75D9F0); transform: rotate(9deg); transform-origin: left; }
.path-tile, .syllogism-chain span, .broken-path span {
  font-family: "Recursive", monospace;
  border: 1px solid rgba(255,255,255,.46);
  background: rgba(255,247,238,.3);
  backdrop-filter: blur(12px);
  border-radius: 13px;
  padding: 8px 12px;
}

.logic-note { position: absolute; padding: 18px 22px; border-radius: 22px; font-size: 18px; max-width: 290px; transform: translate3d(0, calc(var(--float, 0px) * -1), 0); }
.logic-note span { font-family: "Recursive", monospace; color: #F45D6C; font-weight: 800; }
.note-left { left: 10vw; bottom: 14vh; }
.note-right { right: 8vw; bottom: 18vh; }
.final-note { left: 10vw; bottom: 12vh; background: rgba(255,247,238,.12); }

.venn { position: absolute; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; width: 260px; height: 260px; right: 10vw; bottom: 10vh; box-shadow: -70px 20px 0 rgba(187,167,255,.24), inset 0 0 55px rgba(117,217,240,.22); backdrop-filter: blur(10px); transform: translateY(calc(var(--float, 0px) * -1)); }
.bracket { position: absolute; right: 22vw; top: 22vh; font-family: "Recursive", monospace; font-size: 92px; color: rgba(36,26,56,.22); }

.syllogism-chain { position: absolute; left: 9vw; bottom: 16vh; display: flex; gap: 18px; transform: rotate(-8deg); }
.truth-table { position: absolute; right: 10vw; top: 24vh; display: grid; grid-template-columns: repeat(3, 54px); gap: 8px; padding: 18px; border-radius: 24px; font-family: "Recursive", monospace; transform: translateY(calc(var(--float, 0px) * -1)); }
.truth-table span { color: #F45D6C; }

.counter-stack, .clarity-meter { position: absolute; padding: 22px; border-radius: 26px; font-family: "Recursive", monospace; }
.counter-stack { left: 11vw; top: 18vh; transform: translateY(calc(var(--float, 0px) * -1)); }
.counter-stack strong, .clarity-meter strong { display: block; font-size: 58px; line-height: .9; color: #F45D6C; }
.counter-label, .clarity-meter span { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }

.broken-path { position: absolute; right: 10vw; top: 18vh; display: flex; align-items: center; gap: 12px; animation: jitter 2.8s infinite; }
.broken-path i { display: block; width: 70px; height: 2px; background: repeating-linear-gradient(90deg, #F45D6C 0 10px, transparent 10px 16px, #75D9F0 16px 25px); }
.glitch-card { position: absolute; left: 12vw; bottom: 13vh; border-radius: 26px; padding: 24px; font-family: "Recursive", monospace; font-size: 42px; color: #241A38; transform: translateY(calc(var(--float, 0px) * -1)); }
.glitch-card em { color: #75D9F0; margin-left: 12px; text-shadow: -3px 0 #F45D6C; font-style: normal; }

.glitch-word { position: relative; animation: softGlitch 4s infinite; }
.glitch-word::before, .glitch-word::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.glitch-word::before { color: #75D9F0; transform: translateX(3px); }
.glitch-word::after { color: #F45D6C; transform: translateX(-3px); }
.glitch-word.is-glitching::before, .glitch-word.is-glitching::after { opacity: .75; }

.decision-note { position: absolute; left: 10vw; top: 25vh; width: 260px; padding: 26px; border-radius: 12px 32px 32px 32px; transform: rotate(-7deg) translateY(calc(var(--float, 0px) * -1)); }
.decision-note span { font-family: "Recursive", monospace; color: #F45D6C; }
.decision-note strong { display: block; font-family: "Alegreya Sans", system-ui, sans-serif; font-size: 32px; line-height: 1; margin-top: 12px; }
.clarity-meter { right: 12vw; bottom: 18vh; }
.loop-line { position: absolute; right: 20vw; top: 22vh; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(255,255,255,.44); border-left-color: #F45D6C; border-bottom-color: #75D9F0; box-shadow: 0 0 40px rgba(117,217,240,.3); }

.sunset-loop { position: absolute; right: 14vw; bottom: 12vh; width: 220px; height: 220px; border: 1px solid rgba(255,247,238,.38); border-radius: 50%; box-shadow: inset 0 0 60px rgba(255,200,162,.16), 0 0 50px rgba(244,93,108,.28); }
.sunset-loop span { position: absolute; width: 18px; height: 18px; border-radius: 50%; right: 34px; top: 34px; background: #FFF7EE; box-shadow: 0 0 28px #FFC8A2; }

.drift-up, .drift-down { will-change: transform; transition: transform .2s linear; }

@keyframes breathe { 0%,100% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.08) translate(2vw,-1vh); } }
@keyframes jitter { 0%, 92%, 100% { transform: translate(0,0) rotate(3deg); } 94% { transform: translate(7px,-2px) rotate(3deg); } 96% { transform: translate(-5px,3px) rotate(3deg); } }
@keyframes softGlitch { 0%, 88%, 100% { text-shadow: none; } 90% { text-shadow: 4px 0 #75D9F0, -4px 0 #F45D6C; } 92% { text-shadow: -2px 0 #75D9F0, 2px 0 #F45D6C; } }

@media (max-width: 760px) {
  .chamber { display: block; padding: 15vh 22px 10vh; }
  .glass-pane { transform: translateY(var(--float, 0px)) rotate(0deg); }
  .diagonal-pane, .contradiction-pane, .repair-pane, .final-pane { grid-column: auto; }
  .logic-note, .truth-table, .decision-note, .counter-stack, .clarity-meter, .glitch-card { position: relative; inset: auto; margin: 24px 0; }
  .proof-path, .syllogism-chain, .broken-path, .loop-line, .sunset-loop, .venn, .bracket { opacity: .55; transform: scale(.8); }
  .domain-ghost, .evening-wordmark { white-space: normal; }
}