:root{--category-selection-width: 100px}#loading,#main-noscript,#newskin{position:absolute;background:var(--background);top:0;left:0;width:100vw;height:100vh;overflow:hidden;text-align:center;padding-top:50vh;z-index:99999999999999;transition:all ease 1s}#newskin,#newskin button{z-index:999999999999999;font-size:x-large;padding-top:0}#newskin.hidden{top:100vh}#loading.hidden,#newskin.hidden,#existing-skin-form.hidden{opacity:0;z-index:0}#viewer{background:var(--background)}#container{width:100vw;height:100vh;overflow:hidden}#options{display:grid;grid:1fr / var(--category-selection-width) 1fr;height:100vh;overflow:hidden}#options-left{overflow-y:auto;overflow-x:hidden;max-height:100%}.category-form{display:grid;grid:auto 1fr min-content / 100%;max-height:100vh;height:100%}.category-form:has(.active-subcategory){grid-template-rows:auto 1fr 3fr}.category-form:has(.active-subcategory:has(.active-subcategory)){grid-template-rows:auto 1fr 4fr}.showcase-list{overflow-y:scroll;max-height:90vh}.subcategory-container{overflow:hidden}#category-selector{padding:0;margin:0}#slimness-selector{display:grid;grid:1fr / 1fr 1fr;padding-left:0}input[name=slimness]{appearance:none;aspect-ratio:1/1;margin:1px;border-radius:2px;background-color:var(--button)}#slisnt{background-image:url(/images/slisnticon.png);background-repeat:no-repeat;background-size:cover;background-position:center}#slim{background-image:url(/images/slimicon.png);background-repeat:no-repeat;background-size:cover;background-position:center}#slim,#slisnt{min-width:44px;min-height:44px}input[name=slimness]:checked{background-color:var(--selected)}#selection-panel{background:var(--secondary-background)}.raw-option-select,.raw-move-controls{display:none}.showcase-option-container{display:inline-block;min-width:64px;height:128px;vertical-align:top;margin-right:2px;text-align:center}.showcase-option-label{overflow:hidden;max-height:64px;display:inline-block}.suboption-color-input-group-container{position:relative}.suboption-color-input-group-subcontainer{margin-left:16px;padding-left:20px;border-left:solid var(--button-border-dark) 2px;border-radius:16px}.connect-suboptions-colors{width:28px;height:28px;appearance:none;position:absolute;left:0;top:calc(50% - 14px)}.connect-suboptions-colors:before{content:"🔓"}.connect-suboptions-colors:checked:before{content:"🔒"}#export-button{position:absolute;bottom:4px;left:4px}#drawing-container>iframe{width:100%;height:100%}#newskin:has(#existing-skin-form:not(.hidden)){display:grid;grid-template-rows:130px calc(100vh - 200px);padding-top:0}#existing-skin-decoding-error{color:red}@media (orientation: landscape){@media screen and (min-width: 768px){#container{display:grid;grid-template-columns:25% auto;transition:.1s}#container:has(#custom-changes-selector.selected){grid-template-columns:calc(100vw - var(--category-selection-width)) var(--category-selection-width)}#container:has(#custom-changes-selector.selected) #options{width:var(--category-selection-width)}body:has(#custom-changes-selector.selected) #export-button{left:180px}#show-options-button{display:none}#options{background:var(--background)}.category-top:has(.move-controls-container):has(.shown-color-selector){display:grid;grid:auto / 1fr 1fr}}@media screen and (max-width: 769px){#container{display:block}#viewer{width:100vw;height:100vh}#drawing-container{width:calc(100vw - var(--category-selection-width));height:100vh}#options{position:absolute;top:0;transition:all .3s ease;background-color:var(--secondary-background);height:90vh}#slimness-selector{background-color:var(--solid-background);padding:4px}#selection-panel{max-width:calc(100% - var(--category-selection-width))}#options:not(.shown){right:-512px;width:512px}#options.shown{right:calc(-1 * var(--category-selection-width));min-width:384px;width:50%}#show-options-button{position:absolute;bottom:.5em;right:.5em;font-size:32pt;z-index:1}#export-button,#show-options-button{transition:all ease .1s}body:has(#custom-changes-selector.selected) #export-button{left:104px;bottom:4px;right:initial}body:has(#custom-changes-selector.selected) #show-options-button{display:none}body:has(#custom-changes-selector.selected) #options{left:calc(100vw - var(--category-selection-width));height:100vh;background:var(--secondary-background)}}}@media (orientation: portrait){#newskin>div>div>*{display:inline-block;margin-bottom:1em;padding:8px}#newskin:has(#existing-skin-form:not(.hidden)),#newskin:has(#existing-skin-form:not(.hidden)) button{font-size:large}#existing-skin-form{margin-top:1em;font-size:largest}@media screen and (min-height: 768px){#container{display:grid;grid-template-rows:50% auto;transition:all .1s ease}#container:has(#custom-changes-selector.selected){grid-template-rows:calc(100vh - 32px) 32px}#show-options-button{display:none}#options{background:var(--background);grid:32px 1fr / 1fr;height:100%}#options-left{overflow-y:visible;overflow-x:auto;max-width:100%;position:relative}#category-selector li{display:inline;margin-right:1px}#slimness-selector{position:fixed;bottom:50%;left:0;width:100px}#container:has(#custom-changes-selector.selected) #slimness-selector{left:initial;right:2px;bottom:116px}.showcase-list{overflow-y:visible;max-height:none}#selection-panel{overflow-y:auto}#export-button{right:4px;left:initial;bottom:calc(50% + 4px)}body:has(#custom-changes-selector.selected) #export-button{left:104px;bottom:36px;right:initial}}@media screen and (max-height: 769px){#container{display:block}#viewer{width:100vw;height:100vh}#drawing-container{width:calc(100vw - var(--category-selection-width));height:100vh}#options{position:absolute;top:0;transition:all .3s ease;background-color:var(--secondary-background);height:90vh}#slimness-selector{background-color:var(--solid-background);padding:4px}#selection-panel{max-width:calc(100% - var(--category-selection-width))}#options:not(.shown){right:-512px;width:512px}#options.shown{right:calc(-1 * var(--category-selection-width));min-width:384px;width:50%}#show-options-button{position:absolute;bottom:.5em;right:.5em;font-size:32pt;z-index:1}#export-button,#show-options-button{transition:all ease .1s}body:has(#custom-changes-selector.selected) #export-button{left:104px;bottom:4px;right:initial}body:has(#custom-changes-selector.selected) #show-options-button{display:none}body:has(#custom-changes-selector.selected) #options{left:calc(100vw - var(--category-selection-width));height:100vh;background:var(--secondary-background)}}}