.reference-scene{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;isolation:isolate;background:#87c9ed;overflow:hidden;line-height:0}
.reference-art{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.reference-static{display:block;width:100%;height:100%;object-fit:fill}
.reference-hotspots{position:absolute;inset:0;pointer-events:none}
.hotspot{position:absolute;display:block;border:0;padding:0;background:transparent;color:transparent;pointer-events:auto;border-radius:12px;cursor:pointer}
.hotspot:hover{background:#fff8ce0d;box-shadow:inset 0 0 13px #fff0b033}
.hotspot:focus-visible{outline:2px solid #fff0b6;outline-offset:1px;box-shadow:0 0 0 3px #58468d}
.reference-motion-control{position:absolute;right:.8%;bottom:1%;height:28px;display:flex;align-items:center;gap:5px;padding:0 9px;border-radius:16px;background:#1a4a69d9;color:#fff4cb;line-height:1;font-size:11px;border:1px solid #fff2bf88;cursor:pointer}
.reference-motion-control:focus-visible{outline:2px solid #fff0b6;outline-offset:3px}
.motion-icon{font-size:12px}.motion-label{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ref-underpaint{opacity:0}.has-clean-plate .ref-underpaint{opacity:1}
.ref-motion{animation-timing-function:ease-in-out;animation-iteration-count:infinite;transform-box:view-box}
.reference-scene:not(.has-clean-plate) .ref-motion{animation:none!important}
.ref-mage{transform-origin:225px 300px;animation:ref-mage 4.07s ease-in-out -.69s infinite}
.ref-archer{transform-origin:593px 230px;animation:ref-archer 3.63s ease-in-out -2.43s infinite}
.ref-warrior{transform-origin:393px 550px;animation:ref-warrior 3.05s ease-in-out -1.17s infinite}
.ref-archer-hair{transform-origin:521px 131px;animation:ref-hair 4.31s ease-in-out -1.93s infinite}
.ref-warrior-ribbon{transform-origin:393px 330px;animation:ref-ribbon 3.41s ease-in-out -2.16s infinite}
.ref-dragon{transform-origin:1420px 185px;animation:ref-dragon 4.83s ease-in-out -3.17s infinite}
.ref-wing-back{transform-origin:1281px 135px;animation:ref-wing-back 5.17s ease-in-out -1.48s infinite}
.ref-wing-front{transform-origin:1450px 108px;animation:ref-wing-front 4.71s ease-in-out -2.27s infinite}
.ref-tail{transform-origin:1513px 238px;animation:ref-tail 5.63s ease-in-out -3.76s infinite}
.ref-fire{transform-origin:1304px 180px;animation:ref-fire 2.31s ease-in-out -.83s infinite}
.ref-rock{transform-origin:652px 650px;animation:ref-rock 4.47s ease-in-out -2.14s infinite}
.ref-fist{transform-origin:623px 602px;animation:ref-fist 5.09s ease-in-out -3.21s infinite}
.ref-pirate{transform-origin:789px 650px;animation:ref-pirate 3.37s ease-in-out -.92s infinite}
.ref-fish{animation:ref-fish 3.91s ease-in-out -1.74s infinite}
.ref-slime{transform-origin:1050px 663px;animation:ref-slime 2.87s ease-in-out -1.32s infinite}
.ref-mushroom{animation:ref-mushroom 3.19s ease-in-out -2.09s infinite}
.ref-cap{transform-origin:1165px 615px;animation:ref-cap 3.53s ease-in-out -1.87s infinite}
.ref-tree{animation:ref-tree 4.61s ease-in-out -3.15s infinite}
.ref-leaves{transform-origin:1279px 544px;animation:ref-leaves 5.31s ease-in-out -2.31s infinite}
.ref-wolf{transform-origin:1473px 650px;animation:ref-wolf 3.73s ease-in-out -.53s infinite}
.ref-wolf-tail{transform-origin:1520px 626px;animation:ref-wolf-tail 4.29s ease-in-out -2.81s infinite}
.ref-gem{animation:ref-gem 3.89s ease-in-out -2.76s infinite;opacity:.35}
.ref-magic{animation:ref-magic 4.13s ease-in-out -1.83s infinite}
.ref-eye{animation:ref-eye 11.7s ease-in-out -4.31s infinite;opacity:0}
@keyframes ref-mage{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.009)}}
@keyframes ref-archer{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ref-warrior{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.012)}}
@keyframes ref-hair{0%,100%{transform:rotate(-.3deg)}50%{transform:rotate(.4deg)}}
@keyframes ref-ribbon{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.5deg)}}
@keyframes ref-dragon{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.004,1.009)}}
@keyframes ref-wing-back{0%,100%{transform:rotate(-.25deg)}50%{transform:rotate(.4deg)}}
@keyframes ref-wing-front{0%,100%{transform:rotate(.25deg)}50%{transform:rotate(-.4deg)}}
@keyframes ref-tail{0%,100%{transform:rotate(-.25deg)}50%{transform:rotate(.4deg)}}
@keyframes ref-fire{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.012,.994);opacity:.94}}
@keyframes ref-rock{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ref-fist{0%,100%{transform:rotate(-.2deg)}50%{transform:rotate(.4deg)}}
@keyframes ref-pirate{0%,100%{transform:translateX(-1px) rotate(-.25deg)}50%{transform:translateX(1px) rotate(.25deg)}}
@keyframes ref-fish{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes ref-slime{0%,100%{transform:scale(1,1)}50%{transform:scale(1.018,.975)}}
@keyframes ref-mushroom{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ref-cap{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes ref-tree{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ref-leaves{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.5deg)}}
@keyframes ref-wolf{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.008)}}
@keyframes ref-wolf-tail{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.6deg)}}
@keyframes ref-gem{0%,100%{opacity:.15}50%{opacity:.45}}
@keyframes ref-eye{0%,90%,94%,100%{opacity:0}92%{opacity:.7}}
@keyframes ref-magic{0%,100%{opacity:.75}50%{opacity:1}}
html[data-motion="paused"] .reference-art *,html[data-visible="hidden"] .reference-art *,html[data-scene="offscreen"] .reference-art *{animation-play-state:paused!important}
html[data-motion="reduced"] .reference-art *{animation:none!important;transform:none!important}
html[data-motion="reduced"] .ref-motion{visibility:hidden}
html[data-motion="reduced"] .ref-gem,html[data-motion="reduced"] .ref-eye{opacity:0}
html[data-motion="reduced"] .ref-underpaint{opacity:0}
@media(prefers-reduced-motion:reduce){html:not([data-motion]) .reference-art *{animation:none!important;transform:none!important}html:not([data-motion]) .ref-motion,html:not([data-motion]) .ref-underpaint{opacity:0}}