/* 追加ツール(微分音・ギター) */

/* ===== 微分音ツール(.mt-) ===== */
.mt-wrap .paper + .paper{ margin-top:16px; }
.mt-val{ height:34px; display:flex; align-items:center; font-size:13.5px; font-family:var(--mono); }
.mt-info{ margin:10px 0 0; padding:9px 12px; border-radius:8px; background:var(--surface-2); color:var(--sub); font-size:13px; line-height:1.6; min-height:20px; }
.mt-axis{ margin:8px 0 0; }

.mt-keys-wrap{ overflow-x:auto; padding-bottom:6px; margin:4px 0; }
.mt-keys{ display:flex; gap:3px; min-width:calc(var(--n) * 50px); }
.mt-key{ flex:1 1 0; min-width:0; height:116px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:8px 2px 7px; border:1px solid var(--line2); border-radius:6px; background:var(--surface-2); color:var(--text); }
.mt-key.is-12{ background:var(--surface); border-top:3px solid var(--text); padding-top:6px; }
.mt-key:hover{ border-color:var(--faint); }
.mt-key:focus-visible, .mt-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.mt-key.playing, .mt-cell.playing{ background:var(--accent-bg); border-color:var(--accent); }
.mt-k-n{ font-size:15px; font-weight:700; }
.mt-k-c{ font-size:10.5px; color:var(--sub); font-family:var(--mono); }
.mt-k-t{ font-size:10.5px; color:var(--sub); white-space:nowrap; }

.mt-ct{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:4px 0 12px; }
.mt-ct input[type=range]{ flex:1 1 220px; width:auto; }

.mt-lat-wrap{ overflow-x:auto; padding-bottom:6px; }
.mt-lat{ display:grid; grid-template-columns:28px repeat(7, minmax(58px, 1fr)); gap:3px; min-width:440px; }
.mt-lat-h{ display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--sub); font-family:var(--mono); }
.mt-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:48px; padding:0 2px; border:1px solid var(--line2); border-radius:6px; background:var(--surface); color:var(--text); }
.mt-cell b{ font-size:12.5px; font-family:var(--mono); font-weight:600; }
.mt-cell small{ font-size:10.5px; color:var(--sub); font-family:var(--mono); }
.mt-cell:hover{ border-color:var(--faint); }
.mt-cell.base{ background:var(--surface-2); }
.mt-cell.sel{ border-color:var(--accent); background:var(--accent-bg); box-shadow:inset 0 0 0 1px var(--accent); }

@media (max-width:640px){
  .mt-key{ height:104px; }
}