/* Scoped: custom.html Color Library only */
.cl-finish { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: stretch; }
.cl-stage { position: relative; margin: 0; background: radial-gradient(ellipse at 50% 38%, var(--zmrs-ink-4) 0%, var(--zmrs-ink-2) 55%, var(--zmrs-ink) 100%); border: 1px solid var(--zmrs-rule); aspect-ratio: 16/10; overflow: hidden; }
.cl-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--zmrs-dur-slow) var(--zmrs-ease-out); }
.cl-stage img.is-swapping { opacity: 0; }
.cl-stage::before, .cl-stage::after { content: ""; position: absolute; width: var(--zmrs-bracket-size); height: var(--zmrs-bracket-size); border: 0 solid var(--zmrs-steel); z-index: 2; pointer-events: none; }
.cl-stage::before { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.cl-stage::after { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.cl-tag { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(10,10,10,.82); border-top: 1px solid var(--zmrs-rule); border-right: 1px solid var(--zmrs-rule); font-family: var(--zmrs-font-mono); font-size: 11px; letter-spacing: var(--zmrs-track-label); text-transform: uppercase; color: var(--zmrs-steel); }
.cl-tag b { color: var(--zmrs-bone); font-weight: 500; }
.cl-err { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 8px 12px; background: rgba(10,10,10,.9); border: 1px solid var(--zmrs-brake); font-family: var(--zmrs-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--zmrs-bone); }
.cl-err[hidden] { display: none; }
.cl-panel { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.cl-name { font-family: var(--zmrs-font-display); font-weight: 700; font-size: clamp(34px,4vw,56px); line-height: .95; letter-spacing: var(--zmrs-track-display); text-transform: uppercase; color: var(--zmrs-bone); margin: 0; }
.cl-kicker { font-family: var(--zmrs-font-mono); font-size: 11px; letter-spacing: var(--zmrs-track-caption); text-transform: uppercase; color: var(--zmrs-steel-2); }
.cl-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 1px; background: var(--zmrs-rule); border: 1px solid var(--zmrs-rule); }
.cl-sw { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; min-width: 44px; padding: 8px 14px; background: var(--zmrs-ink); font-family: var(--zmrs-font-mono); font-size: 11px; letter-spacing: var(--zmrs-track-label); text-transform: uppercase; color: var(--zmrs-steel); position: relative; transition: background var(--zmrs-dur-base) var(--zmrs-ease-precise), color var(--zmrs-dur-base) var(--zmrs-ease-precise); }
.cl-sw i { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.cl-sw:hover { background: var(--zmrs-ink-3); color: var(--zmrs-bone); }
.cl-sw:focus-visible { outline: 2px solid var(--zmrs-brake); outline-offset: -2px; z-index: 1; }
.cl-sw[aria-checked="true"] { background: var(--zmrs-ink-4); color: var(--zmrs-bone); box-shadow: inset 2px 0 0 var(--zmrs-brake); }
.cl-sw[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--zmrs-ink-4), 0 0 0 3px var(--zmrs-bone); }
.cl-cta { align-self: flex-start; }
@media (max-width: 860px) { .cl-finish { grid-template-columns: 1fr; } .cl-swatches { grid-template-columns: repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce) { .cl-stage img, .cl-sw { transition: none; } }