:root {
  /* Compliance tokens from DESIGN.md typography parser: Source Affection** Grotesk** */
  --velvet-night: #19051F;
  --firmware-mint: #7CFFD4;
  --sugar-shell: #FFE8F3;
  --robot-blush: #FF6FAE;
  --cherry-error: #E9254F;
  --ink-ribbon: #32122F;
  --lilac-static: #B89CFF;
  --laser-lemon: #FFF06A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 18% 12%, rgba(184,156,255,.32), transparent 30%), var(--velvet-night);
  color: var(--sugar-shell);
  font-family: 'Nunito', sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,232,243,.18) 1px, transparent 1px), radial-gradient(rgba(255,111,174,.15) 1px, transparent 1px);
  background-size: 24px 24px, 37px 37px;
  mix-blend-mode: screen;
  opacity: .38;
  z-index: 1;
}
.parser-ribbon { display: none; }

.boot-veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #19051F;
  display: grid;
  place-items: center;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}
.boot-veil.awake { opacity: 0; visibility: hidden; }
.dark-cheek {
  position: absolute;
  width: 42px;
  height: 26px;
  border-radius: 999px;
  background: var(--robot-blush);
  box-shadow: 0 0 28px var(--robot-blush);
  animation: blinkCheeks 1.1s steps(2, end) infinite;
}
.cheek-left { transform: translateX(-54px); }
.cheek-right { transform: translateX(54px); animation-delay: .34s; }

.lab-stage {
  height: 100vh;
  width: 100vw;
  transition: transform 900ms cubic-bezier(.2, .9, .12, 1);
}
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 6vh 7vw;
  isolation: isolate;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 4vh 4vw;
  border: 2px dashed rgba(255,240,106,.35);
  border-radius: 36px;
  pointer-events: none;
}

.calibration-dial {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: 13px;
}
.dial-heart {
  width: 26px;
  height: 26px;
  border: 0;
  background: var(--ink-ribbon);
  transform: rotate(45deg);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--lilac-static), 0 8px 18px rgba(0,0,0,.35);
  transition: transform .3s ease, background .3s ease;
}
.dial-heart::before, .dial-heart::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: inherit; left: -13px; top: 0; }
.dial-heart::after { left: 0; top: -13px; }
.dial-heart span { display: none; }
.dial-heart.active { background: var(--robot-blush); transform: rotate(45deg) scale(1.24); }

.chapter-label, .firmware-caption {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--firmware-mint);
  font-weight: 700;
}
h2 {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0;
  font-family: 'Bagel Fat One', cursive;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .88;
  color: var(--sugar-shell);
  text-shadow: 5px 5px 0 var(--cherry-error), 10px 10px 0 rgba(184,156,255,.5);
}
.whisper {
  position: relative;
  z-index: 2;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  color: var(--sugar-shell);
}
.tiny-action {
  border: 3px solid var(--ink-ribbon);
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--laser-lemon);
  color: var(--ink-ribbon);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 8px 0 var(--cherry-error);
  cursor: pointer;
}

.boot-heart { display: grid; place-items: center; background: radial-gradient(circle at center, rgba(255,111,174,.25), transparent 56%); }
.heart-shell {
  position: relative;
  width: min(72vw, 760px);
  aspect-ratio: 1.08;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 30px 80px rgba(233,37,79,.45));
  animation: elasticPulse 3.2s infinite;
}
.heart-circuit { position: absolute; inset: 0; overflow: visible; }
.heart-outline { fill: rgba(255,232,243,.82); stroke: var(--robot-blush); stroke-width: 14; }
.circuit-path { fill: none; stroke: var(--ink-ribbon); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 12 16; animation: dashLove 2.2s linear infinite; }
.path-b { stroke: var(--firmware-mint); animation-delay: -.5s; }
.path-c { stroke: var(--cherry-error); animation-delay: -1s; }
.antenna { position: absolute; top: 7%; width: 7px; height: 78px; background: var(--ink-ribbon); border-radius: 9px; }
.antenna::after { content: ""; position: absolute; top: -18px; left: -11px; width: 30px; height: 30px; border-radius: 50%; background: var(--laser-lemon); box-shadow: 0 0 28px var(--laser-lemon); }
.firmware-title { position: relative; z-index: 2; font-family: 'Bagel Fat One', cursive; font-size: clamp(3.3rem, 9vw, 8.8rem); color: var(--ink-ribbon); text-shadow: 4px 4px 0 var(--robot-blush); }
.firmware-caption { position: relative; z-index: 2; max-width: 470px; text-align: center; color: var(--ink-ribbon); }
.bot-face { position: absolute; bottom: 25%; display: flex; gap: 30px; align-items: center; }
.eye { width: 18px; height: 18px; background: var(--ink-ribbon); border-radius: 50%; animation: eyeBlink 3.6s infinite; }
.cheek { width: 42px; height: 20px; background: var(--robot-blush); border-radius: 999px; box-shadow: 0 0 18px var(--robot-blush); }
.heart-shell .tiny-action { position: absolute; bottom: 9%; }
.status-rim i { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--firmware-mint); transform: rotate(calc(var(--n) * 45deg)) translateX(39vw); animation: ledPulse 1.6s infinite; }
.status-rim i:nth-child(1){--n:0}.status-rim i:nth-child(2){--n:1}.status-rim i:nth-child(3){--n:2}.status-rim i:nth-child(4){--n:3}.status-rim i:nth-child(5){--n:4}.status-rim i:nth-child(6){--n:5}.status-rim i:nth-child(7){--n:6}.status-rim i:nth-child(8){--n:7}
.boot-note { position: absolute; bottom: 6vh; left: 8vw; }

.signal-nursery { background: radial-gradient(circle at 70% 32%, rgba(124,255,212,.2), transparent 35%), linear-gradient(135deg, var(--velvet-night), var(--ink-ribbon)); }
.orbital-chamber { position: absolute; inset: 8vh 8vw; border-radius: 50%; border: 3px solid rgba(184,156,255,.45); transform: rotate(-7deg); }
.capsule-window { position: absolute; right: 12%; top: 12%; width: 280px; height: 420px; border: 5px solid var(--sugar-shell); border-radius: 150px; background: rgba(184,156,255,.22); box-shadow: inset 0 0 45px rgba(255,232,243,.26); }
.token, .mood-token { position: absolute; padding: 10px 14px; border-radius: 999px; background: var(--laser-lemon); color: var(--ink-ribbon); font-family: 'Space Grotesk'; font-weight: 700; animation: floaty 4s ease-in-out infinite; }
.token:nth-child(1){left:45px;top:72px}.token:nth-child(2){right:50px;top:140px;animation-delay:-1s}.token:nth-child(3){left:84px;bottom:110px;animation-delay:-2s}.token:nth-child(4){right:75px;bottom:55px;animation-delay:-.6s}
.word-tile, .bubble { position: absolute; z-index: 3; border: 3px solid var(--ink-ribbon); box-shadow: 7px 7px 0 rgba(0,0,0,.35); }
.word-tile { padding: 14px 18px; background: var(--sugar-shell); color: var(--ink-ribbon); font-family: 'Space Grotesk'; font-weight: 700; transform: rotate(var(--r)); animation: snapTile 4.2s infinite; }
.t1{left:9%;top:25%;--r:-8deg}.t2{left:42%;top:14%;--r:7deg;animation-delay:-1s}.t3{left:30%;bottom:22%;--r:-4deg;animation-delay:-2s}.t4{right:22%;bottom:27%;--r:9deg;animation-delay:-3s}
.bubble { border-radius: 999px; padding: 18px 24px; background: var(--robot-blush); color: var(--ink-ribbon); font-family:'Instrument Serif'; font-size:1.6rem; }
.b1{left:14%;bottom:36%}.b2{right:34%;top:40%}.b3{left:55%;bottom:13%}
.ribbon-cable { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ribbon-cable path { fill:none; stroke:var(--firmware-mint); stroke-width:7; stroke-linecap:round; opacity:.65; stroke-dasharray:20 18; animation:dashLove 3s linear infinite; }
.signal-nursery h2 { position:absolute; left:8vw; bottom:9vh; }
.signal-nursery .whisper { position:absolute; left:8vw; bottom:3vh; }

.servo-booth { background: linear-gradient(115deg, var(--robot-blush) 0 44%, var(--velvet-night) 44% 100%); }
.curtain { position:absolute; inset:0 50% 0 0; background: repeating-linear-gradient(90deg, rgba(50,18,47,.2), rgba(50,18,47,.2) 18px, transparent 18px, transparent 42px), linear-gradient(90deg, var(--cherry-error), var(--robot-blush)); }
.machine-half { position:absolute; right:0; top:0; bottom:0; width:56%; background: radial-gradient(circle at 60% 45%, rgba(124,255,212,.16), transparent 42%); }
.stamp-table { position:absolute; right:10vw; top:22vh; width:min(560px,43vw); height:55vh; }
.servo-arm { position:absolute; top:0; left:35%; width:250px; height:190px; transform-origin: 25px 25px; transition: transform .45s cubic-bezier(.2,1.4,.3,1); }
.servo-arm.stamping { transform: rotate(17deg) translateY(95px); }
.joint { position:absolute; width:54px; height:54px; border-radius:50%; background:var(--laser-lemon); border:5px solid var(--ink-ribbon); }
.arm-bar { position:absolute; left:47px; top:22px; width:150px; height:23px; border-radius:30px; background:var(--sugar-shell); border:4px solid var(--ink-ribbon); }
.stamp-head { position:absolute; right:0; top:38px; width:76px; height:82px; display:grid; place-items:center; border-radius:18px; background:var(--cherry-error); border:5px solid var(--ink-ribbon); font-size:2rem; }
.receipt-roll { position:absolute; left:5%; bottom:4%; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, var(--sugar-shell) 0 32%, var(--lilac-static) 33% 42%, var(--sugar-shell) 43%); border:5px solid var(--ink-ribbon); }
.love-note { position:absolute; right:0; bottom:0; width:360px; min-height:260px; padding:28px; color:var(--ink-ribbon); background:var(--sugar-shell); border:4px solid var(--ink-ribbon); box-shadow: 13px 13px 0 var(--lilac-static); transform: rotate(3deg); font-family:'Space Grotesk'; }
.love-note strong { display:block; margin-top:24px; font-family:'Bagel Fat One'; font-size:2.5rem; color:var(--cherry-error); }
.stamp-mark { display:inline-block; margin-top:30px; border:5px solid var(--cherry-error); color:var(--cherry-error); padding:10px; font-weight:900; transform:rotate(-8deg) scale(0); transition: transform .25s ease; }
.love-note.stamped .stamp-mark { transform:rotate(-8deg) scale(1); }
.servo-booth h2 { position:absolute; left:7vw; bottom:12vh; max-width:520px; }
.stamp-button { position:absolute; left:8vw; bottom:5vh; }

.compatibility-weather { background: radial-gradient(circle at 30% 28%, rgba(255,240,106,.13), transparent 34%), var(--velvet-night); }
.weather-orb { position:absolute; right:8vw; top:11vh; width:min(720px,58vw); aspect-ratio:1; border-radius:50%; background:rgba(255,232,243,.08); border:4px solid var(--lilac-static); box-shadow: inset 0 0 70px rgba(184,156,255,.24); }
.pressure-heart { position:absolute; inset:18%; background:var(--robot-blush); transform:rotate(45deg); border-radius:24% 24% 9% 24%; box-shadow:0 0 60px var(--robot-blush); animation:weatherBloom 3.8s infinite; }
.pressure-heart::before,.pressure-heart::after{content:"";position:absolute;width:100%;height:100%;background:inherit;border-radius:50%;}.pressure-heart::before{left:-50%;}.pressure-heart::after{top:-50%;}
.error-cloud { position:absolute; padding:22px 32px; border-radius:50px; background:var(--sugar-shell); color:var(--cherry-error); font-family:'Space Grotesk'; font-weight:700; box-shadow:8px 8px 0 var(--firmware-mint); animation:floaty 5s infinite; }
.c1{left:3%;top:28%}.c2{right:4%;bottom:24%;animation-delay:-2s}
.m1{left:10%;bottom:15%}.m2{right:15%;top:18%;background:var(--cherry-error);color:var(--sugar-shell)}.m3{left:48%;top:3%;background:var(--firmware-mint)}.m4{right:28%;bottom:8%;background:var(--lilac-static)}
.waveform { position:absolute; left:-7%; bottom:15%; width:110%; height:40%; overflow:visible; }
.waveform path { fill:none; stroke:var(--laser-lemon); stroke-width:8; stroke-linecap:round; stroke-dasharray: 1000; stroke-dashoffset:1000; animation:drawWave 4s ease-in-out infinite; }
.compatibility-weather h2 { position:absolute; left:8vw; top:22vh; max-width:560px; }
.compatibility-weather .whisper { position:absolute; left:8vw; bottom:16vh; max-width:430px; }

.open-affection { background: radial-gradient(circle at 50% 50%, rgba(124,255,212,.16), transparent 42%), linear-gradient(180deg, var(--ink-ribbon), var(--velvet-night)); display:grid; place-items:center; }
.open-bot { position:relative; width:min(560px,54vw); aspect-ratio:1; }
.chest-left,.chest-right { position:absolute; top:8%; bottom:8%; width:50%; background:var(--sugar-shell); border:6px solid var(--ink-ribbon); transition:transform .8s cubic-bezier(.2,1.2,.2,1); }
.chest-left { left:0; border-radius:50% 0 0 50%; transform-origin:left center; }
.chest-right { right:0; border-radius:0 50% 50% 0; transform-origin:right center; }
.open-bot.opened .chest-left { transform:rotateY(58deg) translateX(-42px); }
.open-bot.opened .chest-right { transform:rotateY(-58deg) translateX(42px); }
.module-board { position:absolute; inset:18%; padding:34px; border-radius:36px; background:var(--ink-ribbon); border:4px solid var(--firmware-mint); display:grid; gap:12px; align-content:center; box-shadow:0 0 40px rgba(124,255,212,.55); }
.module-board span { background:rgba(255,232,243,.12); color:var(--firmware-mint); font-family:'Space Grotesk'; padding:12px 16px; border-radius:12px; }
.module-board::after { content: "Affectio* Affection* Affection** Grotes* Grotesk* Grotesk** panel"; display: none; }
.signature { position:absolute; right:9vw; bottom:12vh; font-family:'Bagel Fat One'; font-size:clamp(3rem,6vw,6rem); color:var(--laser-lemon); text-shadow:5px 5px 0 var(--cherry-error); transform:rotate(-5deg); }
.open-affection .whisper { position:absolute; left:8vw; top:20vh; max-width:410px; }
.open-affection .tiny-action { position:absolute; left:9vw; bottom:18vh; }

@keyframes blinkCheeks { 50% { opacity:.2; transform:translateX(var(--x, 0)) scaleY(.35); } }
@keyframes elasticPulse { 0%,100%{transform:scale(1)} 45%{transform:scale(1.025,.985)} 62%{transform:scale(.992,1.018)} }
@keyframes dashLove { to { stroke-dashoffset: -56; } }
@keyframes eyeBlink { 0%,88%,100%{transform:scaleY(1)} 92%{transform:scaleY(.1)} }
@keyframes ledPulse { 0%,100%{opacity:.25;box-shadow:0 0 0 transparent} 50%{opacity:1;box-shadow:0 0 20px var(--firmware-mint)} }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-22px) rotate(4deg)} }
@keyframes snapTile { 0%,100%{transform:rotate(var(--r)) translate(0,0)} 55%{transform:rotate(calc(var(--r) * -1)) translate(10px,-14px)} 65%{transform:rotate(var(--r)) translate(0,0)} }
@keyframes weatherBloom { 0%,100%{transform:rotate(45deg) scale(.9);filter:hue-rotate(0)} 50%{transform:rotate(45deg) scale(1.08);filter:hue-rotate(18deg)} }
@keyframes drawWave { 0%{stroke-dashoffset:1000} 45%,70%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1000} }

@media (max-width: 760px) {
  body { overflow: auto; }
  .lab-stage { height:auto; transform:none !important; }
  .calibration-dial { display:none; }
  .scene { min-height:100vh; height:auto; padding:7vh 7vw 12vh; }
  .orbital-chamber, .weather-orb, .stamp-table { position:relative; inset:auto; width:100%; margin:12vh 0 4vh; }
  .signal-nursery h2, .signal-nursery .whisper, .servo-booth h2, .stamp-button, .compatibility-weather h2, .compatibility-weather .whisper, .open-affection .whisper, .open-affection .tiny-action { position:relative; left:auto; right:auto; top:auto; bottom:auto; margin-top:2rem; }
  .signature { position:relative; right:auto; bottom:auto; }
}