@font-face{font-family:Inter;src:url('assets/fonts/Inter-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Rockness;src:url('assets/fonts/Rockness.ttf') format('truetype');font-display:swap}
:root{--font-body:Inter,'Songti SC',serif;--font-chinese:'Songti SC',serif;--font-display:Rockness,Inter,'Songti SC',serif;font-family:var(--font-body)}
body,button,p,h3,.language,.timeline time,.company,.experience-company,.current-badge,.experience-disclosure,.dialog-bar h2,.dialog-bottom,.contact-email,.contact-phone{font-family:var(--font-body);font-style:normal}
h1,h2,.brand strong,.marquee,.handwritten{font-family:var(--font-chinese)}
.brand span,html[lang=en] h1,html[lang=en] h2{font-family:var(--font-display);font-weight:400;font-style:normal;letter-spacing:.02em}
.brand span{font-size:23px;line-height:1.05;margin-top:0}
html[lang=en] .about h1{font-size:52px}html[lang=en] .experience h2,html[lang=en] .work h2{font-size:42px}
html[lang=en] .experience h2 small{font:14px var(--font-body);letter-spacing:0}
.site-header{position:fixed;top:16px;max-width:1100px;transition:top .25s ease;isolation:isolate}
.site-header nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.site-header:before{content:"";position:absolute;inset:0 -14px;z-index:-1;border:1px solid transparent;border-radius:20px;background:transparent;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;pointer-events:none}
.site-header.is-scrolled:before{background:rgba(255,255,255,.64);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-color:#ffffff80;box-shadow:0 8px 30px #1820190a}
[data-theme=dark] .site-header.is-scrolled:before{background:rgba(23,29,24,.67);border-color:#ffffff14;box-shadow:0 8px 30px #0002}
/* Each title piece has separate placement, entrance and idle transforms. */
.hero-title,[data-theme=dark] .hero-title{filter:none;mix-blend-mode:normal;aspect-ratio:827/457;height:auto;margin:0;container-type:inline-size;letter-spacing:0;translate:none}
.hero-title .title-word{position:absolute;display:block;line-height:1;font-family:var(--font-chinese);font-weight:400;transform:translate(var(--hero-x,0px),var(--hero-y,0px)) rotate(var(--base-angle,0deg));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.title-qi{left:1%;top:12%;font-size:29cqw;--base-angle:-9deg}
.title-guai{left:21%;top:55%;font-size:22cqw;--base-angle:12deg}
.title-no{left:33%;top:35%;font-size:15cqw;--base-angle:12deg}
.title-jiao{left:44%;top:0%;font-size:24cqw;--base-angle:15deg}
.title-hu{left:65%;top:17%;font-size:24cqw;--base-angle:6deg}
.title-designer{left:59%;top:61%;font-size:14cqw;white-space:nowrap;--base-angle:-12deg}
.hero-title .title-english{left:63%;top:89%;font-family:var(--font-display);font-size:5.5cqw;white-space:nowrap;--base-angle:-5deg}
.hero-title .title-smile{left:87%;top:26%;width:13%;color:var(--ink);--base-angle:9deg}
.title-smile svg{display:block;width:100%;overflow:visible}
.title-enter{display:block;animation:title-land .7s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--order)*.12s)}
.title-idle{display:block;animation:title-sway 6s ease-in-out infinite;animation-delay:calc(1.7s + var(--order)*.15s);transform-origin:center}
@keyframes title-land{0%{opacity:0;transform:translateY(-55px) rotate(-14deg) scale(1.12)}65%{opacity:1;transform:translateY(5px) rotate(2deg) scale(.99)}100%{opacity:1;transform:none}}
@keyframes title-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.5deg) translateY(-3px)}}
.motion-paused .title-enter,.motion-paused .title-idle{animation-play-state:paused}
/* Stable navigation slots prevent language changes from shifting the brand. */
.site-header{width:min(100% - 64px,1100px);gap:20px}
.site-header nav{display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr;min-width:0;flex:1}
.site-header nav>a{text-align:center;padding-inline:4px}
.header-tools{flex-shrink:0}
.footer-preferences{display:none}
.hero{height:740px}.hero-composition{top:120px;height:600px}
.about{min-height:520px;gap:48px}.about-picture,.about-model{height:500px}.about-copy{padding-bottom:24px}
.experience{padding-block:88px;gap:56px}.experience h2{margin-bottom:32px}
.contact{padding-top:72px}.contact-avatar{margin-top:32px}
.close{font-family:var(--font-body)}
@media(max-width:760px){
 .site-header{top:10px;width:calc(100% - 32px);gap:0}.site-header:before{inset:0 -5px;border-radius:14px}
 .site-header nav{grid-template-columns:1fr 1.2fr 1.45fr .8fr 1fr;min-height:64px}
 .site-header nav>a{font-size:11px;padding:12px 1px}.brand strong{font-size:21px}.brand span{font-size:16px}
 .hero{height:clamp(560px,calc(55vw + 365px),720px)}.hero-composition{top:110px;height:450px}.hero-title{top:0}
 .hero-model{height:350px}.section{width:calc(100% - 40px)}
 .about{gap:0;min-height:0}.about-copy{padding:16px 0 0}.about-copy p{margin-bottom:16px}.about-picture,.about-model{height:330px}.about-picture{margin-top:8px}
 .experience{padding-block:56px;gap:40px}.experience h2{margin-bottom:24px}.experience-model{height:300px}
 .contact{padding-top:48px}.work{padding-bottom:24px}.contact-avatar{margin-top:24px}
 footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;width:calc(100% - 40px);padding-block:20px 28px}
 .footer-preferences{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
 .footer-preferences .header-tools{display:flex;gap:14px}.footer-preferences button{min-width:44px;min-height:44px}
 html{scroll-padding-top:100px}html[lang=en] .experience h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.title-enter,.title-idle{animation:none}.hero-title .title-word,.site-header,.site-header:before{transition:none}}

@media(max-width:760px){.footer-preferences{flex-wrap:wrap;gap:12px}.footer-preferences .motion-toggle{position:static;margin-left:auto;box-shadow:none}.footer-preferences>span{margin-right:auto}}
@media(min-width:761px){.hero-model{top:120px;height:410px}.character-hint{top:60%}}
/* Background artwork repeats in identical, gap-free groups. */
.hero-background{position:absolute;inset:53% 0 auto;height:clamp(158.4px,18.72vw,273.6px);overflow:hidden;z-index:-1;pointer-events:none}
.wording-track{display:flex;width:max-content;height:100%;animation:wording-scroll 48s linear infinite;will-change:transform}
.wording-group{flex:none;width:max(144vw,2016px);height:100%;padding-inline:40.32px}
.wording-group img{width:100%;height:100%;object-fit:contain}
[data-theme=dark] .wording-group img{filter:brightness(1.6)}
@keyframes wording-scroll{to{transform:translateX(-50%)}}
.motion-paused .wording-track{animation-play-state:paused}
footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;border-top:1px solid var(--line)}
.footer-actions{display:flex;align-items:center;gap:24px}
footer .motion-toggle{position:static;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;margin:0;box-shadow:none;background:transparent;color:var(--ink);border:1px solid var(--line)}
footer .motion-toggle[hidden]{display:none}
[data-theme=dark] .motion-toggle img{filter:invert(1)}
.design-quotes{text-align:center;padding-block:40px 32px;min-height:230px;display:grid;align-content:center;gap:12px}
.quote-eyebrow{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.design-quotes blockquote{margin:0;min-height:100px;display:grid;align-content:center;gap:12px}
.design-quotes blockquote p{font-size:clamp(18px,2vw,25px);line-height:1.55;letter-spacing:0;margin:0 auto;max-width:680px;text-wrap:balance}
.design-quotes cite{font-style:normal;font-size:12px;color:var(--muted)}
.design-quotes cite a:hover{text-decoration:underline}
#quote-count{font-size:10px;letter-spacing:.15em;color:var(--muted);font-variant-numeric:tabular-nums}
.character-note{position:absolute;top:-20px;left:0;width:160px;z-index:3;color:var(--ink)}
.character-note .handwritten,.contact-avatar .character-note p{position:static;width:auto;margin:0;font-size:15px;line-height:1.7;transform:rotate(-8deg)}
.doodle-arrow{display:block;width:70px;height:55px;margin:10px auto 0;animation:arrow-jelly 4s ease-in-out infinite;transform-origin:20% 20%}
.contact-avatar .character-note{left:auto;right:0;top:12px;width:120px}
.contact-avatar .character-note p{font-size:12px;transform:rotate(7deg)}
.contact-avatar .doodle-arrow{scale:-1 1;width:54px;margin-left:0}
@keyframes arrow-jelly{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.12,.88)}86%{transform:scale(.94,1.06)}94%{transform:scale(1.03,.97)}}
.motion-paused .doodle-arrow{animation-play-state:paused}
@media(max-width:760px){.design-quotes{padding-block:30px;min-height:230px}.design-quotes blockquote{min-height:110px}.footer-actions{gap:12px}.character-note{top:0;left:-8px;width:115px}.character-note .handwritten{font-size:13px}.contact-avatar .character-note{right:0;width:112px}.footer-preferences{padding-bottom:10px}.icon-credit{font-size:9px}}
@media(prefers-reduced-motion:reduce){.wording-track,.doodle-arrow{animation:none}}

/* Compact footer: quote and preferences share one row. */
footer{gap:12px;padding-block:20px 18px}
.footer-preferences{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.footer-preferences .design-quotes{flex:1;min-width:0;width:auto;margin:0;padding:0;min-height:88px;text-align:left;display:grid;gap:0}
.footer-preferences .design-quotes blockquote{min-height:0;gap:8px}
.footer-preferences .design-quotes blockquote p{font-size:16px;line-height:1.5;max-width:600px;margin:0;text-wrap:pretty}
.footer-preferences .design-quotes cite{font-size:11px}
.quote-eyebrow,#quote-count{display:none}
footer .motion-toggle{border:0;background:transparent;padding:12px}
footer .motion-toggle img{width:19.2px;height:19.2px;max-width:none}
.footer-actions{gap:12px;font-size:11px}
@media(max-width:760px){
 footer{gap:10px;padding-top:16px;padding-bottom:16px;font-size:11px}
 .footer-preferences{gap:12px;padding-bottom:14px}
 .footer-preferences .design-quotes{min-height:120px}
 .footer-preferences .design-quotes blockquote p{font-size:14px}
 .footer-preferences .design-quotes cite{font-size:10px}
 .footer-preferences .header-tools{gap:4px}
 .footer-preferences .theme-toggle{width:36px;height:36px;min-width:36px;min-height:36px}
 .footer-preferences .theme-toggle svg{width:18px;height:18px}
 .footer-actions{gap:4px;font-size:10px}
 .icon-credit{font-size:8px}
}

/* Final footer spacing adjustments. */
footer{border-top:0}
.footer-preferences .design-quotes{min-height:68px}
@media(max-width:760px){.footer-preferences .design-quotes{min-height:100px}}

.hero-model.character-model{opacity:1;transition:opacity .5s ease;--progress-bar-height:0px}
.hero-model.character-model.hero-loading{opacity:0;pointer-events:none}
.hero-avatar.hero-preview{object-fit:contain;object-position:center;pointer-events:none;z-index:2;opacity:1;transition:opacity .5s ease}
.hero-avatar.hero-preview.preview-dismissed{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
@media(prefers-reduced-motion:reduce){.hero-model.character-model,.hero-avatar.hero-preview,.hero-avatar.hero-preview.preview-dismissed{transition:none}}
.character-poster{width:100%;height:100%;object-fit:contain;pointer-events:none}
.character-model{--progress-bar-height:0px}
.featured-work{margin-bottom:64px}
.featured-heading>span,.case-kicker{font:11px var(--font-body);letter-spacing:.12em;color:var(--muted)}
.featured-heading h2{font-size:30px;letter-spacing:0;margin:14px 0 16px;text-wrap:balance}
.featured-heading p{font-size:14px;color:var(--muted);max-width:650px}
.case-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.case-card{padding:24px;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--background);display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.case-card:hover{transform:translateY(-4px);border-color:#91ce84}
.case-card-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}
.case-flow{display:flex;align-items:center;justify-content:center;gap:8px;min-height:130px;font-size:11px}
.case-flow span{border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 12%,var(--background));padding:12px 8px;border-radius:10px;text-align:center}
.case-flow i{font-style:normal;color:var(--muted)}
.case-card h3{font-size:19px;margin:0 0 10px}.case-card p{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:24px}
.case-link{font-size:12px;margin-top:auto;display:flex;justify-content:space-between}
#case-dialog{max-width:820px;background:var(--background);color:var(--ink)}
#case-content{padding:36px 40px}#case-title{font-family:var(--font-body);font-size:32px;letter-spacing:-.03em;margin:16px 0}
.case-lead{color:var(--muted);font-size:18px}.flow-caption{font-size:10px;color:var(--muted);text-align:center;margin-top:-8px}
.case-details{margin:32px 0 0}.case-details>div{display:grid;grid-template-columns:110px 1fr;gap:24px;border-top:1px solid var(--line);padding:24px 0}
.case-details dt{font-size:12px;color:var(--muted)}.case-details dd{margin:0;font-size:15px;line-height:1.9}
@media(max-width:760px){.case-cards{grid-template-columns:1fr;gap:14px}.case-card{padding:22px}.case-flow{min-height:105px}.featured-work{margin-bottom:48px}.featured-heading h2{font-size:27px}#case-content{padding:24px}#case-title{font-size:27px}.case-details>div{grid-template-columns:1fr;gap:10px}}
@media(prefers-reduced-motion:reduce){.case-card{transition:none}.case-card:hover{transform:none}}

/* Compact selected-case cards; detailed flows stay inside the dialog. */
.featured-work{margin-bottom:40px}
.featured-heading h2{font-size:24px;margin:10px 0 12px}
.featured-heading p{font-size:13px;line-height:1.65;margin-bottom:0}
.case-cards{gap:12px;margin-top:20px}
.case-card{padding:18px;border-radius:12px}
.case-card-top{font-size:9px;margin-bottom:14px}
.case-card h3{font-size:16px;margin-bottom:8px}
.case-card p{font-size:12px;line-height:1.6;margin-bottom:14px}
.case-link{font-size:11px}
html[lang=en] .featured-heading h2{font-size:32px}
@media(max-width:760px){
 .featured-work{margin-bottom:32px}
 .featured-heading h2{font-size:22px}
 .case-cards{gap:8px;margin-top:16px}
 .case-card{padding:14px 16px;position:relative;padding-right:40px}
 .case-card-top{margin-bottom:8px;justify-content:flex-start;gap:8px}
 .case-card h3{font-size:15px;margin-bottom:5px}
 .case-card p{margin-bottom:0;font-size:12px}
 .case-link{font-size:0;position:absolute;right:16px;top:50%;transform:translateY(-50%)}
 .case-link>span{font-size:17px}
}