.metronome-view{min-height:calc(100dvh - 176px);padding:22px 0 90px}.metronome-card{position:relative;max-width:760px;margin:0 auto;padding:26px 30px 28px;border:1px solid #d8d0c1;border-radius:16px;background:#f4eee2;color:#0d1f3c;box-shadow:0 10px 32px #0d1f3c0d}.metronome-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left}.metronome-eyebrow{margin:0;color:#b64712;font-size:10px;font-weight:900;letter-spacing:1.7px}.metronome-card h1{margin:4px 0 0;font-family:var(--app-font);font-size:34px}.metronome-settings{padding:9px 13px;border:1px solid #0d1f3c;border-radius:8px;background:transparent;color:#0d1f3c;font:inherit;font-size:13px;font-weight:800}.metronome-settings.open{background:#0d1f3c;color:#f4eee2}
.pulse-stage{position:relative;height:260px;margin:18px 0 0;border-radius:14px;overflow:hidden;background:linear-gradient(#172b45,#102238);box-shadow:inset 0 0 0 1px #ffffff18}.pulse-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0,transparent 78%,#0d1f3caa)}#pulse-canvas{position:absolute;inset:0;width:100%;height:100%}.pulse-readout{position:absolute;z-index:2;right:22px;top:18px;display:grid;grid-template-columns:auto auto;align-items:end;gap:0 7px;text-align:right}.tempo-value{grid-row:1/3;color:#f4eee2;font-size:72px;font-weight:800;line-height:.82;letter-spacing:-5px;font-variant-numeric:tabular-nums}.tempo-unit{color:#aebac6;font-size:11px;font-weight:900;letter-spacing:1.4px}.tempo-name{color:#e85d1a;font-family:var(--app-font);font-size:18px;font-weight:700}
.beat-dots{display:flex;justify-content:center;align-items:center;gap:9px;min-height:46px;margin:10px auto 0}.beat-dot{display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:50%;background:#aeb7bc;color:#0d1f3c;font-size:10px;font-weight:900;transition:transform .06s,background .06s,color .06s}.beat-dot.group-start{margin-left:15px;position:relative}.beat-dot.group-start:before{content:'';position:absolute;left:-13px;width:2px;height:22px;background:#887f70}.beat-dot.current{background:#b64712;color:#fff;transform:scale(1.17)}.metronome-status{min-height:20px;margin:0 0 11px;color:#5f6e75;font-size:12px;text-align:center}.tempo-controls{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;gap:13px;align-items:center}.tempo-step,.tap-tempo,.metronome-start,.meter-option,.subdivision-options button,.sound-options button{border:0;font:inherit;font-weight:850;touch-action:manipulation}.tempo-step{width:50px;height:48px;border-radius:9px;background:#0d1f3c;color:#f4eee2;font-size:25px}.tempo-slider{width:100%;accent-color:#b64712}.metronome-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:13px}.tap-tempo,.metronome-start{min-height:49px;border-radius:9px}.tap-tempo{border:1px solid #0d1f3c;background:transparent;color:#0d1f3c}.metronome-start{background:#b64712;color:#fff;font-size:18px}.metronome-start.running{background:#0d1f3c}.metronome-volume{margin:10px 0 0;color:#6b797f;font-size:11px;text-align:center}
.metronome-options{position:absolute;z-index:10;inset:0;padding:24px 28px 35px;border-radius:16px;background:#f4eee2;overflow:auto}.metronome-options[hidden]{display:none}.option-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:2px solid #d7cfc0}.option-heading span{display:block;color:#b64712;font-size:10px;font-weight:900;letter-spacing:1.5px}.option-heading strong{display:block;margin-top:3px;font-family:var(--app-font);font-size:25px}.option-heading button{padding:9px 17px;border:0;border-radius:8px;background:#0d1f3c;color:#fff;font:inherit;font-weight:800}.metronome-options fieldset{margin:20px 0 0;padding:0;border:0}.metronome-options legend{margin-bottom:9px;color:#52616b;font-size:11px;font-weight:900;letter-spacing:1.25px;text-transform:uppercase}.meter-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.meter-option,.subdivision-options button,.sound-options button{padding:11px 5px;border-radius:8px;background:#ddd7cc;color:#33434e}.meter-option[aria-pressed=true],.subdivision-options button[aria-pressed=true],.sound-options button[aria-pressed=true]{background:#0d1f3c;color:#fff;box-shadow:inset 0 -3px #b64712}.subdivision-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.subdivision-options b,.subdivision-options span{display:block}.subdivision-options b{font-size:18px}.subdivision-options span{margin-top:2px;font-size:10px}.sound-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.accent-option{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding:15px;border:1px solid #d6cebf;border-radius:10px;background:#eee7db}.accent-option span,.accent-option strong,.accent-option small{display:block}.accent-option small{margin-top:3px;color:#617078;font-size:11px}.accent-option input{position:absolute;opacity:0}.accent-option i{position:relative;flex:0 0 48px;width:48px;height:28px;border-radius:20px;background:#aeb5b6}.accent-option i:after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}.accent-option input:checked+i{background:#b64712}.accent-option input:checked+i:after{left:23px}
.bottom-nav{position:fixed;z-index:60;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);height:max(58px,7dvh);padding-bottom:env(safe-area-inset-bottom);background:#0d1f3c;color:#f3eadc}.bottom-nav .nav-item,.bottom-nav>.more-menu>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;margin:0;padding:4px;border:0;border-radius:0;background:transparent;color:#f3eadc;font-size:11px;font-weight:800;text-decoration:none}.bottom-nav .nav-icon{display:grid;place-items:center;width:25px;height:25px}.bottom-nav .nav-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.bottom-nav .nav-item.active{background:#1a3150;color:#fff}.bottom-nav .nav-item.active:after{content:'';position:absolute;bottom:4px;width:26px;height:3px;border-radius:3px;background:#e85d1a}.bottom-nav .nav-item{position:relative}.bottom-nav>.more-menu{position:static!important;height:100%!important;margin:0!important;border:0!important;background:transparent!important}.bottom-nav>.more-menu[open]{position:fixed!important;z-index:1000!important;inset:0!important;height:100dvh!important;padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px,env(safe-area-inset-left))!important;background:#f3eee4!important;overflow:auto}.bottom-nav>.more-menu[open]>summary{position:sticky;top:0;z-index:2;height:48px;margin:0 0 16px;background:#0d1f3c;color:#f3eadc;font-size:16px}.bottom-nav>.more-menu[open] .more-menu-body{max-width:760px;margin:auto;padding:0 8px 40px}.more-section-title{margin:24px 0 7px;padding-bottom:7px;border-bottom:2px solid #d8d0c1;color:#0d1f3c;font-family:var(--app-font);font-size:23px}.metronome-more{margin:0 0 20px;padding:15px;border-left:4px solid #b64712;background:#fff;color:#314451;font-size:14px;line-height:1.5}.metronome-more strong{color:#0d1f3c}body{padding-bottom:max(58px,7dvh)}body[data-view=metronome] .intro,body[data-view=metronome] #tuner{display:none}body[data-view=tuner] .metronome-view{display:none}
@media(max-width:740px){.metronome-view{min-height:calc(100dvh - 142px);padding:8px 0}.metronome-card{padding:17px 13px 18px;border-radius:12px}.metronome-card h1{font-size:28px}.metronome-settings{padding:8px 10px}.pulse-stage{height:235px;margin-top:12px}.tempo-value{font-size:58px}.pulse-readout{right:15px;top:15px}.beat-dots{gap:6px;overflow:hidden}.beat-dot{width:24px;height:24px}.beat-dot.group-start{margin-left:9px}.beat-dot.group-start:before{left:-8px}.metronome-options{padding:20px 15px 28px;border-radius:12px}.meter-options,.subdivision-options{gap:5px}.meter-option{padding:10px 2px}.subdivision-options button{padding:9px 2px}.metronome-actions{grid-template-columns:1fr 1.55fr}}
@media(max-width:390px){.pulse-stage{height:205px}.beat-dot{width:22px;height:22px}.tempo-value{font-size:52px}.metronome-heading{gap:8px}.metronome-settings{font-size:12px}.subdivision-options span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.beat-dot,.accent-option i:after{transition:none}}

@media(min-width:1100px) and (min-height:620px){
 body[data-view=metronome] main{height:calc(100% - 70px);overflow:hidden}
 .metronome-view{display:grid;place-items:center;height:100%;min-height:0;padding:9px 0}
 .metronome-card{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(350px,.75fr);column-gap:28px;width:min(1040px,100%);max-width:1040px;max-height:100%;padding:18px 28px 20px;border-radius:14px;overflow:hidden}
 .metronome-heading,.pulse-stage,.beat-dots,.metronome-status,.tempo-controls,.tempo-presets,.metronome-actions,.metronome-volume{grid-column:1}
 .metronome-card h1{font-size:31px}.metronome-heading{min-height:51px}
 .metronome-settings{display:none}
 .pulse-stage{height:205px;margin-top:8px}
 .tempo-value{font-size:64px}.pulse-readout{top:14px}
 .beat-dots{min-height:36px;margin-top:5px}.metronome-status{margin-bottom:5px}
 .tempo-controls{grid-template-columns:46px minmax(0,1fr) 46px}.tempo-step{width:46px;height:44px}
 .tempo-presets{margin-top:7px}.tempo-presets button{min-height:38px}
 .metronome-actions{margin-top:8px}.tap-tempo,.metronome-start{min-height:44px}
 .metronome-volume{margin-top:6px}
 .metronome-options,.metronome-options[hidden]{position:static;display:block!important;grid-column:2;grid-row:1/10;min-height:0;padding:0 0 0 22px;border-left:1px solid #d0c8ba;border-radius:0;background:transparent;overflow:auto}
 .metronome-options .option-heading{padding-bottom:10px}.metronome-options .option-heading button{display:none}.metronome-options fieldset{margin-top:14px}
 .metronome-options .accent-option{margin-top:15px;padding:12px}
}

/* Version 48 notation and counting refinements. */
.tap-tempo span,.tap-tempo small{display:block}.tap-tempo small{margin-top:2px;font-size:9px;font-weight:650;letter-spacing:.25px}
.metronome-actions.has-sound-check{grid-template-columns:1fr 1fr 2fr}.sound-check{min-height:49px;border:1px solid #0d1f3c;border-radius:9px;background:transparent;color:#0d1f3c;font:inherit;font-weight:850;touch-action:manipulation}.sound-check.ready{background:#e1dbcf;border-color:#b64712}.sound-check span,.sound-check small{display:block}.sound-check small{margin-top:2px;font-size:9px;font-weight:650;letter-spacing:.25px}@media(max-width:740px){.metronome-actions.has-sound-check{grid-template-columns:1fr 1fr}.metronome-actions.has-sound-check .metronome-start{grid-column:1/-1}}
.subdivision-options b,.subdivision-options span,.subdivision-options .note-symbol{display:block}.subdivision-options b{font-size:16px}.subdivision-options .note-symbol{height:28px;margin:0;font-family:'Segoe UI Symbol','Noto Music',serif;font-size:25px;font-weight:400;font-style:normal;line-height:27px;white-space:nowrap}.subdivision-options .note-pair{font-size:20px;letter-spacing:-5px;padding-right:5px}.subdivision-options .note-triplet{position:relative;font-size:16px;letter-spacing:-4px;padding-right:4px}.subdivision-options .note-triplet em{position:absolute;left:50%;top:-8px;transform:translateX(-50%);font-family:Inter,sans-serif;font-size:9px;font-weight:900;font-style:normal;letter-spacing:0}.subdivision-options .note-sixteenths{font-size:20px;letter-spacing:-4px;padding-right:4px}
.accent-option{border-color:#1b3557;background:#0d1f3c;color:#f4eee2}.accent-option small{color:#bcc7d1}.accent-option i{background:#617185}

/* Draw notation consistently instead of relying on device music fonts. */
.subdivision-options .rhythm-note{display:block;width:68px;max-width:88%;height:34px;margin:0 auto;color:currentColor;overflow:visible}.subdivision-options .triplet-note{height:38px}.rhythm-note ellipse,.rhythm-note path{fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}.rhythm-note text{fill:currentColor;stroke:none;font-family:var(--app-font);font-size:13px;font-weight:700;font-style:italic;text-anchor:middle}.rhythm-note .triplet-bracket{fill:none;stroke-width:1.7}
.accent-option{border-color:#d0c8ba;background:#ddd7cc;color:#33434e}.accent-option small{color:#617078}.accent-option i{background:#aeb5b6}

.tempo-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:11px}.tempo-presets button{min-height:43px;padding:6px 3px;border:1px solid #d0c8ba;border-radius:8px;background:#ddd7cc;color:#33434e;font:inherit;line-height:1.05}.tempo-presets strong,.tempo-presets small{display:block}.tempo-presets strong{font-size:11px}.tempo-presets small{margin-top:4px;color:#69757b;font-size:9px}.tempo-presets button[aria-pressed=true]{border-color:#0d1f3c;background:#0d1f3c;color:#fff;box-shadow:inset 0 -3px #b64712}.tempo-presets button[aria-pressed=true] small{color:#c8d1da}

.subdivision-options .rhythm-note,.subdivision-options .triplet-note{width:76px;max-width:92%;height:36px;margin:0 auto}.rhythm-note ellipse,.rhythm-note path{stroke-width:1.2}
.subdivision-options button[data-subdivision="2"] .rhythm-note{width:58px}.subdivision-options button[data-subdivision="3"] .rhythm-note{width:65px}