/* Headings, slogans, labels and marginal notes are all live text. */
:root{--body:'Microsoft YaHei','PingFang SC',Arial,sans-serif;--hand:SenHand,'KaiTi',cursive}
body{font-family:var(--body);font-synthesis:none}
.header nav,.intro-copy,.vibe-caption p,.story-body,.story-hint{font-family:var(--body)}
.intro h1{font:400 clamp(48px,5.1vw,86px)/1.06 var(--hand);letter-spacing:-.04em}
.intro .button,.header .button{font-family:var(--hand)}
.sky-note{font:400 clamp(20px,1.65vw,28px)/1.35 var(--hand)}
.join-content h2{font:400 clamp(48px,5vw,78px)/1.15 var(--hand)}
.margin-note{font:400 clamp(18px,1.45vw,25px)/1.15 var(--hand);color:#93a6bd;letter-spacing:.04em;transform:rotate(-9deg);pointer-events:none}
@media(aspect-ratio < 1/1){.hero .intro{bottom:4%;width:86%}.intro h1{font-size:clamp(46px,11vw,62px)}.intro-copy{font-size:14px;margin-top:12px;max-width:85%}.intro-actions{margin-top:8px}.join-content h2{font-size:48px}}