:root {
  /* Design lexicon retained: sparingly coordinates Interaction framed handoff: panels Interactions should feel like calibration: hovering reveals Grotesk** wordmark subsystem titles. */
  --abyss-ink: #061820;
  --glass-current: #76E4E0;
  --kelp-signal: #2F7D64;
  --sea-foam: #D8FFF6;
  --buoy-vermilion: #FF5A3D;
  --silt-lavender: #A9A7D9;
  --wet-basalt: #17313A;
  --deep-teal: #123D48;
  --space-font: "Space Grotesk", "Space", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-font: "Noto Sans KR", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --scroll: 0;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--body-font);
  color: var(--sea-foam);
  background: var(--abyss-ink);
}

button, a { font: inherit; }

.water-column {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(118, 228, 224, 0.16), transparent 24rem),
    radial-gradient(circle at 15% 9%, rgba(169, 167, 217, 0.16), transparent 26rem),
    radial-gradient(circle at 82% 68%, rgba(47, 125, 100, 0.20), transparent 31rem),
    linear-gradient(145deg, #061820 0%, #0A2630 36%, #123D48 74%, #061820 100%);
}

.water-column::before,
.water-column::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -2;
}

.water-column::before {
  background-image:
    radial-gradient(circle, rgba(216, 255, 246, 0.12) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(118, 228, 224, 0.08) 0 1px, transparent 2px);
  background-size: 64px 88px, 110px 140px;
  transform: translateY(calc(var(--scroll) * -120px));
  opacity: 0.8;
}

.water-column::after {
  background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 22px, rgba(118, 228, 224, 0.035) 23px 25px, transparent 27px 54px);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: tideInterference 20s ease-in-out infinite alternate;
}

.plankton-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.plankton-field span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sea-foam);
  box-shadow: 0 0 12px var(--glass-current);
  opacity: 0.3;
  transform: translate3d(var(--px), var(--py), 0) scale(var(--ps));
  animation: planktonDrift var(--pd) ease-in-out infinite alternate;
}

.global-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 4200px;
  pointer-events: none;
  opacity: 0.55;
  z-index: -1;
}

.depth-contour path,
.membrane-contours path {
  fill: none;
  stroke: var(--silt-lavender);
  stroke-width: 2;
  stroke-dasharray: 6 13;
  vector-effect: non-scaling-stroke;
}

.membrane-contours {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  opacity: 0.58;
  pointer-events: none;
}

.bathymetry-legend {
  position: fixed;
  top: 50%;
  right: 1.2rem;
  width: 148px;
  padding: 1rem 0.72rem 1.2rem;
  border: 1px solid rgba(216, 255, 246, 0.16);
  border-radius: 48% 52% 45% 55% / 58% 43% 57% 42%;
  background: rgba(6, 24, 32, 0.62);
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
  z-index: 30;
  box-shadow: inset 0 0 38px rgba(118, 228, 224, 0.08), 0 20px 80px rgba(0, 0, 0, 0.28);
}

.legend-title,
.pressure-label,
.sensor-readout,
.coordinate-strip,
.route-annotations,
.abyss-footer,
.note-kicker {
  font-family: var(--mono-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legend-title {
  display: block;
  color: var(--silt-lavender);
  font-size: 0.58rem;
  margin: 0 0 0.8rem 0.28rem;
}

.legend-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(216, 255, 246, 0.66);
  text-decoration: none;
  font-size: 0.75rem;
  padding: 0.34rem 0.2rem;
  transition: color 260ms ease, transform 260ms ease;
}

.legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-current);
}

.legend-item.active { color: var(--sea-foam); transform: translateX(-5px); }
.legend-item.active i { background: var(--glass-current); box-shadow: 0 0 20px var(--glass-current); }

.glowing-buoy {
  position: absolute;
  right: 13px;
  top: 48px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--buoy-vermilion);
  box-shadow: 0 0 18px var(--buoy-vermilion), 0 0 46px rgba(255, 90, 61, 0.55);
  transition: top 420ms cubic-bezier(.2,.8,.2,1);
}

.current-map { position: relative; }

.scene {
  position: relative;
  min-height: 112vh;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.2rem, 7vw, 9rem);
}

.hero-scene { min-height: 100vh; place-items: center; }

.tide-membrane,
.system-lagoon {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 255, 246, 0.22);
  background:
    radial-gradient(circle at var(--mx, 48%) var(--my, 36%), rgba(216, 255, 246, 0.27), transparent 0 18%, transparent 38%),
    radial-gradient(circle at 80% 22%, rgba(118, 228, 224, 0.22), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(169, 167, 217, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(216, 255, 246, 0.16), rgba(23, 49, 58, 0.72));
  box-shadow: inset 0 0 72px rgba(216, 255, 246, 0.08), inset 0 -28px 80px rgba(6, 24, 32, 0.52), 0 35px 110px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(22px) saturate(130%);
  transform: translate3d(0, calc(var(--float, 0) * 1px), 0) rotate(var(--tilt, 0deg));
  transition: border-radius 480ms ease, transform 480ms ease, border-color 300ms ease;
}

.tide-membrane::before {
  content: "";
  position: absolute;
  inset: -28%;
  background: conic-gradient(from 120deg, transparent, rgba(118, 228, 224, 0.20), transparent, rgba(47, 125, 100, 0.22), transparent);
  opacity: 0.55;
  animation: membraneRotate 24s linear infinite;
}

.tide-membrane::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 23% 28%, rgba(255, 90, 61, 0.72) 0 2px, transparent 3px), radial-gradient(circle at 72% 68%, rgba(118, 228, 224, 0.70) 0 2px, transparent 3px);
  opacity: 0.8;
  pointer-events: none;
}

.command-membrane {
  width: min(82vw, 870px);
  min-height: min(76vh, 660px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2.2rem, 6vw, 5rem);
  border-radius: 42% 58% 48% 52% / 56% 42% 58% 44%;
  clip-path: polygon(7% 39%, 13% 17%, 36% 6%, 58% 10%, 79% 4%, 94% 25%, 90% 56%, 98% 76%, 74% 94%, 48% 88%, 25% 96%, 7% 76%);
}

.coordinate-strip {
  position: relative;
  z-index: 1;
  align-self: end;
  color: var(--silt-lavender);
  font-size: clamp(0.62rem, 1.1vw, 0.76rem);
}

h1, h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--space-font);
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: var(--sea-foam);
  text-shadow: 0 0 28px rgba(118, 228, 224, 0.42);
}

h1 { font-size: clamp(4rem, 13vw, 10.5rem); }
h2 { font-size: clamp(3.3rem, 9vw, 8rem); max-width: 9ch; }

.hero-copy,
.system-lagoon p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.65;
  color: rgba(216, 255, 246, 0.78);
}

.hero-copy { align-self: start; justify-self: center; }

.orbit-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: orbitSpin 42s linear infinite;
}

.orbit-labels span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--mono-font);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--glass-current);
  text-transform: uppercase;
  transform: rotate(var(--a)) translateX(min(38vw, 420px)) rotate(calc(var(--a) * -1));
  padding: 0.34rem 0.62rem;
  border: 1px solid rgba(118, 228, 224, 0.34);
  border-radius: 999px;
  background: rgba(6, 24, 32, 0.66);
  box-shadow: 0 0 22px rgba(118, 228, 224, 0.18);
}

.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(169, 167, 217, 0.36);
  border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%;
  pointer-events: none;
}

.ring-one { width: min(92vw, 1050px); height: min(72vh, 720px); animation: wobble 12s ease-in-out infinite; }
.ring-two { width: min(72vw, 790px); height: min(89vh, 830px); transform: rotate(28deg); animation: wobble 16s ease-in-out infinite reverse; }

.system-lagoon {
  width: min(78vw, 850px);
  min-height: 560px;
  padding: clamp(2rem, 5vw, 4.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35rem;
}

.system-lagoon:hover { border-color: rgba(118, 228, 224, 0.58); }
.system-lagoon:hover .sensor-readout,
.system-lagoon:hover .route-annotations { color: var(--sea-foam); }

.lagoon-large { margin-left: 7vw; border-radius: 58% 42% 54% 46% / 42% 62% 38% 58%; clip-path: ellipse(49% 43% at 50% 52%); }
.lagoon-harbor { margin-left: auto; margin-right: 5vw; border-radius: 42% 58% 35% 65% / 64% 36% 58% 42%; clip-path: polygon(9% 17%, 46% 4%, 70% 11%, 92% 33%, 86% 74%, 64% 91%, 26% 88%, 5% 58%); }
.lagoon-kelp { margin-left: 18vw; border-radius: 64% 36% 43% 57% / 39% 63% 37% 61%; clip-path: ellipse(48% 46% at 48% 52%); }
.lagoon-pressure { margin-left: auto; margin-right: 14vw; border-radius: 43% 57% 60% 40% / 55% 39% 61% 45%; clip-path: polygon(14% 8%, 48% 0%, 84% 10%, 96% 48%, 78% 87%, 42% 98%, 8% 79%, 2% 34%); }
.lagoon-dawn { margin: 0 auto; border-radius: 55% 45% 48% 52% / 45% 58% 42% 55%; clip-path: ellipse(48% 44% at 52% 49%); }

.pressure-label { position: relative; z-index: 1; color: var(--glass-current); font-size: 0.72rem; }
.pressure-label::before { content: "Grotesk** Grotesk* Grotes* Groteskk"; display: none; }
.sensor-readout { position: relative; z-index: 1; color: var(--silt-lavender); font-size: 0.78rem; }

.current-path {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(118, 228, 224, 0.7));
  opacity: 0.85;
}

.current-path path {
  fill: none;
  stroke: var(--glass-current);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12 20;
  animation: currentPulse 4.6s linear infinite;
}

.path-one { width: 52vw; height: 32vh; right: 5vw; bottom: 11vh; }
.path-two { width: 58vw; height: 38vh; left: 4vw; top: 12vh; }
.path-three { width: 55vw; height: 34vh; left: 8vw; bottom: 16vh; }

.buoy-node {
  position: relative;
  z-index: 8;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 90, 61, 0.82);
  border-radius: 50%;
  color: var(--abyss-ink);
  background: radial-gradient(circle at 35% 30%, #D8FFF6, #FF5A3D 48%, #8b2d27 100%);
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 90, 61, 0.72), 0 0 70px rgba(255, 90, 61, 0.28);
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 700;
  transition: transform 250ms ease, filter 250ms ease;
}

.buoy-node:hover { transform: scale(1.12) translateY(-4px); filter: saturate(1.25); }
.hero-buoy { position: absolute; left: 16vw; bottom: 15vh; }

.harbor-gates,
.tide-calendar,
.bubble-register,
.route-annotations { position: relative; z-index: 1; }

.harbor-gates { display: flex; gap: 0.65rem; align-items: end; min-height: 78px; }
.harbor-gates span {
  width: 42px;
  border-radius: 999px 999px 14px 14px;
  background: linear-gradient(var(--glass-current), var(--kelp-signal));
  opacity: 0.74;
  animation: gateBreathe 3.8s ease-in-out infinite;
}
.harbor-gates span:nth-child(1) { height: 42px; }
.harbor-gates span:nth-child(2) { height: 68px; animation-delay: -0.8s; }
.harbor-gates span:nth-child(3) { height: 55px; animation-delay: -1.6s; background: linear-gradient(var(--buoy-vermilion), var(--kelp-signal)); }
.harbor-gates span:nth-child(4) { height: 76px; animation-delay: -2.2s; }
.harbor-gates span:nth-child(5) { height: 48px; animation-delay: -3s; }

.kelp-bundle {
  position: absolute;
  left: 8vw;
  top: 10vh;
  bottom: 6vh;
  width: 32vw;
  filter: drop-shadow(0 0 22px rgba(47, 125, 100, 0.55));
}

.kelp-bundle span {
  position: absolute;
  bottom: 0;
  left: calc(var(--i, 0) * 13% + 12%);
  width: 18px;
  height: 78%;
  border-radius: 50% 50% 12px 12px;
  background: linear-gradient(180deg, rgba(118, 228, 224, 0.18), rgba(47, 125, 100, 0.84));
  transform-origin: bottom;
  animation: kelpSway 5s ease-in-out infinite alternate;
}
.kelp-bundle span:nth-child(1) { --i: 0; height: 62%; }
.kelp-bundle span:nth-child(2) { --i: 1; height: 86%; animation-delay: -0.5s; }
.kelp-bundle span:nth-child(3) { --i: 2; height: 70%; animation-delay: -1s; }
.kelp-bundle span:nth-child(4) { --i: 3; height: 92%; animation-delay: -1.5s; }
.kelp-bundle span:nth-child(5) { --i: 4; height: 66%; animation-delay: -2s; }
.kelp-bundle span:nth-child(6) { --i: 5; height: 80%; animation-delay: -2.5s; }

.route-annotations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--silt-lavender);
  font-size: 0.72rem;
}
.route-annotations li { border: 1px solid rgba(118, 228, 224, 0.24); border-radius: 999px; padding: 0.5rem 0.75rem; background: rgba(6, 24, 32, 0.34); }

.bubble-register { display: flex; gap: clamp(0.8rem, 2vw, 1.4rem); align-items: end; min-height: 130px; }
.bubble-register span {
  position: relative;
  width: clamp(58px, 9vw, 106px);
  aspect-ratio: 1;
  border-radius: 54% 46% 44% 56% / 44% 56% 44% 56%;
  border: 1px solid rgba(216, 255, 246, 0.28);
  background: radial-gradient(circle at 34% 24%, rgba(216, 255, 246, 0.68), rgba(118, 228, 224, 0.14) 35%, rgba(23, 49, 58, 0.76));
  animation: bubbleStretch 4.8s ease-in-out infinite alternate;
}
.bubble-register span::after { content: attr(data-depth); position: absolute; left: 50%; bottom: -1.35rem; transform: translateX(-50%); font-family: var(--mono-font); color: var(--silt-lavender); font-size: 0.62rem; }
.bubble-register span:nth-child(2) { transform: scale(0.72); animation-delay: -1s; }
.bubble-register span:nth-child(3) { transform: scale(1.18); animation-delay: -2s; }
.bubble-register span:nth-child(4) { transform: scale(0.88); animation-delay: -3s; }

.tide-calendar { display: flex; gap: 0.8rem; }
.tide-calendar span {
  width: 54px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 45% 55% 48% 52% / 56% 46% 54% 44%;
  border: 1px solid rgba(216, 255, 246, 0.2);
  background: rgba(6, 24, 32, 0.38);
  font-family: var(--mono-font);
  color: var(--silt-lavender);
}
.tide-calendar .lit { color: var(--abyss-ink); background: var(--sea-foam); box-shadow: 0 0 34px rgba(216, 255, 246, 0.5); }

.abyss-footer {
  align-self: end;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem;
  margin-top: 8vh;
  border-radius: 32px;
  background: rgba(23, 49, 58, 0.72);
  color: rgba(216, 255, 246, 0.68);
  font-size: 0.72rem;
}

.story-note {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  width: min(92vw, 430px);
  padding: 1.2rem 3rem 1.2rem 1.25rem;
  border: 1px solid rgba(118, 228, 224, 0.35);
  border-radius: 38% 62% 48% 52% / 22% 32% 68% 78%;
  background: rgba(6, 24, 32, 0.82);
  backdrop-filter: blur(18px);
  color: var(--sea-foam);
  z-index: 60;
  transform: translate(-50%, 150%);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45), inset 0 0 38px rgba(118, 228, 224, 0.08);
}
.story-note.open { transform: translate(-50%, 0); }
.story-note p { margin: 0.35rem 0 0; line-height: 1.5; color: rgba(216, 255, 246, 0.82); }
.note-kicker { color: var(--buoy-vermilion); font-size: 0.65rem; }
#closeNote { position: absolute; top: 0.72rem; right: 1rem; border: 0; color: var(--sea-foam); background: transparent; cursor: pointer; font-size: 1.5rem; }

@keyframes currentPulse { to { stroke-dashoffset: -64; } }
@keyframes membraneRotate { to { transform: rotate(360deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%; } 50% { border-radius: 56% 44% 60% 40% / 43% 59% 41% 57%; } }
@keyframes tideInterference { to { transform: translate3d(3%, -2%, 0) scale(1.04); } }
@keyframes planktonDrift { to { margin-left: 26px; margin-top: -38px; opacity: 0.7; } }
@keyframes gateBreathe { 50% { transform: translateY(-12px) scaleY(1.12); opacity: 1; } }
@keyframes kelpSway { to { transform: rotate(9deg) translateX(8px); border-radius: 65% 35% 18px 18px; } }
@keyframes bubbleStretch { to { border-radius: 42% 58% 60% 40% / 58% 41% 59% 42%; transform: translateY(-12px) scale(1.04); } }

@media (max-width: 820px) {
  .bathymetry-legend { right: 0.5rem; width: 112px; font-size: 0.68rem; }
  .legend-title { display: none; }
  .scene { padding: 5.5rem 1rem; min-height: 105vh; }
  .command-membrane { width: 96vw; min-height: 68vh; }
  .orbit-labels span { transform: rotate(var(--a)) translateX(43vw) rotate(calc(var(--a) * -1)); font-size: 0.58rem; }
  .system-lagoon { width: 94vw; min-height: 540px; margin-left: 0; margin-right: 0; }
  .lagoon-harbor, .lagoon-pressure { margin-left: auto; }
  .kelp-bundle { opacity: 0.38; width: 70vw; }
  .abyss-footer { flex-direction: column; }
}