:root {
  --bg:   #1a1917;
  --s1:   #201f1d;
  --s2:   #272523;
  --s3:   #2e2c29;
  --b1:   #323028;
  --b2:   #3e3c33;
  --b3:   #4e4c42;
  --pink: #ff3c78;
  --pink2:#ff6fa3;
  --glow: rgba(255,60,120,.35);
  --t1:   #e8e2d2;
  --t2:   #9e9880;
  --t3:   #5e5a4a;
}

/* ── RESET ── */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }

/* ── Accessible / crawlable text version of the roadmap ──
   Same content as the interactive SVG graph, exposed for screen
   readers and search engines (the SVG graph is invisible to both).
   Off-screen but present in the DOM — NOT display:none/hidden. */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── BODY + ANIMATED DOT GRID ── */
body {
  background: var(--bg);
  background-image:
    radial-gradient(rgba(200,192,165,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--t1);
  user-select: none;
}

/* ── HEADER ── */
.hdr {
  position:fixed; top:0; left:0; right:0; height:50px;
  display:flex; align-items:center; gap:14px;
  padding:0 18px;
  background: rgba(4,4,11,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b1);
  z-index: 60;
}
.logo {
  font-family:'JetBrains Mono',monospace;
  font-size:15px; font-weight:700;
  color: var(--t3);
  flex-shrink:0;
}
.logo span { color: var(--pink); }
.hdr-title {
  font-size:13px; font-weight:800;
  letter-spacing:-.2px; color:var(--t2);
  flex-shrink:0;
}
.hdr-hint {
  font-size:11px; color:var(--t3);
  margin-left:auto;
}

/* ── PROGRESS BAR (header) ── */
#prog-bar {
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 3px 10px 3px 4px;
  cursor: pointer; transition: border-color .15s;
}
#prog-bar:hover { border-color: var(--b2); }
#prog-track {
  width: 90px; height: 6px;
  background: var(--b2); border-radius: 6px; overflow: hidden;
}
#prog-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg,#ff3c78,#ff6b4a,#a855f7);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(255,60,120,.5);
}
#prog-text {
  font-size:10px; font-weight:700; color:var(--t2);
  font-family:'JetBrains Mono',monospace; white-space:nowrap;
}
@keyframes bar-flash {
  0%,100% { box-shadow: 0 0 8px rgba(255,60,120,.5); }
  50% { box-shadow: 0 0 18px rgba(255,60,120,.9), 0 0 32px rgba(168,85,247,.4); }
}
#prog-bar.flash #prog-fill { animation: bar-flash .45s ease-out; }
#prog-reset-btn {
  background:none; border:none; cursor:pointer;
  font-size:11px; color:var(--t3); padding:2px 4px; border-radius:4px;
  transition:color .14s;
}
#prog-reset-btn:hover { color:#ef4444; }

/* ── GRAPH ── */
#graph-root { position:fixed; top:50px; bottom:0; left:0; right:0; cursor:grab; }
#graph-root:active { cursor:grabbing; }
#graph-svg { width:100%; height:100%; display:block; }

/* ── SVG TEXT ── */
.node-label {
  font-family:'Inter',system-ui,sans-serif;
  pointer-events:none; dominant-baseline:middle; text-anchor:middle;
}
.node-label-stage { letter-spacing:.3px; }
.node-label-small { transition: fill .15s; }
.node-em { pointer-events:none; text-anchor:middle; dominant-baseline:middle; }

/* ── STAGE HALO — continuous slow breathe ── */
.stage-halo {
  animation: halo-breathe 4s ease-in-out infinite;
  transform-origin: center;
  transition: stroke-opacity .25s;
}
@keyframes halo-breathe {
  0%,100% { transform:scale(1);    opacity:.28; }
  50%      { transform:scale(1.18); opacity:.55; }
}

/* ── S1 PULSE — "start here" ring ── */
.s1-pulse-ring {
  animation: s1-pulse 2.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes s1-pulse {
  0%,100% { transform:scale(1);   opacity:.55; }
  50%      { transform:scale(2.0); opacity:.08; }
}

/* ── TOPIC LABELS — smooth fade ── */
.node-label-topic { transition: fill .18s ease; }
.node-label-small { transition: fill .18s ease; }

/* ── NODE CIRCLE — scale transition on hover ── */
.node-circle { transition: r .15s ease, fill .18s ease; }

/* ── DONE RING ── */
.done-ring {
  stroke-dasharray: 5 3;
  animation: done-spin 12s linear infinite;
}
@keyframes done-spin { to { stroke-dashoffset: -100; } }

/* ── RIPPLE CELEBRATE ── */
.ripple-celebrate {
  animation: ripple-out .85s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-out {
  0%   { r:6;  opacity:.9; }
  100% { r:48; opacity:0; }
}

/* ── PIN RING ── */
.pin-ring {
  fill:none; stroke:rgba(255,255,255,.5);
  stroke-width:1.5; stroke-dasharray:3 3;
  pointer-events:none;
}

/* ── PANEL ── */
.panel {
  position:fixed; top:50px; right:0; bottom:0; width:370px;
  background: var(--s1);
  border-left: 1px solid var(--b1);
  z-index:200;
  transform:translateX(100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.panel.open { transform:translateX(0); }
.panel.open { box-shadow: -4px 0 40px rgba(0,0,0,.5); }

#panel-close {
  position:absolute; top:14px; right:14px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:var(--s2); border:1px solid var(--b1);
  border-radius:7px; color:var(--t2); cursor:pointer;
  font-size:14px; transition:all .14s; z-index:1;
}
#panel-close:hover { color:var(--t1); border-color:var(--b2); }

#panel-body {
  overflow-y:auto; height:100%; padding:20px 18px 40px;
  scrollbar-width:thin; scrollbar-color:var(--b2) transparent;
}

/* ── HEADER START BTN ── */
.hdr-start-btn {
  background: var(--pink); border:none; border-radius:7px;
  color:#fff; font-size:12px; font-weight:700;
  padding:5px 13px; cursor:pointer;
  transition:background .14s, box-shadow .14s;
  box-shadow:0 0 12px rgba(255,60,120,.3);
  flex-shrink:0;
}
.hdr-start-btn:hover { background:var(--pink2); box-shadow:0 0 20px rgba(255,60,120,.5); }

/* ── PANEL ATOMS ── */
.p-eyebrow {
  font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:2.5px; margin-bottom:6px; display:flex; align-items:center; gap:5px;
}
.p-title {
  font-size:18px; font-weight:800; letter-spacing:-.4px;
  color:var(--t1); margin-bottom:10px; line-height:1.25;
}
.p-guide {
  font-size:13px; color:var(--t1); line-height:1.8;
  background:var(--s2); border-left:3px solid var(--pink);
  padding:10px 13px; border-radius:0 8px 8px 0;
  margin-bottom:14px;
}
.p-desc { font-size:12px; color:var(--t2); line-height:1.75; margin-bottom:14px; }

/* ── PILLS ── */
.p-pills { display:flex; gap:7px; margin-bottom:14px; flex-wrap:wrap; }
.p-pill {
  font-size:10px; font-weight:700; padding:3px 10px;
  border-radius:20px; border:1px solid var(--b2); color:var(--t2);
}
.p-pill-time { border-color:rgba(255,60,120,.35); color:var(--pink2); }
.p-pill-diff { border-color:var(--b2); }

/* ── ORDERED STEPS ── */
.p-steps { display:flex; flex-direction:column; gap:6px; }
.p-step {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; background:var(--s2); border:1px solid var(--b1);
  border-radius:9px; cursor:pointer; transition:all .14s;
}
.p-step:hover { border-color:var(--b2); transform:translateX(3px); }
.p-step-done { border-color:rgba(16,185,129,.25); background:rgba(16,185,129,.05); }
.p-step-n {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; flex-shrink:0; margin-top:1px;
}
.p-step-body { flex:1; min-width:0; }
.p-step-label { font-size:12px; font-weight:700; color:var(--t1); margin-bottom:2px; }
.p-step-note  { font-size:11px; color:var(--t3); line-height:1.4; }
.p-step-arr   { font-size:14px; color:var(--t3); flex-shrink:0; align-self:center; }

/* ── NEXT STAGE BTN ── */
.p-next-stage {
  width:100%; padding:11px 14px; margin-top:4px;
  background:transparent; border:1px solid; border-radius:10px;
  font-size:12px; font-weight:700; cursor:pointer;
  transition:all .15s; text-align:center;
}
.p-next-stage:hover { opacity:.75; transform:translateX(3px); }

/* ── BOOK CARD ── */
.p-book-card { background:var(--s2); border:1px solid var(--b1); border-radius:9px; padding:12px; margin-bottom:4px; }
.p-book-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.p-book-author { font-size:12px; color:var(--t2); }
.p-book-note { font-size:11px; color:var(--t3); text-align:right; flex:1; }
.p-divider { height:1px; background:var(--b1); margin:14px 0; }
.p-section {
  font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.8px; color:var(--t3); margin-bottom:10px;
}

/* ── COMPLETE BUTTON ── */
.p-complete-btn {
  display:flex; align-items:center; gap:9px;
  width:100%; padding:10px 14px; margin-bottom:12px;
  background: var(--s2); border:1px solid var(--b2);
  border-radius:10px; cursor:pointer;
  font-size:12px; font-weight:700; color:var(--t2);
  transition:all .18s; text-align:left;
}
.p-complete-btn:hover {
  border-color:#10b981; color:#10b981;
  background:rgba(16,185,129,.06);
}
.p-complete-btn.done {
  border-color:rgba(16,185,129,.5); color:#10b981;
  background:rgba(16,185,129,.08);
}
.p-check-ico { font-size:15px; flex-shrink:0; }
.p-check-date { font-size:10px; color:var(--t3); margin-left:auto; }

/* ── OPEN BUTTON ── */
.p-open-btn {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; background:var(--pink); border-radius:9px;
  color:#fff; font-size:12px; font-weight:700;
  text-decoration:none; margin-bottom:14px;
  transition:background .14s; border:none;
  box-shadow:0 0 16px rgba(255,60,120,.3);
}
.p-open-btn:hover { background:var(--pink2); box-shadow:0 0 22px rgba(255,60,120,.5); }

/* ── STAGE PROGRESS BAR (in panel) ── */
.p-stage-prog {
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.p-sp-bar {
  flex:1; height:5px; background:var(--b2); border-radius:5px; overflow:hidden;
}
.p-sp-fill {
  height:100%; border-radius:5px;
  transition:width .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 6px currentColor;
}
.p-sp-txt { font-size:10px; font-weight:700; white-space:nowrap; }

/* ── RESOURCE LIST ── */
.p-list { display:flex; flex-direction:column; gap:5px; }
.p-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:var(--s2); border:1px solid var(--b1);
  border-radius:8px; cursor:pointer;
  transition:all .13s;
}
.p-item:hover { border-color:var(--b2); transform:translateX(3px); }
.p-item-done { border-color:rgba(16,185,129,.25) !important; }
.p-item-done:hover { border-color:rgba(16,185,129,.5) !important; }
.p-item-done-ico { font-size:11px; color:#10b981; margin-left:auto; flex-shrink:0; }
.p-item-badge {
  font-size:8px; font-weight:700; padding:2px 6px; border-radius:3px;
  text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; line-height:1.6;
}
.rb-article  { background:rgba(59,130,246,.15);  color:#60a5fa; }
.rb-video    { background:rgba(239,68,68,.15);    color:#f87171; }
.rb-platform { background:rgba(168,85,247,.15);   color:#c084fc; }
.rb-tool     { background:rgba(249,115,22,.15);   color:#fb923c; }
.rb-repo     { background:rgba(16,185,129,.15);   color:#34d399; }
.rb-course   { background:rgba(255,60,120,.15);   color:#ff6fa3; }
.rb-docs     { background:rgba(100,116,139,.15);  color:#94a3b8; }
.rb-blog     { background:rgba(6,182,212,.15);    color:#22d3ee; }
.rb-book     { background:rgba(245,158,11,.15);   color:#fbbf24; }
.rb-node     { background:rgba(136,136,170,.12);  color:#8888aa; }
.rb-program  { background:rgba(234,179,8,.15);   color:#eab308; }
.p-item-name { font-size:12px; font-weight:500; color:var(--t1); line-height:1.3; }
.p-item-body { flex:1; min-width:0; }
.p-item-sub  { font-size:10px; color:var(--t3); margin-top:2px; display:flex; align-items:center; gap:5px; }
.p-item-arr  { font-size:11px; color:var(--t3); flex-shrink:0; }
.p-item-ext  {
  font-size:11px; color:var(--t3); flex-shrink:0; text-decoration:none;
  padding:2px 4px; border-radius:4px; transition:color .12s;
}
.p-item-ext:hover { color:var(--pink2); }

/* ── BOOK TAG ── */
.p-book-tag {
  display:inline-block; font-size:8px; font-weight:800;
  padding:2px 8px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.5px; margin-top:6px;
}
.bl-bg { background:rgba(16,185,129,.12);  color:#10b981; }
.bl-im { background:rgba(245,158,11,.12);  color:#f59e0b; }
.bl-ad { background:rgba(239,68,68,.12);   color:#ef4444; }
.bl-ms { background:rgba(168,85,247,.12);  color:#a855f7; }

/* ── BACKDROP ── */
#backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:190; opacity:0; pointer-events:none; transition:opacity .22s;
}
#backdrop.show { opacity:1; pointer-events:all; }

/* ── LEGEND ── */
#legend {
  position:fixed; bottom:20px; left:20px;
  background:rgba(8,8,18,.92); backdrop-filter:blur(12px);
  border:1px solid var(--b1); border-radius:12px;
  padding:12px 16px; z-index:50;
  display:flex; flex-direction:column; gap:7px;
}
.leg-item { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--t2); }
.leg-dot {
  width:12px; height:12px; border-radius:50%;
  border:1.5px solid; flex-shrink:0;
}
/* First-item indicator */
.leg-first {
  font-size:10px; color:var(--pink); font-weight:700;
  display:flex; align-items:center; gap:5px; margin-top:4px;
  padding-top:8px; border-top:1px solid var(--b1);
}
.leg-pulse {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,60,120,.3); border:1.5px solid var(--pink);
  animation:leg-pulse-anim 2s ease-in-out infinite;
}
@keyframes leg-pulse-anim {
  0%,100% { box-shadow:0 0 0 0 rgba(255,60,120,.5); }
  50%      { box-shadow:0 0 0 5px rgba(255,60,120,0); }
}

/* ── CONTROLS ── */
#controls {
  position:fixed; bottom:20px; right:20px;
  display:flex; flex-direction:column; gap:7px; z-index:50;
}
#controls button {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,18,.92); backdrop-filter:blur(12px);
  border:1px solid var(--b1); border-radius:9px;
  color:var(--t2); font-size:17px; cursor:pointer;
  transition:all .14s;
}
#controls button:hover {
  color:var(--t1); border-color:var(--b2);
  box-shadow:0 0 12px rgba(255,60,120,.2);
}

/* ── SCROLL ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:4px; }

/* ── RESPONSIVE ── */
@media (max-width:640px) {
  .panel { width:100%; border-left:none; }
  .hdr-hint { display:none; }
  #legend { display:none; }
  #prog-track { width:60px; }
}