@charset "UTF-8";
:root{--paper:#eee8dc;--ink:#393b2d;--muted:#737362;--moss:#707457;--hair:rgba(64,65,46,.2);--serif:"Baskerville","Iowan Old Style","Palatino Linotype","Songti SC",Georgia,serif;color-scheme:light;scroll-behavior:smooth;scroll-padding-top:90px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"PingFang SC",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button:disabled{cursor:default;opacity:.45}a:focus-visible,button:focus-visible{outline:1px solid var(--moss);outline-offset:7px}::selection{background:#b5b394;color:#242719}h1,h2,p,figure{margin:0}em{font-weight:400;color:var(--moss)}.eyebrow{font-size:10px;font-weight:400;letter-spacing:.17em;line-height:1.8}.body-copy{font-size:13px;line-height:1.95;color:var(--muted)}.skip-link{position:fixed;top:12px;left:80px;z-index:60;background:var(--paper);padding:12px;transform:translateY(-180%)}.skip-link:focus{transform:none}.studio-mark{position:fixed;top:28px;left:4.5vw;z-index:30;display:flex;align-items:center;gap:10px;min-height:44px}.studio-mark>span{font-size:16px;font-weight:600;letter-spacing:-.4px;transition:opacity .35s,transform .35s}.studio-mark>span>span{font-weight:400;font-size:12px}.scrolled .studio-mark>span{opacity:0;transform:translateX(-7px);pointer-events:none}.studio-mark img{width:36px;height:36px}.page-header{position:absolute;top:29px;left:0;width:100%;z-index:25;display:flex;justify-content:flex-end;align-items:center;padding:0 4.5vw;gap:38px}.header-back{font-size:11px;letter-spacing:.06em;padding:14px 0}.header-controls{display:flex;gap:12px;align-items:center}.header-controls button{height:44px;min-width:42px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px}.motion-control svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1}.language-control{display:none!important}.i18n-ready .language-control{display:flex!important}.status-seed{display:inline-block;width:5px;height:5px;background:var(--moss);border-radius:50%;margin-right:10px;vertical-align:2px}
.opening{height:max(780px,100svh);max-height:1200px;position:relative;isolation:isolate;overflow:hidden}.painting{position:relative}.painting img,.painting canvas{display:block;width:100%;height:100%;object-fit:cover}.painting canvas{position:absolute;inset:0;display:none}.painting.paint-ready canvas{display:block}.painting.paint-ready>img{visibility:hidden}.painting.paint-complete>img{visibility:visible}.painting.paint-complete canvas{display:none}.forest-painting{position:absolute;inset:0;z-index:-1;mask-image:linear-gradient(#000 0%,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 80%,transparent 100%)}.forest-painting img{object-position:50% 65%}.opening:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--paper) 0%,rgba(238,232,220,.68) 12%,rgba(238,232,220,.18) 29%,transparent 49%,transparent 79%,var(--paper) 100%)}.opening-copy{text-align:center;padding-top:145px;position:relative}.opening-copy h1{font:400 clamp(92px,11.2vw,180px)/.94 var(--serif);letter-spacing:-.065em;margin:20px 0 22px;position:relative;display:inline-block}.opening-copy h1 span{font-style:italic;font-weight:400}.opening-copy h1 i{font-family:var(--serif);font-size:20px;font-style:normal;letter-spacing:0;position:absolute;right:-35px;top:7px;color:var(--moss)}.opening-subtitle{font:italic 20px/1.6 var(--serif);letter-spacing:.02em}.opening-bottom{position:absolute;bottom:31px;left:5.5%;right:5.5%;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:10px;letter-spacing:.04em}.scroll-invitation{display:flex;align-items:center;gap:12px;min-height:44px}.scroll-line{height:34px;width:1px;background:var(--moss);transform-origin:top;animation:grow-line 2.6s ease-in-out infinite}.scroll-invitation>span:last-child{transition:transform .4s}.scroll-invitation:hover>span:last-child{transform:translateY(4px)}.replay{display:none;align-items:center;gap:14px;min-height:44px;padding:0}.enhanced .replay{display:flex}.replay>span:last-child{font-size:18px;transition:transform .6s}.replay:hover>span:last-child{transform:rotate(-90deg)}.margin-note{position:absolute;left:24px;top:60%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.16em;opacity:.5;color:var(--paper)}
.introduction{padding:112px 8.5vw 104px;max-width:1440px;margin:auto}.section-index{display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.14em;color:var(--muted)}.section-index i{height:1px;width:70px;background:var(--hair)}.introduction h2{font:400 clamp(40px,5.6vw,78px)/1.13 var(--serif);letter-spacing:-.042em;margin:38px 0 36px;max-width:920px}.intro-bottom{display:flex;align-items:flex-end;gap:110px;padding-left:3px}.intro-bottom p{font-size:13px;color:var(--muted);line-height:1.95}.sprig{width:63px;height:78px;stroke:#8b8d71;stroke-width:.8;transform:rotate(-14deg)}
.encounter{max-width:1440px;margin:0 auto;min-height:830px;position:relative;display:grid;grid-template-columns:1fr 1.17fr .42fr;align-items:center;padding:40px 8.5vw 50px;isolation:isolate}.encounter-copy{position:relative;z-index:2}.encounter h2,.moment-copy h2{font:400 clamp(37px,4.4vw,64px)/1.12 var(--serif);letter-spacing:-.035em;margin:24px 0}.character-painting{height:720px;width:calc(100% + 130px);margin-left:-80px;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 48% 47% at 50% 50%,#000 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 48% 47% at 50% 50%,#000 65%,transparent 100%)}.character-painting img{object-fit:contain}.encounter-aside{align-self:end;margin-bottom:125px;text-align:right;font-size:11px;line-height:1.85;color:var(--muted);position:relative;z-index:2}.ink-star{font-size:32px;font-family:var(--serif);display:inline-block;margin-bottom:23px;color:#85886a;animation:star-turn 30s linear infinite}.pencil-line{position:absolute;bottom:30px;left:8.5vw;right:8.5vw;height:1px;background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 50%,transparent 95%);transform:rotate(-2deg)}
.still-life{max-width:1440px;margin:auto;min-height:710px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:6%;padding:68px 8.5vw 80px 4vw;position:relative}.tea-painting{height:520px;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 50% 48% at 50% 50%,#000 66%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 48% at 50% 50%,#000 66%,transparent 100%)}.tea-painting img{object-fit:contain}.moment-copy{padding-top:20px}.tea-touch{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;margin-top:23px;font-size:11px;border-bottom:1px solid var(--hair)}.tea-dot{width:7px;height:7px;border-radius:50%;border:1px solid #9b7c4e;transition:background .3s,box-shadow .3s}.tea-touch:hover .tea-dot,.tea-touch:focus-visible .tea-dot,.is-warm .tea-dot{background:#b29460;box-shadow:0 0 0 5px #b2946017}.tea-touch>span:last-child{margin-left:17px;transition:transform .3s}.tea-touch:hover>span:last-child{transform:translate(2px,-2px)}.tea-note{height:40px;font:italic 15px/1.6 var(--serif);color:#8a7758;padding-top:14px;opacity:0;transform:translateY(5px);transition:opacity .5s,transform .5s}.is-warm .tea-note{opacity:1;transform:none}.warmth{position:absolute;top:27%;left:56%;width:70px;height:120px;opacity:0;transition:opacity 1s;pointer-events:none}.is-warm .warmth{opacity:.55}.warmth i{position:absolute;bottom:0;left:10px;width:28px;height:75px;border-left:2px solid #7a634648;border-radius:50%;filter:blur(3px);animation:steam 3.7s ease-out infinite}.warmth i:nth-child(2){left:23px;animation-delay:-1.5s;height:90px}.warmth i:nth-child(3){left:37px;animation-delay:-2.5s;height:63px}
.closing{position:relative;min-height:690px;text-align:center;padding:124px 24px 70px;overflow:hidden;isolation:isolate}.closing h2{font:400 clamp(48px,6.4vw,88px)/1.05 var(--serif);letter-spacing:-.043em;margin:27px 0}.closing-body{line-height:1.95;font-size:13px;color:var(--muted)}.closing-links{display:flex;justify-content:center;align-items:center;gap:36px;margin-top:32px;font-size:11px}.follow-link{display:inline-flex;gap:25px;align-items:center;padding:17px 0;border-bottom:1px solid #85886a}.follow-link>span:last-child{transition:transform .3s}.follow-link:hover>span:last-child{transform:translate(3px,-3px)}.back-link{opacity:.7;padding:17px 0}.closing-stroke{position:absolute;width:640px;height:380px;left:50%;top:140px;transform:translateX(-50%) rotate(-12deg);z-index:-1;opacity:.25;background:radial-gradient(ellipse at center,#c5c3a5,transparent 65%);border-radius:43% 55% 40% 55%}.art-caption{font:italic 12px var(--serif);color:#8b8a79;margin-top:75px}footer{padding:26px 5.5vw 82px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.04em;color:var(--muted);gap:18px}footer>a{min-height:30px;display:flex;align-items:center}footer>a:first-child{font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:-.5px}.reading-thread{position:fixed;right:16px;top:45%;height:80px;width:1px;background:#92907624;z-index:15}.reading-thread i{display:block;width:1px;height:100%;background:#85866c;transform:scaleY(var(--reading,0));transform-origin:top}
.forest-painting canvas{object-position:50% 65%}.character-painting img,.character-painting canvas,.tea-painting img,.tea-painting canvas{object-fit:contain}.character-painting{width:min(540px,calc(100% + 130px));height:auto;aspect-ratio:3/4;margin-left:-12px}.scrolled .header-controls{position:fixed;right:25px;bottom:24px}.scrolled .control-label{display:none}
.enhanced .reveal{opacity:0;transform:translateY(24px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.65,.25,1)}.enhanced .reveal.is-visible{opacity:1;transform:none}.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused .reveal{opacity:1;transform:none;transition:none}html:has(.motion-paused){scroll-behavior:auto}.motion-paused .warmth i{animation:none}.motion-paused .warmth{opacity:0}.enhanced .opening-copy{animation:copy-arrive 1.8s .12s both}.enhanced.motion-paused .opening-copy{animation:none}
html[lang="zh-CN"] h2{line-height:1.3;letter-spacing:-.055em}html[lang="zh-CN"] .opening-subtitle{font-style:normal;font-size:17px;letter-spacing:.13em}html[lang="zh-CN"] em{font-style:normal}html[lang="zh-CN"] .eyebrow{letter-spacing:.13em}html[lang="zh-CN"] .intro-bottom p,html[lang="zh-CN"] .body-copy,html[lang="zh-CN"] .closing-body{line-height:2.15}
@keyframes copy-arrive{from{opacity:0;transform:translateY(17px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes grow-line{0%,100%{transform:scaleY(.7);opacity:.6}50%{transform:scaleY(1);opacity:1}}@keyframes star-turn{to{transform:rotate(360deg)}}@keyframes steam{0%{opacity:0;transform:translate(0,18px) scale(.65)}35%{opacity:.55}100%{opacity:0;transform:translate(-13px,-45px) scale(1.4)}}
@media(min-width:1700px){.encounter,.still-life{padding-left:122px;padding-right:122px}.opening-copy{padding-top:160px}}
@media(max-width:900px){.studio-mark{left:26px}.page-header{padding:0 26px;gap:24px}.studio-mark>span{display:none}.opening-copy{padding-top:148px}.opening{height:850px;max-height:none}.forest-painting img,.forest-painting canvas{object-position:50% 70%}.encounter{padding:0 7vw;grid-template-columns:1fr 1.3fr;min-height:720px}.character-painting{height:auto;width:min(472px,calc(100% + 20px));margin-left:-20px}.encounter-aside{position:absolute;right:8vw;bottom:36px;margin:0}.encounter-aside .ink-star{display:none}.encounter-aside p{font-size:10px}.still-life{padding:45px 7vw;gap:2%;min-height:580px}.tea-painting{height:430px}.moment-copy h2{font-size:43px}.closing{min-height:630px;padding-top:100px}}
@media(max-width:600px){:root{scroll-padding-top:70px}.studio-mark{top:15px;left:20px}.studio-mark img{width:30px;height:30px}.page-header{top:15px;padding:0 18px;gap:16px}.header-back{font-size:10px}.header-controls{gap:3px}.control-label{display:none}.header-controls button{padding:0 6px;min-width:36px}.opening{height:max(760px,100svh)}.opening-copy{padding-top:142px;padding-inline:20px}.opening-copy h1{font-size:clamp(67px,17vw,104px);letter-spacing:-.067em;margin:23px 0 21px}.opening-copy h1 i{font-size:14px;right:-17px;top:-2px}.opening .eyebrow{font-size:8px;letter-spacing:.17em}.opening-subtitle{font-size:17px}.forest-painting{inset:100px -38% 0;mask-image:linear-gradient(transparent,#000 10%,#000 76%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 76%,transparent)}.forest-painting img,.forest-painting canvas{object-position:51% 76%}.opening:after{background:linear-gradient(var(--paper),#eee8dcc9 17%,#eee8dc69 30%,transparent 45%,transparent 76%,var(--paper))}.margin-note{display:none}.opening-bottom{bottom:28px;left:25px;right:25px;font-size:9px;gap:16px}.scroll-invitation{gap:8px}.scroll-line{height:25px}.replay{gap:7px;font-size:9px}.introduction{padding:72px 27px 55px}.section-index{font-size:8px;gap:13px}.section-index i{width:43px}.introduction h2{font-size:43px;margin:28px 0}.intro-bottom{gap:28px}.intro-bottom p{font-size:11px;line-height:2}.sprig{width:41px;flex-shrink:0}.encounter{min-height:0;padding:60px 27px 45px;display:block}.encounter h2{font-size:45px;margin:18px 0}.encounter .body-copy{font-size:12px}.character-painting{width:100%;height:auto;margin:0 0 5px}.encounter-copy{z-index:2;position:relative}.encounter-aside{right:30px;bottom:52px;text-align:right}.pencil-line{left:27px;right:27px;bottom:0}.still-life{display:flex;flex-direction:column-reverse;gap:0;padding:60px 27px 0;align-items:stretch}.moment-copy h2{font-size:46px;margin:20px 0}.moment-copy .body-copy{font-size:12px}.tea-painting{height:340px;margin:-6px -15px 0;width:calc(100% + 30px)}.tea-touch{margin-top:15px}.closing{min-height:630px;padding:86px 25px 48px}.closing h2{font-size:52px;margin:27px 0}.closing-body{font-size:12px}.closing-links{gap:23px;font-size:10px;margin-top:26px}.art-caption{margin-top:65px;font-size:11px}.closing-stroke{width:440px}.reading-thread{right:8px;top:47%;height:55px}footer{padding:18px 25px 78px;flex-wrap:wrap;font-size:8px;gap:8px}footer>a:first-child{font-size:17px}footer>a:last-child{flex-basis:100%;justify-content:flex-end;padding-top:4px}html[lang="zh-CN"] .introduction h2{font-size:37px}html[lang="zh-CN"] .encounter h2{font-size:38px}html[lang="zh-CN"] .moment-copy h2{font-size:39px}html[lang="zh-CN"] .opening-subtitle{font-size:13px;letter-spacing:.06em}html[lang="zh-CN"] .closing h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.enhanced .reveal{opacity:1;transform:none}.painting.paint-ready>img{visibility:visible}.painting canvas{display:none!important}.replay{display:none!important}.warmth{display:none}}