:root{--font-heading:"Sora", "Avenir Next", "Segoe UI", sans-serif;--font-body:"Manrope", "Segoe UI", sans-serif;--color-primary:#1f4f8c;--color-accent:#0ea5a4;--color-bg-a:#f7fafc;--color-bg-b:#eef3f8;--color-surface:#fff;--color-text:#1f2937;--color-text-soft:#4b5563;--color-border:#d6deea;--shadow-soft:0 10px 30px #0f172a0f;--container-width:1120px;--section-y:clamp(4rem, 7vw, 6rem);--radius:18px;--nav-height:72px}:root[data-theme=dark]{--color-primary:#8db6f0;--color-accent:#2dd4bf;--color-bg-a:#0d141d;--color-bg-b:#111c28;--color-surface:#162434;--color-text:#e5edf6;--color-text-soft:#a7b5c8;--color-border:#2a3e53;--shadow-soft:0 16px 36px #00000059}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--color-text);background:radial-gradient(circle at 10% 0%, #1f4f8c14, transparent 45%), radial-gradient(circle at 90% 15%, #0ea5a414, transparent 40%), var(--color-bg-a);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}main{display:block}.container{width:min(100% - 2rem, var(--container-width));margin-inline:auto}h1,h2,h3{font-family:var(--font-heading);letter-spacing:-.02em;margin:0;line-height:1.15}p{margin:0}#root{min-height:100svh}section[id]{scroll-margin-top:calc(var(--nav-height) + 1rem)}.navbar-wrap{z-index:20;border-bottom:1px solid var(--color-border);background:color-mix(in srgb, var(--color-bg-a) 86%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0}.navbar{min-height:var(--nav-height);justify-content:space-between;align-items:center;gap:1rem;display:flex;position:relative}.nav-controls{align-items:center;gap:.6rem;display:flex}.brand{color:var(--color-primary);font-family:var(--font-heading);font-size:1.05rem}.nav-links{align-items:center;gap:1.1rem;margin:0;padding:0;list-style:none;display:flex}.nav-links a{color:var(--color-text-soft);font-size:.96rem}.nav-links a:hover,.nav-links a:focus-visible{color:var(--color-primary)}.nav-links a{border-bottom:2px solid #0000;padding:.2rem 0}.nav-links a:hover,.nav-links a:focus-visible{border-bottom-color:var(--color-accent)}.nav-links a.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.menu-toggle,.theme-toggle{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;border-radius:999px;padding:.45rem .8rem}.menu-toggle{display:none}.section{padding-block:var(--section-y)}.section-alt,#hero{background:var(--color-bg-b)}#about{background:var(--color-bg-a)}#projects{background:var(--color-bg-b)}#skills{background:var(--color-bg-a)}#contact{background:var(--color-bg-b)}.hero{min-height:calc(100svh - var(--nav-height));align-items:center;display:grid}.hero-content{grid-template-columns:minmax(220px,320px) minmax(0,1fr);align-items:center;gap:clamp(1.4rem,4vw,3.2rem);display:grid}.hero-image-wrap{max-width:320px}.hero-image{aspect-ratio:1;border:1px solid var(--color-border);width:100%;height:auto;box-shadow:var(--shadow-soft);background:var(--color-surface);border-radius:50%}.hero-copy{gap:.9rem;max-width:62ch;display:grid}.eyebrow{color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:700}h1{font-size:clamp(2.4rem,7vw,4.8rem)}.subtitle{color:var(--color-primary);font-size:clamp(1.05rem,2.3vw,1.35rem);font-weight:600}.lead,.section-content p{color:var(--color-text-soft);max-width:65ch}.hero-actions{flex-wrap:wrap;gap:.7rem;margin-top:.7rem;display:flex}.button{cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;min-height:42px;padding:.6rem 1rem;font-size:.92rem;font-weight:600;transition:border-color .14s,background-color .14s,color .14s;display:inline-flex}.button:hover{transform:none}.button-affordance{letter-spacing:.02em;border:1px solid color-mix(in srgb, var(--color-border) 88%, transparent);background:color-mix(in srgb, var(--color-surface) 80%, transparent);border-radius:999px;justify-content:center;align-items:center;min-width:1.8rem;min-height:1.3rem;padding-inline:.35rem;font-size:.72rem;font-weight:700;display:inline-flex}.button-icon{width:.9rem;height:.9rem}.button-primary .button-affordance{color:#f8fbff;background:#ffffff29;border-color:#ffffff73}.button-primary{background:var(--color-primary);color:#f8fbff;box-shadow:var(--shadow-soft)}.button-primary:hover{background:color-mix(in srgb, var(--color-primary) 88%, black);box-shadow:var(--shadow-soft);transform:none}.button-primary:focus-visible{outline:3px solid color-mix(in srgb, var(--color-primary) 60%, white)}.button-secondary{border-color:var(--color-border);background:var(--color-surface);color:var(--color-text);box-shadow:0 2px 8px color-mix(in srgb, currentColor 5%, transparent)}.button-secondary:hover{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-surface) 90%, var(--color-accent));box-shadow:0 2px 8px color-mix(in srgb, currentColor 5%, transparent);transform:none}.button-secondary:focus-visible{outline:3px solid color-mix(in srgb, var(--color-accent) 60%, white)}.section-content{gap:1rem;display:grid}.section-content h2{font-size:clamp(1.6rem,3vw,2.2rem)}.pill-list,.contact-links{flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none;display:flex}.pill-list li{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-soft);cursor:default;border-radius:999px;padding:.4rem .85rem;transition:color .16s,border-color .16s}.pill-list li:hover{border-color:color-mix(in srgb, var(--color-primary) 35%, var(--color-border));color:var(--color-primary)}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-soft);flex-direction:column;gap:.75rem;padding:1.2rem;transition:border-color .14s,background-color .14s;display:flex}.project-card:hover{border-color:color-mix(in srgb, var(--color-primary) 25%, var(--color-border));box-shadow:var(--shadow-soft)}.project-card h3{font-size:1.15rem}.project-card p{color:var(--color-text-soft)}.project-card a,.contact-links a{color:var(--color-primary);font-weight:600}.about-body{gap:1.2rem;max-width:75ch;display:grid}.about-summary{font-size:1.02rem;line-height:1.8}.about-highlight{border-left:3px solid var(--color-primary);background:color-mix(in srgb, var(--color-primary) 6%, transparent);border-radius:4px;padding:1rem 1.2rem;transition:background-color .18s,border-left-color .18s}.about-highlight:hover{background:color-mix(in srgb, var(--color-primary) 10%, transparent);border-left-color:color-mix(in srgb, var(--color-primary) 80%, black)}.about-highlight p{color:var(--color-text);margin:0;font-weight:500}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:1.5rem;display:grid}.skill-category{gap:.6rem;display:grid}.skill-category h3{letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin:0;font-size:.95rem;font-weight:700}.project-card-header{align-items:flex-start;display:flex}.project-card h3{min-height:2.6em;margin:0;line-height:1.3}.project-description{font-size:.95rem;line-height:1.7}.project-image-placeholder{aspect-ratio:16/9;border:1px dashed color-mix(in srgb, var(--color-primary) 32%, var(--color-border));background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent)), var(--color-surface);border-radius:12px;place-items:center;width:100%;display:grid}.project-image-placeholder span{letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-soft);font-size:.82rem;font-weight:700}.project-tech{flex-wrap:wrap;gap:.5rem;margin-top:.4rem;display:flex}.tech-tag{background:color-mix(in srgb, var(--color-primary) 12%, transparent);border:1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);color:var(--color-primary);cursor:default;border-radius:999px;align-items:center;padding:.3rem .7rem;font-size:.8rem;font-weight:500;transition:border-color .16s,background-color .16s,color .16s;display:inline-flex}.tech-tag:hover{background:color-mix(in srgb, var(--color-primary) 18%, transparent);border-color:color-mix(in srgb, var(--color-primary) 42%, transparent)}.project-link{color:var(--color-primary);align-items:center;gap:.4rem;margin-top:auto;font-weight:600;transition:color .14s;display:inline-flex}.project-link:hover{color:color-mix(in srgb, var(--color-primary) 85%, black)}.project-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}.project-link-arrow{display:inline-flex}.project-link:hover .project-link-arrow{transform:none}.contact-header{text-align:center;gap:.7rem;margin-bottom:2rem;display:grid}.contact-header h2{margin-bottom:.3rem}.contact-header p{color:var(--color-text-soft);max-width:65ch;margin-inline:auto}.contact-cta{justify-content:center;margin-bottom:1.5rem;display:flex}.button-large{gap:.6rem;min-height:48px;padding:.85rem 1.8rem;font-size:1rem}.contact-divider{text-align:center;color:var(--color-text-soft);letter-spacing:.06em;margin-block:1.5rem 1.2rem;font-size:.9rem;position:relative}.contact-divider:before,.contact-divider:after{content:"";background:var(--color-border);width:30%;height:1px;position:absolute;top:50%}.contact-divider:before{left:0}.contact-divider:after{right:0}.contact-links{justify-content:center;margin-bottom:2rem}.contact-links a{border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;border-radius:999px;align-items:center;gap:.4rem;padding:.6rem .9rem;transition:color .16s,border-color .16s,background-color .16s;display:inline-flex}.contact-links a:hover{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));color:var(--color-primary)}.contact-links a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.site-footer{background:#0f172a;border-top:1px solid #ffffff29;padding-block:clamp(2.2rem,5vw,3.5rem)}.site-footer-content{color:#dbe7f5;text-align:center;gap:.9rem;max-width:70ch;display:grid}.site-footer-content p{margin:0}.site-footer-name{font-family:var(--font-heading);color:#f8fbff;font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:700}.site-footer-statement{color:#c5d3e4;font-size:clamp(.95rem,1.7vw,1.08rem);line-height:1.75}.site-footer-rights{letter-spacing:.04em;text-transform:uppercase;color:#a8bdd5;font-size:.84rem}@media (width<=920px){.project-grid,.skills-grid{grid-template-columns:1fr}.hero-content{grid-template-columns:1fr;justify-items:start}.hero-image-wrap{max-width:180px}.navbar{flex-wrap:wrap;min-height:auto;padding-block:.75rem}.menu-toggle{display:inline-flex}.nav-links{visibility:hidden;opacity:0;pointer-events:none;scrollbar-width:thin;border:1px solid var(--color-border);width:100%;box-shadow:var(--shadow-soft);background:color-mix(in srgb, var(--color-surface) 92%, transparent);border-radius:14px;flex-wrap:wrap;order:3;justify-content:flex-start;gap:.85rem;margin-top:0;padding:.8rem;transition:opacity .17s,transform .17s,visibility .17s;display:flex;position:absolute;top:calc(100% + .4rem);left:0;right:0;overflow-x:auto;transform:translateY(-8px)}.navbar.nav-open .nav-links{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}.nav-links a{white-space:nowrap;font-size:.9rem}.theme-toggle{padding:.4rem .65rem;font-size:.88rem}.site-footer-content{text-align:left}}@media (width<=620px){.navbar{gap:.45rem}.brand{font-size:.98rem}.nav-controls{margin-left:auto}.menu-toggle,.theme-toggle{padding:.36rem .62rem;font-size:.84rem}.hero-actions{width:100%}.button{justify-content:space-between;width:100%}.button-large{width:auto}.contact-divider:before,.contact-divider:after{width:20%}}:focus-visible{outline:3px solid color-mix(in srgb, var(--color-accent) 70%, white);outline-offset:2px}a,button,input,select,textarea{transition:background-color .12s,color .12s,border-color .12s}.animate-fade-in-up,.animate-fade-in-left,.animate-fade-in-right,.animate-fade-in,.animate-slide-in-up,.animate-scale-in,.animate-stagger>*{opacity:1!important;animation:none!important;transform:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}