.code-preview{overflow:hidden;position:relative;z-index:1;width:100%;margin-bottom:var(--margin-m);background-color:var(--hex-current-8);border-radius:var(--br-s)}@media(min-width:900px){.code-preview{margin-top:calc(var(--margin-xxxl) - var(--margin-s));margin-bottom:var(--margin-xxxl)}}.code-preview-content{position:relative;z-index:1}.code-preview-content header{position:relative;display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;width:100%;height:calc(3rem + 2px);padding-left:var(--margin-s);padding-right:var(--margin-s);background-color:var(--hex-current-7)}.code-preview-title{flex-shrink:1;flex-grow:0;width:100%;overflow:hidden}.code-preview-content header nav{display:flex;flex-shrink:0;flex-grow:1;height:100%}.code-preview-title h2{overflow:hidden;display:block;width:100%;margin:0;white-space:nowrap;text-overflow:ellipsis;color:inherit}.code-preview-content header button{display:flex;align-items:center;cursor:pointer;position:relative;color:var(--hex-current-2);margin-left:var(--margin-m);border-bottom:1px solid transparent;background-color:transparent}.code-preview-content header button:has(.icon){margin-left:var(--margin-xs);margin-right:-.5rem}.code-preview-content button:hover{color:var(--hex-current-1)}.code-preview-content button.is-active{color:var(--hex-current-1);border-color:var(--hex-current-1)}@media(max-width:899px){.code-preview-content button span{display:none}}.code-editor pre:not(:last-child){margin-bottom:0}.code-editor pre{display:none;margin:0}.code-editor pre.is-active{display:block}.code-editor pre code{display:block;border-radius:0;background-color:transparent;padding:var(--margin-m)}[data-template*=easing] #site-header{position:relative}#easing-editor{z-index:3;opacity:0;display:flex;flex-wrap:wrap;padding:0}#easing-editor.is-ready{opacity:1}#easings-navigation{width:100%}#easings-navigation .easing-curve-items{width:100%;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap;gap:1px}#easings-navigation .easing-curve-nav-item{position:relative;flex-grow:0;flex-shrink:0;width:7rem;height:100%;aspect-ratio:1/1}.easing-pane-controls{align-items:center;padding:0;margin-right:calc(var(--margin-xxs) * -1)}.easing-control-handle{transform-box:fill-box;transform-origin:50% 50%}.easing-pane-controls .ui-input{padding-left:var(--margin-xxxs);padding-right:var(--margin-xxxs);margin-top:calc(var(--margin-s) * -1.25);padding-top:calc(var(--margin-s) * 1);margin-bottom:calc(var(--margin-s) * -1.25);padding-bottom:calc(var(--margin-s) * 1)}.easing-pane-controls .ui-input:active svg{border:1px solid transparent}.easing-pane{position:relative;display:flex;flex-direction:column;gap:var(--margin-s);height:100%;width:100%}@media(max-width:699px){.easing-pane{width:100%;padding-left:var(--margin-s);padding-right:var(--margin-s);padding-bottom:var(--margin-s)}}@media(min-width:700px){.easing-pane{flex-grow:1;flex-basis:0;width:30%;padding-bottom:var(--margin-s)}}@media(max-width:1199px){#easings-navigation{overflow-x:auto;overflow-y:hidden;margin-top:var(--margin-s);padding-left:var(--margin-s)}#easings-navigation .easing-curve-nav-item:last-child{padding-right:var(--margin-s);width:calc(7rem + var(--margin-s))}#easings-navigation .easing-curve-nav-item:first-child a{border-top-left-radius:var(--margin-s);border-bottom-left-radius:var(--margin-s)}#easings-navigation .easing-curve-nav-item:last-child a{border-top-right-radius:var(--margin-s);border-bottom-right-radius:var(--margin-s)}}@media(min-width:700px)and (max-width:899px){.easing-pane{padding-left:var(--margin-s);padding-right:calc(var(--margin-s) * .5)}.easing-pane:last-child{padding-left:calc(var(--margin-s) * .5);padding-right:var(--margin-s)}}@media(min-width:900px)and (max-width:1199px){#easings-navigation{margin-top:var(--margin-m);padding-left:var(--margin-m)}#easings-navigation .easing-curve-nav-item:last-child{padding-right:var(--margin-m);width:calc(7rem + var(--margin-m))}.easing-pane{padding-left:var(--margin-m);padding-right:calc(var(--margin-m) * .5);padding-bottom:var(--margin-m);gap:var(--margin-m)}.easing-pane:last-child{padding-left:calc(var(--margin-m) * .5);padding-right:var(--margin-m)}}@media(min-width:1200px){#easing-editor{flex-wrap:nowrap;padding:0 calc(var(--margin-m) * .5)}#easings-navigation{overflow-y:auto;overscroll-behavior-y:contain;top:calc(var(--site-header-height) + var(--margin-m) * 1);margin-top:var(--margin-m);margin-bottom:var(--margin-m);flex-grow:1;flex-basis:0;margin-left:calc(var(--margin-m) * .5);margin-right:calc(var(--margin-m) * .5);width:16rem;height:calc(100lvh - var(--site-header-height) - var(--margin-m) * 2);clip-path:inset(0% 0% 0% 0% round var(--br-l))}.easing-pane{gap:var(--margin-m);padding-top:var(--margin-m);padding-left:calc(var(--margin-m) * .5);padding-right:calc(var(--margin-m) * .5);padding-bottom:var(--margin-m)}#easings-navigation .easing-curve-items{flex-wrap:wrap}#easings-navigation .easing-curve-nav-item{flex:0 0 calc((100% - 3px)/4)}#easings-navigation .easing-curve-nav-item:first-child a{border-top-left-radius:var(--br-l)}#easings-navigation .easing-curve-nav-item:nth-child(4) a{border-top-right-radius:var(--br-l)}#easings-navigation .easing-curve-nav-item:nth-last-child(4) a{border-bottom-left-radius:var(--margin-s)}#easings-navigation .easing-curve-nav-item:last-child a{border-bottom-right-radius:var(--br-l)}}.easing-pane-group{display:flex;flex-direction:column;gap:1px}.easing-pane-group .code-preview-content header{background-color:transparent;background-color:var(--hex-bg-2);margin-bottom:1px;border-top-right-radius:var(--br-l);border-top-left-radius:var(--br-l)}.easing-pane-group .code-preview-content header nav{margin-bottom:-1px}.easing-pane-group .code-preview-content pre{display:block;position:relative;background-color:var(--hex-bg-3)}.easing-pane-group .code-preview-content pre:last-child{display:block;border-bottom-right-radius:var(--br-l);border-bottom-left-radius:var(--br-l);margin-top:1px}.easing-pane-group .easing-code-output{display:none}.easing-pane-group .easing-code-output.is-active{display:block}.easing-pane-group .code-preview-content pre .ui-input.copy-button{border-radius:0}#easing-editor .ui-selectable{border:0px solid var(--hex-bg-1);position:relative;z-index:0;background-color:var(--hex-bg-2);color:var(--hex-current-2);text-decoration:none;cursor:pointer;transition:color .05s cubic-bezier(.5,0,.5,1),background-color .05s cubic-bezier(.5,0,.5,1)}.easing-pane-header{display:flex;flex-direction:row;justify-content:space-between}#easing-editor .ui-selectable.is-active{z-index:1;color:var(--hex-current-1);background-color:var(--hex-current-6);transition-duration:0s}#easing-editor .ui-selectable:hover:not(.is-active){color:var(--hex-current-2);background-color:var(--hex-current-7);transition-duration:0s}#easing-editor .ui-selectable:active{border:1px solid var(--hex-bg-1);transition-duration:0s}#easing-editor .ease-preview{color:var(--hex-bg-5);background-color:var(--hex-bg-3)}#easings-navigation .easing-curve-link{display:flex;height:100%;flex-direction:column-reverse}#easings-navigation .easing-curve-link svg{aspect-ratio:1/1;overflow:visible;width:calc(100% - 4rem);margin:var(--margin-l);margin-top:1.75rem;margin-bottom:0rem}#easings-navigation .easing-curve-link span{display:block;position:relative;width:100%;padding:var(--margin-xxs) 0;font-size:var(--text-xxs);font-weight:600;text-align:center}#easing-editor-container{display:flex;flex-direction:column}#easing-editor .easing-pane-block{align-items:center;padding:var(--margin-s);min-height:3rem;background-color:var(--hex-bg-2)}#easing-editor .easing-pane-block:first-child{border-top-left-radius:var(--br-l);border-top-right-radius:var(--br-l)}#easing-editor .easing-pane-block:last-child{border-bottom-left-radius:var(--br-l);border-bottom-right-radius:var(--br-l)}#easing-editor-container h1{margin-bottom:var(--margin-s)}#easing-visualizer-container{--grid-size: 6.24%;--grid-color: #1F1F1E;position:relative;z-index:1;display:flex;justify-content:center;align-content:center;flex-wrap:wrap;width:100%;aspect-ratio:1/1;margin-bottom:var(--margin-s);border-radius:var(--br-s);background-color:var(--grid-color);background-image:radial-gradient(var(--hex-current-6) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:center;background-repeat:repeat;box-shadow:inset 0 0 0 4px var(--grid-color)}#easing-visualizer-container:after{--marker-size: 62.4%;pointer-events:none;content:"";display:block;position:absolute;z-index:1;width:100%;aspect-ratio:1/1;background-image:radial-gradient(var(--hex-current-2) 1px,transparent 1px);background-size:var(--marker-size) var(--marker-size);background-position-x:-33%;background-position-y:-33%;background-repeat:repeat}#easing-curve-container{position:relative;z-index:0}#easing-editor .lil-gui{--background-color: transparent;--text-color: currentColor;--title-background-color: transparent;--title-text-color: currentColor;--width: 100%;--widget-color: var(--hex-bg-4);--hover-color: var(--hex-current-6);--focus-color: var(--hex-current-6);--number-color: var(--hex-current-1);--string-color: #a2db3c;--font-size: var(--text-xxs);--input-font-size: var(--text-xxs);--font-family: var(--font-code);--font-family-mono: var(--font-code);--padding: 0px;--spacing: 4px;--widget-height: 20px;--title-height: calc(var(--widget-height) + var(--spacing) * 1.25);--name-width: calc(33.33% + var(--margin-s) * .5);--slider-knob-width: 2px;--slider-input-width: 27%;--color-input-width: 27%;--slider-input-min-width: 45px;--color-input-min-width: 45px;--folder-indent: 7px;--widget-padding: 0 0 0 3px;--widget-border-radius: var(--br-s);--checkbox-size: calc(1 * var(--widget-height));--scrollbar-width: 5px}#easing-editor .lil-gui.root>.children{overflow:hidden}#easing-editor .lil-gui .controller.number .slider .fill{opacity:1}#easing-editor .lil-gui .controller{margin:0 0 var(--spacing) 0}#easing-editor .lil-gui .controller:last-child{margin-bottom:0}#easing-editor .lil-gui .children:empty:before{content:"No parameters";font-style:normal;margin:0}#easing-editor .lil-gui .controller.option .display{width:100%}