:root{--bg-primary: #f8f9fc;--bg-secondary: #ffffff;--bg-card: rgba(255,255,255,.8);--bg-card-hover: rgba(255,255,255,.95);--text-primary: #1a1a2e;--text-secondary: #555577;--text-muted: #9999bb;--accent1: #4361ee;--accent2: #7209b7;--accent3: #06d6a0;--font-sans: Inter, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;--font-mono: JetBrains Mono, Fira Code, Consolas, monospace;--border-radius: 16px;--nav-bg: rgba(255,255,255,.85);--card-border: rgba(0,0,0,.06);--shadow-card: 0 8px 32px rgba(0,0,0,.06);--transition-fast: .2s ease;--transition-md: .4s cubic-bezier(.4, 0, .2, 1);--transition-slow: .6s cubic-bezier(.22, 1, .36, 1)}[data-theme=dark]{--bg-primary: #0a0a1a;--bg-secondary: #0f0f2a;--bg-card: rgba(255,255,255,.03);--bg-card-hover: rgba(255,255,255,.06);--text-primary: #e8e8f0;--text-secondary: #8888aa;--text-muted: #555577;--nav-bg: rgba(10,10,26,.85);--card-border: rgba(255,255,255,.06);--shadow-card: 0 8px 32px rgba(0,0,0,.4)}.access-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);position:relative;overflow:hidden;font-family:var(--font-sans)}.access-container{position:relative;z-index:2;text-align:center;padding:48px 40px;background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-card);border:1px solid var(--card-border);max-width:420px;width:90%}.access-logo{margin-bottom:24px}.access-logo-icon{font-family:var(--font-mono);font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.access-title{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}.access-subtitle{color:var(--text-secondary);font-size:.95rem;margin-bottom:32px}.access-form{display:flex;flex-direction:column;gap:16px}.access-input{padding:14px 20px;border-radius:12px;border:2px solid var(--card-border);background:var(--bg-primary);color:var(--text-primary);font-size:1.1rem;font-family:var(--font-mono);text-align:center;letter-spacing:4px;outline:none;transition:border-color var(--transition-fast)}.access-input:focus{border-color:var(--accent1)}.access-error{color:#ef4444;font-size:.85rem}.access-button{padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.access-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4361ee4d}.access-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.access-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;overflow:hidden}.access-bg-shape{position:absolute;border-radius:50%;filter:blur(60px);opacity:.1}.shape-1{width:400px;height:400px;background:var(--accent1);top:-100px;right:-100px;animation:morphShape 8s ease-in-out infinite alternate}.shape-2{width:300px;height:300px;background:var(--accent2);bottom:-50px;left:-50px;animation:morphShape 10s ease-in-out infinite alternate-reverse}.shape-3{width:200px;height:200px;background:var(--accent3);top:50%;left:50%;transform:translate(-50%,-50%);animation:morphShape 6s ease-in-out infinite alternate}@keyframes morphShape{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}to{border-radius:70% 30% 30% 70%/70% 70% 30% 30%}}.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg-primary);color:var(--text-secondary);font-family:var(--font-sans)}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent1);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.maintenance-icon{font-size:4rem;margin-bottom:16px}.navbar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:998}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:color-mix(in srgb,var(--accent1) 30%,transparent);color:var(--text-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent1),var(--accent2));border-radius:3px}.navbar{position:fixed;top:0;left:0;right:0;z-index:999;padding:16px 24px;transition:all var(--transition-md)}.navbar.scrolled{background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--card-border);padding:12px 24px}.navbar-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.navbar-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary)}.navbar-logo-code{font-family:var(--font-mono);font-weight:700;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.2rem}.navbar-logo-text{font-family:var(--font-mono);font-weight:600;font-size:1rem}.navbar-logo-text .dot{color:var(--accent3)}.navbar-links{display:flex;align-items:center;gap:4px}.navbar-link{padding:8px 18px;border-radius:50px;font-size:.9rem;color:var(--text-secondary);text-decoration:none;transition:all var(--transition-fast)}.navbar-link:hover,.navbar-link.active{color:var(--accent1);background:color-mix(in srgb,var(--accent1) 8%,transparent)}.navbar-lang-btn{padding:6px 14px;border-radius:50px;border:1px solid var(--card-border);background:transparent;color:var(--text-secondary);font-size:.8rem;font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-fast);margin-left:8px}.navbar-lang-btn:hover{border-color:var(--accent1);color:var(--accent1)}.navbar-mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}.navbar-mobile-toggle span{display:block;width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:all var(--transition-fast)}.section{padding:100px 24px;position:relative}.section-inner{max-width:1200px;margin:0 auto}.section-header{margin-bottom:48px}.section-label{font-family:var(--font-mono);font-size:.85rem;color:var(--accent1);margin-bottom:8px;letter-spacing:3px;text-transform:uppercase}.section-title{font-size:2.6rem;font-weight:700;margin-bottom:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-subtitle{font-size:1.05rem;color:var(--text-secondary);max-width:600px}.hero-section{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:120px 24px 80px}.hero-content{text-align:center;max-width:800px}.hero-badge{display:inline-block;padding:6px 20px;border-radius:50px;border:1px solid color-mix(in srgb,var(--accent1) 30%,transparent);font-family:var(--font-mono);font-size:.8rem;color:var(--accent1);margin-bottom:24px;background:color-mix(in srgb,var(--accent1) 5%,transparent)}.hero-title{font-size:3.8rem;font-weight:800;line-height:1.1;margin-bottom:16px}.hero-title .gradient-text{background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-typewriter{font-family:var(--font-mono);font-size:1.3rem;color:var(--text-secondary);margin-bottom:24px;min-height:40px}.typewriter-cursor{display:inline-block;width:2px;height:1.2em;background:var(--accent1);margin-left:4px;animation:blink .8s step-end infinite;vertical-align:text-bottom}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero-desc{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto 36px;line-height:1.8}.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.btn-glow{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;border-radius:50px;font-family:var(--font-mono);font-size:.9rem;font-weight:500;color:#fff;background:linear-gradient(135deg,var(--accent1),var(--accent2));border:none;text-decoration:none;cursor:pointer;transition:all var(--transition-md)}.btn-glow:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px color-mix(in srgb,var(--accent1) 40%,transparent)}.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;border-radius:50px;font-family:var(--font-mono);font-size:.9rem;font-weight:500;color:var(--accent1);background:transparent;border:1px solid color-mix(in srgb,var(--accent1) 40%,transparent);text-decoration:none;cursor:pointer;transition:all var(--transition-md)}.btn-outline:hover{background:color-mix(in srgb,var(--accent1) 10%,transparent);border-color:var(--accent1);transform:translateY(-2px)}.hero-scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono);letter-spacing:2px}.hero-mouse{width:22px;height:34px;border:2px solid var(--text-muted);border-radius:11px;position:relative}.hero-mouse:after{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:3px;height:8px;background:var(--accent1);border-radius:2px;animation:scrollMouse 1.5s ease infinite}@keyframes scrollMouse{0%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(14px);opacity:0}}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.about-text p{color:var(--text-secondary);margin-bottom:16px;font-size:1.02rem}.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stat-card{text-align:center;padding:28px 16px;border-radius:var(--border-radius);background:var(--bg-card);border:1px solid var(--card-border);transition:all var(--transition-md)}.stat-card:hover{border-color:color-mix(in srgb,var(--accent1) 30%,transparent);transform:translateY(-4px);box-shadow:0 8px 24px color-mix(in srgb,var(--accent1) 10%,transparent)}.stat-number{font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:.85rem;color:var(--text-muted);margin-top:4px}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.skill-card{padding:24px 20px;border-radius:var(--border-radius);background:var(--bg-card);border:1px solid var(--card-border);text-align:center;transition:all var(--transition-md)}.skill-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent1) 30%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--accent1) 8%,transparent)}.skill-icon{font-size:2rem;margin-bottom:10px}.skill-card h3{font-size:.95rem;margin-bottom:14px}.skill-bar{width:100%;height:6px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:3px;overflow:hidden}.skill-fill{height:100%;border-radius:3px;background:linear-gradient(135deg,var(--accent1),var(--accent2));transition:width 1.2s cubic-bezier(.22,1,.36,1)}.skill-percent{display:block;margin-top:6px;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}.skill-rings{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:28px;margin-top:48px}.ring-item{text-align:center}.ring-svg{width:90px;height:90px;transform:rotate(-90deg)}.ring-svg circle{fill:none;stroke-width:6}.ring-bg{stroke:color-mix(in srgb,var(--text-primary) 6%,transparent)}.ring-fill{stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1)}.ring-value{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:var(--accent1);margin-top:6px}.ring-label{font-size:.85rem;color:var(--text-secondary)}.timeline{position:relative;padding-left:36px}.timeline:before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent1),var(--accent2),transparent)}.timeline-item{position:relative;margin-bottom:44px;padding-left:28px}.timeline-item:before{content:"";position:absolute;left:-27px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg-primary);border:2px solid var(--accent1);box-shadow:0 0 8px color-mix(in srgb,var(--accent1) 40%,transparent)}.timeline-item.active:before{background:var(--accent1);box-shadow:0 0 16px color-mix(in srgb,var(--accent1) 60%,transparent)}.timeline-date{font-family:var(--font-mono);font-size:.85rem;color:var(--accent1);margin-bottom:4px}.timeline-company{font-size:1.2rem;font-weight:600;margin-bottom:2px}.timeline-role{font-size:.9rem;color:var(--accent3);margin-bottom:10px}.timeline-desc{color:var(--text-secondary);font-size:.92rem;list-style:none}.timeline-desc li{padding:3px 0 3px 18px;position:relative}.timeline-desc li:before{content:"▸";position:absolute;left:0;color:var(--accent1)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.project-card{padding:24px;border-radius:var(--border-radius);background:var(--bg-card);border:1px solid var(--card-border);transition:all var(--transition-md);position:relative;overflow:hidden}.project-card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(135deg,var(--accent1),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-md)}.project-card:hover:after{transform:scaleX(1)}.project-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent1) 20%,transparent);box-shadow:0 12px 40px color-mix(in srgb,var(--accent1) 8%,transparent)}.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.project-tags span{padding:3px 10px;border-radius:50px;font-family:var(--font-mono);font-size:.65rem;background:color-mix(in srgb,var(--accent1) 8%,transparent);color:var(--accent1);border:1px solid color-mix(in srgb,var(--accent1) 15%,transparent)}.project-card h3{font-size:1.1rem;margin-bottom:10px}.project-card p{font-size:.88rem;color:var(--text-secondary);line-height:1.6;margin-bottom:14px}.project-links{display:flex;gap:16px}.project-links a{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);text-decoration:none;transition:color var(--transition-fast)}.project-links a:hover{color:var(--accent1)}.custom-content{max-width:800px;margin:0 auto}.custom-content p{color:var(--text-secondary);font-size:1.02rem;margin-bottom:16px;line-height:1.8}.footer{padding:80px 24px 40px;border-top:1px solid var(--card-border)}.footer-inner{max-width:1200px;margin:0 auto;text-align:center}.footer-subtitle{color:var(--text-secondary);font-size:1.02rem;margin-bottom:40px}.contact-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:60px}.contact-item{display:flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--border-radius);background:var(--bg-card);border:1px solid var(--card-border);color:var(--text-secondary);text-decoration:none;transition:all var(--transition-md);font-size:.9rem}.contact-item:hover{border-color:color-mix(in srgb,var(--accent1) 30%,transparent);color:var(--accent1);transform:translateY(-4px);box-shadow:0 8px 24px color-mix(in srgb,var(--accent1) 10%,transparent)}.contact-icon{font-size:1.3rem}.footer-bottom{border-top:1px solid var(--card-border);padding-top:24px;color:var(--text-muted);font-size:.85rem}.footer-bottom .heart{color:var(--accent3)}.footer-tech{margin-top:4px;font-size:.75rem;color:var(--text-muted)}@media(max-width:768px){.navbar-links{position:fixed;top:0;right:-280px;width:260px;height:100vh;flex-direction:column;background:var(--bg-secondary);padding:80px 24px 24px;gap:8px;transition:right var(--transition-md);z-index:999;border-left:1px solid var(--card-border)}.navbar-links.open{right:0}.navbar-link{width:100%;text-align:center}.navbar-mobile-toggle{display:flex}.navbar-lang-btn{margin-left:0;margin-top:8px;width:100%}.hero-title{font-size:2.2rem}.hero-typewriter{font-size:1rem}.hero-desc{font-size:.95rem}.section{padding:60px 20px}.section-title{font-size:1.8rem}.about-grid{grid-template-columns:1fr;gap:36px}.skills-grid{grid-template-columns:repeat(2,1fr)}.skill-rings{grid-template-columns:repeat(3,1fr);gap:20px}.projects-grid{grid-template-columns:1fr}.contact-links{flex-direction:column;align-items:center}.contact-item{width:100%;max-width:360px}}@media(max-width:480px){.hero-title{font-size:1.8rem}.skills-grid{grid-template-columns:1fr 1fr;gap:12px}.skill-card{padding:16px}.stat-card{padding:20px 12px}.stat-number{font-size:1.6rem}}
