.empty-state{justify-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);text-align:center;background:var(--color-surface-raised);border:1px dashed var(--color-border);border-radius:var(--radius-lg);animation:enter var(--duration-slow) var(--ease-standard) both;display:grid}.empty-state__swatches{margin-block-end:var(--space-2);display:flex}.empty-state__swatches span{border-radius:var(--radius-md);border:2px solid var(--color-surface-raised);block-size:2.5rem;inline-size:2.5rem;box-shadow:var(--shadow-sm)}.empty-state__swatches span+span{margin-inline-start:calc(-1 * var(--space-3))}.empty-state__swatches span:first-child{background:var(--color-text)}.empty-state__swatches span:nth-child(2){background:var(--color-accent)}.empty-state__swatches span:nth-child(3){background:var(--color-border)}.empty-state__title{margin:0}.empty-state__message{max-inline-size:40ch;color:var(--color-text-muted);margin:0}.empty-state__action{margin-block-start:var(--space-3)}.fix-pair{gap:var(--space-4);border-block-start:1px solid var(--color-border-subtle);padding-block-start:var(--space-5);display:grid}.fix-pair__heading{font-size:var(--font-size-md);margin:0}.fix-pair__groups{gap:var(--space-4);display:grid}.fix-pair__group{border:0;gap:2px;min-inline-size:0;margin:0;padding:0;display:grid}.fix-pair__group legend{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);margin-block-end:var(--space-2);padding:0}.fix-pair__option{align-items:center;gap:var(--space-3);min-block-size:var(--target-min);min-inline-size:var(--target-min);padding-inline:var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard);margin:0;display:flex}.fix-pair__option:hover{background:var(--color-surface-sunken)}.fix-pair__option:has(input:checked){background:var(--color-accent-subtle)}.fix-pair__option input{flex:none;block-size:1.125rem;min-block-size:0;inline-size:1.125rem;margin:0}.fix-pair__note{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.fix-pair__result{gap:var(--space-3);animation:enter var(--duration-base) var(--ease-standard) both;justify-items:start;display:grid}.fix-pair__suggestion{align-items:center;gap:var(--space-3);display:flex}.fix-pair__swatch{border-radius:var(--radius-md);border:1px solid var(--color-border);flex:none;block-size:3rem;inline-size:3rem}.fix-pair__values{display:grid}.fix-pair__ratio{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.fix-pair__preview{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-wrap:anywhere;justify-self:stretch;margin:0}.pair-detail{gap:var(--space-4);min-inline-size:0;padding:var(--space-5);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);animation:enter var(--duration-base) var(--ease-standard) both;align-content:start;display:grid}.pair-detail__empty{padding:var(--space-6) var(--space-2);text-align:center;color:var(--color-text-muted);border:1px dashed var(--color-border);border-radius:var(--radius-md);margin:0}.pair-detail__top{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.pair-detail__heading{font-size:var(--font-size-lg);overflow-wrap:anywhere;margin:0}.pair-detail__colour{align-items:center;gap:var(--space-3);display:flex}.pair-detail__colour>span:last-child{min-inline-size:0;display:grid}.pair-detail__swatch{border-radius:var(--radius-md);border:1px solid var(--color-border);flex:none;block-size:3rem;inline-size:3rem}.pair-detail__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}.pair-detail__name{font-weight:var(--font-weight-medium);overflow-wrap:anywhere}.pair-detail__ratio{font-size:clamp(2.25rem,1.8rem + 2vw,3rem);font-weight:var(--font-weight-bold);letter-spacing:-.03em;margin:0;line-height:1}.pair-detail__preview{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md)}.pair-detail__preview p{margin:0 0 var(--space-2);overflow-wrap:anywhere}.pair-detail__preview p:last-child{margin-block-end:0}.pair-detail__preview .pair-detail__caption{font-size:var(--font-size-xs)}.pair-detail__checks{margin:0;padding:0;list-style:none;display:grid}.pair-detail__checks li{justify-content:space-between;align-items:center;gap:var(--space-3);padding-block:var(--space-2);font-size:var(--font-size-sm);border-block-end:1px solid var(--color-border-subtle);display:flex}.pair-detail__checks li:last-child{border-block-end:0}.pair-detail__pass,.pair-detail__fail{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.02em;flex:none}.pair-detail__pass{color:var(--color-success);background:var(--color-success-subtle)}.pair-detail__fail{color:var(--color-danger);background:var(--color-danger-subtle)}.contrast-screen{gap:var(--space-5);min-inline-size:0;display:grid}.contrast-screen>h1{margin:0}.contrast-intro{max-inline-size:var(--measure);margin:calc(var(--space-2) - var(--space-5)) 0 var(--space-2);color:var(--color-text-muted)}.contrast-status{font-weight:var(--font-weight-medium);margin:0}.contrast-scroll{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);max-inline-size:100%;box-shadow:var(--shadow-sm);animation:enter var(--duration-slow) var(--ease-standard) both;overflow-x:auto}.contrast-table{border-collapse:separate;border-spacing:0;inline-size:100%}.contrast-table caption{padding:var(--space-4) var(--space-4) var(--space-3);text-align:start;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted)}.contrast-table th,.contrast-table td{padding:var(--space-2);border-block-end:1px solid var(--color-border-subtle);text-align:start;vertical-align:middle}.contrast-table tbody tr:last-child>*{border-block-end:0}.contrast-table thead th{padding-block:var(--space-2) var(--space-3)}.contrast-table tbody th{z-index:1;padding-inline:var(--space-4) var(--space-3);background:var(--color-surface-raised);border-inline-end:1px solid var(--color-border-subtle);position:sticky;inset-inline-start:0}.contrast-head{align-items:center;gap:var(--space-2);min-inline-size:8rem;display:flex}.contrast-head__swatch{border-radius:var(--radius-sm);block-size:1.5rem;inline-size:1.5rem;box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 1px var(--color-border-subtle);flex:none}.contrast-head__text{min-inline-size:0;display:grid}.contrast-head__name{font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.contrast-head__hex{font-size:var(--font-size-xs);color:var(--color-text-muted)}.contrast-cell{place-items:center;gap:var(--space-1);min-block-size:5rem;inline-size:100%;min-inline-size:6.5rem;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-xs);text-align:center;transition:transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-standard);display:grid}.contrast-cell:hover{border-color:var(--color-border);box-shadow:var(--shadow-md);transform:translateY(-2px)}.contrast-cell:active{transform:scale(.97)}.contrast-cell[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-surface-raised), 0 0 0 5px var(--color-accent), var(--shadow-md)}.contrast-cell__sample{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:1}.contrast-cell__ratio{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.contrast-cell--fail,.contrast-cell--fail:hover{border:2px dashed var(--color-border)}.contrast-cell__marker{font-weight:var(--font-weight-bold)}.contrast-table td.contrast-same{min-inline-size:6.5rem;min-block-size:var(--target-min);text-align:center;font-size:var(--font-size-xs);color:var(--color-text-muted);background:repeating-linear-gradient(-45deg, var(--color-surface-sunken) 0 6px, var(--color-surface-raised) 6px 12px)}.contrast-layout{gap:var(--space-5);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}@media (width>=720px){.contrast-layout{grid-template-columns:minmax(0,1fr) minmax(16rem,22rem)}}.export-screen{gap:var(--space-5);min-inline-size:0;display:grid}.export-screen>h1{margin:0}.export-intro{max-inline-size:var(--measure);margin:calc(var(--space-2) - var(--space-5)) 0 var(--space-2);color:var(--color-text-muted)}.export-css{max-inline-size:100%;padding:var(--space-5) var(--space-6);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);font-size:var(--font-size-sm);animation:enter var(--duration-slow) var(--ease-standard) both;margin:0;line-height:1.7;overflow:auto}.export-css code{font-size:inherit}.export-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.export-actions>button{min-inline-size:var(--target-min);min-block-size:var(--target-min)}.export-status{min-block-size:1.5em;font-weight:var(--font-weight-medium);margin:0}@media (width<=480px){.export-css{padding:var(--space-4)}.export-actions{flex-direction:column}.export-actions>button{inline-size:100%}}.colour-fields{gap:var(--space-4);display:grid}.colour-fields__field{min-inline-size:0}.colour-fields__hex{gap:var(--space-2);display:flex}.colour-fields__hex input[type=text]{flex:1;min-inline-size:0}.colour-fields__hex input[type=color]{min-inline-size:var(--target-min);flex:none}.colour-fields__error{margin:var(--space-1) 0 0;font-size:var(--font-size-sm);color:var(--color-danger)}.palette__intro{margin-block-end:var(--space-6)}.palette__intro h1{margin:0}.palette__intro p{margin:var(--space-2) 0 0;max-inline-size:var(--measure);color:var(--color-text-muted)}.palette__layout{gap:var(--space-7);grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;display:grid}@media (width<=719px){.palette__layout{grid-template-columns:minmax(0,1fr)}}.palette__section-title{align-items:baseline;gap:var(--space-2);margin:0 0 var(--space-4);font-size:var(--font-size-lg);display:flex}.palette__count{font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-muted)}.palette__list{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));margin:0;padding:0;list-style:none;display:grid}.palette-row{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);min-inline-size:0;box-shadow:var(--shadow-sm);animation:enter var(--duration-slow) var(--ease-standard) both;transition:box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);display:grid;overflow:hidden}.palette-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.palette-row__swatch{border-block-end:1px solid var(--color-border-subtle);block-size:6rem;display:block}.palette-row__text{min-inline-size:0;padding:var(--space-3) var(--space-4) var(--space-4)}.palette-row__name{font-weight:var(--font-weight-bold);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.palette-row__meta{gap:var(--space-1) var(--space-3);margin:var(--space-1) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted);flex-wrap:wrap;display:flex}.palette-row__meta code{color:var(--color-text)}.palette__add{padding:var(--space-5);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.palette__actions{margin-block-start:var(--space-5)}.palette__actions button{inline-size:100%}.palette__note{margin:var(--space-2) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted)}.palette__status:empty{margin:0}.palette__status{margin:var(--space-3) 0 0;font-size:var(--font-size-sm);color:var(--color-success)}.palette-row--editing,.palette-row--editing:hover{padding:var(--space-4);border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle), var(--shadow-md);transform:none}.palette-row__buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.palette-row__buttons>button{padding-inline:var(--space-3);flex:1 1 0}.palette-row__buttons--actions{padding:0 var(--space-4) var(--space-4)}.palette-row__form .palette-row__buttons{margin-block-start:var(--space-4)}.palette-row__confirm{gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);background:var(--color-surface-sunken);border-block-start:1px solid var(--color-border-subtle);display:grid}.palette-row__question{font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.shell{flex-direction:column;min-block-size:100vh;display:flex}.shell__skip{z-index:10;padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border-radius:var(--radius-md);box-shadow:var(--shadow-md);position:absolute;inset-block-start:-100px;inset-inline-start:var(--space-3)}.shell__skip:focus-visible{inset-block-start:var(--space-3)}.shell__header{z-index:5;background:color-mix(in srgb, var(--color-surface) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block-end:1px solid var(--color-border-subtle);position:sticky;inset-block-start:0}.shell__bar{box-sizing:border-box;max-inline-size:var(--content-width);padding:var(--space-2) var(--space-5);justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-5);flex-wrap:wrap;margin-inline:auto;display:flex}.shell__brand{align-items:center;gap:var(--space-3);min-block-size:var(--target-min);color:var(--color-text);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);letter-spacing:-.005em;text-decoration:none;display:inline-flex}.shell__brand:hover .shell__name{text-underline-offset:.2em;text-decoration:underline}.shell__mark{border-radius:var(--radius-sm);block-size:1.75rem;inline-size:1.75rem;box-shadow:inset 0 0 0 1px var(--color-border);flex:none;grid-template-columns:1fr 1fr;display:inline-grid;overflow:hidden}.shell__mark span:first-child{background:var(--color-text)}.shell__mark span:last-child{background:var(--color-surface-raised)}.shell__nav ul{gap:var(--space-1);margin:0;padding:0;list-style:none;display:flex}.shell__nav a{box-sizing:border-box;min-block-size:var(--target-min);min-inline-size:var(--target-min);padding-inline:var(--space-4);border-radius:var(--radius-pill);color:var(--color-text-muted);font-weight:var(--font-weight-medium);transition:background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.shell__nav a:hover{color:var(--color-text);background:var(--color-surface-sunken)}.shell__nav a:active{transform:scale(.97)}.shell__nav a[aria-current=page]{color:var(--color-text);background:var(--color-surface-raised);box-shadow:inset 0 0 0 1px var(--color-border-subtle), var(--shadow-sm)}.shell__main{box-sizing:border-box;inline-size:100%;max-inline-size:var(--content-width);padding:var(--space-7) var(--space-5) var(--space-9);flex:1;margin-inline:auto}.shell__main:focus{outline:none}@media (width<=719px){.shell__bar{padding-inline:var(--space-4)}.shell__nav{inline-size:100%}.shell__nav ul{justify-content:space-between}.shell__nav li{flex:1}.shell__nav a{inline-size:100%;padding-inline:var(--space-2)}.shell__main{padding:var(--space-5) var(--space-4) var(--space-8)}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;--font-size-xs:.8125rem;--font-size-sm:.9375rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.625rem;--font-size-2xl:clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);--line-height-tight:1.2;--line-height-body:1.55;--font-weight-regular:400;--font-weight-medium:550;--font-weight-bold:650;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:2rem;--space-8:3rem;--space-9:4rem;--content-width:72rem;--measure:65ch;--target-min:44px;--color-surface:#f7f7f5;--color-surface-raised:#fff;--color-surface-sunken:#ececea;--color-text:#1a1c23;--color-text-muted:#555b67;--color-border:#8a8f9a;--color-border-subtle:#dcdde0;--color-accent:#3d40c2;--color-accent-hover:#2f32a3;--color-on-accent:#fff;--color-focus-ring:#3d40c2;--color-success:#1b6b3a;--color-danger:#b42318;--color-accent-subtle:#ebebfa;--color-success-subtle:#e2f2e7;--color-danger-subtle:#fbe9e7;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;--shadow-sm:0 1px 2px #1b1d3c0f, 0 2px 6px -2px #1b1d3c0f;--shadow-md:0 6px 16px -4px #1b1d3c1f, 0 2px 4px -1px #1b1d3c0f;--shadow-lg:0 20px 44px -12px #1b1d3c33, 0 4px 10px -2px #1b1d3c14;--duration-fast:.12s;--duration-base:.2s;--duration-slow:.32s;--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-exit:cubic-bezier(.3, 0, 1, 1);--ease-spring:cubic-bezier(.34, 1.3, .64, 1);--rise:6px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-surface:#14151a;--color-surface-raised:#1e2028;--color-surface-sunken:#0e0f13;--color-text:#eceef3;--color-text-muted:#a6abb8;--color-border:#6b7080;--color-border-subtle:#2c2f39;--color-accent:#a5a8ff;--color-accent-hover:#c0c2ff;--color-on-accent:#14151a;--color-focus-ring:#a5a8ff;--color-success:#6dd394;--color-danger:#ff8f85;--color-accent-subtle:#262a52;--color-success-subtle:#15301f;--color-danger-subtle:#3a1d1b;--shadow-sm:0 1px 2px #0006, 0 2px 6px -2px #0000004d;--shadow-md:0 6px 16px -4px #0000008c, 0 2px 4px #0000004d;--shadow-lg:0 20px 44px -12px #000000a6, 0 4px 10px #00000059}}@media (prefers-reduced-motion:reduce){:root{--rise:0px;--duration-fast:0s;--duration-base:0s;--duration-slow:0s}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{min-inline-size:320px;font-family:var(--font-sans);font-size:var(--font-size-md);line-height:var(--line-height-body);color:var(--color-text);background:var(--color-surface);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11", "ss01";margin:0}h1,h2,h3{margin:0 0 var(--space-3);line-height:var(--line-height-tight);font-weight:var(--font-weight-bold);letter-spacing:-.015em;text-wrap:balance}h1{font-size:var(--font-size-2xl);letter-spacing:-.025em}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0 0 var(--space-4);max-inline-size:var(--measure)}:where(code,kbd,samp,pre,.mono){font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.95em}@keyframes enter{0%{opacity:0;transform:translateY(var(--rise))}}a{color:var(--color-accent);text-underline-offset:.2em;text-decoration-thickness:1px}a:hover{color:var(--color-accent-hover);text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}button,.button{justify-content:center;align-items:center;gap:var(--space-2);min-block-size:var(--target-min);min-inline-size:var(--target-min);padding:0 var(--space-5);font:inherit;font-weight:var(--font-weight-medium);color:var(--color-on-accent);background:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);line-height:1;text-decoration:none;display:inline-flex}button:hover,.button:hover{color:var(--color-on-accent);background:var(--color-accent-hover);border-color:var(--color-accent-hover)}button:active,.button:active{transform:translateY(1px)scale(.985)}.button-secondary{color:var(--color-text);background:var(--color-surface-raised);border-color:var(--color-border)}.button-secondary:hover{color:var(--color-text);background:var(--color-surface-sunken);border-color:var(--color-border)}.button-danger{color:var(--color-danger);background:var(--color-surface-raised);border-color:var(--color-danger)}.button-danger:hover{color:var(--color-danger);background:var(--color-surface-sunken);border-color:var(--color-danger)}button[aria-disabled=true],button[aria-disabled=true]:hover{color:var(--color-text-muted);background:var(--color-surface-sunken);border-color:var(--color-border-subtle);cursor:not-allowed;transform:none}label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-block-end:var(--space-1);display:block}input,select,textarea{min-block-size:var(--target-min);inline-size:100%;padding:var(--space-2) var(--space-3);font:inherit;color:var(--color-text);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard)}input::placeholder{color:var(--color-text-muted)}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-subtle)}input[type=radio],input[type=checkbox]{accent-color:var(--color-accent)}input[type=color]{inline-size:var(--target-min);padding:var(--space-1);cursor:pointer}input:hover,select:hover,textarea:hover{border-color:var(--color-text-muted)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--color-danger)}::selection{color:var(--color-on-accent);background:var(--color-accent)}