:root{color-scheme:dark;--bg:#050505;--text:#f0efe8;--muted:#a5a5a0;--line:#ffffff24;--accent:#80391f;--pad:clamp(18px,4.5vw,76px);--micro:clamp(9px,.8vw,12px)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--text);font:16px/1.55 Arial,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}img,video{display:block;width:100%;height:100%;object-fit:cover}h1,h2,h3,p,figure{margin:0}[hidden]{display:none!important}.label,.brand,.pill,.action{font-weight:700;letter-spacing:.14em}.label,.pill{font-size:var(--micro)}.label{color:var(--muted)}.brand{font-size:15px;letter-spacing:-.025em;white-space:nowrap}.brand b{color:#9594fa}.mark{color:var(--accent)}.pill{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:99px;padding:12px 17px;background:#0909099e;backdrop-filter:blur(18px);white-space:nowrap}.pill button{border:0;background:none;padding:3px 0;letter-spacing:inherit;color:var(--muted)}.pill button[aria-pressed=true]{color:var(--text)}.pill button[aria-pressed=true]::before{background:var(--accent);box-shadow:0 0 8px var(--accent)}.pill button::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#666;vertical-align:2px}
.entrance{height:100svh;min-height:440px;position:relative;overflow:hidden;isolation:isolate}.entry-head,.entry-foot{position:absolute;inset:24px clamp(17px,2.3vw,36px) auto;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.entry-head .tools{display:flex;gap:10px;align-items:center}.entry-head>a:last-child{justify-self:end}.entry-foot{inset:auto clamp(17px,2.3vw,36px) 23px}.hint{position:absolute;top:50%;left:19px;z-index:1;display:flex;gap:.85em;writing-mode:vertical-rl;text-orientation:mixed;transform:translateY(-50%);pointer-events:none}.wall{position:absolute;inset:0;touch-action:none;cursor:grab;overflow:hidden}.wall:active{cursor:grabbing}.tile{position:absolute;left:50%;top:50%;width:clamp(106px,11.5vw,184px);aspect-ratio:2/3;border-radius:7px;border:1px solid #ffffff43;background:#121212;padding:0;overflow:hidden;box-shadow:0 20px 60px #000b;backface-visibility:hidden;user-select:none}.tile img{pointer-events:none}.tile:hover,.tile:focus-visible{border-color:var(--accent)}.tile > span{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;text-align:left;background:linear-gradient(transparent,#000b);font-size:10px;opacity:0}.tile:hover > span,.tile:focus-visible > span{opacity:1}
.list{position:absolute;inset:105px var(--pad) 66px;display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1fr);gap:clamp(24px,7vw,106px);margin:auto;max-width:1030px;align-items:center;overflow:auto}.list img{max-height:min(64svh,570px);aspect-ratio:2/3;border-radius:7px}.row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:clamp(14px,2.6vh,26px) 0}.row strong{font-size:clamp(14px,2.25vw,24px);font-weight:500;letter-spacing:-.015em}.row:hover strong{color:var(--accent)}
.top{position:sticky;top:0;z-index:3;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-inline:var(--pad);background:#050505d9;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.top nav{display:flex;gap:clamp(12px,4vw,62px)}.top>a:last-child{justify-self:end}.hero,.contact{position:relative;isolation:isolate;display:grid;align-content:end;min-height:calc(100svh - 72px);padding:var(--pad);overflow:hidden}.hero:after,.contact:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0005,#0002 32%,#000b 82%,#000d)}.hero video,.contact img{position:absolute;inset:0;z-index:-2;filter:saturate(.72) brightness(.68)}.hero-meta{position:absolute;top:28px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:16px}.particle{position:relative;width:min(100%,940px);height:clamp(90px,18vw,220px);margin:10px 0 8px;display:grid;align-items:center}.particle h1{font-size:clamp(54px,12vw,158px);line-height:1;letter-spacing:-.065em;white-space:nowrap}.particle canvas{position:absolute;inset:0;width:100%;height:100%}.particle.is-playing h1{opacity:0}.hero p,.contact p{font-size:clamp(17px,2.3vw,30px);max-width:32em}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.action{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid #ffffff55;background:#08080866;font-size:12px;backdrop-filter:blur(10px)}.primary{background:var(--text);color:#090909}.action:hover{border-color:var(--accent);background:var(--accent);color:#090909}
section[id]{scroll-margin-top:72px}.section{padding:clamp(65px,10vw,156px) var(--pad);border-top:1px solid var(--line)}.section-head{display:grid;grid-template-columns:2fr 7fr 3fr;gap:20px;align-items:start;margin-bottom:clamp(28px,6vw,76px)}.section-head h2{font-size:clamp(39px,6.8vw,108px);line-height:1.04;letter-spacing:-.06em}.section-head .label{padding-top:8px}.section-head>.label:last-child{text-align:right}.about{display:grid;grid-template-columns:2fr 7fr 3fr;gap:20px}
.about>div{grid-column:2;border-top:1px solid var(--line);padding-top:clamp(18px,2.8vw,36px)}
.about h3{font-size:clamp(21px,2vw,36px);line-height:1.42;letter-spacing:-.015em}
.about p{color:var(--muted);margin-top:14px;max-width:38em;font-size:clamp(16px,1.3vw,20px);line-height:1.85}
.service p{color:var(--muted);margin-top:16px;max-width:36em}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,92px) clamp(20px,5vw,70px);align-items:start}.project:nth-child(even){margin-top:clamp(36px,9vw,145px)}.project button{display:block;width:100%;text-align:left;padding:0;background:none;border:none}.project-media{display:block;position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--line);aspect-ratio:4/3}.project-media img{transition:transform .45s}.project-media .pill{position:absolute;right:14px;bottom:14px}.project button:hover img{transform:scale(1.045)}.project h3{font-size:clamp(22px,3vw,43px);line-height:1.1;margin:9px 0}.project .label{display:block;margin-top:15px}.services{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.service{padding:30px 24px 38px 0;border-bottom:1px solid var(--line)}.service h3{font-size:clamp(21px,3vw,40px);margin-top:8px}.contact{min-height:76svh}.contact h2{font-size:clamp(60px,13vw,190px);letter-spacing:-.075em;line-height:.88;margin:18px 0 25px}.contact img{object-position:center}.site-footer{display:flex;justify-content:flex-end;padding:24px var(--pad);border-top:1px solid var(--line)}
dialog{color:var(--text);border:1px solid var(--line);background:#0c0c0c;padding:0}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.viewer{width:min(1150px,94vw);max-height:92svh}.viewer-head{position:sticky;top:0;z-index:1;background:#0c0c0ced;display:flex;justify-content:space-between;align-items:center;padding:17px clamp(16px,4vw,42px);border-bottom:1px solid var(--line)}.viewer-body{padding:clamp(16px,4vw,42px)}.viewer h2{font-size:clamp(28px,5vw,70px);line-height:1.1;margin:10px 0}.viewer p{max-width:42em;color:var(--muted);margin:14px 0 24px}.viewer video{aspect-ratio:16/9;height:auto;background:#000}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}.gallery img{object-fit:contain;background:#141414;max-height:65svh}
@media(max-width:719px){.entry-head{grid-template-columns:1fr auto;align-items:start}.entry-head .tools{grid-row:2;grid-column:2}.entry-head>a:last-child{grid-row:1;grid-column:2}.entry-foot{grid-template-columns:1fr auto}.hint{display:none}.list{grid-template-columns:1fr;gap:14px;align-content:start;top:143px}.list img{aspect-ratio:16/9;max-height:30svh}.top{height:60px}.top nav{gap:13px}.top>a:last-child{display:none}.hero{min-height:calc(100svh - 60px);padding-bottom:44px}.hero-meta{font-size:8px}.section-head{grid-template-columns:1fr}.section-head>.label:last-child{text-align:left}.about,.projects{grid-template-columns:1fr}.about>div{grid-column:1}.project:nth-child(even){margin-top:0}.services{gap:0 14px}.site-footer{gap:12px}.gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Atmospheric light and mixed-format glass frames on the existing orbit. */
.tile {
  padding: 7px;
  overflow: visible;
  border-radius: 18px;
  border: 1px solid rgb(224 237 255 / var(--glass-light, .25));
  background: transparent;
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px #ffffff66, inset 0 -1px 2px #d1ecff18, 0 20px 48px #0008;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(123deg, #fff2, #fff0 27%, #fff0 62%, #ffffff0a);
  box-shadow: inset 1px 1px 0 #fff3;
}
.tile-image { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
.tile-image > img { filter: blur(7px); transform: scale(1.06); }
.tile-focus {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --focus-mask: radial-gradient(
    circle at calc(50% + var(--focus-x)) calc(50% + var(--focus-y)),
    #000 var(--focus-inner),
    #000d calc(.75 * var(--focus-inner) + .25 * var(--focus-outer)),
    #0002 calc(.25 * var(--focus-inner) + .75 * var(--focus-outer)),
    transparent var(--focus-outer)
  );
  mask-image: var(--focus-mask);
  -webkit-mask-image: var(--focus-mask);
}
.tile--wide { width: var(--tile-wide,265px); aspect-ratio: 16 / 9; }
.tile--portrait { width: var(--tile-portrait,155px); aspect-ratio: 2 / 3; }
.tile--landscape { width: var(--tile-landscape,225px); aspect-ratio: 3 / 2; }
.tile > span { border-radius: 0 0 17px 17px; padding-inline: 14px; }
.project-media {
  border-radius: 20px;
  padding: 8px;
  background: transparent;
  border: 1px solid #e1efff36;
  box-shadow: inset 0 1px 1px #ffffff45, 0 18px 40px #0005;
}
.project-media img { border-radius: 13px; }
.project--film .project-media { aspect-ratio: 16 / 9; }
.project--photo .project-media { aspect-ratio: 3 / 4; }
.project--photo:last-child .project-media { aspect-ratio: 4 / 3; }
.projects { grid-template-columns: 1.15fr 1fr; }
.project--photo { max-width: 80%; }
.list-preview img { object-fit: contain; border-radius: 18px; background: #18202a50; }
@media (max-width:719px) {
  .projects { grid-template-columns: 1fr; }
  .project--photo { max-width: 90%; }
  .tile { padding: 5px; border-radius: 14px; }
  .tile-image { border-radius: 9px; }
}


/* Sand and clay backdrop with clear, untinted glass controls. */
.entrance {
  --text: #30180f;
  --muted: #552e21;
  background: #b8784f url("background-preview/desert.png") center / cover no-repeat;
}
.entrance .glass-panel,
.language-switch.glass-panel {
  background: transparent;
  border: 1px solid #ffffff91;
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px #ffffff96, inset 0 -1px 1px #ffffff38, 0 4px 14px #0002;
}
.entry-head .tools { --text: #fff4e8; --muted: #f0d4c4; color: var(--text); }
.entry-head .tools .mark { color: #fff4e8; }
.entry-head .tools .pill button[aria-pressed="true"]::before {
  box-shadow: 0 0 0 1px #ffe5d3;
}
.hint, .entry-foot { text-shadow: 0 1px 3px #fff5; }
.entry-head .brand { color: #3b190e; text-shadow: 0 1px 2px #fff7; }
.entry-medium { text-align: center; color: #fff4e8; text-shadow: 0 1px 4px #30180fbb; }
.language-switch { gap: 0; padding: 3px; }
.language-switch.pill button {
  min-width: 39px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 999px;
}
.language-switch.pill button::before { display: none; }
.language-switch button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.entry-foot .language-switch { justify-self: end; }
body[data-view="portfolio"] .language-switch {
  position: fixed;
  right: clamp(17px, 2.3vw, 36px);
  bottom: 23px;
  z-index: 4;
}
body[data-view="portfolio"] .site-footer { padding-right: calc(var(--pad) + 92px); }
html[lang="en"] .particle h1 { font-size: clamp(30px, 7.8vw, 112px); }
html[lang="en"] .contact h2 { font-size: clamp(43px, 11vw, 160px); }
@media (max-width: 719px) {
  .entrance { --text: #fff4e8; --muted: #f5dac9; }
  .entry-foot { text-shadow: 0 1px 5px #000b; }
  .entry-head .brand { text-shadow: 0 1px 3px #ffe9c7a6; }
  .entry-medium { display: none; }
}


#about .section-head { margin-bottom: clamp(24px, 3.5vw, 48px); }
#about .section-head h2 {
  container-type: inline-size;
  font-size: inherit;
  line-height: 1.14;
  letter-spacing: -.035em;
  white-space: nowrap;
}
#about .section-head h2 .translated {
  font-size: min(7.8cqi, 60px);
}

html[lang="zh-CN"] body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.68;
}
html[lang="zh-CN"] :is(.particle h1, .section-head h2, .contact h2) {
  font-weight: 600;
  letter-spacing: -.025em;
}
html[lang="zh-CN"] :is(.about h3, .project h3, .service h3) {
  font-weight: 550;
}
html[lang="zh-CN"] :is(.label, .pill, .action) {
  letter-spacing: .055em;
}
html[lang="en"] .row strong {
  font-family: system-ui, sans-serif;
}

/* Keep the selected concept images uncropped at their original proportions. */
.gallery.ai-gallery { display:block; columns:2; column-gap:20px; }
.ai-gallery figure { margin:0 0 28px; break-inside:avoid; }
.ai-gallery figure img { width:100%; height:auto; max-height:none; border-radius:8px; }
.ai-gallery figcaption { margin-top:10px; }
.ai-gallery figcaption h3 { font-size:18px; font-weight:500; line-height:1.45; }
.ai-gallery figcaption .label { display:block; margin-top:4px; font-size:10px; letter-spacing:.05em; }
@media(max-width:719px){ .gallery.ai-gallery{columns:1;} }
.project--photo.project--visual .project-media { aspect-ratio: 2 / 3; }
html[lang="en"] #about .section-head h2 .translated { font-size: min(5.9cqi, 56px); }

.contact img { object-position: center 60%; }

/* Mobile archive: navigation above a compact, centered orbit stage. */
html.archive-page { background:#ecd1ad; color-scheme:light; }
body[data-view="entrance"] { overflow:hidden; overscroll-behavior:none; }
.row-thumb { display:none; }
.entry-arrow { font-family:Arial,sans-serif; font-variant-emoji:text; font-size:15px; line-height:1; }
@media (max-width:719px), (max-height:500px) and (pointer:coarse) {
  .entrance { height:100svh; min-height:280px; }
  .entry-head {
    inset:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) auto max(18px,env(safe-area-inset-left));
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:6px;
    pointer-events:none;
  }
  .entry-head>a,.entry-head .tools { pointer-events:auto; }
  .entry-head>a:first-child { grid-row:1; grid-column:1; justify-self:start; display:flex; align-items:center; min-height:32px; }
  .entry-head .brand { font-size:10px; line-height:1.2; }
  .entry-head>a:last-child { grid-row:1; grid-column:3; }
  .entry-head .entry-link { min-height:32px; gap:4px; padding:7px 10px; font-size:10px; line-height:1.2; letter-spacing:0; white-space:nowrap; }
  .entry-head .entry-arrow { font-size:11px; }
  .entry-head .tools { grid-row:1; grid-column:2; justify-self:center; }
  .entry-head .tools>.pill { gap:0; padding:2px 4px; }
  .entry-head .tools button { min-height:26px; min-width:0; padding:5px 6px; font-size:10px; line-height:1.2; letter-spacing:0; white-space:nowrap; }
  .entry-head .tools button::before { margin-right:5px; vertical-align:1px; }
  html[lang="en"] .entry-head .entry-link { font-size:9px; padding-inline:8px; }
  html[lang="en"] .entry-head .tools button { font-size:9px; }
  .wall { inset:calc(72px + env(safe-area-inset-top)) 0 calc(98px + env(safe-area-inset-bottom)); }
  .tile { padding:5px; border-radius:15px; backdrop-filter:blur(8px); }
  .tile-image { border-radius:10px; }
  .entry-foot {
    inset:auto max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    font-size:10px;
    letter-spacing:.04em;
  }
  .entry-foot>div:first-child { max-width:180px; line-height:1.6; text-wrap:balance; }
  .entry-medium,.hint { display:none; }
  .entry-foot .language-switch { padding:3px; }
  .entry-foot .language-switch button { min-width:38px; min-height:38px; padding:7px 9px; font-size:11px; }
  .list { inset:calc(72px + env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:0; overscroll-behavior:contain; }
  .list { align-items:stretch; }
  .list>div:last-child { margin-block:auto; flex-shrink:0; }
  .list-preview { display:none; }
  .row { grid-template-columns:66px minmax(0,1fr) 16px; gap:14px; min-height:76px; padding:11px 0; }
  .row>.label { display:none; }
  .row-thumb { display:block; width:66px; height:50px; }
  .row-thumb img { width:100%; height:100%; max-height:none; aspect-ratio:auto; border-radius:8px; }
  .row strong { font-size:16px; line-height:1.45; font-weight:500; overflow-wrap:anywhere; }
  .row>span:last-child { font-family:Arial,sans-serif; font-size:16px; }
  .viewer { width:calc(100vw - 24px); max-height:calc(100svh - 28px); border-radius:16px; }
  .viewer-head { padding:12px 14px; gap:12px; }
  .viewer-head .pill { min-height:40px; padding:9px 12px; }
}
@media (max-width:359px) {
  html[lang="en"] .entry-head { grid-template-columns:minmax(0,1fr) auto auto; }
}
@media (max-height:500px) and (pointer:coarse) and (orientation:landscape) {
  .entry-head { grid-template-columns:1fr auto 1fr; gap:10px; }
  .entry-head .tools { grid-row:1; grid-column:2; }
  .entry-head>a:last-child { grid-column:3; }
  .wall { inset:70px 0 66px; }
  .list { inset:72px max(30px,env(safe-area-inset-left)) 66px; align-content:start; }
}