:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#060707;--panel:#0d0f0f;--panel-soft:#131616;--text:#f4f1e8;--muted:#a8aaa6;--line:#f4f1e821;--gold:#d7b46a;--cyan:#62d0c9;--ink:#050606;font-family:Inter,HarmonyOS Sans SC,Microsoft YaHei,PingFang SC,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{color:var(--text);background:linear-gradient(90deg, #d7b46a0a 1px, transparent 1px), linear-gradient(180deg, #ffffff06 1px, transparent 1px), var(--bg);letter-spacing:0;background-size:72px 72px;margin:0}body.modal-open{overflow:hidden}main{flex-direction:column;display:flex}.hero{order:1}.projects-section{order:4}.experience{order:2}.strength{order:3}.contact-page{order:5}a{color:inherit;text-decoration:none}button{font:inherit}img,video,canvas{display:block}.container{width:min(100% - 48px,1700px);margin:0 auto}.site-nav{z-index:30;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#080909b8;border-radius:8px;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);align-items:center;width:min(100% - 48px,1700px);height:58px;padding:0 10px 0 18px;display:grid;position:fixed;top:18px;left:50%;transform:translate(-50%)}.brand{align-items:baseline;gap:10px;font-weight:700;display:flex}.brand span{font-size:18px}.brand small{color:var(--muted);font-size:12px;font-weight:500}.site-nav nav{align-items:center;gap:8px;display:flex}.site-nav nav a,.portfolio-link,.primary-action,.secondary-action,.category-bar button{border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:38px;transition:transform .18s,border-color .18s,background .18s,color .18s;display:inline-flex}.site-nav nav a{color:var(--muted);padding:0 14px;font-size:13px}.site-nav nav a:hover{color:var(--text);background:#ffffff0f}.portfolio-link{color:var(--gold);border:1px solid #d7b46a73;justify-self:end;padding:0 14px;font-size:13px}.portfolio-link:hover,.primary-action:hover,.secondary-action:hover{border-color:#62d0c9b3;transform:translateY(-2px)}.hero{align-items:flex-end;min-height:100svh;padding:140px 0 72px;display:flex;position:relative;overflow:hidden}.hero-canvas,.hero-video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.hero-canvas{opacity:0;pointer-events:none}.hero-video{z-index:0;filter:saturate(.86)contrast(1.08)}.hero:before{content:"";z-index:1;background:radial-gradient(circle at 78% 32%,#62d0c91f,#0000 28%),linear-gradient(90deg,#060707f0,#06070794 54%,#060707eb);position:absolute;inset:0}.hero-noise{z-index:2;opacity:.2;pointer-events:none;background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:120px 120px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 20% 72%,#0000);mask-image:linear-gradient(#0000,#000 20% 72%,#0000)}.hero-inner{z-index:3;position:relative}.hero-kicker{flex-wrap:wrap;gap:10px;margin-bottom:22px;display:flex}.hero-kicker span,.section-label,.aplus-row small,.case-meta span,.scope-row small,.tag-row span{border:1px solid var(--line);min-height:30px;color:var(--muted);background:#ffffff0b;border-radius:8px;align-items:center;padding:0 10px;font-size:12px;display:inline-flex}.hero h1{max-width:1160px;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(68px,9vw,162px);font-weight:500;line-height:.87}.hero h1 span{color:#0000;-webkit-text-stroke:1px #f4f1e8b8;display:block}.hero p{color:#d9d6cc;max-width:710px;margin:28px 0 0;font-size:clamp(16px,1.35vw,22px);line-height:1.75}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:36px;display:flex}.primary-action,.secondary-action{border:1px solid var(--line);padding:0 18px}.primary-action{background:var(--text);color:var(--ink);font-weight:700}.secondary-action{color:var(--text);background:#ffffff0d}.section{padding:120px 0}.hero,.section,.contact-page{scroll-margin-top:96px}.section-label{width:fit-content;color:var(--gold);border-color:#d7b46a59;margin-bottom:18px}.resume-layout{grid-template-columns:minmax(280px,430px) minmax(0,1fr);align-items:start;gap:22px;display:grid}.resume-card,.resume-main,.case-card,.strength-card,.video-card{border:1px solid var(--line);background:var(--panel);border-radius:8px}.resume-card{background:linear-gradient(145deg, #d7b46a1a, transparent 32%), linear-gradient(315deg, #62d0c914, transparent 38%), var(--panel);padding:16px;position:sticky;top:96px;overflow:hidden}.portrait-wrap{background:var(--panel-soft);border-radius:8px;width:min(100%,390px);margin-inline:auto;position:relative;overflow:hidden}.portrait-wrap:after{content:"";background:linear-gradient(90deg,#0000,#d7b46ab8,#0000);height:1px;position:absolute;inset:auto 14px 14px}.portrait-wrap img{aspect-ratio:4/5;object-fit:cover;object-position:center center;filter:saturate(.76)contrast(1.08)brightness(.9);width:100%;transition:transform .42s,filter .42s}.resume-card:hover .portrait-wrap img{filter:saturate(.92)contrast(1.08)brightness(.98);transform:scale(1.04)}.resume-name{gap:6px;margin:18px 0 14px;display:grid}.resume-name strong{font-size:34px}.resume-name span{color:var(--muted);font-size:13px}.profile-tags{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px;display:grid}.profile-tags span{border:1px solid var(--line);color:#dfdbd0;background:#ffffff0a;border-radius:8px;justify-content:center;align-items:center;min-height:38px;font-size:13px;display:inline-flex}.contact-strip{flex-wrap:wrap;gap:12px;display:flex}.contact-strip.compact{margin-top:6px}.contact-strip a{border:1px solid var(--line);background:#ffffff0a;border-radius:8px;align-items:center;gap:9px;min-height:42px;padding:0 14px;display:inline-flex}.resume-main{background:linear-gradient(135deg, #d7b46a14, transparent 33%), linear-gradient(180deg, #ffffff0a, transparent), var(--panel);padding:clamp(28px,4vw,54px)}.profile-hero{grid-template-columns:minmax(0,1fr) minmax(230px,300px);align-items:stretch;gap:24px;display:grid}.resume-main h2,.section-head h2,.contact-inner h2,.video-section-head h2{margin:0;font-size:clamp(34px,4.5vw,80px);font-weight:620;line-height:1.03}.profile-hero p,.section-head p,.contact-inner p,.video-section-head p{max-width:820px;color:var(--muted);font-size:16px;line-height:1.9}.profile-intent{background:linear-gradient(#62d0c91a,#0000 58%),#ffffff09;border:1px solid #62d0c938;border-radius:8px;align-content:end;min-height:240px;padding:22px;display:grid}.profile-intent small{color:var(--gold);font-size:13px}.profile-intent strong{margin:10px 0;font-size:clamp(30px,3vw,48px);line-height:1.05}.profile-intent span{color:var(--muted);line-height:1.6}.stats-grid{grid-template-columns:repeat(5,minmax(100px,1fr));gap:10px;margin:32px 0;display:grid}.stat{border:1px solid var(--line);background:#ffffff09;border-radius:8px;padding:18px}.stat strong{color:var(--cyan);font-family:Georgia,Times New Roman,serif;font-size:clamp(28px,3vw,54px);font-weight:500;display:block}.stat span{color:var(--muted);font-size:13px}.resume-panels{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px;display:grid}.resume-panels section{border:1px solid var(--line);background:#ffffff08;border-radius:8px;padding:24px}.mini-title{color:var(--gold);align-items:center;gap:10px;margin-bottom:16px;font-weight:700;display:inline-flex}.highlight-list{color:#dbd8cf;margin:0;padding-left:18px;line-height:1.9}.timeline{gap:18px;display:grid}.timeline article{border-left:1px solid #62d0c973;padding:0 0 0 18px}.timeline time{color:var(--gold);font-size:13px}.timeline h3{gap:8px;margin:10px 0;font-size:clamp(18px,1.7vw,27px);display:grid}.timeline h3 span{color:var(--muted);font-size:14px;font-weight:500}.scope-row{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.timeline p{color:var(--muted);margin:0;line-height:1.7}.projects-section{background:#080909;padding-top:104px}.section-head{grid-template-columns:minmax(0,1fr) minmax(280px,540px);align-items:end;gap:32px;margin-bottom:34px;display:grid}.category-bar{flex-wrap:wrap;gap:10px;margin-bottom:18px;display:flex}.category-bar button{cursor:pointer;border:1px solid var(--line);color:var(--muted);background:0 0;padding:0 14px}.category-bar button:hover,.category-bar button.active{color:var(--text);background:#62d0c914;border-color:#62d0c99e}.aplus-row{color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px;display:flex}.aplus-row span{color:var(--gold);font-size:13px}.case-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.case-card{cursor:pointer;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));background:linear-gradient(180deg, #ffffff08, transparent), var(--panel);grid-template-rows:auto 1fr;transition:transform .22s,border-color .22s;display:grid;overflow:hidden}.case-card:hover{border-color:#d7b46a7a}.case-card:focus-visible{outline-offset:4px;outline:2px solid #62d0c9d1}.case-media{background:#0a0c0c;min-height:auto;position:relative;overflow:hidden}.case-media img{aspect-ratio:16/12;object-fit:cover;object-position:top center;filter:saturate(.9)brightness(.92)contrast(1.03);width:100%;height:100%;min-height:auto;transition:transform .46s,filter .46s;transform:scale(1.02)}.case-card:hover .case-media img{filter:saturate(1.02)brightness(1.04)contrast(1.05);transform:scale(1.08)}.case-glare{opacity:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), #fff3, transparent 28%);transition:opacity .22s;position:absolute;inset:0}.case-card:hover .case-glare{opacity:1}.view-hint{z-index:2;min-height:34px;color:var(--text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;background:#050606a3;border:1px solid #f4f1e833;border-radius:8px;align-items:center;gap:7px;padding:0 11px;font-size:12px;transition:opacity .2s,transform .2s,border-color .2s;display:inline-flex;position:absolute;top:12px;right:12px;transform:translateY(-8px)}.case-card:hover .view-hint,.case-card:focus-visible .view-hint{opacity:1;border-color:#62d0c985;transform:translateY(0)}.case-overlay{opacity:0;background:linear-gradient(#0000,#050606c7),#0506067a;border-radius:8px;justify-content:space-between;align-items:end;gap:12px;padding:14px;transition:opacity .22s,transform .22s;display:flex;position:absolute;inset:auto 12px 12px;transform:translateY(10px)}.case-card:hover .case-overlay{opacity:1;transform:translateY(0)}.case-overlay span{color:var(--gold);font-size:12px}.case-overlay strong{color:var(--text);text-align:right;font-size:13px;line-height:1.35}.case-content{background:linear-gradient(#0c0f0ff0,#0b0d0dfa);align-content:start;padding:20px;display:grid}.case-meta{flex-wrap:wrap;gap:10px;display:flex}.case-meta span{color:var(--gold)}.case-meta small{color:var(--muted);font-size:13px}.case-content h3{margin:14px 0 10px;font-size:clamp(21px,1.8vw,30px);line-height:1.16}.case-content>p{color:#d8d5cb;margin:0 0 18px;line-height:1.65}.case-output{color:var(--cyan);font-size:13px;font-weight:600;line-height:1.65;display:block}.case-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.case-detail-grid strong{color:var(--cyan);margin-bottom:10px;display:inline-flex}.case-detail-grid ul{color:var(--muted);margin:0;padding-left:18px;line-height:1.8}.case-detail-grid p{color:var(--muted);margin:0;line-height:1.8}.tag-row{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.tag-row span{color:var(--text);background:#62d0c90f;border-color:#62d0c938}.video-section{margin-top:32px;padding-top:8px}.video-section-head{grid-template-columns:minmax(0,1fr) minmax(280px,460px);align-items:end;gap:24px;margin-bottom:22px;display:grid}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.video-card{background:linear-gradient(180deg, #ffffff08, transparent), var(--panel);padding:14px}.video-frame{border:1px solid var(--line);background:#050606;border-radius:8px;position:relative;overflow:hidden}.video-frame video{aspect-ratio:16/10;object-fit:cover;width:100%}.play-mark{background:#060707b8;border:1px solid #f4f1e824;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;display:inline-flex;position:absolute;bottom:14px;right:14px}.video-card h3{margin:16px 0 10px;font-size:22px}.video-card p{color:var(--muted);margin:0;line-height:1.7}.strength-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.strength-card{background:linear-gradient(180deg, #ffffff0b, transparent), var(--panel);min-height:270px;padding:28px;transition:transform .18s,border-color .18s,background .18s}.strength-card:hover{background:linear-gradient(180deg, #62d0c914, transparent), var(--panel);border-color:#62d0c994;transform:translateY(-6px)}.strength-card svg{color:var(--gold)}.strength-card h3{margin:30px 0 14px;font-size:23px}.strength-card p{color:var(--muted);margin:0;line-height:1.75}.contact-page{background:linear-gradient(140deg,#d7b46a1f,#0000 28%),linear-gradient(320deg,#62d0c91f,#0000 34%),#050606;align-items:center;min-height:100svh;padding:110px 0 80px;display:flex;position:relative;overflow:hidden}.contact-inner{grid-template-columns:minmax(0,1fr) 420px;align-items:center;gap:44px;display:grid;position:relative}.contact-inner h2{font-family:Georgia,Times New Roman,serif;font-weight:500}.contact-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffff0b;border:1px solid #d7b46a5c;border-radius:8px;gap:16px;padding:32px;display:grid}.contact-card svg{color:var(--cyan)}.contact-card a{font-size:clamp(22px,2vw,30px);font-weight:650}.contact-card span{color:var(--muted);margin-top:12px}.contact-marquee{color:#0000;-webkit-text-stroke:1px #f4f1e82e;white-space:nowrap;grid-column:1/-1;gap:32px;font-family:Georgia,Times New Roman,serif;font-size:clamp(48px,9vw,150px);display:flex;overflow:hidden}.project-modal{z-index:80;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal-backdrop{cursor:zoom-out;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:radial-gradient(circle at 78% 18%,#62d0c921,#0000 30%),#030404e0;border:0;position:absolute;inset:0}.modal-shell{z-index:1;background:linear-gradient(#ffffff0e,#0000 26%),#080909;border:1px solid #f4f1e829;border-radius:8px;grid-template-rows:auto minmax(0,1fr);width:min(100%,1320px);max-height:calc(100svh - 48px);display:grid;position:relative;overflow:hidden;box-shadow:0 28px 80px #0000007a}.modal-head{border-bottom:1px solid var(--line);background:#080909db;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;padding:18px 18px 16px 22px;display:grid}.modal-head span{color:var(--gold);font-size:13px}.modal-head h2{margin:6px 0;font-size:clamp(24px,2.3vw,42px);line-height:1.08}.modal-head p{color:var(--muted);margin:0}.modal-close{cursor:pointer;border:1px solid var(--line);width:44px;height:44px;color:var(--text);background:#ffffff0b;border-radius:8px;justify-content:center;align-items:center;transition:border-color .18s,transform .18s,background .18s;display:inline-flex}.modal-close:hover{background:#62d0c917;border-color:#62d0c99e;transform:translateY(-2px)}.modal-image-wrap{background-color:#050606;background-image:linear-gradient(90deg,#d7b46a0b 1px,#0000 1px),linear-gradient(#ffffff06 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:48px 48px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:0;padding:18px;overflow:auto}.modal-image-wrap img{background:#101212;border:1px solid #f4f1e81f;border-radius:6px;width:min(100%,1100px);height:auto;margin:0 auto;box-shadow:0 18px 60px #0000006b}@media (width<=1180px){.site-nav{grid-template-columns:1fr auto}.site-nav nav{display:none}.resume-layout,.profile-hero,.section-head,.video-section-head,.contact-inner{grid-template-columns:1fr}.resume-card{position:relative;top:auto}.stats-grid,.strength-grid,.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-card{grid-template-columns:1fr}.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-detail-grid{grid-template-columns:1fr}}@media (width<=720px){.container,.site-nav{width:min(100% - 28px,1700px)}.site-nav{height:54px;padding-left:14px;top:12px}.brand small{display:none}.portfolio-link{padding:0 10px}.hero{padding:112px 0 46px}.hero h1{font-size:clamp(58px,18vw,94px)}.hero p,.profile-hero p,.section-head p,.contact-inner p,.video-section-head p{font-size:15px}.section{padding:76px 0}.stats-grid,.case-grid,.strength-grid,.video-grid,.resume-panels{grid-template-columns:1fr}.case-content{padding:22px}.view-hint{opacity:1;transform:none}.project-modal{padding:10px}.modal-shell{max-height:calc(100svh - 20px)}.modal-head{padding:14px}.modal-close{width:40px;height:40px}.modal-image-wrap{padding:10px}.contact-card{padding:24px}.contact-card a{overflow-wrap:anywhere}}
