:root{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}button:hover,a:hover{text-decoration:underline;text-underline-offset:3px}a:focus-visible,button:focus-visible{outline:2px solid #111;outline-offset:4px}.skip{position:fixed;top:-60px;z-index:5;background:#fff;padding:12px}.skip:focus{top:0}header{position:fixed;inset:0 0 auto;height:44px;display:grid;grid-template-columns:63.4% 1fr auto;align-items:start;padding:6px 12px;z-index:2;font-size:16px;line-height:24px;background:#fff}header .name{font-weight:600;padding:4px 0}header button{justify-self:start;padding:4px 0}header button:last-child{justify-self:end}main{height:100svh;width:100%;overflow:clip;scrollbar-width:none;outline:none;touch-action:pan-y;overscroll-behavior-x:contain}main::-webkit-scrollbar{display:none}.gallery{display:flex;align-items:flex-end;width:max-content;height:100%;padding:0;gap:0;will-change:transform}.work{display:block;flex:none;position:relative;width:var(--width,calc(var(--size)*var(--ratio)));height:auto;line-height:0;user-select:none;-webkit-user-drag:none}.work img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}.work:focus-visible{outline-offset:-3px}dialog{padding:0;border:0;color:#eee;width:100%;max-width:none;max-height:calc(100svh - 44px);margin:auto 0 0;background:rgba(4,4,4,.94);overflow:auto;font-size:12px;line-height:1.25}dialog::backdrop{background:transparent}dialog[open]{animation:panel-in .35s ease-out}.panel-close{position:absolute;right:8px;top:8px;font-size:12px;color:#bbb;padding:0;z-index:1}.index-list{padding:50px 8px 16px}.index-row{display:grid;grid-template-columns:33% 24% 1fr;gap:14px;margin-bottom:16px}.index-image{display:block;align-self:start}.index-image img{width:100%;height:auto;max-height:35svh;object-fit:contain;object-position:left top;display:block}.index-meta h2{margin:0 0 16px;font-size:16px;font-weight:400}.index-meta p,.index-details p{margin:0}.index-meta p{color:#bbb}.index-details a{display:inline-block;margin-top:40px;color:#bbb}.panel-bottom{padding:10px 8px;color:#bbb}#info-dialog{background:rgba(4,4,4,.9)}.contact-grid{display:grid;grid-template-columns:33% 24% 24%;gap:14px;padding:8px;min-height:160px}.contact-links h1{font-size:12px;font-weight:400;margin:0 0 14px}.contact-links>a{display:block;color:#aaa}.contact-links nav{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:18px;color:#aaa}.contact-copy{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.contact-copy p{margin:0}.contact-copy>span{text-align:right}#autoplay{font-size:12px;color:#aaa;margin-top:14px}dialog a:focus-visible,dialog button:focus-visible{outline-color:#fff}@keyframes panel-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@media(max-width:700px){.contact-grid{grid-template-columns:1fr 1fr;padding:32px 8px 12px;gap:20px 16px}.contact-links{grid-column:1/-1}.contact-links nav{margin-top:12px}.contact-copy{font-size:13px;line-height:1.4}.index-row{grid-template-columns:40% 1fr;gap:12px;margin-bottom:28px}.index-image{grid-row:span 2}.index-meta h2{font-size:15px;margin-bottom:8px}.index-details{grid-column:2}.index-details a{margin-top:12px}.index-list{padding-top:40px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
#project-dialog{height:calc(100svh - 44px);margin:44px 0 0;max-height:none;background:rgba(0,0,0,.94)}.project-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,2fr) minmax(0,4fr);gap:26px;padding:36px 8px 24px}.project-media{min-width:0}.slide-stage{position:relative;width:100%;aspect-ratio:4/3;max-height:calc(100svh - 136px);contain:layout paint}.slide-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:top left}.slide-zone{position:absolute;top:0;bottom:0;width:50%;z-index:1}.slide-zone.prev{left:0;cursor:w-resize}.slide-zone.next{right:0;cursor:e-resize}.slide-controls{display:flex;gap:18px;align-items:center;margin-top:10px;color:#aaa;font-size:12px}.slide-controls button{padding:5px 0}.slide-controls #slide-play{margin-left:auto}.project-meta h1{font-size:16px;font-weight:400;margin:0 0 16px}.project-meta p{margin:0;color:#bbb}.project-copy{line-height:1.4}.project-copy p{margin:0 0 24px}.project-copy #project-en,.project-copy #project-zh{color:#ccc}.more-projects{display:inline-block;margin-top:45px;color:#aaa}@media(max-width:800px){.project-layout{grid-template-columns:1fr 2fr;gap:24px 20px;padding-top:36px}.project-media{grid-column:1/-1}.slide-stage{max-height:55svh}.slide-stage img{object-position:center}.project-copy{font-size:13px}.more-projects{margin-top:10px}}@media(max-width:420px){.project-layout{grid-template-columns:1fr}.project-media{grid-column:auto}.project-meta{display:flex;align-items:baseline;justify-content:space-between}.project-meta h1{margin:0}}

.panel-close:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px}#project-dialog[open]{animation:none}

#about-dialog{height:calc(100svh - 44px);margin:44px 0 0;max-height:none;background:rgba(0,0,0,.94)}#about-dialog[open]{animation:none}.about-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,5fr);gap:56px 32px;padding:48px 8px 40px}.about-label h1,.about-section-label{font-size:16px;font-weight:400;margin:0}.about-label p{font-size:14px;color:#aaa;margin:16px 0 0}.about-bio{min-width:0;font-size:16px;line-height:1.55;max-width:42em}.about-bio h2{font-size:12px;font-weight:400;color:#aaa;margin:0 0 24px}.about-bio p{margin:0 0 24px}.about-bio p:last-child{margin-bottom:0}.about-bio[lang]{line-height:1.75}.about-section-label{grid-column:1}.about-awards{grid-column:2/-1;list-style:none;margin:0;padding:0;font-size:16px;line-height:1.55}.about-awards li{display:flex;justify-content:space-between;gap:24px;padding:0 0 12px}.about-awards time{color:#aaa;font-variant-numeric:tabular-nums}.about-contact{grid-column:2/-1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:16px;line-height:1.5}.about-contact a{overflow-wrap:anywhere}@media(max-width:800px){.about-layout{grid-template-columns:1fr 1fr;gap:36px 24px}.about-label{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline}.about-label p{margin:0}.about-awards,.about-contact{grid-column:1/-1}.about-section-label{grid-column:1/-1}.about-bio{font-size:16px}.about-bio h2{margin-bottom:16px}}@media(max-width:520px){.about-layout{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:44px}.about-bio{grid-column:1}.about-awards{font-size:14px}.about-label{padding-right:0}}

/* Shared type scale and twelve-column alignment. */
:root{--edge:12px;--gutter:24px;--body:1rem;--small:.875rem;--muted:#b8b8b8}
header{padding-inline:var(--edge)}
dialog{font-size:var(--body);line-height:1.5}
.panel-close{right:var(--edge);top:8px;font-size:var(--small);line-height:24px;color:var(--muted);z-index:5}
.index-list{padding:48px var(--edge) 24px}.index-row{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:var(--gutter);margin-bottom:32px;align-items:start}.index-image{aspect-ratio:4/3;overflow:hidden;width:100%}.index-image img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}.index-meta h2{font-size:var(--body);line-height:1.5;margin-bottom:8px}.index-meta p,.index-details{font-size:var(--small);line-height:1.5}.index-details a{margin-top:24px}.panel-bottom{padding:0 var(--edge) 24px;font-size:var(--small)}
.contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);padding:44px var(--edge) 16px}.contact-links h1{font-size:var(--body);line-height:1.5;margin:0 0 16px}.contact-links>a,.contact-links nav{font-size:var(--small);line-height:1.7}.contact-links>a{overflow-wrap:anywhere}.contact-links nav{margin-top:24px;gap:8px 16px}.contact-copy{font-size:var(--body);line-height:1.6;gap:24px;min-width:0}.contact-copy p{text-align:justify;hyphens:auto}.contact-copy[lang]{line-height:1.75}.contact-copy>span{font-size:var(--small);line-height:1.5;color:var(--muted);text-align:right}
.project-layout{gap:var(--gutter);padding:48px var(--edge) 32px}.project-meta h1{font-size:var(--body);line-height:1.5;margin:0 0 8px}.project-meta p,#project-category{font-size:var(--small);line-height:1.5}.project-copy{font-size:var(--body);line-height:1.6}.project-copy #project-zh{line-height:1.75}.project-copy p{margin-bottom:24px}.more-projects{font-size:var(--small);margin-top:24px}.slide-stage{aspect-ratio:4/3;max-height:calc(100svh - 164px);isolation:isolate}.slide-stage img{object-position:center}.slide-controls{justify-content:center;margin-top:12px;font-size:var(--small);line-height:1.5;font-variant-numeric:tabular-nums}.slide-arrow,.image-expand{position:absolute;z-index:3;display:grid;place-items:center;width:40px;height:40px;background:rgba(0,0,0,.42);color:white;border:0;border-radius:0;text-decoration:none!important}.slide-arrow{top:50%;transform:translateY(-50%);font-size:24px;line-height:1;cursor:pointer}.slide-arrow.prev{left:8px}.slide-arrow.next{right:8px}.image-expand{right:8px;top:8px}.image-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}.slide-arrow:hover,.image-expand:hover{background:rgba(0,0,0,.65)}
#image-dialog{inset:0;margin:0;width:100%;height:100svh;max-height:none;background:rgba(0,0,0,.98);overflow:hidden}#image-dialog[open]{animation:none}#expanded-image,.expanded-outgoing{position:absolute;inset:48px 56px 24px;width:calc(100% - 112px);height:calc(100% - 72px);object-fit:contain}.about-layout{padding-inline:var(--edge);column-gap:var(--gutter)}.about-bio{line-height:1.6}.about-bio h2{font-size:var(--small);line-height:1.5}.about-label p,.about-awards,.about-contact{line-height:1.5}
@media(max-width:800px){:root{--gutter:20px}.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-links{grid-column:1/-1}.project-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px var(--gutter)}.project-copy{font-size:var(--body)}.slide-stage{max-height:55svh}.index-row{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr)}.index-image{grid-row:auto}.index-details{grid-column:auto}}
@media(max-width:520px){:root{--edge:12px;--gutter:16px}.contact-grid{grid-template-columns:minmax(0,1fr);gap:32px}.contact-copy p{text-align:start}.contact-copy{gap:12px}.index-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px var(--gutter)}.index-image{grid-row:span 2}.index-details{grid-column:2}.index-details a{margin-top:12px}.index-meta h2{margin-bottom:4px}.project-layout{grid-template-columns:minmax(0,1fr)}.project-media{grid-column:1}.project-meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.project-meta h1{margin:0}.slide-arrow{width:36px;height:36px}.image-expand{width:36px;height:36px}#expanded-image,.expanded-outgoing{inset:48px 12px 24px;width:calc(100% - 24px)}}

header{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}header .name{grid-column:1;grid-row:1}header #index-button{grid-column:3;grid-row:1}header #info-button{grid-column:3;grid-row:1}
@media(max-width:520px){header{grid-template-columns:minmax(0,1fr) auto auto}header #index-button{grid-column:2}header #info-button{grid-column:3}}

.slide-arrow{width:44px;height:44px;border-radius:50%;background:rgba(90,90,90,.35);font-size:0}.slide-arrow svg{width:28px;height:28px;fill:none;stroke:white;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.slide-arrow:hover{background:rgba(90,90,90,.5)}.image-zoom{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:zoom-in;background:none}.slide-stage,.slide-stage img,.slide-arrow,.image-zoom{user-select:none;-webkit-user-select:none}.slide-stage img{pointer-events:none}.image-zoom:focus-visible{outline-offset:-3px}.index-meta h2{font-size:1.125rem;line-height:1.35;margin-bottom:8px}.index-meta p{font-size:.875rem;color:#aaa}.index-details p{font-size:1rem;line-height:1.5}.index-details a{font-size:.875rem;color:#aaa}.index-row{margin-bottom:40px}@media(max-width:520px){.index-meta h2{font-size:1rem}.index-details p{font-size:.875rem}.slide-arrow{width:36px;height:36px}}

.reading-dialog{inset:44px 0 0;margin:0;height:calc(100svh - 44px);max-height:none}.reading-dialog[open]{animation:none}#observations-dialog{background:#fff;color:#111}#observations-dialog .panel-close{color:#555}.observation-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 12px;padding:44px var(--edge) 32px}.observation-grid figure{margin:0;min-width:0}.observation-grid img{display:block;width:100%;height:auto}.observation-grid figcaption{margin-top:8px;font-size:.875rem;line-height:1.4;color:#555;overflow-wrap:anywhere}.workflow-page{padding:48px var(--edge) 48px}.workflow-page h1{font-size:1rem;font-weight:400;margin:0 0 48px}.workflow-section{margin-bottom:64px}.workflow-section-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,9fr);gap:var(--gutter)}.workflow-index{font-size:.875rem;color:#aaa;margin:0}.workflow-section h2{font-size:1rem;font-weight:400;margin:0}.workflow-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gutter)}.workflow-detail p,.tool-item p{margin:0 0 16px;font-size:1rem;line-height:1.6}.workflow-detail p[lang],.tool-item p[lang]{line-height:1.75;color:#bbb}.workflow-detail .detail-label{font-size:.875rem;color:#aaa;margin-bottom:12px}.workflow-steps{list-style:none;padding:0;margin:0;max-width:600px;counter-reset:steps}.workflow-steps li{position:relative;padding:0 0 40px 40px;counter-increment:steps}.workflow-steps li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;font-size:.875rem;color:#aaa}.workflow-steps li:not(:last-child):after{content:'';position:absolute;left:10px;top:30px;bottom:12px;border-left:1px solid #555}.workflow-steps p{margin:8px 0 0;font-size:.875rem;color:#aaa}.tool-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}.tool-item{margin:0}.tool-item figcaption>span{display:block;margin:0 0 8px}.tool-item figcaption>span[lang]{color:#aaa;font-size:.875rem;margin-bottom:24px}.tool-item p{font-size:.875rem}.workflow-page .reveal{opacity:1}
@media(max-width:1000px){.observation-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.workflow-section-grid{grid-template-columns:40px 1fr}.workflow-detail,.workflow-svg-wrap,.tool-list{grid-column:2}.tool-list{grid-template-columns:1fr}}
@media(max-width:600px){.observation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.workflow-detail{grid-template-columns:1fr}.workflow-section-grid{gap:20px 12px}.workflow-section{margin-bottom:48px}.workflow-page h1{margin-bottom:32px}}

@keyframes dialog-reveal{from{opacity:0}to{opacity:1}}
dialog[open],#project-dialog[open],#about-dialog[open],#image-dialog[open],.reading-dialog[open]{animation:dialog-reveal 160ms ease-out}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none!important}}

/* Mobile portrait is an entry state; the horizontal gallery is viewed in landscape. */
.orientation-guide{display:none}
@media (max-width:700px) and (orientation:portrait){
  .orientation-guide{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:18px;background:#fff;color:#111;text-align:center}
  .orientation-guide__device{width:88px;height:88px}
  .orientation-guide__device svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .orientation-guide p{margin:0;font-size:1rem;line-height:1.45}
  .orientation-guide p span{font-size:.875rem;color:#777}
}

/* The gallery remains available in portrait previews without an orientation gate. */
.orientation-guide{display:none!important}

/* Home canvas color control. Dialogs retain their project-specific reading surfaces. */
.theme-switch{position:fixed;right:var(--edge);bottom:10px;z-index:3;display:flex;gap:12px;font-size:.875rem;line-height:1.5}
.theme-switch button{color:#888}
.theme-switch button[aria-pressed="true"]{color:#111;text-decoration:underline;text-underline-offset:3px}
body.canvas-dark,body.canvas-dark header,body.canvas-dark .skip{background:#000;color:#fff}
body.canvas-dark .theme-switch button{color:#777}
body.canvas-dark .theme-switch button[aria-pressed="true"]{color:#fff}
body.canvas-dark a:focus-visible,body.canvas-dark button:focus-visible{outline-color:#fff}
@media (max-width:700px) and (orientation:portrait){.theme-switch{display:none}}

/* Observations is intentionally held as a minimal construction state. */
.about-label{order:-2}.about-bio[lang="zh-Hans"]{order:-1}
.observation-grid{display:grid;min-height:calc(100svh - 44px);place-items:center;padding:44px var(--edge) 32px}
.observation-coming{margin:0;font-size:3rem;line-height:1;color:#111;letter-spacing:.08em}