:root {
  /* Typography compliance tokens: Inter Tight** Tigh* Google Fonts concise explanations */
  --deep: #031A2E;
  --cyan: #53F5FF;
  --green: #9DFF2E;
  --magenta: #FF2BD1;
  --yellow: #FFF45C;
  --blue: #176BFF;
  --violet: #6A3DFF;
  --milk: #EAFDFF;
  --charcoal: #101821;
  --glass: rgba(234, 253, 255, .13);
  --line: rgba(83, 245, 255, .48);
  --display: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
  --body: "Inter Tight", "Inter", system-ui, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--milk);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 8%, rgba(83, 245, 255, .28), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgba(106, 61, 255, .32), transparent 26rem),
    linear-gradient(180deg, #052748 0%, var(--deep) 42%, #020a14 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(83, 245, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 245, 255, .05) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .16), transparent 1px);
  background-size: 100% 74px, 74px 100%, 37px 37px;
  mix-blend-mode: screen;
  opacity: .55;
}

.aero-field, .orb, .watercolor { position: fixed; pointer-events: none; }
.aero-field { inset: 0; overflow: hidden; z-index: 0; }
.orb {
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #ffffff, rgba(83, 245, 255, .5) 17%, rgba(23, 107, 255, .18) 48%, transparent 70%);
  filter: blur(.2px);
  opacity: .65;
  animation: floatOrb 13s ease-in-out infinite;
}
.orb-one { left: -8rem; top: 9rem; }
.orb-two { right: -7rem; top: 42vh; animation-delay: -5s; }
.orb-three { width: 13rem; height: 13rem; left: 68%; bottom: 9vh; animation-delay: -8s; }
.watercolor { border-radius: 48% 52% 58% 42%; filter: blur(18px); opacity: .48; mix-blend-mode: screen; }
.stain-cyan { width: 38rem; height: 22rem; left: 5%; top: 36%; background: rgba(83, 245, 255, .42); }
.stain-magenta { width: 30rem; height: 26rem; right: 6%; top: 12%; background: rgba(255, 43, 209, .3); }
.stain-violet { width: 28rem; height: 18rem; left: 45%; bottom: 12%; background: rgba(106, 61, 255, .42); }

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 8vh 8vw;
  display: grid;
  align-items: center;
}

.hero { padding-top: 5vh; overflow: hidden; }
.hero-horizon {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 0;
  height: 46vh;
  background: linear-gradient(180deg, transparent, rgba(83, 245, 255, .17) 25%, rgba(23, 107, 255, .28));
  border-top: 1px solid rgba(234, 253, 255, .35);
  box-shadow: 0 -18px 90px rgba(83, 245, 255, .28);
}

h1, h2, .chapter, .live-number, .band strong, .hud-sticker {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 0 -1vw;
  font-size: clamp(7rem, 22vw, 21rem);
  line-height: .74;
  color: var(--milk);
  text-shadow: 0 0 18px rgba(83, 245, 255, .8), 0 0 54px rgba(23, 107, 255, .8), 0 12px 0 rgba(16, 24, 33, .52);
  transform: translateX(-4vw);
}

h2 { margin: .2rem 0 1rem; font-size: clamp(3.2rem, 7vw, 7rem); line-height: .86; color: var(--milk); }
.copy { max-width: 31rem; font-size: clamp(1rem, 1.4vw, 1.24rem); line-height: 1.55; color: rgba(234, 253, 255, .82); }
.hud-label { color: var(--green); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 0 12px rgba(157, 255, 46, .7); }

.glass-panel, .glass-dome {
  background: linear-gradient(135deg, rgba(234, 253, 255, .18), rgba(83, 245, 255, .07) 46%, rgba(23, 107, 255, .13));
  border: 1px solid rgba(234, 253, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 70px rgba(0, 0, 0, .32), 0 0 54px rgba(83, 245, 255, .13);
  backdrop-filter: blur(18px) saturate(160%);
}

.glass-panel { border-radius: 2.2rem; padding: clamp(1.4rem, 3vw, 3rem); position: relative; overflow: hidden; }
.glass-panel::after {
  content: "";
  position: absolute;
  inset: -45% -30% auto;
  height: 70%;
  background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.28), transparent 60%);
  transform: translateX(-40%) rotate(8deg);
  transition: transform .7s ease;
}
.glass-panel:hover::after { transform: translateX(72%) rotate(8deg); }

.hero-art { width: min(29rem, 70vw); height: min(29rem, 70vw); border-radius: 50%; justify-self: end; margin-right: 6vw; position: relative; display: grid; place-items: center; }
.asset-silhouette { width: 42%; height: 56%; background: linear-gradient(180deg, var(--cyan), var(--blue)); border-radius: 1rem; filter: drop-shadow(0 0 24px var(--cyan)); opacity: .9; }
.server-ink::before, .server-ink::after { content: ""; display: block; height: 5px; margin: 18px 15%; border-radius: 2px; background: var(--green); box-shadow: 0 34px 0 var(--yellow), 0 68px 0 var(--magenta); }
.scan-ring { position: absolute; border: 1px solid rgba(157, 255, 46, .55); border-radius: 50%; animation: ringPulse 3.5s ease-in-out infinite; }
.ring-a { inset: 18%; }
.ring-b { inset: 7%; animation-delay: -1.4s; border-color: rgba(255, 244, 92, .48); }
.caption { position: absolute; bottom: 14%; left: 15%; right: 15%; text-align: center; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.calibration-bead { position: absolute; left: calc(50% - .55rem); bottom: 7vh; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 26px var(--green), 0 0 60px var(--cyan); animation: beadPulse 1.6s ease-in-out infinite; }

.spine-shell { position: fixed; z-index: 4; inset: 0 auto 0 50%; width: 6rem; transform: translateX(-50%); pointer-events: none; }
.spine-tube { position: absolute; top: 0; bottom: 0; left: 50%; width: 1.15rem; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.6), rgba(83,245,255,.22), rgba(23,107,255,.46)); border: 1px solid rgba(234,253,255,.62); box-shadow: 0 0 28px rgba(83,245,255,.72), inset 0 0 18px rgba(255,255,255,.48); }
.tick { position: absolute; left: calc(50% - 1.8rem); width: 3.6rem; height: 1px; background: rgba(234,253,255,.45); }
.t1{top:18%}.t2{top:35%}.t3{top:52%}.t4{top:69%}.t5{top:86%}
.bubble { position: absolute; left: 50%; width: .42rem; height: .42rem; border-radius: 50%; background: rgba(234,253,255,.82); box-shadow: 0 0 12px var(--cyan); animation: rise 9s linear infinite; }
.b1{bottom:3%;animation-delay:0s}.b2{bottom:18%;animation-delay:-2s}.b3{bottom:38%;animation-delay:-5s}.b4{bottom:61%;animation-delay:-3s}.b5{bottom:80%;animation-delay:-7s}
.spine-node { position: absolute; left: 50%; width: 3.2rem; height: 3.2rem; margin-left: -1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(3,26,46,.8); border: 1px solid rgba(83,245,255,.65); box-shadow: 0 0 24px rgba(83,245,255,.35); transition: .35s ease; }
.spine-node span { font-family: var(--display); color: var(--cyan); font-size: 1.2rem; }
.spine-node.active { transform: scale(1.16); background: var(--green); box-shadow: 0 0 30px var(--green), 0 0 76px rgba(83,245,255,.72); }
.spine-node.active span { color: var(--deep); }
.spine-node[data-node="0"]{top:14%}.spine-node[data-node="1"]{top:31%}.spine-node[data-node="2"]{top:48%}.spine-node[data-node="3"]{top:65%}.spine-node[data-node="4"]{top:82%}

.signal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9vw; }
.signal-left .glass-panel, .signal-left .chapter { grid-column: 1; }
.signal-right .glass-panel, .signal-right .chapter { grid-column: 2; }
.chapter { align-self: end; font-size: clamp(4rem, 10vw, 9rem); color: transparent; -webkit-text-stroke: 1px rgba(83,245,255,.65); text-shadow: 0 0 20px rgba(83,245,255,.24); }
.range-bracket { display: flex; align-items: center; gap: 1rem; color: var(--green); }
.range-bracket span { width: 2.4rem; height: 5.6rem; border: 2px solid var(--green); filter: drop-shadow(0 0 12px var(--green)); animation: bracketTwitch 2.1s steps(2, jump-none) infinite; }
.range-bracket span:first-child { border-right: 0; }.range-bracket span:last-child { border-left: 0; }
.live-number { font-size: clamp(5rem, 11vw, 10rem); line-height: .8; text-shadow: 0 0 22px rgba(157,255,46,.76); }
.ghost-price, .note, .scribble-stack span { font-family: var(--hand); color: var(--yellow); font-size: clamp(1.3rem, 2.2vw, 2.2rem); }
.ghost-price span { color: rgba(255,43,209,.85); text-decoration: line-through; text-decoration-thickness: 4px; }
.artifact, .watercard, .hud-sticker { justify-self: center; align-self: center; }
.orb-receipt { width: 19rem; height: 19rem; border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.85), rgba(83,245,255,.2) 26%, rgba(255,43,209,.18) 52%, transparent 75%); border: 1px solid rgba(234,253,255,.42); position: relative; box-shadow: 0 0 58px rgba(83,245,255,.25); }
.receipt-line { position: relative; display: block; width: 58%; height: .55rem; margin: 1.8rem auto; top: 4.8rem; background: rgba(234,253,255,.68); border-radius: 1rem; }.receipt-line.short { width: 38%; background: var(--magenta); }
.watercard { width: min(26rem, 72vw); min-height: 21rem; padding: 2rem; border-radius: 42% 58% 48% 52%; background: radial-gradient(circle at 30% 30%, rgba(255,244,92,.4), transparent 22%), radial-gradient(circle at 54% 48%, rgba(255,43,209,.38), transparent 35%), rgba(83,245,255,.18); border: 1px solid rgba(234,253,255,.36); filter: drop-shadow(0 22px 50px rgba(0,0,0,.3)); }
.ink-house { width: 8rem; height: 6rem; margin: 3rem auto 1rem; background: var(--charcoal); clip-path: polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%); box-shadow: 0 30px 36px rgba(23,107,255,.8); }
.watercard p { text-align: center; color: var(--milk); text-transform: uppercase; letter-spacing: .16em; }
.leak-meter { height: .8rem; border-radius: 99px; background: rgba(234,253,255,.16); border: 1px solid rgba(234,253,255,.3); overflow: hidden; }
.leak-meter span { display: block; width: 18%; height: 100%; background: linear-gradient(90deg, var(--green), var(--yellow), var(--magenta)); box-shadow: 0 0 18px var(--magenta); transition: width .6s ease; }
.scribble-stack { display: grid; gap: .8rem; transform: rotate(-2deg); }.scribble-stack span { background: rgba(255,43,209,.14); border-bottom: 2px solid rgba(255,244,92,.72); width: fit-content; }
.hud-sticker { padding: 1.2rem 1.5rem; color: var(--deep); background: var(--yellow); border-radius: 1rem; transform: rotate(8deg); box-shadow: 0 0 34px rgba(255,244,92,.56); font-size: 2.1rem; line-height: .86; }
.bands { display: grid; gap: 1rem; margin: 2rem 0; }
.band { display: grid; grid-template-columns: 6rem 1fr; align-items: center; height: clamp(4rem, 8vw, 6rem); padding: 0 1.2rem; border-radius: 99px; border: 1px solid rgba(234,253,255,.42); animation: breathe 3.4s ease-in-out infinite; }
.band span { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }.band strong { font-size: clamp(3rem, 6vw, 5.8rem); }
.low { width: 62%; background: rgba(83,245,255,.18); color: var(--cyan); }.mid { width: 82%; background: rgba(157,255,46,.2); color: var(--green); animation-delay: -.7s; }.high { width: 100%; background: rgba(255,43,209,.18); color: var(--magenta); animation-delay: -1.3s; }
.note { position: absolute; color: var(--yellow); text-shadow: 0 0 12px rgba(255,244,92,.4); }.note-hero { right: 8vw; top: 18vh; transform: rotate(-4deg); }.signal-right .note { left: 12vw; bottom: 17vh; transform: rotate(-5deg); }.final-note { right: 9vw; bottom: 11vh; }
.telemetry { position: fixed; z-index: 5; left: 1rem; right: 1rem; bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 1.2rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.telemetry b { color: var(--green); font-weight: 800; }

.scene.in-view .glass-panel { animation: settleIn .7s cubic-bezier(.2,1.4,.35,1) both; }
.scene.in-view .note, .scene.in-view .scribble-stack span { animation: quickMark .45s ease both; }

@keyframes floatOrb { 50% { transform: translate3d(1rem, -2rem, 0) scale(1.05); } }
@keyframes ringPulse { 50% { transform: scale(1.06); opacity: .4; } }
@keyframes beadPulse { 50% { transform: scale(1.35); opacity: .65; } }
@keyframes rise { from { transform: translate(-50%, 5vh); } to { transform: translate(-50%, -105vh); } }
@keyframes bracketTwitch { 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }
@keyframes breathe { 50% { transform: scaleX(1.035); filter: brightness(1.24); } }
@keyframes settleIn { from { transform: translateY(22px) scale(.98); opacity: .74; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes quickMark { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 820px) {
  .spine-shell { left: 1.8rem; transform: none; }
  .scene { padding: 8vh 1.2rem 8vh 4.4rem; }
  .signal { grid-template-columns: 1fr; gap: 2rem; }
  .signal-left .glass-panel, .signal-left .chapter, .signal-right .glass-panel, .signal-right .chapter { grid-column: 1; }
  .hero-art { justify-self: start; margin-right: 0; }
  h1 { font-size: 24vw; transform: translateX(0); }
  .telemetry { display: grid; }
  .note { position: relative; inset: auto !important; margin-top: 1rem; }
}