.preview-motion-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:62px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.preview-motion-toolbar p{margin:0;font-size:12px;color:#b7b1bd}
[data-motion-toggle]{min-height:44px;padding:10px 16px;border:1px solid #62576f;border-radius:24px;font:inherit;font-size:12px;white-space:nowrap;color:#e4d8f4;background:#1c1722;cursor:pointer}
[data-motion-toggle]:hover{background:#30263b}
[data-motion-toggle]:focus-visible{outline:2px solid #d4b9ff;outline-offset:4px}
[data-motion-toggle]:disabled{cursor:default;opacity:.7}
.category-art{isolation:isolate}
.glass-orb{animation:glass-buoy 6s ease-in-out infinite}
.metal-orb{animation:metal-turn 9s ease-in-out infinite}
.ribbed-cube{transform-origin:50% 100%;animation:ribbed-turn 8s ease-in-out infinite}
.stone-block{transform-origin:50% 100%;animation:stone-turn 10s ease-in-out infinite}
.architecture i{animation:architecture-reveal 8s ease-in-out infinite}
.architecture i:nth-child(2){animation-delay:-1.8s}
.architecture i:nth-child(3){animation-delay:-3.6s}
.mini-serif{display:inline-block;animation:type-reveal 8s ease-in-out infinite}
.code-front code{animation:code-scan 7s ease-in-out infinite}
.code-badge{animation:code-float 6s ease-in-out infinite}
.category-card .category-art *{animation-play-state:paused}
html[data-preview-motion=playing] .category-card[data-motion-visible=true] .category-art *{animation-play-state:running}
html[data-preview-motion=playing][data-preview-occluded=true] .category-card[data-motion-visible=true] .category-art *{animation-play-state:paused}
@keyframes glass-buoy{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-11px) rotate(5deg)}}
@keyframes metal-turn{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(12deg)}}
@keyframes ribbed-turn{0%,100%{transform:perspective(600px) rotateY(-9deg) skewY(-4deg)}50%{transform:perspective(600px) rotateY(13deg) skewY(-4deg)}}
@keyframes stone-turn{0%,100%{transform:perspective(600px) rotateY(9deg) rotate(-7deg)}50%{transform:perspective(600px) rotateY(-14deg) rotate(-4deg)}}
@keyframes architecture-reveal{0%,100%{transform:translateY(0)}50%{transform:translateY(7%)}}
@keyframes type-reveal{0%,15%,85%,100%{clip-path:inset(0 0 0 0);transform:translateY(0)}45%,55%{clip-path:inset(0 0 12% 0);transform:translateY(-3px)}}
@keyframes code-scan{0%,100%{clip-path:inset(0 0 0 0)}45%,55%{clip-path:inset(0 0 24% 0)}}
@keyframes code-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.scene-preview-frame{position:relative;display:block;aspect-ratio:1.6;overflow:hidden;background:#16151c}
.scene-preview-frame>img{height:100%;width:100%;object-fit:cover}
.scene-preview-model{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease;background:#16151c}
.scene-preview-model.is-ready{opacity:1}
.scene-preview-model model-viewer{display:block;width:100%;height:100%;pointer-events:none;--poster-color:transparent}
.scene-studies .scene-preview-caption{position:absolute;left:10px;bottom:10px;display:block;margin:0;padding:5px 8px;border-radius:3px;background:#0b0914d9;color:#e6dbf8;font-size:10px;line-height:1.4;letter-spacing:.02em}
.scene-studies button:hover .scene-preview-frame>img{filter:none}
.model-preview [data-motion-toggle]{position:absolute;left:15px;top:15px;z-index:1}
@media(max-width:760px){.preview-motion-toolbar{gap:12px;padding-block:7px}.preview-motion-toolbar p{font-size:11px;max-width:150px}.scene-studies .scene-preview-caption{left:5px;bottom:5px;font-size:8px;padding:3px 5px}}
@media(prefers-reduced-motion:reduce){.category-art *{animation:none!important}.scene-preview-model{transition:none}}