.ac-metronome{--ac-metro-surface: #ffffff;--ac-metro-raised: #f8f8f7;--ac-metro-border: #e1e1dd;--ac-metro-border-strong: #c9c9c3;--ac-metro-text: #17181a;--ac-metro-muted: #55585e;--ac-metro-subtle: #6b6e74;--ac-metro-accent: #3052cc;--ac-metro-accent-hover: #2946b5;--ac-metro-accent-soft: #e8ecfa;--ac-metro-focus: #3052cc;--ac-metro-shadow: 0 1px 2px rgb(16 17 19 / .04), 0 4px 16px rgb(16 17 19 / .05);--ac-metro-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ac-metro-xs: .75rem;--ac-metro-sm: .875rem;--ac-metro-base: 1rem;--ac-metro-lg: 1.125rem;--ac-metro-xl: 1.375rem;--ac-metro-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);--ac-metro-space-1: .25rem;--ac-metro-space-2: .5rem;--ac-metro-space-3: .75rem;--ac-metro-space-4: 1rem;--ac-metro-space-5: 1.25rem;--ac-metro-space-6: 1.5rem;--ac-metro-space-8: 2rem;--ac-metro-space-10: 2.5rem;--ac-metro-radius-sm: 8px;--ac-metro-radius-md: 10px;--ac-metro-radius-lg: 16px;--ac-metro-touch: 2.75rem;box-sizing:border-box;width:100%;min-width:0;max-width:68rem;margin-inline:auto;padding-block-end:var(--ac-metro-space-10);color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:var(--ac-metro-base);line-height:1.5;color-scheme:light}.ac-metronome *,.ac-metronome *:before,.ac-metronome *:after{box-sizing:inherit}.ac-metronome :focus-visible{outline:2px solid var(--ac-metro-focus);outline-offset:3px}.ac-metronome__header{max-width:48rem;margin:0 auto var(--ac-metro-space-6);text-align:center}.ac-metronome__eyebrow,.ac-metronome__kicker{margin:0 0 var(--ac-metro-space-2);color:var(--ac-metro-accent);font-size:var(--ac-metro-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.ac-metronome .ac-metronome__title{margin:0;color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:var(--ac-metro-2xl);font-weight:700;line-height:1.15;letter-spacing:-.025em}.ac-metronome__lede{max-width:42rem;margin:var(--ac-metro-space-3) auto 0;color:var(--ac-metro-muted);font-size:var(--ac-metro-lg)}.ac-metronome__notice{margin:0 0 var(--ac-metro-space-5);padding:var(--ac-metro-space-3) var(--ac-metro-space-4);border:1px solid #d5ddf6;border-radius:var(--ac-metro-radius-md);background:var(--ac-metro-accent-soft);color:#263c89;font-size:var(--ac-metro-sm)}.ac-metronome__workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(17rem,.8fr);align-items:start;gap:var(--ac-metro-space-5)}.ac-metronome__card{min-width:0;padding:clamp(1.1rem,2.4vw,2rem);border:1px solid var(--ac-metro-border);border-radius:var(--ac-metro-radius-lg);background:var(--ac-metro-surface);box-shadow:var(--ac-metro-shadow)}.ac-metronome__card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ac-metro-space-4);margin-bottom:var(--ac-metro-space-5)}.ac-metronome .ac-metronome__card-title{margin:0;color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:var(--ac-metro-xl);font-weight:650;line-height:1.25}.ac-metronome__card-copy{margin:var(--ac-metro-space-2) 0 var(--ac-metro-space-5);color:var(--ac-metro-muted);font-size:var(--ac-metro-sm)}.ac-metronome__icon-button{display:grid;width:var(--ac-metro-touch);height:var(--ac-metro-touch);flex:0 0 auto;place-items:center;border:1px solid var(--ac-metro-border);border-radius:var(--ac-metro-radius-sm);background:var(--ac-metro-surface);color:var(--ac-metro-text);font-size:1.25rem}.ac-metronome__tempo{max-width:32rem;margin:0 auto var(--ac-metro-space-5);text-align:center}.ac-metronome__field-label{display:block;margin:0 0 var(--ac-metro-space-2);color:var(--ac-metro-text);font-size:var(--ac-metro-sm);font-weight:650}.ac-metronome__tempo-display{display:flex;align-items:center;justify-content:center;gap:var(--ac-metro-space-3)}.ac-metronome input.ac-metronome__bpm{width:5.6ch;min-width:5.6ch;padding:0;border:0;border-radius:0;-webkit-appearance:textfield;appearance:textfield;background:transparent;color:var(--ac-metro-text);font:750 clamp(3.25rem,8vw,5rem)/1 var(--ac-metro-font);font-variant-numeric:tabular-nums;letter-spacing:-.06em;text-align:center}.ac-metronome__bpm-unit{align-self:center;padding-top:1.25rem;color:var(--ac-metro-muted);font-size:var(--ac-metro-sm);font-weight:700;letter-spacing:.08em}.ac-metronome__stepper{width:var(--ac-metro-touch);height:var(--ac-metro-touch);border:1px solid var(--ac-metro-border-strong);border-radius:50%;background:var(--ac-metro-surface);font-size:1.35rem}.ac-metronome__range{display:block;width:100%;min-height:var(--ac-metro-touch);margin:var(--ac-metro-space-3) 0 0;accent-color:var(--ac-metro-accent)}.ac-metronome__range-labels{display:flex;justify-content:space-between;color:var(--ac-metro-subtle);font-size:var(--ac-metro-xs)}.ac-metronome__field-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ac-metro-space-2)}.ac-metronome .ac-metronome__value{color:var(--ac-metro-muted);font-size:var(--ac-metro-sm);font-variant-numeric:tabular-nums;font-weight:500}.ac-metronome__transport{display:flex;justify-content:center;gap:var(--ac-metro-space-3);margin-bottom:var(--ac-metro-space-6)}.ac-metronome__button{display:inline-flex;min-height:var(--ac-metro-touch);align-items:center;justify-content:center;padding:.65rem 1.15rem;border:1px solid var(--ac-metro-border-strong);border-radius:var(--ac-metro-radius-md);font:inherit;font-weight:650;text-align:center}.ac-metronome__button--primary{border-color:var(--ac-metro-accent);background:var(--ac-metro-accent);color:#fff}.ac-metronome__button--secondary{background:var(--ac-metro-surface);color:var(--ac-metro-text)}.ac-metronome__button--wide{width:100%;margin-top:var(--ac-metro-space-4)}.ac-metronome button:disabled,.ac-metronome input:disabled,.ac-metronome select:disabled{cursor:not-allowed;opacity:.58}.ac-metronome__beat-panel{margin-bottom:var(--ac-metro-space-5);padding:var(--ac-metro-space-4);border-radius:var(--ac-metro-radius-md);background:var(--ac-metro-raised)}.ac-metronome__beat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,2rem),1fr));gap:var(--ac-metro-space-2);margin:0;padding:0;list-style:none}.ac-metronome__beat-cell{min-width:0}.ac-metronome__beat-cell--group-start{border-left:2px solid var(--ac-metro-border);padding-left:var(--ac-metro-space-1)}.ac-metronome button.ac-metronome__beat{display:grid;width:100%;min-width:0;min-height:3.5rem;place-content:center;gap:.1rem;padding:.2rem;border:1px solid var(--ac-metro-border);border-radius:var(--ac-metro-radius-sm);background:var(--ac-metro-surface);color:var(--ac-metro-text);text-align:center;font-size:var(--ac-metro-sm);font-variant-numeric:tabular-nums;font-weight:700;overflow-wrap:anywhere;cursor:pointer}.ac-metronome button.ac-metronome__beat--accent{border-color:#aebced;background:var(--ac-metro-accent-soft);color:#263c89}.ac-metronome button.ac-metronome__beat--muted{opacity:.55;text-decoration:line-through}.ac-metronome button.ac-metronome__beat--current{outline:3px solid var(--ac-metro-accent);outline-offset:2px}.ac-metronome .ac-metronome__notice--error{border-color:#a33;color:#7b2020}.ac-metronome__hint{margin:var(--ac-metro-space-2) 0 0;color:var(--ac-metro-subtle);font-size:var(--ac-metro-xs)}.ac-metronome__control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ac-metro-space-4)}.ac-metronome__field{min-width:0}.ac-metronome select.ac-metronome__select,.ac-metronome input.ac-metronome__input,.ac-metronome input.ac-metronome__range{display:block;width:100%;max-width:100%;min-width:0;min-height:var(--ac-metro-touch);padding:.55rem .7rem;border:1px solid var(--ac-metro-border-strong);border-radius:var(--ac-metro-radius-sm);background-color:var(--ac-metro-surface);color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:1rem;line-height:1.4}.ac-metronome input.ac-metronome__range{padding-inline:0;border:0;accent-color:var(--ac-metro-accent)}.ac-metronome input.ac-metronome__bpm:disabled{opacity:1}.ac-metronome__advanced{margin-top:var(--ac-metro-space-5);border-top:1px solid var(--ac-metro-border)}.ac-metronome details.ac-metronome__advanced>summary,.ac-metronome .ac-metronome__faq details>summary{display:flex;min-height:var(--ac-metro-touch);align-items:center;justify-content:space-between;gap:var(--ac-metro-space-3);padding-block:var(--ac-metro-space-3);color:var(--ac-metro-text);cursor:pointer;font-size:var(--ac-metro-base);font-weight:650;list-style:none}.ac-metronome details.ac-metronome__advanced>summary::-webkit-details-marker,.ac-metronome .ac-metronome__faq details>summary::-webkit-details-marker{display:none}.ac-metronome details.ac-metronome__advanced>summary:after,.ac-metronome .ac-metronome__faq details>summary:after{width:.55rem;height:.55rem;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;content:"";transform:rotate(45deg) translateY(-.15rem);transition:transform .12s ease-out}.ac-metronome details.ac-metronome__advanced[open]>summary:after,.ac-metronome .ac-metronome__faq details[open]>summary:after{transform:rotate(225deg) translateY(-.1rem)}.ac-metronome__advanced-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ac-metro-space-4);padding-block:var(--ac-metro-space-2) var(--ac-metro-space-4)}.ac-metronome__text-button{align-self:end;justify-self:start;min-height:var(--ac-metro-touch);padding:.5rem .8rem;border:1px solid var(--ac-metro-border-strong);border-radius:var(--ac-metro-radius-sm);background:var(--ac-metro-surface);color:var(--ac-metro-text);font:inherit}.ac-metronome__shortcuts{grid-column:1 / -1;padding:var(--ac-metro-space-3);border-radius:var(--ac-metro-radius-sm);background:var(--ac-metro-raised)}.ac-metronome__shortcuts h3{margin:0 0 var(--ac-metro-space-2);font-size:var(--ac-metro-sm)}.ac-metronome__shortcuts p{margin:0;color:var(--ac-metro-muted);font-size:var(--ac-metro-sm)}.ac-metronome__shortcuts kbd{padding:.1rem .35rem;border:1px solid var(--ac-metro-border-strong);border-radius:4px;background:var(--ac-metro-surface);font:inherit;font-size:var(--ac-metro-xs)}.ac-metronome__export{position:sticky;top:1rem}.ac-metronome [hidden]{display:none!important}.ac-metronome__export-actions{display:grid;gap:var(--ac-metro-space-2);margin-top:var(--ac-metro-space-4)}.ac-metronome__export-actions .ac-metronome__button{width:100%}.ac-metronome__render{display:grid;min-height:8rem;place-content:center;justify-items:center;gap:var(--ac-metro-space-2);margin-top:var(--ac-metro-space-4);padding:var(--ac-metro-space-4);border:1px dashed var(--ac-metro-border-strong);border-radius:var(--ac-metro-radius-md);background:var(--ac-metro-raised);color:var(--ac-metro-muted);text-align:center}.ac-metronome__render p{margin:0;font-size:var(--ac-metro-sm)}.ac-metronome__render-icon{color:var(--ac-metro-accent);font-size:1.8rem}.ac-metronome progress.ac-metronome__export-progress,.ac-metronome progress[data-metronome-export-progress]{display:block;width:100%;min-height:.65rem;accent-color:var(--ac-metro-accent)}.ac-metronome__export-result{display:grid;width:100%;gap:var(--ac-metro-space-3)}.ac-metronome audio[data-metronome-export-audio]{display:block;width:100%;max-width:100%}.ac-metronome__export-result .ac-metronome__button{justify-self:center}.ac-metronome__guide{margin-top:var(--ac-metro-space-10)}.ac-metronome .ac-metronome__guide h2{margin:0 0 var(--ac-metro-space-5);color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:var(--ac-metro-xl);font-weight:650;line-height:1.25}.ac-metronome__guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ac-metro-space-5)}.ac-metronome__guide-grid article{padding:var(--ac-metro-space-4);border:1px solid var(--ac-metro-border);border-radius:var(--ac-metro-radius-md);background:var(--ac-metro-surface)}.ac-metronome .ac-metronome__guide h3{margin:0 0 var(--ac-metro-space-2);color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:var(--ac-metro-base)}.ac-metronome .ac-metronome__shortcuts h3{margin:0 0 var(--ac-metro-space-2);color:var(--ac-metro-text);font-family:var(--ac-metro-font);font-size:var(--ac-metro-sm)}.ac-metronome__guide-grid p,.ac-metronome__guide-note,.ac-metronome__faq p{margin:0;color:var(--ac-metro-muted);font-size:var(--ac-metro-sm)}.ac-metronome__guide-note{margin-top:var(--ac-metro-space-4)}.ac-metronome__faq{padding-block:var(--ac-metro-space-5);border-top:1px solid var(--ac-metro-border)}.ac-metronome__faq details{border-bottom:1px solid var(--ac-metro-border)}.ac-metronome__faq details p{padding:0 0 var(--ac-metro-space-4)}.ac-metronome__page-content{margin-top:var(--ac-metro-space-8)}.ac-metronome__live:fullscreen{width:100%;height:100%;max-width:none;overflow:auto;padding:clamp(1rem,4vw,3rem);border:0;border-radius:0;background:var(--ac-metro-surface)}.ac-metronome__live:-webkit-full-screen{width:100%;height:100%;max-width:none;overflow:auto;padding:clamp(1rem,4vw,3rem);border:0;border-radius:0;background:var(--ac-metro-surface)}@media(max-width:850px){.ac-metronome__workspace{grid-template-columns:minmax(0,1fr)}.ac-metronome__export{position:static}.ac-metronome__guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.ac-metronome{font-size:var(--ac-metro-sm)}.ac-metronome__header{text-align:left}.ac-metronome__lede{font-size:var(--ac-metro-base)}.ac-metronome__card{padding:var(--ac-metro-space-4)}.ac-metronome__control-grid,.ac-metronome__advanced-content,.ac-metronome__guide-grid{grid-template-columns:minmax(0,1fr)}.ac-metronome__shortcuts{grid-column:auto}.ac-metronome__transport{display:grid;grid-template-columns:1fr 1fr}.ac-metronome__button{padding-inline:var(--ac-metro-space-2)}.ac-metronome__beat-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.ac-metronome__tempo-display{gap:var(--ac-metro-space-2)}.ac-metronome input.ac-metronome__bpm,.ac-metronome select.ac-metronome__select,.ac-metronome input.ac-metronome__input,.ac-metronome input.ac-metronome__range{min-width:0;font-size:16px}.ac-metronome input.ac-metronome__bpm{font-size:clamp(2rem,10vw,3rem)}}@media(prefers-reduced-motion:reduce){.ac-metronome *,.ac-metronome *:before,.ac-metronome *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/audiocolour-metronome.css.map */