:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--white:#fff;--black:#292f2f;--bg:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--black));--text:var(--lightningcss-light,var(--black))var(--lightningcss-dark,var(--white));--line:color-mix(in lab,currentColor 20%,var(--bg));--dotSize:.75rem;background-color:var(--bg);color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Iosevka Web,system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;font-weight:300;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}::selection{background:var(--text);color:var(--bg)}*{box-sizing:border-box}body{margin:0;font-size:1.2rem}.app{place-items:center;height:max(100vh,50rem);display:grid;position:relative}.demo{width:min(70rem,90vw);padding-top:5rem;position:relative}.demo:before{content:"";background:linear-gradient(90deg,var(--grad));filter:blur(80px);will-change:transform;position:absolute;inset:0;transform:translateY(15%)translateZ(0)}.demo:after{content:"";background:linear-gradient(90deg,var(--grad-stops));z-index:1;position:absolute;inset:-1rem}.demo .bg{z-index:3;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/var(--length) - 1px),var(--bg)calc(100%/var(--length) - 1px),var(--bg)calc(100%/var(--length)));display:none;position:absolute;inset:-1rem;-webkit-mask-image:linear-gradient(#0000,#000 20% calc(100% - 1.5rem),#0000);mask-image:linear-gradient(#0000,#000 20% calc(100% - 1.5rem),#0000)}@media (orientation:portrait){#app{max-width:100%;margin-top:15vh;margin-bottom:15vh}.demo{width:min(90vw,25rem);padding-top:0;padding-right:0}.demo:before{background:linear-gradient(180deg,var(--grad));transform:translateY(0%)}.demo:after{background:linear-gradient(180deg,var(--grad-stops))}.demo .bg{background:repeating-linear-gradient(180deg,transparent 0,transparent calc(100%/var(--length) - 1px),var(--bg)calc(100%/var(--length) - 1px),var(--bg)calc(100%/var(--length)));-webkit-mask-image:linear-gradient(90deg,#0000,#000 1.5rem 80%,#0000);mask-image:linear-gradient(90deg,#0000,#000 1.5rem 80%,#0000)}}.demo__title{letter-spacing:-.05em;margin:0;font-size:2rem}.demo__subtitle{margin:0}.demo__controls{background:var(--bg);z-index:5;align-items:stretch;gap:2rem;padding:1.5rem 2rem 2rem;display:flex;position:relative}.demo__controls>div{flex:1}@media (orientation:portrait){.demo__controls{flex-direction:column}}.control{flex-direction:column;gap:.2rem;display:flex}.control--combined{flex-direction:column;gap:.2rem;min-height:100%;display:flex}.control--base-color{flex-direction:row;align-items:end;gap:.25rem;display:flex}.control--base-color .control{flex:1}.control--base-color .button{flex-shrink:0}.control__label{pointer-events:none;justify-content:space-between;align-items:center;max-width:100%;font-size:.9rem;display:flex}.control__label-text{text-overflow:ellipsis;white-space:nowrap;flex:1 0 auto;overflow:hidden}.control__label-text--below{margin-top:-.05rem}.control__label-value{flex-shrink:0;font-size:.8em;font-weight:700}.control__icon{vertical-align:middle}.palette-type-tabs{background:var(--bg);border:2px solid;display:flex}.palette-type-tabs input[type=radio]{display:none}.palette-type-tab{cursor:pointer;flex-direction:column;flex:1;align-items:center;gap:.25rem;padding:.7rem;transition:opacity .2s;display:flex;position:relative}.palette-type-tab:after{content:"";aspect-ratio:1;pointer-events:none;opacity:0;border:1px solid;border-radius:50%;height:1.1rem;transition:opacity .1s linear,transform .2s cubic-bezier(.3,.7,0,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.3)}.palette-type-tab+.palette-type-tab{border-left:1px solid var(--line)}.palette-type-tab:has(input[type=radio]:checked):after{opacity:1;transform:translate(-50%,-50%)scale(1)}.palette-type-icon{aspect-ratio:1;border:1px solid color-mix(in lab,currentColor 30%,var(--bg));border-radius:50%;height:.75rem;display:block;position:relative;container-type:inline-size}.palette-type-icon:before{content:"";border-radius:50%;position:absolute;inset:0}.palette-type-icon i{width:2px;height:2px;transform:translate(-50%,-50%)rotate(var(--angle))translateY(-50cqi)translateY(-50%);transform-origin:50%;background:currentColor;border-radius:50%;position:absolute;top:50%;left:50%}.palette-type-name{text-align:center;font-size:.7rem;display:none}.style-tabs{background:var(--bg);border:2px solid #0000;margin-bottom:calc(-2.68rem - 2px);margin-left:-.41rem;margin-right:-.4rem;display:flex}.style-tabs input[type=radio]{opacity:0;pointer-events:none;position:absolute}.style-tab{cursor:pointer;--offsetIcons:.5rem;flex-direction:column;flex:1;align-items:center;gap:.25rem;padding:.4rem .7rem 1.5rem;display:flex;position:relative}.style-tab:first-child{padding-left:0}.style-tab:last-child{padding-right:0}.style-tab+.style-tab{border-left:1px solid var(--line);border-left:1px solid #0000}.style-icon{aspect-ratio:1;opacity:.4;height:.75rem;transform:translateY(var(--offsetIcons))scale(.9);justify-content:center;align-items:center;transition:opacity .2s,transform .3s cubic-bezier(.3,.7,0,1);display:flex;position:relative}.style-tab:has(input[type=radio]:checked) .style-icon{opacity:1;transform:scale(1)}.style-tab:hover .style-icon{opacity:.7}.style-icon--square{border:1px solid}.style-icon--triangle svg{opacity:.9;width:150%;height:150%;transition:transform .1s;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(0)}.style-tab:has(input[type=radio]:checked) .style-icon--triangle svg{transform:translate(-50%,-50%)rotate(180deg)translateY(-13%)scale(1.2)}.style-icon--circle{border:1px solid;border-radius:50%}.style-icon--diamond{transform:translateY(var(--offsetIcons))rotate(45deg)scale(.85);opacity:.4;border:1px solid}.style-icon--square{transform:translateY(var(--offsetIcons))rotate(90deg)}.style-name{text-align:center;font-size:.7rem;display:none}.control--grid{grid-column:span 1}.grid-control{aspect-ratio:1;background-color:var(--bg);background-image:repeating-linear-gradient(0deg,var(--line)0,var(--line)1px,transparent 1px,transparent calc(100%/16)),repeating-linear-gradient(90deg,var(--line)0,var(--line)1px,transparent 1px,transparent calc(100%/16));cursor:crosshair;-webkit-user-select:none;user-select:none;background-size:calc(100% + 1px);width:100%;position:relative;box-shadow:inset 0 0 0 2px}.grid-control:before{pointer-events:none;content:"";width:calc(2*var(--distance));height:calc(2*var(--distance));pointer-events:none;--inset:clamp(0%,calc(var(--distance) - 50%),29%);clip-path:inset(var(--inset)var(--inset)var(--inset)var(--inset));border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px}.grid-control.transition:before{transition:width .4s cubic-bezier(.3,.7,0,1),height .4s cubic-bezier(.3,.7,0,1),clip-path .4s cubic-bezier(.3,.7,0,1)}.grid-control__dot{width:var(--dotSize);height:var(--dotSize);pointer-events:none;background:var(--bg);left:calc(50% + var(--distance)*cos(var(--angle)));top:calc(50% + var(--distance)*sin(var(--angle)));box-shadow:0 0 0 1px currentColor,0 0 0 .25rem var(--bg);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.grid-control:after{content:"";left:calc(50% + var(--distance)*cos(var(--angle)));top:calc(50% + var(--distance)*sin(var(--angle)));width:calc(var(--dotSize)*.5);height:calc(var(--dotSize)*.5);background:var(--cc01);box-shadow:0 0 0 1px currentColor,0 0 0 2px var(--bg);pointer-events:none;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.transition .grid-control__dot,.grid-control.transition:after{transition:top .4s cubic-bezier(.3,.7,0,1),left .4s cubic-bezier(.3,.7,0,1)}.grid-control__indicator{width:var(--distance);transform-origin:0;height:0;transform:rotate(var(--angle));pointer-events:none;border-top:1px dashed;font-style:normal;position:absolute;top:50%;left:50%}.transition .grid-control__indicator{transition:transform .4s cubic-bezier(.3,.7,0,1)}.grid-control__center{content:"";width:var(--dotSize);height:var(--dotSize);background:var(--bg);box-shadow:0 0 0 1px currentColor,0 0 0 2px var(--bg);pointer-events:none;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.control__input{font:inherit;background:var(--bg);color:inherit;border:2px solid;outline:none;font-size:.9rem}.control__input--color{cursor:pointer;width:100%;height:2.5rem;padding:0 2px}.range-wrapper{width:100%;height:1.25rem;position:relative}.range-wrapper--style{height:1.4rem}.range-wrapper--style .range-marker{box-shadow:0 0 0 1px currentColor,0 0 0 1.5px var(--bg);top:14.5px}.control__label--style{margin-top:.5rem}.control:has(>.range-wrapper--harmony){margin-bottom:calc(-.2rem - 2px);margin-left:8.5%;margin-right:8.5%}.control:has(>.range-wrapper--style){margin-top:calc(-.2rem - 2px);margin-left:8.5%;margin-right:8.5%}.control__input[type=range]{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute}.range-marker{left:calc(1px + var(--progress,0)*(100% - 2px));width:calc(var(--dotSize)*.35);height:calc(var(--dotSize)*.35);background:var(--bg);pointer-events:none;box-shadow:0 0 0 1px currentColor,0 0 0 .25rem var(--bg);border-radius:50%;position:absolute;top:14px;transform:translate(-50%,-50%)}.range-marker:after{content:"";pointer-events:none;background:currentColor;width:1px;height:10px;position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%)}.range-wrapper:has(.transition) .range-marker{transition:left .4s cubic-bezier(.3,.7,0,1)}.control--flip{transform:scaleY(-1)}.control--small{position:relative}.control--small:before{content:"";pointer-events:none;background:currentColor;width:100%;height:2px;position:absolute;top:0;left:0}.control--small:after{content:"";--count:var(--graduations,4);background-image:linear-gradient(90deg,currentColor 1px,#0000 1px);background-size:calc((100% - 1px)/(var(--count) - 1))8px;pointer-events:none;background-repeat:repeat-x;width:100%;height:10px;position:absolute;top:0;left:0}.control--small .range-wrapper:before{content:"";--count:var(--graduations,4);background-image:linear-gradient(to right,transparent,transparent calc(100% - .5px),var(--line)calc(100% - .5px));background-size:calc((100% - .5px)/((var(--count) - 1)*6))100%;pointer-events:none;width:100%;height:4px;position:absolute;top:2px;left:0}.button{font:inherit;background:var(--bg);color:inherit;border:2px solid;align-items:center;gap:.35rem;padding:.46rem .9rem;font-size:.85rem;transition:transform .15s,box-shadow .15s linear;display:inline-flex;box-shadow:0 0}.button:hover{transform:translateY(-2px);box-shadow:0 2px}.button:active{transform:translateY(0)}.button--last,.control--palette-type{margin-top:1.5rem}.button--last{margin-top:2.1rem}.demo__actions{gap:.5rem;margin-top:1rem;display:flex}.palette{border:2px solid;gap:0;display:flex;overflow:hidden}.demo__palettes{display:none}.palette-title{z-index:2;letter-spacing:-.03em;margin-bottom:1rem;font-size:1.75rem;font-weight:200;position:absolute;top:-6rem;left:1.7rem}.about{max-width:40rem;margin:5vmin auto;font-size:.9rem;line-height:1.6}.about h1,.about h2{letter-spacing:-.03em;font-weight:200}.about h2{margin-top:2em;margin-bottom:0}.about h2+p,.about h2+figure{margin-top:.75em}.about figure{margin:0}.about__header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.5rem;display:flex}.about__header h1{margin:0;line-height:1}.about a[href^=http]:not(:has(img)):after{content:" ↗";vertical-align:top;transform:translate(var(--translateAmount,2px),calc(var(--translateAmount,2px)*-1));font-size:.75em;transition:transform .2s cubic-bezier(.3,.7,0,1);display:inline-block}.about a:hover{--translateAmount:5px}a{color:inherit;text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}@media (orientation:portrait){.about{max-width:min(22rem,80vw)}}.code{background:var(--text);border:1px solid var(--line);color:var(--bg);margin-top:.5rem;padding:1rem;font-size:.8rem;line-height:1.4;display:block;overflow-x:auto}.code ::selection{background:var(--bg);color:var(--text)}pre,code{font:inherit;font-size:.75rem}.kofi{width:2.5em;height:2.5em;margin-top:-.2em;margin-left:-.4em;margin-right:1em;display:block}.kofi:hover img{animation:.5s shakeup}.kofi img{transform-origin:50%;width:100%}@keyframes shakeup{0%,to{transform:translateY(0)rotate(0)}10%,30%,50%,70%,90%{transform:translateY(-10px)rotate(-6deg)}20%,40%,60%,80%{transform:translateY(-8px)rotate(10deg)}}.swatches{z-index:10;perspective:600px;pointer-events:none;gap:0;width:80vw;height:80vh;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}