:root{
      --bg: #0b1020;
      --bg-alt:#0e1430;
      --card:#0f1738;
      --muted:#9aa4b2;
      --text:#e8ecf3;
      --accent:#7c5cff;  /* primary */
      --accent-2:#22c55e; /* green */
      --accent-3:#06b6d4; /* cyan */
      --accent-4:#f59e0b; /* amber */
      --ring:#1f2a5a;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 20px;
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg:#f7f8fb; --bg-alt:#ffffff; --card:#ffffff; --muted:#5b6472; --text:#0f172a; --ring:#e7e8ef; --shadow:0 10px 24px rgba(0,0,0,.08);
      }
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";background:linear-gradient(120deg,var(--bg),var(--bg-alt));color: #501b39;line-height:1.6}
    .wrap{max-width:1200px; margin-inline:auto; padding: clamp(-14px, 24vw, -60px)}
    h1,h2,h3{line-height:1.2;margin:0 0 .4rem;font-color: g;}
    h1{font-size: clamp(1.6rem, 2.8vw, 2.4rem)}
    h2{font-size: clamp(1.2rem, 2.2vw, 1.6rem);color: #fd8c00;font-weight:600}
    p{margin:0;color: #4f1b38;}
    .section{margin-top: clamp(16px, 3vw, 32px)}

    /* Utility */
    .grid{display:grid; gap: clamp(12px, 2vw, 20px)}
    .grid-2{grid-template-columns: repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns: repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns: repeat(4,minmax(0,1fr))}
    @media (max-width: 920px){ .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))} }
    @media (max-width: 680px){ .grid-3,.grid-2,.grid-4{grid-template-columns: 1fr} }

    .card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%), var(--card); border:1px solid var(--ring); border-radius: var(--radius); padding: clamp(14px, 2.2vw, 20px); box-shadow: var(--shadow)}
    .pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--ring); background: rgba(255,255,255,.02); border-radius: 999px; padding:.5rem .8rem; font-size:.92rem; font-weight:600}
    .muted{color:var(--muted)}
    .row{display:flex; align-items:center; gap:.8rem}
    .spaced{justify-content:space-between}
    .tag{display:inline-flex; align-items:center; border:1px dashed var(--ring); border-radius: 999px; padding:.35rem .6rem; font-weight:600; font-size:.85rem}

    /* Header */
    .header{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
    .headline{max-width:720px}

    /* Donut (conic) progress */
    .donut{
      --size: 112px; /* adjust circle size */
      --track: rgba(255,255,255,.08);
      --gap: 10px; /* inner ring gap */
      width: var(--size); aspect-ratio:1; border-radius:50%; position:relative;
      background:
        conic-gradient(var(--accent) calc(var(--val)*1%), var(--track) 0);
      display:grid; place-items:center; margin:auto;
    }
    .donut::before{ /* inner hole */
      content:""; position:absolute; inset: var(--gap); border-radius:50%; background: var(--card); border:1px solid var(--ring)
    }
    .donut .label{position:relative; font-weight:800; font-size:1.1rem}
    .skill-card{display:grid; grid-template-columns: auto 1fr; gap:1rem; align-items:center}
    .skill-card h3{font-size:1.05rem}
    .skill-card .meta{font-size:.9rem; color:var(--muted)}

    /* Bars */
    .bar{height: 10px; width:100%; background: linear-gradient(90deg, var(--track), var(--track)); border:1px solid var(--ring); border-radius:999px; overflow:hidden}
    .bar > i{display:block; height:100%; width:0; background: linear-gradient(90deg, var(--accent-3), var(--accent)); border-radius:inherit}

    /* Tools cloud */
    .cloud{display:flex; flex-wrap:wrap; gap:.6rem}

    /* Stats */
    .stats{display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px}
    @media (max-width:920px){.stats{grid-template-columns: repeat(2,minmax(0,1fr))}}
    @media (max-width:560px){.stats{grid-template-columns: 1fr}}
    .stat{padding:16px; border:1px solid var(--ring); border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); display:flex; align-items:center; justify-content:space-between}
    .stat h3{font-size:1.8rem}

    /* Animation */
    @keyframes fillWidth{ from{ width:0 } to{ width: var(--val, 100%) } }
    @keyframes sweep{ from{ background: conic-gradient(var(--accent) 0%, var(--track) 0)} to{ background: conic-gradient(var(--accent) calc(var(--val)*1%), var(--track) 0)} }
    .animate .bar > i{ animation: fillWidth 1.6s cubic-bezier(.2,.8,.2,1) forwards }
    .animate .donut{ animation: sweep 1.2s ease-out forwards }
    @media (prefers-reduced-motion: reduce){
      .animate .bar > i, .animate .donut{ animation: none }
    }

    /* Footer note */
    .note{font-size:.9rem; color:var(--muted)}