/* Composition references: Karolis CUJO/Cinema/MUBI/Rapt.
   Different image masses and text coordinates, not repeated half-width rows. */
:root{--gutter:8.333333vw}
.wrap{width:min(1200px,calc(100% - var(--gutter)*2))}
.edition-home .wrap,#header .wrap,.portfolio-footer>.wrap{width:min(1600px,calc(100% - var(--gutter)*2))}
.edition-home .portfolio-intro{padding:72px 0 64px;max-width:1600px}
.edition-home .portfolio-intro h1{font-size:62px;line-height:1.08;letter-spacing:0;font-weight:300;margin:0;max-width:1100px;text-wrap:balance}
.intro-mobile{display:none}
.work-list{display:block;padding-bottom:100px}
.work-entry{min-width:0;margin-bottom:88px;scroll-margin-top:100px}
.work-entry:last-child{margin-bottom:0}
.work-link{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;position:relative}
.work-link:focus-visible{outline:2px solid #3d6555;outline-offset:10px}
.work-art{grid-row:1;min-width:0;position:relative;display:block;overflow:hidden}
.work-art>img{display:block;width:100%;height:auto;object-fit:cover;transition:none}
.work-caption{grid-row:1;position:relative;z-index:2;padding:0}
.work-caption h2{font-size:48px;line-height:1.18;font-weight:300;letter-spacing:0;margin:0 0 20px;text-wrap:balance}
.work-caption p{font-size:20px;line-height:1.6;font-weight:400;margin:0;text-wrap:pretty}
.work-action{display:inline-flex;align-items:center;min-height:44px;padding:9px 24px;background:#202724;color:#fff;border-radius:30px;font-size:16px;line-height:24px;margin-top:28px}
/* MUBI/Cinema: tall right-hand image, lower left text. */
.work-xisu .work-art{grid-column:6/-1;transform:translateX(120px)}
.work-xisu .work-caption{grid-column:1/6;margin-top:190px;max-width:600px}
/* Rapt: broader image on the left and a narrower right-hand passage. */
.work-dialysis .work-art{grid-column:1/8;transform:translateX(-120px)}
.work-dialysis .work-caption{grid-column:8/-1;margin-top:270px;max-width:500px}
/* Paired actual interfaces: platform overview and a different mobile task. */
.work-bioby .work-art{grid-column:6/-1;transform:translateX(40px);width:calc(100% + 120px);aspect-ratio:1.06;overflow:visible}
.work-bioby .work-caption{grid-column:1/5;margin-top:100px}
.cover-browser{position:absolute;left:0;top:0;width:95%;display:block;border:7px solid #242924;border-radius:14px;background:#242924;overflow:hidden;box-shadow:0 24px 40px -28px #182c2866}
.cover-browser-chrome{display:flex;align-items:center;gap:5px;height:20px;padding:0 6px}
.cover-browser-chrome i{width:5px;height:5px;border-radius:50%;background:#a0a79f}
.cover-browser img{width:100%;height:auto}
.cover-phone{position:absolute;right:4%;bottom:0;width:31%;display:block;border:8px solid #242924;border-radius:30px;overflow:hidden;box-shadow:0 18px 40px -18px #0006;background:#242924}
.cover-phone img{width:100%;height:auto}
/* Actual APT UI with a magnified review panel, framed by its existing blue. */
.work-apt .work-art{grid-column:1/9;transform:translateX(-120px);aspect-ratio:1.18;background:#315be8;overflow:visible}
.work-apt .work-caption{grid-column:9/-1;margin-top:240px}
.cover-apt-main{display:block;position:absolute;left:-6%;top:8%;width:96%;aspect-ratio:1440/930;overflow:hidden;background:#fff;border:6px solid #fff;border-radius:8px;box-shadow:0 20px 34px -24px #07164488}
.cover-apt-main img{width:100%;height:auto}
.cover-apt-detail{display:block;position:absolute;right:-4%;bottom:-2%;width:30%;aspect-ratio:320/700;overflow:hidden;border-radius:7px;background:#fff;border:5px solid #fff;box-shadow:0 18px 32px -20px #07164499}
.cover-apt-detail img{position:absolute;width:450%;max-width:none;height:auto;left:-342.5%;top:-34%}
@media(hover:hover){.work-link:hover .work-action{background:#425b4a}}
@media(min-width:1800px){.work-xisu .work-art{transform:translateX(150px)}.work-dialysis .work-art,.work-apt .work-art{transform:translateX(-150px)}}
@media(min-width:761px) and (max-width:1100px){.edition-home .portfolio-intro h1{font-size:46px}.work-caption h2{font-size:40px}.work-caption p{font-size:17px;line-height:1.6}.work-xisu .work-art{transform:translateX(65px)}.work-dialysis .work-art,.work-apt .work-art{transform:translateX(-65px)}.work-xisu .work-caption{margin-top:100px}.work-dialysis .work-caption{margin-top:170px}.work-bioby .work-caption{margin-top:30px}.work-apt .work-caption{margin-top:140px}.cover-browser{border-width:5px}.cover-phone{border-width:5px;border-radius:20px}}
@media(max-width:760px){
 :root{--gutter:8vw}
 .edition-home .portfolio-intro{padding:40px 0 50px}.edition-home .portfolio-intro h1{font-size:clamp(44px,13vw,54px);line-height:1.05}
 .intro-desktop{display:none}.intro-mobile{display:inline}
 html:lang(zh-CN) .intro-profession{white-space:nowrap}
 .work-list{padding-bottom:70px}.work-entry{margin-bottom:74px}
 .work-link{display:flex;flex-direction:column;align-items:stretch;gap:30px}
 .work-xisu .work-art,.work-dialysis .work-art,.work-bioby .work-art,.work-apt .work-art{order:0;width:100vw;margin-left:calc(-1*var(--gutter));transform:none}
 .work-xisu .work-caption,.work-dialysis .work-caption,.work-bioby .work-caption,.work-apt .work-caption{order:1;padding:0;margin-top:0}
 .work-caption h2{font-size:32px;line-height:1.2;margin-bottom:16px;text-wrap:pretty}
 .work-caption p{font-size:16px;line-height:1.75}.work-action{margin-top:24px}
 .work-bioby .work-art{aspect-ratio:1.02}.cover-browser{border-width:4px;border-radius:8px;left:-3%;width:100%}.cover-browser-chrome{height:12px;gap:3px}.cover-browser-chrome i{width:3px;height:3px}.cover-phone{border-width:5px;border-radius:18px;right:3%;width:35%;bottom:1%}
 .work-apt .work-art{aspect-ratio:1.12}.cover-apt-main{width:107%;left:-19%;border-width:4px}.cover-apt-detail{width:37%;right:2%;bottom:-1%;border-width:3px}
}
@media(prefers-reduced-motion:reduce){.work-art img{transition:none}}

/* Spacing and contrast carry hierarchy; lines are reserved for real diagrams. */
/* Project colours derive from existing products, interfaces and adopted identity. */
.work-xisu{--project-accent:#385d55;--project-light:#dde9e2}
.work-dialysis{--project-accent:#153c4b;--project-light:#dce8eb}
.work-bioby{--project-accent:#17391b;--project-light:#eef7e7}
.work-apt{--project-accent:#315be8;--project-light:#edf1ff}
.work-action{background:var(--project-accent,#202724)}
#main[data-project=xisu]{--green:#385d55;--pale:#dde9e2;--project-accent:#385d55;--project-light:#dde9e2}
#main[data-project=dialysis]{--green:#153c4b;--pale:#dce8eb;--project-accent:#153c4b;--project-light:#dce8eb}
#main[data-project=bioby]{--green:#234f27;--pale:#eef7e7;--project-accent:#234f27;--project-light:#eef7e7}
#main[data-project=apt]{--green:#315be8;--pale:#edf1ff;--project-accent:#315be8;--project-light:#edf1ff}
#main[data-project] .case-story .segmented button[aria-pressed=true]{background:var(--project-light);color:var(--project-accent)}
#main[data-project=xisu] .portfolio-case .case-hero-visual{background:#dde9e2}
#main[data-project=xisu] .portfolio-case .model-canvas{aspect-ratio:16/11}
#main[data-project=dialysis] .portfolio-case .case-hero-visual{background:#153c4b}
#main[data-project=dialysis] .portfolio-case .model-canvas{aspect-ratio:18/11}
#main[data-project=bioby] .web-preview{background:#eef7e7}
#main[data-project=apt] .study-hero-image{background:#edf1ff}
.language-switch,.case-nav,.share-project,.next-project,.footer-base,.review-notes,.content-routes>div,.case-outcome,.profile-links .text-link{border:0}
.case-progress{display:none}.header-inner nav a::after,.showcase-pages button::after{display:none}
.header-inner nav a[aria-current],.language-switch button[aria-pressed=true]{font-weight:600}
.case-story .segmented button{border:0;padding:10px 16px}.case-story .segmented button[aria-pressed=true]{background:#edf1eb;border:0;border-radius:5px}
.profile-links .text-link{text-decoration:none!important}.profile-links .text-link:hover{color:#54715f}
.next-project{margin-top:30px;padding-top:45px}.portfolio-footer{background:#f4f5f2;border:0}
.edition-email{display:inline-block;font-size:clamp(20px,3vw,36px);line-height:1.4;overflow-wrap:anywhere;padding:12px 0}.edition-credit{font-size:13px;color:var(--muted);margin-top:26px}
.case-story .tech-pair{display:block}.implementation-details{margin-top:24px;max-width:760px}.implementation-details>summary{font-size:16px;min-height:44px;cursor:pointer;padding:12px 0;color:var(--muted)}.implementation-details[open]>summary{margin-bottom:16px;color:var(--ink)}
.tech-code__tools button{border:0;background:#f1f3ef;min-height:44px;border-radius:4px}.tech-pair__media .image-button,.tech-diagram{border:0;border-radius:0}
.review-notes summary{color:var(--muted)}.content-routes{display:none}
.portfolio-case-dialysis .model-canvas{aspect-ratio:4/3}.portfolio-case-dialysis .model-poster{object-fit:contain}
.case-nav-name{display:none}.case-story .story-heading{max-width:760px}.story-heading h2,.tech-chapter .story-heading h2{font-size:34px;line-height:1.3}.story-heading p,.tech-chapter .story-heading p{font-size:19px;line-height:1.8}
@media(max-width:760px){.story-heading h2,.tech-chapter .story-heading h2{font-size:27px}.story-heading p,.tech-chapter .story-heading p{font-size:16px;line-height:1.85}.case-story .chapter{padding:60px 0}.case-nav .wrap{gap:12px}}
/* Compact project collaboration credit. */
.project-team{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:12px;line-height:1.5;color:var(--ink)}
.project-team-avatars{position:relative;flex:0 0 54px;width:54px;height:36px;isolation:isolate}
.project-team-avatars img{position:absolute;top:0;width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;object-fit:cover}
.project-team-person{left:0;z-index:2;object-position:50% 30%}
.project-team-ai{left:18px;z-index:1;background:#fff}
.project-team-credit{color:var(--muted)}