:root{
  color-scheme:dark;
  --void: #0b1110;
  --void-2: #101816;
  --panel: #16201d;
  --panel-raised: #1c2925;
  --panel-border: #304039;
  --hairline: #3b4d45;
  --text: #dce4df;
  --text-dim: #bdc9c2;
  --text-faint: #92a39a;
  --purple: #9d8ac8;
  --purple-deep: #66588b;
  --purple-glow: rgba(157,138,200,0.24);
  --ember: #c87955;
  --ember-soft: #d99a77;
  --gold: #dcc47d;
  --ichor: #8fbd91;
  --link: #91bd94;
  --link-hover: #b9d7b9;
  --advice: #dfc982;
  --danger: #d1495b;
  --text-strong:#eef3ef;
  --heading:#e7eee9;
  --shadow:rgba(0,0,0,.38);
  --earth:#7c5d45;
  --moss:#638052;
  --surface-glint:rgba(224,207,151,.055);
  /* Затемнение рабочей зоны под мобильным меню и подъём самой панели.
     Токены, а не литералы: на светлой теме чёрная тень .72 читается как грязь. */
  --scrim:rgba(3,2,9,.72);
  --panel-lift:0 24px 56px rgba(0,0,0,.72);
  --font-display: "Eczar", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --radius: 10px;

  /* Шкала вертикальных отступов. Все зазоры в чеклистах и врезках берутся
     отсюда, произвольных значений быть не должно. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Геометрия пункта чеклиста — единственный источник правды.
     Всё, что должно встать под текст пункта, считается от этих трёх чисел,
     а не подбирается руками (раньше это был магический 31px, продублированный
     в мобильном брейкпоинте как 34px).
       --text-indent   — сдвиг от края контента пункта до его текста;
       --content-axis  — та же ось, но от внешнего края пункта: по ней
                         выравниваются врезки, лежащие вне чеклиста. */
  --box-size: 19px;
  --box-gap: 12px;
  --item-pad-x: 10px;
  --text-indent: calc(var(--box-size) + var(--box-gap));
  --content-axis: calc(var(--item-pad-x) + var(--text-indent));
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 95% 58% at 18% -12%, rgba(94,128,89,.14), transparent 61%),
    radial-gradient(ellipse 72% 46% at 100% 2%, rgba(120,91,65,.09), transparent 58%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px),
    var(--void);
  background-size:auto,auto,8px 8px,8px 8px,auto;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--link) 42%,transparent); transition:color .15s, border-color .15s;}
a:hover{color:var(--link-hover); border-color:var(--link-hover);}
h1{font-family:var(--font-display); font-weight:600; margin:0; color:var(--heading);}
h2,h3{font-family:var(--font-body); font-weight:600; margin:0; color:var(--heading);}
strong{color:var(--text-strong); font-weight:600;}
em{color:var(--text-dim); font-style:italic;}
::selection{background:var(--purple-deep); color:#fff;}
:focus-visible{outline:2px solid var(--link); outline-offset:3px;}

/* ---------- layout shell ---------- */
.app{display:flex; min-height:100vh;}

/* ---------- sidebar ---------- */
.sidebar{
  width:308px; flex-shrink:0;
  background:linear-gradient(180deg, var(--void-2), var(--void));
  border-right:1px solid var(--panel-border);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:0 0 28px;
}
.mobile-toolbar{display:none;}
.sidebar-panel{display:block;}
.brand{
  padding:26px 22px 18px;
  border-bottom:1px solid var(--panel-border);
  position:relative;
}
.brand-eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--purple); display:block; margin-bottom:8px;
}
.brand h1{font-size:23px; line-height:1.2; color:var(--text-strong);}
.brand h1 .accent{color:var(--ember-soft);}
.brand-sub{font-size:12.5px; color:var(--text-faint); margin-top:6px; font-family:var(--font-mono);}
.selector-label{
  padding:13px 16px 0; color:var(--text-faint); font:500 9.5px var(--font-mono);
  letter-spacing:.13em; text-transform:uppercase;
}
.class-switch{display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:14px 14px 2px;}
.class-switch button{
  appearance:none; border:1px solid var(--panel-border); border-radius:8px; padding:8px 10px;
  background:transparent; color:var(--text-dim); font:500 12px var(--font-body); cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.class-switch button:hover{border-color:var(--purple); color:var(--text);}
.class-switch button[aria-pressed="true"]{border-color:var(--purple-deep); background:color-mix(in srgb,var(--purple) 10%,transparent); color:var(--text-strong);}
.class-switch button > span,.activity-switch button > span{display:flex; min-width:0; flex-direction:column; align-items:flex-start; line-height:1.1;}
.nav-ru{font-weight:600;}
.nav-en{font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:3px;}
/* Переключатель задаёт размеры сам, чтобы не наследовать типографику списка этапов. */
.class-switch .nav-ru,.activity-switch .nav-ru{font-size:13px; line-height:1.2; white-space:normal; overflow:visible; max-width:none;}
.class-switch .nav-en,.activity-switch .nav-en{font-size:10px; margin-top:2px;}
.icon-sprite{position:absolute; width:0; height:0; overflow:hidden; pointer-events:none;}
.ic{width:1em; height:1em; display:inline-block; vertical-align:-.14em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
.activity-switch{padding:4px 14px 1px;}
.activity-switch .selector-label{padding:10px 2px 7px;}
.activity-switch button{
  appearance:none; width:100%; border:1px solid var(--panel-border); border-radius:8px; padding:8px 10px;
  background:transparent; color:var(--text-dim); font:500 12px var(--font-body); cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.activity-switch button:hover{border-color:var(--purple); color:var(--text);}
.activity-switch button[aria-pressed="true"]{border-color:var(--purple-deep); background:color-mix(in srgb,var(--purple) 10%,transparent); color:var(--text-strong);}
.theme-toggle{
  appearance:none; position:fixed; z-index:40; top:18px; right:20px;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--panel-border); border-radius:50%;
  background:color-mix(in srgb,var(--panel) 88%,transparent); color:var(--gold);
  box-shadow:0 5px 20px var(--shadow); backdrop-filter:blur(10px);
  font:600 21px/1 var(--font-mono); cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.theme-toggle:hover{transform:translateY(-1px); background:var(--panel-raised); border-color:var(--purple); color:var(--ember-soft);}
.theme-toggle:active{transform:translateY(0) scale(.96);}
body[data-guide-class="ranger"]{
  --purple:#82b89a; --purple-deep:#466f56; --purple-glow:rgba(130,184,154,.24);
}
body[data-guide-class="ranger"] .class-switch button[aria-pressed="true"]{background:rgba(130,184,154,.10);}
body[data-guide-class="ranger"] .nav-item.active{background:rgba(130,184,154,.10);}
body[data-guide-class="mage"]{
  --purple:#91a2dc; --purple-deep:#52639e; --purple-glow:rgba(145,162,220,.24);
}
body[data-guide-class="summoner"]{
  --purple:#b99acb; --purple-deep:#725887; --purple-glow:rgba(185,154,203,.24);
}
body[data-guide-class="fishing"]{
  --purple:#83b6c9; --purple-deep:#47788b; --purple-glow:rgba(131,182,201,.22);
}
body[data-guide-class="mage"] .class-switch button[aria-pressed="true"],
body[data-guide-class="summoner"] .class-switch button[aria-pressed="true"]{background:color-mix(in srgb,var(--purple) 15%,transparent);}
body[data-guide-class="mage"] .nav-item.active,
body[data-guide-class="summoner"] .nav-item.active{background:color-mix(in srgb,var(--purple) 11%,transparent);}
body[data-guide-class="fishing"] .nav-item.active{background:rgba(131,182,201,.10);}

.overall-progress{position:relative; padding:16px 22px 6px;}
.overall-progress-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-bottom:7px; letter-spacing:.03em;
}
.overall-progress-label b{color:var(--gold); font-size:13px;}
.hp-bar{
  height:14px; border-radius:3px; background:var(--void-2); border:1px solid var(--panel-border);
  overflow:hidden; position:relative; box-shadow:inset 0 1px 3px var(--shadow);
}
.progress-actions{display:flex; justify-content:flex-end; margin-top:8px;}
.reset-progress{
  appearance:none; border:1px solid var(--panel-border); border-radius:6px; padding:5px 9px;
  background:transparent; color:var(--text-faint); font:500 10.5px var(--font-mono); cursor:pointer;
}
.reset-progress:hover{border-color:var(--ember-soft); color:var(--text);}
.hp-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--purple-deep), var(--purple) 55%, var(--ember-soft));
  box-shadow:0 0 10px var(--purple-glow);
  transition:width .5s cubic-bezier(.4,0,.2,1);
  background-size:200% 100%;
}
.hp-bar-seg{position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,.35);}

.nav-group-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); padding:20px 22px 8px;
}
.nav-list{display:flex; flex-direction:column; padding:0 10px;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  background:transparent; border:1px solid transparent; border-radius:8px;
  padding:8px 10px; margin:1px 0; cursor:pointer; text-align:left;
  color:var(--text-dim); font-family:var(--font-body);
  transition:background .12s, border-color .12s, color .12s;
}
.nav-item:hover{background:var(--panel); color:var(--text);}
.nav-item.active{
  background:color-mix(in srgb,var(--purple) 10%,transparent);
  border-color:color-mix(in srgb,var(--purple) 45%,var(--panel-border)); color:var(--text-strong);
}
.nav-num{
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  width:24px; height:24px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--panel-border); background:var(--panel);
}
.nav-item.active .nav-num{border-color:var(--purple); color:var(--gold); background:var(--panel-raised);}
.nav-text{display:flex; flex-direction:column; flex:1; min-width:0;}
.nav-ru{font-size:13.2px; font-weight:500; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nav-en{font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono);}
.nav-status{font:600 10px/1.3 var(--font-body); color:var(--advice);}
.nav-frac{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); flex-shrink:0;}
.nav-item.done .nav-num{background:var(--purple-deep); color:#fff; border-color:var(--purple);}

/* ---------- main ---------- */
.main{
  width:100%; max-width:1120px; min-width:0;
  margin:0 auto;
  padding:46px 52px 112px;
}
.stage{display:none; animation:fadein .35s ease;}
.stage.active{display:block;}
.stage[hidden]{display:none;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.stage-head{
  display:flex; align-items:flex-start; gap:18px;
  padding-bottom:26px; margin-bottom:34px;
  border-bottom:1px solid var(--panel-border);
  position:relative;
}
.stage-head-num{
  font-family:var(--font-mono); font-size:13px; color:var(--purple);
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--purple-deep); background:var(--panel);
  font-size:15px;
}
.stage-tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); display:inline-block; margin-bottom:6px;
}
.stage-head h2{font-size:30px; line-height:1.25; color:var(--heading); font-weight:600;}
.stage-sub{margin:6px 0 0; color:var(--text-faint); font-size:13px; font-family:var(--font-body);}
.stage-head-text{flex:1;}
.stage-progress-ring{position:relative; width:52px; height:52px; flex-shrink:0;}
.stage-progress-ring svg{width:52px; height:52px; transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:var(--panel-border); stroke-width:3;}
.ring-fg{fill:none; stroke:var(--purple); stroke-width:3; stroke-linecap:round; stroke-dasharray:100.5; stroke-dashoffset:100.5; transition:stroke-dashoffset .5s;}
.ring-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim);}

.stage-body p{color:var(--text-dim); margin:0 0 18px; max-width:82ch;}
.stage-body > p:first-child{margin-top:0;}
.stage-body code{font-family:var(--font-mono); font-size:.9em; color:var(--gold); background:var(--panel); border:1px solid var(--panel-border); border-radius:4px; padding:1px 4px;}
.stage-body pre{overflow:auto; padding:14px 16px; border:1px solid var(--panel-border); border-radius:8px; background:var(--panel); color:var(--text-dim); font:12px/1.45 var(--font-mono);}
.stage-body pre code{padding:0; border:0; background:transparent; color:inherit;}
.chapter-completion{margin-bottom:20px;}

.subhead{
  font-size:17px; color:var(--heading); margin:34px 0 14px;
  padding:0; border:0;
  font-family:var(--font-body); font-weight:600; letter-spacing:0;
}
.subhead:first-child{margin-top:0;}

/* checklist */
.checklist{list-style:none; margin:0 0 var(--sp-5); padding:0; display:flex; flex-direction:column; gap:var(--sp-1);}
.item{
  border-radius:7px; padding:var(--sp-3) var(--item-pad-x);
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.item:hover{background:color-mix(in srgb,var(--panel) 72%,transparent); border-color:transparent;}
.check{display:flex; align-items:flex-start; gap:var(--box-gap); cursor:pointer;}
.check input{position:absolute; opacity:0; width:0; height:0;}
.box{
  width:var(--box-size); height:var(--box-size); flex-shrink:0; margin-top:3px;
  border:2px solid #475363; border-radius:5px;
  background:transparent; position:relative;
  transition:border-color .15s, background .15s;
}
.box::after{
  content:""; position:absolute; left:4px; top:0px; width:5px; height:9px;
  border:solid var(--void); border-width:0 2px 2px 0; transform:rotate(45deg);
  opacity:0; transition:opacity .1s;
}
.check input:checked ~ .box{background:var(--link); border-color:var(--link);}
.check input:checked ~ .box::after{opacity:1;}
.check input:focus-visible ~ .box{outline:2px solid var(--gold); outline-offset:2px;}
.item.item-done .txt, .item.item-done .txt .ru, .item.item-done .txt .en, .item.item-done .txt strong{color:var(--text-faint) !important; text-decoration:line-through; text-decoration-color:var(--text-faint);}
.txt{font-size:15px; line-height:1.6; color:var(--text);}
.txt .ru{color:var(--text);}
.txt a{border-bottom:1px solid color-mix(in srgb,var(--link) 36%,transparent);}
.item.star{background:color-mix(in srgb,var(--advice) 4%,transparent); border-color:transparent;}
.item.star:hover{background:color-mix(in srgb,var(--advice) 7%,transparent);}
.star-mark{margin-right:5px; color:var(--advice); filter:none;}
.item.alt .txt{color:var(--text-dim);}
/* .loc и .extra — пояснения к пункту. Оба сажают ТЕКСТ ровно на ту же ось,
   что и .txt самого пункта (--content-axis), поэтому пункт читается как один
   блок с одной левой линией. У .loc есть своя подложка, поэтому ось набирается
   из бордера и padding'а, у .extra — просто отступом.
   margin-bottom:0 у обоих: хвост пункта задаёт padding .item, и он одинаков
   независимо от того, есть у пункта пояснение или нет. */
.loc{
  margin:var(--sp-2) 0 0; font-size:13px; color:var(--text-dim); line-height:1.6;
  padding:var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--text-indent) - 2px);
  background:color-mix(in srgb,var(--panel) 68%,transparent);
  border-left:2px solid var(--hairline); border-radius:0 6px 6px 0;
}
.loc::before{content:none;}
.extra{margin:var(--sp-1) 0 0 var(--text-indent); font-size:13px; color:var(--text-faint); font-style:italic; line-height:1.6;}

/* Списки модификаторов — те же .item, только вместо чекбокса точка. Чтобы их
   текст стоял на общей --content-axis, точка занимает дорожку той же ширины,
   что и чекбокс (--box-size), а сам кружок центрируется внутри неё. */
.mod-item{display:flex; align-items:flex-start; gap:var(--box-gap); padding:var(--sp-3) var(--item-pad-x);}
.mod-item .dot{
  width:var(--box-size); height:var(--box-size); flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
.mod-item .dot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--purple);}
.mod-item.star .dot::before{background:var(--gold); box-shadow:0 0 6px var(--gold);}
.mod-item .txt{font-size:15px;}

/* gear tables */
.gear-table-wrap{margin:26px 0 34px; border:1px solid color-mix(in srgb,var(--panel-border) 78%,transparent); border-radius:var(--radius); overflow:hidden; background:color-mix(in srgb,var(--panel) 82%,transparent);}
.table-scroll{overflow-x:auto;}
.gear-table{width:100%; border-collapse:collapse; min-width:560px;}
.gear-table th, .gear-table td{padding:13px 16px; text-align:left; vertical-align:top; font-size:14px; line-height:1.55; border-bottom:1px solid var(--panel-border);}
.gear-table thead th{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); background:var(--void-2); border-bottom:1px solid var(--panel-border);
}
.gear-table thead .col-best{color:var(--advice);}
.gear-table thead .col-reco{color:var(--link);}
.gear-table tbody th{
  font-family:var(--font-body); font-size:13px; color:var(--heading); white-space:nowrap; font-weight:600;
  background:rgba(255,255,255,.018);
}
.gear-table tbody td{color:var(--text);}
.gear-table tbody tr:last-child td, .gear-table tbody tr:last-child th{border-bottom:none;}
.gear-table tbody tr:hover td, .gear-table tbody tr:hover th{background:rgba(255,255,255,.02);}

/* callouts */
/* Врезка лежит вне чеклиста, но её текст садится на ту же --content-axis,
   что и текст пунктов: левый край врезки совпадает с осью прозы (0), а её
   текст — с осью чеклиста. Раньше он висел на 20px, то есть на третьей,
   ничему не принадлежащей линии. */
.callout{
  margin:var(--sp-5) 0; padding:var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--content-axis) - 2px); border-radius:0 8px 8px 0;
  border-left:2px solid var(--hairline); background:color-mix(in srgb,var(--panel) 74%,transparent);
  font-size:14.5px; line-height:1.65; color:var(--text-dim); width:100%; max-width:none;
}
.callout.next{border-left-color:var(--link); background:color-mix(in srgb,var(--link) 5%,var(--panel));}
.callout.warn{border-left-color:var(--advice); background:color-mix(in srgb,var(--advice) 5%,var(--panel)); color:var(--text-dim);}
.callout strong{color:var(--text-strong);}
.callout.principle{border-left-color:var(--purple); background:color-mix(in srgb,var(--purple) 6%,var(--panel));}
.callout.principle .ic{margin-right:7px; color:var(--purple-soft);}
.stage-context,.stage-route{
  margin:var(--sp-5) 0; padding:var(--sp-4); border:1px solid var(--panel-border);
  border-radius:var(--radius); background:color-mix(in srgb,var(--panel) 88%,transparent);
}
.stage-context{border-left:3px solid var(--advice);}
.stage-context[data-context-type="onboarding"]{border-left-color:var(--link);}
.stage-context[data-context-type="world-change"]{border-left-color:var(--danger);}
.stage-context[data-context-type="unlock"]{border-left-color:var(--purple);}
.stage-context .subhead,.stage-route .subhead{margin:0 0 var(--sp-3);}
.stage-context>p{margin:0 0 var(--sp-3); color:var(--text-dim);}
.route-status{margin:0 0 var(--sp-3); color:var(--text-dim); font-size:14px;}
.route-status strong{color:var(--text-strong);}
.route-steps{margin:0; padding-left:24px; color:var(--text); display:grid; gap:var(--sp-2);}
.route-steps li{padding-left:4px; line-height:1.55;}
.route-steps li::marker{color:var(--purple); font:600 12px var(--font-mono);}
.route-where{display:inline-block; margin-left:5px; color:var(--text-faint); font-size:12px;}
.route-help{margin-top:var(--sp-3); border-top:1px solid var(--panel-border);}
.route-help summary{
  min-height:44px; display:flex; align-items:center; color:var(--link); cursor:pointer;
  font-size:14px; font-weight:600; list-style-position:inside;
}
.route-help[open] summary{color:var(--link-hover);}
.route-help p{margin:0 0 var(--sp-3); padding-left:var(--sp-3); color:var(--text-dim); font-size:14px; line-height:1.6;}
.route-ready,.route-class-note{
  margin:var(--sp-3) 0 0; padding-top:var(--sp-3); border-top:1px solid var(--panel-border);
  color:var(--text-dim); font-size:14px; line-height:1.6;
}
.route-ready .ic{margin-right:6px; color:var(--purple);}
.route-class-note{font-style:italic;}
.stage-next{
  margin:var(--sp-6) 0 0; padding:var(--sp-4); display:grid; grid-template-columns:auto 1fr;
  gap:var(--sp-2) var(--sp-3); align-items:center; border:1px solid var(--panel-border);
  border-radius:var(--radius); background:color-mix(in srgb,var(--panel) 82%,transparent);
}
.next-eyebrow{grid-column:2; color:var(--text-faint); font:600 11px var(--font-mono); letter-spacing:.04em; text-transform:uppercase;}
.next-button,.next-back,.next-skip{
  appearance:none; border:1px solid var(--panel-border); border-radius:8px; min-height:44px;
  background:var(--panel); color:var(--text); cursor:pointer; font-family:var(--font-body); text-align:left;
}
.next-button{grid-column:2; position:relative; padding:12px 70px 12px 14px; border-color:color-mix(in srgb,var(--purple) 58%,var(--panel-border));}
.next-button:hover,.next-button:focus-visible{border-color:var(--purple); box-shadow:0 0 0 2px var(--purple-glow);}
.next-title{display:block; color:var(--heading); font-weight:600; font-size:16px;}
.next-sub{display:block; margin-top:3px; color:var(--text-faint); font-size:12px;}
.next-frac{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-faint); font:12px var(--font-mono);}
.next-back{grid-column:1; grid-row:1 / span 2; padding:10px 12px; color:var(--text-dim);}
.next-skip{grid-column:2; padding:10px 14px; color:var(--text-dim); border-style:dashed;}
.stage-next .next-eyebrow:first-child,.stage-next .next-button:first-child{grid-column:1 / -1;}
.gear-table.compare{min-width:520px;}
.stage-extension{margin:var(--sp-6) 0;}

/* plain / ordered lists */
.plain-list{margin:0 0 24px; padding-left:20px; color:var(--text-dim); font-size:14.5px; display:flex; flex-direction:column; gap:9px;}
.plain-list li::marker{color:var(--purple);}
.priority-list{margin:0 0 24px; padding-left:22px; color:var(--text-dim); font-size:14.5px; display:flex; flex-direction:column; gap:10px; counter-reset:none;}
.priority-list li::marker{color:var(--ember-soft); font-family:var(--font-mono); font-weight:600;}
.priority-list li{padding-left:2px;}

/* roadmap */
.roadmap-flow{
  display:flex; flex-wrap:nowrap; align-items:center; gap:0; overflow-x:auto;
  overscroll-behavior-x:contain; padding:6px 2px 12px; margin:0 0 20px;
  -webkit-overflow-scrolling:touch;
}
.rm-node{
  flex:0 0 auto;
  font-size:13px; color:var(--text-dim); background:var(--panel); border:1px solid var(--panel-border);
  border-radius:8px; padding:10px 13px; line-height:1.45; max-width:190px;
}
.rm-node small{display:block; color:var(--text-faint); font-size:10.5px; margin-top:3px;}
.rm-node.highlight{border-color:color-mix(in srgb,var(--advice) 55%,var(--panel-border)); background:color-mix(in srgb,var(--advice) 5%,var(--panel)); color:var(--text-strong);}
.rm-node.opt{border-style:dashed; opacity:.7;}
.rm-node.final{border-color:color-mix(in srgb,var(--purple) 55%,var(--panel-border)); background:color-mix(in srgb,var(--purple) 8%,var(--panel)); color:var(--text-strong); font-weight:600; font-family:var(--font-body); font-size:14px;}
.rm-arrow{color:var(--purple); padding:0 6px; font-size:14px; flex:0 0 auto;}

/* vein divider */
.vein-divider{height:1px; margin:34px 0 30px; opacity:.7; background:var(--panel-border);}

/* footer */
.guide-footer{margin-top:72px; padding-top:26px; border-top:1px solid var(--panel-border); color:var(--text-faint); font-size:12px; font-family:var(--font-body); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.guide-footer a{color:var(--text-faint); border-color:transparent;}
.guide-footer a:hover{color:var(--ember-soft);}

/* Terraria-inspired atmosphere for the dark theme. The treatment stays
   deliberately quiet: texture and material depth never sit above content. */
html:not([data-theme="light"]) .sidebar{
  background:
    linear-gradient(180deg,rgba(99,128,82,.075),transparent 24%),
    linear-gradient(180deg,var(--void-2),color-mix(in srgb,var(--void) 92%,#07100b));
  box-shadow:inset -1px 0 0 rgba(191,164,105,.035),4px 0 24px rgba(0,0,0,.18);
}
html:not([data-theme="light"]) .brand{
  background:linear-gradient(135deg,rgba(99,128,82,.075),rgba(124,93,69,.045));
  border-bottom-color:color-mix(in srgb,var(--panel-border) 76%,var(--earth));
}
html:not([data-theme="light"]) .brand-eyebrow{color:color-mix(in srgb,var(--moss) 48%,var(--text-dim));}
html:not([data-theme="light"]) .brand h1 .accent{color:var(--gold);}
html:not([data-theme="light"]) .stage-head{
  border-bottom-color:color-mix(in srgb,var(--panel-border) 82%,var(--earth));
}
html:not([data-theme="light"]) .stage-head::after{
  content:""; position:absolute; left:0; bottom:-1px; width:92px; height:1px;
  background:linear-gradient(90deg,var(--moss),transparent); opacity:.75;
}
html:not([data-theme="light"]) .stage-head-num{
  background:linear-gradient(145deg,var(--panel-raised),var(--panel));
  box-shadow:inset 0 1px 0 var(--surface-glint),0 5px 16px rgba(0,0,0,.16);
}
html:not([data-theme="light"]) .gear-table-wrap,
html:not([data-theme="light"]) .stage-context,
html:not([data-theme="light"]) .stage-route,
html:not([data-theme="light"]) .stage-next{
  border-color:color-mix(in srgb,var(--panel-border) 88%,var(--earth));
  background:
    linear-gradient(145deg,var(--surface-glint),transparent 32%),
    color-mix(in srgb,var(--panel) 90%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 10px 28px rgba(0,0,0,.09);
}
html:not([data-theme="light"]) .gear-table thead th{
  background:color-mix(in srgb,var(--void-2) 88%,var(--earth));
}
html:not([data-theme="light"]) .box{
  border-color:color-mix(in srgb,var(--hairline) 84%,var(--moss));
  background:rgba(3,9,7,.16);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
html:not([data-theme="light"]) .check input:checked ~ .box{
  background:var(--link); border-color:var(--link);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--link) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.2);
}
html:not([data-theme="light"]) .hp-bar{
  border-color:color-mix(in srgb,var(--panel-border) 80%,var(--earth));
}
/* Средняя точка остаётся классовой (--purple меняется по data-guide-class),
   мшисто-золотой берёт на себя только хвост. background-size повторяет базовое
   значение: шорткат background сбросил бы его в auto и открыл хвост градиента. */
html:not([data-theme="light"]) .hp-bar-fill{
  background:linear-gradient(90deg,var(--purple-deep),var(--purple) 55%,var(--gold));
  background-size:200% 100%;
}
html:not([data-theme="light"]) .vein-divider{
  background:linear-gradient(90deg,transparent,var(--earth) 16%,var(--panel-border) 50%,var(--moss) 84%,transparent);
  opacity:.58;
}

/* mobile top nav */
.mobile-nav{display:none;}
.mobile-menu-backdrop{display:none;}

html[data-theme="light"]{
  color-scheme:light;
  --void:#f4f1ea;
  --void-2:#ebe6dc;
  --panel:#fffdf8;
  --panel-raised:#f3eee5;
  --panel-border:#c9c0b3;
  --hairline:#b4a99a;
  --text:#282331;
  --text-dim:#554c62;
  --text-faint:#6e647a;
  --purple:#6844a5;
  --purple-deep:#513483;
  --purple-glow:rgba(81,52,131,.22);
  --ember:#a8461f;
  --ember-soft:#944015;
  --gold:#765500;
  --ichor:#397326;
  --link:#245438;
  --link-hover:#173d28;
  --advice:#795f14;
  --danger:#a72c3d;
  --text-strong:#201b27;
  --heading:#201b27;
  --shadow:rgba(51,39,24,.16);
  --scrim:rgba(38,32,26,.46);
  --panel-lift:0 22px 44px rgba(51,39,24,.3);
}
html[data-theme="light"] body{
  background:
    radial-gradient(ellipse 90% 60% at 15% -10%,rgba(104,68,165,.09),transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 0%,rgba(168,70,31,.06),transparent 55%),
    var(--void);
}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,var(--void-2),var(--void)); box-shadow:4px 0 18px var(--shadow);}
html[data-theme="light"] .nav-item.active{background:linear-gradient(90deg,rgba(104,68,165,.15),rgba(168,70,31,.07)); color:var(--text-strong);}
html[data-theme="light"] body[data-guide-class="ranger"]{
  --purple:#32704c; --purple-deep:#28583d; --purple-glow:rgba(40,88,61,.2);
}
html[data-theme="light"] body[data-guide-class="mage"]{
  --purple:#4655ad; --purple-deep:#35428e; --purple-glow:rgba(53,66,142,.2);
}
html[data-theme="light"] body[data-guide-class="summoner"]{
  --purple:#75428f; --purple-deep:#5d3473; --purple-glow:rgba(93,52,115,.2);
}
html[data-theme="light"] body[data-guide-class="fishing"]{
  --purple:#286987; --purple-deep:#20536b; --purple-glow:rgba(32,83,107,.2);
}
html[data-theme="light"] .class-switch button[aria-pressed="true"]{color:var(--text-strong);}
html[data-theme="light"] .gear-table tbody tr:hover td,
html[data-theme="light"] .gear-table tbody tr:hover th{background:rgba(81,52,131,.045);}
html[data-theme="light"] .callout.warn{color:#65321f;}
html[data-theme="light"] .rm-node.highlight,
html[data-theme="light"] .rm-node.final{color:var(--text-strong);}
html[data-theme="light"] .box::after{border-color:#fff;}

html{scrollbar-color:var(--panel-border) var(--void-2); scrollbar-width:thin;}
*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-track{background:var(--void-2);}
*::-webkit-scrollbar-thumb{background:var(--panel-border); border:2px solid var(--void-2); border-radius:8px;}
body,.sidebar,.gear-table-wrap,.callout,.item,.nav-item{transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;}

@media (max-width: 900px){
  .app{flex-direction:column;}
  .sidebar{
    position:sticky; top:0; width:100%; height:64px; max-height:none; overflow:visible;
    border-right:none; border-bottom:1px solid var(--panel-border); padding:0;
    z-index:30; background:color-mix(in srgb,var(--void-2) 94%,transparent); backdrop-filter:blur(14px);
  }
  /* Тёмное оформление панели выше по файлу бьёт по специфичности (0,2,1 против 0,1,0),
     и медиазапрос её не поднимает. Повторяем исключения на том же уровне: непрозрачный
     градиент обнулил бы backdrop-filter, а боковая тень «вправо» бессмысленна у полосы
     во всю ширину. */
  html:not([data-theme="light"]) .sidebar{
    background:color-mix(in srgb,var(--void-2) 94%,transparent);
    box-shadow:0 6px 20px rgba(0,0,0,.22);
  }
  .brand{display:none;}
  .mobile-toolbar{display:flex; align-items:center; gap:10px; min-height:64px; padding:9px 62px 9px 14px;}
  .mobile-current{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25;}
  .mobile-current span{color:var(--text-faint); font:600 12px var(--font-body);}
  .mobile-current strong{overflow:hidden; color:var(--heading); font-size:16px; font-weight:600; text-overflow:ellipsis; white-space:nowrap;}
  .mobile-menu-toggle{
    appearance:none; min-width:82px; min-height:44px; padding:9px 13px; border:1px solid var(--panel-border);
    border-radius:8px; background:var(--panel); color:var(--text); font:600 15px var(--font-body); cursor:pointer;
    transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
  }
  .mobile-menu-toggle[aria-expanded="true"]{
    transform:translateY(1px); border-color:var(--purple); color:var(--text-strong);
    background:color-mix(in srgb,var(--purple) 30%,var(--panel));
    box-shadow:0 0 0 2px color-mix(in srgb,var(--purple) 28%,transparent),0 8px 24px var(--purple-glow);
  }
  .theme-toggle{top:10px; right:9px; width:44px; height:44px; font-size:20px; box-shadow:none;}
  .sidebar-panel{
    /* Панель не достаёт до низа экрана: содержимое меню (~1580px) всегда упирается
       в max-height, и при calc(100vh - 64px) она закрывала рабочую зону целиком.
       Затемнение оказывалось под ней и не было видно вообще, а клик по нему
       перехватывался панелью. Оставленная полоса — единственное место, где видно,
       что страница никуда не делась, просто ушла под слой. */
    display:block; visibility:hidden; position:absolute; top:64px; left:0; right:0; max-height:calc(100vh - 128px); overflow-y:auto;
    /* Только сдвиг, без scale: getBoundingClientRect() возвращает визуальный
       размер с учётом трансформации, и во время анимации все touch-target
       внутри панели оказываются меньше своих min-height. У «Сбросить» это ровно
       44px, то есть впритык к порогу доступности. */
    padding:8px 0 20px; opacity:0; transform:translateY(-12px);
    background:color-mix(in srgb,var(--panel-raised) 96%,var(--void));
    border-top:1px solid color-mix(in srgb,var(--purple) 45%,var(--panel-border));
    border-bottom:2px solid color-mix(in srgb,var(--purple) 65%,var(--panel-border));
    box-shadow:var(--panel-lift),inset 0 1px 0 color-mix(in srgb,var(--purple) 20%,transparent);
    overscroll-behavior:contain; transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  }
  .sidebar.mobile-open .sidebar-panel{visibility:visible; opacity:1; transform:none; transition-delay:0s;}
  .mobile-menu-backdrop{
    display:block; position:fixed; inset:64px 0 0; z-index:20;
    opacity:0; visibility:hidden; pointer-events:none; cursor:pointer;
    background:var(--scrim); backdrop-filter:blur(3px) saturate(.7);
    transition:opacity .22s ease,visibility 0s linear .22s;
  }
  .sidebar.mobile-open + .mobile-menu-backdrop{visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s;}
  body.mobile-menu-open{overflow:hidden;}
  .selector-label,.nav-group-label{position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal;}
  .selector-label{padding:13px 16px 7px; font-size:11px;}
  .class-switch{grid-template-columns:1fr 1fr; gap:8px; padding:4px 14px 8px;}
  .class-switch button{min-width:0; min-height:48px; padding:10px 12px; font-size:15px; line-height:1.25;}
  .activity-switch{padding:0 14px 8px;}
  .activity-switch .selector-label{display:block; padding:9px 2px 7px;}
  .activity-switch button{min-height:48px; padding:10px 12px; font-size:15px; line-height:1.25;}
  .overall-progress{padding:15px 16px 8px;}
  .overall-progress-label{margin-bottom:8px; font-size:13px;}
  .overall-progress-label b{font-size:14px;}
  .hp-bar{height:16px;}
  .progress-actions{position:static; justify-content:flex-start; margin-top:10px;}
  .reset-progress{min-height:44px; padding:9px 13px; font:500 14px var(--font-body);}
  .nav-group-label{padding:20px 16px 8px; font-size:11px;}
  .nav-list{flex-direction:column; overflow:visible; padding:0 10px; gap:2px;}
  .nav-item{flex:0 0 auto; width:100%; min-height:56px; flex-direction:row; align-items:center; gap:12px; padding:8px 10px; text-align:left;}
  .nav-text{align-items:flex-start;}
  .nav-num{width:34px; height:34px; font-size:13px;}
  .nav-ru{max-width:none; font-size:16px; line-height:1.3; text-align:left; white-space:normal; overflow:visible;}
  .nav-en{display:block; font:12px/1.35 var(--font-body);}
  .nav-status{font-size:11px;}
  .class-switch .nav-ru,.activity-switch .nav-ru{font-size:15px; line-height:1.2;}
  .class-switch .nav-en,.activity-switch .nav-en{font-size:11px; font-family:var(--font-mono);}
  .nav-frac{display:block; font-size:12px;}
  .main{max-width:none; margin:0; padding:28px 18px 76px;}
  .stage-head{gap:13px; padding-bottom:22px; margin-bottom:26px;}
  .stage-head h2{font-size:26px;}
  .stage-head-num{width:42px; height:42px; font-size:15px;}
  .stage-sub{font-size:14px;}
  .stage-progress-ring{display:none;}
  .stage-body p{font-size:17px; line-height:1.65;}
  .subhead{font-size:19px; line-height:1.4; margin-top:32px;}
  /* Крупнее чекбокс и уже поля — но выравнивание пересчитывается само:
     --text-indent и --content-axis выводятся из этих двух значений, поэтому
     .loc, .extra, .mod-item и .callout едут за ними без ручных чисел. */
  :root{--box-size:22px; --item-pad-x:4px;}
  .checklist{gap:var(--sp-2);}
  .item{min-height:48px;}
  .box{margin-top:2px;}
  .box::after{left:5px; top:1px; width:6px; height:10px;}
  .txt{font-size:16.5px; line-height:1.6;}
  .loc,.extra{font-size:14px; line-height:1.65;}
  .callout{font-size:15.5px; line-height:1.65;}
  .stage-context,.stage-route{margin:var(--sp-4) 0; padding:14px;}
  .route-steps{padding-left:22px; gap:10px; font-size:16px;}
  .route-help summary{font-size:15px;}
  .route-help p,.route-ready,.route-status,.route-class-note{font-size:14.5px;}
  .stage-next{grid-template-columns:1fr; padding:14px;}
  .stage-next .next-eyebrow,.stage-next .next-button,.stage-next .next-back,.stage-next .next-skip{
    grid-column:1; grid-row:auto;
  }
  .stage-next .next-button{order:1;}
  .stage-next .next-eyebrow{order:0;}
  .stage-next .next-skip{order:2;}
  .stage-next .next-back{order:3;}
  .gear-table-wrap{border:0; overflow:visible; background:transparent;}
  /* Та же причина, что и у .sidebar: строки на мобильном уже самостоятельные карточки,
     внешняя подложка с тенью дала бы карточку в карточке. */
  html:not([data-theme="light"]) .gear-table-wrap{background:transparent; box-shadow:none;}
  .table-scroll{overflow:visible;}
  .gear-table{display:block; min-width:0;}
  .gear-table thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .gear-table tbody{display:grid; gap:12px;}
  .gear-table tbody tr{
    display:block; overflow:hidden; border:1px solid var(--panel-border); border-radius:10px;
    background:color-mix(in srgb,var(--panel) 88%,transparent);
  }
  .gear-table tbody th{
    display:block; padding:13px 14px; border:0; border-bottom:1px solid var(--panel-border);
    background:var(--panel-raised); color:var(--heading); font-size:16px; white-space:normal;
  }
  .gear-table tbody td{
    display:block; padding:13px 14px; border:0; border-bottom:1px solid var(--panel-border);
    background:transparent; color:var(--text); font-size:15.5px; line-height:1.6;
    overflow-wrap:anywhere;
  }
  .gear-table tbody td::before{
    content:attr(data-label); display:block; margin-bottom:6px; color:var(--text-faint);
    font:600 12px/1.35 var(--font-body); letter-spacing:.03em; text-transform:uppercase;
  }
  .gear-table tbody tr td:last-child{border-bottom:0;}
  .gear-table tbody tr:hover td,.gear-table tbody tr:hover th{background:inherit;}
  .plain-list,.priority-list{font-size:16px; line-height:1.6; gap:10px;}
  .guide-footer{font-size:13.5px; line-height:1.55;}
}
@media (max-width: 600px){
  .mobile-toolbar{padding-left:12px;}
  .main{padding-left:15px; padding-right:15px;}
  .stage-head{gap:11px;}
  .stage-head h2{font-size:24px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}