/* Original kinetic composition: one prompt, shapes in motion, the next idea. */
.hero-motion{--cycle:12s;--ease:cubic-bezier(.2,.75,.2,1);min-width:0;background:var(--ink);color:var(--paper);border:1px solid var(--ink);overflow:hidden}
.motion-top{height:34px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff26;font:9px var(--mono);letter-spacing:.12em}
.motion-top>span:first-child{display:flex;align-items:center;gap:7px}
.motion-top>span:first-child:before{content:'';width:6px;height:6px;background:var(--yellow)}
.motion-top>span:last-child{color:#aaa}
.motion-canvas{position:relative;height:182px;overflow:hidden;isolation:isolate;background:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px}
.motion-scene{position:absolute;inset:0;opacity:0;display:flex;align-items:center;padding:16px 24px;overflow:hidden}
.motion-scene-three{opacity:1}
.motion-copy{position:relative;z-index:2;font-family:var(--title);font-size:clamp(40px,4vw,57px);font-weight:800;line-height:.9;letter-spacing:-.055em}
.motion-copy>span{display:block}
.motion-copy .motion-outline{color:var(--ink);-webkit-text-stroke:1px var(--paper)}
.motion-prompt-mark{position:absolute;right:22px;top:50%;width:100px;height:100px;margin-top:-50px;background:var(--pink);display:grid;place-items:center;transform:rotate(8deg)}
.motion-prompt-mark svg{width:47px;height:47px;color:var(--ink)}
.motion-caret{display:inline-block;width:10px;height:.74em;margin-left:5px;background:var(--pink)}
.motion-orbit{position:absolute;width:158px;height:158px;right:-18px;top:12px;border:1px solid #ffffff59;border-radius:50%;transform:rotate(-25deg)}
.motion-orbit:before{content:'';position:absolute;inset:17px;border:1px solid #ffffff38;border-radius:50%}
.motion-star{position:absolute;width:102px;height:102px;right:12px;top:42px;color:var(--yellow)}
.motion-chip{position:absolute;width:34px;height:34px;right:107px;top:18px;background:var(--electric);transform:rotate(15deg)}
.motion-scene-two .motion-copy>span:last-child{color:var(--pink)}
.motion-scene-three{background:var(--electric)}
.motion-scene-three .motion-copy{font-size:clamp(36px,3.8vw,52px)}
.motion-scene-three .motion-copy>span:last-child{color:var(--yellow)}
.motion-output{position:absolute;right:22px;top:34px;width:92px;height:118px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:7px 7px 0 var(--ink);transform:rotate(8deg);display:grid;place-items:center}
.motion-output svg{width:65px;height:65px}
.motion-output:after{content:'';position:absolute;bottom:12px;left:12px;right:12px;height:4px;background:var(--pink)}
.motion-bottom{height:44px;padding:0 5px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff26}
.motion-sequence{display:flex;align-items:center;gap:8px;font:8px var(--mono);letter-spacing:.06em;color:#b4b4b4}
.motion-sequence>span{display:flex;align-items:center;gap:5px}
.motion-sequence i{font-style:normal;color:var(--paper);font-size:9px}
.motion-sequence em{font-style:normal;color:#5c5c5c}
.motion-toggle{min-width:70px;min-height:44px;padding:0 9px;justify-content:center;gap:6px;border:0;color:var(--paper);font:10px var(--mono)}
.motion-toggle:hover{background:#ffffff18;color:var(--paper)}
.motion-toggle:focus-visible{outline-color:var(--yellow);outline-offset:-4px}
.motion-toggle[hidden]{display:none}
.motion-toggle svg{width:13px;height:13px;fill:currentColor}
.motion-toggle .motion-play-icon,.motion-toggle[data-paused=true] .motion-pause-icon{display:none}
.motion-toggle[data-paused=true] .motion-play-icon{display:block}
.motion-progress{height:3px;background:var(--pink);transform:scaleX(0);transform-origin:left}
.motion-ready .motion-scene-one{animation:motion-first var(--cycle) linear infinite}
.motion-ready .motion-scene-two{animation:motion-second var(--cycle) linear infinite}
.motion-ready .motion-scene-three{animation:motion-third var(--cycle) linear infinite}
.motion-ready .motion-scene-one .motion-copy{animation:motion-type-in var(--cycle) var(--ease) infinite}
.motion-ready .motion-prompt-mark{animation:motion-square var(--cycle) var(--ease) infinite}
.motion-ready .motion-scene-two .motion-copy{animation:motion-words var(--cycle) var(--ease) infinite}
.motion-ready .motion-orbit{animation:motion-orbit var(--cycle) var(--ease) infinite}
.motion-ready .motion-star{animation:motion-star var(--cycle) var(--ease) infinite}
.motion-ready .motion-chip{animation:motion-chip var(--cycle) var(--ease) infinite}
.motion-ready .motion-scene-three .motion-copy{animation:motion-finish var(--cycle) var(--ease) infinite}
.motion-ready .motion-output{animation:motion-output var(--cycle) var(--ease) infinite}
.motion-ready .motion-progress{animation:motion-progress var(--cycle) linear infinite}
.hero-motion[data-running=false] *{animation-play-state:paused!important}
.hero-motion.motion-static *{animation:none!important}
.motion-static .motion-scene{opacity:0}
.motion-static .motion-scene-three{opacity:1}
.motion-static .motion-progress{transform:scaleX(1)}
@keyframes motion-first{0%,29%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
@keyframes motion-second{0%,29%{opacity:0}33%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes motion-third{0%,62%{opacity:0}66%,96%{opacity:1}100%{opacity:0}}
@keyframes motion-type-in{0%{transform:translateY(25px);opacity:0}7%,25%{transform:translateY(0);opacity:1}32%,100%{transform:translateY(-20px);opacity:0}}
@keyframes motion-square{0%{transform:translateX(115px) rotate(-45deg) scale(.5)}10%,22%{transform:translateX(0) rotate(8deg) scale(1)}32%,100%{transform:translateX(10px) rotate(100deg) scale(.2)}}
@keyframes motion-words{0%,29%{transform:translateX(-40px);opacity:0}36%,57%{transform:translateX(0);opacity:1}65%,100%{transform:translateX(30px);opacity:0}}
@keyframes motion-orbit{0%,29%{transform:scale(.2) rotate(-70deg)}37%,58%{transform:scale(1) rotate(25deg)}66%,100%{transform:scale(1.3) rotate(100deg)}}
@keyframes motion-star{0%,29%{transform:scale(.2) rotate(-90deg)}38%{transform:scale(1) rotate(0deg)}59%{transform:scale(1) rotate(120deg)}66%,100%{transform:scale(.2) rotate(160deg)}}
@keyframes motion-chip{0%,29%{transform:translate(35px,45px) rotate(90deg)}38%{transform:translate(0,0) rotate(15deg)}58%{transform:translate(20px,97px) rotate(130deg)}66%,100%{transform:translate(70px,40px) rotate(180deg)}}
@keyframes motion-finish{0%,62%{transform:translateY(35px);opacity:0}70%,94%{transform:translateY(0);opacity:1}100%{transform:translateY(-20px);opacity:0}}
@keyframes motion-output{0%,62%{transform:translateY(150px) rotate(-15deg)}72%{transform:translateY(0) rotate(8deg)}90%{transform:translateY(-6px) rotate(3deg)}100%{transform:translateY(-150px) rotate(-15deg)}}
@keyframes motion-progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* Real collection metadata is still available inside the collapsed guide. */
.library-info{margin-top:20px;padding:16px 20px;background:var(--white);border:1px solid var(--line)}
.library-info>.small{font-size:9px}
.library-info #stats{max-width:480px;margin:12px 0;padding:12px 0}
.library-info #stats b{font-size:25px}
.library-info #model-summary{font:600 12px/1.5 var(--title);margin:0 0 8px}
.library-info small{display:block;font-size:11px;color:var(--dim);line-height:1.5}
@media(max-width:1000px) and (min-width:601px){.motion-scene{padding:16px}.motion-copy{font-size:36px}.motion-prompt-mark{width:70px;height:70px;right:12px;margin-top:-35px}.motion-output{right:14px;width:66px;height:90px;top:50px}.motion-output svg{width:45px}.motion-star{right:-30px}.motion-scene-three .motion-copy{font-size:34px}.motion-sequence{gap:5px;font-size:7px}.motion-sequence em{display:none}.motion-bottom{padding-left:8px;gap:0}.motion-top{font-size:8px;padding:0 10px}}
@media(max-width:600px){.intro{gap:16px;padding-top:20px;padding-bottom:36px}.hero-motion{position:relative}.motion-top{display:none}.motion-canvas{height:134px}.motion-scene{padding:10px 16px}.motion-copy{font-size:38px}.motion-scene-three .motion-copy{font-size:33px}.motion-prompt-mark{width:61px;height:61px;right:14px;margin-top:-30px}.motion-prompt-mark svg{width:32px}.motion-star{width:78px;height:78px;right:0;top:27px}.motion-orbit{width:116px;height:116px;top:5px;right:-20px}.motion-chip{width:22px;height:22px;right:70px;top:10px}.motion-output{width:53px;height:71px;right:12px;top:23px;box-shadow:4px 4px 0 var(--ink)}.motion-output svg{width:38px;height:38px}.motion-output:after{bottom:8px;left:8px;right:8px;height:3px}.motion-bottom{position:absolute;bottom:3px;right:0;width:64px;height:44px;padding:0;border:0;background:var(--ink);justify-content:center}.motion-sequence{display:none}.motion-toggle{min-width:0;width:100%;height:100%;padding:0 5px;gap:5px}.library-info{padding:14px}.library-info #stats{margin:10px 0;padding:10px 0;border-bottom:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){.hero-motion:not(.motion-ready) .motion-scene-three{opacity:1}}