.om-scroll{height:200svh;background:#111;position:relative;color:#eee}.om-stage{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 70% 55%,#292a28 0, #111 67%)}.om-topline{position:absolute;top:6%;left:7%;right:7%;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.14em;color:#888;z-index:5}.om-copy{position:absolute;left:7%;top:31%;z-index:6;pointer-events:none}.om-copy h2{font:400 clamp(50px,6.5vw,100px)/1.25 'Noto Serif SC','Songti SC',serif;margin:0 0 28px;letter-spacing:-.03em}.om-copy p{font-size:15px;line-height:2;color:#aaa}.om-workspace{position:absolute;left:44%;top:15%;width:50%;height:67%;perspective:1400px;--art:0;--fold:0}.om-collection{position:absolute;left:50%;top:50%;width:250px;height:330px;transform:translate(-50%,-50%);transform-style:preserve-3d}.om-carton{position:absolute;left:26px;top:44px;width:190px;height:255px;perspective:1100px;z-index:4;filter:drop-shadow(8px 30px 22px #0005)}.om-carton-body{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(0) rotateY(0)}.om-face{position:absolute;background:#d5d3cc;border:1px solid #83847e;backface-visibility:visible}.om-front{inset:0;overflow:hidden;background:#e3e0d8}.om-side{width:62px;height:100%;top:0;background:#c3c1b8}.om-left{right:100%;transform-origin:right center}.om-right{left:100%;transform-origin:left center;background:#bdbbb2;display:flex;align-items:center;justify-content:center}.om-right>span{writing-mode:vertical-rl;font:10px Arial;letter-spacing:.2em;color:#62665f;opacity:var(--art)}.om-top{bottom:100%;height:62px;left:0;width:100%;transform-origin:bottom center;background:#d9d6ce;display:grid;place-items:center}.om-top>span{font:11px Arial;letter-spacing:.12em;color:#555;opacity:var(--art)}.om-bottom{top:100%;height:62px;width:100%;transform-origin:top center;background:#b4b3aa}.om-front:before,.om-front:after{content:'';position:absolute;background:#7b7d7455;z-index:3}.om-front:before{left:0;top:0;bottom:0;width:1px}.om-front:after{top:0;left:0;right:0;height:1px}.om-net-label{position:absolute;bottom:15px;left:15px;font:10px monospace;letter-spacing:.1em;color:#888;opacity:calc(1 - var(--art))}.om-art{position:absolute;inset:44% 0 0;opacity:var(--art);background:repeating-linear-gradient(155deg,transparent 0 11px,#ece9dc80 12px 13px,transparent 14px 21px),linear-gradient(125deg,#4e625a,#829184 66%,#b1b6a4);clip-path:polygon(0 22%,28% 0,67% 34%,100% 9%,100% 100%,0 100%);transform:translateX(calc((1 - var(--art))*-110%))}.om-pack-label{position:absolute;left:12%;top:11%;right:10%;opacity:var(--art);color:#343e37;font-family:Arial,sans-serif;transform:translateY(calc((1 - var(--art))*-30px))}.om-pack-label b{display:block;font-weight:500;font-size:25px;letter-spacing:.02em;line-height:1.02}.om-pack-label small{display:block;font-size:7px;line-height:1.7;letter-spacing:.07em;margin-top:14px}.om-pack-label i{display:block;width:20px;height:1px;background:currentColor;margin-top:12px}.om-pouch{position:absolute;z-index:5;left:-75px;top:163px;width:144px;height:172px;border-radius:8px;background:linear-gradient(100deg,#f0ece2,#d7d4c8 48%,#ebe7db);box-shadow:2px 14px 25px #0005;overflow:hidden;border:1px solid #b5b7ac;opacity:0}.om-pouch:before,.om-pouch:after{content:'';position:absolute;height:8px;left:2px;right:2px;z-index:3;background:repeating-linear-gradient(#7a7a6115 0 1px,transparent 1px 2px)}.om-pouch:before{top:3px}.om-pouch:after{bottom:3px}.om-pouch .om-pack-label b{font-size:20px}.om-pouch .om-pack-label small{font-size:6px;margin-top:8px}.om-pouch .om-art{inset:49% 0 0}.om-disc{position:absolute;left:174px;top:231px;width:130px;height:130px;padding:8px;border:1px solid #b3b2a8;border-radius:50%;background:linear-gradient(140deg,#dfdcd2,#8c9187);box-shadow:5px 12px 20px #0005;z-index:6;opacity:0}.om-disc>div{position:relative;width:100%;height:100%;border-radius:50%;background:#e6e2d8;overflow:hidden}.om-disc .om-pack-label{left:22%;top:21%}.om-disc .om-pack-label b{font-size:14px}.om-disc .om-pack-label small{font-size:4px;margin-top:5px}.om-disc .om-pack-label i{display:none}.om-disc .om-art{inset:51% 0 0}.om-tote{position:absolute;left:112px;top:-20px;width:210px;height:270px;background:#b4b7aa;box-shadow:5px 12px 30px #0004;border:1px solid #bdbfb2;z-index:1;opacity:0;transform:rotate(5deg)}.om-tote:after{content:'';position:absolute;right:0;top:0;bottom:0;width:18px;background:#747f6d55}.om-tote .om-pack-label{top:15%}.om-tote .om-art{inset:41% 0 0}.om-handle{position:absolute;width:85px;height:66px;border:5px solid #b7b9ab;border-bottom:0;border-radius:50px 50px 0 0;left:62px;bottom:98%;box-shadow:1px 0 1px #0008}.om-guides{position:absolute;inset:5% 10%;opacity:.5}.om-guides span{position:absolute;background:#ffffff18}.om-guides span:first-child{width:1px;top:0;bottom:0;left:50%}.om-guides span:nth-child(2){height:1px;left:0;right:0;top:50%}.om-guides i{position:absolute;inset:10%;border:1px dashed #ffffff20;border-radius:50%}.om-orbit{position:absolute;inset:0;pointer-events:none;color:#999;font-size:11px;letter-spacing:.1em}.om-orbit span{position:absolute}.om-orbit span:first-child{left:3%;top:55%}.om-orbit span:nth-child(2){right:4%;top:72%}.om-orbit span:nth-child(3){left:46%;top:3%}.om-swatch{position:absolute;width:72px;height:96px;top:12%;left:7%;background:repeating-linear-gradient(155deg,transparent 0 11px,#ece9dc80 12px 13px,transparent 14px 21px),#60736a;box-shadow:0 8px 16px #0004;opacity:0}.om-swatch-two{background:#c5b698;width:58px;height:58px;top:68%;left:82%}.om-type{position:absolute;right:9%;top:18%;font:400 46px 'Songti SC',serif;color:#dfdccf;opacity:0}.om-type small{font:8px Arial;display:block;letter-spacing:.15em}.om-bottomline{position:absolute;bottom:6%;left:7%;right:7%;border-top:1px solid #ffffff25;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:10px;z-index:8}.om-step{display:flex;gap:28px;color:#666}.om-step>span{transition:color .15s}.om-step>span.active{color:#eee}.om-cue{color:#999;font-size:9px}.om-progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff18}.om-progress i{display:block;height:100%;background:#ddd;width:0}
@media(max-width:700px){.om-topline{top:5%;font-size:8px}.om-topline>span:last-child{font-size:7px}.om-copy{top:13%;left:7%}.om-copy h2{font-size:clamp(42px,12vw,62px);margin-bottom:16px}.om-copy p{font-size:12px;line-height:1.9}.om-workspace{left:0;top:35%;width:100%;height:48%}.om-collection{transform:translate(-50%,-50%) scale(.8)}.om-bottomline{bottom:5%;padding-top:17px;flex-direction:column;gap:15px}.om-step{justify-content:space-between;gap:10px;font-size:9px}.om-cue{font-size:8px}.om-orbit{font-size:9px}.om-orbit span:first-child{left:8%}.om-orbit span:nth-child(2){right:8%}.om-swatch{width:50px;height:68px;left:9%}.om-swatch-two{width:44px;height:44px}.om-type{font-size:32px;right:9%}}
@media(prefers-reduced-motion:reduce){.om-scroll{height:100svh}.om-stage *{will-change:auto}}