:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #8EACCD;--text-dark: #1F2937;--text-light: #4B5563;--bg-color: #FFFFFF;--card-bg: #FFFFFF;--border-color: #E5E7EB;--gradient-start: #A0C3D2;--gradient-end: #F5D5B5;--leaf-color: #E1EAD1;--glow-blue: #B0C4DE;--glow-orange: #F5D5B5}body{font-family:Inter,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.8;color:var(--text-light);background-color:var(--bg-color);width:100vw;overflow-x:hidden;position:relative}body:before,body:after{content:"";position:fixed;z-index:-1;opacity:.1;pointer-events:none}body:before{top:5%;left:2%;width:200px;height:280px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280'%3E%3Cpath d='M100 0C130 10 160 35 180 60C190 85 190 110 170 140C150 170 120 190 100 280C80 190 50 170 30 140C10 110 10 85 20 60C40 35 70 10 100 0Z' fill='%23E1EAD1'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transform:rotate(-15deg)}body:after{bottom:5%;right:2%;width:180px;height:250px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280'%3E%3Cpath d='M100 0C130 10 160 35 180 60C190 85 190 110 170 140C150 170 120 190 100 280C80 190 50 170 30 140C10 110 10 85 20 60C40 35 70 10 100 0Z' fill='%23E1EAD1'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transform:rotate(20deg)}.app{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}.top-nav{width:100vw;background-color:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:1000;display:flex;justify-content:center;padding:20px 0}.top-nav ul{list-style:none;display:flex;gap:60px;align-items:center}.top-nav button{background:none;border:none;padding:10px 20px;font-size:16px;font-weight:400;color:var(--text-light);cursor:pointer;border-radius:8px;transition:all .3s ease;position:relative}.top-nav button:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:0;height:2px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));transition:width .3s ease}.top-nav button:hover{color:var(--primary-color)}.top-nav button:hover:after{width:60%}.top-nav button.active{color:var(--primary-color);font-weight:500}.top-nav button.active:after{width:60%}.page{width:100vw;flex:1;padding:60px 0;background-color:var(--bg-color);display:flex;justify-content:center}.home-page,.projects-page,.self-page{background-color:var(--bg-color);width:100vw}.container{width:100%;padding:0 40px;display:flex;flex-direction:column;align-items:center}.profile{width:100%;display:flex;align-items:center;justify-content:center;gap:100px;padding:60px 0;margin-bottom:60px}.intro{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center}.intro h1{font-size:42px;margin-bottom:15px;color:var(--text-dark);font-weight:700;line-height:1.2;text-align:center}.intro .tagline{font-size:18px;color:var(--primary-color);margin-bottom:20px;font-weight:600;text-align:center}.intro .description{font-size:15px;color:var(--text-light);margin-bottom:30px;line-height:1.8;text-align:center}.profile-buttons{display:flex;gap:20px;justify-content:center}.btn-primary{background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-primary:hover{background-color:#7a98b8;transform:translateY(-2px);box-shadow:0 4px 12px #8eaccd4d}.btn-secondary{background-color:#fff;color:var(--primary-color);border:1px solid var(--primary-color);padding:12px 24px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-secondary:hover{background-color:#8eaccd0d;transform:translateY(-2px)}.avatar{flex-shrink:0;position:relative;padding:40px}.avatar:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-60%,-60%);width:400px;height:320px;background:radial-gradient(ellipse,rgba(176,196,222,.5),transparent 70%);border-radius:50%;z-index:-1;filter:blur(20px)}.avatar:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-40%);width:380px;height:300px;background:radial-gradient(ellipse,rgba(245,213,181,.5),transparent 70%);border-radius:50%;z-index:-1;filter:blur(20px)}.avatar-frame{position:relative;max-width:280px;max-height:280px;border-radius:20px;overflow:hidden;box-shadow:0 8px 30px #0000001a;transition:all .3s ease;z-index:1}.avatar-frame:hover{transform:scale(1.03);box-shadow:0 12px 40px #00000026}.avatar-frame img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block}.avatar-badge{position:absolute;bottom:20px;right:20px;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;box-shadow:0 4px 6px #0000001a;z-index:2}.education-simple{width:100%;margin-bottom:60px;display:flex;flex-direction:column;align-items:center}.education-simple h2{font-size:28px;margin-bottom:30px;color:var(--text-dark);font-weight:700;position:relative;padding-bottom:10px}.education-simple h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));border-radius:2px}.education-content{text-align:center;line-height:2}.education-content p{font-size:15px;color:var(--text-light);margin-bottom:5px}.education-content strong{color:var(--text-dark);font-weight:600}.skills{width:100%;margin-bottom:60px;display:flex;flex-direction:column;align-items:center}.skills h2{font-size:28px;margin-bottom:30px;color:var(--text-dark);font-weight:700;position:relative;padding-bottom:10px}.skills h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));border-radius:2px}.skill-cloud{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.skill-tag{padding:8px 18px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;font-size:14px;color:var(--text-light);transition:all .3s ease;cursor:pointer}.skill-tag:hover{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 12px #8eaccd4d}.projects-page h2,.self-page h2{font-size:28px;margin-bottom:50px;color:var(--text-dark);font-weight:700;text-align:center;position:relative;padding-bottom:15px}.projects-page h2:after,.self-page h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));border-radius:2px}.vertical-timeline{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px;padding:30px;align-items:start}.vt-item{position:relative;margin-bottom:20px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);transform:rotate(var(--rotate, 1deg))}.vt-item:not(.expanded):hover{transform:rotate(var(--rotate, 1deg)) scale(1.05);z-index:5}.vt-item:not(.expanded):hover .vt-content{box-shadow:0 15px 25px -5px #0000001a,0 8px 10px -6px #0000000d}.vt-tooltip{position:absolute;top:-35px;left:50%;transform:translate(-50%) translateY(10px);background:#000000b3;color:#fff;font-size:12px;padding:6px 12px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .3s ease;z-index:20}.vt-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000000b3}.vt-item:not(.expanded):hover .vt-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.vt-item.expanded .vt-tooltip{display:none}.vt-item:nth-child(1){--rotate: -1.5deg}.vt-item:nth-child(2){--rotate: 1.8deg}.vt-item:nth-child(3){--rotate: -.8deg}.vt-item:nth-child(4){--rotate: 1.2deg}.vt-item:nth-child(5){--rotate: -1.2deg}.vt-item:nth-child(6){--rotate: .5deg}.vt-item:nth-child(7){--rotate: -1.8deg}.vt-item:nth-child(8){--rotate: 1.5deg}.vt-item:nth-child(odd) .vt-content{background:linear-gradient(135deg,#e0f2fe,#bae6fd)}.vt-item:nth-child(2n) .vt-content{background:linear-gradient(135deg,#fff7ed,#ffedd5)}.vt-item:before{content:"";position:absolute;top:-12px;left:50%;transform:translate(-50%);width:20px;height:20px;background:radial-gradient(circle at 30% 30%,#ff6b6b,#e53935 60%,#c62828);border-radius:50%;z-index:10;box-shadow:0 2px 4px #00000040,inset 0 -2px 4px #0003,inset 0 2px 4px #ffffff4d;transition:all .3s ease}.vt-item:after{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:16px;height:6px;background:radial-gradient(ellipse,rgba(0,0,0,.12),transparent);z-index:9;transition:all .3s ease}.vt-content{position:relative;width:100%;height:280px;padding:40px 20px 20px;border:none;border-radius:4px;box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -2px #00000008;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}.vt-content h3{font-size:16px;font-weight:600;color:#475569;margin:0;transition:all .3s ease;line-height:1.5}.vt-content .vt-date,.vt-content p{display:none;transition:all .3s ease}.vt-item.expanded{transform:rotate(0)!important;grid-column:1 / -1;margin:20px 0;cursor:default}.vt-item.expanded:before,.vt-item.expanded:after{display:none}.vt-item.expanded .vt-content{background:#fff!important;height:auto;padding:30px;border:none;box-shadow:0 10px 25px -5px #00000014,0 4px 10px -2px #0000000a;text-align:left;align-items:flex-start;border-radius:8px}.vt-item.expanded .vt-content .vt-date,.vt-item.expanded .vt-content p{display:block}.vt-item.expanded .vt-content h3{font-size:18px;margin-bottom:10px;color:#475569}.vt-node{display:none}.vt-item.expanded .vt-node{display:block;position:absolute;left:20px;top:40px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));border:3px solid white;box-shadow:0 0 0 3px var(--primary-color);z-index:1}.vt-date{display:inline-block;font-size:13px;color:var(--primary-color);font-weight:500;margin-bottom:8px;padding:4px 12px;background:#8eaccd1a;border-radius:20px}.vt-content p{font-size:14px;color:var(--text-light);line-height:1.7;margin-bottom:10px}.vt-content p:last-child{margin-bottom:0}@media(max-width:768px){.vertical-timeline{grid-template-columns:1fr;gap:30px;padding:20px}.vt-item.expanded{grid-column:1}.vt-content{height:240px}.vt-item:nth-child(1){--rotate: -.8deg}.vt-item:nth-child(2){--rotate: 1deg}.vt-item:nth-child(3){--rotate: -.5deg}.vt-item:nth-child(4){--rotate: .8deg}}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{position:relative;background:#fff;border-radius:12px;padding:40px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px #0003;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-close{position:absolute;top:15px;right:20px;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 8px #00000026;transition:all .3s ease}.modal-close:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.modal-image-container{display:flex;flex-direction:column;align-items:center;gap:30px}.modal-image-container h3{font-size:24px;color:var(--text-dark);margin:0}.modal-image-container img{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 10px 25px #0000001a;object-fit:contain}.resume-modal{padding:20px;display:flex;justify-content:center;align-items:center}.resume-image{max-width:90vw;max-height:85vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px #00000026}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;width:100%;max-width:900px}.portfolio-item{display:flex;flex-direction:column;align-items:center;gap:10px}.portfolio-item img{width:100%;height:200px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease}.portfolio-item img:hover{transform:scale(1.05)}.portfolio-item p{font-size:14px;color:var(--text-light);margin:0;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page{animation:fadeIn .5s ease-out}@media(max-width:768px){body:before,body:after,.app:before,.app:after{display:none}.top-nav ul{gap:30px}.top-nav button{padding:8px 16px;font-size:14px}.profile{flex-direction:column;text-align:center;gap:50px;padding:40px 0}.intro{order:2;text-align:center;display:flex;flex-direction:column;align-items:center}.intro h1{font-size:28px;text-align:center}.intro .tagline,.intro .description{text-align:center}.avatar{order:1;padding:20px}.avatar:before,.avatar:after{width:280px;height:220px}.avatar-frame{width:220px;height:220px}.profile-buttons{justify-content:center}.container{padding:0 20px}.page{padding:40px 0}.vertical-timeline{padding-left:20px}.vt-item{padding-left:30px}.vt-node{left:-26px}.vt-item.highlight .vt-node{left:-28px}.vt-content{padding:20px}}@media(min-width:769px)and (max-width:1024px){.container{padding:0 30px}.profile{gap:60px}.intro h1{font-size:36px}.avatar-frame{max-width:260px;max-height:260px}}