:root{--ink:#111;--paper:#f2f0ea;--lime:#c8ff32;--muted:#62625c;--line:#bbbcb3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Helvetica Neue","PingFang TC","Noto Sans TC",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid #657c22;outline-offset:5px}img{display:block;max-width:100%}p{line-height:1.85}h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance}.wrap{max-width:1600px;margin:auto;padding:0 4.45%}.mono,.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.muted{color:var(--muted)}.wordmark{font-family:Archivo,"Arial Black",sans-serif;font-stretch:expanded;font-weight:900;letter-spacing:-.065em}.header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:13px;font-size:31px}.ears{width:28px;height:14px}.header nav{display:flex;gap:33px;font-size:14px}.header nav a:hover{text-decoration:underline;text-underline-offset:7px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:16px 22px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:14px}.button:hover{background:var(--ink);color:var(--paper)}.lime{background:var(--lime);border-color:var(--lime)}.lime:hover{background:var(--paper);color:var(--ink)}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:8%;padding-top:78px;padding-bottom:84px}.hero h1{font-size:clamp(45px,5.3vw,83px);line-height:1.17;letter-spacing:-.055em;margin:32px 0}.hero h1 em{font-style:normal}.hero p{max-width:410px;font-size:16px;color:var(--muted)}.hero-actions{display:flex;gap:24px;align-items:center;margin-top:35px;font-size:14px}.index-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px}.pause{background:none;border:0;text-decoration:underline;font-size:12px;min-height:30px}.stage{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:20px 0;color:var(--muted);gap:16px}.stage strong{font-size:clamp(24px,2.7vw,42px);font-weight:700;letter-spacing:-.035em}.stage.active{color:var(--ink);border-top:3px solid var(--lime);padding-top:18px}.stage small{font-size:12px}.stage-detail{font-size:14px;min-height:46px;padding-top:13px}.section{padding-top:80px;padding-bottom:80px}.divider{display:flex;gap:15px;align-items:center;margin-bottom:36px}.divider:before{content:'';height:1px;width:42px;background:var(--ink)}.divider:after{content:'';height:1px;flex:1;background:var(--ink)}.section-head{display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:start;margin-bottom:48px}.section-head h2{font-size:clamp(32px,4vw,57px);line-height:1.23;letter-spacing:-.04em}.section-head p{color:var(--muted);max-width:680px;margin-top:18px;font-size:15px}.portfolio{display:grid;grid-template-columns:repeat(12,1fr);gap:70px 28px}.case{grid-column:span 6;min-width:0;position:relative}.case.featured{grid-column:1/-1}.case:nth-child(3){padding-top:110px}.case:nth-child(4){grid-column:3/11}.cover{overflow:hidden;background:#d9d9d4}.cover img{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;transition:transform 600ms cubic-bezier(.16,.84,.24,1)}.case:hover .cover img{transform:scale(1.025)}.case .peek{position:absolute;right:24px;top:-14px;opacity:0;transition:opacity 250ms}.case:hover .peek{opacity:1}.case-meta{display:flex;align-items:center;gap:12px;margin:22px 0 13px;flex-wrap:wrap;font-size:11px;letter-spacing:.05em}.badge{border:1px solid currentColor;padding:5px 8px;white-space:nowrap}.chain{margin-left:auto;display:flex;gap:3px}.chain span{width:21px;height:21px;display:grid;place-items:center;border:1px solid var(--ink);color:var(--muted)}.chain .on{background:var(--ink);color:var(--paper)}.case h3{display:flex;justify-content:space-between;gap:20px;font-size:clamp(25px,3vw,42px);letter-spacing:-.035em}.case .case-name{font-size:16px;margin-top:9px}.case p{font-size:14px;color:var(--muted);margin-top:10px;max-width:700px}.allwork{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;padding:25px 0;margin-top:64px;font-size:20px}.allwork:hover{background:var(--ink);color:var(--paper)}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.service{border-top:1px solid var(--ink);padding-top:18px}.service h3{font-size:23px;margin:24px 0 8px}.service p{font-size:14px;color:var(--muted);margin-top:18px}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:23px}.steps div{border-top:3px solid var(--ink);padding-top:15px}.steps strong{display:block;font-size:20px;margin:18px 0 9px}.steps p{font-size:14px}.lab{background-image:linear-gradient(#1111110b 1px,transparent 1px),linear-gradient(90deg,#1111110b 1px,transparent 1px);background-size:24px 24px;padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:40px;border:1px solid var(--line)}.lab h3{font-size:30px;margin:20px 0}.lab a{display:block;padding:20px 0;border-bottom:1px solid var(--line);font-size:15px}.about{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.symbols{display:flex;gap:45px}.symbols figure{flex:1}.symbols img{width:100%;max-width:190px}.symbols figcaption{margin-top:18px;font-size:14px}.about h2{font-size:43px;margin:24px 0}.about p{color:var(--muted)}.contact{background:var(--ink);color:var(--paper);padding-top:65px;padding-bottom:35px}.contact h2{font-size:clamp(35px,5vw,72px);letter-spacing:-.05em;line-height:1.3;margin:26px 0}.contact-top{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;padding-bottom:65px}.contact p{font-size:14px;color:#b6b6ae;max-width:540px}.contact label{display:block;font-size:13px;margin-bottom:10px}.contact textarea{width:100%;height:138px;background:transparent;border:1px solid #666;color:var(--paper);resize:vertical;padding:15px;font-size:15px;line-height:1.6}.contact .button{margin-top:15px}.status{min-height:30px;margin-top:12px}.footer{border-top:1px solid #666;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:25px;font-size:12px;color:#bbb}.footer-lock{display:flex;align-items:center;gap:10px}.footer-lock img{width:30px;height:30px}.footer a{text-decoration:underline;text-underline-offset:4px}.footer .wordmark{font-size:26px;color:var(--paper);margin-left:10px}.page-title{padding-top:70px;padding-bottom:48px}.page-title h1{font-size:clamp(50px,8vw,118px);line-height:1;letter-spacing:-.055em;margin:30px 0}.page-title p{max-width:740px;color:var(--muted);font-size:16px}.toolbar{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--ink);padding:23px 0 36px;flex-wrap:wrap}.filters,.views{display:flex;gap:8px;flex-wrap:wrap}.toolbar button{border:1px solid #a6a79e;background:none;color:var(--ink);padding:11px 15px;font-size:13px}.toolbar button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.result-count{font-size:12px;color:var(--muted);margin-bottom:30px}.work-grid .case:nth-child(1){grid-column:span 7}.work-grid .case:nth-child(2){grid-column:9/13;padding-top:120px}.work-grid .case:nth-child(3){grid-column:span 5;padding-top:0}.work-grid .case:nth-child(4){grid-column:7/13}.work-grid .case h3{font-size:30px}.work-grid.index{display:block}.index .case{padding:24px 0!important;border-top:1px solid var(--ink);display:grid;grid-template-columns:160px 1fr;gap:30px;align-items:center}.index .case-meta{margin-top:0}.index .case h3{font-size:27px}.index .case .peek{display:none}.notice{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:20px 0;margin-top:30px;line-height:1.8;font-size:14px;max-width:900px}.project-title h1{font-size:clamp(52px,9vw,140px)}.project-title h2{font-size:clamp(27px,3.5vw,50px);line-height:1.3;letter-spacing:-.025em;margin:24px 0}.project-title .chain{margin-left:0}.project-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:42px}.project-meta div{border-top:1px solid var(--ink);padding-top:16px}.project-meta dt{font-size:12px;color:var(--muted)}.project-meta dd{margin:10px 0 0;line-height:1.7;font-size:14px}.case-hero{width:100%;height:auto}.caption{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.8}.story{display:grid;grid-template-columns:1fr 3fr;gap:50px;padding-top:70px;padding-bottom:70px}.story aside nav{position:sticky;top:25px;display:flex;flex-direction:column;gap:18px;font-size:13px}.story aside a:hover{text-decoration:underline}.overview{font-size:23px;line-height:1.85}.chapter{border-top:1px solid var(--ink);padding-top:20px;margin-top:65px}.chapter h2{font-size:32px;margin:28px 0 19px;line-height:1.4}.chapter p{color:var(--muted);font-size:16px}.chapter ul{padding-left:20px;line-height:2.2}.quote{font-size:clamp(30px,4vw,50px);line-height:1.4;margin:48px 0;letter-spacing:-.03em}.detail{margin-top:36px}.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px}.checks div{border-top:1px solid var(--line);padding-top:17px;line-height:1.7;font-size:14px}.checks small{display:block;color:var(--muted);margin-bottom:9px}.next{padding:55px 0;border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between}.next strong{display:block;font-size:clamp(30px,5vw,60px);margin-top:14px}.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.asset-grid figure{border-top:1px solid var(--ink);padding-top:18px}.asset-grid img{width:100%;height:150px;object-fit:contain;margin-bottom:20px}.asset-grid figcaption{font-size:14px;line-height:1.8}.asset-grid a{text-decoration:underline}.dark-swatch{background:var(--ink)}.skip{position:absolute;left:20px;top:-100px;background:var(--lime);padding:15px;z-index:9}.skip:focus{top:10px}.empty{padding:45px 0;font-size:20px}[hidden]{display:none!important}
@media(min-width:1500px){.hero{padding-top:95px;padding-bottom:100px}}@media(max-width:850px){.header{height:80px}.header nav{gap:18px}.header>.button{display:none}.hero{gap:5%;padding-top:55px}.hero h1{font-size:49px}.stage strong{font-size:27px}.stage small{font-size:10px}.hero-actions{gap:14px}.section{padding-top:55px;padding-bottom:55px}.services{grid-template-columns:repeat(2,1fr);gap:40px}.about{gap:6%}.about h2{font-size:31px}.symbols{gap:20px}.steps{gap:12px}.steps strong{font-size:15px}.project-meta{grid-template-columns:repeat(2,1fr)}.story{grid-template-columns:1fr 4fr;gap:25px}.story aside nav{font-size:11px}.overview{font-size:20px}.checks{grid-template-columns:1fr}.contact-top{gap:7%}.asset-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wrap{padding-left:22px;padding-right:22px}.header{height:76px;gap:12px}.brand{font-size:26px;gap:8px}.brand .ears{width:23px}.header nav{gap:15px;font-size:12px}.header nav a:nth-child(3){display:none}.hero{display:block;padding-top:44px;padding-bottom:45px}.hero h1{font-size:54px;margin:24px 0;letter-spacing:-.06em}.hero p{font-size:14px}.hero-index{margin-top:53px}.stage{padding:15px 0;grid-template-columns:25px 1fr auto}.stage.active{padding-top:13px}.stage strong{font-size:33px}.stage small{font-size:12px}.hero-actions{margin-top:27px;gap:22px}.section{padding-top:42px;padding-bottom:42px}.section-head{display:block;margin-bottom:30px}.section-head h2{font-size:34px;margin-top:23px}.section-head p{font-size:14px}.portfolio{display:block}.case,.work-grid .case{display:block;margin-bottom:42px;padding-top:0!important}.case-meta{margin:16px 0 12px;font-size:10px;gap:8px}.case h3,.work-grid .case h3{font-size:30px}.case p{font-size:13px}.case .case-name{font-size:15px}.chain span{height:18px;width:18px;font-size:10px}.allwork{margin-top:12px;font-size:16px}.services{gap:32px 20px}.service h3{font-size:19px}.service .mono{font-size:10px}.service p{font-size:13px}.steps{grid-template-columns:1fr}.steps div{display:grid;grid-template-columns:30px 115px 1fr;align-items:center;padding:17px 0;border-top:1px solid var(--ink)}.steps strong{margin:0;font-size:15px}.steps p{font-size:12px}.lab{grid-template-columns:1fr;padding:25px;gap:8px}.lab h3{font-size:25px}.lab p{font-size:14px}.about{grid-template-columns:1fr;gap:35px}.symbols{gap:35px;max-width:340px}.symbols img{max-width:135px}.about h2{font-size:32px}.about p{font-size:14px}.contact{padding-top:40px}.contact-top{grid-template-columns:1fr;gap:32px;padding-bottom:35px}.contact h2{font-size:42px}.footer{align-items:flex-start;flex-direction:column;gap:20px}.page-title{padding-top:43px;padding-bottom:33px}.page-title h1{font-size:61px}.page-title p{font-size:14px}.toolbar{gap:18px;padding-bottom:24px}.toolbar button{padding:10px 11px;font-size:11px}.filters{gap:6px}.index .case{display:grid;grid-template-columns:80px 1fr;gap:15px;margin:0}.index .case h3{font-size:21px}.index .case .chain,.index .case p{display:none}.index .case-meta{font-size:9px;gap:5px}.index .case-name{font-size:12px}.project-title h1{font-size:clamp(36px,10vw,60px);overflow-wrap:anywhere}.project-title h2{font-size:29px}.project-meta{gap:22px 18px}.project-meta dd{font-size:12px}.notice{font-size:13px}.story{display:block;padding-top:35px;padding-bottom:40px}.story aside{margin-bottom:34px}.story aside nav{position:static;flex-direction:row;flex-wrap:wrap;font-size:11px;gap:15px}.overview{font-size:18px}.chapter{margin-top:40px}.chapter h2{font-size:27px;margin-top:23px}.chapter p{font-size:14px}.quote{margin:34px 0;font-size:30px}.next{gap:20px}.next strong{font-size:30px}.asset-grid{grid-template-columns:1fr}.asset-grid img{height:180px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}