.yidi-stage{--identity:0;--flat-out:0;--bottle:0;--wrap-in:0;--wrap:0;--finished:0;--range:0;--shelf:0;--model-scale:1;background:#fff}
.yidi-scene{position:absolute;inset:64px 0 62px;overflow:hidden}
.yidi-model{width:600px;height:600px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--model-scale));opacity:calc(1 - var(--range));transform-style:flat}
.yidi-flat{position:absolute;left:0;top:156.5px;width:600px;height:287px;overflow:hidden;opacity:calc(1 - var(--flat-out));border:1px solid #c5beb4;box-shadow:0 12px 26px #301b3020;transform:translateY(calc(-35px*var(--flat-out))) rotateX(calc(8deg*var(--flat-out)))}
.blank-label-crop{position:absolute;inset:0;overflow:hidden;background:#fff}.blank-label-crop img{position:absolute;width:708px;height:auto;max-width:none;left:-54px;top:-93px}.yidi-flat-art{display:block;width:100%;height:100%;object-fit:fill;clip-path:inset(0 calc((1 - var(--identity))*100%) 0 0)}
.yidi-blank-photo,.yidi-finished-photo{position:absolute;width:440px;height:586.667px;left:80px;top:6.667px}.yidi-blank-photo{opacity:calc(var(--bottle)*(1 - var(--finished)))}.yidi-finished-photo{opacity:var(--finished);transform:translateZ(2px)}.yidi-blank-photo img,.yidi-finished-photo img{width:100%;height:100%;display:block;object-fit:contain}
.yidi-wrap{position:absolute;width:600px;height:287px;left:0;top:221.5px;perspective:1800px;transform-style:preserve-3d;opacity:calc(var(--wrap-in)*(1 - var(--finished)))}
.label-strip{position:absolute;top:0;left:300px;width:8.48px;height:287px;background-image:url('/assets/yidi-label.png');background-size:600px 287px;background-repeat:no-repeat;backface-visibility:hidden;transform-style:preserve-3d;transform-origin:center center}
.yidi-family{position:absolute;inset:5% 3%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:0;opacity:calc(var(--range)*(1 - var(--shelf)));transform:scale(calc(.88 + var(--range)*.12))}.yidi-family figure{min-width:0;overflow:hidden}.yidi-family img{display:block;width:140%;max-width:none;margin-left:-20%;height:auto;mix-blend-mode:multiply}.yidi-family figcaption{text-align:center;font-size:11px;font-family:'IBM Plex Mono',monospace;padding:12px 0;color:#3c1030}
.yidi-stage .stage-head,.yidi-stage .stage-footer{background:transparent}.yidi-stage .stage-progress i{background:#3c1030}.yidi-page .swatches i{border-color:#3333}
.label-detail{padding:64px 44px 40px;border-bottom:1px solid var(--line)}.label-detail .retail-head{margin-bottom:40px}.label-detail img{width:100%;height:auto;display:block;border:1px solid #d0cabc;border-radius:14px}.label-detail figcaption{display:flex;justify-content:space-between;gap:20px;padding-top:18px;font:9px 'IBM Plex Mono',monospace}.yidi-showcase .mallow-range-grid img{background:#fff;mix-blend-mode:multiply}.yidi-page .concept-note{font-family:'IBM Plex Mono',monospace}
@media(max-width:900px){.yidi-scene{inset:36px 0 38px}.yidi-family{inset:0 3%}.yidi-family figcaption{font-size:8px;padding:5px 0}.label-detail{padding:42px 20px 30px}.label-detail .retail-head{margin-bottom:28px}.label-detail img{border-radius:8px}.label-detail figcaption{font-size:7px}}
@media(prefers-reduced-motion:reduce){.yidi-model{transform-style:flat}.yidi-wrap{display:none}}
@media(max-width:600px){.yidi-showcase .mallow-range-grid{grid-template-columns:1fr;gap:36px}.yidi-showcase .mallow-range-grid img{width:min(100%,280px);margin:auto}.yidi-showcase .mallow-range-grid figcaption{flex-direction:row;font-size:10px}.yidi-showcase .mallow-range-grid figure+figure:before{left:0;top:-18px;bottom:auto;width:100%;height:1px}}

.yidi-shelf{position:absolute;inset:0;overflow:hidden;opacity:var(--shelf);transform:scale(calc(1.035 - var(--shelf)*.035))}.yidi-shelf img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}.yidi-stage .stage-head,.yidi-stage .stage-footer{background:rgb(252 250 244 / calc(var(--shelf)*.94))}