*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #000000;--color-secondary: #1d1d1f;--color-text: #1d1d1f;--color-text-secondary: #6e6e73;--color-background: #ffffff;--color-background-secondary: #f5f5f7;--color-accent: #0071e3;--color-border: #d2d2d7;--font-family-primary: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-secondary: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 32px;--spacing-xl: 48px;--spacing-xxl: 64px;--spacing-3xl: 96px;--border-radius: 18px;--border-radius-sm: 12px}body{font-family:var(--font-family-secondary);font-size:17px;line-height:1.47;color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nav-bar{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.8);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--color-border);z-index:1000;height:44px}.nav-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;justify-content:space-between;align-items:center;height:100%}.nav-brand a{font-family:var(--font-family-primary);font-size:18px;font-weight:600;color:var(--color-primary);text-decoration:none}.nav-links{display:flex;gap:var(--spacing-lg)}.nav-links a{font-size:14px;white-space:nowrap;font-weight:400;color:var(--color-text);text-decoration:none;transition:color 0.3s ease}.nav-links a:hover{color:var(--color-accent)}.nav-links a[aria-current="page"]{color:var(--color-accent)}.main-content{padding-top:44px;min-height:calc(100vh - 44px)}.hero-section{padding:var(--spacing-3xl) var(--spacing-md);text-align:center;background:linear-gradient(135deg, var(--color-background) 0%, var(--color-background-secondary) 100%);min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero-title{font-family:var(--font-family-primary);font-size:clamp(48px, 8vw, 80px);font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-md);letter-spacing:-0.02em}.hero-subtitle{font-family:var(--font-family-primary);font-size:clamp(24px, 4vw, 32px);font-weight:400;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);max-width:800px;line-height:1.2}.hero-tagline{display:block;margin-top:var(--spacing-xs);font-size:0.7em;text-wrap:balance}.hero-buttons{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.hero-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);white-space:nowrap;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-family-secondary);font-size:17px;font-weight:500;text-decoration:none;border-radius:var(--border-radius);transition:all 0.3s ease;box-shadow:0 4px 20px rgba(0,0,0,0.1)}.linkedin-button{background:#0077b5;color:white;border:2px solid #0077b5}.linkedin-button:hover{background:#005885;border-color:#005885;transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,119,181,0.3);text-decoration:none;color:white}.github-hero-button{background:#24292e;color:white;border:2px solid #24292e}.github-hero-button:hover{background:#000000;border-color:#000000;transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.25);text-decoration:none;color:white}.hero-button svg{flex-shrink:0}.content-section{max-width:1200px;margin:0 auto;padding:var(--spacing-xxl) var(--spacing-md)}.section-title{font-family:var(--font-family-primary);font-size:clamp(32px, 5vw, 48px);font-weight:600;color:var(--color-primary);margin-bottom:var(--spacing-xl);text-align:center}.section-content{max-width:800px;margin:0 auto;font-size:19px;line-height:1.6;color:var(--color-text)}.section-content p{margin-bottom:var(--spacing-md)}.section-intro{max-width:640px;margin:calc(var(--spacing-sm) - var(--spacing-xl)) auto var(--spacing-xl);text-align:center;font-size:17px;color:var(--color-text-secondary);text-wrap:balance}.card-section{background:var(--color-background);border:1px solid rgba(0,0,0,0.06);border-radius:var(--border-radius);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;box-shadow:0 4px 20px rgba(0,0,0,0.04);transition:box-shadow 0.3s ease, transform 0.2s ease}.card-section:hover{box-shadow:0 8px 30px rgba(0,0,0,0.08);transform:translateY(-2px)}.card-title{font-family:var(--font-family-primary);font-size:28px;font-weight:600;color:var(--color-primary);margin-bottom:var(--spacing-md)}.project-card{display:grid;grid-template-columns:300px 1fr;gap:var(--spacing-xl);align-items:center}.project-shot{display:block;border-radius:var(--border-radius-sm);overflow:hidden;border:1px solid rgba(0,0,0,0.08);box-shadow:0 8px 30px rgba(0,0,0,0.08);transition:transform 0.3s ease, box-shadow 0.3s ease}.project-shot:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.12)}.project-shot img{display:block;width:100%;height:auto}.project-body .github-links{text-align:left}.recognition-list{list-style:none}.recognition-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-md);padding:var(--spacing-md) 0;border-bottom:1px solid rgba(0,0,0,0.06)}.recognition-list li:first-child{padding-top:0}.recognition-list li:last-child{padding-bottom:0;border-bottom:0}.recognition-list strong{display:block;font-size:19px;font-weight:600;color:var(--color-primary)}.recognition-list span{font-size:15px;color:var(--color-text-secondary)}.recognition-list .recognition-year{flex:none;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-text-secondary)}.post-list{list-style:none;display:grid;gap:var(--spacing-md);max-width:800px;margin:0 auto}.post-card{display:block;padding:var(--spacing-lg);background:var(--color-background);border:1px solid rgba(0,0,0,0.06);border-radius:var(--border-radius);box-shadow:0 4px 20px rgba(0,0,0,0.04);color:var(--color-text);transition:box-shadow 0.3s ease, transform 0.2s ease}.post-card:hover{text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,0.08);transform:translateY(-2px)}.post-card time{font-size:14px;color:var(--color-text-secondary)}.post-card h2,.post-card h3{margin:var(--spacing-xs) 0;font-family:var(--font-family-primary);font-size:24px;font-weight:600;line-height:1.3;color:var(--color-primary)}.post-card p{color:var(--color-text-secondary)}.post-card-more{display:inline-block;margin-top:var(--spacing-sm);font-weight:500;color:var(--color-accent)}.post{max-width:700px;margin:0 auto;padding:var(--spacing-xxl) var(--spacing-md)}.post-back{font-size:15px;font-weight:500}.post-title{margin:var(--spacing-md) 0 var(--spacing-sm);font-family:var(--font-family-primary);font-size:clamp(32px, 5vw, 44px);font-weight:700;line-height:1.15;letter-spacing:-0.01em;color:var(--color-primary)}.post-meta{font-size:15px;color:var(--color-text-secondary)}.post-content{margin-top:var(--spacing-xl);font-size:19px;line-height:1.7}.post-content>*+*{margin-top:1.1em}.post-content h2,.post-content h3{margin-top:1.8em;font-family:var(--font-family-primary);font-weight:600;line-height:1.3;color:var(--color-primary)}.post-content h2{font-size:26px}.post-content h3{font-size:21px}.post-content ul,.post-content ol{padding-left:1.3em}.post-content li+li{margin-top:0.5em}.post-content blockquote{padding-left:var(--spacing-md);border-left:3px solid var(--color-border);color:var(--color-text-secondary)}.post-content img{display:block;max-width:100%;height:auto;border-radius:var(--border-radius-sm)}.post-content figure{margin:1.6em auto;max-width:480px}.post-content figure img{width:100%;margin:0 auto;box-shadow:0 4px 20px rgba(0,0,0,0.08)}.post-content figcaption{margin-top:var(--spacing-xs);font-size:15px;text-align:center;color:var(--color-text-secondary)}.post-footer{margin-top:var(--spacing-xxl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);color:var(--color-text-secondary)}.post-footer p{margin-bottom:var(--spacing-sm)}.post-disclaimer{font-size:14px}.feature-list{list-style:none;margin:var(--spacing-md) 0;display:grid;gap:var(--spacing-sm)}.feature-list li{padding:var(--spacing-sm) var(--spacing-md);font-size:17px;color:var(--color-text);background:rgba(245,245,247,0.6);border-radius:var(--border-radius-sm);transition:background-color 0.3s ease, transform 0.2s ease}.feature-list li:hover{background:#f5f5f7;transform:translateY(-1px)}.feature-list strong{color:var(--color-primary);font-weight:600}.clean-list{list-style:none;margin:var(--spacing-md) 0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.clean-list li{padding:var(--spacing-xs) 0;font-size:17px;color:var(--color-text);display:flex;align-items:center}.clean-list li::before{content:"•";color:var(--color-accent);font-weight:bold;width:20px;margin-right:var(--spacing-xs)}a{color:var(--color-accent);text-decoration:none;transition:all 0.3s ease}a:hover{text-decoration:underline}.footer{background:var(--color-background-secondary);border-top:1px solid var(--color-border);padding:var(--spacing-xl) 0;margin-top:var(--spacing-3xl)}.footer-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);text-align:center}.footer-links{display:flex;justify-content:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-md)}.footer-links a{font-size:14px;color:var(--color-text-secondary)}.footer-copyright p{font-size:12px;color:var(--color-text-secondary)}@media (max-width: 768px){.nav-bar{height:92px}.nav-container{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0}.nav-brand{height:44px;display:flex;align-items:center;padding:0 var(--spacing-sm)}.nav-links{gap:var(--spacing-xs);overflow-x:auto;padding:2px var(--spacing-sm) 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;--fade-left: 0px;--fade-right: var(--spacing-xl);-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent)}.nav-links.can-scroll-left{--fade-left: var(--spacing-xl)}.nav-links.at-end{--fade-right: 0px}.nav-links::-webkit-scrollbar{display:none}.nav-links a{flex:none;padding:6px 14px;border-radius:980px;background:var(--color-background-secondary);color:var(--color-text)}.nav-links a:hover{color:var(--color-text);text-decoration:none}.nav-links a.active,.nav-links a.active:hover{background:var(--color-secondary);color:white}.main-content{padding-top:92px}.content-section{scroll-margin-top:92px}.hero-section{padding:var(--spacing-xxl) 20px;min-height:auto}.hero-title{font-size:40px;margin-bottom:var(--spacing-sm)}.hero-tagline{font-size:16px}.hero-subtitle{font-size:19px;line-height:1.4;margin-bottom:var(--spacing-md);text-wrap:balance}.hero-buttons{flex-direction:column;width:100%;max-width:340px;gap:12px;margin-top:var(--spacing-sm)}.hero-button{width:100%;padding:14px var(--spacing-md);font-size:16px;border-radius:var(--border-radius-sm)}.content-section{padding:var(--spacing-xl) var(--spacing-sm)}.section-title{font-size:28px;margin-bottom:var(--spacing-md)}.section-content{font-size:17px}.section-intro{margin:calc(var(--spacing-xs) - var(--spacing-md)) auto var(--spacing-md);font-size:16px}.post{padding:var(--spacing-xl) 20px}.post-content{margin-top:var(--spacing-lg);font-size:17px}.post-card{padding:20px}.post-card h2,.post-card h3{font-size:20px}.card-section{margin:var(--spacing-md) 0;padding:20px}.card-title{font-size:22px;margin-bottom:var(--spacing-sm)}.project-card{grid-template-columns:1fr;gap:var(--spacing-md)}.project-shot{width:100%;max-width:300px;margin:0 auto}.feature-list{gap:12px}.feature-list li,.feature-list li:hover{position:relative;padding:0 0 0 18px;font-size:16px;line-height:1.5;background:none;border-radius:0;transform:none}.feature-list li::before{content:"";position:absolute;left:2px;top:0.65em;width:6px;height:6px;border-radius:50%;background:var(--color-text-secondary)}.footer-links{flex-direction:column;gap:var(--spacing-sm)}}html{scroll-behavior:smooth}.projects-more{text-align:center;margin-top:var(--spacing-xl);color:var(--color-text-secondary)}.projects-more p{margin-bottom:var(--spacing-sm)}.github-streak{display:block;max-width:495px;margin:var(--spacing-md) auto var(--spacing-lg);border-radius:var(--border-radius-sm);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06)}.github-streak img{display:block;width:100%;height:auto}.github-links{text-align:center;margin-top:var(--spacing-md)}.github-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:10px 20px;font-size:15px;font-weight:500;color:var(--color-text);background:transparent;border:1.5px solid var(--color-border);border-radius:980px;text-decoration:none;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.github-button:hover{background:var(--color-secondary);border-color:var(--color-secondary);color:white;text-decoration:none}*:focus{outline:2px solid var(--color-accent);outline-offset:2px}
