@charset "UTF-8";
:root{color-scheme:dark;--bg:#111310;--surface:#1c1f19;--lime:#bcff2c;--text:#f6f6f1;--muted:#a3a69c;--line:#ffffff24;font-family:Arial,"Microsoft YaHei",sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--lime);outline-offset:6px}::selection{background:var(--lime);color:#111}.skip{position:fixed;top:-80px;z-index:100;background:var(--lime);color:#111;padding:16px}.skip:focus{top:0}.nav{position:absolute;z-index:5;top:26px;left:8%;width:84%;max-width:1440px;border:1px solid #ffffff30;border-radius:60px;background:#25272755;backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:10px 14px;box-shadow:0 8px 40px #0002}.brand{display:flex;align-items:center;gap:8px;padding:9px 20px;border-radius:30px;background:var(--lime);color:#131910;font-size:17px;font-weight:900;letter-spacing:-.5px}.brand-icon{font-size:24px}.nav nav{display:flex;gap:38px;font-size:14px;color:#e0e0d9}.nav nav a:hover{color:var(--lime)}.contact-link{border:1px solid #ffffff50;border-radius:28px;padding:10px 17px;font-size:14px}.contact-link span{margin-left:15px}.hero{position:relative;min-height:900px;height:100svh;max-height:1250px;overflow:hidden;background:#494940 url('assets/hero.webp') center 53%/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#10171166,transparent 85%),linear-gradient(0deg,#111310 0%,#11131000 42%,#11131018 75%,#15181966)}.hero-copy{position:relative;padding-top:clamp(165px,22vh,260px);margin:0 13%;z-index:1}.eyebrow{font-size:13px;font-weight:600;letter-spacing:2.5px;margin:0 0 24px;color:var(--muted);line-height:1.6}.hero .eyebrow{color:#e3e6d6;letter-spacing:4px}.hero h1{font-size:clamp(48px,6.4vw,110px);line-height:1;letter-spacing:-4px;margin:0;font-weight:800}.hero h1>span{display:block;color:var(--lime);white-space:nowrap}.hero h1 strong{display:block;font-weight:400;font-size:.87em;letter-spacing:-2px;margin-top:9px}.spark{display:inline-block;font-size:.68em;vertical-align:top;margin-left:18px;line-height:1.1}.intro{font-size:19px;line-height:1.7;color:#ededdf;margin:24px 0}.hero-cta{display:inline-flex;gap:35px;align-items:center;font-size:14px;border-bottom:1px solid #ffffff70;padding:10px 0}.hero-cta:hover{color:var(--lime)}.hero-note{position:absolute;right:8%;top:48%;font-size:12px;letter-spacing:2px;line-height:1.8;writing-mode:vertical-rl;color:#e8e9d6}.work-ribbon{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);width:min(1500px,112%);display:flex;align-items:center;gap:23px;justify-content:center;padding:22px 0}.ribbon-card{padding:0;border:1px solid #ffffff35;border-radius:22px;overflow:hidden;flex:0 0 14%;height:215px;box-shadow:0 22px 35px #0008;transform:rotate(var(--rotate));transition:transform .35s;background:#282b23}.ribbon-card:nth-child(even){margin-top:-25px}.ribbon-card:hover{transform:translateY(-16px) rotate(0deg);z-index:2}.ribbon-card img{width:100%;height:100%;object-fit:cover}.hero-bottom{position:absolute;bottom:26px;left:8%;right:8%;display:flex;justify-content:space-between;color:#babeb0;font-size:12px;letter-spacing:1.5px}.section{padding:105px 8%;max-width:1680px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px}.section-heading h2,.about h2{font-size:clamp(30px,3.4vw,54px);letter-spacing:-1px;line-height:1.3;margin:0}.section-heading h2 span{color:var(--lime);margin-left:20px}.section-heading>p{color:var(--muted);line-height:1.8;font-size:14px;margin:0}.project-group{margin-top:60px}.group-label{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}.group-label h3{font-size:22px;margin:0}.group-label span{font-size:12px;letter-spacing:1.4px;color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.project-grid.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project{background:none;border:0;padding:0;text-align:left;min-width:0}.project-image{aspect-ratio:1.45;overflow:hidden;border-radius:15px;background:#252822;position:relative}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.project:hover img{transform:scale(1.045)}.video-grid .project-image{aspect-ratio:1.15;background:#22261e}.video-grid .project-image img{object-fit:contain;background:radial-gradient(ellipse at center,#3b4230,#1a1e17)}.play{position:absolute;left:20px;bottom:20px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff80;background:#1119;border-radius:50%;font-size:14px}.project-info{display:flex;justify-content:space-between;align-items:flex-start;padding:17px 2px 27px;gap:10px}.project-info h4{font-size:18px;line-height:1.5;margin:0 0 6px;font-weight:500}.project-info p{color:var(--muted);font-size:13px;margin:0;line-height:1.5}.project-info>span{color:var(--lime);font-size:24px}.experience{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.outline-star{font-size:130px;line-height:1;color:var(--lime);font-weight:300}.job{display:grid;grid-template-columns:45px 1fr 1fr;gap:26px;border-top:1px solid var(--line);padding:38px 0}.job:last-child{padding-bottom:0}.job-index{color:var(--muted);font-size:14px;padding-top:6px}.job h3{font-size:20px;line-height:1.5;margin:0 0 12px}.job-role{font-size:14px;color:var(--lime);margin:0}.job>p{font-size:16px;color:var(--muted);line-height:1.9;margin:0}.about{display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.about h2 em{font-style:normal;color:var(--lime);font-size:.76em}.person{display:flex;align-items:center;gap:18px;margin-top:40px}.person img{width:62px;height:68px;object-fit:cover;object-position:top;border-radius:12px}.person strong{font-size:18px}.person p{font-size:14px;color:var(--muted);margin-bottom:0}.skills article{display:flex;gap:25px;padding:28px 0;border-top:1px solid var(--line)}.skills article>span{color:var(--lime);font-size:13px;padding-top:5px}.skills h3{font-size:22px;margin:0}.skills p{color:var(--muted);line-height:1.8}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{border:1px solid var(--line);padding:6px 10px;border-radius:18px;font-size:12px;color:#c8cabc}.contact{background:var(--lime);color:#17200d;max-width:none;padding-top:80px;padding-bottom:70px}.contact .eyebrow{color:#4c622b}.contact h2{font-size:clamp(34px,4.5vw,70px);line-height:1.28;font-weight:600;letter-spacing:-2px;margin:0}.contact h2 span{margin-left:25px}.contact-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:50px}.email{font-size:clamp(18px,2.2vw,32px);border-bottom:1px solid #17200d;padding-bottom:10px;overflow-wrap:anywhere}.resume{padding:18px 25px;background:#17200d;color:#fff;border-radius:40px;font-size:15px;white-space:nowrap}.contact-details{display:flex;gap:40px;flex-wrap:wrap;margin-top:40px;font-size:14px;color:#33471b}footer{padding:35px 8%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.footer-name{font-weight:900;font-size:22px;color:#fff;letter-spacing:-1px}.footer-name span{color:var(--lime);margin-left:6px}dialog{background:#181b16;color:var(--text);border:1px solid #ffffff30;border-radius:20px;width:min(1080px,94vw);max-height:90svh;padding:30px;overscroll-behavior:contain}dialog::backdrop{background:#000d;backdrop-filter:blur(12px)}body:has(dialog[open]){overflow:hidden}.viewer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.viewer-top .eyebrow{margin-bottom:8px;color:var(--lime)}.viewer-top h2{margin:0;font-size:28px;line-height:1.4}.close{position:sticky;top:0;flex-shrink:0;background:#2b3027;border:1px solid var(--line);border-radius:50%;width:43px;height:43px}.close:hover{background:var(--lime);color:#111}#viewer-description{line-height:1.9;color:var(--muted);max-width:820px}#viewer-media{display:grid;gap:18px;margin-top:28px}#viewer-media img{width:100%;height:auto;border-radius:10px}#viewer-media video{max-width:100%;width:auto;max-height:65svh;display:block;margin:auto;background:#000;border-radius:10px}
@media(min-width:1700px){.nav{left:50%;transform:translateX(-50%)}}@media(max-width:900px){.nav{left:5%;width:90%}.nav nav{gap:18px}.hero{min-height:820px}.hero-copy{margin:0 8%;padding-top:190px}.hero h1{font-size:8vw;letter-spacing:-2px}.hero-note{display:none}.ribbon-card{flex-basis:19%;height:180px;border-radius:15px}.work-ribbon{width:140%;gap:15px}.section{padding:75px 6%}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.job{grid-template-columns:30px 1fr;gap:15px}.job>p{grid-column:2}.about{gap:35px;grid-template-columns:1fr 1.15fr}.outline-star{font-size:95px}.contact{padding:70px 6%}}@media(max-width:600px){.nav{top:18px;padding:8px;gap:6px}.brand{padding:8px 12px;font-size:13px}.brand-icon{font-size:19px}.nav nav{gap:16px;font-size:13px}.nav nav a:nth-child(n+2){display:none}.contact-link{padding:8px 11px;font-size:12px}.contact-link span{margin-left:3px}.hero{height:820px;min-height:0;background-position:58% center}.hero-copy{padding-top:172px;margin:0 7%}.hero .eyebrow{font-size:12px;letter-spacing:2px}.hero h1{font-size:9vw;letter-spacing:-1.5px}.hero h1 strong{font-size:1.04em;letter-spacing:-1px;margin-top:12px}.spark{margin-left:7px;font-size:.62em}.intro{font-size:16px;margin-top:24px}.hero-cta{font-size:14px}.work-ribbon{bottom:84px;width:1040px;gap:15px}.ribbon-card{flex-basis:140px;height:165px}.ribbon-card:nth-child(even){margin-top:-10px}.hero-bottom{left:7%;right:7%;font-size:12px;letter-spacing:0;bottom:26px}.section{padding:60px 6%}.section-heading{display:block;margin-bottom:34px}.section-heading h2{font-size:29px}.section-heading>p{margin-top:20px}.eyebrow{font-size:12px;letter-spacing:1.7px;margin-bottom:17px}.group-label{align-items:flex-start;flex-direction:column;gap:6px}.group-label h3{font-size:20px}.project-group{margin-top:40px}.project-grid,.project-grid.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.video-grid .project-image{aspect-ratio:.75}.project-image{border-radius:10px}.project-info{padding:12px 0 18px;gap:3px}.project-info h4{font-size:16px}.project-info p{font-size:12px}.project-info>span{font-size:20px}.play{width:35px;height:35px;left:10px;bottom:10px;font-size:12px}.outline-star{display:none}.job h3{font-size:18px}.job>p{font-size:15px}.about{display:block}.skills{margin-top:45px}.about h2{font-size:36px}.skills h3{font-size:20px}.contact h2{font-size:34px;letter-spacing:-1px}.contact h2 span{margin-left:8px}.contact-row{flex-direction:column;align-items:flex-start;margin-top:30px}.contact-details{gap:16px;flex-direction:column}.contact{padding:55px 6%}footer{padding:28px 6%;flex-wrap:wrap}footer>span{display:none}dialog{padding:20px;width:94vw}.viewer-top h2{font-size:22px}.viewer-top .eyebrow{font-size:12px}#viewer-description{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}