header{align-items:flex-start;flex-wrap:wrap}.header-tuning{display:block;color:var(--muted);font-size:.8rem;margin-top:7px}.metronome{margin-left:auto;width:360px;max-width:100%;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.metro-title{display:flex;align-items:center;justify-content:space-between;font-size:.875rem}.metro-title>span{color:var(--muted);font-size:.75rem}.metro-main{display:flex;align-items:end;gap:8px;margin:10px 0}.metro-main label{color:var(--muted);font-size:.75rem;display:flex;align-items:center;gap:8px}.metronome input[type=number]{width:72px;min-height:40px;border:1px solid #51617a;border-radius:6px;background:var(--bg);color:var(--text);padding:6px;font:inherit;font-size:1.1rem;font-weight:600}.metronome button{background:#24364c;border:1px solid #576d8a;color:var(--text);border-radius:6px;padding:9px 10px;min-height:40px;font-size:.875rem}.metronome #metro-start{background:var(--fifth);color:#06101b;border-color:var(--fifth);font-weight:650}.metronome #metro-start[aria-pressed=true]{background:var(--root);border-color:var(--root)}.metro-beats{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.metro-beats span{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background:#27364a;color:var(--muted);font-size:.75rem;border:1px solid transparent}.metro-beats .accent{border-color:var(--third);color:var(--third)}.metro-beats .current{background:var(--fifth);color:#07111d;border-color:var(--fifth)}.metro-beats .current.accent{background:var(--third);border-color:var(--third)}.metronome summary{font-size:.8rem;color:var(--text);padding:4px 0}.metronome summary span{color:var(--muted);margin-left:8px}.metro-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.metro-options label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.8rem;min-width:0}.metro-options select{font-size:.875rem;padding:8px;min-height:40px}.metro-options label:first-child,.metro-options label:last-child{grid-column:1/-1}.metro-options input{width:100%;accent-color:var(--fifth)}.metronome p{font-size:.75rem;color:var(--muted);margin:10px 0 0}.metronome input:focus-visible{outline:3px solid var(--fifth);outline-offset:3px}@media(max-width:780px){.metronome{width:100%;margin:5px 0 0}.metro-options{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.metro-beats span{transition:none}}


.metronome .metro-background{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.8rem;color:var(--text)}.metro-background input{width:16px;height:16px;margin:0;accent-color:var(--fifth)}