:root{--bg: #0b1020;--bg-alt: #121a34;--card: #11162a;--card-alt: #162042;--text: #e8ebf7;--muted: #9aa3b2;--accent: #6aa3ff;--accent-glow: 150 63% 60%;--danger: #ff6b6b;--focus-ring: 0 0 0 3px rgba(106,163,255,.35);--gradient-accent: linear-gradient(135deg, #6aa3ff 0%, #8ec5ff 40%, #b1d9ff 100%);--gradient-bg: radial-gradient(1000px 600px at 10% 10%, #12193a 0%, #090e1d 50%, #070a15 100%);--font-base: 16px;--font-xs: clamp(.68rem, .7rem + .15vw, .75rem);--font-sm: clamp(.78rem, .8rem + .15vw, .875rem);--font-md: clamp(.92rem, .9rem + .35vw, 1.05rem);--font-lg: clamp(1.15rem, 1.05rem + .6vw, 1.375rem);--font-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem);--font-2xl: clamp(2.1rem, 1.9rem + 1.2vw, 2.65rem);--ease-out: cubic-bezier(.16,1,.3,1);--ease-in: cubic-bezier(.7,0,.84,0);--ease-mid: cubic-bezier(.4,0,.2,1);--dur-fast: .12s;--dur-med: .24s;--dur-slow: .48s;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 1000px;--shadow-sm: 0 4px 12px -2px rgba(0,0,0,.35);--shadow-md: 0 8px 24px -6px rgba(0,0,0,.4);--shadow-glow: 0 0 0 1px rgba(106,163,255,.4), 0 0 20px -5px rgba(106,163,255,.6)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,Helvetica Neue,sans-serif;background:var(--gradient-bg),var(--bg);color:var(--text);font-size:var(--font-md);line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/feGaussianBlur stdDeviation='0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");opacity:.1;mix-blend-mode:overlay}a{color:inherit;text-decoration:none}main{max-width:960px;margin:80px auto 40px;padding:0 20px}.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem}.hero-avatar{position:relative;width:180px;height:180px;border-radius:50%}.hero-avatar:before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--accent) 0%,rgba(255,255,255,.35) 55%,var(--accent) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.hero-avatar:after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(106,163,255,.35),transparent 70%);opacity:.55;filter:blur(12px);pointer-events:none}.hero-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:0 4px 18px -4px #0009}@media (prefers-reduced-motion: no-preference){.hero-avatar:hover:after{opacity:.75}}.skeleton{background:linear-gradient(90deg,#ffffff0f,#ffffff26,#ffffff0f);background-size:200% 100%;animation:shimmer 1.6s infinite var(--ease-mid);border-radius:var(--radius-lg)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero-right h1{background:var(--nav-btn-gradient);color:var(--nav-btn-text);text-shadow:0 1px 1px rgba(0,0,0,.5);font-size:var(--font-sm);padding:11px 20px 12px;letter-spacing:.5px;border:1px solid var(--nav-btn-border);box-shadow:0 4px 14px -2px #0000008c,inset 0 0 0 1px #ffffff14;background:var(--gradient-accent);-webkit-background-clip:text;color:transparent}.hero-right h3{color:var(--accent);margin-top:.5rem;font-size:var(--font-lg);font-weight:500}@media (max-width: 640px){.hero-right h1{font-size:var(--font-xl)}}.card{position:relative;background:linear-gradient(175deg,#ffffff0d,#ffffff05);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:28px 28px 32px;box-shadow:var(--shadow-md);overflow:hidden;backdrop-filter:blur(4px);transition:transform var(--dur-med) var(--ease-mid),box-shadow var(--dur-med) var(--ease-mid),border-color var(--dur-med)}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#6aa3ff73,#6aa3ff00 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -4px #0000008c}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px 11px;background:var(--gradient-accent);color:#091225;font-weight:600;font-size:var(--font-sm);letter-spacing:.4px;border-radius:var(--radius-pill);border:none;cursor:pointer;position:relative;box-shadow:var(--shadow-sm);transition:background var(--dur-med) var(--ease-mid),transform var(--dur-fast) var(--ease-mid),box-shadow var(--dur-med)}.btn--nav{background:linear-gradient(135deg,#3b82f6,#2563eb 65%,#1d4ed8);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}.btn--nav:hover{box-shadow:0 0 0 1px #3b82f673,0 8px 22px -6px #3b82f699}.btn--nav:focus-visible{box-shadow:var(--shadow-glow)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn:active{transform:translateY(0)}.btn:focus-visible{outline:none;box-shadow:var(--shadow-glow)}.btn[disabled]{opacity:.5;cursor:not-allowed}a:focus-visible,button:focus-visible{outline:var(--focus-ring);outline-offset:2px}.navbar{position:sticky;top:0;backdrop-filter:blur(8px);background:#070a15b3;border-bottom:1px solid rgba(255,255,255,.06)}.navbar-inner{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}.nav-links a{margin-left:16px;color:var(--muted);position:relative;font-size:var(--font-sm);padding:6px 10px;border-radius:var(--radius-pill);transition:color var(--dur-med) var(--ease-mid),background var(--dur-med) var(--ease-mid)}.nav-links a:hover{color:var(--text);background:#ffffff0f}.nav-links a.active{color:var(--text);font-weight:600;background:#ffffff1a}.projects h2{background:url(/projects-cover.jpg) center/cover;color:#fff;padding:1rem;border-radius:12px}.projects h2{min-height:140px;display:flex;align-items:end}.footer{max-width:960px;margin:40px auto;padding:0 20px 40px;color:var(--muted);font-size:14px;text-align:center}.theme-btn{margin-left:12px;font-size:1.2rem;background:none;border:none;cursor:pointer;color:var(--accent);transition:transform .2s,color .3s}.theme-btn:hover{transform:scale(1.15)}html.light{--bg: #f5f7fa;--card: #ffffff;--text: #0b1020;--muted: #3f4a5d;--accent: #0078ff;background:var(--bg);color:var(--text)}html.light body{background:var(--bg)}html.light .navbar{backdrop-filter:blur(8px);background:#ffffffd9;border-bottom:1px solid rgba(0,0,0,.06)}html.light .navbar .nav-links a{color:#3a4454}html.light .navbar .nav-links a.active{color:var(--text);font-weight:600}.projects{padding:0;overflow:hidden}.projects .projects-header{position:relative;min-height:160px;display:flex;align-items:flex-end;padding:24px;border-radius:12px 12px 0 0;color:#fff;background:url(/projects-cover.jpg) center/cover,linear-gradient(135deg,#14223d,#0b1427)}.projects .projects-header:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 25%,#0000008c)}.projects .projects-header h2{position:relative;z-index:1;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35)}.projects .projects-body{padding:20px 24px 24px}html.light .projects .projects-header:after{background:linear-gradient(180deg,#fff0 25%,#00000059)}.muted{color:var(--muted)}.skills h2,.featured h2{margin-top:0}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.skills-title{font-weight:600;margin-bottom:4px;color:var(--accent)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.case{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);padding:18px 18px 20px;position:relative;overflow:hidden;transition:transform var(--dur-med) var(--ease-mid),box-shadow var(--dur-med),border-color var(--dur-med)}.case:hover{transform:translateY(-4px);box-shadow:0 6px 20px -4px #0000008c;border-color:#ffffff40}html.light .case{background:#00000008;border-color:#00000014}html.light .case:hover{border-color:#0000004d}@media (prefers-reduced-motion: reduce){.card,.btn,.case{transition:none}.card:hover,.btn:hover,.case:hover{transform:none}}.section-header{display:flex;align-items:center;gap:12px;margin:0 0 20px}.section-header h2{margin:0;font-size:var(--font-xl);position:relative}.underline-decor{flex:1;height:2px;background:linear-gradient(90deg,#6aa3ffe6,#6aa3ff00);border-radius:2px}