/* Small physical objects, each with its own material and mechanical motion. */
.object-music{width:155px;height:88px;scale:1;}
.jukebox-player{position:relative;width:155px;height:86px;transform:rotate(-7deg);transform-origin:50% 80%;}
.jukebox-cabinet{position:absolute;z-index:2;inset:10px 4px 5px 0;border:1px solid #f3b17f;border-radius:12px 15px 10px 9px;background:linear-gradient(150deg,#f3ac7b 0,#cb7656 25%,#a74d3d 72%,#773c34);box-shadow:inset 1px 1px 1px #ffe1b7,inset -3px -4px 2px #683a3470,3px 5px 0 #653e35,5px 8px 8px #203b4530;}
.jukebox-cabinet::before{content:'';position:absolute;inset:6px 6px 7px;border:1px solid #ecc599;border-radius:7px 9px 6px 5px;background:linear-gradient(115deg,#fff0c6,#e2c897 78%,#c6a474);box-shadow:inset 0 1px 2px #fff7df,0 1px 0 #8d584c;}
.jukebox-seam{position:absolute;right:10px;top:-2px;width:50px;height:3px;border-radius:50%;background:#382a2a;box-shadow:0 1px #f5c9a0;}
.jukebox-display{position:absolute;left:12px;top:12px;width:98px;height:24px;border-radius:3px;background:linear-gradient(165deg,#213c40,#15282e);border:1px solid #765c45;box-shadow:inset 0 1px 3px #071319;overflow:hidden;}
.jukebox-display::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,transparent 27%,#e7f7ed17 28%,#e7f7ed03 46%,transparent 47%);pointer-events:none;}
.jukebox-display>span{position:absolute;left:6px;top:3px;font:500 8px/1.2 system-ui;letter-spacing:.1px;color:#e6e6bf;}
.jukebox-display>b{position:absolute;right:5px;top:7px;font:500 8px/1 ui-monospace,monospace;color:#91b7b0;}
.jukebox-levels{position:absolute;left:6px;bottom:3px;height:6px;display:flex;align-items:flex-end;gap:2px;}
.jukebox-levels i{width:3px;height:6px;background:#b6d7a7;border-radius:1px;transform-origin:50% 100%;animation:jukebox-meter 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*-173ms);}
.jukebox-speaker{position:absolute;left:12px;bottom:13px;width:65px;height:17px;border:1px solid #a68b64;border-radius:3px;background:repeating-linear-gradient(0deg,transparent 0 2px,#816d4c88 2px 3px),repeating-linear-gradient(90deg,#ac9167 0 1px,#ddc8a1 1px 3px);box-shadow:inset 0 1px 2px #73594166;}
.jukebox-knob{position:absolute;right:13px;top:14px;width:19px;height:19px;border-radius:50%;background:conic-gradient(from 45deg,#fff5d6,#97876c,#faf0d6,#b4a58b,#fff5d6);border:1px solid #827259;box-shadow:0 2px 2px #62483455,inset 0 0 0 2px #eddfbf;}
.jukebox-knob::after{content:'';position:absolute;left:8px;top:3px;width:2px;height:4px;border-radius:1px;background:#6e6655;transform:rotate(-30deg);transform-origin:50% 6px;}
.jukebox-transport{position:absolute;right:13px;bottom:17px;display:flex;gap:4px;}
.jukebox-transport i{width:11px;height:8px;border:1px solid #b39c75;border-radius:2px;background:linear-gradient(#fff7dc,#d2c4a6);box-shadow:0 2px #a48b65;}
.jukebox-transport i:nth-child(2){background:linear-gradient(#d67954,#ad4d3d);border-color:#9f6149;}
.jukebox-wordmark{position:absolute;right:15px;bottom:6px;font:650 4px/1 system-ui;letter-spacing:1.9px;color:#805f43;}
.jukebox-foot{position:absolute;bottom:0;left:15px;width:21px;height:7px;border-radius:0 0 4px 4px;background:linear-gradient(#263637,#485859);box-shadow:0 1px 1px #1c373438;}
.jukebox-foot.right{left:auto;right:16px;}
.jukebox-disc-carriage{position:absolute;left:91px;top:17px;width:58px;height:58px;z-index:1;animation:jukebox-eject 14s cubic-bezier(.77,0,.175,1) infinite;}
.jukebox-disc{display:block;position:relative;width:58px;height:58px;border-radius:50%;border:1px solid #e2eff1;background:radial-gradient(circle,transparent 0 8%,#85959b 9% 11%,#d2e0dc 12% 20%,transparent 21%),repeating-radial-gradient(circle,transparent 0 2px,#ffffff1f 2px 3px),conic-gradient(from 25deg,#dce9e7,#a6c4ce,#e8b4ba,#fae9b4,#adcfc8,#e8f5ed,#c7cae6,#f2d8d3,#dce9e7);box-shadow:0 2px 5px #122b3240,inset 0 0 0 2px #f1f5eccc;animation:jukebox-disc-turn 14s linear infinite;}
.jukebox-disc>b{position:absolute;inset:23px;border-radius:50%;border:2px solid #c0d4d5;background:#49606a;box-shadow:0 0 0 4px #eaf0da99;}
@keyframes jukebox-eject{0%,18%,86%,100%{transform:translate(0,0)}30%,68%{transform:translate(7px,-32px)}78%{transform:translate(7px,-32px)}}
@keyframes jukebox-disc-turn{0%,30%{transform:rotate(0)}68%,100%{transform:rotate(300deg)}}
@keyframes jukebox-meter{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* Ceramic shell, smoked visor, little rubber boots. The route belongs to the walkway. */
.desktop-walkway{height:59px;}
.desktop-walkway .object-walker{width:54px;height:55px;}
.desktop-walkway .little-walker{position:relative;width:54px;height:55px;animation:none;}
.visitor-ground{position:absolute;left:7px;bottom:0;width:40px;height:6px;border-radius:50%;background:radial-gradient(ellipse,#193c5060,transparent 70%);animation:visitor-ground 700ms ease-in-out infinite;}
.visitor-rig{position:absolute;inset:0;animation:visitor-bob 700ms ease-in-out infinite;}
.visitor-head{position:absolute;z-index:3;left:7px;top:9px;width:39px;height:28px;border-radius:13px 14px 11px 11px;border:1px solid #ebede0;background:radial-gradient(ellipse at 25% 8%,#fffef4 0,transparent 55%),linear-gradient(115deg,#f2eee0,#c9d8d5 58%,#8caaaf);box-shadow:inset 1px 1px 0 #fffdf4,inset -3px -2px 3px #607f8733,1px 2px 2px #173c4538;transform:rotate(-3deg);}
.visitor-head::after{content:'';position:absolute;right:3px;top:4px;width:3px;height:17px;border-radius:50%;border-right:1px solid #607c7b44;}
.visitor-visor{position:absolute;left:5px;top:7px;width:28px;height:15px;overflow:hidden;border-radius:6px 7px 6px 6px;background:linear-gradient(155deg,#2f4651,#122c39 68%,#1c3b48);border:1px solid #667f86;box-shadow:inset 0 1px 2px #051926,0 1px 0 #ffffffab;}
.visitor-visor::before{content:'';position:absolute;inset:0;background:linear-gradient(130deg,#c3eced2e,transparent 36%,transparent 67%,#e6ffff15);}
.visitor-gaze{position:absolute;left:6px;top:4px;display:flex;gap:5px;animation:visitor-look 14s ease-in-out infinite;}
.visitor-gaze i{display:block;width:4px;height:5px;border-radius:3px;background:#cfede1;box-shadow:0 0 3px #96e6d780;transform-origin:50% 55%;animation:visitor-blink 7s linear infinite;}
.visitor-visor>b{position:absolute;width:5px;height:2px;left:11px;bottom:2px;border-bottom:1px solid #90bcae;border-radius:50%;}
.visitor-cheek{position:absolute;bottom:3px;left:6px;width:3px;height:2px;border-radius:1px;background:#c37d5b;box-shadow:3px 0 #d8ac84;}
.visitor-antenna{position:absolute;left:29px;top:3px;width:2px;height:9px;border-radius:1px;background:linear-gradient(90deg,#657f85,#ceddd9);transform:rotate(12deg);transform-origin:50% 100%;}
.visitor-antenna::before{content:'';position:absolute;left:-2px;top:-1px;width:5px;height:5px;border-radius:50%;border:1px solid #f2b57f;background:radial-gradient(circle at 35% 25%,#ffe5a8,#d88749 65%,#a55c3c);box-shadow:0 1px 1px #624d3422;}
.visitor-torso{position:absolute;z-index:2;left:15px;top:33px;width:24px;height:12px;border-radius:4px 4px 8px 8px;border:1px solid #bacdc7;background:linear-gradient(105deg,#e7e7d9,#adc6c4);box-shadow:inset 0 -2px #6e929539;}
.visitor-torso>b{position:absolute;left:9px;top:3px;width:6px;height:4px;border-radius:2px;background:#d5bc85;border:1px solid #a18b5e;box-shadow:inset 1px 1px #eee2b5;}
.visitor-arm{position:absolute;z-index:1;top:29px;left:5px;width:7px;height:14px;border-radius:5px;background:linear-gradient(100deg,#f3f0dd,#9ab9b9);border:1px solid #b6cac4;box-shadow:0 1px 1px #294b5130;transform-origin:50% 2px;animation:visitor-arm-swing 700ms ease-in-out infinite;}
.visitor-arm::after{content:'';position:absolute;bottom:1px;left:1px;right:1px;height:3px;border-radius:2px;background:#658a90;}
.visitor-arm.right{left:42px;animation-delay:-350ms;}
.visitor-boot{position:absolute;top:43px;left:14px;width:11px;height:8px;border-radius:4px 4px 5px 5px;border:1px solid #416874;background:linear-gradient(145deg,#82a7aa,#456978);box-shadow:inset 1px 1px #b9d0cb,0 2px #254756;transform-origin:50% 70%;animation:visitor-step 700ms ease-in-out infinite;}
.visitor-boot.right{left:31px;animation-delay:-350ms;}
@keyframes visitor-bob{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1.3px)}}
@keyframes visitor-step{0%,48%,100%{transform:translate(0,0) rotate(0)}24%{transform:translate(2px,-3px) rotate(-12deg)}74%{transform:translate(-1px,0) rotate(5deg)}}
@keyframes visitor-arm-swing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(16deg)}}
@keyframes visitor-ground{0%,50%,100%{transform:scaleX(1);opacity:.9}25%,75%{transform:scaleX(.88);opacity:.7}}
@keyframes visitor-blink{0%,43%,46%,100%{transform:scaleY(1)}44%,45%{transform:scaleY(.15)}}
@keyframes visitor-look{0%,20%,100%{transform:translateX(1px)}36%,53%{transform:translateX(-1px)}68%,84%{transform:translateX(0)}}

html[data-motion="paused"] .object-music *,html[data-motion="paused"] .object-walker *,html[data-motion-preference="paused"] .object-music *,html[data-motion-preference="paused"] .object-walker *,html[data-visible="false"] .object-music *,html[data-visible="false"] .object-walker *,html[data-hero-visible="false"] .object-music *,html[data-hero-visible="false"] .object-walker *{animation-play-state:paused!important;}
.object-music.object-moving *, .object-music:focus-visible *{animation-play-state:paused!important;}
@media(hover:hover) and (pointer:fine){.object-music:hover *{animation-play-state:paused!important;}}
@media(prefers-reduced-motion:reduce){.object-music *,.object-walker *{animation:none!important;}.jukebox-disc-carriage{transform:translate(5px,-20px);}}
/* The visitor crosses in front of the desk without intercepting its controls. */
.desktop-walkway{z-index:11;}