:root .sig--des-cmyk { display: grid; place-items: center; padding: clamp(14px, 2.4vw, 30px); }
:root .sig--des-cmyk .dc__defs, :root .sig--des-cmyk.dc__defs { position: absolute; width: 0; height: 0; }
:root .sig--des-cmyk .dc, :root .sig--des-cmyk.dc { position: relative; width: 100%; max-width: 640px; aspect-ratio: 4 / 3; }
:root .sig--des-cmyk .dc__sheet, :root .sig--des-cmyk.dc__sheet { position: absolute; inset: 0; isolation: isolate; border-radius: 6px; background: #fbfaf6; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .9); opacity: 0; clip-path: inset(0 round 6px); }
:root .sig--des-cmyk .dc__sheet::before, :root .sig--des-cmyk.dc__sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .7), transparent 60%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .012) 0 2px, transparent 2px 4px); pointer-events: none; }
:root .sig--des-cmyk .dc__trim, :root .sig--des-cmyk.dc__trim { position: absolute; left: 27.8%; top: 13%; width: 44.4%; height: 74%; }
:root .sig--des-cmyk .dc__pl, :root .sig--des-cmyk.dc__pl { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0; will-change: transform; }
:root .sig--des-cmyk .dc__pl svg, :root .sig--des-cmyk.dc__pl svg { display: block; width: 100%; height: 100%; }
:root .sig--des-cmyk .dc__crop, :root .sig--des-cmyk.dc__crop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #1a1a1a; stroke-width: .45; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
:root .sig--des-cmyk .dc__bar, :root .sig--des-cmyk.dc__bar { position: absolute; left: 50%; top: 3.6%; width: 34%; height: 4.2%; display: flex; transform: translateX(-50%); opacity: 0; }
:root .sig--des-cmyk .dc__bar i, :root .sig--des-cmyk.dc__bar i { flex: 1; }
:root .sig--des-cmyk .dc__lb, :root .sig--des-cmyk.dc__lb { position: absolute; display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); font: 600 clamp(9px, 1.15vw, 12px)/1 var(--f-display); color: #3a3442; white-space: nowrap; opacity: 0; }
:root .sig--des-cmyk .dc__lb--0, :root .sig--des-cmyk.dc__lb--0 { left: 13.9%; top: 8.6%; }
:root .sig--des-cmyk .dc__lb--1, :root .sig--des-cmyk.dc__lb--1 { left: 13.9%; top: 91%; }
:root .sig--des-cmyk .dc__lb--2, :root .sig--des-cmyk.dc__lb--2 { left: 86.1%; top: 8.6%; }
:root .sig--des-cmyk .dc__lb--3, :root .sig--des-cmyk.dc__lb--3 { left: 86.1%; top: 91%; }
:root .sig--des-cmyk .dc__dot, :root .sig--des-cmyk.dc__dot { width: 9px; height: 9px; border-radius: 50%; }
:root .sig--des-cmyk .dc__dot--c, :root .sig--des-cmyk.dc__dot--c { background: #00aeef; }
:root .sig--des-cmyk .dc__dot--m, :root .sig--des-cmyk.dc__dot--m { background: #ec008c; }
:root .sig--des-cmyk .dc__dot--y, :root .sig--des-cmyk.dc__dot--y { background: #ffd800; }
:root .sig--des-cmyk .dc__dot--k, :root .sig--des-cmyk.dc__dot--k { background: #1a1a1a; }
:root .sig--des-cmyk .dc__reg, :root .sig--des-cmyk.dc__reg { position: absolute; top: 50%; width: 5.4%; aspect-ratio: 1; transform: translate(-50%, -50%); isolation: isolate; }
:root .sig--des-cmyk .dc__reg--l, :root .sig--des-cmyk.dc__reg--l { left: 23.6%; }
:root .sig--des-cmyk .dc__reg--r, :root .sig--des-cmyk.dc__reg--r { left: 76.4%; }
:root .sig--des-cmyk .dc__rg, :root .sig--des-cmyk.dc__rg { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0; }
:root .sig--des-cmyk .dc__rg svg, :root .sig--des-cmyk.dc__rg svg { display: block; width: 100%; height: 100%; fill: none; stroke-width: 1.6; }
:root .sig--des-cmyk .dc__rg--c svg, :root .sig--des-cmyk.dc__rg--c svg { stroke: #00aeef; }
:root .sig--des-cmyk .dc__rg--m svg, :root .sig--des-cmyk.dc__rg--m svg { stroke: #ec008c; }
:root .sig--des-cmyk .dc__rg--y svg, :root .sig--des-cmyk.dc__rg--y svg { stroke: #ffd800; }
:root .sig--des-cmyk .dc__rg--k svg, :root .sig--des-cmyk.dc__rg--k svg { stroke: #1a1a1a; }
:root .sig--des-cmyk .dc__fold, :root .sig--des-cmyk.dc__fold { --img: none; position: absolute; left: 27.8%; top: 13%; width: 44.4%; height: 74%; display: flex; perspective: 1400px; transform-style: preserve-3d; opacity: 0; }
:root .sig--des-cmyk .dc__p, :root .sig--des-cmyk.dc__p { position: relative; flex: 1; transform-style: preserve-3d; }
:root .sig--des-cmyk .dc__p--2, :root .sig--des-cmyk.dc__p--2, :root .sig--des-cmyk .dc__p > i, :root .sig--des-cmyk.dc__p > i, :root .sig--des-cmyk .dc__p > b, :root .sig--des-cmyk.dc__p > b { box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7); }
:root .sig--des-cmyk .dc__p--2, :root .sig--des-cmyk.dc__p--2, :root .sig--des-cmyk .dc__p > i, :root .sig--des-cmyk.dc__p > i { background: var(--img) no-repeat; background-size: 300% auto; }
:root .sig--des-cmyk .dc__p--2, :root .sig--des-cmyk.dc__p--2 { background-position: 50% 50%; }
:root .sig--des-cmyk .dc__p > i, :root .sig--des-cmyk.dc__p > i, :root .sig--des-cmyk .dc__p > b, :root .sig--des-cmyk.dc__p > b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
:root .sig--des-cmyk .dc__p--1, :root .sig--des-cmyk.dc__p--1 { transform-origin: 100% 50%; z-index: 2; }
:root .sig--des-cmyk .dc__p--1 > i, :root .sig--des-cmyk.dc__p--1 > i { background-position: 0% 50%; }
:root .sig--des-cmyk .dc__p--3, :root .sig--des-cmyk.dc__p--3 { transform-origin: 0% 50%; z-index: 1; }
:root .sig--des-cmyk .dc__p--3 > i, :root .sig--des-cmyk.dc__p--3 > i { background-position: 100% 50%; }
:root .sig--des-cmyk .dc__p > b, :root .sig--des-cmyk.dc__p > b { transform: rotateY(180deg); background: linear-gradient(#f3f1ec, #e9e5de); }
:root .sig--des-cmyk .dc__p > b::before, :root .sig--des-cmyk.dc__p > b::before { content: ""; position: absolute; left: 16%; right: 16%; top: 14%; height: 40%; background: repeating-linear-gradient(180deg, #cfc8bf 0 2px, transparent 2px 9px); }
:root .sig--des-cmyk .dc__p--1 > b::after, :root .sig--des-cmyk.dc__p--1 > b::after { content: ""; position: absolute; left: 16%; bottom: 14%; width: 40%; aspect-ratio: 1; border-radius: 4px; background: #1a1a1a; opacity: .82; -webkit-mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 22% 22%; }
:root .sig--des-cmyk .dc__job, :root .sig--des-cmyk.dc__job { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; justify-content: center; gap: 10px; transform: translateY(100%); padding-top: 12px; font: 500 13px/1.2 var(--f-body); color: var(--ink-2); }
:root .sig--des-cmyk .dc__st, :root .sig--des-cmyk.dc__st { color: var(--lilac); font-family: var(--f-display); font-weight: 600; }
:root .sig--des-cmyk .dc__st::after, :root .sig--des-cmyk.dc__st::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 0 2px 10px; border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
:root .sig--des-cmyk .dc.is-done .dc__sheet, :root .sig--des-cmyk.dc.is-done .dc__sheet, :root .sig--des-cmyk .dc.is-done .dc__pl, :root .sig--des-cmyk.dc.is-done .dc__pl, :root .sig--des-cmyk .dc.is-done .dc__rg, :root .sig--des-cmyk.dc.is-done .dc__rg, :root .sig--des-cmyk .dc.is-done .dc__lb, :root .sig--des-cmyk.dc.is-done .dc__lb, :root .sig--des-cmyk .dc.is-done .dc__bar, :root .sig--des-cmyk.dc.is-done .dc__bar { opacity: 1; }
:root .sig--des-cmyk .dc.is-done .dc__crop, :root .sig--des-cmyk.dc.is-done .dc__crop { opacity: 1; stroke-dashoffset: 0; }