:root{
      --clr-lime:#A3FF00; --clr-blue:#0066FF; --clr-text:#1A1A1A; --clr-ui:#B3B3B3; --clr-bg:#F5F5F5; --clr-white:#FFFFFF; --clr-border:#E5E5E5;
      --clr-success:#22C55E; --clr-warning:#FACC15; --clr-error:#EF4444;
      --ff-heading:'Inter','Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
      --ff-body:'Roboto','Source Sans Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
      --ff-mono:'JetBrains Mono','Fira Code',ui-monospace,Menlo,Consolas,monospace;
      --radius-lg:16px; --radius-md:12px; --shadow-soft:0 8px 24px rgba(0,0,0,.06); --container:min(1200px,92vw);
    }
    html{scroll-behavior:smooth}
    body{margin:0; font-family:var(--ff-body); color:var(--clr-text); background:#fff; font-size:clamp(16px,1.4vw,18px)}
    .container{width:var(--container); margin-inline:auto}

    .nav_link{
      text-decoration: none;
      color: var(--clr-text);
    }

    /* Header */
    header.site{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--clr-border)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
    .brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-family:var(--ff-heading)}
    .brand-mark{width:12px; height:12px; border-radius:3px; background:linear-gradient(135deg,var(--clr-lime),var(--clr-blue)); box-shadow:0 0 0 4px color-mix(in srgb,var(--clr-lime) 35%,transparent)}
    .nav-links{display:flex; gap:1.2rem}
    .nav-links a{color:var(--clr-text); text-decoration:none; font-weight:600; position:relative}
    .nav-links a:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--clr-lime); transform:scaleX(0); transform-origin:left; transition:transform .2s}
    .nav-links a:hover:after{transform:scaleX(1)}

    .btn{display:inline-flex; align-items:center; gap:.5rem; padding:.78rem 1rem; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent; transition:.2s}
    .btn-primary{background:var(--clr-lime); color:#0b0b0b}
    .btn-secondary{background:var(--clr-blue); color:#fff}
    .btn-ghost{background:transparent; color:var(--clr-blue); border-color:var(--clr-blue)}

    .chip{border:1px solid var(--clr-ui); border-radius:999px; padding:.45rem .7rem; font-weight:600; cursor:pointer; user-select:none}
    .chip.active{border-color:var(--clr-blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--clr-blue) 20%, transparent)}

    /* Hero */
    .hero{padding: 5rem 0 2rem;}
    h1{font-family:var(--ff-heading); font-size:clamp(2.2rem, 4.5vw, 3.6rem); line-height:1.05; margin:.3rem 0 1rem}
    .subtitle{max-width:70ch; color:#333}
    .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:800}
    .eyebrow .dot{width:10px; height:10px; border-radius:50%; background:var(--clr-lime); box-shadow:0 0 0 6px color-mix(in srgb, var(--clr-lime) 25%, transparent)}

    /* Toolbar */
    .toolbar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:1rem}
    .search{flex:1 1 280px; display:flex; align-items:center; gap:.5rem; border:1px solid var(--clr-border); border-radius:999px; padding:.55rem .8rem; background:#fff}
    .search input{border:0; outline:0; flex:1; font-size:1rem; background:transparent}

    /* Metrics */
    .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.4rem 0 2rem}
    .metric{padding:1rem; border:1px dashed var(--clr-border); border-radius:14px; background:#fff}
    .metric h3{margin:.1rem 0; font-family:var(--ff-heading); font-size:1.6rem}
    .metric p{margin:.2rem 0 0; color:#333; font-size:.9rem}

    /* Grid */
    .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1rem}
    .span-4{grid-column:span 4}
    .span-6{grid-column:span 6}

    .card{position:relative; background:#fff; border:1px solid var(--clr-border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft)}
    .card .thumb{aspect-ratio: 16/9; background:linear-gradient(180deg,#FAFAFA,#F0F0F0); display:grid; place-items:center}
    .card .thumb .mono{font-family:var(--ff-mono); font-size:.92rem; color:#444}
    .badge{position:absolute; top:.6rem; left:.6rem; background:rgba(0,0,0,.75); color:#fff; font-size:.75rem; padding:.25rem .5rem; border-radius:6px}
    .status{position:absolute; top:.6rem; right:.6rem; font-size:.75rem; padding:.25rem .55rem; border-radius:999px; font-weight:800}
    .status.live{background:color-mix(in srgb, var(--clr-success) 20%, transparent); color:#0c5}
    .status.wip{background:color-mix(in srgb, var(--clr-warning) 20%, transparent); color:#a67c00}
    .status.archived{background:color-mix(in srgb, var(--clr-ui) 30%, transparent); color:#333}

    .card .body{padding:.9rem 1rem; border-top:1px solid var(--clr-border)}
    .title{font-weight:800; font-family:var(--ff-heading); font-size:1.05rem; margin:.1rem 0 .2rem}
    .muted{color:#555; font-size:.92rem}
    .row{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}

    .tag{display:inline-block; padding:.3rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700; border:1px solid var(--clr-ui)}

    .card .actions{display:flex; gap:.5rem; margin-top:.7rem}

    /* Drawer / Case Study */
    .drawer{position:fixed; inset:0; display:none;}
    .drawer.open{display:block}
    .drawer .backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
    .drawer .panel{position:absolute; right:0; top:0; bottom:0; width:min(720px, 92vw); background:#fff; border-left:1px solid var(--clr-border); box-shadow: -8px 0 24px rgba(0,0,0,.08); overflow:auto}
    .dshell{padding:1.2rem}
    .dtitle{font-family:var(--ff-heading); font-size:1.6rem; margin:.3rem 0}
    .dmeta{color:#333; font-size:.95rem}
    .dchips{display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem}
    .dsection{margin:1rem 0}

    /* Skills */
    .skills{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
    .skill{background:#fff; border:1px solid var(--clr-border); border-radius:14px; padding:1rem}
    .bar{height:8px; background:#eee; border-radius:999px; overflow:hidden}
    .bar > span{display:block; height:100%; background:linear-gradient(90deg, var(--clr-lime), var(--clr-blue))}

    /* CTA */
    .cta{background:var(--clr-bg); border-top:1px solid var(--clr-border); border-bottom:1px solid var(--clr-border); padding:2.2rem 0}
    .section-title{font-family:var(--ff-heading); font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .6rem}

    footer{padding:2.2rem 0; color:#333}

    @media (max-width: 1100px){
      .span-6{grid-column:span 12}
      .span-4{grid-column:span 6}
      .skills{grid-template-columns:1fr 1fr}
      .metrics{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .grid{grid-template-columns:repeat(6,1fr)}
      .span-4{grid-column:span 6}
      .skills{grid-template-columns:1fr}
      .metrics{grid-template-columns:1fr}
    }

    /* Optional dark mode scaffold
    @media (prefers-color-scheme: dark){
      body{ background:#0A0A0A; color:#EAEAEA; }
      header.site{ background:rgba(16,16,16,.7); border-color:#1C1C1C; }
      .card, .skill, .dshell{ background:#1C1C1C; border-color:#2a2a2a; }
      .muted{ color:#CFCFCF; }
      .cta{ background:#121212; border-color:#1C1C1C; }
      .nav-links a{ color:#EAEAEA; }
    }
    */