:root {
  /* Design font token: Space Grotesk** */
  --cream: #F7E8CF;
  --burgundy: #6E1432;
  --oxblood: #310915;
  --ivory: #FFF8EA;
  --sepia: #B87958;
  --cyan: #31D6D1;
  --lemon: #F4D849;
  --rose: #E7A0AE;
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --caption: "Nunito Sans", system-ui, sans-serif;
  --body: "Quicksand", system-ui, sans-serif;
  --hud: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--oxblood);
  color: var(--burgundy);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background:
    radial-gradient(circle at 18% 22%, rgba(110, 20, 50, .12) 0 2px, transparent 2.5px),
    radial-gradient(circle at 80% 70%, rgba(231, 160, 174, .18) 0 1.5px, transparent 2px);
  background-size: 18px 18px, 14px 14px;
  mix-blend-mode: multiply;
}

.cursor-field {
  position: fixed;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(49, 214, 209, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.35);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity .25s ease, transform .08s linear;
}

.panel-nav {
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .85rem;
  z-index: 50;
}

.nav-pip {
  width: 34px;
  height: 34px;
  color: var(--burgundy);
  text-decoration: none;
  border: 2px solid var(--burgundy);
  border-radius: 50%;
  background: var(--cream);
  display: grid;
  place-items: center;
  font: 800 .58rem/1 var(--caption);
  box-shadow: 4px 4px 0 var(--cyan);
  transition: background .25s ease, color .25s ease;
}

.nav-pip.active { background: var(--lemon); color: var(--oxblood); }

.stack { position: relative; }

.panel {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  margin-top: -7vw;
  padding: 8vw 6vw;
  background: var(--cream);
  border: clamp(10px, 1.2vw, 18px) solid var(--ivory);
  box-shadow: 0 -18px 0 rgba(49, 214, 209, .85), 0 -28px 0 var(--burgundy), 0 28px 60px rgba(49, 9, 21, .45);
  overflow: hidden;
}

.panel:first-child { margin-top: 0; }

.panel::before,
.panel::after {
  content: attr(data-panel);
  position: absolute;
  font-family: var(--hud);
  color: var(--burgundy);
  opacity: .55;
  letter-spacing: .2em;
}

.panel::before { left: 2vw; top: 2vw; }
.panel::after { right: 2vw; bottom: 2vw; transform: rotate(90deg); }

.hero-panel {
  z-index: 5;
  background:
    radial-gradient(circle at 50% 52%, var(--ivory) 0 10%, transparent 32%),
    var(--cream);
}

.hero-grid,
.panel-grid {
  width: 100%;
  min-height: 72vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 1.4vw;
}

.tiny-origin {
  grid-column: 6 / 8;
  grid-row: 1;
  justify-self: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--burgundy);
  box-shadow: 0 0 0 0 rgba(110, 20, 50, .28);
  animation: blinkDot .95s ease-in-out 3, dotVanish .45s ease 2.4s forwards;
}

.logo-assembly {
  grid-column: 2 / 11;
  grid-row: 1;
  margin: 0;
  font: 700 clamp(4rem, 14vw, 14.5rem)/.78 var(--display);
  letter-spacing: -.08em;
  color: var(--burgundy);
  text-shadow: .035em .045em 0 var(--rose), .07em .08em 0 var(--cyan);
  white-space: nowrap;
}

.logo-assembly span {
  display: inline-block;
  transform: translate(var(--x, 0), var(--y, 0)) scale(.1) rotate(-18deg);
  opacity: 0;
  animation: stickerLand .68s cubic-bezier(.2, 1.35, .35, 1) forwards;
  animation-delay: calc(2.05s + var(--i) * .075s);
}

.height-bracket {
  grid-column: 10 / 12;
  grid-row: 1;
  width: min(13vw, 130px);
  justify-self: start;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(4px 4px 0 rgba(110, 20, 50, .18));
  animation: bracketCalibrate 2.7s ease-in-out infinite 3s;
}

.panel-caption,
.story-line {
  margin: 0;
  font: 500 clamp(1.15rem, 2vw, 2.1rem)/1.2 var(--body);
  max-width: 29rem;
  letter-spacing: .03em;
}

.panel-caption { grid-column: 3 / 7; align-self: end; }

.hud-label,
.crop-title,
.photo-meta,
.coordinate-row,
.contact-frame span {
  font-family: var(--hud);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hud-label {
  grid-column: 9 / 12;
  align-self: end;
  justify-self: start;
  color: var(--cyan);
  background: var(--burgundy);
  padding: .55rem .75rem;
  border-radius: 999px;
  font-size: .72rem;
}

.registration {
  position: absolute;
  width: 6vw;
  height: 6vw;
  border-color: var(--burgundy);
  opacity: .7;
}
.registration.top-left { top: 3vw; left: 3vw; border-top: 3px solid; border-left: 3px solid; }
.registration.bottom-right { bottom: 3vw; right: 3vw; border-bottom: 3px solid; border-right: 3px solid; }

.photo-panel { z-index: 4; transform: rotate(-1.2deg); background: var(--ivory); }
.calibration-panel { z-index: 3; transform: rotate(.8deg); }
.inspection-panel { z-index: 2; transform: rotate(-.7deg); background: #FFF8EA; }
.control-panel { z-index: 1; transform: rotate(.5deg); }

.massive-letter {
  grid-column: 1 / 5;
  font: 700 clamp(13rem, 38vw, 35rem)/.65 var(--display);
  color: var(--burgundy);
  opacity: .96;
  text-shadow: 1.2vw 1vw 0 var(--rose), 2vw 1.7vw 0 var(--cyan);
}

.photo-plate {
  grid-column: 6 / 11;
  padding: clamp(1rem, 2vw, 1.8rem);
  background: var(--cream);
  border: 3px solid var(--burgundy);
  box-shadow: 16px 18px 0 var(--sepia), 24px 26px 0 var(--oxblood);
  transform: rotate(2deg);
}

.photo-image {
  position: relative;
  aspect-ratio: 9 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 248, 234, .9), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(244, 216, 73, .28), transparent 24%),
    linear-gradient(135deg, var(--sepia), var(--rose) 42%, var(--burgundy));
  filter: sepia(.22) saturate(.95);
}

.photo-image::after,
.contact-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(49, 9, 21, .18) 0 1px, transparent 1.6px);
  background-size: 11px 11px;
  mix-blend-mode: multiply;
}

.spoon {
  position: absolute;
  width: 62%;
  height: 34%;
  left: 18%;
  top: 36%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ivory), var(--sepia));
  border: 6px solid var(--burgundy);
  transform: rotate(-18deg);
}

.toy-robot {
  position: absolute;
  width: 76px;
  height: 92px;
  left: 45%;
  top: 32%;
  background: var(--lemon);
  border: 5px solid var(--burgundy);
  border-radius: 18px;
  transform: rotate(8deg);
  box-shadow: 10px 10px 0 var(--cyan);
}

.toy-robot::before,
.toy-robot::after {
  content: "";
  position: absolute;
  top: 25px;
  width: 13px;
  height: 13px;
  background: var(--burgundy);
  border-radius: 50%;
}
.toy-robot::before { left: 18px; }
.toy-robot::after { right: 18px; }
.toy-robot i { position: absolute; left: 22px; bottom: 24px; width: 30px; height: 5px; background: var(--burgundy); border-radius: 4px; }

.glare {
  position: absolute;
  right: -10%;
  top: -10%;
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: rgba(255, 248, 234, .72);
  filter: blur(2px);
}

.hud-overlay,
.calibration-svg,
.room-brackets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-linecap: round;
}

.photo-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  color: var(--burgundy);
  font-size: .72rem;
}

.photo-panel .story-line { grid-column: 9 / 12; align-self: end; }

.calibration-grid { align-items: stretch; }
.crop-title {
  grid-column: 1 / 5;
  align-self: start;
  font-size: clamp(2.5rem, 8vw, 8rem);
  font-weight: 800;
  color: var(--burgundy);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.micro-viewport {
  grid-column: 4 / 10;
  align-self: center;
  min-height: 56vh;
  position: relative;
  border: 4px solid var(--burgundy);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(110, 20, 50, .16) 1px, transparent 1px),
    linear-gradient(rgba(110, 20, 50, .16) 1px, transparent 1px),
    var(--cream);
  background-size: 34px 34px;
  box-shadow: 18px 18px 0 var(--lemon), -16px -16px 0 var(--rose);
  overflow: hidden;
}

.radar {
  position: absolute;
  width: 230px;
  height: 230px;
  left: 50%;
  top: 50%;
  margin: -115px;
  border-radius: 50%;
  border: 3px solid var(--cyan);
  background: conic-gradient(from 0deg, rgba(49, 214, 209, .55), transparent 28%, transparent);
  animation: radarSpin 5s linear infinite;
}

.meter {
  position: absolute;
  left: 7%;
  bottom: 9%;
  display: flex;
  gap: 8px;
}
.meter span { width: 18px; height: 54px; border: 2px solid var(--burgundy); background: var(--cyan); border-radius: 12px; animation: meterBob 1.4s ease-in-out infinite alternate; }
.meter span:nth-child(2) { animation-delay: .12s; height: 78px; }
.meter span:nth-child(3) { animation-delay: .24s; height: 42px; }
.meter span:nth-child(4) { animation-delay: .36s; height: 90px; background: var(--lemon); }
.meter span:nth-child(5) { animation-delay: .48s; }

.pulse-path { stroke: var(--burgundy); stroke-dasharray: 18 16; animation: dashMove 2s linear infinite; }
.tracking-dot { fill: var(--lemon); stroke: var(--burgundy); animation: dotTrack 3.8s ease-in-out infinite; }
.coordinate-row { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; font-size: .7rem; color: var(--burgundy); }
.calibration-panel .story-line { grid-column: 10 / 13; align-self: end; }

.inspection-grid { align-items: center; }
.contact-sheet {
  grid-column: 1 / 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 1.3rem;
  transform: rotate(1deg);
}

.contact-frame {
  min-height: 48vh;
  position: relative;
  overflow: hidden;
  padding: 1rem;
  background: linear-gradient(160deg, var(--sepia), var(--rose));
  border: 3px solid var(--burgundy);
  box-shadow: 10px 12px 0 var(--cream), 16px 18px 0 var(--burgundy);
}
.contact-frame span { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; color: var(--ivory); font-size: .72rem; }

.cube { width: 92px; height: 92px; margin: 22vh auto 0; background: rgba(49, 214, 209, .7); border: 5px solid var(--burgundy); transform: rotate(45deg); box-shadow: 20px 10px 0 rgba(244, 216, 73, .7); }
.bulbs { height: 80%; background: radial-gradient(circle at 35% 25%, var(--lemon) 0 20px, transparent 22px), radial-gradient(circle at 70% 42%, var(--ivory) 0 16px, transparent 18px), radial-gradient(circle at 45% 68%, var(--cyan) 0 14px, transparent 16px); }
.lens-eye { width: 190px; height: 190px; border-radius: 50%; margin: 15vh auto 0; border: 10px solid var(--ivory); background: radial-gradient(circle, var(--burgundy) 0 18px, var(--lemon) 19px 42px, var(--cyan) 43px 72px, var(--sepia) 73px); }

.speech-blob {
  grid-column: 10 / 13;
  justify-self: center;
  width: clamp(130px, 18vw, 240px);
  height: clamp(110px, 15vw, 200px);
  display: grid;
  place-items: center;
  border-radius: 54% 46% 48% 52% / 44% 58% 42% 56%;
  background: var(--lemon);
  border: 5px solid var(--burgundy);
  box-shadow: 14px 14px 0 var(--cyan);
  font: 700 clamp(4rem, 9vw, 9rem)/1 var(--display);
}
.inspection-panel .story-line { grid-column: 8 / 12; align-self: end; }

.final-room {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4vw;
  align-items: center;
}

.control-photo {
  grid-column: 2 / 8;
  min-height: 62vh;
  position: relative;
  background: var(--ivory);
  border: 5px solid var(--burgundy);
  box-shadow: 22px 22px 0 var(--sepia), -15px -15px 0 var(--cyan);
  overflow: hidden;
}
.control-photo::before { content: ""; position: absolute; inset: 12%; border-radius: 40px; background: var(--cream); border: 3px solid var(--burgundy); }

.mini-console {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(260px, 44vw);
  height: 170px;
  transform: translate(-50%, -50%);
  background: var(--burgundy);
  border-radius: 28px;
  border: 8px solid var(--oxblood);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 28px;
}
.mini-console span { border-radius: 16px; background: var(--ivory); box-shadow: inset 0 -16px 0 var(--rose); }
.cyan-pulse { position: absolute; left: 50%; bottom: 22px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(49, 214, 209, .72); animation: cyanPulse 1.5s ease-out infinite; }

.final-copy { grid-column: 8 / 12; }
.final-copy h2 { margin: 1.5rem 0 1rem; font: 700 clamp(2.8rem, 7vw, 7rem)/.86 var(--display); letter-spacing: -.05em; color: var(--burgundy); }
.final-copy p { font-size: clamp(1.2rem, 2vw, 2rem); margin: 0; max-width: 25rem; }

.magnetic { will-change: transform; transition: transform .18s ease-out; }

@keyframes blinkDot { 0%,100% { transform: scale(.65); box-shadow: 0 0 0 0 rgba(110, 20, 50, .28); } 50% { transform: scale(1.25); box-shadow: 0 0 0 24px rgba(110, 20, 50, 0); } }
@keyframes dotVanish { to { opacity: 0; transform: scale(.1); } }
@keyframes stickerLand { 0% { opacity: 0; transform: translate(calc((4 - var(--i)) * 5vw), calc((var(--i) - 4) * 2.3vw)) scale(.08) rotate(-28deg); } 68% { opacity: 1; transform: translate(0, -10px) scale(1.08) rotate(3deg); } 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } }
@keyframes bracketCalibrate { 0%,100% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(10px) scaleY(.86); } }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes meterBob { to { transform: scaleY(.45); opacity: .72; } }
@keyframes dashMove { to { stroke-dashoffset: -68; } }
@keyframes dotTrack { 0%,100% { transform: translate(-90px, 52px); } 50% { transform: translate(88px, -72px); } }
@keyframes cyanPulse { to { box-shadow: 0 0 0 36px rgba(49, 214, 209, 0); } }

@media (max-width: 760px) {
  .panel { padding: 7rem 1.4rem; margin-top: -4rem; }
  .panel-nav { right: .65rem; }
  .hero-grid, .panel-grid, .final-room { grid-template-columns: 1fr; gap: 2rem; }
  .logo-assembly, .height-bracket, .panel-caption, .hud-label, .massive-letter, .photo-plate, .photo-panel .story-line, .crop-title, .micro-viewport, .calibration-panel .story-line, .contact-sheet, .speech-blob, .inspection-panel .story-line, .control-photo, .final-copy { grid-column: 1; }
  .logo-assembly { font-size: 23vw; white-space: normal; }
  .height-bracket { display: none; }
  .massive-letter { font-size: 48vw; }
  .photo-plate { transform: none; }
  .crop-title { writing-mode: horizontal-tb; font-size: 14vw; }
  .contact-sheet { grid-template-columns: 1fr; }
  .contact-frame { min-height: 38vh; }
}