:root{--bg-primary: #0a0a14;--bg-secondary: #12121e;--text-primary: #ffffff;--text-secondary: #a8b2d1;--border-color: #2a2a3e;--accent: #3b82f6;--neon-blue: #00f3ff;--neon-yellow: #ffeb3b;--neon-red: #ff0051;--neon-purple: #b026ff;--cyber-pink: #ff006e}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;position:relative}h1,h2,h3,.header-title h1,.section-title,.project-name{font-family:Orbitron,sans-serif}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(0,243,255,.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(176,38,255,.05) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(255,0,81,.03) 0%,transparent 50%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,243,255,.03) 0px,transparent 1px,transparent 2px,rgba(0,243,255,.03) 3px);pointer-events:none;z-index:1;animation:scanline 8s linear infinite}@keyframes scanline{0%{transform:translateY(0)}to{transform:translateY(100%)}}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:2}.geometric-bg{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.shard{position:absolute;background:linear-gradient(135deg,var(--neon-blue) 0%,var(--neon-purple) 100%);opacity:.05;animation:float 20s infinite}.shard:nth-child(1){width:200px;height:200px;top:10%;left:5%;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);animation-delay:0s}.shard:nth-child(2){width:150px;height:150px;top:60%;right:10%;clip-path:polygon(30% 0%,70% 0%,100% 100%,0% 100%);animation-delay:-5s}.shard:nth-child(3){width:180px;height:180px;bottom:20%;left:50%;clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);animation-delay:-10s}@keyframes float{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.header{padding:6rem 2rem 4rem;text-align:center;border-bottom:1px solid var(--border-color);background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);position:relative;overflow:hidden}.header:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--neon-blue) 25%,var(--neon-purple) 50%,var(--neon-red) 75%,transparent 100%);animation:pulse-border 3s ease-in-out infinite}@keyframes pulse-border{0%,to{opacity:.5}50%{opacity:1}}.header-content{max-width:900px;margin:0 auto;position:relative}.header-title{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem}.header-title h1{font-size:4rem;font-weight:900;letter-spacing:-.02em;background:linear-gradient(135deg,var(--neon-blue) 0%,var(--neon-purple) 50%,var(--cyber-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 40px rgba(0,243,255,.3);animation:glitch 5s infinite;position:relative}@keyframes glitch{0%,90%,to{transform:translate(0);text-shadow:0 0 40px rgba(0,243,255,.3)}92%{transform:translate(-2px,2px);text-shadow:2px 0 var(--neon-red),-2px 0 var(--neon-blue)}94%{transform:translate(2px,-2px);text-shadow:-2px 0 var(--neon-red),2px 0 var(--neon-blue)}96%{transform:translate(0);text-shadow:0 0 40px rgba(0,243,255,.3)}}.sparkle-icon{color:var(--neon-yellow);animation:sparkle 2s ease-in-out infinite;filter:drop-shadow(0 0 10px var(--neon-yellow))}@keyframes sparkle{0%,to{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.7;transform:scale(1.2) rotate(180deg)}}.header-subtitle{font-size:1.5rem;color:var(--text-secondary);margin-bottom:2.5rem;text-transform:uppercase;letter-spacing:.15em;font-weight:500}.social-links{display:flex;gap:1rem;justify-content:center}.social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--bg-secondary);color:var(--text-secondary);border:2px solid var(--border-color);clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);transition:all .3s ease;position:relative}.social-link:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));opacity:0;transition:opacity .3s ease}.social-link:hover{color:var(--text-primary);border-color:var(--neon-blue);transform:translateY(-4px) scale(1.05);box-shadow:0 8px 20px #00f3ff4d}.social-link:hover:before{opacity:.1}.main{flex:1;padding:4rem 2rem;position:relative}.container{max-width:1200px;margin:0 auto}.section-title{font-size:2.5rem;margin-bottom:2rem;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:.1em;background:linear-gradient(135deg,var(--neon-blue) 0%,var(--neon-purple) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:100px;height:3px;background:linear-gradient(90deg,transparent,var(--neon-blue),transparent)}.projects-grid{display:flex;flex-direction:column;gap:2.5rem;margin-top:3rem}.project-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem;background:var(--bg-secondary);border:2px solid var(--border-color);text-decoration:none;color:inherit;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));min-height:260px;align-items:center}.project-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--card-color) 0%,transparent 100%);opacity:0;transition:opacity .4s ease;z-index:0}.project-card:after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,var(--card-color),transparent);opacity:0;z-index:-1;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));transition:opacity .4s ease}.project-card:hover:before{opacity:.05}.project-card:hover:after{opacity:1}.project-card:hover{transform:translateY(-8px);border-color:var(--card-color);box-shadow:0 20px 60px #00000080,0 0 40px var(--card-glow)}.project-card:nth-child(2n){grid-template-columns:1fr 1fr}.project-card:nth-child(2n) .project-card-left{order:2}.project-card:nth-child(2n) .project-card-right{order:1}.project-card-left,.project-card-right{position:relative;z-index:1}.project-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.project-emoji{font-size:2.5rem;filter:drop-shadow(0 0 20px var(--card-glow))}.project-link-icon{color:var(--text-secondary);transition:all .3s ease;margin-left:auto}.project-card:hover .project-link-icon{color:var(--card-color);transform:translate(6px,-6px);filter:drop-shadow(0 0 10px var(--card-color))}.project-name{font-size:1.8rem;margin-bottom:.75rem;color:var(--text-primary);font-weight:900;text-transform:uppercase;letter-spacing:.05em}.project-description{color:var(--text-secondary);margin-bottom:.75rem;line-height:1.6;font-size:.95rem}.project-description-cn{color:var(--text-secondary);margin-bottom:1.25rem;line-height:1.6;font-size:.85rem;opacity:.8}.project-tech{display:flex;flex-wrap:wrap;gap:.75rem}.tech-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:var(--bg-primary);border:1px solid var(--card-color);font-size:.8rem;color:var(--card-color);text-transform:uppercase;letter-spacing:.05em;font-weight:600;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all .3s ease}.project-card:hover .tech-tag{background:var(--card-color);color:var(--bg-primary);box-shadow:0 0 15px var(--card-glow)}.project-visual{position:relative;height:100%;min-height:200px;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border:1px solid var(--card-color);clip-path:polygon(15px 0%,100% 0%,calc(100% - 15px) 100%,0% 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}.project-visual:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(45deg,transparent 48%,var(--card-color) 48%,var(--card-color) 52%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--card-color) 48%,var(--card-color) 52%,transparent 52%);background-size:50px 50px;opacity:.05;animation:grid-move 20s linear infinite}@keyframes grid-move{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.project-visual-emoji{font-size:5rem;filter:drop-shadow(0 0 30px var(--card-glow));animation:float-emoji 6s ease-in-out infinite}@keyframes float-emoji{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-15px) scale(1.05)}}.footer{padding:3rem 2rem;text-align:center;border-top:2px solid var(--border-color);color:var(--text-secondary);font-size:.9rem;background:var(--bg-secondary);position:relative}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--neon-purple) 25%,var(--neon-blue) 50%,var(--neon-red) 75%,transparent 100%)}.footer p{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.1em}.heart-icon{color:var(--neon-red);animation:heartbeat 1.5s ease-in-out infinite;filter:drop-shadow(0 0 10px var(--neon-red))}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.footer-copy{opacity:.6;font-size:.8rem}@media(max-width:1024px){.project-card{grid-template-columns:1fr;gap:2rem}.project-card:nth-child(2n) .project-card-left,.project-card:nth-child(2n) .project-card-right{order:unset}.project-visual{min-height:200px}}@media(max-width:768px){.header{padding:4rem 1.5rem 3rem}.header-title h1{font-size:2.5rem}.header-subtitle{font-size:1.1rem}.section-title{font-size:1.8rem}.project-card{padding:1.5rem;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}.project-card:after{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}.project-name{font-size:1.4rem}.project-description{font-size:.9rem}.project-visual{min-height:150px}.project-visual-emoji{font-size:3.5rem}}@media(max-width:480px){.header-title h1{font-size:2rem}.header-subtitle{font-size:.9rem}.project-name{font-size:1.2rem}.social-link{width:40px;height:40px}}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden}#root{width:100%;min-height:100vh}