:root {
  --abyss: #050708;
  --foam: #F4F1EA;
  --graphite: #2A3033;
  --mist: #AEB8B8;
  --shell: #FFFFFF;
  --cyan: #77E6D8;
  --coral: #FF6F61;
  --sidebar: clamp(240px, 20vw, 340px);
}

/* Design compliance vocabulary: IBM Plex Mono* Mono** in small sizes for tide ticks; Inter* Inter** for precise instructional text; Interprets Simulation AI through monochrome seapunk oceanography—scenario inputs become droplets. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--abyss); color: var(--foam); font-family: Inter, Lato, Arial, sans-serif; overflow-x: hidden; }

body { height: 520vh; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 18%, rgba(244, 241, 234, .08), transparent 22%),
    radial-gradient(circle at 38% 72%, rgba(119, 230, 216, .07), transparent 18%),
    linear-gradient(90deg, rgba(174, 184, 184, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(174, 184, 184, .025) 1px, transparent 1px);
  background-size: auto, auto, 88px 88px, 88px 88px;
}

.tide-gauge {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(42, 48, 51, .96), rgba(5, 7, 8, .98));
  border-right: 1px solid rgba(244, 241, 234, .25);
  z-index: 20;
  display: grid;
  grid-template-columns: 42px 10px 1fr;
  gap: 16px;
  min-height: 100vh;
}

.gauge-brand { grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; font: 700 18px Manrope, Inter, sans-serif; letter-spacing: .04em; color: var(--shell); }
.brand-dot { width: 12px; height: 18px; border-radius: 50% 50% 55% 55%; background: var(--cyan); box-shadow: 0 0 20px rgba(119, 230, 216, .55); }
.depth-scale { display: flex; flex-direction: column; justify-content: space-between; padding: 18px 0 112px; font: 500 10px "IBM Plex Mono", monospace; color: var(--mist); }
.depth-scale span { position: relative; }
.depth-scale span::after { content: ""; position: absolute; left: 34px; top: 50%; width: 14px; height: 1px; background: rgba(244,241,234,.45); }
.water-slot { position: relative; margin: 18px 0 112px; border-left: 1px solid rgba(244,241,234,.35); border-right: 1px solid rgba(244,241,234,.12); overflow: hidden; }
.waterline { position: absolute; left: -5px; bottom: 0; width: 18px; height: 14%; background: linear-gradient(0deg, rgba(119, 230, 216, .2), rgba(244, 241, 234, .78)); border-top: 2px solid var(--cyan); transition: height .7s cubic-bezier(.2,.8,.2,1); }

.chapters { display: flex; flex-direction: column; justify-content: center; gap: 11px; padding-bottom: 78px; }
.chapter { appearance: none; border: 1px solid rgba(174,184,184,.22); background: rgba(5,7,8,.35); color: var(--mist); text-align: left; padding: 11px 12px; border-radius: 999px 18px 18px 999px; cursor: pointer; transition: border-color .35s, color .35s, transform .35s, background .35s; }
.chapter span { font: 500 10px "IBM Plex Mono", monospace; margin-right: 8px; color: var(--mist); }
.chapter b { display: block; margin-top: 3px; font: 700 13px Manrope, Inter, sans-serif; color: inherit; }
.chapter em { display: block; font: 500 10px "IBM Plex Mono", monospace; font-style: normal; opacity: .75; }
.chapter.is-active { border-color: var(--shell); color: var(--shell); background: rgba(244,241,234,.1); transform: translateX(8px); }
.chapter.is-active span { color: var(--cyan); }
.gauge-note { grid-column: 1 / 4; align-self: end; border: 1px solid rgba(244,241,234,.25); border-radius: 18px; padding: 14px; color: var(--mist); background: rgba(5,7,8,.45); }
.gauge-note small, .mono { font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .08em; color: var(--cyan); }
.gauge-note p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }

.stage { position: fixed; inset: 0 0 0 var(--sidebar); overflow: hidden; background: radial-gradient(circle at 50% 54%, rgba(42,48,51,.7), transparent 42%), var(--abyss); }
.grain { position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: radial-gradient(var(--foam) .65px, transparent .65px); background-size: 19px 23px; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 84%, transparent); }
.scene { position: absolute; inset: 0; opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); display: grid; grid-template-columns: repeat(7, 1fr); padding: 7vh 7vw; }
.scene.is-active { opacity: 1; transform: translateY(0) scale(1); }
.scene-copy { grid-column: 1 / 4; align-self: end; z-index: 4; max-width: 520px; }
.right-note { grid-column: 5 / 8; align-self: start; }
.bottle-label { border: 1px solid rgba(244,241,234,.32); background: rgba(5,7,8,.52); border-radius: 26px 26px 26px 8px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
h1, h2 { margin: 8px 0 12px; font-family: Manrope, Inter, sans-serif; letter-spacing: -.055em; line-height: .92; color: var(--foam); }
h1 { font-size: clamp(72px, 13vw, 188px); font-weight: 700; -webkit-text-stroke: 1px rgba(244,241,234,.55); color: transparent; text-shadow: 0 0 28px rgba(244,241,234,.18); }
h2 { font-size: clamp(48px, 7vw, 104px); font-weight: 650; }
p { color: var(--mist); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.65; margin: 0; }
.reflection { position: absolute; left: 7vw; top: 54%; font: 700 clamp(72px, 13vw, 188px) Manrope, Inter, sans-serif; letter-spacing: -.055em; transform: scaleY(-1); opacity: .16; color: transparent; -webkit-text-stroke: 1px var(--foam); filter: blur(1.4px); mask-image: linear-gradient(#000, transparent 72%); }

.tank-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.tank-frame { fill: transparent; stroke: rgba(244,241,234,.23); stroke-width: 1.4; }
.surface, .pour-line, .ripple, .future, .contours path, .leader-lines path { fill: none; stroke: var(--foam); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.surface { opacity: .48; stroke-width: 1.3; }
.pour-line { stroke-width: 2.2; filter: drop-shadow(0 0 10px rgba(244,241,234,.2)); }
.ripple { opacity: .65; }
.ripple-two { opacity: .32; }
.future { stroke: var(--mist); opacity: 0; stroke-dasharray: 7 10; }
.contours path { stroke: var(--mist); opacity: .22; stroke-width: 1.2; }
.leader-lines path { stroke: var(--mist); opacity: .45; stroke-width: 1; }
.blob-field path { fill: rgba(42,48,51,.68); stroke: rgba(244,241,234,.22); stroke-width: 1.1; filter: url(#soften); transform-origin: center; }
.blob-one path { animation: blobOne 8s ease-in-out infinite alternate; }
.blob-two path { animation: blobTwo 10s ease-in-out infinite alternate; fill: rgba(174,184,184,.18); }
.agent-school polygon { fill: var(--foam); opacity: .86; transform-box: fill-box; transform-origin: center; }
.bubble-trail circle { fill: none; stroke: var(--mist); stroke-width: 1.2; opacity: .5; animation: bubble 5s ease-in-out infinite; }
.anomaly { opacity: 0; transition: opacity .45s ease; }
.anomaly circle { fill: rgba(255,111,97,.12); stroke: var(--coral); stroke-width: 2; }
.anomaly path { stroke: var(--coral); stroke-width: 2; stroke-linecap: round; }
.droplet { fill: var(--cyan); stroke: var(--shell); stroke-width: 1.4; filter: drop-shadow(0 0 18px rgba(119,230,216,.55)); cursor: grab; transition: r .2s ease; }
.droplet.is-dragging { r: 18px; cursor: grabbing; }
.draw-line { stroke-dasharray: var(--path-length, 1200); stroke-dashoffset: var(--path-offset, 1200); transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }

.annotation { position: absolute; z-index: 5; width: 210px; padding: 13px 14px; border: 1px solid rgba(244,241,234,.24); background: rgba(5,7,8,.55); border-radius: 15px 15px 4px 15px; color: var(--mist); transition: opacity .55s, transform .55s; }
.annotation p { font-size: 12px; line-height: 1.4; margin-top: 5px; }
.note-a { right: 8vw; top: 16vh; }
.note-b { right: 16vw; bottom: 12vh; opacity: 0; transform: translateY(20px); }
.variables { position: absolute; z-index: 6; left: 6vw; top: 8vh; display: flex; gap: 10px; flex-wrap: wrap; }
.variables button { border: 1px solid rgba(174,184,184,.38); background: rgba(42,48,51,.5); color: var(--foam); border-radius: 999px; padding: 10px 13px; font: 500 11px "IBM Plex Mono", monospace; cursor: pointer; transition: border-color .25s, color .25s, transform .25s; }
.variables button:hover, .variables button.is-pouring { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }

body.scene-2 .anomaly, body.scene-4 .future, body.scene-4 .note-b, body.split-futures .future, body.split-futures .note-b { opacity: 1; transform: translateY(0); }
body.scene-3 .agent-school polygon { fill: var(--cyan); }
body.scene-2 .pour-line { stroke: var(--coral); }

@keyframes blobOne { from { transform: translate(-18px, 10px) scale(1); } to { transform: translate(24px, -18px) scale(1.12, .9); } }
@keyframes blobTwo { from { transform: translate(20px, -8px) scale(.96, 1.08); } to { transform: translate(-16px, 22px) scale(1.12, .92); } }
@keyframes bubble { 50% { transform: translateY(-18px); opacity: .85; } }

@media (max-width: 820px) {
  :root { --sidebar: 0px; }
  body { height: 520vh; }
  .tide-gauge { inset: auto 0 0 0; width: 100%; height: 112px; min-height: 0; padding: 10px; border-right: 0; border-top: 1px solid rgba(244,241,234,.25); grid-template-columns: 1fr; z-index: 30; }
  .gauge-brand, .depth-scale, .gauge-note { display: none; }
  .water-slot { position: absolute; left: 10px; right: 10px; top: 8px; height: 8px; margin: 0; border: 1px solid rgba(244,241,234,.2); }
  .waterline { height: 100% !important; width: var(--mobile-water, 18%); transition: width .7s; border-top: 0; border-right: 2px solid var(--cyan); }
  .chapters { flex-direction: row; justify-content: flex-start; overflow-x: auto; padding: 20px 0 0; gap: 8px; }
  .chapter { min-width: 160px; padding: 9px 11px; }
  .stage { inset: 0; }
  .scene { padding: 6vh 20px 140px; grid-template-columns: 1fr; }
  .scene-copy, .right-note { grid-column: 1; align-self: end; }
  h1 { font-size: 70px; }
  h2 { font-size: 50px; }
  .variables { left: 20px; top: 18px; right: 20px; }
  .annotation { display: none; }
}