.leveling-guide { line-height:1.6; }
.level-heading { margin-bottom:20px; }
.level-heading h1 { margin:7px 0 10px; color:#f0dfc1; font:600 clamp(30px,3vw,42px)/1.15 var(--serif); }
.level-heading > p { max-width:76ch; margin:0; color:#cbc3b4; font-size:16px; }
.level-nav-hint { display:none; margin:0 0 6px; color:#cbb58d; font-size:12px; }
.level-nav { display:flex; gap:7px; overflow-x:auto; overscroll-behavior-inline:contain; max-width:100%; padding:0 0 8px; margin:0 0 22px; scrollbar-width:thin; scrollbar-color:#826d4b #111915; }
.level-nav a { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid #5d5038; border-radius:3px; background:#111915; color:#ead4ac; font-size:14px; font-weight:600; text-decoration:none; }
.level-nav a[aria-current="page"] { border-color:#c19960; background:#473724; color:#fff0d0; }
.level-nav a:hover,.level-related a:hover,.level-pagination a:hover { color:#fff1d5; border-color:#bc9663; }
.level-nav a:focus-visible,.level-index-card:focus-visible,.level-related a:focus-visible,.level-pagination a:focus-visible { outline:2px solid #e0bf86; outline-offset:2px; }
.level-overview,.level-step,.level-at-a-glance { border:1px solid #594a35; background:#111a15; padding:20px 22px; }
.level-overview { margin:18px 0; }
.level-overview h2,.level-step h2 { margin:0 0 10px; color:#eddcbe; font:600 24px/1.2 var(--serif); }
.level-overview p,.level-step p,.level-at-a-glance p { margin:0; color:#d1c8b9; font-size:16px; line-height:1.65; }
.level-overview p+p { margin-top:10px; }
.level-intro-item { display:flex; gap:15px; align-items:flex-start; }
.level-intro-item > img { flex:none; width:60px; height:60px; object-fit:contain; border:1px solid #746246; padding:4px; background:#171911; }
.level-overview ul { margin:0; padding-left:20px; color:#d1c8b9; }
.level-overview li+li { margin-top:6px; }
.level-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.level-index-card { display:flex; align-items:center; gap:14px; min-width:0; padding:13px 15px; border:1px solid #504633; background:#0c1511; text-decoration:none; }
.level-index-card:hover { border-color:#a98555; background:#1a2118; }
.level-number { display:grid; flex:none; place-items:center; width:42px; height:42px; border:1px solid #907249; background:#2d271c; color:#f2d3a0; font-size:18px; font-weight:700; }
.level-index-card > span:nth-child(2) { min-width:0; flex:1; }
.level-index-card strong,.level-index-card small { display:block; line-height:1.4; }
.level-index-card strong { color:#eddcbe; font-size:16px; }
.level-index-card small { margin-top:3px; color:#bdb4a5; font-size:14px; }
.level-index-card > span:last-child { color:#c9aa7b; font-size:19px; }
.level-at-a-glance { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.level-at-a-glance strong { color:#ead3ab; }
.level-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.level-step { min-width:0; }
.level-step-title { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.level-step-title span { display:grid; flex:none; place-items:center; width:30px; height:30px; border:1px solid #846e4c; color:#efd5aa; font-weight:700; }
.level-step-title h2 { margin:0; }
.level-related { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.level-related a,.level-pagination a { display:inline-flex; align-items:center; min-height:44px; padding:8px 11px; border:1px solid #62533a; background:#171d16; color:#e7c795; font-size:14px; font-weight:600; text-decoration:none; }
.level-pagination { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
@media(max-width:760px) {
  .level-nav-hint { display:block; }
  .level-heading h1 { font-size:30px; }
  .level-index,.level-steps { grid-template-columns:minmax(0,1fr); }
  .level-overview,.level-step,.level-at-a-glance { padding:16px; }
  .level-overview h2,.level-step h2 { font-size:22px; }
  .level-related { gap:7px; }
}
@media(max-width:380px) { .level-heading h1 { font-size:27px; } .level-intro-item { gap:10px; } .level-intro-item > img { width:48px; height:48px; } }