.app{min-height:100vh}:root{--deep-space: #030108;--bg-image: url(https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=1920&q=80)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:var(--deep-space);overflow-x:hidden;font-family:"Noto Serif SC",serif}.top-bar{position:fixed;top:0;left:0;right:0;height:60px;background:#030108d9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:300;transition:background .3s ease,box-shadow .3s ease}.top-bar.scrolled{background:#030108f2;box-shadow:0 2px 20px #0000004d}.top-bar-left{display:flex;align-items:center;gap:32px}.top-logo{font-family:ZCOOL XiaoWei,serif;font-size:1.3rem;color:#fff;text-decoration:none;letter-spacing:.15em}.top-nav{display:flex;gap:8px}.top-link{color:#ffffffb3;text-decoration:none;font-size:.9rem;padding:8px 16px;border-radius:8px;transition:all .2s ease;letter-spacing:.05em}.top-link:hover{color:#fff;background:#ffffff1a}.top-link.active{color:#fff;background:#ffffff26}.top-bar-right{display:flex;align-items:center;gap:16px}.hamburger{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer;padding:0;background:none;border:none}.hamburger span{display:block;width:100%;height:2px;background:#fffc;border-radius:2px;transition:all .3s ease}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;background:#030108fa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:20px;z-index:299;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease}.mobile-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.mobile-menu .top-link{display:block;padding:14px 16px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.05)}.mobile-menu .top-link:last-child{border-bottom:none}@media (max-width: 768px){.top-nav{display:none}.hamburger{display:flex}.mobile-menu{display:block}}.page-container{min-height:100vh;max-width:900px;margin:0 auto;padding:80px 40px 60px}.about-hero{text-align:center;padding:60px 0 40px}.about-avatar{margin-bottom:24px}.avatar-placeholder{width:120px;height:120px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;margin:0 auto;border:2px solid rgba(255,255,255,.2)}.avatar-placeholder svg{width:60px;height:60px}.about-name{font-family:ZCOOL XiaoWei,serif;font-size:2.5rem;color:#fff;margin-bottom:8px;letter-spacing:.1em}.about-title{font-size:1rem;color:#fff9;letter-spacing:.2em}.about-section{margin-bottom:50px}.section-title{font-family:ZCOOL XiaoWei,serif;font-size:1.3rem;color:#ffffffe6;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:.1em}.about-intro{font-size:1rem;line-height:1.8;color:#ffffffbf}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.skill-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;transition:all .3s ease}.skill-card:hover{background:#ffffff14;transform:translateY(-2px)}.skill-icon{width:40px;height:40px;margin-bottom:16px;color:#ffffffb3}.skill-icon svg{width:100%;height:100%}.skill-card h3{font-size:1rem;color:#fff;margin-bottom:8px}.skill-card p{font-size:.85rem;color:#fff9}.education-list{display:flex;flex-direction:column;gap:20px}.education-item{display:flex;gap:24px;padding:20px;background:#ffffff08;border-radius:10px;border:1px solid rgba(255,255,255,.05)}.edu-year{font-size:.85rem;color:#ffffff80;min-width:100px}.edu-content h3{font-size:1rem;color:#fff;margin-bottom:4px}.edu-content p{font-size:.9rem;color:#fff9}@media (max-width: 600px){.page-container{padding-left:20px;padding-right:20px}.education-item{flex-direction:column;gap:8px}}.portfolio-header{text-align:center;padding:40px 0 50px}.page-title{font-family:ZCOOL XiaoWei,serif;font-size:2.5rem;color:#fff;margin-bottom:12px;letter-spacing:.15em}.page-subtitle{font-size:1rem;color:#ffffff80;letter-spacing:.1em}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding-bottom:60px}.portfolio-item{border-radius:16px;overflow:hidden;background:#ffffff08;border:1px solid rgba(255,255,255,.08);transition:all .3s ease}.portfolio-item:hover{transform:translateY(-4px);border-color:#ffffff26;box-shadow:0 20px 40px #0000004d}.portfolio-image{position:relative;width:100%;padding-top:66.67%;overflow:hidden}.portfolio-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.portfolio-item:hover .portfolio-image img{transform:scale(1.08)}.portfolio-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(3,1,8,.95) 0%,rgba(3,1,8,.6) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0;transition:opacity .3s ease}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-overlay h3{font-size:1.1rem;color:#fff;margin-bottom:6px;letter-spacing:.05em}.portfolio-overlay p{font-size:.85rem;color:#ffffffb3;margin-bottom:12px}.view-btn{display:inline-block;padding:8px 20px;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:20px;color:#fff;font-size:.85rem;cursor:pointer;transition:all .2s ease;width:fit-content}.view-btn:hover{background:#ffffff40}@media (max-width: 600px){.portfolio-grid{grid-template-columns:1fr;gap:16px}}.contact-header{text-align:center;padding:40px 0 50px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-bottom:60px}.contact-form-section .section-title,.contact-info-section .section-title{font-family:ZCOOL XiaoWei,serif;font-size:1.3rem;color:#ffffffe6;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:.1em}.contact-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:.9rem;color:#ffffffb3}.form-group input,.form-group textarea{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 16px;font-size:1rem;color:#fff;font-family:inherit;transition:all .2s ease}.form-group input::placeholder,.form-group textarea::placeholder{color:#ffffff4d}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#ffffff4d;background:#ffffff14}.form-group textarea{resize:vertical;min-height:120px}.submit-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease;font-family:inherit}.submit-btn:hover{background:#ffffff26;border-color:#ffffff4d}.submit-btn svg{width:18px;height:18px}.contact-info-list{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.contact-info-item{display:flex;align-items:center;gap:16px;padding:16px;background:#ffffff08;border-radius:10px;border:1px solid rgba(255,255,255,.05)}.contact-info-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border-radius:10px}.contact-info-icon svg{width:20px;height:20px;fill:#ffffffb3}.contact-info-content{display:flex;flex-direction:column;gap:2px}.contact-info-label{font-size:.8rem;color:#ffffff80}.contact-info-value{font-size:.95rem;color:#ffffffe6}.social-title{font-size:1rem;color:#fffc;margin-bottom:16px}.social-links{display:flex;gap:12px}.social-link{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#ffffffb3;transition:all .2s ease}.social-link:hover{background:#ffffff1a;color:#fff;transform:translateY(-2px)}.social-link svg{width:20px;height:20px}@media (max-width: 768px){.contact-grid{grid-template-columns:1fr;gap:40px}}.parallax-container{position:fixed;top:50px;bottom:-50px;left:-50px;right:-50px;overflow:hidden}.milky-way{position:absolute;width:100%;height:100%;background:radial-gradient(ellipse at 30% 20%,rgba(88,28,135,.25) 0%,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(29,78,216,.15) 0%,transparent 40%),radial-gradient(ellipse at 50% 50%,rgba(20,20,35,.5) 0%,var(--deep-space) 100%),var(--bg-image) center/cover no-repeat;filter:brightness(.5) contrast(1.1) saturate(.8);transition:transform .1s ease-out}.nebula-layer{position:absolute;width:100%;height:100%;background:radial-gradient(ellipse at 20% 70%,rgba(128,0,128,.12) 0%,transparent 40%),radial-gradient(ellipse at 80% 30%,rgba(0,50,150,.1) 0%,transparent 35%);transition:transform .12s ease-out}.stars-far{position:absolute;width:100%;height:100%;transition:transform .08s ease-out}.star-dot{position:absolute;background:#fff;border-radius:50%}.stars-near{position:absolute;width:100%;height:100%;transition:transform .05s ease-out}.near-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;cursor:pointer}.constellation-layer{position:absolute;width:100%;height:100%;transition:transform .06s ease-out;display:flex;align-items:center;justify-content:center}.constellation-container{position:relative;transition:all .6s cubic-bezier(.4,0,.2,1)}.constellation-group{position:relative}.constellation-star{position:absolute;transform:translate(-50%,-50%);z-index:10}.constellation-star .star{position:relative;background:#fff;border-radius:50%;transition:all .3s ease}.constellation-star.mag1 .star{width:6px;height:6px;box-shadow:0 0 15px 3px #fffc}.constellation-star.mag2 .star{width:5px;height:5px;box-shadow:0 0 10px 2px #fff9}.constellation-star.mag3 .star{width:4px;height:4px;box-shadow:0 0 6px 1.5px #ffffff80}.constellation-star.mag4 .star{width:3px;height:3px}.constellation-star:hover .star{transform:scale(2);box-shadow:0 0 20px 5px #fff!important}.constellation-star.red .star{background:#ff6b4a;box-shadow:0 0 15px 4px #ff6b4ae6}.constellation-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform-origin:left center;pointer-events:none;opacity:0;width:0;transition:width .6s ease-out,opacity .6s ease}.constellation-container:hover .constellation-line{opacity:1;width:var(--line-length)}.constellation-name{position:absolute;font-family:ZCOOL XiaoWei,serif;font-size:1.5rem;color:#fff6;letter-spacing:.3em;white-space:nowrap;transform:translate(-50%,-200%);transition:all .5s ease;pointer-events:none}.constellation-container:hover .constellation-name{color:#ffffffe6;text-shadow:0 0 20px rgba(255,255,255,.5)}.constellation-indicator{position:fixed;bottom:80px;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:100}.indicator-dot{width:8px;height:8px;border-radius:50%;background:#fff3;cursor:pointer;transition:all .3s ease}.indicator-dot.active{background:#ffffffe6;box-shadow:0 0 10px 2px #ffffff80}.indicator-dot:hover{background:#ffffff80}.scroll-hint{position:fixed;bottom:120px;left:50%;transform:translate(-50%);font-size:.75rem;color:#ffffff4d;letter-spacing:.2em;z-index:100;animation:hint-breathe 3s ease-in-out infinite}.meteor{position:absolute;pointer-events:none;z-index:5}.meteor-head{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;box-shadow:0 0 8px 2px #fffc}.meteor-tail{position:absolute;height:1.5px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.5),transparent);transform-origin:left center}@keyframes meteor-fly{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--move-x),var(--move-y))}}.center-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:100;pointer-events:none}.center-title{font-family:ZCOOL XiaoWei,serif;font-size:clamp(2.5rem,8vw,5rem);color:#ffffffbf;letter-spacing:.6em;text-shadow:0 0 60px rgba(255,255,255,.3)}.center-subtitle{font-size:1rem;color:#ffffff59;letter-spacing:1em;font-weight:300}@keyframes hint-breathe{0%,to{opacity:.2}50%{opacity:.5}}.cursor-tracker{position:fixed;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,transparent 40%,rgba(100,150,255,.015) 60%,transparent 80%);z-index:50}@media (max-width: 600px){.center-title{letter-spacing:.3em}.center-subtitle{letter-spacing:.5em}}.bg-switcher{position:fixed;right:20px;top:50%;transform:translateY(-50%) translate(120px);display:flex;flex-direction:column;gap:10px;z-index:200;opacity:0;pointer-events:none;transition:transform .3s ease-in-out,opacity .3s ease-in-out}.bg-switcher.visible{transform:translateY(-50%) translate(0);opacity:1;pointer-events:auto}.panel-toggle{position:fixed;right:0;top:50%;transform:translateY(-50%);width:24px;height:60px;background:#ffffff14;border-radius:8px 0 0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:201;transition:background .3s ease}.panel-toggle:hover{background:#ffffff26}.panel-toggle svg{width:12px;height:12px;fill:#f0f0f0;opacity:.6;transition:transform .3s ease-in-out,opacity .3s ease}.panel-toggle:hover svg{opacity:1}.panel-toggle.active svg{transform:rotate(180deg)}.bg-btn{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background-size:cover;background-position:center;cursor:pointer;transition:all .3s ease;opacity:.6}.bg-btn:hover{opacity:1;transform:scale(1.1);border-color:#fffc}.bg-btn.active{opacity:1;border-color:#fff;box-shadow:0 0 15px 3px #ffffff80}