:root {
  /* Design typography tokens: Space Mono** 700 for `prototype.report` title; IBM Plex Mono** 400/500 for report annotations; JetBrains Mono** 600 for tiny serial numbers. */
  --mist-lavender: #EAD7FF;
  --soft-aqua: #9EF6F3;
  --pale-lemon: #FFF6A3;
  --bubblegum-pink: #FF8FD8;
  --crt-violet: #7B61FF;
  --acetate: #FFF8FF;
  --ink-plum: #241B3A;
  --peach: #FFD1A8;
  --space: 'Space Mono', monospace;
  --plex: 'IBM Plex Mono', monospace;
  --jet: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  color: var(--ink-plum);
  font-family: var(--plex);
  background: var(--mist-lavender);
  overflow-x: hidden;
}

button, a { font: inherit; color: inherit; }

.crt-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    repeating-linear-gradient(0deg, rgba(36, 27, 58, 0.045) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 18% 20%, rgba(255, 143, 216, 0.26), transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(158, 246, 243, 0.22), transparent 34%);
  mix-blend-mode: soft-light;
}

.lab-remote {
  position: fixed;
  z-index: 30;
  left: 22px;
  top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.domain-label {
  padding: 9px 13px;
  border: 1px solid rgba(36, 27, 58, 0.2);
  border-radius: 999px;
  background: rgba(255, 248, 255, 0.58);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(123, 97, 255, 0.18);
  font-family: var(--space);
  font-size: 13px;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.remote-pills { display: flex; gap: 7px; }

.remote-pill, .index-dot, .print-button {
  border: 1px solid rgba(36, 27, 58, 0.18);
  background: rgba(255, 248, 255, 0.46);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.remote-pill {
  padding: 8px 11px;
  border-radius: 999px;
  font-family: var(--jet);
  font-size: 10px;
  text-transform: uppercase;
}

.remote-pill:hover, .print-button:hover {
  transform: translate(-2px, -2px);
  background: rgba(158, 246, 243, 0.62);
  box-shadow: 3px 3px 0 var(--bubblegum-pink), -3px -2px 0 var(--soft-aqua);
}

.plate-status {
  position: fixed;
  z-index: 30;
  top: 22px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jet);
  font-size: 11px;
  text-transform: uppercase;
}

.signal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bubblegum-pink);
  box-shadow: 0 0 18px var(--bubblegum-pink);
  animation: blink 1.4s steps(2, jump-none) infinite;
}

.specimen-index {
  position: fixed;
  z-index: 30;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}

.index-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0;
  position: relative;
}

.index-dot span {
  position: absolute;
  right: 24px;
  top: -1px;
  opacity: 0;
  font-family: var(--jet);
  font-size: 10px;
  transition: opacity 180ms ease;
}

.index-dot.active {
  background: var(--pale-lemon);
  transform: scale(1.35);
  box-shadow: 0 0 0 5px rgba(255, 248, 255, 0.48), 0 0 24px var(--soft-aqua);
}

.index-dot.active span, .index-dot:hover span { opacity: 1; }

.report-plate {
  min-height: 100vh;
  scroll-snap-align: start;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px clamp(24px, 6vw, 90px) 70px;
  background:
    radial-gradient(circle at 12% 78%, rgba(255, 209, 168, 0.7), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(158, 246, 243, 0.62), transparent 28%),
    linear-gradient(135deg, var(--mist-lavender), var(--acetate) 54%, rgba(255, 143, 216, 0.24));
}

.report-plate::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(36, 27, 58, 0.08);
  background-image:
    linear-gradient(rgba(123, 97, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 97, 255, 0.1) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(120deg, transparent, black 18%, black 42%, transparent 58%);
  pointer-events: none;
}

.fog-field {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 45% 58%, rgba(255, 143, 216, 0.42), transparent 28%),
    radial-gradient(circle at 50% 72%, rgba(255, 209, 168, 0.6), transparent 25%),
    radial-gradient(circle at 54% 42%, rgba(158, 246, 243, 0.5), transparent 30%);
  filter: blur(28px);
  animation: warmDrift 9s ease-in-out infinite alternate;
}

.giant-title {
  position: absolute;
  left: clamp(18px, 6vw, 82px);
  top: 19vh;
  z-index: 3;
  max-width: 10ch;
  font-family: var(--space);
  font-size: clamp(58px, 14vw, 184px);
  line-height: 0.78;
  letter-spacing: -0.11em;
  color: rgba(36, 27, 58, 0.86);
  text-shadow: 6px 0 0 rgba(255, 143, 216, 0.36), -5px 4px 0 rgba(158, 246, 243, 0.45), 0 12px 0 rgba(123, 97, 255, 0.08);
}

.photo-object, .floating-photo, .contact-frame, .specimen-orb {
  box-shadow: 0 35px 90px rgba(36, 27, 58, 0.25), inset 0 0 0 1px rgba(255, 248, 255, 0.8);
}

.instant-photo {
  position: absolute;
  right: 8vw;
  bottom: -7vh;
  z-index: 2;
  width: min(50vw, 650px);
  height: min(60vh, 590px);
  border: 18px solid rgba(255, 248, 255, 0.78);
  border-bottom-width: 58px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 38% 36%, var(--soft-aqua), transparent 16%),
    radial-gradient(circle at 64% 52%, var(--bubblegum-pink), transparent 18%),
    linear-gradient(135deg, rgba(255, 209, 168, 0.92), rgba(234, 215, 255, 0.72));
  transform: rotate(3deg);
  animation: photoFloat 5.8s ease-in-out infinite alternate;
}

.photo-grain, .photo-object::after, .floating-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.22) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  opacity: 0.75;
}

.acrylic-block {
  position: absolute;
  border-radius: 30px;
  border: 2px solid rgba(255, 248, 255, 0.68);
  backdrop-filter: blur(8px);
}

.block-a {
  width: 48%;
  height: 30%;
  left: 18%;
  top: 27%;
  background: rgba(158, 246, 243, 0.48);
  transform: rotate(-13deg);
}

.block-b {
  width: 38%;
  height: 42%;
  right: 13%;
  top: 36%;
  background: rgba(255, 143, 216, 0.42);
  transform: rotate(9deg);
}

.toy-circuit {
  position: absolute;
  left: 29%;
  top: 52%;
  width: 210px;
  height: 120px;
  border: 5px solid var(--ink-plum);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 52px 0 0;
  opacity: 0.6;
}

.toy-circuit::before, .toy-circuit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--pale-lemon);
  border: 3px solid var(--ink-plum);
}

.toy-circuit::before { width: 26px; height: 26px; right: -14px; top: -15px; }
.toy-circuit::after { width: 18px; height: 18px; left: 40px; bottom: -10px; }

.sticky-tab {
  position: absolute;
  right: 9%;
  top: 12%;
  padding: 11px 19px;
  border-radius: 18px 18px 4px 18px;
  background: var(--pale-lemon);
  font-family: var(--jet);
  font-size: 12px;
  transform: rotate(8deg);
}

.acetate-note, .callout, .sheet {
  position: absolute;
  z-index: 5;
  padding: 18px 20px;
  border: 1px solid rgba(36, 27, 58, 0.16);
  border-radius: 24px;
  background: rgba(255, 248, 255, 0.5);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px rgba(123, 97, 255, 0.14);
}

.acetate-note b, .sheet span, .microtag {
  display: block;
  font-family: var(--jet);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.acetate-note span { display: block; margin-top: 8px; font-size: 14px; }
.note-top { left: 48vw; top: 18vh; }
.note-right { right: 6vw; top: 42vh; }

.calibration {
  position: absolute;
  left: 8vw;
  bottom: 11vh;
  font-family: var(--jet);
  color: var(--crt-violet);
}

.contact-plate {
  display: grid;
  grid-template-columns: minmax(180px, 30vw) 1fr;
  align-items: center;
  gap: 8vw;
}

.contact-strip {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 38px;
  background: rgba(255, 248, 255, 0.44);
  border: 1px solid rgba(36, 27, 58, 0.14);
  transform: rotate(-2deg);
}

.contact-frame {
  height: 25vh;
  min-height: 145px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 60% 45%, rgba(255, 255, 255, 0.84), transparent 10%),
    radial-gradient(circle at 42% 52%, rgba(123, 97, 255, 0.55), transparent 18%),
    linear-gradient(135deg, rgba(158, 246, 243, 0.74), rgba(255, 143, 216, 0.5), rgba(255, 209, 168, 0.76));
}

.contact-frame:nth-child(2) { background: linear-gradient(150deg, rgba(255, 246, 163, 0.7), rgba(234, 215, 255, 0.9), rgba(158, 246, 243, 0.6)); }
.contact-frame:nth-child(3) { background: linear-gradient(40deg, rgba(255, 143, 216, 0.72), rgba(255, 248, 255, 0.8), rgba(123, 97, 255, 0.42)); }

.contact-frame span {
  position: absolute;
  left: 17px;
  bottom: 15px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 248, 255, 0.56);
  font-family: var(--jet);
  font-size: 10px;
}

.plate-copy { position: relative; z-index: 2; max-width: 690px; }
.plate-copy h1 {
  margin: 18px 0;
  font-family: var(--space);
  font-size: clamp(38px, 7vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.08em;
}
.plate-copy p { max-width: 46ch; font-size: 15px; line-height: 1.75; }

.tag-cloud { position: absolute; right: 9vw; bottom: 12vh; display: flex; gap: 10px; flex-wrap: wrap; max-width: 390px; }
.tag {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255, 246, 163, 0.55);
  border: 1px dashed rgba(36, 27, 58, 0.24);
  font-family: var(--jet);
  font-size: 11px;
}

.grid-scrap {
  position: absolute;
  width: 280px;
  height: 180px;
  right: 18vw;
  top: 16vh;
  border-radius: 30px;
  background-image: linear-gradient(var(--crt-violet) 1px, transparent 1px), linear-gradient(90deg, var(--crt-violet) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.15;
  animation: gridBlink 2.4s ease-in-out infinite;
}

.void-plate { background: radial-gradient(circle at 50% 50%, var(--acetate), var(--mist-lavender) 55%, rgba(255, 143, 216, 0.34)); }
.specimen-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(50vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 28%, var(--acetate), rgba(158, 246, 243, 0.72) 28%, rgba(255, 143, 216, 0.7) 54%, rgba(123, 97, 255, 0.4));
  animation: photoFloat 5s ease-in-out infinite alternate;
}

.orb-core {
  position: absolute;
  inset: 28%;
  border-radius: 34% 66% 54% 46%;
  background: rgba(255, 246, 163, 0.72);
  border: 2px solid rgba(36, 27, 58, 0.16);
}
.orb-reflection { position: absolute; left: 22%; top: 17%; width: 24%; height: 14%; border-radius: 50%; background: rgba(255, 248, 255, 0.78); filter: blur(2px); }
.button-chip { position: absolute; right: 18%; bottom: 24%; padding: 12px 18px; border-radius: 999px; background: var(--pale-lemon); font-family: var(--jet); }

.callout { max-width: 250px; font-size: 13px; line-height: 1.55; }
.callout-one { left: 10vw; top: 24vh; }
.callout-two { right: 13vw; top: 22vh; }
.callout-three { left: 18vw; bottom: 17vh; }
.wave-sticker { position: absolute; right: 18vw; bottom: 18vh; font-family: var(--space); font-size: 70px; color: var(--bubblegum-pink); transform: rotate(-12deg); }

.acetate-plate { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; }
.floating-photo {
  position: relative;
  z-index: 2;
  height: min(64vh, 620px);
  border-radius: 48px;
  overflow: hidden;
  border: 16px solid rgba(255, 248, 255, 0.62);
  background: linear-gradient(130deg, rgba(255, 209, 168, 0.82), rgba(158, 246, 243, 0.58), rgba(255, 143, 216, 0.45));
  transform: rotate(-3deg);
  animation: photoFloat 6s ease-in-out infinite alternate;
}
.blurred-hand { position: absolute; width: 44%; height: 40%; left: -8%; bottom: 5%; border-radius: 45%; background: rgba(255, 209, 168, 0.62); filter: blur(18px); }
.prism { position: absolute; left: 40%; top: 22%; width: 34%; height: 46%; clip-path: polygon(50% 0, 100% 82%, 8% 100%); background: linear-gradient(120deg, rgba(255,255,255,0.8), rgba(158,246,243,0.58), rgba(123,97,255,0.42)); }
.paper-prototype { position: absolute; right: 9%; bottom: 12%; width: 42%; height: 28%; border-radius: 18px; background: rgba(255, 248, 255, 0.68); transform: rotate(9deg); }
.acetate-stack { position: relative; min-height: 520px; }
.sheet { width: min(84%, 450px); min-height: 150px; }
.sheet strong { display: block; margin-top: 18px; font-family: var(--space); font-size: 32px; line-height: 1; letter-spacing: -0.06em; }
.sheet-one { left: 0; top: 7%; background: rgba(255, 248, 255, 0.52); }
.sheet-two { left: 9%; top: 34%; background: rgba(158, 246, 243, 0.36); }
.sheet-three { left: 2%; top: 61%; background: rgba(255, 143, 216, 0.28); }

.crop-mark { position: absolute; width: 86px; height: 86px; border-color: var(--ink-plum); opacity: 0.32; }
.mark-a { left: 8vw; top: 19vh; border-left: 3px solid; border-top: 3px solid; }
.mark-b { right: 8vw; bottom: 15vh; border-right: 3px solid; border-bottom: 3px solid; }

.printer-plate { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(158, 246, 243, 0.72), transparent 30%), linear-gradient(180deg, var(--mist-lavender), var(--peach)); }
.printer-mist { position: absolute; inset: 20% 10%; border-radius: 50%; background: rgba(255, 143, 216, 0.18); filter: blur(40px); }
.printer-shell {
  position: absolute;
  top: 18vh;
  width: min(620px, 78vw);
  height: 155px;
  border-radius: 42px;
  background: rgba(255, 248, 255, 0.54);
  border: 1px solid rgba(36, 27, 58, 0.16);
  box-shadow: 0 25px 80px rgba(36, 27, 58, 0.2);
}
.slot { position: absolute; left: 12%; right: 12%; bottom: 32px; height: 16px; border-radius: 99px; background: rgba(36, 27, 58, 0.22); box-shadow: inset 0 4px 10px rgba(36, 27, 58, 0.24); }
.print-button { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; font-family: var(--jet); font-size: 11px; text-transform: uppercase; }
.print-button:hover { transform: translate(calc(-50% - 2px), -2px); }

.report-slip {
  position: relative;
  z-index: 3;
  margin-top: 220px;
  width: min(470px, 76vw);
  min-height: 410px;
  padding: 46px 34px 32px;
  border-radius: 14px 14px 32px 32px;
  background: rgba(255, 248, 255, 0.86);
  box-shadow: 0 30px 80px rgba(36, 27, 58, 0.22);
  transform-origin: top;
  transform: translateY(-210px) scaleY(0.2);
  opacity: 0;
}
.report-slip.printed { animation: printSlip 820ms cubic-bezier(.2, 1.4, .34, 1) forwards; }
.perfs { position: absolute; left: 0; right: 0; top: 12px; height: 12px; background: radial-gradient(circle, var(--mist-lavender) 0 4px, transparent 5px) 0 0 / 22px 12px; }
.report-slip h2 { font-family: var(--space); font-size: 42px; line-height: 0.96; letter-spacing: -0.07em; margin: 26px 0 18px; }
.report-slip p { line-height: 1.7; }
.stamp { display: inline-block; margin-top: 22px; padding: 12px 16px; border: 2px solid var(--bubblegum-pink); border-radius: 14px; color: var(--bubblegum-pink); font-family: var(--jet); text-transform: uppercase; transform: rotate(-5deg); }

.bounce-item { opacity: 0; transform: translateY(38px) scale(0.96); }
.report-plate.active .bounce-item { animation: bounceEnter 720ms cubic-bezier(.2, 1.55, .42, 1) forwards; }
.report-plate.active .bounce-item:nth-child(2) { animation-delay: 80ms; }
.report-plate.active .bounce-item:nth-child(3) { animation-delay: 170ms; }
.report-plate.active .bounce-item:nth-child(4) { animation-delay: 260ms; }
.report-plate.active .bounce-item:nth-child(5) { animation-delay: 350ms; }
.report-plate.active .tag:nth-child(2), .report-plate.active .sheet-two { animation-delay: 210ms; }
.report-plate.active .tag:nth-child(3), .report-plate.active .sheet-three { animation-delay: 320ms; }
.report-plate.active .tag:nth-child(4) { animation-delay: 430ms; }

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(46px) scale(0.92); }
  62% { opacity: 1; transform: translateY(-10px) scale(1.035); }
  82% { transform: translateY(4px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes photoFloat { from { translate: 0 -5px; } to { translate: 0 9px; } }
@keyframes warmDrift { from { transform: translate3d(-2%, -1%, 0) rotate(0deg); } to { transform: translate3d(2%, 1%, 0) rotate(3deg); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes gridBlink { 50% { opacity: 0.28; transform: translateY(5px); } }
@keyframes printSlip {
  0% { opacity: 0; transform: translateY(-210px) scaleY(0.16); }
  68% { opacity: 1; transform: translateY(18px) scaleY(1.04); }
  84% { transform: translateY(-7px) scaleY(0.985); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

@media (max-width: 820px) {
  .remote-pills { display: none; }
  .plate-status { top: auto; bottom: 18px; right: 18px; }
  .specimen-index { right: 14px; }
  .instant-photo { width: 78vw; height: 46vh; right: -4vw; }
  .note-top { left: 7vw; top: 52vh; }
  .note-right { right: 7vw; top: 65vh; }
  .contact-plate, .acetate-plate { grid-template-columns: 1fr; gap: 28px; }
  .contact-strip { grid-template-columns: repeat(3, 1fr); }
  .contact-frame { height: 170px; min-height: 120px; }
  .tag-cloud { right: auto; left: 24px; bottom: 60px; }
  .specimen-orb { width: 76vw; }
  .callout-one { left: 6vw; top: 18vh; }
  .callout-two { right: 6vw; top: 66vh; }
  .callout-three { left: 7vw; bottom: 9vh; }
  .acetate-stack { min-height: 420px; }
}