/* Yuanxin desktop animation direction: warm paper, deep green, fine brass. */
:root{--scene-ink:#29463c;--scene-gold:#b89b63;--scene-line:#d5cebb;--scene-paper:#fbfaf5}
.animation-scene{position:relative;isolation:isolate}
.scene-svg{display:block;width:100%;height:100%;overflow:visible;color:var(--scene-gold);pointer-events:none}
.scene-svg path,.scene-svg circle,.scene-svg ellipse,.scene-svg rect{vector-effect:non-scaling-stroke}
.scene-svg text{fill:#8a806b;font:11px 'Microsoft YaHei',sans-serif;letter-spacing:.06em}
.scene-svg .grid-dot{fill:#af9e7b;opacity:.17}
.ink-line{stroke:#9d8a65;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.faint-line{stroke:#c9c6b9;stroke-width:1}
.gold-line{stroke:#b89b63;stroke-width:1.8;stroke-linecap:round}
.gold-fill{fill:#b99a5c;stroke:none}
.paper{fill:#fffef9;stroke:#c4b89b;stroke-width:1}
.frame-fill{fill:#eceee4;stroke:#bbb99f;stroke-width:1}
.screen-shell{fill:#1a332a;stroke:#59725b;stroke-width:1}
.panel-fill{fill:#f9f7f0;stroke:#c0b596;stroke-width:1}
.gold-card{fill:#c5aa72;stroke:#9c814a;stroke-width:1}
.play-glyph{fill:#d5c69b;stroke:none}
html{scroll-padding-top:80px}
.section,.animation-scene{scroll-margin-top:16px}
.scene-note{font-size:12px!important;color:#8b8f80!important;display:flex;justify-content:space-between;margin:17px 0 0!important;letter-spacing:.05em}
.scene-note span{color:#9a8053}
.motion-toggle{z-index:20}
.motion-paused .pause-mark{display:none}.motion-paused .play-mark{display:block}
.desktop-animation .heading-line{transform:none;opacity:1}

/* Four miniature sets tell one story, from making to sharing to refining. */
#join-us .section-heading h2{font-size:clamp(36px,3.7vw,60px)}
.benefit-scene{padding-top:15px}
.creation-track{height:30px;position:absolute;left:0;right:0;top:9px}
.creation-baseline{stroke:#d7d1bf}.creation-flow{stroke:#b39a5b;stroke-width:1.5}
.creation-point{fill:#f7f5ed;stroke:#b39a5b}
.benefit-scene .benefits-grid{border-top:0;padding-top:28px;gap:34px}
.benefit-scene .benefits-grid:before{display:none}
.benefits-grid article{position:relative}
.benefit-art{height:auto;aspect-ratio:300/210;margin:0 -4px 15px}
.benefits-grid .line-number{font-size:10px;color:#b29a65;margin-bottom:11px}
.benefits-grid h3{font-size:21px;white-space:normal;margin:13px 0 17px}
.benefits-grid p{font-size:14px;line-height:1.95;color:#717966}
.story-connector{stroke:#b0a174;stroke-width:1;stroke-dasharray:3 4}
.story-sheet,.story-tile,.showcase-page,.mentor-work,.mentor-note,.mentor-pencil{transform-box:fill-box;transform-origin:center}
.story-sheet,.showcase-page,.mentor-work{filter:drop-shadow(0 5px 4px #4e58380a)}
.showcase-star{transform-box:fill-box;transform-origin:center}
.social-node{transform-box:fill-box;transform-origin:center}
.social-center text.inverse{fill:#daccab;font-size:13px;letter-spacing:0}
.social-wave{stroke:#a7ac81;opacity:.4;transform-box:fill-box;transform-origin:center}
.note-lines{stroke:#bfcbb1;stroke-width:1;stroke-linecap:round}
.mentor-tick{stroke:#9ca878;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.audience-section{padding-top:46px;gap:65px}
.audience-grid{column-gap:42px;row-gap:40px}
.audience-grid article{display:grid;grid-template-columns:74px 1fr;column-gap:18px;align-items:start}
.audience-grid h4{grid-column:2;font-size:19px;line-height:1.5}
.audience-grid p{grid-column:2;font-size:13px;line-height:1.9;margin-top:11px}
.audience-art{grid-column:1;grid-row:1/3;width:74px;height:65px}
.audience-art svg{height:auto}

.animation-scene[data-playback=paused]{--scene-state:paused}
.motion-paused *{animation-play-state:paused!important}