.shirt-motion{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:start;gap:24px;height:500svh;margin:20px calc(-1 * var(--edge)) 0;padding:0 3vw;background:var(--paper)}
.shirt-motion .object{grid-column:2;grid-row:1;position:sticky;top:18px;min-width:0;z-index:1;align-self:start;height:calc(100svh - 36px);display:flex;flex-direction:column;background:var(--paper)}
.shirt-motion .object-caption{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:10px 12px;color:var(--muted)}
.shirt-motion #variant{color:var(--ink)}
.shirt-motion .stage{position:relative;flex:1;min-height:0;overflow:hidden}
.shirt-motion #poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:40px 15%;mix-blend-mode:multiply}
.shirt-motion #canvas-wrap{position:absolute;inset:0;opacity:0;transition:opacity .22s}
.shirt-motion .is-ready #canvas-wrap{opacity:1}
.shirt-motion .is-ready #poster{visibility:hidden;pointer-events:none}
.shirt-motion canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.shirt-motion canvas:focus-visible{outline:2px solid #68725d;outline-offset:-5px}
.shirt-motion #loading{position:absolute;left:0;right:0;bottom:15px;text-align:center;font-size:11px;color:var(--muted);padding:0 15px}
.shirt-motion .object-foot{display:flex;justify-content:space-between;gap:12px;padding:12px;font-size:11px;color:var(--muted);line-height:1.4}
.shirt-motion .scroll-meter{height:1px;background:var(--line);margin:2px 12px 12px}
.shirt-motion .scroll-meter i{display:block;height:1px;background:#77816b;transform-origin:left;transform:scaleX(0)}
.shirt-motion .photo-rail{grid-row:1;min-width:0;position:relative;height:100%;align-self:stretch}
.shirt-motion .rail-left{grid-column:1}.shirt-motion .rail-right{grid-column:3}
.shirt-motion .photo-slot{position:absolute;left:0;right:0;bottom:0;top:calc(400svh * var(--shirt-cue) + 16vh)}
.shirt-motion .photo{position:sticky;top:16vh;margin:0;padding-bottom:12px;min-height:calc(65vh + 40px);background:var(--paper)}
.shirt-motion .photo-visual{position:relative;width:100%;aspect-ratio:3/4;max-height:65vh;overflow:hidden;transform-origin:50% 35%;will-change:transform;backface-visibility:hidden;box-shadow:0 12px 28px #2026190b}
.shirt-motion .photo-visual>a{display:block;width:100%;height:100%;overflow:visible}
.shirt-page .shirt-motion .photo-visual img{width:100%;height:100%;max-height:none;object-fit:contain;transition:none;transform:none}
.shirt-motion .photo-visual.turned{aspect-ratio:4/3}
.shirt-page .shirt-motion .photo-visual.turned img{position:absolute;left:50%;top:50%;width:75%;height:133.333333%;transform:translate(-50%,-50%) rotate(90deg)}
.shirt-motion .photo figcaption{font-size:10px;color:var(--muted);padding:13px 0 0;margin-top:0;line-height:1.5;will-change:opacity}
@media(max-width:1050px){.shirt-motion{gap:16px;padding:0 20px;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr)}.shirt-motion .object-caption,.shirt-motion .object-foot{font-size:10px;padding-inline:5px}}
@media(max-width:760px){
 .shirt-motion{display:block;height:600svh;padding:0 16px}
 .shirt-motion .object{top:0;height:42svh;min-height:270px;width:100%;margin:0}
 .shirt-motion .object-caption{padding:8px 5px 0;font-size:10px}
 .shirt-motion .object-foot{padding:5px;font-size:9px}
 .shirt-motion .scroll-meter{margin:0 5px 5px}
 .shirt-motion #poster{padding:8px 25%}
 .shirt-motion .photo-rail{display:block;position:absolute;inset:0 16px;width:auto;height:100%;pointer-events:none}
 .shirt-motion .photo-slot{top:calc(500svh * var(--shirt-cue) + max(42svh,270px))}
 .shirt-motion .photo{top:max(42svh,270px);width:100%;padding:8px 0 14px;min-height:calc(40svh + 45px)}
 .shirt-motion .photo-visual{height:40svh;max-height:40svh;aspect-ratio:auto}
 .shirt-motion .photo-visual>a{pointer-events:auto}
 .shirt-motion .photo-visual.turned{width:min(100%,53.333svh);height:auto;max-height:40svh;aspect-ratio:4/3;margin:auto}
 .shirt-motion .photo figcaption{font-size:10px;padding-top:8px;text-align:center}
}
@media(prefers-reduced-motion:reduce){.shirt-motion #canvas-wrap{transition:none}.shirt-motion .photo-visual{will-change:auto;box-shadow:none}}
#shirt-lightbox>.shirt-lightbox-frame{height:calc(100% - 65px);width:100%;margin:0;overflow:hidden}
#shirt-lightbox .shirt-lightbox-frame img{width:100%;height:100%;object-fit:contain}
#shirt-lightbox .shirt-lightbox-frame img.is-turned{flex:none;width:calc(100svh - 150px);height:calc(100vw - 50px);max-width:none;max-height:none;transform:rotate(90deg)}