:root {
  /* constructed yet poetic simulation-lab voice. IBM Plex Serif* Serif** sparingly for specimen notes */
  --basin-black: #050711;
  --deep-blue: #091C3A;
  --cyan: #35E7FF;
  --mint: #8CFFCF;
  --violet: #8B5CFF;
  --coral: #FF6F91;
  --parchment: #F4E9C8;
  --glass: #6B7FA8;
  --mx: 50vw;
  --my: 50vh;
  --scroll: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 28% 18%, rgba(53, 231, 255, .13), transparent 28%), linear-gradient(180deg, #050711 0%, #091C3A 46%, #050711 100%);
  color: var(--parchment);
  font-family: "Bricolage Grotesque", Inter, sans-serif;
  overflow-x: hidden;
}

.basin-field, #rippleCanvas, .interference, .glass-warp { position: fixed; inset: 0; pointer-events: none; }
.basin-field { z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 66% 42%, rgba(139, 92, 255, .13), transparent 35%); }
#rippleCanvas { width: 100%; height: 100%; opacity: .7; }
.interference {
  background-image:
    repeating-radial-gradient(ellipse at 35% 30%, rgba(107, 127, 168, .12) 0 1px, transparent 2px 18px),
    linear-gradient(112deg, transparent 0 42%, rgba(53, 231, 255, .04) 47%, transparent 54% 100%);
  mix-blend-mode: screen;
  animation: tideShift 18s ease-in-out infinite alternate;
}
.glass-warp {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(244, 233, 200, .07), transparent 18%), repeating-linear-gradient(96deg, transparent 0 76px, rgba(107, 127, 168, .08) 78px, transparent 82px);
  filter: url(#none);
  opacity: .8;
}

.wordmark {
  position: fixed; top: 24px; left: 34px; z-index: 10;
  font-family: "Unbounded", sans-serif; letter-spacing: .04em; text-transform: lowercase;
  text-shadow: 8px 0 0 rgba(53, 231, 255, .08), -10px 0 0 rgba(139, 92, 255, .08);
}
.wordmark span { display: block; font-size: clamp(18px, 2vw, 30px); color: var(--cyan); }
.wordmark em { display: block; margin-top: 6px; color: rgba(244, 233, 200, .62); font-family: "IBM Plex Serif", serif; font-size: 12px; font-style: italic; letter-spacing: .02em; }

.depth-gauge { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 11; height: 66vh; display: flex; flex-direction: column; justify-content: space-between; }
.gauge-line { position: absolute; top: 10px; bottom: 10px; right: 12px; width: 1px; background: linear-gradient(var(--cyan), var(--glass), var(--violet)); opacity: .55; }
.gauge-bubble { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--glass); text-decoration: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.gauge-bubble span { width: 25px; height: 25px; border: 1px solid rgba(107, 127, 168, .7); border-radius: 50%; display: grid; place-items: center; background: rgba(5, 7, 17, .7); color: var(--parchment); }
.gauge-bubble b { font-weight: 500; opacity: 0; transform: translateX(8px); transition: .35s ease; }
.gauge-bubble.active span { border-color: var(--cyan); box-shadow: 0 0 22px rgba(53, 231, 255, .65); color: var(--cyan); }
.gauge-bubble.active b, .gauge-bubble:hover b { opacity: 1; transform: translateX(0); }

.basin-scroll { position: relative; z-index: 2; }
.scene { min-height: 100vh; position: relative; display: grid; align-items: center; padding: 9vh 10vw; overflow: hidden; isolation: isolate; }
.scene::before { content: attr(data-depth); position: absolute; left: 5vw; bottom: 5vh; font-family: "Unbounded", sans-serif; font-size: 12vw; color: rgba(107, 127, 168, .055); z-index: -1; }
.scene-copy { max-width: 620px; position: relative; z-index: 4; }
.scene-copy.narrow { max-width: 520px; margin-left: 8vw; }
.offset-right { margin-left: auto; margin-right: 8vw; }
.offset-left { margin-left: 52vw; max-width: 520px; }
.final-copy { margin-left: auto; margin-right: auto; text-align: center; }
.specimen { font-family: "IBM Plex Serif", serif; color: var(--mint); font-size: 15px; font-style: italic; letter-spacing: .03em; margin: 0 0 18px; }
.specimen.coral { color: var(--coral); }
h1, h2 { font-family: "Unbounded", sans-serif; margin: 0; line-height: .92; letter-spacing: -.06em; text-transform: lowercase; }
h1 { font-size: clamp(54px, 10vw, 148px); max-width: 900px; color: var(--parchment); filter: drop-shadow(0 0 24px rgba(53, 231, 255, .18)); }
h2 { font-size: clamp(44px, 6vw, 96px); color: var(--parchment); }
p { font-size: clamp(18px, 2vw, 25px); line-height: 1.35; color: rgba(244, 233, 200, .78); }
.fragment { font-size: clamp(22px, 3vw, 38px); color: var(--cyan); max-width: 710px; }

.disturb-button, .follow-link { display: inline-block; margin-top: 18px; padding: 16px 22px; border: 1px solid rgba(53, 231, 255, .68); border-radius: 999px; background: rgba(53, 231, 255, .08); color: var(--cyan); font-family: "Unbounded", sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: lowercase; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 28px rgba(53, 231, 255, .12), 0 0 30px rgba(53, 231, 255, .08); }

.vessel { position: absolute; right: 6vw; top: 17vh; width: min(48vw, 690px); aspect-ratio: 1.22; border: 1px solid rgba(107, 127, 168, .6); border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%; background: radial-gradient(ellipse at 50% 50%, rgba(53, 231, 255, .12), transparent 44%), rgba(9, 28, 58, .22); box-shadow: inset 0 0 90px rgba(53, 231, 255, .11), 0 0 90px rgba(139, 92, 255, .15); transform: rotate(-8deg); }
.vessel::before { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(244, 233, 200, .22); border-radius: inherit; }
.calibration { position: absolute; left: 10%; right: 10%; height: 1px; background: repeating-linear-gradient(90deg, rgba(244,233,200,.7) 0 8px, transparent 8px 16px); opacity: .34; }
.diagonal-a { top: 34%; transform: rotate(18deg); }
.diagonal-b { top: 62%; transform: rotate(-16deg); }
.orbit { position: absolute; inset: 20%; border: 1px solid rgba(140, 255, 207, .28); border-radius: 50%; animation: orbitPulse 8s ease-in-out infinite; }
.orbit-two { inset: 32% 15%; border-color: rgba(139, 92, 255, .33); transform: rotate(38deg); animation-delay: -3s; }
.cyan-seed, .return-seed { position: absolute; left: 43%; top: 42%; width: 24px; height: 24px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 24px var(--cyan), 0 0 74px rgba(53, 231, 255, .8); animation: seedFloat 5s ease-in-out infinite; }
.seed-halo { position: absolute; left: 35%; top: 31%; width: 150px; height: 150px; border: 1px solid rgba(53, 231, 255, .24); border-radius: 50%; animation: haloBreath 5s ease-in-out infinite; }
.agent, .rules-creatures i { position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 50% 10%; background: var(--mint); box-shadow: 0 0 12px rgba(140, 255, 207, .8); }
.a1 { left: 29%; top: 36%; animation: agentDrift 7s infinite; } .a2 { left: 63%; top: 42%; animation: agentDrift 8s -2s infinite; } .a3 { left: 45%; top: 67%; animation: agentDrift 9s -4s infinite; } .a4 { left: 70%; top: 61%; animation: agentDrift 6s -1s infinite; }
.side-note { position: absolute; right: 9vw; bottom: 10vh; max-width: 330px; font-family: "IBM Plex Serif", serif; font-style: italic; font-size: 18px; color: rgba(244, 233, 200, .58); }

.contour-shelf { position: absolute; width: 54vw; height: 54vw; border-radius: 50%; border: 1px solid rgba(107, 127, 168, .22); box-shadow: inset 0 0 0 28px rgba(107,127,168,.035), inset 0 0 0 58px rgba(53,231,255,.025), inset 0 0 0 96px rgba(140,255,207,.025); }
.shelf-left { right: -12vw; top: 16vh; transform: skewY(-8deg); }
.rule-field { position: absolute; right: 6vw; width: 58vw; height: 68vh; overflow: visible; }
.rule-line { fill: none; stroke-width: 2; stroke-dasharray: 12 10; filter: drop-shadow(0 0 12px currentColor); animation: drawRules 7s linear infinite; }
.rule-line.cyan { stroke: var(--cyan); color: var(--cyan); } .rule-line.mint { stroke: var(--mint); color: var(--mint); animation-delay: -2s; } .rule-line.violet { stroke: var(--violet); color: var(--violet); animation-delay: -4s; }
.rules-creatures { position: absolute; inset: 0; } .rules-creatures i:nth-child(1){left:62%;top:28%;animation:agentDrift 8s infinite}.rules-creatures i:nth-child(2){left:72%;top:44%;animation:agentDrift 7s -2s infinite}.rules-creatures i:nth-child(3){left:55%;top:61%;animation:agentDrift 9s -3s infinite}.rules-creatures i:nth-child(4){left:84%;top:34%;animation:agentDrift 6s -1s infinite}.rules-creatures i:nth-child(5){left:67%;top:70%;animation:agentDrift 10s -4s infinite}.rules-creatures i:nth-child(6){left:79%;top:59%;animation:agentDrift 7s -5s infinite}.rules-creatures i:nth-child(7){left:90%;top:52%;animation:agentDrift 8s -6s infinite}
.specimen-flag { position: absolute; right: 18vw; bottom: 15vh; padding: 10px 16px; border-left: 1px solid var(--parchment); font-family: "IBM Plex Serif", serif; font-size: 16px; color: var(--parchment); background: rgba(244, 233, 200, .06); }

.shock-ring { position: absolute; left: 14vw; top: 17vh; width: 47vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,111,145,.18), transparent 33%), repeating-radial-gradient(circle, rgba(255,111,145,.34) 0 2px, transparent 3px 44px); animation: shock 4.2s ease-in-out infinite; }
.heat-bloom { position: absolute; left: 22vw; top: 38vh; width: 260px; height: 260px; }
.heat-bloom span { position: absolute; inset: 20%; border-radius: 40% 60% 55% 45%; background: rgba(255, 111, 145, .25); filter: blur(12px); animation: bloom 6s ease-in-out infinite; }
.heat-bloom span:nth-child(2){background:rgba(139,92,255,.2);inset:5%;animation-delay:-1.5s}.heat-bloom span:nth-child(3){background:rgba(53,231,255,.16);inset:32%;animation-delay:-3s}.heat-bloom span:nth-child(4){background:rgba(255,111,145,.15);inset:0;animation-delay:-4s}
.rail { position: absolute; height: 1px; width: 42vw; background: linear-gradient(90deg, transparent, var(--glass), transparent); transform-origin: left; opacity: .58; }
.rail b { position: absolute; left: 50%; top: -22px; color: var(--glass); font: 12px "IBM Plex Serif", serif; font-style: italic; }
.rail-one { left: 4vw; top: 24vh; transform: rotate(-17deg); } .rail-two { left: 18vw; bottom: 24vh; transform: rotate(12deg); }
.quiet-line { position: absolute; left: 12vw; bottom: 11vh; max-width: 420px; color: rgba(244, 233, 200, .62); font-family: "IBM Plex Serif", serif; font-style: italic; }

.branch-svg { position: absolute; inset: auto 2vw 4vh auto; width: 68vw; height: 76vh; overflow: visible; }
.branch { fill: none; stroke-linecap: round; stroke-width: 4; stroke-dasharray: 900; stroke-dashoffset: 900; animation: branchDraw 7s ease-in-out infinite; filter: drop-shadow(0 0 16px currentColor); }
.core { stroke: var(--parchment); color: var(--parchment); animation-delay: 0s; } .b-cyan { stroke: var(--cyan); color: var(--cyan); animation-delay: .6s; } .b-mint { stroke: var(--mint); color: var(--mint); animation-delay: 1s; } .b-violet { stroke: var(--violet); color: var(--violet); animation-delay: 1.4s; } .b-coral { stroke: var(--coral); color: var(--coral); animation-delay: 1.8s; }
.world { position: absolute; width: 170px; height: 120px; border: 1px solid rgba(139,92,255,.45); border-radius: 48%; background: radial-gradient(circle at 45% 44%, rgba(139,92,255,.22), transparent 60%), rgba(9,28,58,.18); box-shadow: inset 0 0 34px rgba(53,231,255,.08), 0 0 40px rgba(139,92,255,.14); display: grid; place-items: center; animation: worldGhost 8s ease-in-out infinite; }
.world span { width: 56px; height: 28px; border-radius: 50%; background: repeating-linear-gradient(165deg, rgba(140,255,207,.8) 0 4px, rgba(53,231,255,.25) 5px 8px); filter: blur(.2px); }
.world b { position: absolute; bottom: -24px; font-family: "IBM Plex Serif", serif; font-size: 13px; color: rgba(244,233,200,.72); font-style: italic; }
.w1 { right: 10vw; top: 14vh; } .w2 { right: 4vw; bottom: 19vh; animation-delay:-2s; } .w3 { right: 24vw; top: 46vh; animation-delay:-4s; }

.observation-diorama { position: absolute; left: 8vw; top: 16vh; width: 42vw; height: 62vh; border: 1px solid rgba(107,127,168,.4); border-radius: 44% 56% 52% 48%; transform: rotate(8deg); background: rgba(9,28,58,.28); box-shadow: inset 0 0 85px rgba(140,255,207,.08); }
.time-slice { position: absolute; inset: 12%; border: 1px solid rgba(53,231,255,.22); border-radius: 50%; transform: rotateX(68deg); }
.s2 { inset: 24%; border-color: rgba(139,92,255,.28); } .s3 { inset: 36%; border-color: rgba(140,255,207,.3); }
.terrain { position: absolute; left: 18%; right: 18%; bottom: 26%; height: 22%; border-radius: 50% 44% 55% 40%; background: radial-gradient(circle at 30% 30%, var(--mint), transparent 26%), radial-gradient(circle at 70% 55%, var(--cyan), transparent 20%), linear-gradient(90deg, rgba(140,255,207,.18), rgba(139,92,255,.25)); filter: blur(.5px); }
.bead { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: beadPath 6s ease-in-out infinite; }
.bead-one { left: 30%; top: 40%; } .bead-two { left: 58%; top: 52%; animation-delay:-2s; background:var(--mint); box-shadow:0 0 18px var(--mint); } .bead-three { left: 48%; top: 30%; animation-delay:-4s; background:var(--coral); box-shadow:0 0 18px var(--coral); }
blockquote { position: absolute; left: 12vw; bottom: 10vh; width: 470px; margin: 0; font-family: "IBM Plex Serif", serif; font-size: 27px; font-style: italic; color: rgba(244,233,200,.78); }

.return-vessel { position: relative; width: min(62vw, 760px); aspect-ratio: 1.75; margin: 0 auto 6vh; border: 1px solid rgba(53,231,255,.34); border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(53,231,255,.13), transparent 50%); box-shadow: inset 0 0 70px rgba(53,231,255,.09), 0 0 80px rgba(53,231,255,.08); }
.replay-loop { position: absolute; inset: 20%; border: 1px dashed rgba(140,255,207,.48); border-radius: 50%; animation: spin 16s linear infinite; }
.return-seed { left: calc(50% - 12px); top: calc(50% - 12px); }
.collapsed-line { position: absolute; left: 50%; top: 50%; width: 34%; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); transform-origin: left; opacity: .54; animation: collapseLine 5s ease-in-out infinite; }
.l1 { transform: rotate(22deg); } .l2 { transform: rotate(165deg); animation-delay:-1.7s; background:linear-gradient(90deg,var(--violet),transparent); } .l3 { transform: rotate(278deg); animation-delay:-3.4s; background:linear-gradient(90deg,var(--mint),transparent); }

body.disturbed .cyan-seed { background: var(--coral); box-shadow: 0 0 24px var(--coral), 0 0 90px rgba(255,111,145,.85); }
body.disturbed .vessel { border-color: rgba(255,111,145,.8); }
body.disturbed .agent { transform: translate(calc((var(--mx) - 50vw) * -.02), calc((var(--my) - 50vh) * -.02)) scale(1.35); }

@keyframes tideShift { to { transform: translate3d(-3vw, 4vh, 0) scale(1.06) rotate(1deg); } }
@keyframes orbitPulse { 50% { transform: rotate(18deg) scale(1.08); opacity: .55; } }
@keyframes seedFloat { 50% { transform: translate(18px, -24px) scale(1.15); } }
@keyframes haloBreath { 50% { transform: scale(1.35); opacity: .2; } }
@keyframes agentDrift { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(28px,-20px) rotate(80deg); } 66% { transform: translate(-18px,22px) rotate(170deg); } }
@keyframes drawRules { to { stroke-dashoffset: -220; } }
@keyframes shock { 0%,100% { transform: scale(.88); opacity: .25; } 45% { transform: scale(1.08); opacity: .8; } }
@keyframes bloom { 50% { transform: rotate(40deg) scale(1.25); border-radius: 62% 38% 45% 55%; } }
@keyframes branchDraw { 0% { stroke-dashoffset: 900; opacity: .08; } 35%,70% { stroke-dashoffset: 0; opacity: .9; } 100% { stroke-dashoffset: -900; opacity: .1; } }
@keyframes worldGhost { 50% { transform: translateY(-22px) scale(1.07); opacity: .56; } }
@keyframes beadPath { 50% { transform: translate(58px, -34px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes collapseLine { 50% { width: 12%; opacity: .95; } }

@media (max-width: 850px) {
  .depth-gauge { right: 10px; height: 55vh; }
  .gauge-bubble b { display: none; }
  .wordmark { left: 18px; top: 16px; }
  .scene { padding: 12vh 8vw; align-items: start; }
  .vessel, .rule-field, .branch-svg, .observation-diorama { position: relative; width: 88vw; left: auto; right: auto; top: auto; margin-top: 6vh; }
  .offset-right, .offset-left, .scene-copy.narrow { margin-left: 0; margin-right: 0; }
  .side-note, blockquote, .quiet-line { position: relative; left: auto; right: auto; bottom: auto; width: auto; }
  .world { transform: scale(.72); }
}