/* オンラインメトロノーム（/online-metronome/）だけの見た目。色はサイト共通の変数を使う */
.mt-box{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px;margin:16px 0 12px}
.mt-bpmrow{display:flex;align-items:center;justify-content:center;gap:12px}
.mt-bpmlab{display:flex;align-items:baseline;gap:6px;font-weight:700;color:var(--sub)}
#mt-bpm{font:inherit;font-size:56px;font-weight:800;width:3.4ch;text-align:center;border:0;background:transparent;color:var(--fg);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
#mt-bpm::-webkit-inner-spin-button,#mt-bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#mt-slider{display:block;width:100%;margin:10px 0 14px}
.mt-sm{font:inherit;font-size:22px;min-width:48px;min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--bg,#fff);color:var(--fg);cursor:pointer}
.mt-dots{display:flex;justify-content:center;gap:12px;min-height:28px;margin:4px 0 12px}
.mt-dot{width:24px;height:24px;border-radius:50%;background:var(--line);transition:background .05s}
.mt-dot.on{background:#1f9d55}
.mt-dot.first.on{background:#d93a2b}
.mt-ctl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.mt-meterlab{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.mt-meterlab select{font:inherit;min-height:44px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg,#fff);color:var(--fg)}
.mt-btn{font:inherit;font-weight:700;font-size:18px;padding:12px 36px;border-radius:10px;border:1px solid var(--line);background:var(--accent-solid);color:var(--on-solid);cursor:pointer;min-height:48px;min-width:8em}
.mt-btn[aria-pressed="true"]{background:var(--bg,#fff);color:var(--fg)}
.mt-status{color:var(--sub);font-size:14px;margin:12px 0 0;text-align:center}
.mt-steps li,.mt-note-list li{margin:6px 0}
.mt-qr{display:none}
@media (min-width:768px){.mt-qr{display:flex;align-items:center;gap:16px;margin:16px 0 4px;font-size:14px;color:var(--body,var(--fg))}
  .mt-qr img{width:132px;height:132px;flex:none;border-radius:8px;background:#fff;padding:6px;border:1px solid var(--line)}}
.mt-cta{margin-top:14px}