/* ══════════════════════════════════════════════════════════
   The Map of Machine Learning — visual system
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#070a10;
  --bg-2:#0c111b;
  --ink:#e8edf7;
  --ink-dim:#96a3bb;
  --ink-faint:#5c6b85;
  --line:#1c2534;
  --line-2:#2a3547;
  --accent:#6ea8ff;
  --panel:rgba(11,15,24,.93);
  --radius:14px;
  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
canvas#map{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;cursor:grab;touch-action:none}
canvas#map.grabbing{cursor:grabbing}
button{font-family:inherit;color:inherit}
.muted{color:var(--ink-dim);font-size:12.5px;line-height:1.5}

/* ── top bar ─────────────────────────────────────────────── */
#topbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:40;
  display:flex;align-items:center;gap:18px;padding:0 16px;
  background:linear-gradient(180deg,rgba(7,10,16,.94),rgba(7,10,16,.55) 70%,transparent);
  backdrop-filter:blur(6px);pointer-events:none;
}
#topbar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;letter-spacing:.2px;color:var(--ink-dim);white-space:nowrap}
.brand b{color:var(--ink);font-weight:650}
.brand svg{fill:var(--accent);opacity:.9;stroke:var(--accent)}

.search-wrap{position:relative;flex:1;max-width:430px;margin-left:6px}
#search{
  width:100%;height:34px;border-radius:9px;border:1px solid var(--line-2);
  background:rgba(16,22,34,.85);color:var(--ink);padding:0 12px;font-size:13.5px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
#search:focus{border-color:#3d5a8a;box-shadow:0 0 0 3px rgba(110,168,255,.13)}
#search::placeholder{color:var(--ink-faint)}
.results{
  position:absolute;top:40px;left:0;right:0;max-height:56vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 22px 60px rgba(0,0,0,.62);padding:5px;
}
.results .row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px}
.results .row:hover,.results .row.on{background:rgba(110,168,255,.12)}
.results .dot{width:8px;height:8px;border-radius:50%;flex:none}
.results .sub{color:var(--ink-faint);font-size:11.5px;margin-left:auto;white-space:nowrap}
.results .none{padding:12px;color:var(--ink-faint);font-size:12.5px}

.tools{display:flex;gap:6px;margin-left:auto}
.tool{
  height:32px;padding:0 12px;border-radius:8px;cursor:pointer;font-size:12.5px;
  background:rgba(20,27,40,.8);border:1px solid var(--line-2);transition:.15s;
}
.tool:hover{background:rgba(34,45,66,.9);border-color:#3a4761}
.tool.on{background:rgba(110,168,255,.16);border-color:#3d5a8a;color:#cfe1ff}

/* ── view controls ───────────────────────────────────────── */
#viewctl{
  position:fixed;left:16px;bottom:18px;z-index:35;display:flex;align-items:center;gap:6px;
  background:rgba(11,15,24,.82);border:1px solid var(--line-2);border-radius:11px;padding:6px;
  backdrop-filter:blur(6px);
}
#viewctl button{
  width:30px;height:30px;border-radius:7px;background:rgba(24,32,47,.9);
  border:1px solid var(--line-2);cursor:pointer;font-size:15px;line-height:1;
}
#viewctl button:hover{background:#243149}
.depth{display:flex;align-items:center;gap:7px;padding:0 8px 0 10px;border-left:1px solid var(--line-2);margin-left:4px}
.depth label{font-size:11px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}
.depth input{width:86px;accent-color:var(--accent)}
#depth-label{font-size:11.5px;color:var(--ink-dim);width:64px}
#scalebar{
  position:fixed;left:16px;bottom:66px;z-index:34;font-size:11px;color:var(--ink-faint);
  letter-spacing:.08em;text-transform:uppercase;pointer-events:none;
}

/* ── floating panels ─────────────────────────────────────── */
.floaty{
  position:fixed;top:66px;right:16px;z-index:38;width:290px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:14px 15px;box-shadow:0 26px 70px rgba(0,0,0,.6);backdrop-filter:blur(10px);
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
.floaty h3{margin:0 0 9px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
#legend-list .item{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12.5px;cursor:pointer;opacity:.95}
#legend-list .item:hover{opacity:1}
#legend-list .item.off{opacity:.32}
#legend-list .swatch{width:11px;height:11px;border-radius:3px;flex:none}
#legend-list .cnt{margin-left:auto;color:var(--ink-faint);font-size:11px}
.legend-edges div{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-dim);padding:3px 0}
.ln{width:22px;height:0;border-top:2px solid;flex:none}
.ln-needs{border-color:#6b7a93}
.ln-to{border-color:#7fd3a8}
.ln-rel{border-color:#c08ae0;border-top-style:dashed}
.helplist{margin:0;padding-left:16px;font-size:12.5px;line-height:1.62;color:var(--ink-dim)}
.helplist li{margin-bottom:7px}
.helplist b{color:var(--ink)}
#tour-list .tour{
  padding:9px 10px;border:1px solid var(--line-2);border-radius:9px;margin-bottom:7px;cursor:pointer;transition:.15s;
}
#tour-list .tour:hover{border-color:#3d5a8a;background:rgba(110,168,255,.09)}
#tour-list .tour b{display:block;font-size:13px;margin-bottom:2px}
#tour-list .tour span{font-size:11.5px;color:var(--ink-faint)}

/* ── dossier ─────────────────────────────────────────────── */
#panel{
  position:fixed;top:0;right:0;bottom:0;width:min(470px,100vw);z-index:45;
  background:linear-gradient(180deg,rgba(10,14,22,.97),rgba(8,11,18,.97));
  border-left:1px solid var(--line-2);box-shadow:-24px 0 70px rgba(0,0,0,.55);
  overflow-y:auto;overscroll-behavior:contain;animation:slide .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slide{from{transform:translateX(28px);opacity:0}}
#panel-close{
  position:sticky;top:10px;float:right;margin:10px 12px 0 0;width:28px;height:28px;
  border-radius:7px;background:rgba(28,37,54,.9);border:1px solid var(--line-2);
  cursor:pointer;z-index:2;font-size:12px;
}
#panel-close:hover{background:#2b3a55}
#panel-body{padding:22px 24px 60px}
.p-kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:650;margin-bottom:7px}
.p-title{font-size:26px;line-height:1.14;margin:0 0 10px;font-weight:660;letter-spacing:-.015em}
.p-blurb{font-size:14.5px;line-height:1.62;color:#c6d2e6;margin:0 0 6px;font-family:var(--serif)}
.p-actions{display:flex;gap:7px;margin:16px 0 4px;flex-wrap:wrap}
.p-actions button,.p-actions a{
  font-size:12px;padding:6px 11px;border-radius:8px;border:1px solid var(--line-2);
  background:rgba(24,32,47,.85);cursor:pointer;text-decoration:none;color:var(--ink-dim);transition:.15s;
}
.p-actions button:hover,.p-actions a:hover{background:#26334b;color:var(--ink)}
.p-actions .primary{background:rgba(110,168,255,.16);border-color:#3d5a8a;color:#d3e3ff}

.sec{margin-top:26px}
.sec > h4{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 11px;font-weight:650;display:flex;align-items:center;gap:9px;
}
.sec > h4:after{content:"";flex:1;height:1px;background:var(--line)}

.math-card{
  background:rgba(255,255,255,.032);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:9px;padding:13px 14px;margin-bottom:10px;overflow-x:auto;
}
.math-card .tex{font-size:15.5px;color:#eef3ff;margin-bottom:0}
.math-card .note{font-size:12.5px;color:var(--ink-dim);line-height:1.55;margin-top:9px}
.math-card .note code,.p-blurb code,.anat code{font-family:var(--mono);font-size:11.6px;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:4px}
.katex{font-size:1.02em}
.katex-display{margin:.2em 0}

.anat{list-style:none;margin:0;padding:0;counter-reset:a}
.anat li{
  position:relative;padding:8px 0 8px 30px;font-size:13.2px;line-height:1.55;color:#bccae0;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.anat li:last-child{border-bottom:0}
.anat li:before{
  counter-increment:a;content:counter(a);position:absolute;left:0;top:8px;
  width:19px;height:19px;border-radius:50%;font-size:10.5px;display:grid;place-items:center;
  background:rgba(110,168,255,.14);color:#9dc0ff;font-family:var(--mono);
}
.anat li b{color:#e9eefb;font-weight:600}

.links{display:flex;flex-direction:column;gap:5px}
.lnk{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;
  font-size:13px;border:1px solid transparent;transition:.13s;
}
.lnk:hover{background:rgba(255,255,255,.05);border-color:var(--line-2)}
.lnk .dot{width:7px;height:7px;border-radius:50%;flex:none}
.lnk .rel{margin-left:auto;font-size:10.5px;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase}

.anim-box{border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:#080b12}
.anim-box canvas{display:block;width:100%;background:#080b12}
.anim-ctl{display:flex;align-items:center;gap:10px;padding:8px 11px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.anim-ctl button{width:26px;height:26px;border-radius:6px;background:rgba(110,168,255,.15);border:1px solid #35507d;cursor:pointer;font-size:11px}
.anim-ctl input{flex:1;accent-color:var(--accent)}
.anim-cap{font-size:12.2px;color:var(--ink-dim);line-height:1.5;padding:9px 12px 11px;min-height:34px;border-top:1px solid var(--line)}
.anim-cap b{color:#dce7fb}

.wikirow{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.wikirow a{font-size:12px;color:#8fb6ff;text-decoration:none;border-bottom:1px solid rgba(143,182,255,.3)}
.wikirow a:hover{border-color:#8fb6ff}

/* ── tour bar ────────────────────────────────────────────── */
#tourbar{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:44;
  display:flex;align-items:center;gap:10px;padding:7px 9px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);backdrop-filter:blur(8px);
}
#tourbar button{
  width:30px;height:30px;border-radius:8px;background:rgba(26,35,52,.9);
  border:1px solid var(--line-2);cursor:pointer;font-size:15px;line-height:1;
}
#tourbar button:hover{background:#2a3a56}
.tour-meta{font-size:12.5px;padding:0 4px;min-width:190px;text-align:center}
.tour-meta span{display:block;font-size:11px;color:var(--ink-faint);margin-top:1px}

/* ── tooltip / boot ──────────────────────────────────────── */
#tooltip{
  position:fixed;z-index:50;pointer-events:none;max-width:250px;
  background:rgba(12,17,27,.96);border:1px solid var(--line-2);border-radius:9px;
  padding:8px 10px;font-size:12.3px;line-height:1.45;color:#cfd9ea;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
#tooltip b{display:block;color:#fff;font-size:13px;margin-bottom:3px}
#tooltip .t-meta{color:var(--ink-faint);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
#boot{
  position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:99;
  color:var(--ink-faint);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  transition:opacity .5s;
}
#boot.gone{opacity:0;pointer-events:none}

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#232f44;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#33445f;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:820px){
  .brand span{display:none}
  #panel{width:100vw}
  .floaty{width:calc(100vw - 32px)}
  .depth{display:none}
}