.color-workspace-body{padding:clamp(22px,4vw,36px)}.color-workspace-body>*+*{margin-top:24px}.color-input-grid,.color-two-inputs,.color-picker-layout,.color-image-layout{display:grid;gap:24px}.color-input-grid{grid-template-columns:minmax(0,1fr) minmax(210px,.55fr);align-items:stretch}.color-two-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.color-input{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px}.dev-field .color-input>input{min-width:0}.dev-field .color-input__picker{width:52px;padding:4px}.color-large-preview,.color-picker-preview{display:grid;min-height:116px;place-items:end start;padding:18px;border:1px solid var(--dev-line);border-radius:13px;box-shadow:inset 0 0 0 1px #fcfbfe40}.color-large-preview span,.color-picker-preview span{padding:6px 9px;border-radius:7px;color:#faf9fc;background:#131017b8;font-size:.8125rem;font-weight:750}.color-values{display:grid;border:1px solid var(--dev-line);border-radius:13px}.color-value{display:grid;min-width:0;min-height:68px;padding:12px 14px 12px 18px;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:14px}.color-value+.color-value{border-top:1px solid var(--dev-line)}.color-value>span{color:var(--dev-muted);font-size:.75rem;font-weight:780;letter-spacing:.06em}.color-value code{min-width:0;overflow:hidden;color:var(--dev-ink);font-size:.875rem;font-weight:620;text-overflow:ellipsis;white-space:nowrap}.color-picker-layout{grid-template-columns:minmax(0,1fr) minmax(240px,.72fr)}.color-range-stack{display:grid;gap:22px}.color-range{display:grid;gap:9px}.color-range>span{display:flex;align-items:center;justify-content:space-between;color:#323845;font-size:.9375rem}.color-range output{color:var(--developer-accent);font-weight:760}.color-range input{width:100%;accent-color:var(--developer-accent)}.color-controls>.dev-field{width:min(100%,240px)}.color-controls>.dev-field:has(input[type=number]){width:155px}.color-swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}.color-swatch{position:relative;display:grid;min-width:0;overflow:hidden;padding:0 12px 12px;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:3px 8px;border:1px solid var(--dev-line);border-radius:11px;color:var(--dev-ink);background:#fefdff;text-align:left;transition:border-color .16s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1)}.color-swatch:hover{border-color:var(--developer-border);transform:translateY(-2px)}.color-swatch__color{height:94px;margin:0 -12px 9px;grid-column:1 / -1;background:var(--swatch-color)}.color-swatch small{grid-column:1 / -1;color:var(--dev-muted);font-size:.72rem;font-weight:700}.color-swatch strong{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap}.color-swatch>svg{width:15px;color:var(--developer-accent)}.color-split-preview{display:grid;height:126px;overflow:hidden;grid-template-columns:1fr 1fr;border:1px solid var(--dev-line);border-radius:13px}.color-result-callout{display:grid;padding:20px;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);align-items:center;gap:22px;border:1px solid var(--dev-line);border-radius:13px;background:var(--dev-soft)}.color-result-callout .dev-metric{margin:0}.color-result-callout h3{margin:0;color:var(--dev-ink);font-size:1.16rem}.color-result-callout p{margin:7px 0 0;color:var(--dev-muted);line-height:1.55}.color-name-list{display:grid;border:1px solid var(--dev-line);border-radius:13px}.color-name-list>div{display:grid;min-height:74px;padding:12px 14px;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px}.color-name-list>div+div{border-top:1px solid var(--dev-line)}.color-name-dot{width:38px;height:38px;border:1px solid oklch(.74 .02 303);border-radius:50%}.color-name-list span:nth-child(2){display:grid;gap:2px}.color-name-list small{color:var(--dev-muted);font-size:.75rem}.color-name-list strong{color:var(--dev-ink);font-size:1rem}.color-text-preview{display:grid;min-height:180px;padding:clamp(28px,5vw,54px);align-content:center;gap:12px;border:1px solid var(--dev-line);border-radius:13px}.color-text-preview strong{max-width:22ch;font-size:clamp(1.8rem,4vw,3.15rem);letter-spacing:-.04em;line-height:1.02}.color-text-preview span{max-width:58ch;font-size:1rem;line-height:1.6}.color-upload{display:grid;min-height:280px;place-items:center;align-content:center;gap:9px;border:2px dashed var(--developer-border);border-radius:15px;color:var(--dev-ink);background:var(--developer-tint);text-align:center;transition:border-color .16s cubic-bezier(.16,1,.3,1),background-color .16s cubic-bezier(.16,1,.3,1)}.color-upload:hover{border-color:var(--developer-accent);background:color-mix(in oklch,var(--developer-tint) 84%,var(--developer-border))}.color-upload svg{width:32px;height:32px;color:var(--developer-accent)}.color-upload strong{font-size:1.1rem}.color-upload span{color:var(--dev-muted);font-size:.875rem}.color-upload input,.color-image-preview label input{position:absolute;width:1px;height:1px;opacity:0}.color-image-layout{grid-template-columns:minmax(0,1fr) 260px;align-items:start}.color-image-preview{display:grid;min-width:0;gap:10px}.color-image-preview img{width:100%;max-height:440px;object-fit:contain;border:1px solid var(--dev-line);border-radius:13px;background:var(--dev-soft)}.color-image-preview>strong{overflow:hidden;color:var(--dev-ink);font-size:.875rem;text-overflow:ellipsis;white-space:nowrap}.color-image-preview>label{position:relative;width:fit-content}.color-image-results{display:grid;gap:14px}.color-image-results .dev-button{width:100%}@media(max-width:760px){.color-input-grid,.color-two-inputs,.color-picker-layout,.color-image-layout,.color-result-callout{grid-template-columns:1fr}.color-picker-preview{min-height:190px}.color-value{grid-template-columns:58px minmax(0,1fr)}.color-value .dev-button{width:fit-content;grid-column:2}}@media(max-width:520px){.color-workspace-body{padding:18px}.color-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-swatch__color{height:76px}.color-name-list>div{grid-template-columns:34px minmax(0,1fr)}.color-name-list .dev-button{width:fit-content;grid-column:2}}@media(prefers-reduced-motion:reduce){.color-swatch,.color-upload{transition:none}}