*,*:before,*:after{box-sizing:border-box;margin:0}html,body,#app{width:100%;height:auto;min-width:960px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:clamp(10px,calc(max(960px,100vw) / 96),20px);--theme-main-color: hsl(45 100% 56%);--theme-main-lighten: hsl(45 100% 70%);--theme-main-darken: hsl(45 60% 32%);--theme-white-lighten: #ffffff;--theme-white-color: #f4f4f4;--theme-white-darken: #eeeeee;--theme-dark-color: #444444;--theme-dark-20: #44444433;--theme-dark-40: #44444466;--theme-dark-60: #44444499;--theme-dark-80: #444444CC;--theme-danger-color: #f24822;--theme-danger-20: #f2482233;--theme-danger-40: #f2482266;--theme-danger-60: #f2482299;--theme-danger-80: #f24822CC;--theme-shadow-color: #33333333}html{background:var(--theme-white-color)}.markdown{width:100%;height:auto;line-height:1.6}.markdown code{font-family:Fira Mono,DejaVu Sans Mono,Menlo,Consolas,Liberation Mono,Monaco,Lucida Console,monospace;padding:2px .3em;margin:0 .1em;color:var(--theme-main-darken);border-radius:.3em;border:1px solid var(--theme-dark-40)}.markdown :is(a,a:visited){text-decoration:none}.loader{width:65px;aspect-ratio:1;--g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#fff calc(100% - 3px) 98%,#0000 101%) no-repeat;background:var(--g),var(--g),var(--g);background-size:30px 30px;animation:l10 1.5s infinite}@keyframes l10{0%{background-position:0 0,0 100%,100% 100%}25%{background-position:100% 0,0 100%,100% 100%}50%{background-position:100% 0,0 0,100% 100%}75%{background-position:100% 0,0 0,0 100%}to{background-position:100% 100%,0 0,0 100%}}.error{color:var(--theme-danger-color)}.loading{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.12rem;color:var(--theme-main-color);font-weight:700;animation:flash 1.35s linear infinite;letter-spacing:.3em;font-style:italic}@keyframes flash{0%{opacity:.2}20%{opacity:1}80%{opacity:1}to{opacity:.2}}.common-select-button{outline:none;border-radius:3px;border:1px solid var(--theme-dark-80);background-color:transparent;display:inline-flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;color:var(--theme-dark-color)}.common-select-button:not(:disabled){cursor:pointer}.common-select-button:not(:disabled):hover{box-shadow:0 0 0 1px var(--theme-main-color)}.common-select-text{width:calc(100% - 1.2em);height:1.2em;text-align:left;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.common-select-icon{width:1.2em;height:1.2em;flex:0 0 auto;display:flex;align-items:center}.common-select-empty{color:var(--theme-dark-40)}.common-select-popover{outline:none;border:none;margin:0;padding:0;position:fixed}.common-select-list{background-color:var(--theme-white-darken);border:1px solid var(--theme-dark-40);color:var(--theme-dark-color);padding:1px 2px;border-radius:3px}.common-select-item{-webkit-user-select:none;user-select:none;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.common-select-item:hover{background-color:var(--theme-main-lighten)}.common-select-value{color:var(--theme-main-darken)}.common-layout-toast{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none}.common-element-toast-error{background-color:var(--theme-danger-color)}.common-element-toast-error:after{background-color:var(--theme-danger-color)}.common-element-toast-info{background-color:var(--theme-main-color);color:var(--theme-dark-color)!important}.common-element-toast-info:after{background-color:var(--theme-main-color)}.common-element-toast{width:280px;height:80px;position:absolute;border-radius:.3rem;color:var(--theme-white-lighten);right:20px;display:flex;font-size:.9em;padding:5px 15px 15px;flex-direction:column;align-items:flex-start;justify-content:center;--fadeout-time: .4s;animation:toast-fadeout ease-out var(--fadeout-time) forwards;animation-delay:calc(var(--aniduration) - var(--fadeout-time));box-shadow:.3rem .3rem .3rem var(--theme-shadow-color)}.common-element-toast:before{content:" ";position:absolute;left:15px;bottom:4px;width:250px;height:7px;border-radius:4px;background-color:var(--theme-white-color);opacity:.6}.common-element-toast:after{content:" ";position:absolute;left:15px;bottom:4px;width:0;height:7px;opacity:.9;border-radius:4px;animation-name:toast-countdown;animation-timing-function:linear;animation-fill-mode:forwards;animation-duration:calc(var(--aniduration) - var(--fadeout-time))}@keyframes toast-countdown{0%{width:0}to{width:250px}}@keyframes toast-fadeout{0%{right:20px;opacity:1}to{right:-320px;opacity:.2}}#app{min-width:1024px;height:auto;min-height:max(600px,37.5vw,100vh);display:grid;grid-template:"view" 400px "form" 1fr}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.intro{width:54rem;max-width:54rem;max-height:60rem;display:flex;position:absolute;padding:2rem;flex-direction:column;align-items:center;overflow-y:auto;background-color:var(--theme-main-color);left:calc((max(100vw,1024px) - 54rem)/2);top:50%;transform:translateY(-50%)}.intro .how{display:none;padding:20px;color:var(--theme-dark-color)}.intro .why{padding:20px;color:var(--theme-dark-color)}.intro .desc li{margin:10px;line-height:2}.intro .markdown{--theme-main-darken: var(--theme-danger-color);--theme-dark-40: var(--theme-dark-color)}.intro button{padding:10px 18px;background:var(--theme-white-color);color:var(--theme-dark-color);border:none;outline:none;letter-spacing:3px;font-size:1.1rem;border-radius:10px;cursor:pointer}.intro button:hover{color:var(--theme-danger-color)}.view{grid-area:view;display:flex;align-items:center;justify-content:space-around}.view :is(.ref h3,.preview h3){margin:7px 0}.view .refhead{width:100%;display:flex;align-items:center;justify-content:space-between}.view canvas{background:var(--theme-dark-20)}.formcurve{grid-area:form;display:flex;align-items:center;justify-content:space-around}.formcurve h3{margin:.5rem 0}.formcurve .form{width:50%;display:flex;flex-direction:column;align-items:center}.formcurve .form form{min-width:250px;width:20rem}.formcurve .form .field{width:100%;display:inline-flex;flex-direction:row;align-items:center;justify-content:start;margin:.5rem 0}.formcurve .form .field .label{width:60%}.formcurve .form .field .input{width:40%}.formcurve .form .field .input input{width:100%;background:transparent;outline:none;border:solid 1px var(--theme-dark-20);padding:.25rem .2rem}.formcurve .form .field .input input:is(:hover,:focus){border-color:var(--theme-main-color);color:var(--theme-danger-color)}.formcurve .curve{width:50%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.formcurve .curve .chart{width:24rem;height:12rem}.formcurve .curve svg{width:100%;height:100%;transform:scaleX(2)}