:root{--bg:#f8fafc;--bg-soft:#eef4ff;--bg-card:#fff;--line:#64748b2e;--text:#1e2a3a;--text-dim:#5d6b7e;--accent:#2563eb;--accent-strong:#1d4ed8;--accent-soft:#2563eb17;--ink:#16233a;--mono:"JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Consolas, monospace;--sans:"Inter", -apple-system, "PingFang SC", "HarmonicOS Sans SC", "Microsoft YaHei", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 0 0,#2563eb1f,#0000 34rem),linear-gradient(#f8fafc 0%,#fff 48%,#f8fafc 100%);line-height:1.7;overflow-x:hidden}::selection{color:var(--ink);background:#2563eb2e}a{color:inherit;text-decoration:none}.container{width:min(1120px,92%);margin:0 auto}.nav{z-index:100;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);background:#f8fafccc;position:fixed;top:0;left:0;right:0}.nav-inner{justify-content:space-between;align-items:center;height:64px;display:flex}.nav-logo{font-family:var(--mono);color:var(--ink);letter-spacing:.02em;font-size:1.05rem;font-weight:700}.nav-logo span{color:var(--accent)}.nav-links{align-items:center;gap:28px;display:flex}.nav-links a{color:var(--text-dim);font-size:.9rem;font-family:var(--mono);transition:color .2s}.nav-links a:hover{color:var(--accent)}.nav-links a.nav-cta{color:var(--accent);border:1px solid #2563eb66;border-radius:6px;padding:6px 14px;transition:all .2s}.nav-links a.nav-cta:hover{background:var(--accent-soft)}.hero{align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}#particle-canvas{z-index:0;width:100%;height:100%;position:absolute;inset:0}.hero-content{z-index:2;padding:120px 0 80px;position:relative}.hero-tag{font-family:var(--mono);color:var(--accent);align-items:center;gap:10px;margin-bottom:20px;font-size:.9rem;display:flex}.hero-tag:before{content:"";background:var(--accent);width:36px;height:1px;display:inline-block}.hero h1{letter-spacing:-.02em;color:var(--ink);margin-bottom:22px;font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:800;line-height:1.12}.hero h1 .accent{background:linear-gradient(90deg, var(--accent-strong), #3b82f6);color:#0000;-webkit-background-clip:text;background-clip:text}.hero-sub{color:var(--text-dim);max-width:620px;min-height:2.2em;font-size:clamp(1.05rem,2vw,1.3rem);font-family:var(--mono);margin-bottom:36px}.hero-sub .cursor{background:var(--accent);vertical-align:text-bottom;width:10px;height:1.2em;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.hero-actions{flex-wrap:wrap;gap:16px;display:flex}.btn{font-family:var(--mono);border-radius:8px;align-items:center;gap:8px;padding:12px 26px;font-size:.95rem;transition:all .25s;display:inline-flex}.btn-primary{background:var(--accent-strong);color:#fff;font-weight:600;box-shadow:0 6px 24px #2563eb47}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px #2563eb66}.btn-ghost{border:1px solid var(--line);color:var(--text);background:#fff9}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.scroll-hint{font-family:var(--mono);color:var(--text-dim);z-index:2;flex-direction:column;align-items:center;gap:8px;font-size:.75rem;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.scroll-hint:after{content:"";background:linear-gradient(to bottom, var(--accent), transparent);width:1px;height:40px;animation:1.8s ease-in-out infinite drop}@keyframes drop{0%{transform-origin:top;transform:scaleY(0)}55%{transform-origin:top;transform:scaleY(1)}to{transform-origin:bottom;transform:scaleY(0)}}section{padding:100px 0;position:relative}.section-head{margin-bottom:56px}.section-num{font-family:var(--mono);color:var(--accent);margin-bottom:8px;font-size:.85rem}.section-title{color:var(--ink);letter-spacing:-.01em;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700}.section-title:after{content:"";background:linear-gradient(90deg, var(--accent), transparent);border-radius:2px;width:56px;height:3px;margin-top:14px;display:block}.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding:48px 0;display:grid}.stat-num{font-family:var(--mono);color:var(--accent);font-size:2.2rem;font-weight:700}.stat-label{color:var(--text-dim);margin-top:4px;font-size:.9rem}.work-list{flex-direction:column;gap:48px;display:flex}.work-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;transition:transform .3s,border-color .3s,box-shadow .3s;display:grid;overflow:hidden;box-shadow:0 4px 20px #0f172a0d}.work-card:nth-child(2n){direction:rtl}.work-card:nth-child(2n)>*{direction:ltr}.work-card:hover{border-color:#2563eb73;transform:translateY(-4px);box-shadow:0 20px 60px #1d4ed824}.work-info{padding:40px}.work-index{font-family:var(--mono);color:var(--accent);letter-spacing:.1em;margin-bottom:12px;font-size:.8rem}.work-title{color:var(--ink);margin-bottom:14px;font-size:1.5rem;font-weight:700}.work-desc{color:var(--text-dim);margin-bottom:20px;font-size:.98rem}.work-tags{flex-wrap:wrap;gap:8px;margin-bottom:22px;display:flex}.work-tags span{font-family:var(--mono);color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:4px 12px;font-size:.75rem}.work-link{font-family:var(--mono);color:var(--accent);align-items:center;gap:6px;font-size:.9rem;display:inline-flex}.work-link:hover{gap:12px}.work-link{transition:gap .2s}.work-media{aspect-ratio:16/10;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;justify-content:center;align-items:center;margin:20px;display:flex;overflow:hidden}.work-media img{object-fit:cover;width:100%;height:100%}.more-works{margin-top:56px}.more-works-head{font-family:var(--mono);color:var(--text-dim);letter-spacing:.12em;margin-bottom:20px;font-size:.85rem}.more-works-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.more-work-card{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:24px;text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s;display:block}.more-work-card:hover{border-color:#2563eb73;transform:translateY(-3px);box-shadow:0 10px 28px #1e3a5f14}.more-work-card h4{color:var(--text);margin-bottom:8px;font-size:1.05rem}.more-work-card p{color:var(--text-dim);margin-bottom:14px;font-size:.9rem;line-height:1.6}.more-work-card .work-tags{margin-bottom:12px}.more-work-card .work-tags span{padding:3px 10px;font-size:.7rem}.more-work-link{font-family:var(--mono);color:var(--accent);font-size:.8rem}.stack-groups{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;display:grid}.stack-group{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:28px;transition:border-color .25s;box-shadow:0 4px 20px #1e3a5f0d}.stack-group:hover{border-color:#2563eb66}.stack-group h3{font-family:var(--mono);color:var(--accent);letter-spacing:.08em;margin-bottom:18px;font-size:.85rem}.stack-items{flex-wrap:wrap;gap:10px;display:flex}.stack-items span{color:var(--text);border:1px solid var(--line);background:#1e3a5f0a;border-radius:8px;padding:6px 14px;font-size:.88rem;transition:all .2s}.stack-items span:hover{border-color:var(--accent);color:var(--accent)}.contact{text-align:center}.contact h2{color:var(--ink);margin-bottom:16px;font-size:clamp(2rem,5vw,3.2rem);font-weight:800}.contact p{color:var(--text-dim);font-family:var(--mono);margin-bottom:36px;font-size:.95rem}.contact-links{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.footer{border-top:1px solid var(--line);text-align:center;color:var(--text-dim);font-family:var(--mono);padding:32px 0;font-size:.8rem}.footer .hl{color:var(--accent)}.reveal{opacity:0;transition:opacity .7s,transform .7s;transform:translateY(28px)}.reveal.visible{opacity:1;transform:none}@media (width<=860px){.work-card{grid-template-columns:1fr}.work-card:nth-child(2n){direction:ltr}.work-info{padding:28px}.nav-links a:not(.nav-cta){display:none}section{padding:72px 0}}