@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap";:root{--white: oklch(1 0 0);--black: oklch(0 0 0);--light-50: oklch(.95 0 0deg);--light-100: oklch(.9 0 0deg);--light-200: oklch(.8 0 0deg);--light-300: oklch(.7 0 0deg);--light-400: oklch(.6 0 0deg);--light-500: oklch(.5 0 0deg);--light-600: oklch(.4 0 0deg);--light-700: oklch(.3 0 0deg);--light-800: oklch(.2 0 0deg);--light-900: oklch(.1 0 0deg);--light-950: oklch(.05 0 0deg);--font-family-base: "Relik Grotesque", sans-serif;--font-family-heading: "Relik Grotesque", sans-serif;--font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--default-border: var(--black) 2px solid;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 1.75rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 2rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 5px 15px rgba(0, 0, 0, .1);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 1.875rem;--font-size-3xl: 2.25rem}body{position:relative;scroll-behavior:smooth}input{border:none;border-radius:var(--radius-md);padding:var(--space-2);background-color:var(--light-50);font-size:1rem}::-moz-selection{color:var(--example-950);background:var(--example-200)}::selection{color:var(--example-950);background:var(--example-200)}button{font-family:var(--font-family-base);font-size:1rem;line-height:1;border-radius:var(--radius-md);color:var(--white);border:none;padding:var(--space-3) var(--space-4);background-color:var(--light-700);cursor:pointer;transition:transform .1s ease-out}button:hover{transform:scale(1.025)}button.button-outline{background-color:var(--white);color:var(--example-900);border:2px solid var(--example-200);transition:background-color .1s ease-out,transform .1s ease-out}button.button-outline:hover{background-color:var(--example-200)}button.random{background:linear-gradient(to right,var(--example-200),var(--example-300));color:var(--example-50);animation:random-gradient 20s ease-in-out infinite}button.random:hover{animation-play-state:paused}@keyframes random-gradient{0%{background:var(--example-600)}17%{background:var(--example-700)}34%{background:var(--example-800)}50%{background:var(--example-950)}67%{background:var(--example-800)}84%{background:var(--example-700)}to{background:var(--example-600)}}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.visually-hidden{display:none}body{font-family:var(--font-family-base);line-height:1.5;font-weight:400;color:var(--light-900);font-feature-settings:"liga" 1,"ss06" 1}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);font-weight:500}h1{font-size:3em;line-height:.785;margin-bottom:var(--space-2);margin-top:0;font-weight:800;font-feature-settings:"case" 1,"ss06" 1,"liga" 1;font-variation-settings:"opsz" 96}h1.logo{cursor:default}h3{margin-top:0;margin-bottom:var(--space-1);font-size:1.25rem}a{font-weight:500;color:var(--primary-600);text-decoration:underline}a:hover{text-decoration:none}a:hover{color:var(--primary-800)}.small{margin-top:0;font-size:.85rem;color:var(--light-600)}.shade-name{font-weight:700}.hex-value,.color-value,.oklch-value{font-family:var(--font-family-base);font-feature-settings:"tnum" 1,"zero" 1}.hex-value{font-size:.75rem}.oklch-value{font-size:.75rem;color:var(--light-800);word-break:break-all;max-width:100%}.color-value{padding:var(--space-1) var(--space-2);background-color:#00000013;border-radius:var(--radius-sm)}.instructions{font-size:.85rem;margin-bottom:var(--space-6);color:var(--light-700)}body{margin:0;display:flex;flex-direction:column;place-items:center;min-width:320px;min-height:100vh;background-color:var(--white);color:var(--dark-900)}@media (min-width: 992px){body{flex-direction:row}}#app{width:100%;position:relative}@media (max-width: 768px){#app{padding:var(--space-4)}}.container{width:100%;margin:0 auto}.app-layout{display:flex;flex-direction:row}@media (max-width: 768px){.app-layout{flex-direction:column;gap:var(--space-4)}}.sidebar{flex:0 0 auto;padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:1rem;max-width:none;border-bottom:1px solid var(--light-300);container-type:inline-size}@media (min-width: 768px){.sidebar{flex:1 1 250px;border-right:1px solid var(--light-50)}}@media (min-width: 992px){.sidebar{flex:0 0 400px;position:sticky;max-height:100vh;overflow-y:auto;align-self:start;top:0;padding:var(--space-10)}}@media (min-width: 1200px){.sidebar{padding:var(--space-12)}}.main-content{flex:1 1 auto;padding:var(--space-6)}@media (min-width: 992px){.main-content{padding:var(--space-10)}}@media (min-width: 1200px){.main-content{padding:var(--space-12)}}.color-input-container{display:flex;flex-direction:column;gap:var(--space-6)}@container (min-width: 375px){.color-input-container{flex-direction:row;gap:var(--space-10)}}.color-section{flex:1 1 5rem}.shades-container{display:flex;flex-direction:column;gap:var(--space-3);width:100%;padding-bottom:var(--space-12)}@media (min-width: 768px){.shades-container{gap:var(--space-4)}}.css-variables-container{display:flex;flex-direction:row;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}@media (max-width: 768px){.css-variables-container{flex-direction:column;align-items:flex-start}}hr{width:100%;border:none;min-height:2px;border-radius:var(--radius-sm);background-color:var(--light-50);margin:var(--space-3) 0}.picker-container{display:flex;align-items:center;gap:var(--space-2)}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:3rem;height:3rem;background-color:transparent;border:none;cursor:pointer;padding:0}input.color-picker{width:4rem;height:2rem}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.color-text-input{width:100%;font-family:var(--font-family-base);font-feature-settings:"tnum" 1,"zero" 1}.picker-label{font-weight:500}.color-slider{width:100%;height:2px;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--light-100);border-radius:var(--radius-sm);outline:none}.color-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--white);cursor:pointer;border:none;background-color:var(--example-500);box-shadow:var(--shadow-sm)}.color-slider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--white);cursor:pointer;border:none;background-color:var(--example-500);box-shadow:var(--shadow-sm)}.checkbox-container{display:flex;align-items:center;margin-top:var(--space-4);background-color:var(--example-50);padding:var(--space-2);border-radius:var(--radius-lg);transition:background-color .1s ease-out;cursor:pointer}.checkbox-container input[type=checkbox].use-secondary-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.5rem;height:1.5rem;border-radius:var(--radius-lg);margin-right:var(--space-2);cursor:pointer;background-color:var(--white);border:1px solid #ccc;position:relative;vertical-align:middle}.checkbox-container input[type=checkbox].use-secondary-checkbox:checked{background-color:var(--example-700);border-color:var(--example-700)}.checkbox-container input[type=checkbox].use-secondary-checkbox:checked:after{content:"";position:absolute;left:.425rem;top:.15rem;width:.45rem;height:.9rem;border:solid var(--white);border-width:0 3px 3px 0;transform:rotate(45deg);box-sizing:border-box}.checkbox-container label{cursor:pointer}.checkbox-container:hover{background-color:var(--example-100)}.prefix-container{display:flex;align-items:center;gap:var(--space-4)}.prefix-container .prefix-label{flex:0 1 2rem;text-wrap:nowrap}.prefix-container input{flex:1 1 1rem;width:100%}.prefix-container input{font-family:var(--font-family-base);font-feature-settings:"tnum" 1,"zero" 1}.section-disabled{opacity:.5;cursor:not-allowed!important}.picker-hex-container{display:flex;flex-direction:row;gap:var(--space-2)}.sliders-section{margin-top:var(--space-4);border-radius:var(--radius-md);container-type:inline-size}.sliders-container{display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between}@container (min-width: 375px){.sliders-container{flex-direction:row}}.slider-label{display:flex;justify-content:space-between;margin-bottom:var(--space-1);font-size:.875rem}.slider-value{font-feature-settings:"tnum" 1,"zero" 1;opacity:.8}.base-color-info{margin-bottom:var(--space-6);display:flex;flex-direction:row;gap:var(--space-4);padding:var(--space-4);background-color:var(--light-100);border-radius:var(--radius-lg);text-align:left;line-height:1.6}.base-color-info-item{width:50%}.css-variables-container{margin:var(--space-6) 0;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background-color:var(--light-50);border-radius:var(--radius-lg);flex-wrap:wrap}.color-divider{margin:var(--space-4) 0;border:none;border-top:1px solid var(--light-300)}.shade-card{position:relative;border-radius:var(--radius-xl);background-color:var(--light-50);display:flex;flex-direction:row;container-type:inline-size}.color-swatch{width:5rem;cursor:pointer;transition:transform .2s;border-radius:var(--radius-xl)}.color-swatch:hover{transform:scale(1.05)}.color-info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);flex:1 1 auto}@media (min-width: 768px){.color-info{flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:var(--space-4);width:auto}}.hex-value,.oklch-value{cursor:pointer;transition:background-color .1s ease-out;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.hex-value:hover,.oklch-value:hover{background-color:var(--light-200)}@keyframes fadeOut{0%{opacity:1}70%{opacity:1}to{opacity:0}}.matched-shade{border:2px solid var(--light-50);box-shadow:0 0 8px #ffffff80;transform:scale(1.05);z-index:1}.anchor-shade{outline:1px dashed var(--light-500);box-shadow:var(--shadow-lg);z-index:1}.contrast-info{display:flex;gap:var(--space-3);flex-direction:column}@media (min-width: 768px){.contrast-info{flex-direction:row;align-items:stretch;flex-wrap:wrap;flex:2 1 8rem;width:auto}}.contrast-section{gap:var(--space-1);display:flex;flex-direction:row;width:100%}@media (min-width: 768px){.contrast-section{width:auto}}.contrast-header{min-width:2rem;padding:0 var(--space-2);display:flex;align-items:center;position:relative}@media (min-width: 768px){.contrast-header{justify-content:center;padding:0}}.contrast-label{font-size:.75rem;font-weight:700;color:var(--light-700);cursor:default}.contrast-description{font-size:.75rem;color:var(--light-600)}.contrast-chip-row{display:flex;flex-direction:row;gap:var(--space-1);flex-wrap:wrap}.contrast-chip{position:relative;border-radius:var(--radius-lg);cursor:default;display:flex;padding:var(--space-1) var(--space-2);align-items:center;justify-content:center}.contrast-chip-empty{cursor:default}.contrast-chip-label{font-size:.75rem;font-weight:500}.contrast-tooltip,.contrast-label-tooltip{position:absolute;bottom:110%;left:50%;transform:translate(-50%);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:.75rem;box-shadow:var(--shadow-md);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;z-index:10}.contrast-tooltip{background:var(--example-800);color:var(--example-50)}.contrast-label-tooltip{background:var(--example-50);color:var(--example-800)}.contrast-chip:hover .contrast-tooltip{opacity:1}.shade-name,.color-info{padding:var(--space-3)}@container (min-width: 400px){.shade-name,.color-info{padding:var(--space-3) var(--space-4)}}.shade-name{flex:1 1 1rem}.color-info{flex:1 1 55rem}.shade-info{display:flex;flex-direction:row;align-items:center;width:100%}@media (min-width: 768px){.shade-info{flex:1 1 5rem;width:auto;flex-direction:column;align-items:flex-start}}.matched-shade-info{font-size:.875rem;color:var(--light-700);margin-top:var(--space-1)}.contrast-header:hover .contrast-label-tooltip{opacity:1;visibility:visible;transition-delay:0s,0s}@font-face{font-family:Relik Grotesque;src:url(/assets/RelikGrotesqueVF-DIL3r0P5.woff2) format("woff2"),url(/assets/RelikGrotesqueVF-4oh0xnzv.woff) format("woff");font-weight:200 800;font-optical-sizing:auto;font-display:swap}.example-blocks-header{padding-top:var(--space-8);margin-bottom:var(--space-8);border-top:2px solid var(--example-100);width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.example-blocks-header h2{font-weight:600;font-size:var(--font-size-3xl);color:var(--example-600);margin-top:0;margin-bottom:0;line-height:1}#example-blocks-container{position:relative;width:100%;transition:opacity .3s ease-in-out}#example-blocks-container.fading-out{opacity:0}#example-blocks-container h2{margin-top:0}.example-block{position:absolute;transition:background-color .3s ease,color .3s ease;box-sizing:border-box;display:flex;flex-direction:column;cursor:crosshair}.example-block img{max-width:100%;cursor:default}.example-block p{margin-top:0}.example-block p:last-of-type{margin-bottom:0}.example-block h2,.example-block h3,.example-block h4{color:var(--example-600);margin-top:0;margin-bottom:var(--space-2);line-height:1.1}.example-block h2.uppercase,.example-block h3.uppercase,.example-block h4.uppercase{text-transform:uppercase;line-height:.9}.example-block h3{font-weight:700;font-size:var(--font-size-2xl)}.example-block h4{font-weight:400;font-size:var(--font-size-xl)}.example-block.rounded-xl{border-radius:var(--radius-xl);overflow:hidden}.example-block .content{padding:var(--space-7) var(--space-7);display:flex;flex-direction:column;align-items:start}.example-block .content img{margin-bottom:var(--space-7);border-radius:var(--radius-md)}.example-block-50{background-color:var(--example-50);color:var(--example-800)}.example-block-50.border{border:2px solid var(--example-200)}.example-block-100{background-color:var(--example-100);color:var(--example-900)}.example-block-100.border{border:2px solid var(--example-300)}.example-block-200{background-color:var(--example-200);color:var(--example-900)}.example-block-200.border{border:2px solid var(--example-300)}.example-block-300{background-color:var(--example-300);color:var(--example-900)}.example-block-300 h2,.example-block-300 h3,.example-block-300 h4{color:var(--example-900)}.example-block-300.border{border:2px solid var(--example-500)}.example-block-400{background-color:var(--example-400);color:var(--example-900)}.example-block-400.border{border:2px solid var(--example-500)}.example-block-500{background-color:var(--example-500);color:var(--example-950)}.example-block-500.border{border:2px solid var(--example-500)}.example-block-600{background-color:var(--example-600);color:var(--example-50)}.example-block-600.border{border:2px solid var(--example-400)}.example-block-700{background-color:var(--example-700);color:var(--example-50)}.example-block-700.border{border:2px solid var(--example-500)}.example-block-800{background-color:var(--example-800);color:var(--example-50)}.example-block-800.border{border:2px solid var(--example-600)}.example-block-900{background-color:var(--example-900);color:var(--example-50)}.example-block-900.border{border:2px solid var(--example-700)}.example-block-950{background-color:var(--example-950);color:var(--example-50)}.example-block-950.border{border:2px solid var(--example-600)}.example-block-300 h2,.example-block-300 h3,.example-block-300 h4,.example-block-400 h2,.example-block-400 h3,.example-block-400 h4{color:var(--example-800)}.example-block-500 h2,.example-block-500 h3,.example-block-500 h4,.example-block-600 h2,.example-block-600 h3,.example-block-600 h4,.example-block-700 h2,.example-block-700 h3,.example-block-700 h4,.example-block-800 h2,.example-block-800 h3,.example-block-800 h4,.example-block-900 h2,.example-block-900 h3,.example-block-900 h4,.example-block-950 h2,.example-block-950 h3,.example-block-950 h4{color:var(--example-100)}.example-button{padding:var(--space-3) var(--space-4);cursor:pointer;transition:background-color .1s ease-out,color .1s ease-out,border-color .1s ease-out;cursor:crosshair;font-weight:500;border-radius:var(--radius-md)}.example-button.example-button-100{background-color:var(--example-100);color:var(--example-900)}.example-button.example-button-100:hover{background-color:var(--example-200)}.example-button.example-button-100.outline{background-color:transparent;color:var(--example-700);border:2px solid var(--example-700)}.example-button.example-button-100.outline:hover{background-color:var(--example-700);color:var(--example-50);border:2px solid var(--example-700)}.example-button.example-button-900{background-color:var(--example-900);color:var(--example-100)}.example-button.example-button-900:hover{background-color:var(--example-800)}.example-button.example-button-900.outline{background-color:transparent;color:var(--example-100);border:2px solid var(--example-100)}.example-button.example-button-900.outline:hover{background-color:var(--example-100);color:var(--example-900);border:2px solid var(--example-100)}.example-button.example-button-200{background-color:var(--example-200);color:var(--example-900)}.example-button.example-button-200:hover{background-color:var(--example-300)}.example-button.example-button-300{background-color:var(--example-300);color:var(--example-900)}.example-button.example-button-300:hover{background-color:var(--example-400)}.example-button.example-button-400{background-color:var(--example-400);color:var(--example-900)}.example-button.example-button-400:hover{background-color:var(--example-500)}.example-button.example-button-500{background-color:var(--example-500);color:var(--example-100)}.example-button.example-button-500:hover{background-color:var(--example-400)}.example-button.example-button-600{background-color:var(--example-600);color:var(--example-100)}.example-button.example-button-600:hover{background-color:var(--example-500)}.example-button.example-button-700{background-color:var(--example-700);color:var(--example-100)}.example-button.example-button-700:hover{background-color:var(--example-600)}.example-buttons-wrapper{display:flex;gap:var(--space-3);margin-top:var(--space-5)}.cursor-tooltip{position:fixed;display:none;align-items:center;gap:var(--space-2);border-radius:var(--radius-2xl);background-color:var(--example-800);color:var(--tooltip-text, #fff);padding:var(--space-2) var(--space-2);font-size:var(--font-size-xs);z-index:1000;pointer-events:none;box-shadow:0 2px 5px #0003;white-space:nowrap}.tooltip-swatch{width:1em;height:1em;border-radius:var(--radius-xl);border:1px solid var(--tooltip-swatch-border, #fff)}.tooltip-text{line-height:1}#fixed-palette{position:fixed;bottom:0;right:2rem;z-index:1000;background-color:var(--white);box-shadow:var(--shadow-lg);display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--space-2);border-radius:var(--radius-lg) var(--radius-lg) 0 0;gap:0}#fixed-palette .swatch{width:1rem;height:1rem;cursor:pointer;transition:transform .1s ease-out,border-radius .1s ease-out;border-radius:0}#fixed-palette .swatch:hover{transform:scale(1.5);border-radius:var(--radius-sm)!important}#fixed-palette .swatch.swatch-50{background-color:var(--example-50);border-radius:var(--radius-lg) 0 0 var(--radius-lg)}#fixed-palette .swatch.swatch-100{background-color:var(--example-100)}#fixed-palette .swatch.swatch-200{background-color:var(--example-200)}#fixed-palette .swatch.swatch-300{background-color:var(--example-300)}#fixed-palette .swatch.swatch-400{background-color:var(--example-400)}#fixed-palette .swatch.swatch-500{background-color:var(--example-500)}#fixed-palette .swatch.swatch-600{background-color:var(--example-600)}#fixed-palette .swatch.swatch-700{background-color:var(--example-700)}#fixed-palette .swatch.swatch-800{background-color:var(--example-800)}#fixed-palette .swatch.swatch-900{background-color:var(--example-900)}#fixed-palette .swatch.swatch-950{background-color:var(--example-950);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.universal-toast-notification{position:fixed;bottom:var(--space-4, 16px);left:var(--space-4, 16px);background-color:var(--example-800);color:var(--white);padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-size:var(--font-size-sm);z-index:2000;text-align:center;opacity:1;transition:opacity .1s ease-out}.universal-toast-notification.fade-out{opacity:0}