/* /assets/css/fav-notebook.css?v=20260707g */
/* =====================================================================
 * fav-notebook.css ── 音楽手帖（お気に入りボックス）見開きUI
 * 深緑×金／夜の森／綴じ目。ClaudeDesign ハンドオフのデザイントークン準拠。
 * 装丁テーマ: data-binding="forest|gilt|plain"（既定 forest）
 * モーション基調: cubic-bezier(.22,1,.36,1)
 * ===================================================================== */

#hmix-notebook,
#hmix-notebook * { box-sizing: border-box; }

/* ---- 器（オーバーレイ） ---- */
#hmix-notebook{
  --gold:#e7ca7c; --gold-bright:#ffcf6e;
  --rule:rgba(202,164,78,.30); --rule-strong:rgba(202,164,78,.55);
  --ink:#eef0ea; --ink-dim:#a8bcb0;
  --green:#7ecb95; --green-soft:#9adfb4;
  --page-a:rgba(16,28,20,.96); --page-b:rgba(10,18,13,.98);
  --ease:cubic-bezier(.22,1,.36,1);
  /* ガラス調: ぼかし量と下地ティント（背景の光を宿す半透明） */
  --glass-blur:16px; --glass-tint-a:rgba(15,27,19,.56); --glass-tint-b:rgba(9,17,12,.68);
  position:fixed; inset:0; z-index:2147483600;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px,3vh) 16px;
  /* 背景(コンテンツ)を透かしつつ、周囲だけ軽く沈めてガラスを引き立てる */
  background:radial-gradient(120% 120% at 50% 0%, rgba(6,12,8,.38), rgba(2,5,3,.56));
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease);
}
#hmix-notebook[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
#hmix-notebook[hidden]{ display:none; }

/* ---- 手帖シェル（見開き） ---- */
.hmix-notebook{
  position:relative;
  width:min(1100px,92vw); height:min(88vh,760px); min-height:540px;
  display:grid; grid-template-columns:220px 1fr 300px; grid-template-rows:auto 1fr auto;
  /* 透明なガラス素材: 背景のコンテンツと世界の光をぼんやり宿す */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%),
    linear-gradient(150deg, var(--glass-tint-a), var(--glass-tint-b));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.18);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.18);
  border-radius:5px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(202,164,78,.18), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  overflow:hidden;
  transform:perspective(1800px) rotateY(-14deg) scale(.96); transform-origin:left center;
  opacity:0; transition:transform .72s var(--ease), opacity .5s var(--ease);
}
#hmix-notebook[aria-hidden="false"] .hmix-notebook{ transform:none; opacity:1; }
/* 金の二重細罫枠 */
.hmix-notebook::before{
  content:""; position:absolute; inset:7px; border:1px solid var(--rule);
  border-radius:3px; pointer-events:none; z-index:5;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 3px rgba(10,18,13,.6), inset 0 0 0 4px var(--rule);
}
/* 四隅の金L字飾り（gilt で濃く / plain で消す） */
.hmix-notebook::after{
  content:""; position:absolute; inset:7px; pointer-events:none; z-index:6; opacity:.55;
  background:
    linear-gradient(var(--gold),var(--gold)) left  top    /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left  top    /1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top    /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top    /1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left  bottom /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left  bottom /1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom /1px 18px no-repeat;
}
#hmix-notebook[data-binding="gilt"] .hmix-notebook::after{ opacity:1; }
#hmix-notebook[data-binding="plain"] .hmix-notebook::after{ opacity:0; }
#hmix-notebook[data-binding="gilt"]{ --gold:#f0d595; --rule:rgba(202,164,78,.5); }
#hmix-notebook[data-binding="plain"]{ --rule:rgba(202,164,78,.5); --ink-dim:#c2d2c6; }

/* ---- ヘッダー（スティッキー相当・全幅） ---- */
.hnb-head{
  grid-column:1 / -1; display:flex; align-items:center; gap:16px;
  padding:16px 22px 14px; border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(14,24,17,.7), transparent);
}
.hnb-head__title{ font-family:'Noto Serif JP',serif; font-weight:700; font-size:18px; letter-spacing:.02em; }
.hnb-head__kicker{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:2px; }
.hnb-head__count{ font-family:'Bebas Neue',sans-serif; color:var(--gold); font-size:15px; letter-spacing:.06em; margin-left:8px; }
.hnb-head__spacer{ flex:1; }
.hnb-search{
  background:rgba(255,255,255,.04); border:1px solid var(--rule); border-radius:999px;
  color:var(--ink); font:400 13px/1 'Noto Sans JP',sans-serif; padding:9px 14px; width:200px;
}
.hnb-search::placeholder{ color:var(--ink-dim); }
.hnb-sync{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green-soft);
  border:1px solid rgba(126,203,149,.32); background:rgba(126,203,149,.08); border-radius:999px; padding:6px 12px;
}
.hnb-sync::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.hnb-close{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--rule);
  background:transparent; color:var(--ink-dim); font-size:16px; cursor:pointer; line-height:1;
}
.hnb-close:hover{ color:var(--gold); border-color:var(--rule-strong); }

/* ---- 左：背表紙ナビ（本棚＝章） ---- */
.hnb-spine{
  grid-column:1; grid-row:2 / 3; overflow-y:auto; padding:16px 12px;
  border-right:1px solid var(--rule);
  background:
    linear-gradient(90deg, transparent, rgba(0,0,0,.35) 96%),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(202,164,78,.05) 9px 10px);
  box-shadow:inset -8px 0 16px -10px rgba(0,0,0,.6);
}
.hnb-spine__h{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.3em; color:var(--ink-dim); text-transform:uppercase; padding:0 8px 10px; }
.hnb-chapter{
  position:relative; width:100%; text-align:left; display:block;
  padding:11px 12px 11px 16px; margin-bottom:6px; border-radius:4px;
  background:transparent; border:1px solid transparent; color:var(--ink); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.hnb-chapter::before{ /* 左端の状態色帯 */
  content:""; position:absolute; left:4px; top:8px; bottom:8px; width:4px; border-radius:2px;
  background:var(--rule-strong);
}
.hnb-chapter[data-lic="confirmed"]::before{ background:var(--gold); }
.hnb-chapter[data-lic="licensed"]::before{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 0 8px rgba(231,202,124,.5); }
.hnb-chapter:hover{ background:rgba(202,164,78,.06); }
.hnb-chapter.is-active{ background:rgba(202,164,78,.1); border-color:var(--rule); }
.hnb-chapter__name{ font-family:'Noto Serif JP',serif; font-size:14px; display:flex; align-items:center; gap:6px; }
.hnb-chapter__lock{ width:12px; height:12px; opacity:.85; }
.hnb-chapter__meta{ font-family:'Bebas Neue',sans-serif; font-size:13px; color:var(--ink-dim); letter-spacing:.05em; margin-top:3px; }
.hnb-chapter__meta b{ color:var(--gold); font-weight:400; }
.hnb-newchapter{
  width:100%; text-align:left; padding:11px 16px; margin-top:6px; border-radius:4px;
  background:transparent; border:1px dashed var(--rule); color:var(--ink-dim);
  font-size:13px; cursor:pointer;
}
.hnb-newchapter:hover{ color:var(--gold); border-color:var(--rule-strong); }

/* ---- 中央：曲リスト（台帳） ---- */
.hnb-pages{
  grid-column:2; grid-row:2 / 3; overflow-y:auto; position:relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 55px, rgba(202,164,78,.06) 55px 56px),
    radial-gradient(140% 100% at 50% 0%, rgba(20,34,24,.4), transparent);
}
.hnb-select-tools{
  position:sticky; top:0; z-index:2;
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px;
  min-height:44px; padding:8px 18px; border-bottom:1px solid rgba(202,164,78,.16);
  background:linear-gradient(180deg, rgba(11,20,14,.98), rgba(11,20,14,.88));
  backdrop-filter:blur(10px);
}
.hnb-select-tools__label{
  font-family:'Noto Serif JP',serif; font-size:13px; color:var(--gold);
}
.hnb-select-tools__btn{
  min-height:30px; padding:0 11px; border-radius:999px;
  border:1px solid var(--rule); background:rgba(255,255,255,.03);
  color:var(--ink); font-size:12px; cursor:pointer;
}
.hnb-select-tools__btn:hover{ border-color:var(--rule-strong); color:var(--gold); }
.hnb-row{
  display:grid; grid-template-columns:26px 28px 28px 1fr auto auto; align-items:center; gap:10px;
  min-height:56px; padding:.6rem 18px; border-bottom:1px solid rgba(202,164,78,.08);
  cursor:pointer; transition:background .18s var(--ease);
}
.hnb-row:hover{ background:rgba(202,164,78,.05); }
.hnb-row.is-active{ background:rgba(202,164,78,.1); }
.hnb-row.is-playing .hnb-row__title{ color:var(--green-soft); }
.hnb-row.is-playing .hnb-row__title::after{ content:"♪"; margin-left:8px; color:var(--green); font-size:.85em; }
.hnb-check{ width:18px; height:18px; accent-color:var(--gold); cursor:pointer; }
.hnb-iconbtn{
  width:28px; height:28px; min-width:28px; display:grid; place-items:center;
  background:transparent; border:none; color:var(--ink-dim); cursor:pointer; font-size:16px; border-radius:50%;
}
.hnb-iconbtn:hover{ color:var(--gold); background:rgba(202,164,78,.1); }
.hnb-fav.is-on{ color:var(--gold); }
.hnb-row__main{ min-width:0; }
.hnb-row__title{ font-family:'Noto Serif JP',serif; font-size:1rem; line-height:1.5; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hnb-row__tags{ font-size:.78rem; color:var(--ink-dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hnb-row__dur{ font-family:'Bebas Neue',sans-serif; font-size:14px; color:var(--ink-dim); letter-spacing:.06em; }
.hnb-badge{
  font-size:10.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--rule); color:var(--ink-dim);
}
.hnb-badge[data-lic="draft"]{ color:#cdb579; border-color:rgba(202,164,78,.35); }
.hnb-badge[data-lic="confirmed"]{ color:var(--gold); border-color:var(--rule-strong); }
.hnb-badge[data-lic="licensed"]{ color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }

/* ---- 右：プレビュー／メモ ---- */
.hnb-preview{
  grid-column:3; grid-row:2 / 3; overflow-y:auto; padding:18px; border-left:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(12,22,15,.24), rgba(8,15,10,.4));
  display:flex; flex-direction:column; gap:14px;
}
.hnb-preview__empty{ color:var(--ink-dim); font-size:13px; line-height:1.8; margin:auto 0; text-align:center; }
.hnb-preview__title{ font-family:'Noto Serif JP',serif; font-size:17px; line-height:1.4; }
.hnb-preview__tags{ font-size:.8rem; color:var(--ink-dim); line-height:1.6; }
.hnb-wave{ height:46px; display:flex; align-items:flex-end; gap:2px; opacity:.85; }
.hnb-wave span{ flex:1; background:linear-gradient(180deg,var(--gold),rgba(126,203,149,.5)); border-radius:1px; }
.hnb-preview__sect{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.28em; color:var(--ink-dim); text-transform:uppercase; }
.hnb-memo{
  width:100%; min-height:64px; resize:vertical; background:rgba(255,255,255,.03);
  border:1px solid var(--rule); border-radius:6px; color:var(--ink); padding:10px;
  font:400 13px/1.6 'Noto Sans JP',sans-serif;
}
.hnb-apply-one{
  margin-top:auto; padding:11px; border-radius:8px; border:1px solid var(--rule-strong);
  background:transparent; color:var(--gold); font-weight:700; font-size:13px; cursor:pointer;
}
.hnb-apply-one:hover{ background:rgba(202,164,78,.1); }
.hnb-preview__row{ display:flex; align-items:center; gap:10px; }
/* A/B 聴き比べ */
.hnb-ab{ display:flex; flex-direction:column; gap:6px; }
.hnb-ab__btn{
  display:flex; align-items:center; gap:8px; text-align:left; padding:8px 11px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--ink); cursor:pointer;
  font-size:12.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.hnb-ab__btn:hover{ border-color:var(--rule-strong); }
.hnb-ab__btn b{ color:var(--gold); font-family:'Bebas Neue',sans-serif; font-size:14px; }
.hnb-ab__hint{ font-size:11.5px; color:var(--ink-dim); padding:4px 2px; }
/* シート用ハンドル/閉じる（モバイルのみ可視） */
.hnb-sheet-handle{ display:none; }
.hnb-sheet-close{ display:none; }

/* ---- フッター（金CTA＋一括バー） ---- */
.hnb-foot{
  grid-column:1 / -1; grid-row:3 / 4; padding:14px 22px; border-top:1px solid var(--rule);
  background:linear-gradient(0deg, rgba(8,15,10,.85), transparent); position:relative;
}
.hnb-apply-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.hnb-cta{
  width:100%; padding:15px; border-radius:8px; cursor:pointer;
  color:#0a140d; font-weight:700; font-size:15px; border:1px solid transparent;
  font-family:'Noto Serif JP',serif; letter-spacing:.02em;
  box-shadow:0 8px 24px -10px rgba(231,202,124,.6);
}
.hnb-cta--selected{
  background:linear-gradient(135deg, rgba(255,207,110,.95), rgba(126,203,149,.82));
  border-color:rgba(126,203,149,.34);
}
.hnb-cta--download{
  background:linear-gradient(135deg, rgba(207,230,242,.95), rgba(143,224,200,.78));
  border-color:rgba(207,230,242,.42);
}
.hnb-cta:hover{ filter:brightness(1.05); }
.hnb-cta:disabled{ cursor:not-allowed; filter:saturate(.75); }
.hnb-cta__sub{ display:block; text-align:center; margin-top:8px; font-size:11px; color:var(--ink-dim); }
/* 一括バー */
.hnb-bulk{
  position:absolute; left:22px; right:22px; bottom:calc(100% + 8px);
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px;
  background:rgba(12,22,15,.96); border:1px solid var(--rule-strong);
  box-shadow:0 12px 36px -14px rgba(0,0,0,.7);
  opacity:0; transform:translateY(8px); pointer-events:none; transition:.22s var(--ease);
}
.hnb-bulk.is-on{ opacity:1; transform:none; pointer-events:auto; }
.hnb-bulk__n{ font-family:'Bebas Neue',sans-serif; color:var(--gold); font-size:16px; letter-spacing:.05em; }
.hnb-bulk__btn{ background:transparent; border:1px solid var(--rule); border-radius:6px; color:var(--ink); padding:7px 12px; font-size:12.5px; cursor:pointer; }
.hnb-bulk__btn:hover{ border-color:var(--rule-strong); color:var(--gold); }

/* ---- 空状態 ---- */
.hnb-empty{
  grid-column:2 / 4; grid-row:2 / 3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center; padding:40px;
}
.hnb-empty[hidden]{ display:none !important; }
.hnb-empty__mark{ font-size:40px; color:var(--gold); opacity:.7; }
.hnb-empty__lead{ font-family:'Noto Serif JP',serif; font-size:18px; line-height:1.7; }
.hnb-empty__sub{ color:var(--ink-dim); font-size:13px; line-height:1.8; max-width:340px; }
.hnb-empty__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---- スクロールバー ---- */
.hnb-spine::-webkit-scrollbar,.hnb-pages::-webkit-scrollbar,.hnb-preview::-webkit-scrollbar{ width:8px; }
.hnb-spine::-webkit-scrollbar-thumb,.hnb-pages::-webkit-scrollbar-thumb,.hnb-preview::-webkit-scrollbar-thumb{ background:rgba(202,164,78,.2); border-radius:4px; }

/* ---- モバイル（簡易・後続スライスで全画面シート化） ---- */
@media (max-width:760px){
  #hmix-notebook{ padding:0; align-items:flex-end; }
  .hmix-notebook{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto; height:92vh; width:100vw; border-radius:18px 18px 0 0; transform:translateY(8%); }
  #hmix-notebook[aria-hidden="false"] .hmix-notebook{ transform:none; }
  .hmix-notebook::before{ inset:5px; }
  /* ヘッダー：2段（上=情報、下=検索） */
  .hnb-head{ grid-column:1; grid-row:1 / 2; flex-wrap:wrap; gap:8px 10px; padding:12px 14px; }
  .hnb-head__kicker{ display:none; }
  .hnb-head__spacer{ display:none; }
  .hnb-search{ order:5; width:100%; }
  /* 背表紙：水平スワイプ帯 */
  .hnb-spine{ grid-row:2 / 3; grid-column:1; border-right:none; border-bottom:1px solid var(--rule); display:flex; gap:8px; overflow-x:auto; padding:10px 12px; box-shadow:none; background:rgba(10,18,13,.4); }
  .hnb-spine__h{ display:none; }
  .hnb-chapter{ flex:0 0 auto; margin-bottom:0; white-space:nowrap; padding:9px 14px 9px 18px; }
  .hnb-chapter__meta{ display:none; }
  .hnb-newchapter{ flex:0 0 auto; margin-top:0; white-space:nowrap; }
  /* 曲リスト */
  .hnb-pages{ grid-row:3 / 4; grid-column:1; }
  .hnb-select-tools{ grid-template-columns:1fr auto auto; padding:8px 14px; }
  .hnb-select-tools__label{ font-size:12px; }
  .hnb-select-tools__btn{ padding:0 9px; font-size:11.5px; }
  .hnb-row{ grid-template-columns:24px 28px 1fr auto; }
  .hnb-row .hnb-play{ display:none; }
  .hnb-row__tags{ display:none; }
  /* プレビュー＝行タップでせり上がる詳細シート */
  .hnb-preview{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:20;
    grid-column:auto; grid-row:auto; height:auto; max-height:74vh; padding:10px 18px 24px;
    border-left:none; border-top:1px solid var(--rule-strong); border-radius:18px 18px 0 0;
    background:linear-gradient(180deg, rgba(14,24,17,.62), rgba(8,15,10,.74));
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.18); backdrop-filter:blur(var(--glass-blur)) saturate(1.18);
    box-shadow:0 -16px 40px -12px rgba(0,0,0,.7);
    transform:translateY(102%); transition:transform .34s var(--ease); pointer-events:auto;
  }
  .hnb-preview.is-open{ transform:none; }
  .hnb-sheet-handle{ display:block; width:40px; height:4px; border-radius:2px; background:var(--rule-strong); margin:0 auto 10px; }
  .hnb-sheet-close{ display:grid; place-items:center; position:absolute; top:10px; right:14px; width:44px; height:44px; background:transparent; border:none; color:var(--ink-dim); font-size:18px; cursor:pointer; }
  .hnb-empty{ grid-column:1; grid-row:3 / 4; }
  /* フッターを最下段に固定（重なり解消） */
  .hnb-foot{ grid-column:1; grid-row:4 / 5; padding:12px 14px; }
  .hnb-apply-actions{ gap:8px; }
  .hnb-cta{ font-size:14px; padding:13px; }
}

/* ---- プレビューのボタン列（章へ入れる / 申請） ---- */
.hnb-preview__btns{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.hnb-addch-one{ padding:11px; border-radius:8px; border:1px solid var(--rule); background:rgba(202,164,78,.06); color:var(--gold); font-weight:700; font-size:13px; cursor:pointer; }
.hnb-addch-one:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.12); }
.hnb-cta--ghost{ background:transparent !important; color:var(--gold) !important; border:1px solid var(--rule-strong); box-shadow:none !important; }

/* ---- 章ピッカー（選択/単曲 → 既存章 or 新規へ・既定コピー） ---- */
.hnb-picker{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .18s var(--ease); }
.hnb-picker.is-open{ opacity:1; pointer-events:auto; }
.hnb-picker__backdrop{ position:absolute; inset:0; background:rgba(3,6,4,.66); }
.hnb-picker__panel{ position:relative; width:min(360px,86%); max-height:78%; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(155deg, rgba(13,23,16,.72), rgba(7,13,9,.82)); border:1px solid var(--rule-strong); border-radius:10px; padding:16px;
  -webkit-backdrop-filter:blur(18px) saturate(1.18); backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(202,164,78,.16); transform:translateY(8px); transition:transform .2s var(--ease); }
.hnb-picker.is-open .hnb-picker__panel{ transform:none; }
.hnb-picker__head{ font-family:'Noto Serif JP',serif; font-size:15px; color:var(--ink); padding-bottom:4px; }
.hnb-picker__list{ display:flex; flex-direction:column; gap:6px; }
.hnb-picker__item{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:11px 13px 11px 16px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--ink); cursor:pointer; position:relative; }
.hnb-picker__item::before{ content:""; position:absolute; left:5px; top:9px; bottom:9px; width:3px; border-radius:2px; background:var(--rule-strong); }
.hnb-picker__item[data-lic="confirmed"]::before{ background:var(--gold); }
.hnb-picker__item[data-lic="licensed"]::before{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); }
.hnb-picker__item:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.08); }
.hnb-picker__name{ font-family:'Noto Serif JP',serif; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hnb-picker__n{ font-family:'Bebas Neue',sans-serif; color:var(--ink-dim); font-size:13px; flex:0 0 auto; }
.hnb-picker__none{ color:var(--ink-dim); font-size:12.5px; padding:6px 4px; }
.hnb-picker__new{ padding:11px; border-radius:6px; border:1px dashed var(--rule-strong); background:transparent; color:var(--gold); font-weight:700; font-size:13px; cursor:pointer; }
.hnb-picker__new:hover{ background:rgba(202,164,78,.08); }
.hnb-picker__move{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); padding:2px; cursor:pointer; }
.hnb-picker__move input{ accent-color:var(--gold); width:16px; height:16px; }
.hnb-picker__close{ padding:9px; border-radius:6px; border:none; background:transparent; color:var(--ink-dim); font-size:13px; cursor:pointer; }
.hnb-picker__close:hover{ color:var(--gold); }

/* ---- 空の章ヘルパー ---- */
.hnb-empty-chapter{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:48px 30px; min-height:60%; }
.hnb-empty-chapter__mark{ font-size:34px; color:var(--gold); opacity:.6; }
.hnb-empty-chapter__lead{ font-family:'Noto Serif JP',serif; font-size:17px; color:var(--ink); }
.hnb-empty-chapter__sub{ color:var(--ink-dim); font-size:13px; line-height:1.8; max-width:320px; }
.hnb-empty-chapter__cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ---- ドラッグ＆ドロップ（曲→章へ移動） ---- */
.hnb-row[draggable="true"]{ cursor:grab; }
.hnb-row--dragging{ opacity:.45; }
.hnb-chapter.hnb-drop-hover,.hnb-newchapter.hnb-drop-hover{ background:rgba(202,164,78,.18) !important; border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) inset; }

/* ---- トースト ---- */
.hnb-toast{ position:absolute; left:50%; bottom:84px; transform:translate(-50%,8px); z-index:50; opacity:0; pointer-events:none;
  background:rgba(12,22,15,.96); color:var(--ink); border:1px solid var(--rule-strong); border-radius:999px; padding:9px 18px; font-size:13px;
  box-shadow:0 12px 36px -14px rgba(0,0,0,.7); transition:opacity .2s var(--ease), transform .2s var(--ease); white-space:nowrap; max-width:90%; }
.hnb-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---- 質素装丁: ぼかし弱め＋不透明寄り（可読性優先） ---- */
#hmix-notebook[data-binding="plain"]{ --glass-blur:7px; --glass-tint-a:rgba(13,23,16,.85); --glass-tint-b:rgba(8,15,10,.92); }

/* ---- ガラスOFF（data-glass="0"）/ 透明度を抑える設定 → 不透明フォールバック ---- */
#hmix-notebook[data-glass="0"]{ --glass-tint-a:rgba(10,20,13,.97); --glass-tint-b:rgba(7,13,9,.99); }
#hmix-notebook[data-glass="0"] .hmix-notebook,
#hmix-notebook[data-glass="0"] .hnb-picker__panel,
#hmix-notebook[data-glass="0"] .hnb-preview{ -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (prefers-reduced-transparency: reduce){
  #hmix-notebook{ --glass-tint-a:rgba(10,20,13,.97); --glass-tint-b:rgba(7,13,9,.99);
    background:radial-gradient(120% 120% at 50% 0%, rgba(6,12,8,.82), rgba(2,5,3,.92)); }
  .hmix-notebook, .hnb-picker__panel, .hnb-preview{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ---- reduced-motion（金罫・色変化は残す） ---- */
@media (prefers-reduced-motion: reduce){
  #hmix-notebook, .hmix-notebook{ transition:opacity .08s linear !important; }
  .hmix-notebook{ transform:none !important; }
  .hnb-picker, .hnb-toast, .hnb-wizard{ transition:opacity .08s linear !important; }
  .hnb-wizard.is-open .hnb-wizard__panel{ transform:none !important; }
}

/* ===================================================================
 * 申請ウィザード（4ステップ：曲→ライセンス→情報→確認→決済）
 * =================================================================== */
.hnb-wizard{ position:absolute; inset:0; z-index:48; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s var(--ease); }
.hnb-wizard.is-open{ opacity:1; pointer-events:auto; }
.hnb-wizard__backdrop{ position:absolute; inset:0; background:rgba(3,6,4,.72); }
.hnb-wizard__panel{ position:relative; width:min(560px,92%); max-height:88%; display:flex; flex-direction:column;
  background:linear-gradient(155deg, rgba(13,23,16,.78), rgba(7,13,9,.88)); border:1px solid var(--rule-strong); border-radius:12px;
  -webkit-backdrop-filter:blur(18px) saturate(1.18); backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 36px 90px -22px rgba(0,0,0,.82), 0 0 0 1px rgba(202,164,78,.16);
  transform:translateY(10px); transition:transform .2s var(--ease); }
.hnb-wizard.is-open .hnb-wizard__panel{ transform:none; }

/* ヘッダ：ステップインジケータ */
.hnb-wizard__head{ display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--rule); }
.hnb-wizard__steps{ display:flex; align-items:center; gap:4px; flex:1 1 auto; flex-wrap:wrap; }
.hnb-wizard__step{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-dim); white-space:nowrap; }
.hnb-wizard__step b{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--rule-strong); font-family:'Bebas Neue',sans-serif; font-size:12px; color:var(--ink-dim); }
.hnb-wizard__step.is-on{ color:var(--gold); }
.hnb-wizard__step.is-on b{ border-color:var(--gold); color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); }
.hnb-wizard__step.is-done b{ border-color:var(--rule-strong); color:var(--gold); }
.hnb-wizard__arrow{ color:var(--rule-strong); font-size:13px; }
.hnb-wizard__x{ flex:0 0 auto; background:transparent; border:1px solid var(--rule); color:var(--ink-dim); width:30px; height:30px;
  border-radius:6px; cursor:pointer; font-size:14px; }
.hnb-wizard__x:hover{ color:var(--gold); border-color:var(--rule-strong); }

/* 本文 */
.hnb-wizard__body{ flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.wz-lead{ color:var(--ink-dim); font-size:13px; line-height:1.7; margin:0; }

/* Step1: 曲リスト */
.wz-tracklist{ display:flex; flex-direction:column; gap:4px; }
.wz-trackrow{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:7px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); min-height:48px; }
.wz-trackrow:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.06); }
.wz-trk{ width:18px; height:18px; accent-color:var(--gold); cursor:pointer; flex:0 0 auto; }
.wz-trackrow__title{ font-family:'Noto Serif JP',serif; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Step2: ライセンスカード */
.wz-cards{ display:flex; flex-direction:column; gap:9px; }
.wz-card{ position:relative; text-align:left; display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:9px;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--ink); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease); }
.wz-card:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.06); }
.wz-card.is-sel{ border-color:var(--gold); background:rgba(202,164,78,.1); box-shadow:0 0 0 1px var(--gold) inset; }
.wz-card__badge{ position:absolute; top:-9px; right:12px; font-size:10px; letter-spacing:.05em; padding:2px 9px; border-radius:10px;
  color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); font-weight:700; }
.wz-card__name{ font-family:'Noto Serif JP',serif; font-size:15px; }
.wz-card__price{ font-family:'Bebas Neue',sans-serif; font-size:21px; letter-spacing:.02em; color:var(--gold); }
.wz-card__price small{ font-family:'Noto Sans JP',sans-serif; font-size:11px; color:var(--ink-dim); letter-spacing:0; }
.wz-card__desc{ font-size:12px; color:var(--ink-dim); line-height:1.6; }
.wz-exit{ font-size:11.5px; color:var(--ink-dim); line-height:1.7; margin:2px 0 0; }
.wz-exit a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.wz-usage{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.wz-usage__label{ font-size:12px; color:var(--ink-dim); }
.wz-usage__sel, .wz-input{ width:100%; box-sizing:border-box; padding:11px 12px; border-radius:7px; background:rgba(5,10,7,.6);
  border:1px solid var(--rule-strong); color:var(--ink); font-size:14px; font-family:inherit; }
.wz-usage__sel:focus, .wz-input:focus{ outline:none; border-color:var(--gold); }

/* Step3: フォーム */
.wz-field{ display:flex; flex-direction:column; gap:6px; }
.wz-field__lbl{ font-size:12.5px; color:var(--ink-dim); }
.wz-field__lbl i{ color:var(--gold); font-style:normal; }

/* Step4: サマリ */
.wz-sum{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--rule); border-radius:9px; overflow:hidden; }
.wz-sum__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; background:rgba(255,255,255,.025); }
.wz-sum__row span{ font-size:12.5px; color:var(--ink-dim); flex:0 0 auto; }
.wz-sum__row b{ font-family:'Noto Serif JP',serif; font-size:14px; color:var(--ink); font-weight:400; text-align:right; }
.wz-sum__total{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px;
  background:rgba(202,164,78,.1); border-top:1px solid var(--rule-strong); }
.wz-sum__total span{ font-size:13px; color:var(--gold); }
.wz-sum__total b{ font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:.02em; color:var(--gold); }
.wz-note{ font-size:12px; color:var(--ink-dim); line-height:1.7; margin:0; }
.wz-err{ font-size:12.5px; color:#f0a8a0; line-height:1.6; padding:10px 12px; border:1px solid rgba(240,120,110,.4); border-radius:7px; background:rgba(60,16,12,.4); }

/* フッタ：戻る / 合計 / 次へ */
.hnb-wizard__foot{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--rule); }
.hnb-wizard__back{ flex:0 0 auto; background:transparent; border:1px solid var(--rule); color:var(--ink-dim); padding:11px 16px;
  border-radius:7px; cursor:pointer; font-size:13px; font-family:inherit; }
.hnb-wizard__back:hover{ color:var(--gold); border-color:var(--rule-strong); }
.hnb-wizard__total{ flex:1 1 auto; text-align:right; font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold); letter-spacing:.02em; }
.hnb-wizard__total .wz-total__lbl{ font-family:'Noto Sans JP',sans-serif; font-size:11px; color:var(--ink-dim); letter-spacing:0; margin-right:4px; }
.hnb-wizard__next{ flex:0 0 auto; padding:12px 22px; border-radius:8px; border:1px solid var(--gold); cursor:pointer;
  color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); font-weight:700; font-size:14px; font-family:inherit;
  box-shadow:0 6px 20px -8px rgba(231,202,124,.6); }
.hnb-wizard__next:hover{ filter:brightness(1.06); }
.hnb-wizard__next:disabled{ cursor:default; box-shadow:none; }

/* モバイル：全画面ボトムシート */
@media (max-width:760px){
  .hnb-wizard{ align-items:flex-end; }
  .hnb-wizard__panel{ width:100%; max-height:94%; border-radius:16px 16px 0 0; transform:translateY(100%); }
  .hnb-wizard.is-open .hnb-wizard__panel{ transform:none; }
  .hnb-wizard__foot{ padding-bottom:calc(13px + env(safe-area-inset-bottom)); }
  .hnb-wizard__total{ font-size:16px; }
  .hnb-wizard__next{ padding:13px 18px; }
}
@media (prefers-reduced-transparency: reduce){
  .hnb-wizard__panel{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:linear-gradient(155deg, rgba(11,20,14,.98), rgba(6,12,8,.99)); }
}

/* ===== 持ち込んだ曲（PCからのアップロード・この端末に保存） ===== */
.hnb-spine__h--local{ margin-top:18px; }
.hnb-chapter--local .hnb-chapter__name::before{ content:"♪ "; color:var(--gold); }
.hnb-upload{
  margin:14px 18px 10px; padding:22px 18px; text-align:center; border-radius:12px;
  border:1.5px dashed rgba(231,202,124,.5); background:rgba(202,164,78,.04);
  transition:border-color .2s, background .2s;
}
.hnb-upload.is-drag{ border-color:var(--gold-bright,#ffcf6e); background:rgba(202,164,78,.12); }
.hnb-upload.is-full{ border-style:solid; border-color:rgba(202,164,78,.22); }
.hnb-upload__mark{ font-size:20px; color:var(--gold); margin-bottom:6px; }
.hnb-upload__lead{ font-family:'Noto Serif JP',serif; font-size:.98rem; color:var(--ink); margin-bottom:10px; }
.hnb-upload__btn{
  font-family:inherit; font-size:13px; font-weight:700; color:#0a140d; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-bright,#ffcf6e),var(--gold,#caa44e));
  border:1px solid var(--gold,#caa44e); border-radius:8px; padding:9px 20px;
  box-shadow:0 6px 18px -8px rgba(231,202,124,.55);
}
.hnb-upload__btn:hover{ filter:brightness(1.06); }
.hnb-upload__sub{ font-size:11.5px; color:var(--ink-dim,#a8bcb0); margin-top:9px; line-height:1.8; }
.hnb-upload__empty{ padding:26px 18px; text-align:center; font-size:13px; color:var(--ink-dim,#a8bcb0); }
.hnb-row--local{ display:grid; grid-template-columns:38px 1fr auto; gap:12px; cursor:default; }
.hnb-row--local .hnb-row__play{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(202,164,78,.4); cursor:pointer;
  background:rgba(202,164,78,.08); color:var(--gold,#caa44e); font-size:12px; display:grid; place-items:center;
}
.hnb-row--local .hnb-row__play:hover{ background:rgba(202,164,78,.2); }
.hnb-row--local .hnb-row__del{
  width:30px; height:30px; border-radius:50%; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--ink-dim,#a8bcb0); font-size:13px;
}
.hnb-row--local .hnb-row__del:hover{ color:#ff9c8a; border-color:rgba(255,120,100,.4); }

/* ===== タグ付けデスク（持ち込んだ曲・H/MIX語彙は無料／一般タグはスタジオパス） ===== */
.hnb-ltags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; align-items:center; }
.hnb-ltag{ font-size:10.5px; line-height:1; color:var(--gold,#caa44e); border:1px solid rgba(202,164,78,.35);
  border-radius:999px; padding:4px 9px; background:rgba(202,164,78,.07); }
.hnb-ltag--empty{ color:var(--ink-dim,#a8bcb0); border-color:rgba(255,255,255,.12); background:transparent; }
.hnb-ltag--edit{ cursor:pointer; color:var(--ink,#eef0ea); border-style:dashed; background:transparent;
  font-family:inherit; transition:border-color .2s, background .2s; }
.hnb-ltag--edit:hover{ border-color:var(--gold,#caa44e); background:rgba(202,164,78,.1); }
.hnb-tagdesk{ margin:0 18px 10px; padding:14px 16px 16px; border:1px solid rgba(202,164,78,.25); border-radius:12px;
  background:rgba(8,16,11,.5); }
.hnb-tagdesk__cat{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.26em; color:var(--gold,#caa44e);
  margin:10px 0 7px; display:flex; align-items:center; gap:10px; }
.hnb-tagdesk__cat:first-child{ margin-top:0; }
.hnb-tagdesk__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hnb-tchip{ font-family:inherit; font-size:12px; line-height:1; color:var(--ink-soft,#cdd6cc); cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 12px; background:rgba(255,255,255,.03);
  transition:color .18s, border-color .18s, background .18s; }
.hnb-tchip:hover{ border-color:rgba(202,164,78,.55); color:var(--ink,#eef0ea); }
.hnb-tchip.on{ color:#10231a; background:linear-gradient(180deg,var(--gold-bright,#ffcf6e),var(--gold,#caa44e));
  border-color:var(--gold,#caa44e); font-weight:700; }
.hnb-tagdesk__cat--locked{ color:var(--ink-dim,#a8bcb0); }
.hnb-lock{ font-family:'Noto Sans JP',sans-serif; font-size:10.5px; letter-spacing:.04em; color:var(--ink-dim,#a8bcb0); }
.hnb-tchip--locked{ opacity:.45; cursor:pointer; border-style:dashed; }
.hnb-tchip--locked:hover{ opacity:.7; border-color:rgba(202,164,78,.4); color:var(--ink-soft,#cdd6cc); }
.hnb-tagbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 18px 8px; padding:12px 16px;
  border:1px solid rgba(202,164,78,.2); border-radius:10px; background:rgba(202,164,78,.04); }
.hnb-tagbar__lbl{ font-size:12px; color:var(--ink,#eef0ea); margin-right:2px; }
.hnb-tagbar button{ font-family:inherit; font-size:11.5px; font-weight:600; color:var(--gold,#caa44e); cursor:pointer;
  border:1px solid rgba(202,164,78,.4); border-radius:8px; padding:6px 13px; background:transparent; transition:.2s; }
.hnb-tagbar button:hover{ background:rgba(202,164,78,.12); }
.hnb-tagbar__note{ flex-basis:100%; font-size:10.5px; color:var(--ink-dim,#a8bcb0); }

/* スタジオパス導線・鍵ボタン */
.hnb-tagbar__locked{ opacity:.55; border-style:dashed !important; }
.hnb-tagbar__pass{ flex-basis:100%; font-size:11.5px; color:var(--gold,#caa44e); text-decoration:none;
  letter-spacing:.03em; margin-top:2px; transition:opacity .2s; }
.hnb-tagbar__pass:hover{ opacity:.8; text-decoration:underline; }

/* /assets/css/fav-notebook-herbarium.css?v=20260906journey1 */
/*
 * Music Notebook — Herbarium production theme
 * Load after fav-notebook.css. The production DOM/API stays intact; this file
 * supplies the approved leather, parchment, botanical and alchemy visual layer.
 */

#hmix-notebook {
  --gold: #a87921;
  --gold-bright: #d3aa4d;
  --rule: rgba(92, 75, 44, .24);
  --rule-strong: rgba(139, 102, 35, .48);
  --ink: #2d2a20;
  --ink-dim: #716b58;
  --green: #54785f;
  --green-soft: #436b51;
  --paper: #f4edd5;
  --paper-light: #fbf7e8;
  --leather: #324533;
  --leather-dark: #1f3026;
  --leather-warm: #594b32;
  --wax: #8f3a36;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 69, 52, .35), transparent 46%),
    linear-gradient(135deg, rgba(4, 13, 10, .92), rgba(10, 27, 21, .88));
}

#hmix-notebook .hmix-notebook {
  width: min(1440px, 94vw);
  height: min(88vh, 900px);
  min-height: 610px;
  grid-template-columns: 230px minmax(440px, 1fr) 330px;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
  background:
    linear-gradient(rgba(249, 244, 226, .91), rgba(239, 228, 196, .94)),
    url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  border: 1px solid rgba(184, 148, 70, .7);
  border-radius: 20px 20px 14px 14px;
  box-shadow:
    0 42px 120px -26px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(244, 225, 157, .14),
    inset 0 0 70px rgba(90, 63, 25, .12);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

#hmix-notebook .hmix-notebook::before {
  inset: 7px;
  border: 1px solid rgba(123, 94, 39, .42);
  border-radius: 14px 14px 9px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 226, .48),
    inset 0 0 0 4px rgba(79, 63, 35, .13);
}

#hmix-notebook .hmix-notebook::after {
  inset: 12px;
  opacity: .72;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 1px 42px no-repeat;
}

/* Leather header */
#hmix-notebook .hnb-head {
  position: relative;
  padding: 17px 24px 15px;
  color: #f6efd9;
  border-bottom: 1px solid rgba(215, 187, 112, .4);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 36%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #42543b, #263c2e 58%, #314635);
  box-shadow: inset 0 -10px 22px rgba(10, 24, 17, .18);
}

#hmix-notebook .hnb-head__kicker {
  color: #d8bc72;
  font-family: Georgia, "Times New Roman", serif;
}

#hmix-notebook .hnb-head__title {
  color: #fff8e3;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

#hmix-notebook .hnb-head__count { color: #e1c274; }

#hmix-notebook .hnb-search {
  width: min(310px, 28vw);
  color: #fff9e9;
  background: rgba(18, 35, 25, .46);
  border-color: rgba(221, 198, 132, .4);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .2);
}

#hmix-notebook .hnb-search::placeholder { color: rgba(248, 239, 214, .7); }
#hmix-notebook .hnb-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #f8edd2;
  border-color: rgba(225, 202, 139, .42);
}

/* Leather index */
#hmix-notebook .hnb-spine {
  padding: 18px 13px 20px;
  color: #eee4c8;
  border-right: 1px solid rgba(79, 60, 29, .5);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 28%, rgba(0,0,0,.17)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #455740, #2e432f 58%, #263a2b);
  box-shadow: inset -14px 0 25px -18px #0f1c13;
}

#hmix-notebook .hnb-spine__h { color: #cbbf97; }

#hmix-notebook .hnb-chapter {
  width: calc(100% - 4px);
  margin: 0 4px 8px 0;
  padding: 12px 12px 12px 18px;
  color: #f3ead0;
  border: 1px solid rgba(226, 207, 152, .15);
  border-radius: 4px 12px 12px 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 45%),
    rgba(55, 50, 36, .36);
  box-shadow: inset -8px 0 18px rgba(0,0,0,.1);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

#hmix-notebook .hnb-chapter::before {
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 4px;
  background: #81775b;
}

#hmix-notebook .hnb-chapter:hover {
  transform: translateX(3px);
  background: rgba(105, 90, 54, .38);
}

#hmix-notebook .hnb-chapter.is-active {
  transform: translateX(5px);
  color: #fff8df;
  border-color: rgba(221, 183, 90, .54);
  background: linear-gradient(90deg, rgba(170, 126, 43, .3), rgba(72, 69, 45, .48));
  box-shadow: inset 4px 0 0 #bd9139, 0 7px 18px rgba(12, 24, 16, .18);
}

#hmix-notebook .hnb-chapter__name {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

#hmix-notebook .hnb-chapter__meta { color: #c6bea4; }
#hmix-notebook .hnb-chapter__meta b { color: #e2c878; }

#hmix-notebook .hnb-newchapter {
  color: #dfd5b9;
  border-color: rgba(222, 199, 132, .32);
}

/* Studio Pass — visible value proposition, but quieter than the main task */
#hmix-notebook .hnb-studio-pass {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 20px 3px 2px;
  padding: 13px 13px 12px;
  color: #f5ead0;
  text-decoration: none;
  border: 1px solid rgba(216, 179, 81, .38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 15%, rgba(214, 177, 80, .18), transparent 38%),
    linear-gradient(145deg, rgba(30, 47, 34, .9), rgba(70, 57, 36, .78));
  box-shadow: 0 12px 26px rgba(11, 22, 15, .18), inset 0 1px rgba(255,255,255,.06);
}

#hmix-notebook .hnb-studio-pass__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hmix-notebook .hnb-studio-pass__top b { font: 600 10px/1 Georgia, serif; letter-spacing: .16em; color: #dec57e; }
#hmix-notebook .hnb-studio-pass__top em { padding: 4px 7px; color: #2b2a1f; background: #ead893; border-radius: 999px; font: 700 10px/1 sans-serif; font-style: normal; }
#hmix-notebook .hnb-studio-pass strong { font: 600 13px/1.5 "Yu Mincho", serif; }
#hmix-notebook .hnb-studio-pass ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
#hmix-notebook .hnb-studio-pass li { position: relative; padding-left: 13px; color: #e5dcc2; font-size: 10.5px; line-height: 1.55; }
#hmix-notebook .hnb-studio-pass li::before { content: "✦"; position: absolute; left: 0; top: 0; color: #d9ba68; font-size: 8px; }
#hmix-notebook .hnb-studio-pass > span:not(.hnb-studio-pass__top) { color: #d9d0b8; font-size: 10.5px; line-height: 1.7; }
#hmix-notebook .hnb-studio-pass i { color: #e5cc83; font-size: 11px; font-style: normal; }
#hmix-notebook .hnb-studio-pass:hover { border-color: rgba(232, 202, 117, .7); transform: translateY(-1px); }

/* Paper pages */
#hmix-notebook .hnb-pages {
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(rgba(250, 246, 229, .74), rgba(244, 235, 208, .78)),
    url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  box-shadow: inset 18px 0 28px -28px rgba(62, 46, 20, .6);
}

#hmix-notebook .hnb-pages::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: 4%;
  width: min(32vw, 330px);
  aspect-ratio: 1;
  border: 1px solid rgba(104, 82, 43, .13);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 17%, rgba(105, 83, 43, .12) 17.5% 18%, transparent 18.5% 33%, rgba(105,83,43,.1) 33.5% 34%, transparent 34.5%),
    repeating-conic-gradient(from 15deg, rgba(105,83,43,.09) 0 1deg, transparent 1deg 30deg);
  opacity: .75;
  pointer-events: none;
}

#hmix-notebook .hnb-pages::after {
  content: "FIELD NOTES   ·   FOLIO 04";
  position: absolute;
  z-index: -1;
  right: 28px;
  bottom: 12px;
  color: rgba(69, 59, 40, .42);
  font: 9px/1 Georgia, serif;
  letter-spacing: .24em;
  pointer-events: none;
}

#hmix-notebook .hnb-select-tools {
  color: #403b2d;
  border-bottom-color: rgba(91, 72, 37, .22);
  background: rgba(247, 240, 216, .92);
  box-shadow: 0 7px 18px rgba(84, 64, 28, .08);
}

#hmix-notebook .hnb-select-tools__label { color: #6f5423; }
#hmix-notebook .hnb-select-tools__btn { color: #3c392e; background: rgba(255,255,255,.46); border-color: rgba(91,72,37,.3); }

#hmix-notebook .hnb-row {
  position: relative;
  z-index: 1;
  min-height: 62px;
  color: var(--ink);
  border-bottom-color: rgba(87, 70, 39, .13);
}

#hmix-notebook .hnb-row:hover { background: rgba(94, 121, 91, .085); }
#hmix-notebook .hnb-row.is-active { background: rgba(80, 116, 86, .11); }
#hmix-notebook .hnb-row.is-selected {
  background: rgba(177, 132, 47, .095);
  box-shadow: inset 4px 0 0 #b6862f, inset 0 0 0 1px rgba(169, 126, 43, .2);
}
#hmix-notebook .hnb-row.is-playing { background: rgba(80, 120, 89, .13); }
#hmix-notebook .hnb-row.is-playing .hnb-row__title { color: #2e6846; }

#hmix-notebook .hnb-check {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin: 0;
  border: 2px solid #817b67;
  border-radius: 6px;
  background: rgba(255, 253, 242, .84);
  box-shadow: inset 0 1px 2px rgba(52, 42, 24, .08);
}

#hmix-notebook .hnb-check::after {
  content: "✓";
  color: #fff9e8;
  font: 800 15px/1 sans-serif;
  transform: scale(0);
  transition: transform .12s ease;
}

#hmix-notebook .hnb-check:checked { background: #aa7926; border-color: #805812; }
#hmix-notebook .hnb-check:checked::after { transform: scale(1); }
#hmix-notebook .hnb-check:focus-visible { outline: 3px solid rgba(40, 104, 69, .28); outline-offset: 2px; }

#hmix-notebook .hnb-row__title { color: #29271f; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
#hmix-notebook .hnb-row__tags, #hmix-notebook .hnb-row__dur { color: #756f5d; }
#hmix-notebook .hnb-iconbtn { color: #716b59; }
#hmix-notebook .hnb-fav.is-on { color: #a37526; }

#hmix-notebook .hnb-badge { color: #6d6653; border-color: rgba(91,72,37,.3); background: rgba(255,255,255,.32); }
#hmix-notebook .hnb-badge[data-lic="licensed"] {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #f7e7ce;
  background: radial-gradient(circle at 35% 30%, #b1584e, var(--wax) 60%, #6e2828);
  border: 2px solid #73312f;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(52, 29, 20, .25), inset 0 0 0 2px rgba(255, 214, 178, .12);
  font-size: 0;
}
#hmix-notebook .hnb-badge[data-lic="licensed"]::after { content: "済"; font: 700 11px/1 "Yu Mincho", serif; }

/* Specimen detail */
#hmix-notebook .hnb-preview {
  gap: 13px;
  color: var(--ink);
  border-left-color: rgba(92, 75, 44, .24);
  background:
    linear-gradient(rgba(250, 246, 230, .86), rgba(239, 229, 203, .9)),
    url("/assets/images/music-notebook-herbarium-v1.webp") 78% center / cover;
  box-shadow: inset 16px 0 25px -26px rgba(68, 48, 22, .58);
}

#hmix-notebook .hnb-preview::before {
  content: "SELECTED TRACK  /  選択中の曲";
  color: #82724e;
  font: 9px/1.2 Georgia, "Yu Mincho", serif;
  letter-spacing: .18em;
}

#hmix-notebook .hnb-preview__title { color: #28261e; font-family: "Yu Mincho", serif; font-size: 19px; }
#hmix-notebook .hnb-preview__tags, #hmix-notebook .hnb-preview__empty, #hmix-notebook .hnb-preview__sect { color: #746d59; }
#hmix-notebook .hnb-wave span { background: linear-gradient(180deg, #a37b2d, rgba(66, 108, 77, .62)); }
#hmix-notebook .hnb-memo { color: #322f25; background: rgba(255, 252, 238, .56); border-color: rgba(91, 72, 37, .3); }
#hmix-notebook .hnb-ab__btn, #hmix-notebook .hnb-addch-one { color: #373328; background: rgba(255,255,255,.36); border-color: rgba(91,72,37,.27); }
#hmix-notebook .hnb-apply-one { color: #775820; border-color: rgba(145, 104, 31, .5); }

/* Footer: restrained brass hierarchy */
#hmix-notebook .hnb-foot {
  color: #f3ead1;
  border-top-color: rgba(209, 179, 103, .36);
  background:
    linear-gradient(0deg, rgba(22, 42, 29, .98), rgba(48, 69, 49, .95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px);
}

#hmix-notebook .hnb-apply-actions { grid-template-columns: 1fr 1fr; }
#hmix-notebook .hnb-download-one, #hmix-notebook .hnb-usage-one { min-height:44px; padding:10px; color:var(--ink); background:rgba(192,159,82,.12); border:1px solid rgba(140,112,60,.4); border-radius:8px; cursor:pointer; }
#hmix-notebook .hnb-cta { min-height: 48px; padding: 12px 14px; border-radius: 10px; font-size: 13px; box-shadow: none; }
#hmix-notebook .hnb-cta--download { color: #f1ead8; background: rgba(255,255,255,.06); border-color: rgba(229, 214, 173, .25); }
#hmix-notebook .hnb-cta--cue { color: #f0e4c3; background: rgba(192, 159, 82, .12); border-color: rgba(219, 190, 111, .36); }
#hmix-notebook .hnb-cta--selected { color: #2e2a1e; background: linear-gradient(180deg, #ddc06f, #b68832); border-color: #e2c875; }
#hmix-notebook .hnb-cta__sub { color: #d2c8ab; }
#hmix-notebook .hnb-bulk { color: #f6ecd2; background: rgba(38, 55, 39, .98); border-color: rgba(219,190,111,.48); }
#hmix-notebook .hnb-bulk__btn { color: #f4ead0; }

/* Production child surfaces inherit the paper/leather palette */
#hmix-notebook .hnb-picker__panel,
#hmix-notebook .hnb-wizard__panel {
  color: var(--ink);
  background:
    linear-gradient(rgba(249, 244, 225, .95), rgba(238, 227, 198, .97)),
    url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  border-color: rgba(129, 91, 26, .5);
}
#hmix-notebook .hnb-picker__head,
#hmix-notebook .hnb-picker__item,
#hmix-notebook .wz-card,
#hmix-notebook .wz-trackrow,
#hmix-notebook .wz-sum__row { color: #302d23; background: rgba(255,255,255,.35); }
#hmix-notebook .wz-input,
#hmix-notebook .wz-usage__sel { color: #302d23; background: rgba(255,252,238,.65); }

@media (max-width: 960px) and (min-width: 761px) {
  #hmix-notebook .hmix-notebook { grid-template-columns: 205px minmax(390px, 1fr) 285px; }
}

@media (max-width: 760px) {
  #hmix-notebook { background: linear-gradient(180deg, rgba(13, 34, 25, .9), rgba(7, 19, 14, .96)); }
  #hmix-notebook .hmix-notebook {
    width: 100vw;
    height: 94dvh;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    border-radius: 18px 18px 0 0;
    background: #f5eed7;
  }
  #hmix-notebook .hnb-head { padding: 12px 14px; }
  #hmix-notebook .hnb-search { width: 100%; }
  #hmix-notebook .hnb-spine {
    padding: 9px 11px;
    gap: 7px;
    background: linear-gradient(90deg, #334936, #263d2e);
  }
  #hmix-notebook .hnb-chapter { width: auto; margin: 0; padding: 9px 13px 9px 17px; border-radius: 7px 12px 12px 7px; }
  #hmix-notebook .hnb-chapter.is-active { transform: none; }
  #hmix-notebook .hnb-newchapter { color: #e2d7b8; }
  #hmix-notebook .hnb-studio-pass {
    flex: 0 0 210px;
    margin: 0;
    padding: 9px 11px;
    gap: 3px;
    border-radius: 9px;
  }
  #hmix-notebook .hnb-studio-pass > span:not(.hnb-studio-pass__top),
  #hmix-notebook .hnb-studio-pass ul,
  #hmix-notebook .hnb-studio-pass i { display: none; }
  #hmix-notebook .hnb-studio-pass strong { font-size: 11.5px; }
  #hmix-notebook .hnb-pages {
    background:
      linear-gradient(rgba(250, 246, 231, .9), rgba(241, 232, 207, .92)),
      url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  }
  #hmix-notebook .hnb-pages::before { width: 210px; opacity: .38; right: -40px; }
  #hmix-notebook .hnb-pages::after { display: none; }
  #hmix-notebook .hnb-select-tools { padding: 7px 11px; }
  #hmix-notebook .hnb-row { min-height: 58px; padding: 9px 12px; gap: 8px; }
  #hmix-notebook .hnb-check { width: 22px; height: 22px; }
  #hmix-notebook .hnb-badge[data-lic="licensed"] { width: 30px; height: 30px; }
  #hmix-notebook .hnb-preview {
    color: var(--ink);
    background:
      linear-gradient(rgba(250,246,230,.95), rgba(239,229,203,.97)),
      url("/assets/images/music-notebook-herbarium-v1.webp") 70% center / cover;
    border-top-color: rgba(129, 91, 26, .54);
  }
  #hmix-notebook .hnb-foot { padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  #hmix-notebook .hnb-apply-actions { grid-template-columns: 1fr 1.08fr; }
  #hmix-notebook .hnb-cta--download { display: block; }
  #hmix-notebook .hnb-cta { min-height: 45px; padding: 10px 8px; font-size: 12px; }
  #hmix-notebook .hnb-cta__sub { margin-top: 5px; font-size: 11px; white-space:normal; overflow-wrap:anywhere; line-height:1.6; }
}

@media (prefers-reduced-motion: reduce) {
  #hmix-notebook .hnb-chapter,
  #hmix-notebook .hnb-studio-pass { transition: none; }
}

/* /assets/css/discovery.css?v=20260907glass1 */
.hmix-discovery{margin:1.5rem 0;padding:1.3rem;border:1px solid #aa8e5e66;border-radius:12px;background:#152b22;color:#f1e8ce;font:inherit;line-height:1.7}.hmix-discovery h2{font-size:1.25rem;margin:0 0 .7rem}.hmix-discovery p{color:inherit}.hmix-discovery a{color:#f2d393;text-decoration:underline;text-underline-offset:4px}.hmix-discovery__links{display:flex;flex-wrap:wrap;gap:.8rem}.hmix-discovery__links a{padding:.7rem 1rem;border:1px solid #bca87970;border-radius:8px;min-height:44px;box-sizing:border-box}.genre-track__detail,.genre-track__download{padding:10px;color:inherit;white-space:nowrap}.genre-track__link:before{content:'▶';margin-right:.65rem;font-size:.75rem}.genre-track{flex-wrap:wrap}.genre-track__link{min-width:0}.hnb-cue-controls{font-size:12px;line-height:1.6}.hnb-cue-controls label{display:inline-flex;gap:5px;align-items:center;margin:4px 8px 4px 0}.hnb-cue-controls input{width:5.5em;max-width:100%;padding:7px;border:1px solid #897653;border-radius:5px;background:#fff9e9;color:#2c392c}.hnb-cue-controls button{padding:9px 12px;margin:5px 5px 5px 0;border:1px solid #897653;border-radius:5px;background:#efe3bd;color:#253a2c;cursor:pointer}.hnb-wave{min-height:64px;gap:1px!important;cursor:crosshair}.hnb-wave span{min-width:1px!important;flex:1}.hnb-cue-controls :focus-visible,.hmix-discovery :focus-visible,.genre-track :focus-visible{outline:3px solid #daa84b;outline-offset:3px}@media(max-width:600px){.genre-track__link{flex:1 1 calc(100% - 52px)}.genre-track__detail,.genre-track__download{font-size:13px}.hmix-discovery{padding:1rem}.hmix-discovery__links a{flex:1 1 120px}}
.genre-track{grid-template-columns:minmax(0,1fr) auto auto 48px;align-items:stretch}
.genre-track__link{grid-template-columns:14px minmax(0,1fr) minmax(0,.6fr) 3.5rem;padding-left:10px;background:none}
.genre-track__link:before{margin:0;color:#38662d}
.genre-track__detail,.genre-track__download{align-self:stretch;display:flex;align-items:center;justify-content:center;color:#315d2c;border-bottom:1px solid #d9d9d3;font-size:13px}
@media(max-width:600px){.genre-track__link{grid-column:1/4;grid-template-columns:14px minmax(0,1fr) 3rem}.genre-track__title-en{display:none}.genre-track__fav{grid-column:4;grid-row:1}.genre-track__detail{grid-column:1/3;grid-row:2}.genre-track__download{grid-column:3/5;grid-row:2}}

/* Next-candidate navigation stays reachable on narrow cards and sheets. */
.ml-neighbor-link,.hnb-neighbor-link{display:block;min-height:44px;padding:11px 16px;margin-top:12px;border:1px solid rgba(126,203,149,.25);border-radius:12px;background:linear-gradient(150deg,rgba(126,203,149,.12),rgba(12,34,24,.2));color:var(--color-green-light,#c2dfc8);font:400 .78rem/1.65 var(--font-sans-jp,sans-serif);letter-spacing:.04em;text-align:center;text-decoration:none;cursor:pointer;position:relative;z-index:2;width:100%;box-sizing:border-box;box-shadow:inset 0 1px 0 rgba(221,255,231,.08);transition:background .2s,border-color .2s}
.ml-neighbor-reason{font:400 .72rem/1.8 var(--font-sans-jp,sans-serif);color:var(--color-text-muted,#b5c8b9);margin:14px 0 0;letter-spacing:.025em}
.ml-neighbor-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ml-neighbor-controls button{min-height:44px;padding:10px 16px;border:1px solid rgba(126,203,149,.24);border-radius:999px;background:rgba(15,39,28,.3);color:var(--color-text-muted,#b5c8b9);font:400 .78rem/1.65 var(--font-sans-jp,sans-serif);letter-spacing:.035em;cursor:pointer;transition:background .2s,border-color .2s}
.ml-neighbor-controls button[aria-pressed=true]{background:linear-gradient(145deg,rgba(84,153,106,.38),rgba(25,77,46,.5));color:#e1f3e4;border-color:rgba(153,218,174,.55);box-shadow:inset 0 1px 0 rgba(221,255,231,.16);font-weight:500}
.ml-neighbor-controls button:not([aria-pressed]){border-color:transparent;background:transparent;color:var(--color-text-muted,#b5c8b9);text-decoration:underline;text-decoration-color:rgba(181,200,185,.35);text-underline-offset:5px}
#ml-neighbors{padding:24px 28px;border:1px solid rgba(126,203,149,.22);border-radius:18px;background:linear-gradient(150deg,rgba(37,63,49,.55),rgba(12,25,20,.65));backdrop-filter:blur(24px) saturate(1.05);-webkit-backdrop-filter:blur(24px) saturate(1.05);box-shadow:inset 0 1px 0 rgba(215,247,224,.13),0 12px 30px -10px rgba(0,10,5,.4);color:var(--color-text,#dce9df);font:400 .82rem/1.9 var(--font-sans-jp,sans-serif);letter-spacing:.025em}
#ml-neighbors h2{margin:0 0 12px;font:500 1.12rem/1.8 var(--font-serif-jp,serif);letter-spacing:.065em;color:var(--color-text,#dce9df)}
#ml-neighbors p{margin:0;color:var(--color-text-muted,#b5c8b9);font-weight:400}
#ml-neighbors p[role=status]{margin-top:18px;padding-top:14px;border-top:1px solid rgba(126,203,149,.13);font-size:.72rem;letter-spacing:.06em}
#hmix-notebook .hnb-neighbor-link{color:#625131;border-color:rgba(91,72,37,.27);background:rgba(255,255,255,.24);font-family:var(--font-sans-jp,sans-serif);box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
@media(hover:hover){.ml-neighbor-link:hover,.ml-neighbor-controls button:hover{border-color:rgba(153,218,174,.65);background-color:rgba(84,153,106,.22)}#hmix-notebook .hnb-neighbor-link:hover{background:rgba(192,159,82,.14);border-color:rgba(145,104,31,.5)}}
@media(max-width:600px){#ml-neighbors{padding:20px 18px}#ml-neighbors h2{font-size:1rem}.ml-neighbor-controls{gap:6px}.ml-neighbor-controls button{padding:10px 12px;font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.ml-neighbor-link,.hnb-neighbor-link,.ml-neighbor-controls button{transition:none}}
#ml-neighbors[hidden]{display:none}#ml-neighbors{scroll-margin-top:90px;grid-column:1/-1}.hnb-cue-controls button{min-height:44px}.ml-neighbor-link:focus-visible,.hnb-neighbor-link:focus-visible{outline:3px solid #daa84b;outline-offset:3px}
.hnb-export-ready{display:block;min-height:44px;padding:12px;border:1px solid #b8954b;border-radius:8px;color:#f1d69b;text-align:center;font:inherit;box-sizing:border-box}
@media(max-width:760px){.hnb-preview:not(.is-open){visibility:hidden}.hnb-preview.is-open{visibility:visible}}
.hnb-zip-cancel{min-height:44px;padding:10px;border:1px solid #b8954b;border-radius:8px;background:#40352a;color:#ffe5ad;font:inherit;cursor:pointer}.hnb-zip-cancel[hidden]{display:none}

/* /assets/css/filter-navigation.css?v=20260907nav1 */
/* All category entrances stay visible; only the tag pane scrolls. */
body.library-page--dark .ml-left-rail:has([data-filter-nav]){overflow:visible;max-height:none;padding-right:0}
.ml-filter-nav-dialog:not(:modal){display:contents}
body.library-page--dark .ml-left-tag-list[data-filter-nav]{display:flex;flex-direction:column;max-height:calc(100dvh - 185px);margin:0;border:1px solid rgba(153,218,174,.25);border-radius:20px;background:linear-gradient(145deg,rgba(46,75,57,.62),rgba(10,27,20,.8));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(224,255,235,.16),0 20px 50px -24px #000;overflow:hidden}
body.library-page--dark [data-filter-nav] .ml-left-tag-list__header{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:20px 18px 0;border:0;background:none;font:500 1rem/1.6 var(--font-serif-jp);letter-spacing:.06em}
[data-filter-nav] .ml-left-tag-list__header>svg{display:none}
body.library-page--dark [data-filter-nav] .ml-left-reset-btn{display:block;margin-left:auto;min-height:36px;padding:6px 8px;font:400 .68rem/1.6 var(--font-sans-jp);border:0;background:none;color:var(--color-text-muted);text-decoration:underline;text-underline-offset:4px}
.ml-filter-nav-intro{flex:none;margin:8px 18px 16px;font:400 .72rem/1.85 var(--font-sans-jp);color:var(--color-text-muted)}
.ml-filter-nav-tabs{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 14px 14px;border-bottom:1px solid rgba(153,218,174,.13)}
.ml-filter-nav-tab{min-height:44px;padding:8px 3px;border:1px solid transparent;border-radius:10px;background:rgba(5,22,15,.2);font:400 .73rem/1.6 var(--font-sans-jp);color:var(--color-text-muted);cursor:pointer}
.ml-filter-nav-tab[aria-selected=true]{color:#e5f4e7;background:linear-gradient(145deg,rgba(112,183,131,.26),rgba(42,94,61,.4));border-color:rgba(161,224,180,.45);box-shadow:inset 0 1px 0 rgba(225,255,234,.17)}
.ml-filter-nav-panes{min-height:70px;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;scrollbar-width:thin;scrollbar-color:#729b7c transparent;flex:1 1 auto}
body.library-page--dark [data-filter-nav] .ml-left-tag-group{border:0;padding:0;margin:0}
body.library-page--dark [data-filter-nav] .ml-left-tag-group[data-filter-active=false]{display:none!important}
body.library-page--dark [data-filter-nav] .ml-left-tag-group[data-filter-active=true]{display:block!important}
body.library-page--dark [data-filter-nav] .ml-left-tag-group__title{display:none!important}
body.library-page--dark [data-filter-nav] .ml-left-tag-group__chips{display:flex!important;flex-wrap:wrap;gap:8px;padding:0;max-height:none;opacity:1;visibility:visible}
body.library-page--dark [data-filter-nav] .ml-chip{min-height:40px;padding:8px 12px;font:400 .76rem/1.6 var(--font-sans-jp);border-radius:999px;letter-spacing:.025em;transform:none!important;filter:none!important}
body.library-page--dark [data-filter-nav] .ml-chip[aria-pressed=true]{background:rgba(100,148,99,.3)!important;border-color:#afc889!important;color:#f1f2cc!important;box-shadow:inset 0 1px 0 rgba(255,255,220,.15)!important;text-shadow:none!important;animation:none!important}
body.library-page--dark [data-filter-nav] .ml-chip[aria-pressed=true]::before{content:'✓';margin-right:5px}
.ml-filter-nav-hint{flex:none;margin:0;padding:6px 14px;font:400 .65rem/1.6 var(--font-sans-jp);color:#b7ccbc;background:rgba(6,23,15,.3)}
.ml-filter-nav-hint[hidden],.ml-filter-nav-empty[hidden]{display:none}
.ml-filter-nav-selected{flex:none;padding:12px 14px;border-top:1px solid rgba(153,218,174,.16);background:rgba(8,22,15,.2)}
.ml-filter-nav-label{margin:0 0 7px;font:400 .65rem/1.6 var(--font-sans-jp);letter-spacing:.06em;color:var(--color-text-muted)}
.ml-filter-nav-selected-chips{display:flex;gap:6px;flex-wrap:wrap;max-height:78px;overflow:auto}
.ml-filter-nav-condition{min-height:32px;padding:5px 9px;border-radius:7px;border:1px solid rgba(204,192,133,.3);background:rgba(184,161,80,.1);color:#e0d8b2;font:400 .7rem/1.6 var(--font-sans-jp);cursor:pointer}
.ml-filter-nav-empty{margin:0;font:400 .72rem/1.8 var(--font-sans-jp);color:var(--color-text-muted)}
.ml-filter-nav-done{flex:none;min-height:46px;margin:0 14px 14px;border:1px solid rgba(168,219,171,.4);border-radius:12px;background:linear-gradient(145deg,rgba(98,164,113,.35),rgba(30,77,44,.6));color:#e0efdd;font:500 .8rem/1.7 var(--font-sans-jp);letter-spacing:.05em;cursor:pointer}
.ml-filter-nav-trigger,.ml-filter-nav-close{display:none}
.ml-filter-nav-dialog::backdrop{background:rgba(3,12,8,.7);backdrop-filter:blur(8px)}
#ml-results-bar{scroll-margin-top:90px}
[data-filter-nav] button:focus-visible,.ml-filter-nav-trigger:focus-visible{outline:2px solid #e4d497;outline-offset:3px}
@media(hover:hover){.ml-filter-nav-tab:hover,.ml-filter-nav-done:hover{border-color:#a8dbaa}.ml-filter-nav-condition:hover{background:rgba(184,161,80,.22)}}
@media(max-width:760px),(max-height:540px){
 body.library-page--dark .ml-left-rail:has([data-filter-nav]){position:static}
 .ml-filter-nav-trigger{display:block;width:100%;min-height:52px;padding:12px 18px;border:1px solid rgba(153,218,174,.38);border-radius:14px;background:linear-gradient(145deg,rgba(57,101,69,.65),rgba(12,35,24,.75));backdrop-filter:blur(18px);color:#dbecdb;font:500 .9rem/1.7 var(--font-serif-jp);letter-spacing:.08em;cursor:pointer}
 .ml-filter-nav-dialog:not([open]){display:none}
 .ml-filter-nav-dialog:modal{display:block;position:fixed;inset:auto 0 0;width:min(100%,520px);max-width:100%;height:auto;max-height:calc(100dvh - 16px);padding:0;margin:0 auto;border:0;background:transparent;overflow:visible;color:var(--color-text)}
 body.library-page--dark .ml-filter-nav-dialog:modal .ml-left-tag-list[data-filter-nav]{max-height:calc(100dvh - 16px);border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(145deg,rgba(38,67,49,.96),rgba(10,27,20,.98))}
 body.library-page--dark [data-filter-nav] .ml-left-tag-list__header{padding:18px 18px 0;align-items:center}
 .ml-filter-nav-close{display:block;width:44px;height:44px;border:1px solid rgba(153,218,174,.25);border-radius:50%;background:rgba(8,28,18,.3);color:#d3e9d8;font:400 24px/1 sans-serif;cursor:pointer}
 .ml-filter-nav-tabs{padding-left:18px;padding-right:18px}.ml-filter-nav-tab{font-size:.8rem}
 .ml-filter-nav-panes{padding:18px;max-height:36dvh}
 .ml-filter-nav-selected{padding:12px 18px}.ml-filter-nav-done{margin:0 18px 18px;min-height:48px}
 body.library-page--dark [data-filter-nav] .ml-chip{min-height:44px}
}
@media(max-height:600px){.ml-filter-nav-intro{display:none}.ml-filter-nav-tabs{padding-top:8px;gap:4px}.ml-filter-nav-selected-chips{max-height:38px}body.library-page--dark .ml-left-tag-list[data-filter-nav]{max-height:calc(100dvh - 105px)}}

@media(max-height:440px){
 body.library-page--dark [data-filter-nav] .ml-left-tag-list__header{padding:6px 14px 0}
 .ml-filter-nav-tabs{padding:6px 14px;gap:4px}
 .ml-filter-nav-label{display:none}.ml-filter-nav-selected{padding:6px 14px}
 .ml-filter-nav-panes{padding:8px 14px;min-height:44px}
 .ml-filter-nav-done{min-height:44px;margin:0 14px 8px}
}

/* /assets/css/library-card-layout.css?v=20260907cards1 */
/* One primary action row, compact utilities, and a shared quiet footer. */
body.library-page .ml-card .ml-card-actions{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;width:100%;min-width:0;flex-wrap:unset;margin-top:auto}
body.library-page .ml-card .ml-card-actions>.ml-btn-play,body.library-page .ml-card .ml-card-actions>.ml-btn-dl{display:flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;width:100%;min-width:0;min-height:42px;height:auto;padding:9px 10px;margin:0;border-radius:11px;font:500 12px/1.5 var(--font-sans-jp,sans-serif);white-space:nowrap;flex:none;opacity:1;visibility:visible}
body.library-page .ml-card .ml-card-actions>.ml-btn-dl{border:1px solid #c8d4ad66;background:linear-gradient(145deg,#bacfa019,#6c956b0d);color:#e1e5c7;text-decoration:none;box-shadow:inset 0 1px 0 #efffdc14}
body.library-page .ml-card .ml-card-actions>.ml-btn-dl:hover{background:#b6cf9526;border-color:#c8d4ad99}
body.library-page .ml-card .ml-card-secondary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:8px 0 0}
body.library-page .ml-card .ml-card-secondary .ml-btn-tools{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;flex:0 1 auto;width:auto;min-width:0;min-height:32px;height:auto;padding:5px 7px;border:0;border-radius:7px;background:none;box-shadow:none;color:#b6c8ac;font:400 11px/1.5 var(--font-sans-jp,sans-serif);letter-spacing:0;text-shadow:none}
body.library-page .ml-card .ml-card-secondary .ml-btn-tools:before,body.library-page .ml-card .ml-card-secondary .ml-btn-tools:after,body.library-page .ml-card .ml-card-secondary .tools-pip{display:none}
body.library-page .ml-card .ml-card-secondary .tools-glyph{width:14px;height:14px;margin:0;padding:0;background:none;box-shadow:none;border:0;animation:none}
body.library-page .ml-card .ml-card-secondary .ml-btn-tools:hover{color:#e1e9ce;background:#acc79512}
body.library-page .ml-card .ml-card-secondary .ml-card-icon-actions{display:flex;flex:0 0 auto;width:auto;gap:5px;margin:0}
body.library-page .ml-card .ml-card-secondary .ml-btn-detail,body.library-page .ml-card .ml-card-secondary .ml-btn-fav{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border-color:#b9d1a72b;background:#0b251511}
body.library-page .ml-card .ml-card-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;margin:12px 0 0;padding-top:9px;border-top:1px solid #c0d5ae26}
body.library-page .ml-card .ml-card-footer>.ml-neighbor-link,body.library-page .ml-card .ml-card-footer>.hmt-card-entry{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;min-height:34px;margin:0;padding:6px 3px;border:0;border-radius:7px;background:none;box-shadow:none;color:#becdaf;font:400 11px/1.65 var(--font-sans-jp,sans-serif);letter-spacing:.025em;text-decoration:none;text-align:center;cursor:pointer;white-space:normal}
body.library-page .ml-card .ml-card-footer>.hmt-card-entry{border-left:1px solid #c0d5ae26;border-radius:0 7px 7px 0}
body.library-page .ml-card .ml-card-footer>button:hover{background:#b1c59b12;color:#e7e7c4}
body.library-page .ml-card .ml-card-footer svg{flex:none;width:13px;height:13px;opacity:.8}
body.library-page .ml-card .hmt-community-words{margin:8px 0 0;padding-top:3px;font-size:10px;gap:5px}
body.library-page .ml-card .ml-neighbor-reason{margin:8px 0 0;font-size:11px;line-height:1.7}
@media(max-width:420px){body.library-page .ml-card .ml-card-actions{gap:8px}body.library-page .ml-card .ml-card-actions>.ml-btn-play,body.library-page .ml-card .ml-card-actions>.ml-btn-dl{padding:9px 6px;font-size:11px}body.library-page .ml-card .ml-card-secondary{gap:5px}}

/* /assets/css/library-readability.css?v=20260920finish1 */
/* Library refinement: keep the forest and existing type families; bring selection forward. */
body.library-page--dark .music-library-hero {
  /* scenic-bg is z:1. Keep readable controls above its image, as the results already are. */
  z-index: 3;
  padding: 92px 24px 20px;
}
body.library-page--dark .music-library-hero__eyebrow { margin: 0 0 8px; }
body.library-page--dark .music-library-hero__title { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.06; }
body.library-page--dark .music-library-hero__title-sub { margin-top: 8px; color: #d4e1cf; font-size: .95rem; letter-spacing: .15em; }
body.library-page--dark .music-library-hero__title::after { margin-top: 14px; }
body.library-page--dark .music-library-hero__lead { margin-top: 10px; font-size: 16px; line-height: 1.75; }
body.library-page--dark .music-library-hero__sublead { margin-top: 6px; color: #c2d4c2; font-size: 13px; line-height: 1.7; }
body.library-page--dark .music-library-hero__search-wrap {
  max-width: 760px;
  margin-top: 18px;
  padding: 7px;
  background: linear-gradient(140deg, rgba(25, 47, 33, .95), rgba(9, 25, 16, .96));
  border-color: rgba(181, 198, 141, .55);
  box-shadow: inset 0 1px 0 rgba(230, 236, 194, .15), 0 10px 30px rgba(0, 0, 0, .3);
}
body.library-page--dark .music-library-hero__search { height: 48px; padding-right: 52px; color: #f0f3df; font-size: 16px; background: rgba(3, 15, 9, .38); }
body.library-page--dark .music-library-hero__search::placeholder { color: #c5d5be; opacity: 1; }
body.library-page--dark .music-library-hero__search-icon { color: #d5dbb5; opacity: .95; }
body.library-page--dark .music-library-hero__search:focus { box-shadow: inset 0 0 0 2px #c5ce94, 0 0 0 3px rgba(197, 206, 148, .16); }
body.library-page--dark .ml-search-clear { width: 44px; height: 44px; right: 3px; color: #d5dfc8; }
body.library-page--dark .ml-search-clear[hidden] { display: none; }
body.library-page--dark .ml-search-clear:focus-visible { outline: 2px solid #dfd499; outline-offset: 1px; }
body.library-page--dark .ml-search-help { margin: 8px auto 0; font-size: 13px; line-height: 1.75; color: #d4dfc9; text-shadow: 0 1px 5px #07150c, 0 0 12px #07150c; }
body.library-page--dark .music-library-hero__quick-tags { margin-top: 12px; gap: 8px; }
body.library-page--dark .music-library-hero__quick-tag { min-height: 40px; color: #dbe4ce; border-color: rgba(173, 197, 147, .38); background: rgba(15, 35, 23, .78); font-size: 13px; }
body.library-page--dark .music-library-hero__quick-tag-label { color: #c8d7c3; }
body.library-page--dark .ml-layout-top-tags { margin-top: 8px; }
body.library-page--dark .ml-layout-top-tags .ml-qs-card,
body.library-page--dark .ml-layout-top-tags .ml-scene-card { min-height: 64px; }
body.library-page--dark .ml-layout-shell[data-local-layout="columns"] { margin-top: 16px; }
body.library-page--dark .ml-results-hint { color: #c4d4bd; }

@media (min-width: 521px) {
  /* The illustrated scene entrances below already offer these popular filters. */
  body.library-page--dark .music-library-hero__quick-tags { display: none; }
  body.library-page--dark #ml-quick-scene { position: relative; z-index: 3; padding: 0 24px; }
  body.library-page--dark #ml-quick-scene .ml-quick-scene-inner { max-width: 1180px; margin: 0 auto; }
  body.library-page--dark #ml-quick-scene .ml-qs-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 7px;
    min-height: 64px;
    padding: 10px;
    align-content: center;
    text-align: left;
  }
  body.library-page--dark #ml-quick-scene .ml-qs-icon { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 30px; margin: 0; align-self: center; }
  body.library-page--dark #ml-quick-scene .ml-qs-icon svg { width: 30px; height: 30px; }
  body.library-page--dark #ml-quick-scene .ml-qs-label { grid-column: 2; grid-row: 1; margin: 0; font-size: 11px; }
  body.library-page--dark #ml-quick-scene .ml-qs-label-jp { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; color: #c5d8bd; }
}

/* A comfortable reading size without replacing the existing serif/sans roles. */
body.library-page--dark .ml-filter-nav-intro,
body.library-page--dark .ml-filter-nav-empty { font-size: 13px; color: #c7d8c8; }
body.library-page--dark .ml-filter-nav-hint,
body.library-page--dark .ml-filter-nav-label { font-size: 12px; color: #c3d3bd; }
body.library-page--dark [data-filter-nav] .ml-left-reset-btn { font-size: 12px; color: #d0dbc5; }
body.library-page--dark .ml-filter-nav-tab { font-size: 13px; color: #cbdcc9; }

@media (max-width: 820px) {
  body.library-page--dark .music-library-hero { padding: 86px 20px 16px; }
  body.library-page--dark .music-library-hero__title { font-size: clamp(32px, 6.4vw, 48px); }
}
@media (max-width: 520px) {
  body.library-page--dark .music-library-hero { padding: 78px 16px 12px; min-height: 340px; }
  body.library-page--dark .music-library-hero__title { font-size: clamp(28px, 8.2vw, 38px); }
  body.library-page--dark .music-library-hero__title-sub { font-size: 13px; margin-top: 7px; }
  body.library-page--dark .music-library-hero__title::after { margin-top: 10px; }
  body.library-page--dark .music-library-hero__lead { margin-top: 10px; font-size: 14px; line-height: 1.7; }
  body.library-page--dark .music-library-hero__search-wrap { margin-top: 12px; padding: 5px; }
  body.library-page--dark .music-library-hero__search { height: 46px; padding-left: 39px; }
  body.library-page--dark .music-library-hero__search-icon { left: 14px; }
  body.library-page--dark .ml-search-help { padding: 0 4px; font-size: 12px; line-height: 1.7; text-align: left; }
  body.library-page--dark .music-library-hero__quick-tags { margin-top: 10px; gap: 6px; }
  body.library-page--dark .music-library-hero__quick-tag { min-height: 44px; }
  body.library-page--dark .ml-layout-shell[data-local-layout="columns"] { margin-top: 10px; }
}

/* Touch-first cards: retain the existing materials and type families. */
@media (max-width: 768px) {
  body.library-page .ml-card .ml-card-actions > .ml-btn-play,
  body.library-page .ml-card .ml-card-actions > .ml-btn-dl {
    min-height: 44px;
    font-size: 12px;
  }
  body.library-page .ml-card .ml-card-secondary .ml-btn-tools {
    min-height: 44px;
    font-size: 12px;
  }
  body.library-page .ml-card .ml-card-secondary .ml-btn-detail,
  body.library-page .ml-card .ml-card-secondary .ml-btn-fav {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  body.library-page .ml-card .ml-card-footer > .ml-neighbor-link,
  body.library-page .ml-card .ml-card-footer > .hmt-card-entry {
    box-sizing: border-box;
    min-height: 44px;
    font-size: 12px;
  }
  body.library-page .ml-card .ml-card-inner .hmt-community-words,
  body.library-page .ml-card .hmt-word-group > .hmt-word-label,
  body.library-page .ml-card .ml-neighbor-reason { font-size: 12px; }
  body.library-page .ml-card .hmt-word-group { gap: 4px 8px; }
  body.library-page .ml-card .hmt-word-group a {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    min-width: 44px;
  }
  body.library-page .ml-card .hmt-words-more > summary {
    font-size: 12px;
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 10px;
  }
}

/* All screen sizes: legible text on an opaque forest-green reading surface. */
body.library-page .ml-card .ml-card-inner { background:linear-gradient(145deg,rgba(18,39,28,.97),rgba(11,28,20,.96)); }
body.library-page .ml-card .ml-card-desc { font-size:14px; line-height:1.8; color:#d3dfcf; }
body.library-page .ml-card .ml-card-tag { font-size:12px; color:#dbe9cf; }
body.library-page .ml-card .ml-card-meta-badge,
body.library-page .ml-card .ml-card-duration { font-size:12px; color:#d3dfcf; }
body.library-page .ml-card .ml-card-actions > a,
body.library-page .ml-card .ml-card-actions > button,
body.library-page .ml-card .ml-card-secondary > button,
body.library-page .ml-card .ml-card-secondary > a,
body.library-page .ml-card .ml-card-footer > button,
body.library-page .ml-card .ml-card-footer > a { min-height:44px; font-size:13px; }
body.library-page .ml-card .ml-card-secondary > .ml-btn-detail,
body.library-page .ml-card .ml-card-secondary > .ml-btn-fav { width:44px; height:44px; min-width:44px; }
body.library-page .ml-card .hmt-word-group > .hmt-word-label,
body.library-page .ml-card .hmt-community-words,
body.library-page .ml-card .ml-neighbor-reason { font-size:12px; color:#cdd9c6; }
body.library-page .ml-card .hmt-word-group a { font-size:12px; color:#d4e2c9; }
body.library-page .ml-card .ml-card-title { overflow-wrap:anywhere; }
body.library-page--dark #ml-quick-scene .ml-qs-label { font-size:12px; }
@media(max-width:520px) { body.library-page .ml-card .ml-card-desc { -webkit-line-clamp:3; } }

/* /assets/css/journey-guide.css?v=20260920finish2 */
/* Wayfinding: an engraved guide beneath the existing scenic entrances. */
.journey-guide { position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:24px; color:#e8e4cc; }
.journey-guide__title { margin:0 0 10px; font:500 1.15rem/1.6 var(--font-serif-jp,serif); color:#f1e5bd; }
.journey-guide__intro { margin:0 0 16px; font-size:14px; line-height:1.8; color:#d0dacb; }
.journey-guide__routes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid #8f8753; background:linear-gradient(110deg,#14281e,#202b20); }
.journey-guide__routes a { display:flex; flex-direction:column; justify-content:center; gap:5px; min-height:84px; padding:14px 18px; color:#f2e2b2; text-decoration:none; border-inline-end:1px solid #576044; overflow-wrap:anywhere; }
.journey-guide__routes a:last-child { border-inline-end:0; }
.journey-guide__routes strong { font:500 16px/1.5 var(--font-serif-jp,serif); }
.journey-guide__routes span { color:#d0dacb; font-size:13px; line-height:1.65; }
.journey-guide a:focus-visible,.library-start a:focus-visible,.library-start summary:focus-visible { outline:2px solid #f0d780; outline-offset:3px; }
.journey-guide__routes a:hover { background:#304331; }
.library-start { position:relative; z-index:3; max-width:760px; margin:12px auto 0; text-align:left; color:#e4e8d2; }
.library-start__row { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; }
.library-start__jump { display:inline-flex; align-items:center; min-height:44px; padding:6px 16px; border:1px solid #acaa71; border-radius:24px; background:#213b2a; color:#f2e6bb; font-size:14px; }
.library-start summary { cursor:pointer; display:list-item; min-height:44px; padding:10px 0; font-size:13px; color:#e0ddbc; }
.library-start details { flex:1; min-width:190px; }
.library-start__help { padding:12px 16px; margin:4px 0; border-left:2px solid #b7a966; background:#14281f; font-size:14px; line-height:1.9; }
.library-start__help a { color:#f1d687; display:inline-flex; min-height:44px; align-items:center; margin-right:16px; }
.library-start__help p { margin:0 0 8px; }
#ml-results-bar { scroll-margin-top:90px; }
#ml-results-bar:focus { outline:2px solid #d4c47e; outline-offset:4px; }
@media(max-width:600px) { .journey-guide {padding:20px 16px;} .journey-guide__routes{grid-template-columns:repeat(2,minmax(0,1fr));} .journey-guide__routes a:nth-child(2){border-inline-end:0;} .journey-guide__routes a:nth-child(-n+2){border-bottom:1px solid #576044;} }

.library-start__help button {font:inherit; color:#f1d687; display:inline-flex; min-height:44px; align-items:center; margin-right:16px; padding:0; border:0; background:transparent; text-decoration:underline; cursor:pointer;}
.library-start__help button:focus-visible {outline:2px solid #f0d780;outline-offset:3px;}

/* Four paths on one engraved rail; icons and open spacing avoid a table-like grid. */
.journey-guide__routes {gap:10px; padding:12px 0; background:radial-gradient(ellipse at center,rgba(38,61,40,.65),rgba(11,25,17,.3));}
.journey-guide__routes a {position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;align-content:center;border:0;border-radius:6px;}
.journey-guide__routes a::before {content:'♫';grid-row:1 / 3;align-self:center;font-family:serif;font-size:27px;color:#d8c080;text-shadow:0 0 18px rgba(216,192,128,.35);}
.journey-guide__routes a:nth-child(2)::before {content:'♡';}
.journey-guide__routes a:nth-child(3)::before {content:'✦';}
.journey-guide__routes a:nth-child(4)::before {content:'▷';}
.journey-guide__routes strong,.journey-guide__routes span {grid-column:2;}
@media(max-width:600px){.journey-guide__routes{gap:4px;}.journey-guide__routes a{padding:12px 8px;column-gap:8px;}.journey-guide__routes a:nth-child(-n+2){border-bottom:0;}}
@media(max-width:420px){
 .journey-guide__routes{grid-template-columns:1fr;gap:0;}
 .journey-guide__routes a{min-height:76px;padding:10px 12px;column-gap:16px;}
 .journey-guide__routes a::before{justify-self:center;}
}