:root{--stroke-width: 10;--stroke-width-thin: 4;--pendulum-rod-width: 12;--metronome-width: 380px;--ink: #312f31}*{box-sizing:border-box}html,body{overflow:hidden;overscroll-behavior:none;margin:0;height:100%}body{background-color:#7e8eb1;position:fixed;top:0;right:0;bottom:0;left:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.stage{height:100svh;width:100%;display:grid;place-content:center;position:relative}.stage:fullscreen{background-color:#7e8eb1}.metronome{position:relative;max-width:var(--metronome-width);width:90vw;max-height:80vh;margin:auto;display:block;touch-action:none}.metronome__pendulum-rod{fill:none;stroke:var(--ink);stroke-width:var(--pendulum-rod-width);stroke-linecap:round}.metronome__rod-drag-track{fill:transparent;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.metronome__rod-drag-track:active{cursor:grabbing}.metronome__drag-track{fill:transparent;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.metronome__drag-track:active{cursor:grabbing}.metronome__weight{pointer-events:none;overflow:visible}.metronome__stroke{fill:none;stroke:var(--ink);stroke-width:var(--stroke-width);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.metronome__base-bottom{fill:#c73d42}.metronome__base-top{fill:#d1d1d1}.metronome__mark{fill:none;stroke:var(--ink);stroke-width:var(--stroke-width-thin)}.welcome{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-content:center;background-color:#7e8eb199;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.welcome[hidden]{display:none}.welcome__card{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2.5rem 2rem;max-width:22rem;width:86vw;text-align:center}.welcome__title{margin:0;font-size:1.85rem;font-family:monospace;font-weight:bolder}.welcome__description{margin:0;font-family:monospace;font-size:1.35rem}.welcome__enter{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:none;border-radius:999px;padding:.9rem 2.5rem;font-size:1.1rem;font-weight:600;font-family:inherit;color:#fff;background-color:var(--ink);cursor:pointer;transition:transform .1s ease,opacity .1s ease}.welcome__enter:active{transform:scale(.97);opacity:.85}.tempo-wrapper{position:absolute;top:1.5rem;left:1.5rem;font-size:1.4rem;color:var(--ink);font-weight:700;font-family:monospace;margin:0;pointer-events:none;opacity:0;transition:opacity .2s ease}@media(max-width:600px){.tempo-wrapper{top:1rem;left:1rem}}.tempo-wrapper.visible{opacity:1}.tempo-wrapper *{margin:0}