*{box-sizing:border-box}html{font-size:16px;font-weight:unset;letter-spacing:normal;word-spacing:normal;-webkit-tap-highlight-color:transparent;box-sizing:border-box;height:100%;font-family:sans-serif;line-height:1.2}html,body,main{box-sizing:border-box;width:100%;margin:0;padding:0}html,body{min-height:100%}div,section,nav,header,footer{box-sizing:border-box}figure,img,video,picture{width:100%;min-width:0;height:auto;display:block}h1,h2,h3,h4,p,label,a,button,input,textarea{font:inherit;letter-spacing:inherit;color:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}li{margin:0;padding:0}a:hover{color:inherit}input,textarea{border:none;outline:1px solid #0000;padding:0}input::placeholder,textarea::placeholder{color:gray;opacity:.5}textarea{resize:none}button{all:unset;cursor:pointer}button:hover{color:inherit}button:disabled{pointer-events:none}*{scrollbar-color:#f7bf3e transparent}html,body,#router-view{width:100%;height:100%}html{color:#111;-webkit-user-select:none;user-select:none;background:#2fbfdc;font-family:DotGothic16,monospace;font-weight:400;overflow-x:hidden}#canvas{z-index:-100;width:100%;height:100%;display:block;position:absolute;top:0;left:0}#media{visibility:hidden;pointer-events:none;width:0;height:0;position:absolute}#router-view{z-index:0;position:relative}h1,h2,h3,h4{font-family:Dela Gothic One,sans-serif;font-weight:400}.view{min-width:100%;min-height:100%}.background{z-index:-200;background-image:url(/images/bg.svg);background-position:0 0,10dvmax 10dvmax;background-size:20dvmax 20dvmax;width:100%;height:100%;animation:4s linear infinite background;position:absolute;top:0;left:0}@keyframes background{to{background-position:-20dvmax 0,-10dvmax 10dvmax}}.button{display:block}.button--1{background:#f7bf3e;padding:1rem;font-size:1.25rem;box-shadow:.25rem .25rem #111}.button--2{text-align:center;background:#f7bf3e;padding:1rem;font-family:Dela Gothic One,sans-serif;font-size:1.5rem;font-weight:400;box-shadow:1rem 1rem #111}.button--2:focus{outline-offset:.5rem;outline:.5rem solid #f7bf3e}@media (width>=50rem){.button--2{padding:2rem;font-size:2rem}}.button--debug{background:#2fbfdc;border:1px solid;padding:.5rem}.range{appearance:none;cursor:pointer;background:#f7bf3e;border-radius:0;outline:none;height:2rem;display:block;box-shadow:.25rem .25rem #111}.range::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#111;border-radius:0;width:.5rem;height:2rem}.range::-moz-range-thumb{cursor:pointer;background:#111;border:none;border-radius:0;width:.5rem;height:2rem}.select{appearance:none;color:inherit;background:#f7bf3e;border:none;padding:.25rem .5rem;box-shadow:.25rem .25rem #111}.button-icon{vertical-align:bottom;width:auto;height:1em}.view-base{flex-direction:column;justify-content:center;align-items:center;display:flex}.view-base__logo{max-width:min(100% - 4rem,50rem)}.view-base__form{grid-template-columns:minmax(0,1fr);gap:2rem;max-width:min(100% - 4rem,50rem);display:grid}@media (width>=50rem){.view-base__form{grid-template-columns:repeat(2,minmax(0,1fr))}}.view-playlist{z-index:0;height:100%;display:flex;position:relative;overflow:hidden auto}.view-playlist__player{--out-transform:translateY(-100%);z-index:-10;width:100dvmin;height:100dvmin;animation:.5s cubic-bezier(.33,1,.68,1) backwards playlist-player-in;position:fixed;top:-50dvmin;left:0}@media (width>=50rem){.view-playlist__player{--out-transform:translateX(-100%);width:100dvh;height:100dvh;top:0}}@keyframes playlist-player-in{0%{transform:var(--out-transform,translateX(-100%))}}@keyframes playlist-player-out{to{transform:var(--out-transform,translateX(-100%))}}.view-playlist__player--select{animation:.5s cubic-bezier(.32,0,.67,0) 1s forwards playlist-player-out}.view-playlist__player:before{content:"";background:#707070;border-radius:100%;outline:.5rem solid #00000040;width:100%;height:100%;display:block;position:absolute;top:0;left:0}@media (width>=50rem){.view-playlist__player:before{left:-50%}}.view-playlist__cd-wrap{filter:drop-shadow(0 -.5rem #00000040);width:100%;height:100%}.view-playlist__cd{width:100%;height:100%;transition:animation-duration 1s linear;animation:1s linear infinite playlist-cd;position:relative;left:0}@media (width>=50rem){.view-playlist__cd{left:-50%}}@keyframes playlist-cd{to{transform:rotate(360deg)}}.view-playlist__cd--select{animation-duration:.5s}.view-playlist__cd-frame{z-index:-10;filter:drop-shadow(2rem 0 #00000040);width:100%;height:100%;position:absolute;top:50%;left:0;transform:rotate(90deg)}@media (width>=50rem){.view-playlist__cd-frame{top:0;transform:none}}.view-playlist__form{scroll-snap-type:y proximity;flex-direction:column;gap:2rem;max-width:min(100% - 4rem,50rem);margin:auto;padding-block:calc(50dvh - 2.4rem);display:flex}.view-playlist__instruct{--out-position:-100dvw;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-flow:column;gap:.25rem .5rem;width:fit-content;animation:.5s cubic-bezier(.33,1,.68,1) 1s backwards playlist-instruct-in;display:grid}@media (width>=50rem){.view-playlist__instruct{--out-position:100%;padding:2rem;position:fixed;top:0;right:0}}.view-playlist__instruct--select{animation:.5s cubic-bezier(.32,0,.67,0) 1s forwards playlist-instruct-out}@keyframes playlist-instruct-in{0%{transform:translateX(var(--out-position,100%))}}@keyframes playlist-instruct-out{to{transform:translateX(var(--out-position,100%))}}.view-playlist__instruct-key{color:#f7bf3e;filter:drop-shadow(2px 1px #111);border:2px solid;border-radius:4px;justify-content:center;align-items:center;width:2em;height:2em;font-size:1.125rem;display:flex}.view-playlist__instruct-key--span{grid-row:span 2;margin:auto}.view-playlist__form-button{min-height:4.8rem;animation:playlist-form-button-in cubic-bezier(.33, 1, .68, 1) .5s calc(.25s + var(--index,0) * 50ms) 1 backwards;text-wrap:balance;scroll-snap-align:center}@media (width>=50rem){.view-playlist__form-button{transform:translate(calc(var(--dist,0) * -100dvmin))}}@keyframes playlist-form-button-in{0%{transform:translate(-100dvw)}}.view-playlist__form-button--select{outline-offset:.5rem;outline:.5rem solid #fff;animation:.25s step-end infinite playlist-form-button-select,.5s cubic-bezier(.33,1,.68,1) 1s forwards playlist-form-button-select-out}@keyframes playlist-form-button-select{0%{outline-color:#f7bf3e}50%{outline-color:#fff}}@keyframes playlist-form-button-select-out{to{transform:translate(100dvw)}}.view-playlist__form-button--before-select{animation:.5s cubic-bezier(.33,1,.68,1) forwards playlist-form-button-before-select-out}@keyframes playlist-form-button-before-select-out{to{transform:translateY(-100dvh)}}.view-playlist__form-button--after-select{animation:.5s cubic-bezier(.33,1,.68,1) forwards playlist-form-button-after-select-out}@keyframes playlist-form-button-after-select-out{to{transform:translateY(100dvh)}}.view-playlist__controls{position:fixed;bottom:2rem;right:2rem}.view-loading{justify-content:center;align-items:center;display:flex}.view-loading p{text-align:center;color:#fff;font-family:Dela Gothic One,sans-serif;font-size:1.5rem;font-weight:400}.view-game{flex-direction:column;width:100%;height:100%;display:flex}.view-game__mapper{background:#11111180;flex:1 0 100%;order:-1;width:100%;max-width:50rem;height:1rem;margin-inline:auto;position:relative}@media (width>=50rem){.view-game__mapper{flex:1;order:unset}}.view-game__mapper-playhead{top:0;left:calc(var(--pos,0%) - 1px);z-index:10;pointer-events:none;background:#fff;width:2px;height:100%;position:absolute}.view-game__mapper-item{inset:0;left:var(--start,0%);width:var(--length);background:var(--bg);align-items:center;gap:4px;height:100%;display:flex;position:absolute;right:auto;box-shadow:.25rem .25rem #111}.view-game__mapper-item__label{flex:1 0 100%;margin-bottom:auto;display:block}.view-game__mapper-item__select{max-width:100%;text-overflow:hidden;display:block;position:absolute;bottom:calc(100% + .5rem)}.view-game__debug{all:unset;color:#fff;white-space:pre-line;text-align:left;background:#000;width:fit-content;height:fit-content;margin:0}.view-game__controls{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;width:100%;padding:2rem;display:flex}@media (width>=50rem){.view-game__controls{gap:2rem;margin-top:auto}}.view-game__vol-wrap{filter:drop-shadow(.25rem .25rem #111);flex:2rem;max-width:10rem;height:fit-content;margin-right:auto}@media (width>=50rem){.view-game__vol-wrap{margin:0}}.view-game__vol{clip-path:polygon(0 calc(100% - .5rem),100% 0,100% 100%,0% 100%);width:100%;height:3.5rem;box-shadow:none}.view-game__vol::-webkit-slider-thumb{height:3.5rem}.view-game__vol::-moz-range-thumb{height:3.5rem}.view-game__quit{flex:none}