.page-content[data-astro-cid-axpesolt]{padding-block:var(--space-6) var(--space-8)}.tool-header[data-astro-cid-axpesolt]{align-items:center;gap:var(--space-4);margin-top:var(--space-3);display:flex}.tool-header__icon[data-astro-cid-axpesolt]{border-radius:var(--radius-md);border:1px solid var(--color-border-strong);background:#3b82f6;flex-shrink:0;width:48px;height:48px;display:inline-block}.color-tool[data-astro-cid-axpesolt]{gap:var(--space-5);margin-top:var(--space-6);grid-template-columns:1fr;align-items:start;display:grid}@media (width>=1024px){.color-tool[data-astro-cid-axpesolt]{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}.color-tool__main[data-astro-cid-axpesolt],.color-tool__side[data-astro-cid-axpesolt]{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.tool-panel[data-astro-cid-axpesolt]{padding:var(--space-5)}.tool-panel__row[data-astro-cid-axpesolt]{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.tool-panel__label[data-astro-cid-axpesolt]{font-size:.875rem;font-weight:700}.tool-hint[data-astro-cid-axpesolt]{color:var(--color-text-muted);font-size:.8125rem}.field-row[data-astro-cid-axpesolt],.field-row[data-astro-cid-axpesolt]:first-of-type{margin-top:var(--space-4)}.field-label[data-astro-cid-axpesolt]{margin-bottom:var(--space-2);font-size:.8125rem;font-weight:600;display:block}.preview-row[data-astro-cid-axpesolt]{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.color-swatch[data-astro-cid-axpesolt]{border-radius:var(--radius-md);border:1px solid var(--color-border-strong);flex:220px;width:100%;max-width:220px;height:88px;position:relative;overflow:hidden}.color-swatch__checker[data-astro-cid-axpesolt]{background-image:linear-gradient(45deg,#80808033 25%,#0000 25%),linear-gradient(-45deg,#80808033 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#80808033 75%),linear-gradient(-45deg,#0000 75%,#80808033 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;background-color:var(--color-bg);position:absolute;inset:0}.color-swatch__fill[data-astro-cid-axpesolt]{position:absolute;inset:0}.picker-col[data-astro-cid-axpesolt]{flex:none}.native-picker[data-astro-cid-axpesolt]{border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:56px;height:56px;padding:0}.native-picker[data-astro-cid-axpesolt]::-webkit-color-swatch-wrapper{padding:2px}.native-picker[data-astro-cid-axpesolt]::-webkit-color-swatch{border:none;border-radius:4px}.alpha-row[data-astro-cid-axpesolt]{align-items:center;gap:var(--space-3);display:flex}.alpha-row[data-astro-cid-axpesolt] input[data-astro-cid-axpesolt][type=range]{min-width:0;accent-color:var(--color-primary);flex:auto}.alpha-number[data-astro-cid-axpesolt]{flex-shrink:0;width:4.5rem}.text-input[data-astro-cid-axpesolt],.channel-field[data-astro-cid-axpesolt] input[data-astro-cid-axpesolt],.alpha-number[data-astro-cid-axpesolt]{border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font:inherit;width:100%;padding:.55rem .75rem}.text-input[data-astro-cid-axpesolt]:focus,.channel-field[data-astro-cid-axpesolt] input[data-astro-cid-axpesolt]:focus,.alpha-number[data-astro-cid-axpesolt]:focus,.alpha-row[data-astro-cid-axpesolt] input[data-astro-cid-axpesolt][type=range]:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.mono-input[data-astro-cid-axpesolt]{font-family:var(--font-mono)}.input-with-action[data-astro-cid-axpesolt]{gap:var(--space-2);align-items:stretch;display:flex}.input-with-action[data-astro-cid-axpesolt] .text-input[data-astro-cid-axpesolt]{flex:auto;min-width:0}.input-with-action[data-astro-cid-axpesolt] .btn[data-astro-cid-axpesolt]{flex-shrink:0}.tool-error[data-astro-cid-axpesolt]{margin-top:var(--space-2);border-radius:var(--radius-sm);color:#b91c1c;background:#ef44441f;border:1px solid #ef444459;padding:.5rem .7rem;font-size:.8125rem}:root[data-theme=dark] .tool-error[data-astro-cid-axpesolt]{color:#fca5a5}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tool-error[data-astro-cid-axpesolt]{color:#fca5a5}}.channel-grid[data-astro-cid-axpesolt]{gap:var(--space-3);grid-template-columns:repeat(4,1fr);display:grid}.channel-field[data-astro-cid-axpesolt] label[data-astro-cid-axpesolt]{color:var(--color-text-muted);margin-bottom:var(--space-1);font-size:.75rem;font-weight:700;display:block}@media (width<=400px){.channel-grid[data-astro-cid-axpesolt]{grid-template-columns:repeat(2,1fr)}}.css-line[data-astro-cid-axpesolt]{justify-content:space-between;align-items:center;gap:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-subtle);margin-top:var(--space-2);padding:.6rem .8rem;display:flex}.css-line[data-astro-cid-axpesolt]:first-of-type{margin-top:0}.css-line[data-astro-cid-axpesolt] code[data-astro-cid-axpesolt]{font-family:var(--font-mono);color:var(--color-text);white-space:nowrap;min-width:0;font-size:.8125rem;overflow-x:auto}.css-line[data-astro-cid-axpesolt] .btn[data-astro-cid-axpesolt]{flex-shrink:0}.examples-list[data-astro-cid-axpesolt]{gap:var(--space-2);flex-wrap:wrap;display:flex}.color-example-btn[data-astro-cid-axpesolt]{align-items:center;gap:var(--space-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);cursor:pointer;padding:.4rem .8rem .4rem .5rem;font-size:.8125rem;font-weight:600;transition:border-color .15s;display:inline-flex}.color-example-btn[data-astro-cid-axpesolt]:hover{border-color:var(--color-primary)}.color-example-btn__dot[data-astro-cid-axpesolt]{border:1px solid var(--color-border-strong);border-radius:50%;flex-shrink:0;width:16px;height:16px}.link-btn[data-astro-cid-axpesolt]{color:var(--color-primary);cursor:pointer;background:0 0;border:none;padding:0;font-size:.75rem;font-weight:600}.link-btn[data-astro-cid-axpesolt]:hover{text-decoration:underline}.contrast-result[data-astro-cid-axpesolt]{margin-top:var(--space-4);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--color-bg-subtle);justify-content:space-between;align-items:baseline;display:flex}.contrast-ratio[data-astro-cid-axpesolt]{font-family:var(--font-mono);font-size:1.05rem;font-weight:700}.wcag-grid[data-astro-cid-axpesolt]{margin-top:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.wcag-row[data-astro-cid-axpesolt]{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.wcag-badges[data-astro-cid-axpesolt]{gap:var(--space-2);display:flex}.contrast-note[data-astro-cid-axpesolt]{margin-top:var(--space-3)}.badge[data-astro-cid-axpesolt].badge--pass{background:color-mix(in srgb, var(--color-accent-green) 18%, transparent);color:var(--color-accent-green)}.badge[data-astro-cid-axpesolt].badge--fail{color:#b91c1c;background:#ef444426}:root[data-theme=dark] .badge[data-astro-cid-axpesolt].badge--fail{color:#fca5a5}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .badge[data-astro-cid-axpesolt].badge--fail{color:#fca5a5}}.related-grid[data-astro-cid-axpesolt]{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(72px,1fr));display:grid}.related-item[data-astro-cid-axpesolt]{align-items:center;gap:var(--space-1);text-align:center;flex-direction:column;display:flex}.related-item__name[data-astro-cid-axpesolt]{color:var(--color-text-muted);font-size:.6875rem}.related-item__hex[data-astro-cid-axpesolt]{font-family:var(--font-mono);font-size:.6875rem}.swatch-btn[data-astro-cid-axpesolt]{border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);cursor:pointer;width:44px;height:44px;padding:0}.swatch-btn[data-astro-cid-axpesolt]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.recent-list[data-astro-cid-axpesolt]{gap:var(--space-2);flex-wrap:wrap;display:flex}.recent-swatch-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);cursor:pointer;width:32px;height:32px;padding:0}.recent-swatch-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media (width<=480px){.tool-panel[data-astro-cid-axpesolt]{padding:var(--space-4)}}