/* Keep the motion outside the image SVG so view changes do not restart it. */
.shorts-intro{grid-column:1/-1;margin:24px 0 -8px;padding-top:38px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:end;gap:24px}
.shorts-intro h3{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-1.5px;margin:8px 0 0}
.shorts-intro>p{font-size:12px;line-height:1.8;color:var(--muted);max-width:240px;margin:0}
.shorts-card{min-width:0;scroll-margin-top:26px}
.shorts-card .concept-card-heading{margin-top:24px}.shorts-card h3{font-size:23px}
.shorts-type{display:block;color:var(--muted);font-size:10px;letter-spacing:1.1px;text-transform:uppercase;margin:8px 0 0}
.shorts-stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:5/4;min-height:340px;padding:26px 36px 36px;border:0;background:#eaeae7;overflow:hidden;color:var(--ink);cursor:zoom-in}
.shorts-stage:focus-visible,.shorts-card button:focus-visible,.shorts-dialog button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shorts-float{width:100%;height:100%;min-height:0;display:grid;place-items:center;animation:shorts-float 12s ease-in-out infinite;will-change:transform;pointer-events:none}
.shorts-card[data-shorts-collection=ease] .shorts-float{animation-delay:-4s}
.shorts-art{width:100%;height:100%;min-height:0;display:grid;place-items:center;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.shorts-art svg{display:block;width:100%;height:100%;user-select:none}
.shorts-shadow{position:absolute;bottom:22px;left:50%;width:42%;height:12px;background:radial-gradient(ellipse,#00000017,transparent 70%);transform:translateX(-50%);animation:shorts-shadow 12s ease-in-out infinite;pointer-events:none}
.shorts-card[data-shorts-collection=ease] .shorts-shadow{animation-delay:-4s}
.shorts-card[data-shorts-motion=paused] .shorts-float,.shorts-card[data-shorts-motion=paused] .shorts-shadow{animation-play-state:paused}
.shorts-card[data-shorts-visible=false] .shorts-float,.shorts-card[data-shorts-visible=false] .shorts-shadow{animation-play-state:paused}
.shorts-stage .concept-zoom-label{z-index:1}
.shorts-number{position:absolute;top:18px;left:20px;font-size:9px;letter-spacing:1px;color:var(--muted);pointer-events:none}
.shorts-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:13px}
.shorts-controls .views{flex-wrap:wrap}.shorts-controls .views button{min-height:40px;font-size:11px}
.shorts-motion{min-height:40px;padding:8px 0;border:0;background:none;font:inherit;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.shorts-motion:disabled{cursor:default;text-decoration:none}
.shorts-options{border:0;padding:0;margin:20px 0 0;min-width:0}.shorts-options legend{font-size:11px;color:var(--muted);padding:0;margin-bottom:12px;line-height:1.6}
.shorts-options legend span{display:inline-block;color:var(--ink);margin-left:10px}
.shorts-choices{display:flex;gap:9px;flex-wrap:wrap}
.shorts-choice{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;background:transparent;padding:5px;color:var(--ink);font:inherit;cursor:pointer}
.shorts-choice[aria-pressed=true]{border-color:var(--ink)}
.shorts-chip{display:block;width:31px;height:31px;border:1px solid #00000018;border-radius:50%;background:linear-gradient(135deg,var(--shorts-fabric) 0 68%,var(--shorts-print) 69% 100%)}
.shorts-choice[data-shorts-choice=connected] .shorts-chip:after{content:'SM';display:grid;place-items:center;font-size:8px;letter-spacing:-.5px;color:#fff;width:100%;height:100%;font-weight:600}
.shorts-variant-note{font-size:11px;line-height:1.7;margin:12px 0 0;color:var(--muted);min-height:19px}
.shorts-card .concept-description{margin-top:14px}.shorts-card .shorts-status{font-size:10px;color:var(--muted);line-height:1.6;min-height:16px;margin:7px 0 0}
.shorts-dialog .photo-dialog-stage{display:grid;place-items:center;touch-action:pan-y}
.shorts-dialog-art{width:100%;height:100%;min-height:0;pointer-events:none}
.shorts-dialog-art svg{display:block;width:100%;height:100%;transform-origin:center;transition:transform .25s ease}
.shorts-dialog .photo-dialog-stage.is-zoomed{touch-action:none}.shorts-dialog .photo-dialog-stage.is-panning svg{transition:none}
.shorts-dialog .photo-dialog-stage.is-panning{cursor:grabbing}
.shorts-dialog-status{font-size:10px;color:var(--muted);margin:8px 0 0;min-height:14px}
@keyframes shorts-float{0%,100%{transform:translate3d(-3px,3px,0) rotate(-.6deg)}25%{transform:translate3d(3px,-5px,0) rotate(.35deg)}50%{transform:translate3d(5px,-8px,0) rotate(.7deg)}75%{transform:translate3d(-2px,-3px,0) rotate(-.2deg)}}
@keyframes shorts-shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.8}50%{transform:translateX(-50%) scale(.88);opacity:.55}}
@media(hover:hover) and (pointer:fine){.shorts-stage:hover .shorts-art{transform:scale(1.025)}}
@media(max-width:700px){.shorts-intro{padding-top:28px;align-items:start;flex-direction:column;gap:14px}.shorts-intro>p{max-width:none}.shorts-stage{aspect-ratio:1/1;min-height:290px;padding:25px 24px 35px}.shorts-card .concept-card-heading{margin-top:18px}.shorts-card h3{font-size:22px}.shorts-controls{gap:7px}.shorts-controls .views button{padding:9px 11px}.shorts-options{margin-top:17px}.shorts-dialog .photo-dialog-tools{flex-wrap:wrap;gap:12px}.shorts-dialog .photo-dialog-tools p{max-width:none}}
@media(prefers-reduced-motion:reduce){.shorts-float,.shorts-shadow{animation:none;will-change:auto}.shorts-art,.shorts-dialog-art svg{transition:none}.shorts-stage:hover .shorts-art{transform:none}.shorts-dialog[open]{animation:none}}