*{box-sizing:border-box}body{font-family:Poppins,sans-serif;width:100%;height:100%;margin:0;overflow:hidden}:focus:not(:focus-visible){outline:none}#piano{height:calc(100% - 190px);top:81px}#piano,#piano piano-roll{position:absolute;width:100%;left:0}#piano piano-roll{top:0;height:100%}#piano piano-keyboard{position:absolute;width:calc(100% - 80px);bottom:300px;left:50%;transform:translateX(-50%)}#piano piano-keyboard[octave-count="2"]{max-width:520px}#piano piano-keyboard[octave-count="3"]{max-width:780px}#piano piano-keyboard[octave-count="4"]{max-width:1040px}#piano piano-keyboard[octave-count="5"]{max-width:1300px}#piano piano-keyboard[octave-count="6"]{max-width:1560px}header{position:fixed;top:0;left:0;width:100%;height:81px;touch-action:none;z-index:101;border-bottom:1px solid #ccc;background-color:#fff;display:flex;align-items:center;justify-content:center}header h1{font-family:Quicksand,sans-serif;text-transform:uppercase;font-weight:700;text-align:center;font-size:20px;letter-spacing:2px}header h1 a{color:#000;text-decoration:none}#back-button{position:absolute;top:50%;transform:translateY(-50%);left:0;padding:10px 20px}#back-button svg{display:block}footer{position:fixed;touch-action:none;bottom:0;left:0;width:100%;height:109px;z-index:1;border-top:1px solid #ccc;background-color:#fff}#header-config,footer{display:flex;align-items:center}#header-config{position:absolute;right:0}#header-config a{color:#007bc7;text-decoration:none;font-size:18px;display:inline-flex;align-items:center}#header-config a svg{margin-right:10px}#header-config a:not(:first-child){margin-left:25px}#header-config #room-icon{display:block;margin-right:10px}#footer-config{display:flex;align-items:center;justify-content:space-between;padding:0 10px;overflow:auto;white-space:nowrap;width:100%}#action-buttons{display:flex;margin-right:10px}#action-buttons>*{margin-left:25px}copresence-info{flex-shrink:1;padding-left:150px;padding-right:30px;white-space:nowrap;touch-action:none}@media only screen and (max-width:1200px){copresence-info{padding-right:15px}#footer-config{padding-left:0}#back-button{border-right:1px solid #ccc}}@media only screen and (max-width:992px){#action-buttons>*{margin-left:10px}header h1{font-size:18px;letter-spacing:.1em}#header-config a span{display:none}#header-config a svg{margin:0}#header-config #room-icon{margin-right:5px}footer{height:120px;flex-direction:column;font-size:14px}footer>*{width:100%;display:flex;align-items:center}copresence-info{border-bottom:1px solid #ccc;margin-top:0;height:36px;width:100%;flex-shrink:unset;padding-right:0;padding-left:15px;overflow:visible}#footer-config{padding:0 14px 0 70px;flex:3;justify-content:space-between}#piano{height:calc(100% - 218px)}}@media only screen and (max-width:768px){header{height:60px}#action-buttons>*{margin-left:5px}#action-buttons>:last-child{margin-right:15px}#footer-config{padding-right:0}#piano{top:60px;height:calc(100% - 180px)}}@media only screen and (max-height:750px){#piano piano-keyboard{bottom:12vh}}@media only screen and (min-device-width:375px) and (max-device-width:1024px) and (orientation:landscape){header{height:60px}#action-buttons>*{margin-left:5px}#action-buttons>:last-child{margin-right:15px}footer{height:100px}#footer-config{padding-right:0}#piano{top:60px;height:calc(100% - 160px)}}