:root {
  /* Design typography tokens: IBM Plex Mono** for coordinates */
  --library: #101713;
  --walnut: #211813;
  --pond: #BDEBE2;
  --lilac: #D8C8F2;
  --peach: #F2C8B6;
  --cream: #F6EED8;
  --moss: #A9D6A1;
  --brass: #C9A45C;
  --sans: "Noto Sans", sans-serif;
  --serif: "Alegreya", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--library); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--cream);
  background: var(--library);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(circle at 20% 10%, rgba(246,238,216,.18) 0 1px, transparent 1px), radial-gradient(circle at 70% 80%, rgba(189,235,226,.12) 0 1px, transparent 1px);
  background-size: 18px 18px, 29px 29px;
  mix-blend-mode: screen;
}

.lamp-bloom {
  position: fixed;
  width: 42vw;
  height: 42vw;
  left: -10vw;
  top: -12vw;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201,164,92,.35), rgba(242,200,182,.12) 38%, transparent 70%);
  filter: blur(8px);
}

.hud-frame {
  position: fixed;
  inset: 22px;
  z-index: 15;
  pointer-events: none;
  border: 1px solid rgba(189,235,226,.28);
  box-shadow: inset 0 0 38px rgba(189,235,226,.06), 0 0 60px rgba(16,23,19,.85);
}

.corner { position: absolute; width: 58px; height: 58px; border-color: var(--pond); opacity: .78; }
.corner-tl { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.corner-tr { right: -1px; top: -1px; border-right: 2px solid; border-top: 2px solid; }
.corner-bl { left: -1px; bottom: -1px; border-left: 2px solid; border-bottom: 2px solid; }
.corner-br { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }

.crosshair { position: absolute; left: 50%; width: 1px; height: 52px; background: rgba(189,235,226,.35); }
.crosshair::after { content: ""; position: absolute; left: -16px; top: 25px; width: 33px; height: 1px; background: rgba(189,235,226,.35); }
.crosshair-top { top: 18px; }
.crosshair-bottom { bottom: 18px; }

.hud-line {
  position: absolute;
  font: 500 10px/1 var(--mono);
  letter-spacing: .16em;
  color: rgba(189,235,226,.7);
}
.top-line { top: 14px; left: 84px; }
.bottom-line { bottom: 14px; left: 84px; color: rgba(246,238,216,.55); }

.vertical-index {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(246,238,216,.42);
}
.vertical-index span { position: relative; padding-right: 22px; transition: color .8s ease; }
.vertical-index span::after { content: ""; position: absolute; right: 0; top: 2px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(189,235,226,.45); background: rgba(16,23,19,.65); }
.vertical-index span.current { color: var(--moss); }
.vertical-index span.current::after { background: var(--moss); box-shadow: 0 0 18px var(--moss); }

.salvage-aquarium { position: relative; z-index: 3; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 12vh 10vw;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--library);
}
.scene-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(216,200,242,.18), transparent 35%), radial-gradient(circle at 28% 78%, rgba(169,214,161,.12), transparent 38%); }
.meadow-map { background: linear-gradient(120deg, #101713, #211813 65%, #101713); }
.ruling { background: linear-gradient(90deg, rgba(33,24,19,1), rgba(16,23,19,1)); }
.ruling::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(246,238,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(189,235,226,.045) 1px, transparent 1px); background-size: 100% 44px, 54px 100%; }
.caustics { background: radial-gradient(circle at 22% 45%, rgba(189,235,226,.14), transparent 28%), #101713; }
.caustics::before { content: ""; position: absolute; inset: -20%; background: repeating-radial-gradient(ellipse at 50% 50%, rgba(189,235,226,.07) 0 2px, transparent 2px 24px); transform: rotate(-12deg); animation: waterTurn 24s linear infinite; }
.contour { background: #211813; }
.contour::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 60% 45%, transparent 0 24px, rgba(169,214,161,.07) 25px 27px); }
.dawn { background: linear-gradient(160deg, #101713 10%, #211813 54%, rgba(201,164,92,.28)); }

.specimen-plate, .drawer, .archive-stack, .door-pane {
  width: min(720px, 78vw);
  padding: clamp(28px, 5vw, 62px);
  background: linear-gradient(145deg, rgba(33,24,19,.76), rgba(16,23,19,.56));
  border: 1px solid rgba(189,235,226,.28);
  box-shadow: 0 24px 90px rgba(0,0,0,.38), inset 0 0 34px rgba(189,235,226,.05);
  backdrop-filter: blur(16px);
}
.hero-plate { margin-left: 5vw; }
.narrow { margin-left: auto; margin-right: 9vw; width: min(560px, 72vw); }
.drawer-left { margin-left: 3vw; }
.archive-stack { margin-left: 10vw; }
.door-pane { margin: auto; text-align: center; }

.mono-label, .tag {
  margin: 0 0 18px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .18em;
  color: var(--pond);
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: .9;
  color: var(--cream);
}
h1 { font-size: clamp(58px, 11vw, 150px); letter-spacing: -.055em; }
h2 { font-size: clamp(46px, 7vw, 96px); letter-spacing: -.035em; }
p { font-size: clamp(17px, 1.55vw, 23px); line-height: 1.65; color: rgba(246,238,216,.78); }
.premise { max-width: 650px; color: rgba(246,238,216,.86); }

.annotation {
  position: absolute;
  font: italic 500 18px/1.4 var(--serif);
  color: var(--peach);
  opacity: .78;
}
.rail-left { left: 9vw; bottom: 14vh; max-width: 260px; }
.rail-right { right: 10vw; bottom: 17vh; max-width: 260px; }

.inventory-pane {
  position: absolute;
  right: 13vw;
  top: 25vh;
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(216,200,242,.32);
  background: rgba(216,200,242,.08);
  backdrop-filter: blur(12px);
}
.inventory-pane span { font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--lilac); }

.abstract-loop, .release-orbit {
  position: absolute;
  right: 18vw;
  bottom: 14vh;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(169,214,161,.32);
  border-radius: 45% 55% 50% 50%;
  background: radial-gradient(circle, transparent 45%, rgba(169,214,161,.12) 46% 54%, transparent 55%);
  animation: slowSpin 20s linear infinite;
}
.abstract-loop::before, .abstract-loop::after { content: ""; position: absolute; width: 70px; height: 34px; border-radius: 50%; background: rgba(242,200,182,.55); filter: blur(.4px); }
.abstract-loop::before { left: 18px; top: 68px; transform: rotate(-25deg); }
.abstract-loop::after { right: 24px; bottom: 64px; background: rgba(216,200,242,.5); transform: rotate(18deg); }

.drift-field, .fish-layer { position: fixed; inset: 0; pointer-events: none; z-index: 7; }
.fragment { position: absolute; display: block; border: 1px solid rgba(246,238,216,.18); background: rgba(189,235,226,.16); filter: blur(.2px); animation: drift 16s ease-in-out infinite alternate; }
.shard-a { width: 70px; height: 34px; left: 64%; top: 22%; border-radius: 50%; background: rgba(216,200,242,.28); }
.shard-b { width: 28px; height: 90px; left: 18%; top: 68%; border-radius: 40px; background: rgba(169,214,161,.22); animation-delay: -5s; }
.shard-c { width: 96px; height: 96px; left: 78%; top: 72%; clip-path: polygon(50% 0, 100% 70%, 20% 100%); background: rgba(242,200,182,.24); animation-delay: -8s; }
.shard-d { width: 48px; height: 48px; left: 35%; top: 18%; border-radius: 12px 44px 20px 44px; background: rgba(189,235,226,.20); animation-delay: -3s; }
.shard-e { width: 130px; height: 24px; left: 8%; top: 32%; border-radius: 50%; background: rgba(201,164,92,.16); animation-delay: -10s; }

.fish {
  position: absolute;
  width: 150px;
  height: 62px;
  opacity: .72;
  animation: swim 32s linear infinite;
}
.fish::before { content: ""; position: absolute; left: 0; top: 14px; width: 96px; height: 36px; border-radius: 60% 45% 45% 60%; background: linear-gradient(90deg, rgba(189,235,226,.58), rgba(216,200,242,.38)); border: 1px solid rgba(246,238,216,.25); }
.fish::after { content: ""; position: absolute; right: 10px; top: 8px; width: 42px; height: 50px; clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%); background: rgba(242,200,182,.5); }
.fish span { position: absolute; left: 35px; top: 24px; width: 48px; height: 14px; border-top: 1px solid rgba(16,23,19,.4); border-bottom: 1px solid rgba(16,23,19,.3); transform: skewX(-18deg); }
.fish-one { left: -15vw; top: 25vh; animation-duration: 38s; }
.fish-two { left: -20vw; top: 58vh; transform: scale(.72); animation-delay: -13s; animation-duration: 45s; opacity: .5; }
.fish-three { left: -18vw; top: 42vh; transform: scale(1.2); animation-delay: -26s; animation-duration: 54s; opacity: .38; }

.shutter { position: absolute; inset: 0 0 auto; height: 30vh; background: linear-gradient(rgba(216,200,242,.16), transparent); border-bottom: 1px solid rgba(216,200,242,.25); backdrop-filter: blur(6px); }
.scale-cloud { position: absolute; left: 12vw; bottom: 18vh; width: 38vw; height: 38vh; }
.scale-cloud i { position: absolute; width: 74px; height: 38px; border-radius: 50%; background: rgba(189,235,226,.17); border: 1px solid rgba(189,235,226,.2); animation: settle 10s ease-in-out infinite alternate; }
.scale-cloud i:nth-child(1) { left: 10%; top: 12%; background: rgba(242,200,182,.22); }
.scale-cloud i:nth-child(2) { left: 45%; top: 8%; animation-delay: -1s; }
.scale-cloud i:nth-child(3) { left: 30%; top: 42%; background: rgba(216,200,242,.22); animation-delay: -2s; }
.scale-cloud i:nth-child(4) { left: 68%; top: 36%; background: rgba(169,214,161,.2); animation-delay: -3s; }
.scale-cloud i:nth-child(5) { left: 5%; top: 64%; animation-delay: -4s; }
.scale-cloud i:nth-child(6) { left: 55%; top: 72%; background: rgba(242,200,182,.18); animation-delay: -5s; }
.scale-cloud i:nth-child(7) { left: 78%; top: 6%; animation-delay: -6s; }
.scale-cloud i:nth-child(8) { left: 22%; top: 78%; background: rgba(201,164,92,.18); animation-delay: -7s; }

.botanical-diagram { position: absolute; right: 15vw; top: 24vh; width: 320px; height: 430px; border-left: 1px solid rgba(169,214,161,.35); }
.botanical-diagram span { position: absolute; left: 0; bottom: 0; width: 1px; height: 80%; background: rgba(169,214,161,.38); transform-origin: bottom; }
.botanical-diagram span::after { content: ""; position: absolute; top: 25%; left: 0; width: 90px; height: 28px; border: 1px solid rgba(169,214,161,.32); border-radius: 50%; transform: rotate(-24deg); background: rgba(169,214,161,.08); }
.botanical-diagram span:nth-child(1) { transform: rotate(-18deg); }
.botanical-diagram span:nth-child(2) { transform: rotate(12deg); height: 62%; }
.botanical-diagram span:nth-child(3) { transform: rotate(30deg); height: 46%; }
.botanical-diagram span:nth-child(4) { transform: rotate(-36deg); height: 54%; }

.door-button {
  margin-top: 18px;
  border: 1px solid rgba(201,164,92,.7);
  background: rgba(201,164,92,.12);
  color: var(--cream);
  font: 500 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 16px 22px;
  cursor: pointer;
  transition: transform .6s ease, background .6s ease;
}
.door-button:hover { transform: translateY(-4px); background: rgba(201,164,92,.24); }
.release-orbit { left: 11vw; right: auto; border-color: rgba(201,164,92,.32); }
.release-orbit i { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 24px rgba(169,214,161,.45); }
.release-orbit i:nth-child(1) { left: 45%; top: -12px; }
.release-orbit i:nth-child(2) { right: 8%; top: 28%; background: var(--pond); }
.release-orbit i:nth-child(3) { right: 18%; bottom: 7%; background: var(--peach); }
.release-orbit i:nth-child(4) { left: 14%; bottom: 12%; background: var(--lilac); }
.release-orbit i:nth-child(5) { left: -9px; top: 36%; background: var(--brass); }

.reveal-left, .reveal-right, .reveal-up, .reveal-down { opacity: 0; transition: opacity 1.2s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1); }
.reveal-left { transform: translateX(-110px); }
.reveal-right { transform: translateX(110px); }
.reveal-up { transform: translateY(90px); }
.reveal-down { transform: translateY(-90px); }
.scene.in-view .reveal-left, .scene.in-view .reveal-right, .scene.in-view .reveal-up, .scene.in-view .reveal-down, .scene.active .reveal-left, .scene.active .reveal-right, .scene.active .reveal-up, .scene.active .reveal-down { opacity: 1; transform: translate(0,0); }

@keyframes drift { to { transform: translate3d(34px, -42px, 0) rotate(18deg); } }
@keyframes swim { from { transform: translateX(-10vw); } to { transform: translateX(130vw); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes waterTurn { to { transform: rotate(348deg); } }
@keyframes settle { to { transform: translateY(-28px) rotate(16deg); } }

@media (max-width: 760px) {
  .hud-frame { inset: 12px; }
  .top-line, .bottom-line { left: 22px; right: 22px; }
  .vertical-index { display: none; }
  .scene { padding: 14vh 7vw; }
  .hero-plate, .drawer-left, .archive-stack, .narrow { margin: 0; width: 100%; }
  .inventory-pane, .botanical-diagram, .abstract-loop, .release-orbit { opacity: .35; right: 6vw; left: auto; }
  h1 { font-size: clamp(46px, 16vw, 82px); }
}