*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-0: #06070d;--bg-1: #0b0d16;--surface: rgba(255, 255, 255, .025);--line: rgba(255, 255, 255, .07);--text-0: #eef2f8;--text-1: #9aa3b2;--text-2: #5c6572;--accent: #00d4ff;--accent-2: #8b7bff;--accent-3: #35ffc4;--accent-glow: rgba(0, 212, 255, .16);--font-display: "Orbitron", monospace;--font-body: "Noto Sans SC", sans-serif;--font-mono: "IBM Plex Mono", "SFMono-Regular", monospace}html{scroll-behavior:smooth}html,body{height:100%;background:var(--bg-0);color:var(--text-0);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;flex-direction:column}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}::selection{background:var(--accent);color:var(--bg-0)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-0)}::-webkit-scrollbar-thumb{background:#1a1f2e;border-radius:10px;border:2px solid var(--bg-0)}::-webkit-scrollbar-thumb:hover{background:#2a3145}.container{width:min(1140px,100% - 3rem);margin:0 auto}.section{position:relative;padding:7rem 0}.section-head{display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:3.5rem}.section-index{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);padding-top:.35rem;letter-spacing:.1em}.section-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;letter-spacing:.04em;line-height:1.15}.section-sub{font-family:var(--font-display);font-size:.72rem;letter-spacing:.42em;color:var(--text-2);margin-top:.5rem}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.reveal-visible{opacity:1;transform:translateY(0)}.top-nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#06070d8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav-brand{font-family:var(--font-display);font-weight:900;font-size:1.05rem;letter-spacing:.12em;color:var(--text-0);text-decoration:none}.nav-dot{color:var(--accent)}.nav-links{display:flex;gap:1.75rem}.nav-link{position:relative;font-size:.9rem;color:var(--text-1);text-decoration:none;letter-spacing:.06em;transition:color .3s}.nav-link:after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.16,1,.3,1)}.nav-link:hover{color:var(--text-0)}.nav-link:hover:after{transform:scaleX(1);transform-origin:left}.hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at center,#0d1b2ab8,#06070deb 72%),url(/bg.jpg) center / cover no-repeat;overflow:hidden}.hero .overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,212,255,.028) 2px,rgba(0,212,255,.028) 4px);pointer-events:none}.particles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.content{position:relative;z-index:2;text-align:center;padding:2rem}.hero-label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.4em;color:var(--accent);margin-bottom:1.75rem;text-transform:uppercase}.label-sep{color:var(--text-2);margin:0 .4em}.hero-name{font-size:clamp(3.4rem,12vw,8.5rem);font-weight:900;letter-spacing:.12em;line-height:1;color:var(--text-0);margin-bottom:.4rem;text-shadow:0 0 50px var(--accent-glow),0 0 110px var(--accent-glow);transition:transform .1s ease-out}.hero-en{font-family:var(--font-display);font-size:clamp(.9rem,2.4vw,1.5rem);letter-spacing:.7em;color:var(--text-1);margin-bottom:1.5rem}.hero-tagline{font-size:clamp(.9rem,1.6vw,1.05rem);color:var(--text-1);letter-spacing:.28em}.hero-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:3.5rem;text-decoration:none;color:var(--text-2);transition:color .3s}.hero-scroll:hover{color:var(--accent)}.scroll-text{font-size:.75rem;letter-spacing:.3em}.scroll-arrow{font-size:1rem;animation:float 2.2s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.glitch{position:relative}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.glitch:before{color:#0ff;z-index:-1;animation:glitch-1 2.6s infinite linear alternate-reverse}.glitch:after{color:#f0f;z-index:-2;animation:glitch-2 3.4s infinite linear alternate-reverse}@keyframes glitch-1{0%,90%,to{transform:none;opacity:.8}92%{transform:translate(-3px,2px);opacity:.6}94%{transform:translate(3px,-1px);opacity:.7}96%{transform:translate(-2px,2px);opacity:.5}98%{transform:translate(2px,-2px);opacity:.6}}@keyframes glitch-2{0%,82%,to{transform:none;opacity:0}86%{transform:translate(3px,-2px);opacity:.3}88%{transform:translate(-3px,1px);opacity:.2}91%{transform:translate(2px,-2px);opacity:.3}}.divider{width:180px;height:1px;margin:1.75rem auto;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.hero-corner{position:absolute;width:54px;height:54px;z-index:3;pointer-events:none;opacity:.5}.hero-corner-tl{top:90px;left:2rem;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}.hero-corner-br{bottom:70px;right:2rem;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}.works{background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,212,255,.05),transparent),var(--bg-0)}.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}.work-card{--accent: var(--accent);position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s}.work-card--wide{grid-column:1 / -1}.work-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 20px 50px -18px color-mix(in srgb,var(--accent) 40%,transparent)}.work-visual{position:relative;display:block;height:190px;overflow:hidden;text-decoration:none}.work-card--wide .work-visual{height:260px}.work-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(255,255,255,.07) 31px,rgba(255,255,255,.07) 32px),repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(255,255,255,.07) 31px,rgba(255,255,255,.07) 32px)}.work-index{position:absolute;bottom:-.4em;right:.5rem;font-family:var(--font-display);font-weight:900;font-size:4.6rem;line-height:1;color:#ffffff17;transition:color .45s}.work-card:hover .work-index{color:color-mix(in srgb,var(--accent) 30%,transparent)}.work-cat{position:absolute;top:1rem;left:1rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--accent);padding:.32rem .7rem;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px;background:#06070d59}.work-arrow{position:absolute;bottom:1rem;left:1.1rem;font-size:1.2rem;color:var(--text-0);opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1)}.work-card:hover .work-arrow{opacity:1;transform:translate(0)}.work-body{padding:1.4rem 1.5rem 1.6rem}.work-title{font-size:1.2rem;font-weight:700;letter-spacing:.02em;margin-bottom:.55rem}.work-desc{font-size:.9rem;line-height:1.7;color:var(--text-1);margin-bottom:1.1rem}.work-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem}.work-tags{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none}.work-tags li{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--text-1);padding:.22rem .6rem;border:1px solid var(--line);border-radius:5px}.work-year{font-family:var(--font-mono);font-size:.75rem;color:var(--text-2);white-space:nowrap}.about{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:start}.about-lead{font-size:1.35rem;font-weight:500;line-height:1.6;margin-bottom:1.5rem}.about-lead strong{color:var(--accent);font-weight:700}.about-text{font-size:.95rem;line-height:1.9;color:var(--text-1);margin-bottom:1.2rem}.about-stats{display:flex;gap:2.5rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line)}.stat{display:flex;flex-direction:column}.stat-num{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--text-0);line-height:1}.stat-unit{color:var(--accent);font-size:1.3rem}.stat-label{font-size:.78rem;color:var(--text-2);margin-top:.5rem;letter-spacing:.08em}.about-subtitle{font-size:.85rem;font-weight:500;letter-spacing:.14em;color:var(--text-0);margin-bottom:1.6rem}.skill-list{list-style:none;display:flex;flex-direction:column;gap:1.35rem}.skill-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.skill-name{font-size:.92rem;color:var(--text-0)}.skill-level{font-family:var(--font-mono);font-size:.75rem;color:var(--accent)}.skill-bar{height:5px;background:#ffffff0f;border-radius:999px;overflow:hidden}.skill-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform-origin:left;animation:grow 1.2s cubic-bezier(.16,1,.3,1) both}@keyframes grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.contact{background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(139,123,255,.06),transparent),var(--bg-0)}.contact-panel{border:1px solid var(--line);border-radius:18px;padding:3.5rem 2rem;text-align:center;background:var(--surface);position:relative;overflow:hidden}.contact-panel:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:260px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.contact-lead{font-size:1.05rem;color:var(--text-1);margin-bottom:1.5rem;letter-spacing:.06em}.contact-email{display:inline-block;font-family:var(--font-display);font-size:clamp(1.1rem,3.4vw,1.9rem);font-weight:700;letter-spacing:.05em;color:var(--text-0);text-decoration:none;padding-bottom:.3rem;border-bottom:1px solid var(--accent);transition:color .3s,text-shadow .3s}.contact-email:hover{color:var(--accent);text-shadow:0 0 26px var(--accent-glow)}.contact-links{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2.75rem}.contact-link{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border:1px solid var(--line);border-radius:999px;color:var(--text-1);text-decoration:none;font-size:.85rem;letter-spacing:.06em;transition:border-color .3s,color .3s,transform .3s}.contact-link:hover{border-color:var(--accent);color:var(--text-0);transform:translateY(-2px)}.link-arrow{color:var(--accent);transition:transform .3s}.contact-link:hover .link-arrow{transform:translate(2px,-2px)}.icp-footer{position:relative;z-index:10;padding:1.25rem 1rem;text-align:center;background:#06070deb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.icp-footer span{font-size:.75rem;color:var(--text-1)}.icp-footer a{font-size:.75rem;color:var(--text-1);text-decoration:none;transition:color .3s}.icp-footer a:hover{color:var(--accent)}.beian-ga{display:inline-flex;align-items:center;gap:4px}.ga-icon{width:18px;height:18px}@media(max-width:768px){.top-nav{padding:.9rem 1.25rem}.nav-links{gap:1.1rem}.nav-link{font-size:.82rem}.section{padding:5rem 0}.works-grid{grid-template-columns:1fr}.work-card--wide{grid-column:auto}.about-grid{grid-template-columns:1fr;gap:3rem}.about-stats{gap:1.6rem}.hero-corner{display:none}}