:root{--bg:#eef1f5;--ink:#15213b;--mute:#5b6678;--line:#d3d9e3;--card:#fff;--accent:#2f5bff;--accent-ink:#fff}
:root[data-theme=dark]{--bg:#0f1524;--ink:#e8edf7;--mute:#98a3b8;--line:#25304a;--card:#161e33;--accent:#7b9bff;--accent-ink:#0f1524}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 "Instrument Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.1;margin:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,5vw,3rem);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:800 1.2rem "Bricolage Grotesque",sans-serif;color:var(--ink);text-decoration:none}
.nav nav{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.nav nav a{color:var(--mute);text-decoration:none;font-weight:500}
.nav nav a:hover{color:var(--ink)}
#theme{background:none;border:1px solid var(--line);color:var(--ink);border-radius:50%;width:2.2rem;height:2.2rem;cursor:pointer;font-size:1rem}
main{max-width:60rem;margin:0 auto;padding:0 clamp(1rem,5vw,2rem)}
section{padding:4.5rem 0 1rem}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.5rem}
.hero{padding-top:6rem;min-height:80vh}
.hello{color:var(--mute);margin:0 0 .3rem;font-size:1.2rem}
h1{font-size:clamp(3.6rem,15vw,9rem);font-weight:800;letter-spacing:-.04em;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.role{font:600 clamp(1.3rem,3.5vw,2rem)/1.3 "Bricolage Grotesque",sans-serif;margin:1rem 0}
#typed{color:var(--accent)}
.caret{animation:blink 1s steps(2) infinite;color:var(--accent)}
.lead{max-width:34rem;color:var(--mute)}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-block;padding:.75rem 1.4rem;border:2px solid var(--ink);border-radius:.6rem;color:var(--ink);text-decoration:none;font:600 1rem "Instrument Sans",sans-serif;background:none;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.1);background:var(--accent);color:var(--accent-ink)}
.about-grid{display:grid;grid-template-columns:11rem 1fr;gap:2rem;align-items:start}
.avatar{width:11rem;aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:800 3.2rem "Bricolage Grotesque",sans-serif}
.facts{list-style:none;padding:0;display:grid;gap:.3rem}
.facts b{display:inline-block;min-width:6rem;color:var(--mute);font-weight:500}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem 2rem}
.skill span{font-weight:600}
.skill i{display:block;height:.5rem;margin-top:.35rem;background:var(--line);border-radius:1rem;position:relative;overflow:hidden}
.skill i::after{content:"";position:absolute;inset:0;width:0;background:var(--accent);border-radius:1rem;transition:width 1.2s ease}
.skill.show i::after{width:var(--v)}
.filters{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:.35rem .9rem;border-radius:2rem;cursor:pointer;font:500 .95rem "Instrument Sans",sans-serif}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.4rem}
.card.hide{display:none}
.card h3{font-size:1.4rem;margin-bottom:.4rem}
.card p{margin:.3rem 0;color:var(--mute)}
.tags{font-size:.9rem}
.card a{font-weight:600}
.timeline{list-style:none;margin:0;padding:0 0 0 1.5rem;border-left:2px solid var(--line)}
.timeline li{position:relative;padding-bottom:1.8rem}
.timeline li::before{content:"";position:absolute;left:-1.95rem;top:.45rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--accent)}
.timeline time{color:var(--mute);font-size:.95rem}
.timeline h3{font-size:1.3rem;margin:.1rem 0}
.timeline p{margin:0;color:var(--mute)}
form{display:grid;gap:1rem;max-width:34rem;margin:1.2rem 0}
label{display:grid;gap:.3rem;font-weight:600}
input,textarea{font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:.6rem;background:var(--card);color:var(--ink)}
.links{display:flex;gap:1.2rem;flex-wrap:wrap}
footer{text-align:center;padding:3rem 1rem;color:var(--mute)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes blink{50%{opacity:0}}
@media(max-width:640px){.about-grid{grid-template-columns:1fr}.avatar{width:8rem}.nav nav{gap:.7rem;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}