:root{--rail-width:72px;--sidebar-width:252px;--header-height:66px;--bg:#fff;--surface:#fff;--surface-soft:#e8e8e8;--surface-muted:#e4ebea;--sidebar:#e8e8e8;--rail:#202630;--rail-hover:#2c3440;--text:#171b1f;--text-soft:#59646a;--text-faint:#7c878c;--line:#e8e8e8;--line-strong:#c5ccca;--accent:#ff4000;--accent-hover:#fc7346;--accent-soft:#ffc1ad;--accent-ink:#fff;--success:#009d08;--danger:#f60404;--focus:#2374d8;--radius-card:8px;--radius-control:6px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-theme=dark]{--bg:#14181b;--surface:#20252a;--surface-soft:#272d32;--surface-muted:#30373d;--sidebar:#191919;--rail:#0f1317;--rail-hover:#202832;--text:#f4f6f5;--text-soft:#b3bec2;--text-faint:#879297;--line:#191919;--line-strong:#485158;--accent:#ff4000;--accent-hover:#fc7346;--accent-soft:#ffc1ad;--accent-ink:#fff;--success:#009d08;--danger:#f60404;--focus:#2374d8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{background:var(--bg);scrollbar-gutter:stable;scroll-behavior:smooth;min-width:320px;min-height:100%}body{background:var(--bg);min-width:320px;min-height:100svh;color:var(--text);font-optical-sizing:auto;font-variation-settings:"GRAD" 0;margin:0;font-family:Google Sans Variable,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}button,input,textarea,select,code,pre{font:inherit;font-optical-sizing:auto;font-variation-settings:"GRAD" 0;font-family:inherit;font-style:normal;font-weight:400}button{color:inherit}a{color:inherit;text-decoration:none}img,svg{display:block}::selection{background:var(--accent-soft)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100svh}.site-header{z-index:80;width:calc(var(--rail-width) + var(--sidebar-width));grid-template-columns:var(--rail-width) var(--sidebar-width);background:var(--sidebar);display:grid;position:fixed;inset:0 auto 0 0}.nav-rail{background:var(--rail);color:#fff;flex-direction:column;align-items:center;min-height:100svh;padding:18px 12px;display:flex}.rail-brand,.mobile-brand{align-items:center;display:inline-flex}.rail-brand{width:46px;height:46px;color:var(--rail);background:#fff;border-radius:50%;justify-content:center}.brand-glyph{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);gap:2px;width:22px;height:22px;display:grid;position:relative;transform:rotate(45deg)}.brand-glyph i{background:currentColor;border-radius:1px;display:block}.rail-navigation{gap:10px;width:100%;margin-top:66px;display:grid}.rail-navigation a,.rail-footer .icon-button{color:#c8cdd1;border-radius:10px;place-items:center;width:48px;height:48px;margin-inline:auto;transition:background .15s,color .15s;display:grid}.rail-navigation a:hover,.rail-navigation a:focus-visible,.rail-navigation a[aria-current=page],.rail-footer .icon-button:hover,.rail-footer .icon-button:focus-visible{background:var(--rail-hover);color:#fff}.rail-navigation svg,.rail-footer svg{width:21px;height:21px}.rail-footer{justify-items:center;gap:14px;width:100%;margin-top:auto;display:grid}.rail-color{background:var(--accent);border:4px solid #fff;border-radius:50%;width:34px;height:34px}.rail-footer .theme-menu{position:relative}.rail-footer .theme-popover{inset:auto auto 0 calc(100% + 14px)}.nav-panel{background:var(--sidebar);flex-direction:column;min-width:0;min-height:100svh;padding:28px 22px 24px;display:flex;overflow:hidden}.sidebar-header{justify-content:space-between;align-items:center;gap:14px;min-height:50px;display:flex}.sidebar-brand{gap:1px;min-width:0;display:grid}.sidebar-brand>span{color:var(--text);font-size:22px}.sidebar-brand small{color:var(--text-soft);font-size:13px}.sidebar-create{background:var(--rail);color:#fff;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;transition:background .15s,transform .15s;display:grid}.sidebar-create:hover,.sidebar-create:focus-visible{background:var(--rail-hover)}.sidebar-create:active{transform:scale(.97)}.sidebar-section-heading{color:var(--text-soft);text-transform:uppercase;justify-content:space-between;align-items:center;margin:28px 4px 10px;font-size:13px;display:flex}.sidebar-section-heading small{background:var(--surface-muted);min-width:24px;height:24px;color:var(--text-soft);border-radius:999px;justify-content:center;align-items:center;padding-inline:7px;font-size:12px;display:inline-flex}.sidebar-nav{overscroll-behavior:contain;scrollbar-gutter:stable;gap:7px;min-height:0;display:grid;overflow-y:auto}.sidebar-nav::-webkit-scrollbar{width:8px}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--text-faint);background-clip:padding-box;border:0;border-radius:999px}.sidebar-nav a{border-radius:var(--radius-control);min-height:68px;color:var(--text-soft);grid-template-columns:42px minmax(0,1fr) 8px;align-items:center;gap:11px;padding:10px;transition:background .15s,color .15s;display:grid}.sidebar-nav a:hover,.sidebar-nav a:focus-visible{background:var(--surface-soft);color:var(--text)}.sidebar-nav a[aria-current=page]{background:var(--surface);color:var(--text)}.sidebar-nav-icon{background:var(--surface-muted);width:42px;height:42px;color:var(--text-soft);border-radius:50%;place-items:center;display:grid}.sidebar-nav-icon svg{width:19px;height:19px}.sidebar-nav-copy{gap:2px;min-width:0;display:grid}.sidebar-nav-copy>span{color:inherit;text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.sidebar-nav-copy small{color:var(--text-faint);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.sidebar-nav-status{background:0 0;border-radius:50%;width:7px;height:7px}.sidebar-empty{color:var(--text-soft);margin:8px 6px;font-size:14px}.sidebar-note{color:var(--text-soft);grid-template-columns:10px minmax(0,1fr);gap:10px;margin-top:auto;padding:18px 4px 0;display:grid}.sidebar-note-dot{background:var(--success);border-radius:50%;width:8px;height:8px;margin-top:7px}.sidebar-note>div{gap:3px;display:grid}.sidebar-note span{color:var(--text);font-size:14px}.sidebar-note p{margin:0;font-size:12px}.mobile-nav-backdrop{display:none}.mobile-shell-bar{z-index:83;height:var(--header-height);background:var(--rail);color:#fff;justify-content:space-between;align-items:center;gap:16px;margin:0 16px;display:flex;position:relative}.mobile-brand{color:#fff;gap:10px;min-height:44px;font-size:18px}.mobile-brand .brand-glyph{width:20px;height:20px}.mobile-shell-actions{align-items:center;gap:4px;display:flex}.mobile-shell-actions .icon-button{color:#d7dadd;width:44px;height:44px}.mobile-shell-actions .theme-popover{right:0}.app-stage{min-height:100svh;margin-left:calc(var(--rail-width) + var(--sidebar-width));background:var(--bg)}.container{width:min(1180px,100% - 64px);margin-inline:auto}.button,.icon-button{cursor:pointer;border:0;transition:background .15s,color .15s,transform .15s}.button:focus-visible,.icon-button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.slider:focus-visible,.saturation-area:focus-visible,.color-swatch-button:focus-visible,.select-trigger:focus-visible,.segmented button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.button:disabled,.icon-button:disabled{background:var(--surface-muted);color:var(--text-faint);cursor:not-allowed}.button{border-radius:var(--radius-control);white-space:nowrap;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:15px;display:inline-flex}.button svg{width:18px;height:18px}.button-primary{background:var(--accent);color:var(--accent-ink)}.button-primary:hover{background:var(--accent-hover)}.button-quiet:hover{background:var(--surface-muted)}.icon-button{border-radius:var(--radius-control);width:40px;height:40px;color:var(--text-soft);background:0 0;place-items:center;padding:0;display:inline-grid}.icon-button svg{width:18px;height:18px}.eyebrow{color:var(--text-soft);text-transform:uppercase;margin:0 0 10px;font-size:12px}.dashboard-heading,.tool-heading{padding-top:58px;padding-bottom:34px}.dashboard-heading h1,.tool-heading h1,.not-found h1{max-width:860px;color:var(--text);margin:0;font-size:clamp(38px,4vw,58px)}.page-heading-description{max-width:760px;color:var(--text-soft);margin:18px 0 0;font-size:17px}.dashboard-home,.tool-page{min-height:100svh;padding-bottom:64px}.workspace-overview,.tool-workspace{padding-bottom:64px}.overview-hero{border-radius:var(--radius-card);background:var(--surface);grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);min-height:410px;display:grid;overflow:hidden}.overview-copy{flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(34px,5vw,70px);display:flex}.overview-copy h2{max-width:650px;margin:0;font-size:clamp(31px,4vw,52px)}.overview-copy>p:not(.eyebrow){max-width:600px;color:var(--text-soft);margin:20px 0 28px;font-size:16px}.overview-color{background:var(--surface-soft);grid-template-rows:minmax(240px,1fr) auto;min-height:410px;display:grid}.overview-color-meta{background:var(--rail);color:#fff;gap:20px;padding:24px;display:grid}.overview-color-meta>div{gap:3px;display:grid}.overview-color-meta span,.overview-color-meta dt{color:#b8bec3;text-transform:uppercase;font-size:12px}.overview-color-meta strong{font-size:28px}.overview-color-meta dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;display:grid}.overview-color-meta dl div{gap:2px;display:grid}.overview-color-meta dd{margin:0;font-size:14px}.overview-palette{border-radius:var(--radius-card);grid-template-columns:repeat(5,minmax(0,1fr));height:74px;margin-top:14px;display:grid;overflow:hidden}.overview-palette span{min-width:0}.workspace-tools{border-radius:var(--radius-card);background:var(--surface);margin-top:14px;padding:34px}.workspace-section-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:30px;padding-bottom:24px;display:flex}.workspace-section-heading h2,.workspace-privacy h2{margin:0;font-size:24px}.workspace-section-heading>p{max-width:420px;color:var(--text-soft);margin:0;font-size:14px}.workspace-tool-list{display:grid}.workspace-tool-list>a{border-bottom:1px solid var(--line);min-height:78px;color:var(--text-soft);grid-template-columns:44px minmax(0,1fr) 22px;align-items:center;gap:16px;padding:12px 4px;transition:color .15s,padding .15s;display:grid}.workspace-tool-list>a:last-child{border-bottom:0}.workspace-tool-list>a:hover,.workspace-tool-list>a:focus-visible{color:var(--text);padding-left:10px}.workspace-tool-icon{background:var(--surface-soft);width:42px;height:42px;color:var(--text);border-radius:50%;place-items:center;display:grid}.workspace-tool-copy{gap:3px;min-width:0;display:grid}.workspace-tool-copy>span{color:var(--text);font-size:16px}.workspace-tool-copy small{color:var(--text-soft);font-size:13px}.workspace-tool-list>a>svg{width:18px;height:18px}.workspace-privacy{border-radius:var(--radius-card);background:var(--surface-soft);grid-template-columns:10px minmax(0,1fr);gap:14px;margin-top:14px;padding:26px 30px;display:grid}.workspace-privacy-dot{background:var(--success);border-radius:50%;width:9px;height:9px;margin-top:9px}.workspace-privacy p{max-width:720px;color:var(--text-soft);margin:5px 0 0;font-size:14px}.tool-card{border-radius:var(--radius-card);background:var(--surface);border:0;min-width:0}.card-heading{justify-content:space-between;align-items:flex-start;gap:18px;min-height:52px;display:flex}.card-heading h2{margin:0;font-size:20px}.card-heading p{color:var(--text-soft);margin:5px 0 0;font-size:13px}.picker-layout{grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);align-items:start;gap:16px;display:grid}.picker-main-card,.palette-builder-card,.gradient-preview-card,.extract-image-card{padding:18px}.picker-side-stack{gap:16px;display:grid}.format-card,.library-card,.saved-palettes-card,.contrast-controls-card,.contrast-preview-card,.gradient-editor-card,.extracted-palette-card{padding:26px}.picker-preview{border-radius:var(--radius-control);justify-content:space-between;align-items:flex-end;gap:20px;min-height:142px;margin-bottom:14px;padding:24px;display:flex}.picker-preview>div{gap:4px;display:grid}.picker-preview span{font-size:13px}.picker-preview strong{font-size:30px}.saturation-area{border-radius:var(--radius-control);cursor:crosshair;touch-action:none;width:100%;height:430px;position:relative;overflow:hidden}.saturation-area.is-compact{height:190px}.saturation-area{background:linear-gradient(to top, #000, #fff), linear-gradient(to right, #fff, var(--picker-hue));background-blend-mode:multiply}.saturation-cursor{z-index:2;left:var(--picker-x);top:var(--picker-y);pointer-events:none;border:3px solid #fff;border-radius:50%;width:24px;height:24px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000073,0 2px 7px #00000040}.picker-slider-stack{gap:16px;margin-top:18px;display:grid}.picker-slider-row{grid-template-columns:32px minmax(0,1fr);align-items:center;gap:14px;display:grid}.picker-slider-swatch{border-radius:50%;width:32px;height:32px;overflow:hidden}.slider{cursor:pointer;touch-action:none;align-items:center;width:100%;height:44px;display:flex;position:relative}.slider-track{background:var(--slider-gradient,var(--accent));border-radius:999px;width:100%;height:6px;overflow:hidden}.slider-thumb{left:var(--slider-value,0%);border:3px solid var(--surface);background:var(--text);border-radius:50%;width:18px;height:18px;position:absolute;top:50%;transform:translate(-50%,-50%)}.picker-code-row{grid-template-columns:minmax(180px,1fr) auto;align-items:end;gap:14px;margin-top:22px;display:grid}.picker-actions{gap:8px;display:flex}.field,.color-control{gap:8px;min-width:0;display:grid}.field>span,.field-label,.fine-tune-field>span,.field-label{color:var(--text-soft);font-size:13px}.field input,.color-control-row input,.fine-tune-input,.select-trigger{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-soft);width:100%;min-height:44px;color:var(--text)}.field input,.color-control-row input{outline:0;padding:0 12px}.field input:hover,.color-control-row input:hover,.select-trigger:hover{border-color:var(--line-strong)}.field input:focus,.color-control-row input:focus{border-color:var(--focus);background:var(--surface)}.has-error input,.form-error{color:var(--danger)}.has-error input{border-color:var(--danger)}.fine-tune-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px;display:grid}.fine-tune-field{gap:7px;min-width:0;display:grid}.fine-tune-input{align-items:center;display:flex;overflow:hidden}.fine-tune-input input{width:100%;min-width:0;height:42px;color:var(--text);background:0 0;border:0;outline:0;padding:0 4px 0 11px}.fine-tune-input i{color:var(--text-faint);padding-right:10px;font-style:normal}.format-list{margin-top:18px;display:grid}.format-row{border-bottom:1px solid var(--line);grid-template-columns:58px minmax(0,1fr) 40px;align-items:center;gap:8px;min-height:48px;display:grid}.format-row:last-child{border-bottom:0}.format-row>span{color:var(--text-faint);text-transform:uppercase;font-size:12px}.format-row code{min-width:0;color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.color-metrics{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;padding-top:18px;display:grid}.color-metrics div{gap:3px;display:grid}.color-metrics span{color:var(--text-faint);font-size:12px}.color-metrics strong{color:var(--text);font-size:15px}.saved-swatches{overscroll-behavior:contain;scrollbar-gutter:stable;height:214px;margin-top:16px;overflow-y:auto}.saved-swatch{border-bottom:1px solid var(--line);grid-template-columns:30px minmax(0,1fr) 40px 40px;align-items:center;gap:8px;min-height:48px;display:grid}.swatch-color{cursor:pointer;border:0;border-radius:50%;width:28px;height:28px;padding:0}.saved-swatch code{font-size:13px}.empty-note{color:var(--text-soft);margin:24px 0;font-size:14px}.history-block{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.history-swatches{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.history-swatches button{cursor:pointer;border:0;border-radius:50%;width:54px;height:54px;padding:0}.palette-layout,.gradient-layout{gap:16px;display:grid}.palette-builder-card{padding:18px}.palette-controls{grid-template-columns:minmax(180px,.9fr) minmax(180px,1fr) minmax(220px,1.3fr) auto;align-items:end;gap:14px;padding:8px 0 20px;display:grid}.palette-count-field>span,.angle-field>span,.stop-position-field>span{justify-content:space-between;gap:10px;display:flex}.palette-strip{border-radius:var(--radius-control);min-height:340px;display:grid;overflow:hidden}.palette-color{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;min-width:0;padding:20px 16px;display:flex}.palette-color>span{font-size:12px}.palette-color>strong{font-size:14px}.palette-edit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.palette-save-row{border-top:1px solid var(--line);grid-template-columns:minmax(220px,1fr) auto auto;align-items:end;gap:10px;margin-top:20px;padding-top:20px;display:grid}.saved-palettes-card{padding:26px}.count-badge{background:var(--surface-soft);min-width:30px;height:30px;color:var(--text-soft);border-radius:999px;justify-content:center;align-items:center;padding-inline:8px;font-size:13px;display:inline-flex}.saved-palette-list{overscroll-behavior:contain;scrollbar-gutter:stable;height:250px;margin-top:16px;overflow-y:auto}.saved-palette{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) 40px 40px;align-items:center;gap:6px;min-height:64px;display:grid}.saved-palette-main{min-width:0;color:var(--text);cursor:pointer;text-align:left;background:0 0;border:0;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:13px;padding:6px 0;display:grid}.saved-palette-strip{border-radius:var(--radius-control);height:38px;display:flex;overflow:hidden}.saved-palette-strip i{flex:1}.saved-palette-main>span:last-child{gap:2px;min-width:0;display:grid}.saved-palette-main strong,.saved-palette-main small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.saved-palette-main small{color:var(--text-faint);font-size:12px}.palette-skeleton,.swatch-skeleton-row{border-radius:var(--radius-control);background:linear-gradient(90deg, var(--surface-soft), var(--surface-muted), var(--surface-soft));background-size:220% 100%;min-height:58px;animation:1.5s linear infinite skeleton}.palette-skeleton+.palette-skeleton{margin-top:10px}@keyframes skeleton{to{background-position:-220% 0}}.contrast-layout{grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr);align-items:start;gap:16px;display:grid}.contrast-color-row{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);align-items:end;gap:10px;display:grid}.swap-button{margin-bottom:1px}.contrast-score{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:28px;padding:24px 0}.contrast-score>span{color:var(--text-soft);font-size:13px}.contrast-score strong{margin-top:4px;font-size:clamp(50px,6vw,76px);display:block}.contrast-score strong i{color:var(--text-faint);font-size:.44em;font-style:normal}.contrast-score p{color:var(--text-soft);margin:10px 0 0}.criteria-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px;display:grid}.criterion{border-radius:var(--radius-control);background:var(--surface-soft);justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:10px 12px;display:flex}.criterion span{color:var(--text-soft);font-size:13px}.criterion strong{font-size:13px}.criterion.passes strong{color:var(--success)}.criterion.fails strong{color:var(--danger)}.contrast-fix-row{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin-top:22px;display:grid}.contrast-fix-row span{color:var(--text-faint);font-size:12px}.contrast-fix-row strong{font-size:14px}.contrast-preview{border-radius:var(--radius-control);flex-direction:column;justify-content:center;align-items:flex-start;min-height:420px;margin-top:16px;padding:clamp(30px,5vw,66px);display:flex}.preview-kicker{text-transform:uppercase;margin:0 0 14px;font-size:13px}.contrast-preview h2{max-width:650px;margin:0;font-size:clamp(34px,5vw,58px)}.contrast-preview>p:not(.preview-kicker){max-width:620px;margin:18px 0 26px;font-size:17px}.preview-button{border-radius:var(--radius-control);border:1px solid;align-items:center;min-height:44px;padding:0 16px;display:inline-flex}.code-block{border-radius:var(--radius-control);background:var(--rail);color:#fff;margin:16px 0 0;padding:18px;font-size:13px;overflow-x:auto}.gradient-layout{grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);align-items:start}.gradient-preview{border-radius:var(--radius-control);height:560px}.gradient-code-row{grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:10px;margin-top:14px;display:grid}.gradient-code-row code{border-radius:var(--radius-control);background:var(--surface-soft);min-height:48px;color:var(--text);text-overflow:ellipsis;white-space:nowrap;align-items:center;padding:12px 14px;font-size:13px;display:flex;overflow:hidden}.gradient-top-controls{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;display:grid}.gradient-top-controls.is-radial{grid-template-columns:1fr}.angle-field.is-disabled{pointer-events:none}.stop-list{margin-top:26px;display:grid}.gradient-stop{border-bottom:1px solid var(--line);grid-template-columns:minmax(150px,.75fr) minmax(190px,1.25fr) 40px;align-items:end;gap:12px;padding:16px 0;display:grid}.gradient-stop:first-child{border-top:1px solid var(--line)}.gradient-actions{justify-content:space-between;gap:12px;margin-top:24px;display:flex}.gradient-export-actions{gap:8px;display:flex}.extract-layout{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);align-items:start;gap:16px;display:grid}.image-dropzone,.image-preview-shell{border-radius:var(--radius-control);background:var(--surface-soft);min-height:574px}.image-dropzone{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px;transition:background .15s;display:flex}.image-dropzone.is-dragging{background:var(--accent-soft)}.image-dropzone>svg{width:40px;height:40px;color:var(--text-soft);margin-bottom:18px}.image-dropzone h2{margin:0;font-size:25px}.image-dropzone p{max-width:440px;color:var(--text-soft);margin:10px 0 24px}.image-dropzone small{color:var(--text-faint);margin-top:16px;font-size:12px}.image-preview-shell{grid-template-rows:minmax(0,1fr) auto;display:grid;overflow:hidden}.image-preview-canvas{object-fit:contain;cursor:crosshair;width:100%;height:500px}.image-preview-bar{background:var(--surface);justify-content:space-between;align-items:center;gap:14px;min-height:74px;padding:12px 14px;display:flex}.image-preview-bar>div{min-width:0;display:grid}.image-preview-bar strong,.image-preview-bar span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.image-preview-bar span{color:var(--text-faint);font-size:12px}.form-error{margin:12px 0 0;font-size:13px}.extracted-colors{border-radius:var(--radius-control);border:1px solid var(--surface-soft);grid-template-columns:repeat(2,minmax(0,1fr));min-height:450px;margin-top:16px;display:grid;overflow:hidden}.extracted-color{justify-content:space-between;align-items:flex-end;gap:10px;min-height:112px;padding:14px;display:flex}.extracted-color>span{font-size:13px}.extracted-color .icon-button{color:inherit}.empty-panel{border-radius:var(--radius-control);background:var(--surface-soft);min-height:180px;color:var(--text-soft);text-align:center;place-items:center;padding:30px;display:grid}.extract-empty{min-height:450px;margin-top:16px}.privacy-note{color:var(--text-faint);margin:16px 0 0;font-size:12px}.color-control{position:relative}.color-control-row{grid-template-columns:44px minmax(0,1fr);min-width:0;display:grid}.color-swatch-button{border:1px solid var(--line);border-radius:var(--radius-control) 0 0 var(--radius-control);background:var(--surface-soft);cursor:pointer;border-right:0;width:44px;height:44px;padding:5px}.color-swatch-button>span{border-radius:3px;width:100%;height:100%;display:block}.theme-menu,.select-menu,.export-menu{position:relative}.popover-shell{z-index:120;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:5px;position:absolute;overflow:hidden}.popover-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;border-radius:6px;max-height:min(430px,100svh - 100px);overflow:hidden auto}.popover-scroll::-webkit-scrollbar{width:9px}.saved-swatches::-webkit-scrollbar{width:9px}.saved-palette-list::-webkit-scrollbar{width:9px}.popover-scroll::-webkit-scrollbar-thumb{background:var(--text-faint);background-clip:padding-box;border:0;border-radius:999px}.saved-swatches::-webkit-scrollbar-thumb{background:var(--text-faint);background-clip:padding-box;border:0;border-radius:999px}.saved-palette-list::-webkit-scrollbar-thumb{background:var(--text-faint);background-clip:padding-box;border:0;border-radius:999px}.theme-popover{width:170px;top:calc(100% + 8px);right:0}.theme-popover button,.select-popover button,.export-popover button{width:100%;min-height:42px;color:var(--text-soft);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:5px;align-items:center;gap:9px;padding:0 11px;display:flex}.export-popover button{justify-content:space-between}.export-popover button span{color:var(--text-faint);font-size:12px}.export-menu>.button.button-quiet[aria-expanded=true]{transform:none}.select-trigger{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;display:flex}.select-trigger svg{width:17px;height:17px;color:var(--text-faint)}.select-popover{width:max(100%,190px);top:calc(100% + 7px);left:0}.export-popover{width:248px;bottom:calc(100% + 8px);right:0}.export-option{grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:2px;display:grid}.export-popover .export-option-copy{border-radius:5px;place-items:center;width:42px;min-height:42px;padding:0;display:grid}.export-popover .export-option-copy:hover{background:var(--surface-soft)}.export-edit-button svg{width:16px;height:16px}.export-popover-divider{background:var(--line);height:1px;margin:5px 7px}.export-settings-popover{width:min(360px,100vw - 16px)}.export-settings{gap:14px;padding:12px;display:grid}.export-settings-heading{gap:3px;display:grid}.export-settings-heading span{color:var(--text-soft);font-size:12px}.export-token-list{overscroll-behavior:contain;gap:10px;max-height:min(280px,42svh);display:grid;overflow-y:auto}.export-token-list .field{grid-template-columns:minmax(74px,.7fr) minmax(0,1.3fr);align-items:center}.export-token-list .field>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.export-settings-actions{justify-content:flex-end;gap:8px;display:flex}.color-popover{width:286px;top:calc(100% + 8px);left:0}.compact-picker{padding:10px}.compact-picker-row{grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;margin-top:14px;display:grid}.compact-picker-preview{border-radius:50%;width:34px;height:34px}.compact-picker-sliders{min-width:0}.compact-color-field{margin-top:12px}.segmented{border-radius:var(--radius-control);background:var(--surface-soft);grid-auto-columns:1fr;grid-auto-flow:column;padding:3px;display:grid}.segmented button{min-height:44px;color:var(--text-soft);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:0 12px}.segmented button.is-active{background:var(--surface);color:var(--text)}.not-found{flex-direction:column;justify-content:center;align-items:flex-start;min-height:100svh;padding-block:100px;display:flex}.not-found p:not(.eyebrow){max-width:520px;color:var(--text-soft);margin:20px 0 28px;font-size:17px}.site-footer{display:none}@media (max-width:1199px){.site-header{width:100%;height:var(--header-height);background:var(--rail);display:block;inset:0 0 auto}.nav-rail{display:none}.nav-panel{z-index:82;inset:var(--header-height) auto 0 0;visibility:hidden;pointer-events:none;width:min(360px,100vw - 28px);min-height:0;transition:transform .18s,visibility .18s;display:flex;position:fixed;transform:translate(-102%)}.site-header.is-mobile-open .nav-panel{visibility:visible;pointer-events:auto;transform:translate(0)}.mobile-nav-backdrop{z-index:81;inset:var(--header-height) 0 0;cursor:pointer;background:0 0;border:0;width:auto;height:auto;padding:0;display:block;position:fixed}.app-stage{padding-top:var(--header-height);margin-left:0}.container{width:min(1120px,100% - 48px)}.picker-layout,.contrast-layout,.extract-layout,.gradient-layout{grid-template-columns:1fr}.picker-side-stack,.palette-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-random{width:100%}.contrast-preview-card,.extracted-palette-card,.extract-image-card{min-height:auto}}@media (max-width:819px){.container{width:min(100% - 32px,760px)}.dashboard-heading,.tool-heading{padding-top:38px;padding-bottom:26px}.dashboard-heading h1,.tool-heading h1,.not-found h1{font-size:clamp(34px,8vw,48px)}.page-heading-description{margin-top:14px;font-size:16px}.overview-hero{grid-template-columns:1fr}.overview-color{min-height:330px}.overview-copy{padding:34px 28px}.workspace-section-heading{flex-direction:column;align-items:flex-start;gap:10px}.picker-side-stack{grid-template-columns:1fr}.saturation-area{height:340px}.picker-code-row,.palette-save-row{grid-template-columns:1fr}.picker-actions{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.fine-tune-grid,.palette-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contrast-fix-row{grid-template-columns:1fr 1fr}.contrast-fix-row>div{grid-column:span 2}.gradient-preview{height:410px}.gradient-stop{grid-template-columns:1fr 40px}.gradient-stop .color-control{grid-column:span 2}.image-preview-canvas{height:400px}.image-dropzone,.image-preview-shell{min-height:470px}}@media (max-width:560px){.container{width:min(100% - 24px,520px)}.nav-panel{width:calc(100vw - 14px);padding:24px 18px 20px}.dashboard-heading,.tool-heading{padding-top:30px;padding-bottom:22px}.workspace-overview,.tool-workspace{padding-bottom:38px}.overview-copy,.workspace-tools,.format-card,.library-card,.saved-palettes-card,.contrast-controls-card,.contrast-preview-card,.gradient-editor-card,.extracted-palette-card{padding:22px}.overview-copy h2{font-size:32px}.overview-palette{height:56px}.workspace-section-heading h2,.workspace-privacy h2{font-size:21px}.workspace-tool-list>a{grid-template-columns:42px minmax(0,1fr) 18px;gap:12px}.workspace-tool-copy small{white-space:normal}.workspace-privacy{padding:22px}.picker-main-card,.palette-builder-card,.gradient-preview-card,.extract-image-card{padding:12px}.picker-preview{min-height:120px;padding:18px}.picker-preview strong{font-size:24px}.saturation-area{height:280px}.picker-actions,.palette-controls,.gradient-top-controls,.palette-edit-grid{grid-template-columns:1fr}.saved-palette{grid-template-columns:minmax(0,1fr) 38px}.saved-palette>.icon-button:nth-last-child(2){display:none}.saved-palette-main{grid-template-columns:88px minmax(0,1fr)}.contrast-color-row{grid-template-columns:1fr}.swap-button{justify-self:center;transform:rotate(90deg)}.criteria-grid,.extracted-colors{grid-template-columns:1fr}.contrast-preview{min-height:350px;padding:28px}.gradient-preview{height:320px}.gradient-actions{flex-direction:column}.gradient-export-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.image-dropzone{padding:26px}.image-preview-bar{flex-direction:column;align-items:flex-start}.color-popover{width:auto;position:fixed;inset:auto 12px 12px}.export-popover{right:0}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--rail-width:68px;--sidebar-width:252px;--content-gutter:clamp(20px, 3.2vw, 20px);--space-card-block:clamp(28px, 3.2vw, 52px);--space-panel-block:clamp(26px, 2.5vw, 40px);--space-feature-block:clamp(38px, 5vw, 76px);--space-section-block:clamp(36px, 4vw, 64px);--space-heading-start:clamp(48px, 6vw, 84px);--space-heading-end:42px;--bg:#fff;--surface:#fff;--surface-soft:#e8e8e8;--surface-muted:#eee;--sidebar:#fff;--rail:#0a0a0a;--rail-hover:#242424;--text:#111;--text-soft:#666;--text-faint:#8a8a8a;--line:#e2e2e2;--line-strong:#d4d4d4;--radius-card:0;--radius-control:6px}html[data-theme=dark]{--bg:#000;--surface:#000;--surface-soft:#111;--surface-muted:#1a1a1a;--sidebar:#000;--rail:#050505;--rail-hover:#202020;--text:#ededed;--text-soft:#a1a1a1;--text-faint:#737373;--line:#161616;--line-strong:#3a3a3a}.nav-rail{padding:16px 10px}.rail-brand{color:#fff;background:#111;border:1px solid #333;border-radius:8px;width:44px;height:44px}.brand-glyph{gap:2px;width:20px;height:20px}.brand-glyph i{background:#fff;border-radius:0}.brand-glyph i:nth-child(2),.brand-glyph i:nth-child(3){background:var(--accent)}.rail-navigation{gap:8px;margin-top:54px}.rail-navigation a,.rail-footer .icon-button{border-radius:6px;width:44px;height:44px}.rail-color{border-width:3px;width:30px;height:30px}.nav-panel{background:var(--sidebar);border-left:1px solid var(--line);padding:26px 20px 22px}.sidebar-brand>span{font-size:21px}.sidebar-brand small{font-size:12px}.sidebar-create{background:var(--text);width:40px;height:40px;color:var(--surface);border-radius:6px}.sidebar-section-heading{margin-top:26px}.sidebar-nav a{border:1px solid var(--sidebar);grid-template-columns:38px minmax(0,1fr) 8px;gap:10px;min-height:62px;padding:8px}.sidebar-nav-icon{background:var(--surface-muted);border-radius:6px;width:38px;height:38px}.sidebar-nav a[aria-current=page]{border-color:var(--line);background:var(--surface)}.sidebar-note{border-top:1px solid var(--line);padding-top:18px}.app-stage{background:var(--surface)}.container{width:100%;max-width:none;padding-inline:var(--content-gutter);margin-inline:0}.dashboard-home,.tool-page{background:var(--surface);min-height:100svh;padding-bottom:0}.dashboard-heading,.tool-heading{padding-top:var(--space-heading-start);padding-bottom:var(--space-heading-end);border-bottom:1px solid var(--line)}.dashboard-heading h1,.tool-heading h1,.not-found h1{max-width:940px;font-size:clamp(40px,4.8vw,66px)}.page-heading-description{max-width:720px;margin-top:16px;font-size:17px}.workspace-overview.container,.tool-workspace.container{padding-inline:0;padding-bottom:0}.tool-card{padding-inline:var(--content-gutter);background:0 0;border:0;border-radius:0}.picker-layout,.palette-layout,.contrast-layout,.gradient-layout,.extract-layout{border-bottom:1px solid var(--line);background:var(--surface);gap:0}.picker-layout{grid-template-columns:minmax(0,1.55fr) minmax(340px,.65fr)}.picker-main-card,.palette-builder-card,.gradient-preview-card,.extract-image-card{padding-block:var(--space-card-block)}.picker-main-card{border-right:1px solid var(--line)}.picker-side-stack{gap:0}.format-card,.library-card,.saved-palettes-card,.contrast-controls-card,.contrast-preview-card,.gradient-editor-card,.extracted-palette-card{padding-block:var(--space-panel-block)}.format-card,.library-card{--side-card-padding-inline:var(--content-gutter)}.format-card>.card-heading,.library-card>.card-heading,.saved-palettes-card>.card-heading{min-height:0;margin-bottom:20px;padding-bottom:22px;position:relative}.format-card>.card-heading:after,.library-card>.card-heading:after,.saved-palettes-card>.card-heading:after{content:"";right:calc(var(--side-card-padding-inline) * -1);bottom:0;left:calc(var(--side-card-padding-inline) * -1);border-bottom:1px solid var(--line);position:absolute}.format-card>.card-heading:before,.library-card>.card-heading:before,.saved-palettes-card>.card-heading:before{content:"";z-index:1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);width:14px;height:14px;position:absolute;bottom:-6px;left:6px;transform:rotate(45deg)}.saved-swatch,.saved-palette{border-bottom:0}.library-card{border-top:1px solid var(--line)}.palette-layout{grid-template-columns:1fr}.saved-palettes-card{border-top:1px solid var(--line)}.contrast-layout{grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr)}.contrast-preview-card{border-left:1px solid var(--line)}.gradient-layout{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr)}.gradient-editor-card{border-left:1px solid var(--line)}.extract-layout{grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr)}.extracted-palette-card{border-left:1px solid var(--line)}.picker-preview,.saturation-area,.palette-strip,.contrast-preview,.gradient-preview,.image-dropzone,.image-preview-shell,.saved-palette-strip,.code-block{border-radius:var(--radius-control)}.picker-preview,.palette-strip,.contrast-preview,.gradient-preview,.image-dropzone,.image-preview-shell{border:1px solid var(--surface-soft)}.overview-hero{border-bottom:1px solid var(--line);background:var(--surface);border-radius:0;min-height:430px}.overview-copy{border-right:1px solid var(--line);padding:var(--space-feature-block) var(--content-gutter)}.overview-copy h2{font-size:clamp(34px,4.2vw,58px)}.overview-color{min-height:430px}.overview-palette{border-bottom:1px solid var(--line);border-radius:0;height:84px;margin-top:0}.workspace-tools{padding:var(--space-section-block) var(--content-gutter);border-bottom:1px solid var(--line);background:var(--surface);border-radius:0;margin-top:0}.workspace-section-heading{align-items:flex-start}.workspace-tool-list>a{padding-inline:0}.workspace-tool-list>a:hover,.workspace-tool-list>a:focus-visible{padding-left:8px}.workspace-tool-icon{border-radius:6px}.workspace-privacy{padding:28px var(--content-gutter);border-bottom:1px solid var(--line);background:var(--surface-soft);border-radius:0;margin-top:0}.popover-shell{border:1px solid var(--line-strong);background:var(--surface);border-radius:6px}@media (max-width:1199px){.site-header{border-right:0}.container{width:100%;padding-inline:var(--content-gutter)}.tool-workspace.container,.workspace-overview.container{padding-inline:0}.picker-layout,.contrast-layout,.gradient-layout,.extract-layout{grid-template-columns:1fr}.picker-main-card{border-right:0}.picker-side-stack{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr))}.library-card{border-top:0;border-left:1px solid var(--line)}.contrast-preview-card,.gradient-editor-card,.extracted-palette-card{border-top:1px solid var(--line);border-left:0}}@media (max-width:819px){:root{--content-gutter:24px;--space-feature-block:40px;--space-heading-start:42px;--space-heading-end:30px}.mobile-brand{font-size:17px}.container{width:100%;padding-inline:var(--content-gutter)}.tool-workspace.container,.workspace-overview.container{padding-inline:0}.dashboard-heading,.tool-heading{padding-top:var(--space-heading-start);padding-bottom:var(--space-heading-end)}.picker-side-stack{grid-template-columns:1fr}.library-card{border-top:1px solid var(--line);border-left:0}.overview-copy{border-right:0;border-bottom:1px solid var(--line)}.workspace-tools,.workspace-privacy{padding-inline:var(--content-gutter)}}@media (max-width:560px){:root{--content-gutter:18px;--space-card-block:22px;--space-panel-block:22px}.container{padding-inline:var(--content-gutter)}.tool-workspace.container,.workspace-overview.container{padding-inline:0}.workspace-tools,.workspace-privacy{padding-inline:var(--content-gutter)}}@media (min-width:1200px){.picker-layout,.contrast-layout,.gradient-layout,.extract-layout{align-items:stretch}.picker-side-stack{flex-direction:column;display:flex}.library-card{flex:1}}.blog-page,.article-page{background:var(--surface);border-right:1px solid var(--line);min-height:100svh}.blog-heading,.article-header{padding-top:var(--space-heading-start);padding-bottom:var(--space-heading-end);border-bottom:1px solid var(--line)}.blog-heading h1,.article-header h1{max-width:980px;margin:12px 0 0;font-size:clamp(40px,4.8vw,66px)}.blog-featured{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);display:grid}.blog-featured-copy{min-height:460px;padding:var(--space-feature-block) var(--content-gutter);border-right:1px solid var(--line);flex-direction:column;justify-content:flex-end;display:flex}.blog-post-kicker{color:var(--text-soft);text-transform:uppercase;font-size:13px}.blog-featured-copy h2{max-width:760px;margin:18px 0 0;font-size:clamp(34px,4.2vw,58px)}.blog-featured-copy>p{max-width:700px;color:var(--text-soft);margin:22px 0 0;font-size:18px}.blog-read-link{color:var(--text);align-items:center;gap:9px;margin-top:34px;font-size:15px;display:inline-flex}.blog-read-link svg,.blog-post-row-arrow svg,.article-related-list svg,.article-aside a svg{width:18px;height:18px}.blog-featured-visual{background:var(--surface-soft);grid-template-rows:minmax(300px,1fr) 78px 64px;min-width:0;display:grid}.blog-featured-swatch{min-height:300px;padding:32px var(--content-gutter);color:#171b1f;align-items:flex-end;font-size:28px;display:flex}.blog-palette-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(5,1fr);display:grid}.blog-palette-strip span{min-width:0}.blog-featured-meta{padding:0 var(--content-gutter);color:var(--text-soft);justify-content:space-between;align-items:center;gap:18px;font-size:13px;display:flex}.blog-list{border-bottom:1px solid var(--line)}.blog-list-heading,.article-related-heading{border-bottom:1px solid var(--line);padding-top:48px;padding-bottom:28px}.blog-list-heading h2,.article-related-heading h2{margin:10px 0 0;font-size:clamp(28px,3vw,42px)}.blog-post-list,.article-related-list{display:grid}.blog-post-row{border-bottom:1px solid var(--line)}.blog-post-row:last-child{border-bottom:0}.blog-post-row>a{min-height:188px;padding:30px var(--content-gutter);grid-template-columns:54px minmax(0,1fr) 190px 40px;align-items:center;gap:26px;transition:background .15s;display:grid}.blog-post-row>a:hover,.blog-post-row>a:focus-visible,.article-related-list a:hover,.article-related-list a:focus-visible{background:var(--surface-soft)}.blog-post-number{color:var(--text-faint);font-size:13px}.blog-post-row-main{gap:8px;min-width:0;display:grid}.blog-post-title{color:var(--text);font-size:clamp(22px,2.2vw,32px)}.blog-post-excerpt{max-width:760px;color:var(--text-soft);font-size:15px}.blog-post-row-meta{color:var(--text-soft);gap:7px;font-size:13px;display:grid}.blog-post-row-arrow{color:var(--text-soft);place-items:center;display:grid}.article-back{color:var(--text-soft);margin-bottom:34px;font-size:14px;display:inline-flex}.article-back:before{margin-right:8px}.article-deck{max-width:820px;color:var(--text-soft);margin:22px 0 0;font-size:19px}.article-meta{color:var(--text-soft);flex-wrap:wrap;gap:10px 24px;margin-top:34px;font-size:13px;display:flex}.article-palette{border-bottom:1px solid var(--line);grid-template-columns:repeat(5,1fr);height:96px;display:grid}.article-layout{border-bottom:1px solid var(--line);grid-template-columns:280px minmax(0,1fr);display:grid}.article-aside{padding:46px var(--content-gutter);border-right:1px solid var(--line);flex-direction:column;gap:28px;display:flex}.article-aside>div{gap:5px;display:grid}.article-aside span{color:var(--text-faint);text-transform:uppercase;font-size:12px}.article-aside p{color:var(--text);margin:0;font-size:14px}.article-aside a{color:var(--text);align-items:center;gap:8px;margin-top:auto;font-size:14px;display:inline-flex}.article-content{width:100%;max-width:900px;padding:clamp(48px, 6vw, 88px) var(--content-gutter)}.article-intro{color:var(--text);margin:0 0 58px;font-size:clamp(22px,2.4vw,30px)}.article-content section+section{border-top:1px solid var(--line);margin-top:64px;padding-top:64px}.article-content h2{margin:0 0 22px;font-size:clamp(26px,2.8vw,38px)}.article-content p{color:var(--text-soft);margin:0;font-size:17px}.article-content p+p{margin-top:22px}.article-content ul{color:var(--text-soft);margin:28px 0 0;padding-left:22px;font-size:16px}.article-content li+li{margin-top:10px}.article-content pre{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-soft);color:var(--text);white-space:pre;margin:30px 0 0;padding:24px;font-size:14px;overflow-x:auto}.article-swatches{border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:30px;display:grid}.article-swatches span{color:#171b1f;align-items:flex-end;min-height:120px;padding:14px;font-size:13px;display:flex}.article-related{border-bottom:1px solid var(--line)}.article-related-list{grid-template-columns:repeat(2,minmax(0,1fr))}.article-related-list a{min-height:180px;padding:32px var(--content-gutter);border-right:1px solid var(--line);grid-template-columns:minmax(0,1fr) 24px;align-content:center;gap:12px 20px;transition:background .15s;display:grid}.article-related-list a:last-child{border-right:0}.article-related-list span{color:var(--text-soft);text-transform:uppercase;grid-column:1;font-size:13px}.article-related-list strong{color:var(--text);grid-column:1;font-size:23px}.article-related-list svg{grid-area:1/2/span 2;align-self:center}@media (max-width:1199px){.blog-featured{grid-template-columns:1fr}.blog-featured-copy{border-right:0;border-bottom:1px solid var(--line);min-height:380px}.blog-featured-visual{grid-template-rows:minmax(260px,1fr) 64px;grid-template-columns:minmax(0,1fr) 180px}.blog-featured-swatch{min-height:260px}.blog-palette-strip{border-top:0;border-bottom:0;border-left:1px solid var(--line);grid-area:1/2/span 2;grid-template-columns:1fr}.blog-featured-meta{grid-column:1}.blog-post-row>a{grid-template-columns:42px minmax(0,1fr) 150px 30px}}@media (max-width:819px){.blog-heading,.article-header{padding-top:var(--space-heading-start);padding-bottom:var(--space-heading-end)}.blog-featured-copy{min-height:340px;padding:var(--space-feature-block) var(--content-gutter)}.blog-post-row>a{min-height:0;padding:28px var(--content-gutter);grid-template-columns:32px minmax(0,1fr) 24px;gap:18px}.blog-post-row-meta{flex-wrap:wrap;grid-column:2;gap:8px 18px;display:flex}.blog-post-row-arrow{grid-area:1/3/span 2}.article-layout{grid-template-columns:1fr}.article-aside{padding:26px var(--content-gutter);border-right:0;border-bottom:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.article-aside a{grid-column:1/-1;margin-top:0}.article-content{max-width:none;padding:48px var(--content-gutter)}.article-related-list{grid-template-columns:1fr}.article-related-list a{border-right:0;border-bottom:1px solid var(--line)}.article-related-list a:last-child{border-bottom:0}}@media (max-width:560px){.blog-featured-visual{grid-template-rows:230px 64px 60px;grid-template-columns:1fr}.blog-featured-swatch{min-height:230px;padding:22px var(--content-gutter);font-size:24px}.blog-palette-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:0;grid-area:2/1;grid-template-columns:repeat(5,1fr)}.blog-featured-meta{padding-inline:var(--content-gutter);grid-area:3/1}.blog-post-row>a{padding-inline:var(--content-gutter);grid-template-columns:minmax(0,1fr) 24px}.blog-post-number{display:none}.blog-post-row-main,.blog-post-row-meta{grid-column:1}.blog-post-row-arrow{grid-column:2}.article-palette{height:70px}.article-aside{padding-inline:var(--content-gutter)}.article-content{padding:42px var(--content-gutter)}.article-content section+section{margin-top:48px;padding-top:48px}.article-content pre{margin-inline:calc(var(--content-gutter) * -1);padding-inline:var(--content-gutter)}.article-related-list a{padding-inline:var(--content-gutter)}}.auth-page{background:var(--surface);grid-template-columns:minmax(420px,.86fr) minmax(0,1.14fr);min-height:100svh;display:grid}.auth-panel{min-width:0;padding:var(--space-feature-block) var(--content-gutter);border-right:1px solid var(--line);flex-direction:column;display:flex}.auth-brand{width:fit-content;color:var(--md-primary);letter-spacing:-.025em;align-items:center;font-size:30px;font-weight:600;display:inline-flex}.auth-heading{width:min(100%,500px);margin-top:clamp(70px,10vh,128px)}.auth-heading h1{margin:12px 0 0;font-size:clamp(38px,5vw,58px)}.auth-heading>p:last-child{color:var(--text-soft);margin:18px 0 0;font-size:16px}.auth-form{gap:22px;width:min(100%,500px);margin-top:42px;display:grid}.auth-form>label:not(.auth-check){color:var(--text);gap:9px;font-size:14px;display:grid}.auth-form input:not([type=checkbox]){border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);width:100%;height:48px;color:var(--text);outline:0;padding:0 13px}.auth-form input:not([type=checkbox]):focus-visible{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:1px}.auth-form small{color:var(--text-faint);font-size:12px}.auth-form-row{color:var(--text-soft);justify-content:space-between;align-items:center;gap:18px;font-size:13px;display:flex}.auth-form-row>a,.auth-switch a{color:var(--text);text-underline-offset:3px;text-decoration:underline}.auth-check{color:var(--text-soft);align-items:center;gap:9px;font-size:13px;display:inline-flex}.auth-check input{width:16px;height:16px;accent-color:var(--accent);margin:0}.auth-terms{align-items:flex-start}.auth-submit{width:100%}.auth-form-error{border-radius:var(--md-shape-md);background:var(--md-error-container);color:var(--md-on-error-container);margin:-4px 0 0;padding:12px 14px;line-height:1.4}.auth-switch{width:min(100%,500px);color:var(--text-soft);margin:24px 0 0;font-size:14px}.auth-context{background:var(--surface-soft);grid-template-rows:minmax(320px,1fr) auto;min-width:0;min-height:100svh;display:grid}.auth-context-color{background:var(--accent)}.auth-context-palette{grid-template-columns:repeat(5,1fr);display:grid}.auth-context-palette span:first-child{background:#171b1f}.auth-context-palette span:nth-child(2){background:#49666d}.auth-context-palette span:nth-child(3){background:#d1aa05}.auth-context-palette span:nth-child(4){background:#e7ca50}.auth-context-palette span:nth-child(5){background:#f6e9a9}.auth-context-copy{padding:var(--space-feature-block) var(--content-gutter);border-top:1px solid var(--line)}.auth-context-copy h2{max-width:640px;margin:12px 0 0;font-size:clamp(32px,4vw,52px)}.auth-context-copy>p:last-child{max-width:620px;color:var(--text-soft);margin:18px 0 0;font-size:16px}@media (min-width:900px){.auth-heading,.auth-form,.auth-switch{margin-left:auto}.auth-heading{margin-top:auto}.auth-switch{margin-bottom:auto}}@media (max-width:899px){.auth-page{grid-template-columns:1fr}.auth-panel{border-right:0;min-height:100svh}.auth-context{display:none}}@media (max-width:560px){.auth-panel{padding:24px var(--content-gutter) 34px}.auth-heading{margin-top:68px}.auth-form-row{flex-direction:column;align-items:flex-start;gap:12px}}.sidebar-format-setting{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) 96px;align-items:end;gap:12px;margin-top:14px;padding:14px 0 18px;display:grid}.sidebar-format-setting>div{gap:4px;min-width:0;display:grid}.sidebar-format-setting>div>span{color:var(--text);font-size:14px}.sidebar-format-setting>div>small{color:var(--text-faint);font-size:12px}.sidebar-format-setting .select-trigger{min-height:40px;padding-inline:10px}.sidebar-format-setting .select-popover{width:150px;left:auto;right:0}.color-copy-surface{border:1px solid var(--line);width:100%;font:inherit;text-align:left;cursor:copy}.picker-preview{place-items:center;min-height:168px;padding:28px;display:grid}.picker-preview-content{text-align:center;place-items:center;gap:8px;width:min(100%,760px);display:grid}.picker-preview-content>span{font-size:14px}.picker-preview-content strong{overflow-wrap:anywhere;max-width:100%;font-size:clamp(26px,3.2vw,42px)}.picker-preview-content small,.palette-color-center small,.extracted-color small{font-size:12px}.fine-tune-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.format-row{border:0;border-bottom:1px solid var(--line);width:100%;color:inherit;font:inherit;text-align:left;cursor:copy;background:0 0;grid-template-columns:58px minmax(0,1fr) 48px;padding:0}.format-row:hover,.format-row:focus-visible{background:var(--surface-soft)}.format-row>small{color:var(--text-faint);text-align:right;font-size:12px}.saved-swatch{grid-template-columns:32px minmax(0,1fr) 40px;gap:10px}.saved-color-code{min-width:0;min-height:46px;color:var(--text);font:inherit;text-align:left;cursor:copy;background:0 0;border:0;align-content:center;gap:2px;padding:0;display:grid}.saved-color-code code{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.saved-color-code small{color:var(--text-faint);font-size:11px}.palette-strip{min-height:300px;display:flex;overflow:hidden}.palette-strip.is-tall{min-height:520px}.palette-color{min-width:0;color:inherit;font:inherit;cursor:copy;background:0 0;border:0;flex:1 1 0;place-items:center;padding:18px;display:grid;position:relative}.palette-strip .palette-color:hover,.palette-strip .palette-color:focus-within,.palette-strip .palette-color.is-touch-active{z-index:2}.palette-index{font-size:12px;position:absolute;top:18px;left:18px}.palette-color-center{visibility:hidden;text-align:center;place-items:center;gap:7px;max-width:100%;display:grid}.palette-color:hover .palette-color-center,.palette-color:focus-visible .palette-color-center,.palette-color.is-touch-active .palette-color-center{visibility:visible}.palette-color-center strong{overflow-wrap:anywhere;max-width:100%;font-size:clamp(14px,1.4vw,19px)}.palette-edit-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.extracted-heading{align-items:center}.extracted-heading .button{min-width:132px}.extracted-colors{grid-template-columns:repeat(2,minmax(0,1fr));min-height:470px}.extracted-color{min-width:0;min-height:140px;color:inherit;font:inherit;text-align:center;cursor:copy;background:0 0;border:0;place-items:center;gap:7px;padding:18px;display:grid}.extracted-color strong{overflow-wrap:anywhere;max-width:100%;font-size:15px}.contrast-color-row{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:end;gap:14px}.swap-button{place-self:end center;width:44px;height:44px;margin:0}.contrast-fix-row{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:26px;padding-top:24px;display:grid}.contrast-fix-copy h2{margin:0;font-size:22px}.contrast-fix-copy p{max-width:440px;color:var(--text-soft);margin:8px 0 0;font-size:14px}.contrast-fix-actions{grid-template-columns:repeat(2,minmax(112px,1fr));gap:10px;display:grid}.gradient-editor-card{min-width:0}.gradient-top-controls{grid-template-columns:1fr;align-items:end;gap:18px}.gradient-stop{grid-template-columns:minmax(0,1fr) 44px;align-items:end;gap:12px}.gradient-stop .color-control{grid-column:1/-1}.stop-position-field{grid-column:1}.stop-delete{grid-column:2}.gradient-actions{grid-template-columns:minmax(130px,auto) minmax(0,1fr);align-items:center;display:grid}.gradient-export-actions{justify-self:end}.gradient-code-row{grid-template-columns:minmax(0,1fr) 44px}.image-preview-bar>div{gap:4px}@media (max-width:980px){.palette-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-random{width:100%}.contrast-fix-row{grid-template-columns:1fr}.contrast-fix-actions{justify-self:stretch}}@media (max-width:720px){.sidebar-format-setting{grid-template-columns:minmax(0,1fr) 104px}.picker-preview{min-height:146px;padding:22px}.fine-tune-grid,.palette-controls{grid-template-columns:1fr}.palette-strip{min-height:240px}.palette-save-row{grid-template-columns:1fr}.palette-save-row .button,.palette-save-row .export-menu,.palette-save-row .export-menu>.button{width:100%}.contrast-color-row{grid-template-columns:1fr}.swap-button{align-self:center;transform:rotate(90deg)}.contrast-fix-actions,.gradient-top-controls,.gradient-actions{grid-template-columns:1fr}.gradient-export-actions{grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch;width:100%;display:grid}.extracted-heading{flex-direction:column;align-items:flex-start}.extracted-heading .button{width:100%}.extracted-colors{grid-template-columns:1fr}}@media (max-width:420px){.picker-actions,.gradient-export-actions{grid-template-columns:1fr}.format-row{grid-template-columns:46px minmax(0,1fr)}.format-row>small{display:none}}.overview-color-button{width:100%;color:inherit;font:inherit;text-align:left;cursor:copy;border:0;padding:0}.overview-reference-copy,.overview-reference-values,.overview-reference-values>span{display:grid}.overview-reference-copy{gap:4px}.overview-reference-copy>span,.overview-reference-values>span>span{color:#b8bec3;text-transform:uppercase;font-size:12px}.overview-reference-copy strong{overflow-wrap:anywhere;font-size:26px}.overview-reference-copy small{color:#b8bec3;font-size:12px}.overview-reference-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.overview-reference-values>span{gap:3px}.overview-reference-values strong{color:#fff;font-size:14px}.overview-palette button{cursor:copy;border:0;min-width:0;padding:0}@media (max-width:980px){.contrast-fix-row>div{grid-column:auto}}.color-card-shell{isolation:isolate;position:relative}.picker-preview-copy,.palette-color-copy,.extracted-color-copy{background:inherit;width:100%;height:100%;color:inherit;font:inherit;cursor:copy;border:0}.picker-preview-copy{text-align:center;place-items:center;min-height:168px;padding:28px;display:grid}.color-copy-surface{border:0}.color-format-trigger{z-index:4;visibility:hidden;border:1px solid var(--line-strong);background:var(--surface);width:36px;height:36px;color:var(--text);cursor:pointer;border-radius:8px;place-items:center;padding:0;display:grid;position:absolute;top:12px;right:12px}.color-card-shell:hover>.color-format-trigger,.color-card-shell:focus-within>.color-format-trigger,.color-format-trigger[aria-expanded=true]{visibility:visible}.color-format-trigger:hover,.color-format-trigger:focus-visible{background:var(--surface-soft)}.color-format-popover{z-index:1000;border:1px solid;border-radius:10px;width:min(340px,100vw - 24px);max-height:calc(100svh - 24px);position:fixed;overflow:auto}.color-format-popover-heading{border-bottom:1px solid;gap:4px;padding:16px;display:grid}.color-format-popover-heading>span{font-size:15px}.color-format-popover-heading small{font-size:12px}.color-format-popover-list{display:grid}.color-format-popover-list button{background:inherit;min-width:0;color:inherit;font:inherit;text-align:left;cursor:copy;border:0;border-bottom:1px solid;grid-template-columns:52px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:12px 16px;display:grid}.color-format-popover-list button:last-child{border-bottom:0}.color-format-popover-list button:hover code,.color-format-popover-list button:focus-visible code{text-underline-offset:3px;text-decoration:underline}.color-format-popover-list span,.color-format-popover-list small{font-size:12px}.color-format-popover-list small{text-align:right}.format-input-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.format-input-field{gap:7px;min-width:0;display:grid}.format-input-field>span{min-width:0;color:var(--text-soft);justify-content:space-between;align-items:center;gap:8px;font-size:12px;display:flex}.format-input-field>span small{border:1px solid var(--line);color:var(--text);border-radius:999px;padding:2px 7px;font-size:10px}.format-input-field input{border:1px solid var(--line);background:var(--surface-soft);width:100%;min-width:0;height:44px;color:var(--text);font:inherit;cursor:copy;border-radius:7px;padding:0 12px}.format-input-field input:hover,.format-input-field input:focus{border-color:var(--text-faint);outline:none}.format-input-field.is-default input{border-color:var(--accent)}.format-input-field>small{min-height:14px;color:var(--text-faint);font-size:11px}.palette-color{padding:0}.palette-color-copy{text-align:center;place-items:center;min-height:360px;padding:18px;display:grid}.palette-index{z-index:2}.extracted-color{padding:0}.extracted-color-copy{text-align:center;align-content:center;place-items:center;gap:7px;min-height:140px;padding:18px;display:grid}@media (hover:none),(pointer:coarse){.color-format-trigger{visibility:visible}}@media (max-width:720px){.picker-preview-copy{min-height:146px;padding:22px 58px}.format-input-grid{grid-template-columns:1fr}.palette-color-copy{min-height:300px}}@media (max-width:420px){.picker-preview-copy{padding-inline:48px}.color-format-trigger{top:10px;right:10px}}.picker-preview{min-height:0;padding:0;display:block}@media (max-width:720px){.picker-preview{min-height:0;padding:0}}.color-format-trigger{width:44px;height:44px;color:inherit;background:0 0;border:0;border-radius:0}.color-format-trigger:hover,.color-format-trigger:focus-visible{color:inherit;background:0 0}.color-format-trigger svg{width:20px;height:20px}.color-format-popover{border:0;border-radius:10px;overflow:hidden;box-shadow:0 16px 36px #0000002b}.color-format-popover-list{padding:8px;display:grid}.color-format-popover-list button{min-width:0;min-height:42px;color:inherit;font:inherit;text-align:left;cursor:copy;background:0 0;border:0;border-radius:6px;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:8px 10px;display:grid}.color-format-popover-list button:hover,.color-format-popover-list button:focus-visible{background:0 0}.color-format-popover-list button:focus-visible{outline-offset:-2px;outline:2px solid}.color-format-popover-list span{font-size:12px}.color-format-popover-list code{overflow-wrap:anywhere;min-width:0;font-family:inherit;font-size:13px}.color-format-popover-list i{width:24px;height:24px;color:inherit;place-items:center;font-style:normal;display:grid}.color-format-popover-list i svg{width:17px;height:17px}.format-value-list{gap:2px;display:grid}.format-value-row{width:100%;min-width:0;min-height:48px;color:var(--text);font:inherit;text-align:left;cursor:copy;background:0 0;border:0;grid-template-columns:74px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:7px 0;display:grid}.format-value-row:hover,.format-value-row:focus-visible{background:0 0}.format-value-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.format-value-row>span{min-width:0;color:var(--text-soft);align-items:center;gap:7px;font-size:12px;display:flex}.format-value-row>span small{color:var(--accent-strong);font-size:10px}.format-value-row code{overflow-wrap:anywhere;min-width:0;color:var(--text);font-family:inherit;font-size:14px}.format-value-row i{width:30px;height:30px;color:var(--text-soft);place-items:center;font-style:normal;display:grid}.format-value-row i svg{width:17px;height:17px}.formatted-color-input{grid-template-columns:94px minmax(0,1fr);min-width:0;display:grid}.formatted-color-input .select-menu,.color-control-row .select-menu{min-width:0}.formatted-color-input .select-trigger,.color-control-row .select-trigger{border-radius:var(--radius-control) 0 0 var(--radius-control);background:var(--surface-soft);min-height:44px}.formatted-color-input>input,.formatted-color-input>.color-value-input-shell>input{border-radius:0 var(--radius-control) var(--radius-control) 0;border-left:0;min-width:0}.color-value-input-shell{min-width:0;display:block;position:relative}.color-value-input-shell>.app-input{width:100%}.color-value-input-shell.has-conversion-switch>.app-input{padding-right:48px}.color-value-input-shell .color-value-conversion-switch{z-index:1;width:34px;height:34px;color:var(--md-on-primary-container);background:0 0;transition:background .15s,color .15s,transform 80ms ease-out;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.color-value-input-shell .color-value-conversion-switch:hover,.color-value-input-shell .color-value-conversion-switch:focus-visible{color:var(--md-on-primary-container);background:0 0}.color-value-input-shell .color-value-conversion-switch:active{transform:translateY(-50%)scale(.98)}.formatted-color-input .select-popover,.color-control-row .select-popover{z-index:150;width:180px}.color-control-row{grid-template-columns:44px 88px minmax(0,1fr)}.color-control.is-auto-input .color-control-row{grid-template-columns:44px minmax(0,1fr)}.color-control-row .color-swatch-button{border-radius:var(--radius-control) 0 0 var(--radius-control)}.color-control-row .select-trigger{border-radius:0}.color-control-row input{border-radius:0 var(--radius-control) var(--radius-control) 0;border-left:0;min-width:0}@media (max-width:560px){.format-value-row{grid-template-columns:62px minmax(0,1fr) 28px;gap:8px}.format-value-row code{font-size:13px}.picker-code-row{grid-template-columns:1fr}.picker-actions{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}}@media (max-width:420px){.formatted-color-input{grid-template-columns:82px minmax(0,1fr)}.color-control-row{grid-template-columns:42px 78px minmax(0,1fr)}.color-control-row .select-trigger,.formatted-color-input .select-trigger{gap:6px;padding-inline:9px}}.color-control{container-type:inline-size}.contrast-page{gap:18px;min-width:0;display:grid}.contrast-layout{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-width:0}.contrast-color-row{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:start;gap:14px;min-width:0}.swap-button{align-self:start;margin-top:28px}.swap-button svg{width:19px;height:19px}.contrast-fix-row{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:16px}.contrast-fix-actions{grid-template-columns:repeat(2,minmax(0,1fr));justify-self:start;width:min(100%,360px)}.saved-contrast-card{min-width:0}.saved-contrast-card .card-heading{align-items:center}.saved-contrast-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;display:grid}.saved-contrast-pair{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);grid-template-columns:minmax(0,1fr) 42px 42px;align-items:center;gap:6px;min-width:0;min-height:82px;display:grid}.saved-contrast-main{min-width:0;height:100%;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;display:grid}.saved-contrast-main:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.saved-contrast-preview{border-radius:var(--radius-control);place-items:center;width:58px;height:54px;font-size:18px;display:grid}.saved-contrast-values{gap:3px;min-width:0;display:grid}.saved-contrast-values strong,.saved-contrast-values small{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.saved-contrast-values small{color:var(--text-faint);font-size:12px}.saved-contrast-ratio{color:var(--text-soft);white-space:nowrap;font-size:13px}.contrast-pair-skeleton{border-radius:var(--radius-control);background:var(--surface-soft);min-height:82px}.gradient-code-row{min-width:0}.gradient-code-row code{text-overflow:clip;scrollbar-width:thin;scrollbar-color:var(--text-faint) transparent;overscroll-behavior-inline:contain;min-width:0;display:block;overflow:auto hidden}.gradient-code-row code::-webkit-scrollbar{height:5px}.gradient-code-row code::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:99px}.saved-palettes-card{padding-block:var(--space-panel-block);--side-card-padding-inline:var(--content-gutter)}.saved-palette-list{height:auto;max-height:520px;margin-top:20px}.saved-palette{grid-template-columns:minmax(0,1fr) 42px 42px;gap:8px;min-height:96px;padding:8px 0}.saved-palette-main{grid-template-columns:minmax(240px,.9fr) minmax(150px,1fr);gap:20px;min-height:78px;padding:6px 4px}.saved-palette-strip{border-radius:var(--radius-control);height:64px}.saved-palette-strip i{flex:1 1 0;min-width:4px;transition:flex-grow .18s}.saved-palette-strip:hover i,.saved-palette-main:focus-visible .saved-palette-strip i{flex-grow:.78}.saved-palette-strip i:hover{flex-grow:2.6}.saved-palette-main strong{font-size:16px}.saved-palette-main small{margin-top:3px;font-size:13px}@container (max-width:260px){.color-control-row{grid-template-columns:44px minmax(0,1fr)}.color-control-row .color-value-input-shell{grid-column:1/-1;margin-top:8px}.color-control-row .color-value-input-shell input{border-left:1px solid var(--line);border-radius:var(--radius-control);min-height:44px}}@media (max-width:1100px){.contrast-layout{grid-template-columns:1fr}.contrast-preview-card{min-height:0}.saved-contrast-list{grid-template-columns:1fr}}@media (max-width:760px){.contrast-color-row{grid-template-columns:1fr;gap:12px}.swap-button{margin:0 auto;transform:rotate(90deg)}.contrast-fix-actions{width:100%}.saved-contrast-card .card-heading{flex-direction:column;align-items:stretch}.saved-contrast-card .card-heading .button{width:100%}.saved-palette-main{grid-template-columns:minmax(170px,.8fr) minmax(120px,1fr);gap:14px}}@media (max-width:560px){.contrast-fix-actions{grid-template-columns:1fr}.saved-contrast-pair{grid-template-columns:minmax(0,1fr) 40px 40px}.saved-contrast-main{grid-template-columns:52px minmax(0,1fr)}.saved-contrast-preview{width:52px;height:50px}.saved-contrast-ratio{grid-column:2}.saved-palettes-card{padding-block:var(--space-panel-block);--side-card-padding-inline:var(--content-gutter)}.saved-palette{align-items:start;min-height:132px}.saved-palette-main{grid-template-columns:1fr;gap:10px}.saved-palette-strip{height:72px}}:root{--content-max:1320px}.app-stage{overflow-x:clip}.container,.blog-featured,.blog-list,.article-palette,.article-layout,.article-related{width:100%;max-width:var(--content-max);margin-inline:auto}.tool-heading.container,.dashboard-heading.container,.blog-heading.container,.article-header.container,.tool-workspace.container,.workspace-overview.container{max-width:var(--content-max)}@media (min-width:1200px){.site-header{width:100%;height:var(--header-height);background:var(--rail);border-right:0;display:block;inset:0 0 auto}.mobile-shell-bar{width:100%;max-width:calc(var(--sidebar-width) + var(--content-max));margin-inline:auto}.mobile-menu-button,.nav-rail{display:none}.nav-panel{inset:var(--header-height) auto 0 max(0px, calc((100% - var(--sidebar-width) - var(--content-max)) / 2));width:var(--sidebar-width);min-height:0;position:fixed}.sidebar-header{display:none}.app-stage{width:min(var(--content-max), calc(100% - var(--sidebar-width)));margin-left:max(var(--sidebar-width), calc((100% + var(--sidebar-width) - var(--content-max)) / 2));padding-top:var(--header-height)}.tool-heading.container,.dashboard-heading.container,.tool-workspace.container,.workspace-overview.container{border-inline:1px solid var(--line)}}.contrast-page{gap:0;min-width:0}.contrast-layout{border-bottom:0;grid-template-columns:minmax(440px,.92fr) minmax(0,1.08fr)}.contrast-controls-card,.contrast-preview-card{min-width:0}.contrast-preview-card{min-height:0}.contrast-fix-row{grid-template-columns:1fr;align-items:start;gap:18px;margin-top:28px;padding-top:26px;display:grid}.contrast-fix-copy{min-width:0}.contrast-fix-copy h2{max-width:none}.contrast-fix-copy p{max-width:38rem}.contrast-fix-actions{grid-template-columns:repeat(2,minmax(0,1fr));justify-self:start;gap:10px;width:min(100%,420px);display:grid}.contrast-fix-actions .button{width:100%;min-width:0}.saved-contrast-card{min-width:0;padding-block:var(--space-card-block);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.saved-contrast-heading{justify-content:space-between;align-items:center;gap:24px;display:flex}.saved-contrast-heading h2{margin:0;font-size:22px}.saved-contrast-heading p{max-width:620px;color:var(--text-soft);margin:7px 0 0;font-size:14px}.saved-contrast-action{flex:none;min-width:180px}.saved-contrast-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}.saved-contrast-empty{grid-column:1/-1;min-height:112px;padding:24px}.saved-contrast-pair{overflow:hidden}.saved-contrast-main{grid-template-columns:58px minmax(0,1fr) auto}.saved-contrast-values strong,.saved-contrast-values small{text-overflow:clip}.code-block{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}.saved-palette-list{max-height:620px}.saved-palette{grid-template-columns:minmax(360px,1.35fr) minmax(180px,.65fr) 42px 42px;align-items:center;gap:14px;min-height:108px;padding:12px 0;display:grid}.saved-palette-strip{border-radius:var(--radius-control);background:var(--surface-soft);min-width:0;height:76px;display:flex;overflow:hidden}.saved-palette-swatch{min-width:0;color:inherit;font:inherit;cursor:copy;background:0 0;border:0;flex:1 1 0;padding:0;transition:flex-grow .18s;position:relative;overflow:hidden}.saved-palette-strip:hover .saved-palette-swatch,.saved-palette-strip:focus-within .saved-palette-swatch{flex-grow:.72}.saved-palette-swatch:hover,.saved-palette-swatch:focus{outline:none;flex-grow:2.8}.saved-palette-swatch:focus-visible{outline-offset:-3px;outline:2px solid}.saved-palette-swatch span{visibility:hidden;overflow-wrap:anywhere;text-align:center;place-items:center;padding:8px;font-size:12px;display:grid;position:absolute;inset:0}.saved-palette-swatch:hover span,.saved-palette-swatch:focus span{visibility:visible}.saved-palette-details{min-width:0;min-height:64px;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-content:center;gap:4px;padding:8px 4px;display:grid}.saved-palette-details strong,.saved-palette-details small{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.saved-palette-details strong{font-size:16px}.saved-palette-details small{color:var(--text-faint);font-size:13px}.saved-palette-details:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.color-format-popover{pointer-events:auto}@media (max-width:1100px){.contrast-layout{grid-template-columns:1fr}.contrast-preview-card{border-top:1px solid var(--line);border-left:0}.saved-contrast-list{grid-template-columns:1fr}.saved-palette{grid-template-columns:minmax(300px,1.2fr) minmax(170px,.8fr) 42px 42px}}@media (max-width:760px){.saved-contrast-heading{flex-direction:column;align-items:stretch}.saved-contrast-action,.contrast-fix-actions{width:100%}.saved-palette{grid-template-columns:minmax(0,1fr) 42px 42px;gap:10px}.saved-palette-strip,.saved-palette-details{grid-column:1/-1}.saved-palette-details{min-height:48px;padding-block:4px}}@media (max-width:560px){.contrast-fix-actions{grid-template-columns:1fr}.saved-contrast-card{padding-block:var(--space-panel-block)}.saved-contrast-main{grid-template-columns:52px minmax(0,1fr)}.saved-contrast-ratio{grid-column:2}.saved-palette{min-height:0;padding-block:14px}.saved-palette-strip{overscroll-behavior-inline:contain;scroll-snap-type:x proximity;height:78px;overflow-x:auto}.saved-palette-swatch,.saved-palette-strip:hover .saved-palette-swatch,.saved-palette-strip:focus-within .saved-palette-swatch{scroll-snap-align:start;flex:0 0 108px;min-width:108px}.saved-palette-swatch span{visibility:visible}}.tool-workspace.container{container:toolworkspace/inline-size}@container toolworkspace (max-width:1080px){.picker-layout,.contrast-layout,.gradient-layout,.extract-layout{grid-template-columns:1fr}.picker-main-card{border-right:0}.picker-side-stack{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.library-card{border-top:0;border-left:1px solid var(--line)}.contrast-preview-card,.gradient-editor-card,.extracted-palette-card{border-top:1px solid var(--line);border-left:0}.palette-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-random{width:100%}.palette-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@container toolworkspace (max-width:760px){.picker-side-stack{grid-template-columns:1fr}.library-card{border-top:1px solid var(--line);border-left:0}.fine-tune-grid,.palette-controls,.palette-edit-grid,.palette-save-row,.gradient-top-controls,.gradient-actions{grid-template-columns:1fr}.palette-save-row .button,.palette-save-row .export-menu,.palette-save-row .export-menu>.button{width:100%}.gradient-export-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.gradient-stop{grid-template-columns:minmax(0,1fr) 44px}.gradient-stop .color-control{grid-column:1/-1}.stop-position-field{grid-column:1}.stop-delete{grid-column:2}}@container toolworkspace (max-width:520px){.criteria-grid,.gradient-export-actions,.contrast-color-row{grid-template-columns:1fr}.swap-button{margin-inline:auto;transform:rotate(90deg)}}.mixer-layout,.vision-layout{border-bottom:1px solid var(--line);background:var(--surface);gap:0;display:grid}.mixer-layout{grid-template-columns:minmax(380px,.82fr) minmax(0,1.18fr)}.mixer-controls-card,.mixer-result-card,.vision-controls-card,.vision-preview-card{padding-block:var(--space-panel-block)}.mixer-result-card,.vision-preview-card{border-left:1px solid var(--line)}.mixer-color-row{grid-template-columns:1fr;align-items:end;gap:14px;display:grid}.mixer-color-row .swap-button{margin-inline:auto;transform:rotate(90deg)}.mixer-ratio-field{gap:16px;margin-top:34px}.mixer-ratio-field>span{justify-content:space-between;gap:18px;display:flex}.mixer-ratio-field b{color:var(--text);font-weight:500}.mixer-actions{align-items:center;gap:10px;margin-top:30px;display:flex}.mixer-copy-action{background:var(--surface-soft);width:44px;height:44px}.mixer-result-preview{border-radius:var(--radius-control);text-align:center;place-content:center;gap:8px;min-height:280px;padding:clamp(28px,5vw,64px);display:grid}.mixer-result-preview span,.mixer-result-preview small{font-size:13px}.mixer-result-preview strong{font-size:clamp(34px,4vw,54px)}.mixer-result-list{margin-top:20px}.mixer-result-row{border-top:1px solid var(--line);grid-template-columns:64px minmax(0,1fr) 40px;align-items:center;gap:12px;min-height:54px;display:grid}.mixer-result-row>span{color:var(--text-faint);font-size:12px}.mixer-result-row code{min-width:0;color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-family:inherit;overflow:hidden}.vision-layout{grid-template-columns:minmax(300px,.42fr) minmax(0,1.58fr)}.vision-controls-card .card-heading{margin-bottom:24px}.vision-note{border-top:1px solid var(--line);color:var(--text-soft);margin:28px 0 0;padding-top:24px;font-size:13px}.vision-swatches{border-radius:var(--radius-control);grid-template-columns:repeat(5,minmax(0,1fr));min-height:430px;display:grid;overflow:hidden}.vision-swatch{flex-direction:column;justify-content:space-between;gap:28px;min-width:0;padding:20px;display:flex}.vision-swatch>div:first-child{gap:5px;display:grid}.vision-swatch span{font-size:11px}.vision-swatch strong{overflow-wrap:anywhere;font-size:16px}.vision-swatch-code{justify-content:space-between;align-items:center;gap:8px;display:flex}.vision-swatch-code code{font-family:inherit;font-size:13px}.vision-swatch .icon-button{color:inherit;flex:none}.vision-swatch .icon-button:hover,.vision-swatch .icon-button:focus-visible{color:inherit;background:#7f7f7f33}@container toolworkspace (max-width:1200px){.mixer-layout,.vision-layout{grid-template-columns:1fr}.mixer-result-card,.vision-preview-card{border-top:1px solid var(--line);border-left:0}}@container toolworkspace (max-width:760px){.vision-swatches{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}.vision-swatch{min-height:190px}}@container toolworkspace (max-width:460px){.vision-swatches{grid-template-columns:1fr}.vision-swatch{min-height:150px}}.breadcrumbs{color:var(--text-faint);align-items:center;gap:8px;margin-bottom:18px;font-size:12px;display:flex}.tool-heading>.breadcrumbs,.tool-heading>.eyebrow{display:none}.breadcrumbs a{color:var(--text-soft)}.breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:var(--text)}.global-search-trigger{color:#d7dadd}.command-backdrop{z-index:200;background:#00000094;place-items:start center;padding:clamp(70px,11vh,118px) 18px 24px;display:grid;position:fixed;inset:0}.command-dialog{border:1px solid var(--line-strong);background:var(--surface);width:min(100%,660px);max-height:min(720px,100svh - 120px);color:var(--text);border-radius:10px;overflow:hidden;box-shadow:0 18px 60px #0000003d}.command-input-row{border-bottom:1px solid var(--line);grid-template-columns:22px minmax(0,1fr) 40px;align-items:center;gap:10px;height:58px;padding:0 10px 0 18px;display:grid}.command-input-row>svg{color:var(--text-faint)}.command-input-row input{width:100%;height:100%;color:var(--text);font:inherit;background:0 0;border:0;outline:0;font-size:16px}.command-results{max-height:min(580px,100svh - 240px);padding:12px;overflow-y:auto}.command-results section+section{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.command-results h2{color:var(--text-faint);text-transform:uppercase;margin:0 8px 7px;font-size:11px;font-weight:500}.command-results a{min-height:58px;color:var(--text);border-radius:6px;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;padding:8px;display:grid}.command-results a:hover,.command-results a:focus-visible,.command-results a.is-active{background:var(--surface-soft)}.command-result-icon,.command-color-swatch{border:1px solid var(--line);background:var(--surface-soft);border-radius:5px;place-items:center;width:36px;height:36px;display:grid}.command-color-swatch{border-color:#7f7f7f4d}.command-results a>span:nth-child(2){gap:3px;min-width:0;display:grid}.command-results strong{font-size:14px;font-weight:500}.command-results small{color:var(--text-soft);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.command-empty{color:var(--text-soft);text-align:center;margin:0;padding:38px 18px}.command-footer{border-top:1px solid var(--line);min-height:36px;color:var(--text-faint);align-items:center;gap:18px;padding:0 18px;font-size:11px;display:flex}.result-row{border-top:1px solid var(--line);grid-template-columns:76px minmax(0,1fr) 40px;align-items:center;gap:12px;min-height:58px;display:grid}.result-row>span{color:var(--text-faint);font-size:12px}.result-row>div{gap:3px;min-width:0;display:grid}.result-row code{text-overflow:ellipsis;white-space:nowrap;font-family:inherit;overflow:hidden}.result-row small{color:var(--text-faint);font-size:11px}.shared-color-swatch{flex-direction:column;justify-content:space-between;gap:20px;min-width:0;min-height:170px;padding:16px;display:flex;position:relative}.shared-swatch-main{min-width:0;color:inherit;font:inherit;text-align:left;background:0 0;border:0;align-content:start;gap:5px;padding:0;display:grid}button.shared-swatch-main{cursor:pointer}.shared-swatch-label,.shared-swatch-main small{font-size:11px}.shared-swatch-main strong{overflow-wrap:anywhere;font-size:15px}.shared-color-swatch>.icon-button{color:inherit;align-self:flex-end}.tools-page,.tools-workspace{background:var(--surface);min-height:100svh}.tools-workspace.container{padding:var(--space-card-block) var(--content-gutter) var(--space-section-block)}.tools-search{border:1px solid var(--line-strong);border-radius:var(--radius-control);grid-template-columns:22px minmax(0,1fr);align-items:center;gap:10px;width:min(100%,720px);height:52px;padding:0 16px;display:grid}.tools-search svg{color:var(--text-faint)}.tools-search input{width:100%;height:100%;color:var(--text);font:inherit;background:0 0;border:0;outline:0}.tools-popular,.tool-category-list{margin-top:42px}.tool-category+.tool-category{border-top:1px solid var(--line);margin-top:42px;padding-top:38px}.directory-section-heading{justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px;display:flex}.directory-section-heading h2{margin:0;font-size:22px}.directory-section-heading>span{color:var(--text-faint);font-size:12px}.compact-tool-grid{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.compact-tool-grid>a{border-bottom:1px solid var(--line);min-width:0;min-height:82px;color:var(--text);grid-template-columns:38px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:14px 12px;display:grid}.compact-tool-grid>a:nth-child(odd){border-right:1px solid var(--line)}.compact-tool-grid>a:hover,.compact-tool-grid>a:focus-visible{background:var(--surface-soft)}.compact-tool-grid>a>span:nth-child(2),.related-tool-list a>span:nth-child(2){gap:4px;min-width:0;display:grid}.compact-tool-grid strong,.related-tool-list strong{font-size:14px;font-weight:500}.compact-tool-grid small,.related-tool-list small{color:var(--text-soft);font-size:12px}.compact-tool-grid>a>svg,.related-tool-list a>svg{width:16px;color:var(--text-faint)}.directory-empty{padding:60px 0}.directory-empty h2{margin:0;font-size:22px}.directory-empty p{color:var(--text-soft);margin:8px 0 0}.related-tools.container{padding:var(--space-section-block) var(--content-gutter);border-bottom:1px solid var(--line);background:var(--surface)}.related-tools-heading h2{margin:0;font-size:22px}.related-tool-list{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px;display:grid}.related-tool-list a{border-bottom:1px solid var(--line);min-height:74px;color:var(--text);grid-template-columns:38px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:12px 0;display:grid}.related-tool-list a:nth-child(odd){border-right:1px solid var(--line);padding-right:18px}.related-tool-list a:nth-child(2n){padding-left:18px}.workspace-section-heading>div:last-child{max-width:430px}.workspace-all-tools{color:var(--text);align-items:center;gap:6px;margin-top:12px;font-size:13px;display:inline-flex}.workspace-all-tools svg{width:15px}@media (min-width:1200px){.tools-workspace.container,.related-tools.container{border-inline:1px solid var(--line)}}@media (max-width:700px){.command-backdrop{align-items:end;padding:0}.command-dialog{border-bottom:0;border-left:0;border-right:0;border-radius:10px 10px 0 0;width:100%;max-height:86svh}.compact-tool-grid,.related-tool-list{grid-template-columns:1fr}.compact-tool-grid>a:nth-child(odd),.related-tool-list a:nth-child(odd){border-right:0;padding-right:12px}.related-tool-list a:nth-child(2n){padding-left:0}.command-footer{display:none}}.converter-layout{border-bottom:1px solid var(--line);grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr);display:grid}.converter-input-card,.converter-results-card,.scale-controls-card,.scale-preview-card,.color-detail-values,.color-detail-analysis,.detail-related-colors{padding-block:var(--space-panel-block)}.converter-results-card{border-left:1px solid var(--line)}.converter-input-card form{gap:12px;display:grid}.field-help{color:var(--text-faint);margin:-3px 0 0;font-size:12px}.converter-input-card form .button{width:fit-content;margin-top:4px}.converter-preview{border-radius:var(--radius-control);text-align:center;place-content:center;gap:7px;min-height:240px;margin-top:30px;padding:28px;display:grid}.converter-preview span{font-size:12px}.converter-preview strong{font-size:clamp(32px,4vw,48px)}.converter-save{width:100%;margin-top:12px}.converter-results-card>.card-heading{margin-bottom:18px}.scale-layout{border-bottom:1px solid var(--line)}.scale-controls-card{grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr);align-items:end;gap:24px;display:grid}.scale-mode-field{min-width:0}.scale-actions{flex-wrap:wrap;grid-column:1/-1;gap:10px;display:flex}.scale-preview-card{border-top:1px solid var(--line)}.scale-swatches{overscroll-behavior-inline:contain;scroll-snap-type:x proximity;border-radius:var(--radius-control);display:flex;overflow-x:auto}.scale-swatches .shared-color-swatch{scroll-snap-align:start;flex:1 0 116px;min-width:116px;min-height:250px}.color-detail-layout{border-bottom:1px solid var(--line)}.color-detail-hero{min-height:390px;padding:var(--space-feature-block) var(--content-gutter);align-content:end;gap:8px;display:grid}.color-detail-hero span{text-transform:uppercase;font-size:12px}.color-detail-hero h2{margin:0;font-size:clamp(40px,6vw,72px)}.color-detail-hero strong{font-size:18px}.color-detail-grid{border-top:1px solid var(--line);grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);display:grid}.color-detail-analysis{border-left:1px solid var(--line)}.detail-contrast-list{gap:10px;display:grid}.detail-contrast-list>div{border-radius:var(--radius-control);border:1px solid;align-content:center;gap:5px;min-height:110px;padding:18px;display:grid}.detail-contrast-list strong{font-size:17px}.detail-contrast-list span{font-size:13px}.detail-best-text{border-top:1px solid var(--line);justify-content:space-between;gap:18px;margin-top:22px;padding-top:20px;display:flex}.detail-best-text span{color:var(--text-soft)}.detail-related-colors{border-top:1px solid var(--line)}.detail-related-colors h3{margin:30px 0 12px;font-size:14px;font-weight:500}.detail-color-row{border-radius:var(--radius-control);grid-template-columns:repeat(auto-fit,minmax(138px,1fr));display:grid;overflow:hidden}@container toolworkspace (max-width:1080px){.converter-layout,.color-detail-grid{grid-template-columns:1fr}.converter-results-card,.color-detail-analysis{border-top:1px solid var(--line);border-left:0}}@container toolworkspace (max-width:720px){.scale-controls-card{grid-template-columns:1fr}.scale-actions{grid-column:1}.scale-actions .button{flex:140px}.color-detail-hero{min-height:300px}.detail-color-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.image-preview-visual{background:var(--surface-soft);min-width:0;position:relative;overflow:hidden}.image-preview-visual:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.image-sample-marker{pointer-events:none;border:3px solid #fff;border-radius:50%;width:22px;height:22px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #000,0 2px 8px #00000059}.wheel-tool-layout{border-bottom:1px solid var(--line);background:var(--surface);grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr);display:grid}.wheel-picker-card,.wheel-harmony-card{padding-block:var(--space-panel-block)}.wheel-picker-card{border-right:1px solid var(--line)}.wheel-shell{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-soft);width:min(100%,480px);margin-inline:auto;padding:clamp(12px,2.2vw,22px)}.color-wheel{aspect-ratio:1;border:10px solid var(--surface);outline:1px solid var(--line-strong);cursor:crosshair;touch-action:none;background:radial-gradient(circle,#fff 0%,#fff0 100%),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;width:100%;position:relative;box-shadow:0 10px 36px #00000014}.color-wheel:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.wheel-marker{z-index:1;cursor:pointer;border:2px solid #fff;border-radius:50%;width:18px;height:18px;padding:0;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000073,0 2px 7px #00000040}.wheel-marker.is-base{z-index:2;border-width:3px;width:25px;height:25px}.wheel-marker:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.wheel-base-row{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:22px;display:grid}.wheel-base-row .button{white-space:nowrap}.wheel-help{margin-top:10px}.wheel-harmony-heading{grid-template-columns:minmax(220px,.7fr) minmax(0,1fr);align-items:end;gap:18px;margin-bottom:22px;display:grid}.wheel-harmony-heading p{color:var(--text-soft);margin:0 0 2px;font-size:13px}.wheel-harmony-swatches{border-radius:var(--radius-control);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:hidden}.wheel-harmony-swatches .shared-color-swatch{min-height:156px}.wheel-actions{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}@container toolworkspace (max-width:1080px){.wheel-tool-layout{grid-template-columns:1fr}.wheel-picker-card{border-right:0}.wheel-harmony-card{border-top:1px solid var(--line)}}@container toolworkspace (max-width:620px){.wheel-base-row,.wheel-harmony-heading{grid-template-columns:1fr}.wheel-base-row .button,.wheel-actions,.wheel-actions .button,.wheel-actions .export-menu,.wheel-actions .export-menu>.button{width:100%}.wheel-harmony-swatches{grid-template-columns:1fr}.wheel-harmony-swatches .shared-color-swatch{min-height:128px}}:root{--bg:#f8fafd;--surface:#f8fafd;--surface-soft:#e9eef6;--surface-muted:#e2e8f0;--sidebar:#f1f4f9;--rail:#0b57d0;--rail-hover:#0842a0;--text:#1f1f1f;--text-soft:#444746;--text-faint:#6b6f73;--line:#c4c7c5;--line-strong:#747775;--primary:#0b57d0;--primary-hover:#0842a0;--primary-container:#d3e3fd;--on-primary-container:#041e49;--secondary:#475d92;--secondary-container:#dae2ff;--tertiary:#006b60;--tertiary-container:#9ef2e4;--accent:var(--primary);--accent-hover:var(--primary-hover);--accent-soft:var(--primary-container);--accent-strong:var(--primary);--accent-ink:#fff;--success:#1f7a3e;--danger:#ba1a1a;--focus:#0b57d0;--radius-card:24px;--radius-control:14px;--motion-standard:cubic-bezier(.2, 0, 0, 1);--motion-emphasized:cubic-bezier(.2, 0, 0, 1.2);--elevation-1:0 1px 2px #1f192814, 0 2px 8px #1f19280d;--elevation-2:0 8px 24px #1f19281f, 0 2px 6px #1f192814;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-theme=dark]{--bg:#111318;--surface:#111318;--surface-soft:#1d2024;--surface-muted:#282a2f;--sidebar:#191c20;--rail:#0c0e13;--rail-hover:#282a2f;--text:#e2e2e6;--text-soft:#c4c7c5;--text-faint:#aeb3b7;--line:#444746;--line-strong:#8e918f;--primary:#a8c7fa;--primary-hover:#d3e3fd;--primary-container:#0842a0;--on-primary-container:#d3e3fd;--secondary:#b1c5f8;--secondary-container:#304575;--tertiary:#82d5c8;--tertiary-container:#005047;--accent-ink:#062e6f;--success:#83d6a4;--danger:#ffb4ab;--focus:#a8c7fa;--elevation-1:0 1px 2px #00000047, 0 3px 10px #0000002e;--elevation-2:0 10px 28px #00000061, 0 2px 8px #00000042;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html[data-theme=grey]{--bg:#202124;--surface:#202124;--surface-soft:#2d2f34;--surface-muted:#35383d;--sidebar:#282a2e;--rail:#17181b;--rail-hover:#35383d;--text:#e8eaed;--text-soft:#c4c7c5;--text-faint:#abb0b6;--line:#50545a;--line-strong:#91969c;--primary:#a8c7fa;--primary-hover:#d3e3fd;--primary-container:#0842a0;--on-primary-container:#d3e3fd;--secondary:#b1c5f8;--secondary-container:#304575;--tertiary:#83d6c9;--tertiary-container:#1f5149;--accent-ink:#062e6f;--success:#8ad5a5;--danger:#ffb4ab;--focus:#a8c7fa;--elevation-1:0 1px 2px #0000003d, 0 3px 10px #00000029;--elevation-2:0 10px 28px #00000052, 0 2px 8px #00000038;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html{scrollbar-color:var(--line-strong) var(--bg)}body,.app-stage,.site-header,.nav-panel,.tool-page,.dashboard-home,.tools-page,.blog-page,.article-page{transition:background-color .22s var(--motion-standard), color .18s var(--motion-standard)}body{background:var(--bg);letter-spacing:-.006em}strong,b,h1,h2,h3{font-weight:550}.site-header{background:var(--surface);color:var(--text);border:0}.mobile-shell-bar{background:var(--surface);color:var(--text)}.mobile-brand{color:var(--text);letter-spacing:-.03em;font-weight:600}.mobile-shell-actions .icon-button,.global-search-trigger{color:var(--text-soft)}.mobile-shell-actions .icon-button:hover,.mobile-shell-actions .icon-button:focus-visible{background:var(--primary-container);color:var(--on-primary-container)}.nav-panel{background:var(--sidebar)}.tools-search{background:var(--surface-soft);transition:background .16s var(--motion-standard), box-shadow .16s var(--motion-standard);border-color:#0000;border-radius:999px}.tools-search:focus-within{background:var(--surface);box-shadow:0 0 0 2px var(--focus)}.sidebar-format-setting{border-color:var(--line);background:color-mix(in srgb, var(--surface-soft) 72%, transparent);border-radius:18px}.sidebar-nav{gap:6px}.sidebar-nav a{transition:background .16s var(--motion-standard), color .16s var(--motion-standard), transform .16s var(--motion-standard);border-color:#0000;border-radius:18px}.sidebar-nav a:hover,.sidebar-nav a:focus-visible{background:var(--surface-muted)}.sidebar-nav a:hover{transform:translate(2px)}.sidebar-nav a[aria-current=page]{background:var(--primary-container);color:var(--on-primary-container);border-color:#0000}.sidebar-nav a[aria-current=page] .sidebar-nav-icon{background:var(--primary);color:var(--accent-ink)}.sidebar-nav-icon{transition:transform .18s var(--motion-emphasized), background .16s var(--motion-standard);border-radius:12px}.sidebar-nav a:hover .sidebar-nav-icon{transform:rotate(-3deg)scale(1.04)}.sidebar-nav-status{background:0 0;border-radius:999px}.sidebar-nav a[aria-current=page] .sidebar-nav-status{background:var(--secondary)}.rail-brand{background:#111318;border-color:#ffffff38;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0d}.brand-glyph i{border-radius:2px}.brand-glyph i:first-child{background:#a8c7fa}.brand-glyph i:nth-child(2){background:#f28b82}.brand-glyph i:nth-child(3){background:#77d8cc}.brand-glyph i:nth-child(4){background:#ffd166}.rail-navigation a,.rail-footer .icon-button{transition:background .16s var(--motion-standard), color .16s var(--motion-standard), transform .16s var(--motion-standard);border-radius:999px}.rail-navigation a:hover,.rail-footer .icon-button:hover{transform:translateY(-1px)}.rail-navigation a[aria-current=page]{color:#062e6f;background:#a8c7fa}.button,.icon-button,.select-trigger,.segmented button,.theme-popover button,.select-popover button,.export-popover button{transition:background-color .16s var(--motion-standard), color .16s var(--motion-standard), border-color .16s var(--motion-standard), box-shadow .16s var(--motion-standard), transform .14s var(--motion-standard)}.button{border-radius:999px;min-height:42px;padding-inline:20px;font-weight:550}.button-primary{background:var(--primary);color:var(--accent-ink);box-shadow:var(--elevation-1)}.button-primary:hover{background:var(--primary-hover);box-shadow:var(--elevation-2);transform:translateY(-1px)}.button-quiet{background:var(--surface-muted);color:var(--text)}.button-quiet:hover{background:var(--primary-container);color:var(--on-primary-container);transform:translateY(-1px)}.button:active,.icon-button:active,.segmented button:active{transform:scale(.97)}.icon-button{border-radius:999px}.icon-button:hover{background:var(--primary-container);color:var(--on-primary-container)}.button:focus-visible,.icon-button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.slider:focus-visible,.saturation-area:focus-visible,.color-swatch-button:focus-visible,.select-trigger:focus-visible,.segmented button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb, var(--focus) 18%, transparent)}.field input,.color-control-row input,.fine-tune-input,.select-trigger,.token-source-card textarea,.format-input-field input{border-color:var(--line-strong);border-radius:var(--radius-control);background:var(--surface);transition:border-color .16s var(--motion-standard), background .16s var(--motion-standard), box-shadow .16s var(--motion-standard)}.field input:hover,.color-control-row input:hover,.select-trigger:hover,.token-source-card textarea:hover,.format-input-field input:hover{border-color:var(--text-faint)}.field input:focus,.color-control-row input:focus,.token-source-card textarea:focus,.format-input-field input:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent)}.color-swatch-button{border-color:var(--line-strong);border-radius:var(--radius-control) 0 0 var(--radius-control);background:var(--surface)}.color-swatch-button>span{border-radius:9px}.color-control-row input{border-radius:0 var(--radius-control) var(--radius-control) 0}.segmented{background:var(--surface-muted);border-radius:999px;padding:4px}.segmented button{border-radius:999px;font-weight:520}.segmented button.is-active{background:var(--primary-container);color:var(--on-primary-container);box-shadow:var(--elevation-1)}.slider-track{height:8px;box-shadow:inset 0 0 0 1px #7f7f7f1f}.slider-thumb{border:4px solid var(--surface);background:var(--primary);width:22px;height:22px;transition:width .14s var(--motion-standard), height .14s var(--motion-standard), box-shadow .14s var(--motion-standard);box-shadow:0 1px 4px #0000003d}.slider:hover .slider-thumb,.slider:focus-visible .slider-thumb{width:25px;height:25px;box-shadow:0 0 0 6px color-mix(in srgb, var(--primary) 15%, transparent), 0 2px 5px #0000003d}.popover-shell,.command-dialog,.color-format-popover{border-color:var(--line);background:var(--surface);box-shadow:var(--elevation-2);animation:m3-popover-in .18s var(--motion-emphasized) both;border-radius:20px}.popover-scroll{border-radius:15px}.theme-popover button,.select-popover button,.export-popover button{border-radius:12px}.theme-popover button:hover,.theme-popover button.is-selected,.select-popover button:hover,.select-popover button.is-selected,.export-popover button:hover{background:var(--primary-container);color:var(--on-primary-container)}.theme-popover button.is-selected:after,.select-popover button.is-selected:after{content:"";background:currentColor;border-radius:50%;width:7px;height:7px;margin-left:auto}.tool-heading,.dashboard-heading{background:var(--surface);position:relative;overflow:hidden}.tool-heading:after,.dashboard-heading:after{content:"";top:var(--space-heading-start);right:var(--content-gutter);background:linear-gradient(90deg, var(--primary) 0 25%, var(--secondary) 25% 50%, var(--tertiary) 50% 75%, #d2a100 75%);width:112px;height:16px;box-shadow:var(--elevation-1);border-radius:999px;animation:7s ease-in-out infinite alternate color-tab-drift;position:absolute;transform:rotate(-3deg)}.dashboard-heading h1,.tool-heading h1,.not-found h1,.blog-heading h1,.article-header h1{letter-spacing:-.045em;text-wrap:balance;font-weight:560;line-height:.98}.page-heading-description{color:var(--text-soft);text-wrap:pretty;line-height:1.55}.tool-heading h1,.dashboard-heading h1{animation:m3-content-in .34s var(--motion-standard) both}.tool-heading .page-heading-description,.dashboard-heading .page-heading-description{animation:m3-content-in .38s 35ms var(--motion-standard) both}.tool-workspace>*,.workspace-overview>*{animation:m3-content-in .42s 55ms var(--motion-standard) both}.tool-card{background:color-mix(in srgb, var(--surface) 96%, var(--primary-container))}.empty-panel{border:1px dashed var(--line-strong);background:color-mix(in srgb, var(--surface-soft) 78%, transparent);border-radius:20px}.gamut-device-status,.gamut-status,.ink-coverage,.profile-meta span,.print-channel-grid article,.token-summary{background:var(--surface-soft);border-radius:18px}.picker-preview,.saturation-area,.palette-strip,.contrast-preview,.gradient-preview,.image-dropzone,.image-preview-shell,.saved-palette-strip,.code-block,.mixer-result-preview,.vision-swatches,.theme-interface-preview,.gamut-preview-grid,.alpha-preview,.image-gradient-preview,.svg-preview-shell,.extracted-gradient-preview{border-radius:22px}.workspace-tool-list>a,.compact-tool-grid>a,.related-tool-list a,.command-results a{transition:background .16s var(--motion-standard), color .16s var(--motion-standard), transform .16s var(--motion-standard)}.workspace-tool-list>a:hover,.compact-tool-grid>a:hover,.related-tool-list a:hover,.command-results a:hover,.command-results a.is-active{background:var(--surface-soft)}.compact-tool-grid>a:hover,.related-tool-list a:hover{transform:translateY(-2px)}.workspace-tool-icon,.command-result-icon{background:var(--primary-container);color:var(--on-primary-container);border-radius:12px}.workspace-tool-icon svg,.command-result-icon svg,.compact-tool-grid>a>svg,.related-tool-list a>svg{transition:transform .18s var(--motion-emphasized)}.compact-tool-grid>a:hover>svg,.related-tool-list a:hover>svg{transform:translate(4px)}.shared-color-swatch{transition:filter .16s var(--motion-standard), transform .18s var(--motion-emphasized)}.shared-color-swatch:hover{filter:saturate(1.06);transform:translateY(-2px)}.overview-color-surface{background:#d1aa05}.privacy-note,.field-help{padding-left:18px;position:relative}.privacy-note:before,.field-help:before{content:"";background:var(--tertiary);border-radius:50%;width:7px;height:7px;position:absolute;top:.55em;left:2px}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);z-index:500;visibility:hidden;color:#f8fafd;width:max-content;max-width:220px;box-shadow:var(--elevation-2);letter-spacing:0;opacity:0;pointer-events:none;white-space:normal;background:#303134;border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.25;transition:opacity .1s,visibility 0s linear .1s;position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%)}[data-tooltip=""]:after{display:none}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{visibility:visible;opacity:1;transition:opacity .1s,visibility linear}.floating-tooltip{z-index:1000;color:#f8fafd;width:max-content;max-width:min(280px,100vw - 16px);box-shadow:var(--elevation-2);letter-spacing:0;pointer-events:none;background:#303134;border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.25;position:fixed;transform:translate(-50%)}.popup-layer{z-index:1001;will-change:transform;animation:none;position:fixed;bottom:auto;right:auto}.popup-layer.color-format-popover{padding:0}.popup-layer.select-popover .select-menu-description{font-size:11px;line-height:1.35}.result-row [data-tooltip]:after,.gamut-css-row [data-tooltip]:after,.gradient-code-row [data-tooltip]:after{left:auto;right:0;transform:none}.auth-panel{background:var(--surface)}.auth-form input{border-color:var(--line-strong);border-radius:var(--radius-control);background:var(--surface-soft)}@keyframes m3-content-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes m3-popover-in{0%{opacity:0;transform:translateY(-5px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes color-tab-drift{0%{transform:rotate(-3deg)translate(0)}to{transform:rotate(-1deg)translate(-5px)}}@media (max-width:760px){.tool-heading:after,.dashboard-heading:after{top:24px;right:var(--content-gutter);width:72px;height:10px}[data-tooltip]:after{display:none}}@media (prefers-reduced-motion:reduce){.tool-heading:after,.dashboard-heading:after,.tool-heading h1,.dashboard-heading h1,.tool-heading .page-heading-description,.dashboard-heading .page-heading-description,.tool-workspace>*,.workspace-overview>*,.popover-shell,.command-dialog,.color-format-popover{animation:none}}.palette-lock{z-index:4;color:inherit;background:0 0;position:absolute;top:12px;right:56px}.palette-lock:hover,.palette-lock:focus-visible,.palette-lock[aria-pressed=true]{color:inherit;background:0 0}.criterion strong{align-items:center;gap:5px;display:inline-flex}.criterion strong svg{width:14px;height:14px}.palette-audit-layout,.semantic-theme-layout,.data-palette-layout{border-bottom:1px solid var(--line);background:var(--surface)}.palette-audit-controls,.palette-audit-report,.theme-controls-card,.theme-preview-card,.theme-role-card,.data-palette-controls,.data-palette-preview{padding-block:var(--space-panel-block)}.palette-audit-report,.theme-preview-card,.theme-role-card,.data-palette-preview{border-top:1px solid var(--line)}.audit-color-controls{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.audit-color-control{grid-template-columns:minmax(0,1fr) 42px;align-items:end;gap:8px;min-width:0;display:grid}.audit-color-control .icon-button{margin-bottom:3px}.audit-actions,.theme-actions,.data-palette-actions{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.audit-summary{border:1px solid var(--line);border-radius:var(--radius-control);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.audit-summary article{align-content:center;gap:7px;min-height:108px;padding:18px;display:grid}.audit-summary article+article{border-left:1px solid var(--line)}.audit-summary span{color:var(--text-soft);font-size:12px}.audit-summary strong{font-size:28px;font-weight:400}.audit-swatches,.data-palette-swatches{border-radius:var(--radius-control);margin-top:22px;display:flex;overflow-x:auto}.audit-swatches .shared-color-swatch,.data-palette-swatches .shared-color-swatch{flex:1 0 142px;min-width:142px;min-height:170px}.audit-section-heading{margin-top:38px}.audit-section-heading h2{margin:0;font-size:19px;font-weight:500}.audit-section-heading p{color:var(--text-soft);margin:6px 0 0;font-size:13px}.audit-matrix-scroll{border:1px solid var(--line);border-radius:var(--radius-control);margin-top:16px;overflow-x:auto}.audit-matrix{border-collapse:collapse;text-align:center;width:100%;min-width:650px}.audit-matrix th,.audit-matrix td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:92px;height:70px;padding:8px}.audit-matrix tr:last-child>*{border-bottom:0}.audit-matrix tr>:last-child{border-right:0}.audit-matrix th{background:var(--surface-soft);font-size:12px;font-weight:500}.audit-matrix td strong,.audit-matrix td span{display:block}.audit-matrix td strong{font-size:14px;font-weight:500}.audit-matrix td span{color:var(--text-faint);text-transform:uppercase;margin-top:4px;font-size:10px}.audit-matrix td.is-pass{background:color-mix(in srgb, var(--success) 10%, transparent)}.audit-matrix td.is-partial{background:color-mix(in srgb, var(--accent) 10%, transparent)}.audit-matrix td.is-fail,.audit-matrix td.is-self{color:var(--text-faint)}.audit-conflict-list{border-top:1px solid var(--line);margin-top:16px;display:grid}.audit-conflict-list article,.audit-clear{border-bottom:1px solid var(--line);grid-template-columns:24px minmax(150px,.45fr) minmax(0,1fr);align-items:center;gap:12px;min-height:58px;display:grid}.audit-conflict-list article>svg{color:var(--danger)}.audit-clear{grid-template-columns:24px minmax(0,1fr)}.audit-clear svg{color:var(--success)}.audit-conflict-list strong{font-size:13px;font-weight:500}.audit-conflict-list span,.audit-disclaimer{color:var(--text-soft);font-size:12px}.audit-disclaimer{margin:16px 0 0}.theme-controls-card{grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr);align-items:end;gap:22px;display:grid}.theme-actions{grid-column:1/-1;margin-top:0}.theme-interface-preview{border:1px solid var(--preview-border);border-radius:var(--radius-control);background:var(--preview-surface);color:var(--preview-text);overflow:hidden}.theme-interface-preview header{border-bottom:1px solid var(--preview-border);justify-content:space-between;align-items:center;gap:18px;min-height:62px;padding:0 22px;display:flex}.theme-interface-preview header nav{color:var(--preview-muted);gap:18px;font-size:12px;display:flex}.theme-preview-main{grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);align-items:center;gap:clamp(24px,5vw,70px);min-height:360px;padding:clamp(24px,4vw,54px);display:grid}.theme-preview-copy{max-width:620px}.theme-preview-eyebrow{color:var(--preview-primary);text-transform:uppercase;font-size:11px}.theme-preview-copy h2{max-width:560px;color:var(--preview-text);margin:12px 0;font-size:clamp(32px,5vw,54px);font-weight:400;line-height:1.04}.theme-preview-copy p{max-width:560px;color:var(--preview-muted);margin:0;font-size:14px}.theme-preview-copy>div{align-items:center;gap:18px;margin-top:24px;display:flex}.theme-preview-copy button{border-radius:var(--radius-control);background:var(--preview-primary);min-height:42px;color:var(--preview-on-primary);font:inherit;border:0;padding:0 17px}.theme-preview-copy a{color:var(--preview-text);font-size:13px;text-decoration:underline}.theme-preview-panel{border-radius:var(--radius-control);background:var(--preview-container);min-height:190px;color:var(--preview-on-container);align-content:end;gap:7px;padding:24px;display:grid}.theme-preview-panel span,.theme-preview-panel small{font-size:12px}.theme-preview-panel strong{font-size:54px;font-weight:400}.theme-interface-preview footer{border-top:1px solid var(--preview-border);background:var(--preview-subtle);align-items:center;gap:10px;min-height:58px;padding:0 22px;display:flex}.theme-interface-preview footer span{border:1px solid;border-radius:999px;padding:6px 9px;font-size:11px}.theme-interface-preview .is-success{color:var(--preview-success)}.theme-interface-preview .is-warning{color:var(--preview-warning)}.theme-interface-preview .is-error{color:var(--preview-error)}.theme-role-grid{border-radius:var(--radius-control);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;overflow:hidden}.theme-role-grid .shared-color-swatch{min-height:155px}.data-palette-controls{grid-template-columns:minmax(250px,.7fr) minmax(380px,1.3fr);align-items:end;gap:22px;display:grid}.data-color-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.data-count-field,.data-palette-controls>.field-help,.data-palette-actions{grid-column:1/-1}.data-count-field{max-width:620px}.data-palette-actions{margin-top:0}.data-chart-preview{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-soft);align-items:end;gap:8px;height:310px;padding:24px 24px 0;display:flex}.data-chart-preview i{border-radius:4px 4px 0 0;flex:1;place-items:end center;min-width:24px;font-style:normal;display:grid}.data-chart-preview span{color:#fff;text-shadow:0 1px 2px #000000b3;margin-bottom:9px;font-size:10px}.data-palette-note{color:var(--text-soft);margin:16px 0 0;font-size:12px}@container toolworkspace (max-width:900px){.theme-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.theme-preview-main{grid-template-columns:1fr}}@container toolworkspace (max-width:720px){.theme-controls-card,.data-palette-controls{grid-template-columns:1fr}.theme-actions,.data-count-field,.data-palette-controls>.field-help,.data-palette-actions{grid-column:1}.theme-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-summary{grid-template-columns:1fr}.audit-summary article+article{border-top:1px solid var(--line);border-left:0}.audit-conflict-list article{grid-template-columns:24px minmax(0,1fr);padding-block:12px}.audit-conflict-list article span{grid-column:2}}@container toolworkspace (max-width:520px){.audit-actions,.theme-actions,.data-palette-actions{grid-template-columns:1fr;display:grid}.audit-actions .button,.audit-actions .export-menu,.audit-actions .export-menu>.button,.theme-actions .button,.data-palette-actions .button{width:100%}.theme-role-grid,.data-color-controls{grid-template-columns:1fr}.theme-preview-main{min-height:0;padding:24px}.theme-interface-preview header nav{display:none}.theme-preview-copy h2{font-size:34px}.theme-preview-copy>div{flex-direction:column;align-items:flex-start}.theme-interface-preview footer{flex-direction:column;align-items:flex-start;padding-block:14px}}.gamut-layout,.alpha-layout,.token-audit-layout,.image-gradient-layout,.svg-recolor-layout,.print-profile-layout{border-bottom:1px solid var(--line);background:var(--surface);gap:0;display:grid}.gamut-layout,.alpha-layout,.image-gradient-layout,.svg-recolor-layout,.print-profile-layout{grid-template-columns:minmax(350px,.82fr) minmax(0,1.18fr)}.token-audit-layout{grid-template-columns:minmax(340px,.72fr) minmax(0,1.28fr)}.gamut-controls-card,.gamut-result-card,.alpha-controls-card,.alpha-result-card,.token-source-card,.token-results-card,.image-gradient-source,.image-gradient-result,.svg-preview-card,.svg-editor-card,.print-controls-card,.print-result-card{padding-block:var(--space-panel-block)}.gamut-result-card,.alpha-result-card,.token-results-card,.image-gradient-result,.svg-editor-card,.print-result-card{border-left:1px solid var(--line)}.gradient-interpolation-controls,.mixer-space-controls,.alpha-color-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.gradient-interpolation-controls{margin-top:20px}.mixer-space-controls{margin-top:28px}.gamut-controls-card .card-heading,.token-source-card .card-heading,.token-results-card .card-heading,.image-gradient-result .card-heading,.svg-editor-card .card-heading,.print-controls-card .card-heading,.print-result-card .card-heading{margin-bottom:24px}.gamut-channel+.gamut-channel{margin-top:22px}.gamut-device-status,.gamut-status,.ink-coverage{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-soft);gap:5px;margin-top:28px;padding:16px;display:grid}.gamut-device-status span,.gamut-status strong,.ink-coverage strong{font-size:13px;font-weight:500}.gamut-device-status small,.gamut-status span,.ink-coverage span{color:var(--text-soft);font-size:12px}.gamut-device-status.is-supported{border-color:color-mix(in srgb, var(--success) 45%, var(--line))}.gamut-preview-grid{border-radius:var(--radius-control);grid-template-columns:repeat(2,minmax(0,1fr));min-height:310px;display:grid;overflow:hidden}.gamut-preview-grid article{color:#fff;text-shadow:0 1px 3px #000000b3;flex-direction:column;justify-content:space-between;gap:20px;min-width:0;padding:20px;display:flex}.gamut-preview-grid span{font-size:12px}.gamut-preview-grid strong{overflow-wrap:anywhere;font-size:15px}.gamut-result-list,.alpha-result-list{margin-top:20px}.gamut-css-row,.gradient-code-row{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:12px;min-width:0;padding:14px 0;display:grid}.gamut-css-row pre,.gradient-code-row code{min-width:0;color:var(--text-soft);white-space:pre-wrap;margin:0;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}.alpha-controls-card{align-content:start;gap:30px;display:grid}.alpha-slider{gap:16px}.alpha-slider>span{justify-content:space-between;display:flex}.alpha-preview{border-radius:var(--radius-control);min-height:320px;padding:18px}.checkerboard{background-color:#fff;background-image:linear-gradient(45deg,#d5d5d5 25%,#0000 25%),linear-gradient(-45deg,#d5d5d5 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d5d5d5 75%),linear-gradient(-45deg,#0000 75%,#d5d5d5 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.alpha-preview>div,.alpha-preview>div>div{border-radius:calc(var(--radius-control) - 2px);place-items:center;width:100%;min-height:284px;display:grid}.alpha-preview span{font-size:clamp(34px,5vw,58px);font-weight:500}.token-source-card textarea{resize:vertical;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface-soft);width:100%;min-height:420px;color:var(--text);padding:16px;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.token-summary{border:1px solid var(--line);border-radius:var(--radius-control);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.token-summary article{gap:4px;min-width:0;padding:16px;display:grid}.token-summary article+article{border-left:1px solid var(--line)}.token-summary strong{font-size:24px;font-weight:500}.token-summary span{color:var(--text-soft);font-size:11px}.token-swatches,.image-gradient-swatches{border-radius:var(--radius-control);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;display:grid;overflow:hidden}.token-swatches .shared-color-swatch,.image-gradient-swatches .shared-color-swatch{min-height:150px}.token-findings{border-top:1px solid var(--line);margin-top:24px}.token-findings h3{margin:18px 0 8px;font-size:14px}.token-findings p{border-top:1px solid var(--line);grid-template-columns:minmax(110px,.35fr) minmax(0,1fr);gap:14px;margin:0;padding:10px 0;font-size:12px;display:grid}.token-findings span{color:var(--text-soft);overflow-wrap:anywhere}.token-actions,.image-gradient-actions,.svg-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.image-gradient-preview,.svg-preview-shell{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-soft);place-items:center;min-height:420px;display:grid;overflow:hidden}.image-gradient-preview img,.svg-preview-shell img{object-fit:contain;width:100%;height:420px;display:block}.extracted-gradient-preview{border-radius:var(--radius-control);min-height:240px;margin-bottom:26px}.image-gradient-result>.field{gap:16px}.svg-editor-card>.field{margin-bottom:24px}.svg-color-list{gap:16px;display:grid}.svg-current-note{border:1px solid var(--line);border-radius:var(--radius-control);min-height:120px;color:var(--text-soft);text-align:center;place-items:center;margin:0;padding:24px;display:grid}.print-controls-card{align-content:start;gap:24px;display:grid}.print-upload{width:100%}.profile-file-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:12px 0;font-size:12px;display:flex}.profile-file-row span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.profile-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.profile-meta span{border:1px solid var(--line);border-radius:var(--radius-control);gap:5px;min-width:0;padding:14px;display:grid}.profile-meta small{color:var(--text-faint)}.profile-meta strong{overflow-wrap:anywhere;font-size:13px;font-weight:500}.print-channel-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px;display:grid}.print-channel-grid article{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-soft);flex-direction:column;justify-content:space-between;min-width:0;min-height:96px;padding:14px;display:flex}.print-channel-grid span{color:var(--text-faint);font-size:11px}.print-channel-grid strong{font-size:20px;font-weight:500}.ink-coverage.is-high{border-color:color-mix(in srgb, var(--danger) 50%, var(--line))}.generic-cmyk{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}.generic-cmyk h3{margin:0;font-size:16px}.generic-cmyk p,.print-caveat{color:var(--text-soft);margin:6px 0 0;font-size:12px}.print-caveat{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}@container toolworkspace (max-width:1040px){.gamut-layout,.alpha-layout,.token-audit-layout,.image-gradient-layout,.svg-recolor-layout,.print-profile-layout{grid-template-columns:1fr}.gamut-result-card,.alpha-result-card,.token-results-card,.image-gradient-result,.svg-editor-card,.print-result-card{border-top:1px solid var(--line);border-left:0}}@container toolworkspace (max-width:620px){.gradient-interpolation-controls,.mixer-space-controls,.alpha-color-controls,.gamut-preview-grid,.profile-meta{grid-template-columns:1fr}.token-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.token-summary article:nth-child(3){border-top:1px solid var(--line);border-left:0}.token-summary article:nth-child(4){border-top:1px solid var(--line)}.token-swatches,.image-gradient-swatches{grid-template-columns:1fr}.token-actions,.svg-actions{grid-template-columns:1fr;display:grid}.token-actions .button,.svg-actions .button,.svg-actions .icon-button{width:100%}.print-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.image-gradient-preview,.svg-preview-shell,.image-gradient-preview img,.svg-preview-shell img{height:260px;min-height:260px}}