.bag-landing{box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;min-height:100dvh;justify-items:center;padding:2rem 1rem 0;background:#fff}.bag-landing__title{margin:0;color:#ff4da6;font-family:"Press Start 2P",monospace;font-size:clamp(1.5rem,3vw,3rem);font-weight:200;line-height:1.15;text-align:center}.bag-landing__subtitle{min-height:1.6em;margin:.85rem 0 0;color:#ff4da6;font-family:"Press Start 2P",monospace;font-size:clamp(.6rem,1.5vw,.85rem);line-height:1.6;opacity:0;transition:opacity .24s ease}.bag-landing__subtitle.is-visible{opacity:1}.bag-scene{--laptop-width: 84%;position:relative;align-self:end;width:min(86vw,720px,74dvh);aspect-ratio:1.15;container-type:inline-size;isolation:isolate;touch-action:none}.bag-scene:after{position:absolute;z-index:11;top:38%;right:0;bottom:0;left:0;content:"";pointer-events:none}.bag-scene__back,.bag-scene__front-strap,.bag-scene__front{position:absolute;top:15%;left:0;display:block;width:100%;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}.bag-scene__back{z-index:0}.bag-scene__front-strap{z-index:9}.bag-scene__front{z-index:10}.bag-item{--layer: 1;--angle: 0deg;--lift: 0%;position:absolute;z-index:var(--layer);display:block;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}a.bag-item{color:inherit;text-decoration:none}.bag-item>img,.bag-item>span{display:block;width:100%;height:auto;transform:rotate(var(--angle));transform-origin:center center;transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease}.bag-item img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}.bag-item:is(:focus-visible,.is-tapped,.is-swiped)>img,.bag-item:is(:focus-visible,.is-tapped,.is-swiped)>span{transform:translateY(calc(-1 * var(--lift))) rotate(var(--angle));filter:drop-shadow(0 8px 7px rgb(0 0 0 / .16))}@media(hover:hover)and (pointer:fine){.bag-item:hover>img,.bag-item:hover>span{transform:translateY(calc(-1 * var(--lift))) rotate(var(--angle));filter:drop-shadow(0 8px 7px rgb(0 0 0 / .16))}}.bag-item:focus-visible{outline:none}.bag-item:focus-visible>img,.bag-item:focus-visible>span{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #171717) drop-shadow(0 8px 7px rgb(0 0 0 / .16))}.bag-item--laptop{--layer: 1;--angle: -7deg;--lift: 30cqw;top:-10%;left:0;width:var(--laptop-width)}.bag-item--book{--layer: 4;--angle: 8deg;--lift: 30cqw;top:8%;left:25%;width:calc(var(--laptop-width) * .401)}.bag-book{position:relative;display:block;box-shadow:-5px 4px #dfd9cf,-8px 6px #777067,2px 5px 12px #0000002e}.bag-book:before{position:absolute;z-index:1;top:0;left:0;width:7%;height:100%;background:linear-gradient(90deg,rgb(55 35 20 / .55),transparent);content:"";pointer-events:none}.bag-item--notebook{--layer: 3;--angle: -5deg;--lift: 30cqw;top:5%;left:40%;width:calc(var(--laptop-width) * .401)}.bag-item--laptop,.bag-item--notebook,.bag-item--churu,.bag-item--switch{pointer-events:none}.bag-item--laptop:before,.bag-item--notebook:before,.bag-item--churu:before,.bag-item--switch:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";pointer-events:auto;transform:rotate(var(--angle))}.bag-item--laptop:before{clip-path:inset(8% 4% 8% 5% round 1.5%)}.bag-item--laptop.is-tapped:before{transform:translateY(calc(-1 * var(--lift))) rotate(var(--angle))}.bag-item--churu:before{clip-path:inset(31% 0 29%)}.bag-item--switch:before{clip-path:inset(4% 4% 4% 4% round 2%)}.bag-item--laptop img,.bag-item--notebook img,.bag-item--churu>img,.bag-item--switch img{pointer-events:none}.bag-item--notebook:before{clip-path:inset(0 round 3%)}.bag-item--notebook .bag-notebook{pointer-events:auto}.bag-notebook{position:relative;display:block;aspect-ratio:364 / 549}.bag-notebook img{position:absolute;top:-3%;left:-35%;max-width:none;width:170%}.bag-item--churu{--layer: 3;--angle: -72deg;--lift: 15cqw;top:25%;left:65%;width:calc(var(--laptop-width) * .524)}.bag-item--switch{--layer: 2;--angle: 88deg;--lift: 15cqw;top:25%;left:40%;width:calc(var(--laptop-width) * .844)}.bag-switch{position:relative;display:block}.bag-switch:after{position:absolute;top:18.2%;left:22.3%;width:55%;height:68.5%;border-radius:1%;background:#050608;content:"";pointer-events:none}@media(max-width:600px){.bag-landing{padding:1.25rem .5rem 0}.bag-scene{align-self:center;width:min(82vw,calc((100dvh - 2.5rem)*1.15))}}@media(prefers-reduced-motion:reduce){.bag-item>img,.bag-item>span,.bag-landing__subtitle{transition:none}}