/* Each sample shows the leather face in Cavero's original color reference. */
.swatches{gap:8px;align-items:start}
.swatch{min-width:0;padding:4px 1px;color:var(--muted);font-size:9px;line-height:1.2;border-radius:6px;transition:color .18s,background .18s}
.swatch-dot{width:100%;max-width:40px;height:36px;margin:0 auto 7px;border-radius:5px;border:1px solid #30251e45;background-image:var(--leather-reference,url('leather-colors-reference.png'));background-size:640px 427px;background-repeat:no-repeat;background-position:var(--leather-x) var(--leather-y);box-shadow:0 2px 3px #30251e18,inset 0 -1px 1px #30251e33;transition:box-shadow .18s,transform .18s}
.swatch-name{display:block;min-height:23px}
.swatch:hover .swatch-dot{transform:translateY(-2px);box-shadow:0 4px 5px #30251e24,inset 0 -1px 1px #30251e33}
.swatch[aria-pressed="true"]{color:var(--ink);font-weight:600}
.swatch[aria-pressed="true"] .swatch-dot{outline:2px solid var(--olive);outline-offset:3px;box-shadow:0 2px 3px #30251e18,inset 0 -1px 1px #30251e33}
.swatch:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
@media(max-width:580px){.swatches{gap:5px}.swatch{font-size:8px}.swatch-dot{height:33px;margin-bottom:7px;border-radius:4px}}
.key-glyph{background-size:640px 427px;background-position:var(--leather-x) var(--leather-y)}
.loop-live{width:min(100%,460px);height:auto;aspect-ratio:1;filter:none;border:1px solid #d9cdbd88;overflow:hidden}