/* オンラインチューナー（/online-tuner/）だけの見た目。色はサイト共通の変数を使う */
.tu-box{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px;margin:16px 0 12px}
.tu-read{text-align:center;padding:4px 0 8px}
.tu-note{font-size:64px;line-height:1.1;font-weight:800;letter-spacing:.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.tu-oct-n{font-size:.45em;font-weight:700;margin-left:2px}
.tu-flat{font-size:.3em;font-weight:600;color:var(--sub);margin-left:6px}
.tu-read.in-tune .tu-note{color:#1f9d55}
.tu-cent{font-size:20px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--sub)}
.tu-cent[data-dir="ok"]{color:#1f9d55}
.tu-cent[data-dir="high"],.tu-cent[data-dir="low"]{color:var(--accent,#a85200)}
.tu-hz{font-size:15px;color:var(--sub);font-variant-numeric:tabular-nums;margin-top:2px}
.tu-meter{position:relative;height:84px;margin:6px auto 30px;max-width:420px;
  background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4.5%),rgba(31,157,85,.18) calc(50% - 4.5%),rgba(31,157,85,.18) calc(50% + 4.5%),transparent calc(50% + 4.5%));
  border-bottom:2px solid var(--line)}
.tu-tick{position:absolute;bottom:-22px;font-size:12px;color:var(--sub)}
.tu-tick.l{left:0}.tu-tick.c{left:50%;transform:translateX(-50%)}.tu-tick.r{right:0}
.tu-needle{position:absolute;left:50%;bottom:0;width:3px;height:78px;background:var(--fg);border-radius:2px;
  transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);transition:transform .12s linear}
.tu-needle.idle{opacity:.25}
.tu-read.in-tune ~ .tu-meter .tu-needle{background:#1f9d55}
#tu-canvas{display:block;width:100%;height:150px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.tu-ctl{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.tu-btn{font:inherit;font-weight:700;padding:12px 22px;border-radius:10px;border:1px solid var(--line);
  background:var(--accent-solid);color:var(--on-solid);cursor:pointer;min-height:44px}
.tu-btn.sub{background:var(--bg,#fff);color:var(--fg)}
.tu-btn:disabled{opacity:.45;cursor:default}
.tu-a4row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tu-a4lab{font-weight:700;margin-right:2px}
.tu-a4val{min-width:5.2em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.tu-sm{font:inherit;min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg,#fff);color:var(--fg);cursor:pointer}
.tu-sm[aria-pressed="true"]{background:var(--accent-solid);color:var(--on-solid);font-weight:700}
.tu-status{color:var(--sub);font-size:14px;margin:10px 0 0}
.tu-steps li,.tu-note-list li{margin:6px 0}
.tu-ref{margin:12px 0}
.tu-octlab{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.tu-octlab select{font:inherit;min-height:40px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg,#fff);color:var(--fg)}
.tu-refkeys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.tu-key{font:inherit;font-weight:700;min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--bg,#fff);color:var(--fg);cursor:pointer}
.tu-key.bk{background:var(--panel)}
.tu-key[aria-pressed="true"]{background:var(--accent-solid);color:var(--on-solid)}
@media (min-width:640px){.tu-refkeys{grid-template-columns:repeat(12,minmax(0,1fr))}}
/* 2026-10-30 12:2x アプリの一部を試すページへ（440Hz 固定・線なし・パソコンで QR） */
.tu-a4fixed{align-self:center;color:var(--sub);font-size:14px;font-weight:700}
.tu-qr{display:none}
@media (min-width:768px){.tu-qr{display:flex;align-items:center;gap:16px;margin:16px 0 4px;font-size:14px;color:var(--body,var(--fg))}
  .tu-qr img{width:132px;height:132px;flex:none;border-radius:8px;background:#fff;padding:6px;border:1px solid var(--line)}}
.tu-cta{margin-top:14px}

/* 2026-11-02 基準ピッチを 440 と 442 から選ぶ（相葉さん 02:26） */
.tu-a4{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--sub);font-size:14px;font-weight:700}
.tu-a4b{min-height:40px;padding:6px 12px;border:1px solid var(--line,#d5dbe1);border-radius:8px;background:var(--panel,#fff);color:var(--fg,#15181c);font-weight:700;font-size:14px;cursor:pointer}
.tu-a4b[aria-pressed="true"]{background:var(--accent,#a85200);border-color:var(--accent,#a85200);color:#fff}