:root{
    --bg:#090c12; --bg-2:#0d1420;
    --gold:#ffc24b; --gold-hi:#ffdd88;
    --teal:#55c2b8; --amber:#ff9d5c; --violet:#b088f0; --prune:#ff6b6b;
    --ink:#eae4d6; --ink-dim:#737b88; --ink-faint:#444b57;
    --font-display:'Space Grotesk',system-ui,sans-serif;
    --font-mono:'Space Mono',ui-monospace,monospace;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ width:100%; height:auto; min-height:100%; background:var(--bg); }
  body{ color:var(--ink); font-family:var(--font-display); -webkit-font-smoothing:antialiased;
    overflow-x:hidden; }

  #track{ position:relative; width:100%; pointer-events:none; }

  #stage{
    position:fixed; inset:0; overflow:hidden;
    background:
      radial-gradient(120% 90% at 50% 108%, #12203a 0%, rgba(18,32,58,0) 55%),
      radial-gradient(140% 120% at 50% -10%, #14100a 0%, rgba(20,16,10,0) 45%),
      var(--bg);
  }
  #particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
  #scene{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }

  /* the ever-growing core — persistent, never scrolls away, compounds with every
     revealed node. this is the "we never close a node, we carry it forward" idea
     made literal: it just keeps getting bigger and brighter. */
  .core-glow{
    position:absolute; left:50%; bottom:-14%; z-index:0; pointer-events:none;
    width:240px; height:240px; border-radius:50%;
    transform:translate(-50%,50%) scale(.22);
    background:radial-gradient(circle, rgba(138,90,20,.55) 0%, rgba(138,90,20,.28) 40%, rgba(138,90,20,0) 72%);
    opacity:.3;
  }

  .nodeg{ transform-box:fill-box; transform-origin:center; }
  .nodeg.boot-lock{ transition:none !important; }
  .chip.boot-lock{ transition:none !important; }
  .chip[data-kind="root"].slab-only .kicker,
  .chip[data-kind="root"].slab-only .desc{ display:none; }
  .chip[data-kind="root"] .root-name-morph{
    position:relative; display:inline-grid; place-items:center;
    justify-items:center;
  }
  .chip[data-kind="root"] .root-name-morph .name-from,
  .chip[data-kind="root"] .root-name-morph .name-to{
    grid-area:1 / 1; will-change:opacity, transform, filter;
  }
  .chip[data-kind="root"] .root-name-morph .name-to{
    opacity:0; white-space:nowrap;
  }
  .pulse-dot{ pointer-events:none; }
  .nodeg.is-interactive{ cursor:grab; }
  .nodeg.is-dragging{ cursor:grabbing; }
  .nodeg.is-dimmed{ opacity:.14 !important; }
  .nodeg.is-focus, .nodeg.is-neighbor{ opacity:1; }
  #labels{ position:absolute; inset:0; z-index:3; pointer-events:none; }
  /* Labels never steal hits from nodes — only the title text is interactive. */
  .chip{ position:absolute; pointer-events:none; opacity:0;
    text-align:center; white-space:nowrap; will-change:transform,opacity; }
  .chip.on{ opacity:1; }
  .chip.boot-lock{ transition:none !important; }
  .chip:not(.boot-lock){ transition:opacity .28s ease; }
  .chip .name,
  .chip .kicker,
  .chip .cta,
  .chip .cta a{ pointer-events:auto; }
  .chip.is-interactive .name,
  .chip.is-interactive .kicker{ cursor:grab; touch-action:none; pointer-events:auto; }
  .chip.is-dragging .name,
  .chip.is-dragging .kicker{ cursor:grabbing; }
  .chip.is-dimmed{ opacity:.12 !important; }
  .chip.is-focus, .chip.is-neighbor{ opacity:1; }
  .chip .kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-dim); margin-bottom:3px; }
  .chip .name{ font-weight:600; font-size:15px; letter-spacing:.01em; color:var(--ink);
    text-shadow:0 1px 12px rgba(0,0,0,.7); }
  .chip[data-kind="project"] .name{
    color: color-mix(in srgb, var(--node-hue, var(--amber)) 58%, #f2ebe0 42%);
    text-shadow:0 0 18px color-mix(in srgb, var(--node-hue, var(--amber)) 35%, transparent),
      0 1px 12px rgba(0,0,0,.7);
  }
  .chip[data-kind="skill"] .name,
  .chip[data-kind="tech"] .name,
  .chip[data-kind="course"] .name{
    font-family:var(--font-mono); font-size:9px; font-weight:700;
    letter-spacing:.04em; color:var(--ink);
    text-shadow:0 1px 10px rgba(0,0,0,.85);
  }
  .chip[data-kind="skill"],
  .chip[data-kind="tech"],
  .chip[data-kind="course"]{ transform-origin:center; }
  .chip[data-kind="skill"].on,
  .chip[data-kind="tech"].on,
  .chip[data-kind="course"].on{ opacity:.55; }
  .chip[data-kind="skill"].pinned,
  .chip[data-kind="tech"].pinned,
  .chip[data-kind="course"].pinned,
  .chip[data-kind="skill"]:hover,
  .chip[data-kind="tech"]:hover,
  .chip[data-kind="course"]:hover,
  .chip[data-kind="skill"].is-focus,
  .chip[data-kind="tech"].is-focus,
  .chip[data-kind="course"].is-focus,
  .chip[data-kind="skill"].is-neighbor,
  .chip[data-kind="tech"].is-neighbor,
  .chip[data-kind="course"].is-neighbor{ opacity:1; }
  .chip[data-kind="skill"] .name{ color:var(--teal); }
  .chip[data-kind="tech"] .name{ color:#69a7ff; }
  .chip[data-kind="course"] .name{ color:var(--violet); }
  .chip[data-kind="skill"] .kicker,
  .chip[data-kind="tech"] .kicker,
  .chip[data-kind="course"] .kicker{ display:none; }
  .chip[data-kind="skill"] .desc,
  .chip[data-kind="tech"] .desc,
  .chip[data-kind="course"] .desc{
    width:160px; padding:6px 8px; border:1px solid rgba(255,255,255,.09);
    border-radius:3px; background:rgba(9,12,18,.94); backdrop-filter:blur(8px);
  }
  .chip .desc{ font-family:var(--font-mono); font-size:11px; color:var(--ink-dim);
    margin-top:4px; max-width:210px; white-space:normal; line-height:1.35;
    opacity:0; max-height:0; overflow:hidden; transition:opacity .3s ease, max-height .3s ease;
    pointer-events:none !important; }
  .chip:hover .desc, .chip.pinned .desc, .chip.is-focus .desc{ opacity:1; max-height:90px; }

  path.edge-dimmed{ opacity:.08 !important; }
  path.edge-focus{ opacity:.85 !important; }

  .chip[data-kind="root"] .name{ font-size:clamp(28px,5.2vw,46px); font-weight:700;
    letter-spacing:-.02em; color:var(--gold-hi);
    text-shadow:0 0 30px rgba(255,194,75,.45), 0 2px 20px rgba(0,0,0,.8);
    transition:color .2s ease, text-shadow .2s ease; }
  .chip[data-kind="root"] .kicker{ color:var(--gold); letter-spacing:.3em; }
  /* During core-style grow, name sits inside the disc (like index-core). */
  .chip[data-kind="root"].in-core{ text-align:center; }
  .chip[data-kind="root"].in-core .kicker{ letter-spacing:.22em; margin-top:4px; }

  #ui{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  #ui a{ pointer-events:auto; }

  .wordmark{ position:absolute; top:26px; left:30px; display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--ink-dim); text-decoration:none; }
  .wordmark:hover{ color:var(--ink); }
  .wordmark .gm{ display:grid; grid-template-columns:1fr 1fr; gap:3px; flex-shrink:0; }
  .wordmark .gc{ width:10px; height:10px; border-radius:1.5px; background:#161616; border:.75px solid #242424; position:relative; }
  .wordmark .gc.on{ border:none; background:#e8a030; }
  .wordmark .gc.on .d{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4px; height:4px; border-radius:50%; background:#0a0a0a; }
  .wordmark .wm{ line-height:1.05; }
  .wordmark .wm b{ color:var(--ink); font-weight:500; }
  .wordmark .wm .tld{ color:#e8a030; font-weight:300; }
  .wordmark .wm .ctx{ color:var(--ink-dim); font-weight:400; font-size:11px; margin-top:2px; }

  .versions{ position:absolute; top:64px; left:30px; display:flex; gap:6px; flex-wrap:wrap; }
  .versions a{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); text-decoration:none; border:1px solid rgba(255,255,255,.08);
    padding:4px 8px; border-radius:3px; transition:color .2s, border-color .2s, background .2s; }
  .versions a:hover{ color:var(--ink); border-color:rgba(255,255,255,.2); }
  .versions a.on{ color:var(--gold); border-color:rgba(255,194,75,.35); background:rgba(255,194,75,.08); }

  .meta-top{ position:absolute; top:26px; right:30px; text-align:right;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-faint); line-height:1.7; }

  .rail{ display:none; /* hidden for now — year scrubber on the right edge */
    position:absolute; right:26px; top:50%; transform:translateY(-50%);
    width:2px; height:min(46vh,360px); background:rgba(255,255,255,.07);
    border-radius:2px; }
  .rail .fill{ position:absolute; left:0; bottom:0; width:100%; height:0%;
    background:linear-gradient(0deg,var(--gold),var(--gold-hi));
    box-shadow:0 0 12px rgba(255,194,75,.7); }
  .rail .yr{ position:absolute; right:12px; bottom:0; transform:translateY(50%);
    font-family:var(--font-mono); font-size:11px; color:var(--gold); white-space:nowrap; }

  .hint{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
    text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-dim); transition:opacity .6s ease;
    max-width:min(92vw, 520px); }
  .hint .arrow{ display:inline-block; margin-left:6px; color:var(--gold);
    animation:bob 1.9s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(5px); opacity:1 } }

  /* Node local-graph card — sized to content, positioned by JS clear of focus cluster */
  .project-card{
    position:absolute; left:0; top:0;
    width:min(340px, calc(100vw - 40px));
    height:auto;
    max-height:calc(100vh - 96px);
    z-index:5; pointer-events:auto; opacity:0; visibility:hidden;
    transition:opacity .28s ease, visibility .28s;
    border:1px solid rgba(255,194,75,.22); border-radius:10px;
    background:rgba(9,12,18,.92); backdrop-filter:blur(14px);
    box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .project-card.open{ opacity:1; visibility:visible; }
  .project-card .pc-head{
    display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px;
    border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
  }
  .project-card .pc-dot{
    width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:5px;
    box-shadow:0 0 12px currentColor;
  }
  .project-card .pc-kicker{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px;
  }
  .project-card .pc-title{
    font-size:20px; font-weight:600; color:var(--ink); letter-spacing:.01em; line-height:1.15;
  }
  .project-card .pc-close{
    margin-left:auto; flex-shrink:0; width:28px; height:28px; border-radius:6px;
    border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--ink-dim);
    cursor:pointer; font-size:16px; line-height:1;
  }
  .project-card .pc-close:hover{ color:var(--ink); border-color:rgba(255,255,255,.22); }
  .project-card .pc-graph{
    height:168px; flex-shrink:0; background:
      radial-gradient(60% 70% at 50% 50%, rgba(255,194,75,.06), transparent 70%),
      rgba(0,0,0,.22);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .project-card .pc-graph svg{ width:100%; height:100%; display:block; }
  .project-card .pc-body{ padding:14px 16px 16px; overflow:visible; flex:0 1 auto; }
  .project-card.is-scroll .pc-body{ overflow:auto; min-height:0; flex:1 1 auto; }
  .project-card .pc-desc{
    font-family:var(--font-mono); font-size:12px; line-height:1.45; color:var(--ink-dim);
    margin-bottom:14px;
  }
  .project-card .pc-section{ margin-bottom:12px; }
  .project-card .pc-section:last-child{ margin-bottom:0; }
  .project-card .pc-label{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;
  }
  .project-card .pc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .project-card .pc-tag{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
    padding:5px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
    color:var(--ink); background:rgba(255,255,255,.03); cursor:pointer;
  }
  .project-card .pc-tag[data-kind="skill"]{ color:var(--teal); border-color:rgba(85,194,184,.28); }
  .project-card .pc-tag[data-kind="tech"]{ color:#69a7ff; border-color:rgba(105,167,255,.28); }
  .project-card .pc-tag[data-kind="project"]{ color:var(--amber); border-color:rgba(255,157,92,.28); }
  .project-card .pc-tag[data-kind="course"]{ color:var(--violet); border-color:rgba(176,136,240,.28); }
  .project-card .pc-tag:hover{ background:rgba(255,255,255,.07); }
  .project-card .pc-empty{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .project-card .pc-links{ display:flex; flex-direction:column; gap:6px; }
  .project-card .pc-link{
    font-family:var(--font-mono); font-size:11px; color:var(--gold); text-decoration:none;
    word-break:break-all; line-height:1.4;
  }
  .project-card .pc-link:hover{ text-decoration:underline; }
  .project-card .pc-link .pc-link-kind{
    display:inline-block; min-width:3.6em; margin-right:8px;
    letter-spacing:.12em; text-transform:uppercase; font-size:9px;
    color:var(--ink-faint);
  }

  @media (max-width:720px){
    .project-card{ width:calc(100vw - 24px); max-height:calc(100vh - 120px); }
  }

  .legend{ position:absolute; left:30px; bottom:30px; font-family:var(--font-mono);
    font-size:10px; letter-spacing:.08em; color:var(--ink-dim); line-height:2; }
  .legend i{ display:inline-block; width:9px; height:9px; border-radius:50%;
    margin-right:7px; vertical-align:middle; }
  .legend .dash{ display:inline-block; width:16px; border-top:1.5px dashed var(--ink-dim);
    margin-right:7px; vertical-align:middle; }

  .sr-journey{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .noscript{ position:fixed; inset:0; display:grid; place-items:center; padding:8vw; z-index:99;
    background:var(--bg); font-family:var(--font-mono); color:var(--ink); line-height:1.9; text-align:center; }

  @media (max-width:640px){
    .meta-top{ display:none; }
    .rail{ height:34vh; right:14px; }
    .wordmark{ top:16px; left:16px; font-size:12px; }
    .versions{ top:52px; left:16px; }
    .legend{ left:16px; bottom:18px; }
  }
  @media (prefers-reduced-motion: reduce){ .hint .arrow{ animation:none; } }