body{margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}.container:has(#metronome-page-title){padding:0}h1#metronome-page-title{text-align:center;margin:.5em auto;font-size:1.5em}#metronome-body fieldset{padding-top:.625em;border:1px solid #ccc}#metronome-body{text-align:center;padding:1em}#metronome-body .tempo-number-wrap{display:flex;position:relative;justify-content:center;align-items:center}#metronome-body .tempo-number-wrap:before{content:"♩=";display:block;position:absolute;top:0;left:6em}#metronome-body .tempo-number-wrap input{font-size:4em;width:2.5em;text-align:center;margin-left:.25em;margin-right:.25em;border:none}#metronome-body .tempo-number-wrap button{position:relative;overflow:hidden;text-indent:-200vw;width:4em;height:4em;border:none;background:none}#metronome-body .tempo-number-wrap button:before{position:absolute;content:"";top:0;left:0;right:0;bottom:0;display:block;background:transparent no-repeat center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTBoLTEwdi0xMGgtNHYxMGgtMTB2NGgxMHYxMGg0di0xMGgxMHoiLz48L3N2Zz4=);background-size:40% auto}#metronome-body .tempo-number-wrap button:first-child:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAxMGgyNHY0aC0yNHoiLz48L3N2Zz4=)}#metronome-body input[type=range]{-webkit-appearance:none;width:100%;height:1em;border-radius:.5em;background:#d3d3d3;outline:none;opacity:.7;transition:opacity .2s}#metronome-body input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.5em;height:1em;background:#4caf50;cursor:pointer}#metronome-body .tempo-wrap{margin-top:2em}#metronome-body input[type=range]:hover{opacity:1}#metronome-body .play-button-wrap{margin-top:2em}#metronome-body .play-button{background:none;padding:0;width:5em;height:5em;border:.25em solid rgb(97,188,241);border-radius:50%;cursor:pointer;position:relative;text-indent:-200vw;-webkit-tap-highlight-color:transparent}#metronome-body .play-button:after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);width:0;height:0;font-size:1.2em;border-top:1em solid transparent;border-bottom:1em solid transparent;border-left:1.5em solid rgb(61,48,136)}#metronome-body .play-button.now-playing{border-color:#ef9191}#metronome-body .play-button.now-playing:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.5em;height:1.5em;border:none;background:#e13b3b}#metronome-body .play-button>div{position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:0 0 2em .3em #4caf50;border-radius:50%;z-index:-1;animation:playButtonShadowFadeOut .6s forwards}@keyframes playButtonShadowFadeOut{0%{opacity:1}to{opacity:0}}#metronome-body .volume-wrap{display:flex;align-items:center;justify-content:center;margin-top:1em}#metronome-body .volume-wrap:before{content:"";display:inline-block;width:1em;height:1em;background:no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAxN2gtNXYtMTBoNXYxMHptMi0xMHYxMGw5IDV2LTIwbC05IDV6bTExLjAwOCAyLjA5M2MuNzQyLjc0MyAxLjIgMS43NyAxLjE5OCAyLjkwMy0uMDAyIDEuMTMzLS40NjIgMi4xNTgtMS4yMDUgMi45bDEuMjE5IDEuMjIzYzEuMDU3LTEuMDUzIDEuNzEyLTIuNTExIDEuNzE1LTQuMTIxLjAwMi0xLjYxMS0uNjQ4LTMuMDY4LTEuNzAyLTQuMTI1bC0xLjIyNSAxLjIyem0yLjE0Mi0yLjEzNWMxLjI4OCAxLjI5MiAyLjA4MiAzLjA3MyAyLjA3OSA1LjA0MXMtLjgwNCAzLjc1LTIuMDk2IDUuMDM5bDEuMjUgMS4yNTRjMS42MTItMS42MDggMi42MTMtMy44MzQgMi42MTYtNi4yOTEuMDA1LTIuNDU3LS45ODYtNC42ODEtMi41OTUtNi4yOTNsLTEuMjU0IDEuMjV6Ii8+PC9zdmc+);background-size:contain;background-position:center;margin-right:.35em}#metronome-body .volume-wrap.loud:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNiA3bDgtNXYyMGwtOC01di0xMHptLTYgMTBoNHYtMTBoLTR2MTB6bTIwLjI2NC0xMy4yNjRsLTEuNDk3IDEuNDk3YzEuODQ3IDEuNzgzIDIuOTgzIDQuMTU3IDIuOTgzIDYuNzY3IDAgMi42MS0xLjEzNSA0Ljk4NC0yLjk4MyA2Ljc2NmwxLjQ5OCAxLjQ5OGMyLjMwNS0yLjE1MyAzLjczNS01LjA1NSAzLjczNS04LjI2NHMtMS40My02LjExLTMuNzM2LTguMjY0em0tLjQ4OSA4LjI2NGMwLTIuMDg0LS45MTUtMy45NjctMi4zODQtNS4zOTFsLTEuNTAzIDEuNTAzYzEuMDExIDEuMDQ5IDEuNjM3IDIuNDAxIDEuNjM3IDMuODg4IDAgMS40ODgtLjYyMyAyLjg0MS0xLjYzNCAzLjg5MWwxLjUwMyAxLjUwM2MxLjQ2OC0xLjQyNCAyLjM4MS0zLjMwOSAyLjM4MS01LjM5NHoiLz48L3N2Zz4=)}#metronome-body .volume-wrap.mute:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAxN2gtNXYtMTBoNXYxMHptMi0xMHYxMGw5IDV2LTIwbC05IDV6bTE1LjMyNCA0Ljk5M2wxLjY0Ni0xLjY1OS0xLjMyNC0xLjMyNC0xLjY1MSAxLjY3LTEuNjY1LTEuNjQ4LTEuMzE2IDEuMzE4IDEuNjcgMS42NTctMS42NSAxLjY2OSAxLjMxOCAxLjMxNyAxLjY1OC0xLjY3MiAxLjY2NiAxLjY1MyAxLjMyNC0xLjMyNS0xLjY3Ni0xLjY1NnoiLz48L3N2Zz4=)}#metronome-body input.volume{font-size:.5em;width:50%}#beat-wrap{margin-top:2em}#beat-wrap #beat-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}#beat-wrap #beat-buttons button:first-child:last-child{display:none}#beat-wrap button{overflow:hidden;color:#3d3088;border:1px solid #222;height:2em;background:#d7f0ff;cursor:pointer}#beat-wrap button.stroke{border-width:.18em;border-color:#222;color:#222;font-weight:700;background:#76cbff}#beat-wrap button.mute{border-color:#aaa;color:#aaa;background:#fafafa}#beat-wrap button.tick{animation:shadowFadeOut .6s forwards}@keyframes shadowFadeOut{0%{box-shadow:0 0 1em #4caf50}to{box-shadow:none}}#beat-wrap>:nth-child(1){grid-column:span 4;margin-bottom:.45em}#beat-wrap .fake-dropdown{position:relative;display:inline-block;align-items:center}#beat-wrap .fake-dropdown:before{content:attr(title);display:block;font-size:.8em}#beat-wrap .fake-dropdown+.fake-dropdown{margin-left:.35em}#beat-wrap .fake-dropdown span{position:relative;padding:0 2em 0 .5em;display:flex;align-items:center;justify-content:center;border:1px solid #333;background:#fff no-repeat;background-size:contain;background-position:left .1em center;color:#333;height:2em;cursor:pointer}#beat-wrap .fake-dropdown span:after{position:absolute;top:50%;transform:translateY(-50%);right:0;height:2em;width:1.75em;content:"";display:block;background:no-repeat url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTYuODQzIDEwLjIxMWMuMTA4LS4xNDEuMTU3LS4zLjE1Ny0uNDU2IDAtLjM4OS0uMzA2LS43NTUtLjc0OS0uNzU1aC04LjUwMWMtLjQ0NSAwLS43NS4zNjctLjc1Ljc1NSAwIC4xNTcuMDUuMzE2LjE1OS40NTcgMS4yMDMgMS41NTQgMy4yNTIgNC4xOTkgNC4yNTggNS40OTguMTQyLjE4NC4zNi4yOS41OTIuMjkuMjMgMCAuNDQ5LS4xMDcuNTkxLS4yOTEgMS4wMDItMS4yOTkgMy4wNDQtMy45NDUgNC4yNDMtNS40OTh6Ii8+PC9zdmc+);background-position:center;background-size:100%}#beat-wrap .fake-dropdown ul{font-size:1em;display:none;position:absolute;left:0;top:calc(100% - 1px);list-style:none;margin:0;padding:0;width:100%;border:1px solid #333;background:#fff;max-height:10em;overflow:scroll;z-index:10}#beat-wrap .fake-dropdown ul div{width:100%;font-size:1em;text-align:left;border:none;padding:.15em;background:transparent no-repeat;background-size:contain;background-position:left .1em center;cursor:pointer}#beat-wrap .fake-dropdown.show ul{display:block}#beat-wrap .fake-dropdown select{display:none}#beat-wrap .fake-dropdown.has-image span,#beat-wrap .fake-dropdown.has-image div{padding-left:1.9em}#beat-wrap .fake-dropdown.has-image.hide-text span,#beat-wrap .fake-dropdown.has-image.hide-text div{text-indent:-200vw;padding-left:1.5em}@media screen and (min-width: 450px){#metronome-page-title,#metronome-body{width:450px;font-size:20px;margin:0 auto}}@media screen and (min-width: 720px){#metronome-body .tempo-number-wrap:before{left:4em}}