.clr-top{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;margin-block-end:24px}.clr-preview{flex:0 0 120px;min-height:120px;border:1px solid var(--line);border-radius:16px}.clr-inputs{flex:1 1 260px;display:flex;flex-direction:column;gap:12px}.clr-picker-field input[type=color]{inline-size:100%;block-size:44px;padding:4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}.clr-error{margin:0;font-size:13px;color:#e05252}.clr-h3{margin-block:24px 10px;font-size:15px}.clr-hint{margin-block:8px 0;color:var(--muted);font-size:12px;line-height:1.6}.clr-formats{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}.clr-format{display:flex;align-items:center;gap:10px;padding-block:10px;padding-inline:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.clr-format-key{flex:0 0 56px;font-size:12px;font-weight:700;color:var(--muted)}.clr-format-val{flex:1 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;overflow-wrap:anywhere;direction:ltr;unicode-bidi:isolate}.clr-copy{flex:0 0 auto;padding-block:7px;padding-inline:12px;font-size:13px}.clr-shades{display:flex;flex-wrap:wrap;gap:6px}.clr-shade{flex:1 1 76px;min-block-size:52px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center}.clr-shade span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;padding-block:2px;padding-inline:4px;border-radius:4px;background:#00000073;color:#fff;direction:ltr}.clr-contrast{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding-block:18px;padding-inline:18px}.clr-contrast-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.clr-contrast-controls .field{flex:1 1 180px}.clr-swap{flex:0 0 auto}.clr-sample{margin-block:16px;padding-block:20px;padding-inline:18px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px}.clr-sample-lg{font-size:24px;font-weight:700}.clr-sample-sm{font-size:14px}.clr-ratio{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.clr-ratio strong{font-size:30px;font-variant-numeric:tabular-nums;direction:ltr}.clr-badges{display:flex;flex-wrap:wrap;gap:6px}.clr-badge{display:flex;align-items:center;gap:6px;padding-block:6px;padding-inline:10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);font-size:12px}.clr-badge-k{color:var(--muted)}.clr-badge-v{font-weight:700}.clr-badge.ok .clr-badge-v{color:#2e9e5b}.clr-badge.no .clr-badge-v{color:#e05252}@media(max-width:520px){.clr-format-key{flex-basis:44px}.clr-ratio strong{font-size:24px}}