/* V16: one desktop, collected details. Materials share an upper-left light. */
.desk-object{filter:drop-shadow(2px 8px 7px #193c4826);}
.object-photo .object-art{animation:none;}
.object-photo{width:78px!important;height:99px!important;z-index:7;}
.object-photo .photo-print{width:78px;padding:5px 5px 8px;rotate:8deg;background:#fffef4;box-shadow:inset 0 0 0 1px #eee8d3,1px 2px 1px #44607422;}
.object-photo .photo-print img{display:block;width:68px!important;height:70px!important;object-fit:cover;}
.object-photo .photo-print>span{font-size:7px;line-height:10px;margin-top:5px;}
.object-calendar{width:51px;height:65px;}
.object-calendar .calendar-page{width:51px;rotate:4deg;border-radius:3px;box-shadow:0 2px #d7dacb,0 3px #fffce7;}
.object-calendar .calendar-page span{font:650 7px/15px system-ui;letter-spacing:1.5px;background:#9e6155;}
.object-calendar .calendar-page b{font-size:25px;line-height:30px;}
.object-calendar .calendar-page small{font-size:6px;line-height:13px;}
.object-folder{width:52px;height:59px;}
.object-folder .floating-folder{width:52px;height:45px;animation:none;}
.object-folder .floating-folder>span{font-size:8px;}
.object-folder .folder-open{width:28px;height:28px;right:-1px;top:13px;}
.object-bin{width:30px;height:34px;}
.object-bin .desktop-bin{width:30px;height:34px;opacity:.85;}

/* A thin, tactile CD player. Only the carriage and meter move. */
.object-music{width:184px!important;height:105px;scale:1;}
.mixtape-player{position:relative;width:184px;height:105px;transform:rotate(-5deg);transform-origin:50% 80%;}
.mixtape-case{position:absolute;z-index:2;inset:22px 0 0;border:1px solid #f9fbf4;border-radius:13px;background:linear-gradient(130deg,#faf8ee,#e5e6dd 52%,#c5d0cf);box-shadow:inset 1px 1px 0 #fff,inset -1px -2px 1px #a7b8b9,0 3px 0 #8c9fa2,1px 4px 1px #31495133;}
.mixtape-case::before{content:'';position:absolute;left:6px;right:6px;top:6px;bottom:7px;border-radius:9px;border:1px solid #ced5ca;background:linear-gradient(135deg,#f6eedb,#eeeadb 60%,#d5dace);box-shadow:inset 0 1px #fffefa;}
.mixtape-album{position:absolute;left:12px;top:12px;width:48px;height:48px;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#a5cdd2 0 45%,#f0c08c 45% 54%,#536f76 55% 65%,#274e59 66%);box-shadow:0 1px 2px #24445255,inset 0 0 0 1px #ffffff60;}
.mixtape-album::before{content:'';position:absolute;width:25px;height:25px;border-radius:50%;left:5px;top:6px;background:linear-gradient(#fff4c9,#f2c995);box-shadow:0 0 12px #f6e5b05c;}
.mixtape-album i{position:absolute;z-index:1;inset:23px -10px -8px;background:linear-gradient(140deg,#466d78,#173847);border-radius:65% 35% 0 0;transform:rotate(-18deg);}
.mixtape-album b{position:absolute;bottom:4px;left:8px;width:28px;height:1px;background:#e7c998;box-shadow:0 -3px #e7c96470;}
.mixtape-screen{position:absolute;left:69px;right:13px;top:12px;height:32px;border-radius:4px;background:#263e45;box-shadow:inset 0 1px 3px #071e29,0 1px #fffdf0;color:#ecf0df;}
.mixtape-screen>span{position:absolute;top:5px;left:7px;font:550 9px/1 system-ui;letter-spacing:.1px;}
.mixtape-screen small{position:absolute;bottom:5px;right:6px;color:#a4c0b8;font:6px/1 ui-monospace,monospace;letter-spacing:.4px;}
.mixtape-levels{position:absolute;bottom:5px;left:7px;height:8px;display:flex;align-items:flex-end;gap:2px;}
.mixtape-levels i{width:2px;height:7px;border-radius:1px;background:#c3dbaa;transform-origin:50% 100%;animation:jukebox-meter 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*-173ms);}
.mixtape-track{position:absolute;top:54px;left:70px;width:53px;height:3px;border-radius:2px;background:#82989155;box-shadow:0 1px #f9fff5;overflow:hidden;}
.mixtape-track i{display:block;width:60%;height:100%;background:#5f817a;}
.mixtape-case .mixtape-transport{right:9px;bottom:5px;position:absolute;width:40px;height:31px;border-radius:8px;border:1px solid #aebdb4;background:linear-gradient(145deg,#fffdf0,#d7decf);color:#355a55;box-shadow:inset 0 1px white,0 1px #8ca399;}
.mixtape-transport .object-pause-glyph{width:8px;height:9px;border-left-width:2px;border-right-width:2px;}
.mixtape-brand{position:absolute;bottom:7px;left:13px;font:550 5px/1 ui-monospace,monospace;letter-spacing:1px;color:#6c847e;}
.mixtape-seam{position:absolute;width:54px;height:2px;right:19px;top:-2px;border-radius:50%;background:#6e898c;box-shadow:0 1px #fafef2;}
.mixtape-disc-carriage{position:absolute;z-index:1;top:29px;left:100px;width:64px;height:64px;animation:mixtape-load 14s cubic-bezier(.77,0,.175,1) infinite;}
.mixtape-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 7%,#aac1c1 8% 10%,#e2ece1 11% 18%,transparent 19%),repeating-radial-gradient(circle,transparent 0 2px,#ffffff22 2px 3px),conic-gradient(from 30deg,#eaf4e9,#b4d2dc,#dbb4d0,#fff0ba,#b0d8d1,#eaf4e9,#b8c7e5,#f0c7c0,#eaf4e9);border:1px solid #f3ffff;box-shadow:inset 0 0 0 2px #f1f8e28f,1px 3px 4px #1c45572f;animation:mixtape-turn 14s linear infinite;}
.mixtape-disc b{position:absolute;inset:26px;border-radius:50%;background:#567279;box-shadow:0 0 0 4px #e8f3db;}
@keyframes mixtape-load{0%,15%,86%,100%{transform:translateY(0)}30%,70%{transform:translateY(-29px)}}
@keyframes mixtape-turn{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(240deg)}}

/* Four small personal clips; the content remains visible if video cannot play. */
.desk-object:is(.object-imagination,.object-dance,.object-glance,.object-celebrate){width:86px;height:68px;filter:drop-shadow(1px 5px 5px #193c4830);}
.desk-object.object-dance{width:65px;height:69px;}
.desk-object.object-glance{width:88px;height:60px;}
.desk-object.object-celebrate{width:74px;height:76px;}
.desk-object:is(.object-imagination,.object-dance,.object-glance,.object-celebrate) .object-art{width:100%;height:100%;}
.comedy-clip{position:relative;width:100%;height:100%;padding:3px;border:1px solid #f9faf1;border-radius:5px;background:linear-gradient(145deg,#fffef7,#d4dbd8);transform:rotate(-3deg);box-shadow:inset 0 0 0 1px #d0d8d5,0 1px 0 #a4b7b7;overflow:hidden;}
.object-dance .comedy-clip{transform:rotate(6deg);border-radius:12px;}
.object-glance .comedy-clip{transform:rotate(3deg);}
.object-celebrate .comedy-clip{transform:rotate(-5deg);border-radius:6px 6px 14px 6px;}
.comedy-clip>img,.comedy-clip>video{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;border-radius:2px;}
.comedy-clip>video[hidden]{display:none;}
.comedy-clip .clip-motion{position:absolute;right:3px;bottom:3px;z-index:2;width:26px;height:26px;border:0;border-radius:6px;background:#122b38b5;box-shadow:inset 0 1px #ffffff21;color:#eff8f2;opacity:0;transition:opacity 150ms var(--shell-ease);}
.clip-motion .object-pause-glyph{width:7px;height:8px;border-left-width:2px;border-right-width:2px;}
.comedy-clip:focus-within .clip-motion,.desk-object[data-object-paused="true"] .clip-motion{opacity:1;}
@media(hover:hover) and (pointer:fine){.comedy-clip:hover .clip-motion{opacity:1;}}

/* The two visitors travel along separate bottom paths, leaving the dock clear. */
.desktop-walkway{height:58px;z-index:11;}
.desktop-walkway .object-walker{top:auto;left:20px;bottom:0;width:54px;height:55px;animation:visitor-left-route 40s linear infinite;}
.desktop-walkway .object-cat{position:absolute;top:auto;left:auto;right:20px;bottom:1px;width:64px;height:43px;pointer-events:none;animation:cat-right-route 54s linear infinite;animation-delay:-17s;}
.desktop-walkway .object-art{pointer-events:none;}
.visitor-head{background:radial-gradient(ellipse at 25% 8%,#fffef4 0,transparent 55%),linear-gradient(115deg,#f7f2e5,#dae2dc 58%,#a1bcbf);}
.visitor-visor{background:linear-gradient(155deg,#395c66,#16313b 68%,#244852);border-color:#759899;}
.visitor-cheek{background:#d69272;box-shadow:3px 0 #ecc49c;}
.visitor-rig{animation:visitor-bob 850ms ease-in-out infinite;}
.visitor-boot,.visitor-arm{animation-duration:850ms;}
.visitor-boot.right,.visitor-arm.right{animation-delay:-425ms;}
.ink-cat{position:relative;width:64px;height:43px;}
.cat-rig{position:absolute;inset:0;animation:cat-bob 900ms ease-in-out infinite;}
.cat-shadow{position:absolute;bottom:0;left:8px;width:47px;height:4px;border-radius:50%;background:radial-gradient(ellipse,#14344450,transparent 70%);}
.cat-body{position:absolute;left:15px;top:16px;width:32px;height:19px;border-radius:50% 45% 32% 35%;background:linear-gradient(145deg,#3a4650,#1a2b36);box-shadow:inset 0 1px #71808066;}
.cat-head{position:absolute;z-index:2;left:4px;top:8px;width:25px;height:23px;border-radius:45% 45% 43% 40%;background:linear-gradient(135deg,#3f505a,#1d303a);box-shadow:inset 0 1px #71838c80;}
.cat-ear{position:absolute;top:-6px;width:11px;height:13px;background:#293c48;clip-path:polygon(10% 0,100% 100%,0 100%);}
.cat-ear.left{left:0;transform:rotate(-9deg);}
.cat-ear.right{right:0;transform:scaleX(-1) rotate(-8deg);}
.cat-ear::after{content:'';position:absolute;inset:4px 3px 1px;background:#ba978c;clip-path:polygon(0 0,100% 100%,0 100%);}
.cat-eye{position:absolute;left:5px;top:8px;width:5px;height:5px;border-radius:50%;background:#f5e8b9;animation:visitor-blink 9s linear infinite;animation-delay:-2s;}
.cat-eye.right{left:16px;}
.cat-eye::after{content:'';position:absolute;left:2px;top:1px;width:1px;height:3px;background:#163039;border-radius:50%;}
.cat-nose{position:absolute;left:11px;top:15px;width:3px;height:2px;border-radius:50%;background:#d5aca2;}
.cat-whiskers{position:absolute;left:-4px;top:15px;width:8px;height:1px;background:#dce8dc;box-shadow:24px 0 #dce8dc,0 3px #dce8dc,24px 3px #dce8dc;transform:rotate(3deg);}
.cat-tail{position:absolute;left:41px;top:8px;width:18px;height:23px;border-right:5px solid #253945;border-top:5px solid #253945;border-radius:0 80% 65% 0;transform-origin:0 100%;animation:cat-tail 2.4s ease-in-out infinite;}
.cat-foot{position:absolute;left:17px;top:31px;width:9px;height:8px;border-radius:2px 2px 4px 4px;background:linear-gradient(#293d48,#172d37);animation:visitor-step 900ms ease-in-out infinite;}
.cat-foot.back{left:38px;animation-delay:-450ms;}
@keyframes visitor-left-route{0%,5%{transform:translateX(0)}45%,54%{transform:translateX(max(0px,calc((100vw - 320px)/2 - 90px)))}94%,100%{transform:translateX(0)}}
@keyframes cat-right-route{0%,8%{transform:translateX(0)}44%,54%{transform:translateX(min(0px,calc((320px - 100vw)/2 + 96px)))}94%,100%{transform:translateX(0)}}
@keyframes cat-bob{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1px)}}
@keyframes cat-tail{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(13deg)}}

/* A single playback contract governs CSS and the local videos. */
.desk-object[data-object-paused="true"] .object-art *,
.desk-object.object-moving .object-art *,
html[data-motion="paused"] .desk-object *,
html[data-motion-preference="paused"] .desk-object *,
html[data-visible="false"] .desk-object *,
html[data-hero-visible="false"] .desk-object *,
html[data-motion="paused"] .desktop-walkway .desk-object,
html[data-motion-preference="paused"] .desktop-walkway .desk-object,
html[data-visible="false"] .desktop-walkway .desk-object,
html[data-hero-visible="false"] .desktop-walkway .desk-object{animation-play-state:paused!important;}
@media(max-width:899px){
 .playground>.object-space{gap:24px 20px;max-width:500px;align-items:center;}
 .object-music{order:0;margin:4px 25px 6px;}
 .object-photo{order:2;margin-left:8px;}
 .object-imagination{order:1;}
 .object-dance{order:3;}
 .object-calendar{order:4;}
 .object-celebrate{order:5;}
 .object-folder{order:6;}
 .object-glance{order:7;}
 .object-bin{order:8;}
 .comedy-clip .clip-motion{width:44px;height:44px;opacity:1;background:linear-gradient(135deg,transparent 35%,#15364870);}
 .mixtape-case .mixtape-transport{width:44px;height:44px;bottom:0;right:5px;}
 .object-folder .folder-open{width:44px;height:44px;right:-6px;top:5px;background:transparent;border:0;box-shadow:none;}
 .object-folder .folder-open svg{padding:3px;border-radius:4px;background:#77bad6;color:#fff;}
 .desktop-walkway .object-walker{left:12px;}
 .desktop-walkway .object-cat{right:12px;}
}
@media(prefers-reduced-motion:reduce){
 .desk-object .object-art *,.desktop-walkway .desk-object{animation:none!important;}
 .mixtape-disc-carriage{transform:translateY(-19px);}
 .comedy-clip .clip-motion{transition:none;}
}
/* The drawing faces left. Turn while parked, before the return journey. */
.cat-facing{position:absolute;inset:0;animation:cat-face-route 54s linear infinite;animation-delay:-17s;transform-origin:50% 70%}
@keyframes cat-face-route{0%,48.5%{transform:scaleX(1)}49%,97%{transform:scaleX(-1)}97.5%,100%{transform:scaleX(1)}}
.cat-foot{transform-origin:50% 0;animation-name:cat-stride}
@keyframes cat-stride{0%,100%{transform:translateX(-2px) rotate(12deg)}45%{transform:translateX(2px) rotate(-12deg)}65%{transform:translate(1px,-2px) rotate(-5deg)}}
@media(prefers-reduced-motion:reduce){.cat-facing{animation:none!important}}

/* Individual meter offsets without inline style attributes. */
.mixtape-levels i:nth-child(1){--i:0}
.mixtape-levels i:nth-child(2){--i:1}
.mixtape-levels i:nth-child(3){--i:2}
.mixtape-levels i:nth-child(4){--i:3}
.mixtape-levels i:nth-child(5){--i:4}
.mixtape-levels i:nth-child(6){--i:5}
.mixtape-levels i:nth-child(7){--i:6}
.mixtape-levels i:nth-child(8){--i:7}
.mixtape-levels i:nth-child(9){--i:8}