.metronome-page .breadcrumbs{font-size:.8rem;margin-bottom:22px}.metronome-page h1{letter-spacing:-.035em;text-wrap:balance}.metronome-page h2{font-size:1.15rem;margin:0 0 16px}.metronome-page h3{font-size:1rem;margin:28px 0 10px}.metronome-page p{max-width:72ch}.metronome-page input{caret-color:var(--accent)}.metronome-page ::selection{background:var(--accent);color:var(--accent-text)}
.metro-workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:24px;align-items:start}.metro-workspace .tool-card{border-radius:16px;box-shadow:none;margin:0}.metro-player{text-align:center}.metro-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:.85rem;margin-bottom:20px}.metro-tempo-label{display:block;font-weight:600;font-size:1rem}.metro-tempo-label span{font-size:.8rem;font-weight:400;color:var(--muted)}
.metro-tempo{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 18px;font-variant-numeric:tabular-nums}.metro-tempo #m-bpm{font-size:clamp(2.8rem,5vw,4rem);font-weight:600;letter-spacing:-.03em;width:3.5ch;box-sizing:content-box;padding:0 5px;text-align:center;line-height:1.3;border:0;border-bottom:2px solid var(--control-border,var(--border));border-radius:0;appearance:textfield;-moz-appearance:textfield}.metro-tempo #m-bpm::-webkit-inner-spin-button,.metro-tempo #m-bpm::-webkit-outer-spin-button{-webkit-appearance:none}.metro-tempo>span{font-size:.85rem;color:var(--muted)}.metro-tempo .button{font-size:1.3rem;width:44px;padding:6px;flex-shrink:0}
.metronome-page input[type=range]{width:100%;accent-color:var(--accent);min-height:32px;cursor:pointer}.metro-player>#m-slider{max-width:380px}.metro-player .help-text{margin:8px auto 0}.metro-beats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;min-height:56px;margin:30px 0 14px}.metro-beat{width:48px;height:48px;display:grid;place-content:center;border:2px solid var(--control-border,var(--border));border-radius:50%;font-weight:500;font-variant-numeric:tabular-nums;position:relative}.metro-beat.strong{border-color:var(--accent);font-weight:700}.metro-beat.silent{border-style:dashed;color:var(--muted)}.metro-beat.active{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}.metro-beat.active::after{content:"";position:absolute;bottom:-9px;left:calc(50% - 3px);width:6px;height:3px;background:var(--text)}
.metro-position{min-height:1.6em;font-size:.9rem;margin:16px auto 22px;font-variant-numeric:tabular-nums}.metro-transport{justify-content:center;margin:0}.metro-transport .primary{min-width:160px}.metro-tap{border-block:1px solid var(--border);padding:22px 0;margin:26px 0 0}.metro-tap .button{min-width:150px;touch-action:manipulation}.metro-session{display:flex;justify-content:space-between;gap:16px;font-size:.85rem;margin-top:20px;color:var(--muted);text-align:left}.metro-session #m-time{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}.metro-player>.status{text-align:left;min-height:2.8em;margin-bottom:0}.metro-player>.metro-shortcuts{text-align:left;font-size:.75rem;margin-top:18px}.metro-player .error{text-align:left}
.metro-settings form{display:grid;gap:20px}.metro-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.metronome-page .field>span{font-weight:600;color:var(--text);font-size:.8rem}.metro-settings input,.metro-settings select,.metro-lower input{width:100%}.metro-settings .inline-check{margin:0}.metronome-page input[type=checkbox]{width:18px}.metro-accents{padding:0;border:0;margin:0;min-width:0}.metro-accents legend{font-weight:600;font-size:.8rem;margin-bottom:8px}.metro-accents>div{display:flex;gap:8px;flex-wrap:wrap}.metro-accent{min-width:50px;padding:7px 10px;display:flex;flex-direction:column;gap:1px}.metro-accent small{font-size:.64rem}.metro-accent[data-accent="2"]{border-color:var(--accent);background:var(--surface-soft);color:var(--accent)}.metro-accent[data-accent="0"]{border-style:dashed}.metro-accents .help-text{margin:10px 0 0}.metronome-page #m-wake-status:empty{display:none}.metro-settings #m-wake-status{margin:0}
.metro-lower{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-block:1px solid var(--border);padding:30px 0;margin:32px 0}.metro-lower fieldset{border:0;padding:0;margin:0;min-width:0}.metro-lower fieldset:disabled{opacity:.65}.metro-ramp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metro-ramp-fields[hidden]{display:none}.metro-lower .actions{margin-top:14px}.metro-lower .help-text{margin-bottom:16px}.metro-lower #m-practice-summary{margin-top:20px}.metro-preset-list{list-style:none;margin:16px 0;padding:0}.metro-preset-list li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:12px 0}.metro-preset-list .metro-preset-info{flex:1 1 140px;min-width:0;overflow-wrap:anywhere;font-size:.85rem}.metro-preset-info small{display:block;color:var(--muted);font-size:.75rem}.metro-preset-list .button{font-size:.75rem;padding:8px 10px}.metro-related{margin-top:28px}.metro-help{max-width:75ch}.metro-related .actions{margin-top:14px}.metronome-page [aria-invalid=true]{border-color:var(--danger)!important}
.metro-player:fullscreen{overflow-y:auto;background:var(--surface);border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;padding:24px;scrollbar-color:var(--accent) var(--surface)}.metro-player:fullscreen>.metro-topbar{width:100%;max-width:900px}.metro-player:fullscreen>.metro-tempo-label{margin-top:auto}.metro-player:fullscreen .metro-session,.metro-player:fullscreen>.status,.metro-player:fullscreen>.error,.metro-player:fullscreen>.metro-shortcuts{width:100%;max-width:550px}.metro-player:fullscreen>.metro-shortcuts{margin-bottom:auto}.metro-player:fullscreen .metro-tap{width:min(100%,550px)}.metro-player:fullscreen .metro-tempo #m-bpm{font-size:clamp(3rem,9vh,6rem)}
@media(max-width:850px){.metro-workspace{grid-template-columns:minmax(0,1fr)}.metro-lower{gap:28px}.metro-player{max-width:100%}.metro-beats{margin-top:24px}.metro-settings form{grid-template-columns:1fr 1fr;gap:22px}.metro-settings .metro-pair,.metro-settings .metro-accents{grid-column:1 / -1}}
@media(max-width:540px){.metro-lower{grid-template-columns:minmax(0,1fr);gap:30px}.metro-settings form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.metro-tempo{gap:6px}.metro-tempo #m-bpm{font-size:3rem}.metro-tempo>span{font-size:.75rem}.metro-workspace .tool-card{padding:20px 16px}.metro-topbar{margin-bottom:16px}.metro-beats{gap:8px}.metro-beat{width:40px;height:40px}.metro-transport .button{flex:1 1 110px;min-width:0}.metro-position{font-size:.8rem}.metro-ramp-fields{grid-template-columns:1fr 1fr}.metro-ramp-fields>.field:last-child{grid-column:1 / -1}.metro-player:fullscreen{padding:16px}.metro-player:fullscreen .metro-topbar{margin-bottom:8px}.metro-player:fullscreen .metro-beats{margin-top:16px}.metro-player:fullscreen .metro-tap{margin-top:18px;padding:14px 0}.metro-player:fullscreen .metro-shortcuts{display:none}}
#m-slider{margin:0}
@media(max-width:540px){.metro-settings .metro-pair{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.metronome-page .button{transition:none}}