/* 元 cello-finger.html <style>（L7–594）より移植。セレクタ・値は無改変。 */

  :root{
    --bg:#15110c; --panel:#1f1913; --panel2:#282019; --board:#0c0a08;
    --board-edge:#3a2e22; --wood:#6b4a2b;
    --string:#e4e0da; --ink:#f5f3f0; --muted:#bdb8b1; --faint:#8c867e;
    --line:#372f27; --accent:#e7b24b; --accent-dim:#8a6e30;
    --alt:#7fa0b0; --good:#7fb08a; --danger:#d9694a; --open:#5cc8ef;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
    --jp:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* hidden 属性は UA 既定の display:none。.row や button は自前で display を持つため
     作者スタイルが勝って隠れない。属性を常に優先させる */
  [hidden]{display:none !important}
  html,body{margin:0; height:100%; overflow:hidden}
  body{
    background:var(--bg); color:var(--ink); font-family:var(--jp);
    font-size:15px; line-height:1.5; padding-bottom:env(safe-area-inset-bottom);
  }
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:30;
    height:calc(52px + env(safe-area-inset-top));
    /* 横向きにするとカメラ穴やジェスチャー領域が画面の左右に来る。
       左右のセーフエリアを足しておかないと、☰ と ⚙ がその下に潜って押せなくなる。 */
    padding:env(safe-area-inset-top)
            calc(10px + env(safe-area-inset-right)) 0
            calc(10px + env(safe-area-inset-left));
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(180deg,#1a140e,#15110c); border-bottom:1px solid var(--line);
  }
  .iconbtn{
    /* 上部バーでは曲名（.scoretitle が flex:1）と並ぶ。既定の flex-shrink:1 のままだと
       長い曲名に押されて幅が潰れ、☰ と ⚙ が押せなくなるので縮まないようにする。 */
    flex:0 0 auto;
    width:40px; height:40px; padding:0; justify-content:center; font-size:18px;
    background:var(--panel2); border:1px solid var(--line); border-radius:9px; color:var(--ink);
    display:inline-flex; align-items:center; cursor:pointer;
  }
  .iconbtn:active{transform:translateY(1px)}
  .iconbtn:disabled{opacity:.32}
  /* 上部バーの中央は譜面名だけ（押さえる音は指板の上に出るので、ここでは重ねない）。
     自分がアップロードした譜面のときだけ押せる状態(.editable)になり、名前を変えられる。 */
  .scoretitle{
    flex:1; min-width:0; display:flex; align-items:center; text-align:left;
    font-size:14px; line-height:1.3; font-weight:700; color:var(--ink);
    white-space:nowrap; overflow:hidden;
    background:transparent; border:1px solid transparent; border-radius:8px;
    padding:6px 8px; min-height:0;
  }
  /* 曲名の本体。収まるうちは通常どおり末尾を … で省略する */
  .scoretitle .st-in{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* 収まらないときだけ流す（判定と移動量は src/modes.js の renderScoreTitle）。
     … は出さずに全文を見せる。端で少し止まるよう、動く区間を真ん中に寄せてある。 */
  .scoretitle.marquee{overflow:hidden}
  .scoretitle.marquee .st-in{
    text-overflow:clip; overflow:visible; flex:0 0 auto;
    animation:mqscroll var(--mq-time,10s) ease-in-out infinite alternate;
  }
  @keyframes mqscroll{
    0%, 14%   {transform:translateX(0)}
    86%, 100% {transform:translateX(var(--mq-shift,0))}
  }
  /* 動きが苦手な人の設定を尊重する（端末側で「視差効果を減らす」がONのとき） */
  @media (prefers-reduced-motion:reduce){
    .scoretitle.marquee .st-in{animation:none; text-overflow:ellipsis; overflow:hidden}
  }
  /* 空でも場所は残す（display:none にすると ⚙ が ☰ の隣まで寄ってしまう）。
     枠と ✎ が出るのは .editable のときだけなので、空でも見た目には何も出ない。 */
  .scoretitle:empty{border-color:transparent; background:transparent}
  /* 押せないとき（用意した曲・みんなの曲・読み込んだだけのファイル）はただの見出し */
  .scoretitle:disabled{opacity:1; cursor:default}
  /* 押せるときは鉛筆を添えて、名前を変えられることが分かるようにする */
  .scoretitle.editable{border-color:var(--line); background:var(--panel2); cursor:pointer;
    position:relative; padding-right:24px}
  /* ✎ は右端に貼り付ける。並びの最後に置くと、曲名が流れているとき一緒に押し出されてしまう。
     背景を敷いて、流れてきた文字が下をくぐるようにしている。 */
  .scoretitle.editable::after{
    content:'✎'; position:absolute; right:7px; top:50%; transform:translateY(-50%);
    font-size:12px; color:var(--muted); padding-left:14px;
    background:linear-gradient(90deg, rgba(40,32,25,0), var(--panel2) 70%);
  }
  .scoretitle.editable:active{transform:translateY(1px)}
  .nowbar{flex:1; min-width:0; font-family:var(--mono); font-size:13px; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nowwrap .nowbar{flex:0 1 auto; line-height:1.3}
  .nowbar b{color:var(--accent)}
  .stepper{display:flex; gap:6px}
  .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .controls{margin-bottom:10px; gap:6px}
  /* .uprow は中に［トラック］ボタンを入れる都合で div だが、
     「曲を選ぶ」の一覧（.songbtn）と同じ見た目にするのでボタンと同じ地色・枠を当てる。 */
  button, label.filebtn, .uprow{
    font-family:var(--jp); font-size:13px; color:var(--ink);
    background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    padding:8px 11px; min-height:38px; cursor:pointer; transition:.12s; user-select:none;
    display:inline-flex; align-items:center; gap:6px;
  }
  button:active, .uprow:active{transform:translateY(1px)}
  button.primary{background:var(--accent); color:#241a08; border-color:var(--accent); font-weight:700}
  button.primary:disabled{opacity:.4; background:var(--panel2); color:var(--muted); border-color:var(--line); font-weight:400}
  button.ghost{background:transparent}
  button.on{border-color:var(--accent); color:var(--accent)}
  input[type=file]{display:none}
  .tempo{display:flex; align-items:center; gap:8px; flex:1; min-width:180px}
  .tempo input[type=range]{flex:1; accent-color:var(--accent)}
  .tempo b{font-family:var(--mono); color:var(--accent); min-width:58px; text-align:right; font-size:13px}
  /* テンポ数値入力（スライダーと相互同期） */
  .numbox{display:inline-flex; align-items:baseline; gap:3px; flex:0 0 auto}
  .numbox input[type=number]{
    width:52px; padding:5px 6px; text-align:right; font-family:var(--mono); font-size:14px;
    color:var(--accent); background:var(--panel2); border:1px solid var(--line);
    border-radius:7px; min-height:32px; -moz-appearance:textfield;
  }
  .numbox input[type=number]:focus{outline:none; border-color:var(--accent)}
  .numbox i{font-style:normal; font-size:11px; color:var(--faint)}
  /* テンポモーダルの大きい入力（指で押しやすくする） */
  .tempobig{display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 14px}
  .tempobig .tstep{
    width:60px; height:60px; flex:0 0 auto; border-radius:16px; font-size:28px; line-height:1;
    color:var(--accent); background:var(--panel2); border:1px solid var(--line); cursor:pointer;
    display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
  }
  .tempobig .tstep:active{background:var(--accent); color:#241a08; border-color:var(--accent)}
  .numbox.big{align-items:baseline; gap:5px}
  .numbox.big input[type=number]{
    width:110px; font-size:32px; min-height:60px; padding:4px 10px; text-align:center; border-radius:14px;
  }
  .numbox.big i{font-size:13px}
  .board-full{
    position:fixed; left:0; right:0; z-index:1;
    top:calc(52px + env(safe-area-inset-top)); bottom:0;
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding:6px 6px calc(90px + env(safe-area-inset-bottom));
    background:radial-gradient(120% 60% at 50% 0%, #1c1610 0%, var(--bg) 72%);
  }
  body.has-tp .board-full{ padding-bottom:calc(200px + env(safe-area-inset-bottom)) }
  .fbsvg{width:100%; max-width:520px; margin:0 auto}
  .fab{
    position:fixed; z-index:6; right:calc(16px + env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:60px; height:60px; border-radius:50%; padding:0; justify-content:center;
    font-size:22px; background:var(--accent); color:#241a08; border:none; font-weight:800;
    box-shadow:0 6px 18px rgba(0,0,0,.45); display:inline-flex; align-items:center; cursor:pointer;
  }
  body.has-tp .fab{ bottom:calc(128px + env(safe-area-inset-bottom)) }
  .fab:disabled{opacity:.4; background:var(--panel2); color:var(--muted); box-shadow:none}
  .fab.playing{background:var(--danger); color:#fff}
  .fab:active{transform:translateY(1px)}
  .scrim{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.2s}
  .scrim.show{opacity:1; pointer-events:auto}
  .drawer{
    position:fixed; top:0; left:0; bottom:0; z-index:41; width:min(340px,88vw);
    background:var(--panel); border-right:1px solid var(--line);
    transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto;
    padding:env(safe-area-inset-top)
            14px 24px calc(14px + env(safe-area-inset-left));
    -webkit-overflow-scrolling:touch;
  }
  .drawer.open{transform:translateX(0)}
  .drawer-head{
    position:sticky; top:0; z-index:2; background:var(--panel); margin-bottom:12px;
    display:flex; align-items:center; gap:8px; padding:12px 0 10px; border-bottom:1px solid var(--line);
  }
  .drawer-head .accentbar{width:18px; height:3px; background:var(--accent); border-radius:2px}
  .drawer-head .dh-t{margin:0; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; flex:1}
  .seclbl{font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin:14px 0 6px}
  hr.sep{border:none; border-top:1px solid var(--line); margin:14px 0}
  .drawer-note{color:var(--faint); font-size:11px; line-height:1.7; margin-top:16px}
  .pdf-overlay{position:fixed; inset:0; z-index:45; background:var(--bg); display:none; flex-direction:column; padding-top:env(safe-area-inset-top)}
  .pdf-overlay.open{display:flex}
  .pdf-head{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line)}
  .pdf-head b{font-family:var(--mono); font-size:13px; color:var(--muted); flex:0 0 auto}
  .pdf-head .sp{flex:1}
  .pdf-scroll{flex:1; overflow:auto; padding:12px; -webkit-overflow-scrolling:touch}

  /* fingerboard */
  .fbsvg svg.fb{width:100%; height:auto; display:block; touch-action:pan-y}
  /* ズーム中も横方向のパンは許さない（指で横に流れて押弦位置がずれるため）。
     はみ出したぶんは fingerboard.js の centerBoardH() が常に中央へ寄せる */
  body.zoomed .fbsvg svg.fb{touch-action:pan-y}
  /* 指板のタップ／ドラッグでテキスト選択・長押しメニューが出ないようにする */
  .board-full, .fbsvg, .fbsvg svg.fb, .fbsvg svg.fb text, .staffview, .staffview svg{
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  /* 凡例：カウントダウンの中（数字の下）に置く。常時表示はしない */
  .legend{position:static; margin-top:20px; display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:11px; background:rgba(20,17,12,.72); border:1px solid var(--line); border-radius:8px; padding:8px 10px; backdrop-filter:blur(2px)}
  .legend span{display:inline-flex; align-items:center; gap:5px}
  .dot{width:11px;height:11px;border-radius:50%;display:inline-block}
  .dot.lead{background:var(--accent)}
  .dot.chord{background:var(--accent-dim)}
  .dot.alt{border:2px solid var(--alt); background:transparent; box-sizing:border-box}

  /* 現在音の情報は上部バー(.nowbar)に表示 */

  /* edit panel */
  .edit{margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
  .edit h3{margin:0 0 4px; font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; font-weight:600}
  /* 音名は左、「この音だけリセット」は右端。
     音名だけを .cur-n でくくってあるので（src/modes.js の renderEdit）、
     間を空けるだけで音名の並びはそのまま（区切りの空白も潰れない）。 */
  .edit .cur{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:var(--mono); font-size:18px; margin-bottom:10px;
  }
  .edit .cur .cur-n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .edit .cur .lead{color:var(--accent); font-weight:700}
  .edit .cur .oth{color:var(--faint)}
  /* 押し間違えて運指が消えると困るので、控えめな見た目にして右端へ寄せる */
  .edit .cur .reset-one-btn{
    flex:0 0 auto; margin-left:auto;
    min-height:0; padding:6px 10px; border-radius:8px;
    font-family:var(--jp); font-size:11px; font-weight:400; line-height:1;
    background:var(--panel2); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  }
  .edit .cur .reset-one-btn:active{transform:translateY(1px); color:var(--accent); border-color:var(--accent-dim)}
  .grp{margin:10px 0}
  .grp .lbl{font-size:12px; color:var(--muted); margin-bottom:5px}
  .chips{display:flex; gap:6px; flex-wrap:wrap}
  .chip{
    font-family:var(--mono); font-size:13px; padding:7px 10px; min-height:36px;
    background:var(--panel2); border:1px solid var(--line); border-radius:8px; cursor:pointer;
    display:inline-flex; flex-direction:column; align-items:center; line-height:1.15;
  }
  .chip small{font-family:var(--jp); font-size:10px; color:var(--muted)}
  /* 同じ音名で1・2オクターブ違う位置の札。押さえる場所だけが変わることが分かるよう
     地の色を落として区別する（鳴る音は譜面のまま） */
  .chip .oc{font-style:normal; font-size:9px; color:var(--alt); letter-spacing:.02em; margin-top:1px}
  .chip.alt-oct{background:transparent; border-style:dashed}
  .chip.alt-oct.on{background:#332813; border-style:solid}
  .chip.on .oc{color:var(--accent)}
  .chip.on{border-color:var(--accent); background:#332813}
  .chip.on small{color:var(--accent)}
  .hint{font-size:11px; color:var(--faint); margin-top:8px}
  .empty-edit{color:var(--muted); font-size:13px; text-align:center; padding:10px 0}

  /* ===== 下部トランスポート（運指ストリップ＋再生メーター） ===== */
  .transport{
    position:fixed; left:0; right:0; bottom:0; z-index:12; display:none;
    background:linear-gradient(180deg, rgba(21,17,12,.90), #15110c 32%);
    border-top:1px solid var(--line); backdrop-filter:blur(6px);
    padding:8px calc(env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom))
            calc(env(safe-area-inset-left));
  }
  body.has-tp .transport{ display:block }

  /* 運指リスト（横スクロール／スワイプ可） */
  .strip{
    display:flex; align-items:stretch; gap:6px;
    overflow-x:auto; overflow-y:hidden;
    touch-action:pan-x; overscroll-behavior-x:contain;
    scroll-behavior:smooth; cursor:grab;
    padding:8px 12px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .strip:active{cursor:grabbing}
  .strip::-webkit-scrollbar{display:none}
  .nchip{
    position:relative; flex:0 0 auto; min-width:58px; padding:6px 8px 5px;
    background:var(--panel); border:1px solid var(--line); border-radius:9px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.2;
  }
  .nchip b{font-family:var(--mono); font-size:14px; color:var(--ink); font-weight:700}
  .nchip small{font-family:var(--mono); font-size:10px; color:var(--muted); white-space:nowrap}
  .nchip.on{border-color:var(--accent-dim); background:#241d12}
  .nchip.on b{color:var(--accent)}
  .nchip.playing{border-color:var(--accent); background:#332813; box-shadow:0 0 0 1px var(--accent) inset}
  .nchip.playing b{color:var(--accent)}
  .nchip .ch{
    position:absolute; top:3px; right:4px; width:5px; height:5px; border-radius:50%;
    background:var(--accent-dim);
  }
  .nchip.out{opacity:.42}
  /* タイの継続音（表示だけ・音は鳴らさない）。少し薄く、破線枠で「伸ばし」を示す。 */
  .nchip.hold{opacity:.55; border-style:dashed; min-width:44px; cursor:pointer}
  .nchip.hold b{color:var(--muted); font-weight:600}
  .nchip .tie{color:var(--muted); font-size:12px}
  .mbar{
    flex:0 0 auto; align-self:center; font-family:var(--mono); font-size:9px; color:var(--faint);
    writing-mode:vertical-rl; padding:0 1px; border-left:1px solid var(--line); margin-left:2px;
    height:38px; display:flex; align-items:center; letter-spacing:.06em;
  }
  .zone-low{color:var(--good)!important}
  .zone-mid{color:var(--accent)!important}
  .zone-high{color:var(--danger)!important}

  /* 再生メーター */
  .seekrow{display:flex; align-items:center; gap:9px; padding:0 12px}
  .seekrow .tm{font-family:var(--mono); font-size:11px; color:var(--muted); flex:0 0 auto; min-width:30px}
  .seekrow .tm.r{text-align:right}
  .seek{
    position:relative; flex:1; height:26px; cursor:pointer; touch-action:none;
    display:flex; align-items:center;
  }
  .seek .trk{
    position:absolute; left:0; right:0; height:8px; border-radius:5px;
    background:var(--panel2); border:1px solid var(--line); overflow:hidden;
  }
  .seek .loopband{position:absolute; top:0; bottom:0; background:var(--accent); opacity:.16; display:none}
  .seek .fill{position:absolute; top:0; bottom:0; left:0; width:0; background:var(--accent-dim)}
  .seek .head{
    position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
    background:var(--accent); border:2px solid #15110c; box-shadow:0 1px 5px rgba(0,0,0,.5); left:0;
  }
  .seek .tick{position:absolute; top:0; bottom:0; width:1px; background:var(--line)}

  .empty{
    position:fixed; left:0; right:0; z-index:4;
    top:calc(52px + env(safe-area-inset-top)); bottom:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    text-align:center; color:var(--muted); padding:24px; font-size:14px; pointer-events:none;
  }
  .empty b{color:var(--ink); font-size:16px; margin-bottom:4px}
  .empty .kbd{display:inline-block; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:1px 7px; color:var(--accent)}

  /* pdf */
  .pdfbar{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .pdfbar b{font-family:var(--mono); font-size:13px; color:var(--muted)}
  /* 幅は pdf.js 側が style.width で入れる（描画画素は実画素密度に合わせて別に持つ）。
     ここで width:100% にすると、その指定を打ち消して引き伸ばしになるので max-width にする */
  #pdfcanvas{max-width:100%; height:auto; background:#fff; border-radius:8px; display:block; margin:0 auto}
  .note-note{font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--line);
    border-left:3px solid var(--accent-dim); border-radius:8px; padding:9px 11px; margin-bottom:10px; line-height:1.55}
  .toast{position:fixed; left:50%; bottom:92px; transform:translateX(-50%); background:#332813;
    color:var(--accent); border:1px solid var(--accent-dim); padding:9px 14px; border-radius:9px;
    font-size:13px; z-index:60; opacity:0; transition:.2s; pointer-events:none; max-width:90vw; text-align:center}
  .toast.show{opacity:1}

  /* ---- フォーム部品（練習モード等） ---- */
  select, input[type=number]{
    font-family:var(--jp); font-size:13px; color:var(--ink); background:var(--panel2);
    border:1px solid var(--line); border-radius:8px; padding:8px 9px; min-height:38px; width:100%;
  }
  input[type=number]{font-family:var(--mono); text-align:center}
  .field{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .field>.k{flex:0 0 76px; font-size:12px; color:var(--muted)}
  .field>.v{flex:1; min-width:0}
  .field2{display:flex; gap:8px; margin-bottom:8px}
  .field2>div{flex:1; min-width:0}
  .sw{
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
    background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:9px 11px;
    min-height:42px; cursor:pointer; font-size:13px; color:var(--ink); margin-bottom:8px;
  }
  .sw .knob{
    flex:0 0 44px; height:24px; border-radius:12px; background:#3a3128; position:relative; transition:.15s;
  }
  .sw .knob::after{
    content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:var(--muted); transition:.15s;
  }
  .sw.on{border-color:var(--accent-dim); color:var(--accent)}
  .sw.on .knob{background:var(--accent-dim)}
  .sw.on .knob::after{left:23px; background:var(--accent)}
  .sub{font-size:11px; color:var(--faint); margin:-3px 0 9px; line-height:1.6}

  /* ---- MIDIトラック一覧 ---- */
  .tracks{display:none; margin-bottom:8px}
  .tracks.show{display:block}
  .trow{
    display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 10px; margin-bottom:5px; cursor:pointer;
    background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  }
  .trow.on{border-color:var(--accent); background:#332813}
  .trow .tn{flex:1; min-width:0; font-size:13px; display:flex; flex-direction:column; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .trow .tn small{font-family:var(--mono); font-size:10px; color:var(--faint)}
  .trow.on .tn small{color:var(--accent-dim)}
  .trow .tc{font-family:var(--mono); font-size:11px; color:var(--muted); flex:0 0 auto}
  /* 行の下段に「視聴 / 選択」を並べる（細い画面でもトラック名を押しつぶさないため） */
  .trow .tb{flex:0 0 100%; display:flex; gap:6px}
  .trow .tbtn{
    flex:1; justify-content:center; min-height:32px; padding:0 10px; border-radius:8px;
    font-size:12px; font-weight:700; box-shadow:none;
    background:var(--panel); border:1px solid var(--line); color:var(--muted);
  }
  .trow .tbtn.pri{background:var(--accent); border-color:var(--accent); color:#241a08}
  /* ---- トラックの役割ボタン（メロディガイド／伴奏／ミュート）と伴奏の音色選択 ---- */
  .trow .troles{flex:0 0 100%; display:flex; gap:6px}
  .trow .rbtn{
    flex:1; justify-content:center; min-height:34px; padding:0 6px; border-radius:8px;
    font-size:12px; font-weight:700; box-shadow:none; cursor:pointer;
    background:var(--panel); border:1px solid var(--line); color:var(--muted);
  }
  .trow .rbtn.on{background:var(--accent); border-color:var(--accent); color:#241a08}
  .trow .tinstwrap{flex:0 0 100%; display:flex; align-items:center; gap:8px; margin-top:2px}
  .trow .tinstwrap label{font-size:11px; color:var(--muted); flex:0 0 auto}
  .trow .tinst{
    flex:1; min-height:34px; padding:0 8px; border-radius:8px; font-size:12px;
    background:var(--panel); border:1px solid var(--line); color:var(--fg);
  }

  /* ---- コピー：子タブ（曲を選ぶ / 譜面を読み込む） ---- */
  .subseg{display:flex; gap:4px; margin-bottom:12px; background:var(--panel2);
    border:1px solid var(--line); border-radius:9px; padding:3px}
  .subseg button{flex:1; justify-content:center; background:transparent; border:none;
    border-radius:6px; font-size:12px; min-height:36px; color:var(--muted); box-shadow:none}
  .subseg button.on{background:var(--accent); color:#241a08; font-weight:700}
  .songlist{display:flex; flex-direction:column; gap:7px; margin-bottom:8px}
  .songbtn{
    width:100%; justify-content:flex-start; text-align:left; gap:2px;
    min-height:52px; padding:10px 12px; border-radius:11px;
    display:flex; flex-direction:column; align-items:flex-start; line-height:1.3; font-size:14px;
  }
  .songbtn small{font-family:var(--jp); font-size:11px; color:var(--muted); font-weight:400}
  /* 難易度（manifest.json の level）。曲名の下の行の先頭に出す */
  .songbtn .lv{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:1px; margin-right:6px}
  .songbtn:disabled{opacity:.42; text-decoration:none}

  /* ---- お気に入り ----
     ・.favbtn  … 指板の左上のいちばん上。曲を読み込んでいるときだけ出る（出し入れは src/favorites.js）
                  ※ 公開/非公開（.sharebtn）とは上下を入れ替えてある。
                     ハートは曲を開けば必ず出るので、位置が動かない上段に置く。
                     公開ボタンは自分の譜面のときしか出ないので、その下に足す。
     ・.songbtn .fav … 曲一覧のボタンの右端の印。付いている曲は .hasfav で右に余白を作る
     ・.favfilter … 「曲を選ぶ」の右端。押すとお気に入りだけに絞る */
  .favbtn{
    position:fixed; z-index:5; left:calc(12px + env(safe-area-inset-left));
    top:calc(62px + env(safe-area-inset-top));
    width:40px; height:40px; min-height:0; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:19px; line-height:1;
    background:var(--panel2); border:1px solid var(--line); color:var(--muted);
    box-shadow:0 3px 10px rgba(0,0,0,.42); cursor:pointer;
  }
  .favbtn[hidden]{display:none}
  .favbtn.on{color:#e2607a; border-color:#7a3345; background:#2a171c}
  .favbtn:active{transform:translateY(1px)}

  /* ---- 公開/非公開（指板の左上・ハートの下）----
     アイコンだけでは「共有する」のか「共有済み」なのか分からないので文言も添える。
     公開中（.on）は青くして、ひと目で今の状態が分かるようにする。 */
  .sharebtn{
    position:fixed; z-index:5; left:calc(12px + env(safe-area-inset-left));
    top:calc(110px + env(safe-area-inset-top));
    min-height:0; padding:0 10px; height:40px; border-radius:20px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-size:11px; font-weight:700; line-height:1; white-space:nowrap;
    background:var(--panel2); border:1px solid var(--line); color:var(--muted);
    box-shadow:0 3px 10px rgba(0,0,0,.42); cursor:pointer;
  }
  .sharebtn[hidden]{display:none}
  .sharebtn .sb-ic{font-size:14px}
  /* 公開中。青（--info が無い環境でも効くよう実色で指定する） */
  .sharebtn.on{color:#6fb4f0; border-color:#2f5f8c; background:#132436}
  .sharebtn:active{transform:translateY(1px)}

  /* ---- アップロードした譜面の削除（指板の右上）----
     以前ここにあったシェアは左上へ移した。押すと確認してから消す（src/uploads.js の deleteUpload）。 */
  .delbtn{
    position:fixed; z-index:5; right:calc(12px + env(safe-area-inset-right));
    top:calc(62px + env(safe-area-inset-top));
    width:44px; height:44px; min-height:0; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--panel2); border:1px solid var(--line); color:#e2607a;
    box-shadow:0 3px 10px rgba(0,0,0,.42); cursor:pointer;
  }
  .delbtn[hidden]{display:none}
  /* 中身は線画のSVG。絵文字より輪郭がはっきりするので小さくても意味が伝わる */
  .delbtn svg{width:23px; height:23px; display:block}
  .delbtn:active{transform:translateY(1px); background:#2a171c; border-color:#7a3345}
  .songbtn{position:relative}
  .songbtn.hasfav{padding-right:32px}
  .songbtn .fav{
    position:absolute; right:11px; top:50%; transform:translateY(-50%);
    font-size:14px; line-height:1; color:#e2607a;
  }
  .seclbl-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
  .favfilter{
    min-height:0; padding:4px 10px; border-radius:999px; box-shadow:none;
    font-size:11px; letter-spacing:0; text-transform:none;
    background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  }
  .favfilter.on{color:#e2607a; border-color:#7a3345; background:#2a171c}

  /* ---- 曲一覧の絞り込みとページ送り ---- */
  .songfind{margin-bottom:8px}
  .songfind input{
    width:100%; box-sizing:border-box; min-height:38px; padding:0 12px;
    background:var(--panel2); border:1px solid var(--line); border-radius:9px;
    color:var(--ink); font-family:var(--jp); font-size:13px;
  }
  .songfind input::placeholder{color:var(--faint)}
  .pager{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 10px}
  .pager .pgb{
    min-height:32px; padding:0 12px; border-radius:8px; font-size:12px; box-shadow:none;
    background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  }
  .pager .pgb:disabled{opacity:.35}
  .pager .pgi{font-family:var(--mono); font-size:11px; color:var(--faint)}

  /* ---- 共有された曲（みんなの曲） ----
     曲のボタンの中にボタンは置けないので、削除依頼などは横に並べる。
     共有された曲は難易度を持たないので★は出ない（描き分けは src/songs.js）。 */
  .shrow{display:flex; align-items:stretch; gap:6px}
  .shrow .songbtn{flex:1; min-width:0}
  .shrow .shb{display:flex; flex-direction:column; justify-content:center; gap:4px; flex:0 0 auto}
  .shbtn{
    min-height:0; padding:5px 8px; font-size:11px; border-radius:7px; box-shadow:none;
    background:transparent; border:1px solid var(--line); color:var(--muted); white-space:nowrap;
  }
  .shbtn:active{transform:none; opacity:.6}
  .shbadge{
    display:inline-block; margin-right:6px; padding:0 5px; border-radius:4px;
    font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.5px;
    background:#4a3a1c; color:var(--accent); vertical-align:1px;
  }

  /* ---- アップロードした楽譜（保存番号に紐づく。上限99件） ----
     見た目は「曲を選ぶ」の一覧と完全に同じにするため、markup 側で .songbtn を併せ持たせ、
     ここでは .songbtn に無い差分（＝選択中の強調と［トラック］ボタン）だけを足す。
     div なのは中に［トラック］ボタンを入れるため（button は入れ子にできない）。 */
  .uplist{display:flex; flex-direction:column; gap:7px; margin-bottom:8px}
  .uprow{cursor:pointer}
  /* いま開いている1件。曲一覧の .songbtn.on と同じ強調（枠と文字色だけ）にそろえる */
  .uprow.on{border-color:var(--accent); color:var(--accent)}
  .uprow small{display:block}
  .upempty{font-size:11px; color:var(--faint); line-height:1.6; padding:2px 0}
  /* ［トラック］は説明の下に小さく置く。横いっぱいに広げると行が重たく見えるため */
  .uprow .ub{display:flex; gap:6px; margin-top:7px}
  .uprow .ubtn{
    min-height:26px; padding:0 10px; font-size:11px; font-weight:400;
    border-radius:7px; box-shadow:none; white-space:nowrap;
    background:transparent; border:1px solid #4a3a1c; color:var(--accent);
  }
  .uprow .ubtn:active{transform:none; opacity:.6}

  /* ---- 楽譜を共有する画面（#mShare） ----
     .dkmodal は本来ドック（テンポ/オクターブ/ループ）の吹き出しなので左下寄りに出る。
     共有モーダルは独立した確認ダイアログなので、画面の上下左右中央に出す。 */
  #mShare{
    left:50%; right:auto; top:50%; bottom:auto;
    transform:translate(-50%, -50%);
    width:min(340px, calc(100vw - 32px));
    max-height:calc(100vh - 32px); overflow-y:auto;
  }
  /* ---- ダウンロード（#mDownload） ---- */
  .dl-name{font-size:13px; font-weight:700; color:var(--ink); margin:0 0 10px; word-break:break-word}

  .shwarn{
    margin:2px 0 10px; padding:9px 11px; border-radius:9px; line-height:1.7; font-size:11px;
    background:#2a1f12; border:1px solid #4a3a1c; color:var(--muted);
  }
  .agree{display:flex; align-items:flex-start; gap:9px; margin:0 0 8px; font-size:12px; line-height:1.6; cursor:pointer}
  .agree input{flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent)}
  /* 「利用規約を読む」。細い青字のままだと見つけにくく、指でも押しにくかったので
     上下に間を空け、枠のあるボタン風にして押せる高さ（44px）を確保する。 */
  .termsrow{margin:12px 0 14px}
  .termslink{
    display:flex; align-items:center; justify-content:center; gap:6px;
    min-height:44px; padding:0 14px; border-radius:9px;
    border:1px solid #4a3a1c; background:var(--panel2);
    color:var(--accent); font-size:13px; font-weight:700; text-decoration:none;
  }
  .termslink:active{opacity:.6}

  /* ---- 歯車パネル（指板の表示設定） ---- */
  /* 右上の歯車パネルの暗幕。左ドロワーの .scrim と同じ濃さ・同じ出方にそろえてある
     （以前はクリックを受けるだけの透明な板だった） */
  .gscrim{position:fixed; inset:0; z-index:36; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.2s}
  .gscrim.open{opacity:1; pointer-events:auto}
  .gearpanel{
    position:fixed; right:8px; z-index:38; top:calc(56px + env(safe-area-inset-top));
    width:min(290px, calc(100vw - 16px));
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:12px; box-shadow:0 10px 28px rgba(0,0,0,.55);
    display:none;
  }
  .gearpanel.open{display:block}
  .gp-t{font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
    margin-bottom:9px; font-weight:600}
  .gearpanel .row{margin-bottom:6px}
  .gearpanel .row:last-child{margin-bottom:0}
  .gearpanel button{flex:1; justify-content:center}

  /* ---- チューナー（下部シート） ---- */
  .sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:35;
    transform:translateY(110%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
    background:var(--panel); border-top:1px solid var(--line);
    border-radius:14px 14px 0 0; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(0,0,0,.4);
  }
  .sheet.open{transform:translateY(0); visibility:visible; transition:transform .22s ease, visibility 0s}
  body[data-mode="tuner"] .sheet{box-shadow:none; border-radius:0; border-top-width:1px}
  body[data-mode="tuner"] .tun-note{font-size:48px; min-width:110px}
  body[data-mode="tuner"] .tun-cent{font-size:16px}
  body[data-mode="tuner"] .tun-bar{height:52px; border-radius:12px}
  body[data-mode="tuner"] .tun-bar .ndl{top:4px; bottom:4px; width:11px; border-radius:6px}
  body[data-mode="tuner"] .tun-bar .trl{top:7px; bottom:7px; width:11px; border-radius:6px}
  body[data-mode="tuner"] .tun-dir{font-size:21px; min-height:58px}
  body[data-mode="tuner"] .tun-dir span{padding:11px 22px}
  .sheet-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .sheet-head .t{flex:1; font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
  .tun-main{display:flex; align-items:baseline; gap:10px; justify-content:center; margin-bottom:6px}
  .tun-note{font-family:var(--mono); font-size:34px; font-weight:800; color:var(--ink); min-width:78px; text-align:center}
  .tun-note.ok{color:var(--good)}
  .tun-cent{font-family:var(--mono); font-size:14px; color:var(--muted); min-width:64px}
  .tun-hz{font-family:var(--mono); font-size:12px; color:var(--faint); min-width:70px; text-align:right}
  .tun-bar{position:relative; height:30px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; overflow:hidden}
  .tun-bar .mid{position:absolute; left:50%; top:0; bottom:0; width:3px; background:var(--accent-dim); transform:translateX(-1.5px)}
  /* 残像。針より遅い transition で追従させ、どちらへどれだけ動いたかを残す */
  .tun-bar .trl{
    position:absolute; top:4px; bottom:4px; width:8px; border-radius:4px; left:50%;
    background:var(--danger); opacity:.30; filter:blur(3px); pointer-events:none;
    transition:left .5s cubic-bezier(.2,.75,.25,1);
  }
  .tun-bar .trl.ok{background:var(--good)}
  .tun-bar .ndl{position:absolute; top:2px; bottom:2px; width:8px; border-radius:4px; background:var(--danger); left:50%; transition:left .07s linear}
  .tun-bar .ndl.ok{background:var(--good)}
  /* 基準音 */
  .tun-ref{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:9px}
  .tun-ref-btn{min-height:44px; padding:8px 18px; font-size:14px}
  .tun-ref-btn .r-stop{display:none}
  .tun-ref-btn.on{border-color:var(--accent); background:var(--accent); color:#241a08}
  .tun-ref-btn.on .r-play{display:none}
  .tun-ref-btn.on .r-stop{display:inline}
  .tun-ref b{font-family:var(--mono); font-size:17px; color:var(--accent); min-width:42px; text-align:center}
  .tun-ref-o{font-size:10px; color:var(--faint); margin-left:-5px}
  .tun-tgt{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; font-size:12px; color:var(--muted)}
  .tun-tgt b{font-family:var(--mono); color:var(--accent); font-size:15px}
  /* 太い弦 ←[ 4弦 3弦 2弦 1弦 ]→ 細い弦。左が一番太い弦（開放が一番低い） */
  .tun-str-row{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:8px}
  .tun-str-row .tsl{
    flex:0 0 auto; font-size:10px; line-height:1.25; color:var(--faint);
    text-align:center; max-width:42px;
  }
  .tun-str{display:flex; gap:6px; justify-content:center}
  .tun-str [data-str]{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    padding:6px 9px; border-radius:9px; min-height:46px; min-width:46px;
    background:var(--panel2); border:1px solid var(--line); color:var(--muted);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    box-shadow:0 2px 0 rgba(0,0,0,.35);      /* 押せることが分かるよう少し浮かせる */
  }
  .tun-str [data-str] b{font-size:13px; font-weight:700; line-height:1.1; color:var(--ink)}
  .tun-str [data-str] small{font-family:var(--mono); font-size:10px; line-height:1.1; opacity:.75}
  .tun-str [data-str]:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.35)}
  /* .hit＝いま鳴っている音に近い開放弦（自動判定の目安。従来の見え方） */
  .tun-str [data-str].hit{border-color:var(--accent); background:#332813}
  .tun-str [data-str].hit b{color:var(--accent)}
  /* .on＝手動で選んだ基準弦。自動より強く見せる */
  .tun-str [data-str].on{border-color:var(--accent); background:var(--accent)}
  .tun-str [data-str].on b{color:#241a08}
  .tun-str [data-str].on small{color:#241a08; opacity:.8}
  .tun-str-note{font-size:10px; color:var(--faint); text-align:center; margin-top:5px; line-height:1.5}
  .tun-hint{
    display:none; margin-top:9px; padding:8px 10px; border-radius:8px; font-size:11px; line-height:1.6;
    background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--danger); color:var(--muted);
  }
  .tun-hint.show{display:block}
  .tun-hint b{color:var(--ink)}
  .tun-hint button{margin-top:7px; font-size:12px; min-height:34px; padding:6px 12px}

  /* ---- モード切替 ---- */
  .m-hide{display:none !important}

  /* ===== メトロノーム（src/metronome.js）=====
     採点ゲームがあった場所。指板ではなく、この画面ひとつで完結する。
     ・まん中がテンポの数字。＋−・スライダー・タップのどれでも変えられる
     ・拍のランプは拍子の数だけ作り直す（JS 側で作る）
     ・ドラムモードのときだけ .mt-beatwrap を見せる */
  .mtv{
    position:fixed; left:0; right:0; z-index:4;
    top:calc(52px + env(safe-area-inset-top)); bottom:0;
    overflow:auto; -webkit-overflow-scrolling:touch;
    display:flex; justify-content:center; align-items:flex-start;
    padding:14px calc(12px + env(safe-area-inset-right))
            calc(24px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    background:radial-gradient(120% 60% at 50% 0%, #1c1610 0%, var(--bg) 72%);
  }
  .mt-in{width:100%; max-width:420px}
  .mt-lbl{font-size:11px; letter-spacing:.06em; color:var(--muted); margin:0 0 6px}
  .mt-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
  .mt-chips button{
    min-height:0; padding:8px 12px; border-radius:9px; font-size:13px; font-family:var(--mono);
    background:var(--panel2); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  }
  .mt-chips button.on{background:#332813; border-color:var(--accent-dim); color:var(--accent); font-weight:700}
  .mt-chips button:active{transform:translateY(1px)}

  /* 拍のランプ。1拍目だけ大きく光らせて、頭がどこか分かるようにする */
  .mt-lamps{display:flex; justify-content:center; align-items:center; gap:9px; margin:4px 0 10px; min-height:16px}
  .mt-lamp{
    width:12px; height:12px; border-radius:50%;
    background:var(--panel2); border:1px solid var(--line);
  }
  .mt-lamp.hit{background:var(--accent-dim); border-color:var(--accent-dim)}
  .mt-lamp.acc{width:16px; height:16px}
  .mt-lamp.acc.hit{background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px var(--accent-dim)}

  /* ど真ん中のテンポ */
  .mt-dial{display:flex; align-items:center; justify-content:center; gap:16px; margin:2px 0 6px}
  .mt-step{
    flex:0 0 auto; width:54px; height:54px; min-height:0; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; font-size:24px; line-height:1;
    background:var(--panel2); border:1px solid var(--line); color:var(--accent); cursor:pointer;
  }
  .mt-step:active{background:var(--accent); color:#241a08; border-color:var(--accent)}
  .mt-bpm{display:flex; flex-direction:column; align-items:center; min-width:140px}
  .mt-bpm b{
    font-family:var(--mono); font-size:58px; line-height:1; font-weight:800;
    color:var(--accent); font-variant-numeric:tabular-nums;
  }
  .mt-bpm span{font-size:10px; letter-spacing:.14em; color:var(--muted); margin-top:3px}
  .mt-range{width:100%; margin:4px 0 14px; accent-color:var(--accent)}

  .mt-row{display:flex; gap:10px; align-items:stretch}
  .mt-tap{flex:1; justify-content:center; min-height:54px}
  .mt-play{
    flex:0 0 96px; justify-content:center; min-height:54px; font-size:20px; font-weight:800;
  }
  .mt-play .p-stop{display:none}
  .mt-play.on{background:var(--danger); color:#fff; border-color:var(--danger)}
  .mt-play.on .p-play{display:none}
  .mt-play.on .p-stop{display:inline}
  .mt-sub{font-size:11px; color:var(--faint); margin:8px 0 0; text-align:center; line-height:1.6}

  /* ドラムモードを切ったらビートの札は畳む（選べない札を残さない） */
  .mt-beatwrap{margin-top:4px}
  .mt-beatwrap.off{display:none}

  .mt-time{display:flex; gap:10px; margin-top:14px}
  .mt-time > div{
    flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:10px;
    padding:9px 11px; text-align:center;
  }
  .mt-time span{display:block; font-size:10px; color:var(--muted); margin-bottom:3px}
  .mt-time b{font-family:var(--mono); font-size:16px; color:var(--ink)}

  /* 横画面のときは上下の余白を詰めて、数字とボタンが1画面に収まるようにする */
  body.landscape-layout .mtv{padding-top:8px}
  body.landscape-layout .mt-bpm b{font-size:42px}
  body.landscape-layout .mt-step{width:46px; height:46px; font-size:21px}
  .seg{display:flex; gap:4px; margin-bottom:12px; background:var(--panel2);
    border:1px solid var(--line); border-radius:10px; padding:3px}
  .seg button{
    flex:1; justify-content:center; background:transparent; border:none; border-radius:7px;
    font-size:12px; min-height:36px; padding:6px 4px; color:var(--muted);
  }
  .seg button.on{background:var(--accent); color:#241a08; font-weight:700}

  /* ---- 入口：練習モード選択 ---- */
  .picker{
    position:fixed; left:0; right:0; z-index:8;
    top:calc(52px + env(safe-area-inset-top)); bottom:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    padding:24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left));
    background:var(--bg);
  }
  .pk-t{font-size:12px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-bottom:4px}
  .pk-card{
    width:100%; max-width:400px; display:flex; align-items:center; gap:14px; text-align:left;
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px;
    min-height:92px; cursor:pointer; transition:.15s;
  }
  .pk-card:active{transform:translateY(1px); border-color:var(--accent)}
  .pk-ic{flex:0 0 46px; height:46px; border-radius:12px; background:var(--panel2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:22px}
  .pk-b{display:flex; flex-direction:column; gap:3px; font-size:16px; font-weight:700; color:var(--ink); min-width:0}
  .pk-b small{font-size:11px; font-weight:400; color:var(--muted); line-height:1.5; white-space:normal}
  .pk-b-title{display:flex; align-items:center; gap:6px}
  .beta-badge{display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;
    line-height:1; padding:2px 5px; border-radius:6px; background:var(--panel2); border:1px solid var(--accent);
    color:var(--accent); letter-spacing:.02em; vertical-align:middle}
  .seg button .beta-badge{margin-left:4px; transform:translateY(-1px)}
  /* ---- 入口：ロゴ ---- */
  /* 横長ロゴ（405x165）なので幅で決める。高さ基準のままだと横幅が画面をはみ出す */
  .pk-logo{font-size:128px; line-height:1; margin:0 auto 2px; width:min(300px, 100%); text-align:center}
  .pk-logo img{display:block; width:100%; height:auto; margin:0 auto}
  .pk-title{font-size:22px; font-weight:800; letter-spacing:.06em; color:var(--ink)}
  .pk-sub{font-size:12px; color:var(--muted); margin-bottom:14px; letter-spacing:.08em}
  .picker{overflow-y:auto; justify-content:flex-start; padding-top:44px}
  .pk-card{min-height:76px; padding:12px 14px}

  /* ---- 設定：表示切替・音量 ---- */
  .seg2{display:flex; gap:4px; margin-bottom:9px; background:var(--panel2);
    border:1px solid var(--line); border-radius:9px; padding:3px}
  .seg2 button{flex:1; justify-content:center; background:transparent; border:none;
    border-radius:6px; font-size:12px; min-height:34px; color:var(--muted)}
  .seg2 button.on{background:var(--accent); color:#241a08; font-weight:700}
  .vol{display:flex; align-items:center; gap:8px; margin-bottom:6px}
  .vol span{flex:0 0 76px; font-size:12px; color:var(--muted)}
  .vol input[type=range]{flex:1; accent-color:var(--accent); min-width:0}
  .vol b{flex:0 0 26px; font-family:var(--mono); font-size:11px; color:var(--accent); text-align:right}
  /* スマホは 100vh がURLバーを含む“最大の”高さなので、パネル下端が画面外に出て
     音量の下（メトロノーム・初期値に戻す）まで届かなかった。
     dvh＝実際に見えている高さ。非対応ブラウザは上の vh 版が効く。 */
  .gearpanel{max-height:calc(100vh - 80px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  .gearpanel{max-height:calc(100dvh - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)}
  /* 最後の項目がスクロール端でぴったり切れて見えないよう、少し余白を足す */
  .gearpanel > :last-child{margin-bottom:4px}

  /* ---- 運指編集シート ---- */
  /* 開いているあいだ指板を暗くする幕。左ドロワーの .scrim（40）・歯車の .gscrim（36）と
     同じ濃さ・同じ出方にそろえ、z-index はシート（.sheet＝35）のすぐ下に置く。 */
  /* ポジション変更（運指編集）中は指板を暗くしない＝位置を見やすく。暗幕は透明のまま
     残し、外側タップで閉じる動作だけ保つ（item3）。 */
  .escrim{position:fixed; inset:0; z-index:34; background:transparent; opacity:0; pointer-events:none; transition:.2s}
  .escrim.show{opacity:1; pointer-events:auto}
  .edit-sheet .edit{background:transparent; border:none; padding:0 34px}
  .edit-sheet{max-height:70vh; overflow-y:auto}
  /* 前後の音へのナビゲーション。シート（#editSheet）自身は position:fixed で、
     .edit の中身がスクロールしても高さ自体は max-height で頭打ちになるので、
     top:50% で置けば中身のスクロールにつられず edge に留まる。 */
  .edit-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:32px; height:52px; padding:0; font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    background:rgba(21,17,12,.72); border:1px solid var(--line); border-radius:10px;
    color:var(--ink); box-shadow:none;
  }
  .edit-nav:active{transform:translateY(-50%) scale(.94)}
  .edit-nav:disabled{opacity:.28; pointer-events:none}
  .edit-nav-l{left:4px}
  .edit-nav-r{right:4px}
  body.has-tp .edit-sheet{bottom:calc(112px + env(safe-area-inset-bottom))}
  /* ===== 譜面編集（item6）：指板の右上ボタン ＋ ボトムシート ===== */
  .editscorebtn{
    position:fixed; z-index:5; right:calc(12px + env(safe-area-inset-right));
    top:calc(114px + env(safe-area-inset-top));
    height:34px; padding:0 12px; min-height:0; border-radius:17px;
    display:inline-flex; align-items:center; gap:6px;
    background:var(--panel2); border:1px solid var(--line); color:var(--accent);
    box-shadow:0 3px 10px rgba(0,0,0,.42); cursor:pointer; font-size:12px; font-weight:700;
  }
  .editscorebtn[hidden]{display:none}
  .editscorebtn svg{width:18px; height:18px; display:block}
  .editscorebtn .es-t{white-space:nowrap}
  .editscorebtn:active{transform:translateY(1px); border-color:var(--accent-dim)}

  .se-sheet{max-height:72vh; overflow-y:auto}
  .se-sheet .se-save{color:var(--good)}
  .se-body{padding:0 34px}
  .se-cur{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    padding:6px 0 10px; border-bottom:1px solid var(--line); margin-bottom:10px;
  }
  .se-cur .se-pos{font-family:var(--mono); font-size:11px; color:var(--muted)}
  .se-cur .se-name{font-family:var(--mono); font-size:22px; color:var(--ink); flex:1}
  .se-cur .se-name b{color:var(--accent)}
  .se-cur .se-name .oth{color:var(--muted); font-size:16px}
  .se-cur .se-meas{font-family:var(--mono); font-size:11px; color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:1px 7px}
  .se-row{display:flex; align-items:center; gap:8px; margin-bottom:9px}
  .se-row .se-lbl{width:46px; flex:none; font-size:11px; color:var(--muted)}
  .se-btns{display:flex; gap:6px; flex-wrap:wrap; flex:1}
  .se-b{
    padding:8px 12px; border-radius:9px; font-size:13px; font-weight:700;
    background:var(--panel2); color:var(--ink); border:1px solid var(--line); cursor:pointer;
  }
  .se-b:active{transform:translateY(1px); border-color:var(--accent-dim); color:var(--accent)}
  .se-b:disabled{opacity:.32; pointer-events:none}
  .se-b.se-del{color:var(--danger)}
  .se-b.se-del:active{border-color:#7a3a2c; color:var(--danger)}
  .se-chip{
    padding:8px 11px; border-radius:9px; font-family:var(--mono); font-size:12px;
    background:var(--panel2); color:var(--muted); border:1px solid var(--line); cursor:pointer;
  }
  .se-chip.on{border-color:var(--accent); color:var(--accent); background:#332813}
  .se-chip:active{transform:translateY(1px)}
  .se-ops{flex-wrap:wrap; gap:8px; margin-top:4px}
  .sheet-head .t{color:var(--accent); font-size:13px; text-transform:none; letter-spacing:0; font-weight:700}

  /* ---- オクターブ ---- */
  .oct{flex:1; justify-content:center; font-size:12px}
  .oct.on{border-color:var(--accent); color:var(--accent); background:#332813}

  /* ---- 五線譜表示 ---- */
  .staffview{display:none; width:100%; padding:8px 0}
  body.view-staff .fbsvg{display:none}
  body.view-staff .staffview{display:block}
  body.view-staff .zoompad{display:none !important}
  .staffview svg{width:100%; height:auto; display:block}
  .stf-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y}
  .stf-wrap::-webkit-scrollbar{display:none}
  /* ---- ランドスケープ（全部横） ---- */
  #app{position:fixed; inset:0}
  @media (orientation: portrait){
    body.force-landscape #app{
      inset:auto; top:50%; left:50%;
      width:100vh; height:100vw;
      transform:translate(-50%,-50%) rotate(90deg);
      transform-origin:center center;
    }
    body.force-landscape .gearpanel{max-height:calc(100vw - 80px)}
    body.force-landscape .edit-sheet{max-height:70vw}
    body.force-landscape .drawer{width:min(340px, 88vh)}
    body.force-landscape .toast{max-width:90vh}
    body.force-landscape .pk-card{max-width:520px}
    body.force-landscape .picker{flex-direction:column; gap:8px; padding-top:12px}
    body.force-landscape .pk-logo{font-size:40px; width:min(150px, 55%)}
    body.force-landscape .pk-logo img{width:100%; height:auto}
    body.force-landscape .pk-card{min-height:58px; padding:9px 12px}
    body.force-landscape .pk-ic{flex:0 0 36px; height:36px; font-size:18px}
    body.force-landscape .pk-b{font-size:14px}
  }
  /* 横レイアウト（実際に横 or 強制横）：下部を薄くして表示域を広げる */
  body.landscape-layout.has-tp .board-full{ padding-bottom:calc(126px + env(safe-area-inset-bottom)) }
  body.landscape-layout .transport{ padding:5px 0 calc(5px + env(safe-area-inset-bottom)) }
  body.landscape-layout .strip{ padding:6px 12px 5px; gap:5px }
  body.landscape-layout .nchip{ min-width:50px; padding:4px 7px 3px }
  body.landscape-layout .nchip b{ font-size:13px }
  body.landscape-layout .nchip small{ font-size:9px }
  body.landscape-layout .mbar{ height:30px }
  body.landscape-layout .seek{ height:22px }
  body.landscape-layout.has-tp .fab{ bottom:calc(92px + env(safe-area-inset-bottom)) }
  body.landscape-layout.has-tp .sheet{ bottom:0 }
  body.landscape-layout .picker{flex-direction:column; gap:8px; padding-top:10px; justify-content:flex-start}
  body.landscape-layout .pk-logo{font-size:38px; width:min(140px, 55%)}
  body.landscape-layout .pk-logo img{width:100%; height:auto}
  body.landscape-layout .pk-title{font-size:18px}
  body.landscape-layout .pk-sub{margin-bottom:8px}
  body.landscape-layout .pk-card{min-height:54px; padding:8px 12px; max-width:560px}
  body.landscape-layout .pk-ic{flex:0 0 34px; height:34px; font-size:17px}
  /* 五線譜モードでは下部をさらに薄く */
  body.view-staff.landscape-layout.has-tp .board-full{ padding-bottom:calc(112px + env(safe-area-inset-bottom)) }
  .rot-hint{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:70; display:none; text-align:center; color:var(--muted); font-size:13px;
    background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px;
  }
  .rot-hint b{display:block; font-size:34px; margin-bottom:8px}
  /* ---- ドロワー：タブ風のモード切替 ---- */
  .drawer-top{
    position:sticky; top:0; z-index:3; background:var(--panel);
    margin:0 -14px 14px; padding:0 14px;
  }
  .drawer-top .drawer-head{position:static; margin-bottom:0; border-bottom:none}
  .seg{
    display:flex; gap:0; margin:0; padding:0;
    background:transparent; border:none; border-radius:0;
    border-bottom:1px solid var(--line);
  }
  .seg button{
    flex:1; justify-content:center; align-items:center;
    background:transparent; border:none; border-radius:0;
    font-size:12px; min-height:44px; padding:8px 2px; color:var(--muted);
    border-bottom:2px solid transparent; margin-bottom:-1px; transition:.12s;
  }
  .seg button:active{background:rgba(255,255,255,.04)}
  .seg button.on{
    color:var(--accent); font-weight:700;
    border-bottom-color:var(--accent);
    background:linear-gradient(180deg, rgba(231,178,75,.12), rgba(231,178,75,0));
  }

  /* ---- 設定パネル：ヘッダ ---- */
  .gp-head{
    display:flex; align-items:center; gap:8px; margin:-2px -2px 10px;
    padding-bottom:9px; border-bottom:1px solid var(--line);
  }
  .gp-tt{flex:1; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.04em}
  .gp-head .iconbtn{width:32px; height:32px; min-height:32px; font-size:14px}
  /* ======== ゲームらしい見た目 ======== */
  :root{
    --neon:#ffd166; --neon2:#ff8f3f; --cool:#5ad0ff; --pink:#ff5f96;
    --glow:0 0 18px rgba(231,178,75,.45);
  }
  body{
    background:
      radial-gradient(1000px 520px at 50% -12%, #2a2016 0%, transparent 62%),
      radial-gradient(700px 420px at 8% 108%, #1a2430 0%, transparent 60%),
      var(--bg);
  }
  /* ボタン：立体感。.uprow（アップロードした楽譜の行）は中に［トラック］ボタンを
     入れる都合で div だが、「曲を選ぶ」の .songbtn と同じ見た目にするため一緒に当てる。 */
  button, label.filebtn, .uprow{
    background:linear-gradient(180deg, #302719, #241d14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 rgba(0,0,0,.35);
    font-weight:600;
  }
  button:active, label.filebtn:active, .uprow:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.45); transform:translateY(2px)}
  /* 中のボタンは押されても親ごと沈ませない（二重に動くと分かりにくいため） */
  .uprow .ubtn:active{transform:none}
  button.primary{
    background:linear-gradient(180deg, #ffd977, var(--accent) 55%, #c98f2c);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #7d5d1c, var(--glow);
    color:#241a08; text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  button:disabled{opacity:.32; box-shadow:none; transform:none}

  /* 入口：ゲームのタイトル画面らしく */
  .picker{background:
      radial-gradient(760px 420px at 50% 0%, #2c2117 0%, transparent 62%), var(--bg);}
  /* ===== 入口ロゴの演出 =====
     以前の「ふわふわ」（上下＋回転＝@keyframes bob）は廃止した。
     ロゴは白一色なので、白い光を重ねても見えない。そこで
     「暖色の光がロゴの【後ろ】を通り抜ける」形にしてある。
       (a) logoglow … 外周のゴールドがゆっくり明滅する
       (b) logosweep … ぼかした光の帯が後ろを左から右へ横切る
     ロゴ自体（#FFFFFF）には一切色を乗せないので、色は元のまま。
     .pk-logo は filter を持つので独自の重なり文脈になり、
     ::before の z-index:-1 は「img より後ろ・ページより前」に収まる。 */
  .pk-logo{
    position:relative; z-index:0; isolation:isolate;
    filter:drop-shadow(0 6px 22px rgba(231,178,75,.45));
    animation:logoglow 3.6s ease-in-out infinite;
  }
  @keyframes logoglow{
    0%,100%{filter:drop-shadow(0 5px 18px rgba(231,178,75,.30))}
    50%    {filter:drop-shadow(0 7px 30px rgba(231,178,75,.75))}
  }
  .pk-logo::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    top:-30%; bottom:-30%; left:-20%; width:12%;
    background:linear-gradient(90deg, transparent, rgba(255,213,139,.55) 50%, transparent);
    filter:blur(17px); transform:skewX(-16deg);
    animation:logosweep 5.2s ease-in-out infinite;
  }
  /* left を動かすのは、% がロゴの横幅そのものに対して効くため。
     transform の % は「帯自身の幅」に対する割合になり、ロゴの幅が変わると
     通り抜ける範囲がずれてしまう（横画面ではロゴが小さくなる）。 */
  @keyframes logosweep{
    0%,60%  {left:-20%; opacity:0}
    66%     {left:-8%;  opacity:1}
    92%     {left:104%; opacity:1}
    100%    {left:118%; opacity:0}
  }
  .pk-title{
    background:linear-gradient(180deg,#fff5e0,var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 26px rgba(231,178,75,.30);
    font-size:26px; letter-spacing:.10em;
  }
  .pk-card{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, #2b2318, #1d1811 62%);
    border:1px solid #43371f;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 0 rgba(0,0,0,.35);
    border-radius:16px;
  }
  .pk-card::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 48%, transparent 58%);
    transform:translateX(-120%);
    animation:shine 4.6s ease-in-out infinite;
  }
  @keyframes shine{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(130%)}}
  .pk-card:nth-child(4){--c:var(--neon)}
  .pk-card:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35)}

  /* ---- 入口：いちばん使う「曲を練習する」だけ目立たせる ----
     付くのは .pk-card.pk-main（includes/views/app.php）。
     「分かった！」（button.primary）と同じ金で塗るだけ。立体の影は付けない。min-height は触らない
     （横画面のレイアウトが別途 min-height を決めているため）。 */
  .pk-main{
    border-color:var(--accent);
    background:var(--accent);
    color:#241a08;
    box-shadow:none;
  }
  .pk-main .pk-b{font-size:18px; color:#241a08; text-shadow:none}
  .pk-main .pk-b small{color:rgba(36,26,8,.72)}
  .pk-main .pk-ic{
    background:rgba(36,26,8,.10);
    border-color:rgba(36,26,8,.22);
    box-shadow:none;
  }
  .pk-main:active{transform:translateY(1px); box-shadow:none}
    box-shadow:0 1px 0 rgba(0,0,0,.35), 0 0 26px rgba(231,178,75,.24)}
  .pk-ic{
    background:linear-gradient(180deg,#3a2f1d,#241d14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(231,178,75,.18);
    font-size:24px;
  }
  .pk-b{font-weight:800; letter-spacing:.02em}

  /* FAB：光る */
  .fab{
    background:radial-gradient(circle at 35% 28%, #ffe9a8, var(--accent) 55%, #b8801f);
    box-shadow:0 6px 0 #7d5d1c, 0 8px 26px rgba(231,178,75,.45), inset 0 2px 0 rgba(255,255,255,.5);
    text-shadow:0 1px 0 rgba(255,255,255,.4);
  }
  .fab:active{transform:translateY(3px); box-shadow:0 3px 0 #7d5d1c, 0 4px 14px rgba(231,178,75,.4)}
  .fab.playing{
    background:radial-gradient(circle at 35% 28%, #ffb3a0, var(--danger) 55%, #a13d26);
    box-shadow:0 6px 0 #7a2f1c, 0 8px 26px rgba(217,105,74,.45), inset 0 2px 0 rgba(255,255,255,.4);
  }

  /* 現在音のチップを光らせる */
  .nchip.playing{
    box-shadow:0 0 0 1px var(--accent) inset, 0 0 14px rgba(231,178,75,.55);
    transform:translateY(-2px);
  }
  .nchip{transition:transform .12s, box-shadow .12s}
  .seek .head{box-shadow:0 0 10px rgba(231,178,75,.7), 0 1px 5px rgba(0,0,0,.5)}
  .seek .fill{background:linear-gradient(90deg,#8a6e30,#e7b24b)}

  /* ======== 冒頭カウント（1小節ぶん） ======== */
  .countin{
    position:fixed; inset:0; z-index:80; display:none;
    flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(closest-side, rgba(21,17,12,.80), rgba(21,17,12,.94));
    pointer-events:none;
  }
  .countin.show{display:flex}
  .countin>span{
    font-family:var(--mono); font-weight:900;
    font-size:min(46vw, 46vh); line-height:1;
    color:var(--accent);
    text-shadow:0 0 42px rgba(231,178,75,.75), 0 0 100px rgba(231,178,75,.35);
    animation:cpop .42s cubic-bezier(.2,1.5,.4,1);
  }
  @keyframes cpop{0%{transform:scale(.35); opacity:0}55%{transform:scale(1.12); opacity:1}100%{transform:scale(1); opacity:1}}

  /* カウント中のキャンセル導線。#countin は pointer-events:none なのでボタンだけ auto にする */
  .countin .count-cancel{
    position:fixed; z-index:2; pointer-events:auto;
    top:calc(12px + env(safe-area-inset-top)); right:12px;
    min-height:40px; padding:8px 18px; border-radius:999px;
    font-family:var(--mono); font-size:13px; color:var(--ink);
    background:rgba(20,17,12,.82); border:1px solid var(--line);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  .countin .count-cancel:active{ transform:scale(.96) }
  /* 凡例の場所を操作説明ティッカーに転用（1文ずつフェードで入れ替わる） */
  .legend.count-tips{
    position:static; display:flex; align-items:center; justify-content:center;
    margin-top:26px; padding:10px 14px; max-width:min(88vw,420px); min-height:2.6em;
    text-align:center; color:var(--ink); font-size:13px; line-height:1.5;
    background:rgba(20,17,12,.72); border:1px solid var(--line); border-radius:10px;
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  }
  .legend.count-tips .ct-line{ display:block; animation:ctfade .45s ease }
  @keyframes ctfade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

  /* ======== オクターブ（±7・横スクロール） ======== */
  .octrow{
    display:flex; gap:5px; overflow-x:auto; padding-bottom:6px; margin-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x;
  }
  .octrow::-webkit-scrollbar{display:none}
  .oct{
    flex:0 0 auto; min-width:44px; justify-content:center; font-size:12px; font-family:var(--mono);
  }
  .oct.on{border-color:var(--accent); color:var(--accent); background:#332813; box-shadow:0 0 12px rgba(231,178,75,.35)}
  .oct:disabled{opacity:.25; text-decoration:line-through}
  /* ---- 弦の振動と波紋（ゲームらしいエフェクト） ---- */
  .fb .strg{ will-change:d }
  .fb .rip{ fill:none; stroke:var(--accent); stroke-width:2; opacity:0; pointer-events:none }
  .fb .rip.go{ animation:ripgo .55s cubic-bezier(.2,.7,.3,1) }
  @keyframes ripgo{
    0%  { opacity:.95; stroke-width:3 }
    100%{ opacity:0;   stroke-width:20 }
  }

  /* ======== 画面左下のドック（テンポ / 伴奏 / Oct / ループ） ======== */
  .dock{
    position:fixed; left:10px; z-index:7; bottom:calc(10px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  }
  body.has-tp .dock{ bottom:calc(122px + env(safe-area-inset-bottom)) }
  body.landscape-layout.has-tp .dock{ bottom:calc(92px + env(safe-area-inset-bottom)) }
  .dockbtn{
    width:52px; min-height:52px; padding:5px 2px; border-radius:12px;
    flex-direction:column; justify-content:center; align-items:center; gap:1px;
    color:var(--muted); line-height:1.15;
  }
  .dockbtn i{font-style:normal; font-size:17px; font-family:var(--mono); color:var(--ink)}
  .dockbtn small{font-family:var(--mono); font-size:9px; color:var(--faint); white-space:nowrap}
  .dockbtn.on{border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 12px rgba(231,178,75,.35)}
  .dockbtn.on i, .dockbtn.on small{color:var(--accent)}

  /* ======== ドックのモーダル（テンポ / オクターブ / ループ） ======== */
  .dkscrim{position:fixed; inset:0; z-index:42; background:rgba(0,0,0,.74); display:none}
  .dkscrim.open{display:block}
  .dkmodal{
    position:fixed; left:72px; z-index:43; bottom:calc(72px + env(safe-area-inset-bottom));
    width:min(320px, calc(100vw - 82px));
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:12px; box-shadow:0 10px 28px rgba(0,0,0,.55); display:none;
  }
  body.has-tp .dkmodal{ bottom:calc(184px + env(safe-area-inset-bottom)) }
  body.landscape-layout.has-tp .dkmodal{ bottom:calc(154px + env(safe-area-inset-bottom)) }
  .dkmodal.open{display:block}
  .dk-head{
    display:flex; align-items:center; gap:8px; margin:-2px -2px 10px;
    padding-bottom:9px; border-bottom:1px solid var(--line);
  }
  .dk-tt{flex:1; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.04em}
  .dk-head .iconbtn{width:32px; height:32px; min-height:32px; font-size:14px}
  .dkmodal .field{margin-bottom:0}
  .dkmodal .field2{margin-bottom:0}
  /* ループ小節の ▲▼ ステッパー。モーダル内は縦積みにして幅を確保する */
  .dkmodal .field2{flex-direction:column; gap:10px}
  .stepper{display:flex; align-items:center; gap:7px}
  .stepper .sstep{
    width:48px; height:48px; flex:0 0 auto; border-radius:12px; font-size:15px; line-height:1;
    color:var(--accent); background:var(--panel2); border:1px solid var(--line); cursor:pointer;
    display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
  }
  .stepper .sstep:active{background:var(--accent); color:#241a08; border-color:var(--accent)}
  .stepper input[type=number]{flex:1; min-width:0; min-height:48px; font-size:19px; padding:6px 8px}
  .stepper .sstep:disabled{opacity:.35; cursor:default}
  .stepper .sstep:disabled:active{background:var(--panel2); color:var(--accent); border-color:var(--line)}
  .dkmodal .field2.off{opacity:.45}
  .dkmodal .field2.off input[type=number]{cursor:default}
  .dkmodal .sub{margin:7px 0 0}

  /* ======== チューナー：締める／緩める ======== */
  /* 3つの文言を重ねて置き、#tunDir のクラスで1つだけ表示する */
  .tun-dir{
    /* 文言が出ていない時も高さを保つ。可変だと下の行が動いて目障りになる */
    display:flex; justify-content:center; align-items:center; min-height:46px;
    margin-top:9px; font-size:17px; font-weight:700; letter-spacing:.02em;
  }
  .tun-dir span{display:none; padding:9px 18px; border-radius:10px; border:1px solid transparent; line-height:1.4}
  .tun-dir.low  .d-low {display:inline-block; color:var(--alt);    border-color:var(--alt);    background:rgba(217,164,65,.12)}
  .tun-dir.high .d-high{display:inline-block; color:var(--accent); border-color:var(--accent); background:rgba(217,164,65,.12)}
  .tun-dir.ok   .d-ok  {display:inline-block; color:var(--good);   border-color:var(--good);   background:rgba(90,190,120,.14)}
  /* 選んだ弦から半音以上ずれている＝別の弦／オクターブ違いの疑い。締める指示は出さない */
  .tun-dir.far  .d-far {display:inline-block; color:var(--danger); border-color:var(--danger); background:rgba(217,105,74,.16)}

  /* ======== チューナー：インプットボリュームゲージ ======== */
  .tun-in{margin-top:10px}
  .tun-in-t{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:11px; color:var(--muted); margin-bottom:4px;
  }
  .tun-in-t b{font-family:var(--mono); font-size:11px; color:var(--faint)}
  .tun-in-t b.low{color:var(--alt)}
  .tun-in-t b.ok{color:var(--good)}
  .tun-in-t b.hot{color:var(--danger)}
  .tun-in-bar{
    position:relative; height:14px; background:var(--panel2);
    border:1px solid var(--line); border-radius:6px; overflow:hidden;
  }
  /* -60dB〜0dB を全幅に割り当て。-30dB=50% / -9dB=85% が推奨区間の両端。
     下の .zones（暗い下地）と .lv（点灯部）は同じ配色なので、
     「どこまで伸ばせばいいか」がバーを見ただけで分かる。 */
  .tun-in-bar .zones, .tun-in-bar .lv{
    position:absolute; top:0; bottom:0; left:0; right:0;
    background:linear-gradient(90deg,
      #3d4450 0%, #4a5566 46%,
      var(--good) 52%, var(--good) 80%,
      var(--alt) 88%, var(--danger) 100%);
  }
  .tun-in-bar .zones{opacity:.20}
  .tun-in-bar .lv{clip-path:inset(0 100% 0 0); transition:clip-path .06s linear}
  /* 推奨区間の区切り線（-30dB / -9dB） */
  .tun-in-bar .tick{position:absolute; top:0; bottom:0; width:1px; background:var(--ink); opacity:.55}
  .tun-in-bar .tick.lo{left:50%}
  .tun-in-bar .tick.hi{left:85%}
  /* 目盛りの文字。区切り線と同じ位置で区切る */
  .tun-in-scale{display:flex; font-size:9px; color:var(--faint); margin-top:3px; line-height:1.4}
  .tun-in-scale .s-lo{width:50%; text-align:left}
  .tun-in-scale .s-ok{width:35%; text-align:center; color:var(--good)}
  .tun-in-scale .s-hi{width:15%; text-align:right}
  .tun-in-sub{font-size:10px; color:var(--faint); margin-top:4px; line-height:1.5}

  /* ======== 入口の説明ブロック（/{言語}/{楽器}/index.php の説明ページ部分） ======== */
  .pk-desc{
    width:100%; max-width:400px; margin:18px 0 28px;
    border-top:1px solid var(--line); padding-top:16px; text-align:left;
  }
  .pk-desc h2{font-size:13px; font-weight:700; color:var(--muted); margin:0 0 8px; letter-spacing:.04em}
  .pk-desc p{font-size:12px; color:var(--muted); line-height:1.75; margin:0 0 12px}
  .pk-desc dl{margin:0}
  .pk-desc dt{
    display:flex; align-items:center; gap:7px;
    font-size:12px; font-weight:700; color:var(--ink); margin-top:10px;
  }
  .pk-desc dt span{font-size:13px}
  .pk-desc dd{margin:3px 0 0 24px; font-size:11px; color:var(--faint); line-height:1.7}
  .pk-desc-note{margin-top:14px; font-size:10px; color:var(--faint)}
  body.landscape-layout .pk-desc,
  body.force-landscape .pk-desc{max-width:560px}

  /* ======== お悩みガイド（よくある質問の下の導線）========
     開閉は <details>/<summary> なので JS は無い。記事一覧は /{言語}/{楽器}/guide/。
     .gq は一覧ページ（includes/views/guide.php）でも同じものを使う。 */
  .pk-guide{margin:0 0 12px}
  .gq{
    border:1px solid var(--line); border-radius:10px; background:var(--panel2);
    padding:0 11px; margin-top:7px; overflow:hidden;
  }
  .gq summary{
    list-style:none; cursor:pointer; padding:10px 20px 10px 0; position:relative;
    font-size:12px; font-weight:700; color:var(--ink); line-height:1.6;
  }
  .gq summary::-webkit-details-marker{display:none}
  .gq summary::after{
    content:'＋'; position:absolute; right:0; top:10px;
    font-size:12px; font-weight:400; color:var(--accent);
  }
  .gq[open] summary::after{content:'−'}
  .gq[open] summary{border-bottom:1px solid var(--line)}
  .gq summary:active{opacity:.6}
  .gq > p{
    margin:0; padding:9px 0 12px;
    font-size:11px; color:var(--faint); line-height:1.85;
  }
  .pk-more{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    text-decoration:none; margin-top:12px; padding:11px 12px;
    border:1px solid var(--accent); border-radius:10px;
    font-size:12px; font-weight:700; color:var(--accent); line-height:1.5;
  }
  .pk-more .cv{font-size:13px}
  .pk-more:active{opacity:.6}

  /* ======== お悩み集（/{言語}/{楽器}/guide/ ＝ includes/views/guide.php）======== */
  .gd-back{margin:0 0 10px; font-size:11px}
  .gd-back a{color:var(--accent); text-decoration:none}
  .gd-sec{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); text-align:left}
  .gd-sec h2{font-size:13px; font-weight:700; color:var(--ink); margin:0 0 6px; letter-spacing:.04em}
  .gd-lead{font-size:11px; color:var(--muted); line-height:1.8; margin:0 0 8px}
  .gd-note{margin-top:22px; font-size:10px; color:var(--faint); text-align:left}

  /* ======== 楽器の切り替え（ドロワー見出し → モーダル） ======== */
  .drawer-head .dh-t .instbtn{
    font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
  }
  .drawer-head .dh-t .instbtn .cv{font-size:11px; letter-spacing:0; color:var(--accent)}
  .drawer-head .dh-t .instbtn:active{opacity:.6}
  /* dkmodal は本来ドック用に左下固定。楽器切り替えはドロワーの上に出すので中央に置く */
  #mInst{
    left:50%; right:auto; top:50%; bottom:auto;
    transform:translate(-50%,-50%);
    width:min(300px, calc(100vw - 48px));
  }
  .instrow{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:11px 12px; margin-top:8px;
    background:var(--panel2); border:1px solid var(--line); border-radius:10px;
    color:var(--ink); text-decoration:none;
  }
  .instrow .ic{font-size:18px; line-height:1}
  .instrow .nm{flex:1; font-size:13px; font-weight:700; display:flex; align-items:baseline; gap:8px}
  .instrow .nm small{font-weight:400; font-size:10px; color:var(--faint)}
  .instrow.on{border-color:var(--accent); color:var(--accent)}
  .instrow:active{transform:translateY(1px)}

  /* ======== 歯車だけ少し大きく（☰ や ✕ は従来どおり40px） ======== */
  .topbar #gear{width:46px; height:46px; font-size:22px; border-radius:11px}

  /* ======== 入口：ロゴ下の社名 ========
     トップ（.hm-title）と同じ扱い。ロゴの画像に社名が入っているので画面には出さないが、
     <h1> は検索エンジンにとって重要な手がかりなので DOM からは消さない。
     ロゴの alt も同じ "GEN strings" なので、見えているものと食い違わない。
     ここは .pk-title の指定（金のグラデ文字）より後ろに置いて上書きする。 */
  h1.pk-title{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }

  /* ======== 入口の説明：機能・使い方・FAQ ======== */
  .pk-desc h2:not(:first-child){margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
  .pk-feat, .pk-steps{margin:0; padding-left:1.15em}
  .pk-feat li, .pk-steps li{font-size:11px; color:var(--muted); line-height:1.75; margin-bottom:7px}
  .pk-feat{list-style:disc}
  .pk-steps{list-style:decimal}
  .pk-faq{margin:0}
  .pk-faq dt{font-size:12px; font-weight:700; color:var(--ink); margin-top:12px}
  .pk-faq dt::before{content:"Q. "; color:var(--accent)}
  .pk-faq dd{margin:4px 0 0; font-size:11px; color:var(--muted); line-height:1.75}

  /* ======== 小節フラッシュ（シークバーで小節を移動した時に一瞬だけ出す） ======== */
  /* .show を付けた瞬間はほぼ即時に表示し、外した時だけゆっくり消える＝フェードアウト。
     ドラッグ中は連続で呼ばれるので、出しっぱなしのまま数字だけが変わる。 */
  .mflash{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:50;
    background:rgba(20,17,12,.86); border:1px solid var(--accent-dim); border-radius:14px;
    padding:14px 26px; box-shadow:0 10px 28px rgba(0,0,0,.55);
    font-family:var(--mono); font-size:26px; font-weight:800; letter-spacing:.04em;
    color:var(--accent); white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .45s ease;
  }
  .mflash.show{opacity:1; transition:opacity .06s ease}

  /* ======== モーダルの縦並びボタン ========
     「曲を練習する」の案内モーダル（#mScoreStart）は廃止したが、.startrow は
     ほかのモーダル（#mAccAsk・#mUpDup など）でも使っているので残す。 */
  .startrow{display:flex; flex-direction:column; gap:8px}
  .startrow button{width:100%; justify-content:center; min-height:52px; font-size:14px; border-radius:11px}

  /* ======== 設定の保存（歯車のいちばん上）／お問い合わせ（いちばん下） ======== */
  /* 歯車の中の状態表示。保存番号を持っているときだけ色を変える */
  .accwho{font-size:12px; color:var(--faint); margin:-4px 0 8px; line-height:1.5;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .accwho.on{color:var(--accent)}

  /* dkmodal は本来ドック用に左下固定。アカウントとお問い合わせ、
     採点ゲームの説明（#mGameIntro）は画面中央に置く（#mInst と同じ扱い） */
  #mAcc, #mAccAsk, #mContact, #mPractice, #mGameIntro{
    left:50%; right:auto; top:50%; bottom:auto;
    transform:translate(-50%,-50%);
    width:min(340px, calc(100vw - 40px));
    max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain;
  }
  /* 画面キーボードが出ているあいだは、まん中ではなく「見えている範囲の上」に寄せる。
     position:fixed はキーボードで縮まないレイアウトビューポート基準なので、
     中央のままだと入力欄がキーボードの下に隠れてしまう。
     --vvh / --vvt / body.kbd は src/dom.js が visualViewport から入れている。 */
  body.kbd #mAcc, body.kbd #mContact{
    top:calc(var(--vvt, 0px) + 8px);
    transform:translate(-50%, 0);
    max-height:calc(var(--vvh, 100dvh) - 16px);
  }

  /* 入力欄（ログイン／お問い合わせ共通） */
  .fmrow{margin-bottom:10px}
  .fmrow label{display:block; font-size:11px; color:var(--muted); margin-bottom:4px}
  .fmrow input, .fmrow textarea{
    width:100%; font:inherit; font-size:15px;   /* 16px 未満だと iOS が勝手に拡大する。15px + maximum-scale で抑える */
    color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:9px;
    padding:10px 11px; -webkit-appearance:none;
  }
  .fmrow textarea{resize:vertical; min-height:96px; line-height:1.6}
  .fmrow input:focus, .fmrow textarea:focus{outline:none; border-color:var(--accent)}
  .fmrow input::placeholder, .fmrow textarea::placeholder{color:var(--faint)}
  /* ---- 練習カレンダー ---- */
  /* 7列ぶん置くので、他のモーダルより少し広くする */
  #mPractice{width:min(400px, calc(100vw - 32px))}

  /* 歯車パネルの「累計練習時間」の1行 */
  .pracline{
    display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px;
    margin-top:8px; padding:9px 11px; min-height:auto; border-radius:9px;
    background:var(--panel2); border:1px solid var(--line); box-shadow:none; cursor:pointer;
  }
  .pracline:hover{border-color:var(--accent)}
  .pracline .pl-l{font-size:12px; color:var(--muted); font-weight:400}
  .pracline .pl-v{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--accent)}

  /* 上の3つの集計 */
  .prac-sum{display:flex; gap:6px; margin-bottom:12px}
  .prac-sum > div{
    flex:1; text-align:center; padding:8px 4px; border-radius:9px;
    background:var(--panel2); border:1px solid var(--line);
  }
  .prac-sum span{display:block; font-size:10px; color:var(--muted); margin-bottom:3px}
  .prac-sum b{font-family:var(--mono); font-size:13px; color:var(--accent)}

  /* 月の送り */
  .prac-nav{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px}
  .prac-mon{font-size:14px; font-weight:700; min-width:9em; text-align:center}

  /* 曜日と日付のマス */
  .pc-wd{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:3px}
  .pc-wd span{text-align:center; font-size:10px; color:var(--muted)}
  .pc-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
  .pc-cell{
    position:relative; aspect-ratio:1; border-radius:8px;
    background:var(--panel2); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:3px 1px 0; overflow:hidden;
  }
  .pc-cell.pad{background:none; border-color:transparent}   /* 1日より前の空きマス */
  .pc-cell .pc-d{font-family:var(--mono); font-size:10px; color:var(--muted); line-height:1}
  /* 花丸は数字の上に重ねる。マスが小さいので並べると入りきらない */
  .pc-cell .pc-mark{position:absolute; top:calc(50% - 2px); transform:translateY(-50%); font-size:17px; line-height:1}
  .pc-cell .pc-t{position:absolute; bottom:2px; font-family:var(--mono); font-size:8px; color:var(--accent); line-height:1}
  .pc-cell.done{background:var(--panel); border-color:var(--accent-dim)}
  .pc-cell.done .pc-d{color:var(--ink)}
  .pc-cell.today{border-color:var(--accent)}

  /* ---- ログイン ⇄ 新規登録 のタブ ---- */
  .actabs{display:flex; gap:4px; margin:0 0 14px; padding:3px; border-radius:10px; background:var(--panel2)}
  .actabs[hidden]{display:none}
  .actab{
    flex:1; min-height:34px; justify-content:center; padding:0 8px; border:none; border-radius:8px;
    background:transparent; color:var(--muted); font-size:13px; font-weight:700; box-shadow:none; cursor:pointer;
  }
  .actab.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.35)}

  /* ---- パスワードの目マーク ---- */
  .pwwrap{position:relative}
  /* ボタンのぶんだけ右を空ける。空けないと文字がボタンの下に潜る */
  .pwwrap input{padding-right:44px}
  .pweye{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:36px; min-height:36px; padding:0; border:none; border-radius:8px;
    background:transparent; box-shadow:none; cursor:pointer;
    font-size:15px; line-height:1; opacity:.45; filter:grayscale(1);
  }
  .pweye:hover{opacity:.75}
  /* 見せているあいだは色を戻して、いま平文であることが分かるようにする */
  .pweye.on{opacity:1; filter:none}

  /* ---- アカウント（#mAcc）----
     表示するページは常に1枚だけ（.acp.on）。切替は src/account.js の openPane()。
     歯車のサブメニューと同じ作法にそろえてある。 */
  #mAcc .acp{display:none}
  #mAcc .acp.on{display:block}
  /* 「または」の左右に細い線を引く */
  .acor{
    display:flex; align-items:center; gap:9px; margin:12px 0 10px;
    font-size:11px; color:var(--faint);
  }
  .acor::before, .acor::after{content:''; flex:1; height:1px; background:var(--line)}
  /* 「新規登録 / パスワードを忘れた / ‹ 戻る」の行 */
  .aclinks{display:flex; flex-wrap:wrap; gap:4px 14px; margin:11px 0 9px}
  .aclink{
    background:none; border:none; box-shadow:none; padding:0; min-height:0;
    font-size:12px; color:var(--accent); text-decoration:underline; cursor:pointer;
  }
  .aclink:hover{color:var(--ink)}
  /* メールを送ったあとの目印 */
  .acsent{font-size:34px; text-align:center; color:var(--accent); margin:2px 0 8px}

  .sv-label{font-size:11px; color:var(--muted); margin-bottom:5px}
  .sv-code{
    font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:.18em;
    color:var(--accent); text-align:center; user-select:all; -webkit-user-select:all;
    background:var(--panel2); border:1px solid var(--line); border-radius:10px;
    padding:12px 8px; margin-bottom:10px;
  }
  /* ログイン中のメールアドレス。番号と違って長いので、小さくして折り返す */
  .sv-code.acmail{
    font-size:14px; letter-spacing:0; font-family:var(--jp);
    word-break:break-all; padding:11px 12px; text-align:left;
  }
  /* 「設定を保存しますか？」の本文。文言側の改行をそのまま出す */
  .sv-ask{white-space:pre-line; margin:2px 0 0}
  /* 退会のボタンだけ色を変える（押し間違いを減らす） */
  button.primary.danger{background:var(--danger); border-color:var(--danger); color:#fff}
  /* 消す操作だけ色を変える（押し間違いを減らす） */
  button.ghost.danger{color:var(--danger); border-color:var(--danger)}

  /* 保存したことの合図。右下に1秒ほど出して消える（要素は src/account.js が作る） */
  .svsaved{
    position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:61;
    background:var(--panel); border:1px solid var(--accent-dim); border-radius:8px;
    padding:7px 11px; font-size:11px; color:var(--accent); pointer-events:none;
    opacity:0; transition:opacity .18s;
  }
  .svsaved.show{opacity:1}

  /* 送信結果・エラーの1行表示 */
  .fmmsg{font-size:11px; color:var(--good); margin:6px 0 0; line-height:1.6; min-height:1em}
  .fmmsg.err{color:var(--danger)}

  /* 「新規登録はこちら」のような文中リンク風ボタン */
  .linkbtn{
    background:none; border:none; box-shadow:none; padding:6px 2px; margin:2px 0 0;
    min-height:0; color:var(--accent); font-size:12px; text-decoration:underline; cursor:pointer;
  }
  .linkbtn:active{opacity:.6}

  /* 罠フィールド（人には見せない。display:none だと埋めない機械があるので画面外へ逃がす） */
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  /* ======== 楽器選択トップ（/{言語}/ ・ views/home.php） ======== */
  /* アプリ本体と違い、ここは普通のページとして縦スクロールさせる */
  html.home, body.home{overflow:auto; height:auto; -webkit-overflow-scrolling:touch}
  .hm{
    max-width:520px; margin:0 auto; padding:
      calc(28px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  }
  /* トップの会員導線（右寄せの1行） */
  .hm-acc{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:14px; min-height:32px}
  .hm-acc .accwho{margin:0; flex:1; text-align:left}
  .hm-acc button{min-height:32px; padding:6px 12px; font-size:12px}
  .hm-head{text-align:center; margin-bottom:26px}
  .hm-logo{font-size:84px; line-height:1}
  /* 横長ロゴ（405x165）。入口（.pk-logo）と同じく幅で決める */
  .hm-logo img{display:block; width:min(250px, 100%); height:auto; margin:0 auto}
  .hm-title{font-size:24px; font-weight:800; letter-spacing:.06em; margin:6px 0 4px; color:var(--ink)}
  .hm-sub{font-size:12px; color:var(--muted); letter-spacing:.06em; margin:0}
  /* ロゴの真下に社名が来る画面（トップ）だけ、見出しを画面に出さない。
     .hm-title 自体は お悩み集・プライバシーポリシー・利用規約 でも
     ページの見出しとして使っているので、そちらまで消さないよう専用のクラスで分ける。

     DOM からは消さない。<h1> は検索エンジンにとって重要な手がかりで、
     ロゴの alt も同じ "GEN strings" なので、見えているものと食い違わない
     （＝隠して別の言葉を仕込む「クローキング」にはあたらない）。 */
  .hm-title-logo{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  /* 見出しが流し込みから外れるぶん、ロゴとの間を空け直す */
  .hm-title-logo + .hm-sub{margin-top:8px}
  .hm-h{font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
    margin:0 0 10px; font-weight:600; text-align:center}
  .hm-list{display:flex; flex-direction:column; gap:9px}
  .hm-card{
    display:flex; align-items:center; gap:14px; padding:14px 16px;
    background:var(--panel); border:1px solid var(--line); border-radius:13px;
    color:var(--ink); text-decoration:none; transition:.15s;
  }
  .hm-card:active{transform:translateY(1px); border-color:var(--accent)}
  .hm-card.soon{opacity:.55}
  .hm-card .ic{
    flex:0 0 44px; height:44px; border-radius:11px; background:var(--panel2);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:22px;
  }
  .hm-card .b{flex:1; display:flex; flex-direction:column; gap:3px; font-size:16px; font-weight:700}
  .hm-card .b small{font-size:11px; font-weight:400; color:var(--muted)}
  .hm-card .cv{color:var(--accent); font-size:18px}

  /* ---- 楽器選択：カバーフロー ----
     JS（src/home-gallery.js）が動いたときだけ .hm-stage に .on が付く。
     付かないあいだは、これまでどおり縦に並んだリンク一覧のまま。
     位置・傾き・奥行き・不透明度は JS が1枚ずつ指定するので、ここでは持たない。 */
  .hm-stage.on{
    position:relative; height:330px; margin:6px 0 4px;
    perspective:900px; overflow:hidden; outline:none;
    touch-action:pan-y;                 /* 縦スクロールは殺さない。横は JS が受ける */
  }
  .hm-stage.on .hm-list{
    position:absolute; inset:0; display:block; transform-style:preserve-3d;
  }
  .hm-stage.on .hm-card{
    position:absolute; top:8px; left:50%;
    /* 中央寄せは margin ではなく transform の translateX(-50%) で行う（src/home-gallery.js）。
       margin に負の min()/max() を使うと、画面幅によってずれ方が変わって札が切れる。 */
    width:min(140px, 38vw); height:300px;
    flex-direction:column; align-items:center; justify-content:flex-start;
    gap:6px; padding:12px 8px; text-align:center;
    background:linear-gradient(180deg,#241d14,#171209);
    -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
    will-change:transform, opacity, filter;
  }
  .hm-stage.on .hm-card.front{border-color:var(--accent-dim)}
  .hm-stage.on .hm-card .ic{
    flex:1 1 auto; width:100%; min-height:0; border-radius:10px;
    background:transparent; border:none;
    display:flex; align-items:flex-end; justify-content:center;
  }
  /* 中の画像にも掛けておく。-webkit-user-drag は継承しないので、
     .hm-card に付けただけでは <img> のネイティブなドラッグが残り、
     マウスで押したまま動かしても pointermove がそちらへ取られて回らなくなる。 */
  .hm-stage.on .hm-card .ic img{
    width:100%; height:100%; object-fit:contain; display:block;
    -webkit-user-drag:none; user-select:none; -webkit-user-select:none; pointer-events:none;
  }
  /* 掴んでいる間のカーソル。マウスでも回せることが見て分かるようにする */
  .hm-stage.on{cursor:grab}
  .hm-stage.on.grabbing{cursor:grabbing}
  .hm-stage.on .hm-card .b{flex:0 0 auto; align-items:center; font-size:14px}
  .hm-stage.on .hm-card .b small{font-size:10px}
  .hm-stage.on .hm-card .cv{display:none}
  /* JS が動いていないときは画像を小さくして、これまでの横並びの札に収める */
  .hm-card .ic img{width:100%; height:100%; object-fit:contain; display:block}

  /* 送りのボタンと丸。どちらも JS が動いたときだけ出す */
  .hm-nav{display:none; align-items:center; justify-content:center; gap:14px; margin:2px 0 6px}
  #hmStage.on ~ .hm-nav{display:flex}
  .hm-arrow{
    width:38px; height:38px; min-height:0; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:20px; line-height:1; box-shadow:none;
    background:var(--panel2); border:1px solid var(--line); color:var(--accent); cursor:pointer;
  }
  .hm-arrow:disabled{opacity:.3}
  .hm-arrow:active:not(:disabled){transform:translateY(1px)}
  .hm-dots{display:flex; justify-content:center; gap:8px}
  .hm-dots[hidden]{display:none}
  .hm-dot{
    width:8px; height:8px; min-height:0; padding:0; border-radius:50%; box-shadow:none;
    background:var(--panel2); border:1px solid var(--line); cursor:pointer;
  }
  .hm-dot.on{background:var(--accent); border-color:var(--accent)}
  /* スワイプの案内も、実際に動くようになったときだけ出す */
  .hm-hint{display:none; text-align:center; font-size:11px; color:var(--faint); margin:0 0 10px}
  #hmStage.on ~ .hm-hint{display:block}
  .hm-about{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}
  .hm-about h2{font-size:13px; font-weight:700; color:var(--muted); margin:0 0 8px; letter-spacing:.04em}
  .hm-about p{font-size:12px; color:var(--muted); line-height:1.85; margin:0}
  .hm-foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); text-align:center}
  /* ホーム画面に追加（言語選択の上）。対応ブラウザ以外では pwa.js が出さない */
  .hm-pwa{display:flex; justify-content:center; margin-bottom:10px}
  .hm-pwa button{min-height:42px; padding:9px 18px; font-size:13px; border-radius:10px}
  .hm-pwa-note{text-align:center; margin:-4px 0 12px}
  .hm-lang{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px}
  .hm-lang a{
    font-size:12px; color:var(--muted); text-decoration:none;
    padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel2);
  }
  .hm-lang a.on{color:var(--accent); border-color:var(--accent-dim)}
  .hm-foot small{font-size:10px; color:var(--faint)}
  .hm-foot small a{color:var(--muted)}

  /* ======== 歯車：iPhoneの設定風サブメニュー（音量 / 指板ズーム） ======== */
  /* ページは常に1枚だけ表示する。横から差し込むアニメーションで階層を感じさせる */
  .gearpanel{overflow-x:hidden}
  .gp-page{display:none}
  .gp-page.on{display:block; animation:gpIn .18s ease}
  .gp-page.on.back{animation:gpBack .18s ease}
  @keyframes gpIn  {from{transform:translateX(16%); opacity:.35} to{transform:translateX(0); opacity:1}}
  @keyframes gpBack{from{transform:translateX(-16%); opacity:.35} to{transform:translateX(0); opacity:1}}
  /* 一覧の行（タップでサブメニューへ） */
  .gp-row{
    width:100%; justify-content:flex-start; gap:8px; margin-bottom:6px;
    min-height:44px; font-size:13px; color:var(--ink);
  }
  .gp-row .v{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--accent)}
  .gp-row .cv{flex:0 0 auto; color:var(--faint); font-size:15px; line-height:1}
  /* .gearpanel button{justify-content:center} のほうが詳細度が高く、.gp-row の
     flex-start が効かない。値(.v)を持つ行は .v の margin-left:auto で左に寄って見えるが、
     値の無い行（お問い合わせ）だけ中央寄せになってしまうため、見出し側にも auto を入れて
     どの行も「文字＝左／› ＝右端」でそろえる。 */
  .gp-row>span:first-child{margin-right:auto}
  /* サブメニューの見出し（‹ 戻る） */
  .gp-back{
    display:flex; align-items:center; gap:8px; margin:-2px -2px 10px;
    padding-bottom:9px; border-bottom:1px solid var(--line);
  }
  .gp-back button{
    background:none; border:none; box-shadow:none; padding:4px 2px; min-height:0;
    color:var(--accent); font-size:13px;
  }
  .gp-back button:active{opacity:.6; transform:none}
  .gp-back .t{flex:1; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.04em}

  /* ======== 開始カウント：4 / 8 の切替 ======== */
  #countSeg{margin-top:-2px}
  .seg2.off{opacity:.45; pointer-events:none}

  /* ======== 設定を変えたら ▶ で反映（スケール練習） ======== */
  /* ドロワー(z-index:41)を開いたまま押せるように、光っている間だけ前面へ出す */
  /* 光り方は「▶ の字がオレンジに光る」(fabled) に統一した。
     以前の淵が脈打つ演出(fabattn)は、LED点灯と2種類あって意味が読み取りづらかったため。 */
  .fab.attn:not(:disabled):not(.playing){animation:fabled 1.4s ease-in-out infinite}

  /* ======== 「✓ 保存しました」が出たら ▶ を前面へ ========
     設定を変えた＝聴き直したい場面なので、✕ で閉じなくても ▶ を押せるようにする。
     付けるのは src/account.js の flashSaved()、外すのは closeDrawer()/closeGear()/▶タップ。

     62 なのは、いま画面に出ている可能性のあるものすべてより上へ出すため。
       36 歯車スクリム / 38 歯車パネル / 40 スクリム / 41 ドロワー
       42 ドックのスクリム(.dkscrim) / 43 ドックのモーダル(.dkmodal)
       45 PDF参照 / 60 トースト / 61 「✓ 保存しました」(.svsaved)
     42 では .dkscrim と同値になり、#dockScrim が #fab より後ろにあるぶん
     スクリムが上に乗ってタップを吸ってしまう（テンポ・ループ等を変えた直後がこれ）。
     冒頭カウント(70) より下なので、カウントダウン中に前へ出ることはない。 */
  body.save-attn .fab{z-index:62}
  body.save-attn .fab:not(:disabled):not(.playing){animation:fabled 1.4s ease-in-out infinite}
  /* ======== 曲を読み込んだ直後の ▶：LED風に点灯 ========
     ドロワーが閉じて指板だけが残る場面で、次に押すのが ▶ だと分かるようにする。
     付けるのは src/dom.js の setFabLed()、外すのは clearFabLed()（再生開始時）。
     再生中（.playing）と押せないとき（:disabled）は光らせない。 */
  .fab.led:not(:disabled):not(.playing){animation:fabled 1.4s ease-in-out infinite}
  /* 光らせるのは ▶ の字だけ。ボタンの地の色・影・大きさは動かさない
     （▶ は #fab の文字そのものなので、color と text-shadow だけを動かせば字だけが光る）。 */
  @keyframes fabled{
    0%,100%{color:#241a08; text-shadow:0 1px 0 rgba(255,255,255,.4)}
    45%    {color:#ff9a38;
            text-shadow:0 0 8px rgba(255,190,120,.95), 0 0 18px rgba(255,154,56,.80), 0 0 28px rgba(255,154,56,.50)}
  }

  /* ======== 採点ゲーム ======== */
  /* 「録音して採点する」はドロワーの下辺に貼り付ける。
     課題曲の一覧が長いと画面の外へ出てしまい、曲を選んだあと下までスクロールしないと
     押せなかったため。ドロワー(.drawer)がスクロールする側なので sticky で足りる。 */
  .gstart-bar{
    position:sticky; z-index:2;
    /* .drawer の下の余白は 24px。そのぶん下げておかないと、貼り付いた位置の下に隙間が残る */
    bottom:-24px;
    margin:0 -14px calc(-24px + env(safe-area-inset-bottom));
    padding:10px 14px calc(24px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(31,25,19,0) 0%, var(--panel) 30%, var(--panel) 100%);
  }
  /* 課題曲の一覧：いま選んでいる曲だけ枠を光らせる（.songbtn をそのまま使う） */
  .songlist .songbtn.on{border-color:var(--accent); color:var(--accent)}
  .songbtn .gbest{font-family:var(--mono); font-size:11px; color:var(--good); margin-left:6px}

  /* 録音中の帯。冒頭カウント(70)より下、トースト(60)より下に置く */
  .grec{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(18px + env(safe-area-inset-bottom)); z-index:44;
    display:none; align-items:center; gap:10px;
    padding:9px 12px; border-radius:12px;
    background:var(--panel); border:1px solid var(--danger);
    box-shadow:0 10px 28px rgba(0,0,0,.55);
    max-width:calc(100vw - 24px);
  }
  .grec.show{display:flex}
  .grec .gr-dot{
    width:11px; height:11px; flex:0 0 auto; border-radius:50%;
    background:var(--danger); animation:grecblink 1s ease-in-out infinite;
  }
  .grec .gr-t{font-size:12px; color:var(--muted); white-space:nowrap}
  .grec .gr-pos{font-family:var(--mono); font-size:13px; color:var(--accent); white-space:nowrap}
  .grec button{min-height:34px; padding:6px 10px; font-size:12px}
  @keyframes grecblink{0%,100%{opacity:1} 50%{opacity:.25}}

  /* 採点結果。項目が多いので、ほかのドックのモーダルより広く・縦に送れるようにする */
  .dkmodal.gres{
    left:12px; width:min(520px, calc(100vw - 24px));
    max-height:min(76vh, 620px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .gres-top{display:flex; align-items:center; gap:12px; margin-bottom:8px}
  .gres-rank{
    width:56px; height:56px; flex:0 0 auto; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:26px; font-weight:700;
    color:var(--accent); background:var(--panel2); border:1px solid var(--accent);
  }
  .gres-rank[data-rank="S"]{color:var(--good); border-color:var(--good)}
  .gres-rank[data-rank="D"], .gres-rank[data-rank="E"]{color:var(--muted); border-color:var(--line)}
  .gres-num{display:flex; align-items:baseline; gap:4px}
  .gres-num b{font-family:var(--mono); font-size:34px; line-height:1; color:var(--ink)}
  .gres-num span{font-size:12px; color:var(--muted)}
  .gres-cmp{font-size:12px; color:var(--accent); line-height:1.7; margin-bottom:8px}
  .gres-break{display:flex; gap:6px; margin-bottom:4px}
  .gres-break div{
    flex:1; min-width:0; text-align:center; padding:7px 4px;
    background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  }
  .gres-break span{display:block; font-size:11px; color:var(--muted)}
  .gres-break b{font-family:var(--mono); font-size:15px; color:var(--ink)}
  .gres-adv{margin:0 0 4px; padding-left:18px; font-size:12px; color:var(--muted); line-height:1.75}
  .gres-adv li{margin-bottom:2px}
  .gres-staff{margin-bottom:6px}
  .gres-stfwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .gres-stfwrap svg{display:block}
  .gres-legend{display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--muted)}
  .gres-legend span{display:inline-flex; align-items:center; gap:4px}
  .gres-legend .gl{width:9px; height:9px; border-radius:50%; display:inline-block}
  .gres-legend .gl-ok{background:var(--good)}
  .gres-legend .gl-pitch{background:var(--danger)}
  .gres-legend .gl-time{background:var(--alt)}
  .gres-legend .gl-miss{background:var(--faint)}

  /* 採点ゲーム：録音の準備（入力レベルの確認） */
  .dkmodal.gready{
    left:12px; width:min(440px, calc(100vw - 24px));
    max-height:min(76vh, 560px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .gck-tips{margin:0 0 12px; padding-left:18px; font-size:12px; color:var(--muted); line-height:1.7}
  .gck-tips li{margin-bottom:4px}
  .gck-heard{
    display:flex; align-items:center; gap:8px; margin-top:10px;
    font-size:12px; color:var(--muted);
  }
  .gck-note{
    margin-left:auto; font-family:var(--mono); font-size:14px; color:var(--faint);
    padding:3px 9px; border-radius:8px; background:var(--panel2); border:1px solid var(--line);
  }
  .gck-note.in{color:var(--good); border-color:var(--good)}
  .gck-note.out{color:var(--danger); border-color:var(--danger)}

  /* ======== 頭出し（▶ の上） ========
     ▶（.fab）と同じ右下に、ひとまわり小さい丸ボタンとして重ねずに積む。
     .fab のクラスは付けていない（.fab は「ゲームらしい見た目」で金色＋光る指定が
      いくつも掛かっており、頭出しまで一緒に光ってしまうため）。
     出し入れ・disabled は src/modes.js の updateChrome() が ▶ とそろえる。 */
  .cue{
    /* ▶（.fab＝60px, right:16px）の真上に中心をそろえる。
       頭出しは 46px なので、内側へ (60-46)/2 = 7px ずらして right:23px。 */
    position:fixed; z-index:6; right:calc(23px + env(safe-area-inset-right));
    bottom:calc(86px + env(safe-area-inset-bottom));
    width:46px; height:46px; border-radius:50%; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:17px; line-height:1; cursor:pointer;
    background:linear-gradient(180deg,#3a2f1d,#241d14); color:var(--accent);
    border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 rgba(0,0,0,.35);
  }
  .cue:active{transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}
  .cue:disabled{opacity:.32; box-shadow:none; transform:none}
  /* 下に運指リスト＋シークバー（.transport）が出ているぶんだけ持ち上げる。
     ▶ が 128px のところなので、その上（128 + ▶の60 + 隙間10）に置く。 */
  body.has-tp .cue{ bottom:calc(198px + env(safe-area-inset-bottom)) }
  /* 横レイアウトは ▶ が 92px なので 92 + 60 + 10 */
  body.landscape-layout.has-tp .cue{ bottom:calc(162px + env(safe-area-inset-bottom)) }

  /* ======== ドロワーを開いているあいだの案内文 ========
     「課題曲を選んでください」などの案内（.empty）は z-index:4 なので、
     ドロワーの黒いスクリム（.scrim ＝ z-index:40）の下に潜って読めなかった。
     ドロワーが開いているあいだだけ 41 に上げる。#drawer も 41 だが
     DOM 上で #empty より後ろにあるので、ドロワー本体のほうが上に乗る
     （＝案内文がドロワーの中身に被ることはない）。
     クラスの付け外しは src/drawer.js の openDrawer() / closeDrawer()。 */
  body.drawer-open .empty{z-index:41}

  /* ======== 楽器選択トップのカード：入口（.pk-card）と同じ演出 ========
     質感（斜めグラデ＋立体の影）と、たまに光が走る @keyframes shine をそろえる。
     4枚が同時に光るとうるさいので、2枚目以降は少しずつ遅らせる。 */
  .hm-card{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, #2b2318, #1d1811 62%);
    border:1px solid #43371f;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 0 rgba(0,0,0,.35);
    border-radius:16px;
  }
  .hm-card::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 48%, transparent 58%);
    transform:translateX(-120%);
    animation:shine 4.6s ease-in-out infinite;
  }
  .hm-card:nth-child(2)::after{animation-delay:.30s}
  .hm-card:nth-child(3)::after{animation-delay:.60s}
  .hm-card:nth-child(4)::after{animation-delay:.90s}
  .hm-card:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35)}
  .hm-card .ic{
    background:linear-gradient(180deg,#3a2f1d,#241d14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(231,178,75,.18);
  }
  .hm-card .b{font-weight:800; letter-spacing:.02em}
/* ===== スラーの帯（指板上・同じ弦の2音以上を結ぶ縦帯） ===== */
#notes .slurband{
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-opacity: 0.30;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#notes .slurlbl{
  fill: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  font-family: var(--mono);
  letter-spacing: 0.5px;
  paint-order: stroke;
  stroke: var(--board, #0c0a08);
  stroke-width: 3px;
  stroke-linejoin: round;
}