:root,[data-theme=white]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-background:#fff;--color-surface:#f6f6f7;--color-border:#e3e3e6;--color-text:#17171a;--color-text-muted:#6e6e76;--color-hover:#ececef;--color-success:#1f7a46;--color-danger:#c0271f;--color-scrim:#00000059}[data-theme=grey]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:#2b2c30;--color-surface:#333438;--color-border:#44454b;--color-text:#f1f1f3;--color-text-muted:#a6a7ae;--color-hover:#3c3d43;--color-success:#6fd39b;--color-danger:#ff9a90;--color-scrim:#00000080}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:#121215;--color-surface:#1a1a1e;--color-border:#2b2b31;--color-text:#f3f3f5;--color-text-muted:#9c9ca5;--color-hover:#232329;--color-success:#5fcf92;--color-danger:#ff8f85;--color-scrim:#0000008c}[data-theme=black]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:#000;--color-surface:#0a0a0b;--color-border:#232326;--color-text:#fafafa;--color-text-muted:#8c8c94;--color-hover:#161618;--color-success:#63d396;--color-danger:#ff9089;--color-scrim:#0009}:root,[data-accent=blue]{--color-accent:var(--lightningcss-light,#2d5bd7)var(--lightningcss-dark,#7aa7ff);--color-accent-soft:var(--lightningcss-light,#2d5bd71f)var(--lightningcss-dark,#7aa7ff33);--color-on-accent:var(--lightningcss-light,#fff)var(--lightningcss-dark,#060b16)}[data-accent=violet]{--color-accent:var(--lightningcss-light,#7047c7)var(--lightningcss-dark,#b492ff);--color-accent-soft:var(--lightningcss-light,#7047c71f)var(--lightningcss-dark,#b492ff33);--color-on-accent:var(--lightningcss-light,#fff)var(--lightningcss-dark,#120d1d)}[data-accent=rose]{--color-accent:var(--lightningcss-light,#bd365f)var(--lightningcss-dark,#ff8fb1);--color-accent-soft:var(--lightningcss-light,#bd365f1f)var(--lightningcss-dark,#ff8fb133);--color-on-accent:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1b0910)}[data-accent=orange]{--color-accent:var(--lightningcss-light,#a84f05)var(--lightningcss-dark,#ffad66);--color-accent-soft:var(--lightningcss-light,#a84f051f)var(--lightningcss-dark,#ffad6633);--color-on-accent:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1b0d03)}[data-accent=green]{--color-accent:var(--lightningcss-light,#187348)var(--lightningcss-dark,#69d89c);--color-accent-soft:var(--lightningcss-light,#1873481f)var(--lightningcss-dark,#69d89c33);--color-on-accent:var(--lightningcss-light,#fff)var(--lightningcss-dark,#06150e)}:root{--sidebar-width:220px;--container-width:1200px;--container-gutter:24px;--header-height:56px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius:8px;--radius-lg:14px;--transition:.16s ease;--shadow:0 6px 24px #00000024;--font-sans:var(--font-google-sans), Arial, Helvetica, sans-serif}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}body{background:var(--color-background);min-height:100dvh;color:var(--color-text);font-family:var(--font-sans);font-kerning:normal;font-optical-sizing:auto;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;font-weight:400;line-height:1.5}h1,h2,h3,h4,h5,h6,b,strong{font-weight:400}a{color:inherit;text-decoration:none}ul{padding:0;list-style:none}img,svg,video{max-width:100%;display:block}button{font:inherit;color:inherit}.icon-button{border-radius:var(--radius);width:34px;height:34px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:1px solid #0000;place-items:center;padding:0;display:grid}.icon-button:hover{background:var(--color-hover);color:var(--color-text)}.icon-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.text-input{background:var(--color-surface);min-width:0;height:50px;color:var(--color-text);font:inherit;border:0;border-radius:12px;outline:0;padding-inline:16px;font-size:14px;font-weight:400}.text-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.color-swatch,button.color-swatch{background:var(--color-swatch-color);border:0;border-radius:12px;flex:0 0 50px;width:50px;height:50px;padding:0;box-shadow:inset 0 0 0 1px #0000001f}button.color-swatch{cursor:pointer}.color-swatch:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.action-button{background:var(--color-surface);height:50px;color:var(--color-text);cursor:pointer;font:inherit;white-space:nowrap;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding-inline:18px;font-size:14px;font-weight:400;line-height:1;display:inline-flex}.action-button:hover{background:var(--color-hover)}.action-button-primary,.action-button-soft{border-radius:999px}.action-button-primary{background:var(--color-accent);color:var(--color-on-accent)}.action-button-primary:hover{background:var(--color-accent);filter:brightness(1.06)}.action-button-soft{background:var(--color-accent-soft);color:var(--color-accent)}.action-button-soft:hover{background:var(--color-accent-soft);filter:brightness(1.06)}.action-button:disabled{cursor:default;opacity:.45}.action-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.action-button svg{width:17px;height:17px}.segmented-control{background:var(--color-surface);border-radius:14px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:4px;height:50px;padding:4px;display:grid}.segmented-control-option{min-width:0;color:var(--color-text-muted);cursor:pointer;font:inherit;background:0 0;border:0;border-radius:10px;padding-inline:10px;font-size:14px;font-weight:400}.segmented-control-option:hover{color:var(--color-text)}.segmented-control-option[data-active=true]{background:var(--color-accent-soft);color:var(--color-accent)}.segmented-control-option:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px}.copy-icon{flex:none;width:18px;height:18px}.format-card{background:var(--color-surface);cursor:pointer;text-align:left;border:0;border-radius:14px;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:60px;padding-inline:18px;display:grid}.format-card:hover{background:var(--color-hover)}.format-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.format-card-label{color:var(--color-text-muted);letter-spacing:.06em;font-size:12px;font-weight:400}.format-card-value{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:14px;font-weight:400}.format-card-action{color:var(--color-text-muted);place-items:center;display:grid}.format-card:hover .format-card-action{color:var(--color-text)}.color-band-strip{border-radius:20px;flex-direction:column;min-height:300px;margin:0;display:flex;position:relative;overflow:hidden}.color-band-strip>.color-band-strip-view-item{z-index:2;opacity:0;pointer-events:none;flex:none;width:34px;min-width:34px;height:34px;min-height:34px;transition:opacity .14s;display:block;position:absolute;bottom:8px;left:8px}.color-band-strip:hover>.color-band-strip-view-item,.color-band-strip>.color-band-strip-view-item:focus-within{opacity:1;pointer-events:auto}.color-band-strip-view-trigger{color:#fff;cursor:pointer;background:#00000094;border:0;border-radius:50%;place-items:center;width:34px;height:34px;padding:0;display:grid}.color-band-strip-view-trigger:focus-visible{outline-offset:2px;outline:2px solid #fff}.color-band-strip li{--color-band-active-basis:96px;flex:64px;min-width:0;min-height:64px;transition:flex-basis .18s,flex-grow .18s;display:grid}.color-band{cursor:pointer;min-width:0;font:inherit;border:0;grid-area:1/1;align-content:center;justify-items:center;gap:4px;padding:10px 6px;display:grid}.color-band-strip[data-reorderable=true] .color-band{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.color-band-strip[data-reordering=true] .color-band{cursor:grabbing}.color-band-strip[data-reordering=true] li{flex-grow:1;transition:none}.color-band-strip li[data-drag-placeholder=true]{opacity:.18}.color-band-drag-preview{z-index:1000;cursor:grabbing;opacity:.97;pointer-events:none;transform-origin:50%;-webkit-user-select:none;user-select:none;will-change:left, top;border-radius:18px;align-content:center;justify-items:center;gap:4px;padding:10px 6px;display:grid;position:fixed;transform:scale(1.025);box-shadow:0 16px 36px #00000047}.color-band-drag-preview .color-band-label,.color-band-drag-preview .color-band-value{opacity:1;transform:none}.color-band-view-trigger,.color-band-delete-trigger{z-index:1;color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:#0000006b;border:0;border-radius:50%;grid-area:1/1;place-self:start end;place-items:center;width:32px;height:32px;margin:8px;padding:0;transition:opacity .14s;display:grid}.color-band-delete-trigger{margin-right:48px}.color-band-delete-trigger:disabled{cursor:default}.color-band-strip li:focus-within .color-band-view-trigger,.color-band-view-trigger:focus-visible,.color-band-strip li:focus-within .color-band-delete-trigger,.color-band-delete-trigger:focus-visible{opacity:.8;pointer-events:auto}.color-band-view-trigger:focus-visible,.color-band-delete-trigger:focus-visible{outline-offset:2px;outline:2px solid}.color-band-label{font-variant-numeric:tabular-nums;font-size:13px;font-weight:400}.color-band-value{font-variant-numeric:tabular-nums;opacity:.85;overflow-wrap:anywhere;font-size:11px}.color-band-action{place-items:center;display:grid}.color-band-label,.color-band-value,.color-band-action{opacity:0;transition:opacity .14s,transform .14s;transform:translateY(4px)}:is(.color-band-strip li:has(>.color-band:focus-visible),.color-band-strip li:has(>.color-band:active),.color-band-strip li:has(>.color-band-view-trigger:focus-visible),.color-band-strip li:has(>.color-band-delete-trigger:focus-visible)){flex-basis:var(--color-band-active-basis);flex-grow:2}:is(.color-band-strip li:has(>.color-band:focus-visible) .color-band-label,.color-band-strip li:has(>.color-band:focus-visible) .color-band-value,.color-band-strip li:has(>.color-band:focus-visible) .color-band-action,.color-band-strip li:has(>.color-band:active) .color-band-label,.color-band-strip li:has(>.color-band:active) .color-band-value,.color-band-strip li:has(>.color-band:active) .color-band-action){opacity:.85;transform:translateY(0)}:is(.color-band-strip li:has(>.color-band:focus-visible) .color-band-label,.color-band-strip li:has(>.color-band:active) .color-band-label){opacity:1}:is(.color-band-strip li:has(>.color-band:focus-visible) .color-band-action,.color-band-strip li:has(>.color-band:active) .color-band-action){opacity:.75}.color-band:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px}@media (min-width:720px){.color-band-strip{flex-direction:row}.color-band-strip li{--color-band-active-basis:0px;flex-basis:0;min-height:0}.color-band-strip[data-reordering=true] li{flex-basis:0}}.color-band-strip.color-band-strip-vertical{flex-direction:column}.color-band-strip-vertical li{--color-band-active-basis:0px;flex-basis:0;min-height:0}@media (hover:hover) and (pointer:fine){.color-band-strip li:hover{flex-basis:var(--color-band-active-basis);flex-grow:2}.color-band-strip li:hover .color-band-label,.color-band-strip li:hover .color-band-value,.color-band-strip li:hover .color-band-action{opacity:.85;transform:translateY(0)}.color-band-strip li:hover .color-band-label{opacity:1}.color-band-strip li:hover .color-band-action{opacity:.75}.color-band-strip li:hover .color-band-view-trigger,.color-band-strip li:hover .color-band-delete-trigger{opacity:.8;pointer-events:auto}.color-band-strip li:hover .color-band-delete-trigger:disabled{opacity:.3}}.color-band-strip[data-reordering=true] li,.color-band-strip[data-reordering=true] li:hover{flex-grow:1;transition:none}@media (hover:none),(pointer:coarse){.color-band-strip>.color-band-strip-view-item{opacity:1;pointer-events:auto}.color-band-view-trigger,.color-band-delete-trigger{opacity:.8;pointer-events:auto}.color-band-delete-trigger:disabled{opacity:.3}}@media (prefers-reduced-motion:reduce){.color-band-strip li,.color-band-label,.color-band-value,.color-band-action,.color-band-view-trigger,.color-band-delete-trigger,.color-band-strip>.color-band-strip-view-item{transition:none}}.tool-page-header h1{font-size:clamp(34px,4.5vw,58px);font-weight:400;line-height:1.05}.tool-page-header p{color:var(--color-text-muted);margin-top:14px;font-size:16px;line-height:1.5}.tool-page-header>span{color:var(--color-text-muted);text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:400;display:block}@media (max-width:600px){.tool-page-header h1{font-size:clamp(32px,10vw,46px)}}.range-slider{box-sizing:border-box;appearance:none;background:var(--range-slider-track,var(--color-accent));cursor:pointer;border:0;border-radius:9px;width:100%;height:40px;margin:0;padding-inline:8px}.range-slider::-webkit-slider-thumb{box-sizing:border-box;appearance:none;border:3px solid var(--color-background);background:var(--color-accent);border-radius:8px;width:22px;height:22px;box-shadow:0 0 0 1px #0006}.range-slider::-moz-range-thumb{box-sizing:border-box;border:3px solid var(--color-background);background:var(--color-accent);border-radius:8px;width:22px;height:22px;box-shadow:0 0 0 1px #0006}.range-slider:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px}.tool-workspace-grid{grid-template-columns:minmax(0,1.35fr) minmax(310px,.95fr);align-items:start;gap:26px;display:grid}@media (max-width:850px){.tool-workspace-grid{grid-template-columns:1fr}}.brand{white-space:nowrap;letter-spacing:-.01em;min-height:34px;color:var(--color-text);align-items:center;gap:8px;font-size:22px;font-weight:600;display:flex;overflow:hidden}.brand-logo{flex:0 0 28px;width:28px;height:28px;display:block}.theme-toggle svg{display:none}[data-theme=white] .theme-toggle svg[data-theme-icon=white],[data-theme=grey] .theme-toggle svg[data-theme-icon=grey],[data-theme=dark] .theme-toggle svg[data-theme-icon=dark],[data-theme=black] .theme-toggle svg[data-theme-icon=black]{display:block}.accent-toggle,.accent-toggle:hover{color:var(--color-accent)}.accent-toggle svg{display:none}[data-accent=blue] .accent-toggle svg[data-accent-icon=blue],[data-accent=violet] .accent-toggle svg[data-accent-icon=violet],[data-accent=rose] .accent-toggle svg[data-accent-icon=rose],[data-accent=orange] .accent-toggle svg[data-accent-icon=orange],[data-accent=green] .accent-toggle svg[data-accent-icon=green]{display:block}.mobile-bar{z-index:50;height:var(--header-height);background:var(--color-background);border-bottom:1px solid var(--color-border);position:sticky;top:0}.app-shell{grid-template-columns:minmax(0,1fr);min-height:100dvh;display:grid}.sidebar-region{top:var(--header-height);z-index:45;width:min(var(--sidebar-width), 86vw);background:var(--color-surface);border-right:1px solid var(--color-border);position:fixed;bottom:0;left:0;overflow:hidden}.menu-scrim{inset:var(--header-height) 0 0 0;z-index:40;background:var(--color-scrim);cursor:default;border:0;width:100%;padding:0;position:fixed}.sidebar{height:100%;min-height:100%;padding:var(--space-5);flex-direction:column;display:flex;position:relative}.sidebar-top,.sidebar-bottom{flex:none}.sidebar-middle{overscroll-behavior:contain;scrollbar-width:none;flex:auto;min-height:0;overflow:hidden auto}.sidebar-middle::-webkit-scrollbar{display:none}.sidebar-profile{min-height:48px;color:var(--color-text);white-space:nowrap;align-items:center;gap:10px;margin-top:32px;padding-inline:8px;display:flex;overflow:hidden}.sidebar-profile-avatar{background:var(--color-accent-soft);width:34px;height:34px;color:var(--color-accent);border-radius:50%;flex:0 0 34px;place-items:center;font-size:14px;font-weight:400;display:grid}.sidebar-profile-avatar svg{width:18px;height:18px}.sidebar-profile-link{border-radius:var(--radius);text-decoration:none}.sidebar-profile-link:hover{background:var(--color-hover)}.sidebar-profile-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sidebar-profile-unavailable .sidebar-profile-avatar{background:color-mix(in srgb, var(--color-danger) 12%, transparent);color:var(--color-danger)}.sidebar-profile-copy{gap:2px;min-width:0;display:grid}.sidebar-profile-label{color:var(--color-text-muted);font-size:11px;font-weight:400}.sidebar-profile-email{text-overflow:ellipsis;font-size:13px;font-weight:400;overflow:hidden}.sidebar-nav{gap:var(--space-2);margin-top:24px;display:grid}.brand+.sidebar-nav{margin-top:40px}.sidebar-nav-label{color:var(--color-text-muted);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;font-size:11px;font-weight:400;overflow:hidden}.sidebar-nav-label-section{margin-top:18px}.sidebar-link{min-height:40px;padding-inline:var(--space-3);border-radius:var(--radius);color:var(--color-text);white-space:nowrap;align-items:center;gap:10px;font-size:14px;font-weight:400;display:flex;overflow:hidden}.sidebar-link:hover{background:var(--color-hover)}:is(.app-shell:has([data-page=color-picker]) [data-nav=color-picker],.app-shell:has([data-page=color-converter]) [data-nav=color-converter],.app-shell:has([data-page=contrast-checker]) [data-nav=contrast-checker],.app-shell:has([data-page=background-foreground]) [data-nav=background-foreground],.app-shell:has([data-page=color-mixer]) [data-nav=color-mixer],.app-shell:has([data-page=palette-builder]) [data-nav=palette-builder],.app-shell:has([data-page=color-palettes]) [data-nav=color-palettes],.app-shell:has([data-page=color-wheel]) [data-nav=color-wheel],.app-shell:has([data-page=color-scales]) [data-nav=color-scales],.app-shell:has([data-page=gradient-builder]) [data-nav=gradient-builder],.app-shell:has([data-page=image-colors]) [data-nav=image-colors],.app-shell:has([data-page=batch-color-converter]) [data-nav=batch-color-converter],.app-shell:has([data-page=color-difference]) [data-nav=color-difference],.app-shell:has([data-page=wide-gamut-colors]) [data-nav=wide-gamut-colors],.app-shell:has([data-page=visual-gamut-inspector]) [data-nav=visual-gamut-inspector],.app-shell:has([data-page=alpha-compositor]) [data-nav=alpha-compositor],.app-shell:has([data-page=palette-accessibility]) [data-nav=palette-accessibility],.app-shell:has([data-page=color-vision-simulator]) [data-nav=color-vision-simulator],.app-shell:has([data-page=website-colors]) [data-nav=website-colors]){background:var(--color-accent-soft);color:var(--color-accent)}.sidebar-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sidebar-link svg{color:var(--color-text-muted);flex:none}.sidebar-link:hover svg{color:inherit}.sidebar-collapse{z-index:1;border:1px solid var(--color-border);background:var(--color-background);width:26px;height:26px;color:var(--color-text-muted);cursor:pointer;border-radius:50%;place-items:center;padding:0;display:none;position:absolute;top:78px;right:0;transform:translate(50%)}.sidebar-collapse svg{width:14px;height:14px}.sidebar-collapse:hover{color:var(--color-text)}.sidebar-collapse:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sidebar-format{margin-bottom:var(--space-4);gap:6px;margin-top:10px;display:grid;overflow:hidden}.sidebar-format-label{color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;font-size:11px;font-weight:400}.sidebar-format-selector{width:100%}.sidebar-foot{align-items:center;gap:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border);display:flex}.app-main{flex-direction:column;min-width:0;min-height:100dvh;display:flex}.container{width:100%;max-width:var(--container-width);padding-inline:var(--container-gutter);padding-block:var(--space-6);flex:1 0 auto;margin-inline:auto}@media (max-width:899.98px){.sidebar-region{visibility:hidden;pointer-events:none;transition:transform .2s,visibility 0s linear .2s;transform:translate(-100%)}.sidebar-region[data-open=true]{visibility:visible;pointer-events:auto;transition-delay:0s;transform:translate(0)}}@media (min-width:900px){.mobile-bar,.menu-scrim{display:none}.app-shell{grid-template-columns:var(--sidebar-width) minmax(0, 1fr);transition:grid-template-columns .2s}.sidebar-region{z-index:auto;background:0 0;align-self:start;width:auto;height:100dvh;position:sticky;top:0;bottom:auto}.sidebar{height:100%;min-height:0;transition:padding-inline .2s}.sidebar-region{overflow:visible}.sidebar-collapse{display:grid}.sidebar-collapse svg{transition:transform .2s}.sidebar-link{transition:gap .2s,padding-inline .2s}[data-sidebar=collapsed] .sidebar-collapse svg{transform:scaleX(-1)}[data-sidebar=collapsed]{--sidebar-width:60px}[data-sidebar=collapsed] .sidebar{padding-inline:10px}[data-sidebar=collapsed] .brand{justify-content:center;gap:0;width:40px}[data-sidebar=collapsed] .sidebar-link{gap:0;padding-inline:10px}[data-sidebar=collapsed] .sidebar-profile{gap:0;padding-inline:3px}[data-sidebar=collapsed] .sidebar-format{display:none}[data-sidebar=collapsed] .sidebar-nav-label{opacity:0}[data-sidebar=collapsed] .brand-text,[data-sidebar=collapsed] .sidebar-profile-copy,[data-sidebar=collapsed] .sidebar-link-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@media (prefers-reduced-motion:reduce){.sidebar-region,.app-shell,.sidebar,.sidebar-link,.sidebar-collapse svg{transition:none}}.language-selector{min-width:104px}[data-sidebar=collapsed] .sidebar .language-selector{display:none}