:root {
  /* DESIGN typography note: IBM Plex Mono** only for tiny coordinates. */
  --harbor: #071A12;
  --kelp: #174D35;
  --algae: #7BFFB2;
  --mint: #B8F6D2;
  --plywood: #B49A68;
  --coral: #FF6F61;
  --glass: rgba(184, 246, 210, 0.14);
  --ink: rgba(7, 26, 18, 0.82);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Commissioner", Inter, system-ui, sans-serif;
  color: var(--mint);
  background: var(--harbor);
}

button { font: inherit; color: inherit; }

.harbor {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 12%, rgba(123, 255, 178, 0.18), transparent 28%),
    radial-gradient(circle at 84% 76%, rgba(255, 111, 97, 0.10), transparent 24%),
    linear-gradient(180deg, #174D35 0%, #071A12 57%, #031009 100%);
  transition: background 900ms ease;
}

.harbor[data-tide="flood"] { background: radial-gradient(circle at 44% 34%, rgba(123, 255, 178, 0.22), transparent 32%), linear-gradient(180deg, #1b6746 0%, #0b2d1f 52%, #071A12 100%); }
.harbor[data-tide="night"] { background: radial-gradient(circle at 76% 18%, rgba(123, 255, 178, 0.16), transparent 29%), linear-gradient(180deg, #020906 0%, #071A12 48%, #000302 100%); }

.water-grain,
.water-grain::before,
.water-grain::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.water-grain {
  opacity: 0.58;
  background-image:
    linear-gradient(115deg, transparent 0 45%, rgba(184, 246, 210, 0.045) 46% 47%, transparent 48% 100%),
    radial-gradient(circle, rgba(184, 246, 210, 0.08) 1px, transparent 1.7px);
  background-size: 140px 90px, 23px 23px;
  animation: currentSlide 18s linear infinite;
}

.water-grain::before {
  content: "";
  background: repeating-linear-gradient(90deg, rgba(123, 255, 178, 0.04) 0 1px, transparent 1px 19px);
  mix-blend-mode: screen;
}

.water-grain::after {
  content: "";
  background: radial-gradient(ellipse at center, transparent 0 45%, rgba(7, 26, 18, 0.72) 100%);
}

.dock-tags {
  position: absolute;
  z-index: 20;
  top: 6vh;
  left: clamp(14px, 3vw, 48px);
  display: grid;
  gap: 10px;
}

.dock-tag {
  width: 124px;
  padding: 10px 12px;
  border: 1.5px solid rgba(180, 154, 104, 0.78);
  border-radius: 5px 16px 7px 12px;
  background: rgba(7, 26, 18, 0.58);
  box-shadow: 4px 5px 0 rgba(180, 154, 104, 0.17);
  text-align: left;
  cursor: pointer;
  transform: rotate(-1.5deg);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.dock-tag:nth-child(2) { transform: translateX(8px) rotate(1deg); }
.dock-tag:nth-child(3) { transform: translateX(-4px) rotate(-2.5deg); }
.dock-tag:hover, .dock-tag.is-active { background: rgba(23, 77, 53, 0.86); border-color: var(--algae); transform: translateX(12px) rotate(0deg); }
.dock-tag span { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dock-tag small { display: block; margin-top: 2px; color: var(--plywood); font-family: "IBM Plex Mono", monospace; font-size: 0.58rem; }

.bento-cluster {
  position: absolute;
  z-index: 5;
  inset: 50% auto auto 50%;
  width: min(1120px, 88vw);
  height: min(720px, 78vh);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  transform: translate(-47%, -49%);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.harbor[data-tide="flood"] .bento-cluster { transform: translate(-49%, -51%) scale(1.025) rotate(-0.35deg); }
.harbor[data-tide="night"] .bento-cluster { transform: translate(-48%, -48%) scale(0.985) rotate(0.55deg); }

.cell {
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(184, 246, 210, 0.48);
  background: linear-gradient(145deg, rgba(23, 77, 53, 0.84), rgba(7, 26, 18, 0.74));
  box-shadow: 0 26px 60px rgba(0,0,0,0.34), inset 0 0 34px rgba(123,255,178,0.045);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms ease, border-color 420ms ease, background 640ms ease;
}

.cell::before {
  content: "";
  position: absolute;
  inset: 7px -8px -7px 8px;
  border: 1px solid rgba(180, 154, 104, 0.28);
  border-radius: inherit;
  pointer-events: none;
}

.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 35%, rgba(184,246,210,0.11) 42%, transparent 49% 100%);
  transform: translateX(-120%);
  transition: transform 760ms ease;
  pointer-events: none;
}

.cell.active::after, .cell:hover::after { transform: translateX(120%); }
.cell:hover { border-color: var(--algae); box-shadow: 0 34px 80px rgba(0,0,0,0.42), 0 0 22px rgba(123,255,178,0.13); }

.water-window { grid-column: 3 / span 6; grid-row: 2 / span 4; border-radius: 32px 14px 38px 18px; transform: translate(-8px, 6px); background: linear-gradient(160deg, rgba(23,77,53,0.76), rgba(7,26,18,0.88)); }
.buoy-cell { grid-column: 9 / span 2; grid-row: 1 / span 3; border-radius: 14px 31px 16px 24px; transform: translate(13px, -12px) rotate(1.2deg); }
.message-cell { grid-column: 1 / span 3; grid-row: 2 / span 2; border-radius: 9px 24px 13px 12px; transform: translate(-12px, 10px) rotate(-1.8deg); background: linear-gradient(140deg, rgba(180,154,104,0.22), rgba(23,77,53,0.78)); }
.sonar-cell { grid-column: 10 / span 3; grid-row: 4 / span 2; border-radius: 28px 10px 20px 12px; transform: translate(8px, 10px); }
.tide-gauge { grid-column: 2 / span 2; grid-row: 5 / span 3; border-radius: 20px 11px 29px 14px; transform: translate(11px, 15px) rotate(1.4deg); }
.bubble-phrase { grid-column: 8 / span 2; grid-row: 6 / span 3; border-radius: 13px 31px 22px 11px; transform: translate(16px, -4px); }
.coordinate-tile { grid-column: 11 / span 2; grid-row: 1 / span 2; border-radius: 8px 8px 21px 10px; transform: translate(-6px, 14px) rotate(-2.2deg); padding: 20px 16px; }
.bottom-drawer { grid-column: 4 / span 5; grid-row: 6 / span 2; border-radius: 12px 16px 9px 29px; transform: translate(-5px, 18px) rotate(-0.8deg); padding: 18px 22px; }

.harbor[data-tide="flood"] .water-window { transform: translate(10px, -8px) rotate(0.4deg); }
.harbor[data-tide="flood"] .message-cell { transform: translate(7px, -9px) rotate(1deg); }
.harbor[data-tide="flood"] .bubble-phrase { transform: translate(2px, -20px) rotate(-0.8deg); }
.harbor[data-tide="night"] .cell { background: linear-gradient(145deg, rgba(7,26,18,0.92), rgba(23,77,53,0.54)); border-color: rgba(123,255,178,0.42); }

.wordmark-wrap { position: absolute; inset: 12% 8%; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.stamp, .mono { font-family: "IBM Plex Mono", monospace; font-size: clamp(0.58rem, 0.8vw, 0.72rem); letter-spacing: 0.12em; color: rgba(184,246,210,0.68); text-transform: uppercase; }
.wordmark { position: relative; margin: 8px 0 12px; color: var(--mint); font-size: clamp(3.4rem, 8vw, 7.8rem); line-height: 0.82; letter-spacing: -0.08em; font-weight: 800; text-transform: uppercase; text-shadow: 0 0 22px rgba(123,255,178,0.18); animation: refract 5s ease-in-out infinite; }
.wordmark::after { content: attr(data-text); position: absolute; inset: 0; color: var(--algae); opacity: 0.16; clip-path: polygon(0 42%, 100% 34%, 100% 54%, 0 62%); transform: translateX(8px); animation: shimmerSlice 3.6s ease-in-out infinite; }
.confession { max-width: 440px; margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.25rem, 2.2vw, 2.2rem); line-height: 1.05; color: var(--plywood); }
.tide-rings { position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 42% 48%, transparent 0 34px, rgba(123,255,178,0.06) 36px 38px); animation: ringPulse 8s ease-in-out infinite; }
.kelp-lines { position: absolute; inset: auto 0 0 0; width: 100%; height: 45%; opacity: 0.62; }
svg path, svg circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kelp-lines path, .rope path, .line-fish path, .line-fish circle { stroke: var(--algae); stroke-dasharray: 640; stroke-dashoffset: 640; animation: drawLine 4s ease forwards, kelpSway 5s ease-in-out infinite alternate; }
.label { margin: 16px 16px 0; font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; color: var(--algae); }
.label.tan { color: var(--plywood); }
.buoy { display: block; width: 62%; height: 58%; margin: 8px auto 0; color: var(--algae); animation: buoyTap 2.5s ease-in-out infinite; }
.small-line { margin: 8px 16px; font-family: "Newsreader", Georgia, serif; color: var(--mint); font-size: 1.02rem; }
.scrap { position: relative; display: inline-block; margin: 30px 18px 10px; padding: 14px 18px; background: rgba(180,154,104,0.92); color: var(--harbor); font-family: "Newsreader", Georgia, serif; font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 2rem); box-shadow: 7px 8px 0 rgba(7,26,18,0.34); transform: rotate(-5deg); transition: transform 400ms ease; }
.editorial { margin: 0 20px; font-family: "Newsreader", Georgia, serif; color: rgba(184,246,210,0.78); }
.sonar { position: absolute; inset: 26% 14% 18%; border-radius: 50%; display: grid; place-items: center; }
.sonar i { position: absolute; width: 34px; height: 34px; border: 1px solid var(--algae); border-radius: 50%; animation: sonarRing 2.8s ease-out infinite; }
.sonar i:nth-child(2) { animation-delay: .75s; }
.sonar i:nth-child(3) { animation-delay: 1.5s; }
.sonar-cell .mono { position: absolute; bottom: 15px; left: 16px; }
.gauge { position: absolute; inset: 58px 34% 28px 30%; border-left: 2px solid var(--mint); }
.gauge span { display: block; width: 42px; height: 1px; margin: 16px 0; background: rgba(184,246,210,0.65); }
.gauge b { position: absolute; left: -9px; bottom: 18%; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px rgba(255,111,97,0.6); transition: bottom 700ms ease; }
.tide-readout { position: absolute; left: 16px; bottom: 16px; color: var(--plywood); }
.bubble-stack { position: absolute; inset: 0; }
.bubble { position: absolute; bottom: 16px; left: 28%; width: 28px; height: 28px; border: 1px solid var(--mint); border-radius: 50%; background: rgba(184,246,210,0.08); cursor: pointer; animation: bubbleRise 6s linear infinite; }
.bubble:nth-child(2) { left: 58%; animation-duration: 7.5s; animation-delay: -2s; }
.bubble:nth-child(3) { left: 44%; animation-duration: 5s; animation-delay: -3s; }
.bubble:nth-child(4) { left: 72%; animation-duration: 8.5s; animation-delay: -4s; }
.bubble.small { width: 18px; height: 18px; }
.bubble.tiny { width: 10px; height: 10px; }
.bubble.split { animation: splitBubble 520ms ease forwards; }
.vertical-phrase { position: absolute; left: 18px; bottom: 18px; margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.2rem; line-height: 1.08; color: var(--plywood); }
.coordinate-tile .mono { margin: 0 0 8px; color: var(--mint); }
.coral-mark { position: absolute; right: 16px; bottom: 16px; width: 30px; height: 30px; }
.coral-mark::before, .coral-mark::after { content: ""; position: absolute; inset: 13px 0 auto 0; height: 3px; background: var(--coral); box-shadow: 0 0 14px rgba(255,111,97,0.5); animation: coralBlink 2.2s steps(2,end) infinite; }
.coral-mark::after { transform: rotate(90deg); }
.note-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.note-row span { padding: 8px 10px; border: 1px solid rgba(180,154,104,0.55); border-radius: 16px 8px 14px 6px; color: var(--mint); font-family: "Newsreader", Georgia, serif; background: rgba(7,26,18,0.26); }
.rope { position: absolute; left: 22px; right: 22px; bottom: 6px; width: calc(100% - 44px); height: 40px; color: var(--plywood); opacity: .7; }
.floating-evidence { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.tag, .shell-label { position: absolute; padding: 9px 13px; background: rgba(184,246,210,0.86); color: var(--harbor); border: 1px solid rgba(7,26,18,0.38); box-shadow: 6px 8px 0 rgba(0,0,0,0.18); font-family: "Newsreader", Georgia, serif; font-weight: 700; transform: rotate(var(--r)); transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.tag-one { --r: 8deg; left: 19vw; top: 72vh; animation: floatEvidence 7s ease-in-out infinite; }
.tag-two { --r: -4deg; right: 9vw; top: 58vh; animation: floatEvidence 8s ease-in-out infinite reverse; }
.tag-three { --r: 3deg; left: 48vw; top: 9vh; background: rgba(180,154,104,0.92); animation: floatEvidence 6.6s ease-in-out infinite; }
.shell-label { --r: -7deg; right: 17vw; bottom: 8vh; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .14em; color: var(--kelp); animation: floatEvidence 9s ease-in-out infinite reverse; }
.fish-lane { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .38; }
.line-fish { position: absolute; color: var(--algae); filter: drop-shadow(0 0 10px rgba(123,255,178,.22)); }
.fish-one { width: 190px; top: 37%; left: -210px; animation: fishCross 24s linear infinite; }
.fish-two { width: 150px; top: 63%; left: -170px; animation: fishCross 31s linear infinite 7s; opacity: .58; }

@keyframes currentSlide { to { background-position: 220px 0, 46px 69px; } }
@keyframes refract { 0%,100% { transform: skewX(0deg) translateY(0); } 48% { transform: skewX(-2deg) translateY(2px); } 52% { transform: skewX(1.5deg) translateY(-1px); } }
@keyframes shimmerSlice { 0%,100% { transform: translateX(6px); opacity: .12; } 50% { transform: translateX(-9px); opacity: .25; } }
@keyframes ringPulse { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .85; transform: scale(1.05); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes kelpSway { from { transform: translateX(-3px); } to { transform: translateX(4px); } }
@keyframes buoyTap { 0%,100% { transform: translateY(0) rotate(-2deg); } 48% { transform: translateY(10px) rotate(3deg); } 56% { transform: translateY(6px) rotate(-5deg); } }
@keyframes sonarRing { from { transform: scale(.4); opacity: .85; } to { transform: scale(4.2); opacity: 0; } }
@keyframes bubbleRise { from { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(-205px) translateX(20px); opacity: 0; } }
@keyframes splitBubble { to { transform: scale(2.4) translateY(-16px); opacity: 0; } }
@keyframes coralBlink { 50% { opacity: .18; } }
@keyframes floatEvidence { 0%,100% { margin-top: 0; margin-left: 0; } 50% { margin-top: -14px; margin-left: 10px; } }
@keyframes fishCross { to { transform: translateX(calc(100vw + 380px)); } }

@media (max-width: 860px) {
  html, body { overflow: auto; }
  .harbor { min-height: 1180px; }
  .dock-tags { top: 18px; left: 16px; grid-template-columns: repeat(3, auto); }
  .dock-tag { width: 104px; padding: 8px; }
  .bento-cluster { top: 58%; width: 92vw; height: 930px; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(14, 1fr); transform: translate(-50%, -48%); }
  .water-window { grid-column: 1 / span 6; grid-row: 2 / span 4; }
  .message-cell { grid-column: 1 / span 3; grid-row: 6 / span 2; }
  .buoy-cell { grid-column: 4 / span 3; grid-row: 6 / span 3; }
  .sonar-cell { grid-column: 1 / span 3; grid-row: 8 / span 2; }
  .tide-gauge { grid-column: 4 / span 3; grid-row: 9 / span 3; }
  .bubble-phrase { grid-column: 1 / span 3; grid-row: 10 / span 3; }
  .coordinate-tile { grid-column: 4 / span 3; grid-row: 12 / span 2; }
  .bottom-drawer { grid-column: 1 / span 6; grid-row: 13 / span 2; }
}