*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;max-height:100%;overflow:hidden}body{--accent:#eb5b33;--text-color:white;--border-color:#787878;--background-components:#ececec1a;--background-blur:blur(10px);--radius:10px;background-image:url(/src/assets/galaxy.jpg)}canvas{display:block;position:absolute}main{background-color:#000;grid-template-rows:1fr 1fr;grid-template-columns:100%;height:100%;min-height:0;max-height:100vh;padding:0;font-family:Varela Round,sans-serif;display:grid}@media (width>=1000px){main{grid-template-rows:100%;grid-template-columns:1fr 1fr;padding:2rem}}.component-picker{border:1px solid var(--border-color);border-radius:var(--radius);max-height:100%;-webkit-backdrop-filter:var(--background-blur);backdrop-filter:var(--background-blur);color:var(--text-color);background-color:var(--background-components);scrollbar-color:var(--text-color) var(--background-components);flex-direction:column;grid-area:1/2/2/3;place-self:start end;align-items:center;gap:1.5em;padding:1.5em;display:flex}@media (width<=1000px){.component-picker{grid-area:2/1/3/2;place-self:end center;width:100vw}}.component-picker hgroup{text-align:center;anchor-name:--component-picker;width:100%}.component-picker h2{text-transform:uppercase;letter-spacing:-.5px;font-size:1.5rem}.component-picker form{flex-direction:column;gap:.75em;width:100%;max-height:100%;padding-right:.5em;display:none;overflow-y:scroll}@media (height>=640px){.component-picker form{padding-right:0;overflow-y:auto}}@media (width>=1000px){.component-picker form{display:flex}}@media (width<=1000px){.component-picker .dropdown-shown{position-anchor:--component-picker;max-height:40vh;bottom:calc(anchor(top) + 2rem);display:flex;position:absolute;overflow-y:scroll}}.component-picker label{border:1px solid var(--border-color);text-transform:uppercase;background-color:#00000054;border-radius:4px;padding:.75em;transition:all .2s}.component-picker label:hover,.component-picker label:focus{border:1px solid var(--accent)}.component-picker label:has(input[type=radio]:checked){background-color:var(--accent);border:1px solid var(--accent)}.component-picker input[type=radio]{appearance:none}.info-box{width:min-content;-webkit-backdrop-filter:var(--background-blur);backdrop-filter:var(--background-blur);color:var(--text-color);background-color:var(--background-components);border-radius:var(--radius);border:1px solid var(--border-color);view-transition-name:infobox;padding:1.5rem}.info-box div,.info-box p{margin-top:1em}@media (width<=1000px){.info-box{scrollbar-color:var(--text-color) var(--background-components);flex-direction:column;align-items:center;width:100%;display:flex}.info-box div{width:100%;max-height:25vh;overflow-y:scroll}}::view-transition-group(infobox){animation-duration:.5s;animation-timing-function:ease-in}.logo{width:170px;padding:1em;display:none}@media (width>=1000px){.logo{display:block}}.wrapper{grid-area:1/1/2/2;align-self:start;max-width:100%;position:relative}.wrapper h3{text-transform:uppercase}.wrapper div{max-height:8rem}.wrapper div,.wrapper p{width:60ch;max-width:100%}@media (width>1000px){.wrapper div,.wrapper p{width:40ch;max-height:unset}}.container{pointer-events:none;opacity:1;-webkit-user-select:none;user-select:none;width:100%;transition:opacity .5s .2s,visibility .5s .2s;position:absolute;bottom:2rem}.container p{color:var(--text-color);text-align:center}.container img{pointer-events:none}.show-controls{cursor:pointer;background-color:#0000;border:none;width:3em;transition:opacity .5s .5s,visibility .5s .5s,scale .1s;position:absolute;bottom:12.5em;left:2.5em}.show-controls:hover{transition:scale .1s;scale:1.3}.show-controls svg{fill:var(--accent)}@media (width>=1000px){.show-controls{bottom:2.5em}}.hide{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s}.scroll{color:var(--text-color);text-transform:uppercase;flex-direction:row;align-items:center;gap:.9rem;margin-bottom:10rem;margin-left:1rem;display:flex}@media (width>=1000px){.scroll{margin-bottom:0;margin-left:0}}.drag{pointer-events:auto;text-transform:uppercase;position:absolute;bottom:10rem;left:50%;transform:translate(-50%)}@media (width>=1000px){.drag{bottom:0}}#jswarning{max-width:80vw;margin-bottom:1000vh;font-size:clamp(2rem,1.2308rem + 4.1026vw,4rem)}#jswarning span{color:#eb5b33;text-shadow:-2px -2px #000,2px -2px #000,-2px 2px #000,2px 2px #000,-3px 0 #000,3px 0 #000,0 -3px #000,0 3px #000;font-family:impact;font-size:clamp(4rem,3.2308rem + 4.1026vw,6rem);text-decoration-line:underline;text-decoration-style:double}