@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";*{box-sizing:border-box;color-scheme:dark}html,body{height:100%}body{background:#272525;font-family:Noto Sans,system-ui,sans-serif;margin:0;display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;font-optical-sizing:auto;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select,textarea{font-family:inherit}#wrapper{height:100%;width:100%;display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column}#piano{position:relative;width:90%;height:25%;max-width:2100px;background:#363434;margin:auto;z-index:3;box-shadow:0 0 16px 3px #00000080;border-radius:5px 5px 0 0;overflow:hidden}#piano canvas{width:100%;height:100%}#players{width:100%;min-height:32px;display:flex;padding:.5em;gap:.5em;z-index:2;word-wrap:break-word;flex-wrap:wrap;margin:.5em 0}#players .player{padding:.5em;border-radius:8px;color:#fffc;text-shadow:1px 1px 1px rgba(0,0,0,.8);box-shadow:1px 1px 1px #00000080;cursor:pointer;position:relative;font-weight:600;transition:transform .2s ease-in-out,background .2s ease-in-out;line-height:1}#players .player.me:before{content:"Me";font-size:.5rem;position:absolute;top:2px;left:50%;transform:translate(-50%);opacity:.8}#players .player.owner:after{content:url(/piano/emojis/32x32/1f451.svg);font-size:.85rem;position:absolute;top:-3px;left:-6px;transform:translateY(-50%) rotate(-30deg);display:inline-block;width:18px;height:18px}#players .player:hover{opacity:.8}#cursors{position:fixed;top:0;left:0;z-index:4;width:0;height:0;pointer-events:none}#cursors .cursor{position:fixed;padding:5px 8px;border-radius:16px;text-shadow:1px 1px 2px rgba(0,0,0,.5);transition:.06s left,.06s top,.5s opacity;margin:14px 10px;box-shadow:1px 1px 1px #00000080;opacity:1;pointer-events:none;text-wrap:nowrap;white-space:nowrap;line-height:1}#cursors .cursor .icon{position:absolute;top:-18px;left:-16px}#cursors .cursor .icon svg{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5));width:20px;height:20px}#chat{position:absolute;bottom:64px;left:0;background:#00000040;width:100%;min-height:64px;display:flex;flex-direction:column;justify-content:space-between;z-index:1;transition:.15s all}#chat.open{z-index:5;background:#0000008c}#chat.open #messages .message{color:#bebebe}#chat input{background:#00000059;border:2px solid rgba(15,15,15,.5);border-radius:5px;color:#ccc;padding:6px;flex:1;height:32px;transition:.15s all}#chat input:focus{outline:none;border-color:#888}.chatarea{display:flex;justify-content:space-between;align-items:center;margin:.5em;gap:.25em}#messages{max-height:80vh;overflow-y:auto;padding:.25em .5em}#messages .message{color:#bebebe;overflow-wrap:break-word;white-space:normal;max-width:100%;overflow-x:hidden;width:fit-content;text-shadow:1px 1px 1px black;padding:4px 0;height:100%;line-height:1}#messages .message.context-menu-open{background:#ffffff40;border-radius:5px}#messages .message .emoji{display:inline-block;width:16px;height:16px;vertical-align:middle}#messages .message a{color:#8ab;text-decoration:none}#messages .message a:hover{color:#6a9}#messages .message .name{margin-right:0;font-weight:700;text-shadow:1px 1px 1px rgba(0,0,0,.5);cursor:pointer}#messages .message .name:hover{opacity:.8}#message-context-menu{--sl-font-size-medium: 14px;--sl-spacing-2x-small: 4px;width:200px;max-width:80vw;position:fixed;left:0;top:0;z-index:15;padding:0}#emoji-btn{background:#00000059;width:32px;height:32px;border:2px solid rgba(15,15,15,.5);cursor:pointer;border-radius:5px}#emoji-btn:hover{background:#202020}#emoji-btn img{vertical-align:middle}em-emoji-picker{--rgb-background: 15, 15, 15;--rgb-color-border: 0, 0, 0;--rgb-accent: 200, 255, 255;--border-radius: 0;--preview-placeholder-size: 5;position:absolute;z-index:5;bottom:10px;right:8px;border:2px solid #000}#toolbar{background:#00000080;width:100%;height:64px;display:flex;align-items:center;position:relative;color:#cecece;padding:1em;justify-content:space-between}#toolbar>div{display:flex;align-items:center;gap:.85em}#toolbar #status{font-size:1.25rem;text-shadow:0 0 3px black;margin-top:-4px}#toolbar #volume sl-range::part(form-control){display:flex;flex-direction:column-reverse;gap:5px;align-items:center;text-align:center}#toolbar #volume sl-range::part(form-control-label){font-size:.8rem}#toolbar sl-switch::part(base){text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center;font-size:.8rem;margin-bottom:-5px;margin-right:5px}#toolbar sl-switch::part(label){margin:0}#toolbar select,#toolbar ::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}#toolbar #midi-device-list{position:absolute;bottom:56px;min-height:120px;max-height:80vh;background:#252525;width:600px;max-width:90vw;z-index:3;border-radius:1rem;border:2px solid #111;overflow-y:auto;display:none;padding:1rem;transform:translate(-50%)}#toolbar #midi-device-list h2{margin:0;margin-bottom:.5rem}#toolbar #midi-device-list .error{color:tomato}#toolbar #midi-device-list.active{display:block}#toolbar #midi-device-list .midi-device{background:#353535;border:2px solid #111;margin:.5rem 0;padding:.5rem;border-radius:.5rem;text-shadow:1px 1px 1px rgba(0,0,0,.5);text-overflow:ellipsis;overflow:hidden;max-width:100%;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}#toolbar #midi-device-list .midi-device:hover{background:#454545}#toolbar #midi-device-list .midi-device.active{background:#455545;border-color:#8b8}#toolbar #room-list{position:absolute;bottom:56px;max-height:80vh;background:#252525;width:200px;z-index:3;border-radius:1rem 1rem 0 0;overflow-y:auto;display:none;border:2px solid #111;border-bottom:0;font-size:.9rem;overflow-x:hidden}#toolbar #room-list .room{padding:8px;opacity:.8;transition:.2s;text-shadow:1px 1px 1px rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis}#toolbar #room-list .room.hidden:after{content:" (hidden)";color:#888;font-style:italic}#toolbar #room-list .room .member-count{font-weight:600;margin-right:.3em}#toolbar #room-list .room:hover{opacity:1;cursor:pointer;background:#353535}#toolbar #room-selector{border:2px solid #111;background:#252525;padding:10px;width:250px;text-align:left;max-width:50vw;position:relative;border-radius:2rem;overflow:hidden;text-overflow:ellipsis}#toolbar #room-selector:after{content:"▼";position:absolute;right:12px;top:50%;transform:translateY(-50%)}#toolbar #room-selector.active:after{transform:translateY(-50%) rotate(180deg)}#toolbar #room-selector.active{border-radius:0 0 1rem 1rem}#toolbar #room-selector:hover{background:#353535;cursor:pointer}#toolbar .tb-btn{background:#252525;border:2px solid #111;transition:.4s;padding:10px 16px;font-weight:700;border-radius:2rem}#toolbar .tb-btn:hover{background:#353535;cursor:pointer}#swal2-title{margin:0}.swal2-actions .swal-trust-btn{background-color:#28a745!important;border:none;color:#fff}.swal2-actions .swal-trust-btn:hover{background-color:#218838!important}.swal2-actions .save-button{background-color:#2f8138!important;display:flex;align-items:center}.swal2-actions .save-button:hover{background-color:#267a2f!important}.swal2-actions .save-button svg{vertical-align:middle;height:16px;width:16px;transform:translateY(-3px);margin-right:2px}#room-info{position:fixed;bottom:20%;left:50%;transform:translate(-50%,-50%);background:#0000001a;padding:4px 8px;font-size:1.2rem;color:#cecece;flex-direction:column;border-radius:8px;text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:5}#privacy{position:fixed;top:3px;right:3px;font-size:.65rem;z-index:100}#privacy a{color:#ccc}#github{position:fixed;top:32px;right:3px;z-index:100;opacity:.65;transition:opacity .25s}#github:hover{opacity:1}#github svg{width:32px;height:32px}#audio-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;text-shadow:1px 1px 2px rgba(0,0,0,.5);text-align:center;font-weight:700;-webkit-user-select:none;user-select:none}#mobile-mode{display:none;padding:1em;position:fixed;top:50%;left:0;z-index:50;transform:translateY(-50%);text-align:center;background:#00000080;width:100%}#no-audio-warning{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000;width:100%;padding:.85em;color:tomato;text-align:center}@media (max-width: 800px){#piano,#audio-overlay,#toolbar{display:none!important}#chat{bottom:0}#mobile-mode{display:block}}@media (max-width: 1200px){#toolbar{padding:8px}#toolbar>div{gap:5px}#toolbar #status{position:absolute;bottom:2px;left:4px;font-size:1.25rem;z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:1px 1px 2px rgba(0,0,0,.5)}#toolbar #volume{position:fixed;bottom:calc(50vh - 18vw);right:5.5%;background:#00000059;padding:.85em;border-radius:1rem;z-index:8}}@media (max-height: 450px){#piano{top:-10%}}