:root {
  --sp-pink: #e84b4b;
  --sp-blue: #00b5ff;
  --sp-lime: #fff900;
  --sp-purple: #7b61ff;
  --sp-black: #111;
  --sp-border: #e7e7e7;
  --sp-muted: #6f6f6f;
}

.soniq-practice {
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 18px 70px;
  color: var(--sp-black);
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
  box-sizing: border-box;
}
.soniq-practice *, .soniq-practice *::before, .soniq-practice *::after { box-sizing: border-box; }
.sp-header { margin-bottom: 20px; }
.sp-header h2 { margin: 2px 0 4px; font-size: clamp(28px,4vw,44px); line-height:1; }
.sp-header h2 .sp-practice-word { color:#e84b4b; }
.sp-header p { margin: 0; color:var(--sp-muted); }
.sp-mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.sp-mode { border:1px solid var(--sp-border); background:#fff; border-radius:12px; padding:14px; font-weight:900; letter-spacing:.12em; cursor:pointer; transition:.2s; }
.sp-mode.active { background:#111; color:#fff; border-color:#111; }
.sp-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.sp-main, .sp-side { min-width:0; }
.sp-panel { background:#fff; border:1px solid var(--sp-border); border-radius:18px; padding:20px; box-shadow:0 5px 22px rgba(0,0,0,.035); margin-bottom:16px; }
.sp-settings { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:end; }
.sp-control label { display:block; font-size:12px; font-weight:800; margin-bottom:6px; }
.sp-control select { width:100%; min-height:44px; border:1px solid #d8d8d8; border-radius:10px; background:#fff; padding:0 10px; font-size:14px; }
.sp-toggle { display:flex; align-items:center; gap:7px; min-height:44px; font-size:13px; font-weight:700; white-space:nowrap; }
.sp-toggle input { width:18px; height:18px; }
.sp-random { min-height:44px; border:0; border-radius:10px; background:#fff900; color:#111; padding:0 13px; font-weight:900; cursor:pointer; }
.sp-title-row { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.sp-title-row h3 { margin:3px 0 0; font-size:26px; }
.sp-badge { border:1px solid var(--sp-border); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:800; white-space:nowrap; }
.sp-note-list { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:10px; }
.sp-note-list > strong { width:100%; font-size:13px; }
.sp-note-list span { border:1px solid var(--sp-border); border-radius:10px; padding:8px 10px; font-weight:800; background:#fafafa; }
.sp-note-list span.root { background:#111; color:#fff; border-color:#111; }
.sp-note-list small { opacity:.7; margin-left:4px; font-size:10px; }
.sp-learning p { color:#555; font-size:14px; line-height:1.7; margin:9px 0; }
.sp-role-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:12px 0; }
.sp-role-list div { padding:9px; border-radius:10px; background:#f7f7f7; text-align:center; }
.sp-role-list b, .sp-role-list span { display:block; }
.sp-role-list b { font-size:11px; color:#777; }
.sp-role-list span { font-size:16px; font-weight:900; margin-top:2px; }
.sp-fret-wrap { overflow-x:auto; padding-bottom:5px; margin-top:18px; border-top:1px solid var(--sp-border); padding-top:16px; }
.sp-fretboard { min-width:850px; display:grid; grid-template-columns:45px minmax(800px,1fr); background:#f3f0e8; border-radius:12px; overflow:hidden; }
.sp-string-labels { display:grid; grid-template-rows:32px repeat(6,38px); background:#222; color:#fff; font-size:11px; font-weight:800; text-align:center; }
.sp-string-labels div { display:flex; align-items:center; justify-content:center; border-bottom:1px solid #444; }
.sp-frets { overflow:hidden; }
.sp-fret-numbers, .sp-string { display:grid; grid-template-columns:repeat(25,minmax(30px,1fr)); }
.sp-fret-numbers { height:32px; background:#e8e3d8; font-size:9px; font-weight:700; }
.sp-fret-numbers span { display:flex; align-items:center; justify-content:center; border-right:1px solid #ccc; }
.sp-string { height:38px; position:relative; }
.sp-string::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#8f8a80; pointer-events:none; }
.sp-fret-cell { min-width:30px; position:relative; border-right:1px solid #bbb; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; font-size:9px; }
.sp-fret-cell.is-scale, .sp-fret-cell.is-chord { margin:5px 2px; border-radius:50%; background:#fff; }
.sp-fret-cell.is-root { margin:3px 1px; border-radius:50%; background:var(--sp-pink); color:#fff; }
.sp-marker { font-size:13px; line-height:12px; font-weight:900; }
.sp-note-name { font-size:9px; font-weight:900; line-height:10px; }
.sp-fret-cell small { font-size:7px; opacity:.72; line-height:8px; }
.sp-metronome { position:sticky; top:20px; }
.sp-bpm-value { font-weight:900; font-size:15px; }
.sp-beats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:18px 0; }
.sp-beats span { aspect-ratio:1; border-radius:50%; background:#e8e8e8; transition:.06s; }
.sp-beats span.active { background:var(--sp-blue); transform:scale(1.08); }
.sp-bpm-controls { display:grid; grid-template-columns:42px 42px minmax(80px,1fr) 42px 42px; gap:5px; align-items:center; }
.sp-bpm-controls button { height:38px; border:1px solid var(--sp-border); background:#fff; border-radius:8px; font-weight:800; cursor:pointer; }
.sp-bpm-controls input { width:100%; }
.sp-note-values { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:16px 0; }
.sp-note-values button { border:1px solid var(--sp-border); background:#fff; border-radius:9px; height:42px; font-size:20px; cursor:pointer; }
.sp-note-values button.active { background:#111; color:#fff; border-color:#111; border:1px solid; }
.sp-metronome-start, .sp-primary { width:100%; height:48px; border:0; border-radius:10px; background:#111; color:#fff; font-weight:900; cursor:pointer; }
.sp-help h3 { margin:0 0 10px; }
.sp-help ol { margin:0; padding-left:20px; color:#555; font-size:13px; line-height:1.9; }
.sp-quiz { margin-top:16px; }
.sp-score { font-weight:900; }
.sp-answers { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.sp-answers button { min-height:52px; background:#fff; border:1px solid var(--sp-border); border-radius:11px; cursor:pointer; font-weight:800; padding:10px; }
.sp-answers button:hover { border-color:#111; }
.sp-answers button.correct { background:#dff8cf; border-color:#65a846; }
.sp-answers button.wrong { background:#ffe0e0; border-color:#d25b5b; }
.sp-result { margin:15px 0; padding:15px; border-radius:12px; background:#f5f5f5; }
.sp-result.is-correct { border-left:5px solid #62a841; }
.sp-result.is-wrong { border-left:5px solid #d25b5b; }
.sp-result strong { font-size:18px; }
.sp-hidden { display:none !important; }

@media (max-width: 1050px) {
  .sp-layout { grid-template-columns:1fr; }
  .sp-metronome { position:static; }
  .sp-settings { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .soniq-practice { padding:0 10px 45px; margin-top:20px; }
  .sp-panel { padding:14px; border-radius:14px; }
  .sp-mode-tabs { gap:5px; }
  .sp-mode { padding:12px 5px; font-size:12px; }
  .sp-settings { grid-template-columns:1fr 1fr; }
  .sp-control:last-of-type { grid-column:span 1; }
  .sp-random { width:100%; }
  .sp-title-row h3 { font-size:18px; }
  .sp-badge { font-size:10px; max-width:45%; white-space:normal; }
  .sp-role-list { grid-template-columns:repeat(2,1fr); }
  .sp-answers { grid-template-columns:1fr; }
  .sp-fretboard { min-width:950px; }
  .sp-bpm-controls { grid-template-columns:38px 38px minmax(60px,1fr) 38px 38px; }
}


/* =========================================================
   Soniq Practice v1.0.1 — UI / Fretboard Polish
========================================================= */
.soniq-practice {
  --sp-accent: #00b5ff;
  --sp-pink: #d733f6;
  --sp-lime: #d9ff55;
  --sp-purple: #7b61ff;
  background: linear-gradient(180deg,#f7f9fc 0%,#fff 56%,#f7f8fb 100%);
  border:1px solid #e3e7ee;
  border-radius:22px;
  padding:clamp(14px,2.5vw,28px);
  box-shadow:0 12px 40px rgba(20,25,35,.07);
}
.soniq-practice * { box-sizing:border-box; }

.sp-mode-tabs { gap:10px!important; margin-bottom:18px!important; }
.sp-mode-tabs button {
  min-height:48px;
  border-radius:14px!important;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid #e0e5ec!important;
  transition:transform .16s ease,box-shadow .16s ease;
}
.sp-mode-tabs button:hover { transform:translateY(-1px); }
.sp-mode-tabs button.is-active {
  box-shadow:0 8px 20px rgba(0,181,255,.18);
}

.sp-settings,.sp-card,.sp-metronome,.sp-quiz-card {
  border:1px solid #e2e7ee!important;
  border-radius:18px!important;
  box-shadow:0 8px 28px rgba(25,30,40,.055);
}
.sp-settings { background:rgba(255,255,255,.96)!important; }

.sp-fretboard-wrap {
  margin-top:22px!important;
  padding:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border:1px solid #cbd2dc!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff,#f4f6f9)!important;
  box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(20,25,35,.08);
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.sp-fretboard-wrap::-webkit-scrollbar { height:10px; }
.sp-fretboard-wrap::-webkit-scrollbar-thumb { background:#b7bec9;border-radius:99px; }

.sp-fretboard {
  min-width:980px!important;
  padding:18px 18px 20px!important;
}
.sp-fret-numbers {
  height:30px!important;
  margin-left:76px!important;
  display:grid!important;
  align-items:center;
  color:#626a77;
  font-size:12px!important;
  font-weight:800;
  border-bottom:1px solid #d8dde5;
}
.sp-fret-numbers>div {
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.sp-string-labels {
  width:64px!important;
  display:grid!important;
  grid-auto-rows:42px;
  align-items:center;
  justify-items:end;
  padding-right:12px;
  color:#343a44;
  font-size:13px!important;
  font-weight:900;
}
.sp-string {
  min-height:42px!important;
  display:grid!important;
  align-items:center;
  position:relative;
  background:linear-gradient(to bottom,transparent 45%,#7b838e 47%,#b8bec6 51%,transparent 53%)!important;
  border-bottom:1px solid #cdd3dc!important;
}
.sp-fret-cell {
  min-height:42px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  position:relative;
  border-right:3px solid #aeb5bf!important;
  border-left:1px solid rgba(255,255,255,.75);
}
.sp-fret-cell:first-child { border-left:5px solid #59616d!important; }
.sp-fret-cell[data-fret="0"] {
  background:#edf0f4!important;
  border-right:5px solid #5c6470!important;
}
.sp-fret-cell[data-fret="12"],.sp-fret-cell[data-fret="24"] {
  background:linear-gradient(180deg,#e7eaee,#f5f6f8)!important;
  border-right-color:#707985!important;
}
.sp-fret-cell[data-dot="true"]::before {
  content:"";
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  background:#c0c6cf;
  z-index:0;
}
.sp-fret-cell[data-double-dot="true"]::before {
  box-shadow:0 17px 0 #c0c6cf;
}

.sp-note {
  position:relative;
  z-index:3;
  width:30px!important;height:30px!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center;justify-content:center;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  border:2px solid #fff!important;
  box-shadow:0 3px 8px rgba(15,20,30,.18),0 0 0 1px rgba(20,25,35,.14);
}
.sp-note.is-root {
  width:36px!important;height:36px!important;
  background:#d9ff55!important;color:#111!important;
  border:3px solid #15171c!important;
  box-shadow:0 4px 12px rgba(20,25,35,.24),0 0 0 3px #d9ff55,0 0 0 5px rgba(0,0,0,.06);
  font-size:11px!important;
}
.sp-note.is-scale { background:#00b5ff!important;color:#06141a!important; }
.sp-note.is-chord {
  background:#d733f6!important;color:#fff!important;border-radius:8px!important;
}
.sp-note.role-root { background:#d9ff55!important;color:#111!important; }
.sp-note.role-third { background:#00b5ff!important;color:#07141a!important; }
.sp-note.role-fifth { background:#7b61ff!important;color:#fff!important;border-radius:5px!important; }
.sp-note.role-seventh { background:#20242d!important;color:#fff!important;border-radius:4px!important; }
.sp-note.role-ninth { background:#ff9f1c!important;color:#211400!important; }

.sp-explanation {
  background:linear-gradient(135deg,#f7fbff,#fff8ff)!important;
  border:1px solid #e0e6ee!important;
  border-left:4px solid #00b5ff!important;
  border-radius:12px!important;
  padding:14px 16px!important;
  line-height:1.8;
}
.sp-button,.sp-action,button.sp-random {
  min-height:44px;
  border-radius:12px!important;
  font-weight:800!important;
  transition:transform .15s ease,box-shadow .15s ease;
}
.sp-button:hover,.sp-action:hover,button.sp-random:hover { transform:translateY(-1px); }

.sp-metronome {
  background:#15181f!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 30px rgba(15,18,25,.16)!important;
}
.sp-metronome input[type=range] { accent-color:#d9ff55; }
.sp-beat {
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:10px 0;
}
.sp-beat span {
  width:11px;height:11px;border-radius:50%;
  display:inline-block;
  background:#5d6470;
  transition:transform .08s ease,background .08s ease;
}
.sp-beat span.is-active {
  background:#d9ff55;
  transform:scale(1.45);
  box-shadow:0 0 14px rgba(217,255,85,.55);
}

@media(max-width:780px){
  .soniq-practice{border-radius:16px;padding:12px}
  .sp-fretboard{min-width:900px!important;padding:14px 12px 18px!important}
  .sp-fret-numbers{margin-left:68px!important}
  .sp-string-labels{width:56px!important;padding-right:8px;font-size:11px!important}
  .sp-note{width:28px!important;height:28px!important;font-size:9px!important}
  .sp-note.is-root{width:34px!important;height:34px!important}
}
@media(max-width:480px){
  .sp-fretboard{min-width:850px!important}
  .sp-fretboard-wrap{border-radius:12px!important}
}


/* =========================================================
   v1.0.1 Full-Width Fretboard
   指板をコンテンツ幅いっぱいに表示
========================================================= */

.sp-fretboard-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.sp-fretboard {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 18px 14px 20px !important;
}

.sp-fret-numbers {
  width: 100% !important;
  margin-left: 0 !important;
}

.sp-fretboard .sp-string {
  width: 100% !important;
}

/* 画面幅が十分ある場合は、12/24フレットを指板全体へ均等配置 */
@media (min-width: 781px) {
  .sp-fretboard {
    overflow: hidden;
  }

  .sp-fret-numbers,
  .sp-fretboard .sp-string {
    width: 100% !important;
  }

  .sp-fret-cell {
    min-width: 0 !important;
  }
}

/* タブレット・スマホでは横スクロールを維持しつつ、
   表示領域自体は親コンテナいっぱい */
@media (max-width: 780px) {
  .sp-fretboard-wrap {
    width: 100% !important;
  }

  .sp-fretboard {
    min-width: 900px !important;
  }
}


/* =========================================================
   v1.0.1 — One Column Layout
   学習エリア → メトロノームの1カラム構成
========================================================= */

/* 既存の2カラム用レイアウトを1カラム化 */
.sp-main-layout,
.sp-content-layout,
.sp-learning-layout,
.sp-practice-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* 学習コンテンツ */
.sp-learning,
.sp-learning-panel,
.sp-main-panel,
.sp-fretboard-panel {
  width: 100% !important;
  max-width: none !important;
}

/* メトロノームを必ず下へ */
.sp-metronome,
.sp-metronome-panel,
.sp-metronome-card {
  width: 100% !important;
  max-width: none !important;
  margin-top: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* メトロノーム内部も横幅を有効活用 */
.sp-metronome > * {
  max-width: none;
}

/* 既存のflex/grid親に対しても1カラムを強制 */
.soniq-practice .sp-layout,
.soniq-practice .sp-columns,
.soniq-practice .sp-grid {
  grid-template-columns: 1fr !important;
}

.soniq-practice .sp-layout,
.soniq-practice .sp-columns {
  display: grid !important;
}

/* メトロノームをDOM上の最後の要素として扱える場合の順序 */
.soniq-practice .sp-metronome {
  order: 99 !important;
}

/* 画面幅に関係なく1カラム */
@media (min-width: 781px) {
  .soniq-practice .sp-main-layout,
  .soniq-practice .sp-content-layout,
  .soniq-practice .sp-learning-layout,
  .soniq-practice .sp-practice-layout {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   v1.0.1 — Open string / 0F alignment fix
========================================================= */
.sp-fret-numbers > span[data-fret-number="0"] {
  font-weight: 900;
  background: #dfe3e8;
  color: #20252c;
  border-right: 4px solid #59616d;
}

.sp-fret-cell[data-fret="0"] {
  background: #edf0f4 !important;
  border-right: 4px solid #59616d !important;
}

/* Keep the 0F marker and "0" label centered in exactly the same column. */
.sp-fret-numbers,
.sp-string {
  align-items: stretch;
}

.sp-fret-cell {
  margin-top: 0;
  margin-bottom: 0;
}


/* =========================================================
   v1.0.1 — Fretboard clipping + compact metronome polish
========================================================= */

/* --- Fretboard: prevent 6th-string/root markers from being clipped --- */
.sp-fretboard {
  overflow: visible !important;
  padding-top: 18px !important;
  padding-bottom: 26px !important;
}

.sp-frets {
  overflow: visible !important;
}

.sp-string,
.sp-string-labels {
  min-height: 46px !important;
  height: 46px !important;
}

.sp-string-labels {
  grid-auto-rows: 46px !important;
}

.sp-fret-numbers {
  height: 32px !important;
}

.sp-fret-cell {
  min-height: 46px !important;
  height: 46px !important;
}

.sp-fret-cell.is-scale,
.sp-fret-cell.is-chord {
  margin: 6px 2px !important;
}

.sp-fret-cell.is-root {
  margin: 5px 1px !important;
}

/* Make the actual note markers slightly safer inside the row */
.sp-marker {
  display: block;
  line-height: 13px !important;
}

.sp-note-name {
  display: block;
}

/* --- Compact metronome --- */
.sp-metronome {
  position: static !important;
  margin-top: 20px !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(15,18,25,.13) !important;
}

.sp-metronome h3,
.sp-metronome .sp-section-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.sp-bpm-value {
  font-size: 28px !important;
  line-height: 1 !important;
}

.sp-beats {
  grid-template-columns: repeat(4, minmax(0, 44px)) !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

.sp-beats span {
  width: 36px !important;
  height: 36px !important;
  aspect-ratio: auto !important;
  justify-self: center;
}

.sp-bpm-controls {
  max-width: 620px;
  margin: 10px auto 0 !important;
  grid-template-columns: 40px 40px minmax(120px,1fr) 40px 40px !important;
  gap: 6px !important;
}

.sp-bpm-controls button {
  height: 36px !important;
}

.sp-note-values {
  max-width: 420px;
  margin: 10px auto !important;
  gap: 6px !important;
}

.sp-note-values button {
  height: 38px !important;
  font-size: 16px !important;
}

.sp-metronome-start,
.sp-metronome .sp-primary {
  max-width: 420px;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 44px !important;
	border: 1px solid;
}

@media (max-width: 780px) {
  .sp-fretboard {
    padding-bottom: 28px !important;
  }

  .sp-string,
  .sp-string-labels {
    min-height: 46px !important;
    height: 46px !important;
  }

  .sp-fret-cell {
    min-height: 46px !important;
    height: 46px !important;
  }

  .sp-metronome {
    padding: 16px !important;
  }

  .sp-bpm-controls {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .sp-metronome {
    padding: 14px !important;
  }

  .sp-beats {
    gap: 6px !important;
  }

  .sp-beats span {
    width: 32px !important;
    height: 32px !important;
  }
}


/* =========================================================
   v1.0.1 — Fretboard: note names only / perfect circles
========================================================= */

/* Fretboard markers are intentionally simple:
   note name only, no scale degree or extra symbols. */
.sp-fretboard .sp-note,
.sp-fretboard .sp-marker {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
}

/* Root remains circular but slightly more prominent. */
.sp-fretboard .sp-note.is-root,
.sp-fretboard .sp-marker.is-root {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
}

/* Chord role shapes are unified into circles as requested. */
.sp-fretboard .sp-note.role-third,
.sp-fretboard .sp-note.role-fifth,
.sp-fretboard .sp-note.role-seventh,
.sp-fretboard .sp-note.role-ninth,
.sp-fretboard .sp-note.is-chord {
  border-radius: 50% !important;
}

/* Do not show interval/degree helper text inside fretboard markers. */
.sp-fretboard .sp-note small,
.sp-fretboard .sp-marker small,
.sp-fretboard .sp-note .sp-degree,
.sp-fretboard .sp-marker .sp-degree {
  display: none !important;
}

@media (max-width: 780px) {
  .sp-fretboard .sp-note,
  .sp-fretboard .sp-marker {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 10px !important;
  }

  .sp-fretboard .sp-note.is-root,
  .sp-fretboard .sp-marker.is-root {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}


/* =========================================================
   v1.0.1 — Fretboard note-only circular markers
========================================================= */
.sp-fretboard .sp-marker {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.sp-fretboard .sp-note-name,
.sp-fretboard .sp-note small,
.sp-fretboard .sp-marker small {
  display: none !important;
}

/* Make the marker itself the visual note circle. */
.sp-fretboard .sp-fret-cell.is-scale .sp-marker {
  background: #00b5ff;
  color: #06141a;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(15,20,30,.18);
}

.sp-fretboard .sp-fret-cell.is-chord .sp-marker {
  background: #d733f6;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(15,20,30,.18);
}

.sp-fretboard .sp-fret-cell.is-root .sp-marker {
  background: #d9ff55;
  color: #111;
  border: 3px solid #15171c;
  box-shadow: 0 3px 10px rgba(20,25,35,.24);
  font-size: 13px !important;
}

@media (max-width: 780px) {
  .sp-fretboard .sp-marker {
    font-size: 11px !important;
  }
  .sp-fretboard .sp-fret-cell.is-root .sp-marker {
    font-size: 12px !important;
  }
}


/* =========================================================
   v1.0.2 — Fretboard note names + adjustable time signature
========================================================= */

/* 指板上は音名だけを見やすく表示 */
.sp-fret-cell {
  font-size: 13px !important;
  font-weight: 900 !important;
}
.sp-fret-cell .sp-marker {
  font-size: 13px !important;
}

/* 拍子（1〜12拍子） — 丸を中央に置き、左右のボタンで増減 */
.sp-beat-controls {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 4px;
  max-width: 520px;
}
.sp-beat-controls button {
  width: 38px;
  height: 34px;
  border: 1px solid #fff;
  background: #222731;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.sp-beat-controls button:hover {
  background: #303641;
}
.sp-beats {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 9px;
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .sp-beat-controls {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 7px;
  }
  .sp-beat-controls button {
    width: 34px;
  }
  .sp-beats {
    gap: 5px;
  }
  .sp-beats span {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
  }
  .sp-fret-cell {
    font-size: 12px !important;
  }
}

/* =========================================================
   v1.0.3 — Compact round fret markers / no position dots
========================================================= */

/* 指板上のポジションドットは表示しない */
.sp-fret-cell[data-dot="true"]::before,
.sp-fret-cell[data-double-dot="true"]::before {
  content: none !important;
  display: none !important;
}

/* 指板セルは小さく、音名マーカーは完全な正円 */
.sp-fretboard .sp-fret-cell.is-scale,
.sp-fretboard .sp-fret-cell.is-chord,
.sp-fretboard .sp-fret-cell.is-root {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
  align-self: center !important;
  justify-self: center !important;
}

.sp-fretboard .sp-fret-cell .sp-marker {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* 0フレットも構成音マーカーを表示する */
.sp-fretboard .sp-fret-cell[data-fret="0"].is-scale .sp-marker {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  background: #00b5ff !important;
  color: #06141a !important;
  border: 2px solid #fff !important;
  box-shadow: 0 3px 8px rgba(15,20,30,.18) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sp-fretboard .sp-fret-cell[data-fret="0"].is-chord .sp-marker {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  background: #d733f6 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 3px 8px rgba(15,20,30,.18) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sp-fretboard .sp-fret-cell[data-fret="0"].is-root .sp-marker {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  background: #e84b4b !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 3px 8px rgba(15,20,30,.18) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* =========================================================
   v1.0.4 — Fretboard: remove left string labels / fix alignment
========================================================= */
.soniq-practice .sp-fretboard {
  display: block !important;
  grid-template-columns: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

.soniq-practice .sp-string-labels {
  display: none !important;
}

.soniq-practice .sp-frets {
  width: 100% !important;
  margin: 0 !important;
}

.soniq-practice .sp-fret-numbers,
.soniq-practice .sp-string {
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Every fret cell shares exactly the same grid as the fret numbers. */
.soniq-practice .sp-fret-cell {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* No position dots. */
.soniq-practice .sp-fret-cell[data-dot="true"]::before,
.soniq-practice .sp-fret-cell[data-double-dot="true"]::before {
  content: none !important;
  display: none !important;
}

/* 0F is a normal open-string cell; do not draw a special circle/background. */
.soniq-practice .sp-fret-cell[data-fret="0"] {
  background: transparent !important;
  border-right: 1px solid #aeb5bf !important;
}

/* Smaller, truly circular note markers. */
.soniq-practice .sp-fret-cell.is-scale,
.soniq-practice .sp-fret-cell.is-chord,
.soniq-practice .sp-fret-cell.is-root {
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.soniq-practice .sp-fret-cell.is-root {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

.soniq-practice .sp-fret-cell .sp-marker {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

@media (max-width: 780px) {
  .soniq-practice .sp-fret-cell.is-scale,
  .soniq-practice .sp-fret-cell.is-chord {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
  .soniq-practice .sp-fret-cell.is-root {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* v1.0.5 — Fretboard: thin white fret lines */
.soniq-practice .sp-fret-cell {
  border-right: 1px solid #fff !important;
}

.soniq-practice .sp-fret-numbers span {
  border-right: 1px solid #fff !important;
}

.soniq-practice .sp-fret-cell[data-fret="0"] {
  border-right: 1px solid #fff !important;
}

/* =========================================================
   v1.0.6 — Fret lines remain visible through all note positions
========================================================= */
.sp-fretboard .sp-string {
  position: relative !important;
}

/* Every fret boundary is a thin white line, including where E/F/B/C
   (or any other note) is highlighted. */
.sp-fretboard .sp-fret-cell {
  border-right: 1px solid #fff !important;
  border-left: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.sp-fretboard .sp-fret-cell:first-child {
  border-left: 1px solid #fff !important;
}

/* The nut / octave boundaries stay slightly stronger while remaining white. */
.sp-fretboard .sp-fret-cell[data-fret="0"] {
  border-right: 1px solid #fff !important;
}
.sp-fretboard .sp-fret-cell[data-fret="12"],
.sp-fretboard .sp-fret-cell[data-fret="24"] {
  border-right: 1px solid #fff !important;
}

/* v1.0.7 — Fretboard cleanup: no string gradient, continuous fret lines, pink root */
.soniq-practice .sp-string {
  background: transparent !important;
}

/* Keep every fret cell as a full-width grid column so the white fret line
   continues behind/alongside note markers. The marker itself is the circle. */
.soniq-practice .sp-fret-cell,
.soniq-practice .sp-fret-cell.is-scale,
.soniq-practice .sp-fret-cell.is-chord,
.soniq-practice .sp-fret-cell.is-root {
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid #fff !important;
  box-sizing: border-box !important;
}

.soniq-practice .sp-fret-cell .sp-marker {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

/* 主音はピンク */
.soniq-practice .sp-fret-cell.is-root .sp-marker,
.soniq-practice .sp-fretboard .sp-marker.is-root {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  background: #ff4f9a !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 3px 8px rgba(15,20,30,.18) !important;
}

/* The string itself has no decorative horizontal gradient. */
.soniq-practice .sp-string::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 780px) {
  .soniq-practice .sp-fret-cell,
  .soniq-practice .sp-fret-cell.is-scale,
  .soniq-practice .sp-fret-cell.is-chord,
  .soniq-practice .sp-fret-cell.is-root {
    height: 46px !important;
    min-height: 46px !important;
  }
  .soniq-practice .sp-fret-cell .sp-marker {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
  .soniq-practice .sp-fret-cell.is-root .sp-marker,
  .soniq-practice .sp-fretboard .sp-marker.is-root {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* v1.0.8 — unified fret widths / no white cell backgrounds / pink root */
.sp-fretboard .sp-fret-numbers,
.sp-fretboard .sp-string {
  display: grid !important;
  grid-template-columns: repeat(25, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

.sp-fretboard .sp-fret-cell {
  min-width: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Do not paint scale/chord cells white. */
.sp-fretboard .sp-fret-cell.is-scale,
.sp-fretboard .sp-fret-cell.is-chord {
  background: transparent !important;
}

/* Root note is pink. */
.sp-fretboard .sp-fret-cell.is-root,
.sp-fretboard .sp-fret-cell.is-root .sp-marker,
.sp-fretboard .sp-fret-cell.is-root .sp-note {
  background: #e84b4b !important;
  color: #fff !important;
}

/* v1.0.9 — exact fret-number alignment / smaller note circles */
.soniq-practice .sp-fret-numbers,
.soniq-practice .sp-string {
  display: grid !important;
  grid-template-columns: repeat(25, minmax(0, 1fr)) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.soniq-practice .sp-fret-numbers > span,
.soniq-practice .sp-fret-cell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.soniq-practice .sp-fret-numbers > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Keep the marker small while the fret cell itself remains a full grid column. */
.soniq-practice .sp-fret-cell.is-scale,
.soniq-practice .sp-fret-cell.is-chord {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  justify-self: center !important;
  align-self: center !important;
}

.soniq-practice .sp-fret-cell.is-root {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  justify-self: center !important;
  align-self: center !important;
}

@media (max-width: 780px) {
  .soniq-practice .sp-fret-cell.is-scale,
  .soniq-practice .sp-fret-cell.is-chord {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
  .soniq-practice .sp-fret-cell.is-root {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
}


/* v1.0.11 — keep fret borders on every cell, including non-chord/non-scale areas.
   The cell remains a full grid column; only the marker is circular. */
.soniq-practice .sp-fret-cell.is-scale,
.soniq-practice .sp-fret-cell.is-chord,
.soniq-practice .sp-fret-cell.is-root {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right: 1px solid #fff !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.soniq-practice .sp-fret-cell.is-scale .sp-marker,
.soniq-practice .sp-fret-cell.is-chord .sp-marker {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

.soniq-practice .sp-fret-cell.is-root .sp-marker {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

@media (max-width: 780px) {
  .soniq-practice .sp-fret-cell.is-scale .sp-marker,
  .soniq-practice .sp-fret-cell.is-chord .sp-marker {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }
  .soniq-practice .sp-fret-cell.is-root .sp-marker {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
}


/* v1.0.12 — mobile/tablet: keep the fretboard at its desktop width and scroll horizontally. */
.sp-fretboard-wrap,
.sp-fretboard-container,
.sp-fretboard-scroll,
.soniq-practice .sp-fretboard-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  .sp-fretboard-wrap,
  .sp-fretboard-container,
  .sp-fretboard-scroll,
  .soniq-practice .sp-fretboard-wrap {
    overflow-x: auto !important;
  }

  .sp-fretboard,
  .soniq-practice .sp-fretboard {
    min-width: 1280px !important;
    width: 1280px !important;
    max-width: none !important;
  }

  /* Do not let individual fret columns shrink on smaller screens. */
  .sp-fret-cell,
  .sp-fret-number,
  .soniq-practice .sp-fret-cell,
  .soniq-practice .sp-fret-number {
    flex-shrink: 0 !important;
  }
}

/* Metronome start/stop button: prominent and centered. */
.sp-metronome,
.sp-metronome-panel,
.soniq-practice .sp-metronome {
  text-align: center !important;
}

.sp-metronome .sp-start,
.sp-metronome .sp-start-button,
.sp-metronome button[data-action="start"],
.soniq-practice .sp-metronome button[data-action="start"] {
  display: block !important;
  width: min(260px, 80%) !important;
  min-height: 52px !important;
  margin: 16px auto !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}


/* v1.0.13 — slightly larger fretboard note names / centered time-signature controls */
.soniq-practice .sp-fretboard .sp-marker {
  font-size: 15px !important;
  font-weight: 900 !important;
}
.soniq-practice .sp-fretboard .sp-fret-cell.is-scale .sp-marker,
.soniq-practice .sp-fretboard .sp-fret-cell.is-chord .sp-marker {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  border: 0;
}
.soniq-practice .sp-fretboard .sp-fret-cell.is-root .sp-marker {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

.soniq-practice .sp-beat-controls {
  grid-template-columns: 40px minmax(78px, auto) 40px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
.soniq-practice .sp-beat-controls button {
  width: 40px !important;
  height: 36px !important;
}
.soniq-practice #sp-meter-value {
  min-width: 78px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

@media (max-width: 780px) {
  .soniq-practice .sp-fretboard .sp-fret-cell.is-scale .sp-marker,
.soniq-practice .sp-fretboard .sp-fret-cell.is-chord .sp-marker {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  border: 0;
}


/* v1.0.22 — responsive metronome only */
@media (max-width: 780px) {
  .soniq-practice .sp-metronome {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-controls {
    width: 100% !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 6px !important;
  }

  .soniq-practice .sp-metronome .sp-beat-controls {
    width: 100% !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 6px !important;
  }

  .soniq-practice .sp-metronome .sp-note-values {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .soniq-practice .sp-metronome .sp-beats {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .soniq-practice .sp-metronome-start,
  .soniq-practice .sp-metronome .sp-primary,
  .soniq-practice .sp-metronome .sp-start,
  .soniq-practice .sp-metronome .sp-start-button,
  .soniq-practice .sp-metronome button[data-action="start"] {
    width: min(260px, 100%) !important;
  }
}

@media (max-width: 480px) {
  .soniq-practice .sp-metronome {
    padding: 12px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-value {
    font-size: 24px !important;
  }

  .soniq-practice .sp-metronome .sp-beats {
    gap: 4px !important;
  }

  .soniq-practice .sp-metronome .sp-beat-controls button,
  .soniq-practice .sp-metronome .sp-bpm-controls button {
    min-width: 36px !important;
  }
}


/* =========================================================
   Metronome UI polish — v1.0.23
   Fix layout and responsive controls without touching fretboard.
   ========================================================= */

.soniq-practice .sp-metronome {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 22px !important;
  border-radius: 18px !important;
  overflow: hidden;
  text-align: center;
}

.soniq-practice .sp-metronome .sp-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  margin-bottom: 18px !important;
}

.soniq-practice .sp-metronome .sp-title-row h3 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.2;
}

.soniq-practice .sp-metronome .sp-bpm-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 96px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  font-size: 16px !important;
  line-height: 1;
  white-space: nowrap;
}

/* Beat counter */
.soniq-practice .sp-metronome .sp-beat-controls {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 18px !important;
}

.soniq-practice .sp-metronome .sp-beat-controls > button {
  width: 40px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

.soniq-practice .sp-metronome .sp-beats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

.soniq-practice .sp-metronome .sp-beats span {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex: 0 0 14px !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
}

/* BPM: exactly five controls — −5, −1, slider, +1, +5 */
.soniq-practice .sp-metronome .sp-bpm-controls {
  display: grid !important;
  grid-template-columns: 42px 42px minmax(0, 1fr) 42px 42px !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100%;
  margin: 0 auto 16px !important;
}

.soniq-practice .sp-metronome .sp-bpm-controls button {
  width: 42px !important;
  min-width: 42px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
}

.soniq-practice .sp-metronome .sp-bpm-controls input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}

/* Note values: exactly three equal buttons */
.soniq-practice .sp-metronome .sp-note-values {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
}

.soniq-practice .sp-metronome .sp-note-values button {
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

/* Start button */
.soniq-practice .sp-metronome .sp-metronome-start {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  letter-spacing: .02em;
}

/* Mobile */
@media (max-width: 780px) {
  .soniq-practice .sp-metronome {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .soniq-practice .sp-metronome .sp-title-row {
    margin-bottom: 16px !important;
  }

  .soniq-practice .sp-metronome .sp-title-row h3 {
    font-size: 18px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-value {
    min-width: 82px;
    padding: 6px 8px;
    font-size: 14px !important;
  }

  .soniq-practice .sp-metronome .sp-beat-controls {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
  }

  .soniq-practice .sp-metronome .sp-beat-controls > button {
    width: 38px !important;
    height: 36px !important;
  }

  .soniq-practice .sp-metronome .sp-beats {
    gap: 8px !important;
  }

  .soniq-practice .sp-metronome .sp-beats span {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    flex-basis: 12px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-controls {
    grid-template-columns: 36px 36px minmax(0, 1fr) 36px 36px !important;
    gap: 5px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-controls button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }

  .soniq-practice .sp-metronome .sp-note-values {
    gap: 6px !important;
  }

  .soniq-practice .sp-metronome .sp-note-values button {
    height: 40px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 380px) {
  .soniq-practice .sp-metronome {
    padding: 14px !important;
  }

  .soniq-practice .sp-metronome .sp-title-row {
    gap: 8px;
  }

  .soniq-practice .sp-metronome .sp-title-row h3 {
    font-size: 17px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-value {
    min-width: 76px;
    font-size: 13px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-controls {
    grid-template-columns: 34px 34px minmax(0, 1fr) 34px 34px !important;
    gap: 4px !important;
  }

  .soniq-practice .sp-metronome .sp-bpm-controls button {
    width: 34px !important;
    min-width: 34px !important;
    font-size: 11px !important;
  }
}


/* v1.0.24 — Open string (0 fret) note markers use the same note colors as fretted notes. */