*{box-sizing:border-box}:root{--col:#351431;--col-body:#f2b602;--col-bg:transparent;--col-tape:#555;--col-overlay:rgba(0,0,0,.376)}html,body{height:100%;margin:0;padding:0}body{color:var(--col);background-color:var(--col-bg);margin:0 auto;font-family:sans-serif}.container{-webkit-perspective:2000px;perspective:2000px}.cassette{margin:20px auto;position:relative}.cassetteBody{fill:var(--col-body);stroke:var(--col)}.cassette .outerFrame{stroke:var(--col)}.cassette .innerFrame,.cassette .title,.cassette .artist{fill:var(--col)}.cassette .logo{fill:var(--col);opacity:.6}.cassette .gearInner{stroke:var(--col)}.cassette .volumeBox{cursor:pointer;width:25px;display:-webkit-flex;display:flex;overflow:hidden}.cassette .volumeBox .volumeBar{opacity:0;background:rgba(255,255,255,.5);width:100px;height:8px;margin:7px 10px;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.cassette .volumeBox:focus{width:150px}.cassette .volumeBox:focus .volumeBar{opacity:1}.cassette .volumeBox .volumeValue{background:#fff;height:100%}.cassette .volumeBtn{min-width:22px}.cassette .ejectBtn{cursor:pointer}.cassette .ejectBtn rect{fill:var(--col)}.cassette .bottomTrapezoid{stroke:var(--col)}.cassette .tape,.backFace .tape{fill:var(--col-tape)}defs #screwTemplate,defs #gearTemplate circle{stroke:var(--col)}defs #gearTemplate rect{fill:var(--col)}.cassette3d.ejected{-webkit-transform:rotateX(-30deg);transform:rotateX(-30deg)}.cassette3d{width:85%;transform-style:preserve-3d;-webkit-transform-origin:bottom;transform-origin:bottom;margin:0 auto;-webkit-transition:-webkit-transform .3s ease-in-out,transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out,transform .3s ease-in-out}.cassette3d .cassette,.cassette .backFace{aspect-ratio:600/400;width:100%;height:100%}.cassette3d .backFace{position:absolute;top:0;bottom:0;left:0;right:0}.cassette3d>.cassette{-webkit-transform:translateZ(30px);transform:translateZ(30px)}.cassette3d .leftFace{-webkit-transform-origin:0;transform-origin:0;width:40px;height:360px;position:absolute;top:20px;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}#overlay{background:var(--col-overlay);padding-top:20%;display:none;position:fixed;top:0;bottom:0;left:0;right:0}#overlay>*{background:var(--col);color:#fff;max-width:60%;margin:0 auto;font-weight:700;display:none}#overlay .errorDlg,#overlay .loadingMsg,#overlay #playBtn{opacity:.9;background:#333;border-radius:20px;padding:20px 40px;font-size:150%}#overlay .errorDlg div.title{background:#111;border-top-left-radius:20px;border-top-right-radius:20px;margin:-20px -40px 10px;padding:20px 40px}#overlay .errorDlg p{font-weight:400}#overlay .errorDlg button{color:#fff;background:rgba(0,0,0,.5);border:none;border-radius:8px;padding:.5em;font-size:100%}#overlay #playBtn{cursor:pointer;border:none}body.error #overlay .errorDlg,body.loading:not(.error) #overlay .loadingMsg,body.pressPlay:not(.error):not(.loading) #playBtn,body.loading #overlay,body.error #overlay,body.pressPlay #overlay{display:block}
/*# sourceMappingURL=index.3c29315b.css.map */