:root{font-family:system-ui}html{height:100%}body{--gutter: 1em;max-width:600px;margin:auto;padding-top:0;padding-bottom:0;padding-left:var(--gutter);padding-right:var(--gutter);display:grid;gap:3em;height:100%;grid-template-rows:auto 1fr auto}@media (width > 1200px){body{max-width:1200px}footer{margin-right:0!important}}section{display:grid;gap:4em}@media (width > 1200px){section{grid-template-columns:1fr 1fr}}canvas{--overflow: 15%;position:absolute;left:calc(-1 * var(--overflow));top:calc(-1 * var(--overflow));width:calc(100% + 2 * var(--overflow));height:calc(100% + 2 * var(--overflow))}@media (width < 600px){#part{display:flex;flex-direction:column;justify-content:center}canvas{--overflow: 1em}body,section{gap:2em}}main{display:flex;max-height:30em;flex-direction:column;justify-content:space-between}@media (width > 900px){main{border-radius:1px;outline-offset:-2px}}header{font-family:Kanit;font-size:2em}header h1{margin-left:-.03125em}footer{text-align:center}#canvas-container{height:30em;position:relative}@media (width < 600px){#canvas-container{height:20em}}#flip{margin-top:1em;display:block;height:2em;width:100%}.range-input-wrapper{display:flex;gap:1em}.range-input-wrapper+.range-input-wrapper{padding-top:2em}.range-input-wrapper label{min-width:3em}.range-input-wrapper input[type=number]::selection{background-color:#ddd}.range-input-wrapper input[type=range]{margin:0}.range-input-wrapper input[type=range]{-webkit-appearance:none;width:100%;background:transparent}.range-input-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.range-input-wrapper input[type=range]:focus{outline:none}.range-input-wrapper input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.range-input-wrapper{--thumb-height: 1em;--thumb-fill: white;--thumb-stroke: black;--thumb-stroke-width: .2em}@media (hover: none){.range-input-wrapper{--thumb-height: 2em}}.range-input-wrapper input[type=range]::-webkit-slider-thumb{outline:var(--thumb-stroke-width) solid var(--thumb-stroke);aspect-ratio:1;height:var(--thumb-height);border-radius:50%;background-color:var(--thumb-fill);cursor:pointer;margin-top:calc(-1 * var(--thumb-height) / 2)}.range-input-wrapper input[type=range]::-moz-range-thumb{border:var(--thumb-stroke-width) solid var(--thumb-stroke);height:var(--thumb-height);width:var(--thumb-height);border-radius:50%;background-color:var(--thumb-fill);cursor:pointer}.range-input-wrapper input[type=range]::-ms-thumb{border:var(--thumb-stroke-width) solid var(--thumb-stroke);aspect-ratio:1;height:var(--thumb-height);border-radius:50%;background-color:var(--thumb-fill);cursor:pointer}.range-input-wrapper{--track-height: var(--thumb-stroke-width)}.range-input-wrapper input[type=range]::-webkit-slider-runnable-track{height:var(--track-height);background:#000;border-radius:5px;border:.2px solid #010101}.range-input-wrapper input[type=range]:focus::-webkit-slider-runnable-track{background:#000}.range-input-wrapper input[type=range]::-moz-range-track{height:var(--track-height);cursor:pointer;background:#000;border-radius:5px;border:.2px solid #010101}.range-input-wrapper input[type=range]::-ms-track{height:var(--track-height);cursor:pointer;border-width:16px 0}.range-input-wrapper input[type=range]::-ms-fill-lower{background:#2a6495;border:.2px solid #010101;border-radius:5px}.range-input-wrapper input[type=range]:focus::-ms-fill-lower{background:#000}.range-input-wrapper input[type=range]::-ms-fill-upper{background:#000;border:.2px solid #010101;border-radius:2.6px}.range-input-wrapper input[type=range]:focus::-ms-fill-upper{background:#000}.range-input-value input::-webkit-outer-spin-button,.range-input-value input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.range-input-value input[type=number]{-moz-appearance:textfield}.range-input-value input{padding:0;flex-grow:1;text-align:right;font-size:1.2em;border:0;font-weight:700}.range-input-value{display:flex;gap:.3em;align-items:center}.range-input-value:after{content:"mm"}.stepper-input-value input::-webkit-outer-spin-button,.stepper-input-value input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper-input-value input[type=number]{-moz-appearance:textfield}.stepper-input-value input{padding:0;flex-grow:1;text-align:center;font-size:1.2em;border:0;font-weight:700}.stepper-input-wrapper+.range-input-wrapper{padding-top:2em}.stepper-input-wrapper{display:flex;gap:1em;align-items:center}.stepper-input-wrapper label{min-width:3em}.stepper-input-wrapper button{background:none;border:none;cursor:pointer;padding:0;color:inherit}.stepper-input-wrapper button:disabled{color:#a9a9a9}.stepper-input-wrapper button:hover:not(:disabled)>svg{transform:scale(1.2)}.stepper-input-wrapper svg{stroke-width:.15em;height:1.4em}.stepper-input-wrapper button:active svg{stroke-width:.2em}.download{--fore: white;--back: black;--outline: transparent;margin-top:2em;display:block;text-align:center;padding:1em;text-transform:uppercase;color:var(--fore);background-color:var(--back);font-size:1.2em;font-weight:700;outline:2px solid var(--outline)}.download:hover{--fore: black;--back: white;--outline: black}.download,.download:visited{text-decoration:none}footer{max-width:600px;margin-left:auto;margin-right:auto;padding-bottom:1em;padding-top:2em}footer a:link,footer a:visited{text-decoration:underline;color:#000}footer a svg{vertical-align:middle}footer a:hover{color:#aaa}footer a:link,footer a:visited{text-decoration:none}footer a:hover{text-decoration:underline}footer a:has(svg):hover{text-decoration:none}footer ul{margin:0;padding:0;list-style-type:none;display:flex;gap:.6em;align-items:center;justify-content:space-around}