:root{
      --bg-0:#0a0f0a; --bg-1:#0f1a0f;
      --acc-1:#4ade80; --acc-2:#22c55e;
      --text:#e6f4e6; --muted:#9bb59b;
      --glass:rgba(15,24,15,.55); --stroke:rgba(255,255,255,.06);
      --shadow:0 10px 30px rgba(0,0,0,.45); --radius:14px;
      --bar:#2ecc71;
      --scroll-track:#0b120b;
      --scroll-thumb:#1fa36a;
      --scroll-thumb-hover:#26c079;
      --func:#7dd3fc;
    }
    *{ box-sizing:border-box }
    html,body{ height:100%; margin:0; overflow-x:hidden }
    html{
      scroll-behavior:smooth;
      scrollbar-width:thin;
      scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    }
    body{
      color:var(--text);
      background:
        radial-gradient(1000px 700px at 80% -10%, #1a3a1a33 0%, transparent 70%),
        radial-gradient(900px 600px at -10% 90%, #1f442633 0%, transparent 70%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.5; overflow-y:auto;
    }
    ::-webkit-scrollbar{ width:12px; height:12px }
    ::-webkit-scrollbar-track{ background:var(--scroll-track) }
    ::-webkit-scrollbar-thumb{
      background: linear-gradient(180deg, var(--scroll-thumb), var(--acc-2));
      border-radius:999px;
      border:3px solid var(--scroll-track);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--scroll-thumb-hover), var(--acc-1)) }
    .scrollbar{
      position:fixed; left:16px; right:16px; top:16px; height:3px;
      z-index:3; border-radius:999px; background:transparent;
      backdrop-filter:blur(12px); pointer-events:none;
      opacity:0; transition: opacity .2s ease;
    }
    .scrollbar.show{ opacity:1 }
    .scrollbar__inner{
      height:100%; width:0%;
      background: linear-gradient(90deg, var(--acc-2), var(--acc-1));
      border-radius:inherit; box-shadow:0 2px 10px rgba(34,197,94,.35);
      transition: width .15s linear;
    }
    #bg{
      position:fixed; inset:0; z-index:0;
      filter: contrast(105%) saturate(110%);
      pointer-events:none; display:block;
      will-change: transform; backface-visibility:hidden; transform: translateZ(0);
    }
    .topbar{
      position:fixed; inset:24px 16px auto 16px; height:64px;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 18px; backdrop-filter:blur(12px); background:var(--glass);
      border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow);
      z-index:2; transform:translateY(-10px); opacity:0;
      transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
    }
    .topbar.hide{ transform: translateY(-140%); opacity:0 }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:700 }
    .logo{
      width:34px; height:34px; border-radius:10px; border:1px solid var(--stroke);
      background:url("https://media.discordapp.net/attachments/1370538007375118368/1408167233120637119/image.png?ex=68b2a4ae&is=68b1532e&hm=c7f5e8bdb09dbdcdd3dd8dd241c9417383a0c657891278e098cda05066407364&=&format=webp&quality=lossless")
             center/cover no-repeat;
    }
    nav{ display:flex; gap:10px }
    .chip{
      padding:8px 12px; border-radius:999px; border:1px solid var(--stroke);
      color:var(--muted); background:rgba(255,255,255,.02); text-decoration:none;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .chip:hover{ color:var(--text); background:rgba(34,197,94,.1); transform:translateY(-1px) }
    .hero{
      position:relative; z-index:1; min-height:100dvh;
      display:grid; place-items:center; text-align:center; padding:120px 20px 40px;
    }
    .hero h1{
      margin:0 0 10px; font-size:clamp(40px, 6vw, 72px); font-weight:800;
      text-shadow:0 2px 20px rgba(34,197,94,.15); color:var(--acc-1);
      transform:translateY(12px); opacity:0;
      transition: transform .8s cubic-bezier(.2,.7,.2,1) .1s, opacity .8s ease .1s;
    }
    .hero p{
      margin:0 auto; max-width:700px; color:var(--muted); font-size:clamp(16px,2.2vw,18px);
      transform:translateY(12px); opacity:0;
      transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s, opacity .8s ease .2s;
    }
    .bio{ position:relative; z-index:1; max-width:1000px; margin:-40px auto 60px; padding:22px }
    .card{
      padding:24px; border-radius:var(--radius); border:1px solid var(--stroke);
      background:rgba(10,20,10,.65); backdrop-filter:blur(10px); box-shadow:var(--shadow);
      transform: translateY(18px) scale(.985); opacity:0;
      transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease, box-shadow .2s ease;
    }
    .card:hover{ box-shadow:0 14px 36px rgba(0,0,0,.5) }
    .grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px }
    @media (max-width:880px){ .grid{ grid-template-columns:1fr } }
    h2{ margin:0 0 12px; font-size:20px; color:var(--acc-2) }
    ul{ margin:10px 0 0 18px; padding:0 } li{ margin:6px 0; color:var(--muted) }
    .btn-row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap }
    .btn{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
      border:1px solid var(--stroke);
      background:linear-gradient(180deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
      color:var(--text); text-decoration:none; transition: transform .2s ease, box-shadow .2s ease;
    }
    .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(34,197,94,.25) }
    .btn small{ color:var(--muted) }
    .reveal{ opacity:0; transform:translateY(18px); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease }
    .reveal.in{ opacity:1; transform:translateY(0) }
    section[id], main[id]{ scroll-margin-top:110px }
    body.ready .topbar{ transform:none; opacity:1 }
    body.ready .hero h1, body.ready .hero p{ transform:none; opacity:1 }
    body.ready .card{ transform:none; opacity:1 }
    @media (prefers-reduced-motion: reduce){
      .chip,.btn,.card,.topbar,.hero h1,.hero p,.reveal{ transition:none !important; transform:none !important; opacity:1 !important }
      .scrollbar__inner{ transition:none !important }
      #bg{ display:none !important }
    }