@font-face{font-family:Menlo;src:url(/assets/Menlo-Regular-DOBKUm_p.ttf) format("truetype");font-weight:400;font-style:sans-serif}:root{--primary-color: #323232;--secondary-color: #8d8b8b;--background-color: #90909093;--text-color: #fff;--ui-radius: 0px;--backdrop-blur: 5px;--dropdown-width: 100px;--dropdown-border-padding: 5px;--toggle-height: 20px;--toggle-width: 50px;--toggle-thumb-width: 20px;--slider-thumb-size: 20px}body,html{margin:0;padding:0;overflow:hidden;font-family:Menlo}div,img,p,h1,h2,h3,h4{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;margin:0;padding:0}canvas{width:100vw;height:100vh}.button{color:var(--text-color);background-color:none;transition:background-color .2s ease;padding:4px 9px}.button:hover{color:#fff;background-color:var(--primary-color)}.button-wrapper{padding:2px;cursor:pointer;border-radius:var(--ui-radius);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color)}.not-supported-background{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:5;object-fit:cover;filter:blur(var(--backdrop-blur));display:none}.not-supported-content{padding:2.5%;z-index:6;position:absolute;height:fit-content;width:300px;max-height:90vh;max-width:90vw;top:50%;left:50%;transform:translate(-50%,-50%);gap:20px;color:var(--text-color);flex-direction:column;align-items:center;text-align:justify;border-radius:var(--ui-radius);background-color:var(--background-color);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color);display:none}.controls{opacity:0;padding:2.5%;position:absolute;display:flex;width:300px;max-height:90vh;max-width:90vw;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-color);backdrop-filter:blur(var(--backdrop-blur));align-items:center;text-align:justify;border-radius:var(--ui-radius);background-color:var(--background-color);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color);flex-direction:column;gap:30px;transition:opacity .6s ease}.controls-entry{width:100%;display:flex;align-items:center;justify-content:space-between}.controls-entry-left{width:30px}.settings{opacity:0;backdrop-filter:blur(var(--backdrop-blur));position:absolute;top:0;right:0;padding:20px;margin:20px;width:auto;display:flex;flex-direction:column;align-items:center;color:var(--text-color);text-align:center;gap:20px;transition:height .2s ease,opacity .6s ease;border-radius:var(--ui-radius);background-color:var(--background-color);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color)}.settings-source-code-link-wrapper{background-color:var(--background-color);position:absolute;padding:2px;cursor:pointer;border-radius:var(--ui-radius);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color);transition:top .2s ease}.settings-source-code-link{font-size:smaller;color:var(--text-color);border-radius:var(--ui-radius);padding:4px 9px;background-color:#0000;transition:background-color .2s ease}.settings-source-code-link:hover{background-color:var(--primary-color)}.fps-counter{backdrop-filter:blur(var(--backdrop-blur));position:absolute;top:20px;left:20px;background-color:var(--background-color);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color);border-radius:var(--ui-radius);padding:10px;opacity:0;transition:opacity .2s ease;color:var(--text-color)}.fps-counter.active{opacity:1}.selector-wrapper{position:relative;width:auto;height:auto;gap:5px;padding:4px;background-color:#fff0;border:2px solid var(--primary-color);border-radius:var(--ui-radius);display:flex;flex-direction:row;box-shadow:4px 4px var(--primary-color)}.selector-button{position:relative;padding:4px 12px;cursor:pointer;z-index:1;border-style:none;border-radius:var(--ui-radius);background-color:#0000;color:var(--text-color);transition:background-color .2s ease,color .2s ease}.selector-button-highlight{position:absolute;top:0;left:0;width:auto;background-color:var(--primary-color);border-radius:var(--ui-radius);transition:all .2s ease;z-index:0;pointer-events:none}.selector-button.active{color:var(--text-color)}.dropdown-wrapper{width:var(--dropdown-width);position:relative;height:40px;overflow:visible}.dropdown-option{width:var(--dropdown-width);position:absolute;right:0;top:0;opacity:0;transition:transform .2s ease,opacity .2s ease;pointer-events:none;z-index:0;padding:4px 12px;cursor:pointer;border-style:none;border-radius:var(--ui-radius);background-color:var(--primary-color);color:var(--text-color)}.dropdown-option.selected,.dropdown-option.open{opacity:1;pointer-events:auto}.dropdown-option-border{height:33px;width:calc(var(--dropdown-width) + calc(var(--dropdown-border-padding) * 2));position:absolute;right:calc(-1 * var(--dropdown-border-padding));top:calc(-1 * var(--dropdown-border-padding));border:2px solid var(--primary-color);border-radius:calc(var(--ui-radius) / 2);transition:height .2s ease;box-sizing:border-box;box-shadow:4px 4px var(--primary-color);background-color:var(--secondary-color)}.toggle-switch{position:relative;display:inline-block;width:var(--toggle-width);height:var(--toggle-height)}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;border-radius:var(--ui-radius);background-color:var(--text-color);transition:.4s}.toggle-slider:before{position:absolute;border-radius:var(--ui-radius);content:"";height:var(--toggle-height);width:var(--toggle-thumb-width);left:0;background-color:var(--primary-color);transition:.4s}input:checked+.toggle-slider{background-color:var(--secondary-color)}input:checked+.toggle-slider:before{transform:translate(calc(var(--toggle-width) - var(--toggle-thumb-width)))}.sections{position:relative;width:100%;height:100%}.section{position:absolute;top:0;left:0;width:100%;height:100%;gap:26px;opacity:0;transition:opacity .5s ease;pointer-events:none;display:flex;flex-direction:column;align-items:start}.section.active{opacity:1;pointer-events:auto;z-index:1}.section-input-wrapper{width:100%;display:flex;flex-direction:column}.section-input-header{margin-left:2px;margin-bottom:9px;width:100%;display:flex;justify-content:space-between}#brush-color-slider{margin-top:10px}.slider{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;height:5px;margin-bottom:9px;border-radius:var(--ui-radius);background:var(--text-color);outline:none;transition:opacity .2s}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--ui-radius);background:var(--primary-color);cursor:pointer;transition:all .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--ui-radius);background:var(--primary-color);cursor:pointer;transition:all .2s ease}.slider::-moz-range-thumb:hover{transform:scale(1.2)}.brush-shape-container{width:100%;display:flex;flex-direction:column}.brush-shape-images{display:flex;width:100%;gap:10px;justify-content:space-between}.brush-shape-image{width:40px;transition:all .2s ease;cursor:pointer}.brush-shape-image:hover{transform:scale(1.2)}.brush-material-wrapper{margin-left:2px;width:100%;display:flex;justify-content:space-between}.brush-color-swatch{width:25px;height:25px;background-color:#fff;border-radius:var(--ui-radius);border:2px solid var(--primary-color);box-shadow:4px 4px var(--primary-color)}