@font-face{font-family:"Portfolio Numerals";src:url("../assets/fonts/PixelifySans.ttf") format("truetype");font-weight:400 700;font-display:swap;unicode-range:U+0030-0039}
:root{--case-paper:#ece9e2;--case-ink:#0c151d;--case-muted:#535d62;--case-blue:#4e7bff;--body:"Portfolio Numerals","Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;--pixel:var(--body)}
[hidden]{display:none!important}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #4868e9;outline-offset:5px}button svg,a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}body{font-family:var(--body)}::selection{background:#dcf58a;color:#0c151d}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ece9e2}::-webkit-scrollbar-thumb{background:#64706f;border:2px solid #ece9e2}
.hero{--pixel:var(--body)}.hero h1{letter-spacing:-.035em}.hero-desc p{font-family:var(--body)}.hero h1:focus{outline:none}.nav .contact{font-family:var(--body)!important}
.works{--paper:var(--case-paper);padding-bottom:100px}.works::before{display:none}.works .section-top{align-items:end;margin-bottom:40px}.works .section-top h2{font-family:var(--pixel);font-size:clamp(68px,8vw,116px);line-height:.84;letter-spacing:-.025em;margin:0}.works .section-top h2 em{color:#6b7474}.works .section-note{font:14px/1.7 var(--body);border:0;padding:0;max-width:none;margin:0 0 3px;color:#4c5959}.category-bar{border-bottom:1px solid #b7bcb4;padding-bottom:16px;margin-bottom:26px}.category-button{font-family:var(--body);font-size:13px;padding:12px 20px;min-height:44px;border-color:#8b9591;gap:16px}.category-button span{font-family:var(--pixel);font-size:16px}.category-button.is-selected{background:var(--case-ink);border-color:var(--case-ink);color:var(--acid)}.category-caption{font:12px var(--body);color:#58625f}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 24px}.works .project-visual{height:clamp(360px,28vw,410px);border:0;box-shadow:none}.works .project-visual::before,.works .project-visual::after{display:none}.works .project:hover .project-visual{box-shadow:none;transform:none}.works .project-label{min-height:100px;padding:20px 0 12px;border-bottom:1px solid #8a9390;gap:16px}.works .project-label h3{font:650 clamp(25px,2.6vw,38px)/1.2 var(--body);letter-spacing:-.03em}.works .project-label p{font:13px/1.65 var(--body);color:#4e5b56;max-width:none}.works .project-label-right>span:first-child{display:none}.works .project-link-icon{box-shadow:none;border:1px solid #687571;transform:none!important}.works .project-meta{font:12px var(--body)!important;letter-spacing:0}.works .project-index{font:14px var(--pixel)!important}.works .art-guanzhao .float-note{display:none}.works .glyph-note{font-size:11px}.footer h2{letter-spacing:-.035em}.footer .eyebrow{font-size:11px}.footer .footer-contact{box-shadow:none}
/* SiteLens: pixel Latin display, readable Chinese, unfiltered current product media. */
body.is-sitelens{background:var(--case-paper);color:var(--case-ink)}body.is-sitelens #detail-view{background:var(--case-paper);color:var(--case-ink)}body.is-sitelens #progress{background:#4e7bff}.case{--gutter:clamp(20px,4vw,64px);font-family:var(--body);overflow:hidden}.case h1,.case h2,.case h3,.case p{margin:0}.case h1:focus{outline:none}.case-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutter);min-height:80px}.case-brand{display:flex;align-items:center;gap:14px;font:22px var(--pixel);white-space:nowrap}.case-mark{width:24px;height:24px;background:var(--case-ink);clip-path:polygon(0 0,65% 0,65% 35%,100% 35%,100% 70%,65% 70%,65% 100%,35% 100%,35% 70%,0 70%)}.case-header-line{height:1px;background:#354147;flex:1;margin-right:28px}.case-back{display:flex;align-items:center;gap:10px;border:0;background:none;font:13px var(--body);color:var(--case-ink);padding:10px 0}.case-back svg{width:19px}.case-hero{display:grid;grid-template-columns:36% 64%;padding:8px var(--gutter) 46px;align-items:center;gap:0;min-height:590px}.case-hero-copy{z-index:2;position:relative;padding:12px 0 16px}.case h1{font:600 clamp(70px,7.5vw,116px)/.9 var(--pixel);letter-spacing:-.035em;margin-bottom:24px;white-space:nowrap}.case h1 span{color:#4165e6}.case-hero-title{font:750 clamp(32px,4.1vw,62px)/1.2 var(--body);letter-spacing:-.035em;max-width:450px;margin-bottom:34px!important}.case-meta{font:13px/1.9 var(--body);color:#354046}.case-hero-media{position:relative;padding:22px 16px 24px 22px;min-width:0}.case-hero-media::before{content:"";position:absolute;inset:10px 0 4px 6px;background:var(--case-ink);clip-path:polygon(0 40px,20px 40px,20px 20px,40px 20px,40px 0,100% 0,100% calc(100% - 40px),calc(100% - 20px) calc(100% - 40px),calc(100% - 20px) calc(100% - 20px),calc(100% - 40px) calc(100% - 20px),calc(100% - 40px) 100%,0 100%)}.case-hero-media::after{content:"";position:absolute;right:0;top:2px;width:20px;height:20px;background:var(--acid);box-shadow:-20px 20px 0 var(--acid);pointer-events:none}.media-button{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;position:relative;cursor:zoom-in;min-width:0}.media-button img{width:100%;height:auto;display:block;filter:none;opacity:1;mix-blend-mode:normal}.media-button::after{content:"";position:absolute;inset:0;outline:1px solid transparent;outline-offset:-1px;pointer-events:none;transition:outline-color .2s}.media-button:hover::after{outline-color:#4e7bff}.media-hint{position:absolute;bottom:0;right:0;padding:8px 10px;background:var(--case-ink);color:var(--acid);font:11px var(--body);display:flex;gap:8px;align-items:center}.media-hint svg{width:14px;height:14px}.hero-caption{position:relative;display:flex;justify-content:space-between;gap:12px;font:11px/1.5 var(--body);color:#4b565b;padding:10px 0 0}.case-hero-media .hero-caption{color:var(--case-paper);padding:9px 10px 0;font-size:10px}
.case-method{position:relative;background:var(--case-ink);color:var(--acid);padding:38px max(var(--gutter),7vw) 34px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;isolation:isolate}.case-method::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#8eaa9538 1.2px,transparent 1.2px);background-size:7px 7px;mask-image:linear-gradient(90deg,#000,transparent 21%,transparent 79%,#000);pointer-events:none;z-index:-1}.method-item{display:flex;flex-direction:column;gap:13px;padding-left:18%;border-right:1px solid #5b6a65}.method-item:first-child{padding-left:4%}.method-item:last-child{border:0}.method-item strong{font:600 clamp(44px,7.2vw,106px)/.9 var(--pixel);letter-spacing:-.025em}.method-item span{font:13px var(--body);color:var(--case-paper)}.case-origin{display:flex;justify-content:space-between;gap:24px;padding:20px var(--gutter);border-bottom:1px solid #b9bcb5;font:12px/1.7 var(--body);color:#48575a}.case-origin ol{list-style:none;display:flex;gap:25px;padding:0;margin:0}.case-origin li+li::before{content:"→";margin-right:25px;color:#607277}
.case-section{padding:76px var(--gutter)}.case-split{display:grid;grid-template-columns:34% 66%;align-items:center;gap:0}.case-section-copy{padding-right:25px}.case h2{font:750 clamp(32px,4.2vw,62px)/1.18 var(--body);letter-spacing:-.035em}.case-section-copy p{font:13px/1.9 var(--body);color:#414f52;margin-top:24px;max-width:32ch}.case-section-copy .short-label{margin-top:18px;line-height:1.8}.case-photo{margin:0;min-width:0;padding:18px;background:#dbe0de;position:relative}.case-photo::before{content:"";position:absolute;width:12px;height:12px;background:var(--case-blue);left:0;top:0}.case-photo figcaption{font:11px/1.7 var(--body);color:#4b565b;padding-top:12px}.case-evidence{background:var(--case-ink);color:var(--case-paper);padding-top:64px;padding-bottom:64px}.case-evidence h2{color:var(--acid)}.case-evidence .case-section-copy p{color:#c1cbc7}.case-evidence .case-photo{background:#1a2a31}.case-evidence .case-photo figcaption{color:#bcc9c5}.case-evidence .case-photo::before{background:var(--acid)}.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.case-pair figure{margin:0}.case-pair .media-button{background:white}.pair-label{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid #576761}.pair-label strong{font:500 clamp(28px,3.5vw,52px)/1 var(--pixel);letter-spacing:-.025em;color:var(--acid)}.pair-label span{font-size:12px;color:#d8e0dc}.case-section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px}.case-section-heading p{font:12px/1.7 var(--body);color:#bcc9c5;max-width:28ch}.case-gallery{padding-top:66px;padding-bottom:72px}.case-gallery h2{font:600 clamp(56px,8vw,116px)/.9 var(--pixel);letter-spacing:-.025em}.flow-tabs{display:flex;gap:0;margin:30px 0 0;border-top:1px solid #7c8783;border-bottom:1px solid #7c8783;overflow-x:auto}.flow-tab{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:1;min-width:110px;padding:16px 17px;border:0;border-right:1px solid #a2aba5;color:var(--case-ink);background:transparent;font:13px var(--body)}.flow-tab:last-child{border-right:0}.flow-tab b{font:20px var(--pixel);font-weight:500}.flow-tab[aria-selected=true]{background:var(--case-ink);color:var(--acid)}.flow-tab:hover{background:#d8dfd5}.flow-tab[aria-selected=true]:hover{background:#1c2b30}.flow-panel{padding:24px;background:#dbe0de;position:relative}.flow-panel .media-button{max-width:1160px;margin:0 auto}.flow-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:16px;font:12px/1.6 var(--body);color:#405051}.flow-foot p{max-width:60ch}.flow-count{font:24px var(--pixel);white-space:nowrap}.case-end{background:var(--case-ink);color:var(--case-paper);padding:60px var(--gutter) 32px}.case-end-top{display:flex;justify-content:space-between;align-items:end;gap:28px}.case-end h2{font:600 clamp(57px,8vw,116px)/.88 var(--pixel);letter-spacing:-.025em;color:var(--acid)}.case-end-notes{font:12px/1.9 var(--body);color:#c8d1cc;max-width:340px}.case-end-notes p+p{margin-top:12px}.case-end-bottom{margin-top:44px;padding-top:20px;border-top:1px solid #4a5a55;display:flex;justify-content:space-between;align-items:start;gap:28px}.case-sources{font:12px/1.9 var(--body);color:#b6c4bd;max-width:650px}.case-sources summary{cursor:pointer;color:#d8e3dc;padding:0 0 8px;min-height:32px}.case-sources ul{padding:0 0 0 16px;margin:8px 0}.case-sources a{text-decoration:underline;text-underline-offset:4px}.case-end .case-back{color:var(--acid);white-space:nowrap}.case-sources a:hover{color:var(--acid)}
#image-viewer{width:min(1560px,96vw);height:min(1000px,94svh);max-width:96vw;max-height:94svh;padding:0;border:1px solid #63736b;background:#101b23;color:#ece9e2;overflow:hidden}#image-viewer::backdrop{background:#060e15ed}.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid #53615c;min-height:60px;font:13px var(--body)}.viewer-bar>div{display:flex;gap:8px}.viewer-bar button{background:transparent;color:#dcf58a;border:1px solid #76847d;padding:9px 13px;min-height:40px;font:12px var(--body)}.viewer-bar button[aria-pressed=true]{background:#dcf58a;color:#0c151d}.viewer-bar svg{width:18px;height:18px}.viewer-scroll{height:calc(100% - 65px);overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:#dbe0de}.viewer-scroll img{display:block;max-width:100%;width:1440px;height:auto;align-self:flex-start}.viewer-scroll.is-natural{display:block}.viewer-scroll.is-natural img{max-width:none;width:1440px}.skip-link{position:fixed;top:0;left:16px;z-index:500;transform:translateY(-110%);padding:12px 18px;background:#dcf58a;color:#0c151d}.skip-link:focus{transform:translateY(0)}
@media(min-width:1600px){.case{--gutter:max(64px,calc((100vw - 1540px)/2))}.case-hero{min-height:680px}.case h1{font-size:122px}.case-hero-title{font-size:64px}.case h2{font-size:66px}}
@media(max-width:1100px){.case-hero{min-height:500px;grid-template-columns:35% 65%}.case h1{font-size:80px}.case-hero-title{font-size:39px}.case-hero-media{padding-left:18px}.case h2{font-size:40px}.case-section{padding-top:56px;padding-bottom:56px}.method-item strong{font-size:68px}.case-origin{font-size:11px}.case-origin ol{gap:15px}.case-origin li+li::before{margin-right:15px}}
@media(max-width:760px){.works .section-top{flex-direction:row;gap:16px}.works .section-top h2{font-size:65px}.works .section-note{font-size:11px;max-width:100px}.category-bar{flex-direction:row;align-items:center;gap:12px}.category-controls{width:auto;flex:1}.category-button{padding:10px 12px;gap:8px;min-height:42px;font-size:12px}.category-caption{white-space:nowrap;font-size:10px}.work-grid{gap:32px 18px}.works .project-visual{height:clamp(270px,42vw,380px)}.works .project-label{min-height:95px}.works .project-label h3{font-size:25px}.works .project-label p{font-size:12px}.works .project-label-right{display:none}.works .project-meta{font-size:9px!important;left:12px;top:12px}.works .project-index{font-size:10px!important;right:12px;top:12px}.works .phone{transform:rotate(-8deg) scale(.8)}.works .glyph-board{transform:rotate(7deg) scale(.75)}.works .glyph-note{display:none}.case-header{min-height:66px;padding-block:15px}.case-brand{font-size:20px}.case-header-line{margin-right:0}.case-hero{grid-template-columns:1fr;padding-top:13px;padding-bottom:30px;min-height:0;gap:22px}.case-hero-copy{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0 12px}.case h1{font-size:clamp(65px,12vw,94px);grid-column:1/-1;margin-bottom:15px}.case-hero-title{font-size:clamp(30px,5vw,42px);margin:0!important;letter-spacing:-.03em}.case-meta{font-size:11px;line-height:1.8;padding-bottom:2px}.case-hero-media{padding:14px 10px 20px 14px}.case-hero-media::before{inset:0}.case-hero-media::after{width:12px;height:12px;box-shadow:-12px 12px 0 var(--acid)}.case-hero-media .hero-caption{font-size:9px;padding:8px 0 0}.case-method{padding:29px 20px 26px}.method-item{padding-left:12%}.method-item:first-child{padding-left:0}.method-item strong{font-size:clamp(37px,7.4vw,62px)}.method-item span{font-size:10px}.case-origin{display:block;padding-block:16px;font-size:10px}.case-origin>span{display:none}.case-origin ol{justify-content:space-between;gap:8px}.case-origin li+li::before{margin-right:8px}.case-section{padding-top:42px;padding-bottom:42px}.case-split{grid-template-columns:1fr;gap:24px}.case-section-copy{padding:0}.case h2{font-size:clamp(32px,6vw,45px)}.case-section-copy h2 br{display:none}.case-section-copy p,.case-section-copy .short-label{margin-top:13px;max-width:none;font-size:12px}.case-photo{padding:12px}.case-photo figcaption{font-size:10px;padding-top:10px}.case-section-heading{display:block}.case-section-heading p{margin-top:14px;max-width:none;font-size:11px}.case-pair{gap:17px;margin-top:24px}.pair-label{flex-direction:column;gap:7px;padding:13px 0}.pair-label strong{font-size:33px}.pair-label span{font-size:11px}.case-gallery h2{font-size:65px}.flow-tabs{margin-top:24px}.flow-tab{padding:13px 11px;min-width:100px;gap:10px;font-size:12px}.flow-tab b{font-size:18px}.flow-panel{padding:12px}.flow-foot{font-size:11px;gap:10px}.flow-count{font-size:20px}.case-end{padding-top:40px}.case-end-top{display:block}.case-end h2{font-size:72px}.case-end-notes{margin-top:25px;font-size:11px;max-width:none}.case-end-notes p+p{margin-top:7px}.case-end-bottom{margin-top:28px;flex-direction:column;gap:16px}.case-sources{font-size:11px}.viewer-bar{padding:10px 12px;font-size:11px;gap:10px}.viewer-bar button{padding:8px 10px;font-size:11px}.viewer-scroll{padding:8px}.media-hint{font-size:10px;padding:6px 8px}.case-hero-media .media-hint{display:none}}
@media(max-width:480px){.works{padding-bottom:65px}.works .section-top h2{font-size:57px}.work-grid{grid-template-columns:1fr}.works .project-visual{height:330px}.works .project-label{min-height:90px}.works .project-label-right{display:flex}.works .project-label h3{font-size:29px}.works .project-meta{font-size:11px!important}.works .phone{transform:rotate(-8deg)}.works .glyph-board{transform:rotate(7deg)}.case-hero-copy{grid-template-columns:1fr;gap:0}.case h1{font-size:76px}.case-hero-title{font-size:36px}.case-hero-title br{display:none}.case-meta{margin-top:17px;display:flex;flex-wrap:wrap;gap:3px 14px;font-size:10px}.case-hero{gap:19px}.hero-caption span:last-child{display:none}.case-method{padding-inline:20px}.method-item strong{font-size:38px}.method-item span{font-size:10px}.case-origin ol{gap:4px;font-size:9px}.case-origin li+li::before{margin-right:5px}.case-pair{grid-template-columns:1fr;gap:25px}.pair-label{flex-direction:row;align-items:center;justify-content:space-between}.case-gallery h2{font-size:60px}.flow-tabs{overflow:visible}.flow-tab{min-width:0;padding:13px 6px;justify-content:center;flex-direction:column;gap:5px;font-size:11px}.flow-tab b{font-size:17px}.flow-count{display:none}.viewer-bar>span{max-width:46%}.footer h2{font-size:70px}.category-button{padding:10px;gap:6px}.case .media-hint{font-size:9px}.case-header-line{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
/* Chinese headings use the body font stack. */
body.is-detail:not(.is-sitelens) .detail-title{font-family:var(--body);letter-spacing:-.03em}
@media(max-width:480px){.case-hero-title{font-size:32px;line-height:1.3}.case-hero-title br,.case-section-copy h2 br{display:block}.case-section-copy h2{font-size:30px;line-height:1.3}}
/* Case logic: open problem/decision diagrams, followed by product-only captures. */
.case-reason .case-section-heading h2,.case-system h2{font:600 clamp(50px,7.4vw,108px)/.9 var(--pixel);letter-spacing:-.025em}.case-reason .case-section-heading p{color:#52615e;font-size:12px}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:45px}.reason-grid>div{border-top:1px solid #88968f;padding-top:22px}.reason-grid h3{font:600 clamp(18px,2vw,28px)/1.4 var(--body);letter-spacing:-.025em}.reason-arrow{display:block;font:28px/1 var(--pixel);color:#4867e4;margin:18px 0}.reason-grid p{font:14px/1.6 var(--body);color:#415252}.case-path{background:#dce1da;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.path-heading p{font:12px/1.8 var(--body);color:#46574d;margin-top:24px}.decision-map{font:14px/1.5 var(--body);max-width:580px;width:100%;justify-self:end;text-align:center}.decision-start{display:flex;flex-direction:column;gap:12px;align-items:center}.decision-start>span{border:1px solid #81918a;padding:14px 30px;min-width:240px}.decision-start b{font:22px var(--pixel);font-weight:400;color:#4260dc}.decision-branches{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #83948b;margin:24px 0 0;gap:24px;padding-top:20px;position:relative}.decision-branches::before{content:"";position:absolute;width:1px;height:25px;background:#83948b;top:-25px;left:50%}.decision-branches>div{padding:15px 8px;background:#ece9e2}.decision-branches>div:last-child{background:#f5eed9}.decision-branches strong{font-weight:600}.decision-branches span{display:block;margin:8px 0;font-size:22px;color:#5268ca}.decision-branches p{font-size:12px}.decision-finish{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:15px}.decision-finish>span{font-size:24px}.decision-finish strong{background:#0c151d;color:#dcf58a;font-weight:500;padding:13px 30px}.own-panels{align-items:start;gap:40px}.own-panels figure{min-width:0}.panel-snapshot{width:min(100%,480px);margin-inline:auto}.own-panels .panel-snapshot{min-height:300px;display:flex;align-items:start;justify-content:center;background:transparent}.panel-snapshot img{width:100%;max-width:100%;height:auto}.own-panels .pair-label{margin-top:20px}.flow-panel.is-panel-snapshot{background:#dbe0de}.flow-panel.is-panel-snapshot .media-button{max-width:480px}.case-system{padding-top:5px}.system-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:35px}.system-palette i{display:block;height:105px;background:var(--swatch)}.system-palette span{display:block;font:12px var(--body);color:#43534c;padding-top:12px}
@media(max-width:760px){.case-reason .case-section-heading h2,.case-system h2{font-size:56px}.reason-grid{gap:18px;margin-top:27px}.reason-grid h3{font-size:17px}.reason-grid p{font-size:12px}.case-path{grid-template-columns:1fr;gap:32px}.path-heading h2 br{display:none}.path-heading p{margin-top:14px}.decision-map{justify-self:center}.own-panels{gap:20px}.own-panels .panel-snapshot{min-height:0}.system-palette{gap:10px}.system-palette i{height:78px}.system-palette span{font-size:11px}}
@media(max-width:480px){.reason-grid{grid-template-columns:1fr;gap:0}.reason-grid>div{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;align-items:center;padding:20px 0}.reason-grid h3{font-size:16px}.reason-arrow{margin:0;transform:rotate(-90deg);font-size:20px}.reason-grid p{font-size:12px}.case-reason .case-section-heading h2,.case-system h2{font-size:48px}.decision-start>span{min-width:220px}.own-panels .panel-snapshot{width:min(100%,340px)}.case-section-heading h2{font-size:29px}.system-palette{grid-template-columns:repeat(2,1fr);gap:22px 14px}.system-palette i{height:80px}.path-heading h2{font-size:30px;line-height:1.3}.path-heading h2 br{display:block}}
.case-chapters{display:flex;border-block:1px solid #9aa49d;margin:0 var(--gutter)}
.case-chapters button{flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:12px 24px;background:none;color:var(--case-ink);border:0;border-right:1px solid #9aa49d;font:13px var(--body)}
.case-chapters button:last-child{border-right:0}.case-chapters button:hover{background:var(--case-ink);color:var(--acid)}.case-chapters button span{font:22px var(--pixel)}
.case .chapter-label{font:500 20px/1 var(--pixel);letter-spacing:.025em;margin-bottom:30px}
.case-about{display:grid;grid-template-columns:1.5fr 1fr;gap:10%;align-items:start}.case-about h2{font-size:clamp(32px,3.4vw,50px)}
.case .case-brief{font:15px/1.9 var(--body);color:#485653;max-width:34em;margin-top:24px}.case-brief-facts{margin:0;padding-top:4px}.case-brief-facts>div{display:grid;grid-template-columns:90px 1fr;gap:18px;border-bottom:1px solid #adb5ae;padding:22px 0}.case-brief-facts>div:first-child{padding-top:0}.case-brief-facts dt{font:12px/1.8 var(--body);color:#55645e}.case-brief-facts dd{margin:0;font:14px/1.8 var(--body)}
.case-discovery{background:var(--case-ink);color:var(--case-paper)}.case-discovery .chapter-label{color:var(--acid)}.discovery-intro{display:flex;justify-content:space-between;align-items:center;gap:50px}.discovery-intro h2{font-size:clamp(34px,3.6vw,54px)}.research-stat{padding-right:7%;min-width:310px}.research-stat>strong{font:600 clamp(100px,13vw,186px)/.8 var(--pixel);color:var(--acid);letter-spacing:-.04em;display:block}.research-stat strong>span{font:15px var(--body);letter-spacing:0;margin-left:14px}.research-stat p{font:12px/1.7 var(--body);margin-top:22px}.origin-track{display:flex;align-items:center;gap:30px;margin-top:55px;padding:22px 0;border-block:1px solid #53665c;font:14px var(--body)}.origin-track b{font:28px var(--pixel);color:var(--acid)}.origin-track strong{font:27px var(--pixel);color:var(--acid)}.case .research-boundary{font:12px/1.9 var(--body);color:#c0c9c3;margin-top:18px}.case-discovery .reason-grid{margin-top:36px}.case-discovery .reason-grid>div{border-color:#53665c}.case-discovery .reason-grid h3{font-size:24px}.case-discovery .reason-arrow{color:var(--acid)}.case-discovery .reason-grid p{color:#ccd6cf}
.case-architecture .case-section-heading p{color:#52615e}.case-architecture h2{font-size:clamp(32px,3.6vw,52px)}.architecture-track{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.architecture-track li{display:flex;flex-direction:column;align-items:start;gap:16px;border-top:1px solid #829189;padding:24px 0;position:relative}.architecture-track li:not(:last-child)::after{content:'→';position:absolute;right:-28px;top:64px;font-size:24px;color:#5e7065}.architecture-track b{font:36px/.9 var(--pixel);color:#5168bd}.architecture-track strong{font:600 23px/1.4 var(--body)}.architecture-track span{font:12px/1.8 var(--body);color:#485b51}.product-language{display:grid;grid-template-columns:1fr 1.25fr;gap:35px;align-items:center;border-top:1px solid #acb6ac;padding-top:32px;margin-top:18px}.product-language h3{font:650 19px/1.6 var(--body)}.product-language p{font:13px/1.7 var(--body);color:#485b51;margin-top:6px}.token-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.token-strip i{height:55px;display:block;background:var(--swatch);border:1px solid #0c151d10}.token-strip span{display:block;font:11px/1.7 Consolas,monospace;color:#526157;padding-top:8px}
.interface-intro{background:var(--case-ink);color:var(--case-paper);position:relative}.interface-intro::after{content:'';position:absolute;right:8%;top:22%;width:96px;height:96px;background:var(--acid);clip-path:polygon(0 0,66.6% 0,66.6% 33.3%,100% 33.3%,100% 66.6%,66.6% 66.6%,66.6% 100%,33.3% 100%,33.3% 66.6%,0 66.6%)}.interface-intro .chapter-label{color:var(--acid)}.interface-intro h2{font-size:clamp(38px,4.2vw,62px)}.interface-intro>p:last-child{font:12px/1.8 var(--body);color:#c0cbc3;margin-top:24px}
.interface-heading{display:flex;align-items:start;gap:25px;margin-bottom:35px}.interface-number{font:500 55px/.9 var(--pixel);letter-spacing:-.035em;color:#5367bb;display:block}.interface-heading h2{font-size:clamp(28px,3.2vw,46px)}.interface-heading p{font:13px/1.8 var(--body);color:#485b51;margin-top:14px}.input-composition{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:32px}.context-detail{margin:0;border-left:1px solid #a0ada3;padding-left:32px}.context-detail .media-button{width:100%;max-width:none}.case figcaption{font:12px/1.7 var(--body);padding-top:13px;color:#52615a}.case-photo figcaption{padding-top:12px}.interface-overview{background:var(--case-ink);color:var(--case-paper)}.interface-overview .interface-number{color:var(--acid)}.interface-overview .interface-heading p{color:#c0cbc3}.overview-composition{display:grid;grid-template-columns:1.22fr 90px 1fr;gap:35px;max-width:1020px;margin:0 auto;align-items:center}.overview-composition figure{margin:0;min-width:0}.overview-composition .panel-snapshot{max-width:none;width:100%}.overview-connector{font:50px/1 var(--pixel);text-align:center;color:var(--acid)}.interface-overview figcaption{color:#c0cbc3}
.interface-evidence{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%}.evidence-copy .interface-number{margin-bottom:28px}.evidence-copy h2{font-size:clamp(34px,4.1vw,60px)}.evidence-logic{list-style:none;padding:0;margin:35px 0 0;max-width:430px}.evidence-logic li{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #a1afa4;padding:18px 0}.evidence-logic b{font:26px/1 var(--pixel);font-weight:500;color:#5367bb}.evidence-logic span{font:13px var(--body)}.interface-evidence figure{margin:0;justify-self:center;width:100%;max-width:480px}.interface-evidence .media-button{max-width:none}.case-path{gap:10%;grid-template-columns:1fr 1fr}.case-path .interface-number{margin-bottom:25px}.case-path .path-heading h2{font-size:clamp(34px,3.6vw,52px)}.case-path .decision-map{margin-top:35px;max-width:460px;font-size:13px}.case-path .decision-start>span{min-width:0;width:100%;background:#ece9e2}.case-path .decision-branches{gap:16px}.case-path .decision-branches>div{background:#ece9e2;border-top:3px solid #5797fd}.case-path .decision-branches>div:last-child{border-color:#b17d15;background:#f5eed9}.confirmation-detail{margin:0;max-width:480px;justify-self:center;width:100%}.confirmation-detail .media-button{width:100%;max-width:none}.interface-action .case-photo,.interface-plan .case-photo{padding:24px}.interface-plan{background:#dce1da}.outcome-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}.case-end .chapter-label{color:#b6c4bd}.outcome-grid .case-end-notes{margin-top:28px;max-width:none;font-size:13px}.outcome-grid figure{margin:0}.case-end figcaption{color:#c0cbc3}.case-sources{max-width:760px}
@media(max-width:1100px){.case-about{gap:6%;grid-template-columns:1.3fr 1fr}.case-brief-facts>div{grid-template-columns:70px 1fr;gap:12px}.research-stat{padding:0;min-width:260px}.architecture-track{gap:25px}.architecture-track li:not(:last-child)::after{right:-22px}.architecture-track span{font-size:11px}.input-composition{gap:24px}.context-detail{padding-left:24px}.overview-composition{gap:25px;grid-template-columns:1.22fr 55px 1fr}.outcome-grid{gap:35px}.case-end h2{font-size:84px}.case-chapters button{padding-inline:18px}.case .interface-heading h2{font-size:34px}}
@media(max-width:760px){.case-chapters button{padding:12px 10px;gap:8px;min-height:52px;font-size:12px}.case-chapters button span{font-size:18px}.case .chapter-label{font-size:18px;margin-bottom:23px}.case-about{grid-template-columns:1fr;gap:30px}.case .case-brief{font-size:14px;margin-top:18px}.case-brief-facts>div{grid-template-columns:85px 1fr;padding:15px 0}.case-brief-facts dd{font-size:13px}.discovery-intro{gap:24px}.discovery-intro h2{font-size:32px}.research-stat{min-width:0}.research-stat>strong{font-size:100px}.research-stat p{font-size:11px;margin-top:16px;max-width:13em}.origin-track{gap:18px;margin-top:32px;font-size:11px}.origin-track strong{font-size:22px}.origin-track b{font-size:22px}.case-discovery .reason-grid h3{font-size:19px}.architecture-track{grid-template-columns:1fr;gap:0;margin-top:28px}.architecture-track li{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:20px 0}.architecture-track li b{grid-row:1/3;align-self:center;font-size:30px}.architecture-track li strong{font-size:20px}.architecture-track li span{font-size:12px}.architecture-track li:not(:last-child)::after{display:none}.product-language{grid-template-columns:1fr;gap:20px;margin-top:10px;padding-top:25px}.token-strip i{height:55px}.interface-intro::after{width:55px;height:55px;top:20%;right:7%}.interface-intro h2{font-size:38px}.interface-heading{gap:17px;margin-bottom:25px}.interface-number{font-size:44px}.case .interface-heading h2{font-size:29px;line-height:1.35}.interface-heading p{font-size:12px;margin-top:10px}.input-composition{grid-template-columns:1fr;gap:25px}.context-detail{padding:0;border:0;max-width:560px;width:100%;justify-self:center}.overview-composition{gap:20px;grid-template-columns:1.22fr 30px 1fr}.overview-connector{font-size:30px}.case figcaption{font-size:11px}.interface-evidence{grid-template-columns:1fr;gap:28px}.evidence-copy h2{font-size:36px}.evidence-copy h2 br{display:none}.evidence-copy .interface-number,.case-path .interface-number{margin-bottom:17px}.evidence-logic{max-width:none;margin-top:24px}.evidence-logic li{padding:14px 0}.evidence-logic b{font-size:24px}.evidence-logic span{font-size:12px}.case-path{grid-template-columns:1fr;gap:30px}.case-path .path-heading h2{font-size:36px}.case-path .path-heading h2 br{display:none}.case-path .decision-map{margin:26px auto 0;max-width:none}.interface-action .case-photo,.interface-plan .case-photo{padding:12px}.outcome-grid{grid-template-columns:1fr;gap:30px}.case-end h2{font-size:72px}.outcome-grid .case-end-notes{margin-top:24px;font-size:12px}}
@media(max-width:480px){.case-chapters button{flex-direction:column;gap:6px;padding:10px 7px;font-size:11px}.case-chapters button span{font-size:17px}.case-about h2{font-size:31px}.case-discovery .discovery-intro{flex-direction:column;align-items:start;gap:32px}.research-stat{display:flex;align-items:end;gap:20px}.research-stat>strong{font-size:110px}.research-stat p{margin:0;padding-bottom:4px;max-width:10em;font-size:11px}.research-stat strong>span{font-size:12px;margin-left:8px}.origin-track{gap:9px;font-size:10px;margin-top:28px;justify-content:space-between;flex-wrap:wrap}.origin-track strong{font-size:20px}.origin-track b{font-size:18px}.case-discovery .reason-grid h3{font-size:17px}.case .research-boundary{font-size:11px}.architecture-track li{grid-template-columns:118px 1fr}.architecture-track b{font-size:27px}.architecture-track li strong{font-size:18px}.architecture-track li span{font-size:11px}.token-strip{gap:7px}.token-strip span{font-size:9px}.interface-intro h2{font-size:32px}.interface-intro::after{width:32px;height:32px;top:43px;right:20px}.interface-intro>p:last-child{font-size:11px}.case .interface-heading h2{font-size:26px}.interface-heading{gap:12px}.interface-number{font-size:36px}.interface-heading p{font-size:11px}.overview-composition{grid-template-columns:1fr;max-width:340px;gap:22px}.overview-composition figure:last-child{width:86%;justify-self:center}.overview-connector{transform:rotate(90deg);line-height:.7}.interface-evidence figure,.confirmation-detail{max-width:340px}.case-path .path-heading h2,.evidence-copy h2{font-size:31px}.case-end h2{font-size:70px}.case .case-section-heading h2{font-size:30px}}
.overview-composition{grid-template-columns:1.5fr 72px 1fr;max-width:900px}.overview-composition figure:last-child .media-button{max-height:620px;overflow:hidden}.overview-composition figure:last-child .media-hint{z-index:1}
@media(min-width:761px) and (max-width:1100px){.case h1{font-size:72px}}
@media(max-width:760px){.overview-composition{grid-template-columns:1.5fr 30px 1fr;gap:18px}.overview-composition figure:last-child .media-button{max-height:470px}}
@media(max-width:480px){.overview-composition{grid-template-columns:1fr}.overview-composition figure:last-child .media-button{max-height:560px}}

/* Project entrances are peers: identical card structure and media dimensions. */
.works .project{grid-column:auto}
.works .project-entry{align-items:center;justify-content:center;padding:0;color:#3c4764}
/* Paint the backdrop on the stationary card; transform only the transparent interface image. */
.works .project-sitelens{background:#e3e5f5 url("../assets/entries/sitelens-backdrop.svg") center/contain no-repeat}
.works .project-guanzhao{background:#f2e3d7 url("../assets/entries/guanzhao-backdrop.svg") center/contain no-repeat;color:#795039}
.works .project-glyphtrail{background:#dfede5 url("../assets/entries/glyphtrail-backdrop.svg") center/contain no-repeat;color:#35594a}
.works .project{--entry-tilt:perspective(1000px) rotateX(4deg) rotateY(-7deg) rotateZ(-3.5deg);--entry-zoom:1.11}
.works .project-entry .project-entry-art{
  display:block;width:100%;height:100%;max-height:none;object-fit:contain;box-shadow:none;
  transform-origin:50% 55%;transform:var(--entry-rotation,none);scale:var(--entry-scale,1);
  transition:transform .56s cubic-bezier(.2,.7,.28,1),scale .48s cubic-bezier(.2,.7,.28,1) var(--entry-scale-delay,0s);
}
/* Rotation leads; zoom joins 110ms later. Both return immediately on exit. */
.works .project:focus-within{--entry-rotation:var(--entry-tilt);--entry-scale:var(--entry-zoom);--entry-scale-delay:110ms}
@media(hover:hover) and (pointer:fine){.works .project:hover{--entry-rotation:var(--entry-tilt);--entry-scale:var(--entry-zoom);--entry-scale-delay:110ms}}
@media(min-width:721px) and (max-width:1100px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.work-grid{grid-template-columns:1fr}}
.pause-motion .works .project .project-entry-art{transform:none;scale:1;transition:none}
@media(prefers-reduced-motion:reduce){.works .project-entry .project-entry-art{transform:none;scale:1;transition:none}}

/* Separate demo and case-study entrances for every homepage project. */
.works .project{display:flex;flex-direction:column;cursor:default}
.works .project-visual{display:flex;flex-shrink:0;cursor:pointer}
.works .project-label{flex:1;flex-direction:column;align-items:stretch;gap:20px;min-height:0;padding-bottom:20px}
.project-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.project-action{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:11px 16px;border:1px solid var(--case-ink);font:500 13px/1.5 var(--body);color:var(--case-ink);transition:background-color .18s,color .18s,border-color .18s}
.project-action span{font-size:18px;line-height:1}
.project-action-demo{background:var(--case-ink);color:var(--case-paper)}
.project-action-demo[aria-disabled=true]{background:var(--case-muted);border-color:var(--case-muted);cursor:default}
.project-action-demo[href]:hover{background:#263a40;border-color:#263a40}
.project-action-detail:hover{background:var(--case-ink);color:var(--case-paper)}
@media(prefers-reduced-motion:reduce){.project-action{transition:none}}

/* Homepage dark surface; project illustrations retain their original colors. */
.works{color:var(--white)}
.works .section-top h2 em{color:#aabdc3}
.works .section-note,.works .category-caption,.works .project-label p{color:#aabdc3}
.works .project{color:var(--white)}
.works .category-bar,.works .project-label{border-color:#34434e}
.works .category-button{color:#d9e3e5;border-color:#657985}
.works .category-button span{color:#aabdc3}
.works .category-button:hover{color:var(--white);border-color:var(--acid)}
.works .category-button.is-selected{background:var(--acid);border-color:var(--acid);color:var(--cover-on-accent)}
.works .category-button.is-selected span{color:var(--cover-on-accent)}
.works .project-action-detail{color:#edf2ef;border-color:#71828a}
.works .project-action-detail:hover{background:var(--acid);border-color:var(--acid);color:var(--cover-on-accent)}

/* Sparse ASCII currents in the gutters around the gallery. */
.works{--works-gutter:clamp(20px,5.3vw,92px);padding-inline:var(--works-gutter)}
.works-current{
  position:absolute;inset:-20px calc(-1 * var(--works-gutter)) -58px;
  z-index:-1;pointer-events:none;overflow:hidden;
  color:#a6d3e6;font:10px/1 var(--mono);letter-spacing:.08em;
}
.current-lane{position:absolute;overflow:hidden}
.current-top{top:0;left:67%;width:min(160px,30%);height:18px}
.current-bottom{bottom:0;left:12%;right:12%;height:40px}
.current-left,.current-right{top:40px;bottom:62px;width:var(--works-gutter)}
.current-left{left:0}
.current-right{right:0;--current-travel:-30px}
.current-lane span{
  position:absolute;left:var(--current-x,12%);top:var(--current-y,28%);
  white-space:pre;opacity:.34;text-shadow:0 0 4px #76b9dcad;
  animation:works-drift var(--current-time,15s) linear var(--current-delay,-7s) infinite paused;
}
.works-current.is-drifting span{animation-play-state:running}
.current-top span{--current-travel:-65px;--current-x:58%;--current-y:38%;--current-delay:-9s}
.current-left span:nth-child(2){--current-y:53%;--current-delay:-3s;--current-time:12s}
.current-left span:nth-child(3){--current-y:82%;--current-delay:-12s;--current-time:18s}
.current-right span{--current-x:45%;--current-y:13%;--current-time:12s;--current-delay:-6s}
.current-right span:nth-child(2){--current-x:42%;--current-y:40%;--current-time:16s;--current-delay:-10s}
.current-right span:nth-child(3){--current-y:76%;--current-delay:-5s}
.current-bottom span{--current-x:16%;--current-y:54%;--current-travel:65px}
.current-bottom span+span{--current-x:72%;--current-y:18%;--current-travel:-75px;--current-time:18s;--current-delay:-11s}
@keyframes works-drift{
  0%{opacity:0;transform:translateX(0)}
  30%{opacity:.44}
  65%{opacity:.34}
  100%{opacity:0;transform:translateX(var(--current-travel,30px))}
}
@media(max-width:720px){
  .works-current{font-size:8px}
  .current-left,.current-right{--current-travel:7px}
  .current-right{--current-travel:-7px}
  .current-left span:nth-child(n+2),.current-right span:nth-child(n+2){display:none}
  .current-top span{--current-travel:-35px}
  .current-bottom span+span{--current-travel:-45px}
}