:root{--bg:#f0efeb;--paper:#0b0e0f;--muted:#666a6b;--line:#c1c3c0;--pad:clamp(22px,3.3vw,64px);--signal:#ff5c2b}body{background:var(--bg)}#field{z-index:0;position:fixed;inset:0;width:100%;height:100%;pointer-events:none}main,.simple{position:relative;z-index:1}.hero{min-height:0;height:min(920px,70.5vw);border-bottom:1px solid #222;isolation:isolate;overflow:hidden}.mast{border:0;padding:24px 0;font-size:13px;position:relative;z-index:4}.hero-title{padding:24px 0 0;flex:0;position:relative;height:38vw;max-height:590px}.hero h1{font-size:20.7vw;line-height:.8;letter-spacing:-.075em;font-weight:900;width:max-content;max-width:95%;transform:scaleX(.86);transform-origin:left top}.hero h1>span+span{margin-top:.055em}.hero h1>span:first-child{font-size:1.06em}.hero h1 .last-name{mask-image:linear-gradient(90deg,#000 0%,#000 63%,transparent 83%)}#name-pixels{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.hero-note{font-size:12px;right:0;top:35px;line-height:1.8;width:115px}.hero-note>span:first-child{letter-spacing:.22em;font-size:11px;text-transform:uppercase}.hero-note>span:last-child{letter-spacing:.12em}.hero-note i{margin:20px 0;width:18px}.hero-bottom{display:block;position:relative;margin:0;z-index:2}.hero-position h2{font-size:clamp(25px,3.15vw,49px);font-weight:700;line-height:1.3;letter-spacing:-.04em}.hero-position>p{font-size:clamp(19px,2.2vw,34px);font-weight:300;margin-top:14px;letter-spacing:.04em}.hero-under{display:grid;grid-template-columns:1fr 1fr 110px;align-items:end;margin-top:29px;gap:30px}.hero-micro{font-size:10px;text-transform:uppercase;letter-spacing:.25em;line-height:1.7;padding-top:24px;position:relative}.hero-micro:before{position:absolute;content:'';top:0;left:0;width:130px;height:1px;background:#313332}.hero-under>div:nth-child(2){font-size:16px;line-height:1.5}.hero-under small{display:block;font-size:10px;letter-spacing:.12em;line-height:1.7;text-transform:uppercase;color:var(--muted);margin-top:9px}.scroll-link{font-size:11px;gap:12px;padding:0}.scroll-track{height:35px}.hero-under .scroll-link{align-self:end}.section{padding:85px var(--pad)}.section-heading{grid-template-columns:190px 1fr;align-items:center;margin-bottom:40px}.section-heading h2{font-size:clamp(28px,3.2vw,50px);font-weight:600;letter-spacing:-.045em}.section-heading .eyebrow{font-size:12px;line-height:1.5;max-width:150px}.section-heading>p{font-size:11px;text-transform:uppercase;letter-spacing:.16em;line-height:1.4}.section-mark{font-size:12px;letter-spacing:.12em;color:#4b5052}.orange-rule{display:block;width:18px;height:2px;background:var(--signal);margin-top:12px}#results{padding:36px var(--pad) 38px;display:grid;grid-template-columns:1fr 24%;gap:22px 34px;border-bottom:1px solid #222;background:var(--bg)}#results .section-heading{grid-column:1/-1;grid-template-columns:1fr 48%;margin-bottom:10px}#results .section-heading h2{font-weight:700}#results .ledger{margin:0;display:block;border-top:1px solid var(--line);padding-top:4px}.stat{display:grid;grid-template-columns:minmax(0,25%) 1fr;gap:30px;padding:17px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;align-items:baseline}.stat:first-child{padding-top:10px!important}.stat:last-child{border-bottom:0!important}.stat strong{font-size:clamp(38px,4.1vw,64px);font-weight:800;letter-spacing:-.065em;white-space:nowrap;line-height:1}.stat strong span{font-size:.7em;vertical-align:baseline}.stat h3{font-size:17px;font-weight:500;margin-bottom:9px;white-space:normal}.stat small{display:block;font-size:9px;color:#606567;text-transform:uppercase;letter-spacing:.1em;line-height:1.5}.results-note{font-size:14px;line-height:1.7;border-left:1px solid #555;padding-left:32px}.results-note small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:15px;color:#626768;line-height:1.5}.projects{padding:30px 22px 70px}.projects .section-heading{padding:0 24px;grid-template-columns:190px 1fr 170px;margin-bottom:26px}.projects .section-heading .eyebrow{font-size:11px}.projects .section-heading>p{text-align:right}.project,.project:nth-of-type(2),.project:nth-of-type(3){width:100%;margin-left:0;margin-bottom:70px}.project-visual{aspect-ratio:2.12!important}.project:nth-of-type(2) .project-visual{aspect-ratio:2.4!important}.project-overlay{position:absolute;top:48px;left:42px;color:#f4f2ed;max-width:75%;text-shadow:0 1px 10px #0006}.project-overlay h3{font-size:clamp(25px,3.2vw,50px);font-weight:600;letter-spacing:-.025em}.project-overlay p{font-size:12px;letter-spacing:.09em;margin-top:24px;line-height:1.8}.project-visual img{filter:brightness(.78)}.project-link{color:#f4f2ed;border:none;border-bottom:1px solid #f4f2ed;bottom:32px;right:34px;background:transparent;padding:9px 0;font-size:13px}.project-title{padding:21px 22px 25px}.project-title h3{font-size:24px;margin-bottom:12px}.project-title p{max-width:55em;font-size:14px}.statement{background:#111517;color:#eeece7;padding:85px var(--pad)}.statement p{font-size:clamp(32px,6vw,88px)}.statement .sub{color:#9fa6a9}.skill{background:transparent;min-height:250px}.skill p{color:#565b5e}.tabs button[aria-selected=true]{color:#0b0e0f}.thumb-label{color:#fff}.code-thumb{background:#dddcd6!important;color:#151819}.simple{position:fixed;background:#f0efebe8;border-color:#b5b7b5;color:#141719;backdrop-filter:blur(12px);font-size:12px;z-index:30}.about{background:#e4e1d9;border-top:1px solid #aaa}.footer{background:#111517;color:#f0efeb}.footer .eyebrow,.footer-bottom{color:#a0a6aa}.footer .contact-row{border-color:#4b5052}.footer-actions button{color:#f0efeb}.detail-intro,.detail-block p,.detail-block ul{color:#565c60}.detail .detail-hero{filter:brightness(.88)}dialog{background:#f0efeb;color:#141719}.toy-grid button{background:#deded8;color:#141719;border-color:#aaa}.toy-grid button.lit{background:var(--signal)}.hero h1{animation:name-enter 1.3s cubic-bezier(.2,.7,.2,1) both}.hero-position{animation:fade-enter 1.4s .15s both}@keyframes name-enter{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes fade-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}::view-transition-old(root){animation:fade-out .25s ease both}::view-transition-new(root){animation:fade-enter .55s ease both}@keyframes fade-out{to{opacity:0;transform:translateY(-12px)}}[hidden]{display:none!important}@media(min-width:1600px){.hero{height:70vw;max-height:1120px}.hero-title{max-height:740px}.hero h1{font-size:20.7vw}}@media(max-width:1000px) and (min-width:761px){.hero-note{font-size:10px;width:92px}.hero-note>span:first-child{font-size:9px}.hero-under{margin-top:23px}.hero-position>p{margin-top:8px}.hero-micro{padding-top:15px}.stat{gap:8px;padding:0 12px}.stat h3{font-size:12px}.stat small{font-size:8px}.results-note{font-size:12px;padding-left:20px}.hero-under>div:nth-child(2){font-size:14px}}@media(max-width:760px){.hero{height:auto;min-height:760px;padding:0 22px}.mast{font-size:11px;padding:24px 0}.hero-title{padding-top:48px;height:57vw;max-height:none}.hero h1{font-size:23vw;max-width:none;transform:scaleX(.84);letter-spacing:-.075em}.hero-note{display:none}.hero-position h2{font-size:25px;max-width:290px;line-height:1.5}.hero-position>p{font-size:21px;margin-top:12px}.hero-bottom{margin-top:55px;padding:0}.hero-under{grid-template-columns:1fr 1fr;gap:30px 12px;margin-top:45px;padding-bottom:30px}.hero-micro{font-size:9px;line-height:1.9}.hero-under>div:nth-child(2){font-size:14px}.hero-under small{font-size:8px}.hero-under .scroll-link{grid-column:1/-1;margin-top:12px}.section{padding:60px 22px}.section-heading{grid-template-columns:1fr;gap:14px}.section-heading h2{font-size:32px}.section-heading .eyebrow{max-width:none;margin:0}#results{padding:30px 22px;display:block}#results .section-heading{grid-template-columns:1fr;gap:8px;margin-bottom:25px}#results .section-heading>p{display:none}#results .section-heading h2{font-size:29px}#results .ledger{grid-template-columns:1fr;padding-top:0;border:0}.stat{padding:18px 0!important;border-right:0!important;border-top:0!important;border-bottom:1px solid var(--line)!important;gap:22px;display:grid;grid-template-columns:104px 1fr}.stat strong{font-size:52px}.stat h3{font-size:16px}.stat small{font-size:10px}.results-note{display:none}.projects{padding:35px 14px 20px}.projects .section-heading{padding:0 8px;grid-template-columns:1fr auto;gap:12px}.projects .section-heading .eyebrow{grid-column:1/-1}.projects .section-heading>p{font-size:8px}.project-visual,.project:nth-of-type(2) .project-visual,.project:nth-of-type(3) .project-visual{aspect-ratio:1.15!important}.project-overlay{top:24px;left:22px;max-width:85%}.project-overlay h3{font-size:25px;line-height:1.4}.project-overlay p{font-size:10px;margin-top:16px;max-width:200px}.project-link{right:18px;bottom:45px;font-size:12px}.project-title{padding:18px 8px}.project-title h3{font-size:22px}.project-title p{font-size:13px}.project{margin-bottom:40px!important}.skills{grid-template-columns:1fr 1fr}.skill{padding:23px 17px;min-height:255px}.statement{padding:60px 22px}.statement p{font-size:9vw}.gallery{grid-template-columns:1fr}.about h2{font-size:32px}.hero h1{animation:none}.quiet .hero h1{transform:scaleX(.84)!important}}@media(min-width:761px){.quiet .hero h1{transform:scaleX(.86)!important}}
.hero h1 .last-name{mask-image:none}.pixel-letters{mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 9px),repeating-linear-gradient(0deg,#000 0 6px,transparent 6px 9px);mask-composite:intersect}#name-pixels{display:none}.hero-position{animation:none}.hero h1{animation:none}.hero-title{height:39vw}.hero-position h2{color:#0b0e0f}@media(max-width:760px){.hero-title{height:57vw}.pixel-letters{mask-image:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 5px),repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 5px)}.hero{min-height:700px}}

/* Preserve the composition without cropping content at tablet widths. */
.hero{height:auto;min-height:min(920px,70.5vw);max-height:none}.hero-bottom{padding-bottom:40px}.hero-note{pointer-events:none}.project:focus-visible .project-visual img{filter:brightness(1.05)}
@media(min-width:1600px){.hero{height:auto;min-height:1120px;max-height:none}}
@media(max-width:1000px) and (min-width:761px){.hero-under{margin-top:24px}.hero-bottom{padding-bottom:30px}.hero-note{width:90px}}
@media(max-width:760px){.hero{min-height:700px;height:auto}.hero-bottom{padding-bottom:0}}

/* --- fixes: clearance for the fixed simple-mode button, compact on phones --- */
@media(min-width:761px){.hero-under{padding-right:158px}.hero-under>div:nth-child(2){padding-right:0}}
/* the switch stays put but folds to its icon once you leave the hero, so it stops sitting on top of copy */
.simple{overflow:hidden;transition:padding .35s cubic-bezier(.2,.7,.2,1),gap .35s cubic-bezier(.2,.7,.2,1)}
.mode-icon{flex:none}
.simple>span:last-child{white-space:nowrap;max-width:140px;transition:max-width .35s cubic-bezier(.2,.7,.2,1),opacity .22s}
.simple.compact:not(:hover):not(:focus-visible)>span:last-child{max-width:0;opacity:0}
.simple.compact:not(:hover):not(:focus-visible){padding-left:13px;padding-right:13px;gap:0}
@media(max-width:760px){.simple{right:12px;bottom:12px;padding:10px 12px;gap:9px;font-size:11px}.simple.compact:not(:hover):not(:focus-visible){padding:10px}.mode-icon{width:14px;height:14px}}
.simple[disabled]{opacity:.62;cursor:default}

/* 粒子场固定在视口、只在首屏露出；首屏以下的内容层不透明，直接盖住它 */
#rest{position:relative;z-index:1;background:transparent}
.hero{background:transparent}
/* WANG 走白色点阵：两条正交的重复渐变求交集 */
.dot-letters{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--dotA,5px),transparent var(--dotA,5px) var(--dotB,8px)),repeating-linear-gradient(0deg,#000 0 var(--dotA,5px),transparent var(--dotA,5px) var(--dotB,8px));
  mask-image:repeating-linear-gradient(90deg,#000 0 var(--dotA,5px),transparent var(--dotA,5px) var(--dotB,8px)),repeating-linear-gradient(0deg,#000 0 var(--dotA,5px),transparent var(--dotA,5px) var(--dotB,8px));
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:760px){.dot-letters{--dotA:3px;--dotB:5px}}

/* 首屏换成肖像粒子后，原来 20.7vw + 横向压扁 86% 的巨标题会把人像整个盖住；
   按选型台里定稿的比例收一档，并取消变形 */
@media(min-width:761px){.hero h1{font-size:clamp(64px,13.2vw,212px);transform:none;letter-spacing:-.055em;max-width:none}
  .quiet .hero h1{transform:none!important}
  .hero-title{height:auto;max-height:none;padding:26px 0 8px}
  .hero-note{top:28px}}

/* --- 粒子场作为全站背景：--far 从 0 到 1 表示「离开首屏的程度」 --- */
#field{filter:blur(calc(var(--far,0)*9px)) saturate(calc(1 - var(--far,0)*.45)) brightness(calc(1 - var(--far,0)*.34));
  transform:scale(calc(1 + var(--far,0)*.045));transform-origin:center}
#veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0E1114;opacity:calc(var(--far,0)*.86)}
/* 首屏之下的内容层不再盖住背景，浅色字直接浮在上面 */
#results{background:transparent}
.statement{background:transparent}
.detail{background:transparent}
/* 例外：「关于」区仍是唯一一块不透明的浅色纸张，它就是那一下重音 */
.about{background:#EDE9E0}
.quiet #field{will-change:auto}
@media(prefers-reduced-motion:reduce){#field{transform:none}}

/* UU: 首屏那几组微文案缩小一档，让人像和主标题更主导 */
@media(min-width:761px){
  .hero-note{font-size:11px;width:104px;line-height:1.75}
  .hero-note>span:first-child{font-size:9.5px;letter-spacing:.2em}
  .hero-micro{font-size:9px;letter-spacing:.22em}
  .hero-under>div:nth-child(2){font-size:13.5px;line-height:1.55}
  .hero-under small{font-size:8.5px;letter-spacing:.1em}
}
@media(max-width:760px){.hero-micro{font-size:8px}.hero-under>div:nth-child(2){font-size:12.5px}.hero-under small{font-size:7.5px}}