:root{
  --accent:#8ea1ff;
  --accent-ink:var(--accent);
  --card-bg:linear-gradient(165deg,rgba(13,18,32,.72),rgba(8,11,20,.58));
  --card-border:rgba(255,255,255,.08);
  --bg-0:#05070c;
  --bg-1:#0a0e1a;
  --ink:#e9ecf5;
  --ink-dim:#8a90a3;
  --ink-faint:#4c5164;
  --indigo:#7170ff;
  --indigo-lit:#8ea1ff;
  --gold:#e0b25c;
  --mint:#6ee7b7;
  --line:rgba(180,192,224,.18);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg-0);color:var(--ink);font-family:var(--font);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}

.stage{
  position:relative;width:100vw;height:100vh;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 62%, #121a30 0%, #0a0f1d 45%, var(--bg-0) 100%),
    var(--bg-0);
}
.stage::before{ /* film grain, 3%, above the fluid wash */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.stage::after{ /* vignette, above the fluid wash, behind the tree */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(82% 68% at 50% 55%,transparent 46%,rgba(2,4,9,.8) 100%);
}

#tree{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;z-index:2}
#tree.dragging{cursor:grabbing}

.fluid-layer{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.26;filter:saturate(.55) brightness(.42);
  -webkit-mask-image:radial-gradient(75% 66% at 50% 56%,rgba(0,0,0,.25) 30%,#000 78%);
  mask-image:radial-gradient(75% 66% at 50% 56%,rgba(0,0,0,.25) 30%,#000 78%);
}

/* ── brandmark ─────────────────────────────── */
.brandmark{position:absolute;z-index:3;bottom:28px;left:38px;text-align:left;pointer-events:none}
.kd-logo{display:block;width:102px;height:36px;image-rendering:pixelated;filter:drop-shadow(0 0 14px rgba(40,209,80,.22))}
.kd-sub{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.42em;color:var(--ink-faint);margin-top:8px;padding-left:2px}

/* ── detail panel ──────────────────────────── */
.panel{
  position:absolute;z-index:3;bottom:24px;left:50%;transform:translateX(-50%);
  width:min(560px,92vw);pointer-events:none;
  padding:14px 20px 12px;border-radius:12px;
  background:var(--card-bg);border:1px solid var(--card-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 40px rgba(2,4,9,.45);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.panel-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.panel-title{
  font-size:18px;font-weight:600;letter-spacing:.05em;margin:0;
  text-transform:uppercase;color:#f2f4fa;line-height:1.15;
}
.panel-title::after{display:none}
.panel-meta{display:flex;gap:14px;align-items:baseline;flex:none}
.cost{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.format{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.panel-desc{
  margin:8px 0 7px;font-size:12.5px;line-height:1.5;color:#b9c0d2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding-top:8px;border-top:1px solid var(--card-border);
}
.panel-outcome{margin:0;font-size:12px;line-height:1.5;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-outcome .lead{color:var(--mint);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;margin-right:8px}
.panel-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:9px}
.panel-foot .dot{width:5px;height:5px;border-radius:50%;background:rgba(233,236,245,.3)}
.panel-foot .hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}

/* ── branch anchors ────────────────────────── */
.branch-label{
  position:absolute;z-index:3;cursor:pointer;user-select:none;
  transition:opacity .2s ease, transform .2s ease;opacity:.9;
}
.branch-label:focus-visible{outline:1px solid var(--indigo-lit);outline-offset:8px;border-radius:2px}
.bl-name{display:block;font-size:15px;font-weight:600;letter-spacing:.26em;color:#e4e8f4}
.bl-sub{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:var(--ink-faint);margin-top:4px}
.bl-blurb{display:block;font-size:11px;color:var(--ink-dim);margin-top:8px;opacity:0;transition:opacity .2s ease}
.branch-label:hover .bl-blurb,.branch-label.on .bl-blurb{opacity:1}
.branch-label.on .bl-name{color:#fff}
.branch-label.dim{opacity:.32}
.anchor-left{left:38px;top:50%;transform:translateY(-50%)}
.anchor-right{right:38px;top:50%;transform:translateY(-50%);text-align:right}
.anchor-top{top:16px;left:50%;transform:translateX(-50%);text-align:center}

/* ── bottom HUD ────────────────────────────── */
.hud{
  position:absolute;z-index:3;top:34px;left:38px;width:250px;text-align:left;
  padding:14px 16px 12px;border-radius:12px;
  background:var(--card-bg);border:1px solid var(--card-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 40px rgba(2,4,9,.45);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.points{display:inline;font-size:26px;font-weight:600;color:var(--gold);line-height:1;letter-spacing:.02em}
.points-label{display:inline;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink-dim);margin-left:8px;text-transform:uppercase}
.points-label em{font-style:normal;color:#c7cddd}
.bar{position:relative;height:2px;margin:11px 0 0;background:rgba(180,192,224,.15);border-radius:2px;overflow:hidden;width:100%}
.bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold),#f3d59b);transition:width .35s cubic-bezier(.4,0,.2,1)}
.hud-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;margin-top:12px}
.btn{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border-radius:4px;cursor:pointer;
  background:rgba(233,236,245,.04);border:1px solid var(--line);color:var(--ink-dim);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:rgba(233,236,245,.09);color:var(--ink);border-color:rgba(180,192,224,.34)}
.btn:focus-visible{outline:1px solid var(--indigo-lit);outline-offset:2px}
.btn.primary{color:#e7dcc4;border-color:rgba(224,178,92,.34);background:rgba(224,178,92,.07)}
.btn.primary:hover{background:rgba(224,178,92,.14);color:#fff}
.btn.primary span{color:var(--gold)}
.hud-progress{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-faint);margin-top:10px;text-transform:uppercase}

/* ── svg node states ───────────────────────── */
.arc{fill:none;stroke:rgba(150,168,220,.07);stroke-width:1}
.link{fill:none;stroke:rgba(150,168,220,.16);stroke-width:1.6;stroke-linecap:round;transition:stroke .3s ease,stroke-width .3s ease}
.link.open{stroke:rgba(190,204,244,.42)}
.link.done{stroke:rgba(233,238,255,.72);stroke-width:2}
.jdot{fill:rgba(150,168,220,.28);transition:fill .3s ease}
.jdot.done{fill:rgba(233,238,255,.75)}

.node{cursor:pointer}
.node:focus{outline:none}
.node .ring{
  fill:#0d1322;stroke:rgba(150,168,220,.3);stroke-width:1.4;
  transition:fill .25s ease,stroke .25s ease,stroke-width .25s ease;
}
.node .glyph{stroke:rgba(178,190,222,.42);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease}
.node .halo{fill:none;stroke:transparent;stroke-width:1.2;transition:stroke .25s ease,opacity .25s ease;opacity:0}

/* available: reachable, affordable or not */
.node.open .ring{fill:rgba(20,28,48,.92);stroke:rgba(206,218,250,.85);stroke-width:1.6}
.node.open .glyph{stroke:#dfe6fa}
.node.open .halo{stroke:rgba(142,161,255,.3);opacity:1}

/* unlocked */
.node.done .ring{fill:#eef1fb;stroke:#ffffff;stroke-width:1.5}
.node.done .glyph{stroke:#141a2b;stroke-width:1.6}
.node.done .halo{stroke:rgba(255,255,255,.22);opacity:1}

/* hover + selection */
.node:hover .ring,.node:focus-visible .ring{stroke-width:2.2}
.node.sel .halo{stroke:#ffffff;opacity:1;stroke-width:1.6}
.node.sel .selring{opacity:1}
.node .selring{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1;opacity:0;transition:opacity .25s ease}

/* branch filter */
.node.faded,.link.faded,.jdot.faded{opacity:.16;transition:opacity .25s ease}

/* affordability pulse on available nodes */
@media (prefers-reduced-motion:no-preference){
  .node.open.afford .halo{animation:breathe 2.6s ease-in-out infinite}
}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}

.node .cost-pip{fill:var(--gold);opacity:0;transition:opacity .2s ease}
.node.done .cost-pip{opacity:0}
.node.open.afford .cost-pip{opacity:.9}

/* toast */
.toast{
  position:absolute;z-index:4;left:50%;bottom:236px;transform:translateX(-50%) translateY(6px);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#e9ecf5;background:rgba(12,17,30,.92);border:1px solid var(--line);
  padding:8px 14px;border-radius:4px;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


@media (hover:none){
  .panel-foot .hint::after{content:''}
}


/* ── track tabs ────────────────────────────── */
.tracks{
  position:absolute;z-index:4;top:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;padding:3px;border-radius:9px;
  background:rgba(10,14,26,.62);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 28px rgba(2,4,9,.5);
}
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;border-radius:6px;
  padding:7px 13px 6px;text-align:center;color:var(--ink-dim);
  transition:background .18s ease,color .18s ease;
}
.tab .t-name{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;font-weight:500}
.tab .t-sub{display:block;font-size:8px;letter-spacing:.14em;color:var(--ink-faint);margin-top:2px;font-family:var(--mono)}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.tab:focus-visible{outline:1px solid var(--accent);outline-offset:1px}
.tab.on{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 -1.5px 0 var(--accent)}
.tab.on .t-sub{color:var(--accent-ink)}

/* ── profile chip ──────────────────────────── */
.chip{
  position:absolute;z-index:4;top:18px;right:24px;
  display:flex;align-items:center;gap:9px;padding:7px 13px 7px 8px;border-radius:999px;
  background:rgba(10,14,26,.62);border:1px solid rgba(255,255,255,.07);cursor:pointer;
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 28px rgba(2,4,9,.5);
  transition:border-color .18s ease,transform .18s ease;
}
.chip:hover{border-color:rgba(255,255,255,.16)}
.chip:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.chip-ring{width:30px;height:30px;transform:rotate(-90deg)}
.cr-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2.6}
.cr-fill{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:0 100;transition:stroke-dasharray .5s cubic-bezier(.22,1,.36,1)}
.chip-rank{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#e4e8f4}
.chip-xp{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.chip.bump{animation:chipbump .5s cubic-bezier(.22,1.6,.36,1)}
@keyframes chipbump{40%{transform:scale(1.07)}}

/* ── lesson sheet ──────────────────────────── */
.sheet{
  position:absolute;z-index:6;top:0;right:0;bottom:0;width:min(408px,94vw);
  padding:26px 28px 22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;
  background:linear-gradient(160deg,rgba(17,22,38,.88),rgba(9,12,22,.92));
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.04),-32px 0 70px rgba(2,4,9,.6);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  transform:translateX(24px);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .22s ease;
}
.sheet.show{transform:none;opacity:1;pointer-events:auto}
.sheet[hidden]{display:none}
.sh-head{display:flex;justify-content:space-between;align-items:center}
.sh-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--accent-ink)}
.sh-close{
  appearance:none;border:0;width:28px;height:28px;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  color:var(--ink-dim);font-size:16px;line-height:1;
}
.sh-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.sh-title{
  margin:0;font-size:24px;font-weight:600;letter-spacing:.02em;color:#f4f6fc;
  padding-bottom:12px;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(255,255,255,.28),transparent) 1;
}
.sh-chips{display:flex;gap:6px;flex-wrap:wrap}
.sh-chip{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:5px 9px;border-radius:5px;
  border:1px solid rgba(255,255,255,.09);color:var(--ink-dim);background:rgba(255,255,255,.03);
}
.sh-chip.xp{color:var(--gold);border-color:rgba(224,178,92,.3)}
.sh-chip.fmt{color:#cdd5ea}
.sh-desc{margin:0;font-size:13px;line-height:1.62;color:#b9c0d2}
.sh-steps{display:flex;flex-direction:column;gap:0}
.sh-step{
  display:flex;gap:12px;align-items:baseline;padding:8px 0;font-size:12px;color:#a9b0c4;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sh-step:last-child{border-bottom:0}
.sh-step b{font-family:var(--mono);font-weight:500;font-size:10px;color:var(--ink-faint);min-width:16px}
.sh-artifact{
  border:1px solid rgba(110,231,183,.22);border-radius:8px;padding:12px 14px;
  background:linear-gradient(160deg,rgba(110,231,183,.06),rgba(110,231,183,.015));
}
.sh-artifact-label{font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--mint)}
.sh-artifact-body{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:#cfe9dd}
.sh-prereq{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink-faint)}
.sh-prereq .pq{padding:4px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.07);color:var(--ink-dim)}
.sh-prereq .pq.ok{color:var(--mint);border-color:rgba(110,231,183,.24)}
.sh-prereq .arrow{opacity:.5}
.sh-cta{
  margin-top:auto;appearance:none;cursor:pointer;border-radius:7px;padding:13px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:500;
  background:linear-gradient(160deg,rgba(224,178,92,.16),rgba(224,178,92,.07));
  border:1px solid rgba(224,178,92,.42);color:#f0dcb2;
  transition:background .18s ease,transform .12s ease,border-color .18s ease;
}
.sh-cta:hover{background:linear-gradient(160deg,rgba(224,178,92,.26),rgba(224,178,92,.12));color:#fff}
.sh-cta:active{transform:scale(.985)}
.sh-cta:disabled{cursor:default;opacity:.55}
.sh-cta.done{background:rgba(110,231,183,.08);border-color:rgba(110,231,183,.3);color:var(--mint)}
.sh-cta.locked{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09);color:var(--ink-faint)}
.sh-keys{display:flex;gap:16px;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink-faint)}
.sh-keys b{color:var(--ink-dim);font-weight:500}

/* ── profile drawer ────────────────────────── */
.drawer{
  position:absolute;z-index:7;top:0;right:0;bottom:0;width:min(380px,94vw);
  padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;
  background:linear-gradient(160deg,rgba(17,22,38,.92),rgba(9,12,22,.95));
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-32px 0 70px rgba(2,4,9,.65);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  transform:translateX(24px);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .22s ease;
}
.drawer.show{transform:none;opacity:1;pointer-events:auto}
.drawer[hidden]{display:none}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start}
.dr-rank{display:block;font-size:22px;font-weight:600;letter-spacing:.12em;color:#f4f6fc}
.dr-sub{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-dim);margin-top:6px;font-variant-numeric:tabular-nums}
.dr-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.dr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#f3d59b);transition:width .5s cubic-bezier(.22,1,.36,1)}
.dr-ladder{display:flex;gap:4px}
.dr-rung{flex:1;text-align:center;padding:7px 2px;border-radius:5px;border:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--ink-faint)}
.dr-rung.past{color:var(--ink-dim);border-color:rgba(224,178,92,.22)}
.dr-rung.now{color:var(--gold);border-color:rgba(224,178,92,.5);background:rgba(224,178,92,.07)}
.dr-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dr-stat{border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:10px 12px}
.dr-stat .v{font-size:17px;font-weight:600;color:#eef1fa;font-variant-numeric:tabular-nums}
.dr-stat .k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--ink-faint);margin-top:3px}
.dr-section{display:flex;flex-direction:column;gap:8px}
.dr-label{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--ink-faint)}
.dr-shelf,.dr-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dr-shelf li{font-size:11.5px;line-height:1.45;color:#b9c0d2;padding:8px 11px;border-radius:6px;
  border:1px solid rgba(110,231,183,.14);background:rgba(110,231,183,.03)}
.dr-shelf li b{color:var(--mint);font-weight:500;font-family:var(--mono);font-size:9px;letter-spacing:.1em;display:block;margin-bottom:2px}
.dr-log li{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.05em;color:var(--ink-dim);padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.dr-log .g{color:var(--gold)}
.dr-empty{font-size:11px;color:var(--ink-faint);font-style:italic}

/* ── track re-aim states ───────────────────── */
.node.dim{opacity:.3}
.link.dimmed,.jdot.dimmed{opacity:.22}
.node.ghost{opacity:.09;pointer-events:none}
.link.ghost,.jdot.ghost{opacity:.06}
.node.spot .ring{stroke:var(--accent);stroke-width:2}
.node.spot.done .ring{stroke:#fff}
.node.spot .halo{stroke:color-mix(in srgb,var(--accent) 45%,transparent);opacity:1}
.stage.switching .node,.stage.switching .link,.stage.switching .jdot{transition:opacity .2s ease;opacity:.12}
.node,.link,.jdot{transition:opacity .34s ease}

/* dev crown nodes: slightly smaller, green-tinged when live */
.node.dev .ring{stroke:rgba(110,200,150,.34)}
.node.dev.open .ring{stroke:rgba(150,235,190,.85)}
.node.dev.open .halo{stroke:rgba(40,209,80,.3)}

/* selection reticle: rotating arc brackets */
.node .selring{stroke-dasharray:24 14;transition:opacity .25s ease}
@media (prefers-reduced-motion:no-preference){
  .node.sel .selring{animation:retspin 9s linear infinite}
}
@keyframes retspin{to{transform:rotate(360deg)}}

/* unlock celebration */
.node .ping{fill:none;stroke:#fff;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .node.just .ping{animation:ping .7s cubic-bezier(.16,.8,.3,1) forwards}
}
@keyframes ping{0%{opacity:.8;stroke-width:2;transform:scale(.6)}100%{opacity:0;stroke-width:.5;transform:scale(1.75)}}
.flyxp{
  position:absolute;z-index:9;pointer-events:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--gold);text-shadow:0 0 12px rgba(224,178,92,.8);
}

/* compact panel on the TUKANG tab: same dock, narrower */
.panel.compact{width:min(480px,92vw)}

/* backdrop while a dialog is open */
.stage.veiled #tree{filter:brightness(.72) saturate(.85);transition:filter .3s ease}
#tree{transition:filter .3s ease}


/* ── light theme ~ default; toggle in the HUD ─────────────── */
[data-theme="light"]{
  --bg-0:#eef1f6;
  --bg-1:#e6eaf2;
  --ink:#1a2030;
  --ink-dim:#4c5568;
  --ink-faint:#8a92a8;
  --gold:#9a7420;
  --mint:#0c8f63;
  --indigo:#4655c8;
  --indigo-lit:#4655c8;
  --line:rgba(20,32,64,.15);
  --accent-ink:color-mix(in srgb,var(--accent) 52%,#14203c);
  --card-bg:linear-gradient(165deg,rgba(255,255,255,.82),rgba(244,247,252,.68));
  --card-border:rgba(20,32,64,.12);
}
[data-theme="light"] body{background:var(--bg-0)}
[data-theme="light"] .stage{
  background:
    radial-gradient(120% 90% at 50% 62%, #ffffff 0%, #eef1f6 48%, #e2e7f0 100%),
    var(--bg-0);
}
[data-theme="light"] .stage::before{opacity:.05}
[data-theme="light"] .stage::after{
  background:radial-gradient(82% 68% at 50% 55%,transparent 50%,rgba(168,182,206,.42) 100%);
}
[data-theme="light"] .fluid-layer{opacity:.15;filter:saturate(.5) brightness(1.7) contrast(.9)}
[data-theme="light"] .panel,
[data-theme="light"] .hud{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 40px rgba(30,45,80,.14)}
[data-theme="light"] .panel-title{color:#141a2c}
[data-theme="light"] .panel-title::after{background:linear-gradient(90deg,rgba(20,32,64,.4),rgba(20,32,64,0))}
[data-theme="light"] .panel-desc{color:#3c4458}
[data-theme="light"] .panel-outcome{color:var(--ink-dim)}
[data-theme="light"] .panel-foot .dot{background:rgba(20,32,64,.28)}

/* glass chrome */
[data-theme="light"] .tracks,
[data-theme="light"] .chip{
  background:rgba(255,255,255,.72);border-color:rgba(20,32,64,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 28px rgba(30,45,80,.14);
}
[data-theme="light"] .tab:hover{color:var(--ink);background:rgba(20,32,64,.05)}
[data-theme="light"] .tab.on{color:#10162a;background:rgba(20,32,64,.07);box-shadow:inset 0 -1.5px 0 var(--accent-ink)}
[data-theme="light"] .chip:hover{border-color:rgba(20,32,64,.24)}
[data-theme="light"] .chip-rank{color:#1a2030}
[data-theme="light"] .cr-track{stroke:rgba(20,32,64,.12)}

/* tree materials */
[data-theme="light"] .arc{stroke:rgba(60,80,140,.11)}
[data-theme="light"] .link{stroke:rgba(60,80,140,.24)}
[data-theme="light"] .link.open{stroke:rgba(60,80,140,.48)}
[data-theme="light"] .link.done{stroke:#2c3a66}
[data-theme="light"] .jdot{fill:rgba(60,80,140,.36)}
[data-theme="light"] .jdot.done{fill:#2c3a66}
[data-theme="light"] .node .ring{fill:#f7f9fd;stroke:rgba(60,80,140,.34)}
[data-theme="light"] .node .glyph{stroke:rgba(70,85,125,.52)}
[data-theme="light"] .node.open .ring{fill:#ffffff;stroke:#4655c8}
[data-theme="light"] .node.open .glyph{stroke:#232c4e}
[data-theme="light"] .node.open .halo{stroke:rgba(70,85,200,.28)}
[data-theme="light"] .node.done .ring{fill:#232c4e;stroke:#161d38}
[data-theme="light"] .node.done .glyph{stroke:#f2f5ff}
[data-theme="light"] .node.done .halo{stroke:rgba(35,44,78,.28)}
[data-theme="light"] .node.spot .ring{stroke:var(--accent-ink)}
[data-theme="light"] .node.spot.done .ring{stroke:#161d38}
[data-theme="light"] .node.dev .ring{stroke:rgba(18,140,72,.4)}
[data-theme="light"] .node.dev.open .ring{stroke:#12a04c}
[data-theme="light"] .node.dev.open .halo{stroke:rgba(18,160,76,.3)}
[data-theme="light"] .node .selring{stroke:rgba(22,29,56,.55)}
[data-theme="light"] .node .ping{stroke:#232c4e}
[data-theme="light"] #tree circle[fill="url(#core)"]{opacity:.45}
[data-theme="light"] .stage.veiled #tree{filter:brightness(.94) saturate(.9)}

/* HUD */
[data-theme="light"] .btn{background:rgba(20,32,64,.04);color:var(--ink-dim)}
[data-theme="light"] .btn:hover{background:rgba(20,32,64,.09);color:var(--ink);border-color:rgba(20,32,64,.28)}
[data-theme="light"] .btn.primary{color:#6d5312;border-color:rgba(154,116,32,.45);background:rgba(154,116,32,.08)}
[data-theme="light"] .btn.primary:hover{background:rgba(154,116,32,.15);color:#3f3009}
[data-theme="light"] .bar{background:rgba(20,32,64,.13)}
[data-theme="light"] .points-label em{color:#3c4458}
[data-theme="light"] .bl-name{color:#252c40}
[data-theme="light"] .toast{background:rgba(255,255,255,.94);border-color:var(--line);color:#1a2030}

/* sheet + drawer */
[data-theme="light"] .sheet,
[data-theme="light"] .drawer{
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(243,246,251,.92));
  border-left-color:rgba(20,32,64,.12);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.8),-32px 0 70px rgba(30,45,80,.16);
}
[data-theme="light"] .sh-close{background:rgba(20,32,64,.05);border-color:rgba(20,32,64,.12);color:var(--ink-dim)}
[data-theme="light"] .sh-close:hover{color:#10162a;background:rgba(20,32,64,.1)}
[data-theme="light"] .sh-title{color:#141a2c;border-image:linear-gradient(90deg,rgba(20,32,64,.3),transparent) 1}
[data-theme="light"] .sh-chip{border-color:rgba(20,32,64,.14);color:var(--ink-dim);background:rgba(20,32,64,.03)}
[data-theme="light"] .sh-chip.fmt{color:#2c3550}
[data-theme="light"] .sh-chip.xp{color:var(--gold);border-color:rgba(154,116,32,.35)}
[data-theme="light"] .sh-desc{color:#3c4458}
[data-theme="light"] .sh-step{color:#4c5568;border-bottom-color:rgba(20,32,64,.09)}
[data-theme="light"] .sh-artifact{border-color:rgba(12,143,99,.3);background:linear-gradient(160deg,rgba(12,143,99,.07),rgba(12,143,99,.02))}
[data-theme="light"] .sh-artifact-body{color:#14523c}
[data-theme="light"] .sh-prereq .pq{border-color:rgba(20,32,64,.14);color:var(--ink-dim)}
[data-theme="light"] .sh-prereq .pq.ok{color:var(--mint);border-color:rgba(12,143,99,.3)}
[data-theme="light"] .sh-cta{background:linear-gradient(160deg,rgba(154,116,32,.14),rgba(154,116,32,.06));border-color:rgba(154,116,32,.5);color:#6d5312}
[data-theme="light"] .sh-cta:hover{background:linear-gradient(160deg,rgba(154,116,32,.22),rgba(154,116,32,.1));color:#3f3009}
[data-theme="light"] .sh-cta.done{background:rgba(12,143,99,.07);border-color:rgba(12,143,99,.35);color:var(--mint)}
[data-theme="light"] .sh-cta.locked{background:rgba(20,32,64,.04);border-color:rgba(20,32,64,.14);color:var(--ink-faint)}
[data-theme="light"] .sh-keys b{color:var(--ink-dim)}
[data-theme="light"] .dr-rank{color:#141a2c}
[data-theme="light"] .dr-bar{background:rgba(20,32,64,.12)}
[data-theme="light"] .dr-rung{border-color:rgba(20,32,64,.1)}
[data-theme="light"] .dr-rung.past{color:var(--ink-dim);border-color:rgba(154,116,32,.3)}
[data-theme="light"] .dr-rung.now{color:var(--gold);border-color:rgba(154,116,32,.55);background:rgba(154,116,32,.07)}
[data-theme="light"] .dr-stat{border-color:rgba(20,32,64,.12)}
[data-theme="light"] .dr-stat .v{color:#141a2c}
[data-theme="light"] .dr-shelf li{color:#3c4458;border-color:rgba(12,143,99,.22);background:rgba(12,143,99,.04)}
[data-theme="light"] .dr-log li{color:var(--ink-dim);border-bottom-color:rgba(20,32,64,.09)}
[data-theme="light"] .kd-logo{filter:drop-shadow(0 1px 6px rgba(20,120,50,.25))}
[data-theme="light"] .flyxp{text-shadow:0 0 12px rgba(154,116,32,.5)}

/* ── mobile ~ must stay LAST so it wins the cascade ── */
@media (max-width:860px){
  .tracks{
    top:8px;left:8px;right:8px;transform:none;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .tracks::-webkit-scrollbar{display:none}
  .tab{scroll-snap-align:center;flex:0 0 auto;padding:6px 10px 5px}
  .chip{top:auto;bottom:18px;right:14px;padding:6px 10px 6px 7px}
  .chip-ring{width:24px;height:24px}
  .chip-xp{display:none}
  .sheet,.drawer{
    top:auto;left:0;right:0;bottom:0;width:100%;max-height:78vh;
    border-left:0;border-top:1px solid rgba(255,255,255,.1);
    border-radius:14px 14px 0 0;
    transform:translateY(26px);
  }
  .sheet.show,.drawer.show{transform:none}
  .sh-keys{display:none}
  .panel{
    width:auto;max-width:none;left:16px;right:16px;top:66px;bottom:auto;transform:none;
  }
  .panel.compact{width:auto}
  .panel-title{font-size:20px;margin-bottom:9px}
  .panel-title::after{margin-top:9px}
  .panel-desc{font-size:12.5px;line-height:1.5}
  .panel-outcome{font-size:11.5px}
  .panel-foot{margin-top:12px}

  /* branch anchors become a rail above the HUD */
  .branch-label{top:auto;bottom:178px;transform:none}
  .anchor-left{left:16px}
  .anchor-right{right:16px}
  .anchor-top{left:50%;transform:translateX(-50%)}
  .bl-name{font-size:11px;letter-spacing:.2em}
  .bl-sub{font-size:8.5px;letter-spacing:.22em;margin-top:3px}
  .bl-blurb{display:none}

  .brandmark{display:none}
  .hud{top:auto;left:50%;right:auto;bottom:14px;transform:translateX(-50%);width:min(420px,92vw)}
  .points{font-size:26px}
  .toast{bottom:196px}
}