:root {
  /* Typography source notes: IBM Plex Mono" — for timestamps; Space Grotesk" — clean enough for futuristic transaction language. */
  --abyss: #07142F;
  --submarine: #0B2D5C;
  --cyan: #7CF7FF;
  --lime: #B8FF4D;
  --coral: #FF6B8A;
  --lavender: #BFA7FF;
  --foam: #F2FBFF;
  --display: "Gloria Hallelujah", cursive;
  --body: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--abyss); color: var(--foam); }
body { font-family: var(--body); cursor: crosshair; }
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 30% 20%, #7CF7FF44, transparent 38%), radial-gradient(circle at 80% 75%, #BFA7FF2e, transparent 34%), conic-gradient(from 120deg at 50% 50%, #07142F, #0B2D5C, #07142F, #07142F);
}
body::after { opacity: .35; filter: blur(28px); background: repeating-linear-gradient(115deg, transparent 0 38px, #7CF7FF14 40px 43px, transparent 48px 110px); }

.stage { position: relative; z-index: 1; width: 100vw; height: 100vh; overflow: hidden; }
.track { display: flex; width: 500vw; height: 100%; transform: translate3d(0,0,0); transition: transform 900ms cubic-bezier(.2,.8,.16,1); }
.panel { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; overflow: hidden; background: linear-gradient(110deg, #07142F 0%, #0B2D5C 100%); }
.panel::before { content: ""; position: absolute; inset: 7vh 4vw; border: 1px solid #7CF7FF29; border-radius: 42px; background: #F2FBFF06; box-shadow: inset 0 0 90px #7CF7FF12; backdrop-filter: blur(2px); }
.panel::after { content: ""; position: absolute; width: 42vw; height: 42vw; border-radius: 50%; background: #BFA7FF1f; filter: blur(44px); right: -18vw; top: 8vh; }
.panel-grid { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1.1vw; padding: 8vh 6vw 10vh; }

.fixed-labmark { position: fixed; top: 24px; left: 30px; z-index: 8; font-family: var(--mono); color: var(--cyan); letter-spacing: .12em; font-size: 12px; text-transform: uppercase; padding: 10px 13px; border: 1px solid #7CF7FF55; border-radius: 999px; background: #07142F99; backdrop-filter: blur(18px); }
.compass-label { position: fixed; bottom: 31px; left: 242px; z-index: 8; font-family: var(--mono); color: #F2FBFFbb; font-size: 11px; letter-spacing: .13em; }
.progress-rail { position: fixed; left: 30px; bottom: 26px; z-index: 9; display: flex; gap: 13px; align-items: center; }
.progress-rail::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--lavender), var(--coral)); opacity: .45; }
.rail-dot { position: relative; width: 28px; height: 28px; border: 1px solid #7CF7FF77; border-radius: 45% 55% 50% 60%; background: #07142Fcc; padding: 0; transition: .35s ease; }
.rail-dot:nth-child(2n) { border-radius: 60% 45% 55% 40%; transform: rotate(-8deg); }
.rail-dot span { position: absolute; bottom: 34px; left: -9px; font-family: var(--mono); color: var(--foam); font-size: 9px; opacity: 0; transform: translateY(6px); transition: .25s; }
.rail-dot.is-active { background: var(--cyan); box-shadow: 0 0 26px #7CF7FF; transform: scale(1.15) rotate(9deg); }
.rail-dot.is-active span, .rail-dot:hover span { opacity: 1; transform: translateY(0); }

.chapter-code { grid-column: 2 / span 4; grid-row: 2; font-family: var(--mono); color: var(--lime); font-size: clamp(.72rem, 1vw, .95rem); letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: .86; margin: 0; color: var(--foam); text-shadow: 0 0 24px #7CF7FF30; }
h1 { grid-column: 1 / span 7; grid-row: 3 / span 3; font-size: clamp(3.8rem, 9vw, 9rem); transform: translateX(-1vw); }
h1 span, h2 span { display: block; opacity: 0; transform: translateY(25px) rotate(-3deg); animation: writeIn 900ms forwards; }
h1 span:nth-child(2), h2 span:nth-child(2) { color: var(--cyan); transform: translateY(30px) rotate(4deg); animation-delay: 250ms; }
h2 { grid-column: 2 / span 5; grid-row: 3 / span 2; font-size: clamp(3.8rem, 8vw, 8.2rem); }
.thesis, .panel p { grid-column: 2 / span 4; grid-row: 6 / span 2; margin: 0; font-size: clamp(1rem, 1.5vw, 1.45rem); line-height: 1.35; color: #F2FBFFdd; }
.panel p::first-line { color: var(--foam); }

.mega-bubble, .reef-map, .bloom-diagram, .final-bubble, .stream-core, .merge-bubble, .bubble-small { backdrop-filter: blur(18px); background: radial-gradient(circle at 28% 24%, #F2FBFFb8, #7CF7FF30 23%, #0B2D5C55 64%, #07142F33); border: 1px solid #F2FBFF80; box-shadow: inset -18px -24px 44px #07142F66, 0 0 70px #7CF7FF30; }
.mega-bubble { grid-column: 7 / span 4; grid-row: 2 / span 5; border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--abyss); font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3.4rem); animation: float 8s ease-in-out infinite; }
.bubble-label { position: absolute; top: 19%; left: 15%; font-family: var(--mono); font-size: 11px; color: var(--coral); letter-spacing: .12em; text-transform: uppercase; }
.receipt-glyph { width: 84px; height: 92px; border-radius: 12px; border: 2px dashed #07142F99; background: repeating-linear-gradient(0deg, transparent 0 12px, #07142F55 13px 15px); transform: rotate(-10deg); opacity: .55; }
.note { position: absolute; z-index: 3; font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 2rem); padding: 9px 16px; border-radius: 18px; transform: rotate(-8deg); }
.note.coral { background: var(--coral); color: var(--abyss); right: 17vw; bottom: 18vh; }.note.lime { background: var(--lime); color: var(--abyss); right: 15vw; top: 20vh; transform: rotate(7deg); }
.memphis.triangle { position: absolute; right: 9vw; top: 16vh; width: 0; height: 0; border-left: 48px solid transparent; border-right: 48px solid transparent; border-bottom: 86px solid var(--coral); filter: drop-shadow(0 0 18px #FF6B8A88); animation: pop 4s infinite; }
.memphis.dots { position: absolute; left: 51vw; bottom: 15vh; width: 145px; height: 110px; background-image: radial-gradient(circle, var(--lime) 3px, transparent 4px); background-size: 22px 22px; transform: rotate(11deg); }

.friction .panel-grid { filter: blur(.7px); transition: filter .5s; }.friction:hover .panel-grid { filter: blur(0); }
.reef-map { grid-column: 6 / span 5; grid-row: 2 / span 5; border-radius: 48px; position: relative; overflow: hidden; background-color: #0B2D5C88; }
.reef-map::before { content: ""; position: absolute; inset: 18%; border-top: 7px dotted var(--cyan); border-radius: 50%; transform: rotate(-18deg); filter: drop-shadow(0 0 12px #7CF7FF); }
.route-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 18px var(--cyan); animation: pulse 1.6s infinite alternate; }.d1{left:17%;top:62%}.d2{left:32%;top:37%;animation-delay:.2s}.d3{left:49%;top:54%;animation-delay:.4s}.d4{left:65%;top:31%;animation-delay:.6s}.d5{left:78%;top:46%;animation-delay:.8s}
.obstacle { position: absolute; display: grid; place-items: center; font-family: var(--display); color: var(--abyss); font-size: 1.6rem; }.coral-block{left:25%;top:48%;width:90px;height:80px;background:var(--coral);border-radius:22px;transform:rotate(12deg)}.lime-zig{right:22%;top:22%;width:104px;height:64px;background:var(--lime);clip-path:polygon(0 25%,25% 0,50% 25%,75% 0,100% 25%,75% 100%,50% 75%,25% 100%)}.lavender-disc{right:20%;bottom:18%;width:86px;height:86px;border-radius:50%;background:var(--lavender)}
.qr-bubble { position: absolute; right: 8vw; bottom: 12vh; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; }.qr-bubble i{width:48px;height:48px;background:conic-gradient(var(--abyss) 25%,transparent 0 50%,var(--abyss) 0 75%,transparent 0);background-size:18px 18px;}

.merge-field { grid-column: 6 / span 5; grid-row: 2 / span 5; position: relative; }.merge-bubble { position: absolute; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); color: var(--abyss); animation: merge 6s ease-in-out infinite; }.b1{left:4%;top:18%}.b2{left:28%;top:62%;animation-delay:.7s}.b3{right:10%;top:23%;animation-delay:1.3s}.stream-core { position: absolute; left: 22%; top: 36%; width: 58%; height: 25%; border-radius: 999px; display: grid; place-items: center; font-family: var(--display); font-size: 2rem; color: var(--abyss); }
.orbit-note { position: absolute; font-family: var(--display); color: var(--lime); font-size: 1.5rem; }.n1{right:22vw;top:19vh;animation:orbit 7s linear infinite}.n2{right:9vw;bottom:22vh;color:var(--coral);animation:orbit 9s linear infinite reverse}

.bloom-diagram { grid-column: 6 / span 5; grid-row: 2 / span 5; position: relative; border-radius: 50%; background: #07142F66; }.ring { position: absolute; inset: 46%; border: 2px solid var(--cyan); border-radius: 50%; animation: bloom 3.8s ease-out infinite; }.r2{animation-delay:.7s;border-color:var(--lavender)}.r3{animation-delay:1.4s;border-color:var(--lime)}.r4{animation-delay:2.1s;border-color:var(--coral)}.bloom-center { position: absolute; inset: 36%; border-radius: 50%; background: var(--foam); color: var(--abyss); display: grid; place-items: center; font-family: var(--display); font-size: 1.8rem; transform: rotate(-8deg); }
.specimen-strip { grid-column: 2 / span 5; grid-row: 7; display: flex; gap: 13px; font-family: var(--mono); }.specimen-strip span { padding: 10px 13px; border: 1px solid #7CF7FF66; border-radius: 999px; background: #0B2D5Caa; }
.future { background: radial-gradient(circle at 72% 40%, #7CF7FF28, transparent 32%), linear-gradient(110deg, #07142F 0%, #07142F 58%, #0B2D5C 100%); }
.final-bubble { grid-column: 7 / span 4; grid-row: 3 / span 3; border-radius: 999px 50% 55% 999px; display: grid; place-items: center; font-family: var(--display); font-size: clamp(1.8rem, 3.1vw, 4rem); color: var(--abyss); padding: 2rem; text-align: center; }.final-note{right:9vw;top:16vh;bottom:auto}

.current-lines { position: fixed; z-index: 2; inset: 0; width: 500vw; height: 100vh; pointer-events: none; transform: translateX(var(--svg-shift, 0)); transition: transform 900ms cubic-bezier(.2,.8,.16,1); }.current { fill: none; stroke-linecap: round; stroke-width: 8; stroke-dasharray: 18 26; opacity: .75; filter: drop-shadow(0 0 12px #7CF7FF); }.current-a{stroke:var(--cyan)}.current-b{stroke:var(--lavender);stroke-width:4;opacity:.45}.particle{fill:var(--lime);filter:drop-shadow(0 0 10px #B8FF4D)}
.ambient-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 3; }.bubble { position: absolute; border-radius: 50%; border: 1px solid #F2FBFF66; background: radial-gradient(circle at 28% 24%, #F2FBFFaa, #7CF7FF2d 26%, transparent 66%); box-shadow: inset -10px -16px 30px #07142F77, 0 0 40px #7CF7FF33; animation: rise 12s infinite ease-in-out; }.bubble.blur{filter:blur(9px)}.a{width:16vw;height:16vw;left:10vw;bottom:-12vw}.b{width:10vw;height:10vw;left:58vw;bottom:-8vw;animation-delay:2s}.c{width:6vw;height:6vw;right:14vw;bottom:8vh;animation-delay:1s}.d{width:22vw;height:22vw;right:-5vw;bottom:-10vw;animation-delay:4s}.e{width:4vw;height:4vw;left:38vw;bottom:2vh;animation-delay:3s}

.pushable { transition: transform 180ms ease-out, filter 300ms, box-shadow 300ms; will-change: transform; }.pushable:hover { filter: saturate(1.25) blur(0); box-shadow: inset -18px -24px 44px #07142F66, 0 0 95px #7CF7FF66; }
@keyframes writeIn { to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } }
@keyframes float { 50% { transform: translateY(-22px) translateX(12px) scale(1.025); } }
@keyframes rise { 0%{transform:translateY(18vh) scale(.85);opacity:0} 20%,80%{opacity:.85} 100%{transform:translateY(-110vh) scale(1.12);opacity:0} }
@keyframes pop { 50% { transform: translateY(-18px) rotate(-13deg) scale(1.1); } }
@keyframes pulse { to { transform: scale(1.45); opacity: .45; } }
@keyframes merge { 50% { transform: translate(90px, 35px) scale(.72); opacity: .72; } }
@keyframes orbit { to { transform: rotate(360deg) translateX(28px) rotate(-360deg); } }
@keyframes bloom { 0%{inset:46%;opacity:1} 100%{inset:3%;opacity:0} }
@media (max-width: 760px) { .panel-grid{padding:10vh 7vw 14vh;grid-template-columns:repeat(6,1fr)} h1,h2{grid-column:1 / span 6;font-size:clamp(3.2rem,17vw,6rem)} .chapter-code,.thesis,.panel p{grid-column:1 / span 5}.mega-bubble,.reef-map,.merge-field,.bloom-diagram,.final-bubble{grid-column:2 / span 4;grid-row:5 / span 3}.compass-label{display:none} }