:root{color-scheme:dark;--bg:#0c0c0c;--fg:#d7e2ea}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:28px;background:var(--bg)}body{background:var(--bg);color:var(--fg);font-family:Arial,"Microsoft YaHei",sans-serif}main{overflow-x:clip}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #d5ff84;outline-offset:8px}nav a{transition:opacity .2s}nav a:hover{opacity:.7}.hero{height:100svh;min-height:690px;max-height:1200px;position:relative;display:flex;flex-direction:column;padding:30px 3vw 28px;isolation:isolate}nav{display:flex;justify-content:space-between;gap:20px;font-size:clamp(14px,1.5vw,22px);letter-spacing:.08em;z-index:3}.heading-wrap{margin-top:4vh}.metal{background:linear-gradient(180deg,#646973 0%,#bbccd7 100%);background-clip:text;-webkit-background-clip:text;color:transparent}h1{font-size:17.7vw;line-height:1.2;font-weight:900;letter-spacing:-.075em;white-space:nowrap}.hero-sub{font-size:clamp(12px,1.3vw,18px);letter-spacing:.28em;margin-top:10px}.hero-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:end;position:relative;z-index:3}.hero-bottom p{font-size:clamp(14px,1.4vw,21px);font-weight:300;line-height:1.55;letter-spacing:.05em}.pill{display:inline-flex;align-items:center;justify-content:center;gap:40px;border-radius:100px;padding:19px 35px;font-size:16px;letter-spacing:.12em;color:white;background:linear-gradient(123deg,#18011f 7%,#b600a8 37%,#7621b0 72%,#be4c00 100%);box-shadow:4px 4px 12px #7721b1 inset;outline:2px solid #e9dfea;outline-offset:-3px;transition:filter .3s,transform .3s}.pill:hover{filter:brightness(1.2)}.preview-label{position:absolute;bottom:7px;left:3vw;font-size:11px;color:#858c94}.hero-object{position:absolute;left:50%;top:53%;transform:translate(-50%,-30%);width:clamp(220px,32vw,480px);aspect-ratio:1;z-index:-1;pointer-events:none}.magnet{width:100%;height:100%;transition:transform .6s ease-out}.sculpture{width:100%;height:100%;position:relative;transform:rotate(-22deg)}.ring{position:absolute;inset:8%;border-radius:50%;border:clamp(22px,4vw,60px) solid #778089;background:transparent;box-shadow:inset 9px 7px 18px #e3ecf6,inset -12px -15px 20px #25292f,10px 10px 35px #0008;border-top-color:#d5dee4;border-bottom-color:#3a424a}.r1{transform:rotateY(54deg) rotateZ(20deg)}.r2{transform:rotateX(58deg) rotateZ(-20deg)}.r3{inset:21%;transform:rotateY(-35deg) rotateX(30deg)}.orb{position:absolute;inset:37%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f0f5fb,#7c8a96 40%,#242a31 75%);box-shadow:10px 14px 30px #0009}.ribbons{padding:140px 0 50px;overflow:hidden}.ribbon{display:flex;gap:12px;width:max-content;margin-bottom:12px;will-change:transform}.tile{width:clamp(240px,30vw,420px);height:clamp(160px,20vw,270px);border-radius:18px;display:flex;justify-content:center;align-items:center;position:relative;font-size:clamp(38px,5vw,70px);font-weight:900;letter-spacing:-.05em}.tile span,.sample span{position:absolute;bottom:17px;left:20px;font-size:12px;letter-spacing:.07em;font-weight:400}.lime{background:#ccdfab;color:#263722}.silver{background:#c5cbd0;color:#303841}.purple{background:#746c93;color:#e4dfee}.orange{background:#c78057;color:#381c10}.about{min-height:100svh;padding:150px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:55px;text-align:center}.eyebrow{font-size:13px;letter-spacing:.17em}.about h2,.section-head h2{font-size:clamp(64px,11vw,160px);line-height:1.1;font-weight:900;letter-spacing:-.06em}.animated-text{font-size:clamp(20px,2.1vw,29px);line-height:1.9;max-width:680px}.animated-text span{opacity:.22}.about .pill{margin-top:20px}.index-section{background:#f4f4f1;color:#0c0c0c;border-radius:60px 60px 0 0;padding:120px max(5vw,24px) 170px}.section-head{text-align:center;margin-bottom:90px}.section-head .eyebrow{margin-bottom:30px}.index-row{max-width:1150px;margin:auto;display:flex;align-items:center;gap:55px;padding:35px 0;border-bottom:1px solid #0c0c0c26;transition:padding .3s}.index-row:hover{padding-left:18px;padding-right:18px}.number{font-size:clamp(65px,9vw,130px);font-weight:900;letter-spacing:-.08em;line-height:1}.index-row h3{font-size:clamp(24px,3vw,38px);font-weight:500;margin-bottom:12px}.index-row p{font-size:16px;opacity:.6}.arrow{margin-left:auto;font-size:40px}.projects{position:relative;border-radius:60px 60px 0 0;margin-top:-60px;background:var(--bg);padding:120px 3vw 100px}.note{font-size:14px;color:#929ba4;margin-top:25px;line-height:1.6}.stack{max-width:1450px;margin:auto;padding-bottom:10vh}.project-card{position:sticky;top:40px;margin-bottom:16vh;border:2px solid #aab5bf;border-radius:50px;padding:26px;background:var(--bg);transform-origin:50% 0;will-change:transform;scroll-margin-top:45px}.project-card:nth-child(2){top:65px}.project-card:nth-child(3){top:90px}.card-heading{display:flex;align-items:center;gap:35px;padding:0 8px 24px}.card-heading p{font-size:13px;letter-spacing:.1em;margin-bottom:12px}.card-heading h3{font-size:clamp(22px,2.7vw,38px);font-weight:500}.status{margin-left:auto;border:1px solid #aab5bf;border-radius:99px;padding:12px 22px;font-size:14px;white-space:nowrap}.card-media{display:grid;grid-template-columns:2fr 3fr;gap:18px;height:clamp(300px,45vh,620px)}.mini-column{display:grid;grid-template-rows:2fr 3fr;gap:18px;min-height:0}.sample{border-radius:30px;display:grid;place-items:center;position:relative;font-size:clamp(35px,5vw,80px);font-weight:900;overflow:hidden}.sample.large{font-size:clamp(100px,18vw,240px)}footer{padding:90px 4vw 25px}footer h2{font-size:clamp(64px,13vw,180px);letter-spacing:-.06em;margin:35px 0}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #35393d;padding-top:25px;margin-top:120px;font-size:13px}.enter{animation:enter .9s both}.heading-wrap{animation-delay:.15s}.hero-bottom{animation-delay:.35s}@keyframes enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}.js .reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.js .reveal.visible{opacity:1;transform:none}@media(min-width:1800px){h1{font-size:300px}.hero{max-width:1800px;margin:auto}}@media(max-width:650px){.hero{padding:24px 20px 40px;min-height:620px;max-height:900px}nav{font-size:12px;gap:12px}.heading-wrap{margin-top:60px}h1{font-size:17.1vw}.hero-sub{font-size:10px;letter-spacing:.1em}.hero-object{width:270px;top:48%}.hero-bottom p{font-size:12px}.pill{font-size:14px;padding:16px 23px;gap:15px}.preview-label{left:20px;bottom:15px;font-size:10px}.ribbons{padding-top:65px}.about{min-height:750px;padding:100px 25px;gap:38px}.animated-text{font-size:20px}.index-section{border-radius:32px 32px 0 0;padding:80px 24px 115px}.section-head{margin-bottom:50px}.index-row{gap:25px;padding:30px 0}.index-row p{font-size:14px}.arrow{font-size:28px}.projects{border-radius:32px 32px 0 0;padding:80px 14px 30px;margin-top:-35px}.project-card{padding:14px;border-radius:28px;top:20px;margin-bottom:12vh}.project-card:nth-child(2){top:35px}.project-card:nth-child(3){top:50px}.card-heading{gap:18px;padding:5px 0 20px;flex-wrap:wrap}.card-heading .number{font-size:56px}.card-heading p{font-size:10px;margin-bottom:7px}.card-heading h3{font-size:21px}.status{font-size:11px;padding:7px 11px}.card-media{gap:10px;height:340px;grid-template-columns:2fr 3fr}.mini-column{gap:10px}.sample{border-radius:18px}.sample span{font-size:10px;left:10px;bottom:12px}.footer-bottom{font-size:11px;flex-wrap:wrap;margin-top:70px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.animated-text span{opacity:1!important}.ribbon,.project-card,.magnet{transform:none!important}.project-card{position:relative!important;top:auto!important}}
button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ccdfab;outline-offset:4px}.media-button{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:26px;overflow:hidden;background:#17191c}.media-button img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s}.media-button:hover img{transform:scale(1.025)}.real-tile{width:clamp(240px,30vw,420px);height:clamp(160px,20vw,270px);flex-shrink:0}.real-tile img{object-fit:cover}.format-badge{position:absolute;right:12px;bottom:12px;border-radius:20px;background:#0c0c0cdd;color:#e8edf2;padding:5px 10px;font-size:11px;letter-spacing:.08em}.video-cover{display:flex;height:100%;min-height:150px;align-items:center;justify-content:center;flex-direction:column;gap:15px;font-size:35px;color:#aab5bf;background:linear-gradient(140deg,#2e3138,#111215)}.video-cover small{font-size:14px}.project-card{top:calc(35px + var(--card-index,0)*15px)!important}.gallery-page{max-width:1600px;margin:auto;padding:35px 4vw 70px}.gallery-title{font-size:clamp(60px,10vw,130px);white-space:normal;margin-top:90px;letter-spacing:-.04em}.gallery-tabs{display:flex;gap:12px;flex-wrap:wrap;margin:45px 0 30px}.gallery-tabs a{border:1px solid #48505a;border-radius:50px;padding:12px 22px;font-size:14px}.gallery-tabs a[aria-current]{background:#d7e2ea;color:#0c0c0c}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 20px}.gallery-grid .media-button{height:auto;aspect-ratio:16/11;border-radius:15px}.gallery-grid h2{font-size:14px;line-height:1.65;font-weight:400;margin-top:14px;overflow-wrap:anywhere;color:#b2bdc7}.pagination{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:60px}.pagination button{border:1px solid #57606b;background:transparent;border-radius:40px;padding:12px 20px}.pagination button:disabled{opacity:.3;cursor:default}.media-dialog{position:fixed;inset:0;margin:auto;width:min(1400px,95vw);max-height:94svh;padding:20px;background:#111315;color:#d7e2ea;border:1px solid #555e69;border-radius:20px}.media-dialog::backdrop{background:#000d}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.viewer-top p{font-size:14px;overflow-wrap:anywhere}.viewer-close{flex-shrink:0;border:1px solid #66717f;border-radius:40px;padding:10px 18px;background:transparent}.viewer-content{display:flex;justify-content:center}.viewer-content img,.viewer-content video{display:block;max-width:100%;max-height:76svh;object-fit:contain}.viewer-error{font-size:14px;margin-top:12px}.viewer-error a{text-decoration:underline}body:has(dialog[open]){overflow:hidden}@media(max-width:750px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}.gallery-tabs a{padding:10px 14px}.gallery-title{margin-top:65px}.gallery-grid h2{font-size:12px}.media-dialog{padding:14px}.viewer-top p{font-size:12px}.media-button{border-radius:16px}.project-card{top:calc(20px + var(--card-index,0)*9px)!important}}@media(prefers-reduced-motion:reduce){.media-button:hover img{transform:none}}
.jack-hero{max-height:none;max-width:none;width:100%;height:100svh;min-height:700px;padding:30px 40px 40px;isolation:isolate}.jack-hero nav{position:relative;z-index:20;font-size:clamp(14px,1.6vw,23px)}.jack-heading{margin-top:25px;position:relative;z-index:1}.jack-heading h1{font-family:Arial,sans-serif;font-weight:900;font-size:16.2vw;letter-spacing:-.075em;line-height:1;white-space:nowrap}.jack-heading p{margin-top:20px;font-size:14px;letter-spacing:.22em}.jack-portrait{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:clamp(280px,38vw,520px);z-index:2;animation:portrait-enter 1s .6s both}.portrait-magnet{will-change:transform}.portrait-magnet img{display:block;width:100%;max-height:72svh;object-fit:contain;object-position:bottom}.portrait-magnet img[hidden]{display:none}.portrait-fallback{font-size:140px;font-weight:900;color:#a2b0c0;line-height:2;text-align:center}.portrait-fallback[hidden]{display:none}.jack-hero .hero-bottom{z-index:4}.jack-hero .hero-bottom p{max-width:260px}.jack-hero .hero-bottom .pill{animation:enter .7s .5s both}.subpage{max-width:1500px;margin:auto;padding:30px 4vw}.subnav{font-size:16px;letter-spacing:0;display:flex;justify-content:space-between;gap:20px}.page-kicker{margin-top:100px;margin-bottom:30px}.sub-title{font-size:clamp(64px,10vw,145px);line-height:1.2;white-space:normal;letter-spacing:-.06em;margin-bottom:55px}.bio-copy{font-size:clamp(22px,3vw,38px);line-height:1.8;max-width:1000px;margin-bottom:65px}.about-facts{display:flex;gap:65px;flex-wrap:wrap;border-top:1px solid #43484e;padding:40px 0 65px}.about-facts div{display:flex;flex-direction:column;gap:20px}.about-facts strong{font-size:clamp(25px,4vw,55px)}.about-facts span{font-size:14px;color:#a4aeb8}.contact-panel{padding:140px 0 40px}.contact-panel h2{font-size:clamp(45px,7vw,100px);margin-top:30px}.subfooter{display:flex;justify-content:space-between;gap:25px;padding:30px 0;margin-top:90px;border-top:1px solid #43484e;font-size:13px}.collection-link{display:flex;align-items:center;gap:40px;padding:35px 0;border-bottom:1px solid #43484e}.collection-link img,.collection-link .collection-preview-video{width:30%;aspect-ratio:16/10;object-fit:contain;background:#17191c;border-radius:20px}.collection-link h2{font-size:clamp(25px,4vw,56px);margin-top:20px}.collection-link span{font-size:14px;color:#a5b1bc}.collection-link b{margin-left:auto;font-size:40px}.detail-title{font-size:clamp(25px,4vw,60px);white-space:normal;letter-spacing:-.02em;overflow-wrap:anywhere;line-height:1.4;margin-bottom:45px}.detail-stage{background:#15171a;border-radius:25px;padding:20px;text-align:center}.detail-stage img,.detail-stage video{max-width:100%;max-height:85svh;object-fit:contain}.detail-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:30px;font-size:14px}.detail-actions button{background:transparent;border:1px solid #788390;border-radius:35px;padding:12px 20px}.detail-paging{display:flex;justify-content:space-between;margin-top:80px;font-size:16px;letter-spacing:0}.disabled{opacity:.3}@keyframes portrait-enter{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}@media(max-width:650px){.jack-hero{padding:25px 20px 35px;min-height:650px}.jack-hero nav{gap:10px;font-size:11px;letter-spacing:0}.jack-heading{margin-top:40px}.jack-heading h1{font-size:15.9vw}.jack-heading p{font-size:11px;letter-spacing:.1em}.jack-portrait{top:50%;bottom:auto;transform:translate(-50%,-43%);width:280px}.portrait-magnet img{max-height:55svh}.jack-hero .hero-bottom p{font-size:12px;max-width:150px}.jack-hero .hero-bottom .pill{font-size:13px;padding:16px 22px}.subnav{font-size:13px;gap:15px}.page-kicker{margin-top:70px}.collection-link{gap:20px}.collection-link h2{font-size:23px;margin-top:12px}.collection-link span{font-size:11px}.collection-link img,.collection-link .collection-preview-video{width:35%;border-radius:12px}.collection-link b{font-size:25px}.about-facts{gap:35px}.subfooter{font-size:11px;flex-wrap:wrap}.detail-stage{padding:10px;border-radius:15px}}@media(prefers-reduced-motion:reduce){.portrait-magnet{transform:none!important}}
.portrait-magnet{position:relative;transition:transform .3s ease-out}.tracking-eyes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.eye-pupil{transition:transform .12s ease-out}.performance-panel{margin-top:80px;border-top:1px solid #414952;padding-top:35px}.performance-panel h2{font-size:32px;font-weight:500}.performance-record{padding:30px 0;border-bottom:1px solid #333b43}.performance-record h3{font-size:18px;font-weight:400}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;margin-top:30px}.metrics-grid dt{font-size:13px;color:#a9b5c0}.metrics-grid dd{font-size:26px;margin:12px 0 0}.jack-portrait{width:clamp(280px,35vw,480px)}@media(max-width:650px){.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jack-portrait{width:280px}.performance-panel h2{font-size:26px}}@media(prefers-reduced-motion:reduce){.eye-pupil{transform:none!important}}
/* Orange portrait: preserve its original background and eye coordinates. */
.jack-portrait{width:min(420px,40vw,40.5svh)}.portrait-magnet{aspect-ratio:941/1672;border-radius:28px 28px 0 0;overflow:hidden}.portrait-magnet img{width:100%;height:auto;max-height:none;object-fit:contain}.tracking-eyes{width:100%;height:100%}@media(max-width:650px){.jack-portrait{width:min(280px,65vw,40svh)}.portrait-magnet img{max-height:none}.portrait-magnet{border-radius:22px}}
/* Keep the source portrait unchanged; hide its backdrop with a character silhouette. */
.portrait-magnet img{mask-image:url('assets/character-mask.svg');-webkit-mask-image:url('assets/character-mask.svg');mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.portrait-magnet{border-radius:0;overflow:visible;background:transparent}
/* The boy and cat asset already has a transparent background. */
.portrait-magnet img{mask-image:none;-webkit-mask-image:none}.jack-portrait{width:min(440px,44vw,43svh)}.eye-pupil[data-kind="cat"]{transition:transform .18s ease-out}.eye-pupil[data-kind="boy"]{transition:transform .12s ease-out}@media(max-width:650px){.jack-portrait{width:min(300px,72vw,43svh)}}
/* Enlarge the duo to fill the hero, with the portrait above the heading. */
.jack-hero .jack-portrait{width:auto;height:calc(100% - 35px);aspect-ratio:941/1672;top:auto;bottom:0;left:50%;transform:translateX(-50%);z-index:2}.jack-hero .portrait-magnet{width:100%;height:100%;aspect-ratio:941/1672}.jack-hero .portrait-magnet img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}.jack-hero .jack-heading{z-index:1}.jack-hero nav{z-index:20}@media(max-width:650px){.jack-hero .jack-portrait{height:min(calc(100% - 65px),155vw);top:auto;bottom:25px;transform:translateX(-50%)}.jack-hero .hero-bottom{z-index:4}}
.cyber-hero{--pink:#ff347f;background:radial-gradient(ellipse at 52% 43%,#45102c60,transparent 53%),#08090d!important;padding:0 4vw 0 7vw!important;min-height:780px!important;overflow:hidden;perspective:1200px}.cyber-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ff398209 1px,transparent 1px),linear-gradient(90deg,#ff398209 1px,transparent 1px);background-size:85px 85px;z-index:0}.cyber-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;height:90px;border-bottom:1px solid #f174aa16;z-index:20}.cyber-brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700;white-space:nowrap}.cyber-brand>span{color:var(--pink);font-size:32px;text-shadow:0 0 12px #ff388b}.cyber-nav nav{display:flex;gap:30px!important;font-size:13px!important;letter-spacing:.03em!important}.cyber-nav nav a[aria-current]{color:#ffa3c9;text-shadow:0 0 10px #fa258d}.cyber-contact{background:var(--pink);color:#180912;font-size:14px;padding:13px 24px;border-radius:5px}.cyber-rail{position:absolute;inset:0 auto 0 0;width:55px;border-right:1px solid #ea57921c;display:flex;align-items:center;flex-direction:column;gap:38px;padding:25px 0;color:var(--pink);z-index:20}.rail-line{height:55px;width:1px;background:var(--pink)}.vertical-label{writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em;color:#8d7787}.rail-bottom{margin-top:auto}.cyber-topline{display:flex;justify-content:space-between;margin-top:35px;position:relative;z-index:1;font-size:10px;letter-spacing:.2em;color:#8d798b}.cyber-topline b{color:var(--pink);margin-left:15px}.cyber-title{position:absolute;top:155px;left:7vw;right:4vw;font-size:clamp(70px,12.1vw,250px);line-height:.95;letter-spacing:-.07em;color:#b888a6;font-weight:900;text-shadow:3px 0 #f830791e;white-space:nowrap;z-index:1}.cyber-hero .jack-portrait{height:calc(100% - 55px);left:53%;bottom:-15px;z-index:3;pointer-events:none}.cyber-hero .portrait-magnet{transform-origin:50% 70%;filter:drop-shadow(-7px 0 13px #f9338a40) drop-shadow(8px 0 15px #9035ff40)}.neon-visor{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.visor-frame{filter:drop-shadow(0 0 7px #ff1d8d)}.visor-sweep{transform:translateX(var(--reflection,0px));transition:transform .12s ease-out}.cyber-story{position:absolute;top:44%;z-index:5;max-width:26%;}.story-left{left:7vw}.story-right{right:4vw}.cyber-label{font-size:11px;letter-spacing:.2em;color:#a38c9b;margin-bottom:12px}.cyber-story h2{font-size:clamp(20px,2vw,36px);color:var(--pink);font-weight:500;letter-spacing:.05em;margin-bottom:18px}.cyber-story>p:last-of-type{font-size:14px;line-height:1.8;color:#b5a5b0}.cyber-outline{display:flex;justify-content:space-between;gap:20px;border:1px solid #ff347f66;padding:13px 18px;margin-top:28px;font-size:12px;max-width:210px;clip-path:polygon(0 0,100% 0,100% 75%,93% 100%,0 100%);transition:background .2s}.cyber-outline:hover{background:#ff347f33}.cyber-stats{position:absolute;bottom:32px;left:7vw;right:4vw;display:grid;grid-template-columns:repeat(3,1fr);z-index:6;border:1px solid #c551851f;background:#0b0c13bb;backdrop-filter:blur(14px);border-radius:8px}.cyber-stats>a{display:flex;align-items:center;gap:25px;padding:25px 30px;min-width:0}.cyber-stats>a+a{border-left:1px solid #c5518529}.cyber-stats small{font-size:10px;letter-spacing:.07em;color:#b8acb4;display:block}.cyber-stats strong{font-size:36px;color:var(--pink);display:block;margin-top:8px}.cyber-stats p{font-size:12px;color:#998693;margin-top:7px}.wire-orb{font-size:65px;color:#ff347f88}.cyber-next{margin-left:auto;width:50px;height:50px;border:1px solid #ff347f;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 20px #ff347f33;font-size:25px}@media(max-width:900px){.cyber-nav nav{gap:15px!important}.cyber-story{max-width:25%}.cyber-stats>a{padding:20px 15px}.wire-orb{display:none}.cyber-hero .jack-portrait{left:52%}.cyber-story h2{font-size:21px}}@media(max-width:650px){.cyber-hero{min-height:850px!important;padding:0 20px!important}.cyber-rail{display:none}.cyber-nav{height:105px;flex-wrap:wrap;gap:8px;align-content:center}.cyber-brand{font-size:14px}.cyber-brand>span{font-size:25px}.cyber-contact{padding:9px 14px;font-size:12px}.cyber-nav nav{order:3;width:100%;justify-content:space-between;gap:8px!important;font-size:11px!important;margin-top:8px}.cyber-topline{margin-top:20px;font-size:8px;letter-spacing:.08em}.cyber-title{left:20px;right:20px;top:155px;font-size:12vw}.cyber-hero .jack-portrait{height:590px;left:53%;bottom:80px;width:auto}.cyber-story{top:225px;max-width:42%}.story-left{left:20px}.story-right{right:20px;top:auto;bottom:180px;max-width:37%}.cyber-story h2{font-size:16px;margin-bottom:10px}.cyber-story>p:last-of-type{font-size:11px}.cyber-label{font-size:8px}.cyber-outline{margin-top:15px;padding:10px;font-size:10px}.cyber-stats{left:15px;right:15px;bottom:15px}.cyber-stats>a{padding:14px 10px;gap:5px}.cyber-stats small{font-size:8px}.cyber-stats strong{font-size:26px}.cyber-stats p{font-size:9px;line-height:1.4}.cyber-next{display:none}}@media(prefers-reduced-motion:reduce){.visor-sweep{transform:none!important}.cyber-hero .portrait-magnet{transform:none!important}}
/* Layered creative tools and mechanical hand */
.cyber-hero .creative-portrait{height:calc(100% - 105px);width:auto;aspect-ratio:1086/1448;left:53%;bottom:0;perspective:1100px}.creative-portrait .portrait-magnet{aspect-ratio:1086/1448;filter:none;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.creative-scene{display:block;width:100%;height:100%;overflow:visible;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 89%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 89%,transparent)}.tool-float{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .4s;filter:drop-shadow(0 0 2px var(--tool-color))}.tool-float.is-near{filter:drop-shadow(0 0 13px var(--tool-color))}.cyber-hero .creative-portrait{pointer-events:none}@media(max-width:650px){.cyber-hero .creative-portrait{height:590px;bottom:90px;left:50%}}@media(prefers-reduced-motion:reduce){.tool-float{transform:none!important;transition:none!important}.creative-portrait .portrait-magnet{transform:none!important}}
.cyber-hero .keycaps-portrait{width:min(1000px,78vw);height:auto;aspect-ratio:16/9;left:52%;top:27%;bottom:auto;transform:translateX(-50%);pointer-events:none;perspective:1000px}.keycaps-portrait .portrait-magnet{width:100%;height:auto;aspect-ratio:16/9;filter:drop-shadow(0 14px 25px #0008);transition:transform .4s ease-out}.keycaps-portrait .portrait-magnet img{width:100%;height:auto;max-height:none;mask:none;-webkit-mask:none}.cyber-hero .keycaps-portrait img{object-fit:contain}@media(max-width:650px){.cyber-hero .keycaps-portrait{width:110vw;height:auto;top:32%;bottom:auto;left:50%}}@media(prefers-reduced-motion:reduce){.keycaps-portrait .portrait-magnet{transform:none!important}}
.keyboard-scene{position:absolute;left:50%;top:31%;width:min(850px,65vw);height:360px;transform:translateX(-50%);z-index:4;perspective:1000px}.keyboard-layout{position:relative;width:100%;height:100%}.key-position{position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-10%)}.key-position[data-id=game]{width:26%}.key-parallax,.key-idle,.key-gather{position:relative;width:100%;height:100%;transform-style:preserve-3d}.key-cap{position:relative;width:100%;height:100%;border:1px solid #fff8;border-radius:22%;background:linear-gradient(145deg,#fff,#e4e4e4 65%,#bcbcbc);color:#111;box-shadow:inset 3px 4px 5px #fff,-7px 13px 0 #a7a7a7,-9px 15px 2px #797979;rotate:var(--angle);cursor:pointer;display:grid;place-items:center;touch-action:manipulation;font-family:Arial,sans-serif;font-size:clamp(30px,5vw,68px);font-weight:700;transform-origin:center}.key-w,.key-game{background:linear-gradient(145deg,#ff704b,#ff3415 60%,#ec2608);box-shadow:inset 3px 3px 4px #ffb39b,-7px 13px 0 #c92508,-9px 15px 2px #9b1c06;border-color:#ffad87}.key-r,.key-s{background:linear-gradient(145deg,#333,#161616);color:white;box-shadow:inset 2px 2px 3px #777,-7px 13px 0 #111,-9px 15px 2px #050505;border-color:#666}.key-game{font-size:clamp(20px,3vw,40px);border-radius:17%}.key-shadow{position:absolute;bottom:-30px;left:5%;width:95%;height:20px;background:#000;border-radius:50%;filter:blur(10px);opacity:.13;pointer-events:none;z-index:-1}.key-cap:focus-visible{outline:3px solid #fff;outline-offset:7px}@media(max-width:1000px){.keyboard-scene{width:66vw;height:300px}}@media(max-width:650px){.keyboard-scene{top:39%;width:90vw;height:230px;left:53%}.key-cap{border-radius:16%;box-shadow:inset 2px 2px 3px #fff7,-4px 8px 0 #888}.key-w,.key-game{box-shadow:inset 2px 2px 3px #ffb39b,-4px 8px 0 #bc240a}.key-r,.key-s{box-shadow:inset 2px 2px 3px #777,-4px 8px 0 #090909}.key-shadow{bottom:-20px;height:12px}}
.key-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.key-cap.has-art{background:none;box-shadow:none;border:0}.key-cap.has-art>span{visibility:hidden}
/* Use the supplied transparent keycaps in their original orientations. */
.key-cap.has-art{rotate:0deg;border-radius:0;background:transparent!important;box-shadow:none!important;border:0!important;overflow:visible}.key-cap.has-art .key-art{object-fit:contain;pointer-events:none;user-select:none}.key-position[data-id=game]{aspect-ratio:1448/1086}.key-cap.has-art:focus-visible{outline:2px solid #eee;outline-offset:5px;border-radius:12px}
/* Larger, closely grouped keycaps with responsive spacing. */
.keyboard-scene{width:min(1080px,76vw);height:auto;aspect-ratio:2.4;top:29%;left:52%}.key-position{width:26%}.key-position[data-id=game]{width:32%}.key-shadow{bottom:-12px;width:80%;left:10%}@media(max-width:1000px){.keyboard-scene{width:78vw;height:auto;aspect-ratio:2.4}}@media(max-width:650px){.keyboard-scene{width:94vw;left:50%;top:39%;height:auto;aspect-ratio:2.1}.key-position{width:26%}.key-position[data-id=game]{width:32%}}
/* Match the four lower homepage sections to the Hero surface. */
body:has(.cyber-hero){background-color:#08090d}
body:has(.cyber-hero) main>.ribbons,
body:has(.cyber-hero) main>#about,
body:has(.cyber-hero) main>#work,
body:has(.cyber-hero) main>footer#contact{
 background-color:#08090d;
 background-image:linear-gradient(rgba(255,57,130,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,57,130,.035) 1px,transparent 1px);
 background-size:85px 85px;
 background-position:0 0;
}
body:has(.cyber-hero) #work .project-card{background-color:#08090d}
/* Emphasize W without competing with its press animation. */
.keyboard-layout .key-position[data-id="w"]{width:30%;z-index:2}
/* Enlarge the keyboard as one composition; retain each key's local animation. */
.keyboard-scene{scale:1.2;transform-origin:50% 0}
/* Section-specific edge markings repeat the Hero's restrained graphic language. */
.decorated-home>.ribbons,.decorated-home>#about,.decorated-home>.index-section,.decorated-home>#work,.decorated-home>footer#contact{position:relative}
.decorated-home>.ribbons::before,.decorated-home>#about::before,.decorated-home>.index-section::before,.decorated-home>#work::before,.decorated-home>footer#contact::before{position:absolute;left:16px;top:40px;writing-mode:vertical-rl;font:10px/1.5 Arial,sans-serif;letter-spacing:.22em;color:#bd547b;border-left:1px solid #ff347f30;padding-left:12px;pointer-events:none;z-index:7}
.decorated-home>.ribbons::before{content:'▦   01 / SELECTED FRAMES';height:100px}
.decorated-home>#about::before{content:'◎   02 / ABOUT THE DESIGNER';height:180px;top:70px}
.decorated-home>.index-section::before{content:'＋   03 / COLLECTION INDEX';color:#765665;border-color:#76566550;height:125px}
.decorated-home>#work::before{content:'◇   04 / VISUAL ARCHIVE';height:210px;top:75px}
.decorated-home>footer#contact::before{content:'↗   05 / CONNECT';height:95px}
.page-edge{position:fixed;left:0;top:0;bottom:0;width:42px;display:flex;align-items:center;flex-direction:column;gap:35px;padding:25px 0;border-right:1px solid #ff347f20;color:#bd547b;pointer-events:none;z-index:10}.page-edge i{width:1px;height:70px;background:#ff347f35}.page-edge small{writing-mode:vertical-rl;font-size:9px;letter-spacing:.18em}.page-edge b{font-weight:400;margin-top:auto}.decorated-subpage .subpage,.decorated-subpage .gallery-page{padding-left:max(65px,5vw)}
@media(max-width:650px){.keyboard-scene{width:78.33vw;left:50%}.decorated-home>.ribbons::before,.decorated-home>#about::before,.decorated-home>.index-section::before,.decorated-home>#work::before,.decorated-home>footer#contact::before{writing-mode:horizontal-tb;left:20px;top:18px;height:auto;font-size:8px;letter-spacing:.12em;border-left:0;border-top:1px solid #ff347f30;padding:8px 0 0}.page-edge{width:18px;gap:25px}.page-edge>span,.page-edge>b{font-size:11px}.page-edge small{font-size:8px}.decorated-subpage .subpage,.decorated-subpage .gallery-page{padding-left:32px}}
/* Bilingual navigation and revised hero typography. */
.cyber-nav{gap:clamp(20px,3vw,60px)}
.cyber-nav nav{flex:1;justify-content:space-evenly;gap:clamp(18px,2.6vw,50px)!important}
.cyber-nav nav a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cyber-nav nav a span{font-size:11px;letter-spacing:.1em;color:#a58c9b}
.cyber-title{font-size:clamp(90px,15.7vw,310px);letter-spacing:-.065em;text-transform:none;line-height:.98}
.hero-watermark{position:absolute;left:7vw;right:4vw;bottom:170px;text-align:center;font-size:clamp(75px,12.6vw,245px);font-weight:900;letter-spacing:-.065em;line-height:1;color:rgba(184,136,166,.105);pointer-events:none;user-select:none;z-index:1;margin:0}
/* Wide artwork panels keep a 1920:670 frame without cropping the artwork. */
.ribbons .real-tile{width:clamp(640px,62vw,1440px);height:auto;aspect-ratio:1920/670;flex-shrink:0}
.ribbons .real-tile img{width:100%;height:100%;object-fit:contain}
.ribbons .ribbon{gap:22px;margin-bottom:22px}
@media(max-width:1000px){.cyber-nav{gap:18px}.cyber-nav nav{gap:12px!important}.cyber-nav nav a{flex-direction:column;gap:4px}.cyber-nav nav a span{font-size:9px}.hero-watermark{bottom:175px}}
@media(max-width:650px){.cyber-nav nav{justify-content:space-between;gap:8px!important}.cyber-nav nav a span{font-size:8px;letter-spacing:.03em}.cyber-title{font-size:16vw;left:20px;right:20px}.hero-watermark{left:15px;right:15px;bottom:135px;font-size:12.5vw}.ribbons .real-tile{width:90vw;height:auto;aspect-ratio:1920/670}.ribbons .ribbon{gap:12px;margin-bottom:12px}}
/* Updated introduction and compact, three-row artwork preview. */
.cyber-story{max-width:21%;top:43%}.cyber-story>p:not(.cyber-label){font-size:14px;line-height:1.85;color:#b5a5b0}.cyber-story .design-motto{margin-top:18px;margin-bottom:8px;color:#dbc3d2!important}.hero-specialties{list-style:none;padding:0;margin:15px 0 20px;font-size:clamp(17px,1.45vw,25px);line-height:1.65;color:#e3c9d8}.cyber-story .cyber-outline{margin-top:20px}.ribbons .real-tile{width:clamp(360px,34vw,640px);height:auto;aspect-ratio:1920/800}.ribbons .ribbon{gap:16px;margin-bottom:16px}.ribbons .real-tile img{object-fit:contain}@media(max-width:650px){.cyber-hero{min-height:1100px!important}.cyber-story{max-width:44%;top:auto;bottom:210px}.story-left{left:20px}.story-right{right:20px}.cyber-story>p:not(.cyber-label){font-size:11px;line-height:1.7}.hero-specialties{font-size:15px;margin:10px 0 14px}.cyber-story .cyber-label{font-size:8px;letter-spacing:.08em}.cyber-story .design-motto{margin-top:12px}.keyboard-scene{top:25%}.hero-watermark{bottom:145px}.ribbons .real-tile{width:78vw;aspect-ratio:1920/800}.ribbons .ribbon{gap:10px;margin-bottom:10px}}
/* Right hero copy: smaller English, more prominent Chinese. */
.cyber-story.story-right .hero-specialties{font-size:clamp(14px,1.05vw,18px);line-height:1.75;margin-bottom:22px}
.cyber-story.story-right>p:not(.cyber-label){font-size:clamp(16px,1.15vw,20px);line-height:1.85;color:#d5c7d0}
@media(max-width:650px){.cyber-story.story-right .hero-specialties{font-size:12px;margin-bottom:16px}.cyber-story.story-right>p:not(.cyber-label){font-size:14px;line-height:1.8}}
/* Wider initials and a larger, stationary title behind the keys. */
.cyber-title{font-size:clamp(90px,16.7vw,340px);letter-spacing:-.075em;line-height:1.12;top:155px;z-index:1;--title-light-x:50%;--title-light-y:50%;--title-light-opacity:0;background-image:radial-gradient(ellipse at var(--title-light-x) var(--title-light-y),#dcc8dc 0%,#c49ac0 25%,#b888a6 65%);background-size:160% 180%;background-position:var(--title-light-x) var(--title-light-y);background-clip:text;-webkit-background-clip:text;color:transparent;transition:filter .5s;filter:saturate(calc(1 + var(--title-light-opacity)*.12))}.cyber-title .title-initials{letter-spacing:.025em}.keyboard-scene{z-index:4}
@media(max-width:650px){.cyber-title{font-size:16.3vw;top:155px;letter-spacing:-.075em}.cyber-title .title-initials{letter-spacing:.01em}}
@media(prefers-reduced-motion:reduce){.cyber-title{background-image:none;color:#b888a6;filter:none;transition:none}}
/* Resume-led introduction, with clearly scoped experience and results. */
#about.resume-about{padding:110px max(7vw,28px);gap:0;min-height:0;align-items:stretch;text-align:left}.resume-intro{max-width:1000px;margin:0 auto;text-align:center}.resume-intro h2{margin:26px 0 35px}.resume-intro .animated-text{max-width:880px;font-size:clamp(20px,1.8vw,28px);margin:auto;line-height:1.85}.resume-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}.resume-tags span{font-size:13px;color:#bfa8b6;border:1px solid #bc628a33;padding:9px 16px;border-radius:30px}.resume-highlights{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:1200px;margin:65px auto 75px;border-top:1px solid #ad5b802d;border-bottom:1px solid #ad5b802d;padding:32px 0}.resume-highlights>div{text-align:center;padding:10px 20px}.resume-highlights>div+div{border-left:1px solid #ad5b802d}.resume-highlights strong{font-size:clamp(40px,5vw,70px);font-weight:500;color:#cfacc0}.resume-highlights strong span{font-size:19px;margin-left:7px}.resume-highlights p{font-size:14px;line-height:1.7;color:#a99ea8;margin-top:10px}.experience-heading,.experience-list,.earlier-experience{width:100%;max-width:1200px;margin:0 auto}.experience-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.experience-heading>p:last-child{font-size:14px;color:#a99ea8}.experience-item{display:grid;grid-template-columns:230px 1fr;gap:35px;border-top:1px solid #b6809a26;padding:32px 0}.experience-date{font-size:14px;letter-spacing:.04em;color:#b589a2;padding-top:6px}.experience-item h3{font-size:22px;font-weight:500;line-height:1.5;margin-bottom:15px}.experience-item h3 span{display:block;font-size:14px;font-weight:400;color:#bc9caf;margin-top:8px}.experience-item div>p,.earlier-experience>p:last-child{font-size:16px;line-height:1.9;color:#b5aab3}.experience-item div>.experience-result{font-size:14px;color:#d1adc1;margin-top:14px;padding-left:15px;border-left:2px solid #ae577e}.earlier-experience{border-top:1px solid #b6809a26;padding-top:30px;margin-top:10px}.earlier-experience>p:last-child{margin-top:18px}#about.resume-about>.pill{align-self:center;margin-top:45px}@media(max-width:650px){#about.resume-about{padding:80px 28px}.resume-highlights{margin:40px auto;padding:20px 0}.resume-highlights>div{padding:8px}.resume-highlights strong{font-size:34px}.resume-highlights strong span{font-size:12px}.resume-highlights p{font-size:12px}.experience-heading{display:block}.experience-heading>p:last-child{margin-top:12px}.experience-item{grid-template-columns:1fr;gap:13px;padding:25px 0}.experience-item h3{font-size:20px}.experience-item div>p,.earlier-experience>p:last-child{font-size:15px}.experience-item div>.experience-result{font-size:13px}}
.ribbons .high-spend-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;padding:6px 11px;border-radius:6px;border:1px solid #ff7fb080;background:#26131feb;color:#ffc4dc;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.04em;pointer-events:none;box-shadow:0 2px 8px #0004}@media(max-width:650px){.ribbons .high-spend-badge{top:9px;left:9px;padding:5px 9px;font-size:12px}}
/* Prominent corner ribbon for high-spend work. */
.ribbons .high-spend-badge{top:22px;left:-42px;width:168px;height:34px;padding:0;display:flex;justify-content:center;align-items:center;transform:rotate(-45deg);border:0;border-radius:0;background:#ed2868;color:#fff;font-size:15px;font-weight:700;line-height:1;letter-spacing:.12em;box-shadow:0 3px 10px #0007;z-index:3}
@media(max-width:650px){.ribbons .high-spend-badge{top:18px;left:-43px;width:155px;height:30px;padding:0;font-size:13px}}
/* Refined corner marker, matching the site's dark surfaces and pink accents. */
.ribbons .high-spend-badge{top:0;left:0;width:auto;height:34px;min-width:92px;padding:0 19px 0 15px;transform:none;justify-content:center;border:0;border-radius:0;background:rgba(17,12,20,.94);color:#e9bfd3;font-size:12px;font-weight:500;line-height:1;letter-spacing:.12em;box-shadow:inset 0 -1px 0 #b85b8466;clip-path:polygon(0 0,100% 0,100% 65%,calc(100% - 12px) 100%,0 100%);z-index:3}
.ribbons .high-spend-badge::before{content:'';width:4px;height:4px;flex:0 0 4px;background:#d77ca4;box-shadow:none;margin-right:8px;transform:rotate(45deg)}
@media(max-width:650px){.ribbons .high-spend-badge{top:0;left:0;min-width:84px;width:auto;height:30px;padding:0 16px 0 12px;font-size:11px}}
/* Strengthen the marker and label while preserving the dark corner treatment. */
.ribbons .high-spend-badge{color:#ffe1ed;font-size:13px;font-weight:700;letter-spacing:.1em}
.ribbons .high-spend-badge::before{width:6px;height:6px;flex-basis:6px;border-radius:50%;transform:none;background:#ff427d;box-shadow:0 0 7px #ff427d66;margin-right:9px}
@media(max-width:650px){.ribbons .high-spend-badge{font-size:12px}}
/* Detailed resume page: subdued grid, editorial hierarchy, scoped highlights. */
body.resume-page{background-color:#08090d;background-image:linear-gradient(#ff398209 1px,transparent 1px),linear-gradient(90deg,#ff398209 1px,transparent 1px);background-size:85px 85px}.resume-page .subpage{max-width:1460px}.resume-page-hero{padding:105px 0 75px;border-bottom:1px solid #bb6a9029}.resume-page-hero h1{font-size:clamp(50px,6.5vw,100px);line-height:1.2;white-space:normal;letter-spacing:-.04em;margin:30px 0}.resume-page-hero h1 span{color:#c18eaa}.resume-page-lead{font-size:clamp(18px,1.7vw,24px);line-height:1.9;max-width:850px;color:#c3b6c1}.resume-page-motto{color:#a17e95;margin-top:22px;font-size:16px}.resume-jumps{display:flex;justify-content:flex-start;gap:35px;letter-spacing:0;font-size:14px;margin-top:40px}.resume-jumps a{border-bottom:1px solid #b06c8b;padding-bottom:8px}.resume-section-heading{margin:80px 0 35px}.resume-section-heading>span{font-size:12px;letter-spacing:.15em;color:#ad849a}.resume-section-heading h2{font-size:36px;font-weight:500;margin-top:15px}.resume-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.resume-summary-grid article{background:#100e15db;border:1px solid #a76b852f;padding:35px 28px;border-radius:12px}.resume-summary-grid strong{font-size:clamp(42px,5vw,70px);font-weight:500;color:#ddb5cc}.resume-summary-grid strong span{font-size:20px;margin-left:7px}.resume-summary-grid p{font-size:15px;line-height:1.7;margin-top:12px}.resume-summary-grid small{display:block;color:#988695;font-size:12px;margin-top:8px}.resume-full-intro{font-size:17px;line-height:2;color:#b9abb7;margin:35px 0}.resume-skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:25px 0}.resume-skill-grid h3{font-size:18px;color:#d5adc4;font-weight:500;margin-bottom:15px}.resume-skill-grid p{font-size:15px;line-height:1.9;color:#b3a4b0}.career-card{display:grid;grid-template-columns:230px minmax(0,1fr);gap:45px;padding:45px 0;border-top:1px solid #b06a8b33}.career-side{position:relative;border-left:1px solid #b06a8b44;padding-left:25px}.career-side::before{content:'';position:absolute;top:5px;left:-4px;width:7px;height:7px;border-radius:50%;background:#cb729c}.career-number{font-size:45px;line-height:1;color:#815b73}.career-side p{margin-top:22px;font-size:14px;color:#b39aa9;line-height:1.8}.career-main h3{font-size:clamp(22px,2.1vw,32px);line-height:1.5;font-weight:500}.career-role{font-size:16px;color:#d2a5bf;margin-top:8px}.career-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.career-tags span{font-size:12px;padding:6px 10px;border:1px solid #a8708c33;border-radius:5px;color:#b9a0af}.career-main ul{padding-left:20px;color:#bfb2bc}.career-main li{font-size:16px;line-height:1.95;padding-left:4px;margin-bottom:12px}.career-main li::marker{color:#ae698b}.career-achievement{background:linear-gradient(110deg,#62264026,#170f1926);border-left:2px solid #c7759e;padding:22px 25px;margin-top:25px}.career-achievement>span{font-size:11px;letter-spacing:.12em;color:#bd90a9}.career-achievement p{font-size:16px;line-height:1.9;color:#e0c1d2;margin-top:12px}.education-card{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #b06a8b33;border-bottom:1px solid #b06a8b33;padding:30px 0}.education-card h3{font-size:25px;font-weight:500}.education-card p{font-size:16px;color:#b9a5b2}.resume-contact{padding:90px 0 20px}.resume-contact h2{font-size:clamp(32px,4vw,56px);font-weight:500;margin:25px 0 35px}@media(max-width:700px){.resume-page-hero{padding:65px 0 45px}.resume-summary-grid{grid-template-columns:1fr;gap:12px}.resume-summary-grid article{padding:22px}.resume-skill-grid{grid-template-columns:1fr;gap:25px}.career-card{grid-template-columns:1fr;gap:22px;padding:30px 0}.career-side{display:flex;align-items:center;gap:20px}.career-side p{margin:0}.career-number{font-size:30px}.career-main li{font-size:15px}.career-achievement{padding:18px}.education-card{align-items:flex-start;flex-direction:column;gap:14px}.resume-section-heading{margin-top:55px}.resume-section-heading h2{font-size:30px}.resume-jumps{gap:20px;font-size:13px}}
/* More career detail within a stable row footprint. */
#about .experience-item{padding:24px 0;transition:background-color .25s}#about .experience-item:hover{background-color:#ad587d08}.experience-tabs{display:flex;gap:20px;margin:12px 0 10px}.experience-tabs button{font-size:12px;padding:4px 0 7px;border:0;border-bottom:1px solid transparent;background:transparent;color:#a294a1;transition:color .2s,border-color .2s}.experience-tabs button[aria-selected=true]{color:#e1b6ce;border-bottom-color:#bf7298}.experience-tabs button:focus-visible{outline:2px solid #c995b2;outline-offset:4px}.experience-detail{height:100px;overflow:auto;scrollbar-width:thin;scrollbar-color:#85556d transparent;padding-right:8px}.experience-item .experience-detail p{font-size:15px;line-height:1.85;color:#c3b5c0;margin:0}.experience-item .experience-result[hidden]{display:none}@media(max-width:650px){#about .experience-item{padding:25px 0}.experience-detail{height:155px}.experience-tabs{gap:17px}.experience-item .experience-detail p{font-size:14px}}

/* Detailed resume copy, with restrained pointer highlighting. */
.experience-detail .experience-point{display:flex;gap:10px;padding:5px 8px;margin:0 0 5px;border-left:2px solid transparent;border-radius:2px;transition:color .18s,background-color .18s,border-color .18s}
.experience-point-number{flex-shrink:0;font-size:10px;line-height:2.8;color:#976c83;transition:color .18s}
.experience-detail .experience-point:hover{color:#ffe3f0;background:#c7799c16;border-left-color:#d58dae}
.experience-point:hover .experience-point-number{color:#f6afd0}
#about .experience-item h3,#about .experience-role{transition:color .18s,text-shadow .18s}
#about .experience-item h3:hover,#about .experience-role:hover{color:#ffcee6;text-shadow:0 0 18px #d4719b35}
.experience-detail:focus-visible{outline:1px solid #c995b2;outline-offset:3px}

/* Fine technical ornament in the career heading's open corner. */
#about .experience-item{position:relative}
#about .experience-item::after{content:'';position:absolute;right:8px;top:25px;width:170px;height:46px;pointer-events:none;opacity:.48;background:linear-gradient(#c18aa6,#c18aa6) right top/25px 1px no-repeat,linear-gradient(#c18aa6,#c18aa6) right top/1px 13px no-repeat,linear-gradient(#c18aa6,#c18aa6) left bottom/25px 1px no-repeat,linear-gradient(#c18aa6,#c18aa6) left bottom/1px 13px no-repeat,repeating-linear-gradient(90deg,#b7819a 0 1px,transparent 1px 7px) center/95px 7px no-repeat;transition:opacity .25s}
#about .experience-item:hover::after{opacity:.8}
@media(max-width:900px){#about .experience-item::after{width:65px;opacity:.25;background-size:15px 1px,1px 10px,15px 1px,1px 10px,30px 5px}}
@media(max-width:650px){#about .experience-item::after{display:none}}

/* Compact career ornament: a fine rule with two pinpoint accents. */
#about .experience-item::after{width:46px;height:12px;right:10px;top:34px;opacity:.5;background:radial-gradient(circle,#dab0c4 0 1.5px,transparent 2px) right center/5px 5px no-repeat,linear-gradient(90deg,transparent,#ad7a93) left center/32px 1px no-repeat,radial-gradient(circle,#ad7a93 0 1px,transparent 1.5px) 35px center/3px 3px no-repeat}
#about .experience-item:hover::after{opacity:.8}

#about .experience-tabs button{font-size:16px;line-height:1.5;font-weight:500;padding:5px 0 8px}#about .experience-tabs{gap:26px}@media(max-width:650px){#about .experience-tabs button{font-size:15px}}

/* Gentle introduction lighting and readable hover feedback. */
.resume-intro{position:relative;isolation:isolate}
.resume-intro::before{content:'';position:absolute;inset:-16px;z-index:-1;pointer-events:none;background:radial-gradient(220px circle at var(--intro-x,50%) var(--intro-y,50%),#c57c9d19,transparent 75%);opacity:0;transition:opacity .45s}
.resume-intro.pointer-lit::before{opacity:1}
.resume-intro h2.metal{transition:filter .35s}
.resume-intro h2.metal:hover{filter:brightness(1.18) drop-shadow(0 0 16px #c58aa52a)}
.resume-intro .animated-text span{transition:color .25s,text-shadow .25s}
.resume-intro .animated-text:hover span{opacity:1!important}
.resume-intro .animated-text span:hover{color:#ffd4e9;text-shadow:0 0 12px #d888af66}
.resume-intro .resume-tags span{transition:color .25s,border-color .25s,background-color .25s,transform .25s}
.resume-intro .resume-tags span:hover{color:#ffdaed;border-color:#be809e;background:#c17d9c16;transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.resume-intro::before{display:none}.resume-intro .resume-tags span:hover{transform:none}}

/* Content-led exploration replaces pointer lighting. */
.resume-intro::before{display:none}
.resume-intro h2.metal:hover{filter:none}
.resume-intro .discipline-copy{min-height:150px;color:#c5d3dc;opacity:1;display:flex;align-items:center;justify-content:center}
.resume-intro .resume-tags button{font:inherit;font-size:13px;color:#b7a9b4;border:1px solid #ae709036;border-radius:22px;padding:9px 18px;background:transparent;cursor:pointer;transition:color .2s,border-color .2s,background .2s;position:relative}
.resume-intro .resume-tags button[aria-pressed=true]{color:#f6d6e7;border-color:#bf819e;background:#ae688820}
.resume-intro .resume-tags button:focus-visible{outline:2px solid #d39ab7;outline-offset:4px}
@media(max-width:650px){.resume-intro .discipline-copy{min-height:210px}.resume-intro .resume-tags button{font-size:12px;padding:8px 12px}}

.resume-intro h2.metal{background-image:linear-gradient(180deg,#747b87 0%,#d8e8f2 100%)}
.resume-intro .discipline-copy{background:linear-gradient(115deg,#e4f2fa 0%,#c9d9e4 52%,#a3b3c0 100%);background-clip:text;-webkit-background-clip:text;color:transparent}

/* Contact key: warm red face with a visible molded edge. */
#top .cyber-nav .cyber-contact{color:#fff;background:linear-gradient(155deg,#ff7546 0%,#ff3b16 36%,#ef230b 100%);border:1px solid #ff946e;border-bottom-color:#bf200c;border-radius:7px;text-shadow:0 1px 2px #a21d1255;font-weight:600;box-shadow:inset 0 2px 1px #ffd0ae99,inset 1px 0 1px #ffb28570,inset 0 -2px 2px #c5261266,0 5px 0 #a81d0d,0 7px 12px #0008;transition:transform .18s,box-shadow .18s,filter .18s}
#top .cyber-nav .cyber-contact:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 2px 1px #ffd0ae99,inset 0 -2px 2px #c5261266,0 6px 0 #a81d0d,0 9px 16px #0008}
#top .cyber-nav .cyber-contact:active{transform:translateY(3px);box-shadow:inset 0 1px 2px #ffd0ae66,0 2px 0 #a81d0d,0 3px 5px #0006}
#top .cyber-nav .cyber-contact:focus-visible{outline:2px solid #ffceb5;outline-offset:7px}

/* Flat warm-red contact button. */
#top .cyber-nav .cyber-contact{background:#f43b20;color:#fff;border:1px solid transparent;border-radius:4px;box-shadow:none;text-shadow:none;transform:none;filter:none;transition:background-color .2s}
#top .cyber-nav .cyber-contact:hover{background:#ff4b30;color:#fff;box-shadow:none;transform:none;filter:none}
#top .cyber-nav .cyber-contact:active{background:#db301a;box-shadow:none;transform:none;filter:none}

/* Shared orange-red accents for the annotated homepage elements. */
:root{--contact-accent:#f43b20}
#about>a.pill{background:var(--contact-accent);color:#fff;box-shadow:none;outline:none;border:1px solid transparent;text-shadow:none}
#about>a.pill:hover{background:#ff4b30;filter:none}
#about>a.pill:focus-visible{outline:2px solid #ffceb5;outline-offset:4px}
#top .cyber-story.story-left h2{color:#ff784f}
#top .cyber-stats strong{color:#ff784f}
#top .cyber-next{border-color:var(--contact-accent);box-shadow:0 0 16px #f43b2026}
#about .experience-tabs button[aria-selected=true]{border-bottom-color:var(--contact-accent)}
#about .experience-item::after{background:radial-gradient(circle,#f43b20 0 1.5px,transparent 2px) right center/5px 5px no-repeat,linear-gradient(90deg,#eadbd3,#f43b20) left center/32px 1px no-repeat,radial-gradient(circle,#f7795e 0 1px,transparent 1.5px) 35px center/3px 3px no-repeat}

/* About-page accents aligned with the homepage. */
.resume-page .resume-jumps a{border-bottom-color:#f43b20}
.resume-page #contact>a.pill{background:#f43b20;color:#fff;box-shadow:none;outline:none;border:1px solid transparent;text-shadow:none}
.resume-page #contact>a.pill:hover{background:#ff4b30;filter:none}
.resume-page #contact>a.pill:focus-visible{outline:2px solid #ffceb5;outline-offset:4px}

#top .cyber-title{background-image:radial-gradient(ellipse at var(--title-light-x,50%) var(--title-light-y,50%),#fafaf7 0%,#eeefed 35%,#dedfdd 75%);text-shadow:none;filter:none}
@media(prefers-reduced-motion:reduce){#top .cyber-title{background-image:none;color:#eeefed}}

#top .cyber-title{filter:brightness(.6)}

#top .cyber-title{color:#b5a5b0;-webkit-text-fill-color:#b5a5b0;background-image:none;filter:brightness(1.15);text-shadow:none}

/* Warm gradient on the career panel scroll thumbs. */
#about .experience-detail{scrollbar-color:#ff784f transparent}
@supports selector(::-webkit-scrollbar){
#about .experience-detail{scrollbar-width:auto;scrollbar-color:auto}
#about .experience-detail::-webkit-scrollbar{width:6px}
#about .experience-detail::-webkit-scrollbar-track{background:transparent}
#about .experience-detail::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#eadbd3 0%,#ffad88 45%,#f43b20 100%);border-radius:8px}
#about .experience-detail::-webkit-scrollbar-button{display:none}
}

#top .story-left .cyber-outline{border-color:#ff784f}

.subnav .nav-accent{color:#ff784f}
.subnav.gallery-navigation{display:flex;justify-content:space-between;align-items:center;gap:20px}
.gallery-navigation>a:first-child{justify-self:start}
.gallery-navigation>a:nth-child(2),.gallery-navigation>a:nth-child(3){justify-self:center}
.gallery-navigation>a:last-child{justify-self:end}
.subnav.collections-navigation{display:flex;justify-content:space-between;align-items:center}
@media(max-width:600px){.subnav.gallery-navigation{gap:10px;font-size:12px;letter-spacing:0}.gallery-navigation>a{white-space:nowrap}}

.pagination[hidden]{display:none!important}
.gallery-grid.motion-waterfall{align-items:start}
.motion-waterfall .media-button{height:auto;aspect-ratio:auto}
.motion-waterfall .media-button img{height:auto;width:100%;object-fit:contain;display:block}

.gallery-grid.motion-waterfall{grid-auto-rows:8px;row-gap:20px}.motion-waterfall>article{align-self:start}

/* Aligned continuous gallery, with original GIF playback. */
.gallery-grid.motion-waterfall{grid-auto-rows:auto;align-items:start;row-gap:28px}
.gallery-grid.motion-waterfall>article{grid-row-end:auto}
.gallery-grid.motion-waterfall .media-button{aspect-ratio:16/9;width:100%;height:auto}
.gallery-grid.motion-waterfall .media-button img{width:100%;height:100%;aspect-ratio:auto!important;object-fit:contain}
.gallery-grid.motion-waterfall h2{height:3.3em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.detail-stage{position:relative}
.gallery-grid .high-spend-badge,.detail-stage .high-spend-badge{position:absolute;top:0;left:0;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:34px;padding:0 19px 0 15px;background:rgba(17,12,20,.94);color:#ffe1ed;font-size:13px;font-weight:700;line-height:1;letter-spacing:.1em;box-shadow:inset 0 -1px 0 #b85b8466;clip-path:polygon(0 0,100% 0,100% 65%,calc(100% - 12px) 100%,0 100%);pointer-events:none}
.gallery-grid .high-spend-badge::before,.detail-stage .high-spend-badge::before{content:'';width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#ff427d;box-shadow:0 0 7px #ff427d66;margin-right:9px}
@media(max-width:650px){.gallery-grid .high-spend-badge,.detail-stage .high-spend-badge{min-width:84px;height:30px;padding:0 16px 0 12px;font-size:12px}}

/* Native proportions for continuous 360 galleries. */
.gallery-grid.motion-waterfall .media-button{aspect-ratio:auto;height:auto;background:transparent}
.gallery-grid.motion-waterfall .media-button img{height:auto;width:100%;display:block;object-fit:contain}
.gallery-grid.motion-waterfall[data-kind="popup"],.gallery-grid.motion-waterfall[data-kind="dianjing"]{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media(max-width:650px){.gallery-grid.motion-waterfall[data-kind="popup"],.gallery-grid.motion-waterfall[data-kind="dianjing"]{grid-template-columns:1fr}}

/* Gallery review refinements */
.gallery-tabs a[aria-current="page"]{background:#ff784f;border-color:#ff784f;color:#101010}
.gallery-zoom{display:inline-flex;align-items:center;border:0;border-radius:6px;background:#ff784f;color:#111;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer;margin:8px 0 0}
.gallery-zoom:hover{filter:brightness(1.12)}
.gallery-zoom:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gallery-navigation .nav-accent{font-weight:700;background:rgba(255,120,79,.12);border:1px solid #ff784f;border-radius:6px;padding:8px 14px;color:#ff784f}
.gallery-grid.motion-waterfall[data-kind="popup"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-grid[data-kind="tencent"] .media-button{aspect-ratio:auto;height:auto;background:transparent}
.gallery-grid[data-kind="tencent"] .media-button img{display:block;width:100%;height:auto;object-fit:contain}
.gallery-empty{grid-column:1/-1;padding:32px 0;color:#b5a5b0}
@media(max-width:650px){.gallery-grid.motion-waterfall[data-kind="popup"]{grid-template-columns:1fr}}

.section-shortcuts{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:17px;background:transparent;pointer-events:none}
.section-shortcuts a{pointer-events:auto;background:transparent;color:#b5a5b0;text-decoration:none;font-size:11px;line-height:1.5;padding:5px 0;text-align:right}
.section-shortcuts a:hover,.section-shortcuts a:focus-visible{color:#ff784f}
html{scroll-behavior:smooth}section[id],footer[id]{scroll-margin-top:24px}
@media(max-width:800px){.section-shortcuts{right:4px;gap:10px}.section-shortcuts a{font-size:9px;writing-mode:vertical-rl}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.gallery-grid .media-button.inline-video{aspect-ratio:16/9;height:auto;background:#111}.inline-video video{display:block;width:100%;height:auto;aspect-ratio:16/9}.inline-video .format-badge{display:none}

.gallery-grid .media-button.inline-video{aspect-ratio:16/9;height:auto;background:#111}.inline-video video{display:block;width:100%;height:auto;aspect-ratio:16/9}.inline-video .format-badge{display:none}

.gallery-grid .media-button.portrait-video,.portrait-video video{aspect-ratio:9/16}

.gallery-grid .media-button.landing-video,.landing-video video{aspect-ratio:1920/920}

#project-1 .priority-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;height:auto;gap:14px}
#project-1 .priority-preview .media-button{height:auto;aspect-ratio:16/9;border-radius:15px}
#project-1 .priority-preview img{width:100%;height:100%;object-fit:contain}
#project-1 .high-spend-badge{position:absolute;left:0;top:0;padding:7px 12px;background:#17151c;color:#e5bfcd;font-size:12px;font-weight:700;border-radius:0 0 10px 0}
@media(max-width:750px){#project-1 .priority-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

#work .expanded-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;height:auto;gap:14px}
#work .expanded-preview .media-button{height:auto;aspect-ratio:16/9;border-radius:15px}
#work .expanded-preview img,#work .expanded-preview video{display:block;width:100%;height:100%;object-fit:contain}
#work .expanded-preview .high-spend-badge{position:absolute;left:0;top:0;padding:7px 12px;background:#17151c;color:#e5bfcd;font-size:12px;font-weight:700;border-radius:0 0 10px 0}
@media(max-width:750px){#work .expanded-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

#work .card-heading a.status{border-color:#ff784f}
#work{padding-bottom:30px}
#work .stack{padding-bottom:0}
#work .project-card:last-child{margin-bottom:0}
footer#contact{padding-top:45px}

.gallery-grid[data-kind="sms"] .media-button{height:auto;aspect-ratio:auto;background:transparent}.gallery-grid[data-kind="sms"] .media-button img{width:100%;height:auto;display:block}

.gallery-grid[data-kind="mobile-landing"] .media-button{height:auto;aspect-ratio:auto;background:transparent}.gallery-grid[data-kind="mobile-landing"] .media-button img{display:block;width:100%;height:auto}

/* Long mobile landing pages flow independently in each column. */
.gallery-grid[data-kind="mobile-landing"]{display:block;column-count:3;column-gap:20px}
.gallery-grid[data-kind="mobile-landing"]>article{display:inline-block;vertical-align:top;width:100%;break-inside:avoid;margin:0 0 20px}
.gallery-grid[data-kind="mobile-landing"]>article>h2{display:none}
@media(max-width:750px){.gallery-grid[data-kind="mobile-landing"]{column-count:2;column-gap:12px}.gallery-grid[data-kind="mobile-landing"]>article{margin-bottom:14px}}
@media(max-width:480px){.gallery-grid[data-kind="mobile-landing"]{column-count:1}}

#contact .contact-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid #51434c;border-bottom:1px solid #51434c}
#contact .contact-method{display:flex;flex-direction:column;gap:20px;min-width:0;padding:28px 24px;text-align:left;text-decoration:none;background:transparent;border:0;border-right:1px solid #352d34;border-radius:0;color:#d7e2ea;font:inherit;transition:background .2s}
#contact .contact-method:last-child{border-right:0}
#contact .contact-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;color:#b5a5b0}
#contact .contact-label i{font-style:normal;color:#ff784f;font-size:20px}
#contact .contact-method strong{font-size:clamp(16px,1.5vw,26px);font-weight:500;overflow-wrap:anywhere;user-select:text}
#contact .contact-method small{font-size:12px;color:#b5a5b0}
#contact .contact-method:hover{background:#ff784f0b}#contact .contact-method:hover small{color:#ff784f}
#contact .contact-method:focus-visible{outline:2px solid #ff784f;outline-offset:3px}
#contact .contact-feedback{min-height:20px;margin-top:14px;font-size:13px;color:#ff784f}
#contact .footer-bottom{margin-top:48px}
@media(max-width:900px){#contact .contact-methods{grid-template-columns:repeat(2,minmax(0,1fr))}#contact .contact-method:nth-child(2){border-right:0}#contact .contact-method:nth-child(-n+2){border-bottom:1px solid #352d34}}
@media(max-width:480px){#contact .contact-method{padding:20px 12px;gap:14px}#contact .contact-method strong{font-size:16px}}

.gallery-grid[data-kind="mobile-landscape"] .media-button{height:auto;aspect-ratio:auto;background:transparent}.gallery-grid[data-kind="mobile-landscape"] .media-button img{display:block;width:100%;height:auto}

.gallery-grid[data-kind="mobile-landscape"]>article>h2{display:none}

.collection-link .collection-preview-video{display:block;height:auto;aspect-ratio:16/10;object-fit:contain;background:#17191c;border-radius:20px;pointer-events:none}

.collection-link>img,.collection-link>.collection-preview-video{flex-shrink:0;min-width:0}