[data-c-theme-provider]{display:contents}.c-theme-roller{gap:var(--c-space-3);color:var(--c-color-text);flex-direction:column;display:flex}.c-theme-roller__bar{padding:var(--c-space-2) var(--c-space-3);border:1px solid var(--c-color-border);border-radius:var(--c-radius-lg);background:var(--c-color-surface-raised)}.c-theme-roller__spacer{flex:auto}.c-theme-roller__body{gap:var(--c-space-4);grid-template-columns:minmax(300px,360px) 1fr;align-items:start;display:grid}.c-theme-roller__controls{max-block-size:70vh;gap:var(--c-space-4);flex-direction:column;padding-inline-end:var(--c-space-2);display:flex;overflow-y:auto}.c-theme-roller__group{gap:var(--c-space-2);flex-direction:column;display:flex}.c-theme-roller__group-title{text-transform:uppercase;letter-spacing:.06em;opacity:.7}.c-theme-roller__row{gap:var(--c-space-1);padding-block:var(--c-space-1);border-block-end:1px solid color-mix(in oklab,var(--c-color-border) 60%,transparent);flex-direction:column;display:flex}.c-theme-roller__label{justify-content:space-between;align-items:center;gap:var(--c-space-2);display:flex}.c-theme-roller__color{gap:var(--c-space-2);grid-template-columns:auto 1fr;grid-template-areas:"swatch lch""swatch hex";align-items:center;display:grid}.c-theme-roller__color>:first-child{grid-area:swatch}.c-theme-roller__lch{gap:var(--c-space-2);grid-area:lch;grid-template-columns:repeat(3,1fr);display:grid}.c-theme-roller__lch label{font-size:var(--c-text-xs);color:var(--c-color-text-muted);align-items:center;gap:4px;display:flex}.c-theme-roller__lch label>*{flex:1}.c-theme-roller__lch label :deep(*){flex:1}.c-theme-roller__hex{grid-area:hex;max-inline-size:120px}.c-theme-roller__len{gap:var(--c-space-2);grid-template-columns:1fr 72px;align-items:center;display:grid}.c-theme-roller__side{gap:var(--c-space-4);top:var(--c-space-3);flex-direction:column;display:flex;position:sticky}.c-theme-roller__preview{border:1px solid var(--c-color-border);border-radius:var(--c-radius-lg);padding:var(--c-space-3);background:var(--c-color-surface)}.c-theme-roller__palette{grid-template-columns:repeat(10,1fr);gap:4px;display:grid}.c-theme-roller__export{gap:var(--c-space-2);flex-direction:column;display:flex}.c-theme-roller__id{max-inline-size:140px}@media (width<=860px){.c-theme-roller__body{grid-template-columns:1fr}.c-theme-roller__side{position:static}}