*{margin:0;padding:0;box-sizing:border-box}html{background-color:#09090b;overscroll-behavior-y:none}:root{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.8;font-weight:400;--bg-primary: rgba(9, 9, 11, .78);--bg-secondary: rgba(13, 13, 16, .82);--bg-tertiary: rgba(20, 20, 24, .92);--bg-elevated: rgba(16, 16, 20, .9);--text-primary: #f5f5f7;--text-secondary: #b8b8c2;--text-tertiary: #7a7a84;--border-color: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .16);--accent-color: #ececf1;--accent-hover: #ffffff;--accent-strong: #ffffff;--shadow-sm: 0 10px 30px rgba(0, 0, 0, .18);--shadow-md: 0 18px 40px rgba(0, 0, 0, .24);--shadow-lg: 0 30px 60px rgba(0, 0, 0, .34);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:transparent;color:var(--text-primary);overflow-x:hidden}a{color:inherit;text-decoration:none;transition:color .2s ease}button{font-family:inherit;cursor:pointer;border:none;outline:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}::selection{background:var(--bg-tertiary);color:var(--text-primary)}h1,h2,h3,h4,h5,h6{font-family:Space Grotesk,Noto Sans SC,PingFang SC,sans-serif;letter-spacing:.01em}.logo-text,.nav-label{font-family:Space Grotesk,Noto Sans SC,PingFang SC,sans-serif}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease}.navbar.scrolled{background:#09090c59;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.04)}.navbar-inner{max-width:1100px;margin:0 auto;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.navbar-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-primary);font-size:.95rem;font-weight:500;letter-spacing:.01em;flex-shrink:0}.logo-icon{font-size:1.15rem;line-height:1}.logo-text{color:var(--text-primary)}.navbar-links{display:flex;align-items:center;gap:2px}.nav-link{padding:6px 13px;border-radius:6px;text-decoration:none;font-size:.88rem;color:var(--text-secondary);letter-spacing:.02em;transition:color .15s ease,background .15s ease}.nav-link:hover{color:var(--text-primary);background:#ffffff0d}.nav-link.active{color:var(--text-primary);font-weight:500}.hamburger{display:none;flex-direction:column;justify-content:center;gap:6px;width:32px;height:32px;padding:4px;background:none;border:none;cursor:pointer}.navbar .hamburger span{display:block;width:24px!important;height:2px!important;background-color:#fff!important;box-shadow:0 1px 4px #000000e6!important;border-radius:2px;transition:transform .25s ease,opacity .25s ease;transform-origin:center}.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}.mobile-menu{display:flex;flex-direction:column;max-height:0;overflow:hidden;border-top:1px solid transparent;transition:max-height .28s ease,border-color .28s ease}.mobile-menu.visible{max-height:280px;border-top-color:#ffffff0d}.mobile-link{padding:14px 24px;text-decoration:none;font-size:.95rem;color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.04);transition:color .15s ease,background .15s ease}.mobile-link:last-child{border-bottom:none}.mobile-link:hover,.mobile-link.active{color:var(--text-primary);background:#ffffff08}.main-content{padding-top:50px;min-height:100vh;background:transparent;position:relative;z-index:1}@media(max-width:768px){.navbar-links{display:none}.hamburger{display:flex}.navbar-inner{padding:0 18px}}.home-container{max-width:800px;margin:0 auto;padding:40px 20px}.avatar-section{text-align:center;margin-bottom:40px}.avatar{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid var(--border-color);box-shadow:var(--shadow-md)}.intro-section{margin-bottom:40px}.name-title{font-size:2.5rem;color:var(--text-primary);margin-bottom:10px;text-align:center}.subtitle{font-size:1.1rem;color:var(--text-secondary);text-align:center;margin-bottom:40px}.about-me{background:var(--bg-primary);padding:30px;border-radius:12px;margin-bottom:30px;border:1px solid var(--border-color);transition:all .3s ease;cursor:default;box-shadow:var(--shadow-sm)}.about-me:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}.about-me h2,.skills-section h2{display:flex;align-items:center;gap:10px;transition:transform .3s ease}.section-icon{display:flex;align-items:center;color:var(--text-tertiary);flex-shrink:0}.about-me:hover .section-icon,.skills-section:hover .section-icon{color:var(--text-secondary)}.about-me h2{font-size:1.5rem;color:var(--text-primary);margin-bottom:15px}.about-me:hover h2{transform:scale(1.02)}.about-me p{color:#ffffffd9;line-height:1.8;font-size:1.05rem}.skills-section{background:var(--bg-primary);padding:30px;border-radius:12px;border:1px solid var(--border-color);transition:all .3s ease;cursor:default;box-shadow:var(--shadow-sm)}.skills-section:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}.skills-section h2{font-size:1.5rem;color:var(--text-primary);margin-bottom:20px}.skills-section:hover h2{transform:scale(1.02)}.skills-grid{display:flex;flex-wrap:wrap;gap:12px}.skill-tag{background:var(--bg-secondary);padding:10px 20px;border-radius:20px;color:#ffffffd9;font-size:.95rem;border:1px solid var(--border-color);transition:all .3s ease;cursor:default}.skill-tag:hover{background:var(--bg-primary);border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-4px);box-shadow:var(--shadow-md)}.contact-section{padding:30px 0}.contact-section h2{font-size:1.5rem;color:var(--text-primary);margin-bottom:20px;text-align:center}.contact-links{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%;margin:0 auto}.contact-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-primary);border-radius:16px;text-decoration:none;color:var(--text-primary);transition:all .3s ease;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.contact-item:hover{background:var(--bg-primary);border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-md)}.contact-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:12px;box-shadow:var(--shadow-sm);color:var(--text-secondary);transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.contact-item:hover .contact-icon{color:var(--text-primary);transform:scale(1.15) rotate(-6deg)}@media(max-width:768px){.home-container{padding:30px 15px}.name-title{font-size:2rem}.subtitle{font-size:1rem}.about-me,.skills-section,.contact-section{padding:20px}.about-me h2,.skills-section h2,.contact-section h2{font-size:1.3rem}.skills-grid{gap:10px}.skill-tag{padding:8px 16px;font-size:.9rem}.contact-links{grid-template-columns:1fr}.contact-item{padding:12px}}