:root {
  /* compliance tokens from DESIGN.md parser: Mono** sparingly coordinate marks */
  --burnt-koi: #C95E24;
  --ink-plum: #2A1822;
  --deep-lagoon: #12333A;
  --brass-bubble: #D8A84E;
  --apricot-air: #F2A766;
  --seafoam-veil: #A7D8C8;
  --milk-glass: #F8E9D2;
  --display: "Limelight", "Poiret One", "Lora", Georgia, serif;
  --heading: "Poiret One", "Josefin Sans", "Inter", system-ui, sans-serif;
  --body: "Josefin Sans", "Inter", system-ui, sans-serif;
  --mono: "Space Mono", "Space", ui-monospace, SFMono-Regular, monospace;
  --parser-font-token: "Mono**";
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--milk-glass);
  font-family: var(--body);
  background:
    radial-gradient(circle at 82% 10%, rgba(248, 233, 210, .28) 0 8%, transparent 28%),
    linear-gradient(180deg, #F2A766 0%, #C95E24 7%, #12333A 36%, #2A1822 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  opacity: .22;
  background:
    radial-gradient(circle at 8px 8px, rgba(248,233,210,.55) 1px, transparent 2px) 0 0/34px 34px,
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 21px, rgba(216,168,78,.55) 22px 23px, transparent 24px 46px);
  mix-blend-mode: screen;
}

body::after {
  background:
    linear-gradient(100deg, transparent 0 34%, rgba(167,216,200,.09) 35% 36%, transparent 37% 100%),
    repeating-linear-gradient(135deg, rgba(248,233,210,.04) 0 2px, transparent 2px 24px);
}

.observatory,
.ambient {
  position: relative;
  z-index: 1;
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: 34px clamp(22px, 4vw, 72px) 70px clamp(96px, 13vw, 188px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  isolation: isolate;
}

.surface { padding-top: 24px; }
.lab { background: linear-gradient(180deg, rgba(18,51,58,.14), rgba(18,51,58,.5)); }
.console { background: linear-gradient(180deg, rgba(18,51,58,.42), rgba(42,24,34,.45)); }
.archive { background: radial-gradient(circle at 70% 60%, rgba(201,94,36,.26), transparent 34%), linear-gradient(180deg, rgba(42,24,34,.18), rgba(42,24,34,.86)); }

.marquee {
  width: min(1180px, 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding-bottom: 22px;
  border-bottom: 2px solid rgba(216,168,78,.72);
}

.brand-wrap { position: relative; }

.waterline {
  position: absolute;
  left: -18px;
  right: -38px;
  top: 47%;
  height: 24px;
  border-top: 2px solid rgba(167,216,200,.8);
  border-radius: 50%;
  transform: rotate(-1deg);
  filter: drop-shadow(0 0 10px rgba(167,216,200,.55));
}

h1 {
  position: relative;
  margin: 0;
  color: var(--burnt-koi);
  font-family: var(--display);
  font-size: clamp(4.2rem, 12vw, 12.5rem);
  line-height: .78;
  letter-spacing: .055em;
  text-shadow: 0 3px 0 var(--milk-glass), 0 20px 46px rgba(18,51,58,.55), 0 0 28px rgba(242,167,102,.58);
}

.micro-label,
.bubble-note,
.label-strip,
.left-spine b {
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.micro-label {
  margin: 20px 0 0 8px;
  color: var(--ink-plum);
  font-size: .72rem;
}

.bubble-chain {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  min-width: 280px;
  padding-top: 18px;
}

.bubble-chain span,
.alphabet button,
.orb {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-plum);
  font-family: var(--mono);
  background: radial-gradient(circle at 35% 24%, rgba(248,233,210,.92), rgba(167,216,200,.48) 48%, rgba(201,94,36,.22) 72%, transparent 74%);
  border: 1px solid rgba(248,233,210,.72);
  box-shadow: inset -9px -12px 20px rgba(18,51,58,.14), 0 0 24px rgba(248,233,210,.18);
}

.bubble-chain span { width: 46px; height: 46px; animation: bob 5s ease-in-out infinite; }
.bubble-chain span:nth-child(even) { margin-top: 34px; animation-delay: -2s; }

.portholes {
  position: fixed;
  left: clamp(16px, 3vw, 46px);
  top: 24vh;
  z-index: 5;
  display: grid;
  gap: 16px;
}

.porthole {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--milk-glass);
  text-decoration: none;
  font-family: var(--heading);
}

.porthole span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brass-bubble);
  font-family: var(--display);
  background: radial-gradient(circle, rgba(18,51,58,.96), rgba(18,51,58,.55));
  border: 2px solid var(--brass-bubble);
  box-shadow: inset 0 0 0 6px rgba(167,216,200,.16), 0 0 0 0 rgba(167,216,200,.3);
  transition: transform .45s ease, box-shadow .45s ease, background .45s ease;
}

.porthole em {
  max-width: 92px;
  opacity: .72;
  font-style: normal;
  font-size: .78rem;
  line-height: 1.05;
  text-transform: lowercase;
}

.porthole:hover span,
.porthole.active span {
  transform: translateY(-8px) scale(1.08);
  background: radial-gradient(circle, rgba(248,233,210,.9), rgba(167,216,200,.62));
  color: var(--ink-plum);
  box-shadow: 0 0 0 14px rgba(167,216,200,.1), 0 18px 32px rgba(216,168,78,.22);
}

.shelf,
.fan-plaque,
.oval-sign,
.label-strip {
  position: relative;
  border: 1px solid rgba(216,168,78,.75);
  background:
    linear-gradient(135deg, rgba(248,233,210,.93), rgba(248,233,210,.72)),
    radial-gradient(circle at 95% 5%, rgba(242,167,102,.5), transparent 32%);
  color: var(--ink-plum);
  box-shadow: inset 0 0 0 7px rgba(167,216,200,.22), 0 26px 60px rgba(18,51,58,.24);
  backdrop-filter: blur(6px);
}

.buoyant-panel {
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease;
}

.buoyant-panel:hover,
.buoyant-panel.lifted {
  transform: translateY(-12px) rotate(-.45deg);
  box-shadow: inset 0 0 0 7px rgba(167,216,200,.32), 0 34px 74px rgba(167,216,200,.2), 0 0 0 1px rgba(216,168,78,.8);
}

.shelf::before,
.fan-plaque::before,
.oval-sign::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(201,94,36,.44);
  border-radius: inherit;
  pointer-events: none;
}

.shelf {
  margin-top: 9vh;
  padding: clamp(26px, 4vw, 54px);
  border-radius: 34px 86px 34px 34px;
}

.shelf-hero { width: min(760px, 72vw); }
.shelf-lab { margin-left: 4vw; width: min(850px, 78vw); border-radius: 120px 36px 36px 36px; }
.shelf-console { margin-left: 11vw; width: min(790px, 73vw); border-radius: 28px 28px 120px 28px; }
.shelf-archive { margin-left: 2vw; width: min(700px, 70vw); border-radius: 34px 34px 34px 120px; }

.chapter {
  float: left;
  margin: -10px 18px 10px 0;
  color: var(--burnt-koi);
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: .82;
}

h2 {
  margin: 0 0 18px;
  color: var(--deep-lagoon);
  font-family: var(--heading);
  font-size: clamp(2.2rem, 5.2vw, 5rem);
  font-weight: 400;
  line-height: .95;
}

h3 { margin: 0 0 8px; font-family: var(--heading); font-size: 2rem; color: var(--burnt-koi); }
p { font-size: clamp(1.06rem, 1.4vw, 1.28rem); line-height: 1.62; }

.bubble-note {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--deep-lagoon);
  background: rgba(167,216,200,.64);
  border: 1px solid rgba(201,94,36,.36);
}

.fan-plaque {
  width: min(390px, 34vw);
  margin: 42px 0 0 auto;
  padding: 30px;
  border-radius: 22px 22px 160px 160px;
  clip-path: polygon(0 0, 100% 0, 92% 72%, 50% 100%, 8% 72%);
}

.left-spine {
  position: absolute;
  left: clamp(20px, 4vw, 66px);
  top: 90px;
  display: grid;
  gap: 10px;
  color: var(--brass-bubble);
}

.left-spine span {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 6rem);
  text-shadow: 0 0 28px rgba(242,167,102,.34);
}

.left-spine b {
  writing-mode: vertical-rl;
  color: rgba(248,233,210,.8);
  font-size: .74rem;
}

.alphabet { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.alphabet button {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(201,94,36,.42);
  cursor: pointer;
  font-size: .95rem;
  transition: transform .35s ease, filter .35s ease;
}
.alphabet button:hover { transform: translateY(-10px) scale(1.08); filter: saturate(1.35); }

.oval-sign {
  width: 270px;
  min-height: 270px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: -34px 8vw 0 auto;
  text-align: center;
}

.twin-bubble,
.twin-bubble::after {
  content: "";
  width: 74px;
  height: 124px;
  border: 8px solid var(--burnt-koi);
  border-radius: 60px;
  display: block;
  box-shadow: inset 0 0 22px rgba(167,216,200,.62), 0 0 22px rgba(201,94,36,.28);
}
.twin-bubble { position: absolute; transform: translateX(-36px); }
.twin-bubble::after { position: absolute; left: 68px; top: 0; }
.oval-sign p { align-self: end; margin-bottom: 48px; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; }

.current-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.current-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(18,51,58,.08);
  border: 1px solid rgba(216,168,78,.35);
}
.current-list strong { color: var(--burnt-koi); font-family: var(--heading); font-size: 1.25rem; }
.current-list span { color: var(--deep-lagoon); }

.label-strip {
  width: min(620px, 62vw);
  margin: 54px 0 0 26vw;
  padding: 18px 28px;
  border-radius: 999px;
  text-align: center;
  color: var(--deep-lagoon);
}

.ll-emblem {
  position: relative;
  width: min(360px, 70vw);
  height: 360px;
  margin: -18px 12vw 0 auto;
  display: grid;
  place-items: center;
}
.ll-emblem span {
  position: absolute;
  width: 128px;
  height: 220px;
  border: 14px solid var(--burnt-koi);
  border-top-color: var(--brass-bubble);
  border-radius: 90px;
  background: radial-gradient(circle at 40% 22%, rgba(248,233,210,.48), rgba(167,216,200,.18));
  box-shadow: inset 0 0 36px rgba(167,216,200,.38), 0 0 44px rgba(201,94,36,.36);
}
.ll-emblem span:first-child { transform: translateX(-62px) rotate(-3deg); }
.ll-emblem span:nth-child(2) { transform: translateX(62px) rotate(3deg); }
.ll-emblem i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-family: var(--mono);
  font-style: normal;
  color: var(--ink-plum);
  background: rgba(248,233,210,.72);
  border: 1px solid rgba(216,168,78,.8);
  animation: orbit 11s linear infinite;
}
.ll-emblem i:nth-of-type(2) { animation-delay: -2.5s; }
.ll-emblem i:nth-of-type(3) { animation-delay: -5s; }
.ll-emblem i:nth-of-type(4) { animation-delay: -7.5s; }

.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.orb {
  position: absolute;
  width: var(--size, 58px);
  height: var(--size, 58px);
  opacity: .72;
  animation: rise var(--speed, 18s) linear infinite, wobble 4.8s ease-in-out infinite;
}
.orb-one { --size: 72px; --speed: 22s; left: 72%; bottom: -12%; }
.orb-two { --size: 46px; --speed: 16s; left: 84%; bottom: -20%; animation-delay: -5s; }
.orb-three { --size: 92px; --speed: 26s; left: 58%; bottom: -18%; animation-delay: -12s; }
.orb-four { --size: 54px; --speed: 19s; left: 42%; bottom: -16%; animation-delay: -9s; }
.orb-five { --size: 106px; --speed: 30s; left: 88%; bottom: -22%; animation-delay: -18s; }
.orb-six { --size: 38px; --speed: 14s; left: 66%; bottom: -12%; animation-delay: -7s; }
.orb-seven { --size: 64px; --speed: 21s; left: 25%; bottom: -20%; animation-delay: -15s; }

.cursor-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(167,216,200,.75);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
}
.cursor-ripple.show { animation: ripple .7s ease-out forwards; }

@keyframes rise { from { transform: translate3d(0, 18vh, 0); } to { transform: translate3d(0, -126vh, 0); } }
@keyframes wobble { 0%,100% { margin-left: 0; } 50% { margin-left: 28px; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes ripple { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.15); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.6); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }

@media (max-width: 820px) {
  .scene { padding-left: 24px; padding-right: 18px; }
  .marquee { display: block; }
  .bubble-chain { justify-content: flex-start; min-width: 0; }
  .portholes { position: sticky; top: 8px; grid-template-columns: repeat(4, 1fr); background: rgba(18,51,58,.58); padding: 8px; border-radius: 999px; backdrop-filter: blur(8px); }
  .porthole em { display: none; }
  .porthole span { width: 42px; height: 42px; font-size: .82rem; }
  .shelf, .shelf-hero, .shelf-lab, .shelf-console, .shelf-archive, .fan-plaque, .label-strip { width: 100%; margin-left: 0; }
  .left-spine { position: relative; left: auto; top: auto; display: flex; align-items: center; margin-bottom: 18px; }
  .left-spine b { writing-mode: horizontal-tb; }
  .current-list li { display: grid; border-radius: 24px; }
  .oval-sign, .ll-emblem { margin-left: auto; margin-right: auto; }
}