.m3{perspective:700px;perspective-origin:50% 30%;place-items:center;width:200px;height:170px;display:grid;position:relative}.m3 *{box-sizing:border-box}.m3-shadow{background:radial-gradient(closest-side,color-mix(in srgb,var(--forest-950) 26%,transparent),transparent);border-radius:50%;width:120px;height:14px;margin-left:-60px;animation:6s ease-in-out infinite art-loop-m3-shadow;position:absolute;bottom:8px;left:50%}.m3-front>i,.m3-back:not(.is-blank)>i,.m3-sticker-body,.m3-banner-body,.m3-poster-frame span,.m3-side-front,.m3-side-back,.m3-side-top,.m3-tote-body span,.m3-shirt-body span{background-image:var(--art);background-position:50%;background-repeat:no-repeat;background-size:cover}.m3-strip.is-printed{background-image:var(--art);background-position-x:calc(var(--strip) * var(--k) * -1)}.m3-card{--dx:.42;--dy:.5;--lift:color-mix(in srgb,var(--forest-950) 18%,transparent);--fall:color-mix(in srgb,var(--forest-950) 10%,transparent)}.m3-card[data-tall=square]{--dx:.5;--dy:.36}.m3-card[data-tall=true]{--dx:.66;--dy:.16}.m3-card:not([data-pair]){--dx:.05;--dy:.07;--fit:.82}.m3-card-body{width:min(calc(var(--m3-w,178px) * var(--fit,1) / (1 + var(--dx))),calc(var(--m3-h,138px) * var(--fit,1) / (1 + var(--dy)) * var(--ratio,1.75)));aspect-ratio:var(--ratio,1.75);transform:translate(calc(var(--dx) * -50%),calc(var(--dy) * 50%)) perspective(1400px) rotateX(10deg) rotate(-2deg);animation:7s ease-in-out infinite art-loop-m3-float;position:relative}.m3-face{background-color:var(--white);filter:drop-shadow(0 1px 0 var(--lift)) drop-shadow(0 3px 4px var(--fall)) drop-shadow(0 14px 16px var(--fall));position:absolute;inset:0;container-type:inline-size}.m3-face>i{background-color:inherit;position:absolute;inset:0}.m3-card .m3-front>i,.m3-card .m3-back:not(.is-blank)>i{background-size:100% 100%}.m3-card[data-shape] .m3-face{background-color:#0000}.m3-card[data-shape] .m3-face>i{background-color:var(--white);clip-path:var(--cut)}.m3-card[data-shape] .m3-back.is-blank>i{background-color:var(--paper-50)}.m3-card .m3-back{transform:translate(calc(var(--dx) * 100%),calc(var(--dy) * -100%)) rotate(3deg)}.m3-card:not([data-pair]) .m3-back{transform:translate(calc(var(--dx) * 100%),calc(var(--dy) * 100%)) rotate(2.5deg)}.m3-back.is-blank{background:var(--paper-50)}.m3-defs{width:0;height:0;position:absolute}.m3-card .m3-shadow{display:none}.m3-card[data-shape=rounded]{--cut:inset(0 round 3.6cqw)}.m3-card[data-shape=circle],.m3-card[data-shape=oval]{--cut:ellipse(50% 50%)}.m3-card[data-shape=leaf]{--cut:url(#m3-leaf)}.m3-sticker-body{border:7px solid var(--white);background-color:var(--white);width:118px;height:118px;box-shadow:0 12px 26px color-mix(in srgb,var(--art-violet) 22%,transparent);border-radius:26px;animation:4s ease-in-out infinite art-loop-m3-wobble;position:relative}.m3-peel{background:linear-gradient(135deg,transparent 50%,var(--paper-100) 50%);width:34px;height:34px;box-shadow:-3px -3px 6px color-mix(in srgb,var(--ink) 14%,transparent);transform-origin:100% 100%;border-radius:0;animation:4s ease-in-out infinite art-loop-m3-peel;position:absolute;bottom:-7px;right:-7px}.m3-mug{--r:52px;--strip:calc(var(--r) * .2633);--h:116px}.m3-mug-body{width:calc(var(--r) * 2);height:var(--h);transform-style:preserve-3d;animation:10s linear infinite art-loop-m3-spin;position:relative}.m3-strip{width:calc(var(--strip) + .6px);height:100%;margin-left:calc(var(--strip) / -2);background-color:var(--white);background-size:calc(var(--strip) * 18) 100%;backface-visibility:hidden;transform:rotateY(calc(var(--i) * 15deg)) translateZ(var(--r));box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--forest-950) calc(var(--shade,0) * 1%),transparent);background-repeat:no-repeat;position:absolute;top:0;left:50%}.m3-strip:after{content:"";background:linear-gradient(180deg,color-mix(in srgb,var(--white) 30%,transparent),transparent 18%,transparent 82%,color-mix(in srgb,var(--forest-950) 10%,transparent));position:absolute;inset:0}.m3-mug-handle{border:10px solid var(--white);transform-origin:0;width:34px;height:64px;transform:rotateY(90deg) translateX(var(--r));box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 8%,transparent);border-left:0;border-radius:50%;position:absolute;top:24px;left:50%}.m3-mug-rim{width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin-top:calc(var(--r) * -1);border:4px solid var(--white);background:radial-gradient(closest-side,var(--sage-100),var(--paper-100));border-radius:50%;position:absolute;top:0;left:0;transform:rotateX(90deg)}.m3-banner-body{border:4px solid var(--white);background-color:var(--white);width:176px;height:88px;box-shadow:0 14px 28px color-mix(in srgb,var(--art-cobalt) 20%,transparent);transform-origin:50% 0;border-radius:3px;animation:5s ease-in-out infinite art-loop-m3-sway;position:relative}.m3-banner-body i{border:2px solid var(--sage-300);background:var(--white);border-radius:50%;width:8px;height:8px;position:absolute}.m3-banner-body i:first-child{top:-2px;left:-2px}.m3-banner-body i:nth-child(2){top:-2px;right:-2px}.m3-banner-body i:nth-child(3){bottom:-2px;left:-2px}.m3-banner-body i:nth-child(4){bottom:-2px;right:-2px}.m3-poster-frame{background:var(--forest-950);width:104px;height:136px;box-shadow:0 16px 30px color-mix(in srgb,var(--forest-950) 24%,transparent);border-radius:3px;padding:7px;animation:6s ease-in-out infinite art-loop-m3-tilt}.m3-poster-frame span{border:6px solid var(--white);background-color:var(--white);width:100%;height:100%;display:block}.m3-box{--w:112px;--hgt:76px;--d:76px}.m3-box-body{width:var(--w);height:var(--hgt);transform-style:preserve-3d;animation:12s linear infinite art-loop-m3-box;position:relative}.m3-side{background-color:var(--butter-100);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);position:absolute;top:50%;left:50%}.m3-side-front,.m3-side-back{width:var(--w);height:var(--hgt);margin:calc(var(--hgt) / -2) 0 0 calc(var(--w) / -2)}.m3-side-front{transform:translateZ(calc(var(--d) / 2))}.m3-side-back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}.m3-side-left,.m3-side-right{width:var(--d);height:var(--hgt);margin:calc(var(--hgt) / -2) 0 0 calc(var(--d) / -2);background:linear-gradient(90deg,var(--peach-100),var(--butter-100))}.m3-side-left{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}.m3-side-right{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}.m3-side-top{width:var(--w);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--w) / -2);transform:rotateX(90deg) translateZ(calc(var(--hgt) / 2))}.m3-tote-body{background:var(--paper-100);width:118px;height:120px;box-shadow:inset 0 -10px 18px color-mix(in srgb,var(--ink) 6%,transparent),0 14px 26px color-mix(in srgb,var(--forest-950) 16%,transparent);transform-origin:50% 0;border-radius:10px;place-items:center;margin-top:22px;animation:6s ease-in-out infinite art-loop-m3-sway;display:grid;position:relative}.m3-tote-handle{border:6px solid var(--paper-100);border-bottom:0;border-radius:16px 16px 0 0;width:66px;height:46px;position:absolute;top:-34px;left:26px}.m3-tote-body span{aspect-ratio:1;background-color:var(--white);border-radius:3px;width:76%}.m3-shirt-body{width:150px;height:150px;animation:6s ease-in-out infinite art-loop-m3-tilt;position:relative}.m3-shirt-body svg{width:100%;height:100%;filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--forest-950) 16%,transparent))}.m3-shirt-body span{aspect-ratio:1;background-color:#0000;width:34%;margin-left:-17%;position:absolute;top:34%;left:50%}@keyframes art-loop-m3-float{0%,to{transform:translate(calc(var(--dx) * -50%),calc(var(--dy) * 50%)) perspective(1400px) rotateX(10deg) rotate(-2deg)}50%{transform:translate(calc(var(--dx) * -50%),calc(var(--dy) * 50% - 4px)) perspective(1400px) rotateX(7deg) rotate(-1deg)}}@keyframes art-loop-m3-spin{0%{transform:rotateX(-14deg)rotateY(0)}to{transform:rotateX(-14deg)rotateY(360deg)}}@keyframes art-loop-m3-box{0%{transform:rotateX(-20deg)rotateY(0)}to{transform:rotateX(-20deg)rotateY(360deg)}}@keyframes art-loop-m3-sway{0%,to{transform:rotateY(-24deg)rotateX(6deg)skewY(-1deg)}50%{transform:rotateY(24deg)rotateX(6deg)skewY(1deg)}}@keyframes art-loop-m3-tilt{0%,to{transform:rotateY(-16deg)rotate(-1.5deg)}50%{transform:rotateY(16deg)rotate(1.5deg)}}@keyframes art-loop-m3-wobble{0%,to{transform:rotate(-6deg)rotateY(-14deg)}50%{transform:rotate(5deg)rotateY(14deg)}}@keyframes art-loop-m3-peel{0%,30%,to{transform:rotate(0)}55%,75%{transform:rotate(-18deg)scale(1.15)}}@keyframes art-loop-m3-shadow{0%,to{opacity:.9;transform:scaleX(1)}50%{opacity:.7;transform:scaleX(.82)}}@media (prefers-reduced-motion:reduce){.m3-shadow,.m3-card-body,.m3-sticker-body,.m3-peel,.m3-mug-body,.m3-banner-body,.m3-poster-frame,.m3-box-body,.m3-tote-body,.m3-shirt-body{animation:none}.m3-mug-body{transform:rotateX(-14deg)rotateY(20deg)}.m3-box-body{transform:rotateX(-20deg)rotateY(-30deg)}}