@charset "UTF-8";
:root{--paper:#f6f5f1;--ink:#252622;--muted:#797b73;--line:#dcded5;--media:#eeeee8;--accent:#626d50;--gutter:clamp(22px,4.4vw,72px);--max:1440px;font-family:Arial,"Helvetica Neue","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:90px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}h1,h2,h3,p{margin:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}[hidden]{display:none!important}.muted{color:var(--muted)}.eyebrow{font-size:10px;line-height:1.5;letter-spacing:.14em;font-weight:500}.pending{color:var(--muted);font-size:13px;line-height:1.9}.skip{position:fixed;top:-70px;left:20px;padding:16px;background:var(--ink);color:white;z-index:20}.skip:focus{top:10px}
.site-header{max-width:var(--max);margin:auto;padding:29px var(--gutter);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.05em;font-weight:600}.brand-mark{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%;position:relative}.brand-mark:after{content:"";position:absolute;width:6px;height:6px;background:var(--ink);border-radius:50%;left:3.5px;top:3.5px}.brand-sub{margin-left:9px;font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.1em}.site-header nav{display:flex;gap:30px;font-size:12px}.site-header nav a span{margin-left:5px;color:var(--muted);font-size:10px}.site-header nav a:hover{color:var(--accent)}main{max-width:var(--max);margin:auto;padding:0 var(--gutter)}
.hero{position:relative;display:grid;grid-template-columns:1.5fr 1fr;column-gap:6%;padding-top:68px;min-height:610px}.hero-copy .eyebrow{color:var(--muted);margin-bottom:24px;font-size:9px;letter-spacing:.12em}.hero h1{font-weight:400;font-size:clamp(42px,5.15vw,78px);letter-spacing:-.055em;line-height:1.06}.hero .amp{color:var(--muted)}.hero-intro{color:var(--muted);font-size:12px;margin-top:26px;line-height:1.8;letter-spacing:.03em}.hero-character{align-self:center;position:relative;margin-top:25px}.hero-character-note{display:block;text-align:right;font-size:9px;letter-spacing:.15em;margin-top:12px;color:var(--muted)}.placeholder{position:relative;width:100%;height:100%;min-height:180px;background:var(--media);display:flex;align-items:center;justify-content:center;color:#92958a;border:1px solid #e3e4dc}.placeholder-cross{font-size:27px;font-weight:200;color:#a4a79d}.placeholder-label{position:absolute;left:18px;bottom:17px;font-size:10px;letter-spacing:.07em;line-height:1.5}.placeholder-label small{display:block;font-size:9px;letter-spacing:0;color:#8b8e82;margin-top:3px}.character-placeholder{aspect-ratio:1.25;min-height:0;background:#f0f0ea;border-radius:2px}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-top:54px;padding-bottom:27px;gap:24px}.hero-bottom>a{font-size:12px;display:flex;align-items:center;gap:16px}.hero-bottom>a>span{color:var(--muted);font-size:11px}.hero-bottom b{margin-left:16px;font-size:22px;font-weight:400}.hero-bottom>span{font-size:10px;color:var(--muted);letter-spacing:.03em}
.work-section{padding:58px 0 94px;scroll-margin-top:10px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}.section-heading .eyebrow{color:var(--muted);margin-bottom:12px}.section-heading h2{font-size:34px;font-weight:400;letter-spacing:-.04em}.section-heading>p{font-size:11px;line-height:1.6;color:var(--muted);padding-bottom:4px}.count{font-size:12px;margin-left:15px;vertical-align:top;display:inline-block;padding-top:6px;color:var(--muted);letter-spacing:0}.work-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 24px}.card-1{grid-column:span 3}.card-2{grid-column:span 2}.card-3{grid-column:span 2}.card-4{grid-column:span 3}.card-5{grid-column:span 5}.card-media{height:330px;position:relative;transition:transform 240ms ease,box-shadow 240ms ease}.card-5 .card-media{height:290px}.card-media .placeholder{background:#eaece5;border-color:#e0e3d9}.card-2 .placeholder{background:#ebeae5;border-color:#e2e1d9}.card-3 .placeholder{background:#eae9e5}.card-4 .placeholder{background:#e9eae5}.card-5 .placeholder{background:#edede6}.card-media .placeholder-label{left:20px;bottom:20px}.card-no{position:absolute;top:20px;left:20px;font-size:11px;color:#767c6b}.card-open{position:absolute;top:16px;right:17px;font-size:18px;color:#767c6b}.card-caption{padding-top:17px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.card-caption h3{font-size:20px;font-weight:400;letter-spacing:-.025em;line-height:1.3}.card-caption p{font-size:11px;color:var(--muted);margin-top:5px}.card-category{font-size:9px;letter-spacing:.02em;line-height:1.6;color:var(--muted);text-align:right;padding-top:5px}.work-card:hover .card-media{transform:translateY(-4px);box-shadow:0 8px 18px #25262209}.work-card:hover .card-open{color:var(--ink)}
.about-section{border-top:1px solid var(--line);padding:65px 0 75px;display:grid;grid-template-columns:1fr 1.75fr;gap:50px}.about-section .eyebrow{color:var(--muted);margin-bottom:18px}.about-section h2{font-size:38px;letter-spacing:-.04em;font-weight:400}.chinese-title{display:block;font-size:12px;letter-spacing:0;color:var(--muted);margin-top:10px}.about-statement{font-size:32px;line-height:1.5;letter-spacing:-.03em}.about-fields{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px}.about-fields h3{font-size:11px;font-weight:400;margin-bottom:10px}.about-fields p{font-size:12px;color:var(--muted);line-height:1.8}.disciplines{display:flex;gap:18px;margin-top:38px;font-size:11px;letter-spacing:.04em}.disciplines span{border-bottom:1px solid var(--line);padding-bottom:8px}.contact-section{border-top:1px solid var(--line);padding:46px 0 66px}.contact-section .eyebrow{color:var(--muted);margin-bottom:23px}.contact-row{display:flex;align-items:center;justify-content:space-between;gap:25px}.contact-row h2{font-size:clamp(32px,4.3vw,62px);font-weight:400;letter-spacing:-.05em}.contact-pending,.contact-link{font-size:12px;color:var(--muted)}.contact-pending span{font-size:23px;margin-left:38px}.site-footer{max-width:var(--max);padding:23px var(--gutter) 28px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:var(--muted)}.footer-brand{font-size:10px;letter-spacing:.07em;color:var(--ink)}
.detail-main{padding-top:30px}.back-link{font-size:11px;color:var(--muted)}.project-heading{padding:61px 0 49px}.project-heading>.eyebrow{color:var(--muted);display:flex;justify-content:space-between}.project-heading h1{font-size:clamp(42px,6.5vw,86px);letter-spacing:-.055em;font-weight:400;line-height:1.08;margin-top:24px}.project-subtitle{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:24px}.project-subtitle h2{font-weight:400;font-size:18px}.project-subtitle>p{font-size:12px;color:var(--muted)}.experience-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;color:var(--muted)}.experience-label>span{font-size:10px}.experience-stage{aspect-ratio:16/8.5}.experience-stage .placeholder{min-height:220px}.experience-stage .placeholder-label{left:26px;bottom:25px}.glass-tabs{display:flex;width:fit-content;margin:0 auto 22px;padding:5px;border:1px solid #dedfd7;background:#ffffff70;border-radius:40px;box-shadow:0 2px 8px #24262105}.glass-tabs button{border:0;background:transparent;padding:12px 27px;min-width:175px;border-radius:30px;font-size:12px;color:var(--muted);transition:background 180ms ease,color 180ms ease}.glass-tabs button span{display:block;margin-top:3px;font-size:10px}.glass-tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 5px #24262112}.concept-row{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid var(--line);margin-top:56px;padding:40px 0 52px}.concept-row>.eyebrow{color:var(--muted)}.concept-row h2{font-size:27px;line-height:1.5;font-weight:400;letter-spacing:-.03em}.concept-row p:not(.eyebrow){font-size:13px;line-height:1.9;margin-top:12px}.breakdown-section{padding:44px 0 60px;border-top:1px solid var(--line)}.breakdown-section h2{font-size:28px}.breakdown-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.small-placeholder{height:190px;min-height:0}.breakdown-grid .eyebrow{margin-top:23px;color:var(--muted)}.breakdown-grid h3{font-size:18px;font-weight:400;margin-top:9px}.breakdown-grid .pending{margin-top:10px}.implementation-section{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid var(--line);padding:42px 0 60px}.implementation-section>.eyebrow{color:var(--muted)}.implementation-section h2,.motion-details h2{font-size:28px;font-weight:400;letter-spacing:-.03em;margin-bottom:15px}.implementation-section .placeholder{margin-top:28px;height:240px}.motion-details{border-top:1px solid var(--line);padding:40px 0}.motion-details .eyebrow{color:var(--muted);margin-bottom:18px}.control-placeholder{width:330px;max-width:100%;margin:20px 0 0 auto;border:1px solid var(--line);background:#ffffff70;padding:23px;border-radius:14px}.control-placeholder>p:nth-child(2){font-size:12px;color:var(--muted);margin-top:18px}.control-line{height:3px;background:var(--line);margin-top:20px}.next-project{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:45px 0 65px}.next-project .eyebrow{color:var(--muted);margin-bottom:16px}.next-project h2{font-size:clamp(26px,3.8vw,50px);letter-spacing:-.04em;font-weight:400}.next-project p:last-child{font-size:12px;color:var(--muted);margin-top:9px}.next-project>span{font-size:42px;transition:transform 200ms ease}.next-project:hover>span{transform:translate(3px,-3px)}
@media(min-width:1450px){.hero{min-height:660px}.card-media{height:380px}}
@media(max-width:1000px){.brand-sub{display:none}.hero{column-gap:4%;min-height:560px}.hero h1{font-size:clamp(42px,5.6vw,58px)}.hero-copy .eyebrow{max-width:300px;line-height:1.8}.card-caption{display:block}.card-category{display:block;text-align:left;margin-top:8px}.card-media{height:280px}.about-section{grid-template-columns:1fr 1.6fr;gap:30px}}
@media(max-width:640px){html{scroll-padding-top:30px}.site-header{padding-top:23px;padding-bottom:23px;gap:15px}.brand{font-size:10px;gap:7px;letter-spacing:.02em}.brand-mark{width:14px;height:14px;flex-shrink:0}.brand-mark:after{left:2.5px;top:2.5px}.site-header nav{gap:15px;font-size:11px}.site-header nav a span{display:none}.site-header nav a:last-child{display:none}.hero{display:block;padding-top:44px;min-height:0}.hero h1{font-size:clamp(40px,10vw,60px)}.hero-copy .eyebrow{max-width:100%;font-size:8px;margin-bottom:23px}.hero-intro{font-size:11px;margin-top:23px;max-width:300px}.hero-character{width:70%;margin:38px 0 0 auto}.character-placeholder{aspect-ratio:1.5}.hero-character-note{font-size:8px}.hero-bottom{margin-top:35px;padding-bottom:22px}.hero-bottom>span{display:none}.hero-bottom>a{width:100%;font-size:11px;gap:10px}.hero-bottom b{margin-left:auto}.work-section{padding:40px 0 57px}.section-heading{align-items:flex-start;margin-bottom:24px}.section-heading h2{font-size:29px}.section-heading>p{display:none}.section-heading .eyebrow{font-size:9px}.work-grid{grid-template-columns:1fr;gap:30px}.work-card{grid-column:auto}.card-media,.card-5 .card-media{height:auto;aspect-ratio:1.35}.card-caption{display:flex}.card-caption h3{font-size:19px}.card-category{display:none}.card-caption p{font-size:11px}.about-section{display:block;padding:37px 0 45px}.about-section h2{font-size:30px}.chinese-title{display:inline;margin-left:15px;font-size:11px}.about-content{margin-top:30px}.about-statement{font-size:28px}.about-fields{gap:23px;margin-top:26px}.contact-section{padding:33px 0 40px}.contact-row{display:block}.contact-row h2{font-size:39px}.contact-pending,.contact-link{display:block;margin-top:23px}.contact-pending span{margin-left:20px}.site-footer{flex-wrap:wrap;font-size:9px;padding-top:20px;padding-bottom:23px}.site-footer>span{display:none}.detail-main{padding-top:24px}.project-heading{padding:40px 0 34px}.project-heading>.eyebrow{font-size:9px;gap:10px}.project-heading>.eyebrow>span{max-width:55%;text-align:right}.project-heading h1{font-size:43px;overflow-wrap:anywhere}.project-subtitle{display:block;margin-top:20px}.project-subtitle h2{font-size:17px}.project-subtitle>p{font-size:11px;line-height:1.9;margin-top:12px}.experience-label>span{font-size:9px}.experience-stage{aspect-ratio:4/3}.experience-stage .placeholder{min-height:0}.glass-tabs{width:100%}.glass-tabs button{min-width:0;width:50%;padding:11px 9px;font-size:11px}.concept-row{display:block;margin-top:33px;padding:27px 0 33px}.concept-row h2{font-size:22px;margin-top:21px}.concept-row p:not(.eyebrow){font-size:12px}.breakdown-section{padding:30px 0 39px}.breakdown-grid{grid-template-columns:1fr;gap:30px}.breakdown-grid .small-placeholder{height:auto;aspect-ratio:1.8}.breakdown-grid .eyebrow{margin-top:15px}.breakdown-grid h3{font-size:18px}.implementation-section{display:block;padding:29px 0 39px}.implementation-section h2{font-size:23px;margin-top:20px}.implementation-section .placeholder{height:190px}.motion-details{padding:30px 0}.motion-details h2{font-size:24px}.next-project{padding:32px 0 45px;gap:15px}.next-project h2{font-size:28px}.next-project>span{font-size:33px}.control-placeholder{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* HAN / cover-led art direction. Shared by the home and all project pages. */
@font-face{font-family:Anton;src:url('assets/fonts/anton.woff2') format('woff2');font-display:swap;font-weight:400}
:root{--paper:#f6f3e9;--ink:#0b0b0b;--muted:#77756e;--line:#d9d4c9;--media:#eeeadf;--accent:#ff272b;--blue:#096bff;--gutter:clamp(24px,4.7vw,80px);--max:1800px;font-family:Arial,'Helvetica Neue','PingFang SC',sans-serif}
body{background:var(--paper);-webkit-font-smoothing:antialiased}h1,h2,h3{font-weight:500}.icon{display:inline-block;width:24px;height:24px;object-fit:contain;vertical-align:middle;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}.eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.7;font-weight:500}.site-header{border:0;padding-top:42px;padding-bottom:35px;gap:30px}.brand{font-size:29px;font-weight:950;letter-spacing:-1.5px}.header-rule{height:1px;background:#66625a;flex:1}.site-header nav{gap:42px;font-size:17px;font-weight:600}.site-header nav a{padding:8px 0}.site-header nav a:hover{color:var(--accent)}
.hero{display:block;min-height:0;height:clamp(530px,42vw,750px);padding-top:0;position:relative;isolation:isolate}.hero-copy{position:relative;z-index:2;width:55%;pointer-events:none}.hero-copy a{pointer-events:auto}.hero h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(130px,13.8vw,246px);line-height:1.04;letter-spacing:-.035em}.hero h1>span{display:flex;align-items:flex-start;white-space:nowrap}.hero h1 .title-motion>.icon{width:clamp(40px,4.7vw,78px);height:clamp(40px,4.7vw,78px);margin:5px 0 0 10px;filter:invert(22%) sepia(91%) saturate(4607%) hue-rotate(347deg) brightness(103%) contrast(110%)}em{font-style:italic;font-weight:inherit}.hero h1 em{-webkit-text-stroke:1.5px var(--ink);color:transparent;letter-spacing:-.065em;margin-left:5px}.hero-copy h2{font-size:clamp(22px,2vw,34px);line-height:1.2;letter-spacing:-.055em;font-weight:600;margin-top:0}.hero-intro{font-size:clamp(14px,1.15vw,20px);line-height:1.25;color:#88857d;margin-top:18px;letter-spacing:-.02em}.text-link{display:inline-flex;gap:22px;align-items:center;font-size:17px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:9px}.text-link>.icon{width:35px;filter:invert(22%) sepia(91%) saturate(4607%) hue-rotate(347deg) brightness(103%) contrast(110%);transition:transform .2s}.text-link:hover>.icon{transform:translateX(5px)}.hero-explore{margin-top:26px}.hero-art{position:absolute;left:40%;width:64%;top:-2%;z-index:0;mix-blend-mode:multiply;pointer-events:none;transform-origin:55% 60%}.hero-art>img{object-fit:contain;width:100%;height:auto;animation:float-scene 5s ease-in-out infinite}
.work-section{padding:105px 0 70px}.section-heading{margin-bottom:38px;align-items:flex-end}.section-heading .eyebrow{color:var(--ink);margin-bottom:18px}.section-heading h2{font:400 clamp(48px,6.2vw,102px)/1.05 Anton,Impact,sans-serif;letter-spacing:-.03em}.section-heading h2>em{-webkit-text-stroke:1px var(--ink);color:transparent}.section-heading h2>sup{font:400 13px Arial;vertical-align:top;display:inline-block;margin:10px 0 0 15px;letter-spacing:0}.section-heading>p{font-size:12px;color:var(--muted);line-height:1.8;text-align:right}.work-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:52px 28px}.card-media{height:440px;border:1px solid var(--line);overflow:hidden;transition:transform .3s}.card-5 .card-media{height:460px}.work-card:hover .card-media{transform:translateY(-5px);box-shadow:none}.preview-art{width:100%;height:100%;position:relative;overflow:hidden;background:#e6e4db}.card-no{left:24px;top:24px;font-size:10px;letter-spacing:.08em;color:var(--ink);max-width:75%;z-index:2}.card-open{width:40px;height:40px;right:20px;top:17px;border-radius:50%;border:1px solid #0b0b0b33;display:grid;place-items:center;color:var(--ink);transition:background .2s}.card-open>.icon{height:20px;width:20px}.work-card:hover .card-open{background:var(--accent);border-color:var(--accent)}.work-card:hover .card-open>.icon{filter:invert(1)}.preview-note{position:absolute;bottom:20px;left:24px;font-size:9px;letter-spacing:.12em;color:#64645d;z-index:2}.art-word{position:absolute;font-family:Anton,Impact,sans-serif;line-height:1;font-size:90px;letter-spacing:-.035em;left:30px;top:100px}.phone{position:absolute;object-fit:contain;width:190px;height:auto;max-height:none;filter:drop-shadow(10px 20px 20px #10234221)}.voice-art{background:#dce7f0}.voice-art .art-word{color:#086bff;top:105px;font-size:clamp(60px,7.5vw,135px)}.voice-art .phone{right:13%;top:115px;transform:none;width:34%}.continuity-art{background:#e6e5e1}.continuity-art .phone{width:34%;top:108px}.phone-one{left:15%;transform:none}.phone-two{right:12%;transform:none;margin-top:20px}.light-art{background:#12171f;color:#f9f5eb}.light-art .art-word{font-size:65px;left:24px;top:92px;color:#f9f5eb;max-width:75%}.light-art .phone{width:41%;right:9%;top:142px;transform:none}.work-card[data-project="light-wave"] .card-no,.work-card[data-project="light-wave"] .preview-note{color:#e6e3d9}.work-card[data-project="light-wave"] .card-open{background:var(--paper);border-color:var(--paper)}.empty-art{background:#e9e5db;display:flex;justify-content:flex-end;align-items:flex-end;padding:30px}.empty-number{font:400 300px/.9 Anton,Impact,sans-serif;position:absolute;bottom:0;left:25px;color:#d4cec1;letter-spacing:-.04em}.empty-art p{z-index:1;text-align:right;font-size:17px}.empty-art p span{display:block;color:var(--muted);font-size:12px;margin-top:8px}.character-art{background:#e3e8ed}.character-art .art-word{top:105px;font-size:clamp(60px,6vw,110px);left:36px}.pose{position:absolute;object-fit:contain;mix-blend-mode:multiply;width:23%;height:auto;top:100px}.pose-one{left:34%;transform:none}.pose-two{left:55%;top:85px;transform:none}.pose-three{left:76%;top:130px}.card-caption{padding-top:18px;align-items:center}.card-caption h3{font-size:clamp(21px,2.1vw,34px);font-weight:600;letter-spacing:-.04em}.card-caption p{font-size:12px;margin-top:9px;line-height:1.7}.card-caption p>span{font-size:11px}.card-category{font-size:9px;color:var(--ink);white-space:nowrap;padding-top:0;display:flex;align-items:center;gap:8px}.card-category .icon{height:17px;width:17px}.collection-end{display:flex;align-items:center;justify-content:space-between;margin-top:60px;padding-bottom:10px}.collection-end>span{font-size:13px;color:var(--muted)}.collection-end .text-link{font-size:14px}.collection-end .icon{width:20px}
.about-section{padding:85px 0 90px;grid-template-columns:1fr 1.2fr;gap:9%;border-top:1px solid var(--ink)}.about-side>.eyebrow{margin-bottom:27px;color:var(--ink)}.about-section h2{font:400 clamp(50px,5vw,90px)/1.1 Anton,Impact,sans-serif;letter-spacing:-.025em}.about-section h2 em{color:var(--accent)}.about-robot{width:200px;height:200px;object-fit:contain;mix-blend-mode:multiply;transform:none;margin:25px 0 0 17%}.about-content{padding-top:50px}.about-statement{font-size:clamp(27px,3vw,49px);line-height:1.5;font-weight:600;letter-spacing:-.05em}.about-statement span{color:var(--accent)}.about-english{font-size:15px;color:var(--muted);margin-top:14px;letter-spacing:-.02em}.about-fields{gap:30px;margin-top:50px}.about-fields h3{font-size:10px;letter-spacing:.06em;margin-bottom:15px}.about-fields p{font-size:13px;color:var(--muted)}.disciplines{gap:15px;flex-wrap:wrap;margin-top:32px}.disciplines span{border:1px solid var(--line);border-radius:30px;padding:9px 15px;font-size:10px}.contact-section{padding:55px 0 65px;border-top:1px solid var(--ink)}.contact-section>.eyebrow{color:var(--ink);margin-bottom:25px}.contact-row{align-items:flex-end}.contact-row h2{font:400 clamp(85px,12vw,204px)/1 Anton,Impact,sans-serif;letter-spacing:-.035em}.contact-row h2 em{color:var(--accent)}.contact-info{text-align:right;padding-bottom:8px}.contact-info>p:last-child{font-size:11px;color:var(--muted);margin-top:16px}.contact-pending{font-size:14px;color:var(--ink)}.contact-link{font-size:18px;color:var(--ink)}.contact-link .icon{width:23px;margin-left:10px}.site-footer{border-top:1px solid var(--ink);padding-top:24px;padding-bottom:30px;font-size:11px}.footer-brand{font-size:23px;font-weight:950;letter-spacing:-1px}.site-footer>a:last-child{display:flex;align-items:center;gap:10px;color:var(--ink)}.site-footer .icon{width:15px;height:15px}
/* Existing project routes use the same typography, accents and quiet paper stages. */
.detail-main{padding-top:27px}.back-link{display:inline-flex;align-items:center;min-height:30px;font-size:12px}.project-heading{padding:55px 0 40px}.project-heading h1{font:400 clamp(55px,8vw,132px)/1.05 Anton,Impact,sans-serif;letter-spacing:-.025em;max-width:1000px}.project-heading>.eyebrow{color:var(--accent)}.project-subtitle h2{font-size:20px}.project-subtitle>p{font-size:13px}.experience-stage{aspect-ratio:16/8;overflow:hidden;border:1px solid var(--line)}.experience-stage .preview-art{min-height:100%}.experience-stage .phone{width:22%;top:9%}.experience-stage .voice-art .phone{right:25%;top:12%;width:22%}.experience-stage .art-word{font-size:clamp(70px,10vw,160px);top:25%;left:10%}.experience-stage .phone-one{left:27%}.experience-stage .phone-two{right:26%}.experience-stage .character-art .art-word{font-size:clamp(50px,7vw,110px);left:4%;top:20%}.experience-stage .pose{top:10%}.experience-stage .pose-three{top:20%}.placeholder{background:#eeeade;border:1px solid var(--line);color:var(--muted);min-height:150px}.placeholder-cross{color:#bbb4a6}.placeholder-label{font-size:11px;color:var(--muted)}.placeholder-label small{color:var(--muted)}.glass-tabs{background:transparent;border:1px solid var(--ink);border-radius:0;padding:0;box-shadow:none;margin:0 0 25px}.glass-tabs button{border-radius:0;padding:14px 32px;min-width:200px}.glass-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);box-shadow:none}.concept-row{margin-top:40px;padding:34px 0 45px}.concept-row h2{font-size:27px}.breakdown-section .section-heading h2{font-family:Arial,'PingFang SC',sans-serif;font-size:30px;font-weight:600}.breakdown-grid h3{font-weight:600}.implementation-section h2{font-weight:600}.motion-details h2{font-weight:600}.next-project h2{font:400 clamp(32px,4vw,66px)/1.1 Anton,Impact,sans-serif}.next-project>span{color:var(--accent)}

@media(min-width:1450px){.hero{min-height:0}.card-media{height:490px}.card-5 .card-media{height:490px}}
@media(max-width:1100px){.hero{height:520px}.hero h1{font-size:13.6vw}.hero-art{left:37%;width:69%;top:5%}.hero-intro{font-size:14px}.hero-explore{margin-top:20px}.card-media{height:350px}.card-5 .card-media{height:350px}.card-caption{display:block}.card-category{margin-top:12px}.card-caption p>span{display:none}.art-word{font-size:65px}.light-art .art-word{font-size:50px}.character-art .art-word{font-size:60px}.pose{top:100px}.pose-two{top:80px}.pose-three{top:120px}}
@media(max-width:700px){.site-header{padding-top:24px;padding-bottom:28px;gap:20px}.brand{font-size:25px}.header-rule{display:block}.site-header nav{font-size:14px;gap:24px}.site-header nav a:last-child{display:block}.hero{display:flex;flex-direction:column;height:auto;padding-top:0}.hero-copy{width:100%}.hero h1{font-size:20.4vw;line-height:1.06;letter-spacing:-.035em}.hero h1 em{margin-left:3px;-webkit-text-stroke:1px var(--ink)}.hero h1 .title-motion>.icon{height:11vw;width:11vw;margin-top:2px}.hero-copy h2{font-size:23px;letter-spacing:-.045em;margin-top:6px}.hero-intro{font-size:14px;line-height:1.4;margin-top:15px}.hero-explore{font-size:15px;margin-top:18px}.hero-art{position:relative;width:114%;left:-7%;margin-top:-18px;top:auto;z-index:-1}.work-section{padding:45px 0 40px}.section-heading{margin-bottom:25px;display:block}.section-heading h2{font-size:clamp(40px,10vw,70px);white-space:nowrap}.section-heading h2>sup{font-size:10px;margin:5px 0 0 8px}.section-heading .eyebrow{font-size:9px;margin-bottom:13px}.section-heading>p{display:block;text-align:left;font-size:11px;margin-top:16px}.work-grid{grid-template-columns:1fr;gap:30px}.work-card{grid-column:1}.card-media,.card-5 .card-media{height:340px;aspect-ratio:auto}.card-no{left:18px;top:20px;font-size:8px;max-width:70%}.card-open{right:16px;top:13px;width:33px;height:33px}.card-caption{display:flex;align-items:flex-start;gap:10px}.card-caption h3{font-size:22px}.card-caption p{font-size:11px;margin-top:5px}.card-category{display:none}.voice-art .art-word{font-size:80px;left:25px;top:90px}.voice-art .phone{width:37%;top:110px;right:14%}.continuity-art .phone{top:87px;width:34%}.light-art .art-word{font-size:55px;top:80px}.light-art .phone{width:37%;top:115px;right:13%}.empty-number{font-size:250px;left:20px}.empty-art p{font-size:14px}.character-art .art-word{font-size:49px;top:75px;left:20px}.character-art .pose{width:42%;top:125px}.character-art .pose-one{left:-3%;top:150px}.character-art .pose-two{left:28%;top:125px}.character-art .pose-three{left:62%;top:155px}.collection-end{display:block;margin-top:35px}.collection-end>span{display:block;font-size:12px;margin-bottom:20px}.collection-end .text-link{font-size:13px}.about-section{padding:43px 0 45px;display:block;position:relative}.about-section h2{font-size:54px}.about-side>.eyebrow{font-size:9px;margin-bottom:20px}.about-robot{width:145px;height:145px;position:absolute;right:-10px;top:70px;margin:0}.about-content{padding-top:35px;margin-top:0}.about-statement{font-size:29px}.about-english{font-size:13px}.about-fields{margin-top:32px;gap:22px}.about-fields h3{font-size:8px;line-height:1.7}.about-fields p{font-size:12px}.disciplines{gap:8px;margin-top:26px}.disciplines span{font-size:8px;padding:8px 11px}.contact-section{padding:34px 0 40px}.contact-section>.eyebrow{font-size:9px;margin-bottom:25px}.contact-row{display:block}.contact-row h2{font-size:23vw;line-height:1.03}.contact-info{text-align:left;margin-top:28px;padding:0}.contact-pending{margin-top:0;font-size:13px}.contact-info>p:last-child{font-size:10px}.site-footer{font-size:9px;padding-top:20px}.site-footer>span{display:none}.site-footer .footer-brand{font-size:22px}.detail-main{padding-top:12px}.project-heading{padding-top:30px}.project-heading h1{font-size:15vw;overflow-wrap:normal;word-break:normal}.project-heading>.eyebrow{font-size:8px}.project-subtitle h2{font-size:18px}.project-subtitle>p{font-size:12px}.experience-label>span{font-size:9px}.experience-stage{aspect-ratio:1/1.05}.experience-stage .art-word{font-size:70px;left:8%;top:18%}.experience-stage .phone{width:36%;top:14%}.experience-stage .phone-one{left:14%}.experience-stage .phone-two{right:12%}.experience-stage .voice-art .phone{width:37%;right:15%;top:34%}.experience-stage .light-art .phone{right:15%;top:35%;width:36%}.experience-stage .character-art .art-word{font-size:43px;top:17%;left:6%}.experience-stage .pose-one{top:45%;left:-3%}.experience-stage .pose-two{top:37%;left:28%}.experience-stage .pose-three{top:48%;left:62%}.glass-tabs{width:100%}.glass-tabs button{min-width:0;width:50%;padding:13px 8px}.concept-row h2{font-size:23px}.breakdown-section .section-heading h2{font-size:26px}.next-project h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){.hero-art>img{animation:none!important}.work-card:hover .card-media{transform:none}}
/* Post-render corrections: preserve opaque white character bodies and crop supplied screens. */
em{font-synthesis:style}.hero h1{font-size:clamp(118px,11.8vw,212px);line-height:1.09}.hero h1 em{letter-spacing:-.035em}.pose,.about-robot{mix-blend-mode:normal}.phone{border-radius:22px}.phone-crop{aspect-ratio:790/1704;overflow:hidden}.phone-crop>img{position:absolute;width:364.56%;max-width:none;height:105.63%;left:-127.34%;top:-2.82%;object-fit:fill}.light-crop{aspect-ratio:360/800;overflow:hidden}.light-crop>img{position:absolute;width:400%;max-width:none;height:112.5%;left:-230.55%;top:-6.25%;object-fit:fill}.experience-stage .light-art .light-crop{width:22%;right:20%;top:10%}
@media(max-width:1100px) and (min-width:701px){.hero h1{font-size:12.7vw}}
@media(max-width:700px){.hero h1{font-size:20.4vw;line-height:1.06}.experience-stage .light-art .light-crop{width:36%;right:15%;top:30%}}
.light-art .art-word{font-size:55px}
@media(max-width:700px){.light-art .art-word{font-size:43px;top:78px}.light-art .phone{top:175px}.experience-stage .light-art .art-word{font-size:43px}}
@media(max-width:700px){.character-art .pose{width:35%}.character-art .pose-one{left:1%;top:190px}.character-art .pose-two{left:32%;top:180px}.character-art .pose-three{left:65%;top:200px}.experience-stage .character-art .pose-one{top:52%}.experience-stage .character-art .pose-two{top:48%}.experience-stage .character-art .pose-three{top:55%}}
/* Keep the keyboard skip link outside screenshots until it receives focus. */
.skip{clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden}.skip:focus{clip-path:none;width:auto;height:auto;padding:16px}

/* Requested project order, Chinese cover titles and front-facing interfaces. */
.preview-art .art-word{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,56px);line-height:1.17;letter-spacing:-.045em}
.voice-art .art-word{top:95px;left:32px}.light-art .art-word{top:90px;left:28px;font-size:clamp(32px,3.3vw,52px)}
.character-art .art-word{top:80px;left:28px;font-size:38px}.character-art .pose{width:30%;top:215px}.character-art .pose-one{left:4%}.character-art .pose-two{left:36%;top:200px}.character-art .pose-three{left:68%;top:220px}
.continuity-art .art-word{top:92px;left:30px;font-size:40px}.continuity-art .art-word small{font:inherit;font-size:.75em}.continuity-art .phone{top:125px;width:25%}.continuity-art .phone-one{left:43%}.continuity-art .phone-two{right:3%;margin-top:0}
.workflow-art{background:#e8e4dc;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:70px 5%;gap:7%}.workflow-art .art-word{position:static;font-size:clamp(34px,4vw,64px)}.workflow-steps{list-style:none;margin:0;padding:0}.workflow-steps li{display:grid;grid-template-columns:30px 1fr;gap:8px 12px;padding:20px 0;border-bottom:1px solid #bfb9ad;font-size:20px;font-weight:500}.workflow-steps li>span{font-size:11px;padding-top:5px;color:var(--accent)}.workflow-steps li>small{grid-column:2;font-size:9px;letter-spacing:.12em;color:var(--muted)}
.project-heading .chinese-heading{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-size:clamp(38px,5.3vw,82px);font-weight:700;line-height:1.25;letter-spacing:-.045em}.workflow-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:35px 0 60px;border-top:1px solid var(--line)}.workflow-methods h2{font-size:22px;margin:18px 0}.workflow-methods article>p:last-child{font-size:14px;line-height:1.9;color:var(--muted)}
.experience-stage .character-art .art-word{font-size:clamp(30px,4vw,60px);top:20%;left:4%}.experience-stage .character-art .pose{width:23%;top:15%}.experience-stage .character-art .pose-one{left:33%}.experience-stage .character-art .pose-two{left:55%;top:12%}.experience-stage .character-art .pose-three{left:76%;top:20%}
.experience-stage .continuity-art .art-word{font-size:clamp(28px,3.5vw,56px);left:5%;top:22%}.experience-stage .continuity-art .phone{width:22%;top:10%}.experience-stage .continuity-art .phone-one{left:43%}.experience-stage .continuity-art .phone-two{right:9%}
@media(max-width:1100px){.character-art .art-word{font-size:32px;top:70px}.character-art .pose{top:180px}.character-art .pose-two{top:170px}.character-art .pose-three{top:185px}.continuity-art .art-word{font-size:30px;left:25px;top:80px}.workflow-steps li{font-size:16px;padding:16px 0}.workflow-art .art-word{font-size:40px}}
@media(max-width:700px){.preview-art .art-word{font-size:36px;line-height:1.18}.voice-art .art-word{left:24px;top:90px}.light-art .art-word{left:24px;top:80px;font-size:40px}.character-art .art-word{left:22px;top:75px;font-size:31px}.character-art .pose{width:31%;top:190px}.character-art .pose-one{left:3%}.character-art .pose-two{left:35%;top:180px}.character-art .pose-three{left:67%;top:195px}.continuity-art .art-word{font-size:30px;left:24px;top:74px}.continuity-art .phone{width:31%;top:175px}.continuity-art .phone-one{left:15%}.continuity-art .phone-two{right:15%}.workflow-art{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;padding:55px 24px 38px}.workflow-art .art-word{font-size:30px;line-height:1.18}.workflow-art .art-word br{display:none}.workflow-steps li{font-size:15px;padding:10px 0;gap:3px 8px;grid-template-columns:20px 1fr}.workflow-steps li>span{padding-top:2px}.workflow-steps li>small{font-size:7px}.workflow-methods{grid-template-columns:1fr;gap:30px;padding-bottom:40px}.workflow-methods h2{font-size:20px;margin:12px 0}.workflow-methods article>p:last-child{font-size:13px}.project-heading .chinese-heading{font-size:36px;line-height:1.3}.experience-stage .character-art .art-word{font-size:32px;top:16%;left:7%}.experience-stage .character-art .pose{width:31%;top:50%}.experience-stage .character-art .pose-one{left:3%}.experience-stage .character-art .pose-two{left:35%;top:47%}.experience-stage .character-art .pose-three{left:67%;top:53%}.experience-stage .continuity-art .art-word{font-size:30px;left:7%;top:18%}.experience-stage .continuity-art .phone{width:31%;top:48%}.experience-stage .continuity-art .phone-one{left:15%}.experience-stage .continuity-art .phone-two{right:15%}}

/* Project brief layout: narrow voice, wide screen search, full-row character. */
.work-grid>[data-project="voice-visualization"]{grid-column:span 2}
.work-grid>[data-project="light-wave"]{grid-column:span 3}
.work-grid>[data-project="character-animation"]{grid-column:1/-1}
.work-grid>[data-project="interactive-motion"]{grid-column:span 3}
.work-grid>[data-project="motion-ai-workflow"]{grid-column:span 2}
.voice-art>.voice-wave{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 17%;border:0;border-radius:0;filter:none;transform:none}
.voice-art .art-word{z-index:1}
.work-card[data-project="character-animation"] .character-art .art-word{top:95px;left:36px;font-size:clamp(36px,4vw,60px)}
.work-card[data-project="character-animation"] .pose{width:22.5%;height:78%;top:16%;object-fit:contain}
.work-card[data-project="character-animation"] .pose-one{left:30%}
.work-card[data-project="character-animation"] .pose-two{left:53%}
.work-card[data-project="character-animation"] .pose-three{left:76%}
.work-card[data-project="motion-ai-workflow"] .workflow-art{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:20px;padding:60px 30px 32px}
.work-card[data-project="motion-ai-workflow"] .workflow-art .art-word{font-size:36px}
.work-card[data-project="motion-ai-workflow"] .workflow-steps li{font-size:17px;padding:14px 0}
@media(max-width:1100px){.work-card[data-project="motion-ai-workflow"] .workflow-art{padding:55px 24px 25px;gap:15px}.work-card[data-project="motion-ai-workflow"] .workflow-art .art-word{font-size:28px}.work-card[data-project="motion-ai-workflow"] .workflow-steps li{font-size:14px;padding:10px 0}}
@media(max-width:700px){.work-grid>.work-card{grid-column:1/-1}.work-card[data-project="character-animation"] .character-art .art-word{top:75px;left:22px;font-size:31px}.work-card[data-project="character-animation"] .pose{width:31%;height:45%;top:50%}.work-card[data-project="character-animation"] .pose-one{left:3%}.work-card[data-project="character-animation"] .pose-two{left:35%}.work-card[data-project="character-animation"] .pose-three{left:67%}.work-card[data-project="motion-ai-workflow"] .workflow-art .art-word{font-size:30px}}

.work-grid>[data-project="motion-ai-workflow"] .card-media{height:440px}
@media(min-width:1450px){.work-grid>[data-project="motion-ai-workflow"] .card-media{height:490px}}
@media(max-width:1100px){.work-grid>[data-project="motion-ai-workflow"] .card-media{height:350px}}
@media(max-width:700px){.work-grid>[data-project="motion-ai-workflow"] .card-media{height:340px}.voice-art>.voice-wave{object-position:center 9%}}

.work-card[data-project="light-wave"]:hover .card-open{background:var(--accent);border-color:var(--accent)}

/* Float character on a static stage; scale both art layers to 80%. */
.hero-art{transform:scale(.8);transform-origin:center;mix-blend-mode:normal;pointer-events:auto}
.hero-art>.hero-stage{animation:none!important;transform:none!important;mix-blend-mode:normal;pointer-events:none}
.hero-character-runtime{position:absolute;inset:-2% 0 14% 8%;isolation:isolate;touch-action:pan-y}
.hero-character-runtime canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-character-runtime .fx-back{z-index:0;pointer-events:none}.hero-character-runtime .character-canvas{z-index:1}.hero-character-runtime .fx-front{z-index:2;pointer-events:none}.hero-character-runtime .fx-flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.hero-character-runtime .hero-fallback{position:absolute;inset:20% 20% 5%;width:60%;height:75%;object-fit:contain;pointer-events:none}
.hero-character-runtime[data-ready=true] .hero-fallback{visibility:hidden}


.work-card[data-project="light-wave"] .light-art .art-word{left:9%;top:96px}
.work-card[data-project="light-wave"] .scan-phone{width:32%;top:64px;right:14%;border-radius:24px;transform:none}
.voice-art>.voice-wave{inset:0 auto 0 -4%;width:112%}
@media(max-width:700px){.work-card[data-project="light-wave"] .light-art .art-word{left:9%;top:100px;font-size:38px}.work-card[data-project="light-wave"] .scan-phone{width:38%;right:14%;top:70px}.hero-art{z-index:0}.hero-copy{z-index:2}}

.hero-character-runtime{inset:-12% -12% 4% -4%}

/* Circle-search detail: keep the cover's own title, with the hint beside the phone. */
.project-detail>.experience-section{margin-top:30px}
.circle-live-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;width:100%;height:clamp(560px,48vw,760px);aspect-ratio:auto;min-height:0;background:#12171f;color:#f9f5eb;padding:20px 5%;gap:20px;overflow:hidden}
.circle-cover-copy{min-width:0}

.circle-cover-copy h2{font:600 clamp(32px,4.4vw,70px)/1.2 Arial,'PingFang SC',sans-serif;letter-spacing:-.045em;margin:0}
.circle-demo{display:block;border:0;min-width:0;width:100%;height:100%;min-height:0;background:transparent}
@media(max-width:700px){.project-detail>.experience-section{margin-top:24px}.circle-live-cover{grid-template-columns:minmax(0,1fr);aspect-ratio:auto;height:auto;min-height:0;padding:32px 24px 12px;gap:4px}.circle-cover-copy h2{font-size:35px;line-height:1.22}.circle-demo{height:560px;min-height:0}}

/* Voice detail: live voice-wave demo (phone frame, no control panel) replaces the static cover. */
.voice-live-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;width:100%;height:clamp(560px,48vw,760px);aspect-ratio:auto;min-height:0;background:#dce7f0;padding:20px 7%;gap:4%}

.voice-cover-copy h2{font:600 clamp(36px,4.4vw,70px)/1.2 Arial,'PingFang SC',sans-serif;letter-spacing:-.045em;margin:0 0 25px}
.voice-cover-copy>h2+p{font-size:13px;line-height:1.7;color:var(--muted)}
.voice-demo{display:block;border:0;min-width:0;width:100%;height:100%;min-height:0;background:transparent}
@media(max-width:700px){.voice-live-cover{grid-template-columns:minmax(0,1fr);aspect-ratio:auto;height:auto;min-height:0;padding:32px 24px 12px;gap:4px}.voice-cover-copy h2{font-size:35px;line-height:1.22;margin-bottom:14px}.voice-cover-copy>h2+p{font-size:12px}.voice-demo{height:530px;min-height:0}}

/* Detail-cover titles are 1.5 × their original size; homepage cards stay unchanged. */
.project-detail .voice-cover-copy h2{font-size:clamp(54px,6.6vw,105px)}
.project-detail .circle-cover-copy h2{font-size:clamp(48px,6.6vw,105px)}
.project-detail .experience-stage .character-art .art-word{font-size:clamp(45px,6vw,90px)}
.project-detail .experience-stage .continuity-art .art-word{font-size:clamp(42px,5.25vw,84px)}
.project-detail .experience-stage .workflow-art .art-word{font-size:clamp(51px,6vw,96px)}
.project-detail .experience-stage>.placeholder>.placeholder-label{font-size:16.5px}
@media(max-width:700px){
  .project-detail .voice-cover-copy h2,.project-detail .circle-cover-copy h2{font-size:52.5px}
  .project-detail .experience-stage .character-art .art-word{font-size:48px}
  .project-detail .experience-stage .continuity-art .art-word,.project-detail .experience-stage .workflow-art .art-word{font-size:45px}
  .project-detail .experience-stage:has(.workflow-art){aspect-ratio:auto}
  .project-detail .experience-stage .workflow-art{height:auto;min-height:0}
  .project-detail .experience-stage .workflow-art .art-word br{display:block}
}
/* 小 v 语音封面：声音来源玻璃开关 + 模拟音量 */
@property --gb-fill-opacity{syntax:'<number>';inherits:true;initial-value:.14}
@property --gb-color{syntax:'<color>';inherits:true;initial-value:#fff}
.voice-controls{margin-top:34px;max-width:520px}
.voice-mode-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.voice-mode{display:flex;gap:8px;flex:none}
.voice-mode glass-button{--gb-height:44px;--gb-font-size:14px;--gb-padding-x:20px;--gb-fill-color:#fff;--gb-fill-opacity:.2;--gb-color:#4d5866;--gb-shadow:0 8px 24px rgba(36,58,88,.12);--gb-focus-color:var(--ink);transition:--gb-fill-opacity .28s ease,--gb-color .28s ease}
.voice-mode glass-button[aria-pressed=true]{--gb-fill-opacity:.88;--gb-color:var(--ink)}
.voice-mode glass-button[data-voice-mode=live][aria-pressed=true]::before{content:'';position:absolute;z-index:1;top:9px;right:11px;width:6px;height:6px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.18)}
.voice-mic-note{flex:1 1 180px;max-width:15em;margin:0;font-size:12px;line-height:1.6;color:#5d6470}
.voice-mic-status{min-height:1.6em;margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--ink)}
.voice-mic-status:empty{visibility:hidden}
.voice-volume{display:grid;grid-template-columns:auto minmax(0,1fr) 3.2em;align-items:center;gap:14px;margin-top:14px;max-width:360px;font-size:12px;color:#4d5866;transition:opacity .25s ease}
.voice-volume output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.voice-volume input{--p:66.67%;-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}
.voice-volume input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--p),rgba(11,11,11,.14) var(--p))}
.voice-volume input::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--p),rgba(11,11,11,.14) var(--p))}
.voice-volume input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 12px rgba(36,58,88,.18)}
.voice-volume input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 12px rgba(36,58,88,.18)}
.voice-volume input:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.voice-volume.is-off{opacity:.38}
.voice-volume.is-off input{cursor:default}
@media(max-width:700px){.voice-controls{margin-top:22px}.voice-mic-note{flex-basis:100%;max-width:none}.voice-volume{max-width:none}}

/* Shared project navigation: compact, right-aligned copy and horizontal arrow. */
.next-project{justify-content:flex-end;gap:24px}
.next-project>div{min-width:0;text-align:right}
.next-project h2{font:600 clamp(22px,2.4vw,30px)/1.3 Arial,'PingFang SC',sans-serif;letter-spacing:-.035em}
.next-project .eyebrow{margin-bottom:12px}
.next-project>.next-project-arrow{display:flex;flex:none;align-items:center}
.next-project-arrow .icon{width:32px;height:32px}
.next-project:hover>.next-project-arrow{transform:translateX(4px)}
@media(max-width:700px){.next-project{gap:16px}.next-project h2{font-size:22px}.next-project-arrow .icon{width:28px;height:28px}}

/* Adopted voice cover: open page background, original left/right composition. */
.voice-project .voice-live-cover{background:transparent;border:0}
.voice-project .voice-cover-copy{height:100%;position:relative;display:flex;flex-direction:column;justify-content:center;padding-bottom:228px}
.voice-project .voice-controls{position:absolute;left:0;right:auto;bottom:23px;width:min(320px,100%);max-width:none;margin:0}
.voice-project .voice-mode-row{gap:12px}
.voice-project .voice-mode{gap:6px}
.voice-project .voice-mode glass-button{--gb-height:36px;--gb-font-size:12px;--gb-padding-x:16px;--gb-shadow:0 5px 16px rgba(36,58,88,.09)}
.voice-project .voice-mic-note{flex:0 0 100%;max-width:none;font-size:11px;line-height:1.6}
.voice-project .voice-mic-status{font-size:11px;line-height:1.6;margin-top:8px}
.voice-project .voice-mic-status:empty{display:none}
.voice-project .voice-volume{font-size:11px;gap:10px;margin-top:12px}
.voice-project .voice-volume input::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6.5px}
.voice-project .voice-volume input::-moz-range-thumb{width:16px;height:16px}
@media(max-width:700px){
.voice-project .voice-live-cover{padding:24px 0 12px;gap:0}
.voice-project .voice-cover-copy{display:contents;padding:0}
.voice-project .voice-cover-copy h2{grid-row:1;margin-bottom:14px}
.voice-project .voice-cover-copy>h2+p{grid-row:2;margin-bottom:10px}
.voice-project .voice-demo{grid-row:3;height:530px}
.voice-project .voice-controls{position:static;grid-row:4;left:auto;right:auto;bottom:auto;width:100%;max-width:320px;margin:12px 0 28px}
}

/* Return-to-top sits above the black rule; project navigation belongs to the footer. */
.footer-back-top{max-width:var(--max);margin:0 auto;padding:28px var(--gutter) 18px;display:flex;justify-content:flex-end}
.footer-back-top>a{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink)}
.footer-back-top .icon{width:15px;height:15px}
.site-footer{flex-wrap:nowrap}
.site-footer>.next-project{border:0;padding:0;gap:22px;min-width:0}
.site-footer .next-project .eyebrow{font-size:9px;margin-bottom:8px}
.site-footer .next-project h2{font-size:24px}
.site-footer .next-project p:last-child{font-size:11px;margin-top:6px}
.site-footer .next-project-arrow .icon{width:30px;height:30px}
@media(max-width:700px){.footer-back-top{padding-top:24px;padding-bottom:16px}.footer-back-top>a{font-size:10px}.site-footer>.next-project{gap:12px}.site-footer .next-project>div{max-width:215px}.site-footer .next-project h2{font-size:20px}.site-footer .next-project .eyebrow{font-size:8px}.site-footer .next-project p:last-child{font-size:10px}.site-footer .next-project-arrow .icon{width:25px;height:25px}}

/* Footer label shares the project title's bottom edge. */
.footer-back-top .icon{transform:rotate(-90deg)}
.site-footer .next-project>div{display:flex;align-items:flex-end;gap:14px}
.site-footer .next-project-label{flex:none;white-space:nowrap;font-size:11px;line-height:1.4;color:var(--muted);padding-bottom:2px}
@media(max-width:700px){.site-footer .next-project>div{gap:10px}.site-footer .next-project-label{font-size:10px}}

/* Homepage previews share the quiet backgrounds and inset composition of cards 04 / 05. */
.work-card[data-project="voice-visualization"] .voice-art{background:#e8e4dc}
.work-card[data-project="voice-visualization"] .art-word{color:var(--ink);font-size:36px;left:30px;top:92px}
.work-card[data-project="voice-visualization"] .voice-preview-phone{width:42%;right:6%;top:125px;border:5px solid #17191c;border-radius:28px;overflow:hidden;filter:drop-shadow(10px 20px 20px #10234221)}
.work-card[data-project="voice-visualization"] .voice-preview-phone>img{width:100%;height:auto;object-fit:contain;border-radius:0}
.work-card[data-project="light-wave"] .light-art{background:#e6e5e1;color:var(--ink)}
.work-card[data-project="light-wave"] .light-art .art-word{color:var(--ink);left:30px;top:92px;font-size:40px}
.work-card[data-project="light-wave"] .scan-phone{width:32%;right:10%;top:125px}
.work-card[data-project="light-wave"] .card-no{color:var(--ink)}
.work-card[data-project="light-wave"] .preview-note{color:#64645d}
.work-card[data-project="light-wave"] .card-open{background:transparent;border-color:#0b0b0b33}
.work-card[data-project="light-wave"]:hover .card-open{background:var(--accent);border-color:var(--accent)}
@media(max-width:1100px){
.work-card[data-project="voice-visualization"] .art-word{font-size:28px;left:24px;top:80px}
.work-card[data-project="light-wave"] .light-art .art-word{font-size:30px;left:25px;top:80px}
}
@media(max-width:700px){
.work-card[data-project="voice-visualization"] .art-word,.work-card[data-project="light-wave"] .light-art .art-word{font-size:30px;left:24px;top:74px}
.work-card[data-project="voice-visualization"] .voice-preview-phone{right:8%;border-radius:24px}
.work-card[data-project="light-wave"] .scan-phone{width:37%;right:10%;top:125px}
}

/* Shared detail-cover layout, matched to the adopted voice cover. */
.project-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;width:100%;height:clamp(560px,48vw,760px);aspect-ratio:auto;min-height:0;padding:20px 7%;gap:4%;background:transparent;border:0;overflow:visible;color:var(--ink)}
.project-cover-copy{min-width:0;min-height:0;height:100%;position:relative;display:flex;flex-direction:column;justify-content:center;padding-bottom:228px}
.project-cover-copy h2{font:600 clamp(54px,6.6vw,105px)/1.2 Arial,'PingFang SC',sans-serif;letter-spacing:-.045em;margin:0 0 25px}
.project-cover-copy>h2+p{font-size:13px;line-height:1.7;color:var(--muted)}
.project-cover-aux{position:absolute;left:0;bottom:23px;width:min(320px,100%)}
.project-cover-note{font-size:11px;line-height:1.6;color:var(--muted)}
.project-cover-media{min-width:0;min-height:0;width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}
.project-cover-demo{border:0;display:block;width:100%;height:100%;min-height:0;background:transparent}
.project-cover-media>[role=tabpanel]{width:100%;height:100%}
.project-cover-media .preview-art{background:transparent;min-height:0}
.project-cover-media .art-word{display:none}
.project-cover-media .continuity-art .phone{top:50%;width:47%;transform:translateY(-50%);margin:0}
.project-cover-media .continuity-art .phone-one{left:0}
.project-cover-media .continuity-art .phone-two{right:0}
.project-cover-media .placeholder{width:min(320px,100%);height:calc(100% - 56px);min-height:0;margin:28px auto;background:transparent;border:1px dashed var(--line)}
.project-cover .glass-tabs{display:flex;border:0;background:none;padding:0;margin:0;gap:6px;width:100%}
.project-cover .glass-tabs button{border:1px solid var(--line);border-radius:24px;padding:9px 14px;min-width:0;width:auto;font-size:12px;flex:1}
.project-cover .glass-tabs button span{font-size:10px}
.project-cover .glass-tabs button[aria-selected=true]{border-color:var(--ink)}
.project-cover-media .workflow-steps{width:100%;padding:0 20px}
.project-cover-media .workflow-steps li{font-size:20px;padding:24px 0}
.character-cover-preview{width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) 30%;gap:8px;padding:28px 0}
.character-cover-main{width:100%;height:100%;object-fit:contain}
.character-cover-poses{display:flex;justify-content:center;gap:20px;min-height:0}
.character-cover-poses img{width:38%;height:100%;object-fit:contain}
@media(max-width:700px){
.project-cover{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;height:auto;padding:24px 0 12px;gap:0}
.project-cover-copy{display:contents;padding:0}
.project-cover-copy h2{grid-row:1;font-size:52.5px;margin-bottom:14px}
.project-cover-copy>h2+p{grid-row:2;font-size:12px;margin-bottom:10px}
.project-cover-media{grid-row:3;height:530px}
.project-cover-aux{position:static;grid-row:4;left:auto;bottom:auto;width:100%;max-width:320px;margin:12px 0 28px}
.project-cover-media .workflow-steps{padding:0}
.project-cover-media .workflow-steps li{font-size:18px}
.project-cover-media .continuity-art .phone{width:46%;top:50%}
}

/* Homepage subtitles sit beneath the titles inside the artwork. */
.work-card .art-word>.art-subtitle{display:block;margin-top:14px;font:400 14px/1.5 Arial,'PingFang SC',sans-serif;letter-spacing:0;color:var(--muted)}

/* Exported frame sequences: still posters until the project card is hovered. */
.work-card .card-sequence-phone{overflow:hidden;border:5px solid #3a3460;background:#1d1832}
.work-card .card-sequence-phone>img{width:100%;height:auto;object-fit:contain}
.work-card .card-frame-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}

/* 封面描述分段；一镜到底封面嵌入 one-shot 演示（?gallery：只有机模，无参数面板与开发标注） */
.cover-para{display:block}
.cover-para+.cover-para{margin-top:.8em}

/* Personal résumé: square portrait and a readable, continuous experience column. */
.about-section{--resume-text-size:14px;--resume-line-height:1.95;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:8%;align-items:start;padding:78px 0 90px}
.about-side{position:sticky;top:40px;min-width:0}
.about-section h2{font-size:clamp(50px,5.2vw,84px)}
.about-portrait{width:min(100% - 18px,340px);aspect-ratio:1;margin:38px 0 18px;box-shadow:16px 16px 0 var(--accent);background:var(--media)}
.about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.about-personal{width:min(100% - 18px,340px);margin:32px 0 0}
.about-personal>div+div{margin-top:20px}
.about-personal dt{font-size:9px;letter-spacing:.07em;color:var(--muted);margin-bottom:9px}
.about-personal dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.about-name{font-size:26px;font-weight:600;line-height:1.4;letter-spacing:-.03em}
.about-contact{font-size:13px;line-height:1.8}
.about-personal .is-placeholder{color:var(--muted);font-weight:400}
.about-content{min-width:0;padding-top:0;margin-top:0}
.resume-section+.resume-section{margin-top:48px}
.resume-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:26px}
.resume-section-heading h3{font-size:22px;font-weight:600;letter-spacing:-.03em}
.resume-section-heading>span{font-size:9px;letter-spacing:.09em;color:var(--muted)}
.career-entry+.career-entry{margin-top:28px}
.career-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.career-heading h4{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;font-size:21px;font-weight:600;letter-spacing:-.025em;margin:0}
.career-heading h4>span{font-size:13px;font-weight:400;letter-spacing:0;color:#55534e}
.career-period{flex-shrink:0;font-size:11px;font-variant-numeric:tabular-nums;color:#66635d}
.resume-items{list-style:disc;padding-left:1.15em;margin:0;font-size:var(--resume-text-size);line-height:var(--resume-line-height);color:#55534e}
.resume-items li{padding-left:3px}
.resume-items li+li{margin-top:5px}
.resume-items li::marker{font-size:9px;color:#8c877d}
.resume-project{display:grid;grid-template-columns:24px minmax(0,1fr);gap:15px}
.resume-project+.resume-project{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
.resume-project-no{font-size:11px;line-height:28px;font-variant-numeric:tabular-nums;color:var(--accent)}
.resume-project h4{font-size:18px;font-weight:600;line-height:1.6;letter-spacing:-.02em;margin:0 0 12px;text-wrap:pretty}
.resume-summary{font-size:var(--resume-text-size);line-height:var(--resume-line-height);color:#55534e;margin-bottom:12px}
@media(max-width:1000px) and (min-width:701px){
  .about-section{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:6%}
  .about-section h2{font-size:46px}
  .career-heading{flex-wrap:wrap;gap:6px}
}
@media(max-width:700px){
  .about-section{--resume-text-size:13px;--resume-line-height:1.9;display:block;padding:43px 0 48px}
  .about-side{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:0 22px;align-items:start}
  .about-side>.eyebrow{grid-column:1/-1;margin-bottom:22px}
  .about-section h2{font-size:clamp(35px,8.9vw,60px);line-height:1.15}
  .about-portrait{width:calc(100% - 10px);margin:0 10px 12px 0;box-shadow:10px 10px 0 var(--accent)}
  .about-personal{grid-column:1/-1;width:100%;margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .about-personal>div+div{margin-top:0}
  .about-name{font-size:22px}
  .about-contact{font-size:12px}
  .about-content{margin-top:40px;padding-top:0}
  .resume-section+.resume-section{margin-top:36px}
  .resume-section-heading{gap:10px;padding-bottom:14px;margin-bottom:23px}
  .resume-section-heading h3{font-size:21px}
  .resume-section-heading>span{font-size:8px;letter-spacing:.06em}
  .career-heading{flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .career-heading h4{font-size:20px;gap:12px}
  .career-heading h4>span{font-size:12px}
  .career-period{font-size:10px}
  .resume-project{grid-template-columns:20px minmax(0,1fr);gap:10px}
  .resume-project h4{font-size:17px;line-height:1.65}
  .resume-project+.resume-project{margin-top:25px;padding-top:25px}
}

/* The title determines the portrait width; other content follows that width. */
.about-profile{width:max-content;max-width:100%}
.about-profile h2{width:max-content;max-width:100%}
.about-title-first{display:inline-block}
.about-profile .about-portrait{position:relative;width:var(--portrait-width,clamp(126px,14vw,230px));min-width:0;margin:30px 0 0;border-radius:8px;overflow:hidden;box-shadow:0 8px 22px #00000033;background:var(--media)}
.about-profile .about-personal{width:0;min-width:100%;margin:26px 0 0}
.about-personal{font-size:var(--resume-text-size);line-height:var(--resume-line-height);font-weight:400;letter-spacing:0;color:#55534e}
.about-personal .about-name{font:inherit;color:inherit;letter-spacing:inherit;margin:0 0 10px}
.about-contact-lines{margin:0;display:grid;gap:7px}
.about-contact-lines>div{display:grid;grid-template-columns:2em minmax(0,1fr);gap:12px;align-items:baseline}
.about-contact-lines dt,.about-contact-lines dd{font:inherit;letter-spacing:inherit;margin:0;color:inherit}
.about-contact-lines dd{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.contact-section{padding:42px 0 48px}
.contact-section>.eyebrow{margin-bottom:25px}
.contact-row{align-items:center}
.contact-row h2{font-size:clamp(48px,6.5vw,88px);line-height:1.05;letter-spacing:-.025em}
.contact-actions{display:flex;gap:12px;align-items:center}
.contact-trigger{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}
.contact-trigger .icon{width:21px;height:21px}
.contact-trigger:hover{background:#e9e3d6;border-color:#bbb2a1}
.contact-trigger:focus-visible,.contact-close:focus-visible,.contact-copy:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.contact-dialog{position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:36px 28px 20px;border:1px solid #ded8cc;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 20px 90px #16120d26;overscroll-behavior:contain}
.contact-dialog[open]{animation:contact-appear .18s ease-out}
.contact-dialog::backdrop{background:#19160f35;backdrop-filter:blur(5px)}
.contact-dialog>.eyebrow{font-size:9px;color:var(--muted);letter-spacing:.12em;margin:0 0 12px}
.contact-dialog h2{font-size:28px;font-weight:500;letter-spacing:-.04em;margin:0 0 10px}
.contact-dialog #contact-dialog-help{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 24px}
.contact-close{position:absolute;right:15px;top:13px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font:400 25px/1 Arial;cursor:pointer}
.contact-close:hover{background:#e9e3d6;color:var(--ink)}
.contact-copy-list{display:grid;gap:10px}
.contact-copy{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:16px 13px;background:#fff9;border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}
.contact-copy:hover{background:#fff;border-color:#bbb2a1}
.contact-copy>.icon{width:21px;height:21px;flex:none}
.contact-copy>span:not(.copy-hint){min-width:0;flex:1}
.contact-copy small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-bottom:5px}
.contact-copy strong{display:block;font-size:14px;font-weight:400;line-height:1.5;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.contact-copy .copy-hint{font-size:10px;color:var(--muted);flex:none}
.contact-copy-status{min-height:18px;font-size:11px;line-height:18px;color:var(--muted);margin:13px 0 0}
@keyframes contact-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .about-side{display:block}
  .about-profile .about-personal{display:block;margin-top:24px}
  .about-profile .about-portrait{margin-top:24px}
  .about-section h2{font-size:46px}
  .contact-row{display:flex;flex-wrap:wrap;gap:24px}
  .contact-row h2{font-size:54px}
  .contact-actions{gap:10px}
  .contact-trigger{width:44px;height:44px}
  .contact-dialog{padding:32px 20px 18px}
  .contact-copy{padding:15px 10px;gap:10px}
  .contact-copy strong{font-size:13px}
}