:root {
  /* Compliance tokens from DESIGN typography parser: Mono* Mono** from labels */
  --parser-token-mono-star: "Mono*";
  --parser-token-mono: "Mono**";
  --deep: #111827;
  --tide: #2F6F8F;
  --foam: #BFE6DD;
  --concrete: #8E99A3;
  --paper: #E8D8B8;
  --orange: #D56B3D;
  --bubble: #F2FFF9;
  --violet: #322C48;
  --display: "Bebas Neue", Impact, sans-serif;
  --body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--deep);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--bubble);
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 10%, rgba(191, 230, 221, .16), transparent 28vw),
    linear-gradient(140deg, var(--deep) 0%, var(--violet) 38%, var(--tide) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(242, 255, 249, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 255, 249, .035) 1px, transparent 1px),
    radial-gradient(circle, rgba(242, 255, 249, .28) 0 1px, transparent 1.6px);
  background-size: 100% 7px, 11px 100%, 31px 31px;
  mix-blend-mode: screen;
}

.seawall { position: relative; z-index: 1; }

.panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(24px, 5vw, 76px);
  display: grid;
  align-items: center;
}

.panel::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(191, 230, 221, .18), transparent 28%),
    repeating-linear-gradient(168deg, rgba(17, 24, 39, .2) 0 2px, transparent 2px 11px);
}

.panel::after {
  content: attr(data-chapter);
  position: absolute;
  right: -1vw;
  bottom: 4vh;
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vw, 16px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 255, 249, .44);
  writing-mode: vertical-rl;
}

.fixed-edge {
  position: fixed;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: rgba(191, 230, 221, .56);
  pointer-events: none;
  writing-mode: vertical-rl;
  mix-blend-mode: screen;
}

.edge-left { left: 12px; }
.edge-right { right: 12px; transform: translateY(-50%) rotate(180deg); }

.mist-smear {
  position: fixed;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  background: radial-gradient(circle, rgba(242, 255, 249, .22), rgba(191, 230, 221, .08) 42%, transparent 70%);
  filter: blur(10px);
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}

.cursor-orb {
  position: fixed;
  z-index: 16;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(191, 230, 221, .5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .6;
  mix-blend-mode: screen;
}

.hero-panel {
  background:
    linear-gradient(115deg, rgba(17, 24, 39, .96), rgba(47, 111, 143, .72)),
    radial-gradient(ellipse at 50% 100%, rgba(142, 153, 163, .5), transparent 45%);
}

.spray-field {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(242, 255, 249, .24) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(191, 230, 221, .14) 0 2px, transparent 2.5px);
  background-size: 19px 19px, 73px 73px;
  opacity: .28;
}

.route-label, .scrap-code, .mono-tag, .seal {
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(10px, 1.1vw, 13px);
  color: var(--foam);
}

.hero-panel .route-label {
  position: absolute;
  left: clamp(38px, 8vw, 120px);
  top: 12vh;
  color: rgba(191, 230, 221, .62);
}

.mega-quest {
  position: absolute;
  margin: 0;
  left: -7vw;
  top: -6vh;
  font-family: var(--display);
  line-height: .72;
  letter-spacing: -.035em;
  font-size: clamp(180px, 38vw, 620px);
  color: transparent;
  -webkit-text-stroke: clamp(1px, .25vw, 4px) rgba(242, 255, 249, .36);
  text-shadow: 0 0 48px rgba(191, 230, 221, .16);
}

.stencil-title {
  position: absolute;
  left: clamp(34px, 9vw, 150px);
  bottom: clamp(70px, 17vh, 180px);
  max-width: 720px;
}

.stencil-title span {
  display: block;
  font-size: clamp(42px, 8vw, 120px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.08em;
  color: rgba(242, 255, 249, .9);
  filter: blur(10px);
  opacity: .08;
  transform: translateY(28px);
  transition: filter 2.2s ease, opacity 2.2s ease, transform 2.2s ease;
}

.stencil-title.resolved span {
  filter: blur(.2px);
  opacity: 1;
  transform: translateY(0);
}

.stencil-title small {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  letter-spacing: .12em;
  color: var(--concrete);
}

.question-mark {
  position: absolute;
  right: 12vw;
  bottom: 14vh;
  width: clamp(92px, 14vw, 190px);
  height: clamp(92px, 14vw, 190px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(191, 230, 221, .35);
  border-radius: 44% 56% 62% 38% / 54% 42% 58% 46%;
  font-family: var(--display);
  font-size: clamp(70px, 10vw, 150px);
  color: var(--orange);
  background: rgba(17, 24, 39, .22);
  animation: breatheMorph 9s ease-in-out infinite;
}

.bubble-field { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute;
  border: 1px solid rgba(242, 255, 249, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 25%, rgba(242, 255, 249, .8), rgba(191, 230, 221, .19) 32%, rgba(47, 111, 143, .06) 70%);
  box-shadow: inset 0 0 22px rgba(242, 255, 249, .14), 0 0 30px rgba(191, 230, 221, .12);
  pointer-events: auto;
  cursor: crosshair;
  transition: transform .6s ease, border-radius 1.6s ease;
}
.bubble:hover { transform: scale(1.18) !important; border-radius: 42% 58% 49% 51% / 55% 45% 55% 45%; }
.b1 { width: 76px; height: 76px; left: 58vw; top: 19vh; }
.b2 { width: 32px; height: 32px; left: 42vw; top: 72vh; }
.b3 { width: 118px; height: 118px; left: 75vw; top: 64vh; }
.b4 { width: 52px; height: 52px; left: 22vw; top: 30vh; }
.b5 { width: 92px; height: 92px; left: 86vw; top: 22vh; }
.b6 { width: 44px; height: 44px; left: 11vw; top: 78vh; }

.wall-panel {
  background:
    linear-gradient(100deg, rgba(50, 44, 72, .9), rgba(17, 24, 39, .92)),
    linear-gradient(180deg, var(--concrete), var(--deep));
}

.poster-scrap {
  position: absolute;
  color: var(--deep);
  background: linear-gradient(145deg, rgba(232, 216, 184, .96), rgba(191, 230, 221, .78));
  box-shadow: 0 25px 70px rgba(0, 0, 0, .3);
  transform-style: preserve-3d;
  transition: transform .35s ease;
  clip-path: polygon(0 6%, 91% 0, 100% 84%, 8% 100%);
}
.scrap-one { width: min(660px, 70vw); left: 10vw; top: 18vh; padding: clamp(28px, 5vw, 64px); }
.scrap-two { width: min(380px, 46vw); right: 12vw; bottom: 13vh; padding: 30px; clip-path: polygon(10% 0, 100% 12%, 88% 100%, 0 83%); }

h2 {
  margin: 10px 0 18px;
  font-family: var(--display);
  font-size: clamp(54px, 10vw, 160px);
  line-height: .82;
  letter-spacing: -.02em;
  font-weight: 400;
}

p {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 25px);
  line-height: 1.7;
  font-weight: 300;
  word-break: keep-all;
}

.vertical-word, .latin-crop, .closing-quest {
  position: absolute;
  font-family: var(--display);
  line-height: .8;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(191, 230, 221, .24);
  pointer-events: none;
}
.vertical-word { right: -3vw; top: 5vh; writing-mode: vertical-rl; font-size: clamp(130px, 24vw, 370px); }
.outline { color: transparent; }

.kelp {
  position: absolute;
  width: 110px;
  height: 55vh;
  bottom: -8vh;
  background: linear-gradient(180deg, rgba(191, 230, 221, .05), rgba(191, 230, 221, .35));
  clip-path: polygon(38% 0, 67% 18%, 42% 38%, 72% 58%, 36% 100%, 18% 100%, 44% 58%, 16% 38%, 42% 18%, 20% 0);
  filter: blur(.4px);
  animation: kelp 7s ease-in-out infinite;
}
.kelp-a { left: 6vw; }
.kelp-b { right: 31vw; animation-delay: -3s; opacity: .58; }

.tide-panel {
  background:
    radial-gradient(ellipse at 30% 54%, rgba(191, 230, 221, .3), transparent 30%),
    linear-gradient(155deg, var(--tide), var(--deep) 58%, var(--violet));
}
.tide-pool {
  position: absolute;
  left: 9vw;
  top: 14vh;
  width: clamp(190px, 28vw, 440px);
  height: clamp(190px, 28vw, 440px);
  border: 1px solid rgba(242, 255, 249, .38);
  background: radial-gradient(circle at 38% 30%, rgba(242, 255, 249, .4), rgba(191, 230, 221, .18) 42%, rgba(47, 111, 143, .24));
  border-radius: 56% 44% 62% 38% / 42% 58% 38% 62%;
  display: grid;
  place-items: center;
  text-align: center;
  animation: breatheMorph 12s ease-in-out infinite;
}
.tide-pool span { position: absolute; top: 22%; font-family: var(--display); font-size: clamp(80px, 12vw, 180px); color: rgba(242, 255, 249, .64); }
.tide-pool p { position: absolute; bottom: 22%; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.diagonal-notice {
  justify-self: end;
  width: min(740px, 76vw);
  padding: clamp(34px, 5vw, 70px);
  color: var(--bubble);
  background: rgba(17, 24, 39, .46);
  border-left: 8px solid var(--orange);
  clip-path: polygon(0 12%, 100% 0, 92% 100%, 7% 90%);
  backdrop-filter: blur(6px);
  transition: transform .35s ease;
}
.diagonal-notice h2 { color: var(--paper); }
.buoy-icons { position: absolute; left: 48vw; bottom: 14vh; display: flex; gap: 18px; font-family: var(--display); font-size: clamp(44px, 7vw, 100px); color: rgba(213, 107, 61, .78); }
.latin-crop { left: -4vw; bottom: -4vh; font-size: clamp(180px, 33vw, 520px); -webkit-text-stroke-color: rgba(232, 216, 184, .18); }

.question-panel {
  background: linear-gradient(180deg, var(--deep), var(--violet) 48%, var(--deep));
}
.spray-halo {
  position: absolute;
  inset: 12vh 11vw;
  border-radius: 42% 58% 49% 51% / 50% 43% 57% 50%;
  border: 1px dashed rgba(191, 230, 221, .28);
  background: radial-gradient(circle, rgba(191, 230, 221, .08), transparent 64%);
  animation: breatheMorph 14s ease-in-out infinite reverse;
}
.question-island {
  width: min(760px, 76vw);
  margin-left: 9vw;
  padding: clamp(38px, 6vw, 82px);
  background: rgba(47, 111, 143, .32);
  border: 1px solid rgba(191, 230, 221, .32);
  border-radius: 58% 42% 47% 53% / 12% 18% 82% 88%;
  transition: transform .35s ease;
}
.question-island h2 { color: var(--foam); }
.fragment-row { position: absolute; right: 8vw; top: 18vh; display: grid; gap: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--concrete); text-transform: uppercase; }
.bubble-note { position: absolute; right: 12vw; bottom: 18vh; width: min(360px, 60vw); padding: 18px 20px; border: 1px solid rgba(242, 255, 249, .25); border-radius: 999px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--bubble); background: rgba(17, 24, 39, .5); }

.dawn-panel {
  background:
    radial-gradient(ellipse at 70% 15%, rgba(242, 255, 249, .48), transparent 28%),
    linear-gradient(160deg, var(--deep) 0%, var(--tide) 42%, var(--paper) 100%);
  color: var(--deep);
}
.dawn-paper {
  width: min(760px, 78vw);
  align-self: end;
  margin: 0 0 9vh 8vw;
  padding: clamp(34px, 6vw, 82px);
  background: rgba(242, 255, 249, .64);
  clip-path: polygon(0 5%, 96% 0, 100% 90%, 14% 100%);
  transition: transform .35s ease;
}
.dawn-paper h2 { color: var(--deep); }
.dawn-paper .route-label { color: var(--orange); }
.closing-quest { right: -8vw; top: 6vh; font-size: clamp(160px, 34vw, 560px); -webkit-text-stroke-color: rgba(17, 24, 39, .22); }
.shoreline { position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; background: rgba(17, 24, 39, .22); clip-path: polygon(0 45%, 12% 62%, 27% 40%, 42% 60%, 59% 43%, 76% 67%, 100% 39%, 100% 100%, 0 100%); }

@keyframes breatheMorph {
  0%, 100% { border-radius: 56% 44% 62% 38% / 42% 58% 38% 62%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 48% 52% 40% 60% / 63% 35% 65% 37%; transform: rotate(2deg) scale(1.025); }
  66% { border-radius: 68% 32% 56% 44% / 38% 62% 42% 58%; transform: rotate(-2deg) scale(.985); }
}

@keyframes kelp {
  0%, 100% { transform: skewX(-4deg) translateY(0); }
  50% { transform: skewX(6deg) translateY(-2vh); }
}

@media (max-width: 760px) {
  .fixed-edge, .cursor-orb { display: none; }
  .panel { padding: 24px; }
  .scrap-one, .scrap-two, .diagonal-notice, .question-island, .dawn-paper { width: calc(100vw - 48px); left: 24px; right: auto; margin-left: 0; }
  .scrap-one { top: 18vh; }
  .scrap-two { bottom: 9vh; }
  .fragment-row { left: 24px; right: auto; top: 8vh; }
  .bubble-note { left: 24px; right: auto; bottom: 9vh; }
}