@import "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700&family=Playfair+Display:wght@700&display=swap";@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap";:root{--bg:#fafaf8;--bg-secondary:#f2f1ef;--text-primary:#1a1a1a;--text-secondary:#666;--text-tertiary:#999;--accent:#1a1a1a;--accent-subtle:#e8e8e8;--border:#e0e0e0;--card-bg:#fff;--cube-face:#fff;--cube-edge:#1a1a1a;--shadow:#0000000f;--shadow-hover:#0000001f}[data-theme=dark]{--bg:#0a0a0a;--bg-secondary:#141414;--text-primary:#f0f0f0;--text-secondary:#888;--text-tertiary:#555;--accent:#f0f0f0;--accent-subtle:#2a2a2a;--border:#2a2a2a;--card-bg:#161616;--cube-face:#1e1e1e;--cube-edge:#f0f0f0;--shadow:#0000004d;--shadow-hover:#00000080}html{scroll-behavior:smooth;font-size:16px}body{background-color:var(--bg);color:var(--text-primary);font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6;transition:background-color .4s,color .4s;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.container{max-width:1100px;margin:0 auto;padding:0 2rem}section{padding:6rem 0}.nav{z-index:100;background:var(--bg);border-bottom:1px solid #0000;padding:1.2rem 0;transition:border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;position:fixed;top:0;left:0;right:0}.nav.scrolled{border-color:var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(var(--bg-rgb,250, 250, 248), .85)}[data-theme=dark] .nav.scrolled{background:#0a0a0ad9}.nav-inner{justify-content:space-between;align-items:center;display:flex}.nav-logo{letter-spacing:.05em;color:var(--text-primary);font-family:Geist Mono,monospace;font-size:.85rem;font-weight:500;text-decoration:none}.nav-links{align-items:center;gap:.25rem;list-style:none;display:flex}.nav-links a{color:var(--text-secondary);border-radius:4px;padding:.3rem .6rem;font-size:.875rem;text-decoration:none;transition:color .2s,background .2s}.nav-links a:hover{color:var(--text-primary);background:var(--accent-subtle)}.nav-sep{color:var(--text-tertiary);padding:0 .1rem;font-size:.75rem}.nav-theme-btn{border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);background:0 0;border-radius:6px;align-items:center;padding:.3rem .5rem;font-size:1rem;transition:all .2s;display:flex}.nav-theme-btn:hover{color:var(--text-primary);border-color:var(--text-tertiary)}.hero{align-items:center;min-height:100vh;padding-top:5rem;display:flex}.hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;display:grid}.hero-text{opacity:0;animation:.8s .3s forwards fadeUp}.hero-name{letter-spacing:-.02em;color:var(--text-primary);margin-bottom:.25rem;font-family:Noto Sans SC,sans-serif;font-size:clamp(3rem,6vw,5rem);font-weight:700;line-height:1.05}.hero-name .char{opacity:0;animation:.6s forwards charReveal;display:inline-block;transform:translateY(30px)}.hero-name .char:first-child{animation-delay:.1s}.hero-name .char:nth-child(2){animation-delay:.2s}.hero-name .char:nth-child(3){animation-delay:.3s}.hero-tag{color:var(--text-tertiary);opacity:0;align-items:center;gap:.5rem;margin-bottom:1.5rem;font-family:Geist Mono,monospace;font-size:.9rem;animation:.6s .6s forwards fadeUp;display:flex}.hero-tag:before{content:">";color:var(--text-tertiary);animation:1.2s step-end infinite blink}.hero-bio{color:var(--text-secondary);opacity:0;max-width:38ch;margin-bottom:2rem;font-size:1rem;line-height:1.8;animation:.6s .8s forwards fadeUp}.hero-cta{opacity:0;flex-wrap:wrap;gap:.75rem;animation:.6s 1s forwards fadeUp;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.65rem 1.4rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .25s;display:inline-flex}.btn-primary{background:var(--text-primary);color:var(--bg)}.btn-primary:hover{box-shadow:0 8px 24px var(--shadow-hover);transform:translateY(-2px)}.btn-secondary{background:var(--accent-subtle);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--text-tertiary);transform:translateY(-2px)}.hero-cube-wrap{opacity:0;justify-content:center;align-items:center;animation:1s .5s forwards fadeUp;display:flex}.cube-scene{perspective:600px;width:200px;height:200px}.cube{width:100%;height:100%;transform-style:preserve-3d;animation:8s linear infinite cubeRotate;position:relative}.cube-face{background:var(--cube-face);border:1.5px solid var(--cube-edge);width:200px;height:200px;color:var(--text-secondary);backface-visibility:visible;-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;font-family:Geist Mono,monospace;font-size:.75rem;font-weight:500;transition:background .4s,border-color .4s;display:flex;position:absolute}.cube-face span{pointer-events:none}.cube-face.front{transform:rotateY(0)translateZ(100px)}.cube-face.back{transform:rotateY(180deg)translateZ(100px)}.cube-face.right{transform:rotateY(90deg)translateZ(100px)}.cube-face.left{transform:rotateY(-90deg)translateZ(100px)}.cube-face.top{transform:rotateX(90deg)translateZ(100px)}.cube-face.bottom{transform:rotateX(-90deg)translateZ(100px)}.cube-label{color:var(--text-tertiary);white-space:nowrap;font-family:Geist Mono,monospace;font-size:.7rem;position:absolute}.skills-section{border-top:1px solid var(--border)}.section-label{color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2.5rem;font-family:Geist Mono,monospace;font-size:.75rem}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;display:grid}.skill-pill{background:var(--card-bg);border:1px solid var(--border);color:var(--text-secondary);cursor:default;opacity:0;border-radius:100px;justify-content:center;align-items:center;padding:.6rem 1rem;font-size:.875rem;font-weight:500;transition:all .3s;display:flex;transform:translateY(12px)}.skill-pill.visible{opacity:1;transform:translateY(0)}.skill-pill:hover{background:var(--text-primary);color:var(--bg);border-color:var(--text-primary);box-shadow:0 6px 16px var(--shadow-hover);transform:translateY(-3px)}.projects-section{border-top:1px solid var(--border)}.projects-list{flex-direction:column;gap:1.5rem;margin-top:2.5rem;display:flex}.project-card{background:var(--card-bg);border:1px solid var(--border);opacity:0;cursor:pointer;border-radius:12px;padding:2rem;transition:all .35s;transform:translateY(20px)}.project-card.visible{opacity:1;transform:translateY(0)}.project-card:hover{box-shadow:0 12px 40px var(--shadow-hover);border-color:var(--text-tertiary);transform:translateY(-4px)}.project-header{justify-content:space-between;align-items:flex-start;margin-bottom:.75rem;display:flex}.project-name{color:var(--text-primary);font-size:1.1rem;font-weight:600}.project-arrow{color:var(--text-tertiary);font-size:1.2rem;transition:transform .3s,color .3s}.project-card:hover .project-arrow{color:var(--text-primary);transform:translate(3px,-3px)}.project-desc{color:var(--text-secondary);margin-bottom:1rem;font-size:.9rem;line-height:1.6}.project-tags{flex-wrap:wrap;gap:.5rem;display:flex}.project-tag{background:var(--accent-subtle);color:var(--text-tertiary);border-radius:4px;padding:.2rem .6rem;font-family:Geist Mono,monospace;font-size:.72rem}.exp-section{border-top:1px solid var(--border)}.exp-list{flex-direction:column;gap:0;margin-top:2.5rem;display:flex}.exp-item{border-bottom:1px solid var(--border);opacity:0;grid-template-columns:180px 1fr;gap:2rem;padding:2rem 0;transition:all .5s;display:grid;transform:translate(-20px)}.exp-item.visible{opacity:1;transform:translate(0)}.exp-item:last-child{border-bottom:none}.exp-time{color:var(--text-tertiary);padding-top:.2rem;font-family:Geist Mono,monospace;font-size:.8rem}.exp-role{color:var(--text-primary);margin-bottom:.2rem;font-size:1rem;font-weight:600}.exp-company{color:var(--text-secondary);margin-bottom:.75rem;font-size:.9rem}.exp-detail{color:var(--text-tertiary);font-size:.875rem;line-height:1.7}.contact-section{border-top:1px solid var(--border);text-align:center;padding:5rem 0}.contact-title{color:var(--text-primary);margin-bottom:1rem;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700}.contact-sub{color:var(--text-secondary);max-width:40ch;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;font-size:1rem}.contact-links{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.contact-link{color:var(--text-secondary);border:1px solid var(--border);border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;text-decoration:none;transition:all .25s;display:inline-flex}.contact-link:hover{color:var(--text-primary);border-color:var(--text-tertiary);background:var(--accent-subtle)}.footer{text-align:center;border-top:1px solid var(--border);color:var(--text-tertiary);padding:2rem 0;font-family:Geist Mono,monospace;font-size:.75rem}@keyframes cubeRotate{0%{transform:rotateX(-15deg)rotateY(0)}to{transform:rotateX(-15deg)rotateY(360deg)}}@keyframes charReveal{to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@media (width<=768px){.hero-inner{text-align:center;grid-template-columns:1fr;gap:3rem}.hero-bio{margin-left:auto;margin-right:auto}.hero-cta,.hero-tag{justify-content:center}.exp-item{grid-template-columns:1fr;gap:.5rem}.nav-links{display:none}section{padding:4rem 0}}.reveal{opacity:0;transition:opacity .6s,transform .6s;transform:translateY(20px)}.reveal.visible{opacity:1;transform:translateY(0)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}.root{width:100vw;height:100vh;font-family:Noto Sans SC,sans-serif;display:flex;overflow:hidden}.ide-side{background:#1e1e1e;flex-direction:column;flex:1;display:flex;overflow:hidden}.title-bar{-webkit-user-select:none;user-select:none;background:#252526;border-bottom:1px solid #333;flex-shrink:0;align-items:center;gap:1rem;height:40px;padding:0 1rem;display:flex}.tb-dots{align-items:center;gap:7px;display:flex}.dot{border-radius:50%;width:12px;height:12px}.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}.tb-title{text-align:center;color:#888;flex:1;font-family:Fira Code,monospace;font-size:.72rem}.tb-badge{color:#4fc3f7;background:#0d419d;border-radius:4px;padding:2px 8px;font-family:Fira Code,monospace;font-size:.68rem}.editor-scroll{scrollbar-width:thin;scrollbar-color:#444 transparent;flex:1;overflow:auto}.editor-scroll::-webkit-scrollbar{width:6px;height:6px}.editor-scroll::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.code-editor{min-width:max-content;padding:1rem 0 2rem}.cd-line{align-items:center;height:22px;min-height:22px;line-height:22px;display:flex}.cd-num{color:#3c3c3c;text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0;min-width:3.2rem;padding-left:1rem;padding-right:1.5rem;font-family:Fira Code,monospace;font-size:.68rem}.cd-content{white-space:pre;font-family:Fira Code,monospace;font-size:.78rem;position:relative}.line-overlay{cursor:text;position:absolute;inset:0}.inline-edit{color:#f8f8f2;background:#3a3a3a;border:1px solid #4fc3f7;border-radius:2px;outline:none;width:100%;padding:0 2px;font-family:Fira Code,monospace;font-size:.78rem}.status-bar{background:#007acc;flex-shrink:0;align-items:center;gap:.5rem;height:24px;padding:0 1rem;display:flex}.sb-item{color:#fffc;font-family:Fira Code,monospace;font-size:.68rem}.sb-sep{color:#fff6;font-size:.7rem}.sb-right{color:#ffffffb3;margin-left:auto;font-family:Fira Code,monospace;font-size:.68rem}.tok-kw{color:#569cd6}.tok-kw2{color:#c586c0}.tok-str{color:#ce9178}.tok-fn{color:#dcdcaa}.tok-var{color:#9cdcfe}.tok-cls{color:#4ec9b0}.tok-hook{color:#d7ba7d}.tok-cmt{color:#6a9955}.tok-blk{color:#5a5a5a}.tok-hdr{color:#4ec9b0;font-style:italic}.tok-tr{color:#d4d4d4}.tok-brace{color:gold}.tok-punc{color:#d4d4d4}.cursor{color:#f8f8f2;opacity:0}.cursor.show{opacity:1}.divider{background:#e0e0e0;flex-shrink:0;width:1px}.profile-side{background:#f8f9fa;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.theme-toggle{cursor:pointer;z-index:10;position:absolute;top:1.5rem;right:1.5rem}.tt-track{border-radius:14px;justify-content:space-between;align-items:center;width:52px;height:28px;padding:0 6px;transition:background .3s;display:flex;position:relative}.tt-track.dark{background:#1a1a1a}.tt-track.light{background:#e0e0e0}.tt-icon{z-index:1;align-items:center;display:flex}.tt-track.light .sun{color:#666}.tt-track.dark .moon{color:#fff}.tt-thumb{background:#fff;border-radius:50%;width:20px;height:20px;transition:left .3s cubic-bezier(.34,1.56,.64,1);position:absolute;left:4px;box-shadow:0 1px 4px #0003}.tt-thumb.light{left:4px}.tt-thumb.dark{left:calc(100% - 24px)}.float-syms{pointer-events:none;position:absolute;inset:0}.float-sym{color:#d0d0d0;-webkit-user-select:none;user-select:none;font-family:Fira Code,monospace;font-size:1.2rem;animation:6s ease-in-out infinite floatSym;position:absolute}@keyframes floatSym{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:.8;transform:translateY(-10px)}}.profile-content{will-change:transform;width:100%;max-width:480px;padding:2rem 2.5rem;animation:.8s both fadeUp}.profile-name{color:#000;letter-spacing:-.03em;margin-bottom:.5rem;font-size:clamp(3.5rem,6vw,5.5rem);font-weight:700;line-height:1;position:relative;overflow:visible}.glitch-base{z-index:1;display:block;position:relative}.glitch-layer{opacity:0;pointer-events:none;display:block;position:absolute;top:0;left:0}.glitch-layer.layer-a{color:#ff2d78;animation:none;transform:translate(-2px,1px)}.glitch-layer.layer-b{color:#00f0ff;animation:none;transform:translate(2px,-1px)}.glitch-layer.active{animation:.4s step-end forwards glitchAnim}@keyframes glitchAnim{0%{opacity:1;clip-path:inset(30% 0 40%);transform:translate(-3px)}25%{clip-path:inset(60% 0 10%);transform:translate(3px)}50%{clip-path:inset(10% 0 70%);transform:translate(-2px)}75%{clip-path:inset(50% 0 20%);transform:translate(2px)}to{opacity:0;clip-path:inset(0 0 100%);transform:translate(0)}}.typewriter-cursor{vertical-align:text-bottom;background:#333;width:2px;height:1em;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}.scramble-wrap{cursor:default;transition:color .2s;display:inline}.scramble-wrap.hovered{color:#2563eb}.scramble-wrap.done{color:inherit}.magnetic-btn{will-change:transform;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:100px;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:box-shadow .25s;display:inline-flex}.btn-primary-cta{color:#fff;background:#000}.btn-primary-cta:hover{box-shadow:0 12px 32px #00000040}.btn-primary-cta.pressed{box-shadow:0 4px 12px #0003}.btn-ghost-cta{color:#000;background:0 0;border:1.5px solid #000}.btn-ghost-cta:hover{box-shadow:0 12px 32px #0000001a}.profile-bio{margin-bottom:2.5rem;line-height:1.9}.bio-line{color:#666;margin-bottom:.5rem;font-size:.93rem}.profile-cta{align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.magnetic-btn svg{animation:1.8s infinite bounceDown}.magnetic-btn.pressed svg{animation:none}@keyframes bounceDown{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.social-links{flex-wrap:wrap;gap:.75rem;display:flex;position:relative}.social-link{color:#888;border:1px solid #e0e0e0;border-radius:100px;align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:.85rem;text-decoration:none;transition:color .2s,border-color .2s,transform .2s;display:inline-flex;position:relative;overflow:hidden}.social-link:hover{color:#000;border-color:#000;transform:translateY(-2px)}.ripple{pointer-events:none;background:#00000026;border-radius:50%;width:10px;height:10px;animation:.6s ease-out forwards rippleOut;position:absolute;transform:translate(-50%,-50%)scale(0)}@keyframes rippleOut{to{opacity:0;transform:translate(-50%,-50%)scale(20)}}.root.dark .profile-side{background:#111}.root.dark .profile-name{color:#f0f0f0}.root.dark .profile-title{color:#888}.root.dark .bio-line{color:#777}.root.dark .typewriter-cursor{background:#888}.root.dark .glitch-base{color:#f0f0f0}.root.dark .btn-primary-cta{color:#000;background:#f0f0f0}.root.dark .btn-primary-cta:hover{box-shadow:0 12px 32px #ffffff1f}.root.dark .btn-ghost-cta{color:#f0f0f0;border-color:#f0f0f0}.root.dark .btn-ghost-cta:hover{color:#000;background:#f0f0f0;box-shadow:0 12px 32px #ffffff14}.root.dark .social-link{color:#888;border-color:#333}.root.dark .social-link:hover{color:#f0f0f0;border-color:#f0f0f0}.root.dark .float-sym{color:#2a2a2a}@media (width<=768px){.root{flex-direction:column}.ide-side{flex:none;height:45vh}.divider{width:100%;height:1px}.profile-side{flex:none;height:55vh}.profile-content{text-align:center;padding:1.5rem}.profile-cta,.social-links{justify-content:center}.float-sym{display:none}}