*{box-sizing:border-box;margin:0;padding:0}:root{--font-sans:system-ui,ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,"Times New Roman",Times,"Noto Serif","Liberation Serif","Apple Garamond",serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}html{scroll-behavior:smooth;height:100%}body{height:100%;font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-primary);line-height:1.4}[data-dark-mode=false]{--text-primary:#000000c1;--text-secondary:#0000009a;--text-emphasis:#000;--link:#00e;--link-visited:#551a8b;--bg-primary:#f5f6f7;--bg-secondary:#fff;--bg-tertiary:#e9ecef;--input-bg:#fff;--brand-primary:#0024a7;--accent-primary:#007aff;--border-primary:#d1d5db;--opacity-disabled:54%;--code-bg:#0000000d;--tooltip-bg:#333;--tooltip-text:#fff;--btn-scheme:#f0f0f0;--btn-scheme-hover:#e0e0e0;--overlay-bg:#00000080}[data-dark-mode=true]{--text-primary:#ffffffe6;--text-secondary:#000000c9;--text-emphasis:#fff;--link:#59fff7;--link-visited:#d8b1fa;--bg-primary:#16191c;--bg-secondary:#26292c;--bg-tertiary:#343739;--input-bg:#0a0b0d;--brand-primary:#fff;--accent-primary:#007aff;--border-primary:#4a4a4a;--opacity-disabled:50%;--code-bg:#ffffff26;--tooltip-bg:#e6e0e9;--tooltip-text:#322f35;--btn-scheme:#829dff;--btn-scheme-hover:#5378ff;--overlay-bg:#ffffff4d}h1{text-align:center;color:var(--brand-primary);letter-spacing:.02em;margin-top:3.5rem;padding:.625rem 0;font-size:1.125rem;font-weight:600}h2{color:var(--text-emphasis);letter-spacing:.015em;padding-bottom:.625rem;font-weight:600}h3{color:var(--text-emphasis);padding-bottom:.5rem;font-weight:600}a{text-decoration:underline;transition:text-decoration-color .3s}a:link{color:var(--link)}a:visited{color:var(--link-visited)}a:hover{text-decoration-color:#0000}.border-panel{border:1px solid var(--border-primary);border-radius:12px;padding:8px;box-shadow:0 2px 4px #0000000f}.border-component{border:1px solid var(--border-primary);border-radius:10px;margin-bottom:.875rem;padding:8px;box-shadow:0 2px 4px #0000000f}.border-component:last-child{margin-bottom:0}.border-element{border:1px solid var(--border-primary);border-radius:8px}.border-element-left-radius{border:1px solid var(--border-primary);border-top-left-radius:8px;border-bottom-left-radius:8px}.border-element-right-radius{border:1px solid var(--border-primary);border-top-right-radius:8px;border-bottom-right-radius:8px}.border-element-current-color{border:1px solid;border-radius:8px}.svg,.ie-warning,.noscript-warning,.old-browser-warning{display:none}.mode-toggle-switch{font-size:1.5rem;display:none;position:absolute;top:.3125rem;left:.875rem}.mode-toggle-switch input{display:none}.mode-toggle-switch label{color:gold;cursor:pointer}.hide{display:none}.page-wrapper{flex-direction:column;align-items:center;min-height:100dvh;display:flex}.container{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;max-width:100%;display:flex}.main-layout{max-width:100%}nav{background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);z-index:30;border-top-style:none;border-left-style:none;border-right-style:none;flex-direction:row;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.btn-nav{color:#fff;cursor:pointer;font-family:inherit;font-size:inherit;text-align:center;background:linear-gradient(#002bc7 0,#001c82);border:2px solid #0024a7;border-radius:13px;justify-content:center;align-items:center;margin-top:8px;margin-bottom:8px;margin-left:12px;padding:2px 12px 6px;line-height:1;text-decoration:none;display:flex}.btn-nav:last-child{margin-right:12px}.btn-nav:hover{background:linear-gradient(#0037ff 0,#002bc7)}.color-panel{color:var(--text-emphasis);background:var(--bg-secondary);margin-bottom:1rem;padding-left:12px;padding-right:12px}.color-panel h2,.swatches-panel h2,.contrast-panel h2,.color-scheme-panel h2{font-size:16px}.input-section{transition:transform .2s;position:relative}.input-section:hover{z-index:500;box-shadow:0 2px 6px #00000026}.input-group{align-items:center;gap:1px;margin-bottom:8px;display:flex}.input-wrapper{flex:1;align-items:center;transition:background-color .2s;display:flex;position:relative}.input-wrapper:focus-within{box-shadow:0 0 0 3px var(--accent-primary);border-radius:8px;outline:3px solid #06c}.input-wrapper.border-element-left-radius:focus-within{box-shadow:0 0 0 3px var(--accent-primary);z-index:10;border-top-right-radius:0;border-bottom-right-radius:0;outline:3px solid #06c}.color-input,.color-input-select{white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-mono);color:var(--text-emphasis);background-color:var(--input-bg);flex:1;padding:4px 44px 4px 8px;font-size:16px;overflow:hidden;border:none!important;outline:none!important}.color-input{border-radius:8px}.color-input-select{border-top-left-radius:8px;border-bottom-left-radius:8px}.copy-btn{color:var(--text-emphasis);background-color:var(--input-bg);cursor:pointer;border:none;border-radius:0 8px 8px 0;justify-content:center;align-items:center;width:40px;transition:color .2s;display:flex;position:absolute;top:0;bottom:0;right:0}.copy-btn:hover{color:var(--link)}.tooltip-text{visibility:hidden;background-color:var(--tooltip-bg);width:max-content;color:var(--tooltip-text);text-align:left;opacity:0;pointer-events:none;z-index:999;border-radius:5px;padding:6px;transition:opacity .3s;position:absolute;bottom:125%;right:0;transform:none}.tooltip-text:after{content:"";border-style:solid;border-width:5px;border-color:var(--tooltip-bg)transparent transparent transparent;margin-left:0;position:absolute;top:100%;right:15px}.copy-btn:hover .tooltip-text,.copy-btn:focus .tooltip-text{visibility:visible;opacity:1;pointer-events:auto}.info-emoji{cursor:pointer;padding:8px;font-size:1rem;font-style:normal;line-height:1;transition:transform .2s,opacity .2s;position:absolute;bottom:2px;right:0}.info-emoji:hover{opacity:.8;transform:scale(1.15)}@media (hover:none) and (pointer:coarse){.info-emoji{font-size:1.125rem}}.select{display:inline-block;position:relative}.select-button{background-color:var(--input-bg);width:40px;height:29px;color:var(--text-emphasis);cursor:pointer;justify-content:center;align-items:center;margin-left:1px;display:flex}.select-button:hover{background-color:var(--link);color:var(--input-bg)}.field-select{background-color:var(--bg-primary);z-index:1000;opacity:0;will-change:opacity,transform;width:68vw;margin:0;padding:4px;list-style:none;transition:opacity .2s,transform .2s;display:none;position:absolute;top:100%;right:0;transform:translateY(-10px)}.field-select li{font-family:var(--font-mono);color:var(--text-emphasis);text-wrap:nowrap;text-overflow:ellipsis;cursor:pointer;border-radius:4px;padding:4px 8px;font-size:14px;overflow:hidden}.field-select li:hover,.field-select li:focus{background-color:var(--link);color:var(--bg-primary)}.field-select li[tabindex="0"]:focus{outline:2px solid var(--link);outline-offset:-2px}.out-of-gamut-info{width:100%;margin-top:1rem;margin-bottom:1rem}.out-of-gamut-info>:nth-child(2){flex-grow:1}.out-of-gamut-swatch{text-align:center;white-space:nowrap;visibility:hidden;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:44px;padding-left:8px;padding-right:8px;font-size:.875rem;line-height:1.2;display:flex}.out-of-gamut-swatch .fallback-color-hex{font-size:.875rem;font-weight:600}.out-of-gamut-swatch .fallback-label{text-align:center;font-size:.75rem;font-style:italic;line-height:1.1}.gamut-status{text-align:center;padding-left:30px;padding-right:30px;font-size:.875rem;font-style:italic;font-weight:600}.checkerboard-bg{background-color:#0000!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" fill-opacity=\"1\"><rect width=\"4\" height=\"4\" fill=\"%23666\"/><rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" fill=\"%23666\"/><rect x=\"0\" y=\"4\" width=\"4\" height=\"4\" fill=\"%23999\"/><rect x=\"4\" y=\"0\" width=\"4\" height=\"4\" fill=\"%23999\"/></svg>")!important}.checkerboard-text{color:#0000;-webkit-user-select:text;user-select:text;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"4\" fill-opacity=\"1\"><rect width=\"2\" height=\"2\" fill=\"%23666\"/><rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" fill=\"%23666\"/><rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" fill=\"%23999\"/><rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" fill=\"%23999\"/></svg>");-webkit-background-clip:text;background-clip:text}[data-dark-mode=true] .checkerboard-bg{background-color:#0000!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" fill-opacity=\"1\"><rect width=\"4\" height=\"4\" fill=\"%23333\"/><rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" fill=\"%23333\"/><rect x=\"0\" y=\"4\" width=\"4\" height=\"4\" fill=\"%23666\"/><rect x=\"4\" y=\"0\" width=\"4\" height=\"4\" fill=\"%23666\"/></svg>")!important}[data-dark-mode=true] .checkerboard-text{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"4\" fill-opacity=\"1\"><rect width=\"2\" height=\"2\" fill=\"%23333\"/><rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" fill=\"%23333\"/><rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" fill=\"%23666\"/><rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" fill=\"%23666\"/></svg>")}.swatch.out-of-gamut,.preview-color.out-of-gamut{white-space:nowrap;text-align:left;align-items:center;padding:4px;font-size:11px;line-height:1.2;display:flex;overflow:hidden;color:#000!important;background-color:#fff!important}[data-dark-mode=true] .swatch.out-of-gamut,[data-dark-mode=true] .preview-color.out-of-gamut{color:#000!important;background-color:#fff!important}.slider-group{align-items:center;gap:8px;margin-bottom:8px;display:flex}.slider-group:last-child{margin-bottom:0}.slider-label{width:20px;font-size:14px;font-weight:500}.slider-track{pointer-events:auto;-webkit-user-select:none;user-select:none;border-radius:8px;flex:1;height:36px;position:relative;overflow:visible}.slider-track:before{content:"";border:1px solid var(--border-primary);z-index:0;background:#e8e8e8;border-radius:7px;position:absolute;inset:0 11px}.slider{appearance:none;cursor:pointer;pointer-events:auto;z-index:2;background:0 0;width:100%;height:36px;position:absolute;top:0}.slider:focus,.slider:focus-visible{outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background-color:#0000;border:4px solid #fff;border-radius:4px;width:22px;height:22px;rotate:45deg;box-shadow:0 0 0 3px #000}.slider::-moz-range-thumb{cursor:pointer;box-sizing:border-box;background-color:#0000;border:4px solid #fff;border-radius:4px;width:22px;height:22px;rotate:45deg;box-shadow:0 0 0 3px #000}.slider:focus::-webkit-slider-thumb{outline-offset:2px;background:0 0;outline:3px solid #ff5f1f}.slider:focus::-moz-range-thumb{outline-offset:2px;background:0 0;outline:3px solid #ff5f1f}.slider:focus-visible::-webkit-slider-thumb{background:0 0;outline:3px solid #ff5f1f}.slider:focus-visible::-moz-range-thumb{background:0 0;outline:3px solid #ff5f1f}.slider-gradient{pointer-events:none;z-index:1;border-radius:6px;position:absolute;inset:1px 12px;background-repeat:no-repeat!important;background-size:100% 100%!important}.opacity-slider .slider-group{gap:30px}.opacity-slider .slider-track{flex:calc(100% - 50px);max-width:calc(100% - 50px)}.opacity-track{background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.opacity-track:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" fill-opacity=\"1\"><rect width=\"4\" height=\"4\" fill=\"%23ccc\"/><rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" fill=\"%23ccc\"/><rect x=\"0\" y=\"4\" width=\"4\" height=\"4\" fill=\"%23fff\"/><rect x=\"4\" y=\"0\" width=\"4\" height=\"4\" fill=\"%23fff\"/></svg>");background-size:8px 8px}.opacity-track .slider-gradient{border-radius:6px;inset:1px 12px}.contrast-panel{color:var(--text-emphasis);background:var(--bg-secondary);padding-left:10px;padding-right:10px;container-type:inline-size}.contrast-panel h2{display:inline-block}.results-container{justify-content:space-between;display:flex}.contrast-results{color:#000;text-align:center;background-color:#7dff7d;width:139px;height:26px;font-weight:700;display:inline-block}.analysis-box{position:relative}.nav-settings-analysis{color:#d3d3d3;cursor:pointer;background-color:#0000;border:none;padding:10px;position:absolute;top:0;right:0}.nav-settings-analysis:hover{transform:scale(1.15)}.aaa-analysis,.aa-analysis,.wcag1-analysis,.apca-analysis{display:none}.aaa-standard .aaa-analysis,.aa-standard .aa-analysis,.wcag1-standard .wcag1-analysis,.apca-standard .apca-analysis{display:block}.analysis-title{margin-bottom:10px;font-weight:700}.analysis-list{margin-left:1.5rem}.analysis-list li{margin-bottom:5px}.out-of-gamut-contrast{text-align:center;color:var(--text-emphasis);background-color:var(--bg-primary);border-bottom-right-radius:5px;border-bottom-left-radius:5px;padding:12px;font-size:.875rem;font-style:italic;font-weight:600;position:absolute;bottom:0;left:0;right:0}.out-of-gamut-contrast span{font-style:normal}.contrast-row{align-items:center;gap:10px;display:flex}.aaa-results,.aa-results,.wcag1-results,.apca-results{display:none}.aaa-standard .aaa-results,.aa-standard .aa-results,.wcag1-standard .wcag1-results,.apca-standard .apca-results{display:flex}.contrast-label,.color-space-label{text-indent:-8px;flex:1;min-width:0;padding-top:8px;padding-bottom:8px;padding-left:8px;line-height:1.2}.result-box{text-align:center;box-sizing:border-box;background:#fff;flex-shrink:0;justify-content:center;align-items:center;margin-top:4px;margin-bottom:5px;padding:4px;display:flex}.contrast-status{color:#000;text-align:center;background:#ff7d7d;min-width:45px;padding:2px 8px}.contrast-status.pass{background:#7dff7d}.contrast-ratio,.color-difference,.color-brightness,.apca-lightness,.color-space-value{font-family:var(--font-mono);background-color:var(--input-bg)}.fallback-results{opacity:0;pointer-events:none;max-height:0;margin-bottom:0;transition:max-height .3s,opacity .3s;overflow:hidden}.fallback-results.show{opacity:1;pointer-events:auto;max-height:55px}.equivalent-color,.color-space-display{align-items:center;gap:10px;display:flex;position:relative}.equivalent-color .copy-btn{background-color:#0000}.equivalent-color .tooltip-text{bottom:110%;right:-5px}.equivalent-input{width:100%;font-family:var(--font-mono);text-align:left;text-indent:8px;cursor:text;-webkit-user-select:all;user-select:all;pointer-events:none;color:var(--text-emphasis);background-color:var(--input-bg);font-size:16px}.equivalent-color,.color-space-display{justify-content:space-between;align-items:center;gap:8px}.contrast-label,.color-space-label,.equivalent-color label{text-indent:-8px;white-space:normal;word-break:break-word;flex:auto;min-width:0;padding-left:8px;line-height:1.2}.equivalent-color{position:relative}.equivalent-color .equivalent-input{box-sizing:border-box;text-align:center;flex-shrink:0;padding-right:36px}.equivalent-color .copy-btn{width:30px;position:absolute;top:16px;bottom:16px;right:10px}@container (width>=200px) and (width<=279px){.result-box,.equivalent-color .equivalent-input{width:103px}}@container (width>=280px){.result-box,.equivalent-color .equivalent-input{width:130px}.nav-settings-analysis{right:8px}.equivalent-input{text-indent:20px}}@container (width>=304px){.equivalent-color .tooltip-text{bottom:156%;right:-5px}}@container (width>=324px){.result-box,.equivalent-color .equivalent-input{width:130px}}.swatches-panel{color:var(--text-emphasis);background:var(--bg-secondary);display:none}.swatch-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.swatch{text-align:center;white-space:nowrap;height:44px;font-size:12px;line-height:42px;transition:transform .2s;overflow:hidden}.swatch:hover,.preview-color:hover{transform:scale(1.05);box-shadow:0 2px 6px #00000026}.color-scheme-panel{color:var(--text-emphasis);background:var(--bg-secondary);display:none}.color-scheme-grid{gap:10px;display:flex}.scheme-options{flex-direction:column;flex:1;gap:6px;display:flex}.scheme-btn{background:var(--btn-scheme);cursor:pointer;text-align:center;font-size:12px;transition:background .2s}.scheme-btn:hover{background:var(--btn-scheme-hover)}.scheme-btn:focus{outline-offset:1px;outline:2px solid #06c}.scheme-icon{stroke:#000;fill:var(--btn-scheme);transition:fill .2s;display:block}.scheme-icon:hover{fill:var(--btn-scheme-hover)}.color-preview-strip{flex-direction:column;flex:1;align-items:center;gap:7px;display:flex}.preview-color{text-align:center;width:100%;height:56px;font-size:12px;line-height:54px;transition:transform .2s}.preview-color:last-child{height:55px}.preview-color.empty-cell{cursor:default;pointer-events:none;opacity:.5;border-style:dashed;background-color:#0000!important}.preview-color.empty-cell.draggable{cursor:default}.preview-color:first-child{pointer-events:auto!important}.page-footer{text-align:center;margin-top:1rem;font-size:.85em}.page-footer-links{flex-direction:column;align-items:center;list-style:none;display:flex}.page-footer-links li{padding-bottom:.5rem}.copyright{color:var(--text-emphasis)}:root{--scrollbar-width:0px}.modal-overlay{background-color:var(--overlay-bg);z-index:1000;opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0;overflow-y:auto}.modal{color:var(--text-primary);background-color:var(--bg-primary);opacity:0;pointer-events:none;border-radius:8px;padding:18px 24px;transition:transform .4s cubic-bezier(.25,.8,.25,1),opacity .3s;display:none;position:absolute;left:50%;transform:translate(-50%)translateY(30px);box-shadow:0 4px 12px #0000004d}.quick-start-guide-modal{width:min(90%,1430px);max-width:1430px}.settings-modal{width:min(90%,1000px);max-width:1000px}.about-modal,.legacy-modal,.fallback-info-modal{width:min(90%,560px);max-width:560px}.modal.is-visible{opacity:1;pointer-events:auto}.modal.is-visible[data-position=centered]{transform:translate(-50%)translateY(0)}.modal.is-visible[data-position=large]{top:30px;transform:translate(-50%)translateY(0)}.modal-overlay.is-open{opacity:1;pointer-events:auto}.modal-open{padding-right:var(--scrollbar-width)}.modal-open-body{overflow:hidden}.modal-header{border-bottom:solid 1px var(--border-primary);justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:8px;display:flex}.modal-close-btn{cursor:pointer;color:var(--text-emphasis);background:0 0;border:none;font-size:24px;line-height:1;transition:color .2s}.modal-close-btn:hover{color:red}.modal-footer{text-align:right;border-top:solid 1px var(--border-primary);margin-top:15px;padding-top:10px}.modal p{margin-bottom:.5rem}.modal ul{margin-left:2rem}.modal li{margin-bottom:.375rem}.inline-block{padding-right:1rem;display:inline-block}.contrast-standards{padding:.5rem 1rem 1rem}.contrast-content{display:none}.contrast-option{background-color:var(--bg-secondary);transition:box-shadow .2s,border-color .2s}.contrast-option:has(input[type=radio]:checked){box-shadow:0 0 0 3px var(--accent-primary);border-color:var(--accent-primary)}.heading-radio{align-items:center;gap:1rem;margin-bottom:.5rem;display:flex}.heading-radio h4{margin:0;font-weight:600}.heading-radio input[type=radio]{accent-color:var(--accent-primary);margin:4px 0 0;transform:scale(1.2)}.apca-lc{font-family:var(--font-serif);font-style:italic}.section-row{align-items:center;display:block}.hex-color-percentage input[type=radio]{accent-color:var(--accent-primary);margin-top:4px;transform:scale(1.2)}input[type=radio]:disabled{opacity:.5;cursor:not-allowed}label:has(input:disabled){opacity:var(--opacity-disabled);cursor:not-allowed}.settings-input{margin-left:2rem}.hex-formatting{cursor:pointer;font-family:var(--font-mono);margin-right:1rem}.color-space,.opacity-format{cursor:pointer;margin-right:1rem}.hex-formatting:last-child,.color-space:last-child,.opacity-format:last-child{margin-right:0}.code{font-size:14px;font-family:var(--font-mono);background-color:var(--code-bg)}.guide-grid{grid-template-columns:1fr;gap:24px;padding-left:10px;padding-right:10px;display:grid}.guide-full-column>:first-child{margin-bottom:1.5rem}.guide-grid>.guide-item:nth-child(2),.guide-full-column>:nth-child(3),.guide-image-wrapper{display:none}.guide-image-wrapper picture{line-height:0;display:block}.center-image{max-width:475px;height:auto;display:block}.guide-item h3{grid-template-columns:1.5rem 1fr;gap:0;display:grid}.guide-item p,.guide-item ul{margin-left:1.5rem}.guide-item ul{padding-left:1.125em}.guide-drag-notice{padding:1rem;font-style:italic}ul.two-column{column-count:2;column-width:180px;gap:1.5rem;max-width:400px}.four-column{grid-template-columns:repeat(4,1fr);gap:0;font-size:small;display:grid;margin-left:2.75rem!important}.four-column li:nth-child(n+9){grid-column:span 2}.four-column li{margin-bottom:0}.mt-4{margin-top:1.5rem}.mb-0{margin-bottom:0}.text-center{text-align:center}.md-display{display:none}@media (min-width:360px){h1{margin-top:3rem}.field-select{width:232px}}@media (min-width:768px){.mode-toggle-switch{display:block}nav{border-left:1px solid var(--border-primary);border-bottom-left-radius:6px;justify-content:start;left:auto}.main-layout{grid-template-columns:1fr 1fr;align-items:stretch;gap:16px;display:grid}.color-panel{margin-bottom:0}h1{margin-top:2.5rem;font-size:1.5rem}.contrast-panel{grid-column:1/span 2;justify-self:center;width:387px}.contrast-standards{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.contrast-content{display:block}.hex-color-percentage{justify-content:space-between;display:flex}.md-display{display:inline}.md-hide{display:none}}@media (min-width:1024px){h1{margin-top:0}.field-select{width:256px}.lg-show{display:inline}.main-layout{grid-template-columns:repeat(3,300px)}.contrast-panel{grid-column:auto;justify-self:auto;width:auto}.contrast-results{width:112px}.guide-grid{grid-template-rows:repeat(3,auto);grid-template-columns:repeat(4,1fr);gap:24px;padding-left:10px;padding-right:10px;display:grid}.guide-item:first-child{grid-area:1/1}.guide-item:nth-child(3){grid-area:2/1/span 2}.guide-item:nth-child(4){grid-area:1/2/span 2}.guide-item:nth-child(5){grid-area:1/3}.guide-full-column{grid-area:1/4/span 3;display:block}.guide-drag-notice{grid-area:3/2/auto/span 2;padding:1rem 4rem 0}ul.two-column{column-width:auto;max-width:none}.four-column{grid-template-columns:repeat(2,1fr)}.section-row{align-items:center;gap:1rem;display:flex}.settings-input{margin-left:0;margin-right:0}.section-row h3{margin-bottom:0;padding-bottom:0}.page-footer-links{flex-direction:row;justify-content:center;gap:1em}}@media (min-width:1354px){.xl-show{display:inline}.container{justify-content:center;max-width:1354px}.contrast-results{width:139px}.main-layout{grid-template-rows:auto auto;grid-template-columns:170px 416px 416px 304px}.main-layout>:first-child{grid-area:1/2/span 2}.main-layout>:nth-child(2){grid-area:1/3/span 2}.main-layout>:nth-child(3){grid-area:1/4/span 2}.main-layout>:nth-child(4){grid-area:1/1}.main-layout>:nth-child(5){grid-area:2/1}.out-of-gamut-info{align-items:center;display:flex}.swatches-panel,.color-scheme-panel{display:block}.field-select{width:370px}.guide-grid{grid-template-rows:none;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content}.guide-item:first-child{grid-area:1/1}.guide-grid>.guide-item:nth-child(2){grid-area:2/1/span 3;display:block}.guide-item:nth-child(3){grid-area:1/2}.guide-item:nth-child(4){grid-area:4/2/auto/span 2;display:block}.guide-item:nth-child(5){grid-area:1/3;display:block}.guide-full-column{grid-area:1/4/span 4}.guide-full-column>:nth-child(3){display:block}.guide-full-column div{padding-bottom:24px}.guide-image-wrapper{grid-area:2/2/span 2/span 2;justify-content:center;align-items:start;display:flex}.center-image{max-width:100%}.guide-drag-notice{display:none}div.two-column{column-count:2;column-width:auto;gap:1.5rem;max-width:none}.four-column{grid-template-columns:repeat(4,1fr)}}@media (min-width:1392px){.tooltip-text{text-align:center;width:120px;left:50%;transform:translate(-50%)}.tooltip-text:after{margin-right:-5px;right:50%}}@media (min-width:1354px){.is-dragging{opacity:.5;cursor:grabbing!important}.drag-over{transition:all .2s;transform:scale(1.02);box-shadow:inset 0 0 0 3px #06c}.drop-target{animation:.3s dropPulse}@keyframes dropPulse{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 0 4px #0066cc80}to{transform:scale(1)}}.draggable{cursor:grab;-webkit-user-select:none;user-select:none}.draggable:active{cursor:grabbing}.drag-clone{pointer-events:none;z-index:1000;opacity:.8;border:2px solid #000;border-radius:4px;width:50px;height:50px;position:fixed;box-shadow:0 4px 8px #0000004d;transition:none!important}@media (hover:none) and (pointer:coarse){.draggable{touch-action:none}.drag-over{box-shadow:inset 0 0 0 4px #06c}}[data-dark-mode=true] .drag-clone{border-color:#fff}[data-dark-mode=true] .drag-over{box-shadow:inset 0 0 0 3px #59fff7}[data-dark-mode=true] .drop-target{animation:.3s dropPulseDark}@keyframes dropPulseDark{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 0 4px #59fff780}to{transform:scale(1)}}}@media (min-width:1354px) and (max-width:1370px) and (min-height:620px) and (max-height:696px){h1{padding:.5rem 0}.page-footer{margin:.5rem 0}.equivalent-color,.color-scheme-panel{display:none}.slider,.slider-track{height:18px}.slider::-webkit-slider-thumb{width:16px;height:16px}.slider::-moz-range-thumb{width:14px;height:14px}}