:root{color-scheme:light dark;font-family:Iosevka Web,ui-monospace,SF Mono,Menlo,monospace;line-height:1.5;font-weight:300;--white: #fff;--black: #292f2f;--bg: light-dark(var(--white), var(--black));--text: light-dark(var(--black), var(--white));--line: color-mix(in lab, currentColor 20%, var(--bg));--dotSize: .75rem;--stops: transparent 0% 100%;--s-line: 1px;--s-square: 2rem;interpolate-size:allow-keywords;background-color:var(--bg);color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility;scrollbar-color:var(--text) var(--bg);scrollbar-width:thin;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:var(--text);color:var(--bg)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font-size:1rem;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}:focus-visible{outline:2px solid currentColor;outline-offset:2px}.l-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem .5rem;overflow-x:clip}.l-main{position:relative;width:min(92vw,74vmin,42rem);transition:transform .5s cubic-bezier(.3,.7,0,1);background-color:color-mix(in lab,currentColor 45%,var(--bg));background-image:radial-gradient(circle at 50% 50%,transparent 0% 35%,var(--bg) 35% 100%);background-repeat:repeat;background-size:3px 3px}.l-app__header{position:relative;z-index:2;background:linear-gradient(var(--bg),var(--bg)) top / 100% calc(100% - var(--s-line)) no-repeat;margin-bottom:calc(var(--s-line) * -1)}.menu{display:flex;align-items:stretch;min-height:var(--s-square)}.menu>*+*{margin-left:calc(var(--s-line) * -1)}.menu .button{height:var(--s-square);padding-block:0}.menu__spacer{flex:1;margin-left:0;pointer-events:none}.menu__brand{display:flex;align-items:center;padding:0 0 0 .9rem;font-size:1rem;white-space:nowrap}.button{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.7rem;padding:.45rem .9rem;border:var(--s-line) solid currentColor;background:var(--bg);color:inherit;cursor:pointer;position:relative;transition:transform .15s ease,box-shadow .15s linear}.button:hover{z-index:1;transform:translateY(-2px);box-shadow:0 2px 0 0 currentColor}.button:active{transform:translateY(0);box-shadow:0 0 0 0 currentColor}.button.button--icon{width:var(--s-square);height:var(--s-square);flex:0 0 auto;padding:0;gap:0;align-items:center;overflow-x:clip;transition:width .3s cubic-bezier(.3,.7,0,1),transform .15s cubic-bezier(.3,.7,0,1),box-shadow .15s linear}.button__icon{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-inline:calc((var(--s-square) - 2 * var(--s-line) - 1.05rem) / 2);pointer-events:none}.button--icon span{overflow:hidden;white-space:nowrap;opacity:0;transform:translate(2rem);margin-left:0;margin-right:.6rem;transition:opacity .1s linear,transform .2s cubic-bezier(.3,.7,0,1)}.button--icon:hover{width:max-content;width:calc-size(max-content,size)}.button--icon:hover span{opacity:1;transform:translate(0);transition:opacity .4s ease,transform .2s cubic-bezier(.3,.7,0,1);transition-delay:.08s,.1s}.button--end{flex-direction:row-reverse}.button--end span{transform:translate(-2rem);margin-right:0;margin-left:.6rem}.button--end:hover span{transform:translate(0)}.button--label{cursor:default}.button--label:hover{transform:none;box-shadow:none}.seg{display:flex}.seg .seg__btn+.seg__btn{margin-left:calc(var(--s-line) * -1)}.seg__btn--active{z-index:1;transform:translateY(-2px);box-shadow:0 2px 0 0 var(--text)}.button--square{width:var(--s-square);padding:0;justify-content:center}.drawer-toggle{position:absolute;z-index:2;bottom:0;left:calc(var(--s-square) * -1 + var(--s-line))}.seg .seg__btn.button--icon:hover{width:var(--s-square)}.seg .seg__btn--active.button--icon,.seg .seg__btn--active.button--icon:hover{width:max-content;width:calc-size(max-content,size)}.seg .seg__btn--active.button--icon span{opacity:1;transform:translate(0)}#shapeCountWrap{height:var(--s-square);padding:0 .6rem;gap:.5rem}.button--count{width:8rem;justify-content:space-between}.button--count:focus-within .numberslider{width:var(--width-expanded);border:var(--s-line) solid var(--text)}.button--count:focus-within .numberslider:after{transform:translate(0) scaleX(var(--relval))}.button--count:focus-within .numberslider__button:first-child,.button--count:focus-within .numberslider__button:last-child{transform:translate(0)}.numberslider{--width-expanded: 5rem;display:flex;align-items:stretch;border:var(--s-line) solid var(--bg);background:var(--bg);font-size:.6rem;border-radius:1rem;position:relative;overflow:hidden;width:3rem;transition:width .2s ease-in-out,border .1s linear,transform .2s cubic-bezier(.3,.7,0,1);height:.9rem}.numberslider:after{content:"";position:absolute;inset:0;background:light-dark(var(--bg),var(--text));pointer-events:none;transform:translate(-5rem) scaleX(0);transform-origin:0 0;mix-blend-mode:difference;transition:transform .2s ease;z-index:2}.numberslider__button{flex:1 1 auto;padding:0 .5rem;border:0;background:none;color:inherit;font:inherit;cursor:pointer;font-weight:900;transition:transform .2s ease}.numberslider__button:first-child{transform:translate(-100%);text-align:left}.numberslider__button:last-child{transform:translate(100%);text-align:right}.numberslider__input{z-index:1;position:absolute;width:2.5rem;text-align:center;padding:0 .25rem;border:none;outline:none;background:transparent;color:inherit;font:inherit;font-size:.6rem;-moz-appearance:textfield;left:50%;top:50%;transform:translate(-50%) translateY(-50%)}.numberslider__input::-webkit-inner-spin-button,.numberslider__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.l-body{position:relative;z-index:1;aspect-ratio:1;padding:var(--s-square);background:var(--bg);box-shadow:inset 0 0 0 var(--s-line) var(--text);display:flex;align-items:center;justify-content:center}.hints{margin:0;flex:1;min-width:16rem;font-size:.65rem;color:color-mix(in lab,currentColor 55%,var(--bg));text-align:center}.footer__links{flex-basis:100%;min-width:0}.ellogo{display:inline-block;width:2.5rem;vertical-align:middle}.ellogo:hover{color:var(--text)}.ellogo svg{display:block;width:100%;height:auto}.footer__links a{color:inherit}.footer__links a:hover{color:var(--text)}.l-stage{position:relative}.l-overlay{position:absolute;z-index:0;cursor:pointer;top:0;bottom:calc(var(--s-square) - var(--s-line));left:calc(var(--s-square) * -1 + var(--s-line));width:min(78%,24rem);border:var(--s-line) solid var(--text);background:var(--bg);transition:transform .3s cubic-bezier(.3,.7,0,1),opacity .15s linear}body.colors-open .l-overlay--left{transform:translate(calc(-100% + var(--s-square) + var(--s-line)));cursor:default}.menu--overlay{position:absolute;top:calc(var(--s-square) * -1 + var(--s-line));left:var(--s-line);z-index:0;height:var(--s-square);display:flex;transition:transform .2s cubic-bezier(.3,.7,0,1)}.menu--overlay>.button+.button{margin-left:calc(var(--s-line) * -1)}body.colors-open .menu--overlay{transform:translate(-100%);transition-delay:.1s}.button--title{margin:0;padding-inline:1.5rem;font-size:.75rem;font-weight:400;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;pointer-events:none}.button--title>span{display:block;min-height:1.55em;opacity:0;transition:opacity .2s linear}body.colors-open .button--title>span{opacity:1;transition-delay:.3s}.button--close{transform:translate(calc(var(--s-square) * 2));transition:transform .2s cubic-bezier(.3,.7,0,1)}body.colors-open .button--close{transform:translate(0)}body.colors-open .l-overlay--left .palette__swatch{cursor:pointer}body.colors-open .l-main{transform:translate(calc(22% + var(--s-square)))}.l-overlay__body{position:absolute;inset:0;overflow-y:auto;overflow-x:clip;padding-bottom:var(--s-square)}.l-overlay__footer{position:absolute;bottom:calc(var(--s-line) * -1);left:calc(var(--s-line) * -1);right:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .15s linear .15s}body.colors-open .l-overlay__footer{opacity:1;pointer-events:auto}.menu--export{justify-content:flex-end}.l-overlay--right{left:auto;right:calc(var(--s-square) * -1 + var(--s-line))}body.controls-open .l-overlay--right{transform:translate(calc(100% - var(--s-square) - var(--s-line)));cursor:default}body.controls-open .l-main{transform:translate(calc(-22% - var(--s-square)))}body.colors-open.controls-open .l-main{transform:translate(0)}.control-rail{position:absolute;top:0;bottom:0;right:0;width:var(--s-square);z-index:1;border-left:var(--s-line) solid var(--line);display:flex;flex-direction:column;background:var(--bg)}.control-rail__light{width:100%;aspect-ratio:1;border:0;border-bottom:var(--s-line) solid var(--line);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.control-rail__play{margin-top:auto;width:100%;aspect-ratio:1;border:0;border-top:var(--s-line) solid var(--line);padding:0;background:none;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s linear .15s}body.controls-open .control-rail__play{opacity:1;pointer-events:auto}.control-rail__light svg{width:1rem;height:1rem;display:block}.control-rail__light--active{box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 3px var(--text)}.l-overlay__body--controls{inset:0 var(--s-square) 0 0;padding:.9rem 1.1rem 1.5rem;direction:rtl}.l-overlay__body--controls>*{direction:ltr}.drawer-section{margin-bottom:.9rem}.drawer-section+.drawer-section{border-top:var(--s-line) solid var(--line);padding-top:.9rem}.drawer-hint{margin:0 0 .9rem;font-size:.65rem;color:color-mix(in lab,currentColor 55%,var(--bg))}.drawer-section>*,.l-overlay__body--controls>.drawer-hint{opacity:0;transform:translate(-4rem);transition:transform .3s cubic-bezier(.3,.7,0,1),opacity .2s linear}body.controls-open .drawer-section>*,body.controls-open .l-overlay__body--controls>.drawer-hint{opacity:1;transform:translate(0);transition-delay:calc(.15s + var(--j, 0) * 50ms)}.l-overlay__body--controls>.drawer-hint{--j: 0}.drawer-section>:nth-child(1){--j: 0}.drawer-section>:nth-child(2){--j: 1}.drawer-section>:nth-child(3){--j: 2}.drawer-section>:nth-child(4){--j: 3}.drawer-section>:nth-child(5){--j: 4}.drawer-section>:nth-child(6){--j: 5}.drawer-section>:nth-child(7){--j: 6}.drawer-section>:nth-child(8){--j: 7}.drawer-section>:nth-child(9){--j: 8}.drawer-toggle--right{left:auto;right:calc(var(--s-square) * -1 + var(--s-line))}.lib-snippet{display:none;opacity:0;transform:translate(4rem);transition:transform .3s cubic-bezier(.3,.7,0,1),opacity .2s linear,display .3s allow-discrete}body.colors-open .lib-snippet{display:block;opacity:1;transform:translate(0);transition-delay:.29s}@starting-style{body.colors-open .lib-snippet{opacity:0;transform:translate(4rem)}}.lib-snippet{margin-top:1rem}.code{position:relative;display:block;cursor:pointer;margin:0 .9rem;padding:.75rem;background:var(--text);color:var(--bg);font:inherit;font-size:.6rem;line-height:1.5;overflow-x:auto;white-space:pre}.code ::selection,.code::selection{background:var(--bg);color:var(--text)}.code--copied:after{content:"Copied";position:absolute;top:.4rem;right:.4rem;padding:.1rem .45rem;background:var(--bg);color:var(--text);font-size:.55rem}.palette{display:flex;flex-direction:column}.palette__row{display:flex;position:relative;min-height:calc(var(--s-square) * 2);background:var(--bg);border-bottom:var(--s-line) solid var(--line);cursor:pointer;transition:min-height .3s cubic-bezier(.3,.7,0,1);transition-delay:calc(var(--i, 0) * .1s)}body.colors-open .palette__row{min-height:calc(var(--s-square) * 2.5)}.palette__row:hover{z-index:10;transform:translateY(-2px);box-shadow:0 2px 0 0 currentColor,0 -1px 0 0 currentColor}body.colors-open .palette__row--selected .palette__swatch{box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 3px var(--text)}.palette__swatch{width:calc(var(--s-square) * 2.5);flex-shrink:0;border-right:var(--s-line) solid var(--line);transform-origin:0 50%;transform:scaleX(.5)}body.colors-open .palette__swatch{transform:scaleX(1);transition:transform .4s cubic-bezier(.3,.7,0,1);transition-delay:calc(.15s + (1 - var(--i, 0)) * .14s)}.palette__row-info{flex:1;min-width:0;padding:0 var(--s-square);display:flex;flex-direction:column;justify-content:center;position:relative;opacity:0;transform:translate(4rem);transition:transform .3s cubic-bezier(.3,.7,0,1),opacity .2s linear}body.colors-open .palette__row-info{opacity:1;transform:translate(0);transition-delay:calc(.15s + (1 - var(--i, 0)) * .14s)}.palette__row-info-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.palette__row-name{font-size:1rem;font-weight:400;letter-spacing:-.02em;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.palette__row-info-deco{flex:1 1 auto;min-width:0;height:1px;background:var(--line);opacity:.4}.palette__row-hex{font-size:.75rem;font-weight:300;opacity:0;transform:translate(4rem)}body.colors-open .palette__row-hex{opacity:1;transform:translate(0);transition:transform .3s cubic-bezier(.3,.7,0,1);transition-delay:calc(.15s + (1 - var(--i, 0)) * .14s + .1s)}.palette__empty{margin:0;padding:.6rem .75rem;font-size:.65rem;color:color-mix(in lab,currentColor 55%,var(--bg))}@keyframes token-beam-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#tokenBeamBtn.is-connected .button__icon{animation:token-beam-spin 5s linear infinite;transform-origin:center}.footer{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:min(92vw,74vmin,42rem);margin:0 auto;padding:.75rem 0 1.25rem}.field--orbit{align-items:stretch}#orbit{position:relative;width:6.5rem;height:6.5rem;margin:.35rem auto 0;border:1px solid currentColor;border-radius:50%;cursor:grab;touch-action:none}#orbit:active{cursor:grabbing}#orbit svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}#orbit path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}#orbit .front{stroke:color-mix(in lab,currentColor 55%,transparent)}#orbit .back{stroke:color-mix(in lab,currentColor 15%,transparent)}#orbit-dot{position:absolute;z-index:2;width:.55rem;height:.55rem;border-radius:50%;background:var(--text);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px var(--text),0 0 0 3px var(--bg)}.orbit-dot--back{z-index:0;transform:translate(-50%,-50%) scale(.6)}.popover{border:var(--s-line) solid currentColor;background:var(--bg);padding:.9rem 1.1rem 1.1rem;width:14rem}.popover__title{font-size:1rem;font-weight:200;letter-spacing:-.03em}.field{display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem;transition:opacity .15s linear}.field--inactive{opacity:.35}.field__row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.75rem}.field__row output{flex-shrink:0;font-weight:700;font-size:.8em}.field__help{margin:.1rem 0 0;font-size:.65rem;line-height:1.4;color:color-mix(in lab,currentColor 55%,var(--bg))}.range{position:relative;display:grid;align-items:center;margin:0;height:1.6rem;width:100%;flex:0 0 auto}.range input[type=range]{position:absolute;width:100%;top:-.75rem;height:calc(100% + .75rem);opacity:0;cursor:pointer;margin:0;z-index:3;-webkit-appearance:none;appearance:none}.range:before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;pointer-events:none}.range-highlight{position:absolute;left:calc(min(var(--progress, .5),var(--center, .5))*100%);right:calc((1 - max(var(--progress, .5),var(--center, .5)))*100%);bottom:1px;height:2px;background:var(--line);pointer-events:none;z-index:0;transition:height .2s cubic-bezier(.3,.7,0,1),bottom .2s cubic-bezier(.3,.7,0,1),opacity .1s linear}.range:hover .range-highlight{opacity:.4;height:5px;bottom:2px}.range:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:8px;--count: var(--graduations, 5);background-image:linear-gradient(to right,currentColor var(--s-line),transparent var(--s-line)),linear-gradient(to right,var(--line) var(--s-line),transparent var(--s-line));background-size:calc((100% - var(--s-line)) / (var(--count) - 1)) 100%,calc((100% - var(--s-line)) / ((var(--count) - 1) * 4)) 50%;background-position:0 100%,0 100%;background-repeat:repeat-x;pointer-events:none}.range-marker{position:absolute;left:calc(var(--progress, .5) * 100%);bottom:12px;width:.5rem;height:.5rem;background:var(--bg);border:var(--s-line) solid currentColor;border-radius:50%;transform:translate(-50%);pointer-events:none;z-index:2;box-shadow:0 0 0 2px var(--bg)}.range-marker:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:11px;background:currentColor;transform:translate(-50%);pointer-events:none}.field:has(input:disabled){color:color-mix(in lab,var(--text) 35%,var(--bg))}.range:has(input:disabled) input[type=range]{cursor:default}.range:has(input:disabled) .range-highlight{opacity:0}.range:has(input:disabled):hover .range-highlight{opacity:0;height:2px;bottom:1px}input[type=color]{-webkit-appearance:none;appearance:none;width:100%;height:1.8rem;padding:3px;border:var(--s-line) solid currentColor;border-radius:0;background:var(--bg);cursor:pointer;transition:padding .15s ease}input[type=color]:hover{padding:1px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:0}input[type=color]::-moz-color-swatch{border:none}select{font:inherit;font-size:.8rem;width:100%;padding:.25rem .35rem;border:var(--s-line) solid currentColor;border-radius:0;background:var(--bg);color:inherit;cursor:pointer}.light-type,.light-type::picker(select){appearance:base-select}.light-type button{font:inherit;border:0;padding:0;background:none;color:inherit;display:flex;align-items:center;width:100%;cursor:pointer}.light-type selectedcontent{display:flex;align-items:center;gap:.5rem}.light-type::picker(select){border:var(--s-line) solid currentColor;background:var(--bg);color:inherit;padding:0;margin-top:.25rem}.light-type option{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;font-size:.8rem;background:var(--bg);color:inherit;cursor:pointer}.light-type option:hover,.light-type option:focus{background:var(--text);color:var(--bg)}.light-type option:checked{font-weight:700}.light-type option::checkmark{display:none}.lt-icon{width:.95rem;height:.95rem;flex-shrink:0;display:block}.button,.seg__btn,select{touch-action:manipulation}@media (max-width: 640px){.l-wrap{padding:.75rem var(--s-square) .25rem}.l-main{width:100%}.menu__brand{display:none}.l-overlay{width:100%}body.colors-open .l-overlay--left{z-index:4;transform:translate(calc(var(--s-square) - var(--s-line)))}body.controls-open .l-overlay--right{z-index:4;transform:translate(calc(-1 * var(--s-square) + var(--s-line)))}body.colors-open .l-main,body.controls-open .l-main{transform:none}body.colors-open .menu--overlay{display:none}.hints{font-size:.7rem;min-width:0}.footer{padding-bottom:max(.5rem,env(safe-area-inset-bottom))}}.hints--touch{display:none}@media (hover: none) and (pointer: coarse){.hints--keys{display:none}.hints--touch{display:block}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}