:root {
  /* Design typography tokens for compliance: Space Grotesk** explanatory fragments because feels modern becoming cold. IBM Plex Mono only serial numbers */
  --graphite: #151821;
  --phosphor: #B8FF5C;
  --cream: #F6EBC8;
  --aqua: #44F2D4;
  --lavender: #B7B9FF;
  --coral: #FF4F7B;
  --violet: #34205C;
  --body: "Space Grotesk", sans-serif;
  --display: "Bungee", cursive;
  --lcd: "Orbitron", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  font-family: var(--body);
  background:
    radial-gradient(circle at 12% 8%, rgba(68, 242, 212, .18), transparent 26rem),
    radial-gradient(circle at 85% 18%, rgba(255, 79, 123, .18), transparent 20rem),
    radial-gradient(circle at 45% 78%, rgba(183, 185, 255, .18), transparent 24rem),
    linear-gradient(135deg, #151821 0%, #34205C 58%, #151821 100%);
}

.noise-field, .scanline-glaze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.noise-field {
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(246,235,200,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(68,242,212,.7) 0 1px, transparent 1.5px);
  background-size: 41px 37px, 63px 57px;
  animation: staticDrift 8s steps(6) infinite;
}
.scanline-glaze {
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(184,255,92,.2) 8px, transparent 10px);
  mix-blend-mode: screen;
}

.message-receiver { position: relative; }
.object-state {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8vw 8vw 7vw;
  isolation: isolate;
}
.object-state::before {
  content: attr(data-state);
  position: absolute;
  left: 3vw;
  top: 6vh;
  font-family: var(--mono);
  letter-spacing: .22em;
  color: rgba(246,235,200,.48);
  font-size: clamp(.65rem, 1vw, .95rem);
}
.object-state::after {
  content: "";
  position: absolute;
  inset: 14% 4%;
  border: 1px solid rgba(183,185,255,.18);
  border-radius: 56px;
  transform: rotate(-3deg);
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(68,242,212,.06);
}

.belt-clip-rail {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .7rem;
  padding: .8rem .55rem;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(246,235,200,.16), rgba(183,185,255,.2));
  box-shadow: inset 0 0 18px rgba(255,255,255,.18), 0 18px 44px rgba(0,0,0,.36);
}
.rail-button {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  font-family: var(--lcd);
  font-size: .65rem;
  color: var(--graphite);
  background: radial-gradient(circle at 35% 25%, #F6EBC8, #B7B9FF 42%, #44F2D4 74%, #34205C 100%);
  box-shadow: inset 0 -5px 10px rgba(21,24,33,.45), 0 0 0 2px rgba(246,235,200,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rail-button.active, .rail-button:hover { transform: translateX(-5px) scale(1.08); box-shadow: 0 0 24px rgba(184,255,92,.8), inset 0 -5px 10px rgba(21,24,33,.45); }

.pager-shell {
  width: min(88vw, 980px);
  min-height: 560px;
  border-radius: 82px 58px 76px 44px;
  position: relative;
  padding: 5rem 4.5rem 4rem;
  background:
    linear-gradient(120deg, rgba(255,255,255,.16), transparent 28%, rgba(183,185,255,.18) 47%, transparent 70%),
    radial-gradient(circle at 18% 20%, rgba(68,242,212,.28), transparent 18rem),
    linear-gradient(150deg, rgba(21,24,33,.86), rgba(52,32,92,.72));
  box-shadow:
    inset 0 0 0 2px rgba(246,235,200,.18),
    inset 18px 18px 60px rgba(255,255,255,.06),
    inset -25px -35px 65px rgba(0,0,0,.44),
    0 45px 90px rgba(0,0,0,.55),
    0 0 70px rgba(68,242,212,.18);
  transform: rotate(-8deg);
  backdrop-filter: blur(8px);
}
.hero-shell { animation: shellFloat 7s ease-in-out infinite; }
.chrome-bevel {
  position: absolute;
  inset: 1.2rem;
  border-radius: inherit;
  border: 3px solid rgba(183,185,255,.52);
  box-shadow: inset 0 0 24px rgba(246,235,200,.18), 0 0 18px rgba(183,185,255,.24);
  pointer-events: none;
}
.antenna-nub {
  position: absolute;
  right: 6rem;
  top: -2.1rem;
  width: 150px;
  height: 55px;
  border-radius: 35px 35px 12px 12px;
  background: linear-gradient(120deg, #44F2D4, #B7B9FF 55%, #34205C);
  box-shadow: 0 0 32px rgba(68,242,212,.7), inset 0 -14px 18px rgba(21,24,33,.45);
}
.lcd-window {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 2rem;
  min-height: 150px;
  background:
    linear-gradient(90deg, rgba(184,255,92,.12), rgba(68,242,212,.22)),
    #26301f;
  border: 8px solid rgba(21,24,33,.8);
  box-shadow: inset 0 0 28px rgba(184,255,92,.38), 0 16px 28px rgba(0,0,0,.36);
}
.lcd-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 30%, rgba(255,255,255,.22) 39%, transparent 48% 100%);
  animation: sheen 5s infinite;
}
.segment-ghost {
  position: absolute;
  inset: .7rem 1rem;
  font-family: var(--lcd);
  font-weight: 900;
  font-size: clamp(2rem, 8vw, 7rem);
  letter-spacing: .08em;
  color: rgba(184,255,92,.1);
  white-space: nowrap;
}
.lcd-message {
  position: relative;
  z-index: 1;
  font-family: var(--lcd);
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 8.8rem);
  line-height: .9;
  letter-spacing: .04em;
  color: var(--phosphor);
  text-shadow: 0 0 8px rgba(184,255,92,.85), 0 0 28px rgba(184,255,92,.45);
  animation: lcdFlicker 3.4s steps(2) infinite;
}
.lcd-subline {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  font-family: var(--mono);
  color: var(--graphite);
  letter-spacing: .12em;
  background: rgba(184,255,92,.72);
  display: inline-block;
  padding: .35rem .65rem;
}
.incoming-strip {
  position: absolute;
  left: 7%;
  right: 12%;
  bottom: 4.5rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  border-radius: 999px;
  font-family: var(--mono);
  color: var(--graphite);
  background: var(--cream);
  box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 -5px 12px rgba(255,79,123,.2);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.18,.9,.22,1.1);
}
.incoming-strip.visible { transform: translateX(0); }
.incoming-strip span { font-family: var(--display); color: var(--coral); }
.incoming-strip strong { color: var(--violet); }
.incoming-strip em { font-style: normal; }
.signal-led {
  position: absolute;
  right: 5.2rem;
  bottom: 8.3rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 24px rgba(255,79,123,.9), inset 0 -5px 8px rgba(52,32,92,.55);
  animation: ledBlink 1.2s infinite;
}
.rubber-keypad { display: grid; gap: 1rem; }
.mini-pad { grid-template-columns: repeat(3, 1fr); width: 54%; margin-top: 2rem; }
.rubber-keypad button {
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.3rem;
  font-family: var(--display);
  color: var(--cream);
  background: radial-gradient(circle at 35% 22%, #FF8AA6, #FF4F7B 60%, #34205C 100%);
  box-shadow: inset 0 -10px 16px rgba(52,32,92,.55), inset 0 4px 9px rgba(255,255,255,.25), 0 12px 20px rgba(0,0,0,.32);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.rubber-keypad button:hover, .rubber-keypad button.compressed { transform: translateY(6px) scale(.97); box-shadow: inset 0 -3px 8px rgba(52,32,92,.7), 0 3px 8px rgba(0,0,0,.3); }
.screw {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, #F6EBC8, #B7B9FF 45%, #34205C 100%);
  box-shadow: inset 0 -5px 8px rgba(21,24,33,.55), 0 0 18px rgba(183,185,255,.35);
  animation: screwDrift 5s ease-in-out infinite;
}
.screw::after { content: ""; position: absolute; left: 8px; right: 8px; top: 15px; height: 3px; background: var(--violet); transform: rotate(28deg); }
.screw-a { left: 2.4rem; top: 2.2rem; } .screw-b { right: 2.4rem; top: 2.2rem; animation-delay: -.8s; }
.screw-c { left: 2.4rem; bottom: 2.2rem; animation-delay: -1.4s; } .screw-d { right: 2.4rem; bottom: 2.2rem; animation-delay: -2.2s; }
.serial-sticker {
  font-family: var(--mono);
  color: var(--graphite);
  background: linear-gradient(120deg, #F6EBC8, #fff7d8);
  border: 2px solid rgba(52,32,92,.35);
  box-shadow: 0 12px 20px rgba(0,0,0,.25);
  padding: .75rem .9rem;
  transform: rotate(5deg);
}
.serial-sticker span { display: block; font-weight: 700; letter-spacing: .13em; color: var(--coral); }
.serial-sticker b { display: block; color: var(--violet); }
.serial-sticker i { font-style: normal; font-size: .75rem; }
.hero-sticker { position: absolute; right: 13%; top: 48%; }
.callout { position: absolute; max-width: 310px; font-family: var(--mono); color: var(--cream); padding-left: 4.2rem; }
.callout::before { content: ""; position: absolute; left: 0; top: .7em; width: 3.4rem; height: 1px; background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.callout-hero { left: 7vw; bottom: 11vh; transform: rotate(-4deg); }
.orbit-chip { position: absolute; font-family: var(--mono); border-radius: 14px; padding: .55rem .7rem; background: var(--lavender); color: var(--violet); box-shadow: 0 0 24px rgba(183,185,255,.5); animation: chipOrbit 8s ease-in-out infinite; }
.chip-one { right: 9vw; top: 18vh; } .chip-two { left: 18vw; top: 21vh; animation-delay: -3s; }

.section-label {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 5rem);
  color: var(--lavender);
  text-shadow: 4px 4px 0 var(--violet), 0 0 24px rgba(183,185,255,.45);
  transform: rotate(-5deg);
  justify-self: start;
  margin-left: 6vw;
}
.section-label.coral { color: var(--coral); }
.section-label.aqua { color: var(--aqua); }
.exploded-lcd { width: min(86vw, 980px); position: relative; transform: rotate(3deg); }
.wide-window { min-height: 300px; padding: 3rem; }
.glyph-cloud { font-size: clamp(3rem, 10vw, 9rem); }
.message-history { position: relative; z-index: 1; font-family: var(--lcd); font-size: clamp(1.5rem, 4vw, 3.5rem); color: var(--phosphor); text-shadow: 0 0 18px rgba(184,255,92,.65); }
.message-history p { display: none; margin: .25em 0; }
.message-history p.active { display: block; }
.magnifier-cutout { position: absolute; right: -3rem; top: -4rem; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 3rem; color: var(--graphite); background: radial-gradient(circle, rgba(246,235,200,.92), rgba(68,242,212,.5)); box-shadow: inset 0 0 28px rgba(255,255,255,.55), 0 22px 40px rgba(0,0,0,.32); }
.barcode-sticker { position: absolute; left: -2rem; bottom: -3rem; }
.fragment-copy { max-width: 720px; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.45; color: rgba(246,235,200,.86); transform: rotate(-2deg); }

.nine-key-console { grid-template-columns: minmax(0, 1fr) minmax(320px, 560px); gap: 4vw; }
.full-pad { grid-template-columns: repeat(3, minmax(86px, 1fr)); width: min(84vw, 540px); padding: 2rem; border-radius: 42px; background: linear-gradient(135deg, rgba(246,235,200,.12), rgba(21,24,33,.55)); box-shadow: inset 0 0 28px rgba(183,185,255,.22), 0 28px 60px rgba(0,0,0,.36); transform: rotate(5deg); }
.full-pad button { min-height: 82px; }
.console-note { position: absolute; left: 12vw; bottom: 16vh; transform: rotate(-7deg); }
.mold-line { position: absolute; width: 62vw; height: 170px; border: 5px solid rgba(68,242,212,.55); border-left: 0; border-radius: 0 999px 999px 0; left: 0; bottom: 10vh; box-shadow: 0 0 24px rgba(68,242,212,.25); }

.signal-weather { position: relative; width: min(78vw, 760px); height: 500px; border-radius: 60px; background: radial-gradient(circle at 50% 50%, rgba(68,242,212,.14), transparent 38%), linear-gradient(120deg, rgba(183,185,255,.12), rgba(21,24,33,.3)); }
.arc { position: absolute; border: 5px solid var(--aqua); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .7; filter: drop-shadow(0 0 12px #44F2D4); animation: pulseArc 2s ease-in-out infinite; }
.arc-one { width: 180px; height: 180px; left: 25%; top: 36%; } .arc-two { width: 300px; height: 300px; left: 17%; top: 24%; animation-delay: -.4s; } .arc-three { width: 430px; height: 430px; left: 8%; top: 11%; animation-delay: -.8s; }
.pixel-comet { position: absolute; width: 12px; height: 12px; background: var(--phosphor); box-shadow: 0 0 18px var(--phosphor); animation: cometSweep 4s linear infinite; }
.comet-one { left: 10%; top: 28%; } .comet-two { left: 60%; top: 66%; animation-delay: -1.8s; background: var(--coral); box-shadow: 0 0 18px var(--coral); }
.signal-bars { position: absolute; right: 12%; bottom: 18%; display: flex; align-items: end; gap: .5rem; height: 145px; }
.signal-bars span { width: 28px; border-radius: 12px 12px 4px 4px; background: linear-gradient(#B8FF5C, #44F2D4); box-shadow: 0 0 18px rgba(184,255,92,.55); animation: bars 1.2s ease-in-out infinite; }
.signal-bars span:nth-child(1) { height: 35px; } .signal-bars span:nth-child(2) { height: 66px; animation-delay: -.2s; } .signal-bars span:nth-child(3) { height: 100px; animation-delay: -.4s; } .signal-bars span:nth-child(4) { height: 140px; animation-delay: -.6s; }
.weather-copy { position: relative; transform: none; left: auto; right: auto; bottom: auto; margin-top: -5rem; width: min(760px, 80vw); }
.warning-triangle { position: absolute; right: 20vw; top: 23vh; width: 0; height: 0; border-left: 54px solid transparent; border-right: 54px solid transparent; border-bottom: 96px solid var(--coral); color: var(--cream); font-family: var(--display); display: grid; place-items: end center; filter: drop-shadow(0 0 18px rgba(255,79,123,.58)); }

.battery-door { width: min(86vw, 900px); min-height: 470px; position: relative; border-radius: 54px; background: linear-gradient(135deg, rgba(246,235,200,.16), rgba(52,32,92,.6)); box-shadow: inset 0 0 0 3px rgba(246,235,200,.16), inset 0 -28px 48px rgba(0,0,0,.32), 0 40px 80px rgba(0,0,0,.44); transform: rotate(-4deg); padding: 3rem; }
.door-panel { margin: 3rem auto 0; max-width: 620px; min-height: 260px; border-radius: 28px; padding: 2rem; color: var(--graphite); background: var(--cream); box-shadow: inset 0 -12px 18px rgba(52,32,92,.15), 0 16px 28px rgba(0,0,0,.24); }
.door-panel span { font-family: var(--mono); color: var(--coral); letter-spacing: .3em; }
.door-panel h2 { margin: .2em 0; font-family: var(--display); font-size: clamp(2rem, 5vw, 4rem); color: var(--violet); }
.door-panel p { font-size: 1.2rem; line-height: 1.45; }
.spring { position: absolute; top: 3.2rem; width: 80px; height: 210px; background: repeating-linear-gradient(to bottom, #B7B9FF 0 8px, transparent 8px 18px); filter: drop-shadow(0 0 8px rgba(183,185,255,.7)); animation: springBuzz .5s linear infinite; }
.spring-left { left: 4rem; } .spring-right { right: 4rem; animation-delay: -.25s; }
.paper-insert { position: absolute; right: 14vw; bottom: 12vh; transform: rotate(8deg); }

.archive-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; width: min(90vw, 1080px); transform: rotate(2deg); }
.beep-card { min-height: 260px; padding: 1.4rem; border-radius: 30px; color: var(--cream); background: linear-gradient(145deg, rgba(183,185,255,.2), rgba(21,24,33,.72)); border: 1px solid rgba(246,235,200,.18); box-shadow: inset 0 0 28px rgba(68,242,212,.08), 0 20px 38px rgba(0,0,0,.3); }
.beep-card:nth-child(2) { transform: translateY(2rem) rotate(-4deg); } .beep-card:nth-child(3) { transform: translateY(-1rem) rotate(5deg); }
.beep-card span { font-family: var(--lcd); color: var(--phosphor); text-shadow: 0 0 12px rgba(184,255,92,.65); }
.beep-card h3 { font-family: var(--display); color: var(--lavender); font-size: 1.6rem; }
.beep-card p { line-height: 1.45; color: rgba(246,235,200,.82); }
.final-lcd { width: min(88vw, 860px); margin-top: 5rem; }
.final-lcd .lcd-message { font-size: clamp(1.8rem, 5vw, 4.7rem); }

.in-view .section-label, .in-view .fragment-copy, .in-view .archive-stack, .in-view .battery-door, .in-view .signal-weather { animation: inspectPop .8s cubic-bezier(.18,.9,.22,1.08) both; }

@keyframes shellFloat { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-18px); } }
@keyframes lcdFlicker { 0%, 12%, 15%, 100% { opacity: 1; } 13% { opacity: .55; } 55% { text-shadow: 0 0 4px rgba(184,255,92,.7), 0 0 35px rgba(184,255,92,.7); } }
@keyframes ledBlink { 0%, 40%, 100% { opacity: .25; transform: scale(.82); } 50%, 70% { opacity: 1; transform: scale(1); } }
@keyframes screwDrift { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(8px,-6px) rotate(16deg); } }
@keyframes chipOrbit { 0%,100% { transform: translate(0,0) rotate(-5deg); } 50% { transform: translate(18px, -26px) rotate(7deg); } }
@keyframes sheen { 0% { transform: translateX(-120%); } 45%,100% { transform: translateX(120%); } }
@keyframes pulseArc { 0%,100% { opacity: .25; transform: scale(.92) rotate(45deg); } 50% { opacity: .9; transform: scale(1.04) rotate(45deg); } }
@keyframes cometSweep { from { transform: translate(-20px, 20px) rotate(45deg); } to { transform: translate(420px, -210px) rotate(45deg); } }
@keyframes bars { 50% { transform: scaleY(.58); filter: hue-rotate(55deg); } }
@keyframes springBuzz { 50% { transform: translateX(3px); } }
@keyframes staticDrift { 50% { background-position: 30px -20px, -18px 26px; } }
@keyframes inspectPop { from { opacity: .35; transform: translateY(48px) rotate(-7deg) scale(.96); } to { opacity: 1; } }

@media (max-width: 850px) {
  .belt-clip-rail { right: .6rem; transform: translateY(-50%) scale(.82); }
  .object-state { padding: 7rem 1.2rem; }
  .pager-shell { width: 94vw; padding: 4rem 1.4rem 8rem; transform: rotate(-3deg); border-radius: 45px; }
  .mini-pad { width: 72%; grid-template-columns: 1fr; }
  .incoming-strip { left: 1rem; right: 1rem; bottom: 2rem; flex-wrap: wrap; }
  .hero-sticker { right: 8%; top: 58%; }
  .nine-key-console { grid-template-columns: 1fr; }
  .archive-stack { grid-template-columns: 1fr; }
  .beep-card:nth-child(n) { transform: none; }
  .magnifier-cutout { width: 130px; height: 130px; right: -1rem; font-size: 2rem; }
  .section-label { margin-left: 0; }
}