.cl{display:flex;flex-direction:column;gap:20px}.cl__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}.cl__inputs{gap:22px;padding:24px}.cl__mono{font-family:var(--font-mono)}.cl__h{font-size:var(--text-sm);font-weight:600;color:var(--fg-muted);margin:0 0 4px}.cl__explore{gap:18px}.cl__explore,.cl__result{display:flex;flex-direction:column}.cl__result{gap:16px;min-width:0}.cl__swatch{height:150px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:repeating-conic-gradient(color-mix(in oklab,var(--fg) 14%,transparent) 0 25%,transparent 0 50%) 0 0 /18px 18px}.cl__fill{width:100%;height:100%;transition:background .16s ease-out}.cl__rows{display:flex;flex-direction:column;margin-top:14px}.cl__rows.is-stale{opacity:.55}.cl__row{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.cl__row:first-child{border-top:0}.cl__label{font-size:12px;color:var(--fg-faint);font-weight:600}.cl__value{font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.cl__note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;font-size:var(--text-sm);line-height:1.6;color:var(--fg-muted)}@media (max-width:960px){.cl__grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:520px){.cl__row{grid-template-columns:64px minmax(0,1fr) auto}}@media (pointer:coarse){.cl__row .ui-btn{--h:44px;min-width:44px}}