.prototype-catalog .universe-preview{--frame-height:480px}
.catalog-motion-toggle{display:block;margin:0 0 20px auto;min-height:44px;padding:8px 14px;border:1px solid #abc9cd;border-radius:6px;background:#fff;color:#17616b;font:600 13px/1.4 "Segoe UI",sans-serif;cursor:pointer}
.catalog-motion-toggle[hidden]{display:none}
.catalog-motion-toggle:focus-visible{outline:3px solid #ed802d;outline-offset:3px}
.catalog-motion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%,calc(var(--frame-height)*var(--ratio)));aspect-ratio:var(--ratio);overflow:hidden;pointer-events:none;container-type:inline-size;display:none}
.motion-enabled .catalog-motion{display:block}
.catalog-motion *{animation-play-state:paused!important}
.motion-running .catalog-motion *{animation-play-state:running!important}
.preview-particle{position:absolute;left:var(--x);font-style:normal;font-size:var(--size);animation-delay:var(--delay);animation-duration:var(--duration);animation-iteration-count:infinite;animation-timing-function:linear}
.motion-amour .preview-particle{top:-7%;color:#e23870;text-shadow:0 0 8px #ffb4c9;animation-name:heart-fall}
@keyframes heart-fall{0%{transform:translate(0,0) rotate(-12deg);opacity:0}12%{opacity:.65}85%{opacity:.45}100%{transform:translate(var(--drift),620px) rotate(18deg);opacity:0}}
.motion-sorcellerie .preview-particle{top:var(--y);font-size:calc(var(--size) + 7px);color:#fff5a0;text-shadow:0 0 8px #d987ed;animation-name:magic-spark}
@keyframes magic-spark{0%,100%{opacity:0;transform:translateY(8px) scale(.4)}45%{opacity:.95;transform:translateY(-9px) scale(1.2)}75%{opacity:0;transform:translateY(-25px) scale(.6)}}
.magic-glow{position:absolute;inset:19% 7% 25%;border-radius:50%;background:radial-gradient(ellipse,#ffe79936,transparent 65%);mix-blend-mode:screen;animation:magic-breathe 6s ease-in-out infinite}
@keyframes magic-breathe{50%{opacity:.25;transform:scale(.88)}}
.motion-medieval .preview-particle{bottom:2%;width:var(--size);height:var(--size);border-radius:50%;background:#ffc16c;box-shadow:0 0 7px #ed7c1d;animation-name:ember-rise}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0) scale(.8)}15%{opacity:.75}100%{opacity:0;transform:translate(var(--drift),-360px) scale(.2)}}
.medieval-shimmer{position:absolute;top:26%;left:14%;width:72%;height:13%;background:linear-gradient(110deg,transparent 35%,#ffd77165 49%,transparent 61%);background-size:300% 100%;mask-image:radial-gradient(ellipse,#000 15%,transparent 72%);mix-blend-mode:screen;animation:gold-reflection 7s ease-in-out infinite}
@keyframes gold-reflection{0%,20%{background-position:100% 0;opacity:0}35%,65%{opacity:.65}80%,100%{background-position:0 0;opacity:0}}
.flux-orb{position:absolute;left:49.8%;top:47.29%;width:14.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 33% 26%,#f0ffff 0%,#66f7ff 13%,#13bed7 35%,#005267 74%,#001d32 100%);box-shadow:0 0 4cqw #00cced99,inset -1.2cqw -1cqw 2cqw #001b38;overflow:hidden;perspective:100px}
.orb-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:orb-turn 12s linear infinite}
.orb-spin i{position:absolute;inset:3% 26%;border:1px solid #b2ffffa8;border-radius:50%}
.orb-spin i:nth-child(2){inset:22% 3%;transform:rotate(-25deg)}
.orb-spin i:nth-child(3){inset:4% 10%;transform:rotateY(60deg)}
.orb-light{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 23%,#fff9,transparent 26%)}
@keyframes orb-turn{from{transform:rotateY(0deg) rotateZ(-18deg)}to{transform:rotateY(360deg) rotateZ(-18deg)}}
.motion-impulsions{background:#020804;color:#20ff47;text-align:center;font-family:monospace}
.motion-impulsions canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.65}
.code-brand{position:absolute;top:25%;left:0;width:100%;font:bold 12cqw/1.15 monospace;text-shadow:0 0 7px #0f0}
.code-brand small{display:block;font:4cqw/2 monospace;letter-spacing:.1em}
.code-greeting{position:absolute;top:44%;left:8%;font:bold 3.5cqw/2 monospace;text-align:left;text-shadow:0 1px 4px #000}
.code-actions{position:absolute;top:65%;left:8%;width:84%;display:grid;gap:3cqw;font:bold 2.8cqw/1.4 monospace}
.code-actions span{border:1px solid #ff003c;color:#ff426e;background:#200712df;padding:4cqw 1cqw}
.code-actions span+span{border-color:#00c8db;color:#71e5ee;background:#001820df;padding:3cqw 1cqw}
.code-terminal{position:absolute;bottom:9%;left:0;width:100%;font:2.6cqw/1.4 monospace;color:#7caf88}
@media(max-width:700px){.prototype-catalog .universe-preview{--frame-height:clamp(420px,145vw,560px)}}
@media(prefers-reduced-motion:reduce){.catalog-motion{display:none!important}.catalog-motion-toggle{display:none}}