/* Observatory scenery is shared by the wall, the mission studio and the paper pass. */
:root {
  --garden: url("orbital-garden.webp");
  --navy: #0b1636;
  --ice: #b3efff;
  --sun: #ffd281;
}
.scout-paints { position: absolute; pointer-events: none; }
.topbar {height:68px; padding:0 clamp(18px,3.2vw,62px); background:#0c1531; border-bottom:1px solid #bbcfff26}
.brand-icon {position:relative; width:36px; height:36px; border:0; border-radius:50%; background:radial-gradient(circle at 32% 25%,#efffff,#8bdcf9 32%,#6779f4 73%,#343979); font-size:0; box-shadow:inset -4px -3px 6px #171e7244}
.brand-icon::after {content:"";position:absolute;left:-16%;right:-16%;height:31%;top:38%;border:2px solid #ffdba8;border-radius:100%;transform:rotate(-28deg)}
.brand strong {font-family:system-ui,sans-serif;font-size:22px;font-weight:900;letter-spacing:-1.3px;line-height:1.05}
.brand small {margin-top:4px;color:#c9d7f7;letter-spacing:1.2px;font-size:8px}
.nav {padding:3px;background:#040e265c;border:1px solid #d0e4ff20;border-radius:24px}
.nav a {border-radius:18px;padding:6px 15px;color:#c3cee6}
.nav a.active {background:#e9f4ff;color:#172644}
.connection {background:#101d3a;color:#dae9ff}
.wall {background:#10214a}
.sky-stage,.garden-drift,.star-stream,.aurora {position:absolute;inset:0;pointer-events:none}
.sky-stage {container-type:size;overflow:hidden;isolation:isolate;background:#112752}
.sky-stage::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07132e62 0%,transparent 31%,transparent 72%,#07132eb0 100%),linear-gradient(105deg,#07132e49,transparent 50%)}
.garden-plate {position:absolute;left:60%;top:50%;width:max(100cqw,177.68cqh);height:max(100cqh,56.28cqw);transform:translate(-60%,-50%)}
.garden-drift {background:var(--garden) center/100% 100% no-repeat;transform-origin:61% 57%;animation:garden-cruise 36s ease-in-out infinite;will-change:transform}
@keyframes garden-cruise {
  0%,100% {transform:scale(1.08) translate(-1.8%,.7%) rotate(-.6deg)}
  50% {transform:scale(1.12) translate(1.8%,-.9%) rotate(.6deg)}
}
.aurora {background:radial-gradient(ellipse at 32% 39%,#767eff44,transparent 38%),radial-gradient(ellipse at 82% 60%,#ffd48032,transparent 34%);mix-blend-mode:screen;animation:nebula-breathe 14s ease-in-out infinite alternate}
@keyframes nebula-breathe {from{opacity:.16}to{opacity:.85}}
.brand-year{display:inline-block;margin-left:3px;color:#acdfff}.planet-sigil{position:absolute;left:66.5%;top:45%;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:0 1px 3px #25466f,0 0 22px #354bbe;pointer-events:none}.planet-sigil small{display:block;font-weight:750;letter-spacing:.32em;font-size:clamp(8px,.65vw,14px)}.planet-sigil b{display:block;font:900 clamp(30px,3.6vw,76px)/1 system-ui,sans-serif;letter-spacing:-.065em}.planet-sigil i{font-style:normal;color:#e4f5ff}
.orbital-path {position:absolute;left:66.5%;top:44.5%;width:33%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-21deg) scaleY(.36);border:1.5px solid #fff1b485;border-radius:50%}
.orbital-path.outer {width:38%;transform:translate(-50%,-50%) rotate(12deg) scaleY(.27);border-color:#b4d6ff4a}
.orbital-traveler {position:absolute;inset:0;animation:orbit-lap 22s linear infinite}
.orbital-traveler::before {content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 90deg,transparent 0deg 285deg,#b5d4ff55 322deg,#ffebb2 359deg,transparent);mask-image:radial-gradient(farthest-side,transparent calc(100% - 4px),black calc(100% - 2px))}
.sky-stage::before {content:"";position:absolute;z-index:1;left:0;right:0;bottom:-3%;height:19%;background:radial-gradient(ellipse at 35% 100%,#ffe7d966,transparent 65%),radial-gradient(ellipse at 80% 90%,#d9e4ff55,transparent 50%);background-size:620px 100%;animation:cloudbank-pass 40s linear infinite;pointer-events:none}
@keyframes cloudbank-pass {to{background-position:620px 0}}
.outer .orbital-traveler {animation:orbit-lap 33s linear infinite reverse;animation-delay:-11s}
.orbital-traveler b {position:absolute;right:-.9%;top:49%;width:2.1%;aspect-ratio:1;border-radius:50%;background:#fff6c9;box-shadow:0 0 8px 4px #ffbd6b,0 0 22px 10px #ffd8a577}
.outer .orbital-traveler b {background:#f2fbff;box-shadow:0 0 8px 4px #7eccff,0 0 20px 9px #72a8ff66}
@keyframes orbit-lap {to{transform:rotate(360deg)}}
.star-stream {inset:-97px;opacity:.7;background-image:radial-gradient(circle at 21px 42px,#fcfaff 1px,transparent 2px),radial-gradient(circle at 63px 83px,#b8e4fc 1px,transparent 1.6px);background-size:97px 97px;animation:stardust-drift 28s linear infinite;mask-image:linear-gradient(20deg,transparent 7%,#000 72%)}
@keyframes stardust-drift {to{transform:translate(97px,-97px)}}
.comet {position:absolute;left:20%;top:18%;width:80px;height:2px;background:linear-gradient(90deg,transparent,#f9edc7);border-radius:50%;animation:comet-flight 13s linear infinite}
@keyframes comet-flight {0%,75%{opacity:0;transform:translate(0,0) rotate(-21deg)}78%{opacity:.88}90%,100%{opacity:0;transform:translate(280px,-106px) rotate(-21deg)}}
.wall-head {padding:clamp(20px,4vh,44px) clamp(18px,3.5vw,68px) 0;gap:12px}
.world-title .eyebrow {display:flex;align-items:center;gap:10px;letter-spacing:.18em;font:700 clamp(9px,.78vw,13px)/1.2 system-ui,sans-serif;color:#d5edfe}
.world-title .eyebrow i {width:25px;height:2px;background:var(--sun)} .world-title .eyebrow em {font-style:normal;color:var(--sun)}
.wall-head h1 {font-size:clamp(42px,4.8vw,88px);letter-spacing:-.065em;line-height:1.08;margin:9px 0 7px;color:white;white-space:nowrap;text-shadow:0 3px 20px #13234355}
.wall-head h1 span {background:linear-gradient(125deg,#efffff,#9fe2ff 60%,#aeb6ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.wall-head h1 sup {display:inline-block;color:var(--sun);font:400 .32em/1 Georgia,serif;vertical-align:top;margin:5px 0 0 10px}
.wall-head .caption {font-size:clamp(12px,1.05vw,18px);color:#e9f1ff;line-height:1.5}
.wall-count {min-width:110px;max-width:240px;background:#0a1935b8;border:1px solid #c3dbff50;border-radius:18px;padding:13px 18px;box-shadow:0 8px 25px #1221412b;backdrop-filter:blur(10px);text-align:left}
.count-kicker {display:flex;align-items:center;gap:6px;font:750 9px/1.1 system-ui,sans-serif;letter-spacing:.2em;color:#a9f3dd}
.count-kicker i {width:6px;height:6px;border-radius:100%;background:#a9f3dd}
.wall-count b {display:inline-block;font:600 clamp(30px,2.5vw,50px)/1.16 system-ui,sans-serif;letter-spacing:-.065em;margin:2px 7px 0 0}
.wall-count span {color:#e4edff;letter-spacing:0}.wall-count small {margin:0;letter-spacing:0;color:#bccfe9;font-size:11px}
.wall-count .arrival-notice:not(:empty) {display:block;position:absolute;right:0;top:calc(100% + 6px);white-space:nowrap;background:#12243fef;border-color:#b1cde0;color:#ffe1a5}
#wall .field {position:absolute;display:block;inset:clamp(145px,20vh,215px) clamp(6px,1.3vw,28px) clamp(90px,11vh,118px);margin:0;text-align:initial}
.wall-bottom {left:clamp(14px,3.5vw,68px);right:clamp(14px,3.5vw,68px);bottom:clamp(12px,2.6vh,28px);gap:12px}
.wall-bottom .help {display:flex;gap:12px;align-items:center;padding:11px 17px;background:#0c1c39cf;border:1px solid #cfdded49;border-radius:15px;color:#e3eefb;max-width:none;backdrop-filter:blur(12px)}
.wall-bottom .help b {color:white;font-size:14px}.help small {display:block;font-size:11px;color:#d6e6ff}.help small i {color:var(--sun);font-style:normal;margin:0 2px}.dock-star{font-size:32px;color:var(--sun)}
.wall-controls .iconbutton,.wall-controls .secondary {background:#102342e8;color:white;border-color:#ffffff62}
.wall-controls .send-button {background:#fff6e3;color:#182c49;border-radius:14px;border:1px solid white;box-shadow:0 6px 24px #03152e55;padding:7px 15px 7px 8px;gap:10px}
#wallQrIcon {background:white;color:#4958a5;display:grid;place-items:center;width:44px;height:44px;border-radius:5px}
#wallQrIcon img{height:100%;width:100%}.send-button small{text-align:left;letter-spacing:.13em;font-size:9px}
#field .wanderer {position:absolute;left:0;top:0;padding:0;margin:0;border:0;background:none;width:var(--cardw);text-align:left;will-change:translate;touch-action:manipulation}
#field .guide {aspect-ratio:1;filter:drop-shadow(0 5px 5px #0e1d382b)}
#field .guide .agent {inset:0;width:100%;height:100%;transform:none}
#field .guide svg,#field .guide img,.carrier-body,.carrier-body>svg,.carrier-body>img {display:block;width:100%;height:100%;object-fit:contain}
#field .wanderer:focus-visible {outline:3px solid #fff9c8;outline-offset:3px;border-radius:14px}
#field .floating {animation:none;transform:none;position:relative}
.traveler .note-number {background:#0d1c38d9;color:#eef7ff;font:700 clamp(8px,.6vw,11px)/1.3 system-ui,sans-serif;letter-spacing:.08em;border:1px solid #e9f5ff55;padding:3px 6px;border-radius:20px}
.wanderer[data-facing="left"] .carrier-body {scale:-1 1}
.ground-shadow {position:absolute;bottom:0;right:7%;width:32%;height:5%;border-radius:50%;background:#bcecff8c;box-shadow:0 0 9px #96caff85;filter:blur(1px)}
.guide .ground-shadow{right:13%;width:60%;bottom:1%}
/* Each frame changes the robot silhouette. The sign lives outside this sheet. */
.scout {overflow:hidden;filter:hue-rotate(var(--scout-hue,0deg))}
.scout-pose {transform:translate(0,-256px)}
[data-mood="walk"] .scout-pose,[data-mood="tiptoe"] .scout-pose {animation:pose-stride .84s steps(1,end) infinite}
[data-mood="tiptoe"] .scout-pose {animation-duration:1.1s}
[data-mood="wave"] .scout-pose {animation:pose-wave 1s steps(1,end) infinite}
[data-mood="peek"] .scout-pose {animation:pose-peek 1.15s steps(1,end) infinite}
[data-mood="hop"] .scout-pose {animation:pose-hop .83s steps(1,end) infinite}
[data-mood="greet"] .scout-pose {transform:translate(-512px,-512px)}
[data-mood="wiggle"] .scout-pose {transform:translate(-768px,-512px)}
@keyframes pose-stride {0%,100%{transform:translate(0,0)}25%{transform:translate(-256px,0)}50%{transform:translate(-512px,0)}75%{transform:translate(-768px,0)}}
@keyframes pose-wave {0%,100%{transform:translate(0,-256px)}50%{transform:translate(-256px,-256px)}}
@keyframes pose-peek {0%,100%{transform:translate(-512px,-256px)}60%{transform:translate(-768px,-256px)}}
@keyframes pose-hop {0%,100%{transform:translate(0,-512px)}30%{transform:translate(-256px,-512px)}76%{transform:translate(0,-512px)}}
.wanderer:is([data-mood="walk"],[data-mood="tiptoe"]) .carrier-body {animation:step-bob .42s ease-in-out infinite}
.wanderer:is([data-mood="wave"],[data-mood="greet"]) .carrier-body {animation:side-hello .75s ease-in-out infinite alternate}
@media (prefers-reduced-motion:no-preference) {
  .wanderer[data-skin="rabbit"]:is([data-mood="walk"],[data-mood="tiptoe"]) .carrier-body {animation:rabbit-bound .77s infinite}
  .wanderer[data-skin="fennec"]:is([data-mood="walk"],[data-mood="tiptoe"]) .carrier-body {animation:fox-stride .70s ease-in-out infinite}
  .wanderer[data-skin="sproutpal"]:is([data-mood="walk"],[data-mood="tiptoe"]) .carrier-body {animation:hamster-waddle .59s ease-in-out infinite}
}
@keyframes rabbit-bound {0%,100%{transform:translateY(0)} 17%{transform:translateY(2%) scale(1.018,.972)} 48%{transform:translateY(-12%) rotate(-2deg)} 77%{transform:translateY(1%) scale(1.02,.97)}}
@keyframes fox-stride {0%,100%{transform:rotate(-2deg)} 25%,75%{transform:translateY(-3%)} 50%{transform:rotate(2deg)}}
@keyframes hamster-waddle {0%,100%{transform:translate(-1%,0) rotate(-3deg)} 25%,75%{transform:translateY(-1.5%)} 50%{transform:translate(1%,0) rotate(3deg)}}
.wanderer[data-mood="peek"] .carrier-body {animation:peek-bow 1s ease-in-out infinite}
.wanderer[data-mood="hop"] .carrier-body {animation:scout-hop .83s ease-in-out infinite}
.wanderer[data-mood="wiggle"] .carrier-body {animation:scout-wiggle .42s ease-in-out infinite alternate}
.wanderer:is([data-mood="walk"],[data-mood="tiptoe"])::before {content:"";position:absolute;bottom:1%;left:35%;width:37%;height:6%;border:0;background:radial-gradient(ellipse at 15% 55%,#d2eeff 0 5%,transparent 8%),radial-gradient(ellipse at 48% 35%,#fff1af 0 7%,transparent 12%),radial-gradient(ellipse at 82% 65%,#a0dfff 0 9%,transparent 15%);animation:step-sparks .84s ease-in-out infinite;pointer-events:none}
.wanderer[data-facing="left"]::before{scale:-1 1}
@keyframes step-sparks {0%,100%{opacity:.2;transform:scaleX(.83)}50%{opacity:.9;transform:scaleX(1.03)}}
.mood-mark {position:absolute;right:-1%;top:48%;color:#ffdf78;line-height:1;font:800 clamp(13px,1.4vw,26px)/1 system-ui,sans-serif;text-shadow:0 2px 5px #0b214c}
.guide .mood-mark {top:10%;right:0}
[data-mood="greet"] .mood-mark::after {content:"♥";color:#ffc4d9}
[data-mood="hop"] .mood-mark::after {content:"✦"}
[data-mood="wiggle"] .mood-mark::after {content:"♫";color:#bdedff}
[data-mood="peek"] .mood-mark::after {content:"✧"}
@keyframes step-bob {50%{transform:translateY(-3%) rotate(2deg)}}
@keyframes side-hello {from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes peek-bow {50%{transform:translateY(3%) scale(.99,.96)}}
@keyframes scout-hop {42%{transform:translateY(-13%) rotate(-5deg)}78%{transform:scale(1.04,.96)}}
@keyframes scout-wiggle {from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
#field .traveler[data-mood="hop"] .floating {animation:cargo-hop .83s ease-in-out infinite}
#field .traveler[data-mood="hop"] .carrier-body {animation:none}
@keyframes cargo-hop {42%{transform:translateY(-5%)}78%{transform:translateY(0)}}
.wall.paused *,.wall.paused *::before,.wall.paused *::after,.wanderer[data-pointed="true"]:not(.guide) .carrier-body,.wanderer[data-pointed="true"]:not(.guide) .carrier-body * {animation-play-state:paused!important}
#page-capture {background:radial-gradient(ellipse at 75% 0,#323867 0,transparent 44%),#101b37;min-height:calc(100vh - 68px)}
#page-capture .content {max-width:980px}.capture-steps [aria-current]{color:#14213b;background:#d9ecff}
#page-capture .intro .eyebrow{color:#bddfff}.capture-layout .panel {background:#142440;border-color:#476081;box-shadow:0 12px 40px #09132d45}
.upload-zone {position:relative;isolation:isolate;overflow:hidden;gap:8px;min-height:265px;background:linear-gradient(95deg,#0d1f46f2,#101d3d77),var(--garden) center 48%/cover;border:1px solid #9cbde080}
.upload-zone h3,.upload-zone p {text-shadow:0 1px 8px #132445}.upload-zone p{color:#f0f5ff}
.upload-zone .secondary {background:#152542df;color:#fff}.upload-zone .primary,#submitMessage.primary,#reviewPhoto {background:#c2eaff;color:#10233e}
.upload-illustration {position:relative;width:92px;height:65px;margin:0 auto 5px}
.mini-pass {display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;left:11px;top:5px;width:59px;height:51px;padding:4px 6px;border:2px solid #fff;border-radius:6px;transform:rotate(-10deg);background:#cadeff;color:#203a73;box-shadow:2px 4px 0 #8b8ac5}
.mini-pass i {font-style:normal;color:#6755ae}.mini-pass b{font-size:8px}.mini-pass em{grid-column:span 2;background:#fff;border-radius:2px;font-size:13px;color:#304976}
.capture-guide{position:absolute;inset:1px 4px 3px 10px;border:2px dashed #bceaff99;border-radius:12px;transform:rotate(6deg)}
.print-sheet {background:#fcfcff;color:#172344}
.print-brand {color:#435b89;font:700 10px/1.1 system-ui,sans-serif;letter-spacing:.13em}.print-brand strong{color:#14294c}
.print-hero {isolation:isolate;overflow:hidden;background:linear-gradient(90deg,#0b173fe6,transparent),var(--garden) center 55%/cover;color:white;border-radius:16px;padding:15px 19px;margin:16px 0;min-height:0}
.print-hero h2 {font-size:35px;margin:0;line-height:1.15;color:#fff;letter-spacing:-.055em}
.print-hero h2 span{color:#c0edff;background:none}.print-hero p{position:relative;color:#eaf1ff;margin:8px 0 0;font-size:10px;max-width:60%;line-height:1.6}
.print-agent {right:5%;top:10%;width:28%;height:82%}.print-agent>svg,.print-agent>img{width:100%;height:100%;object-fit:contain}
.print-label b{display:inline-block;background:#20385c;color:#fff;padding:2px 7px;margin-right:5px;border-radius:12px;font:700 10px/1.3 system-ui,sans-serif}
/* The decorative SVG and the handwriting PNG have independent layers. */
.traveler .note{isolation:isolate}.traveler .note img{position:relative;z-index:1}
.traveler.is-arriving .note{outline:0}.traveler.is-arriving .cargo-art{filter:drop-shadow(0 0 8px #fff0aa)}
.traveler .note:is(.card,.flag,.cloud,.paper-orbit,.paper-leaf,.paper-prism),.field .traveler .note.flag,.preview-box .traveler .note.flag {
  left:19%;width:81%;height:50%;border:0;border-radius:0;background:none;box-shadow:none;padding:4% 6% 4% 7%
}
.traveler .note.cloud,.traveler .note.card,.traveler .note.flag {filter:drop-shadow(0 3px 1px #18244355) drop-shadow(0 4px 8px #0b20413b)}
.traveler .note .cargo-art {position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.traveler .note.card::before,.traveler .note.cloud::before {content:none}
.traveler .note::after,.traveler .note.flag::after,.traveler .note.cloud::after {
  left:13%;right:auto;bottom:-24%;width:6%;height:31%;border:2px solid #fff1d6;border-top:0;
  background:transparent;border-radius:0 0 100% 60%;transform:rotate(12deg)
}
.traveler .agent {left:0;right:auto;width:51%;height:65%;top:36%}
.traveler .note-number {left:53%;top:57%}
.traveler .ground-shadow {left:7%;right:auto;width:31%}
.traveler[data-facing="left"] .agent {left:auto;right:0}
.traveler[data-facing="left"] .note {left:0}
.traveler[data-facing="left"] .note::after {left:auto;right:13%;transform:rotate(-12deg)}
.traveler[data-facing="left"] .note-number {left:8%}
.traveler[data-facing="left"] .ground-shadow {left:auto;right:7%}
.traveler .mood-mark {left:1%;right:auto;top:32%}
.traveler[data-facing="left"] .mood-mark {right:0;left:auto}
@media(max-width:700px) {
  .topbar{height:95px;padding-top:10px}.nav{border:0;border-radius:0;background:none;padding:0}.brand strong{font-size:19px}
  .wall-head{padding:19px 16px 0}.wall-head h1{font-size:clamp(34px,9.8vw,50px);margin:7px 0}
  .world-title .eyebrow{font-size:8px;gap:5px;letter-spacing:.08em}.world-title .eyebrow i{width:12px}
  .wall-head .caption{font-size:11px;max-width:210px}.wall-count{min-width:66px;max-width:100px;padding:9px 10px;border-radius:12px}
  .wall-count b{font-size:25px}.wall-count span{font-size:9px}.wall-count small{display:none}
  #wall .field{inset:135px 3px 76px}.wall-bottom .help{display:none}.wall-bottom{bottom:12px}
  .wall-controls .send-button{padding:5px 12px 5px 6px}#wallQrIcon{width:32px;height:32px}.send-button small{font-size:8px}
  .print-hero h2{font-size:27px}.print-hero p{font-size:9px}.print-brand span{font-size:8px}
}
@media(max-height:540px) and (orientation:landscape) {
 .wall-head{padding:8px 20px 0}.wall-head h1{font-size:27px;margin:3px 0}.wall-head .caption{display:none}
 .wall-count{padding:5px 10px}.wall-count b{font-size:23px}.count-kicker,.wall-count small{display:none}
 #wall .field{inset:72px 8px 64px}.wall-bottom .help{display:none}.wall-bottom{bottom:6px}
 .wall-controls .send-button{padding:4px 9px}#wallQrIcon{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce) {
 .garden-drift,.star-stream,#field .wanderer {will-change:auto}
 .sky-stage::before,.wall *::before,.wall *::after,.sky-stage *, .wall *, .scout * {animation:none!important;transition:none!important}
}
@media print {
 .print-hero{margin:5mm 0 3mm;padding:5mm;height:52mm}
 .print-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .print-agent{right:5%;top:8%;width:30%;height:82%}
}
.owl-lids{opacity:0;animation:owl-lids 5.73s linear infinite;animation-delay:var(--owl-blink-delay,-.4s)}
@keyframes owl-lids{0%,70%,75%,100%{opacity:0}72%,72.7%{opacity:1}}
.wanderer:nth-child(3n){--owl-blink-delay:-2.2s}.wanderer:nth-child(3n+1){--owl-blink-delay:-3.9s}
@media print,(prefers-reduced-motion:reduce){.owl-lids{animation:none}}