html,body{color:#bababa;background:#000;margin:0;padding:0;font-family:sans-serif}.center{text-align:center;font-size:1.5em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.top{color:#000;opacity:.8;background:#aaa;border-bottom-left-radius:5px;align-items:center;height:40px;display:flex;position:absolute;top:0;right:0}@keyframes fade{0%{opacity:0}to{opacity:1}}#loading{animation:2s ease-in-out infinite alternate fade}#no-webmidi,#no-permission{display:none}.btn{-webkit-user-select:none;user-select:none;cursor:pointer;color:#000;align-items:center;height:100%;padding:0 10px;text-decoration:none;display:flex}.btn:first-child{border-bottom-left-radius:5px}.btn:hover{background-color:#bbb}.btn:focus{background-color:#ccc}.popup{color:#000;background:#aaa;width:255px;font-size:.8em;position:absolute;top:40px;right:0}.btn-popup[hidden=true]{display:none}.btn-popup[hidden=false]{display:block}.btn-popup{margin:0;padding:5px}.btn-popup h3{font-size:1em}.midi-info__ports{padding-left:10px;list-style-type:none}.midi-info__channels{padding-left:28px;list-style-type:circle}.midi-info__channels li::marker{font-size:1.5em}.dot-on{list-style-type:disc}.dot-on::marker{color:#0f0}.menu-dot-on:before{content:"•";color:#0f0;margin-right:5px;font-size:1.5em}.menu-dot-off:before{content:"◦";color:#000;margin-right:5px;font-size:1.5em}