:root{
    --gold:#ffb43e; --ember:#8f3d1a; --white:#fff3d0;
    --milestone:#ffe6a8; --project:#ffb454; --learning:#56d3c9; --incident:#ff7a66;
    --ink:#f1ebe0; --ink-dim:#8a8172; --ink-faint:#59513f;
    --font-display:'Fraunces',Georgia,serif; --font-mono:'Space Mono',ui-monospace,monospace;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ background:#0a0910; }
  body{ color:var(--ink); font-family:var(--font-display); -webkit-font-smoothing:antialiased; overflow-x:hidden; }

  #track{ position:relative; width:100%; }
  #stage{ position:fixed; inset:0; overflow:hidden;
    background:
      radial-gradient(60% 60% at 50% 50%, rgba(255,150,50,.06), rgba(255,150,50,0) 70%),
      radial-gradient(120% 120% at 50% 120%, #1a1120 0%, rgba(26,17,32,0) 55%),
      #0a0910; }
  #embers{ position:absolute; inset:0; z-index:1; }
  #scene{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
  .nodeg{ transform-box:fill-box; transform-origin:center; }

  #labels{ position:absolute; inset:0; z-index:3; pointer-events:none; }
  .chip{ position:absolute; pointer-events:auto; opacity:0; transition:opacity .45s ease; white-space:nowrap; }
  .chip.on,.chip.live{ opacity:1; }
  .chip .name{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink);
    background:rgba(10,9,16,.45); padding:2px 7px; border-radius:3px; text-shadow:0 1px 6px rgba(0,0,0,.7); }
  .chip .yr{ font-family:var(--font-mono); font-size:9px; color:var(--ink-dim); margin-right:5px; }
  .chip.live .name{ opacity:0; transition:opacity .25s ease; }
  .chip.live:hover .name, .chip.live.pinned .name, .chip.live.is-focus .name{ opacity:1; }
  .chip.live[data-kind="project"] .name{ opacity:1; }
  .chip[data-kind="milestone"] .name{ color:var(--milestone); background:rgba(10,9,16,.6); font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,230,168,.35); }
  .chip.is-focus .name{ box-shadow:inset 0 0 0 1px rgba(255,180,62,.45); }

  .chip[data-kind="core"]{ text-align:center; }
  .chip[data-kind="core"] .name{ font-family:var(--font-display); font-size:clamp(24px,4.5vw,40px);
    font-weight:600; letter-spacing:-.01em; color:var(--white); background:none; padding:0;
    text-shadow:0 0 26px rgba(255,180,80,.5), 0 2px 18px rgba(0,0,0,.8); }
  .chip[data-kind="core"] .tag{ display:block; margin-top:5px; font-family:var(--font-mono); font-size:10px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }

  #ui{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  #ui a{ pointer-events:auto; }
  .wordmark{ position:absolute; top:24px; left:28px; z-index:5; 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; pointer-events:auto; }
  .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:28px; z-index:5; display:flex; gap:6px; flex-wrap:wrap; pointer-events:auto; }
  .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,180,62,.35); background:rgba(255,180,62,.08); }

  .hud{ position:absolute; top:110px; left:28px; }
  .hud .cap{ font-family:var(--font-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:8px; }
  .hud .big{ font-family:var(--font-mono); font-weight:700; font-size:38px; line-height:.9; color:var(--gold);
    font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(255,180,62,.35); }
  .hud .big span{ font-size:13px; color:var(--ink-dim); margin-left:8px; letter-spacing:.06em; }
  .hud .yr{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); margin-top:10px; letter-spacing:.1em; }
  .hud .note{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); margin-top:16px;
    line-height:1.7; letter-spacing:.03em; max-width:180px; }

  .legend{ position:absolute; right:26px; top:64px; font-family:var(--font-mono); font-size:10px;
    color:var(--ink-dim); line-height:2; text-align:right; pointer-events:none; }
  .legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-left:7px; vertical-align:middle; }

  .hint{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); font-family:var(--font-mono);
    font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); transition:opacity .5s ease; }
  .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 } }

  .chip{ cursor:pointer; }
  .chip.is-focus .name{ box-shadow:inset 0 0 0 1px rgba(255,180,62,.45); }
  .nodeg.is-interactive{ cursor:pointer; }
  .nodeg.is-dimmed{ opacity:.18 !important; }
  .nodeg.is-focus{ opacity:1 !important; }

  /* Details card — same family as the timeline project card */
  .event-card{
    position:absolute; left:0; top:0; z-index:6; pointer-events:auto;
    width:min(340px, calc(100vw - 40px));
    max-height:calc(100vh - 96px);
    opacity:0; visibility:hidden;
    transition:opacity .28s ease, visibility .28s;
    border:1px solid rgba(255,180,62,.22); border-radius:10px;
    background:rgba(9,10,16,.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;
  }
  .event-card.open{ opacity:1; visibility:visible; }
  .event-card .ec-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;
  }
  .event-card .ec-dot{
    width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:5px;
    box-shadow:0 0 12px currentColor;
  }
  .event-card .ec-kicker{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px;
  }
  .event-card .ec-title{
    font-size:20px; font-weight:600; color:var(--ink); letter-spacing:.01em; line-height:1.2;
  }
  .event-card .ec-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;
  }
  .event-card .ec-close:hover{ color:var(--ink); border-color:rgba(255,255,255,.22); }
  .event-card .ec-body{ padding:14px 16px 16px; overflow:auto; min-height:0; }
  .event-card .ec-desc{
    font-family:var(--font-mono); font-size:12px; line-height:1.55; color:var(--ink-dim);
    margin-bottom:14px;
  }
  .event-card .ec-section{ margin-bottom:12px; }
  .event-card .ec-section:last-child{ margin-bottom:0; }
  .event-card .ec-label{
    font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:7px;
  }
  .event-card .ec-meta{
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .event-card .ec-pill{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
    padding:4px 8px; border-radius:4px; border:1px solid rgba(255,255,255,.1);
    color:var(--ink-dim); background:rgba(255,255,255,.03);
  }
  .event-card .ec-nav{ display:flex; flex-direction:column; gap:6px; }
  .event-card .ec-nav button{
    display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
    font-family:var(--font-mono); font-size:11px; line-height:1.35;
    padding:8px 10px; border-radius:6px; cursor:pointer;
    border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
    color:var(--ink-dim); transition:border-color .2s, background .2s, color .2s;
  }
  .event-card .ec-nav button:hover{ color:var(--ink); border-color:rgba(255,180,62,.28); background:rgba(255,180,62,.06); }
  .event-card .ec-nav .dir{ color:var(--gold); letter-spacing:.12em; text-transform:uppercase; font-size:9px; flex-shrink:0; min-width:3.2em; }
  .event-card .ec-nav .nm{ color:inherit; }
  .event-card .ec-empty{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .event-card .ec-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .event-card .ec-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:default;
  }
  .event-card .ec-tag[data-kind="skill"]{ color:var(--learning); border-color:rgba(86,211,201,.28); }
  .event-card .ec-tag[data-kind="tech"]{ color:#69a7ff; border-color:rgba(105,167,255,.28); }
  .event-card .ec-tag[data-kind="course"]{ color:#c4a0ff; border-color:rgba(196,160,255,.28); }
  .event-card .ec-tag[data-kind="project"]{ color:var(--project); border-color:rgba(255,180,84,.28); cursor:pointer; }
  .event-card .ec-tag[data-kind="project"]:hover{ background:rgba(255,180,84,.08); }
  .event-card .ec-link{
    font-family:var(--font-mono); font-size:11px; color:var(--gold); text-decoration:none;
    word-break:break-all;
  }
  .event-card .ec-link:hover{ text-decoration:underline; }

  .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:#0a0910; font-family:var(--font-mono); color:var(--ink); text-align:center; line-height:1.9; }

  @media (max-width:640px){
    .wordmark{ top:14px; left:16px; font-size:12px; }
    .versions{ top:52px; left:16px; }
    .hud{ top:96px; left:16px; } .hud .big{ font-size:30px; }
    .legend{ display:none; }
    .event-card{ width:calc(100vw - 24px); max-height:calc(100vh - 120px); }
  }
  @media (prefers-reduced-motion: reduce){ .hint .arrow{ animation:none; } }