:root{--ink:#25251f;--muted:#62635a;--paper:#faf9f5;--line:#dcded3;--accent:#55418d;--tint:#f1edf8;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}a{color:inherit;text-underline-offset:5px}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #9167c9;outline-offset:5px}::selection{background:#eadbf9;color:#291c46}body{scrollbar-color:#aaa89d var(--paper)}h1,h2,h3,h4,p{margin:0}h1,h2{font-family:"Portfolio Serif","Songti SC","STSong",serif;letter-spacing:-.035em;text-wrap:balance}p{line-height:1.85}small{font-size:14px;line-height:1.6}button{background:transparent;border:1px solid var(--line);border-radius:4px;padding:10px 15px;color:var(--ink)}button:hover{background:#efeee7}a:hover{color:var(--accent)}.wrap{max-width:1320px;margin:auto;padding-left:56px;padding-right:56px}.skip{position:absolute;top:-80px}.skip:focus{top:12px;z-index:50;background:white;padding:16px}.site-nav{height:90px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;gap:20px}.brand{font-size:22px;font-weight:700;text-decoration:none}.brand span{display:block;font-size:13px;font-weight:400;letter-spacing:.1em;margin-top:3px}.site-nav nav{display:flex;gap:27px;font-size:15px}.site-nav nav a{text-decoration:none}.site-nav button{font-size:14px}.cover{max-width:1500px;min-height:750px;margin:auto;display:grid;grid-template-columns: .85fr 1.15fr;padding:80px 60px 70px;align-items:center;gap:48px}.cover h1{font-size:clamp(60px,7vw,96px);line-height:1.08;font-weight:600}.cover h1 span{color:#695497}.cover .lead{font-size:22px;margin:28px 0 14px}.cover-copy>p:not(.lead){color:var(--muted);font-size:17px}.primary-link{margin:26px 0 32px;display:inline-flex;gap:45px;background:var(--ink);color:white;padding:15px 24px;text-decoration:none}.primary-link:hover{background:#534369;color:white}.roles{font-size:14px;color:var(--muted)}.cover-art{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;transform:rotate(-2deg)}.mini{min-width:0;text-decoration:none;background:var(--tint);padding:14px;box-shadow:0 14px 32px #272a1910;transition:transform .2s ease-out}.mini:hover{transform:translateY(-5px)}.mini:nth-child(even){transform:translateY(30px)}.mini:nth-child(even):hover{transform:translateY(25px)}.mini-stage{height:230px;overflow:hidden;background:white}.mini-stage .screen-visual{width:680px;transform:scale(.4);transform-origin:top left}.mini-stage .product-ui{min-height:570px}.mini strong{display:block;font-size:17px;margin-top:12px}.mini>span{font-size:11px;color:var(--muted)}.planner{--accent:#665092;--tint:#f3efd9;--uitint:#f4f0fa}.study{--accent:#106774;--tint:#e5f0ed;--uitint:#ecf6f4}.roster{--accent:#175641;--tint:#eaf3e9;--uitint:#eff7f1}.recorder{--accent:#a65225;--tint:#f7ecdd;--uitint:#fff8ee}.about{padding-top:100px;padding-bottom:100px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.about h2,.closing h2{font-size:48px;line-height:1.3}.intro{margin-top:30px;color:var(--muted);max-width:430px}.project-index a{display:block;text-decoration:none;padding:20px 0;border-bottom:1px solid var(--line)}.project-index a:first-child{padding-top:0}.project-index h3{font-size:23px;color:var(--accent)}.project-index h3 span{float:right}.project-index p{font-size:16px;margin:7px 0}.project-index small{color:var(--muted)}.method{padding-bottom:100px}.method h2{font-size:30px}.method-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:30px}.method-steps h3{font-size:20px;margin-bottom:10px}.method-steps p{color:var(--muted)}.case{border-top:1px solid var(--line);padding:76px 0;background:linear-gradient(var(--tint) 0 390px,var(--paper) 390px)}.case-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center}.case-intro h2{font-size:48px;color:var(--accent)}.case-position{font-size:22px;margin-top:18px}.key{font-size:14px;color:var(--accent);margin-top:16px}.case dl{margin:0}.case dl>div{display:grid;grid-template-columns:80px 1fr;gap:15px;border-top:1px solid #0002;padding:15px 0}.case dt{color:var(--accent);font-size:14px}.case dd{margin:0;font-size:16px;line-height:1.7}.story{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:64px}.story h3{font-size:20px;margin-bottom:12px}.story p{color:var(--muted)}.flow{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px;margin-bottom:70px}.flow>span{background:var(--tint);color:var(--accent);padding:13px 16px;font-size:15px;display:flex;gap:10px;align-items:center}.flow small{font-variant-numeric:tabular-nums;opacity:.7}.screens-heading h3{font-size:30px;display:flex;gap:25px;align-items:center}.screens-heading h3 span{font-size:15px;font-weight:400;color:var(--muted)}.screens-heading p{font-size:15px;color:var(--muted);max-width:900px;margin:15px 0}.screens-heading>a{font-size:15px}.screens{display:grid;grid-template-columns:1fr 1fr;gap:50px 28px;margin-top:34px}.screen{min-width:0;background:white;border:1px solid var(--line)}.screen-visual{background:var(--tint);padding:20px}.screen-visual img{display:block;width:100%;height:auto;object-fit:contain}.screen-visual.original{padding:14px;min-height:0}.screen-visual.redesign{height:460px;overflow:hidden;display:flex;align-items:flex-start}.product-ui{width:100%;background:#fff;min-height:418px;color:#28352e;border:1px solid #d5ddd6;border-radius:6px;overflow:hidden;container-type:inline-size}.ui-head{display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:#fff;padding:18px 20px;gap:10px}.ui-head strong{font-size:18px}.ui-head>span{font-size:12px}.ui-body{padding:22px;font-size:14px}.ui-body h3{font-size:20px;margin-bottom:18px}.ui-body h4{font-size:16px;margin:18px 0 8px}.ui-body p{line-height:1.8}.ui-body small{font-size:12px}.ui-row{display:grid;grid-template-columns:65px 1fr auto;gap:8px;align-items:center;padding:15px 0;border-bottom:1px solid #e7ebe6;font-size:14px}.ui-row>span{font-size:12px;color:#617369}.ui-row>strong{font-weight:500}.ui-row>small{color:var(--accent)}.field{margin-bottom:15px}.field>small{color:#627066;display:block;margin-bottom:5px}.field>div{border:1px solid #d4ddd4;padding:10px 12px;border-radius:4px;background:#fff;font-size:14px}.ui-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.chip{display:inline-block;padding:7px 12px;background:var(--uitint);color:var(--accent);font-size:12px;border-radius:4px}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.two>section{min-width:0}.ui-body hr{border:0;border-top:1px solid #dce0d6;margin:20px 0}.statline{display:flex;gap:45px;align-items:center;margin-bottom:22px}.statline strong{font-size:34px;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}.statline small{display:block;color:#647065}.bar{height:7px;background:#e9e9e1;margin-bottom:15px}.bar>i{display:block;height:7px;background:var(--accent)}.notice{background:var(--uitint);padding:12px;margin-top:20px;color:#526053;font-size:12px;line-height:1.7}.planner-layout{display:grid;grid-template-columns:110px 1fr;gap:18px}.planner-layout aside{background:#fff9d7;padding:12px}.planner-layout aside p{font-size:12px;margin:10px 0}.large{font-size:40px;color:var(--accent)}.calendar{display:grid;grid-template-columns:repeat(7,1fr)}.calendar>b{font-size:10px;text-align:center;padding:8px 0;color:var(--accent)}.day{border:1px solid #e7e2ee;min-height:53px;padding:4px;font-size:10px}.day>small{display:block;background:#eee8f5;color:#614985;font-size:8px;padding:2px}.day.today{background:#fff1ae}.wave{height:90px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}.wave>i{background:#d89158;min-width:3px;opacity:.75;border-radius:3px}.upload{text-align:center;border:1px dashed #bd855c;padding:22px;background:#fffcf5}.upload>p{font-size:12px;margin:10px}.paper{background:#fff9ec;padding:14px}.note>p:first-of-type{font-size:12px;color:#846544}.note p,.note li{font-size:13px}.note ol{padding-left:20px}.ui-body pre{font-family:ui-monospace,monospace;font-size:12px;line-height:1.8;background:#f8f5ee;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere}.screen-caption{padding:26px 28px 24px}.caption-heading{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.caption-heading h3{font-size:23px;line-height:1.4}.caption-heading>span{font-size:13px;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}.position{color:var(--accent);font-size:17px;margin:13px 0 7px}.screen-caption>p:not(.position){font-size:16px;color:var(--muted)}.caption-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}.tag{font-size:12px;display:inline-block;background:var(--tint);color:var(--accent);padding:4px 9px;margin-right:5px}.caption-bottom>a{font-size:14px;white-space:nowrap}.provenance{display:block;margin-top:16px;font-size:12px;color:#6c6d63}.value{margin-top:60px;display:grid;grid-template-columns:250px 1fr;gap:25px}.value h3{font-size:20px;color:var(--accent)}.value p{font-size:19px;max-width:750px}.closing{padding-top:100px;padding-bottom:100px}.closing p{margin:25px 0;color:var(--muted)}footer{padding:35px 56px;border-top:1px solid var(--line);font-size:14px;display:flex;justify-content:space-between;color:var(--muted)}.focus-mode .site-nav,.focus-mode footer{display:none}.focus-toolbar{display:flex;max-width:1080px;margin:20px auto;justify-content:space-between;align-items:center;font-size:14px;gap:20px;padding:0 20px}.focus-toolbar>div{display:flex;gap:20px;align-items:center}.focus-sheet{max-width:1080px;margin:auto;background:var(--tint);padding:38px 48px 28px;min-height:1350px;display:flex;flex-direction:column}.focus-sheet>header{display:flex;justify-content:space-between;gap:20px;padding-bottom:25px;font-size:20px;color:var(--accent)}.focus-sheet .screen{border:0;flex:1;display:flex;flex-direction:column}.focus-sheet .screen-visual{flex:1;display:flex;align-items:center;justify-content:center;padding:28px;background:white;min-height:680px;height:auto;overflow:visible}.focus-sheet .screen-visual img{max-height:840px;width:auto;max-width:100%}.focus-sheet .product-ui{min-height:620px}.focus-sheet .ui-head{padding:24px 30px}.focus-sheet .ui-head strong{font-size:27px}.focus-sheet .ui-head>span{font-size:16px}.focus-sheet .ui-body{padding:36px;font-size:20px}.focus-sheet .ui-body p,.focus-sheet .ui-row,.focus-sheet .ui-body li,.focus-sheet .field>div{font-size:20px}.focus-sheet .ui-body h3{font-size:28px}.focus-sheet .ui-body h4{font-size:23px}.focus-sheet .ui-row{padding:22px 0;grid-template-columns:100px 1fr auto}.focus-sheet .ui-body small,.focus-sheet .ui-row>span,.focus-sheet .ui-head span,.focus-sheet .notice,.focus-sheet .chip{font-size:16px}.focus-sheet .planner-layout{grid-template-columns:170px 1fr}.focus-sheet .planner-layout aside p{font-size:17px}.focus-sheet .day{min-height:80px;font-size:16px}.focus-sheet .day small{font-size:12px}.focus-sheet .calendar>b{font-size:16px}.focus-sheet .ui-body pre{font-size:17px}.focus-sheet .screen-caption{padding:20px 34px 30px}.focus-sheet .caption-heading h3{font-size:30px}.focus-sheet .position{font-size:22px}.focus-sheet .screen-caption>p:not(.position){font-size:19px}.focus-sheet .provenance,.focus-sheet .tag{font-size:14px}.sheet-footer{padding-top:25px;display:flex;justify-content:space-between;color:var(--accent);font-size:16px}.capture .focus-toolbar{display:none}.restore{position:fixed;bottom:14px;right:15px;opacity:0;background:white}.restore:hover,.restore:focus-visible{opacity:1}
@font-face{font-family:'Portfolio Serif';font-style:normal;font-weight:600;font-display:swap;src:url('assets/portfolio-serif.woff2') format('woff2')}
.roster .ui-row>.status-done::before{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E")}
.screens .screen-visual.redesign{height:auto;min-height:460px;overflow:visible}.screens .screen{align-self:start}.screens .product-ui{min-height:418px}.two .ui-row{grid-template-columns:50px 1fr}.two .ui-row small{grid-column:2}.roster .ui-row>small::before{content:'';display:inline-block;width:11px;height:11px;border:1px solid currentColor;border-radius:2px;margin-right:6px;vertical-align:-1px}.focus-sheet .roster .ui-row>small::before{width:16px;height:16px}
@media(min-width:1400px){.mini-stage .screen-visual{transform:scale(.45)}}
@media(max-width:1000px){.wrap{padding-left:30px;padding-right:30px}.site-nav{padding:0 24px}.brand span{display:none}.site-nav nav{gap:15px}.site-nav>button{display:none}.cover{padding:60px 30px;gap:25px;min-height:650px}.cover-art{gap:15px}.mini-stage{height:180px}.mini-stage .screen-visual{transform:scale(.3)}.mini{padding:10px}.mini>span{display:none}.about{gap:35px}.case-intro{gap:35px}.case-intro h2{font-size:40px}.screen-visual.redesign{height:400px;padding:12px}.product-ui{min-height:370px}.ui-body{padding:15px}.screen-caption{padding:22px}.caption-heading h3{font-size:20px}.planner-layout{grid-template-columns:80px 1fr;gap:8px}.planner-layout aside{padding:5px}.ui-head>span{font-size:10px}.ui-head{padding:14px}.ui-head strong{font-size:15px}.ui-row{grid-template-columns:48px 1fr auto;font-size:12px}.ui-body h3{font-size:17px}.focus-sheet{margin:0 18px}.focus-toolbar{flex-wrap:wrap}}
@media(max-width:700px){html{scroll-padding-top:100px}.site-nav{height:auto;min-height:95px;display:block;padding:15px 20px}.brand{font-size:18px}.site-nav nav{margin-top:15px;justify-content:space-between;font-size:13px}.wrap{padding-left:22px;padding-right:22px}.cover{display:block;padding:40px 22px 65px;min-height:0}.cover h1{font-size:65px}.cover .lead{font-size:19px;margin-top:20px}.cover-copy>p:not(.lead){font-size:15px}.roles{font-size:12px}.cover-art{margin-top:35px;transform:none;gap:12px}.mini:nth-child(even){transform:none}.mini-stage{height:145px}.mini-stage .screen-visual{transform:scale(.25)}.mini strong{font-size:14px}.about{padding-top:55px;padding-bottom:60px;display:block}.about h2,.closing h2{font-size:38px}.intro{margin-top:20px}.project-index{margin-top:35px}.project-index h3{font-size:22px}.method{padding-bottom:60px}.method h2{font-size:27px}.method-steps{display:block;margin-top:25px}.method-steps>div{margin-top:25px}.case{padding:50px 0;background:var(--paper)}.case-intro{display:block;background:var(--tint);padding-top:30px;padding-bottom:30px}.case-intro h2{font-size:36px}.case-position{font-size:20px}.case dl{margin-top:28px}.story{display:block;margin-top:32px}.story article+article{margin-top:30px}.flow{margin-top:30px;margin-bottom:40px;gap:6px}.flow>span{padding:10px;font-size:13px}.screens-heading h3{font-size:26px;display:block}.screens-heading h3 span{display:block;margin-top:8px}.screens{grid-template-columns:1fr;gap:30px;margin-top:24px}.screen-visual.redesign{height:auto;min-height:340px}.product-ui{min-height:320px}.ui-body{padding:13px}.two{gap:12px}.ui-row{font-size:12px}.ui-body p{font-size:12px}.ui-body .notice{font-size:11px}.calendar>b{font-size:8px}.day{min-height:40px;padding:2px}.day>small{font-size:6px}.screen-caption{padding:21px}.caption-heading h3{font-size:21px}.caption-heading>span{font-size:12px}.position{font-size:17px}.screen-caption>p:not(.position){font-size:15px}.value{display:block;margin-top:35px}.value p{font-size:17px;margin-top:12px}.closing{padding-top:60px;padding-bottom:60px}.closing p{font-size:15px}footer{padding:25px 22px;display:block;line-height:1.8}footer>span{display:block}.focus-toolbar{font-size:13px;margin:15px 0;padding:0 15px}.focus-toolbar>div{gap:12px;flex-wrap:wrap}.focus-toolbar button{font-size:12px;padding:8px}.focus-sheet{margin:0;padding:20px 16px;min-height:0}.focus-sheet>header{font-size:13px;padding-bottom:18px}.focus-sheet .screen-visual{min-height:0;padding:12px}.focus-sheet .product-ui{min-height:360px}.focus-sheet .ui-head{padding:15px}.focus-sheet .ui-head strong{font-size:16px}.focus-sheet .ui-head>span{font-size:10px}.focus-sheet .ui-body{padding:14px}.focus-sheet .ui-body p,.focus-sheet .ui-row,.focus-sheet .ui-body li,.focus-sheet .field>div{font-size:13px}.focus-sheet .ui-body h3{font-size:19px}.focus-sheet .ui-body h4{font-size:16px}.focus-sheet .ui-row{padding:15px 0;grid-template-columns:60px 1fr auto}.focus-sheet .ui-body small,.focus-sheet .ui-row>span,.focus-sheet .notice,.focus-sheet .chip{font-size:11px}.focus-sheet .planner-layout{grid-template-columns:80px 1fr;gap:8px}.focus-sheet .planner-layout aside p{font-size:11px}.focus-sheet .day{min-height:45px;font-size:10px}.focus-sheet .day small{font-size:7px}.focus-sheet .calendar>b{font-size:10px}.focus-sheet .ui-body pre{font-size:11px}.focus-sheet .screen-caption{padding:20px}.focus-sheet .caption-heading h3{font-size:23px}.focus-sheet .position{font-size:18px}.focus-sheet .screen-caption>p:not(.position){font-size:15px}.focus-sheet .provenance,.focus-sheet .tag{font-size:11px}.sheet-footer{font-size:12px}}
.capture .focus-sheet{margin:0 auto;min-height:1200px;max-width:900px;padding:28px 32px 24px}.capture .focus-sheet .screen-visual{min-height:570px;padding:20px}.capture .focus-sheet .product-ui{min-height:540px}.capture .focus-sheet .screen-visual img{max-height:720px}.capture .focus-sheet .ui-body{padding:25px}.capture .focus-sheet .screen-caption{padding:20px 25px}.capture .focus-sheet .screen-caption>p:not(.position){font-size:18px}.capture .focus-sheet .caption-heading h3{font-size:27px}.capture .focus-sheet .position{font-size:20px}.capture .focus-sheet .ui-row{padding:16px 0}.capture .focus-sheet .day{min-height:65px}.capture .focus-sheet .ui-body p,.capture .focus-sheet .ui-body li{font-size:17px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mini{transition:none}}
@media print{@page{size:A4;margin:12mm}.site-nav,.focus-toolbar,.restore,.caption-bottom>a,.primary-link,footer{display:none!important}body{background:white}.cover{min-height:0;padding:25px;break-after:page}.cover h1{font-size:65px}.wrap{padding-left:0;padding-right:0}.about,.method,.case-intro,.story,.value{break-inside:avoid}.case{break-before:page;background:white;padding:25px 0}.screens{display:block}.screen{break-inside:avoid;margin:25px 0;page-break-inside:avoid}.screen-visual img{max-height:580px;width:auto;max-width:100%;margin:auto}.screen-visual.redesign{height:auto}.screen-caption{padding:20px}.focus-sheet{margin:0;padding:15px;min-height:0;width:100%;max-width:none}.focus-sheet .screen-visual{min-height:0;padding:15px}.focus-sheet .screen-visual img{max-height:600px}.focus-sheet .product-ui{min-height:0}.focus-sheet .screen-caption{padding:15px}.focus-sheet .caption-heading h3{font-size:24px}.focus-sheet .position{font-size:18px}.focus-sheet .screen-caption>p:not(.position){font-size:15px}.sheet-footer{padding-top:12px}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}