:root {
  --abyss: #050713;
  --glass: #00E5FF;
  --lime: #B8FF00;
  --pink: #FF2BD6;
  --violet: #7C3CFF;
  --chalk: #F8FFF7;
  --quiet: #7E9AA8;
  --grid: rgba(248, 255, 247, 0.075);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--abyss);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--chalk);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--abyss);
}

.design-compliance-terms {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.mono,
.notation,
.ruler-tick {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.aquarium {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px) 0 0 / 8.333vw 100%,
    radial-gradient(circle at 20% 20%, rgba(124, 60, 255, 0.34), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255, 43, 214, 0.2), transparent 34%),
    linear-gradient(180deg, #050713 0%, #061121 50%, #050713 100%);
}

.water-glow {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.glow-one {
  left: -14vw;
  top: 10vh;
  background: var(--glass);
  animation: driftGlow 16s ease-in-out infinite alternate;
}

.glow-two {
  right: -12vw;
  bottom: 5vh;
  background: var(--violet);
  animation: driftGlow 19s ease-in-out infinite alternate-reverse;
}

.bubble-layer {
  position: absolute;
  inset: -20vh 0;
  background-repeat: repeat;
  opacity: 0.72;
  will-change: transform;
}

.bubble-layer-slow {
  background-image:
    radial-gradient(circle at 12px 18px, rgba(0, 229, 255, 0.0) 0 8px, rgba(0, 229, 255, 0.85) 9px, transparent 10px),
    radial-gradient(circle at 140px 110px, transparent 0 17px, rgba(248, 255, 247, 0.35) 18px, transparent 20px);
  background-size: 260px 320px;
  animation: riseSlow 36s linear infinite;
}

.bubble-layer-mid {
  background-image:
    radial-gradient(circle at 70px 50px, transparent 0 11px, rgba(184, 255, 0, 0.55) 12px, transparent 14px),
    radial-gradient(circle at 180px 210px, transparent 0 5px, rgba(0, 229, 255, 0.8) 6px, transparent 8px);
  background-size: 310px 280px;
  animation: riseMid 24s linear infinite;
}

.bubble-layer-fast {
  background-image:
    radial-gradient(circle at 36px 80px, transparent 0 3px, rgba(255, 43, 214, 0.8) 4px, transparent 6px),
    radial-gradient(circle at 190px 130px, transparent 0 7px, rgba(248, 255, 247, 0.45) 8px, transparent 10px);
  background-size: 230px 210px;
  animation: riseFast 15s linear infinite;
}

.proof-ruler {
  position: fixed;
  left: 28px;
  top: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: translateY(-50%);
}

.ruler-line {
  position: absolute;
  left: 16px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(var(--glass), var(--pink));
  opacity: 0.55;
}

.ruler-bead {
  position: absolute;
  left: -5px;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime), 0 0 32px rgba(184, 255, 0, 0.7);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}

.ruler-tick {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: 50%;
  color: var(--quiet);
  background: rgba(5, 7, 19, 0.74);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ruler-tick.active {
  color: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 18px rgba(184, 255, 0, 0.45);
}

.ruler-tick.active::after {
  content: "";
  position: absolute;
  right: -11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--glass);
  animation: releaseBubble 0.75s ease-out;
}

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 16vh auto auto 1fr;
  gap: 0 22px;
  padding: 8vh 8vw 8vh 9vw;
  overflow: hidden;
  isolation: isolate;
}

.grid-plane {
  position: absolute;
  inset: 0 8vw 0 9vw;
  z-index: -1;
  opacity: 0.7;
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%,
    linear-gradient(180deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 13vh;
  transform: translateY(32px);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s;
}

.chapter-active .grid-plane {
  opacity: 1;
  transform: translateY(0);
}

.chapter-kicker {
  grid-column: 1 / span 3;
  grid-row: 1;
  align-self: end;
  color: var(--glass);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.68rem, 1.1vw, 0.88rem);
}

.wordmark,
.chapter h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.055em;
}

.wordmark {
  grid-column: 1 / span 8;
  grid-row: 2;
  font-size: clamp(5rem, 13.5vw, 16rem);
  text-shadow: 0 0 34px rgba(0, 229, 255, 0.28);
}

.hero-text,
.chapter-copy {
  color: var(--quiet);
  font-size: clamp(1rem, 1.45vw, 1.32rem);
  line-height: 1.55;
}

.hero-text {
  grid-column: 2 / span 4;
  grid-row: 3;
  max-width: 560px;
}

.chapter h2 {
  grid-column: 1 / span 6;
  grid-row: 2;
  font-size: clamp(4rem, 10vw, 11rem);
}

.chapter h2 span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248, 255, 247, 0.66);
  text-shadow: none;
}

.chapter-copy {
  grid-column: 2 / span 4;
  grid-row: 3;
  max-width: 560px;
}

.notation {
  grid-column: 1 / span 3;
  grid-row: 4;
  align-self: start;
  margin: 5vh 0 0;
  padding: 18px 20px;
  color: var(--chalk);
  font-size: clamp(0.8rem, 1vw, 1rem);
  line-height: 1.55;
  border-left: 2px solid var(--glass);
  background: rgba(0, 229, 255, 0.06);
  box-shadow: inset 0 0 30px rgba(0, 229, 255, 0.05);
}

.proof-diagram {
  grid-column: 7 / span 5;
  grid-row: 2 / span 3;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(46vw, 620px);
  aspect-ratio: 1 / 1;
  will-change: transform;
}

.diagram-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.2));
}

.floating-label {
  position: absolute;
  color: var(--glass);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(5, 7, 19, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.label-one { left: 12vw; top: 25vh; }
.label-two { right: 19vw; top: 18vh; color: var(--pink); border-color: rgba(255, 43, 214, 0.45); }
.label-three { right: 10vw; bottom: 22vh; color: var(--lime); border-color: rgba(184, 255, 0, 0.45); }
.label-four { left: 43vw; bottom: 13vh; color: var(--quiet); }

.logic-bubble,
.orbit-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 229, 255, 0.85);
  border-radius: 50%;
  color: var(--chalk);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: radial-gradient(circle at 35% 28%, rgba(248,255,247,.34), rgba(0,229,255,.08) 42%, rgba(5,7,19,.18) 70%);
  box-shadow: inset 0 0 22px rgba(0, 229, 255, 0.16), 0 0 24px rgba(0, 229, 255, 0.28);
}

.large { width: 148px; height: 148px; left: 10%; top: 12%; font-size: 3rem; }
.medium { width: 112px; height: 112px; right: 15%; top: 30%; font-size: 2.2rem; }
.small { width: 82px; height: 82px; left: 42%; bottom: 14%; color: var(--lime); }
.tiny { width: 54px; height: 54px; right: 16%; bottom: 20%; color: var(--pink); }

.scattered .logic-bubble {
  animation: bob 5.5s ease-in-out infinite;
}

.scattered .logic-bubble:nth-child(2),
.scattered .logic-bubble:nth-child(4) {
  animation-delay: -2s;
}

.node {
  width: 86px;
  height: 86px;
  z-index: 2;
  color: var(--lime);
}

.node-p { left: 25%; top: 40%; }
.node-q { right: 25%; top: 40%; }

.svg-circle,
.svg-square,
.svg-triangle,
.svg-diamond,
.bracket,
.draw-line,
.arrow-head {
  fill: rgba(0, 229, 255, 0.035);
  stroke: var(--glass);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.svg-circle.delay,
.svg-square.second {
  stroke: var(--violet);
}

.svg-triangle {
  fill: rgba(124, 60, 255, 0.08);
  stroke: var(--violet);
  transform-origin: center;
  animation: triangleFlip 5s ease-in-out infinite;
}

.svg-diamond {
  fill: rgba(255, 43, 214, 0.08);
  stroke: var(--pink);
}

.svg-diamond.hot {
  animation: contradictionPulse 1.8s ease-in-out infinite;
}

.draw-line,
.arrow-head,
.bracket {
  fill: none;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}

.chapter-active .draw-line,
.chapter-active .arrow-head,
.chapter-active .bracket {
  animation: drawStroke 1.25s ease-out forwards;
}

.chapter-active .arrow-head { animation-delay: 0.75s; }
.chapter-active .cross-a { animation-delay: 0.45s; stroke: var(--pink); }
.chapter-active .cross-b { animation-delay: 0.7s; stroke: var(--pink); }

.operator-badge,
.contradiction {
  position: absolute;
  right: 2%;
  bottom: 18%;
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(5, 7, 19, 0.62);
}

.operator-badge { color: var(--lime); }
.contradiction { color: var(--pink); box-shadow: 0 0 24px rgba(255, 43, 214, 0.34); }

.therefore-diagram {
  display: grid;
  place-items: center;
}

.therefore-mark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(10rem, 18vw, 18rem);
  color: var(--lime);
  text-shadow: 0 0 18px rgba(184, 255, 0, 0.85), 0 0 60px rgba(184, 255, 0, 0.35);
  animation: thereforeGlow 4s ease-in-out infinite;
}

.therefore-diagram::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 48px rgba(0, 229, 255, 0.14);
  animation: orbitRing 12s linear infinite;
}

.orbit-bubble {
  width: 64px;
  height: 64px;
  color: var(--lime);
  animation: bob 4s ease-in-out infinite;
}

.b1 { left: 48%; top: 8%; }
.b2 { right: 10%; top: 45%; animation-delay: -1s; }
.b3 { left: 45%; bottom: 8%; animation-delay: -2s; }
.b4 { left: 11%; top: 45%; animation-delay: -3s; }

.chapter h2,
.chapter-copy,
.notation,
.chapter-kicker,
.proof-diagram {
  opacity: 0.28;
  transform: translateY(34px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.8,.2,1);
}

.chapter-active h2,
.chapter-active .chapter-copy,
.chapter-active .notation,
.chapter-active .chapter-kicker,
.chapter-active .proof-diagram,
.hero.chapter-active .wordmark,
.hero.chapter-active .hero-text {
  opacity: 1;
  transform: translateY(0);
}

.hero .wordmark,
.hero .hero-text {
  opacity: 0.35;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}

@keyframes riseSlow { to { transform: translateY(-320px); } }
@keyframes riseMid { to { transform: translateY(-280px); } }
@keyframes riseFast { to { transform: translateY(-210px); } }
@keyframes driftGlow { to { transform: translate(8vw, -6vh) scale(1.12); } }
@keyframes bob { 50% { transform: translate3d(0, -18px, 0) scale(1.03); } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes releaseBubble { to { transform: translate(14px, -26px) scale(0.2); opacity: 0; } }
@keyframes triangleFlip { 50% { transform: rotateY(180deg) scale(0.96); } }
@keyframes contradictionPulse { 50% { filter: drop-shadow(0 0 28px rgba(255, 43, 214, 0.85)); } }
@keyframes thereforeGlow { 50% { transform: scale(1.04); text-shadow: 0 0 32px rgba(184, 255, 0, 1), 0 0 90px rgba(184, 255, 0, 0.5); } }
@keyframes orbitRing { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .proof-ruler {
    left: 12px;
  }

  .chapter {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 11vh auto auto auto;
    padding: 7vh 7vw 9vh 16vw;
  }

  .grid-plane {
    inset: 0 7vw 0 16vw;
    background-size: calc(100% / 6) 100%, 100% 13vh;
  }

  .wordmark,
  .chapter h2,
  .chapter-copy,
  .hero-text,
  .chapter-kicker,
  .notation,
  .proof-diagram {
    grid-column: 1 / -1;
  }

  .proof-diagram {
    grid-row: 4;
    width: min(72vw, 500px);
    margin-top: 2vh;
  }

  .notation {
    grid-row: 4;
    width: 48%;
    z-index: 3;
  }

  .floating-label {
    display: none;
  }
}