:root{--opacity-1: .87;--opacity-2: .6;--opacity-3: .38;--foreground-color-1: rgba(255, 255, 255, var(--opacity-1));--foreground-color-2: rgba(255, 255, 255, var(--opacity-2));--foreground-color-3: rgba(255, 255, 255, var(--opacity-3));--title-size: clamp(16px, 2vw, 32px);--body-size: clamp(12px, 1.5vw, 20px);--image-size: clamp(40px, 5vw, 60px);--large-spacing: clamp(32px, 4.5vw, 56px);--medium-spacing: clamp(20px, 2.5vw, 32px);--small-spacing: clamp(8px, 1vw, 12px);--tiny-spacing: clamp(4px, .5vw, 6px);--input-height: clamp(24px, 3vw, 36px);--light-background-color: rgba(255, 255, 255, .1);--lighter-background-color: rgba(255, 255, 255, .2);--lightest-background-color: rgba(255, 255, 255, .5);--dark-background-color: rgba(0, 0, 0, .2);--darker-background-color: rgba(0, 0, 0, .5);--darkest-background-color: rgba(0, 0, 0, .9);--large-radius: 5px;--medium-radius: 2px;--small-radius: 1px}labeled-element{display:flex;flex-direction:column;margin-bottom:var(--medium-spacing)}labeled-element>label{white-space:pre;margin-bottom:var(--tiny-spacing)}labeled-element[inline-label]{flex-direction:row;align-items:center;gap:var(--small-spacing)}labeled-element[inline-label]>label{margin-bottom:0}labeled-element>.labeled{flex:1}labeled-element[margin=less]{margin-bottom:var(--small-spacing)}labeled-element[margin=lesser]{margin-bottom:var(--tiny-spacing)}labeled-element[margin=least]{margin-bottom:0}toggle-element{width:100%;display:flex;justify-content:flex-end;height:var(--medium-spacing)}toggle-element>button{all:unset;width:100%;background-color:var(--light-background-color);width:calc(var(--medium-spacing) * 2);height:var(--medium-spacing);border-radius:calc(var(--medium-spacing) / 2);position:relative;display:inline-block}toggle-element>button>.handle{background-color:var(--lightest-background-color);width:calc(var(--medium-spacing) * .9);height:calc(var(--medium-spacing) * .9);border-radius:50%;position:absolute;top:50%;left:0;transform:translateY(-50%);transition:transform .15s ease-out,background-color .15s ease-out,border .15s ease-out}toggle-element>button[aria-checked=false]>.handle{transform:translate(calc(var(--medium-spacing) * .1)) translateY(-50%);border:1.5px solid var(--lightest-background-color);background-color:transparent}toggle-element>button[aria-checked=true]>.handle{transform:translate(calc(100% + var(--medium-spacing) * .1)) translateY(-50%);background-color:var(--lightest-background-color);border:none}slider-element{margin-left:var(--small-spacing);gap:var(--medium-spacing);align-items:center;-webkit-user-select:none;user-select:none;display:flex}slider-element>.track{flex:1;position:relative;height:var(--small-spacing);background:var(--light-background-color);border-radius:calc(var(--small-spacing) / 2);cursor:pointer}slider-element>.track>.thumb{position:absolute;top:50%;border-radius:50%;width:calc(var(--small-spacing) * 1.5);height:calc(var(--small-spacing) * 1.5);background:var(--lightest-background-color);transform:translate(-50%,-50%);transition:left .1s ease-out}slider-element.dragging>.track>.thumb{transition:none}slider-element:not(.connected)>.track .thumb{transition:none}slider-element>span{white-space:pre;text-align:right}dropdown-element{position:relative;width:100%}dropdown-element>button{width:100%;text-align:left;margin-bottom:0!important}dropdown-element>ul{display:none;list-style:none;position:absolute;top:100%;left:0;width:100%;margin:0;padding:0;background-color:var(--darkest-background-color);border-left:1px solid var(--lighter-background-color);border-right:1px solid var(--lighter-background-color);border-bottom:1px solid var(--lighter-background-color);border-bottom-left-radius:var(--medium-radius);border-bottom-right-radius:var(--medium-radius);max-height:200px;overflow-y:auto;z-index:999}dropdown-element>ul>li{padding:var(--tiny-spacing) var(--small-spacing);transition:background-color .1s ease-out;background-color:transparent;cursor:pointer}dropdown-element>ul>li:hover{background-color:var(--lighter-background-color)}color-picker-element{background-color:var(--light-background-color);padding:var(--small-spacing);display:flex;flex-direction:column}color-picker-element>.presets{display:grid;gap:var(--small-spacing);grid-template-columns:repeat(auto-fill,var(--medium-spacing));justify-content:space-between}color-picker-element>.presets:has(*){padding:var(--small-spacing)}color-picker-element>.presets>button{border-radius:var(--large-radius);width:var(--medium-spacing);height:var(--medium-spacing);padding:0;margin:0}color-picker-element>.sliders{display:flex;flex-direction:column;gap:var(--tiny-spacing)}color-picker-element>.sliders:has(*){padding:var(--small-spacing)}color-picker-element>.sliders>slider-element{margin-bottom:0}sprite-selector-element{display:flex;gap:var(--medium-spacing);background-color:var(--light-background-color);padding:var(--medium-spacing)}sprite-selector-element>.sprite-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--image-size),1fr));grid-auto-rows:var(--image-size);gap:var(--small-spacing)}sprite-selector-element>.sprite-grid>img{object-fit:contain;background-color:var(--light-background-color);border-radius:var(--medium-radius);width:var(--image-size);height:var(--image-size);-webkit-user-select:none;user-select:none;cursor:pointer}sprite-selector-element>.sprite-grid>img:hover{background-color:var(--lighter-background-color)}sprite-selector-element>.sprite-grid>img.selected{outline:2px solid var(--lightest-background-color)}sprite-selector-element>.sprite-editor{align-self:flex-end;display:flex;flex-direction:column;width:200px}sprite-selector-element .canvas-wrapper{width:200px;height:200px;border-radius:var(--large-radius);background-color:var(--darker-background-color);margin-bottom:var(--small-spacing)}sprite-selector-element ol.controls{display:flex;list-style:none;justify-content:space-evenly;width:200px;gap:var(--small-spacing);margin:0;padding:0}sprite-selector-element ol.controls>li{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;background-color:var(--light-background-color);border-radius:var(--medium-radius)}sprite-selector-element ol.controls>li:hover{background-color:var(--lighter-background-color)}::-webkit-scrollbar{width:var(--small-spacing);height:var(--small-spacing)}::-webkit-scrollbar-track{background:var(--light-background-color);border-radius:calc(var(--small-spacing) / 2)}::-webkit-scrollbar-thumb{background:var(--lighter-background-color);border-radius:calc(var(--small-spacing) / 2)}::placeholder{color:var(--lighter-background-color);opacity:1}*,*:before,*:after{box-sizing:border-box}.tippy-box{font-family:Monaspace Radon,monospace;font-size:var(--body-size)}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:relative;font-size:var(--body-size);font-family:Monaspace Neon,monospace;font-feature-settings:"calt" 1;color:var(--foreground-color-1)}input,textarea,select,button{font:inherit;font-size:inherit;font-feature-settings:inherit;appearance:none;flex-shrink:0;color:inherit}a{color:var(--lightest-background-color)}#starfield{width:100%;height:100%;position:absolute;top:0;left:0;z-index:0}main{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;display:flex;padding:var(--medium-spacing)}main>#editor{width:0%;display:none;flex-direction:column;border-top-left-radius:var(--large-radius);border-bottom-left-radius:var(--large-radius);background-color:var(--darker-background-color);padding:var(--medium-spacing)}main.editing>#editor{display:flex;width:calc(200% / 3)}#stepper{list-style:none;padding-inline-start:0;flex:0 0 auto;display:flex;margin-top:0;margin-bottom:var(--medium-spacing);gap:var(--small-spacing);justify-content:center}#stepper>.icon{border-radius:50%;background:var(--light-background-color);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;opacity:1}#stepper>.icon.active{background-color:var(--lighter-background-color)}#scroller{position:relative;flex:1;overflow:hidden;min-height:0}#track{display:flex;height:100%;width:100%;transition:transform .35s cubic-bezier(.22,1,.36,1)}.step{flex:0 0 100%;height:100%;display:flex;flex-direction:column;min-height:0;padding-left:var(--small-spacing);padding-right:var(--small-spacing)}.step>.title{font-size:var(--title-size);font-weight:bolder;font-family:Monaspace Argon,monospace;margin-bottom:var(--medium-spacing);padding-left:var(--small-spacing);padding-right:var(--small-spacing)}.step>.scroller{flex:1;min-height:0;display:flex;overflow-x:hidden;overflow-y:auto;flex-direction:column;padding-bottom:var(--small-spacing);padding-left:var(--small-spacing);padding-right:var(--medium-spacing)}.step>.wrapper{flex:1;min-height:0;display:flex;overflow-x:hidden;overflow-y:hidden;padding-bottom:var(--small-spacing);padding-left:var(--small-spacing)}.step>.footer{margin-top:var(--medium-spacing)}input[type=text],textarea{width:100%;border:none;outline:none;border-radius:var(--medium-radius);background-color:var(--light-background-color);padding:var(--tiny-spacing) var(--small-spacing);font-family:Monaspace Radon,monospace}textarea{resize:none}button{border:none;outline:none;border-radius:var(--medium-radius);transition:background-color .1s ease-out;background-color:var(--light-background-color);padding:var(--tiny-spacing) var(--small-spacing);cursor:pointer}button:hover{background-color:var(--lighter-background-color)}main>#canvas{height:100%;border-top-left-radius:var(--large-radius);border-bottom-left-radius:var(--large-radius);border-top-right-radius:var(--large-radius);border-bottom-right-radius:var(--large-radius);width:100%}main.editing>#canvas{width:calc(100% / 3);border-top-left-radius:0;border-bottom-left-radius:0}#export-preview-panel{flex:2;width:fit-content;height:100%;display:flex;flex-direction:column;margin-right:var(--small-spacing)}#export-preview-panel .title{margin-bottom:var(--small-spacing)}#export-preview-wrapper{width:100%;display:flex;justify-content:center}#export-preview{width:150px;height:150px;outline:2px solid var(--light-background-color);border-radius:var(--large-radius);margin-bottom:var(--small-spacing)}#export-scroller{flex:3;overflow-x:hidden;overflow-y:auto;padding-bottom:var(--small-spacing);padding-left:var(--small-spacing);padding-right:var(--medium-spacing)}.secondary{color:var(--foreground-color-2)}#randomize{background-color:transparent;outline:1px solid var(--lighter-background-color)}#randomize:hover{background-color:var(--light-background-color)}@font-face{font-family:Monaspace Neon;font-style:normal;font-display:swap;font-weight:400;src:url(./monaspace-neon-latin-400-normal-BZtV1wRa.woff2) format("woff2"),url(./monaspace-neon-latin-400-normal-DVFelWsN.woff) format("woff")}@font-face{font-family:Monaspace Argon;font-style:normal;font-display:swap;font-weight:400;src:url(./monaspace-argon-latin-400-normal-RS-2TGNg.woff2) format("woff2"),url(./monaspace-argon-latin-400-normal-DZUN4ACH.woff) format("woff")}@font-face{font-family:Monaspace Radon;font-style:normal;font-display:swap;font-weight:400;src:url(./monaspace-radon-latin-400-normal-cKFKxzQi.woff2) format("woff2"),url(./monaspace-radon-latin-400-normal-BQDA7i8O.woff) format("woff")}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}