.sx-planner {
  --tp-ink: #e9edf3;
  --tp-muted: #a2adbc;
  --tp-surface: var(--panel);
  --tp-border: var(--line);
  color: var(--tp-ink);
  font-family: Barlow, "Segoe UI", sans-serif;
  min-width: 0;
}
.sx-planner *, .sx-planner *::before, .sx-planner *::after { box-sizing: border-box; }
.sx-planner [hidden] { display: none !important; }
.sx-planner button, .sx-planner select, .sx-planner input { font: inherit; }
.sx-planner button { cursor: pointer; }
.sx-planner button:disabled { opacity: .42; cursor: default; }
.sx-planner :is(button, select, input, a, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sx-planner .tp-workspace { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; margin-bottom:10px; }
.sx-planner .tp-workspace h2 { margin:0; font:700 1.85rem/1.1 var(--display); }
.sx-planner .tp-switch { display: flex; align-items: stretch; width: fit-content; flex-wrap: wrap; padding: 3px; gap: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.sx-planner .tp-switch button { padding: 9px 17px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 600; }
.sx-planner .tp-switch button[aria-pressed="true"], .sx-planner .tp-jumps button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.sx-planner .tp-switch button:hover, .sx-planner .tp-jumps button:hover { color: var(--accent); }
.sx-planner .tp-guide { margin-bottom: 13px; border: 1px solid color-mix(in srgb,var(--class) 35%,var(--line)); background: linear-gradient(110deg,color-mix(in srgb,var(--class) 10%,#101c28),var(--panel) 62%); border-radius: 7px; overflow: clip; }
.sx-planner .tp-guide-controls { display: flex; align-items: center; gap: 12px clamp(14px,2.4vw,34px); flex-wrap:wrap; padding: 13px 16px; }
.sx-planner .tp-level-track { flex:1; display:grid; min-width:min(100%,170px); grid-template-columns: auto minmax(45px,1fr); align-items:center; gap:6px 12px; }
.sx-planner .tp-guide-title h3 { margin:0; color: var(--ink); font: 700 1.4rem/1.15 var(--display); }
.sx-planner .tp-level-track input[type=range] { width:100%; min-width:0; accent-color:var(--class); cursor:pointer; }
.sx-planner .tp-stepper { display: inline-flex; align-items: center; gap: 6px; }
.sx-planner .tp-stepper button, .sx-planner .tp-jumps button { border: 1px solid var(--line); color: var(--ink); background: var(--bg); border-radius: 4px; font-weight: 600; }
.sx-planner .tp-stepper button { width: 36px; height: 36px; font-size: 1.25rem; border-radius:50%; }
.sx-planner .tp-stepper label { display: grid; align-content:center; justify-items:center; width:68px; height:68px; color: var(--class); font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; border:3px solid transparent; border-radius:50%; background:linear-gradient(#101923,#101923) padding-box,conic-gradient(var(--class) var(--step-progress,100%),#3c4858 0) border-box; }
.sx-planner .tp-stepper input { width: 2ch; padding: 0; border: none; appearance: textfield; -moz-appearance: textfield; background: transparent; text-align: center; font: 700 1.9rem/1.05 var(--display); color: var(--ink); }
.sx-planner .tp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sx-planner .tp-jumps { grid-column:1/-1; display:flex; gap:5px; flex-wrap:wrap; }
.sx-planner .tp-jumps button { min-width:34px; min-height:32px; }
.sx-planner .tp-guide-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 16px 12px; }
.sx-planner .tp-point { padding: 11px 13px; display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.sx-planner .tp-current { border-color: var(--accent-line); }
.sx-planner .tp-point .tp-mini-icon { border-radius: 4px; height: 37px; width: 37px; border-color: var(--line); }
.sx-planner .tp-point strong, .sx-planner .tp-point small { display: block; overflow-wrap: anywhere; }
.sx-planner .tp-point small { color: var(--muted); font-size: .77rem; font-weight: 600; }
.sx-planner .tp-current small { color: var(--accent); }
.sx-planner .tp-point strong { font: 700 1.2rem/1.3 var(--display); color: var(--ink); }
.sx-planner .tp-point p { margin: 0; font-size: .84rem; color: var(--tp-muted); }
.sx-planner .tp-guide-share { display:grid; justify-items:end; gap:3px; }
.sx-planner .tp-guide-share span:empty { display:none; }
.sx-planner .tp-guide-share span { font-size: .8rem; color: var(--muted); }
.sx-planner .tp-guide-share .tp-action { background: transparent; min-height: 32px; padding: 4px 9px; }
.sx-planner .tp-route { border-top: 1px solid var(--line); padding: 0 19px; background: var(--panel); }
.sx-planner .tp-route summary { padding: 12px 0; cursor: pointer; font-weight: 600; color: var(--accent); }
.sx-planner .tp-route p { margin: 0 0 12px; font-size: .88rem; line-height: 1.5; color: var(--tp-muted); }
.sx-planner .tp-route a { color: var(--accent); }
.sx-planner .tp-route ol { padding: 0; margin: 0 0 14px; list-style: none; display: grid; grid-template-rows: repeat(17,auto); grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 3px 10px; }
.sx-planner .tp-route li { min-width: 0; }
.sx-planner .tp-route li button { width: 100%; display: flex; gap: 7px; align-items: center; text-align: left; padding: 5px 7px; min-height: 34px; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 3px; font-size: .8rem; }
.sx-planner .tp-route li button span { color: var(--tp-muted); white-space: nowrap; }
.sx-planner .tp-route li button b { overflow-wrap: anywhere; }
.sx-planner .tp-route li button small { color: var(--tp-muted); margin-left: auto; }
.sx-planner .tp-route li button[aria-current="step"] { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.sx-planner .tp-route li button:hover { border-color: var(--accent-line); }
.sx-planner .tp-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 13px 17px;
  background: linear-gradient(105deg, var(--accent-soft), var(--tp-surface) 52%);
  border: 1px solid #38404c;
  border-radius: 6px;
}
.sx-planner .tp-level label, .sx-planner .tp-budget {
  display: flex; align-items: center; gap: 10px; color: #d6dce6; font-weight: 600;
}
.sx-planner .tp-select, .sx-planner .tp-action, .sx-planner .tp-modes button {
  min-height: 38px; border-radius: 4px; border: 1px solid #444d5a; background: #171d27; color: var(--tp-ink);
  padding: 6px 12px; font-size: .875rem; font-weight: 600;
}
.sx-planner .tp-select { color: var(--accent); font-weight: 700; cursor: pointer; color-scheme: dark; }
.sx-planner .tp-budget b { font: 700 1.85rem/1 "Barlow Condensed", Barlow, sans-serif; color: var(--accent); }
.sx-planner .tp-budget span { color: #bac4d0; font-size: .875rem; }
.sx-planner .tp-control-group { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.sx-planner .tp-action:hover:enabled, .sx-planner .tp-modes button:hover { border-color: var(--accent-line); color: var(--accent); }
.sx-planner .tp-modebar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 14px 0; }
.sx-planner .tp-modes { display: inline-flex; border: 1px solid var(--tp-border); border-radius: 5px; padding: 3px; background: #0e141d; }
.sx-planner .tp-modes button { background: transparent; border: 1px solid transparent; color: #aeb8c6; min-height: 34px; }
.sx-planner .tp-modes button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.sx-planner .tp-message { color: var(--tp-muted); font-size: .84rem; line-height: 1.45; }
.sx-planner .tp-copy { margin-bottom: 14px; color: var(--tp-muted); }
.sx-planner .tp-copy label { display: grid; gap: 5px; }
.sx-planner .tp-copy input { background: #111720; color: var(--tp-ink); border: 1px solid #515e6d; padding: 8px; border-radius: 4px; width: 100%; }
.sx-planner .tp-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-planner .tp-tree {
  --tp-accent: #edc86b;
  --tp-art: none;
  background: var(--tp-surface); border: 1px solid var(--tp-border); border-top: 2px solid var(--tp-accent);
  border-radius: 7px; min-width: 0; overflow: clip;
}
.sx-planner .tp-tree-head { display: flex; gap: 11px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--tp-border); }
.sx-planner .tp-tree-head h3 { margin: 0; font: 700 1.38rem/1.12 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .02em; color: var(--tp-ink); }
.sx-planner .tp-mini-icon, .sx-planner .tp-icon { background-color: #243246; background-repeat: no-repeat; }
.sx-planner .tp-mini-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--tp-accent); flex-shrink: 0; }
.sx-planner .tp-tree-count { color: var(--tp-accent); margin-left: auto; font: 700 1.2rem/1 var(--display); min-width:32px; height:32px; padding:5px; text-align:center; border:1px solid var(--tp-accent); border-radius:50%; }
.sx-planner .tp-tree-art { background: linear-gradient(175deg, #080d134d, #080c1570), var(--tp-art) center / 100% 100% no-repeat; padding: 6px 8px; }
.sx-planner .tp-tree-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, 55px); align-items: center; justify-items: center; }
.sx-planner .tp-connections { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
.sx-planner .tp-line { stroke: #70727c; fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sx-planner .tp-line.tp-trained { stroke: var(--tp-accent); }
.sx-planner .tp-node {
  position: relative; padding: 0; width: 42px; height: 42px; border: 2px solid #c4af7e; border-radius: 5px;
  background: #1a1a1d; color: #f0e1bd; box-shadow: 0 1px 7px #000b; transition: border-color .14s, transform .14s;
}
.sx-planner .tp-node .tp-icon { display: block; width: 100%; height: 100%; border-radius: 3px; }
.sx-planner .tp-locked { border-color: #58606a; }
.sx-planner .tp-locked .tp-icon { filter: grayscale(.92) brightness(.65); }
.sx-planner .tp-node:focus-visible, .sx-planner .tp-node:hover { transform: translateY(-1px); border-color: white; z-index: 1; }
.sx-planner .tp-invested { border-color: #69b98a; }
.sx-planner .tp-max { border-color: #f4cb65; box-shadow: 0 0 7px #e8b75d70; }
.sx-planner .tp-node.tp-step-node { outline: 2px solid var(--accent); outline-offset: 3px; }
.sx-planner .tp-rank {
  position: absolute; right: -6px; bottom: -4px; min-width: 24px; background: #111820; color: #e0d9c9; border: 1px solid #766a52;
  border-radius: 4px; font: 700 11px/1.2 Barlow, sans-serif; padding: 0 3px; font-variant-numeric: tabular-nums;
}
.sx-planner .tp-locked .tp-rank { color: #b2b8c2; border-color: #585f69; }
.sx-planner .tp-invested .tp-rank { color: #a3e7b2; border-color: #6faa86; }
.sx-planner .tp-max .tp-rank { color: #ffdf8b; border-color: #d7ac57; }
.sx-planner .tp-tree-detail { border-top: 1px solid var(--tp-border); padding: 12px 14px; min-height: 94px; }
.sx-planner .tp-tree-detail strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: .93rem; line-height: 1.3; }
.sx-planner .tp-tree-detail p, .sx-planner .tp-tree-detail small { color: #bcc6d2; font-size: .82rem; line-height: 1.45; }
.sx-planner .tp-tree-detail p { margin: 5px 0 0; }
.sx-planner .tp-tree-detail small:not(:empty) { color: #e6b486; display: block; margin-top: 3px; }
.sx-planner .tp-source { color: var(--tp-muted); font-size: .76rem; line-height: 1.6; margin: 13px 0 0; }
.sx-planner .tp-source a { color: var(--accent); text-underline-offset: 2px; }
@media (max-width: 920px) and (min-width: 761px) {
  .sx-planner .tp-trees { gap: 6px; }
  .sx-planner .tp-tree-art { padding-inline: 3px; }
  .sx-planner .tp-node { width: 36px; height: 36px; }
  .sx-planner .tp-tree-head { padding-inline: 9px; }
}
@media (max-width: 760px) {
  .sx-planner .tp-route ol { grid-template-rows: repeat(26,auto); }
  .sx-planner .tp-jumps { margin-left: 0; }
  .sx-planner .tp-trees { grid-template-columns: 1fr; }
  .sx-planner .tp-tree-grid { max-width: 410px; margin: auto; grid-template-rows: repeat(7, 61px); }
  .sx-planner .tp-node { width: 46px; height: 46px; }
  .sx-planner .tp-tree-art { background-size: cover; }
  .sx-planner .tp-tree-detail { min-height: 70px; }
}
@media (max-width: 500px) {
  .sx-planner .tp-guide-controls { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; }
  .sx-planner .tp-stepper label { width:59px; height:59px; }
  .sx-planner .tp-level-track { grid-column:1/-1; grid-row:2; }
  .sx-planner .tp-guide-share { grid-column:2; grid-row:1; }
  .sx-planner .tp-guide-points { grid-template-columns: 1fr; gap: 6px; padding-inline: 12px; }
  .sx-planner .tp-route { padding-inline:12px; }
  .sx-planner .tp-route ol { grid-auto-flow: row; grid-template-rows: none; }
  .sx-planner .tp-control-group { width: 100%; margin-left: 0; }
  .sx-planner .tp-tools { padding: 12px; }
  .sx-planner .tp-modes button { padding-inline: 8px; font-size: .82rem; }
  .sx-planner .tp-modebar { gap: 8px; }
  .sx-planner .tp-message { width: 100%; min-height: 1.45em; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-planner .tp-node { transition: none; }
}

/* Scope the illustrated guide layout to individual specializations. */
.spec-hub { --spec-edge:color-mix(in srgb,var(--class) 38%,var(--line)); }
.spec-hub > .crumb { margin-bottom:15px; }
.spec-banner {
  display:grid; align-content:end; gap:18px; isolation:isolate; overflow:hidden; position:relative;
  min-height:clamp(165px,15vw,215px); padding:clamp(18px,2.4vw,32px);
  border:1px solid var(--spec-edge); border-radius:8px;
  background:#101a29;
}
.spec-banner::before { content:""; position:absolute; z-index:-2; inset:0; background:var(--spec-art) 72% 8% / cover no-repeat; }
.spec-banner::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#080e18eb,#09131fd4 41%,#0a162564 75%,#07121e33),linear-gradient(0deg,#070f1af0,transparent 83%); }
.spec-title { display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); }
.spec-title .spec-portrait { width:clamp(46px,5vw,70px); aspect-ratio:1; flex:none; border:2px solid var(--class); border-radius:8px; box-shadow:0 3px 14px #0009; }
.spec-title h1 { margin:3px 0 0; font:800 clamp(33px,4.2vw,61px)/1.01 var(--display); color:#fff; letter-spacing:-.02em; overflow-wrap:anywhere; }
.spec-edition { margin:0; color:var(--class); text-transform:uppercase; letter-spacing:.12em; font:700 .72rem/1.3 var(--body); }
.spec-context { display:flex; justify-content:space-between; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.spec-context nav { display:flex; flex-wrap:wrap; gap:5px; }
.spec-context nav a,.spec-hub .spec-jumps a {
  display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 12px;
  font-size:.9rem; line-height:1.15; font-weight:700; text-decoration:none; border-radius:4px; border:1px solid var(--line);
}
.spec-context nav a { background:#0d1724dc; color:#cbd4e2; }
.spec-context nav a[aria-current],.spec-context nav a:hover { color:var(--class); border-color:var(--class); background:color-mix(in srgb,var(--class) 8%,#0c1825); }
.spec-context .planner-switch { color:#c6cdd6; width:auto; }
.spec-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.spec-summary section { display:flex; flex-direction:column; gap:8px; padding:14px 16px; border:1px solid var(--line); border-top:2px solid var(--spec-edge); border-radius:6px; background:var(--panel); }
.spec-summary h2 { color:var(--class); font:700 1.25rem/1.1 var(--display); margin:0; }
.spec-summary p { margin:0; color:#c7d0dc; font-size:.94rem; line-height:1.48; }
.spec-allocation dl { display:flex; flex-wrap:wrap; align-content:center; flex:1; gap:6px 14px; margin:0; }
.spec-allocation dl > div { display:flex; flex-direction:column-reverse; align-items:flex-start; }
.spec-allocation dt { color:#c7d0dc; font-size:.79rem; }
.spec-allocation dd { margin:0; color:var(--tree-color); font:700 2rem/1.05 var(--display); }
.spec-hub .spec-jumps { display:flex; flex-wrap:wrap; gap:6px; margin:15px 0 21px; }
.spec-hub .spec-jumps a { border-color:var(--spec-edge); background:color-mix(in srgb,var(--class) 5%,var(--panel)); color:var(--ink); }
.spec-hub .spec-jumps a:hover { color:var(--class); border-color:var(--class); }
.spec-hub .spec-jumps .spec-parent { margin-left:auto; gap:6px; }
.spec-hub .tp-tree-head { background:linear-gradient(90deg,color-mix(in srgb,var(--tp-accent) 10%,#121d2a),#101823); }
.spec-hub .tp-rank { bottom:auto; top:-5px; }
.spec-hub [id]:is(#talente,#spielweise,#ausruestung,#vorbereitung,#faq) { scroll-margin-top:8px; }
.spec-static-route { min-width:0; padding:clamp(16px,2.2vw,28px); border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.spec-static-route h2 { margin:0 0 10px; font:700 1.8rem/1.1 var(--display); }
.spec-static-route summary { font-weight:700; color:var(--class); cursor:pointer; }
.spec-static-route p { color:var(--muted); }
.spec-static-route a { color:var(--accent); text-decoration:underline; }
.spec-static-route ol { columns:3 218px; column-gap:2.4rem; padding-left:1.8rem; font-size:.92rem; }
.spec-static-route li { padding:.3rem .15rem; break-inside:avoid; }
.spec-static-route li::marker { color:var(--class); }
.spec-editorial { width:100%; min-width:0; }
.spec-editorial .spec-reading,.spec-editorial .spec-topic,.spec-editorial .spec-related {
  width:100%; max-width:none; margin:clamp(30px,3.7vw,54px) 0 0; padding:19px 0 0; border-top:1px solid var(--spec-edge);
}
.spec-editorial .spec-reading > h2,.spec-editorial .spec-topic > h2 { font-size:clamp(1.85rem,3.5vw,2.65rem); margin:0 0 14px; }
.spec-editorial .spec-intro { padding-bottom:16px; font-size:1.02rem; }
.spec-editorial .spec-step-grid,.spec-topic-grid,.spec-questions {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)); gap:12px; list-style:none; padding:0; margin:0;
}
.spec-editorial .spec-step-grid { counter-reset:playstep; }
.spec-editorial .spec-step-grid li,.spec-topic-grid article,.spec-questions article,.spec-level-preview {
  padding:clamp(14px,1.45vw,21px); margin:0; border:1px solid var(--line); border-radius:6px; min-width:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--class) 4%,var(--panel)),var(--panel));
}
.spec-editorial .spec-step-grid li { counter-increment:playstep; border-top:2px solid var(--spec-edge); }
.spec-editorial .spec-step-grid li::before {
  content:counter(playstep,decimal-leading-zero); display:inline-block; margin:0 0 8px; color:var(--class); font:700 .84rem/1.1 var(--body); font-variant-numeric:tabular-nums;
}
.spec-editorial .spec-step-grid h3,.spec-topic-grid h3 { margin:0 0 7px; color:#f1f5fa; font-size:1.32rem; }
.spec-editorial .spec-step-grid p,.spec-topic-grid p,.spec-questions p { color:#c9d3df; font-size:.96rem; line-height:1.56; }
.spec-editorial .spec-tip,.spec-level-preview { margin:12px 0 0; border-left:3px solid var(--class); padding:12px 16px; background:var(--panel); }
.spec-editorial .spec-tip h3,.spec-editorial .spec-level-preview h3 { color:var(--class); font-size:1.16rem; margin-bottom:3px; }
.spec-editorial .spec-level-preview { margin:0 0 16px; }
.spec-editorial .spec-level-preview strong { display:block; }
.spec-questions { grid-template-columns:1fr; }
.spec-questions article { border-left:2px solid var(--spec-edge); }
.spec-questions h3 { margin:0 0 6px; color:var(--ink); font-size:1.25rem; }
.spec-related .gd-media { margin:0; }
.spec-class-back { display:inline-flex; gap:8px; margin-top:18px; font-weight:700; }
@media (max-width:850px) {
  .spec-summary { gap:8px; }
  .spec-summary section { padding:12px; }
}
@media (max-width:680px) {
  .spec-banner { min-height:0; padding:16px; gap:14px; }
  .spec-context,.spec-context .planner-switch { align-items:center; }
  .spec-context .planner-switch { font-size:.8rem; }
  .spec-summary { grid-template-columns:1fr; }
  .spec-summary section { gap:5px; }
  .spec-allocation dl { gap:8px 15px; }
  .spec-allocation dl > div { flex-direction:row; align-items:baseline; gap:5px; }
  .spec-allocation dd { font-size:1.12rem; }
  .spec-hub .spec-jumps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .spec-hub .spec-jumps a { min-height:41px; padding:6px; font-size:.84rem; text-align:center; }
  .spec-hub .spec-jumps .spec-parent { margin:0; }
  .spec-editorial .spec-step-grid,.spec-topic-grid,.spec-questions { grid-template-columns:1fr; }
  .spec-editorial .spec-step-grid li::before { float:left; margin:4px 8px 0 0; }
}