:root{
  --bg:#0b0b0d; --panel:#0e0e11; --panel2:#0e0e11; --ink:#e7e3d8; --grey:#8a877e; --dim:#847f74;
  --line:#26262b; --accent:#cfccc2; --accent-soft:rgba(207,204,194,.16);   /* NEUTRAL by default — set theme.accent in graphfolio.config.json to add colour */
  --fk:#cfccc2; --fk-soft:rgba(207,204,194,.16);   /* the root node stands out by size + centre, not colour */
  --glass:rgba(14,14,17,.82); --scrim:rgba(8,8,10,.86); --chip:#141418; --imgbg:#000;
  --soft:#c9c6bc; --quote:#e7e7ee; --cap:#a7a49a; --person:#b4b1a6; --personlbl:#c7c4ba; --hublbl:#cfccc2;
  --bright:#fff; --labsh:#000; --gradtop:#141318; --edge-hc:#7a7a85; --mixdot:#b4b1a6;
  --mono:ui-monospace,'SFMono-Regular','SF Mono',Menlo,Consolas,'Liberation Mono','DejaVu Sans Mono',monospace; --disp:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* Light theme — every surface, text and shadow colour flips via these variables. */
html[data-theme="light"]{
  --bg:#ffffff; --panel:#ffffff; --panel2:#ffffff; --ink:#1a1916; --grey:#5b584f; --dim:#6d695f;
  --line:#e2dfd6; --accent:#3a382f; --accent-soft:rgba(58,56,47,.12);   /* NEUTRAL by default (light theme) — theme.accent / theme.accentLight override this */
  --fk:#3a382f; --fk-soft:rgba(58,56,47,.12);
  --glass:rgba(255,255,255,.88); --scrim:rgba(28,26,22,.42); --chip:#f1efe9; --imgbg:#eeece6;
  --soft:#34322c; --quote:#23211c; --cap:#5b584f; --person:#5b584f; --personlbl:#474640; --hublbl:#34322c;
  --bright:#15140f; --labsh:#f7f5ef; --gradtop:#fbfaf6; --edge-hc:#555; --mixdot:#6d695f;
}
/* theme toggle button */
.themebtn{position:fixed;top:14px;right:16px;z-index:55;background:var(--panel);border:1px solid var(--accent);color:var(--accent);line-height:1;width:42px;height:38px;cursor:pointer;border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.themebtn:hover{background:var(--accent);color:var(--bg)}
.themebtn svg{display:block}
@media (max-width:680px){.themebtn{top:10px;right:10px}}
/* 2D / 3D / text view switch */
.viewswitch{position:fixed;top:14px;left:16px;z-index:55;display:flex;gap:6px}
.viewswitch a{background:var(--panel);border:1px solid var(--line);color:var(--grey);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:8px}
.viewswitch a.on{border-color:var(--accent);color:var(--accent)}
.viewswitch a:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:680px){.viewswitch{top:10px;left:10px}.viewswitch a{padding:6px 8px;font-size:10px}}
/* finder: search box + category filter chips (2D) */
.finder{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:56;width:min(520px,84vw);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.finder>*{pointer-events:auto}
.finderbar{display:flex;align-items:center;gap:9px;width:100%;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:7px 12px;backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.finderbar:focus-within{border-color:var(--accent)}
.finderbar svg{width:15px;height:15px;color:var(--grey);flex:none}
.finderbar input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.finderbar input::placeholder{color:var(--dim)}
.finderbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.finderclear{flex:none;background:none;border:none;color:var(--dim);font-size:13px;line-height:1;cursor:pointer;padding:2px 4px}
.finderclear:hover{color:var(--accent)}
.results{width:100%;max-height:46vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:1px;box-shadow:0 10px 34px rgba(0,0,0,.45)}
.results button{display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:none;color:var(--ink);font-family:var(--mono);font-size:12px;text-align:left;cursor:pointer;padding:7px 9px;border-radius:6px}
.results button:hover,.results button.sel{background:var(--accent-soft);color:var(--accent)}
.results button .rk{color:var(--dim);font-size:9px;letter-spacing:.1em;text-transform:uppercase;flex:none;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:20px;cursor:pointer;backdrop-filter:blur(6px);transition:all .2s}
.chip.off{background:var(--glass);border-color:var(--line);color:var(--grey);opacity:.7}
.chip:hover{filter:brightness(1.12)}
@media (max-width:680px){.finder{top:50px;width:92vw}.chip{font-size:9px;padding:4px 9px}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
[hidden]{display:none!important}   /* the hidden attribute must always win over class display (e.g. .embgate flex, .embed block) — otherwise hidden players/gates bleed across panels */
body{background:var(--bg);color:var(--ink);font-family:var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:none}
canvas{display:block;position:fixed;inset:0;z-index:1}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;pointer-events:none}
.wordmark{font-family:var(--disp);font-weight:800;letter-spacing:.18em;font-size:13px;pointer-events:auto;cursor:pointer;background:none;border:none;color:var(--ink)}
.wordmark:hover{color:var(--accent)}
.hint{font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;line-height:1.7;text-align:right}
.hint b{color:var(--grey);font-weight:500}

/* anchor rail */
.rail{position:fixed;top:42px;left:0;right:0;z-index:29;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;padding:6px 80px;pointer-events:none}
.rail button{pointer-events:auto;background:none;border:none;color:var(--grey);font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s;white-space:nowrap}
.rail button .d{width:6px;height:6px;border:1px solid var(--accent);flex:none}
.rail button:hover,.rail button.on{color:var(--accent)}
.rail button:hover .d,.rail button.on .d{background:var(--accent)}

/* depth / time HUD */
.timehud{position:fixed;left:20px;bottom:64px;z-index:28;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);pointer-events:none;line-height:1.8}
.timehud .yr{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--accent);letter-spacing:.04em}
.nav{position:fixed;right:20px;bottom:64px;z-index:28;display:flex;flex-direction:column;gap:8px}
.nav button{background:var(--glass);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;cursor:pointer;transition:all .2s;backdrop-filter:blur(6px)}
.nav button:hover{border-color:var(--accent);color:var(--accent)}

/* tooltip */
.tip{position:fixed;z-index:35;pointer-events:none;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink);background:var(--glass);border:1px solid var(--line);padding:4px 8px;transform:translate(-50%,-160%);white-space:nowrap;opacity:0;transition:opacity .15s}

/* labels overlay */
.labels{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.lab{position:absolute;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;transform:translate(-50%,-50%);color:var(--ink);text-shadow:0 1px 4px var(--labsh),0 0 2px var(--labsh);will-change:transform,opacity}
/* cover thumbnails in the graph */
.thumbs{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.gthumb3d{position:absolute;transform:translate(-50%,-50%);object-fit:cover;border:1px solid var(--line);background:var(--imgbg);box-shadow:0 2px 12px rgba(0,0,0,.6);will-change:transform,opacity}
/* panel map */
.map{width:100%;height:150px;border:1px solid var(--line);filter:grayscale(.4) contrast(.95) brightness(.85)}

/* detail panel */
.panel{position:fixed;z-index:50;top:0;right:0;height:100%;width:360px;max-width:90vw;background:var(--panel);border-left:1px solid var(--line);padding:26px 24px;transform:translateX(102%);transition:transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.panel.open{transform:translateX(0)}
.pclose{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--grey);font-size:18px;cursor:pointer;line-height:1}
.pclose:hover{color:var(--accent)}
.pcover{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);background:var(--imgbg)}
.pcover.logo{object-fit:contain;background:#15151a;padding:22px}
.pcover.full{aspect-ratio:auto;height:auto;object-fit:contain;background:transparent}
.pkind{color:var(--accent);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.plabel{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:24px;line-height:1.06;overflow-wrap:anywhere}
.ptype{color:var(--grey);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pdetail{font-size:10.5px;color:var(--grey);line-height:1.7}
.pdetail div{border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
.pdetail b{color:var(--dim);font-weight:400}
.psum{color:var(--soft);font-size:12.5px;line-height:1.7}
.psum a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.embed{width:100%;border:1px solid var(--line);background:var(--imgbg)}
.meta-h{color:var(--dim);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.conn{display:flex;flex-direction:column;gap:4px}
.conn button{background:none;border:none;color:var(--ink);font-family:var(--mono);font-size:12px;text-align:left;cursor:pointer;padding:2px 0;width:fit-content}
.conn button .yr{color:var(--dim);font-size:10px;margin-left:6px}
.conn button:hover{color:var(--accent)}
.cta{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.cta a{display:flex;justify-content:space-between;border:1px solid var(--line);color:var(--ink);text-decoration:none;padding:10px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:all .2s}
.cta a:hover{border-color:var(--accent);color:var(--accent)}
.cta a span{color:var(--dim)}
/* ---- Root / home hero cards ---- */
.hc-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:16px 0 7px;display:flex;align-items:center;gap:8px}
.hc-k::before{content:"";width:10px;height:2px;background:var(--accent);flex:none}
.herocard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px;color:var(--ink);text-decoration:none;cursor:pointer;background:var(--card,rgba(255,255,255,.03));transition:border-color .15s}
.herocard:hover{border-color:var(--accent)}
.hc-cov{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--line)}
.herocard .hc-t{flex:1;font-family:var(--disp);font-size:14px;font-weight:600;line-height:1.25;text-transform:none;letter-spacing:0}
.hc-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.hc-play:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.hc-embed{width:100%;height:120px;border:1px solid var(--line);border-radius:10px;margin-top:8px;display:block}
.showcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px;text-decoration:none;color:var(--ink);background:var(--card,rgba(255,255,255,.03));text-transform:none;letter-spacing:0;transition:border-color .15s}
.showcard:hover{border-color:var(--accent)}
.sc-date{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:8px;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:9px;letter-spacing:.06em;line-height:1.1}
.sc-date b{font-family:var(--disp);font-size:18px;line-height:1}
.showcard .hc-t{flex:1;font-family:var(--disp);font-size:14px;font-weight:600;line-height:1.2}
.showcard .hc-t small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:var(--dim);text-transform:none;letter-spacing:.02em;margin-top:3px}
.sc-go{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:6px 9px;white-space:nowrap}
/* poster-style hero CTAs: cover fills the card, label + title sit inside over a gradient scrim */
.poster{position:relative;display:block;border-radius:13px;overflow:hidden;border:1px solid var(--line);text-decoration:none;cursor:pointer;aspect-ratio:16/10;background:var(--panel2);transition:transform .15s,border-color .15s}
.poster:hover{border-color:var(--accent);transform:translateY(-2px)}
.poster .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.78) 100%)}
.poster.nocov{aspect-ratio:16/9;background:var(--panel2)}
.poster.nocov .scrim{display:none}
.poster.nocov .kick{color:var(--accent);text-shadow:none}
.poster.nocov .cap{color:var(--ink)}
.poster.nocov .cap b{text-shadow:none}
.poster.nocov .cap small{color:var(--dim);text-shadow:none}
.poster.nocov .play{background:transparent;border-color:var(--accent);color:var(--accent)}
.poster.nocov .datebig{background:transparent;border-color:var(--accent);color:var(--ink)}
.poster .kick{position:absolute;top:11px;left:13px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hero-tint,#f3efe0);text-shadow:0 1px 3px rgba(0,0,0,.6);display:flex;align-items:center;gap:7px}
.poster .kick::before{content:"";width:12px;height:2px;background:var(--accent)}
.poster .cap{position:absolute;left:13px;right:58px;bottom:12px;color:#fff}
.poster .cap b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.12;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.poster .cap small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--hero-tint2,#d9d6cb);margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.poster .play{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--hero-tint,#f3efe0);background:rgba(0,0,0,.28);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:all .15s}
.poster:hover .play{background:var(--accent);border-color:var(--accent);color:#0b0b0d}
.poster .datebig{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;border-radius:10px;border:1.5px solid var(--hero-tint,#f3efe0);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.06em;line-height:1;background:rgba(0,0,0,.28);backdrop-filter:blur(3px)}
.poster .datebig b{font-family:var(--disp);font-size:20px;line-height:1;margin-bottom:2px}
.poster+.hc-player{margin-top:9px}.hc-player .hc-embed{margin-top:0}
.cta a.prime,.cta a.ghost{justify-content:center;font-weight:700;letter-spacing:.02em;text-transform:none;border-radius:11px;padding:14px 12px;margin-top:10px;font-size:13px}
.cta a.prime{background:var(--accent);color:#15140f;border-color:var(--accent);margin-top:24px}
.cta a.prime:hover{filter:brightness(1.12);color:#15140f}
.cta a.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.cta a.ghost:hover{background:var(--accent);color:#15140f}
.pspokes{display:flex;flex-direction:column;gap:6px}
.pspokes .spoke{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:none;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:12px;text-align:left;cursor:pointer;padding:9px 11px;border-radius:8px;transition:all .15s}
.pspokes .spoke:hover{border-color:var(--accent);color:var(--accent)}
.pspokes .spoke .rk{color:var(--dim);font-size:9px;letter-spacing:.1em;text-transform:uppercase;flex:none;white-space:nowrap}
.pspokes .spoke:hover .rk{color:var(--accent)}
.embgate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:120px;border:1px dashed var(--line);border-radius:10px;background:var(--glass,rgba(255,255,255,.03));color:var(--ink);font-family:var(--mono);cursor:pointer;text-align:center;padding:12px}
.embgate:hover{border-color:var(--accent)}
.embgate .eg-play{font-size:16px;color:var(--accent)}
.embgate .eg-main{font-size:12px}
.embgate .eg-note{font-size:9px;color:var(--dim);letter-spacing:.04em}
.embgate .eg-pp{margin-top:6px;font-size:10px;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.embgate .eg-pp:hover{filter:brightness(1.15)}

/* about overlay */
.about{position:fixed;inset:0;z-index:60;background:var(--scrim);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px}
.about.open{opacity:1;pointer-events:auto}
.acard{width:min(680px,94%);max-height:88%;overflow:auto;background:var(--panel2);border:1px solid var(--line);display:grid;grid-template-columns:240px 1fr}
.acard img{width:100%;height:100%;object-fit:cover;background:var(--imgbg);min-height:300px}
.acard.solo{grid-template-columns:1fr;max-width:600px}
.legalbody{font-size:13px;line-height:1.8;color:var(--soft)}
.legalbody a{color:var(--accent)}
.abody{padding:26px 26px 30px}
.abody h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:26px;margin-bottom:4px}
.abody .sub{color:var(--grey);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.abody p{font-size:13px;line-height:1.75;color:var(--soft);margin-bottom:18px}
.alinks{display:flex;flex-wrap:wrap;gap:8px}
.alinks a{border:1px solid var(--line);color:var(--ink);text-decoration:none;padding:7px 11px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:all .2s}
.alinks a:hover{border-color:var(--accent);color:var(--accent)}
.aclose{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--grey);font-size:22px;cursor:pointer}
.aclose:hover{color:var(--accent)}

/* footer */
.footer{position:fixed;bottom:0;left:0;right:0;height:46px;z-index:30;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);padding:0 14px}
.footer a{color:var(--grey);text-decoration:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.footer a:hover{color:var(--accent)}

/* ===== 2D timeline stage ===== */
.stage{position:fixed;inset:0;z-index:1;overflow:hidden;cursor:grab;background:radial-gradient(130% 80% at 50% 8%,var(--gradtop) 0%,var(--bg) 55%)}
.stage.drag{cursor:grabbing}
.field{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
svg.edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.edges line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s,opacity .3s}
.edges line.lit{stroke:var(--accent);opacity:.9}
.edges line.fk-edge{stroke:var(--fk)}
.edges line.fk-edge.lit{stroke:var(--fk);opacity:.9}
body.focusing .edges line:not(.lit){opacity:.1}
.laneh{position:absolute;transform:translateX(-50%);color:var(--dim);font-family:var(--disp);font-weight:800;letter-spacing:.2em;font-size:12px;text-transform:uppercase;pointer-events:none;white-space:nowrap}
.yrline{position:absolute;left:0;height:0;border-top:1px dashed var(--line);opacity:.35;pointer-events:none}
.yrlab{position:absolute;color:var(--dim);font-size:11px;letter-spacing:.12em;pointer-events:none;font-family:var(--mono)}
.yrlab.recent{color:var(--accent)}
.nowband{position:absolute;left:0;top:0;border:1px solid var(--accent-soft);background:linear-gradient(var(--accent-soft),transparent);pointer-events:none}
.nowtag{position:absolute;color:var(--accent);font-family:var(--disp);font-weight:800;letter-spacing:.24em;font-size:12px;text-transform:uppercase;pointer-events:none}
.node{position:absolute;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px;color:inherit;font-family:var(--mono);transition:opacity .3s,filter .3s}
.node>*{pointer-events:none}   /* a click anywhere on the square or label always hits the node button */
.node .dot{width:9px;height:9px;border-radius:50%;background:var(--grey);transition:all .25s;flex:none}
.node .thumb{width:32px;height:32px;object-fit:cover;border:1px solid var(--line);filter:grayscale(.5) brightness(.9);transition:all .25s;display:block}
.node .pgram{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--chip);border:1px solid var(--line);color:var(--grey);transition:all .25s;flex:none}
.node .pgram svg{width:22px;height:22px;display:block}
.node.is-focus .pgram,.node:hover .pgram,.node.is-connected .pgram{color:var(--accent);border-color:var(--accent)}
/* radial view */
.centermark{position:fixed;top:50%;left:46%;transform:translate(-50%,-50%);z-index:0;font-family:var(--disp);font-weight:800;letter-spacing:.3em;font-size:62px;color:var(--bright);opacity:.035;pointer-events:none;white-space:nowrap}
.node.k-root .rootmark{width:56px;height:56px;border:2px solid var(--fk);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:21px;color:var(--ink);background:var(--panel2);transition:all .3s}
.node.k-root:hover .rootmark,.node.k-root.is-focus .rootmark{box-shadow:0 0 0 5px var(--fk-soft)}
.node.k-root .lbl{font-size:13px;letter-spacing:.22em;color:var(--fk)}
.node.k-root .rootimg{width:54px;height:54px;object-fit:cover;border:2px solid var(--fk);background:var(--panel2);transition:all .3s;display:block}
.node.k-root:hover .rootimg,.node.k-root.is-focus .rootimg{box-shadow:0 0 0 5px var(--fk-soft)}
/* two-line footer: platforms on top, legal always visible below */
.footer{flex-direction:column;gap:5px;height:auto;padding:8px 14px 9px}
.footer-main{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center}
.footer-legal{display:flex;gap:18px;align-items:center;justify-content:center}
.footer-legal a{font-size:9px;letter-spacing:.14em;color:var(--dim);text-decoration:none}
.footer-legal a:hover{color:var(--accent)}
.footer-cc{display:block;width:100%;margin-top:7px;font-size:9px;letter-spacing:.14em;color:var(--dim)}
.node.k-hub .dot{width:14px;height:14px;border-radius:3px;border:1px solid var(--accent);background:var(--accent-soft)}
.node.k-hub .lbl{font-size:12.5px;color:var(--ink);letter-spacing:.12em}
.node.k-label .dot,.node.k-platform .dot,.node.k-sublabel .dot{width:11px;height:11px;border-radius:2px;border:1px solid var(--ink);background:transparent}
.node.k-release .dot,.node.k-project .dot{background:var(--accent)}
.node.k-mix .dot,.node.k-live .dot,.node.k-remix .dot{background:var(--mixdot)}
.node.k-gig .dot{background:var(--dim);width:5px;height:5px}
.node.k-gig .lbl{font-size:9px;color:var(--grey);opacity:0}
.node.k-gig:hover .lbl,.node.k-gig.is-focus .lbl,.node.k-gig.is-connected .lbl{opacity:1}
.node.k-interview .dot,.node.k-radio .dot,.node.k-forum .dot{background:var(--ink)}
.node.k-alias .dot,.node.k-track .dot{background:var(--dim)}
.node.k-person .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--person);background:var(--person)}
.node.is-anchor .dot{width:14px;height:14px;background:transparent;border:2px solid var(--accent);box-shadow:0 0 10px rgba(216,162,74,.35)}
.node.is-anchor .lbl{color:var(--bright);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:11px}
/* idle (no selection): show the skeleton — the root + hubs + anchors crisp, the rest greyed + blurred */
.node{transition:opacity .35s ease, filter .35s ease}
.edges{transition:opacity .35s ease}
body.idle .node{opacity:.24!important;filter:grayscale(.5) blur(.7px)}
body.idle .node.k-root,body.idle .node.k-hub,body.idle .node.is-anchor{opacity:1!important;filter:none}
body.idle .edges{opacity:.14}
.node.k-person .lbl{color:var(--personlbl)}
.pquote{margin:14px 0 4px;padding:2px 0 2px 14px;border-left:2px solid var(--accent)}
.pquote blockquote{margin:0;font-size:15px;line-height:1.5;color:var(--quote);font-style:italic}
.pquote figcaption{margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--cap)}
.pquote figcaption a{color:var(--accent);text-decoration:none}
.pquote figcaption a:hover{text-decoration:underline}
.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}
.skip{position:fixed;left:8px;top:-60px;z-index:1000;background:var(--accent);color:#0b0b0d;padding:9px 13px;border-radius:8px;font-weight:700;font-size:.85rem;text-decoration:none;transition:top .15s}
.skip:focus{top:8px;outline:2px solid var(--bright);outline-offset:2px}
.node:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* High-contrast mode: when the OS requests more contrast, drop the recency/idle/focus
   fade so every node is full-opacity and un-blurred, and brighten the connecting edges. */
@media (prefers-contrast:more){
  .node{opacity:1!important;filter:none!important}
  body.idle .node,body.focusing .node:not(.is-focus):not(.is-connected){opacity:1!important;filter:none!important}
  .node .lbl{color:var(--bright)!important;text-shadow:0 1px 5px var(--labsh),0 0 3px var(--labsh),0 0 3px var(--labsh)}
  .edges line{stroke:var(--edge-hc)}
  body.idle .edges{opacity:.7!important}
  body.focusing .edges line:not(.lit){opacity:.45!important}
  .edges line.lit{stroke:var(--accent);stroke-width:2}
  .node .pgram,.node .thumb{filter:none}
}
.axis{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);opacity:.7;transition:opacity .5s}
/* the time-axis legend is a first-load orientation hint only — fade it out once exploring */
body.focusing .axis{opacity:0}
.axis .bar{width:1px;height:90px;background:linear-gradient(var(--grey),transparent)}
.badge{position:absolute;top:-7px;right:-10px;min-width:16px;height:16px;padding:0 3px;border:1px solid var(--line);background:var(--chip);color:var(--grey);font-size:8.5px;line-height:14px;text-align:center;border-radius:9px;cursor:pointer;z-index:3}
.badge:hover{border-color:var(--accent);color:var(--accent)}
body.focusing .node.is-focus,body.focusing .node.is-connected{opacity:1!important}
.node.is-focus .thumb,.node:hover .thumb{filter:none;border-color:var(--accent)}
/* column heads + period stepper */
.colhead{position:fixed;transform:translateX(-50%);color:var(--dim);font-family:var(--disp);font-weight:800;letter-spacing:.16em;font-size:11px;text-transform:uppercase;pointer-events:none;white-space:nowrap;z-index:4;transition:opacity .3s}
.period{position:fixed;left:50%;bottom:58px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--line);padding:8px 16px;backdrop-filter:blur(6px)}
.period .parrow{background:none;border:none;color:var(--ink);font-size:20px;cursor:pointer;line-height:1;padding:0 6px}
.period .parrow:hover{color:var(--accent)}
.period .pmid{text-align:center;min-width:96px}
#pyears{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:.06em;color:var(--accent)}
#psub{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.resetbtn{position:fixed;right:20px;bottom:60px;z-index:30;background:var(--glass);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;cursor:pointer;backdrop-filter:blur(6px)}
.resetbtn:hover{border-color:var(--accent);color:var(--accent)}
.node:hover .thumb,.node.is-focus .thumb{filter:none;border-color:var(--accent)}
.node.is-connected .thumb{filter:grayscale(.2)}
.node .lbl{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;font-size:11px;color:var(--ink);text-shadow:0 1px 5px var(--labsh),0 0 2px var(--labsh);transition:opacity .25s,color .25s}
.node.k-release .dot{background:var(--accent)}
.node.k-project .dot{background:var(--accent)}
.node.k-mix .dot{background:var(--mixdot)}
.node.k-interview .dot,.node.k-radio .dot,.node.k-forum .dot{background:var(--ink)}
.node.k-gig .dot{background:var(--dim)}
.node.k-gig .lbl{font-size:9px;color:var(--grey);opacity:0}
.node.k-label .dot,.node.k-sublabel .dot,.node.k-hub .dot,.node.k-platform .dot,.node.k-festival .dot{width:12px;height:12px;border-radius:2px;border:1px solid var(--ink);background:transparent}
.node.k-label .lbl,.node.k-platform .lbl,.node.k-hub .lbl{color:var(--hublbl)}
.node:hover{opacity:1!important;filter:none!important}
.node:hover .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.node:hover .lbl{color:var(--accent);opacity:1}
.node.k-gig:hover .lbl{opacity:1}
.node.is-focus .dot{background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft),0 0 18px var(--accent-soft)}
.node.is-focus .lbl{color:var(--accent);opacity:1}
.node.is-connected .dot{background:var(--ink)}
.node.is-connected .lbl{opacity:1}
body.focusing .node:not(.is-focus):not(.is-connected){opacity:.12!important;filter:blur(.8px) grayscale(.5)}
/* Landmarks stay crisp and easy to click while another node is focused, so you can always
   jump between the root, the hubs and the anchors. */
body.idle .node.k-root{opacity:1!important;filter:none!important}
body.focusing .node.k-root:not(.is-focus):not(.is-connected){opacity:1!important;filter:none!important}
body.focusing .node.k-hub:not(.is-focus):not(.is-connected),
body.focusing .node.is-anchor:not(.is-focus):not(.is-connected){opacity:.7!important;filter:none!important}

/* ---------- mobile: landmark-first drill-down ---------- */
@media (max-width:760px){
  /* mobile = hero + search only: hide the graph + its overlays so off-screen labels/thumbs can't widen the page */
  #scene3d,.labels,.thumbs,#nodes3d,#thumbs3d{display:none!important}
  /* iOS zooms (and stays zoomed) on any focused input under 16px — keep inputs at 16px on mobile */
  .finderbar input,input[type="search"],input[type="text"]{font-size:16px}
  .panel{overflow-x:hidden}
  .plabel{overflow-wrap:anywhere;word-break:break-word}
  .psum,.pdetail,.pdetail div,.pcta,.pspokes,.pquote,.herocard .hc-t,.showcard .hc-t,.poster .cap b,.poster .cap small{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
  .panel img,.panel iframe,.hc-embed{max-width:100%}
  .axis{display:none}
  .topbar .hint{display:none}
  .panel{width:100%;max-width:100%;left:0;right:0;border-left:none}
  .node .lbl{font-size:12px;letter-spacing:.02em}
  .node.is-anchor .lbl,.node.k-hub .lbl{font-size:13px}
  .node .dot{width:13px;height:13px}
  .node .thumb{width:46px;height:46px}
  .node .pgram{width:46px;height:46px}
  .node.k-root .rootimg{width:64px;height:64px}
  .node{padding:10px}                         /* larger touch target around each node */
  .footer{font-size:10px;flex-wrap:wrap;gap:6px 10px}
  .acard{flex-direction:column}
  .pquote blockquote{font-size:14px}
}
.node.fresh .dot{box-shadow:0 0 0 4px var(--accent-soft),0 0 16px var(--accent-soft)}

@media (max-width:680px){
  .hint{display:none}
  .rail{padding:6px 12px;gap:6px 14px}
  .rail button{font-size:9.5px;letter-spacing:.06em}
  .panel{width:100%;max-width:100%;height:72%;top:auto;bottom:46px;border-left:none;border-top:1px solid var(--line);transform:translateY(102%)}
  .panel.open{transform:translateY(0)}
  .acard{grid-template-columns:1fr}
  .acard img{min-height:180px;max-height:220px}
  .timehud .yr{font-size:24px}
  .nav button{padding:10px 12px}
}
/* 2D declutter: only landmark titles show by default; every other title reveals on hover or
   when focused/connected — so labels never cross each other. (Scoped to the 2D node layer.) */
#nodelayer .node .lbl{opacity:0}
#nodelayer .node.k-root .lbl,#nodelayer .node.k-hub .lbl,#nodelayer .node.is-anchor .lbl{opacity:1}
#nodelayer .node:hover .lbl,#nodelayer .node.is-focus .lbl,#nodelayer .node.is-connected .lbl{opacity:1}