:root{--bg-color:#ededf9;--surface-color:#fff;--purple:#5e5aa3;--light-blue:#e3f2fd;--light-green:#e9f6d5;--light-yellow:#ffefcc;--light-red:#fce6e2;--light-gray:#e0e0e0;--section-width:1280px;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:4rem;--padding-card:1.75rem;--padding-button:10px 15px;--padding-badge:5px 13px 5px 10px;--compare-mode-offset:15px;--border-radius:.5rem;--border-radius-secondary:.25rem;--border-radius-pill:2rem;--border-width:1px;--border-default:var(--border-width) solid var(--light-gray);--outline-selected:2px solid var(--purple);--color-preview-size:50px;--compare-preview-height:100px;--contrast-text-size:4rem;--icon-size:1rem;--preview-text-24:24px;--preview-text-19:19px;--preview-text-16:16px;--preview-text-14:14px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700}body{background-color:var(--bg-color);color:#1f2937;margin:0;font-family:Schibsted Grotesk,sans-serif}body.modal-open{overflow:hidden}.logo{font-size:2rem;font-weight:600}.navigation-container{background-color:var(--purple);color:var(--surface-color);padding:var(--space-xl)}.navigation-content{width:100%;max-width:var(--section-width);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.navigation-anchor-items{gap:var(--space-lg);display:flex}.card-heading{margin-top:0}.section-width{max-width:var(--section-width);margin:0 auto}.content,.contrast-checker-section{gap:var(--space-lg);flex-direction:column;display:flex}.intro-section{gap:var(--space-lg);grid-template-columns:1fr 1fr;padding:clamp(50px,10vw,70px) 0;display:grid}.intro-section h1,.intro-section p{margin:0}.intro-section h1{max-width:720px;margin-bottom:var(--space-md);font-size:2.5rem;line-height:1}.intro-section p:last-child{color:#555;max-width:700px;line-height:1.7}.github-button{align-items:center;gap:var(--space-sm);border:var(--border-default);border-radius:var(--border-radius-secondary);background-color:var(--purple);min-height:44px;color:var(--surface-color);padding:0 var(--space-lg);font-weight:var(--font-weight-bold);border-color:#0000;text-decoration:none;transition:background-color .15s,transform .15s,box-shadow .15s;display:inline-flex}.github-button:hover{background-color:#4d4989;transform:translateY(-1px);box-shadow:0 8px 18px #11182724}.github-button:focus-visible{outline:var(--outline-selected);outline-offset:3px}.footer-github-button{color:var(--surface-color);border-color:#0000}.intro-eyebrow{margin-bottom:var(--space-md);color:#555;font-size:.82rem;font-weight:var(--font-weight-bold);text-transform:uppercase}.intro-thresholds{gap:var(--space-md);grid-template-columns:repeat(3,minmax(92px,1fr));display:grid}.intro-thresholds div{gap:var(--space-sm);min-width:128px;padding:var(--space-lg);border:var(--border-default);border-radius:var(--border-radius);background-color:#fafafa;display:grid}.intro-thresholds strong{font-size:1.35rem}.intro-thresholds span{color:#555;font-size:.82rem;line-height:1.3}.top-grid{align-items:stretch;gap:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}.top-grid-palette{grid-template-columns:1fr 1fr}.color-palette-section{background-color:var(--surface-color);padding:var(--padding-card);border-radius:var(--border-radius);border:var(--border-default)}.color-palette-container{gap:var(--space-lg);flex-direction:column;display:flex}.palette-toolbar{justify-content:space-between;align-items:flex-end;gap:var(--space-lg);display:flex}.palette-toolbar .card-heading{margin-bottom:var(--space-xs);font-weight:var(--font-weight-bold)}.palette-count{color:#666;margin:0;font-size:.9rem}.add-color-control{justify-content:flex-end;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.color-name-input{border:var(--border-default);border-radius:var(--border-radius-secondary);width:150px;min-height:42px;padding:0 var(--space-md);font:inherit}.color-name-input:focus{outline:var(--outline-selected);outline-offset:2px}.hex-input-shell{border:var(--border-default);border-radius:var(--border-radius-secondary);background-color:var(--surface-color);align-items:center;width:130px;min-height:42px;display:flex}.hex-input-shell:focus-within{outline:var(--outline-selected);outline-offset:2px}.hex-input-shell span{padding-left:var(--space-md);color:#666;font-weight:var(--font-weight-bold)}.hex-input-shell input{min-width:0;padding:0 var(--space-md) 0 var(--space-xs);font:inherit;text-transform:lowercase;border:none;flex:1}.hex-input-shell input:focus{outline:none}.add-color-control>input{border:var(--border-default);border-radius:var(--border-radius-secondary);width:130px;min-height:42px;padding:0 var(--space-md);font:inherit;text-transform:lowercase}.add-color-control>input:focus{outline:var(--outline-selected);outline-offset:2px}.add-color-button,.edit-color-button,.delete-color-button,.edit-color-action-button{border:var(--border-default);background-color:var(--surface-color);font:inherit;cursor:pointer}.add-color-button{min-height:42px;padding:0 var(--space-md);border-radius:var(--border-radius-secondary);font-weight:var(--font-weight-bold)}.add-color-button:disabled{cursor:not-allowed;opacity:.45}.compare-color-container{box-sizing:border-box;gap:var(--space-md);background-color:var(--surface-color);width:auto;height:100%;padding:var(--space-lg);border-radius:var(--border-radius);border:var(--border-default);flex-direction:column;display:flex}.compare-color-header{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.compare-color-header .card-heading{font-weight:var(--font-weight-bold);margin-bottom:0}.swap-color-button{align-items:center;gap:var(--space-xs);border:var(--border-default);border-radius:var(--border-radius-secondary);background-color:var(--surface-color);min-height:38px;padding:0 var(--space-md);font:inherit;font-weight:var(--font-weight-bold);cursor:pointer;display:inline-flex}.swap-color-button:hover{background-color:var(--light-blue)}.swap-color-button:disabled{cursor:not-allowed;opacity:.45}.selected-slot-control{gap:var(--space-sm);padding:var(--space-xs);border:var(--border-default);border-radius:var(--border-radius);background-color:#f7f7fb;grid-template-columns:1fr 1fr;display:grid}.selected-slot-control button{border-radius:var(--border-radius-secondary);min-height:34px;font:inherit;font-weight:var(--font-weight-bold);cursor:pointer;background-color:#0000;border:none}.selected-slot-control button:hover{background-color:var(--surface-color)}.selected-slot-control .selected-slot-active{background-color:var(--surface-color);box-shadow:0 0 0 1px #a7a4e08c}.compare-color-controls{gap:var(--space-lg);flex:1;grid-template-columns:1fr 1fr;display:grid}.compare-color-item{border-radius:var(--border-radius-secondary);cursor:pointer;flex:1;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;transition:transform .15s;display:grid;position:relative}.compare-color-item:hover,.compare-color-item-active{transform:translateY(-1px)}.compare-color-title-row{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);display:flex}.compare-color-title-row .card-heading{margin-bottom:0}.selected-chip{border-radius:var(--border-radius-pill);background-color:var(--purple);color:var(--surface-color);font-size:.78rem;font-weight:var(--font-weight-bold);opacity:0;transform-origin:50%;white-space:nowrap;padding:3px 8px;transition:opacity .24s,transform .24s;transform:translateY(4px)scale(.92)}.compare-color-item-active .selected-chip{opacity:1;transform:translateY(0)scale(1)}.contrast-checker-text,.contrast-checker-text-single{align-items:center;gap:var(--space-sm);grid-template-columns:minmax(0,2fr) auto auto;display:grid}.compare-color-a,.compare-color-b{border:none;border-radius:0;height:100%;min-height:150px}.selected-color-body{border:var(--border-default);border-radius:var(--border-radius-secondary);grid-template-rows:minmax(150px,1fr) auto;min-height:0;transition:border-color .15s,box-shadow .15s;display:grid;overflow:hidden}.compare-color-item-active .selected-color-body{border-color:var(--purple);box-shadow:0 0 0 1px #5e5aa373}.color-item-text{background-color:var(--surface-color);padding:var(--space-md);border:var(--border-default);border-radius:0 0 var(--border-radius-secondary) var(--border-radius-secondary);margin:0}.selected-color-edit-panel{gap:var(--space-sm);padding:var(--space-sm);border:none;border-radius:0;transition:background-color .18s,border-color .18s;display:grid;position:relative}.selected-color-edit-panel:before{border-radius:0 0 var(--border-radius-secondary) var(--border-radius-secondary);content:"";opacity:0;pointer-events:none;background-color:#a7a4e012;transition:opacity .24s,transform .24s;position:absolute;inset:0;transform:scaleX(.96)}.compare-color-item-active .selected-color-edit-panel:before{opacity:1;transform:scaleX(1)}.selected-color-edit-panel>*{position:relative}.compare-color-item-active .selected-color-edit-panel{background-color:#fbfbfe}.selected-color-input-shell{align-items:center;min-width:0;display:flex;position:relative}.selected-color-input-shell input{border:var(--border-default);border-radius:var(--border-radius-secondary);width:100%;min-width:0;min-height:36px;padding:0 42px 0 var(--space-sm);font:inherit;text-transform:lowercase}.selected-color-input-shell input:focus{outline:var(--outline-selected);outline-offset:2px}.selected-color-edit-panel label{gap:var(--space-xs);color:#555;font-size:.85rem;display:grid}.selected-color-edit-panel input[type=range]{width:100%;accent-color:var(--purple)}.hue-slider{appearance:none;cursor:pointer;background:0 0;height:18px}.hue-slider:focus{outline:none}.hue-slider::-webkit-slider-runnable-track{border-radius:var(--border-radius-pill);background:var(--purple);border:1px solid #11182729;height:10px}.hue-slider::-webkit-slider-thumb{appearance:none;border:3px solid var(--surface-color);border-radius:var(--border-radius-pill);background-color:var(--purple);width:22px;height:22px;margin-top:-7px;box-shadow:0 0 0 1px #11182733,0 4px 10px #5e5aa359}.hue-slider::-moz-range-track{border-radius:var(--border-radius-pill);background:linear-gradient(90deg,#ef4444,#f59e0b,#facc15,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);border:1px solid #11182729;height:10px}.hue-slider::-moz-range-thumb{border:3px solid var(--surface-color);border-radius:var(--border-radius-pill);background-color:var(--purple);width:18px;height:18px;box-shadow:0 0 0 1px #11182733,0 4px 10px #5e5aa359}.empty-panel-state{align-content:center;place-items:center;gap:var(--space-sm);border:1px dashed var(--light-gray);border-radius:var(--border-radius);min-height:120px;padding:var(--space-md);text-align:center;background-color:#fafafa;display:grid}.empty-panel-state p{color:#666;max-width:260px;margin:0}.empty-panel-state .material-symbols-outlined{color:#666;font-size:1.5rem}.empty-result-card{min-height:320px}.quiet-empty-state{justify-content:center;align-items:center;gap:var(--space-sm);border:var(--border-default);border-radius:var(--border-radius);background-color:var(--surface-color);color:#666;min-height:120px;display:flex}.quiet-empty-state p{margin:0}.added-colors-container{align-items:start;gap:var(--space-sm);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.palette-swatch-card{gap:var(--space-sm);min-width:0;padding:var(--space-sm);border:var(--border-default);border-radius:var(--border-radius);background-color:var(--surface-color);-webkit-user-select:none;user-select:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:grid;position:relative}.palette-swatch-card:hover{transform:translateY(-1px);box-shadow:0 8px 18px #11182714}.palette-swatch-card-selected{border-color:var(--purple);box-shadow:0 0 0 2px #a7a4e040}.palette-swatch-card p,.copy-hex-button{font-size:.82rem;font-weight:var(--font-weight-medium);text-align:center;text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.palette-swatch-card .palette-color-name{color:#1f2937;font-weight:var(--font-weight-bold)}.palette-preview-shell{position:relative}.copy-hex-button,.copy-selected-color-button{justify-content:center;align-items:center;gap:var(--space-xs);color:inherit;font:inherit;cursor:pointer;background-color:#0000;border:none;display:inline-flex}.copy-hex-button{min-width:0;padding:0}.copy-hex-button span:first-child{text-overflow:ellipsis;overflow:hidden}.copy-hex-button .material-symbols-outlined{opacity:0;transition:opacity .15s}.palette-swatch-card:hover .copy-hex-button .material-symbols-outlined,.copy-hex-button:focus-visible .material-symbols-outlined{opacity:1}.copy-selected-color-button{border-radius:var(--border-radius-secondary);width:32px;height:28px;min-height:34px;font-weight:var(--font-weight-bold);background-color:#0000;border:none;position:absolute;right:4px}.copy-selected-color-button:hover{background-color:var(--light-blue)}.palette-swatch-tags{left:var(--space-xs);top:var(--space-xs);gap:var(--space-xs);pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .15s;display:flex;position:absolute}.palette-swatch-tags span{border:var(--border-default);border-radius:var(--border-radius-pill);background-color:var(--surface-color);font-size:.78rem;font-weight:var(--font-weight-bold);padding:2px 7px}.palette-swatch-card:hover .palette-swatch-tags{opacity:0}.edit-color-button,.delete-color-button{top:var(--space-xs);border-radius:var(--border-radius-pill);opacity:0;justify-content:center;align-items:center;width:26px;height:26px;padding:0;transition:opacity .15s,background-color .15s;display:inline-flex;position:absolute}.edit-color-button{right:calc(26px + var(--space-sm))}.delete-color-button{right:var(--space-xs)}.palette-swatch-card:hover .delete-color-button,.palette-swatch-card:hover .edit-color-button,.delete-color-button:focus-visible,.edit-color-button:focus-visible{opacity:1}.delete-color-button:hover{background-color:var(--light-red)}.edit-color-button:hover{background-color:var(--light-blue)}.edit-color-name-input,.edit-color-input{border:var(--border-default);border-radius:var(--border-radius-secondary);min-width:0;min-height:34px;padding:0 var(--space-sm);font:inherit;text-align:center}.edit-color-input{text-transform:lowercase}.edit-color-name-input:focus,.edit-color-input:focus{outline:var(--outline-selected);outline-offset:2px}.edit-color-actions{gap:var(--space-xs);grid-template-columns:1fr 1fr;display:grid}.edit-color-action-button{border-radius:var(--border-radius-secondary);justify-content:center;align-items:center;min-height:32px;display:inline-flex}.edit-color-action-button:disabled{cursor:not-allowed;opacity:.45}.edit-color-action-button:first-child:hover:not(:disabled){background-color:var(--light-green)}.edit-color-action-button:last-child:hover{background-color:var(--light-red)}.edit-color-overlay{z-index:100000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#1118276b;place-items:center;padding:clamp(24px,7vw,48px);display:grid;position:fixed;inset:0;overflow-y:auto}.edit-color-modal{gap:var(--space-md);box-sizing:border-box;border:var(--border-default);border-radius:var(--border-radius);background-color:var(--surface-color);width:min(420px,100%);max-height:calc(100dvh - clamp(48px,14vw,96px));padding:var(--space-lg);display:grid;overflow-y:auto;box-shadow:0 24px 70px #11182747}.edit-color-modal-header{justify-content:space-between;align-items:flex-start;gap:var(--space-md);display:flex}.edit-color-modal-header .card-heading{margin-bottom:var(--space-xs);font-weight:var(--font-weight-bold)}.edit-color-modal-header p{margin:0}.edit-color-modal-header p:last-child{color:#555;font-size:.9rem}.edit-color-modal-close{border:var(--border-default);border-radius:var(--border-radius-pill);background-color:var(--surface-color);width:34px;height:34px;color:inherit;cursor:pointer;flex:none;justify-content:center;align-items:center;display:inline-flex}.edit-color-modal-close:hover{background-color:var(--light-red)}.edit-color-modal-preview{border:var(--border-default);border-radius:var(--border-radius);min-height:120px}.edit-color-modal-field{gap:var(--space-xs);color:#555;font-size:.88rem;font-weight:var(--font-weight-bold);display:grid}.edit-color-modal-field input{text-align:left;min-height:42px}.edit-color-modal .edit-color-actions{gap:var(--space-sm)}.edit-color-modal .edit-color-action-button{gap:var(--space-xs);min-height:42px;font-weight:var(--font-weight-bold)}.compare-mode-selector{gap:var(--space-sm);display:flex}.compare-mode-option{padding:var(--padding-button);background-color:var(--surface-color);border-radius:var(--border-radius) var(--border-radius) 0 0;border:var(--border-default);color:inherit;font:inherit;font-weight:var(--font-weight-medium);z-index:99999;transform:translateY(var(--border-width));cursor:pointer;opacity:.72;transition:opacity .15s,background-color .15s,border-color .15s}.compare-mode-option:hover{opacity:1}.compare-mode-option-active{border-bottom-color:var(--surface-color);font-weight:var(--font-weight-bold);opacity:1;box-shadow:0 -2px 0 var(--purple) inset}.compare-mode-selector>:first-child{margin-left:calc(var(--padding-card) - var(--compare-mode-offset))}.compare-mode-selector-mobile{display:none}.compare-color-section{gap:var(--space-lg);grid-template-columns:1fr 1fr;width:100%;display:grid}.compare-info-text{justify-content:flex-start;align-items:center;gap:var(--space-sm);display:flex}.compare-color-text-container{background-color:var(--surface-color);padding:var(--space-lg);border-radius:var(--border-radius);border:var(--border-default)}.contrast-ratio-container{justify-content:flex-start;align-items:center;gap:var(--space-md);border-bottom:var(--border-default);padding-bottom:var(--space-lg);display:flex}.contrast-checker-container{gap:var(--space-lg);padding-top:var(--space-lg);display:grid}.contrast-checker-group{padding-bottom:var(--space-lg);border-bottom:var(--border-default);display:grid}.contrast-checker-group:last-child{border-bottom:none}.contrast-checker-group h4{margin:0}.usage-note{align-items:start;gap:var(--space-sm);padding:var(--space-sm) 0 0;color:#555;grid-template-columns:1fr 1fr 1fr;margin:0;font-size:.88rem;line-height:1.45;display:grid}.usage-note span{color:#1f2937;font-size:.72rem;font-weight:var(--font-weight-bold);letter-spacing:0;text-transform:uppercase}.usage-note p{margin:0}.contrast-text{margin:0;font-size:3rem}.color-great{background-color:var(--light-green)}.color-good{background-color:var(--light-blue)}.color-ok{background-color:var(--light-yellow)}.color-poor{background-color:var(--light-red)}.color-preview{border-radius:var(--border-radius-secondary);border:var(--border-default);cursor:pointer;width:100%;height:85px}.color-preview.selected{outline:var(--outline-selected)}.preview-section .card-heading{font-weight:var(--font-weight-bold)}.color-preview-container{gap:var(--space-lg);min-height:420px;padding:var(--space-lg);border:var(--border-default);border-radius:var(--border-radius);box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);display:grid}.preview-topbar,.preview-hero-row,.preview-content-grid{border-color:color-mix(in srgb, currentColor 26%, transparent)}.preview-topbar{justify-content:space-between;align-items:center;gap:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid;display:flex}.preview-window-dots span{border-radius:var(--border-radius-pill);border:1px solid;width:9px;height:9px}.preview-status-pill{border-radius:var(--border-radius-pill);font-size:.82rem;font-weight:var(--font-weight-bold);border:1px solid;padding:4px 10px}.preview-hero-row{gap:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid;grid-template-columns:1fr 1fr;align-items:end;display:grid}.preview-title{margin:0 0 var(--space-md);font-size:1.75rem}.preview-metric{border-radius:var(--border-radius);border:1px solid;align-content:center;place-items:center;min-width:96px;min-height:100%;display:grid}.preview-metric strong{font-size:1.75rem;line-height:1}.preview-metric span{margin-top:var(--space-xs);font-size:.82rem;font-weight:var(--font-weight-bold)}.preview-content-grid{gap:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.preview-sample-block{align-content:start;gap:var(--space-sm);min-width:0;padding:var(--space-md);border-radius:var(--border-radius);border:1px solid;display:grid}.preview-sample-block h4,.preview-sample-block p{margin:0}.preview-ui-sample{gap:var(--space-md)}.preview-progress-track{border-radius:var(--border-radius-pill);border:1px solid;height:12px;overflow:hidden}.preview-progress-fill{background-color:currentColor;width:66%;height:100%}.preview-ui-sample button{border-radius:var(--border-radius-secondary);min-height:40px;padding:0 var(--space-md);font:inherit;font-weight:var(--font-weight-bold);border:1px solid}.preview-text-24-medium{font-size:var(--preview-text-24);font-weight:var(--font-weight-medium)}.preview-text-24-regular{font-size:var(--preview-text-24);font-weight:var(--font-weight-regular)}.preview-text-19-bold{font-size:var(--preview-text-19);font-weight:var(--font-weight-bold)}.preview-text-16-medium{font-size:var(--preview-text-16);font-weight:var(--font-weight-medium)}.preview-text-16-regular{font-size:var(--preview-text-16);font-weight:var(--font-weight-regular)}.preview-text-14-regular{font-size:var(--preview-text-14);font-weight:var(--font-weight-regular)}.contrast-check,.contrast-text-status{gap:var(--space-xs);width:fit-content;padding:var(--padding-badge);border-radius:var(--border-radius-pill);justify-content:flex-end;align-items:center;margin:0;display:inline-flex}.success{background-color:var(--light-green)}.error{background-color:var(--light-red)}.material-symbols-outlined{font-size:var(--icon-size)}.palette-compare-section{background-color:var(--surface-color);border:var(--border-default);border-radius:var(--border-radius);flex-direction:column;display:flex;overflow-x:auto}.palette-compare-intro{justify-content:space-between;align-items:flex-end;gap:var(--space-xl);padding:var(--space-lg) var(--padding-card);border-bottom:var(--border-default);background-color:var(--surface-color);display:flex}.palette-compare-intro .card-heading{margin-bottom:var(--space-xs);font-weight:var(--font-weight-bold)}.palette-compare-intro p:last-child{color:#555;max-width:680px;margin:0;line-height:1.55}.palette-compare-legend{gap:var(--space-sm);flex-wrap:wrap;justify-content:flex-end;align-items:center;display:flex}.palette-compare-legend>span{align-items:center;gap:var(--space-xs);min-height:32px;padding:0 var(--space-sm);border:var(--border-default);border-radius:var(--border-radius-pill);white-space:nowrap;font-size:.85rem;font-weight:var(--font-weight-medium);display:inline-flex}.legend-dot{border-radius:var(--border-radius-pill);border:1px solid #1118271f;flex:none;width:9px;height:9px;display:inline-block}.legend-dot-pass{background-color:var(--light-green)}.legend-dot-fail{background-color:var(--light-red)}.palette-compare-tools{gap:var(--space-lg);padding:var(--space-lg) var(--padding-card);border-bottom:var(--border-default);display:grid}.palette-pass-switch{align-items:center;gap:var(--space-sm);width:fit-content;color:inherit;font:inherit;font-weight:var(--font-weight-bold);cursor:pointer;display:inline-flex}.palette-pass-switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{border-radius:var(--border-radius-pill);background-color:#d1d5db;border:1px solid #1118271f;flex:none;align-items:center;width:48px;height:28px;transition:background-color .18s,border-color .18s;display:inline-flex;position:relative}.switch-thumb{border-radius:var(--border-radius-pill);background-color:var(--surface-color);width:22px;height:22px;transition:transform .18s;position:absolute;left:3px;box-shadow:0 1px 3px #1118273d}.palette-pass-switch input:checked+.switch-track{border-color:var(--purple);background-color:var(--purple)}.palette-pass-switch input:checked+.switch-track .switch-thumb{transform:translate(20px)}.palette-pass-switch input:focus-visible+.switch-track{outline:var(--outline-selected);outline-offset:2px}.palette-pass-switch:hover .switch-track{border-color:var(--purple)}.palette-compare-container{gap:var(--space-sm);background-color:var(--surface-color);padding:var(--padding-card);grid-template-columns:160px 1fr;grid-template-areas:".header""sidebar main";display:grid}.palette-header-row{gap:var(--space-sm);grid-area:header;display:grid}.palette-sidebar-column{gap:var(--space-sm);grid-area:sidebar;display:grid}.palette-main-grid{gap:var(--space-sm);grid-area:main;display:grid}.palette-background{border:var(--border-default);border-radius:var(--border-radius-secondary);width:100%;min-width:78px;height:42px}.palette-color-label{cursor:pointer;border-radius:var(--border-radius-secondary);min-height:88px;transition:opacity .15s,transform .15s}.palette-color-label:hover{transform:translateY(-1px)}.palette-color-label p{margin:var(--space-xs) 0 0;text-align:center;font-size:.85rem}.palette-label-text{gap:2px;min-width:0;display:grid}.palette-color-label .palette-label-name,.palette-color-label .palette-label-hex{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.palette-color-label .palette-label-name{color:#1f2937;font-weight:var(--font-weight-bold)}.palette-color-label .palette-label-hex{color:#666;margin-top:0;font-size:.78rem}.palette-color-label-side{align-items:center;gap:var(--space-sm);grid-template-columns:42px 1fr;min-height:74px;display:grid}.palette-color-label-side .palette-background{min-width:42px}.palette-color-label-side p{text-align:left;margin:0}.palette-color-label-active .palette-background{outline:var(--outline-selected);outline-offset:2px}.palette-color-label-active p{font-weight:var(--font-weight-bold)}.palette-color-label-active .palette-background{outline-offset:2px}.palette-result-cell{justify-content:center;align-items:center;gap:var(--space-xs);border:var(--border-default);border-radius:var(--border-radius-secondary);cursor:pointer;flex-direction:column;min-width:78px;min-height:74px;font-size:.85rem;transition:opacity .15s,transform .15s,box-shadow .15s;display:flex}.palette-result-cell:hover{transform:translateY(-1px)}.palette-result-cell strong{font-weight:var(--font-weight-bold)}.palette-result-cell small{color:#555}.palette-result-pass{background-color:var(--light-green)}.palette-result-fail{background-color:var(--light-red)}.palette-result-same{background-color:var(--surface-color);color:#666}.palette-result-same small{color:#666}.palette-result-active{opacity:1;box-shadow:0 0 0 2px #5e5aa38c}.palette-focus-mode .palette-result-active.palette-result-filtered{border-color:var(--purple)}.palette-result-muted{opacity:.35}.palette-result-filtered{background-color:var(--surface-color);color:#666;opacity:1}.palette-result-filtered strong,.palette-result-filtered small,.palette-result-filtered .material-symbols-outlined{visibility:hidden}.palette-result-wait{opacity:.65}.palette-compare-mobile-list{display:none}.palette-mobile-pair{align-items:center;gap:var(--space-md);border:var(--border-default);border-radius:var(--border-radius-secondary);background-color:var(--surface-color);width:100%;padding:var(--space-md);color:inherit;font:inherit;text-align:left;cursor:pointer;grid-template-columns:auto minmax(0,1fr) auto;display:grid}.palette-mobile-pair-colors{display:flex}.palette-mobile-pair-colors span{border:var(--border-default);border-radius:var(--border-radius-pill);width:34px;height:34px}.palette-mobile-pair-colors span+span{margin-left:-10px}.palette-mobile-pair-text,.palette-mobile-pair-result{gap:2px;min-width:0;display:grid}.palette-mobile-pair-text strong,.palette-mobile-pair-text small,.palette-mobile-pair-result strong,.palette-mobile-pair-result small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.palette-mobile-pair-text small,.palette-mobile-pair-result small{color:#555;font-size:.78rem}.palette-mobile-pair-result{justify-items:end}.palette-mobile-pair-result .material-symbols-outlined{display:none}.palette-mobile-pair-pass{background-color:var(--light-green)}.palette-mobile-pair-fail{background-color:var(--light-red)}.palette-mobile-pair-same{color:#666}.site-footer{margin-top:var(--space-2xl);border-top:var(--border-default);background-color:var(--surface-color)}.footer-content{max-width:var(--section-width);justify-content:space-between;align-items:center;gap:var(--space-xl);padding:var(--space-xl) 0;margin:0 auto;display:flex}.footer-brand{gap:var(--space-xs);display:grid}.footer-logo{color:var(--purple);font-size:1.35rem;font-weight:700}.footer-brand p{color:#555;max-width:460px;margin:0;line-height:1.5}.footer-links{justify-content:flex-end;gap:var(--space-sm);flex-wrap:wrap;display:flex}.footer-links a{border:var(--border-default);border-radius:var(--border-radius-pill);min-height:38px;padding:0 var(--space-md);color:inherit;font-weight:var(--font-weight-bold);align-items:center;text-decoration:none;display:inline-flex}.footer-links a:hover{background-color:var(--light-blue)}.footer-links .footer-github-button{background-color:var(--purple);min-height:38px;color:var(--surface-color);border-color:#0000}.footer-links .footer-github-button:hover{background-color:#4d4989}@media (width<=1180px){.section-width{max-width:none;padding:0 var(--space-lg)}.footer-content{max-width:none;padding-right:var(--space-lg);padding-left:var(--space-lg)}.intro-section,.top-grid,.top-grid-palette,.compare-color-section{grid-template-columns:1fr}.intro-section{padding:44px 0 20px}.color-palette-section,.compare-color-container,.compare-color-text-container,.preview-section,.palette-compare-section{min-width:0}.palette-compare-section{overflow-x:visible}.palette-compare-container{display:none}.palette-compare-mobile-list{gap:var(--space-sm);padding:var(--padding-card);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.added-colors-container{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=760px){:root{--padding-card:1rem;--space-lg:1rem;--space-xl:1.25rem}.section-width{padding:0 var(--space-md)}.navigation-container{padding:var(--space-md)}.navigation-content,.palette-compare-intro{flex-direction:column;align-items:stretch}.navigation-anchor-items,.palette-compare-legend,.footer-links{justify-content:flex-start}.footer-content{flex-direction:column;align-items:flex-start}.intro-section h1{font-size:2rem;line-height:1.08}.palette-toolbar{align-items:stretch;gap:var(--space-lg);flex-direction:column}.palette-toolbar .card-heading{margin-bottom:var(--space-xs);font-size:inherit}.palette-count{font-size:.9rem}.add-color-control{justify-content:stretch;align-items:stretch;gap:var(--space-sm);grid-template-columns:minmax(0,1fr) auto;display:grid}.color-name-input,.hex-input-shell,.add-color-button{box-sizing:border-box}.color-name-input{width:100%;min-height:42px;padding:0 var(--space-md);font-size:inherit;grid-column:1/-1}.hex-input-shell{width:100%;min-height:42px}.add-color-button{min-height:42px;padding:0 var(--space-md);font-size:inherit}.color-name-input,.hex-input-shell{width:100%;min-height:40px}.color-name-input{padding:0 var(--space-sm)}.hex-input-shell span{padding-left:var(--space-sm)}.hex-input-shell input{padding-right:var(--space-sm)}.added-colors-container{gap:var(--space-md) var(--space-sm);grid-template-columns:repeat(4,minmax(0,1fr))}.palette-swatch-card{place-items:start center;gap:var(--space-sm);background-color:#0000;border-color:#0000;grid-template-columns:1fr;grid-template-areas:"preview""name";padding:0}.palette-swatch-card:hover{box-shadow:none;transform:none}.palette-swatch-card .palette-color-name{text-align:center;grid-area:name;width:100%;font-size:.78rem;line-height:1.2}.palette-preview-shell{grid-area:preview;width:clamp(56px,16vw,68px);height:clamp(56px,16vw,68px)}.palette-preview-shell .color-preview{border-radius:var(--border-radius-pill);height:100%}.palette-swatch-tags{top:60%;left:50%;transform:translate(-50%,-50%)}.palette-swatch-tags span{padding:1px 6px;font-size:.66rem}.palette-swatch-card:hover .palette-swatch-tags{opacity:1}.copy-hex-button{display:none}.edit-color-button,.delete-color-button{opacity:1;border-color:#1118271f;width:22px;height:22px;position:absolute}.edit-color-button{top:-4px;left:-4px}.delete-color-button{top:-4px;right:-4px}.edit-color-button .material-symbols-outlined,.delete-color-button .material-symbols-outlined{font-size:.82rem}.preview-hero-row,.preview-content-grid{grid-template-columns:1fr}.contrast-checker-text,.contrast-checker-text-single{grid-template-columns:minmax(0,1.6fr) auto auto}.contrast-checker-group h4{overflow-wrap:anywhere}.contrast-check,.contrast-text-status{white-space:nowrap;justify-content:center}.compare-color-container{gap:var(--space-sm);padding:var(--space-md)}.compare-color-header{align-items:center}.compare-color-header .card-heading{font-size:.95rem}.swap-color-button{min-height:34px;padding:0 var(--space-sm);font-size:.85rem}.selected-slot-control{gap:4px;padding:4px}.selected-slot-control button{min-height:30px;font-size:.85rem}.compare-color-controls{gap:var(--space-sm);grid-template-columns:repeat(2,minmax(0,1fr))}.compare-color-item{background-color:#0000;border:none;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:visible}.compare-color-item-active{box-shadow:none}.compare-color-title-row{min-height:34px;margin-bottom:var(--space-xs);padding:0}.compare-color-title-row .card-heading{font-size:.82rem}.selected-chip{padding:2px 7px;font-size:.68rem}.compare-color-a,.compare-color-b{border:none;border-radius:0;height:100%;min-height:74px}.selected-color-body{border:var(--border-default);border-radius:var(--border-radius-secondary);grid-template-rows:minmax(74px,1fr) auto;overflow:hidden}.compare-color-item-active .selected-color-body{border-color:var(--purple);box-shadow:0 0 0 1px #5e5aa373}.selected-color-edit-panel{align-items:center;gap:var(--space-xs);padding:var(--space-xs);border:none;border-radius:0;grid-template-columns:1fr}.selected-color-input-shell input{min-height:32px;font-size:.85rem}.copy-selected-color-button{white-space:nowrap;min-height:28px;padding:0;font-size:.82rem}.selected-color-edit-panel label{gap:2px;font-size:.75rem}.selected-color-edit-panel input[type=range]{height:18px}.compare-color-text-container{border-radius:var(--border-radius)}.contrast-ratio-container{align-items:center;gap:var(--space-sm);grid-template-columns:minmax(0,1fr) auto;display:grid}.contrast-text{font-size:clamp(2.25rem,13vw,3rem);line-height:1}.contrast-checker-container{gap:var(--space-sm)}.contrast-checker-group{gap:var(--space-sm);padding:var(--space-md);border:var(--border-default);border-radius:var(--border-radius);background-color:#fafafa}.contrast-checker-group:last-child{border-bottom:var(--border-default)}.contrast-checker-text,.contrast-checker-text-single{gap:var(--space-sm);grid-template-columns:1fr auto}.contrast-checker-text h4,.contrast-checker-text-single h4{grid-column:1/-1;font-size:1rem}.contrast-check{padding:var(--padding-badge);justify-self:start;font-size:.82rem}.usage-note{padding-top:0;font-size:.86rem;display:block}.compare-mode-selector{margin-bottom:var(--space-sm);border:var(--border-default);border-radius:var(--border-radius);background-color:#f7f7fb;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.compare-mode-selector>:first-child{margin-left:0}.compare-mode-selector-desktop{display:none}.compare-mode-selector-mobile{display:grid}.compare-mode-option{border-radius:var(--border-radius-secondary);min-height:44px;padding:0 var(--space-sm);text-align:center;z-index:auto;background-color:#0000;border:none;place-items:center;display:grid;transform:none}.compare-mode-option-active{background-color:var(--surface-color);box-shadow:0 0 0 1px #a7a4e08c}.color-preview-container{min-height:auto}.palette-compare-mobile-list{gap:var(--space-sm);padding:var(--padding-card);grid-template-columns:1fr}}@media (width<=460px){.selected-slot-control{grid-template-columns:1fr}.compare-mode-selector{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-mode-option{min-height:40px;padding:0 var(--space-xs);font-size:.85rem}.palette-mobile-pair{grid-template-columns:auto minmax(0,1fr)}.palette-mobile-pair-result{grid-column:1/-1;grid-template-columns:auto 1fr auto;place-items:center start}.palette-mobile-pair-result .material-symbols-outlined{display:inline}}