@import"https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap";html{overflow:hidden}body{margin:0}:root{font-family:Playpen Sans,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:16px;color-scheme:light dark;color:#fff;stroke:#fff;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,span{margin:0}#root{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw}svg{overflow:visible}button,input[type=submit],.btn{font-family:inherit;cursor:pointer}.flex-center{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}button{display:inline-block;padding:14px 20px;font-size:16px;font-weight:700;color:#fff;background:#ffb876;border:none;border-radius:12px;cursor:pointer;box-shadow:0 6px #dd9655;margin-bottom:6px;transition:all .1s ease}button.square{border-radius:12px;padding:14px;height:54px;width:60px;display:inline-flex;justify-content:center;align-items:center}.btn-group{display:flex;height:66px}.btn-group button{border-radius:0;border-left:1px solid oklch(.7313 .1179 62.21);border-right:1px solid oklch(.7313 .1179 62.21)}.btn-group button.very-disabled{border-left:1px solid #929292;border-right:1px solid #929292}.btn-group button:first-child{border-radius:12px 0 0 12px;border-left:none}.btn-group button:last-child{border-radius:0 12px 12px 0;border-right:none}button:hover:not(:disabled):not(.disabled):not(.very-disabled){filter:brightness(1.08)}button:active,button.pressed,button.active{transform:translateY(4px);box-shadow:0 2px #bc7835;margin-bottom:2px;color:#fff;stroke:#fff}button.disabled,button:disabled{background:#ffd5b1;background:oklch(.9 .1179 62.21);box-shadow:0 6px #dd9655;margin-bottom:6px;cursor:not-allowed;opacity:.7}button.disabled.active,button:disabled.active{box-shadow:0 2px #dd9655}button.very-disabled{background:#e0e0e0;box-shadow:0 6px #929292;margin-bottom:2px;color:#9e9e9e;cursor:not-allowed;opacity:.6}button.disabled:active,button:disabled:active,button.very-disabled:active{transform:none}.debug .relation-expr,.debug .operation-expr,.debug .u-operation-expr,.debug .function-expr,.debug .parentheses-expr{outline:1px solid oklch(.835 .117 63 / .5);border-radius:3px}.debug svg{outline:1px solid #33d3fb80;border-radius:3px}.relation-expr,.operation-expr,.u-operation-expr,.function-expr,.parentheses-expr{display:inline-flex;align-items:center;flex-direction:row}.parentheses-expr{display:flex}.relation-expr,.operation-expr,.u-operation-expr{align-items:end}.function-expr-args{display:flex;align-items:center}.operation-expr.frac{display:flex;flex-direction:column;align-items:center}.operation-expr.frac>:first-child,.operation-expr.frac>:last-child{margin-left:.25rem;margin-right:.25rem}div.pow-container{display:inline-flex;flex-direction:column;margin-left:.125rem}.blank{height:72px}.below-axis-depth-wrapper,.padding-container{display:inline-flex;flex-direction:column}.parenthesis.open{margin-right:.125rem}.parenthesis.closed{margin-left:.125rem}.comma{margin-left:.125rem;margin-right:.25rem}.relation{margin:0px .5rem}.operator{margin:0px .125rem}.operator.add,.operator.sub{margin:0px .25rem}.operator.div{align-self:stretch}svg{fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none}path{vector-effect:non-scaling-stroke}svg.colorized,.colorized svg{stroke:#ffb876}.animation-editor{display:flex;flex-direction:column;margin-top:2rem;margin-bottom:auto}.animation-editor h1{text-align:center}.single-step-view{margin-right:2rem;width:30vw}.idx-control{display:flex;align-items:center;margin-left:2rem}.idx-control .idx{margin:0px .5rem;min-width:1rem;text-align:center}.btn-del{background-color:unset;color:#e40000;font-size:1.25rem;border:none;margin-left:1rem;font-weight:700}.step-editor{display:flex;flex-direction:column}.d-flex{display:flex;justify-content:space-between}.steps-editor{margin-left:2rem;display:flex;flex-direction:column;width:20vw}.steps-editor textarea{flex-grow:1;width:20vw;font-family:Courier New,Courier,monospace}.pobject-editor{display:flex;flex-direction:column;align-items:center;width:20vw}.pobject-editor h2{width:100%}.pobject-editor input{min-height:1.75rem}.pobject-editor input[type=text]{border-radius:.25rem 0px 0px .25rem;border:none}.pobject-editor input[type=submit]{padding:auto;height:100%;border-radius:0px .25rem .25rem 0px;border:none}ul.pobj-list{max-height:50vh;overflow-y:auto;list-style-type:none;padding:0}ul.pobj-list li{min-width:5rem;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;margin:.5rem 0px;border-radius:.25rem;background-color:#303030}.reorder{max-height:50vh;overflow-y:auto}.reorder ul{list-style-type:none;padding:0}.reorder li{min-width:5rem;display:flex;align-items:center;justify-content:space-between;padding:.25rem 1rem;margin:.5rem 0px;border-radius:.25rem;background-color:#303030}.reorder .reorder-handle{width:2rem;height:2rem;cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.reorder .reorder-handle>div{height:3px;width:80%;background-color:#646464;border-radius:1.5px}.drag-pobj{display:flex;align-items:center;margin-right:.5rem}.drag-pobj .pobj-id{color:#646464;margin-right:1rem;min-width:1.5rem;text-align:right}.btn-done{font-size:1.25rem;padding:.25rem .5rem;margin-top:1.5rem}.control-buttons{display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem}.monospace{font-family:Courier New,Courier,monospace}.debug .animations-stack>:nth-child(odd){background-color:#ffb57440;border-radius:6px}.debug .animations-stack>:nth-child(2n){background-color:#33d3fb18;border-radius:6px}.debug .anim.animated-element-container.to{visibility:visible;opacity:.25;background-color:#00800080}.debug .anim.animated-element-container.from{background-color:#80000080}.debug .morph-anim{background-color:#00008080}.morph-anim{display:flex;justify-content:center;position:relative}.animated-element-container{display:flex;align-items:center}.anim.animated-element-container.to{position:absolute;visibility:hidden;top:50%;transform:translateY(-50%)}.anim.animated-element-container.to svg{stroke:#ffb876}.animated-element-movements{position:absolute;display:flex}.animated-element-movements svg{stroke:#ffb876}.multi-lines-anim{display:flex;flex-direction:column;align-items:center;width:100vw;height:calc(100vh - 3rem);margin:0 32px}.animations-stack{width:100%;display:flex;flex-direction:column;align-items:center;padding:48px 0;flex-grow:1;gap:16px;overflow-y:auto;overflow-x:visible;scrollbar-gutter:stable both-edges}.completed-element{display:inline-flex;justify-content:center;align-items:center}.current-animation{display:flex;justify-content:center;align-items:center}.step-explanation{width:100%;padding-bottom:8px}.px-3{padding-left:16px;padding-right:16px}.explanation-wrapper{position:relative;display:inline-flex}.info{position:absolute;top:8px;left:2rem;display:flex;align-items:center}.info-button{width:24px;height:24px;margin-right:8px;margin-left:8px;border-radius:50%;border:none;line-height:1;background-color:#444}.explanation-text{white-space:nowrap;width:100%}@media screen and (max-width: 540px){.explanation-text{display:none}}.animate-image{display:flex;flex-direction:column;justify-content:center;align-items:center}.animate-image__preview{width:100vw;height:100vh;object-fit:cover}.animate-image__captured{width:100vw;height:100vh;object-fit:cover;max-width:80vw;max-height:80vh;border-radius:8px}.animate-image__controls{position:absolute;bottom:32px;display:flex;flex-direction:row;gap:16px}.animate-image__status{font-size:1rem;opacity:.7}