.color-workspace{border:1px solid var(--line);background:var(--surface);border-radius:18px;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);display:grid;overflow:hidden}.color-controls,.color-preview-panel{min-width:0;padding:32px}.color-controls{border-right:1px solid var(--line)}.color-controls>h2,.color-preview-heading h2{margin:0;font-size:22px}.color-control{margin-top:24px}.color-label{margin-bottom:10px;font-size:14px;font-weight:600;display:block}.color-input-row{gap:12px;display:flex}.color-input-row input[type=color]{border:1px solid var(--line);background:var(--surface-soft);cursor:pointer;border-radius:10px;flex-shrink:0;width:60px;height:52px;padding:3px}.color-input-row input[type=text]{width:100%;min-width:0;font:inherit;font-family:var(--font-geist-mono), monospace;border:1px solid var(--line);background:var(--surface-soft);color:var(--text);border-radius:10px;padding:12px}.color-input-row input[aria-invalid=true]{border-color:var(--error-text)}.color-formats{margin:12px 0 0}.color-formats>div{border-bottom:1px solid var(--line);align-items:center;gap:12px;min-height:44px;display:flex}.color-formats dt{color:var(--text-muted);width:32px;font-size:12px}.color-formats dd{flex:1;justify-content:space-between;align-items:center;gap:8px;min-width:0;margin:0;display:flex}.color-formats code{overflow-wrap:anywhere;font-size:12px}.color-copy{color:var(--text-muted);cursor:pointer;background:0 0;border:0;place-items:center;min-width:44px;min-height:44px;display:grid}.color-copy:hover{color:var(--text);background:var(--surface-soft)}.color-swap{align-items:center;gap:8px;min-height:44px;margin-top:20px;display:flex}.color-presets{flex-wrap:wrap;gap:8px;margin-top:26px;display:flex}.color-presets h3{width:100%;margin:0 0 4px;font-size:14px}.color-preset{background:var(--surface-soft);color:var(--text);border:1px solid var(--line);cursor:pointer;min-height:44px;font:inherit;border-radius:8px;align-items:center;gap:8px;padding:6px 10px 6px 6px;font-size:12px;display:flex}.color-pair{border:1px solid var(--line);border-radius:5px;place-items:center;width:30px;height:30px;font-weight:700;display:grid}.color-preview-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.color-preview-heading>span{color:var(--text-muted);font-size:12px}.color-live-preview{overflow-wrap:anywhere;border:1px solid var(--line);border-radius:12px;min-height:230px;padding:28px}.color-preview-aa{font-family:var(--font-heading);letter-spacing:-.05em;font-size:64px;line-height:1.1}.color-live-preview h3{color:inherit;margin:18px 0 8px;font-size:24px;line-height:1.3}.color-live-preview p{color:inherit;margin:0;font-size:16px;line-height:1.65}.color-preview-input{margin-top:16px}.color-ratio{justify-content:space-between;align-items:center;gap:16px;margin:28px 0 16px;display:flex}.color-ratio>div>span{color:var(--text-muted);font-size:13px;display:block}.color-ratio output{font-family:var(--font-heading);font-variant-numeric:tabular-nums;font-size:44px;line-height:1.3;display:block}.color-ratio output small{color:var(--text-muted);font-size:24px}.color-ratio>strong{text-align:center;border:1px solid;border-radius:30px;max-width:160px;padding:8px 12px;font-size:12px}.color-pass{color:var(--success-text)}.color-fail,.color-error{color:var(--error-text)}.color-error{font-size:13px;line-height:1.5}.color-checks{margin:0;padding:0;list-style:none}.color-checks li{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:12px 0;font-size:13px;display:flex}.color-checks small{color:var(--text-muted);margin-top:4px;font-size:12px;display:block}.color-checks strong{align-items:center;gap:6px;font-size:12px;display:flex}.color-empty{background:var(--surface-soft);color:var(--text-muted);border-radius:12px;padding:48px 20px;line-height:1.7}:is(.color-tool button:focus-visible,.color-tool input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}@media (max-width:760px){.color-workspace{grid-template-columns:1fr}.color-controls{border-right:0;border-bottom:1px solid var(--line)}.color-controls,.color-preview-panel,.color-live-preview{padding:22px}.color-ratio output{font-size:38px}}