:root{--mouse-x: 50%;--mouse-y: 50%;--bg: #0a192f;--bg-light: #112240;--bg-lightest: #233554;--slate-light: #ccd6f6;--slate: #8892b0;--slate-dark: #495670;--accent: #64ffda;--accent-dim: rgba(100, 255, 218, .1);--font-sans: "Inter", -apple-system, system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;--font-serif: "Noto Serif SC", serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--slate);font-family:var(--font-sans);font-size:16px;line-height:1.6;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(120,150,220,.08),transparent 40%);transition:background .1s ease-out}nav,main,footer,aside{position:relative;z-index:2}nav{position:fixed;top:0;left:0;right:0;padding:0 50px;height:80px;display:flex;align-items:center;justify-content:space-between;background:#0a192fd9;backdrop-filter:blur(10px);z-index:100;transition:height .3s,box-shadow .3s}nav.scrolled{height:70px;box-shadow:0 10px 30px -10px #020c1bb3}.logo{width:42px;height:42px;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--accent);transition:transform .3s,box-shadow .3s;text-decoration:none}.logo:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--accent)}.nav-links{display:flex;gap:30px;align-items:center;list-style:none}.nav-links a{color:var(--slate-light);text-decoration:none;font-size:13px;font-family:var(--font-mono);transition:color .2s}.nav-links a .num{color:var(--accent);margin-right:5px}.nav-links a:hover{color:var(--accent)}.resume-btn{padding:10px 16px;border:1px solid var(--accent);border-radius:4px;color:var(--accent)!important;transition:background .2s}.resume-btn:hover{background:var(--accent-dim)}.side-left,.side-right{position:fixed;bottom:0;width:40px;z-index:50}.side-left{left:60px}.side-right{right:60px;padding-bottom:75px}@media(min-width:1500px){.side-left{left:80px}.side-right{right:80px}}.side-items{display:flex;flex-direction:column;align-items:center;gap:20px;list-style:none}.side-items:after{content:"";display:block;width:1px;height:130px;background:var(--slate);margin-top:20px}.side-items a{color:var(--slate);transition:color .2s,transform .2s;display:inline-block}.side-items a:hover{color:var(--accent);transform:translateY(-3px)}.side-items svg{width:22px;height:22px}.side-right .side-items{writing-mode:vertical-rl;position:relative}.side-right .side-items:after{position:absolute;top:0;bottom:-75px;width:1px;height:auto;margin-top:0}.side-right .side-items a{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--slate)}main{position:relative;padding:0 100px;max-width:1400px;margin:0 auto}#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:80px}.hero-intro{font-family:var(--font-mono);color:var(--accent);font-size:16px;margin-bottom:30px;opacity:0;animation:fadeUp .6s .2s forwards}.hero-name{font-size:clamp(40px,8vw,80px);font-weight:600;color:var(--slate-light);line-height:1.1;margin-bottom:10px;letter-spacing:-.02em;opacity:0;animation:fadeUp .6s .3s forwards}.hero-tagline{font-size:clamp(32px,7vw,70px);font-weight:600;color:var(--slate);line-height:1.1;margin-bottom:30px;letter-spacing:-.02em;opacity:0;animation:fadeUp .6s .4s forwards}.hero-tagline .cn{font-family:var(--font-serif);font-weight:500}.hero-desc{font-size:19px;max-width:560px;color:var(--slate);line-height:1.7;margin-bottom:50px;opacity:0;animation:fadeUp .6s .5s forwards}.hero-desc a{color:var(--accent);text-decoration:none;position:relative}.hero-desc a:after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s}.hero-desc a:hover:after{transform:scaleX(1);transform-origin:left}.hero-cta{display:inline-flex;align-items:center;gap:10px;padding:18px 28px;border:1px solid var(--accent);border-radius:4px;color:var(--accent);text-decoration:none;font-family:var(--font-mono);font-size:14px;width:fit-content;transition:background .2s;opacity:0;animation:fadeUp .6s .6s forwards}.hero-cta:hover{background:var(--accent-dim)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}.reveal.visible{opacity:1;transform:translateY(0)}section{padding:100px 0;max-width:1000px;margin:0 auto}.section-heading{display:flex;align-items:center;gap:16px;font-size:clamp(26px,5vw,32px);color:var(--slate-light);font-weight:600;margin-bottom:50px;letter-spacing:-.01em}.section-heading .num{font-family:var(--font-mono);color:var(--accent);font-size:20px;font-weight:400}.section-heading:after{content:"";flex:1;height:1px;background:var(--slate-dark);max-width:300px;margin-left:20px}#about .inner{display:grid;grid-template-columns:3fr 2fr;gap:50px}#about p{font-size:17px;margin-bottom:18px;line-height:1.7}#about p strong{color:var(--slate-light);font-weight:500}.skills-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin-top:30px;list-style:none}.skills-list li{font-family:var(--font-mono);font-size:13px;position:relative;padding-left:20px;color:var(--slate)}.skills-list li:before{content:"▹";position:absolute;left:0;color:var(--accent);font-size:14px}.avatar-box{position:relative;max-width:300px;margin-top:30px}.avatar{position:relative;z-index:2;width:100%;aspect-ratio:1;border-radius:50%;background:var(--bg-light);overflow:hidden;box-shadow:0 0 0 1px #ffffff1f}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.project{display:flex;align-items:flex-start;gap:50px;margin-bottom:100px}.project:last-child{margin-bottom:0}.project .project-content{flex:1 1 auto;min-width:0}.project .project-image{flex:0 0 280px}.project.reverse{flex-direction:row-reverse}.project.reverse .project-content{text-align:right}.project.reverse .project-tech,.project.reverse .project-links,.project.reverse .project-header{justify-content:flex-end}.project-content{position:relative;z-index:2}.project-overline{font-family:var(--font-mono);color:var(--accent);font-size:13px;margin-bottom:8px;letter-spacing:.02em}.project-title{font-size:26px;color:var(--slate-light);font-weight:600;margin-bottom:20px;letter-spacing:-.01em}.project-title a{color:inherit;text-decoration:none;transition:color .2s}.project-title a:hover{color:var(--accent)}.project-header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}.project.reverse .project-header{justify-content:flex-end}.project-header .project-title{margin-bottom:0}.project-domain{font-family:var(--font-mono);font-size:13px;color:var(--accent);text-decoration:none;position:relative;display:inline-flex;align-items:center;gap:4px;transition:opacity .2s}.project-domain:after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s}.project-domain:hover:after{transform:scaleX(1);transform-origin:left}.project-domain svg{width:11px;height:11px}.project-description{background:var(--bg-light);padding:22px;border-radius:4px;font-size:14.5px;line-height:1.65;box-shadow:0 10px 30px -15px #020c1bb3;margin-bottom:18px}.project-tech{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--font-mono);font-size:12.5px;color:var(--slate);margin-bottom:18px;list-style:none}.project-links{display:flex;gap:15px}.project-links a{color:var(--slate-light);transition:color .2s,transform .2s}.project-links a:hover{color:var(--accent);transform:translateY(-2px)}.project-links svg{width:20px;height:20px}.project-image{display:flex;justify-content:center;align-items:center}.carousel{position:relative;width:100%;max-width:260px;margin:0 auto}.phone-frame{position:relative;width:100%;aspect-ratio:9 / 18.5;background:#0a0a0a;border-radius:36px;padding:10px;box-shadow:0 0 0 1.5px #2a2a2a,0 0 0 2.5px #000,0 25px 50px -12px #0009,0 10px 30px -10px #64ffda14;transition:transform .4s cubic-bezier(.175,.885,.32,1.275)}.carousel:hover .phone-frame{transform:translateY(-6px)}.phone-screen{width:100%;height:100%;border-radius:28px;overflow:hidden;position:relative;background:#000}.slide{position:absolute;inset:0;opacity:0;transition:opacity .4s}.slide.active{opacity:1}.slide img{width:100%;height:100%;object-fit:fill;display:block}.arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:#112240e6;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);cursor:pointer;opacity:0;transition:opacity .3s,background .2s,transform .2s;z-index:20;backdrop-filter:blur(4px);font-family:var(--font-mono);font-size:14px}.carousel:hover .arrow{opacity:1}.arrow:hover{background:var(--accent);color:var(--bg)}.arrow.prev{left:-18px}.arrow.next{right:-18px}.arrow:active{transform:translateY(-50%) scale(.95)}.dots{display:flex;justify-content:center;gap:8px;margin-top:20px}.dot{width:6px;height:6px;border-radius:50%;background:var(--slate-dark);cursor:pointer;transition:background .2s,width .2s;border:none;padding:0}.dot.active{background:var(--accent);width:20px;border-radius:3px}.now-timeline{position:relative;padding-left:2px}.now-timeline:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--slate-dark)}.now-item{position:relative;padding-left:45px;padding-bottom:40px}.now-item:last-child{padding-bottom:0}.now-item:before{content:"";position:absolute;left:5px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--slate-dark);z-index:2;transition:border-color .3s}.now-item.active:before{border-color:var(--accent);box-shadow:0 0 0 4px #64ffda1a}.now-item.active:after{content:"";position:absolute;left:9px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;z-index:3}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}.now-status{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--accent);padding:3px 10px;border:1px solid var(--accent);border-radius:3px;margin-bottom:12px;text-transform:uppercase}.now-item:not(.active) .now-status{color:var(--slate);border-color:var(--slate-dark)}.now-title{font-size:20px;color:var(--slate-light);font-weight:600;margin-bottom:10px;letter-spacing:-.01em}.now-desc{font-size:15px;line-height:1.7;color:var(--slate)}.now-desc strong{color:var(--slate-light);font-weight:500}#travel .placeholder{border:1px dashed var(--slate-dark);border-radius:6px;padding:80px 40px;color:var(--slate);text-align:center}#travel .placeholder .title{font-family:var(--font-mono);color:var(--accent);font-size:14px;margin-bottom:20px}#travel .placeholder .desc{font-size:16px;line-height:1.8;max-width:500px;margin:0 auto}#travel .placeholder .desc strong{color:var(--slate-light);font-weight:500}#contact{max-width:700px;margin:0 auto;text-align:center;padding:100px 0 150px}.contact-overline{font-family:var(--font-mono);color:var(--accent);font-size:14px;margin-bottom:20px}.contact-title{font-size:clamp(36px,6vw,60px);color:var(--slate-light);font-weight:600;margin-bottom:20px;letter-spacing:-.02em}.contact-desc{font-size:17px;line-height:1.7;margin-bottom:50px}.contact-btn{display:inline-block;padding:20px 40px;border:1px solid var(--accent);border-radius:4px;color:var(--accent);text-decoration:none;font-family:var(--font-mono);font-size:15px;transition:background .2s}.contact-btn:hover{background:var(--accent-dim)}footer{text-align:center;padding:20px 20px 40px;font-family:var(--font-mono);font-size:12px;color:var(--slate)}footer a{color:var(--slate);text-decoration:none}@media(max-width:1099px){main{padding:0 50px}.side-left,.side-right{display:none}.project{gap:40px}.project .project-image{flex:0 0 240px}.carousel{max-width:240px}}@media(max-width:699px){nav{padding:0 20px}main{padding:0 20px}#hero{padding-top:60px}.nav-links{gap:16px}.nav-links li:nth-child(-n+4){display:none}#about .inner{grid-template-columns:1fr;gap:30px}.avatar-box{margin:30px auto 0}section{padding:60px 0}.project,.project.reverse{flex-direction:column;gap:30px;margin-bottom:60px}.project.reverse .project-content{text-align:left}.project.reverse .project-tech,.project.reverse .project-links,.project.reverse .project-header{justify-content:flex-start}.project .project-image{flex:0 0 auto;width:100%}.carousel{max-width:240px}.arrow{opacity:1}.arrow.prev{left:-14px}.arrow.next{right:-14px}.project-header{flex-direction:column;gap:6px;align-items:flex-start!important}.project-description{font-size:14px;padding:18px}}