:root{
      --bg:#0b0c10;
      --panel:#17181f;
      --panel-2:#1d1f27;
      --text:#e6e6e9;
      --muted:#a8a8b3;
      --accent:#a78bfa;    /* lavender */
      --accent-2:#64d2ff;  /* blue */
      --ok:#41d695;
      --shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
      --radius: 18px;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 600px at 20% 0%, rgba(167,139,250,.12), transparent 60%),
                  radial-gradient(900px 500px at 120% 20%, rgba(100,210,255,.12), transparent 60%),
                  var(--bg);
      color:var(--text);
      letter-spacing:.15px;
    }
    a{color:inherit}
    .container{max-width:1200px;margin:0 auto;padding:28px 20px 96px}

    /* Header */
    header{display:flex;align-items:center;gap:18px;margin-top:8px;margin-bottom:24px}
    .logo{
      display:grid;place-items:center;height:64px;width:64px;border-radius:16px;background:linear-gradient(145deg, #222433, #12131a);
      box-shadow: var(--shadow);
    }
    .logo svg{height:34px}
    .title{line-height:1}
    .title h1{font-weight:800;margin:0;font-size:32px;letter-spacing:.8px}
    .title p{margin:6px 0 0;color:var(--muted);font-size:14px}

    /* GitHub bubble */
    .github-fab{position:fixed;right:20px;top:20px;z-index:50}
    .github-fab a{display:flex;align-items:center;gap:10px;background:var(--panel);padding:10px 14px;border-radius:999px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.05)}
    .github-fab .hint{font-size:12px;color:var(--muted)}
    .github-fab svg{height:20px;width:20px}

    /* Intro terminal */
    .intro{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;margin-bottom:40px}
    .term{
      background:linear-gradient(180deg, var(--panel), var(--panel-2));
      border-radius:14px;box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.06);
      overflow:hidden;
    }
    .term-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);background:#11121a}
    .dot{height:10px;width:10px;border-radius:10px}
    .dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
    .term-body{font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      padding:20px 18px 24px;font-size:15px;white-space:pre-wrap;min-height:150px}
    .caret{display:inline-block;width:9px;height:1.15em;background:#9aa1ff;vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(2,end) infinite}
    @keyframes blink{50%{opacity:0}}

    .cta-row{display:flex;gap:14px;margin-top:10px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);cursor:pointer}
    .btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#0e0f14}
    .btn.ghost{background:var(--panel);color:var(--text)}

    /* Projects */
    .section-title{font-size:28px;font-weight:800;margin:26px 0 14px;letter-spacing:1.4px}
    .projects{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .card{grid-column:span 12;background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;box-shadow:var(--shadow)}
    .card-media{position:relative;background:#0e0f14;min-height:160px}
    .thumb{position:absolute;inset:0;display:grid;place-items:center;font-family:"Space Mono";color:#9aa1ff;opacity:.9}
    .card-body{padding:18px}
    .card h3{margin:0 0 8px;font-size:18px}
    .desc{color:var(--muted);font-size:14px;line-height:1.5}
    .stack{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
    .tag{font-size:12px;padding:6px 9px;border-radius:999px;background:#0f111a;border:1px solid rgba(255,255,255,.08);color:#cfd0ff}
    .card-actions{display:flex;gap:10px;flex-wrap:wrap}

    .github-icon{height:16px;width:16px}

    @media (max-width:950px){
      .card{grid-template-columns:1fr}
    }
    @media (min-width:780px){
      .card{grid-column:span 12}
    }

    /* Make project images cover box neatly */
    .card-media { display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .card-media img { width:100%; height:100%; object-fit:cover; }

    /* ===== Simple Popup Modal ===== */
    .modal {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 3000;
    }

    .modal.show {
      display: block;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
    }

    /* make popup window use terminal styling */
    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(850px, 90%);
      max-height: 85vh;
      overflow-y: auto;
      padding: 0; /* header + body handle padding */
      border-radius: 14px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, var(--panel), var(--panel-2));
      font-family: "Space Mono", ui-monospace, monospace;
    }

    /* close button now lives in the terminal header */
    .modal-close {
      margin-left: auto;
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 18px;
      padding: 0;
    }

    footer{margin-top:52px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}


    .modal-body-terminal {
    font-family: "Space Mono", ui-monospace, monospace;
    padding: 20px 18px 24px;
    font-size: 15px;
    white-space: normal;  /* important */
  }