/* Fallback layout declarations for Safari 12. Modern rules still take priority. */
dialog:not([open]){display:none!important}
dialog.compat-dialog[open]{display:block;position:fixed;top:16px;right:16px;bottom:auto;left:16px;z-index:100;width:calc(100% - 32px);max-width:560px;max-height:calc(100vh - 32px);margin:0 auto;overflow:auto;box-shadow:0 0 0 100vmax rgba(0,0,0,.75)}
body.compat-modal-open{overflow:hidden}
.compat-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background:rgba(0,0,0,.7)}
.legacy-browser #panel{top:8px;right:8px;bottom:8px;left:8px}
.legacy-browser #lyricsPanel,.legacy-browser #metronomeVisual,.legacy-browser .modal-backdrop,.legacy-browser .confirm-backdrop{top:0;right:0;bottom:0;left:0}
.legacy-browser #metronomePulse{width:45vw;height:45vw;max-width:400px;max-height:400px}
.legacy-browser .editor-buttons>button,.legacy-browser .song-tools>button{margin:2px}
.legacy-browser h1{font-size:28px;word-wrap:break-word}
.legacy-browser .channel-name{word-wrap:break-word}
.legacy-browser .level-range{writing-mode:horizontal-tb;direction:ltr;position:absolute;left:50%;top:50%;width:230px!important;height:48px!important;margin:0;transform:translate(-50%,-50%) rotate(-90deg)}
.legacy-browser .fader-well{height:230px}
@media(min-width:720px){.legacy-browser #panel{top:16px;right:16px;bottom:16px;left:16px}}
.web-pair-wizard{grid-column:1/-1;margin:12px 0;padding:14px;border:1px solid var(--accent);border-radius:10px;background:var(--panel);font-size:14px;line-height:1.5}
.web-pair-wizard h2{margin:0 0 8px;font-size:20px}.web-pair-wizard p{margin:8px 0}.web-pair-wizard ol{padding-left:22px}.web-pair-wizard li{margin:8px 0}
.web-pair-wizard a{display:inline-block;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:var(--fg);background:var(--panel);font-weight:600;text-decoration:none}.pairing-pending #firstLibrary{display:none}

.web-band-connection{grid-column:1/-1;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;width:100%;margin:0 0 12px;padding:10px 14px;border:1px solid var(--border,#364047);border-radius:10px;font-size:14px;line-height:1.5;background:var(--panel,#141c21)}
.web-band-state{flex:1 1 240px;margin-right:16px}.web-band-state:before{content:'●';margin-right:8px;color:var(--muted,#91a1ad)}.web-band-connection[data-state=connected] .web-band-state:before{color:#3ddc97}.web-band-connection[data-state=offline] .web-band-state:before{color:#ff7886}.web-band-connection[data-state=searching] .web-band-state:before{color:#ffb02e}
.web-band-connection>details{flex:0 1 auto;max-width:100%;border:0;border-radius:0;padding:0;margin:0;background:transparent}.web-band-connection>details[open]{flex-basis:100%;margin-top:8px}.web-band-connection summary{font-size:14px;cursor:pointer}.web-band-connection p{max-width:58em}.web-band-routes{display:block}.web-band-routes>a{font-size:14px}.web-band-routes>details{margin:8px 0}