*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;padding:0}button{all:unset;cursor:pointer;-webkit-user-select:none;user-select:none}body{--btn-hover-bg: rgba(0, 0, 0, .05);--primary: #303030;--bg: #fff;--disabled: #999;color:var(--primary);font-family:Arial,Helvetica,sans-serif}main{height:100%}.srOnly{position:absolute;clip-path:inset(50%)}#pan-zoom-area{overflow:auto;height:100%;touch-action:none;overscroll-behavior:contain;align-content:center}.editor-container{width:500px;height:500px;position:relative;margin-inline:auto}.editor-container .ruler{font-family:Times New Roman,Times,serif;position:absolute;left:0;container-type:size;display:flex;padding:0;margin:0;pointer-events:none;--number-of-periods: 10;--line-width: 1px;--line-length: 8px;--line-color: #bbb;--max-number-of-lines: 10;--strong-line-length: 14px;--strong-line-color: #888;--number-of-lines: min( var(--max-number-of-lines), round(100cqmax / (5px * var(--number-of-periods))) );--single-line-gap: calc(100% / var(--number-of-lines))}.editor-container .ruler li{display:block flow;counter-increment:d 1;flex:1}.editor-container .ruler li:first-child{counter-reset:d -1}.editor-container .ruler li:after{content:"0." counter(d);display:inline flow-root;font-size:14px}.editor-container .ruler li:last-child{flex:0;--line-color: transparent}.editor-container .ruler li:last-child:after{content:"1.0"}@container ((aspect-ratio > 1) and (width < 300px)) or ((aspect-ratio < 1) and (height < 300px)){.editor-container .ruler li:nth-child(2n):after{display:none}}@container ((aspect-ratio > 1) and (width < 150px)) or ((aspect-ratio < 1) and (height < 150px)){.editor-container .ruler li:not(:first-child,:last-child):after{display:none}}.editor-container .ruler-y{top:0;bottom:0;contain-intrinsic-width:var(--strong-line-length);flex-direction:column-reverse;translate:calc(-100% + 1px) 0}.editor-container .ruler-y li{--x-offset: calc(var(--strong-line-length) * -1 - 5px);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}.editor-container .ruler-y li:last-child{height:calc(2 * var(--line-width))}.editor-container .ruler-y li:last-child:after{translate:var(--x-offset) -50%}.editor-container .ruler-y li:after{translate:var(--x-offset) 50%}.editor-container .label-ruler-y{position:absolute;inset-inline-start:50%;writing-mode:sideways-lr;inset-block-start:-80px}.editor-container .ruler-x{right:0;bottom:0;contain-intrinsic-height:var(--strong-line-length);translate:0 100%}.editor-container .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}.editor-container .ruler-x li:last-child{width:calc(2 * var(--line-width))}.editor-container .ruler-x li:after{translate:-50% var(--strong-line-length)}[data-type^=cp]{position:absolute;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;border:1px solid rgba(0,0,0,.2);padding:0}[data-type^=cp]:active{cursor:grabbing}[data-type^=cp].cp-selected{border:5px solid cyan}[data-type=cp-main]{background-color:#00f}[data-type=cp-before],[data-type=cp-after]{background-color:red;width:15px;height:15px}.spline-preview{overflow:visible;will-change:transform}button[aria-label]{position:relative}button[aria-label]:after{--b: 1em;--h: .5em;--p: 50%;--r: .5em;--c: var(--primary);padding:1em;border-radius:min(var(--r),var(--p) - var(--b) / 2) min(var(--r),100% - var(--p) - var(--b) / 2) var(--r) var(--r) / var(--r);clip-path:polygon(0 0,0 100%,100% 100%,100% 0,min(100%,var(--p) + var(--b) / 2) 0,var(--p) calc(-1 * var(--h)),max(0%,var(--p) - var(--b) / 2) 0);background:var(--c);border-image:conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0}@property --tooltip-y{syntax: "<length>"; initial-value: 5px; inherits: true;}button[aria-label]:not([disabled]):after{position:absolute;display:none;content:attr(aria-label);color:var(--bg);font-size:14px;padding:.5em;width:max-content;max-width:25ch;top:calc(100% + var(--tooltip-y));left:50%;translate:-50% 0;transition:--tooltip-y ease,opacity,display allow-discrete;transition-duration:.2s;opacity:0}@starting-style{button[aria-label]:not([disabled]):after{--tooltip-y: initial;opacity:0}}button[aria-label]:not([disabled]):where(:hover,:focus-visible){--tooltip-y: 10px}button[aria-label]:not([disabled]):where(:hover,:focus-visible):after{display:block;opacity:1}#toolbar{position:fixed;inset:0 0 auto;background:#fffa;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1;padding:5px 20px}.btn{display:inline flex;align-items:center;gap:4px;padding:8px 12px;border-radius:4px}.btn svg{width:24px;max-height:24px}.btn:not([disabled]):hover{background:var(--btn-hover-bg)}.btn[disabled]{cursor:not-allowed;color:var(--disabled)}code{display:block;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;white-space:break-spaces;max-height:200px;overflow:auto;font-size:12px}aside{position:fixed;right:0;top:50px;min-height:200px;width:200px}aside h2{font-size:16px;font-weight:400;margin:0}.output-preview{height:200px;background:#0001}#preview-target-box{width:100px;height:100px;background:tomato;animation:--sample 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}@keyframes --sample{0%{transform:translateY(100px)}to{transform:translateY(0)}}.bottom-toolbar{position:absolute;bottom:-80px;--left-col-width: 50px;left:calc(var(--left-col-width) * -1);right:0;display:grid;grid-template-columns:var(--left-col-width) 1fr}#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),lime var(--anim-preview-arrow-tip-height))}#spline-anim-progress.reverse{top:100%;align-content:end;background:linear-gradient(lime 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:#0f0;width:20px;height:var(--anim-preview-arrow-tip-height)}.inputsWrapper{--thumb-width: 5px;--thumb-radius: calc(.5 * var(--thumb-width));--useful-width: calc(100% - var(--thumb-width));--thumb-color: red;display:grid;position:relative;align-items:center;justify-items:stretch;width:100%}.inputsWrapper>*{grid-area:1 / 1}.timeline-track{display:grid;align-items:center;height:100%;text-align:center;border-radius:5px;--slider-bg: #ddd;--slider-accent: #eee;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-track:before{content:"Timeline";font-weight:700;transform:skew(-10deg);pointer-events:none}.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:pointer}.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%}