:root{
  --bg:#f5f7f9;--surface:#fff;--ink:#101820;--muted:#61707d;--line:#dce3e8;
  --accent:#0b8f87;--accent-2:#12b8aa;--accent-soft:#d9f5f1;--dark:#101820;
  --shadow:0 20px 60px rgba(16,24,32,.10);--radius:22px;--max:1180px;
}
[data-theme="dark"]{
  --bg:#0c1116;--surface:#121a21;--ink:#edf5f6;--muted:#a2b0b8;--line:#25343d;
  --accent:#39c9bd;--accent-2:#63e0d5;--accent-soft:#153c3a;--dark:#080d11;
  --shadow:0 20px 60px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 44px));margin-inline:auto}
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to bottom,black,transparent 75%);z-index:-1}
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.08rem;letter-spacing:-.04em}.brand-mark{font-family:ui-monospace;color:var(--accent)}.brand-dot{color:var(--accent)}
.nav-links{display:flex;gap:28px;color:var(--muted);font-size:.88rem;font-weight:650}.nav-links a:hover{color:var(--accent)}
.theme-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem}
.hero{min-height:680px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:50px;padding-top:55px;padding-bottom:65px}
.eyebrow{font-size:.72rem;letter-spacing:.15em;font-weight:850;color:var(--accent);display:flex;align-items:center;gap:9px}.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)}
.hero h1{font-size:clamp(4rem,8vw,7.4rem);line-height:.86;letter-spacing:-.075em;margin:26px 0 22px;font-weight:900}.hero h1 span{color:var(--accent)}
.hero-role{font-size:1.28rem;font-weight:750;margin:0 0 18px}.hero-role b{color:var(--accent);padding:0 7px}
.hero-summary{font-size:1.02rem;color:var(--muted);max-width:650px;margin:0}
.hero-actions,.contact-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:11px;border:1px solid var(--line);font-weight:800;font-size:.9rem;transition:.2s transform,.2s background,.2s color}
.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-ghost{background:var(--surface)}
.quick-links{display:flex;gap:22px;margin-top:24px;font-size:.78rem;color:var(--muted);flex-wrap:wrap}.quick-links a{font-weight:800;color:var(--ink);border-bottom:1px solid var(--accent)}
.hero-visual{height:500px;position:relative;display:grid;place-items:center}
.orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:50%;transform:rotate(-22deg)}
.orbit-1{width:430px;height:250px}.orbit-2{width:340px;height:340px;transform:rotate(32deg)}.orbit-3{width:250px;height:430px;transform:rotate(78deg)}
.node{position:absolute;width:92px;height:92px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;animation:float 4s ease-in-out infinite}
.node span{font-size:1rem;font-weight:950;color:var(--accent)}.node small{font-size:.55rem;letter-spacing:.13em;color:var(--muted);font-weight:800}
.node-main{width:140px;height:140px;border-radius:50%;background:var(--dark);color:#fff;border-color:var(--dark);animation-delay:-1s}.node-main span{font-size:1.5rem}.node-main small{color:#9eb2b9}
.node-api{top:65px;left:10%;animation-delay:-2s}.node-data{right:5%;top:45%;animation-delay:-.5s}.node-ui{left:8%;bottom:62px;animation-delay:-3s}
.connector{height:1px;background:var(--accent);opacity:.5;position:absolute;transform-origin:left;z-index:1}.c1{width:150px;left:30%;top:43%;transform:rotate(-28deg)}.c2{width:145px;left:56%;top:45%;transform:rotate(22deg)}.c3{width:135px;left:32%;top:59%;transform:rotate(25deg)}.c4{width:155px;left:47%;top:60%;transform:rotate(-28deg)}
.visual-caption{position:absolute;bottom:3px;right:5px;display:flex;gap:13px;align-items:flex-start}.visual-caption>span{font-family:ui-monospace;color:var(--accent);font-weight:900}.visual-caption b{display:block;font-size:.8rem}.visual-caption small{color:var(--muted)}
@keyframes float{50%{transform:translateY(-8px)}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;margin-bottom:20px}.metrics div{padding:0 28px;border-right:1px solid var(--line)}.metrics div:first-child{padding-left:0}.metrics div:last-child{border:0}.metrics strong{display:block;font-size:1.7rem;letter-spacing:-.04em}.metrics span{font-size:.75rem;color:var(--muted);font-weight:650}
.section{padding:105px 0}.section-heading{display:flex;gap:22px;align-items:flex-start;margin-bottom:52px}.section-number{font:900 .72rem ui-monospace;color:var(--accent);padding-top:8px}.section-heading p,.kicker{font-size:.68rem;letter-spacing:.16em;color:var(--muted);font-weight:850;margin:0}.section-heading h2{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.065em;line-height:.95;margin:7px 0 0}
.timeline-card{position:relative;border-left:1px solid var(--line);padding:0 0 52px 38px;margin-left:8px}.timeline-card:last-child{padding-bottom:0}.timeline-marker{position:absolute;left:-6px;top:5px;width:11px;height:11px;background:var(--bg);border:2px solid var(--accent);border-radius:50%}.timeline-card.current .timeline-marker{background:var(--accent);box-shadow:0 0 0 7px var(--accent-soft)}
.timeline-meta{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font:700 .7rem ui-monospace;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}.timeline-meta span:last-child{color:var(--accent)}
.role-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.role-head h3{font-size:1.55rem;letter-spacing:-.035em;margin:0}.role-head p{margin:3px 0;color:var(--accent);font-weight:750}.tag,.project-tags span{font:800 .62rem ui-monospace;letter-spacing:.08em;border:1px solid var(--line);padding:6px 8px;border-radius:7px;color:var(--muted);white-space:nowrap}.timeline-card>p{color:var(--muted);max-width:850px}.timeline-card ul{padding-left:20px;color:var(--muted);max-width:900px}.timeline-card li{padding:4px 0}.timeline-card li::marker{color:var(--accent)}
.section-dark{background:var(--dark);color:#edf5f6}.light .section-number,.section-dark .section-heading p{color:#62d7ce}.section-dark .section-heading p{color:#94a9b1}.stack-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px}.code-window{border:1px solid #263841;border-radius:18px;overflow:hidden;background:#0b1115;box-shadow:var(--shadow)}.code-bar{height:39px;border-bottom:1px solid #263841;display:flex;align-items:center;gap:6px;padding:0 13px;color:#748991;font:600 .66rem ui-monospace}.code-bar i{width:7px;height:7px;border-radius:50%;background:#34474e}.code-bar span{margin-left:7px}.code-window pre{padding:24px;margin:0;overflow:auto;font:500 .79rem/1.9 ui-monospace;color:#b9c9ce}.kw{color:#72d8cf}.str{color:#b5d994}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.skill-group{border:1px solid #25353d;padding:20px;border-radius:15px;background:#121b21}.skill-group h3{font-size:.8rem;color:#63d7ce;margin:0 0 7px;text-transform:uppercase;letter-spacing:.1em}.skill-group p{font-size:.84rem;color:#a7b7bd;margin:0}
.project-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:15px}.project-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:25px;min-height:300px;display:flex;flex-direction:column;transition:.25s transform,.25s box-shadow}.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.project-card.featured{background:var(--dark);color:#edf5f6;border-color:var(--dark)}.project-top{display:flex;justify-content:space-between;color:var(--accent);font:800 .62rem ui-monospace;letter-spacing:.06em}.project-card h3{font-size:1.65rem;letter-spacing:-.04em;margin:50px 0 8px}.project-card p{color:var(--muted);font-size:.9rem}.featured p{color:#a7b7bd}.project-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.project-tags span{font-size:.58rem}
.principles{background:var(--accent-soft);padding:90px 0}.principles-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px}.principles h2{font-size:clamp(2.3rem,5vw,4.4rem);letter-spacing:-.065em;line-height:.95;margin:10px 0}.principles-list{border-top:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.principles-list div{display:flex;gap:22px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-weight:650}.principles-list b{font:800 .7rem ui-monospace;color:var(--accent)}
.contact{padding:100px 0}.contact-box{background:var(--dark);border-radius:28px;padding:65px;position:relative;overflow:hidden;color:#edf5f6}.contact-box:after{content:"";position:absolute;width:340px;height:340px;border:1px solid #24545a;border-radius:50%;right:-100px;top:-150px;box-shadow:0 0 0 55px #15343a,0 0 0 56px #24545a}.contact-box h2{font-size:clamp(2.4rem,5vw,4.5rem);line-height:.95;letter-spacing:-.065em;max-width:700px;margin:16px 0}.contact-box p{max-width:700px;color:#a8b8be}.edit-note{display:block;margin-top:17px;color:#748990;font-size:.7rem}.footer{border-top:1px solid var(--line);padding:24px 0 35px;display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem}

@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:75px}.hero-visual{height:420px;order:-1}.hero-copy{margin-top:-15px}.stack-layout,.principles-inner{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr}.project-card.featured{grid-column:1/-1}.metrics{grid-template-columns:1fr 1fr;gap:20px}.metrics div:nth-child(2){border-right:0}.metrics div:nth-child(3){padding-left:0}}
@media(max-width:620px){.container{width:min(var(--max),calc(100% - 28px))}.nav-links{display:none}.hero{padding-top:45px}.hero h1{font-size:4.3rem}.hero-visual{height:340px;transform:scale(.82);margin:-25px}.node-api{left:2%}.node-data{right:0}.node-ui{left:3%}.metrics{grid-template-columns:1fr 1fr}.metrics div{padding:0 14px}.metrics div:nth-child(3){padding-left:0}.section{padding:75px 0}.timeline-card{padding-left:25px}.role-head{display:block}.tag{display:inline-block;margin-top:10px}.timeline-meta{display:block}.timeline-meta span{display:block;margin-bottom:4px}.skills-grid,.project-grid{grid-template-columns:1fr}.project-card.featured{grid-column:auto}.principles-inner{gap:35px}.contact-box{padding:38px 26px}.contact-box:after{display:none}.footer{display:block}.footer span{display:block;margin:5px 0}}

.timeline-card,.project-card,.skill-group{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease,box-shadow .25s}.timeline-card.visible,.project-card.visible,.skill-group.visible{opacity:1;transform:none}