:root{
      --bg:#0b0f17; --card:#0f1524; --muted:#9aa3b2; --text:#e5e7eb; --brand:#f7ff5c; --brand-2:#22d3ee; --ring:rgba(124,92,255,.35);
    }
   [data-theme="light"] {
  --bg: #fffbea;           /* soft pale yellow background */
  --card: #ffffff;         /* keep cards pure white for clarity */
  --text: #1f1f1f;         /* near-black text */
  --muted: #665c3d;        /* muted warm brown/khaki for subtle text */
  --brand: #facc15;        /* bright yellow (like sun) */
  --brand-2: #f59e0b;      /* deep amber for accents */
  --ring: rgba(250, 204, 21, 0.35); /* soft yellow glow */
}


    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text); background:radial-gradient(1000px 600px at 10% 0%, rgba(124,92,255,.12), transparent 60%), radial-gradient(900px 600px at 90% 10%, rgba(34,211,238,.12), transparent 60%), var(--bg);
      line-height:1.6; letter-spacing:.2px; scroll-behavior:smooth;
    }

    /* Layout */
    .container{ width:min(1100px, 92vw); margin-inline:auto; }
    section{ padding: 72px 0; }
    .grid{ display:grid; gap:20px; }

    /* Navbar */
    .nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:color-mix(in oklab, var(--bg) 70%, transparent);
      border-bottom:1px solid rgba(124,92,255,.15); }
    .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
    .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.5px; }
    .brand .dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(45deg,var(--brand),var(--brand-2)); box-shadow:0 0 10px var(--ring); }
    .nav a{ color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600; }
    .nav a:hover{ color:var(--text); }
    .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:17px; border:1px solid yellow;
      background:rgb(254, 254, 31); color:var(--text); text-decoration:none; font-weight:700; box-shadow:0 8px 20px rgba(124,92,255,.12) inset, 0 1px 0 rgba(255,255,255,.05);
    }
    .btn:hover{ box-shadow:0 10px 26px rgba(255, 241, 92, 0.2) inset, 0 1px 0 rgba(255,255,255,.08); }
    .ghost{ background:#22d3ee; border-color:yellow; font-weight:600; }

    /* Hero */
    .hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; padding-top:28px; }
    .kicker{ color:var(--brand-2); font-weight:800; letter-spacing:1px; text-transform:uppercase; font-size:12px; }
    h1{ font-size: clamp(28px, 5vw, 54px); margin:10px 0 12px; line-height:1.15; }
    .lead{ color:var(--muted); font-size: clamp(14px, 2.4vw, 18px); }

    /* Typing */
    .typing-line{ margin-top:18px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: clamp(16px, 3vw, 22px); }
    .typing-wrapper{ display:inline-flex; align-items:center; gap:8px; }
    .typing-static{ opacity:.85; }
    .typing{ display:inline-block; white-space:nowrap; overflow:hidden; border-right:.12em solid currentColor; animation: caret .8s step-end infinite; }
    @keyframes caret { 50%{ border-color:transparent } }

    /* Cards */
    .card{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)); border:1px solid rgba(124,92,255,.18);
      border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04); }

    /* Skills */
    .tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
    .tag{ padding:8px 12px; border:1px solid rgba(124,92,255,.25); border-radius:999px; font-weight:700; font-size:13px; background:color-mix(in oklab, var(--card) 90%, transparent); }

    /* Projects */
    .projects-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; }
    .project{ grid-column: span 6; }
    .project .thumb{ aspect-ratio: 16/10; border-radius:14px; background:linear-gradient(135deg, rgba(124,92,255,.2), rgba(34,211,238,.2)); position:relative; overflow:hidden; }
    .project .thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); }
    .project h3{ margin:12px 0 6px; }
    .muted{ color:var(--muted); }
    .proj-actions{ display:flex; gap:10px; margin-top:10px; }

    /* Timeline */
    .timeline{ position:relative; margin-left:8px; }
    .timeline::before{ content:""; position:absolute; left:12px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--brand),var(--brand-2)); opacity:.6; }
    .time-item{ position:relative; padding-left:36px; margin:16px 0; }
    .time-item::marker{ content:"" }
    .time-item::before{ content:""; position:absolute; left:6px; top:6px; width:12px; height:12px; border-radius:999px; background:linear-gradient(45deg,var(--brand),var(--brand-2)); box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 60%, transparent); }

    /* Footer */
    footer{ padding:40px 0; border-top:1px solid rgba(124,92,255,.15); color:var(--muted); text-align:center; }

    /* Utilities */
    .flex{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .right{ margin-left:auto }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .hidden{ display:none }

    /* Responsive */
    @media (max-width: 900px){ .hero{ grid-template-columns:1fr; } .project{ grid-column: span 12; } }