html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}#piece-container{position:fixed;width:250px;right:20px;bottom:23px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#piece-container{right:10px}}.menu-container{width:300px;display:flex;flex-direction:column;justify-content:flex-end;max-height:100%;position:fixed;left:50%;margin-left:-150px;bottom:20px;color:#fff;font-weight:300;font-size:16px;text-align:center;white-space:nowrap;z-index:100;cursor:pointer;user-select:none}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.menu-container{font-size:14px}}.menu-items{text-align:center;background:rgba(0,0,0,.8);width:inherit;border-radius:10px;overflow:auto;margin-top:50px;margin-bottom:0}.menu-container .material-icons{vertical-align:middle;padding-bottom:3px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.menu-container .material-icons{font-size:18px}}.menu-container .menu-items li{position:relative;padding:20px;transition:background-color .1s linear}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.menu-container .menu-items li{padding:15px}}.menu-container .menu-items li:hover{text-decoration:underline}.menu-container .menu-items li:first-child{border-top:none}.menu-container .score-title{margin-top:10px}.menu-container .score-composer{display:block;font-weight:500}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.menu-container .score-composer{margin-left:5px}}.menu-container .score-speed{position:absolute;right:10px;top:10px;font-style:italic;color:#fff;display:none}.menu-items .loaded,.menu-container .menu-items .selected{color:#22b82e}.list-item-icon{display:inline-block;position:relative;top:5px;color:#333}#selected-score{position:absolute;width:100%;height:50px;color:#fff;font-weight:500;bottom:24px;font-weight:300;text-align:right;white-space:nowrap;z-index:100;cursor:pointer;user-select:none}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#selected-score{height:42px}}#selected-score:hover>#selected-score-title{text-decoration:underline}#selected-score:hover>#selected-score-composer{text-decoration:underline}#selected-score-title{margin-top:8px;font-size:16px;font-weight:300}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#selected-score-title{margin-top:5px;font-size:14px}}#selected-score-composer{margin-top:5px;font-weight:500;font-size:18px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#selected-score-composer{font-size:16px}}.expand-icon{position:absolute;right:10px;top:15px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.expand-icon{right:0;top:8px}}.expand-more{display:block}.showing-menu .expand-more,.expand-less{display:none}.showing-menu .expand-less{display:block}.score-button{position:fixed;width:36px;height:36px;bottom:8px;cursor:pointer;user-select:none}.score-button-visual{position:absolute;box-shadow:0 0 12px #00000063;background-color:#eee;line-height:30px;vertical-align:middle;text-align:center;color:#000;width:30px;height:30px;left:3px;top:3px;border-radius:15px}#previous-score{right:162px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#previous-score{right:147px}}#next-score{right:126px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#next-score{right:111px}}#restart-score{right:90px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#restart-score{right:75px}}.demo-button{position:fixed;width:80px;height:36px;cursor:pointer;text-align:center;user-select:none;bottom:8px;right:10px;font-size:16px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.demo-button{width:70px;right:5px;font-size:14px}}.demo-button-visual{position:absolute;box-shadow:0 0 12px #00000063;background-color:#eee;border-radius:15px;height:30px;width:74px;vertical-align:middle;color:#000;line-height:30px;top:3px;left:3px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.demo-button-visual{width:64px}}#stop-demo>.demo-button-visual{color:#fff;background:#ff3030}.tutorial-prompt{position:fixed;color:#000;font-size:18px;text-align:center;border-radius:5px;padding:10px;background:rgba(255,255,102,.8);z-index:1}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.tutorial-prompt{font-size:16px}}.prompt{position:fixed;color:#000;font-weight:300;font-size:16px;line-height:16px;padding:10px;text-align:center;background:rgba(255,255,255,.8);border-radius:10px;z-index:1}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.prompt{font-size:14px;line-height:14px;padding:6px 8px}}.prompt-right-arrow{margin-left:10px}.prompt-right-arrow:after{position:absolute;left:100%;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid rgba(255,255,255,.8);content:" ";margin-top:-5px;top:50%}.prompt-left-arrow{margin-right:10px}.prompt-left-arrow:after{position:absolute;right:100%;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid rgba(255,255,255,.8);content:" ";margin-top:-5px;top:50%}.prompt-bottom-arrow:after{position:absolute;top:100%;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(255,255,255,.8);content:" ";margin-left:-5px;left:50%}.prompt-top-arrow:after{position:absolute;bottom:100%;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid rgba(255,255,255,.8);content:" ";margin-left:-5px;left:50%}#prompt-pieces{right:210px;bottom:10px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#prompt-pieces{right:190px;bottom:15px}}#prompt-record{left:20px;bottom:110px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#prompt-record{left:10px;bottom:90px}}#prompt-record:after{right:auto;left:30px}#prompt-stop-recording{left:20px;bottom:140px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#prompt-stop-recording{left:10px;bottom:110px}}#prompt-stop-recording:after{right:auto;left:30px}.prompt-share{bottom:100px;left:105px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.prompt-share{left:85px;bottom:80px}}.prompt-share:after{left:25px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.prompt-share:after{left:15px}}#title{margin-top:10px;margin-bottom:10px}#title-image{width:auto;height:auto;max-width:400px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#title-image{max-width:300px}}#intro{font-size:16px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#intro{font-size:14px}}#tagline{font-size:16px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#tagline{font-size:14px}}#splash{position:fixed;width:100%;bottom:55%;text-align:center;color:#fff;z-index:10}#loading{position:absolute;text-align:center;color:#fff;line-height:24px;font-size:20px;width:100%;margin-top:10px}#loading-bar-button{pointer-events:auto;position:relative;height:50px}#loading-bar{position:absolute;top:0;cursor:pointer;width:200px;height:15px;left:50%;margin-left:-100px;margin-top:17.5px;border-width:1px;border-style:solid;border-color:#fff;border-radius:7.5px;overflow:hidden;transition:width .3s,height .3s,margin .3s,border-radius .3s,border-color .3s}#loading-fill{background-color:#fff;height:100%;width:0%;transition:background-color .3s linear,width .2s linear;position:relative;overflow:hidden}#start-button{top:0;cursor:pointer;background:#22b82e;color:#fff;width:120px;height:50px;line-height:50px;border-radius:25px;font-size:20px;position:absolute;left:50%;margin-left:-60px}#audio-prompt{font-weight:200;font-size:16px;margin-top:10px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#audio-prompt{font-size:14px}}#silent-hint{display:none;font-size:16px;font-weight:200}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#silent-hint{font-size:14px}}.silent-hint-show{display:block!important}#disclaimer{position:fixed;left:20px;bottom:20px;right:20px;color:#fff;text-align:center;z-index:10;font-size:16px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#disclaimer{font-size:14px;left:10px;right:10px;bottom:10px}}#info{color:#fff;position:fixed;width:25px;height:25px;top:20px;left:20px;border:1px solid white;line-height:25px;border-radius:50%;cursor:pointer;user-select:none;text-align:center;font-size:16px;font-weight:900;z-index:999;background-color:#fff0;transition:background-color .1s linear}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#info{width:20px;height:20px;line-height:20px;font-size:11px;left:10px}}#info-overlay{top:0;left:0;background:rgba(0,0,0,.8);position:fixed;width:100%;height:100%;overflow:auto}#info-container{margin:60px auto;padding:20px;max-width:500px;color:#fff;font-weight:300;font-size:16px;line-height:20px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#info-container{margin:60px auto;font-size:12px;line-height:14px}}#info-container p{margin-top:1em}#info-container span{text-decoration:underline;cursor:pointer}#info-title{color:#fff;font-size:24px;margin-bottom:1em}#info-title-image{width:auto;height:auto;max-width:180px}#close-info{color:#000;position:relative;margin-top:40px}html,body{margin:0;padding:0;font-family:Google Sans,sans-serif;width:100%;height:100%;overflow:hidden;background:black}body{background-image:url(/viola-the-bird/2/splashbackground.png);background-size:100% 100%}.hideable-unclickable{opacity:0;pointer-events:none;transition:opacity .2s;user-select:none}.hideable-unclickable.visible{opacity:1}.hideable-clickable{opacity:0;pointer-events:none;transition:opacity .2s}.hideable-clickable.visible{opacity:1;pointer-events:inherit}.button-container{position:fixed;bottom:10px;width:80px;height:80px;z-index:1}.small-button-container{position:fixed;bottom:10px;width:70px;height:80px;z-index:1}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.small-button-container{width:50px}}.mode-button-container{position:fixed;bottom:10px;right:10px;width:80px;height:80px;z-index:1}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.mode-button-container{right:0}}.button-text{position:absolute;text-align:center;color:#fff;font-weight:200;bottom:0;pointer-events:none;width:100%;transition:opacity .1s linear;user-select:none;font-size:16px;white-space:nowrap}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.button-text{font-size:14px;font-weight:300}}.button{width:55px;height:55px;line-height:55px;border-radius:27.5px;text-align:center;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 0 12px #00000063;background-color:#eee;cursor:pointer;transition:background-color .1s linear,box-shadow .1s linear;user-select:none;color:#000}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.button{font-size:18px;width:40px;height:40px;line-height:40px;bottom:20px}}.mode-button{width:55px;height:55px;line-height:55px;border-radius:27.5px;text-align:center;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 0 12px #00000063;background-color:#eee;cursor:pointer;transition:background-color .1s linear,box-shadow .1s linear;user-select:none}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.mode-button{font-size:18px;width:42px;height:42px;line-height:42px;bottom:20px}}#record-container{left:10px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#record-container{left:0}}#record,#stop-record{position:absolute;border-width:6px;border-style:solid;border-color:#fff;bottom:24px;width:46px;height:46px;border-radius:50%;box-shadow:0 0 12px #00000063;cursor:pointer;left:50%;transform:translate(-50%)}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#record,#stop-record{width:36px;height:36px;bottom:20px;border-width:5px}}@keyframes pulse{0%{border-color:#fff}50%{border-color:#fffc}to{border-color:#fff}}#record-start{width:40px;height:40px;border-radius:50%;background:#ff3030;margin:0 auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #00000063;transition:width .1s linear,height .1s linear,border-radius .1s linear}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#record-start{width:30px;height:30px}}.recording #record-start{width:20px;height:20px;border-radius:0}#stop-record-container{left:10px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#stop-record-container{left:0}}#record-text{opacity:1}.recording #record-text{opacity:0}.playback-indicator{position:fixed;top:90px;left:40px;color:#fff;font-size:24px;padding-left:25px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.playback-indicator{left:35px;top:85px;font-size:18px;padding-left:20px}}#recording-icon{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#ff3030;margin-right:10px;opacity:1}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#recording-icon{width:15px;height:15px;margin-right:5px}}#playing-icon{position:absolute;left:0;top:2px;width:0;height:0;margin-right:10px;opacity:1;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid #ffffff}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#playing-icon{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #ffffff;margin-right:5px}}#stopped-icon{position:absolute;left:0;top:4px;width:15px;height:15px;background:white;margin-right:10px;opacity:1}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#stopped-icon{width:11px;height:11px;margin-right:5px}}#demo-icon{position:absolute;left:0;top:2px;width:0;height:0;margin-right:10px;opacity:1;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid #ffffff}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#demo-icon{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #ffffff;margin-right:5px}}@keyframes recording-pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}#recording-frame{position:fixed;inset:50px 0 0}.recording-frame-corner{display:block;position:fixed;stroke:#ffffffb3;width:60px;height:60px;stroke-width:.15}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.recording-frame-corner{width:40px;height:40px;stroke-width:.1}}@keyframes recording-frame-pulse{0%{stroke:#ffffffb3}50%{stroke:#fff}to{stroke:#ffffffb3}}#recording-frame-top-left{top:70px;left:20px}#recording-frame-top-right{top:70px;right:20px}#recording-frame-bottom-left{bottom:20px;left:20px}#recording-frame-bottom-right{bottom:20px;right:20px}#startstop-container{left:10px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#startstop-container{left:0}}#startstop{position:absolute;bottom:31px;left:50%;transform:translate(-50%);width:40px;height:40px;border-radius:50%;box-shadow:0 0 12px #00000063;background-color:#eee;cursor:pointer;transition:background-color .1s linear,box-shadow .1s linear}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#startstop{width:30px;height:30px;bottom:28px}}.playing #startstop-stop{opacity:1}.playing #startstop-play{opacity:0}#startstop-stop{position:absolute;background:#333333;width:15px;height:15px;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .1s linear;opacity:0}#startstop-ring{width:58px;height:58px;border-radius:50%;box-shadow:0 0 12px #00000063;position:absolute;left:50%;bottom:22px;transform:translate(-50%)}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#startstop-ring{width:46px;height:46px;bottom:20px}}#startstop-play{position:absolute;width:0;height:0;left:50%;top:50%;transform:translate(-40%,-50%);border-radius:2px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid #333333;transition:opacity .1s linear;opacity:1}#play-text{opacity:1}.playing #play-text,#stop-text{opacity:0}.playing #stop-text{opacity:1}.timecode{transition:opacity .1s linear;opacity:0;position:absolute;top:-35px;text-align:center;pointer-events:none;user-select:none;width:100%;font-size:14px;font-family:Roboto Mono,monospace;color:#fff;padding:5px 0;border-radius:10px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.timecode{font-size:12px;top:-10px;width:90%;left:10%}}#recording-timecode{background:#ff3030}.recording #recording-timecode{opacity:1}#playback-timecode{opacity:1;background:rgba(0,0,0,.5411764706)}#save-container{left:95px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#save-container{left:75px}}#save-text{opacity:1}.saving #save-text,#saving-text{opacity:0}.saving #saving-text{opacity:1}#back-container{left:165px}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#back-container{left:125px}}#restart-container{right:280px}#mode-selector{width:200px;height:50px;position:fixed;top:25px;left:50%;border-radius:50px;margin-left:-100px;background:rgba(255,255,255,.8);user-select:none}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){#mode-selector{width:180px;height:40px;margin-left:-90px!important;border-radius:40px;top:20px}}#mode-selector-indicator{position:absolute;background:#333333;height:80%;width:42%;left:4%;top:10%;transition:left .1s linear;border-radius:50px}.mode-selected-right #mode-selector-indicator{left:54%}.mode-selector-button{position:absolute;width:50%;height:100%;color:#fff;font-size:16px;text-align:center;transition:color .1s linear;cursor:pointer}@media screen and (max-width: 499.5px),screen and (max-height: 499.5px){.mode-selector-button{font-size:14px}}#mode-concert{color:#fff;left:0;cursor:default}.mode-selected-right #mode-concert{color:#000;cursor:pointer}#mode-freestyle{color:#000;right:0}.mode-selected-right #mode-freestyle{color:#fff;cursor:default}#debug{position:fixed;z-index:100;user-select:none;color:#fff;top:65px;left:10px;font-size:16px}#muted-container{position:fixed;width:150px;height:150px;left:50%;top:60%;margin-left:-75px;margin-top:-75px;background:rgba(255,255,255,.2);pointer-events:none;border-radius:75px}#muted-text{color:#fff;font-weight:300;text-align:center;margin-top:10px}#skip{position:fixed;bottom:20px;right:20px;font-size:16px;font-weight:300;cursor:pointer;color:#fff;user-select:none}#have-a-go{background:#22b82e;color:#fff;text-align:center;position:fixed;right:20px;bottom:20px;width:150px;height:60px;border-radius:30px;font-weight:100;line-height:60px;cursor:pointer;font-size:20px;box-shadow:0 0 6px #0000008e}#landscape-warning-overlay{display:none;position:fixed;width:100%;height:100%;overflow:none;background:black;z-index:99999999;align-items:center!important;justify-content:center!important}.landscape-warning-icon{position:auto;width:24px;height:24px;padding:16px;background:white;border-radius:50%;margin-left:auto;margin-right:auto}.landscape-warning-text{color:#fff;font-size:20px;text-align:center;margin-top:15px}#unsupported{color:#fff;text-align:center;font-size:18px;line-height:22px;position:absolute;width:100%;top:50%;pointer-events:none}#guide{position:fixed;top:0;left:0;font-size:48px;pointer-events:none;z-index:1;color:#ff6c}#guide-mobile,#guide-desktop{position:absolute}