@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap');
    /* ======== RESET & TOKENS ======== */
    :root{
      --bg:#0a0b0a;
      --panel:#0f1115;
      --muted:#8f9ba8;
      --txt:#e6ffe6;
      --neon:#00ff95;
      --neon-2:#69f0ff;
      --accent:#ffdd55;
      --danger:#ff6b6b;
      --ring: rgba(0,255,149,.3);
      --card-glow: 0 0 0 1px rgba(0,255,149,.15), 0 0 20px rgba(0,255,149,.08) inset;
      --radius:16px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(0,255,149,.06), transparent 60%),
        radial-gradient(800px 400px at 10% 110%, rgba(105,240,255,.05), transparent 60%),
        var(--bg);
      color:var(--txt);
      font-family: 'Fira Code', monospace;
      letter-spacing:.2px;
      line-height:1.6;
      overflow-x:hidden;
    }
    a{color:var(--neon-2);text-decoration:none}
    a:hover{text-decoration:underline}

    /* ======== HEADER ======== */
    .shell{
      max-width:1100px;
      margin:0 auto;
      padding:28px 16px 80px;
    }
    header.hero{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:16px;
      margin-top:8px;
      margin-bottom:22px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
    }
    .sig{
      width:42px;height:42px;border-radius:12px;
      background: linear-gradient(135deg, rgba(0,255,149,.22), rgba(105,240,255,.22));
      box-shadow: 0 0 0 1px rgba(105,240,255,.25), inset 0 0 30px rgba(0,255,149,.12);
      position:relative;
      overflow:hidden;
    }
    .sig:before, .sig:after{
      content:""; position:absolute; inset:0;
      background: repeating-linear-gradient( to bottom, rgba(0,0,0,.0) 0 6px, rgba(0,255,149,.1) 6px 7px);
      mix-blend-mode:screen; opacity:.35;
    }
    h2{
      margin:0;
      font-size: clamp(22px, 3.4vw, 36px);
      line-height:1.1;
      text-shadow: 0 0 18px rgba(0,255,149,.25);
      letter-spacing:.5px;
    }
    .sub{
      margin:2px 0 0 0;
      color:var(--muted);
      font-size:14px;
    }
    .controls{display:flex; gap:10px; align-items:center}
    .btn{
      appearance:none; border:1px solid rgba(0,255,149,.35);
      background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
      color:var(--txt);
      padding:8px 12px; border-radius:10px; cursor:pointer;
      font: inherit;
      box-shadow: var(--card-glow);
      transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); border-color: var(--neon); }
    .btn:active{ transform: translateY(0); }
    .btn.secondary{ border-color: rgba(105,240,255,.35); }
    .btn.secondary:hover{ border-color: var(--neon-2); }

    /* ======== GLITCH TITLE LINE ======== */
    .glitchline{
      height:1px; margin:16px 0 24px;
      background: linear-gradient(90deg, transparent, rgba(0,255,149,.6), transparent);
      position:relative; overflow:hidden;
    }
    .glitchline:after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(90deg, transparent, rgba(105,240,255,.7), transparent);
      transform: translateX(-100%);
      animation: sweep 4s linear infinite;
      opacity:.8;
    }
    @keyframes sweep{ to{ transform: translateX(100%);} }

    /* ======== TIMELINE ======== */
    .timeline{
      position:relative;
      margin-top:8px;
      padding-left:20px;
    }
    .timeline:before{
      content:"";
      position:absolute; left:8px; top:0; bottom:0; width:2px;
      background: linear-gradient(to bottom, rgba(0,255,149,.0), rgba(0,255,149,.4), rgba(105,240,255,.4), rgba(0,255,149,.0));
      filter: drop-shadow(0 0 6px rgba(0,255,149,.4));
    }
    .phase{
      margin: 16px 0 22px 0;
      position:relative;
      padding-left:22px;
    }
    .phase .dot{
      position:absolute; left:-1px; top:10px;
      width:12px; height:12px; border-radius:50%;
      background: radial-gradient(circle at 40% 40%, var(--neon), #0a0);
      box-shadow: 0 0 0 2px rgba(0,255,149,.25), 0 0 14px rgba(0,255,149,.6);
    }

    /* ======== CARDS ======== */
    details.roadcard{
      background: linear-gradient(180deg, rgba(23,27,33,.65), rgba(16,19,24,.65));
      border:1px solid rgba(0,255,149,.25);
      border-radius: var(--radius);
      box-shadow: var(--card-glow);
      overflow:hidden;
    }
    details.roadcard + details.roadcard{ margin-top:12px; }
    summary{
      list-style:none; cursor:pointer; outline: none;
      display:flex; align-items:flex-start; gap:12px;
      padding:14px 16px;
      font-weight:600;
    }
    summary::-webkit-details-marker{ display:none; }
    .badge{
      font-size:12px; letter-spacing:.4px; padding:3px 8px; border-radius:999px;
      border:1px solid rgba(105,240,255,.5); color:var(--neon-2);
      background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(105,240,255,.08));
      box-shadow: inset 0 0 12px rgba(105,240,255,.15);
      white-space:nowrap;
    }
    .title{
      font-size:16px; line-height:1.35; margin-top:2px;
      text-shadow: 0 0 10px rgba(0,255,149,.18);
    }
    .year{
      margin-left:auto; color:var(--muted); font-size:12px;
    }
    .content{
      padding: 0 16px 14px 16px;
      color:#d9ffe9;
    }
    .content ul{ margin:8px 0 0 18px; padding:0 }
    .content li{ margin:6px 0 }
    .progress{
      margin-top:10px; height:6px; border-radius:999px;
      background: rgba(255,255,255,.06); overflow:hidden; position:relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .progress > i{
      display:block; height:100%;
      background: linear-gradient(90deg, var(--neon), var(--neon-2));
      width: var(--w, 25%);
      box-shadow: 0 0 16px rgba(0,255,149,.45);
      transition: width .6s ease;
    }

    /* ======== FOOTER ======== */
    footer{
      margin-top:34px;
      color:var(--muted);
      display:flex; gap:0px; align-items:center; justify-content:center;
      font-size:12px;
      opacity:.9;
    }
    .sep{opacity:.3}

    /* ======== ACCESSIBILITY ======== */
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important}
    }

    /* ======== RESPONSIVE ======== */
    @media (max-width:720px){
      header.hero{ grid-template-columns:1fr; gap:10px; }
      .controls{ justify-content:flex-start; }
    }

        .badge {
      cursor: pointer;
      user-select: none;
      padding: 2px 6px;
      border: 1px solid #00d7ff;
      border-radius: 4px;
      font-size: 0.8rem;
      color: #00d7ff;
      transition: all 0.3s ease;
    }
    .badge.copied {
      color: #0f0;
      border-color: #0f0;
    }