@font-face{font-family:playericons;src:url(/fonts/playericons.eot);src:url(/fonts/playericons.eot?#iefix) format("embedded-opentype"),url(/fonts/playericons.woff) format("woff"),url(/fonts/playericons.ttf) format("truetype"),url(/fonts/playericons.svg#playericons) format("svg");font-weight:400;font-style:normal}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Cambria,Georgia,serif;background:#b6b6b6 url(/images/bg.jpg) fixed no-repeat top center;font-weight:400;font-size:15px;color:#333;overflow-y:scroll;overflow-x:hidden}a{color:#2886bc;text-decoration:none}a:hover{color:#000}.cassette-tape-wrapper{perspective:800px}.cassette-tape{width:586px;height:379px;margin:30px auto 0;position:relative;transition:all .4s ease-in-out;transform-style:preserve-3d}.cassette-tape--flipped{transform:rotateY(180deg)}.cassette-tape__back{width:100%;height:100%;position:relative;background:transparent url(/images/cs_back.png) no-repeat center center}.cassette-tape__front{width:586px;height:586px;position:absolute;background:transparent url(/images/cs_front-test1.png) no-repeat center center;background-size:contain;top:50%;left:0;transform:translateY(-46%)}.cassette-tape__front--b{display:none;background-image:url(/images/cs_front-test1b.png);transform:translateY(-46%) rotateY(180deg)}.cassette-tape__front--b.visible{display:block}.cassette-tape__front--a.hidden,.cassette-tape__side-letter{display:none}.cassette-loader{position:absolute;width:31px;height:31px;bottom:50px;left:50%;margin:-15px 0 0 -15px;display:flex;align-items:center;justify-content:center}.cassette-loader__spinner{width:24px;height:24px;border:3px solid rgba(100,100,100,.3);border-top-color:#666;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tape-reel{width:125px;height:125px;position:absolute;top:110px;border-radius:50%;background:transparent}.tape-reel--left{left:109px;box-shadow:0 0 0 70px #000}.tape-reel--right{right:113px;box-shadow:0 0 #000}.tape-reel__wheel{width:100%;height:100%;background:transparent url(/images/cs_wheel.png) no-repeat center center}@keyframes rotateLeft{0%{transform:rotate(0) translateZ(-1px)}to{transform:rotate(-360deg) translateZ(-1px)}}@keyframes rotateRight{0%{transform:rotate(0) translateZ(-1px)}to{transform:rotate(360deg) translateZ(-1px)}}.player-controls-wrapper{position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.player-controls{list-style:none;width:532px;margin:0;background:linear-gradient(to bottom,#aaaaaa59,#ffffff70,#ffffff87);border:1px solid rgba(0,0,0,.1);border-bottom-color:#fff9;padding:8px;height:54px;box-shadow:inset 0 1px #0000000d,0 1px #fffc,0 -1px #fff6,inset 0 2px 19px #0000000d,0 2px 1px #0000000f;box-sizing:content-box;border-radius:12px;transition:box-shadow .3s ease}.player-controls--recording{box-shadow:inset 0 1px #0000000d,0 1px #fffc,0 -1px #fff6,inset 0 2px 19px #b400001a,0 0 12px #dc000040,0 2px 1px #0000000f}.player-controls__btn{display:block;float:left;width:80px;height:50px;line-height:55px;text-align:left;padding:10px;margin:0;cursor:pointer;background:#ddd url(/images/metal.jpg) no-repeat center top;box-shadow:inset 0 0 0 1px #0003,inset 0 0 1px 2px #ffffffe6,inset 0 -6px 5px #0000001a,0 6px 7px #0000004d,0 4px 1px #00000080;-webkit-user-select:none;user-select:none;font-family:Aldrich,sans-serif;font-size:10px;font-weight:300;text-transform:uppercase;letter-spacing:1px;color:#666;text-shadow:0 1px 1px rgba(255,255,255,.8);border:none;outline:none}.player-controls__btn:first-child{border-radius:8px 0 0 8px}.player-controls__btn:last-child{border-radius:0 8px 8px 0}.player-controls__btn--play{width:120px}.player-controls__btn--switch{width:92px}.player-controls__icon{font-size:16px;line-height:50px;text-align:center;float:left;color:#444;font-family:playericons;text-shadow:1px 1px 1px rgba(255,255,255,.9);font-style:normal;font-weight:400;text-transform:none;display:inline-block;width:1em;margin-right:.2em}.player-controls__icon--rec{color:#c00;font-family:sans-serif;font-size:14px}.player-controls__btn:hover{box-shadow:inset 0 0 0 1px #0003,inset 0 0 1px 2px #ffffffe6,inset 0 -10px 15px #0000001a,0 6px 7px #0000004d,0 4px 1px #00000080}.player-controls__btn--active{height:50px;margin-top:2px;background-image:url(/images/metal_dark.jpg);box-shadow:inset 0 0 0 1px #0000002e,inset 0 0 1px 2px #ffffff80,inset 0 -6px 5px #0000001a,0 6px 7px #0000004d,0 2px 1px #00000080}.player-controls__btn--pressed{height:50px;margin-top:4px;background-image:url(/images/metal_dark.jpg);box-shadow:inset 0 0 0 1px #0003,inset 0 0 5px 1px #ffffff80,inset 0 -10px 15px #0003,0 7px 5px #ffffff80}.player-controls__btn--rec-active{height:50px;margin-top:2px;background-image:url(/images/metal_dark.jpg);box-shadow:inset 0 0 0 1px #b400004d,inset 0 0 1px 2px #ff646480,inset 0 -6px 5px #64000026,0 0 8px #dc000066,0 2px 1px #00000080;animation:rec-pulse 1.2s ease-in-out infinite}.player-controls__btn--rec-active .player-controls__icon--rec{animation:rec-dot-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{box-shadow:inset 0 0 0 1px #b400004d,inset 0 0 1px 2px #ff646480,inset 0 -6px 5px #64000026,0 0 8px #dc000066,0 2px 1px #00000080}50%{box-shadow:inset 0 0 0 1px #b400004d,inset 0 0 1px 2px #ff646480,inset 0 -6px 5px #64000026,0 0 16px #dc000099,0 2px 1px #00000080}}@keyframes rec-dot-pulse{0%,to{opacity:1}50%{opacity:.4}}.player-controls__download{display:block;text-align:center;margin-top:10px;font-family:Aldrich,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#c00;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.6);cursor:pointer;transition:color .2s}.player-controls__download:hover{color:red}.volume-knob-wrap{width:100px;height:100px;position:absolute;bottom:0;left:50%;margin-left:-408px;background:linear-gradient(to bottom,#aaaaaa59,#ffffff70,#ffffff87);border:1px solid rgba(0,0,0,.1);border-radius:50%;padding:8px;box-shadow:inset 0 1px #0000000d,0 1px #fff9,0 -1px #fff6,inset 0 2px 19px #0000000d,0 2px 1px #0000000f;box-sizing:content-box}.volume-knob-wrap:after{content:"Volume";margin-top:15px;display:block;font-family:Aldrich,sans-serif;font-size:10px;font-weight:300;text-transform:uppercase;letter-spacing:1px;color:#666;text-shadow:0 1px 1px rgba(255,255,255,.8)}.knob{width:100px;height:100px;position:relative}.knob-top{position:absolute;width:100%;height:100%;background:url(/images/knob.jpg) no-repeat center center;z-index:10;cursor:default;border-radius:50%;box-shadow:inset 0 0 3px 2px #fff9}.knob-top:after{content:"";width:4px;height:4px;background-color:#666;position:absolute;top:50%;margin-top:-2px;left:4px;border-radius:50%;cursor:default;box-shadow:0 0 1px #5a5a5a inset,1px -1px 1px #ffffff80}.knob-base{width:100%;height:100%;box-shadow:0 5px #555,0 5px 5px #000;position:absolute;z-index:1;border-radius:50%}.tracklist{display:flex;justify-content:center;gap:60px;max-width:700px;margin:0 auto;padding:20px 10px 50px;border-top:1px solid rgba(255,255,255,.5);box-shadow:0 -1px #0000001a}.tracklist__side h3{font-family:Aldrich,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#555;margin:0 0 10px;text-shadow:0 1px 1px rgba(255,255,255,.8)}.tracklist__side ol{list-style:none;padding:0;margin:0}.tracklist__side ol li{font-family:Aldrich,sans-serif;font-size:11px;letter-spacing:1px;color:#666;text-shadow:0 1px 1px rgba(255,255,255,.8);padding:4px 6px;text-transform:uppercase;cursor:pointer;border-radius:4px;transition:background .15s,color .15s}.tracklist__side ol li:hover{background:#00000014;color:#333}.tracklist__side ol li:active{background:#00000024}.tracklist__number{display:inline-block;width:22px;color:#999}.vc-container{text-align:center;height:500px;margin-bottom:50px;position:relative}.vc-toast{position:absolute;bottom:95px;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;font-family:Aldrich,sans-serif;font-size:12px;letter-spacing:1px;padding:10px 20px;border-radius:8px;white-space:nowrap;animation:toast-in .3s ease-out;z-index:100}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.container{width:100%;position:relative}.container>header{margin:10px 10px 0;padding:20px 10px 0;position:relative;display:block;text-align:center}.container>header h1{font-family:Aldrich,sans-serif;font-size:32px;line-height:32px;margin:0;position:relative;font-weight:700;color:#555;text-shadow:1px 1px 1px rgba(255,255,255,.5);letter-spacing:2px;text-transform:uppercase}.container>header h2{font-family:Aldrich,sans-serif;font-size:14px;line-height:22px;font-weight:300;margin:0 auto;padding:8px 0 0;color:#777;letter-spacing:3px;text-transform:uppercase;text-shadow:1px 1px 1px rgba(255,255,255,.9)}
