.color-tool{display:grid;gap:.75rem;max-width:72rem;width:100%}.color-tool [hidden]{display:none!important}.color-header{align-items:end;display:flex;gap:1rem;justify-content:space-between;margin-bottom:0;padding-top:.75rem}.color-title{align-items:center;display:flex;gap:.875rem}.color-title h1{font-size:clamp(1.35rem,3vw,1.625rem);line-height:1;margin:0 0 .4rem}.color-title p,.palette-heading p,.color-help{color:var(--tool-muted);font-size:.8125rem;margin:0}.color-status{color:var(--tool-muted);font-size:.75rem;min-height:1.2em;text-align:right}.color-status:empty{display:none}color-input,color-values,color-history,color-palette,color-contrast{display:block}.color-input-panel{overflow:visible;padding:.75rem}.color-input-row{display:flex;gap:.5rem;margin-block:.4rem}.color-tool input[type=text]{appearance:none;background:var(--tool-strong);border:1px solid var(--tool-line);border-radius:calc(var(--tool-radius) - .125rem);color:var(--fg);font-family:var(--monospace);font-size:.875rem;min-height:2.5rem;padding:0 .75rem;width:100%}.color-tool input[aria-invalid=true]{border-color:#c43838}.color-input-row .tool-button{min-height:2.5rem}.color-picker-field{display:block;flex:none}.color-picker{appearance:none;background:transparent;border:1px solid var(--tool-line);border-radius:calc(var(--tool-radius) - .125rem);cursor:pointer;height:2.5rem;overflow:hidden;padding:.2rem;width:2.5rem}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:0;border-radius:.2rem}.color-error{color:#a12b2b;display:block;font-size:.8125rem;margin-top:.5rem}.color-overview{align-items:start;display:grid;gap:.75rem;grid-template-columns:minmax(0,3fr) minmax(15rem,1.15fr)}.color-definition{display:grid;grid-template-columns:minmax(0,1fr);margin:0}.color-preview{align-items:center;background-image:linear-gradient(var(--preview-color),var(--preview-color)),linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%),linear-gradient(45deg,#bbb 25%,#fff 25% 75%,#bbb 75%);background-position:0 0,0 0,8px 8px;background-size:auto,16px 16px,16px 16px;display:flex;font-family:var(--monospace);font-size:clamp(1rem,2vw,1.375rem);font-weight:700;justify-content:center;line-height:1;min-height:8rem;padding:1rem}.color-preview>span{background:color-mix(in srgb,var(--tool-strong) 92%,transparent);border-radius:calc(var(--tool-radius) - .125rem);color:var(--fg);padding:.5rem .625rem}.color-definition figcaption{padding:1rem}.color-definition h2,.palette-heading h2{font-size:.875rem;margin:0}.color-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:.5rem 0 0}.color-values>div{align-items:center;border-top:1px solid var(--tool-line);display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr) auto;min-width:0;padding-block:.75rem}.color-values>div:nth-child(odd){padding-right:.75rem}.color-values>div:nth-child(2n){border-left:1px solid var(--tool-line);padding-left:.75rem}.color-values dt{color:var(--tool-muted);font-size:.6875rem;text-transform:uppercase}.color-values dd{font-family:var(--monospace);font-size:.8125rem;margin:.1rem 0 0;overflow-wrap:anywhere}.color-copy-button{min-width:4rem}.color-pane-header{grid-template-columns:minmax(0,1fr) auto}.history-list,.swatch-list,.contrast-standards{list-style:none;margin:0;padding:0}.history-list{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));padding:.75rem}.history-swatch{align-items:center;background:var(--tool-strong);border:1px solid var(--tool-line);border-radius:calc(var(--tool-radius) - .125rem);color:var(--fg);display:flex;font-family:var(--monospace);font-size:.75rem;gap:.5rem;min-height:2.5rem;padding:.5rem;text-align:left;width:100%}.history-swatch:before{background-image:linear-gradient(var(--swatch),var(--swatch)),linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%),linear-gradient(45deg,#bbb 25%,#fff 25% 75%,#bbb 75%);background-position:0 0,0 0,4px 4px;background-size:auto,8px 8px,8px 8px;border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);border-radius:50%;content:"";flex:none;height:1.25rem;width:1.25rem}.history-swatch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-swatch[aria-pressed=true]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}.palette-panel{overflow:visible}.palette-section+.palette-section{border-top:1px solid var(--tool-line)}.palette-heading{align-items:center;display:flex;justify-content:space-between;padding:1rem}.palette-heading h2{margin-bottom:.25rem}.swatch-list{display:grid;grid-template-columns:repeat(11,minmax(0,1fr))}.spectrum-list{grid-template-columns:repeat(12,minmax(0,1fr))}.color-swatch{background:var(--swatch);border:0;border-radius:0;color:var(--swatch-text);display:grid;font-family:var(--monospace);font-size:.6875rem;gap:2rem;min-height:7.5rem;padding:.625rem .5rem;text-align:left;width:100%}.color-swatch:hover{opacity:.9}.color-swatch code{color:inherit;font-size:inherit;writing-mode:vertical-rl}.contrast-layout{display:grid;gap:1rem;grid-template-columns:minmax(17rem,.8fr) minmax(20rem,1.2fr);padding:1rem}.contrast-fields{display:grid;gap:.75rem}.contrast-fields label{display:grid;gap:.4rem}.contrast-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.contrast-preview{align-items:center;border-radius:calc(var(--tool-radius) - .125rem);display:flex;gap:1rem;min-height:8rem;padding:1rem}.contrast-preview strong{font-size:3rem;line-height:1}.contrast-summary{align-items:start;display:grid;gap:1rem;grid-template-columns:auto minmax(0,1fr);margin-top:1rem}.contrast-summary>p{display:grid;margin:0}.contrast-summary>p strong{font-family:var(--monospace);font-size:1.25rem}.contrast-summary>p span{color:var(--tool-muted);font-size:.6875rem}.contrast-standards{display:grid;gap:.375rem;grid-template-columns:repeat(2,minmax(0,1fr))}.contrast-standards li{align-items:center;border:1px solid var(--tool-line);border-radius:calc(var(--tool-radius) - .125rem);display:flex;font-size:.6875rem;justify-content:space-between;padding:.5rem}.contrast-standards li>span{display:grid}.contrast-standards small{color:var(--tool-muted);font-size:inherit}.contrast-standards output{font-weight:700}.contrast-standards output[data-pass=true]{color:#237a44}.contrast-standards output[data-pass=false]{color:#a12b2b}@media(prefers-color-scheme:dark){.color-error,.contrast-standards output[data-pass=false]{color:#ff8a86}.contrast-standards output[data-pass=true]{color:#66d18f}}@media(max-width:54rem){.color-overview,.contrast-layout,.color-values{grid-template-columns:minmax(0,1fr)}.color-values>div:nth-child(odd){padding-right:0}.color-values>div:nth-child(2n){border-left:0;padding-left:0}.swatch-list,.spectrum-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:34rem){.color-header,.color-title{align-items:flex-start}.color-header{display:grid}.color-status{text-align:left}.contrast-summary{grid-template-columns:minmax(0,1fr)}.color-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto}.color-input-row>input[type=text]{grid-column:1 / -1}.color-input-row>.tool-button{grid-column:1;grid-row:2}.color-picker-field{grid-column:2;grid-row:2}.swatch-list,.spectrum-list{grid-template-columns:repeat(2,minmax(0,1fr))}.color-swatch{align-items:center;display:flex;gap:.5rem;justify-content:space-between;min-height:4.5rem}.color-swatch code{writing-mode:horizontal-tb}.tone-list{grid-template-columns:minmax(0,1fr)}.tone-list .color-swatch{min-height:3.25rem}}@media(prefers-reduced-motion:reduce){.color-tool *{scroll-behavior:auto;transition-duration:.01ms!important}}