:root{--bg-base:#08090b;--bg-surface:#0e1012;--bg-elevated:#14171a;--glass-bg:#ffffff06;--glass-bg-hover:#ffffff0a;--glass-border:#ffffff0f;--glass-border-bright:#ffffff1a;--glass-blur:28px;--text-primary:#e8e6e3;--text-secondary:#96989b;--text-tertiary:#5a5c5f;--text-inverse:#08090b;--sage:#8b9d8e;--sage-bright:#a8baa8;--sage-deep:#6b7f6d;--sage-muted:#4a5a4d;--sage-glow:#8b9d8e1f;--sage-glow-strong:#8b9d8e40;--warm:#c4b59c;--warm-muted:#c4b59c26;--accent:var(--sage);--accent-bright:var(--sage-bright);--font-display:"Space Grotesk", "Noto Sans SC", sans-serif;--font-body:"Inter", "Noto Sans SC", sans-serif;--font-mono:"JetBrains Mono", "Noto Sans Mono", monospace;--font-cn:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--max-width:1700px;--nav-height:72px;--section-pad:140px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-fast:.2s;--dur-med:.4s;--dur-slow:.7s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);letter-spacing:.01em;font-size:16px;line-height:1.6;overflow-x:hidden}body:before{content:"";opacity:.4;pointer-events:none;z-index:9999;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(800px 600px at 15% 10%,#8b9d8e0f,#0000 60%),radial-gradient(700px 500px at 85% 80%,#6b7f6d0d,#0000 60%),radial-gradient(500px 400px,#c4b59c08,#0000 70%);position:fixed;inset:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}img{max-width:100%;display:block}ul,ol{list-style:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#8b9d8e33;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#8b9d8e66}::selection{color:#fff;background:#8b9d8e4d}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;font-weight:600;line-height:1.2}.display-xl{font-family:var(--font-display);letter-spacing:-.03em;font-size:clamp(2.5rem,6vw,5rem);font-weight:700;line-height:1.05}.display-lg{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(2rem,4.5vw,3.5rem);font-weight:600;line-height:1.1}.section-title{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:600}.eyebrow{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-size:.75rem;font-weight:500}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-accent{color:var(--sage-bright)}.container{max-width:var(--max-width);margin:0 auto;padding:0 80px}.section{padding:var(--section-pad) 0;z-index:1;position:relative}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(var(--glass-blur));transition:all var(--dur-med) var(--ease-out)}.glass:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-bright)}.glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(var(--glass-blur));transition:all var(--dur-med) var(--ease-out);padding:32px;position:relative;overflow:hidden}.glass-card:before{content:"";border-radius:var(--radius-lg);-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#ffffff14,#0000 50%);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-bright);box-shadow:0 20px 40px -20px #00000080, 0 0 30px -10px var(--sage-glow);transform:translateY(-2px)}.tag{font-family:var(--font-mono);letter-spacing:.05em;color:var(--sage-bright);transition:all var(--dur-fast) var(--ease-out);background:#8b9d8e14;border:1px solid #8b9d8e26;border-radius:100px;align-items:center;gap:6px;padding:6px 14px;font-size:.72rem;font-weight:500;display:inline-flex}.tag:hover{background:#8b9d8e26;border-color:#8b9d8e4d}.btn{font-family:var(--font-body);transition:all var(--dur-med) var(--ease-out);cursor:pointer;border-radius:100px;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:.9rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--sage);color:var(--text-inverse);border:1px solid var(--sage)}.btn-primary:hover{background:var(--sage-bright);border-color:var(--sage-bright);box-shadow:0 0 30px -5px var(--sage-glow-strong);transform:translateY(-1px)}.btn-ghost{color:var(--text-primary);border:1px solid var(--glass-border);background:0 0}.btn-ghost:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-bright)}.section-header{margin-bottom:64px}.section-header .eyebrow{margin-bottom:16px;display:block}.section-header .section-title{margin-bottom:12px}.section-header .section-subtitle{color:var(--text-secondary);max-width:600px;font-size:1.05rem}.reveal{opacity:0;transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);transform:translateY(40px)}.reveal.visible{opacity:1;transform:translateY(0)}.gradient-text{background:linear-gradient(135deg, var(--sage-bright), var(--warm));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.divider{background:linear-gradient(90deg, transparent, var(--glass-border), transparent);height:1px;margin:80px 0}.bento-featured{grid-column:span 2}@media (width<=1024px){:root{--section-pad:80px}.container{padding:0 40px}.hero-grid{grid-template-columns:1fr!important;gap:40px!important}.hero-avatar-wrap{order:-1;justify-content:center!important}.strengths-grid{grid-template-columns:1fr!important;gap:32px!important}.stats-grid{grid-template-columns:repeat(3,1fr)!important}}@media (width<=768px){:root{--section-pad:60px;--nav-height:60px}.container{padding:0 24px}.glass-card{border-radius:var(--radius-md);padding:24px}.section-header{margin-bottom:40px}.nav-desktop{display:none!important}.nav-mobile-toggle{display:flex!important}.projects-grid{grid-template-columns:1fr!important}.bento-featured{grid-column:span 1}.stats-grid{grid-template-columns:repeat(2,1fr)!important}}@media (width<=480px){.stats-grid{grid-template-columns:1fr!important}}@media (width>=769px){.nav-mobile-toggle,.nav-mobile-menu{display:none!important}}@media (width<=480px){.container{padding:0 16px}.glass-card{padding:20px}.display-xl{font-size:2.2rem!important}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes glow-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-ring{0%{opacity:.5;transform:scale(.8)}to{opacity:0;transform:scale(2)}}.dock-outer{align-items:center;max-width:100%;margin:0;display:flex}.dock-panel{-webkit-backdrop-filter:blur(16px);background:#08090b80;border:1px solid #8b9d8e1f;border-radius:.875rem;align-items:center;gap:.125rem;width:fit-content;padding:.25rem .5rem;display:flex;position:relative}.dock-item{cursor:pointer;color:#a8baa8b3;white-space:nowrap;transform-origin:50%;background:0 0;border:1px solid #0000;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:.5rem .875rem;transition:background .3s,border-color .3s,color .3s;display:inline-flex;position:relative}.dock-item:hover{color:#fffffff2;background:#8b9d8e1f;border-color:#8b9d8e38}.dock-item:focus-visible{border-color:#8b9d8e80;box-shadow:0 0 0 2px #8b9d8e40}.dock-item-active{color:#a8baa8;background:#8b9d8e29;border-color:#8b9d8e52}.dock-item-active:after{content:"";background:#a8baa8;border-radius:50%;width:4px;height:4px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%);box-shadow:0 0 6px #8b9d8e99}.dock-text{letter-spacing:.01em;pointer-events:none;font-size:.8rem;font-weight:500}@media (width<=768px){.dock-outer{display:none}}.magic-rings-container{width:100%;height:100%}.border-glow-card{--edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30;--color-sensitivity:calc(var(--edge-sensitivity) + 20);--border-radius:16px;--glow-padding:30px;--cone-spread:25;border-radius:var(--border-radius);isolation:isolate;background:var(--card-bg,#14161980);-webkit-backdrop-filter:blur(12px);border:1px solid #ffffff0f;display:grid;position:relative;overflow:visible;transform:translateZ(.01px);box-shadow:0 1px 2px #0000001a,0 2px 4px #0000001a,0 4px 8px #0000001a,0 8px 16px #0000001a,0 16px 32px #0000001a}.border-glow-card:before,.border-glow-card:after,.border-glow-card>.edge-light{content:"";border-radius:inherit;z-index:-1;transition:opacity .25s ease-out;position:absolute;inset:0}.border-glow-card:not(:hover):not(.sweep-active):before,.border-glow-card:not(:hover):not(.sweep-active):after,.border-glow-card:not(:hover):not(.sweep-active)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}.border-glow-card:before{background:linear-gradient(var(--card-bg,#14161980) 0 100%) padding-box, linear-gradient(#fff0 0% 100%) border-box, var(--gradient-one,radial-gradient(at 80% 55%, #70a983 0px, transparent 50%)) border-box, var(--gradient-two,radial-gradient(at 69% 34%, #5c8a6b 0px, transparent 50%)) border-box, var(--gradient-three,radial-gradient(at 8% 6%, #98b3a1 0px, transparent 50%)) border-box, var(--gradient-four,radial-gradient(at 41% 38%, #70a983 0px, transparent 50%)) border-box, var(--gradient-five,radial-gradient(at 86% 85%, #5c8a6b 0px, transparent 50%)) border-box, var(--gradient-six,radial-gradient(at 82% 18%, #98b3a1 0px, transparent 50%)) border-box, var(--gradient-seven,radial-gradient(at 51% 4%, #70a983 0px, transparent 50%)) border-box, var(--gradient-base,linear-gradient(#30604b 0 100%)) border-box;opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));mask-image:conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));border:1px solid #0000}.border-glow-card:after{background:var(--gradient-one,radial-gradient(at 80% 55%, #70a983 0px, transparent 50%)) padding-box, var(--gradient-two,radial-gradient(at 69% 34%, #5c8a6b 0px, transparent 50%)) padding-box, var(--gradient-three,radial-gradient(at 8% 6%, #98b3a1 0px, transparent 50%)) padding-box, var(--gradient-four,radial-gradient(at 41% 38%, #70a983 0px, transparent 50%)) padding-box, var(--gradient-five,radial-gradient(at 86% 85%, #5c8a6b 0px, transparent 50%)) padding-box, var(--gradient-six,radial-gradient(at 82% 18%, #98b3a1 0px, transparent 50%)) padding-box, var(--gradient-seven,radial-gradient(at 51% 4%, #70a983 0px, transparent 50%)) padding-box, var(--gradient-base,linear-gradient(#30604b 0 100%)) padding-box;-webkit-mask-image:linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);mask-image:linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);opacity:calc(var(--fill-opacity,.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));mix-blend-mode:soft-light;border:1px solid #0000;-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add,add}.border-glow-card>.edge-light{inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));mix-blend-mode:plus-lighter}.border-glow-card>.edge-light:before{content:"";inset:var(--glow-padding);border-radius:inherit;box-shadow:inset 0 0 0 1px var(--glow-color,#70a983), inset 0 0 1px 0 var(--glow-color-60,#70a98399), inset 0 0 3px 0 var(--glow-color-50,#70a98380), inset 0 0 6px 0 var(--glow-color-40,#70a98366), inset 0 0 15px 0 var(--glow-color-30,#70a9834d), inset 0 0 25px 2px var(--glow-color-20,#70a98333), inset 0 0 50px 2px var(--glow-color-10,#70a9831a), 0 0 1px 0 var(--glow-color-60,#70a98399), 0 0 3px 0 var(--glow-color-50,#70a98380), 0 0 6px 0 var(--glow-color-40,#70a98366), 0 0 15px 0 var(--glow-color-30,#70a9834d), 0 0 25px 2px var(--glow-color-20,#70a98333), 0 0 50px 2px var(--glow-color-10,#70a9831a);position:absolute}.border-glow-inner{z-index:1;border-radius:inherit;flex-direction:column;display:flex;position:relative;overflow:auto}
