/* =========================================================
   音楽理論大全 スタイル(デザイン案6ベース)
   - 左: サイドバー(検索・メニュー・しおり) / 中央: 内容 / 下: プレーヤーバー
   - 文字はOSの標準フォント。色は白地・グレー・差し色の青ひとつ
   - 角丸は 6〜12px、区切りは薄い線。影は重なる要素(詳細パネル・メニュー)だけ
   ========================================================= */
:root{
  --bg:#ffffff;
  --side:#f6f6f7;
  --surface:#ffffff;
  --surface-2:#f5f5f7;
  --hover:#f0f0f2;
  --line:#e6e6e8;
  --line2:#d4d4d8;
  --text:#1d1d1f;
  --sub:#5f5f64;        /* 補足の文字(白地でコントラスト比 6:1 以上) */
  --faint:#8e8e93;      /* 装飾的な線・注記だけに使う */
  --accent:#1a73e8;
  --accent-2:#1558b0;
  --accent-bg:#e8f0fe;
  --fn-t:#2e7d4f; --fn-s:#b26a00; --fn-d:#d23b2a; --fn-x:#5566b8;
  --ok:#1e8e3e; --ok-bg:#e6f4ea; --ng:#d93025; --ng-bg:#fce8e6;
  --key-white:#ffffff; --key-edge:#c7c7cc; --key-black:#2c2c2e; --key-on:#cfe0fc; --key-on-black:#1a73e8; --mark:#fff2b3;
  --shadow:0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --player-h:72px;
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* 以前の変数名(JS のインラインスタイルが参照している) */
  --paper:var(--surface); --paper-dim:var(--line); --text-on-paper:var(--text); --text-on-paper-muted:var(--sub);
  --text-on-ink:var(--text); --text-muted:var(--sub); --wine:var(--accent); --brass:var(--text); --brass-bright:var(--accent);
  --ink:var(--text); --ink-2:var(--sub); --ink-3:var(--sub); --ink-soft:var(--surface-2); --ink-line:var(--line);
  --rule:var(--line); --rule-2:var(--line2);
}
body.theme-dark{
  --bg:#1c1c1e; --side:#161618; --surface:#232325; --surface-2:#2c2c2e; --hover:#2c2c2e;
  --line:#38383a; --line2:#48484a; --text:#f2f2f7; --sub:#b4b4ba; --faint:#8e8e93;
  --accent:#5b9cf8; --accent-2:#80b3fa; --accent-bg:#1f2f4d;
  --fn-t:#57b07a; --fn-s:#e0a340; --fn-d:#f06a58; --fn-x:#8797e0;
  --ok:#58c27a; --ok-bg:#1f3a28; --ng:#f07366; --ng-bg:#3f2320;
  --key-white:#e5e5ea; --key-edge:#8e8e93; --key-black:#111113; --key-on:#9cc1fa; --key-on-black:#5b9cf8; --mark:#5a4a14;
  --shadow:0 12px 32px rgba(0,0,0,.5);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; height:100%; }
body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:14.5px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
[hidden]{ display:none !important; }
kbd{ font-family:var(--font); font-size:11px; border:1px solid var(--line2); border-radius:4px; padding:1px 5px; background:var(--surface); color:var(--sub); }
svg.i{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* =========================================================
   全体の枠
   ========================================================= */
.app{ display:grid; grid-template-columns:240px minmax(0,1fr); grid-template-rows:minmax(0,1fr) var(--player-h); height:100vh; }
.sidebar{ grid-row:1; background:var(--side); border-right:1px solid var(--line); overflow-y:auto; padding:14px 10px 18px; display:flex; flex-direction:column; }
.brand{ display:flex; align-items:center; gap:9px; padding:4px 8px 14px; font-weight:700; font-size:15px; color:var(--text); text-decoration:none; }
.brand .mk{ width:26px; height:26px; border-radius:7px; background:var(--text); display:grid; place-items:center; }
.brand .mk svg{ width:15px; height:15px; stroke:var(--bg); }
.search-box{ display:flex; align-items:center; gap:6px; margin:0 4px 16px; padding:0 8px; height:34px; background:var(--surface); border:1px solid var(--line2); border-radius:8px; color:var(--sub); }
.search-box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.search-box input{ flex:1; min-width:0; border:0; outline:0; background:none; color:var(--text); }
.search-box input::-webkit-search-cancel-button{ display:none; }
.search-clear{ display:none; border:0; background:none; color:var(--sub); font-size:16px; line-height:1; padding:0 2px; }
.search-clear.show{ display:block; }
.search-clear.show + .search-kbd{ display:none; }
.nav-group{ margin-bottom:14px; }
.nav-group h6{ margin:0; padding:4px 10px; font-size:11.5px; font-weight:600; color:var(--sub); }
nav.tabs button{ width:100%; display:flex; align-items:center; gap:10px; padding:7px 10px; border:0; border-radius:7px; background:none; text-align:left; color:var(--text); }
nav.tabs button:hover{ background:var(--hover); }
nav.tabs button.active{ background:var(--line); font-weight:600; }
body.theme-dark nav.tabs button.active{ background:#333336; }
nav.tabs button .n{ margin-left:auto; font-size:12px; color:var(--sub); font-weight:400; }
.saved-group{ margin-top:4px; }
.saved-item{ display:block; width:100%; text-align:left; border:0; background:none; padding:5px 10px; border-radius:6px; color:var(--sub); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.saved-item:hover{ background:var(--hover); color:var(--text); }
.saved-item.more{ color:var(--accent); }
.saved-empty{ margin:2px 10px; font-size:12.5px; color:var(--sub); line-height:1.6; }

.main-scroll{ grid-row:1; overflow-y:auto; overscroll-behavior:contain; }
main{ padding:28px 40px 48px; max-width:1180px; }
footer{ padding:0 40px 32px; max-width:1180px; font-size:12px; color:var(--sub); line-height:1.8; }

/* ---------- 下部プレーヤー ---------- */
.player{ grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; padding:0 18px; background:var(--surface); border-top:1px solid var(--line); position:relative; z-index:60; }
.player .now{ display:flex; align-items:center; gap:10px; min-width:0; }
.player .art{ width:42px; height:42px; border-radius:7px; background:var(--side); border:1px solid var(--line); display:grid; place-items:center; color:var(--sub); font-size:18px; flex-shrink:0; }
.player.is-playing .art{ color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.now-text{ min-width:0; }
.now-text b{ display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-text span{ display:block; font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.transport{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.transport .ctrls{ display:flex; align-items:center; gap:14px; }
.tr-btn{ width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--sub); display:grid; place-items:center; }
.tr-btn:hover:not(:disabled){ background:var(--hover); color:var(--text); }
.tr-btn:disabled{ opacity:.35; cursor:default; }
.tr-btn.muted{ color:var(--ng); }
.tr-main{ width:36px; height:36px; border:0; border-radius:50%; background:var(--text); color:var(--bg); display:grid; place-items:center; }
.tr-main svg{ width:14px; height:14px; fill:currentColor; }
.tr-main:hover{ opacity:.85; }
.tr-main.pulse{ background:var(--ng); }
.np-steps{ display:flex; gap:3px; font-family:var(--mono); font-size:11.5px; max-width:44vw; overflow:hidden; min-height:18px; }
.np-steps span{ padding:0 6px; border-radius:4px; color:var(--sub); white-space:nowrap; }
.np-steps span.cur{ background:var(--accent); color:#fff; }
.player .opts{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.player .opts input[type=range]{ width:110px; accent-color:var(--text); }
.menu-wrap{ position:relative; }
.menu{ position:absolute; right:0; bottom:44px; width:250px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; gap:12px; }
.menu label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--sub); }
.menu select{ height:32px; border:1px solid var(--line2); border-radius:6px; background:var(--surface); padding:0 6px; color:var(--text); font-size:13px; }
.menu .btn{ align-self:flex-start; }
.menu-status{ font-size:12px; line-height:1.6; color:var(--sub); }
.lesson-print{ margin-left:18px; }
.skip-link{ position:absolute; left:8px; top:-48px; z-index:200; background:var(--surface); color:var(--accent); border:1px solid var(--line2); border-radius:6px; padding:8px 14px; font-size:13px; text-decoration:none; }
.skip-link:focus{ top:8px; }
#mainScroll:focus{ outline:0; }

/* =========================================================
   共通部品
   ========================================================= */
.page-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.page-top h1, .page-head h2, .learn-header h2, .list-panel h2{ font-size:26px; font-weight:700; margin:0; letter-spacing:.01em; line-height:1.3; }
.page-date{ color:var(--sub); font-size:13px; }
.page-head{ margin-bottom:20px; }
.page-head h2{ margin-bottom:6px; }
.page-lead, .learn-lead{ margin:0; color:var(--sub); font-size:14px; max-width:46em; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:28px 0 12px; }
.sec-head h2{ font-size:17px; margin:0; font-weight:700; }
.link-btn{ border:0; background:none; padding:0; color:var(--accent); font-size:13px; }
.link-btn:hover{ text-decoration:underline; }
.muted{ color:var(--sub); font-size:13px; }
.mono{ font-family:var(--mono); font-size:12.5px; color:var(--sub); }

.subnav{ display:flex; gap:4px; flex-wrap:wrap; margin:0 0 18px; padding:3px; background:var(--surface-2); border-radius:9px; width:max-content; max-width:100%; }
.subnav button{ border:0; background:none; padding:6px 14px; border-radius:7px; font-size:13.5px; color:var(--sub); white-space:nowrap; }
.subnav button:hover{ color:var(--text); }
.subnav button.active{ background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
body.theme-dark .subnav button.active{ background:#3a3a3c; }

.toolbar{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field > span{ font-size:12px; color:var(--sub); }
.field.inline{ flex-direction:row; align-items:center; gap:8px; }
.ctl{ height:34px; padding:0 10px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); font-size:13.5px; }
.ctl:hover{ border-color:var(--faint); }
.ctl:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
textarea.ctl{ height:auto; padding:10px; line-height:1.7; width:100%; resize:vertical; }
input.ctl[type=search], input.ctl[type=text]{ min-width:200px; }
input[type=range], input[type=checkbox]{ accent-color:var(--accent); }

.paper{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.paper + .paper{ margin-top:16px; }
.paper h3{ font-size:19px; margin:0 0 6px; }
.paper h4{ font-size:13px; font-weight:600; color:var(--sub); margin:20px 0 8px; }
.paper h4:first-child{ margin-top:0; }
.paper p{ margin:0 0 10px; }

.btn, .pill-btn, .visual-play{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 16px; border-radius:17px; border:1px solid transparent; background:var(--text); color:var(--bg); font-size:13.5px; font-weight:600; white-space:nowrap; }
.btn:hover, .pill-btn:hover, .visual-play:hover{ opacity:.86; }
.btn svg, .visual-play svg{ width:13px; height:13px; fill:currentColor; }
.btn.ghost, .pill-btn{ background:var(--surface-2); color:var(--text); }
.btn.ghost:hover, .pill-btn:hover{ background:var(--hover); opacity:1; }
.btn.small, .pill-btn{ height:30px; padding:0 13px; font-size:12.5px; }
.btn.brass{ background:var(--accent); color:#fff; }
.btn[disabled], .pill-btn[disabled]{ opacity:.4; cursor:default; }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
.visual-play{ margin-top:12px; }
.visual-play::before{ content:""; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; }
.text-link, .text-link-btn{ border:0; background:none; padding:0; color:var(--accent); font-size:13.5px; }
.text-link:hover, .text-link-btn:hover{ text-decoration:underline; }
.text-link-btn{ display:inline-block; margin-top:16px; }
.back-btn{ border:0; background:none; padding:0 0 14px; color:var(--accent); font-size:13.5px; }
.back-btn:hover{ text-decoration:underline; }

.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ height:30px; padding:0 12px; border-radius:15px; border:1px solid var(--line2); background:var(--surface); font-size:13px; white-space:nowrap; }
.chip:hover{ border-color:var(--faint); }
.chip.active, .chip.on-ink.active{ background:var(--text); border-color:var(--text); color:var(--bg); }
.chip.fav-on{ border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.fn-badge{ display:inline-block; min-width:18px; padding:0 5px; border-radius:4px; font-size:11px; font-weight:700; line-height:17px; text-align:center; color:#fff; background:var(--fn-x); }
.fn-T{ background:var(--fn-t); } .fn-S{ background:var(--fn-s); } .fn-D{ background:var(--fn-d); } .fn-X{ background:var(--fn-x); }

.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th, .table td{ padding:8px 10px 8px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th{ font-size:12px; font-weight:500; color:var(--sub); }

.toast{ position:fixed; left:50%; bottom:calc(var(--player-h) + 16px); transform:translate(-50%, 8px); background:var(--text); color:var(--bg); padding:8px 16px; border-radius:18px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:200; }
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.lv-badge{ font-size:11.5px; color:var(--sub); white-space:nowrap; border:1px solid var(--line2); border-radius:10px; padding:0 7px; }
.lv-badge.lv3{ color:var(--fn-d); border-color:currentColor; }
.empty-state{ padding:40px 0; color:var(--sub); text-align:center; }
mark.hl{ background:var(--mark); color:inherit; border-radius:2px; padding:0 1px; }

/* =========================================================
   ホーム
   ========================================================= */
.welcome{ margin:0 0 6px; color:var(--sub); max-width:52em; }
.shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
.course-tile{ border:0; background:none; padding:0; text-align:left; color:var(--text); }
.course-tile .thumb{ aspect-ratio:4/3; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); overflow:hidden; margin-bottom:8px; }
.course-tile .thumb svg{ width:100%; height:100%; display:block; }
.course-tile:hover .thumb{ border-color:var(--line2); }
.course-tile:hover b{ text-decoration:underline; }
.course-tile b{ display:block; font-size:14px; }
.course-tile span{ font-size:12.5px; color:var(--sub); }
.course-tile .bar{ height:3px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden; }
.course-tile .bar i{ display:block; height:100%; background:var(--accent); }
.th-line{ stroke:var(--line2); } .th-ink{ fill:var(--text); } .th-white{ fill:var(--key-white); stroke:var(--line2); } .th-on{ fill:var(--key-on); stroke:var(--line2); }
.th-mid{ fill:var(--faint); } .th-line-fill{ fill:var(--line); } .th-ring{ stroke:var(--line2); } .th-arc{ stroke:var(--accent); }

table.tracks{ width:100%; border-collapse:collapse; }
table.tracks th{ text-align:left; font-weight:500; font-size:12px; color:var(--sub); padding:6px 10px; border-bottom:1px solid var(--line); }
table.tracks td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.track-row:hover td{ background:var(--hover); }
.track-row .num{ width:44px; text-align:center; color:var(--sub); font-variant-numeric:tabular-nums; }
.row-play{ display:none; width:28px; height:28px; border:0; border-radius:50%; background:var(--text); color:var(--bg); place-items:center; margin:0 auto; }
.row-play svg{ width:12px; height:12px; fill:currentColor; }
.track-row:hover .n, .track-row:focus-within .n{ display:none; }
.track-row:hover .row-play, .track-row:focus-within .row-play{ display:grid; }
.row-title{ border:0; background:none; padding:0; font-weight:600; color:var(--text); text-align:left; }
.row-title:hover{ text-decoration:underline; }
td small{ display:block; font-size:12.5px; color:var(--sub); }
.home-two{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; }
.card{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.card-label{ font-size:12px; color:var(--sub); }
.card h3{ font-size:21px; margin:2px 0 0; }
.card-read{ font-size:12.5px; color:var(--sub); margin-bottom:8px; }
.card p{ margin:0 0 12px; }
.card-kb .mini-keyboard{ max-width:340px; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stats button{ border:0; background:var(--surface); padding:14px 16px; text-align:left; }
.stats button:hover{ background:var(--hover); }
.stats b{ display:block; font-size:13.5px; }
.stats span{ font-size:12.5px; color:var(--sub); }
.meter{ height:3px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden; }
.meter i{ display:block; height:100%; background:var(--text); }

/* =========================================================
   用語辞典
   ========================================================= */
#glossaryMain{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; }
.glossary-aside{ position:sticky; top:0; align-self:start; padding-top:6px; }
.search-count{ font-size:12.5px; color:var(--sub); margin-bottom:12px; }
.level-filter{ display:flex; padding:3px; background:var(--surface-2); border-radius:8px; margin-bottom:16px; }
.level-filter button{ flex:1; border:0; background:none; border-radius:6px; padding:4px 0; font-size:12.5px; color:var(--sub); }
.level-filter button.active{ background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
body.theme-dark .level-filter button.active{ background:#3a3a3c; }
.cat-list{ list-style:none; margin:0; padding:0; }
.cat-list li button{ width:100%; display:flex; justify-content:space-between; gap:8px; border:0; background:none; border-radius:6px; padding:5px 8px; text-align:left; font-size:13.5px; color:var(--text); }
.cat-list li button:hover{ background:var(--hover); }
.cat-list li button.active{ background:var(--accent-bg); color:var(--accent); font-weight:600; }
.cat-list li button .n{ color:var(--sub); font-size:12px; font-weight:400; }
.cat-sep{ height:1px; background:var(--line); margin:8px 0; }
.list-tools{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.list-tools .lt-right{ display:flex; gap:8px; align-items:center; }
.term-grid{ border-top:1px solid var(--line); }
.term-card{ display:flex; justify-content:space-between; gap:16px; padding:12px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.term-card:hover{ background:var(--hover); }
.term-card:focus-visible{ outline-offset:-2px; }
.t-main{ min-width:0; flex:1; }
.t-title{ font-size:15.5px; font-weight:600; }
.t-reading{ font-size:12.5px; color:var(--sub); }
.t-excerpt{ font-size:13px; color:var(--sub); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-side{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.t-tag{ font-size:12px; color:var(--sub); white-space:nowrap; }
.t-badge{ font-size:11.5px; color:var(--accent); white-space:nowrap; }
.t-fav{ color:var(--accent); }
.mark-body{ margin-left:8px; font-size:11.5px; font-weight:400; color:var(--sub); }

/* ---------- 用語の詳細パネル(右から開く。下のプレーヤーは隠さない) ---------- */
.detail-overlay{ position:fixed; left:0; right:0; top:0; bottom:var(--player-h); z-index:50; background:rgba(0,0,0,.18); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s, visibility .18s; }
.detail-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
.detail-paper{ position:absolute; top:0; right:0; bottom:0; width:min(720px, 94vw); overflow-y:auto; background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow); padding:22px 36px 48px; transform:translateX(24px); transition:transform .2s ease; }
.detail-overlay.show .detail-paper{ transform:none; }
.detail-paper:focus{ outline:0; }
.detail-close{ position:sticky; top:0; float:right; z-index:2; width:32px; height:32px; margin:0 -12px 0 0; border:0; border-radius:50%; background:var(--surface-2); font-size:18px; line-height:1; color:var(--sub); }
.detail-close:hover{ background:var(--hover); color:var(--text); }

/* ---------- ピアノロール(上から降ってくる形式)のビューア ---------- */
.roll-paper{ width:min(1100px, 96vw); }
.roll-toolbar{ margin:6px 0 10px; }
.roll-settings{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end; padding:10px 14px; margin-bottom:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; }
.roll-set-group{ display:flex; flex-direction:column; gap:6px; }
.roll-set-label{ font-size:12px; color:var(--sub); }
.roll-track-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.roll-track-chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 8px; border:1px solid var(--line2); border-radius:14px; background:var(--surface); font-size:12.5px; cursor:pointer; }
.roll-track-chip input{ margin:0; }
.roll-track-chip .rtc-dot{ width:9px; height:9px; border-radius:50%; background:var(--rc); flex:none; }
.roll-track-chip:has(input:not(:checked)){ opacity:.45; }
.roll-body{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2); }
.roll-viewport{ position:relative; overflow:hidden; }
.score-body{ overflow:hidden; }
.score-scroll{ overflow-x:auto; overflow-y:hidden; padding:14px 10px; }
.score-scroll .piano-score{ display:block; }
.score-body-page{ overflow:visible; background:none; border:0; }
.score-pages{ display:flex; justify-content:center; padding:14px; }
.score-page-wrap{ width:100%; max-width:480px; aspect-ratio:1080/1440; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.14); overflow:hidden; }
.score-page-wrap[hidden]{ display:none; }
.score-page-wrap .piano-score-page{ display:block; width:100%; height:100%; }
.score-page-nav{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 0 2px; }
.score-page-nav span{ font-size:12.5px; color:var(--sub); min-width:80px; text-align:center; }
/* 「楽譜の表示サイズを変更」モーダル(段階的開示。ふだんは設定パネルに出さず、ボタンで開く) */
.score-size-overlay{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; padding:16px; }
.score-size-overlay[hidden]{ display:none; }
.score-size-modal{ width:min(380px, 100%); max-height:86vh; overflow-y:auto; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:20px 22px; position:relative; }
.score-size-modal:focus{ outline:0; }
.score-size-title{ margin:0 0 14px; font-size:15px; }
.score-size-modal .roll-set-group{ margin-bottom:14px; }
.score-size-modal .roll-set-group:last-child{ margin-bottom:0; }
.mini-staff .score-brace{ fill:none; stroke:var(--text); stroke-width:2.5; stroke-linecap:round; }
.mini-staff .score-final-bar{ stroke:var(--text); stroke-width:2; }
.roll-notes{ position:absolute; inset:0; will-change:transform; }
.roll-track[hidden]{ display:none; }
.roll-note{ position:absolute; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:4px; background:var(--rc); color:#fff; font-size:10px; line-height:1; padding:0 1px; overflow:visible; white-space:nowrap; }
.roll-nowline{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); }
.roll-keyboard{ padding:2px 0 4px; background:var(--surface); border-top:1px solid var(--line); }
.roll-keyboard .mini-keyboard{ max-width:none; }
.detail-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; margin:0 40px 12px 0; }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; font-size:12.5px; color:var(--sub); flex:1; min-width:0; }
.breadcrumb-item{ border:0; background:none; padding:1px 3px; font-size:12.5px; color:var(--accent); }
.breadcrumb-item.current{ color:var(--text); font-weight:600; cursor:default; }
.breadcrumb-sep{ color:var(--faint); }
.detail-nav{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.nav-btn{ width:30px; height:30px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); font-size:15px; line-height:1; color:var(--text); }
.nav-btn:hover:not(:disabled){ background:var(--hover); }
.nav-btn:disabled{ opacity:.35; cursor:default; }
.nav-pos{ font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; }
.detail-cat{ font-size:12.5px; color:var(--sub); margin-right:8px; }
.term-title{ font-size:30px; font-weight:700; line-height:1.3; margin:4px 0 2px; }
.detail-reading{ font-size:13px; color:var(--sub); }
.detail-en{ font-size:13px; color:var(--sub); }
.detail-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.detail-body{ margin-top:16px; font-size:15.5px; line-height:1.95; white-space:pre-line; }
.term-link{ border:0; background:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; }
.term-link:hover{ text-decoration:underline; }
.related-block, .learn-links{ margin-top:26px; padding-top:14px; border-top:1px solid var(--line); }
.related-block h4, .learn-links h4{ margin:0 0 10px; font-size:13px; font-weight:600; color:var(--sub); }
.related-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.related-chip{ height:30px; padding:0 12px; border-radius:15px; border:1px solid var(--line2); background:var(--surface); font-size:13px; }
.related-chip:hover{ border-color:var(--accent); color:var(--accent); }
.term-tip{ position:fixed; z-index:300; width:260px; max-width:calc(100vw - 16px); padding:10px 12px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); font-size:12.5px; line-height:1.55; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .12s; }
.term-tip.show{ opacity:1; visibility:visible; }
.term-tip .tt-cat{ font-size:11px; color:var(--sub); margin-bottom:2px; }
.term-tip .tt-name{ font-size:14px; font-weight:700; margin-bottom:4px; }
.term-tip .tt-read{ margin-left:8px; font-size:11px; font-weight:400; color:var(--sub); }
.term-tip .tt-body{ color:var(--text); }
.staff-lines{ display:none; }

/* ---------- 図(鍵盤・五線・進行など) ---------- */
.visual-card{ margin-top:18px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; }
.visual-card h4{ margin:0 0 10px; font-size:13px; font-weight:600; color:var(--sub); }
.visual-hint{ font-weight:400; margin-left:6px; font-size:12px; }
.mini-keyboard{ display:block; max-width:320px; height:auto; }
.mini-keyboard .key{ transition:fill .08s; }
.mini-keyboard .key.white{ fill:var(--key-white); stroke:var(--key-edge); stroke-width:1; }
.mini-keyboard .key.black{ fill:var(--key-black); }
.mini-keyboard .key.white.active{ fill:var(--key-on); }
.mini-keyboard .key.black.active{ fill:var(--key-on-black); }
.mini-keyboard .key.active.root{ fill:var(--accent); }
.mini-keyboard .key.playing{ fill:var(--mark) !important; stroke:var(--accent); stroke-width:2; }
/* 弾き直しの点滅は JS 側で一定時間だけ .strike クラスを付け外しする、瞬時の切り替え(CSSアニメーションではない)。
   OS の「視差効果を減らす」設定(prefers-reduced-motion)で animation が無効化されても、機能として必ず見える。
   .active の色を一瞬だけ普段の(鳴っていない)鍵の色に戻すことで、OFF→ON のはっきりした点滅にする。 */
.mini-keyboard .key.white.strike{ fill:var(--key-white); }
.mini-keyboard .key.black.strike{ fill:var(--key-black); }
.mini-keyboard .key-label{ font-size:10px; fill:#1d1d1f; pointer-events:none; font-family:var(--font); }
.mini-keyboard .key-label.root-label, .mini-keyboard .key-label.black-label{ fill:#fff; }
.mini-keyboard .key-label.black-label{ font-size:8.5px; }
.mini-keyboard.buildable .key{ cursor:pointer; }
.mini-keyboard.buildable .key:hover{ opacity:.8; }
.mini-staff{ display:block; margin-top:10px; }
.mini-staff .staff-line-svg, .mini-staff .ledger{ stroke:var(--faint); stroke-width:1; }
.mini-staff .clef-real{ fill:var(--text); fill-rule:evenodd; }
.mini-staff .notehead, .mini-staff .accidental, .mini-staff .dot, .mini-staff .rest-glyph, .mini-staff .flag-glyph, .mini-staff .accent-glyph{ fill:var(--text); }
.mini-staff .stem{ stroke:var(--text); stroke-width:1.3; }
.mini-staff .notehead.hollow{ fill:var(--bg); stroke:var(--text); stroke-width:1.4; }
.mini-staff .flag, .mini-staff .tie-arc{ fill:none; stroke:var(--text); stroke-width:1.4; stroke-linecap:round; }
.mini-staff .slur-arc{ fill:none; stroke:var(--text); stroke-width:1.1; stroke-dasharray:3 2; }
.mini-staff .note-label{ fill:var(--sub); font-family:var(--font); }
.mini-staff .time-sig-num{ fill:var(--text); font-family:var(--font); font-weight:700; font-size:19px; }
.mini-staff .score-note-label{ fill:var(--sub); font-family:var(--font); font-size:10.5px; }
.mini-staff .score-chord-sym{ fill:var(--text); font-family:var(--font); font-weight:700; font-size:13px; }
.mini-staff .score-bar-num{ fill:var(--sub); font-family:var(--font); font-size:11px; }
.mini-staff .score-page-title{ fill:var(--text); font-family:var(--font); font-weight:700; font-size:24px; }
.mini-staff .score-page-composer{ fill:var(--sub); font-family:var(--font); font-size:13px; }
.mini-staff .score-page-num{ fill:var(--sub); font-family:var(--font); font-size:12px; }
.mini-staff .score-playhead{ stroke:var(--accent); stroke-width:1.6; opacity:.55; pointer-events:none; }
.mini-staff .notehead-group.playing .notehead, .mini-staff .notehead-group.playing .accidental, .mini-staff .notehead-group.playing .flag-glyph, .mini-staff .notehead-group.playing .accent-glyph, .mini-staff .notehead-group.playing .rest-glyph{ fill:var(--accent); }
.mini-staff .notehead-group.playing .stem{ stroke:var(--accent); }
.mini-staff .notehead-group.playing .score-note-label{ fill:var(--accent); }
svg .notehead.playing, svg .accidental.playing{ fill:var(--accent) !important; }
.fig [data-fig-step].playing:not(g){ background:var(--accent-bg); box-shadow:0 0 0 2px var(--accent); border-radius:6px; }
.fig-svg g[data-fig-step].playing .fg-cell{ fill:var(--mark); stroke:var(--accent); stroke-width:1.6; }
.fig-svg g[data-fig-step].playing text{ fill:var(--accent); }
.fig-svg g[data-t2n].playing .fg-cell{ fill:var(--mark); stroke:var(--accent); stroke-width:1.6; }
.fig-svg g[data-t2n].playing circle:not(.dot){ fill:var(--accent); }
.fig-svg g[data-t2n].playing .t2-rollnote{ stroke:var(--text); stroke-width:2; opacity:1; }
.fig-svg .fg-key.playing{ fill:var(--mark) !important; stroke:var(--accent); stroke-width:2; }
.mini-staff .notehead-group.playing .dot{ fill:var(--accent); }
.chord-sequence{ display:flex; flex-wrap:wrap; gap:12px; }
.chord-step{ display:flex; flex-direction:column; gap:4px; max-width:210px; padding:6px; border-radius:8px; border:1px solid transparent; transition:border-color .12s, background .12s; }
.chord-step.playing{ border-color:var(--accent); background:var(--accent-bg); }
.chord-step-label{ font-size:13.5px; font-weight:600; }
.rhythm-row{ margin-bottom:14px; }
.rhythm-row-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.rhythm-label{ font-size:13.5px; }
.rhythm-play{ height:28px; padding:0 12px; border:1px solid var(--line2); border-radius:14px; background:var(--surface); font-size:12.5px; }
.rhythm-play:hover{ background:var(--hover); }
.rhythm-steps{ display:flex; gap:3px; align-items:flex-end; }
.rhythm-steps .step{ flex:1; height:8px; border-radius:2px; background:var(--line); }
.rhythm-steps .step.s1{ height:18px; background:var(--faint); }
.rhythm-steps .step.s2{ height:30px; background:var(--text); }
.rhythm-steps .step.playing{ background:var(--accent); }
.related-graph{ display:block; margin-top:16px; max-width:200px; }
.related-graph .graph-edge{ stroke:var(--line2); }
.related-graph .graph-node circle{ fill:var(--surface); stroke:var(--line2); cursor:pointer; }
.related-graph .graph-node:hover circle{ stroke:var(--accent); }
.related-graph .graph-node text{ font-size:10.5px; fill:var(--text); pointer-events:none; }
.related-graph circle.center{ fill:var(--text); }
.related-graph .center-text{ fill:var(--bg); font-weight:700; }
.compare-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compare-side{ border:1px solid var(--line); border-radius:10px; padding:12px; min-width:0; }
.compare-label{ font-size:13px; font-weight:600; margin-bottom:8px; }
.explainer-text{ font-size:14.5px; margin:0 0 12px; }
.explainer-controls{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.explainer-pos{ font-size:12px; color:var(--sub); }
.builder-feedback{ margin-top:10px; font-size:13px; color:var(--sub); min-height:20px; }
.builder-feedback.correct{ color:var(--ok); font-weight:600; }
.builder-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.chord-explorer-section-label{ font-size:12px; color:var(--sub); margin:12px 0 6px; }
.chord-explorer-root-row, .chord-explorer-quality-row{ display:flex; flex-wrap:wrap; gap:5px; }
.chord-explorer-root, .chord-explorer-quality{ height:30px; padding:0 11px; border:1px solid var(--line2); border-radius:15px; background:var(--surface); font-size:13px; }
.chord-explorer-root{ min-width:40px; }
.chord-explorer-root:hover, .chord-explorer-quality:hover{ border-color:var(--faint); }
.chord-explorer-root.active, .chord-explorer-quality.active{ background:var(--text); border-color:var(--text); color:var(--bg); }
.chord-explorer-name{ font-size:30px; font-weight:700; margin:12px 0 6px; }
.key-explore-result{ margin-top:14px; }
.key-explore-label{ font-size:13px; font-weight:600; margin-bottom:8px; }

/* ---------- 楽譜と鍵盤の並べ表示・音の情報 ---------- */
.notation-pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px 22px; align-items:center; }
.notation-pair .mini-keyboard{ max-width:none; }
.notation-pair .mini-staff{ margin-top:0; }
.mini-staff .perc-clef{ fill:var(--text); }
.mini-staff .accent-mark-glyph{ fill:var(--text); font-family:var(--font); }
.rhythm-notation{ margin-top:4px; overflow-x:auto; }
.rhythm-notation .mini-staff{ min-width:260px; max-width:560px; height:86px; }
.note-info{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line2); font-size:13.5px; }
.ni-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.ni-row b{ font-size:16px; }
.ni-row span{ color:var(--sub); font-size:12.5px; }
.ni-note{ margin:8px 0 0; color:var(--sub); font-size:12.5px; line-height:1.7; }
.info-table{ border-collapse:collapse; font-size:13px; }
.info-table th, .info-table td{ padding:4px 16px 4px 0; text-align:left; border-bottom:1px solid var(--line); }
.info-table th{ font-weight:500; color:var(--sub); font-size:12px; }
.note-line{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 0; }
.note-line .nc{ display:inline-flex; flex-direction:column; align-items:center; min-width:34px; padding:3px 6px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); }
.note-line .nc b{ font-size:14px; }
.note-line .nc small{ font-size:10.5px; color:var(--sub); }
.note-line .ns{ font-size:11px; color:var(--sub); padding:0 5px; }
.note-line .ns.half{ color:var(--accent); font-weight:700; }

/* =========================================================
   理論を学ぶ
   ========================================================= */
.learn-header{ margin-bottom:22px; }
.learn-header h2{ margin-bottom:6px; }
.overall-progress{ display:flex; align-items:center; gap:12px; margin-top:14px; max-width:620px; }
.overall-progress-bar{ flex:1; height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.overall-progress-fill{ height:100%; background:var(--accent); border-radius:3px; transition:width .2s; }
.overall-progress-label{ font-size:12.5px; color:var(--sub); white-space:nowrap; font-variant-numeric:tabular-nums; }
.continue-card{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--surface-2); }
.continue-card .cc-label{ font-size:12.5px; color:var(--sub); }
.continue-card .cc-title{ font-size:16px; font-weight:700; }
.stage-title{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:26px 0 8px; font-size:17px; }
.stage-title .stage-no{ font-size:12px; font-weight:500; color:var(--sub); }
.stage-title small{ font-size:12.5px; font-weight:400; color:var(--sub); }
.unit-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.unit-card{ display:flex; flex-direction:column; gap:4px; text-align:left; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface); color:var(--text); }
.unit-card:hover{ border-color:var(--line2); background:var(--hover); }
.unit-card-title{ font-size:15px; margin:0; }
.unit-card-desc{ font-size:12.5px; color:var(--sub); margin:0; line-height:1.6; flex:1; }
.unit-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.unit-card-progress{ font-size:12px; color:var(--sub); }
.unit-card-badge{ font-size:11.5px; color:var(--ok); font-weight:600; }
.unit-card-bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.unit-card-bar i{ display:block; height:100%; background:var(--accent); }
.unit-title{ font-size:24px; margin:0 0 4px; }
.unit-desc{ color:var(--sub); margin:0 0 18px; }
.course-list{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.course-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); }
.course-row:last-child{ border-bottom:0; }
.course-row-main{ display:flex; align-items:center; gap:14px; min-width:0; }
.course-status{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:2px solid var(--line2); font-size:0; position:relative; }
.course-status-clear{ background:var(--ok); border-color:var(--ok); }
.course-status-clear::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.course-status-retry{ border-color:var(--fn-s); }
.course-title{ font-size:14.5px; font-weight:600; }
.course-terms{ font-size:12.5px; color:var(--sub); }

.phase-stepper{ display:flex; gap:16px; margin-bottom:8px; font-size:12.5px; color:var(--sub); }
.phase-step.active{ color:var(--text); font-weight:600; }
.course-progress-bar{ height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:18px; max-width:760px; }
.course-progress-fill{ height:100%; background:var(--ok); border-radius:3px; transition:width .25s; }
.lesson-card, .quiz-card, .course-done-card{ max-width:760px; border:1px solid var(--line); border-radius:14px; padding:28px 32px; background:var(--surface); }
.lesson-pos{ font-size:12.5px; color:var(--sub); }
.lesson-body{ font-size:15.5px; line-height:1.95; margin-top:10px; }
.lesson-body p{ margin:0 0 12px; }
.lesson-body b{ font-weight:700; }
.lesson-nav{ display:flex; justify-content:space-between; align-items:center; max-width:760px; margin-top:16px; position:sticky; bottom:0; padding:10px 0; background:linear-gradient(to top, var(--bg) 70%, transparent); }
.lesson-nav .btn{ height:40px; padding:0 22px; border-radius:20px; }
.quiz-progress{ font-size:12.5px; color:var(--sub); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.quiz-question-text{ font-size:19px; font-weight:700; line-height:1.5; margin:2px 0 14px; }
.quiz-choices{ display:grid; gap:8px; margin-top:16px; }
.quiz-choice-btn{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:2px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface); font-size:15px; }
.quiz-choice-btn:hover:not(:disabled){ border-color:var(--line2); }
.quiz-choice-btn:disabled{ cursor:default; }
.quiz-choice-btn .qk{ width:24px; height:24px; border:1px solid var(--line2); border-radius:6px; display:inline-grid; place-items:center; font-size:12px; color:var(--sub); flex-shrink:0; margin:0; }
.quiz-choice-btn.correct{ border-color:var(--ok); background:var(--ok-bg); }
.quiz-choice-btn.wrong{ border-color:var(--ng); background:var(--ng-bg); }
.quiz-feedback{ margin-top:14px; padding:12px 14px; border-radius:10px; font-size:14px; }
.quiz-feedback:empty{ display:none; }
.quiz-feedback.correct{ background:var(--ok-bg); color:var(--ok); }
.quiz-feedback.wrong{ background:var(--ng-bg); color:var(--ng); }
.quiz-key-hint{ margin-top:12px; font-size:12px; color:var(--sub); }
/* 図つき・鍵盤・並べ替え・複数選択の問題 */
.quiz-fig{ margin:4px 0 6px; padding:8px 12px 6px; border:1px solid var(--line); border-radius:10px; background:var(--paper, #fff); color:var(--text-on-paper, var(--text)); }
.quiz-fig .mini-staff, .quiz-fig .mini-keyboard{ margin-top:0; }
.quiz-fig.small{ margin:6px 0 2px; padding:4px 8px 2px; max-width:300px; }
.quiz-choice-btn .qc{ flex:1; min-width:0; }
.quiz-choices.pics{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.quiz-choices.pics .quiz-choice-btn{ flex-direction:column; align-items:stretch; gap:6px; padding:8px 10px; }
.quiz-choices.pics .qk{ align-self:flex-start; }
.quiz-choices.pics .mini-staff{ margin-top:0; }
.quiz-choice-btn.sel{ border-color:var(--accent); background:var(--accent-bg); }
.quiz-multi-btn .qk::before{ content:""; width:10px; height:10px; border:1.5px solid var(--sub); border-radius:2px; display:block; }
.quiz-multi-btn.sel .qk::before, .quiz-multi-btn.correct .qk::before{ background:var(--accent); border-color:var(--accent); }
.quiz-multi-btn.correct .qk::before{ background:var(--ok); border-color:var(--ok); }
.quiz-multi-btn.wrong .qk::before{ background:var(--ng); border-color:var(--ng); }
.quiz-choice-btn.missed{ border-style:dashed; border-color:var(--ok); }
.quiz-submit{ margin-top:12px; }
.quiz-kb{ display:block; width:100%; max-width:440px; height:auto; margin-top:14px; touch-action:manipulation; }
.quiz-kb .qkey{ cursor:pointer; outline:none; }
.quiz-kb .qkey.white{ fill:var(--key-white); stroke:var(--key-edge); stroke-width:1; }
.quiz-kb .qkey.black{ fill:var(--key-black); }
.quiz-kb .qkey:hover{ opacity:.85; }
.quiz-kb .qkey:focus-visible{ stroke:var(--accent); stroke-width:3; }
.quiz-kb .qkey.sel.white{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:2; }
.quiz-kb .qkey.sel.black{ fill:var(--accent); }
.quiz-kb .qkey.correct.white{ fill:var(--ok-bg); stroke:var(--ok); stroke-width:2; }
.quiz-kb .qkey.correct.black{ fill:var(--ok); }
.quiz-kb .qkey.wrong.white{ fill:var(--ng-bg); stroke:var(--ng); stroke-width:2; }
.quiz-kb .qkey.wrong.black{ fill:var(--ng); }
.quiz-answer-keyboard .quiz-order-actions{ margin-top:12px; }
.quiz-namepad-acc, .quiz-namepad{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.quiz-pad{ min-width:56px; height:48px; padding:0 12px; border:2px solid var(--line); border-radius:12px; background:var(--surface); font-size:16px; font-weight:600; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; }
.quiz-pad small{ font-size:10.5px; font-weight:400; color:var(--sub); }
.quiz-pad:hover:not(:disabled){ border-color:var(--line2); }
.quiz-pad.acc{ height:36px; min-width:64px; font-size:14px; }
.quiz-pad.acc.on{ border-color:var(--accent); background:var(--accent-bg); }
.quiz-pad.correct{ border-color:var(--ok); background:var(--ok-bg); }
.quiz-pad.wrong{ border-color:var(--ng); background:var(--ng-bg); }
.quiz-pad:disabled{ cursor:default; }
.quiz-order-row, .quiz-order-pool{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.quiz-order-pool{ min-height:46px; padding:8px; border:1px dashed var(--line2); border-radius:10px; }
.quiz-order-slot{ min-width:64px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-2, var(--surface)); }
.quiz-order-slot > i{ font-style:normal; font-size:12px; color:var(--sub); }
.quiz-order-slot.filled{ background:transparent; border-style:solid; }
.quiz-chip{ min-height:40px; padding:6px 14px; border:2px solid var(--line); border-radius:10px; background:var(--surface); font-size:15px; }
.quiz-chip:hover:not(:disabled){ border-color:var(--line2); }
.quiz-chip.in-slot{ border-color:var(--accent); background:var(--accent-bg); }
.quiz-chip.correct{ border-color:var(--ok); background:var(--ok-bg); }
.quiz-chip.wrong{ border-color:var(--ng); background:var(--ng-bg); }
.quiz-chip:disabled{ cursor:default; }
.quiz-order-actions{ display:flex; gap:8px; margin-top:12px; }
.quiz-order-actions .quiz-submit{ margin-top:0; }
@media (max-width: 640px){
  .quiz-fig{ max-width:none; }
  .quiz-choices.pics{ gap:6px; }
}
.quiz-review{ margin:6px 0 0; padding-left:1.3em; font-size:14px; }
.quiz-review li{ margin-bottom:8px; }
.course-done-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* =========================================================
   コード進行
   ========================================================= */
.prog-grid{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.prog-card{ border-bottom:1px solid var(--line); }
.prog-card:last-child{ border-bottom:0; }
.prog-head{ display:flex; align-items:center; gap:14px; padding:12px 14px; }
.prog-head:hover{ background:var(--hover); }
.ph-main{ flex:1; min-width:0; cursor:pointer; }
.prog-name{ font-size:15px; font-weight:600; }
.prog-name small{ margin-left:8px; font-weight:400; font-size:12.5px; color:var(--sub); }
.prog-seq{ display:flex; flex-wrap:wrap; gap:2px 4px; margin-top:4px; align-items:baseline; }
.prog-seq .pc{ font-family:var(--mono); font-size:12.5px; padding:0 5px; border-radius:4px; }
.prog-seq .pc .deg{ margin-left:3px; font-size:10.5px; color:var(--sub); }
.prog-seq .pc.playing{ background:var(--accent); color:#fff; }
.prog-seq .pc.playing .deg{ color:#dbe7fb; }
.prog-seq .bar-sep{ color:var(--line2); }
.prog-tags{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; color:var(--sub); white-space:nowrap; }
.prog-play{ flex-shrink:0; width:34px; height:34px; border:0; border-radius:50%; background:var(--surface-2); color:var(--text); display:grid; place-items:center; font-size:0; }
.prog-play::before{ content:""; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; margin-left:3px; }
.prog-play:hover{ background:var(--text); color:var(--bg); }
.prog-play.on{ background:var(--accent); color:#fff; }
.prog-play.on::before{ border:0; width:10px; height:10px; background:currentColor; margin:0; border-radius:1px; }
.prog-body{ padding:0 14px 16px 62px; }
.prog-body .paper{ background:var(--surface-2); border:0; }
.prog-chords{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.prog-chords.hand-view{ flex-direction:column; flex-wrap:nowrap; }
.prog-chord{ width:150px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; }
.prog-chord.wide{ width:100%; max-width:560px; }
.prog-chord.wide .mini-keyboard{ max-width:520px; }
.prog-chord.focus{ max-width:760px; min-height:min(72vh, 620px); display:flex; flex-direction:column; justify-content:center; }
.prog-chord.focus .pch-name{ font-size:38px; }
.prog-chord.focus .pch-deg{ font-size:15px; }
.prog-chord.focus .mini-keyboard{ max-width:720px; }
.prog-chord.focus .hand-notes{ font-size:19px; }
.prog-chord:hover{ border-color:var(--line2); }
.prog-chord.playing{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
.prog-chord .pch-name{ font-size:17px; font-weight:700; }
.prog-chord .pch-deg{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sub); margin:1px 0 6px; }
.prog-chord .pch-inv{ font-size:12px; margin:-2px 0 8px; }
.prog-chord.focus .pch-inv{ font-size:15px; }
.hand-notes{ margin-top:8px; display:flex; flex-direction:column; gap:3px; font-size:14px; }
.hand-notes .muted{ display:inline-block; min-width:34px; margin-right:6px; }
.hand-notes sub{ font-size:70%; }
.maker-seq{ display:flex; flex-wrap:wrap; gap:8px; min-height:72px; padding:12px; border:1px dashed var(--line2); border-radius:10px; background:var(--surface-2); }
.maker-seq .empty{ align-self:center; color:var(--sub); font-size:13px; }
.maker-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:66px; padding:6px 10px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); cursor:pointer; }
.maker-item.playing{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
.maker-item b{ font-size:15px; }
.maker-item small{ font-size:11px; color:var(--sub); }
.maker-item .rm{ position:absolute; top:-8px; right:-8px; width:20px; height:20px; padding:0; border:1px solid var(--line2); border-radius:50%; background:var(--surface); font-size:11px; line-height:1; color:var(--sub); }
.maker-item .mk-beats{ display:flex; align-items:center; gap:4px; margin-top:4px; font-size:11px; color:var(--sub); }
.maker-item .mk-beats button{ width:20px; height:20px; padding:0; border:1px solid var(--line2); border-radius:6px; background:var(--surface); font-size:12px; line-height:1; color:var(--sub); cursor:pointer; }
.maker-item .mk-beats button:hover{ color:var(--accent); border-color:var(--accent); }
.maker-item .mk-beats span{ min-width:26px; text-align:center; }
.maker-item .rm:hover{ color:var(--ng); border-color:var(--ng); }
.palette-group{ margin-top:14px; }
.palette-group-title{ font-size:12.5px; color:var(--sub); margin-bottom:6px; }
.palette{ display:flex; flex-wrap:wrap; gap:6px; }
.palette-btn{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:66px; padding:7px 9px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); }
.palette-btn:hover{ border-color:var(--faint); background:var(--hover); }
.palette-btn b{ font-size:14px; }
.palette-btn small{ font-size:11px; color:var(--sub); }

/* =========================================================
   音階と和音・道具
   ========================================================= */
.tool-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.tool-grid .paper + .paper{ margin-top:0; }
.big-name{ font-size:28px; font-weight:700; line-height:1.3; margin:2px 0 6px; }
.degree-table, .diatonic-row{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.degree-cell, .diatonic-btn{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:48px; padding:6px 6px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); }
.diatonic-btn{ min-width:74px; }
.degree-cell:hover, .diatonic-btn:hover{ background:var(--hover); }
.degree-cell b, .diatonic-btn b{ font-size:14.5px; }
.degree-cell small, .diatonic-btn small{ font-size:11px; color:var(--sub); }
.degree-cell.playing{ border-color:var(--accent); background:var(--accent-bg); }
.step-row{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; font-size:12px; }
.step-row span{ padding:1px 7px; border-radius:4px; background:var(--surface-2); color:var(--sub); }
.step-row span.half{ background:var(--accent-bg); color:var(--accent); }
.big-circle{ display:block; width:100%; height:auto; max-width:640px; margin:0 auto; overflow:visible; }
.big-circle .seg{ cursor:pointer; }
.big-circle .seg.static{ cursor:default; }
.big-circle.compact{ max-width:300px; }
.big-circle .seg path{ fill:var(--surface); stroke:var(--line2); stroke-width:1; transition:fill .1s; }
.big-circle .seg.minor path{ fill:var(--surface-2); }
.big-circle .seg:hover path{ fill:var(--hover); }
.big-circle .seg.near path{ fill:var(--accent-bg); }
.big-circle .seg.active path{ fill:var(--accent); }
.big-circle .seg.active text, .big-circle .seg.active .sig-text{ fill:#fff; }
.big-circle text{ fill:var(--text); font-family:var(--font); pointer-events:none; }
.big-circle .sig-text{ font-size:9.5px; fill:var(--sub); }
.piano-wrap{ overflow-x:auto; padding-bottom:4px; }
.piano-big{ display:block; min-width:640px; width:100%; height:auto; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.piano-big .key{ cursor:pointer; }
.piano-big .key.white{ fill:var(--key-white); stroke:var(--key-edge); }
.piano-big .key.black{ fill:var(--key-black); }
.piano-big .key.white.down{ fill:var(--key-on); }
.piano-big .key.black.down{ fill:var(--key-on-black); }
.piano-big .key.white.sel{ fill:var(--accent); }
.piano-big .key.black.sel{ fill:var(--accent-2); }
.piano-big .kb-hint{ font-size:10px; fill:#8e8e93; pointer-events:none; font-family:var(--font); }
.piano-big .kb-hint.on-black{ fill:#aeaeb2; }
.piano-big .kb-name{ font-size:11px; fill:#1d1d1f; pointer-events:none; font-family:var(--font); }
.chord-guess{ font-size:28px; font-weight:700; min-height:42px; margin-top:12px; }
.chord-guess small{ margin-left:10px; font-size:13px; font-weight:400; color:var(--sub); }
.metro{ text-align:center; }
.metro-bpm{ font-size:72px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.metro-mark{ font-size:13px; color:var(--sub); margin:6px 0 14px; }
.beat-dots{ display:flex; justify-content:center; gap:12px; margin:18px 0; flex-wrap:wrap; }
.beat-dot{ width:16px; height:16px; border-radius:50%; background:var(--line); }
.beat-dot.accent{ box-shadow:0 0 0 2px var(--line2); }
.beat-dot.on{ background:var(--text); }
.beat-dot.accent.on{ background:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
.metro-controls{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 18px; margin-top:12px; text-align:left; }
.paper input[type=range]{ width:100%; }
.transpose-out{ font-family:var(--mono); font-size:17px; line-height:1.9; font-weight:600; background:var(--surface-2); border-radius:10px; padding:12px 14px; min-height:52px; word-break:break-word; }

/* =========================================================
   耳トレーニング
   ========================================================= */
.ear-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.ear-question .eq-prompt{ font-size:17px; font-weight:600; margin:6px 0 12px; }
.ear-answers{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin-top:16px; }
.ear-answer{ border:2px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface); text-align:left; font-size:14px; }
.ear-answer:hover:not(:disabled){ border-color:var(--line2); }
.ear-answer:disabled{ cursor:default; }
.ear-answer.correct{ border-color:var(--ok); background:var(--ok-bg); }
.ear-answer.wrong{ border-color:var(--ng); background:var(--ng-bg); }
.ear-feedback{ margin-top:14px; font-weight:600; font-size:14px; min-height:22px; }
.ear-feedback.correct{ color:var(--ok); }
.ear-feedback.wrong{ color:var(--ng); }
.ear-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:12px; }
.ear-stats div{ background:var(--surface); padding:10px 10px; }
.ear-stats b{ display:block; font-size:20px; font-variant-numeric:tabular-nums; }
.ear-stats span{ font-size:11.5px; color:var(--sub); }
.opt-list{ display:flex; flex-wrap:wrap; gap:4px 12px; }
.opt-list label{ display:flex; align-items:center; gap:5px; font-size:13px; cursor:pointer; }

/* =========================================================
   音楽史年表
   ========================================================= */
.timeline-wrap{ overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:12px; margin-bottom:20px; }
.timeline{ position:relative; min-width:1040px; padding:32px 12px 10px; overflow:hidden; }
.tl-axis{ position:absolute; top:8px; left:12px; right:12px; height:20px; }
.tl-tick{ position:absolute; top:0; font-size:11px; color:var(--sub); transform:translateX(-50%); font-variant-numeric:tabular-nums; }
.tl-tick::after{ content:""; position:absolute; left:50%; top:17px; width:1px; height:700px; background:var(--line); }
.tl-lane{ position:relative; margin-bottom:12px; }
.tl-lane-label{ position:sticky; left:0; z-index:2; display:inline-block; padding:0 8px 4px 0; font-size:12px; font-weight:600; background:var(--bg); }
.tl-lane-track{ position:relative; }
.tl-bar{ position:absolute; height:21px; padding:0 7px; border:1px solid var(--line2); border-radius:5px; background:var(--surface); font-size:11.5px; line-height:19px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-bar:hover{ background:var(--hover); }
.tl-bar.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tl-bar.lane-jazz{ border-left:3px solid var(--fn-x); }
.tl-bar.lane-popular{ border-left:3px solid var(--fn-d); }
.tl-bar.lane-japan{ border-left:3px solid var(--fn-t); }
.tl-bar.lane-classical{ border-left:3px solid var(--fn-s); }
.tl-bar.lane-world{ border-left:3px solid var(--sub); }
.era-list{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.era-index{ display:flex; flex-direction:column; position:sticky; top:0; max-height:calc(100vh - var(--player-h) - 20px); overflow-y:auto; }
.era-index .ei-lane{ font-size:12px; font-weight:600; color:var(--sub); padding:12px 8px 4px; }
.era-index .ei-lane:first-child{ padding-top:0; }
.era-index button{ display:flex; justify-content:space-between; gap:8px; border:0; background:none; border-radius:6px; padding:5px 8px; text-align:left; font-size:13.5px; color:var(--text); }
.era-index button:hover{ background:var(--hover); }
.era-index button.active{ background:var(--accent-bg); color:var(--accent); font-weight:600; }
.era-index button small{ font-size:11.5px; color:var(--sub); font-weight:400; }
.era-period{ font-size:13px; color:var(--sub); margin-bottom:10px; }
.era-features{ margin:0; padding-left:1.2em; }
.composer-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.composer{ border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; }
.composer b{ font-size:14px; }
.composer .years{ margin-left:6px; font-size:12px; color:var(--sub); }
.event-list{ list-style:none; margin:0; padding:0; font-size:14px; }
.event-list li{ display:flex; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.event-list li b{ min-width:48px; color:var(--accent); font-variant-numeric:tabular-nums; }

/* =========================================================
   スマホ・狭い画面
   ========================================================= */
@media (max-width:1100px){
  main{ padding:24px 28px 44px; }
  footer{ padding:0 28px 28px; }
  #glossaryMain{ grid-template-columns:180px minmax(0,1fr); gap:22px; }
}
@media (max-width:900px){
  :root{ --player-h:60px; }
  html, body{ height:auto; }
  .app{ display:block; height:auto; padding-bottom:var(--player-h); }
  .sidebar{ position:sticky; top:0; z-index:40; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px 0; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .brand{ padding:0; font-size:14px; }
  .brand .mk{ width:24px; height:24px; }
  .search-box{ flex:1; margin:0; min-width:0; }
  .search-kbd{ display:none; }
  nav.tabs{ width:calc(100% + 24px); display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin:4px -12px 0; padding:0 12px 8px; }
  nav.tabs::-webkit-scrollbar{ display:none; }
  .nav-group{ display:contents; }
  .nav-group h6, .saved-group, nav.tabs button svg, nav.tabs button .n{ display:none; }
  nav.tabs button{ width:auto; flex-shrink:0; padding:6px 12px; white-space:nowrap; border-radius:16px; }
  nav.tabs button.active{ background:var(--text); color:var(--bg); }
  .main-scroll{ overflow:visible; }
  main{ padding:18px 16px 32px; }
  footer{ padding:0 16px 24px; }
  .player{ position:fixed; left:0; right:0; bottom:0; height:var(--player-h); grid-template-columns:minmax(0,1fr) auto; padding:0 12px; gap:10px; }
  .player .opts{ display:none; }
  .np-steps{ display:none; }
  .player .art{ width:36px; height:36px; }
  #glossaryMain{ grid-template-columns:minmax(0,1fr); }
  .glossary-aside{ position:static; min-width:0; }
  .cat-list{ display:flex; overflow-x:auto; gap:4px; padding-bottom:6px; }
  .cat-list li{ flex-shrink:0; }
  .cat-list li button{ white-space:nowrap; gap:4px; }
  .cat-sep{ display:none; }
  .notation-pair{ grid-template-columns:minmax(0,1fr); }
  .home-two, .tool-grid, .ear-layout, .era-list, .compare-row{ grid-template-columns:minmax(0,1fr); }
  .era-index{ position:static; max-height:none; flex-direction:row; overflow-x:auto; }
  .era-index .ei-lane{ display:none; }
  .era-index button{ flex-shrink:0; white-space:nowrap; }
  table.tracks .hide-s{ display:none; }
  .track-row .n{ display:none; }
  .track-row .row-play{ display:grid; }
  .detail-paper{ width:100vw; padding:16px 16px 40px; border-left:0; }
  .term-title{ font-size:25px; }
  .prog-body{ padding:0 10px 14px; }
  .prog-tags{ display:none; }
  .prog-chord{ width:calc(50% - 5px); }
  .lesson-card, .quiz-card, .course-done-card, .paper{ padding:18px 16px; }
  .lesson-nav{ bottom:var(--player-h); }
  .page-top h1, .page-head h2, .learn-header h2, .list-panel h2{ font-size:22px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ---- 音楽史: リズムのループ再生・代表曲・できごと順 ---- */
.chip-gap{ flex:1 1 12px; }
.tag{ display:inline-block; border:1px solid var(--line2); border-radius:999px; padding:2px 10px; font-size:12.5px; color:var(--text); }
.el-list{ border-top:1px solid var(--line); }
.el-row{ display:grid; grid-template-columns:6.5em minmax(0,1fr); gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.el-row b{ font-size:13px; color:var(--sub); font-weight:600; }
.groove-list, .piece-list{ display:flex; flex-direction:column; gap:12px; }
.groove, .piece{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface); }
.groove.is-on, .piece.is-on{ border-color:var(--accent); }
.groove p, .piece p{ margin:6px 0 10px; font-size:14px; }
.groove-head, .piece-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.groove-head b, .piece-head b{ font-size:15px; }
.piece-tag{ margin-left:8px; border:1px solid var(--line2); border-radius:4px; padding:0 6px; font-size:11.5px; color:var(--sub); }
.piece-tag.orig{ color:var(--accent); border-color:var(--accent); }
.piece-ctl, .groove-ctl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.piece-ctl select{ font:inherit; font-size:13px; padding:4px 6px; border:1px solid var(--line2); border-radius:6px; background:var(--surface); color:var(--text); }
.tempo-ctl{ white-space:nowrap; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); }
.tempo-ctl input{ width:140px; }
.tempo-ctl output{ min-width:2.2em; text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }
.groove-grid{ display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.gr-row{ display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:8px; align-items:center; }
.gr-name{ font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-cells{ display:grid; grid-template-columns:repeat(var(--steps), minmax(0,1fr)); gap:2px; }
.gc{ display:block; height:16px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line); }
.gc.gc-b{ margin-left:2px; }
.gc.on{ background:var(--sub); border-color:var(--sub); opacity:.75; }
.gc.on.strong{ background:var(--accent); border-color:var(--accent); opacity:1; }
.gc.on.weak{ opacity:.4; }
.gc.now{ outline:2px solid var(--text); outline-offset:1px; }
.piece-roll{ margin-top:4px; }
.piano-roll{ width:100%; display:block; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; }
.pr-black{ fill:var(--line); opacity:.45; }
.pr-c, .pr-bar{ stroke:var(--line2); stroke-width:1; vector-effect:non-scaling-stroke; }
.pr-bar{ stroke-dasharray:2 3; }
.pr-note{ fill:var(--accent); }
.pr-note.pr-t1{ fill:var(--sub); }
.pr-note.pr-t2{ fill:var(--text); opacity:.6; }
.pr-head{ stroke:var(--text); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.ev-century{ font-size:13px; font-weight:600; color:var(--sub); margin:18px 0 4px; }
.ev-row{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.ev-row b{ color:var(--accent); font-variant-numeric:tabular-nums; }
@media (max-width:720px){
  .el-row{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .gr-row{ grid-template-columns:5.5em minmax(0,1fr); }
  .ev-row{ grid-template-columns:48px minmax(0,1fr); }
  .ev-row .chip{ grid-column:2; justify-self:start; }
  .tempo-ctl input{ width:110px; }
}

.mini-staff .beam, .mini-staff .tuplet-num{ fill:var(--text); }
.mini-staff .tuplet-br{ fill:none; stroke:var(--text); stroke-width:1; }

/* ---- 用語マップ ---- */
.map-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.map-search{ position:relative; flex:1 1 260px; max-width:380px; }
.map-search input{ width:100%; height:36px; padding:0 12px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:14px; }
.map-results{ position:absolute; top:40px; left:0; right:0; z-index:5; background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
.map-results button{ display:flex; justify-content:space-between; width:100%; padding:8px 12px; border:0; background:none; font-size:14px; text-align:left; color:var(--text); }
.map-results button:hover{ background:var(--hover); }
.map-results small{ color:var(--sub); font-size:12px; }
.map-zoom{ display:flex; gap:6px; }
.map-wrap{ position:relative; height:calc(100vh - var(--player-h) - 275px); min-height:420px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.map-wrap canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.map-panel{ position:absolute; top:12px; right:12px; width:290px; max-height:calc(100% - 24px); overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow); }
.map-panel h3{ font-size:19px; margin:2px 0; }
.map-panel h4{ font-size:12.5px; font-weight:600; color:var(--sub); margin:14px 0 6px; }
.map-panel p{ font-size:13.5px; margin:0 0 10px; }
.map-close{ position:absolute; top:6px; right:8px; border:0; background:none; font-size:20px; color:var(--sub); }
@media (max-width:720px){
  .map-wrap{ height:calc(100vh - var(--player-h) - 300px); min-height:360px; }
  .map-panel{ top:auto; bottom:0; left:0; right:0; width:auto; max-height:52%; border-radius:12px 12px 0 0; border-width:1px 0 0; }
}
.map-ctl{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.mc-row{ display:flex; gap:12px; align-items:baseline; }
.mc-label{ flex:0 0 4.5em; font-size:12px; font-weight:600; color:var(--sub); }
.mc-row .chip-row{ flex:1; }
.chip:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width:720px){ .mc-row{ flex-direction:column; gap:2px; } .mc-label{ flex-basis:auto; } }

.map-wrap .map-mini{ position:absolute; top:10px; left:10px; width:170px; height:112px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); cursor:crosshair; touch-action:none; cursor:crosshair; }
.map-banner{ position:absolute; left:192px; right:314px; top:10px; background:var(--bg); border:1px solid var(--accent); border-radius:10px; padding:10px 12px; font-size:13.5px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow); max-height:60%; overflow:auto; }
.map-banner .chip-row.inline{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; vertical-align:middle; }
.map-banner .arrow{ color:var(--sub); }
@media (max-width:720px){
  .map-wrap .map-mini{ width:120px; height:80px; }
  .map-banner{ left:136px; right:10px; top:10px; }
}

.seg{ display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden; }
.seg button{ border:0; background:var(--surface); padding:5px 12px; font-size:13px; color:var(--text); }
.seg button + button{ border-left:1px solid var(--line2); }
.seg button.active{ background:var(--text); color:var(--bg); }

/* 曲のコード進行(ピアノロールの上に、拍の位置をそろえて並べる) */
.chord-strip{ display:flex; margin:0 0 3px; font-size:12px; line-height:1.2; }
.cs-seg{ position:relative; min-width:0; padding:8px 2px 2px; text-align:center; border-top:1.5px solid var(--sub); white-space:nowrap; overflow:hidden; text-overflow:clip; color:var(--text); font-variant-numeric:tabular-nums; }
.cs-seg::before, .cs-seg::after{ content:""; position:absolute; top:0; width:1.5px; height:6px; background:var(--sub); }
.cs-seg::before{ left:0; } .cs-seg::after{ right:0; }
.cs-seg span{ position:relative; }
.cs-seg.cs-none{ border-top-color:transparent; } .cs-seg.cs-none::before, .cs-seg.cs-none::after{ display:none; }
.cs-seg.now{ background:var(--accent-bg); border-top-color:var(--accent); color:var(--accent); font-weight:600; }
.cs-seg.now::before, .cs-seg.now::after{ background:var(--accent); }

/* 小節番号と小節線 */
.piece-roll{ position:relative; }
.bar-layer{ position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; z-index:2; }
.bar-ruler{ position:relative; height:15px; font-size:10.5px; color:var(--sub); font-variant-numeric:tabular-nums; }
.bar-ruler span{ position:absolute; top:0; padding-left:3px; line-height:14px; }
.bar-lines i{ position:absolute; top:0; bottom:0; width:1px; background:var(--line2); opacity:.7; }
.bar-layer + .chord-strip{ margin-top:15px; }
.bar-layer + .piano-roll{ margin-top:15px; }

/* ---- このサイトについて(年表と同じ「左に目次・右に内容」の形) ---- */
.about-layout{ grid-template-columns:220px minmax(0,1fr); }
.about-index button{ font-size:13.5px; }
.about-body{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.about-card{ padding:36px 0 28px; line-height:1.85; scroll-margin-top:8px; background:none; border:0; border-radius:0; border-top:1px solid var(--line); }
.about-card:first-child{ border-top:0; padding-top:4px; }
.about-card + .about-card{ margin-top:0; }
.about-card h3{ font-size:22px; font-weight:700; letter-spacing:.01em; margin:0 0 14px; }
.about-card h4{ font-size:13px; font-weight:600; color:var(--sub); margin:26px 0 8px; }
.about-card p{ margin:0 0 12px; }
.about-card kbd{ font-family:inherit; font-size:.85em; border:1px solid var(--line2); border-bottom-width:2px; border-radius:4px; padding:0 6px; background:var(--surface-2); margin:0 2px; }
.about-card ul.check{ list-style:none; margin:10px 0 12px; padding:0; }
.about-card ul.check li{ padding:11px 0; border-top:1px solid var(--line); }
.about-card ul.check li:last-child{ border-bottom:1px solid var(--line); }
.steps{ list-style:none; counter-reset:st; margin:12px 0; padding:0; }
.steps > li{ counter-increment:st; display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:14px 0; border-top:1px solid var(--line); }
.steps > li:last-child{ border-bottom:1px solid var(--line); }
.steps > li::before{ content:counter(st); color:var(--sub); font-size:15px; font-variant-numeric:tabular-nums; text-align:right; padding-top:1px; }
.steps .btn-row{ margin-top:8px; }
.key-row{ display:flex; flex-wrap:wrap; gap:8px 22px; padding:4px 0 8px; font-size:13.5px; color:var(--sub); }
.tab-rows{ margin-top:8px; border-bottom:1px solid var(--line); }
.tab-row{ border-top:1px solid var(--line); background:none; }
.tab-row summary{ list-style:none; display:grid; grid-template-columns:22px 150px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 8px; cursor:pointer; border-radius:8px; }
.tab-row summary::-webkit-details-marker{ display:none; }
.tab-row summary:hover{ background:var(--hover); }
.tab-row[open] summary{ background:var(--hover); }
.tab-row svg.i{ width:20px; height:20px; fill:none; stroke:var(--text); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tr-name{ font-weight:700; font-size:14px; }
.tr-lead{ font-size:13px; color:var(--sub); line-height:1.6; }
.tab-row ul{ margin:0; padding:6px 18px 14px 58px; font-size:13.5px; line-height:1.8; }
.fig{ margin:18px 0 20px; padding:0; border:0; background:none; }
.fig svg{ display:block; width:100%; height:auto; }
.fig figcaption{ margin-top:10px; font-size:12.5px; color:var(--sub); }
.fig .f-box{ fill:var(--surface); stroke:var(--line2); stroke-width:1.2; }
.fig .f-box2{ fill:var(--surface-2); stroke:var(--line2); stroke-width:1; }
.fig .f-acc-box{ fill:var(--accent); }
.fig text{ fill:var(--text); font-family:inherit; }
.fig .f-num{ font-size:15px; font-weight:600; fill:var(--sub); }
.fig .f-big{ font-size:22px; font-weight:700; }
.fig .f-big-s{ font-size:15px; font-weight:700; }
.fig text.f-big-w, .fig text.f-sub-w, .fig text.f-tiny-w{ fill:#fff; }
.fig .f-big-w{ font-size:22px; font-weight:700; }
.fig .f-sub, .fig .f-sub-w{ font-size:12.5px; }
.fig text.f-sub{ fill:var(--sub); }
.fig .f-tiny, .fig .f-tiny-w{ font-size:11.5px; }
.fig text.f-tiny{ fill:var(--sub); }
.fig .f-title{ font-size:22px; font-weight:700; }
.fig .f-title-s{ font-size:15px; font-weight:700; }
.fig .f-arrow{ fill:none; stroke:var(--sub); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fig .f-chip{ fill:var(--surface); stroke:var(--line2); }
.fig .f-line-fill{ fill:var(--line); }
.fig .f-key{ fill:#fff; stroke:var(--line2); }
.fig .f-key-on{ fill:var(--accent); opacity:.85; stroke:var(--line2); }
.fig .f-black{ fill:var(--text); }
.fig .f-staff{ stroke:var(--faint); stroke-width:1; }
.fig .f-note{ fill:var(--text); }
.fig .f-stem{ stroke:var(--text); stroke-width:1.3; }
.fig .f-play{ fill:var(--text); }
.fig text.f-play-t{ fill:var(--bg); font-size:12px; font-weight:600; }
.fig .f-call{ fill:var(--text); }
.fig text.f-call-t{ fill:var(--bg); font-size:12px; font-weight:700; text-anchor:middle; }
.fig .f-seg{ fill:var(--surface); stroke:var(--line2); }
.fig .f-seg-on{ fill:var(--text); }
.fig .f-bar{ stroke:var(--line2); stroke-width:1; opacity:.8; }
.fig .f-brk{ fill:none; stroke:var(--sub); stroke-width:1.5; }
.fig text.f-chord{ text-anchor:middle; font-size:12.5px; font-weight:600; }
.fig .f-roll{ fill:var(--surface); stroke:var(--line); }
.fig .f-note-r{ fill:var(--accent); }
.fig .f-note-l{ fill:var(--sub); opacity:.75; }
.fig .f-head{ stroke:var(--text); stroke-width:1.5; }
.fig .f-acc{ fill:var(--accent); }
.fig .f-target{ fill:none; stroke:var(--text); stroke-width:2; }
.fig .f-curve{ fill:none; stroke:var(--accent); stroke-width:1.6; }
.fig .f-key-line{ stroke:var(--line2); stroke-width:.8; }
.fig .f-axis{ stroke:var(--sub); stroke-width:1.2; }
.fig .f-dash{ stroke:var(--sub); stroke-width:1; stroke-dasharray:4 4; }
.fig .f-old{ fill:none; stroke:var(--sub); stroke-width:2.2; stroke-dasharray:6 5; }
.fig .f-new{ fill:none; stroke:var(--accent); stroke-width:2.6; }
.fig text.f-acc-t{ fill:var(--accent); font-weight:600; }
ol.legend{ list-style:none; counter-reset:lg; margin:10px 0 12px; padding:0; }
ol.legend > li{ counter-increment:lg; position:relative; padding:10px 0 10px 34px; border-top:1px solid var(--line); }
ol.legend > li:last-child{ border-bottom:1px solid var(--line); }
ol.legend > li::before{ content:counter(lg); position:absolute; left:2px; top:13px; width:20px; height:20px; border-radius:50%; background:var(--text); color:var(--bg); font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.ex-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:12px 0 14px; }
.ex-cell{ margin:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:none; }
.ex-cell .ex-staff svg{ display:block; width:100%; height:auto; max-height:120px; }
.ex-cell figcaption{ font-size:12.5px; color:var(--sub); margin-top:4px; }
.compare{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:12px 0; }
.cmp-card{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:none; }
.cmp-card h4{ margin:0 0 6px; color:var(--text); font-size:15px; }
.cmp-card p{ font-size:13.5px; margin-bottom:10px; }
.piece-list-about{ border-bottom:1px solid var(--line); }
.pl-row{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; padding:10px 8px; border-top:1px solid var(--line); font-size:13.5px; }
.pl-era{ font-weight:600; color:var(--text); }
.pl-items{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.pl-item{ display:inline-flex; align-items:center; gap:6px; }
.pl-item .link-btn{ font-size:13.5px; text-align:left; }
.pl-item .tag{ font-size:11px; padding:0 8px; }
@media (max-width:900px){
  .about-layout{ grid-template-columns:minmax(0,1fr); }
  .about-index{ position:static; max-height:none; flex-direction:row; overflow-x:auto; }
  .about-index .ei-lane{ display:none; }
  .about-index button{ flex-shrink:0; white-space:nowrap; }
}
@media (max-width:720px){
  .about-card{ padding:28px 0 22px; }
  .tab-row summary{ grid-template-columns:22px minmax(0,1fr) auto; }
  .tr-lead{ grid-column:2 / 4; grid-row:2; }
  .tab-row ul{ padding-left:36px; }
  .ex-grid, .compare{ grid-template-columns:minmax(0,1fr); }
  .pl-row{ grid-template-columns:minmax(0,1fr); gap:4px; }
}

/* 五度圏の各調に描く、調号だけの小さな五線譜 */
.big-circle .key-mini .staff-line-svg{ stroke-width:2; }
.big-circle .seg .key-mini path.clef-real, .big-circle .seg .key-mini path.accidental{ fill:var(--text); stroke:none; }
.big-circle .seg.active .key-mini .staff-line-svg{ stroke:#fff; }
.big-circle .seg.active .key-mini path.clef-real, .big-circle .seg.active .key-mini path.accidental{ fill:#fff; }

/* 五度圏の画面は、円を大きく見せるため、左を広めにする */
.tool-grid.circle-grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
@media (max-width:900px){ .tool-grid.circle-grid{ grid-template-columns:minmax(0,1fr); } }

/* 用語マップ: 上部バー(操作パネルの折り畳み・全画面)と、全画面表示 */
.map-topbar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 8px; }
.map-topbar .mt-title{ display:none; margin-right:auto; font-size:16px; }
.mt-actions{ display:flex; gap:8px; }
.map-stage.panel-hidden .map-panelwrap{ display:none; }
.map-stage.is-full{ position:fixed; left:0; right:0; top:0; bottom:var(--player-h); z-index:45; background:var(--bg); display:flex; flex-direction:column; padding:10px 16px 12px; overflow:hidden; }
.map-stage.is-full .map-topbar .mt-title{ display:block; }
.map-stage.is-full .map-panelwrap{ flex:none; max-height:42vh; overflow:auto; }
.map-stage.is-full .map-wrap{ flex:1; height:auto; min-height:0; }
.map-stage.is-full .map-note{ display:none; }
.map-stage.is-full .map-tools{ margin-bottom:6px; }
.map-stage.is-full .map-ctl{ margin-bottom:6px; }
body.map-full-open{ overflow:hidden; }
@media (max-width:720px){ .map-stage.is-full{ padding:8px 10px 10px; } .map-stage.is-full .map-panelwrap{ max-height:46vh; } }

/* 楽譜の「ページめくり」表示を、ブラウザの印刷機能でPDF保存できるようにする(専用ライブラリは使わない)。
   印刷時は、楽譜のページ以外(設定パネル・ボタンなど)をすべて隠す。既定では今表示中の1ページだけを
   印刷し(改ページもしない)、#rollOverlay に print-all-pages が付いているとき(「書き出す範囲」で
   「すべてのページ」を選んだとき)だけ、隠れている他のページも表示してページごとに改ページする。 */
@media print{
  body:has(#rollOverlay.show) > *:not(#rollOverlay){ display:none !important; }
  #rollOverlay.show{ position:static; inset:auto; background:#fff; padding:0; display:block; }
  /* .detail-paper(モーダルの中身)は本来 position:absolute + overflow-y:auto で画面の高さに収めているが、
     印刷時にこれを外さないと、画面からはみ出た(＝スクロールしないと見えない)ぶんが丸ごと切り取られてしまう */
  #rollPaper{ position:static; overflow:visible; width:auto; max-width:none; height:auto; padding:0; border:0; box-shadow:none; transform:none; }
  #rollPaper > *:not(.roll-body){ display:none !important; }
  .roll-body.score-body-page{ border:0; background:#fff; }
  .score-pages{ display:block; padding:0; }
  .score-page-wrap{ max-width:none; width:100%; background:#fff; border:0; box-shadow:none; border-radius:0; break-after:auto; page-break-after:auto; }
  #rollOverlay.print-all-pages .score-page-wrap[hidden]{ display:block !important; }
  #rollOverlay.print-all-pages .score-page-wrap{ break-after:page; page-break-after:always; }
  #rollOverlay.print-all-pages .score-page-wrap:last-child{ break-after:auto; page-break-after:auto; }
  .score-page-nav{ display:none !important; }
}

/* ---------- 図の部品(figures.js) ---------- */
.fig{ margin:22px 0; padding:0; }
.fig-title{ font-size:13px; font-weight:600; color:var(--sub); margin-bottom:2px; }
.fig-body{ overflow-x:auto; }
.fig-caption{ margin-top:8px; font-size:13.5px; line-height:1.8; color:var(--sub); max-width:60ch; }
.fig-svg{ margin-top:6px; }
.fig-svg text{ font-family:var(--font); }
.fig-svg .fg-t{ fill:var(--text); }
.fig-svg .fg-s{ fill:var(--sub); }
.fig-svg .fg-a{ fill:var(--accent); }
.fig-svg .fg-r{ fill:var(--ng); }
.fig-svg .fg-arrow.fg-red{ stroke:var(--ng); }
.fig-svg .fg-arrow-head.fg-red{ fill:var(--ng); }
.mini-staff .ledger.fg-ledger-b{ stroke:var(--text); stroke-width:3.6; stroke-linecap:butt; }
.fig-svg .fg-b{ font-weight:700; }
.fig-svg .fg-on{ fill:#fff; }
.fig-svg .fg-kt{ fill:#1d1d1f; }
.fig-svg .fg-ks{ fill:#5f5f64; }
.fig-svg .fg-arrow{ stroke:var(--sub); stroke-width:1.2; fill:none; }
.fig-svg .fg-arrow-head{ fill:var(--sub); }
.fig-svg .fg-arrow.fg-acc{ stroke:var(--accent); }
.fig-svg .fg-arrow-head.fg-acc{ fill:var(--accent); }
.fig-svg .fg-arrow.fg-soft{ stroke:var(--faint); }
.fig-svg .fg-arrow-head.fg-soft{ fill:var(--faint); }
.fig-svg .fg-brace{ fill:none; stroke:var(--text); stroke-width:2; stroke-linecap:round; }
.fig-svg .fg-dash{ fill:none; stroke:var(--accent); stroke-width:1.3; stroke-dasharray:4 3; }
.fig-svg .fg-hilite{ stroke:var(--accent); stroke-width:3; opacity:.5; }
.fig-svg .fg-bracket{ fill:none; stroke:var(--faint); stroke-width:1.3; }
.fig-svg .fg-bracket.fg-half{ stroke:var(--accent); }
.fig-svg .fg-rule{ stroke:var(--line); stroke-width:1; }
.fig-svg .fg-faint{ opacity:.6; }
.fig-svg .fg-drop{ stroke:var(--line2); stroke-width:1; stroke-dasharray:2 3; }
.fig-svg .fg-block{ fill:var(--surface-2); stroke:var(--line2); stroke-width:1; }
.fig-svg .fg-block.alt{ fill:var(--accent-bg); }
.fig-svg .fg-num{ fill:none; stroke:var(--line2); stroke-width:1; }
.fig-svg .fg-num.on{ fill:var(--accent); stroke:var(--accent); }
.fig-svg .fg-num.on + text{ fill:#fff; }
.fig-svg .fg-cell{ fill:var(--surface); stroke:var(--line2); stroke-width:1; }
.fig-svg .fg-cell.blk{ fill:var(--surface-2); }
.fig-svg .fg-cell.on{ fill:var(--key-on); stroke:var(--accent); }
.fig-svg .fg-cell.blk.on{ fill:var(--key-on-black); }
.fig-svg .fg-key.white{ fill:var(--key-white); stroke:var(--key-edge); stroke-width:1; }
.fig-svg .fg-key.white.mark{ fill:var(--mark); }
.fig-svg .fg-key.black{ fill:var(--key-black); }
.fig-svg .fg-clickable{ cursor:pointer; }
.fig-svg .fg-clickable:hover{ opacity:.8; }
.fig-svg .stem{ stroke:var(--text); stroke-width:1.3; }
.fig-play{ margin-top:8px; }

.fg-flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:8px 0; }
.fg-node{ border:1px solid var(--line2); border-radius:8px; padding:8px 14px; background:var(--surface); min-width:88px; }
.fg-node b{ display:block; font-size:14px; }
.fg-node span{ display:block; font-size:12.5px; color:var(--sub); line-height:1.5; margin-top:2px; }
.fg-flow-arrow{ align-self:center; width:26px; height:1px; background:var(--faint); position:relative; margin:0 2px; }
.fg-flow-arrow::after{ content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border:solid var(--faint); border-width:1px 1px 0 0; transform:rotate(45deg); }
.fg-form{ display:flex; gap:3px; }
.fg-form-sec{ min-width:44px; border-radius:6px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--line); }
.fg-form-sec b{ display:block; font-size:14px; }
.fg-form-sec span{ display:block; font-size:12px; color:var(--sub); }
.fg-form-sec.t1{ background:var(--accent-bg); border-color:transparent; }
.fg-table{ border-collapse:collapse; width:100%; font-size:14px; line-height:1.7; }
.fg-table th, .fg-table td{ text-align:left; vertical-align:top; padding:8px 12px 8px 0; border-bottom:1px solid var(--line); }
.fg-table thead th{ font-size:12.5px; color:var(--sub); font-weight:600; }
.fg-table tbody th{ font-weight:600; white-space:nowrap; padding-right:20px; }

/* ---------- レッスン・用語の本文レイアウト ---------- */
.lesson-lead, .detail-lead{ font-size:17px; line-height:1.85; font-weight:600; margin:6px 0 14px; }
.lesson-block{ margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }
.lesson-block h4{ margin:0 0 8px; font-size:13px; font-weight:600; color:var(--sub); }
.lesson-block ul, .lesson-block ol{ margin:0; padding-left:1.3em; font-size:14.5px; line-height:1.85; }
.lesson-block li{ margin-bottom:4px; }
.lesson-block.pitfalls li::marker{ color:var(--fn-s); }
.lesson-block.points li::marker{ color:var(--accent); }
.lesson-block .try-text{ font-size:14.5px; line-height:1.85; margin:0; }
.lesson-body h5, .detail-body h5{ margin:20px 0 6px; font-size:15px; }
.lesson-body ul, .lesson-body ol{ margin:0 0 12px; padding-left:1.3em; }
.lesson-body table{ border-collapse:collapse; margin:0 0 14px; font-size:14px; line-height:1.7; }
.lesson-body th, .lesson-body td{ text-align:left; vertical-align:top; padding:6px 14px 6px 0; border-bottom:1px solid var(--line); }
.lesson-body th{ font-weight:600; }

.fig-svg .staff-line-svg.fg-strong{ stroke:var(--text); stroke-width:1.6; }
.fig-svg .staff-line-svg.fg-dim{ stroke:var(--line2); }