*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;padding:0}button{appearance:none;background:none;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}button,input{font-family:inherit}p{margin:0}svg:has(symbol){display:none}fieldset{margin:0;padding:0}.stack{display:grid}.stack>*,.stack:before,.stack:after{grid-area:1/1}:root{color-scheme:light dark;--primary-rgb: 48, 48, 48;--bg-rgb: 255, 255, 255;--accent-strong-rgb: 0, 88, 242}@media(prefers-color-scheme:dark){:root{--primary-rgb: 210, 210, 210;--bg-rgb: 18, 18, 18;--accent-strong-rgb: 76, 141, 255}}body{--btn-hover-bg: rgba(var(--primary-rgb), .05);--primary: rgb(var(--primary-rgb));--secondary: light-dark(#555, #b5b5b5);--bg: rgb(var(--bg-rgb));--disabled: light-dark(#999, #666);--neutral-100: light-dark(#eee, #1c1c1c);--neutral-200: light-dark(#ddd, #2a2a2a);--neutral-300: light-dark(#ccc, #4c4c4c);--neutral-400: light-dark(#bbb, #555);--neutral-500: light-dark(#aaa, #666);--neutral-600: light-dark(#888, #888);--neutral-900: light-dark(#333, #ccc);--danger: light-dark(rgb(255, 106, 108), #ff6b6d);--accent-light: light-dark(rgb(209, 229, 254), #162944);--accent-strong: rgb(var(--accent-strong-rgb));--accent-altern: light-dark(rgb(0, 236, 161), #20c997);color:var(--primary);font-family:Outfit,sans-serif}main{height:100%;display:grid;grid-template:"toolbar-left toolbar-right" auto "editor aside" 1fr / 1fr auto}.srOnly{position:absolute;clip-path:inset(50%)}#pan-zoom-area{overflow:auto;grid-row-start:toolbar-left;grid-row-end:editor;grid-column:toolbar-left;touch-action:none;overscroll-behavior:contain;align-content:center}.checkbox{display:flex;gap:3px;font-size:.9rem;-webkit-user-select:none;user-select:none}.checkbox input[type=checkbox]{margin:0}.editor-container{width:100%;height:100%;padding:80px 30px 20px;overflow-x:hidden;display:grid;grid-template:"ruler-y   graph" 1fr ".         ruler-x" 50px "timeline-action   timeline" auto / 100px 1fr}.graph-wrapper{position:relative;grid-area:graph;min-height:0;isolation:isolate;display:flex;flex-direction:column}.graph{position:relative;flex:1;min-height:0;align-self:stretch}.ruler{container-type:size;display:flex;padding:0;margin:0;--line-width: 1px;--line-length: 8px;--line-color: var(--neutral-400);--max-number-of-lines: 20;--strong-line-length: 14px;--strong-line-color: var(--neutral-600);--number-of-lines: round(100cqmax / (5px * var(--max-number-of-lines)));--single-line-gap: calc(100% / var(--number-of-lines))}.ruler li{display:block flow;flex:1}.ruler li:last-child{flex:0;--line-color: transparent}.ruler li input{text-align:right}.ruler li input::-webkit-textfield-decoration-container{flex-direction:row-reverse}.ruler li .input-unit:has([data-name=start-value]){margin-bottom:-10px}.ruler li .input-unit:has([data-name=end-value]){margin-top:-9px}.ruler li:after{content:attr(data-stop);display:inline flow-root;font-size:14px;font-family:Times New Roman,Times,serif}@container ((aspect-ratio > 1) and (width < 300px)) or ((aspect-ratio < 1) and (height < 300px)){.ruler li:nth-child(2n):after{display:none}}@container ((aspect-ratio > 1) and (width < 150px)) or ((aspect-ratio < 1) and (height < 150px)){.ruler li:not(:first-child,:last-child):after{display:none}}.ruler-y{grid-area:ruler-y;flex-direction:column-reverse}.ruler-y li{text-align:right;padding-right:20px;--x-offset: 10px;height:0;align-content:end;background:conic-gradient(at 0% 100%,var(--strong-line-color)) 100% 100% / var(--strong-line-length) var(--line-width) no-repeat,conic-gradient(at 100% var(--line-width),transparent 270deg,var(--line-color) 0 270deg) 100% calc(-1 * var(--line-width)) / var(--line-length) var(--single-line-gap) repeat-y}.ruler-y li number-input{text-align:initial}.ruler-y li:last-child{height:var(--line-width)}.ruler-y li:last-child:after{translate:var(--x-offset) 0}.ruler-y li:after{translate:0 .5lh}.ruler-y li:first-child:after{content:none}.label-ruler-y{grid-area:ruler-y;text-align:center;writing-mode:sideways-lr}.ruler-x{grid-area:ruler-x}.ruler-x li{width:0;background:conic-gradient(var(--strong-line-color)) var(--line-width) 0 / var(--line-width) var(--strong-line-length) no-repeat,conic-gradient(at var(--line-width) 100%,transparent 270deg,var(--line-color) 0) var(--line-width) 0 / var(--single-line-gap) var(--line-length) repeat-x}.ruler-x li:last-child{width:calc(2 * var(--line-width))}.ruler-x li:after{translate:-50% var(--strong-line-length)}[class^=active-line-]{--size: 1px;position:absolute;position-anchor:--cp-selected;inset:0;background:linear-gradient(var(--angle),var(--neutral-300),var(--neutral-300) 12px,transparent 7px) 0 0 / 19px 19px repeat;margin:auto;pointer-events:none}.active-line-x{--angle: 90deg;top:anchor(center);bottom:anchor(center);height:var(--size)}.active-line-y{--angle: 0deg;left:anchor(center);right:anchor(center);width:var(--size)}.spline-preview{overflow:visible;will-change:transform;width:100%;height:100%}#toolbar{grid-column-start:toolbar-left;grid-column-end:toolbar-right;grid-row:toolbar-left;display:flex;gap:5px;background:rgba(var(--bg-rgb),.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1;padding:5px 20px;border-bottom:1px solid var(--neutral-200)}#toolbar .btn-accent{font-size:1rem;margin:auto 0 auto auto}.btn{display:inline flex;align-items:center;gap:4px;padding:8px 12px;border-radius:4px;color:var(--neutral-900)}.btn svg{width:24px;max-height:24px}.btn:not([disabled]):hover{background:var(--btn-hover-bg)}.btn[disabled]{cursor:not-allowed;color:var(--disabled)}aside{width:200px;padding:20px 10px;border-left:1px solid var(--neutral-200);display:flex;flex-direction:column;gap:10px}aside h2{font-size:16px;font-weight:400;margin:0}.output-preview{flex:2 0 200px;max-height:600px;container-type:size;background:rgba(var(--primary-rgb),.08);border-radius:5px;padding:10px;align-content:end}.preview-target-wrapper{--size: 100px;position:relative;width:var(--size);height:var(--size);border-radius:inherit;margin-inline:auto}.preview-target-wrapper:after{content:"";position:absolute;inset:0;border-radius:inherit;outline:5px dashed var(--neutral-300)}#preview-target-box{width:100%;height:100%;background:var(--accent-strong);animation:var(--anim-type) calc(1ms * var(--anim-time)) infinite;animation-direction:var(--anim-dir);animation-timing-function:var(--easing-func);animation-play-state:var(--anim-state);animation-fill-mode:forwards;border-radius:inherit}@keyframes --translate-keyframes{to{translate:0 calc(var(--size) - 100cqh)}}@keyframes --rotate-keyframes{to{rotate:360deg}}@keyframes --scale-keyframes{to{scale:1 calc(100cqh / var(--size))}}html[style*=--scale-keyframes] #preview-target-box{transform-origin:50% 100%}html[style*=--rotate-keyframes] .output-preview{align-content:center}#spline-anim-progress{--arrow-tail-width: 5px;position:absolute;bottom:0;display:flex;justify-content:center;width:var(--arrow-tail-width);margin-left:calc(var(--arrow-tail-width) * -.5);background:linear-gradient(transparent var(--anim-preview-arrow-tip-height),var(--accent-strong) var(--anim-preview-arrow-tip-height));pointer-events:none}#spline-anim-progress.reverse{top:100%;align-items:end;background:linear-gradient(var(--accent-strong) calc(100% - var(--anim-preview-arrow-tip-height)),transparent calc(100% - var(--anim-preview-arrow-tip-height)))}#spline-anim-progress.reverse:before{transform:rotate(180deg)}#spline-anim-progress:before{content:" ";display:block;flex-shrink:0;margin-inline:auto;clip-path:polygon(0 100%,50% 0,100% 100%);background:var(--accent-strong);width:20px;height:var(--anim-preview-arrow-tip-height)}.timeline-action{grid-area:timeline-action;margin-right:5px;justify-self:end}#cp-preview{display:none;opacity:.5;pointer-events:none}#cp-coords{position:absolute;position-anchor:--cp-selected;bottom:calc(10px + anchor(0%));left:calc(10px + anchor(100%));padding:4px 6px;background:var(--bg);font-size:.8rem;color:var(--primary);border-radius:3px;white-space:pre;z-index:2;pointer-events:none}.graph-wrapper:not(:has(:where([data-type^=cp]:hover,.show-cp-preview,.cp-selected))) [class^=active-line-]{display:none}.graph-wrapper:not(:has(:where([data-type^=cp]:hover,.show-cp-preview))) #cp-coords{display:none}.graph-wrapper:has(.show-cp-preview) #cp-preview{display:block;anchor-name:--cp-selected}.graph-wrapper:not(:has(.show-cp-preview)) [data-type^=cp]:hover,.graph-wrapper:not(:has(.show-cp-preview,[data-type^=cp]:hover)) .cp-selected{anchor-name:--cp-selected}.show-cp-preview{cursor:copy}.input-unit{display:flex;align-items:center;justify-content:end}#graph-space-end{--source: calc((var(--end-value) - 100));align-items:end}#graph-space-start{--source: calc((var(--start-value) * -1));align-items:start}#graph-space-end,#graph-space-start{display:flex;--range: calc(var(--end-value) - var(--start-value));height:calc((var(--source) / var(--range)) * 100%);width:100%;color:var(--neutral-300);font-size:.8em;-webkit-user-select:none;user-select:none;transition:opacity ease .3s,height ease .3s}:is(#graph-space-end,#graph-space-start):before,:is(#graph-space-end,#graph-space-start):after{content:"";display:block;flex-grow:1;border-top:1px solid}:is(#graph-space-end,#graph-space-start) span{display:flex;align-items:center;height:1px;margin-inline:5px}:is(#graph-space-end,#graph-space-start).hidden{opacity:0}.url-shadow-input-wrapper{display:flex;gap:5px;flex-grow:1;max-width:50vw;margin:3px auto;border:1px solid var(--neutral-500);border-radius:5px}.url-shadow-input-wrapper input{flex:1;padding:4px 12px;border:none;border-radius:5px}.url-shadow-input-wrapper input::placeholder{font-size:.91rem;color:var(--neutral-600)}.url-shadow-input-wrapper #url-shadow-input-hint{display:none}.url-shadow-input-wrapper #url-shadow-input-erase{padding-top:4px}.url-shadow-input-wrapper:has(#url-shadow-input:placeholder-shown) #url-shadow-input-hint{display:block}.url-shadow-input-wrapper:has(#url-shadow-input:placeholder-shown) #url-shadow-input-erase{display:none}.input-suffix{position:absolute;position-anchor:--url-shadow-input;right:anchor(right);top:anchor(top,1px);bottom:anchor(bottom,5px);padding:4px 8px 0 50px;background:linear-gradient(90deg,#0000,var(--neutral-200) 45px)}.input-suffix button{padding:0}#url-shadow-input{anchor-name:--url-shadow-input;background:var(--neutral-200)}.close-icon{width:1.2rem;aspect-ratio:1;display:grid;padding:0;align-self:start;align-content:center}.close-icon:before,.close-icon:after{content:"";display:block;width:100%;height:3px;background:var(--primary);border-radius:100vw;grid-area:1/1;rotate:45deg}.close-icon:after{rotate:-45deg}.timeline-slider{--thumb-width: 5px;--thumb-radius: calc(.5 * var(--thumb-width));--useful-width: calc(100% - var(--thumb-width));--thumb-color: var(--accent-strong);grid-area:timeline;display:grid;position:relative;align-items:center;justify-items:stretch;width:100%;text-align:center;border-radius:5px;--slider-bg: var(--neutral-200);--slider-accent: var(--neutral-100);background:linear-gradient(45deg,var(--slider-bg) 30%,var(--slider-accent) 0 70%,var(--slider-bg) 0) 0 0 / 50px 50% repeat-x,linear-gradient(-45deg,var(--slider-bg) 30%,var(--slider-accent) 0 70%,var(--slider-bg) 0) 0 100% / 50px 50% repeat-x}.timeline-slider:before{content:"Timeline";font-weight:700;transform:skew(-10deg);pointer-events:none;grid-area:1/1}.timeline-slider>*{grid-area:1/1}.slider{background:none;color:color-mix(in srgb,var(--secondary) 40%,var(--background) 60%);font:inherit;margin:0;display:block;margin-left:calc(-1 * var(--thumb-radius));width:calc(100% + var(--thumb-width));height:100%;appearance:none;cursor:ew-resize}.slider::-webkit-slider-runnable-track{background:none;height:100%;width:100%;-webkit-appearance:none}.slider::-moz-range-track{background:none;height:100%;width:100%}.slider::-webkit-slider-thumb{background:var(--thumb-color);border:none;width:var(--thumb-width);height:100%;-webkit-appearance:none}.slider::-moz-range-thumb{background:var(--thumb-color);border:none;width:var(--thumb-width);height:100%}number-input{--label-font-size: 12px;--label-x: 14px;anchor-scope:--tooltip;position:relative;display:block}number-input:has(label){margin-top:var(--label-font-size)}number-input:has(label) input{padding:6px 8px}number-input:has(label) fieldset{top:-8px}number-input input,number-input fieldset{border-radius:4px}number-input label{position:absolute;top:0;left:0;transform:translate(var(--label-x),-9px);-webkit-user-select:none;user-select:none}number-input label,number-input legend{font-size:var(--label-font-size)}number-input input{border:none;padding:3px 4px;width:100%;height:100%;outline:none;font-size:14px;background:var(--neutral-200)}number-input fieldset{position:absolute;inset:0;pointer-events:none;padding-left:calc(var(--label-x) - 5px);border:2px solid var(--neutral-400)}number-input legend{visibility:hidden;padding-right:4px}number-input:focus-within{color:var(--accent-strong)}number-input:focus-within fieldset{border:2px solid var(--accent-strong)}number-input:has([aria-invalid=true]){color:var(--danger)}number-input:has([aria-invalid=true]) fieldset{border:2px solid var(--danger)}@property --tooltip-offset{syntax: "<length>"; initial-value: 5px; inherits: true;}.tooltip-container{display:contents;anchor-scope:--tooltip}.tooltip-container :is(input,button),number-input input{anchor-name:--tooltip}[role=tooltip]{--bg-color: var(--primary);position:fixed;position-anchor:--tooltip;display:none;top:calc(anchor(100%) + var(--tooltip-offset));left:anchor(50%);translate:-50% 0;background:var(--bg-color);color:var(--bg);font-size:14px;padding:.5em;width:fit-content;max-width:25ch;border-radius:4px;transition:--tooltip-offset ease,opacity,display allow-discrete;transition-duration:.2s;opacity:0;z-index:1}[role=tooltip][id^=error]{--bg-color: #ff2137}[role=tooltip]:hover,[aria-describedby^=tooltip]:not([disabled]):where(:hover,:focus-visible)~[role=tooltip],[aria-invalid=true]~[role=tooltip]{display:block;opacity:1;--tooltip-offset: 10px}@starting-style{[role=tooltip]:hover,[aria-describedby^=tooltip]:not([disabled]):where(:hover,:focus-visible)~[role=tooltip],[aria-invalid=true]~[role=tooltip]{--tooltip-offset: initial;opacity:0}}[aria-describedby^=tooltip]:not([disabled]):where(:hover,:focus-visible)~[role=tooltip]{transition-delay:.4s}[role=tooltip]:after{content:"";position:absolute;top:0;left:50%;translate:-50% -100%;border-width:10px;border-style:solid;border-color:transparent transparent var(--bg-color) transparent;pointer-events:none}[role=tooltip][data-side=right]{left:calc(anchor(100%) + var(--tooltip-offset));top:anchor(50%);translate:0 -50%}[role=tooltip][data-side=right]:after{top:50%;left:0;translate:-100% -50%;border-color:transparent var(--bg-color) transparent transparent}[role=tooltip][data-side=left]{left:initial;right:calc(anchor(0%) + var(--tooltip-offset));top:anchor(50%);translate:0 -50%}[role=tooltip][data-side=left]:after{top:50%;left:initial;right:0;translate:+100% -50%;border-color:transparent transparent transparent var(--bg-color)}[id^=time-blocker]{position:absolute;inset:0;pointer-events:none;display:none;padding:20px 10px;z-index:1;opacity:0;transition:display .1s allow-discrete,opacity .1s;--color-a: rgba(var(--primary-rgb), .1);--color-b: rgba(var(--primary-rgb), .2);background:repeating-linear-gradient(45deg,var(--color-a),var(--color-a) 10px,var(--color-b) 10px,var(--color-b) 20px)}#time-blocker-back{right:calc((1 - var(--offset)) * 100%);text-align:right}#time-blocker-forward{left:calc(var(--offset) * 100%)}.graph-wrapper:has(.cp-selected) [id^=time-blocker][data-active]{display:block;opacity:1}@starting-style{.graph-wrapper:has(.cp-selected) [id^=time-blocker][data-active]{opacity:0}}.btn-accent{border-radius:.35em;padding:.25em .5em;background:var(--accent-light);color:var(--accent-strong);transition:color ease .3s,background ease .3s}.btn-accent:hover{background:var(--accent-strong);color:var(--bg)}.css-code-section{display:flex;flex-direction:column;flex:1 0 auto;margin-top:5px}.css-code-section header{display:grid;grid-template:auto auto / auto auto;padding-bottom:5px}.css-code-section header h3{margin:0;font-size:14px;font-weight:400}.css-code-section header button{grid-column:2;grid-row:1 / 3;text-align:right;justify-self:end}.css-code-section header .css-code-label{color:var(--secondary);font-size:.8rem}.css-code-section #code-snippet{anchor-name:--code-snippet;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:12px;padding:8px 10px;border:1px solid var(--neutral-300);border-radius:5px;max-height:200px;width:100%;height:100%}.css-code-section #copy-code{position-anchor:--code-snippet;font-size:14px;padding:5px 8px;border:1px solid var(--neutral-300);position:absolute;top:calc(anchor(top) + 10px);right:calc(anchor(right) + 10px);background:var(--bg);box-shadow:0 1px 5px #0003}@starting-style{.css-code-section #copy-code:active:before{display:block;translate:0 0;opacity:1}}.css-code-section #copy-code:before{position:absolute;right:0;content:"Copied!";opacity:0;translate:0 -50px;display:none;background:#0009;border-radius:4px;padding:5px 10px;color:#fff;transition:display 1.5s allow-discrete,translate 1.5s ease-out,opacity .75s ease-out .75s}label:has(input[type=checkbox]){margin-top:5px;cursor:pointer}input[type=checkbox]{appearance:none;width:0;height:0;position:absolute;left:-9999px}.switch{margin-left:auto;height:1.2rem;width:2.3rem;border-radius:100vw;padding:.25rem;background:var(--accent-light);transition:background ease .3s}.switch .switch-knob{height:100%;aspect-ratio:1;border-radius:100vw;background:var(--accent-strong);transition:background ease .3s,translate ease .3s}input:checked~.switch{background:var(--accent-strong)}input:checked~.switch .switch-knob{translate:1.15rem;background:var(--bg)}body{overflow:hidden}dialog{border:none;padding:20px;border-radius:20px;min-width:min(500px,90vw);--duration: .34s;transition:opacity var(--duration) ease,overlay var(--duration) ease,display var(--duration) ease allow-discrete}dialog h2{margin:0}dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}dialog::backdrop{background-color:rgba(var(--primary-rgb),.2);opacity:0}dialog[open]{opacity:1}@starting-style{dialog[open]{opacity:0}}dialog[open]:backdrop{opacity:1}@starting-style{dialog[open]:backdrop{opacity:0}}dialog:not([open]){opacity:0}select,select::picker(select){appearance:base-select;border-radius:5px;border:2px solid var(--neutral-400);background:var(--neutral-200)}select::picker(select){top:5px;transition:all .4s allow-discrete;height:0;min-height:0;overflow:hidden;opacity:0}select option{gap:15px;padding:5px 15px;transition:background .2s ease}select::picker-icon{color:currentColor;transition:.2s rotate;opacity:.9}select:open{border:2px solid var(--accent-strong)}select:open::picker(select){border:2px solid var(--accent-strong);height:94px;opacity:1}@starting-style{select:open::picker(select){height:0;opacity:0}}select:open::picker-icon{rotate:60deg}select option::checkmark{font-size:.6em;content:"";transform:rotate(45deg);transform-origin:80% 60%;height:1em;width:.5em;border-bottom:.3em solid;border-right:.3em solid;opacity:.9}[data-type^=cp]{--size: 20px;position:absolute;width:0;height:0;padding:0}[data-type^=cp]:active{cursor:grabbing}[data-type^=cp].cp-selected:after,[data-type^=cp]:hover:after{outline:5px dashed rgba(var(--accent-strong-rgb),.5);outline-offset:5px}[data-type^=cp].cp-selected:after{outline-color:var(--accent-strong);outline-width:5px;animation:--cp-rotate 10s linear infinite}[data-type^=cp]:before{position:absolute;content:"";display:block;height:80px;width:80px;border-radius:100vw;z-index:1;translate:-50% -50%}[data-type^=cp]:after{position:relative;content:"";display:block;z-index:2;translate:-50% -50%;width:var(--size);height:var(--size);border-radius:50%;cursor:grab}[data-type=cp-main]:after{background-color:var(--accent-altern)}[data-type=cp-before]:after,[data-type=cp-after]:after{border:4px solid var(--accent-altern);background:var(--bg);--size: 15px}@keyframes --cp-rotate{to{rotate:360deg}}.shadow-cps{pointer-events:none}.shadow-cps [data-type^=shadow-cp-]{position:absolute;width:10px;height:10px;border-radius:50%;translate:-50% -50%;background:var(--neutral-400);z-index:-1}