/* Thumbnail overlays preserve accessible copy and controls. */
.rex-thumbnail-card[data-project-id="virtual-pumpkin-carving"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
[data-project-id="virtual-pumpkin-carving"] img[data-card-image]{object-fit:contain!important;background:#a8c4a6}
.rex-thumbnail-scene[data-kind="video"] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media(max-width:700px){.holiday-card[data-project-id="virtual-pumpkin-carving"] img[data-card-image]{object-position:35% 50%}}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="virtual-pumpkin-carving"] img[data-card-image]{visibility:visible!important}}
/* One in a Billion: a draw settles while numbered chips orbit the result. */
.rex-billion-draw{animation:rex-billion-a 5.4s infinite;opacity:0}
.rex-billion-draw-b{animation-name:rex-billion-b}.rex-billion-draw-c{animation-name:rex-billion-c}
.rex-billion-chip{animation:rex-billion-chip 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rex-billion-chip-right{animation-delay:-1.8s}.rex-billion-chip-top{animation-delay:-3.6s}
.rex-billion-win{animation:rex-billion-win 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rex-billion-dots{animation:rex-billion-win 5.4s ease-in-out infinite}
@keyframes rex-billion-a{0%,17%{opacity:1}18%,35%{opacity:0}36%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes rex-billion-b{0%,17%{opacity:0}18%,35%{opacity:1}36%,48%{opacity:0}49%,61%{opacity:1}62%,100%{opacity:0}}
@keyframes rex-billion-c{0%,61%{opacity:0}62%,100%{opacity:1}}
@keyframes rex-billion-chip{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(8px,-14px) rotate(5deg)}62%,82%{transform:translate(-5px,7px) rotate(-3deg)}}
@keyframes rex-billion-win{0%,55%,100%{opacity:.4}64%,86%{opacity:1}}
.rex-thumbnail-card[data-project-id="slime-mixer"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
.rex-thumbnail-scene[data-kind="slime"]{background:radial-gradient(ellipse at 50% 45%,#faf6ff,#ded2f2)}
.rex-thumbnail-goo{position:absolute;left:var(--goo-left);top:var(--goo-top);width:var(--goo-width);height:var(--goo-height);transform-origin:50% 75%;animation:rex-slime-knead 5s ease-in-out infinite}
.rex-thumbnail-goo img{display:block!important;position:static!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
@keyframes rex-slime-knead{0%,100%{transform:scale(1,1) rotate(0)}20%{transform:scale(1.065,.925) rotate(-1deg)}42%{transform:scale(.955,1.045) rotate(1.5deg)}61%{transform:scale(1.035,.965) rotate(-.7deg)}77%{transform:scale(.985,1.015)}}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="slime-mixer"] img[data-card-image]{visibility:visible!important}}

.rex-thumbnail-card[data-project-id="robot-rescue"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="robot-rescue"] img[data-card-image]{visibility:visible!important}}
.rex-robot-walk{animation:rex-robot-walk 7s ease-in-out infinite}
.rex-robot-cell{animation:rex-robot-cell 7s ease-in-out infinite}
.rex-robot-rescue{animation:rex-robot-rescue 7s ease-in-out infinite}
@keyframes rex-robot-walk{0%,10%,100%{transform:translate(0,0);opacity:1}28%,35%{transform:translate(75px,37.5px);opacity:1}53%,60%{transform:translate(150px,75px);opacity:1}76%,90%{transform:translate(225px,112.5px);opacity:1}98%{transform:translate(225px,112.5px);opacity:0}}
@keyframes rex-robot-cell{0%,40%,100%{opacity:1}53%,98%{opacity:0}}
@keyframes rex-robot-rescue{0%,65%,100%{opacity:0}76%,90%{opacity:.5}}
/* Holiday Puzzle Boards: a wooden piece lifts, aligns and settles. */
.rex-thumbnail-piece{position:absolute;left:var(--piece-left);top:var(--piece-top);width:var(--piece-width);height:var(--piece-height);transform-origin:center;animation:rex-puzzle-place 6s ease-in-out infinite}
.rex-thumbnail-piece img{display:block!important;position:static!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
@keyframes rex-puzzle-place{0%,12%,80%,100%{transform:translate(0,0) rotate(0) scale(1)}32%{transform:translate(14%,var(--piece-lift,-22%)) rotate(12deg) scale(1.08)}54%{transform:translate(-5%,calc(var(--piece-lift,-22%) * .55)) rotate(-5deg) scale(1.04)}66%{transform:translate(0,1%) rotate(0) scale(.97)}72%{transform:translate(0,0) rotate(0) scale(1)}}
/* Haunted House: articulated bat, candlelight and slow ground fog. */
.rex-thumbnail-bat{position:absolute;left:16%;top:16%;width:27%;height:18%;transform-origin:center;animation:rex-haunt-flight 6s ease-in-out infinite}
.rex-thumbnail-bat img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
.rex-bat-body{clip-path:inset(0 38% 0 38%)}
.rex-bat-wing-left{clip-path:inset(0 56% 0 0);transform-origin:44% 50%;animation:rex-haunt-left .8s ease-in-out infinite}
.rex-bat-wing-right{clip-path:inset(0 0 0 56%);transform-origin:56% 50%;animation:rex-haunt-right .8s ease-in-out infinite}
.rex-thumbnail-haunt-lights{position:absolute;left:28%;top:25%;width:48%;height:52%;background:radial-gradient(ellipse at 50% 35%,#fff0c858,transparent 34%),conic-gradient(from -17deg at 50% 100%,transparent 0deg,#e9e4c522 4deg,#fff0cb36 17deg,#e9e4c522 30deg,transparent 34deg);transform-origin:50% 100%;mix-blend-mode:screen;animation:rex-haunt-search 6s ease-in-out infinite}
@keyframes rex-haunt-search{0%,100%{transform:rotate(-16deg);opacity:.2}30%{transform:rotate(13deg);opacity:.7}55%{transform:rotate(3deg);opacity:.5}70%{transform:rotate(-4deg);opacity:.05}85%{transform:rotate(-12deg);opacity:.5}}
.rex-thumbnail-haunt-fog{position:absolute;left:21%;top:63%;width:48%;height:12%;background:radial-gradient(ellipse,#b4c6d342,transparent 68%);animation:rex-haunt-fog 6s ease-in-out infinite}
.rex-thumbnail-haunt-fog.second{left:48%;top:66%;width:30%;animation-delay:-3s}
@keyframes rex-haunt-flight{0%,100%{transform:translate(0,0) rotate(-3deg)}30%{transform:translate(30%,-30%) rotate(6deg)}65%{transform:translate(80%,18%) rotate(-4deg)}}
@keyframes rex-haunt-left{0%,100%{transform:rotateY(0) rotate(-3deg)}50%{transform:rotateY(58deg) rotate(9deg)}}
@keyframes rex-haunt-right{0%,100%{transform:rotateY(0) rotate(3deg)}50%{transform:rotateY(-58deg) rotate(-9deg)}}
@keyframes rex-haunt-candles{0%,100%{opacity:.35}35%{opacity:.7}62%{opacity:.42}82%{opacity:.6}}
@keyframes rex-haunt-fog{0%,100%{opacity:.15;transform:translateX(-8%) scale(.9)}50%{opacity:.55;transform:translateX(12%) scale(1.05)}}

.rex-thumbnail-card[data-project-id="reaction-time-games"] img[data-card-image]{object-fit:contain!important}
.rex-thumbnail-card[data-project-id="reaction-time-games"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
.rex-thumbnail-card[data-project-id="reaction-time-games"] .rex-thumbnail-scene{background:#080b14}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="reaction-time-games"] img[data-card-image]{visibility:visible!important}}
.rex-thumbnail-card{position:relative}
[data-project-id="halloween-yard-decorator"] img[data-card-image]{object-fit:contain!important;object-position:center;background:#0d0b16}
[data-project-id="virtual-haunted-house"] img[data-card-image],[data-project-id="holiday-board-puzzles"] img[data-card-image]{object-fit:cover!important;object-position:50% 10%}
.rex-thumbnail-scene{position:absolute;overflow:hidden;pointer-events:none;isolation:isolate;z-index:1}
.rex-thumbnail-card .cosmic-card-copy{z-index:2}
.rex-thumbnail-ghost{position:absolute;left:9%;top:11%;width:24%;height:34%;transform-origin:50% 60%;animation:rex-yard-ghost 5.6s ease-in-out infinite}
.rex-thumbnail-ghost img{display:block!important;position:static!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
.rex-thumbnail-lights{position:absolute;left:24%;top:35%;width:52%;height:24%;background:radial-gradient(ellipse at 25% 40%,#ffbb5860,transparent 23%),radial-gradient(ellipse at 75% 40%,#ff9c6650,transparent 23%);mix-blend-mode:screen;animation:rex-yard-lights 4.2s ease-in-out infinite}
.rex-thumbnail-mist{position:absolute;left:24%;top:57%;width:16%;height:12%;background:radial-gradient(ellipse,#b5ffb33b,transparent 68%);transform-origin:center;animation:rex-yard-mist 4s ease-in-out infinite}
.rex-thumbnail-mist.second{left:23%;top:60%;animation-delay:-2s}

@keyframes rex-yard-ghost{0%,100%{transform:translate(0,0) rotate(-4deg)}35%{transform:translate(10%,-13%) rotate(3deg)}68%{transform:translate(3%,6%) rotate(-2deg)}}
@keyframes rex-yard-lights{0%,100%{opacity:.3}45%{opacity:.8}70%{opacity:.45}}
@keyframes rex-yard-mist{0%,100%{opacity:0;transform:translateY(12%) scale(.75)}25%{opacity:.65}70%{opacity:.3}95%{opacity:0;transform:translate(14%,-40%) scale(1.15)}}


/* Perfect Swirl: the cone descends as a photographic cream spiral fills it. */
[data-project-id="perfect-swirl"] img[data-card-image],[data-project-id="rowans-flag-quest"] img[data-card-image]{object-fit:cover!important;object-position:50% 0%}
.rex-thumbnail-cream{position:absolute;z-index:3;left:var(--cream-left);top:var(--cream-top);width:var(--cream-width);height:var(--cream-height);transform-origin:54% 0;animation:rex-swirl-build 6.4s ease-in-out infinite}
.rex-thumbnail-swirl-cone{position:absolute;z-index:2;left:calc(var(--cream-left) + var(--cream-width) * .065);top:calc(var(--cream-top) + var(--cream-height) - var(--cone-height) * .1);width:calc(var(--cream-width) * .95);height:var(--cone-height);animation:rex-swirl-cone 6.4s ease-in-out infinite}
.rex-thumbnail-swirl-background{position:absolute;z-index:0;left:var(--background-left);top:var(--background-top);width:var(--background-width);height:var(--background-height)}
.rex-thumbnail-cream img,.rex-thumbnail-swirl-cone img,.rex-thumbnail-swirl-background img{display:block!important;position:static!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
/* Square lead posters need the landscape background to cover the full media box. */
.rex-thumbnail-swirl-background img{object-fit:cover!important}
@keyframes rex-swirl-build{0%,8%,94%,100%{opacity:1;transform:scaleY(.08)}65%,82%{opacity:1;transform:scaleY(1)}90%{opacity:0;transform:scaleY(1)}91%,93%{opacity:0;transform:scaleY(.08)}}
@keyframes rex-swirl-cone{0%,8%,94%,100%{opacity:1;transform:translateY(calc(var(--cream-height) * -.92))}65%,82%{opacity:1;transform:translateY(0)}90%{opacity:0;transform:translateY(0)}91%,93%{opacity:0;transform:translateY(calc(var(--cream-height) * -.92))}}
/* Rowan's Flag Quest: collectible flags rise and flutter above the atlas. */
.rex-thumbnail-flags{position:absolute;left:62%;top:30%;width:30%;height:27%;transform-origin:center;animation:rex-quest-drift 6.4s ease-in-out infinite}
.rex-quest-flag{position:absolute;width:33%;height:69%;transform-origin:12% 90%;animation:rex-quest-reveal 6.4s ease-in-out infinite}
.rex-quest-fr{left:0;top:21%}.rex-quest-jp{left:33%;top:0;animation-delay:-.75s}.rex-quest-fi{left:66%;top:30%;animation-delay:-1.5s}
.rex-quest-flag::after{content:"";position:absolute;left:1px;top:0;width:2px;height:100%;background:linear-gradient(#dec78a,#88602d);border-radius:2px}
.rex-quest-flag img{display:block!important;position:absolute!important;inset:auto!important;left:2px!important;top:0!important;width:100%!important;height:57%!important;object-fit:fill!important;border-radius:1px!important;box-shadow:0 1px 2px #33231555;transform-origin:left center;animation:rex-quest-flutter 1.6s ease-in-out infinite}
@keyframes rex-quest-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes rex-quest-reveal{0%,9%,94%,100%{opacity:0;transform:translateY(24%) rotate(-8deg) scale(.78)}22%,68%{opacity:1;transform:translateY(0) rotate(0) scale(1)}83%{opacity:1;transform:translateY(-5%) rotate(3deg) scale(1)}}
@keyframes rex-quest-flutter{0%,100%{transform:rotateY(-10deg) skewY(1deg)}50%{transform:rotateY(18deg) skewY(-2deg)}}
[data-project-id="random-museum"] img[data-card-image]{object-fit:cover!important;object-position:50% 10%}
.rex-thumbnail-painting{position:absolute;box-sizing:border-box;left:var(--painting-left);top:var(--painting-top);width:var(--painting-width);height:var(--painting-height);padding:var(--frame-edge);border:var(--frame-edge) ridge #bb9250;background:#291e11;box-shadow:0 8px 18px #0008,inset 0 0 0 1px #e6c57b;transform-origin:center;animation:rex-museum-float 8s ease-in-out infinite}
.rex-thumbnail-painting img{display:block!important;position:absolute!important;inset:var(--frame-edge)!important;width:calc(100% - var(--frame-edge)*2)!important;height:calc(100% - var(--frame-edge)*2)!important;object-fit:contain!important;border-radius:0!important}
.rex-painting-second{animation:rex-museum-art 8s ease-in-out infinite}
.rex-thumbnail-museum-light{position:absolute;inset:4% 14% 25%;background:radial-gradient(ellipse at 50% 35%,#ffe2a344,transparent 65%);mix-blend-mode:screen;animation:rex-museum-light 8s ease-in-out infinite}
.rex-thumbnail-museum-floor{position:absolute;left:30%;top:61%;width:40%;height:10%;background:radial-gradient(ellipse,#e4bc6638,transparent 70%);animation:rex-museum-light 8s ease-in-out infinite}
@keyframes rex-museum-float{0%,100%{transform:translateY(3%) rotate(-2deg) scale(.9)}25%{transform:translateY(-3%) rotate(1.5deg) scale(1.02)}55%{transform:translateY(-1%) rotate(-1deg) scale(1)}78%{transform:translateY(-3%) rotate(1deg) scale(1.02)}}
@keyframes rex-museum-art{0%,35%,100%{opacity:0}48%,84%{opacity:1}96%{opacity:0}}
@keyframes rex-museum-light{0%,100%{opacity:.25}35%,75%{opacity:.8}55%{opacity:.5}}


.rex-thumbnail-vector{position:absolute;inset:0;pointer-events:none}
.rex-thumbnail-vector[data-fit="poster-front"]{inset:auto;left:var(--vector-left);top:var(--vector-top);width:var(--vector-width);height:var(--vector-height)}
.rex-thumbnail-card[data-project-id="squisharium"] .rex-thumbnail-scene{background:#dec9f1}
/* Squisharium: a real slow-rise toy compresses into its mat and recovers. */
.cosmic-home .home-feature[data-project-id="squisharium"] .cosmic-game-link{display:flex;flex-direction:column}
.cosmic-home .home-feature[data-project-id="squisharium"] .card-picture{position:relative;flex:1;min-height:0}
.cosmic-home .home-feature[data-project-id="squisharium"] .cosmic-card-copy{position:relative;flex:none;padding:7px 9px!important;background:#101526}
.rex-thumbnail-scene .rex-sq-main{transform-box:view-box;transform-origin:480px 601px;animation:rex-sq-press 5.6s ease-in-out infinite}
.rex-sq-shadow{transform-box:fill-box;transform-origin:center;animation:rex-sq-contact 5.6s ease-in-out infinite}
@keyframes rex-sq-press{0%,18%,100%{transform:scale(1,1)}32%,38%{transform:scale(1.12,.72)}54%{transform:scale(.97,1.05)}66%{transform:scale(1.015,.98)}80%{transform:scale(1,1)}}
@keyframes rex-sq-contact{0%,18%,100%{transform:scaleX(1);opacity:1}32%,38%{transform:scaleX(1.12);opacity:.85}54%{transform:scaleX(.97);opacity:1}80%{transform:scaleX(1)}}
.rex-thumbnail-card[data-project-id="squisharium"] .rex-thumbnail-scene[data-running="false"] *{animation-play-state:paused}
.rex-thumbnail-card[data-project-id="squisharium"] .rex-thumbnail-scene[data-running="true"] *{animation-play-state:running}
.rex-thumbnail-card[data-project-id="balloon-popper"] .rex-thumbnail-scene{background:linear-gradient(135deg,#faf3e8,#dcebea)}
.rex-thumbnail-vector svg{display:block;width:100%;height:100%;overflow:visible}
.rex-cue{transform-box:fill-box;transform-origin:center;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.rex-cue-sway,.rex-cue-ride{animation-name:rex-cue-sway}.rex-cue-steam,.rex-cue-note,.rex-cue-bubble{animation-name:rex-cue-rise}.rex-cue-glimmer,.rex-cue-signal,.rex-cue-goal,.rex-cue-key{animation-name:rex-cue-glimmer}.rex-cue-swim,.rex-cue-bird,.rex-cue-drift{animation-name:rex-cue-drift}.rex-cue-orbit{animation-name:rex-cue-orbit}.rex-cue-swing{transform-origin:top;animation-name:rex-cue-sway}.rex-cue-shot{animation-name:rex-cue-shot}.rex-cue-traffic{animation-name:rex-cue-traffic}.rex-cue-exhaust{animation-name:rex-cue-exhaust}.rex-cue-kick{animation-name:rex-cue-kick}.rex-cue-sunset{animation-name:rex-cue-sunset}.rex-cue-reflection{animation-name:rex-cue-reflection}.rex-cue-spin{animation-name:rex-cue-spin;animation-timing-function:linear;animation-duration:4s}.rex-cue-balloon{animation-name:rex-cue-balloon}.rex-cue-cursor{animation-name:rex-cue-glimmer;animation-duration:2s}.rex-cue-squish{animation-name:rex-cue-squish}
@keyframes rex-cue-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-1px)}}
@keyframes rex-cue-rise{0%,100%{opacity:.2;transform:translateY(3px) scale(.85)}45%{opacity:.75}85%{opacity:0;transform:translateY(-9px) scale(1.15)}}
@keyframes rex-cue-glimmer{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes rex-cue-drift{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px) translateY(-1px)}}
@keyframes rex-cue-orbit{0%,100%{transform:translate(-3px,2px)}50%{transform:translate(5px,-4px)}}
@keyframes rex-cue-shot{0%,18%,36%,100%{opacity:0}22%,28%{opacity:.8}}
@keyframes rex-cue-traffic{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@keyframes rex-cue-exhaust{0%,100%{opacity:.4;transform:scaleY(.8)}50%{opacity:.9;transform:scaleY(1.12)}}
@keyframes rex-cue-kick{0%,12%,100%{opacity:1;transform:translate(0,0) scale(1)}65%,82%{opacity:1;transform:translate(6px,-17px) scale(.55)}90%{opacity:0;transform:translate(6px,-17px) scale(.55)}96%{opacity:0;transform:translate(0,0)}}
@keyframes rex-cue-sunset{0%,100%{transform:translateY(-8px)}50%{transform:translateY(5px)}}
@keyframes rex-cue-reflection{0%,100%{opacity:.35;transform:scaleX(.86)}50%{opacity:.7;transform:scaleX(1.1)}}
@keyframes rex-cue-spin{to{transform:rotate(360deg)}}
@keyframes rex-cue-balloon{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes rex-cue-squish{0%,100%{transform:scale(1.015,.975)}50%{transform:scale(.975,1.035) translateY(-1px)}}

.rex-thumbnail-scene *{animation-play-state:paused}
.rex-thumbnail-scene[data-running="true"] *{animation-play-state:running}
.rex-thumbnail-scene[data-running="false"] *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-scene{display:none}.rex-thumbnail-scene *{animation:none!important}}

/* Canopy Chase: one monkey vaults toward the other runners while leaves drift. */
.rex-canopy-runner{animation:rex-canopy-vault 5s ease-in-out infinite;transform-origin:54px 90px}
.rex-canopy-shadow{animation:rex-canopy-shadow 5s ease-in-out infinite}
.rex-canopy-sparks{animation:rex-canopy-sparks 5s ease-in-out infinite}
.rex-canopy-leaf{animation:rex-canopy-leaf 5s ease-in-out infinite}
@keyframes rex-canopy-vault{
  0%,8%{opacity:0;transform:translate(-24px,8px) rotate(-8deg)}
  16%{opacity:1;transform:translate(0,0) rotate(0)}
  39%{opacity:1;transform:translate(78px,-72px) rotate(-9deg)}
  55%{opacity:1;transform:translate(140px,-38px) rotate(7deg)}
  72%{opacity:1;transform:translate(202px,0) rotate(0)}
  84%,100%{opacity:0;transform:translate(225px,0) rotate(0)}
}
@keyframes rex-canopy-shadow{
  0%,8%{opacity:0;transform:translateX(-24px) scale(.8)}
  16%{opacity:.42;transform:translateX(0) scale(1)}
  39%{opacity:.2;transform:translateX(78px) scale(.65)}
  72%{opacity:.42;transform:translateX(202px) scale(1)}
  84%,100%{opacity:0;transform:translateX(225px) scale(.8)}
}
@keyframes rex-canopy-sparks{0%,14%,83%,100%{opacity:0}20%,63%{opacity:.85}72%{opacity:0}}
@keyframes rex-canopy-leaf{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-17px,15px) rotate(8deg)}}
/* Sandbox II: an aimed shot, rifle recoil, one casing and lingering desert dust. */
.rex-sandbox-rifle{animation-name:rex-sandbox-recoil;transform-origin:75% 65%}
.rex-sandbox-flash{animation-name:rex-sandbox-flash}
.rex-sandbox-case{animation-name:rex-sandbox-case}
.rex-sandbox-smoke{animation-name:rex-sandbox-smoke}
.rex-sandbox-dust{animation-name:rex-sandbox-dust}
@keyframes rex-sandbox-recoil{0%,12%,52%,100%{transform:translate(0,0) rotate(0)}26%,31%{transform:translate(-6px,-4px) rotate(.5deg)}33%{transform:translate(19px,9px) rotate(-1.8deg)}39%{transform:translate(4px,2px) rotate(-.25deg)}}
@keyframes rex-sandbox-flash{0%,31%,35%,100%{opacity:0;transform:scale(.8)}32.5%{opacity:.9;transform:scale(1)}34%{opacity:.35;transform:scale(.9)}}
@keyframes rex-sandbox-case{0%,32%,63%,100%{opacity:0;transform:translate(0,0) rotate(0)}33%{opacity:1;transform:translate(0,0) rotate(0)}43%{opacity:1;transform:translate(102px,-88px) rotate(160deg)}60%{opacity:0;transform:translate(178px,42px) rotate(320deg)}}
@keyframes rex-sandbox-smoke{0%,33%,72%,100%{opacity:0;transform:translate(0,0) scale(.8)}38%{opacity:.75;transform:translate(-4px,-7px) scale(1)}65%{opacity:0;transform:translate(-42px,-76px) scale(1.6)}}
@keyframes rex-sandbox-dust{0%,100%{opacity:.3;transform:translate(-12px,4px)}50%{opacity:.9;transform:translate(24px,-8px)}}

/* Sunset Studio: the same photographic coastline as the experience. */
.rex-sunset-sun{transform-box:view-box;transform-origin:490px 190px;animation:rex-sunset-path 18s ease-in-out infinite}
.rex-sunset-clouds{animation:rex-sunset-clouds 24s ease-in-out infinite}
.rex-sunset-evening{animation:rex-sunset-evening 18s ease-in-out infinite}
.rex-sunset-shimmer{transform-box:fill-box;transform-origin:center;animation:rex-sunset-water 4.8s ease-in-out infinite}
.rex-sunset-birds{transform-box:view-box;animation:rex-sunset-birds 18s ease-in-out infinite}
@keyframes rex-sunset-path{0%,100%{transform:translate(-8px,-18px)}50%{transform:translate(18px,105px)}}
@keyframes rex-sunset-clouds{0%,100%{transform:translateX(-12px)}50%{transform:translateX(18px)}}
@keyframes rex-sunset-evening{0%,100%{opacity:0}50%{opacity:.46}}
@keyframes rex-sunset-water{0%,100%{opacity:.09;transform:translateX(-5px) scaleX(.85)}50%{opacity:.28;transform:translateX(6px) scaleX(1.1)}}
@keyframes rex-sunset-birds{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(-140px,8px);opacity:.55}}

/* Tiny Treasures: search the current painted garden; decorative cues never replace its poster. */
.rex-ispy-lens{transform-box:view-box;transform-origin:0 0;animation:rex-ispy-search 6s ease-in-out infinite}
.rex-ispy-found{opacity:0;animation:rex-ispy-found 6s ease-in-out infinite}
.rex-ispy-found-two{animation-delay:2s}.rex-ispy-found-three{animation-delay:4s}
@keyframes rex-ispy-search{0%,22%{transform:translate(150px,176px)}33%,55%{transform:translate(735px,363px)}66%,88%{transform:translate(870px,79.5px)}100%{transform:translate(150px,176px)}}
@keyframes rex-ispy-found{0%,8%,33%,100%{opacity:0}16%,27%{opacity:1}}

/* Lockpick Simulator: the production cutaway, three pin sets, then a shackle release. */
.rex-thumbnail-card[data-project-id="lock-lab"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
.rex-thumbnail-card[data-project-id="lock-lab"] .rex-thumbnail-scene{background:#171c1d}
.rex-lp-pin,.rex-lp-spring{animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.rex-lp-pin-2{animation-name:rex-lp-pin2}.rex-lp-pin-3{animation-name:rex-lp-pin3}.rex-lp-pin-4{animation-name:rex-lp-pin4}
.rex-lp-spring{transform-origin:300px 440px}.rex-lp-spring-2{animation-name:rex-lp-spring2}.rex-lp-spring-3{animation-name:rex-lp-spring3}.rex-lp-spring-4{animation-name:rex-lp-spring4}
.rex-lp-shackle{transform-origin:135px 300px;animation:rex-lp-open 6s ease-in-out infinite}.rex-lp-legs{animation:rex-lp-legs 6s ease-in-out infinite}
.rex-lp-plug{transform-origin:300px 642px;animation:rex-lp-turn 6s ease-in-out infinite}.rex-lp-pick{animation:rex-lp-pick 6s ease-in-out infinite}
.rex-lp-bolt-left{animation:rex-lp-bolt-l 6s ease-in-out infinite}.rex-lp-bolt-right{animation:rex-lp-bolt-r 6s ease-in-out infinite}.rex-lp-cam{transform-origin:300px 387px;animation:rex-lp-cam 6s ease-in-out infinite}
@keyframes rex-lp-pin2{0%,12%,100%{transform:translateY(0)}25%,88%{transform:translateY(var(--delta))}}
@keyframes rex-lp-pin3{0%,30%,100%{transform:translateY(0)}43%,88%{transform:translateY(var(--delta))}}
@keyframes rex-lp-pin4{0%,48%,100%{transform:translateY(0)}61%,88%{transform:translateY(var(--delta))}}
@keyframes rex-lp-spring2{0%,12%,100%{transform:scaleY(1)}25%,88%{transform:scaleY(var(--squeeze))}}
@keyframes rex-lp-spring3{0%,30%,100%{transform:scaleY(1)}43%,88%{transform:scaleY(var(--squeeze))}}
@keyframes rex-lp-spring4{0%,48%,100%{transform:scaleY(1)}61%,88%{transform:scaleY(var(--squeeze))}}
@keyframes rex-lp-open{0%,72%,100%{transform:translateY(0) rotate(0)}82%,88%{transform:translateY(-80px) rotate(-8deg)}}
@keyframes rex-lp-legs{0%,72%,100%{transform:translateY(0)}82%,88%{transform:translateY(-80px)}}
@keyframes rex-lp-turn{0%,62%,100%{transform:scaleY(1)}70%,88%{transform:scaleY(.04)}}
@keyframes rex-lp-bolt-l{0%,68%,100%{transform:translateX(0)}73%,88%{transform:translateX(16px)}}
@keyframes rex-lp-bolt-r{0%,68%,100%{transform:translateX(0)}73%,88%{transform:translateX(-16px)}}
@keyframes rex-lp-cam{0%,65%,100%{transform:rotate(0)}72%,88%{transform:rotate(90deg)}}
@keyframes rex-lp-pick{0%,12%,100%{transform:translate(0,0);opacity:1}25%{transform:translate(0,-36px)}30%{transform:translate(56px,0)}43%{transform:translate(56px,-29.5px)}48%{transform:translate(112px,0)}61%,67%{transform:translate(112px,-21px);opacity:1}73%,92%{transform:translate(80px,10px);opacity:0}}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="lock-lab"] img[data-card-image]{visibility:visible!important}}

/* Physics Playground: the same ramps, balls and blocks as the live sandbox. */
.rex-physics-ball{animation:rex-physics-roll 5s infinite;transform-box:fill-box;transform-origin:center}
.rex-physics-bounce{animation:rex-physics-bounce 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rex-physics-block{animation:rex-physics-wobble 5s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes rex-physics-roll{0%,8%{transform:translate(0,0);opacity:1;animation-timing-function:ease-in}28%{transform:translate(0,100px);animation-timing-function:linear}53%{transform:translate(310px,178px);opacity:1}60%{transform:translate(365px,202px)}68%{transform:translate(365px,247px)}76%{transform:translate(290px,180px);opacity:1}86%{transform:translate(220px,405px);opacity:1}93%{transform:translate(220px,405px);opacity:0}94%,100%{transform:translate(0,0);opacity:0}}
@keyframes rex-physics-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-70px)}80%{transform:translateY(8px) scale(1.04,.94)}}
@keyframes rex-physics-wobble{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(7deg)}80%{transform:rotate(-4deg)}}


/* Pore Pressure: converge fingertips, squeeze a dome, burst a mound and wet spray. */
.rex-thumbnail-card[data-project-id="pore-pressure"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
.rex-thumbnail-card[data-project-id="pore-pressure"] .rex-thumbnail-scene{background:#c48f73}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="pore-pressure"] img[data-card-image]{visibility:visible!important}}
@keyframes rex-pore-left{0%,12%,100%{transform:translateX(0)}35%,65%{transform:translateX(52px)}82%{transform:translateX(0)}}
@keyframes rex-pore-right{0%,12%,100%{transform:translateX(0)}35%,65%{transform:translateX(-52px)}82%{transform:translateX(0)}}
@keyframes rex-pore-curl{0%,15%,100%{opacity:0;transform:scale(.4,.06)}45%,68%{opacity:1;transform:scale(1,1)}85%{opacity:0;transform:scale(1,1)}}
@keyframes rex-pore-bump{0%,12%,100%{transform:scale(1,1)}35%,65%{transform:scale(.88,1.07)}82%{transform:scale(1,1)}}
@keyframes rex-pore-spray{0%,30%,100%{opacity:0;transform:scale(.04)}43%,65%{opacity:1;transform:scale(1)}85%{opacity:0;transform:scale(1)}}

/* Corner Watch: a rectangular DVD badge reflects at opposite screen corners. */
.rex-thumbnail-card[data-project-id="corner-watch"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
.rex-thumbnail-card[data-project-id="corner-watch"] .rex-thumbnail-scene{background:#020408}
.rex-corner-badge{animation:rex-corner-bounce 6s linear infinite, rex-corner-color 6s step-end infinite}
.rex-corner-hit{animation:rex-corner-hit 6s ease-out infinite}
@keyframes rex-corner-bounce{0%,100%{transform:translate(40px,322px)}50%{transform:translate(556px,40px)}}
@keyframes rex-corner-color{0%,100%{color:#25dce5}50%{color:#a4ef45}}
@keyframes rex-corner-hit{0%,43%,70%,100%{opacity:0}50%{opacity:.9}60%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="corner-watch"] img[data-card-image]{visibility:visible!important}}

/* Fake Work Screen: editor typing, terminal output and independently changing charts. */
.rex-work-code{transform-box:fill-box;transform-origin:left center;animation:rex-work-type 5.4s ease-in-out infinite}
.rex-work-terminal{transform-box:fill-box;transform-origin:left center;animation:rex-work-terminal 5.4s ease-in-out infinite}
.rex-work-terminal-two{animation-delay:-1.2s}
.rex-work-bar{transform-box:fill-box;transform-origin:center bottom;animation:rex-work-chart 4.8s ease-in-out infinite}
.rex-work-cursor,.rex-work-status{animation:rex-work-cursor 1.6s ease-in-out infinite}
@keyframes rex-work-type{0%,12%,100%{transform:scaleX(.2);opacity:.35}42%,78%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:.35}}
@keyframes rex-work-terminal{0%,16%,100%{transform:scaleX(.05);opacity:0}22%{opacity:.8}52%,83%{transform:scaleX(1);opacity:.8}93%{opacity:0;transform:scaleX(1)}}
@keyframes rex-work-chart{0%,100%{transform:scaleY(.58)}30%{transform:scaleY(.94)}62%{transform:scaleY(.38)}82%{transform:scaleY(1)}}
@keyframes rex-work-cursor{0%,100%{opacity:.2}50%{opacity:1}}
.rex-sunset-wave{transform-box:fill-box;transform-origin:center;animation:rex-sunset-surf 5.4s ease-in-out infinite}
.rex-sunset-wave-two{animation-delay:-1.8s}.rex-sunset-wave-three{animation-delay:-3.6s}
@keyframes rex-sunset-surf{0%,100%{opacity:0;transform:translate(-12px,-6px) scaleX(.92)}25%{opacity:.38}62%{opacity:.18;transform:translate(9px,12px) scaleX(1.04)}88%{opacity:0;transform:translate(14px,16px) scaleX(1.06)}}
.rex-sunset-sun{animation-duration:12s}.rex-sunset-evening{animation-duration:12s}
/* These two cards share the controller's gates, including later-authored animations. */
.rex-thumbnail-card:is([data-project-id="fake-work-screen"],[data-project-id="sunset-studio"]) .rex-thumbnail-scene[data-running="false"] *{animation-play-state:paused}
.rex-thumbnail-card:is([data-project-id="fake-work-screen"],[data-project-id="sunset-studio"]) .rex-thumbnail-scene[data-running="true"] *{animation-play-state:running}

/* Tube Man: independently flailing cloth layers from the production renderer. */
.rex-tube-body{transform-box:view-box;transform-origin:450px 460.2px;animation:rex-tube-sway 4.8s ease-in-out infinite}
.rex-tube-left,.rex-tube-right{transform-box:view-box;transform-origin:279.055px 254.793px;animation:rex-tube-arm-left 3.2s ease-in-out infinite}
.rex-tube-right{animation-name:rex-tube-arm-right;animation-duration:3.8s}
@keyframes rex-tube-sway{0%,100%{transform:rotate(0deg) skewX(0deg)}23%{transform:rotate(-5deg) skewX(3deg)}51%{transform:rotate(5deg) skewX(-4deg)}76%{transform:rotate(-2deg) skewX(2deg)}}
@keyframes rex-tube-arm-left{0%,100%{transform:rotate(0deg) scaleY(1)}24%{transform:rotate(-18deg) scaleY(.82)}57%{transform:rotate(14deg) scaleY(1.02)}81%{transform:rotate(-9deg) scaleY(.92)}}
@keyframes rex-tube-arm-right{0%,100%{transform:rotate(0deg) scaleY(1)}33%{transform:rotate(-14deg) scaleY(.9)}61%{transform:rotate(17deg) scaleY(.8)}82%{transform:rotate(-7deg) scaleY(1.02)}}

/* Princess Dress-Up Palace: three real gowns and a reacting magical companion. */
.rex-thumbnail-card[data-project-id="princess-dress-up"][data-thumbnail-ready="true"] img[data-card-image]{visibility:hidden}
.rex-thumbnail-card[data-project-id="princess-dress-up"] .rex-thumbnail-scene{background:#f5dbee}
.rex-pdp-look{opacity:0;animation:rex-pdp-pink 6s linear infinite}
.rex-pdp-look-1{animation-name:rex-pdp-midnight}.rex-pdp-look-2{animation-name:rex-pdp-mint}
.rex-pdp-pet{animation:rex-pdp-pet 2s ease-in-out infinite}
.rex-pdp-magic{opacity:0;transform-origin:480px 360px;animation:rex-pdp-magic 2s ease-in-out infinite}
@keyframes rex-pdp-pink{0%,28%,98%,100%{opacity:1}31%,95%{opacity:0}}
@keyframes rex-pdp-midnight{0%,28%,64%,100%{opacity:0}31%,61%{opacity:1}}
@keyframes rex-pdp-mint{0%,61%,98%,100%{opacity:0}64%,95%{opacity:1}}
@keyframes rex-pdp-pet{0%,55%,100%{transform:translateY(0)}72%{transform:translateY(-7px)}86%{transform:translateY(1px)}}
@keyframes rex-pdp-magic{0%,72%,100%{opacity:0;transform:scale(.94)}87%{opacity:.85;transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.rex-thumbnail-card[data-project-id="princess-dress-up"] img[data-card-image]{visibility:visible!important}}

/* Tiny Tap Party: real game artwork, four small cause-and-effect scenes. */
.rex-thumbnail-card[data-project-id="tiny-tap-party"] .rex-thumbnail-scene{background:linear-gradient(135deg,#fbe8f6,#e4f6ff)}
.cosmic-home .home-feature[data-project-id="tiny-tap-party"] .cosmic-game-link{display:flex;flex-direction:column}
.cosmic-home .home-feature[data-project-id="tiny-tap-party"] .card-picture{position:relative;display:block;flex:1;min-height:0;background:#f8e8f5}
.cosmic-home .home-feature[data-project-id="tiny-tap-party"] img[data-card-image]{object-fit:contain}
.cosmic-home .home-feature[data-project-id="tiny-tap-party"] .cosmic-card-copy{position:relative;flex:none;padding:6px 8px!important;background:#101526}
.rex-ttp-pop,.rex-ttp-small-bubble,.rex-ttp-burst,.rex-ttp-duck,.rex-ttp-ripple,.rex-ttp-jelly,.rex-ttp-balloon,.rex-ttp-confetti{transform-box:fill-box;transform-origin:center;animation-duration:6.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.rex-ttp-pop{animation-name:rex-ttp-pop}.rex-ttp-small-bubble{animation-name:rex-ttp-float}.rex-ttp-burst{animation-name:rex-ttp-burst}.rex-ttp-duck{animation-name:rex-ttp-paddle;transform-origin:50% 90%}.rex-ttp-ripple{animation-name:rex-ttp-ripple}.rex-ttp-jelly{animation-name:rex-ttp-squish;transform-origin:50% 90%}.rex-ttp-balloon{animation-name:rex-ttp-inflate;transform-origin:50% 92%}.rex-ttp-confetti{animation-name:rex-ttp-confetti}
@keyframes rex-ttp-pop{0%,12%,100%{transform:translateY(3px) scale(.94);opacity:1}30%{transform:translateY(-9px) scale(1.03);opacity:1}34%,64%{transform:translateY(-9px) scale(1.08);opacity:0}72%{transform:translateY(3px) scale(.2);opacity:0}86%{transform:translateY(3px) scale(.94);opacity:1}}
@keyframes rex-ttp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rex-ttp-burst{0%,29%,43%,100%{opacity:0;transform:scale(.9)}34%{opacity:.85;transform:scale(1)}42%{opacity:0;transform:scale(1.13)}}
@keyframes rex-ttp-paddle{0%,100%{transform:translate(-9px,0) rotate(-2deg)}32%{transform:translate(10px,-3px) rotate(1deg)}57%{transform:translate(17px,-12px) rotate(-3deg)}70%{transform:translate(13px,1px) rotate(2deg)}}
@keyframes rex-ttp-ripple{0%,100%{transform:translateX(-7px) scale(.9);opacity:.4}38%{transform:translateX(13px) scale(1);opacity:.6}58%{transform:translateX(13px) scale(.9);opacity:.25}76%{transform:translateX(13px) scale(1.25);opacity:0}}
@keyframes rex-ttp-squish{0%,24%,100%{transform:scale(1,1)}39%{transform:scale(1.16,.79)}50%{transform:scale(.92,1.08)}60%{transform:scale(1.04,.95)}72%{transform:scale(1,1)}}
@keyframes rex-ttp-inflate{0%,8%,100%{transform:scale(.88);opacity:1}35%{transform:scale(.98);opacity:1}66%{transform:scale(1.12);opacity:1}69%,87%{transform:scale(1.15);opacity:0}90%{transform:scale(.2);opacity:0}99%{transform:scale(.88);opacity:1}}
@keyframes rex-ttp-confetti{0%,66%,94%,100%{opacity:0;transform:translateY(-8px) scale(.8)}72%{opacity:1;transform:translateY(0) scale(1)}90%{opacity:0;transform:translateY(32px) scale(1.06)}}