/* ─────────────────────────────────────────────────────────────────────────
   同行手记 · 七路绘卷
   A 潮汐回廊 / B 余烬航线 / C 叶脉账页 / D 深蓝观测
   E 双星织带 / F 赤色悬崖 / G 归途星图
   skill.css keeps the page skeleton; this layer gives every route its own
   scenery, node silhouette and connection hand.
   ───────────────────────────────────────────────────────────────────────── */

.skill-dialog{
  --branch:#cf7f96;--branch-glow:#cf7f96;
  --shell-1:#171220;--shell-2:#24192c;--shell-3:#34202e;
  background:var(--shell-1);
}
.skill-dialog::backdrop{background:radial-gradient(ellipse at 50% 45%,#101923 0%,#070b12 78%)}
.skill-shell{
  position:relative;
  background:
    radial-gradient(78% 62% at 8% -8%,color-mix(in srgb,var(--branch-glow) 18%,transparent),transparent 64%),
    radial-gradient(75% 72% at 94% 104%,color-mix(in srgb,var(--branch-glow) 17%,transparent),transparent 62%),
    linear-gradient(132deg,var(--shell-1) 0%,var(--shell-2) 54%,var(--shell-3) 100%);
  transition:background .45s ease;
}
.skill-shell::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;
  background-image:
    radial-gradient(circle,#fff6df 0 1px,transparent 1.5px),
    radial-gradient(circle,#ffe9c1 0 1px,transparent 1.6px);
  background-size:247px 211px,359px 307px;background-position:11px 7px,83px 59px;
  mask-image:linear-gradient(to bottom,#000,transparent 34%,transparent 70%,#000);
}
.skill-head,.skill-tabs,.skill-body,.skill-footer,.journal-guide{position:relative;z-index:1}
.skill-head small{color:color-mix(in srgb,var(--branch) 30%,#d9d3c6);letter-spacing:5px}
.skill-head h2{text-shadow:0 0 34px color-mix(in srgb,var(--branch) 22%,transparent)}
.skill-ink{border-bottom-color:color-mix(in srgb,var(--branch) 30%,transparent)}
.skill-ink strong,.skill-ink span{color:color-mix(in srgb,var(--branch) 16%,#fff1d4)}
.skill-close{border-color:color-mix(in srgb,var(--branch) 35%,transparent);background:color-mix(in srgb,var(--shell-3) 72%,transparent)}
.skill-close:hover{border-color:var(--branch);box-shadow:0 0 18px color-mix(in srgb,var(--branch) 24%,transparent)}

/* Tabs: each route keeps its own little ink seal, even while inactive. */
.skill-tabs{
  gap:24px;
  border-block-color:color-mix(in srgb,var(--branch) 20%,transparent);
  background:color-mix(in srgb,var(--shell-1) 56%,transparent);
  transition:border-color .45s ease;
}
.skill-tabs button{color:color-mix(in srgb,#b7bdc4 78%,var(--tab));opacity:.72;transition:color .2s,opacity .2s,background .2s}
.skill-tabs button:hover{opacity:1;color:#f3e6cc}
.skill-tabs i{color:var(--tab);opacity:.7;text-shadow:0 0 12px color-mix(in srgb,var(--tab) 35%,transparent);transition:opacity .2s,filter .2s}
.skill-tabs button[aria-current=page]{
  color:#fff1d0;opacity:1;border-color:var(--branch);
  background:linear-gradient(0deg,color-mix(in srgb,var(--branch) 16%,transparent),transparent 86%);
}
.skill-tabs button[aria-current=page] i{opacity:1;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tab) 65%,transparent))}
.skill-tabs b{color:color-mix(in srgb,var(--tab) 26%,#a8b0b3);opacity:.85}

/* Page heading gains a small travel-stamp for the route's scenery. */
.skill-page-heading{max-width:min(330px,34%)}
.skill-page-heading small{color:color-mix(in srgb,var(--branch) 44%,#d5c9ab);letter-spacing:3px}
.skill-page-heading h3{
  color:#fae7c4;text-shadow:0 2px 18px #070d16,0 0 32px color-mix(in srgb,var(--branch) 18%,transparent);
}
.skill-page-heading h3::after{
  content:'';display:block;width:74px;height:1px;margin-top:9px;
  background:linear-gradient(90deg,var(--branch),color-mix(in srgb,var(--branch) 24%,transparent),transparent);
  box-shadow:0 0 9px color-mix(in srgb,var(--branch) 38%,transparent);
}
.skill-page-heading p{color:#d4d2c8;text-shadow:0 1px 6px #05090f}
.skill-scene-chip{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:4px 9px 4px 7px;
  border:1px solid color-mix(in srgb,var(--branch) 36%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--shell-1) 62%,transparent);
  color:color-mix(in srgb,var(--branch) 20%,#e9dfc9);
  font-size:10px;letter-spacing:2.4px;white-space:nowrap;
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--branch) 8%,transparent);
}
.skill-scene-chip i{font:14px/1 Georgia,serif;font-style:normal;color:var(--branch);text-shadow:0 0 9px var(--branch)}

/* Painted page: each route supplies a full inline-SVG vignette. */
.skill-map{max-width:920px;isolation:isolate}
.skill-scene{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 42px #050a10aa}
.skill-scene-art{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:.96}
.skill-scene-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#060b12b8 0%,#060b121f 23%,transparent 70%,#060b1266 100%),
    linear-gradient(0deg,#060b12b8 0%,#060b1214 22%,transparent 80%,#060b1247 100%),
    radial-gradient(ellipse at 50% 45%,transparent 46%,#05090f4d 100%);
}
.skill-scene-frame{
  position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--branch) 37%,transparent);border-radius:17px;
  box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--branch) 5%,transparent);
}
.skill-scene-frame::before{content:'';position:absolute;inset:5px;border:1px dashed color-mix(in srgb,var(--branch) 20%,transparent);border-radius:13px}
.skill-map.is-entering .skill-scene{animation:skill-scene-in .7s ease both}
@keyframes skill-scene-in{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}

.skill-paths{position:absolute;inset:0;z-index:2}
.skill-path{fill:none;stroke:var(--branch);stroke-linecap:round;stroke-linejoin:round;stroke-width:1;vector-effect:non-scaling-stroke}
.skill-edge{transition:opacity .2s}
.skill-edge .path-main{opacity:.32}
.skill-edge .path-echo{opacity:.12}
.skill-edge .path-halo{opacity:.09;stroke-width:4.6}
.skill-edge.is-traced .path-main{opacity:.94;stroke-width:1.25;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--branch) 68%,transparent))}
.skill-edge.is-traced .path-echo{opacity:.34}
.skill-edge.is-traced .path-halo{opacity:.18}
.skill-edge.is-ready-path .path-main{animation:skill-edge-breathe 3.4s ease-in-out infinite}
@keyframes skill-edge-breathe{50%{opacity:.76;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--branch) 55%,transparent))}}

/* A · tide: two soft returning curves with a pearl at the turning point. */
.skill-edge:not(.is-traced).edge-tide .path-main{opacity:.38}
.edge-tide .path-main{stroke-width:1.15}
.edge-tide .edge-bead{fill:color-mix(in srgb,var(--branch) 70%,#ffe7ec);opacity:.55;filter:drop-shadow(0 0 3px var(--branch))}
.edge-tide.is-traced .edge-bead{opacity:.95}

/* B · flame: a rising double trail and a live ember. */
.skill-edge:not(.is-traced).edge-flame .path-main{opacity:.36}
.edge-flame .path-main{stroke-width:1.3}
.edge-flame .path-echo{stroke-dasharray:2 4}
.edge-flame .edge-ember{fill:color-mix(in srgb,var(--branch) 76%,#ffe7bd);opacity:.52}
.edge-flame.is-traced .path-echo{stroke-dasharray:1 3}
.edge-flame.is-traced .edge-ember{opacity:.92}

/* C · ledger: ruled right angles, a stitched notch, no curves. */
.skill-edge:not(.is-traced).edge-ledger .path-main{opacity:.5}
.edge-ledger .path-main{stroke-width:1.05;stroke-dasharray:3 2}
.edge-ledger .path-echo{stroke-width:.8;stroke-dasharray:1 3}
.edge-ledger .edge-stitch{stroke:color-mix(in srgb,var(--branch) 84%,#e7f8ec);stroke-width:1.1}
.edge-ledger.is-traced .path-main{stroke-dasharray:none}

/* D · sight: straight sight-lines, end ticks and a measured bead. */
.skill-edge:not(.is-traced).edge-sight .path-main{opacity:.5}
.edge-sight .path-main{stroke-width:1.15;stroke-dasharray:1 4}
.edge-sight .path-echo{stroke-width:.75;stroke-dasharray:9 7}
.edge-sight .edge-tick{stroke:color-mix(in srgb,var(--branch) 66%,#dff7ff);stroke-width:.8;opacity:.55}
.edge-sight .edge-bead{fill:#d9f4fc;opacity:.5}
.edge-sight.is-traced .path-main{stroke-dasharray:2 3}

/* E · braid: two contrasting ribbons that weave through each other. */
.skill-edge:not(.is-traced).edge-braid .path-main{opacity:.28}
.edge-braid .path-main{stroke-width:.95}
.edge-braid .path-echo{stroke:color-mix(in srgb,#f3e4ff 62%,var(--branch));stroke-width:.8;opacity:.26}
.edge-braid .edge-knot{fill:color-mix(in srgb,var(--branch) 35%,#fff4de);opacity:.66;filter:drop-shadow(0 0 4px var(--branch))}
.edge-braid.is-traced .path-main,.edge-braid.is-traced .path-echo{opacity:.88}

/* F · bolt: a jagged, hot stroke inside a faint corona. */
.skill-edge:not(.is-traced).edge-bolt .path-main{opacity:.52}
.edge-bolt .path-main{stroke-width:1.55;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--branch) 64%,transparent))}
.edge-bolt .path-halo{stroke:var(--branch)}
.edge-bolt .edge-ember{fill:#ffd0b8;opacity:.8}
.edge-bolt.is-traced .path-main{stroke-width:1.8;filter:drop-shadow(0 0 6px var(--branch))}

/* G · constellation: long arcs punctuated by tiny beads. */
.skill-edge:not(.is-traced).edge-constellation .path-main{opacity:.6}
.edge-constellation .path-main{stroke-width:1.1;stroke-dasharray:2 5}
.edge-constellation .edge-bead{fill:#f9e9be;opacity:.62;filter:drop-shadow(0 0 3px #e6c78e)}
.edge-constellation.is-traced .path-main{stroke-dasharray:none;opacity:1}

.skill-fork-note{
  left:var(--fx);top:var(--fy);z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border:1px solid color-mix(in srgb,var(--branch) 30%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--shell-1) 76%,transparent);backdrop-filter:blur(3px);
  color:color-mix(in srgb,var(--branch) 18%,#ded9cc);font-size:10px;letter-spacing:1.5px;
  pointer-events:none;box-shadow:0 4px 18px #050a0f44;
}
.skill-fork-note i{font:13px/1 Georgia,serif;font-style:normal;color:var(--branch)}
.fork-short{display:none}

/* ── Node stations ────────────────────────────────────────────────────── */
.skill-dialog .skill-node{
  width:118px;z-index:3;gap:5px;color:color-mix(in srgb,var(--branch) 16%,#d8d8dc);
  opacity:1;transition:color .2s;
}
.skill-dialog .skill-node i{
  position:relative;display:grid;place-items:center;width:52px;height:52px;flex:none;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--branch) 38%,#778395);
  border-radius:50%;
  background:radial-gradient(circle at 34% 25%,color-mix(in srgb,var(--branch) 20%,#202936),#111821 74%);
  color:color-mix(in srgb,var(--branch) 55%,#eceef4);
  box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--branch) 7%,transparent),0 4px 18px #05090f77;
  transition:filter .2s,box-shadow .2s,opacity .2s;
}
.skill-node i .node-glyph{
  display:block;font:400 26px/1 'Noto Serif SC','SimSun',Georgia,serif;
  transform:translateY(-.5px);text-shadow:0 0 12px color-mix(in srgb,var(--branch) 32%,transparent);
}
.skill-node i .node-spark{
  position:absolute;right:3px;top:2px;font-size:10px;line-height:1;color:#ffe6a9;
  opacity:0;text-shadow:0 0 8px #ffd78c;transition:opacity .25s;
}
.skill-dialog .skill-node>span{
  font-size:13px;letter-spacing:1.2px;color:color-mix(in srgb,var(--branch) 10%,#f0e9dc);
  text-shadow:0 2px 5px #050a11,0 0 10px #050a11,0 1px 2px #000;white-space:nowrap;
  padding:2px 8px;border-radius:999px;
  background:linear-gradient(90deg,transparent,#050a1166 12%,#050a1166 88%,transparent);
}
.skill-dialog .skill-node>b{
  font-size:10px;font-weight:400;letter-spacing:1.2px;
  color:color-mix(in srgb,var(--branch) 20%,#c9c5b7);opacity:.8;
  text-shadow:0 1px 4px #050a11;
}
.skill-node.tier-3 i{width:56px;height:56px}
.skill-node.tier-3 i .node-glyph{font-size:28px}
.skill-node.tier-4 i{width:64px;height:64px}
.skill-node.tier-4 i .node-glyph{font-size:33px}
.skill-node.tier-4>span{font-size:14px;letter-spacing:1.6px}
.skill-node.is-locked i{opacity:.8;border-style:dashed;filter:saturate(.72)}
.skill-node.is-locked>span{color:#c9c5c1;opacity:.94}
.skill-node.is-locked>b{color:#aaa69e;opacity:.88}
.skill-node.is-ready i{
  border-color:var(--branch);
  box-shadow:0 0 22px color-mix(in srgb,var(--branch) 35%,transparent),inset 0 0 16px color-mix(in srgb,var(--branch) 18%,transparent);
  animation:skill-node-ready 3s ease-in-out infinite;
}
.skill-node.is-ready>span{color:#fff0cc}
.skill-node.is-ready>b{color:color-mix(in srgb,var(--branch) 24%,#ece1c8);opacity:.95}
.skill-node.is-lit i{
  border-color:color-mix(in srgb,var(--branch) 45%,#f8dda3);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--branch) 55%,transparent)) brightness(1.14) saturate(1.08);
  box-shadow:0 0 26px color-mix(in srgb,var(--branch) 34%,transparent),inset 0 0 18px #ffd99130;
}
.skill-node.is-lit i .node-glyph{color:#fff1c4;text-shadow:0 0 13px #ffd47b}
.skill-node.is-lit .node-spark{opacity:1}
.skill-node.is-lit>span{color:#ffe4af}
.skill-node.is-selected i{outline:0}
.skill-node::before{
  content:'';position:absolute;left:50%;top:-7px;width:66px;height:66px;transform:translateX(-50%);
  border:1px solid transparent;border-radius:50%;pointer-events:none;transition:border-color .2s,box-shadow .2s;
}
.skill-node.tier-4::before{width:78px;height:78px;top:-10px}
.skill-node.is-selected::before{border-color:#f5d89488;box-shadow:0 0 22px #f6d48c3d,inset 0 0 14px #f6d48c12}
.skill-node:hover i{transform:scale(1.07)}
@keyframes skill-node-ready{50%{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--branch) 65%,transparent)) brightness(1.08)}}
.skill-map.is-entering .skill-node{animation:skill-node-in .45s ease both;animation-delay:calc(var(--i) * 28ms)}
@keyframes skill-node-in{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}

/* A · dewdrop: an uneven pearl with an inner moon-ring. */
.skill-dialog[data-branch=A] .skill-node i{
  border-radius:64% 36% 60% 40% / 56% 58% 42% 44%;
  border-color:#d79aae8f;
  background:radial-gradient(circle at 36% 26%,#6b3d51 0,#2c1d2c 56%,#17111c 100%);
  box-shadow:inset 0 0 0 5px #f3c8d50f,0 5px 20px #08050d99;
}
.skill-dialog[data-branch=A] .skill-node i::before{content:'';position:absolute;inset:7px;border:1px solid #f1c8d733;border-radius:50%}
.skill-dialog[data-branch=A] .skill-node i::after{content:'';position:absolute;right:6px;bottom:8px;width:7px;height:7px;border-radius:50%;background:#f8d7e1;opacity:.42;box-shadow:0 0 8px #f8d7e1}
.skill-dialog[data-branch=A] .skill-node.is-lit i{background:radial-gradient(circle at 36% 26%,#9f5d76 0,#43283c 58%,#211522 100%)}

/* B · sun seal: a clipped ember hex with radiating filaments. */
.skill-dialog[data-branch=B] .skill-node i{
  clip-path:polygon(50% 0,89% 14%,100% 50%,86% 88%,50% 100%,14% 88%,0 50%,11% 14%);
  border:1px solid transparent;border-radius:0;
  background:
    radial-gradient(circle at 48% 38%,#70481f 0,#2b1e12 68%,#1b130d 100%) padding-box,
    linear-gradient(150deg,#f7d699,#b47b3f 58%,#714729) border-box;
}
.skill-dialog[data-branch=B] .skill-node i::before{
  content:'';position:absolute;inset:-18%;
  background:repeating-conic-gradient(from 0deg at 50% 55%,#f9d7941c 0 4deg,transparent 4deg 34deg);
  opacity:.8;pointer-events:none;
}
.skill-dialog[data-branch=B] .skill-node.is-lit i{
  background:
    radial-gradient(circle at 48% 38%,#a76c2e 0,#4b3017 68%,#28180c 100%) padding-box,
    linear-gradient(150deg,#ffe9b9,#d39754 58%,#8a5a2f) border-box;
}

/* C · coin & leaf: a squared keepsake with a stitched rim and a diamond hole. */
.skill-dialog[data-branch=C] .skill-node i{
  border-radius:23%;
  border-color:#9bc9b38c;
  background:radial-gradient(circle at 36% 28%,#376350 0,#173026 60%,#102019 100%);
  box-shadow:inset 0 0 0 4px #b7ddc911,0 4px 16px #050c0877;
}
.skill-dialog[data-branch=C] .skill-node i::before{content:'';position:absolute;inset:6px;border:1px dashed #b5dfc44a;border-radius:18%}
.skill-dialog[data-branch=C] .skill-node i::after{content:'';position:absolute;right:5px;top:5px;width:6px;height:6px;border:1px solid #d5eedc8c;transform:rotate(45deg)}
.skill-dialog[data-branch=C] .skill-node.is-lit i{background:radial-gradient(circle at 36% 28%,#5c9678 0,#28503c 60%,#163126 100%)}

/* D · lens: a flattened observatory eye with a measured equator. */
.skill-dialog[data-branch=D] .skill-node i{
  width:58px;height:46px;border-radius:50%;
  border-color:#8ec7dc9e;
  background:radial-gradient(ellipse at 38% 34%,#2f657a 0,#122b39 60%,#0b1926 100%);
  box-shadow:inset 0 0 0 4px #bfeaf40d,0 0 0 4px #8ec7dc08,0 4px 18px #030a1077;
}
.skill-dialog[data-branch=D] .skill-node i::before{content:'';position:absolute;left:13%;right:13%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#bfeaf45c,transparent)}
.skill-dialog[data-branch=D] .skill-node i::after{content:'';position:absolute;left:50%;top:3px;width:1px;height:7px;background:#bfeaf447;box-shadow:0 32px 0 #bfeaf447}
.skill-dialog[data-branch=D] .skill-node.tier-4 i{width:70px;height:56px}
.skill-dialog[data-branch=D] .skill-node.is-lit i{background:radial-gradient(ellipse at 38% 34%,#5d9eb8 0,#1c4b5d 60%,#0f2634 100%)}

/* E · twin orbit: two offset rings, like two stars sharing one path. */
.skill-dialog[data-branch=E] .skill-node i{
  overflow:visible;border-color:#c9a7f0a6;
  background:radial-gradient(circle at 34% 28%,#4c3767 0,#251c3b 62%,#171227 100%);
  box-shadow:inset 0 0 0 4px #e5d4fa0d,0 4px 18px #08051088;
}
.skill-dialog[data-branch=E] .skill-node i::before{
  content:'';position:absolute;inset:6px -10px 6px 10px;border:1px solid #d9bff5a6;border-radius:50%;
  opacity:.64;pointer-events:none;
}
.skill-dialog[data-branch=E] .skill-node i::after{
  content:'';position:absolute;left:-6px;bottom:4px;width:5px;height:5px;border-radius:50%;
  background:#f5e7ff;box-shadow:0 0 8px #d9bff5;opacity:.66;
}
.skill-dialog[data-branch=E] .skill-node.tier-3 i{width:58px;height:58px}
.skill-dialog[data-branch=E] .skill-node.tier-4 i{width:68px;height:68px}
.skill-dialog[data-branch=E] .skill-node.is-lit i{background:radial-gradient(circle at 34% 28%,#7b5ca0 0,#3d2c59 62%,#221735 100%)}

/* F · shard: a hostile splinter, hot-rimmed and asymmetrical. */
.skill-dialog[data-branch=F] .skill-node i{
  clip-path:polygon(50% 0,62% 26%,89% 12%,78% 39%,100% 50%,76% 61%,88% 89%,59% 76%,50% 100%,40% 74%,12% 89%,23% 60%,0 50%,24% 39%,11% 12%,39% 27%);
  border:1px solid transparent;border-radius:0;
  background:
    radial-gradient(circle at 46% 40%,#6c312b 0,#2a1013 65%,#19090c 100%) padding-box,
    linear-gradient(145deg,#f0a183,#a44b3d 52%,#6b2928) border-box;
}
.skill-dialog[data-branch=F] .skill-node i::before{
  content:'';position:absolute;inset:0;
  background:conic-gradient(from 18deg at 50% 55%,transparent 0 12%,#ffb08d21 12% 13%,transparent 13% 42%,#ffb08d18 42% 43%,transparent 43% 100%);
}
.skill-dialog[data-branch=F] .skill-node.tier-4 i{width:70px;height:70px}
.skill-dialog[data-branch=F] .skill-node.is-lit i{
  background:
    radial-gradient(circle at 46% 40%,#a84e3f 0,#43181b 65%,#210b0e 100%) padding-box,
    linear-gradient(145deg,#ffd0b2,#d66f54 52%,#85352f) border-box;
}

/* G · bloom: a many-sided gold seal with compass petals. */
.skill-dialog[data-branch=G] .skill-node i{
  width:58px;height:58px;border-radius:0;
  clip-path:polygon(50% 0,70% 12%,88% 30%,100% 50%,88% 70%,70% 88%,50% 100%,30% 88%,12% 70%,0 50%,12% 30%,30% 12%);
  border:1px solid transparent;
  background:
    radial-gradient(circle at 38% 30%,#4d432c 0,#28271e 60%,#151b1b 100%) padding-box,
    linear-gradient(145deg,#f7e4b1,#c39b58 52%,#7e673c) border-box;
}
.skill-dialog[data-branch=G] .skill-node i::before{
  content:'';position:absolute;inset:7px;
  background:repeating-conic-gradient(from 0deg,#f6e0a81c 0 8deg,transparent 8deg 30deg);
  border-radius:50%;
}
.skill-dialog[data-branch=G] .skill-node.tier-5 i{width:62px;height:62px}
.skill-dialog[data-branch=G] .skill-node.is-lit i{
  background:
    radial-gradient(circle at 38% 30%,#8f7440 0,#473d28 60%,#211f1b 100%) padding-box,
    linear-gradient(145deg,#fff1c9,#dab972 52%,#9a7a45) border-box;
}

/* Details inherit the route's paper and seal. */
.skill-detail{
  border-color:color-mix(in srgb,var(--branch) 38%,transparent);
  background:
    radial-gradient(95% 58% at 50% -4%,color-mix(in srgb,var(--branch) 14%,transparent),transparent 66%),
    linear-gradient(150deg,color-mix(in srgb,var(--branch) 9%,transparent),transparent 40%),
    color-mix(in srgb,var(--shell-2) 91%,#0a1118);
  box-shadow:0 18px 46px #04091066,inset 0 0 0 1px color-mix(in srgb,var(--branch) 7%,transparent);
}
.skill-detail-emblem{position:relative;color:var(--branch);text-shadow:0 0 26px var(--branch)}
.skill-detail-emblem::before{
  content:'';position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--branch) 34%,transparent);border-radius:50%;
  box-shadow:0 0 0 11px color-mix(in srgb,var(--branch) 5%,transparent),0 0 28px color-mix(in srgb,var(--branch) 16%,transparent);
}
.skill-detail>small{color:color-mix(in srgb,var(--branch) 20%,#c8c1ae)}
.skill-detail-theme{
  display:block;margin-top:7px;color:color-mix(in srgb,var(--branch) 45%,#dcd5c4);
  font-size:10px;letter-spacing:2.2px;
}
.skill-detail h3{color:#ffedc6;text-shadow:0 2px 14px #05090f}
.skill-detail dl{border-block-color:color-mix(in srgb,var(--branch) 25%,transparent)}
.skill-detail dd{color:color-mix(in srgb,var(--branch) 18%,#f3dfb4)}
.skill-exclusive{color:color-mix(in srgb,var(--branch) 24%,#ecc8a6)}
.skill-light{
  border-color:color-mix(in srgb,var(--branch) 42%,#e8ce97);
  background:linear-gradient(110deg,color-mix(in srgb,var(--branch) 9%,#f7dfb2),#c8ad75 78%);
  box-shadow:0 8px 24px color-mix(in srgb,var(--branch) 12%,transparent);
}
.skill-signature{color:color-mix(in srgb,var(--branch) 16%,#b7b9ad)}
.skill-page-navigation button{border-color:color-mix(in srgb,var(--branch) 28%,transparent);background:color-mix(in srgb,var(--shell-2) 65%,transparent)}
.skill-page-navigation button:hover{border-color:var(--branch);color:#fff0cd;box-shadow:0 0 16px color-mix(in srgb,var(--branch) 18%,transparent)}
.skill-page-navigation span{color:color-mix(in srgb,var(--branch) 14%,#c9c5b7)}
.skill-footer{border-top-color:color-mix(in srgb,var(--branch) 22%,transparent)}

/* The first-open lesson belongs to the same page, so it borrows the route ink. */
.journal-guide{
  border-color:color-mix(in srgb,var(--branch) 42%,transparent);
  background:color-mix(in srgb,var(--shell-2) 88%,#0a1118);
  box-shadow:0 0 28px color-mix(in srgb,var(--branch) 13%,transparent);
}
.journal-guide strong{color:color-mix(in srgb,var(--branch) 24%,#ffe3a8)}
.journal-guide-progress{color:color-mix(in srgb,var(--branch) 18%,#d6c59f)}
.journal-guide-actions button{
  border-color:color-mix(in srgb,var(--branch) 42%,transparent);
  background:color-mix(in srgb,var(--shell-3) 76%,transparent);
  color:#fff0d3;
}
.journal-guide-actions [data-journal-next]{background:color-mix(in srgb,var(--branch) 20%,#efd49e);color:#202f32}
.journal-guide-target{outline-color:color-mix(in srgb,var(--branch) 32%,#ffe3a8);box-shadow:inset 0 0 24px color-mix(in srgb,var(--branch) 13%,transparent)}

@media(max-width:1100px){
  .skill-scene-chip{font-size:9px;letter-spacing:1.8px;margin-top:8px}
  .skill-page-heading{max-width:min(285px,40%)}
  .skill-tabs{gap:12px}
}
@media(max-width:700px){
  .skill-dialog .skill-node{width:86px;gap:4px}
  .skill-dialog .skill-node i{width:46px;height:46px}
  .skill-dialog .skill-node i .node-glyph{font-size:23px}
  .skill-dialog[data-branch=D] .skill-node i{width:52px;height:42px}
  .skill-dialog[data-branch=E] .skill-node.tier-3 i,
  .skill-dialog[data-branch=B] .skill-node.tier-3 i,
  .skill-dialog[data-branch=C] .skill-node.tier-3 i{width:50px;height:50px}
  .skill-node.tier-3 i{width:50px;height:50px}
  .skill-node.tier-4 i{width:56px;height:56px}
  .skill-dialog[data-branch=D] .skill-node.tier-4 i{width:62px;height:50px}
  .skill-dialog[data-branch=E] .skill-node.tier-4 i,
  .skill-dialog[data-branch=F] .skill-node.tier-4 i,
  .skill-dialog[data-branch=G] .skill-node i{width:58px;height:58px}
  .skill-dialog .skill-node>span{font-size:12px}
  .skill-dialog .skill-node.tier-4>span{font-size:13px}
  .skill-scene{border-radius:14px}
  .skill-scene-frame{inset:5px;border-radius:12px}
  .skill-scene-frame::before{inset:4px;border-radius:9px}
  .skill-fork-note{font-size:9px;letter-spacing:1px;padding:3px 7px;gap:4px}
  .skill-fork-note .fork-long{display:none}
  .skill-fork-note .fork-short{display:inline}
  .skill-page-heading h3::after{width:52px;margin-top:6px}
  .skill-detail-theme{font-size:9px;letter-spacing:1.6px}
}
@media(max-width:380px){
  .skill-page-heading p{display:none}
  .skill-page-heading h3::after{margin-top:5px}
  .skill-scene-chip{margin-top:7px}
}
@media(min-width:701px) and (max-height:740px){
  .skill-scene-chip{display:none}
  .skill-page-heading h3::after{display:none}
}
@media(max-width:700px) and (max-height:760px){
  .skill-landscape{min-height:500px;flex:0 0 500px}
  .skill-map{min-height:420px}
}
@media(prefers-reduced-motion:reduce){
  .skill-map.is-entering .skill-scene,.skill-map.is-entering .skill-node,.skill-node.is-ready i,.skill-edge.is-ready-path .path-main{animation:none}
  .skill-shell,.skill-tabs{transition:none}
}