*{margin:0;padding:0;font-family:px,sans-serif;font-weight:300;box-sizing:border-box}@font-face{font-family:px;src:url(/assets/Px-Grotesk-Light-DbLtESs4.woff2);font-style:normal}body{overflow:hidden;display:flex;justify-content:center;align-items:center;height:100vh}header{position:fixed;z-index:2;width:300px;display:flex;flex-direction:column;height:100vh;justify-content:flex-start;gap:20px}header#header-settings{top:0;left:0;padding:20px 0 20px 20px}header#header-export{top:0;right:0;padding:20px 20px 20px 0}div#settings,div#render-settings{background:#fff;padding:24px 30px;border:solid 1px black;border-radius:5px;overflow-y:scroll}div#settings::-webkit-scrollbar,div#render-settings::-webkit-scrollbar{display:none}div#settings div.settings-wrapper:not(:last-child){margin-bottom:30px}div.title{margin-bottom:10px;width:100%;border-bottom:solid 1px black;padding-bottom:5px;display:flex;justify-content:space-between}div.input-wrapper{margin-bottom:10px;display:flex;align-items:center}div.input-wrapper:last-child{margin-bottom:0}div.input-wrapper label{margin-right:15px;flex-shrink:0}div.input-number{display:flex;align-items:center;justify-content:flex-end}div.input-number button{font-size:10px;padding:5px 0;width:30px;border-width:1px;flex-shrink:0}input[type=number]{border:solid 1px black;padding:0 5px;margin-right:8px;max-width:85px;height:22px;border-radius:4px}input[type=color]{-webkit-appearance:none;border:none;width:16px;height:16px;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:50%;border:none}input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1px;outline:none;border-radius:30px;cursor:pointer;background:#000}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;background:#000;border-radius:50%;outline:none}select{outline:none;width:100%;padding:1px 10px;border:1px solid black;font-size:16px;border-radius:100px}div.input-wrapper:has(input[disabled]){opacity:.25}div.switch{margin-left:15px;cursor:pointer;width:30px;height:18px;border-radius:50px;display:flex;align-items:center;padding:0 4px;justify-content:flex-start;background:#fff;border:solid 1px black}div.switch div{width:10px;height:10px;background:#000;border-radius:50%;opacity:.35}div.switch.on{justify-content:flex-end}div.switch.on div{opacity:1}button{padding:10px 20px;background:#fff;border-radius:50px;border:1.5px solid black;font-size:19px;font-family:px,sans-serif;font-weight:300;cursor:pointer;width:100%}header div#settings-buttons{display:flex;flex-direction:column;gap:5px}div#export-buttons{gap:5px;display:flex;flex-direction:column;z-index:2}div#canvas-wrapper{position:fixed;top:0;left:0;z-index:1;display:none;width:100vw;height:100vh;align-items:center;justify-content:center}canvas{width:100%;height:100%}@media all and (max-width: 800px){header{width:280px;padding:10px 0 10px 10px;transform-origin:top left;gap:10px}div#export-buttons{top:10px;right:10px}div#settings{padding:15px 20px}div#export-buttons,header div#settings-buttons{gap:3px}header,div#export-buttons{transform:scale(.7)}header button,div#export-buttons button{font-size:16px;padding:7px 15px}div#export-buttons{transform-origin:top right}}