:root{--metronome-color:var(--color-primary);--metronome-ink:#fff;background:var(--metronome-color);color-scheme:light}*{box-sizing:border-box}body,html{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;width:100%}@media (display-mode:standalone){body,html{min-height:100vh;min-height:100lvh}}.metronome{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--metronome-color);border:0;border-radius:0;color:var(--metronome-ink);cursor:pointer;display:grid;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100%;height:100dvh;inset:0;isolation:isolate;letter-spacing:normal;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);place-items:center;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;width:100%}.metronome:focus{outline:none}.metronome:focus-visible{outline:3px solid currentColor;outline-offset:-12px}.metronome.is-dragging{cursor:ns-resize}.metronome__pulse{background:var(--metronome-pulse);inset:0;min-height:100vh;min-height:100lvh;opacity:0;pointer-events:none;position:absolute;will-change:opacity;z-index:-1}.metronome__tempo{display:block;font-size:min(27vw,43vh,280px);font-size:min(27vw,43dvh,280px);font-variant-numeric:tabular-nums lining-nums;font-weight:200;letter-spacing:-.05em;line-height:1;opacity:.88;pointer-events:none}.metronome__edge{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:0;bottom:0;color:var(--metronome-ink);cursor:pointer;height:100%;height:100dvh;padding:0;position:fixed;top:0;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;width:clamp(64px,16vw,112px);z-index:1}.metronome__edge--left{left:0;width:max(clamp(64px,16vw,112px),env(safe-area-inset-left) + 48px)}.metronome__edge--right{right:0;width:max(clamp(64px,16vw,112px),env(safe-area-inset-right) + 48px)}.metronome__edge:focus{outline:none}.metronome__edge:focus-visible{outline:2px solid currentColor;outline-offset:-8px}.metronome__message{bottom:max(24px,env(safe-area-inset-bottom));color:var(--metronome-ink);font-size:14px;left:24px;margin:0;pointer-events:none;position:fixed;right:24px;text-align:center}.metronome__settings-button{-webkit-tap-highlight-color:transparent;background:transparent;border:0;border-radius:50%;bottom:max(16px,env(safe-area-inset-bottom));color:var(--metronome-ink);cursor:pointer;display:grid;height:52px;opacity:.8;padding:12px;place-items:center;position:fixed;right:max(14px,env(safe-area-inset-right));touch-action:manipulation;width:52px;z-index:3}.metronome__settings-button svg{height:26px;pointer-events:none;width:26px}.metronome__settings-button:focus-visible,.metronome__settings-button:hover{opacity:1}.metronome__settings-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.metronome__conductor{aspect-ratio:2/3;display:none;overflow:visible;pointer-events:none;position:relative;width:min(88vw,48vh,460px);width:min(88vw,48dvh,460px)}.metronome__conductor>svg{display:block;height:100%;overflow:visible;width:100%}.metronome[data-mode=conductor] .metronome__tempo{bottom:max(36px,env(safe-area-inset-bottom) + 24px);font-size:clamp(40px,9vw,76px);left:50%;position:absolute;translate:-50% 0}.metronome[data-mode=conductor] .metronome__conductor{display:block;margin-bottom:40px}.conductor-path{stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.1}.metronome[data-show-path=false] .conductor-path{visibility:hidden}.conductor-ball{aspect-ratio:1;left:0;position:absolute;top:0;width:11%;will-change:transform}.conductor-dot,.conductor-halo{background:currentColor;border-radius:50%;inset:0;position:absolute}.conductor-dot{inset:29.5454545455%}.conductor-halo{opacity:.13}.conductor-hand{display:none;height:auto;left:50%;overflow:visible;position:absolute;top:50%;transform:translate(-4.7034764826%,-5.7082452431%);width:175%}.metronome[data-conductor-marker=hand] .conductor-hand{display:block}.metronome[data-conductor-marker=hand] .conductor-dot,.metronome[data-conductor-marker=hand] .conductor-halo{display:none}.metronome-settings{background:var(--color-surface);border:0;border-radius:24px 24px 0 0;box-shadow:var(--shadow-dark);color:var(--color-text);height:auto;inset:10vh 0 -16px;inset:10dvh 0 -16px;margin:0;max-height:none;max-width:none;overflow-y:auto;overscroll-behavior:contain;padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(max(28px, env(safe-area-inset-bottom)) + 16px) max(24px,env(safe-area-inset-left));position:fixed;width:100%;will-change:transform}.metronome-settings::backdrop{animation:settings-backdrop-in .18s ease-out both;background:rgba(0,0,0,.14)}.metronome-settings[data-phase=closing]::backdrop{animation:settings-backdrop-out .28s ease-in both}.metronome-settings__content{margin:0 auto;width:min(100%,480px)}.metronome-settings[data-recording] [data-settings-field]{display:none!important}@keyframes settings-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes settings-backdrop-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.metronome-settings::backdrop,.metronome-settings[data-phase=closing]::backdrop{animation:none}}