:root{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--vvw: min(1vw, 1vh * 16 / 9);--vvh: min(1vh, 1vw * 9 / 16);font-size:calc(4 * var(--vvh))}html,body{padding:0;margin:0;height:100vh;width:100vw;overflow:hidden}body{display:grid}#app{place-self:center;width:calc(100 * var(--vvw));height:calc(100 * var(--vvh));-webkit-user-select:none;user-select:none;background-color:#000;position:relative}#app .page{width:100%;height:100%;position:absolute;top:0;left:0}#canvas{width:100%;height:100%}#loading{background-color:#000}#loading.hide{visibility:hidden;transition:visibility 1s step-end}.loading-text-wrapper{position:absolute;left:2%;bottom:2%}#menu{visibility:hidden}.menu-black{opacity:0;background-color:#000;position:absolute;top:0;right:0;bottom:0;left:0}.menu-background{opacity:0;background-image:url(/menu-bg.jpg);background-size:cover;background-position:bottom;position:absolute;top:0;right:0;bottom:0;left:0}#menu.show{visibility:visible}#menu.show .menu-black{opacity:1;transition:opacity 1s ease-in}#menu.show .menu-background{opacity:1;background-position:top;transition:opacity 5s ease-in,background-position 5s ease-out;transition-delay:1s}#menu.hide{transition:visibility 2s step-end;pointer-events:none}#menu.hide .menu-black{transition:opacity 1s ease-in;transition-delay:1s}#menu.hide .menu-background{transition:opacity 1s ease-out,background-position 1s step-end}.menu-right{position:absolute;right:5%;top:40%;display:flex;flex-direction:column;align-items:end;opacity:0;transform:translateY(1rem);transition:opacity 1s step-end,transform 1s step-end}#menu.show .menu-right{opacity:1;transform:none;transition:opacity 1s ease-in,transform 1s ease-out;transition-delay:5s}#menu.hide .menu-right{transition:opacity 1s ease-out,transform 1s step-end}.menu-item{all:unset;background:none;outline:none;border:none;width:6rem;text-align:right;font-size:1rem;cursor:pointer;position:relative;transition:transform .5s,text-shadow .5s}.menu-item:not(:disabled):hover{text-shadow:0 0 5px white;transform:translate(-.5rem)}.menu-item:after{position:absolute;content:"";width:0;height:0;left:100%;opacity:0;top:35%;border-top:.25rem solid transparent;border-right:.4rem solid white;border-bottom:.25rem solid transparent;transition:opacity .5s,left .5s}.menu-item:not(:disabled):hover:after{opacity:1;left:104%}.menu-item:disabled{transform:none;opacity:.6;cursor:default}#settings{opacity:0;visibility:hidden;display:grid;background-color:#0008;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}.settings-wrapper{place-self:center;height:90%;width:90%}#settings.show{opacity:1;visibility:visible;transition:opacity .5s ease-out,visibility .5s step-start}#settings.hide{opacity:0;visibility:hidden;transition:opacity .5s ease-in,visibility .5s step-end}.settings-title{font-size:1.75rem;margin-bottom:1rem}.settings-content{display:flex;flex-direction:column;width:30%}.settings-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center}#settings input[type=checkbox]{all:unset;background:transparent;border:.1rem solid #fff;width:.75rem;height:.75rem;border-radius:.25rem;display:inline-block}#settings input[type=checkbox]:checked{background-color:#fff}#settings input[type=checkbox]:disabled{opacity:.6}#console{opacity:0;transition:opacity .5s}#console.show{opacity:1}.console-bottom-panel{position:absolute;height:33.3%;background-color:#242424;bottom:0;left:0;right:0;background:linear-gradient(to top,#000c 0%,#0008 80%,transparent 100%)}.console-title{margin:0 10%}#console-title{display:inline-block}.console-text{margin:0 10.75%;font-size:.8rem}.console-idle{position:absolute;right:10%;bottom:1rem;width:0;height:0;border-left:.25rem solid transparent;border-right:.25rem solid transparent;border-top:.45rem solid aqua;animation:bounce .5s ease-out infinite alternate;pointer-events:none;opacity:0;transition:opacity .2s}@keyframes bounce{0%{transform:translateY(.1rem)}to{transform:translateY(-.1rem)}}.console-idle.show{opacity:1}#console-text{color:transparent;white-space:pre-wrap;background:linear-gradient(#fff 0,#fff 0),linear-gradient(to right,white,transparent);background-size:0 100%,3rem 100%;background-position:0 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}#spine{pointer-events:none}#spine canvas{width:100%;height:100%}.console-selection{position:absolute;top:0;bottom:20%;left:0;right:0;display:flex;align-items:center;justify-content:center}.console-selection.hide{pointer-events:none}#console-selection{width:60%;text-align:center;display:inline-flex;flex-direction:column;gap:1rem;transition:opacity .5s}.console-selection.hide>#console-selection{opacity:0;pointer-events:none;transition:opacity .5s;transition-delay:.2s}.console-selection-option{all:unset;position:relative;font-weight:700;padding:.3rem 0;cursor:pointer;transition:transform .5s;color:#242424;--color-1: #7ac3ff;--color-2: #8ccdff;--color-3: #a6d3f4;--offset-x: .4rem;--offset-y: .8rem;--width: 2rem;--height: calc(var(--width) * 1.7320508075688772)}.console-selection-option>span{position:relative}.console-selection-option:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(60deg,#fff4,#fff 30%,#fff 70%,#fff4),linear-gradient(240deg,transparent 75%,var(--color-1) 75%) var(--offset-x) var(--offset-y) / var(--width) var(--height),linear-gradient(120deg,transparent 75%,var(--color-1) 75%) var(--offset-x) var(--offset-y) / var(--width) var(--height),linear-gradient(240deg,transparent 75%,var(--color-2) 75%) calc(var(--width) / 2 + var(--offset-x)) calc(var(--height) / 2 + var(--offset-y)) / var(--width) var(--height),linear-gradient(120deg,transparent 75%,var(--color-2) 75%) calc(var(--width) / 2 + var(--offset-x)) calc(var(--height) / 2 + var(--offset-y)) / var(--width) var(--height),var(--color-3);border:.1rem solid #fff;transform:skew(-10deg);border-radius:.5rem;box-shadow:0 0 2.5rem #0007}.console-selection-option:hover{transform:scale(1.02)}.console-selection-option.active,.console-selection-option:active{animation:bounce-scale .3s forwards}@keyframes bounce-scale{50%{transform:scale(.95)}to{transform:scale(1.02)}}#background{position:relative;--camera: 0%}#background:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#000 var(--camera),transparent var(--camera),transparent calc(100% - var(--camera)),#000 calc(100% - var(--camera)));width:100%;height:100%;transition:background 1s}
