@font-face {
  font-family: Quicksand;
  src: url('/assets/Quicksand.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: Lemihui;
  src: url('/assets/lemihui.woff') format('woff');
  font-display: swap;
}
:root {
  --paper: #f9f4e9;
  --ink: #292b21;
  --muted: #56584c;
  --accent: #9f3f25;
  --dark: #262f23;
  --border: #ded7c7;
  --display: Georgia, 'Times New Roman', serif;
  --body: Quicksand, Lemihui, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font: 600 16px/1.6 var(--body);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.07; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.055em; }
h3 { font-weight: 700; letter-spacing: -.045em; }
:lang(zh-CN) { --display: Lemihui, 'PingFang SC', system-ui, sans-serif; }
:lang(zh-CN) :is(h1,h2,h3) { letter-spacing: -.035em; }
:focus-visible { outline: 2px solid #b35133; outline-offset: 5px; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 112px, 1312px); margin-inline: auto; }
.skip { position: absolute; z-index: 10; top: 12px; left: 12px; padding: .7rem 1rem; background: var(--paper); transform: translateY(-150%); }
.skip:focus { transform: none; }
.header { min-height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.36rem; letter-spacing: -.055em; text-decoration: none; justify-self: start; }
.brand img { flex: none; object-fit: contain; }
.wordmark { color: #171411; white-space: nowrap; }
.wordmark > span { color: #784730; }
.card-story .wordmark { background: var(--paper); border-radius: .15em; box-shadow: 0 0 0 .12em var(--paper); margin-inline: .12em; }
.primary, .header-actions, .footer nav { display: flex; align-items: center; gap: clamp(16px, 2.35vw, 38px); }
.header-actions { justify-self: end; gap: 18px; white-space: nowrap; }
.nav-link, .language { display: inline-flex; min-height: 44px; align-items: center; gap: .5rem; text-decoration: none; font-size: .91rem; }
.nav-link:hover, .language:hover { text-decoration: underline; text-underline-offset: .3em; }
.language { font-size: .84rem; }
.button, .text-link { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; gap: .67rem; font-weight: 700; }
.button { padding: .74rem 1.22rem; border-radius: 999px; text-decoration: none; }
.button-primary { background: var(--dark); color: #fff9eb; }
.button-primary:hover { background: #3b4934; }
.text-link { text-underline-offset: .3em; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; justify-content: flex-start; }
.text-link:hover { color: var(--accent); }
.arrow { display: inline-block; flex: none; font-family: system-ui, sans-serif; font-size: 1.06em; font-weight: 400; }

.hero { display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); align-items: center; gap: clamp(24px,4.1vw,70px); padding-block: clamp(37px,5.1vw,80px) clamp(65px,7.3vw,110px); }
.hero h1 { font-size: clamp(54px,7.35vw,106px); line-height: .95; }
.hero h1 em { color: var(--accent); font-weight: 400; }
.hero-accent { display: inline-flex; align-items: center; gap: .16em; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-words { display: inline-grid; overflow: hidden; line-height: 1.2; margin-block: -.12em; padding-inline: .06em .09em; margin-inline: -.06em -.09em; }
.hero-words > span { grid-area: 1 / 1; visibility: hidden; }
.hero-words > .current, .hero-words > .leaving { visibility: visible; }
.hero-flower { width: .7em; height: .7em; flex: none; object-fit: contain; }
.headline-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: transparent; }
.headline-toggle:hover { color: var(--ink); background: #efe8db; }
html[lang=zh-CN] .hero h1 { font-size: clamp(49px,6.2vw,89px); line-height: 1.14; }
html[lang=zh-CN] .hero h1 em { font-style: normal; }
.hero-copy > p { color: var(--muted); max-width: 31ch; margin-block: 27px 25px; font-size: clamp(17px,1.49vw,22px); line-height: 1.57; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 21px; }
.hero-actions .button { padding-inline: 1.35rem; }
.hero-art { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1.34; border-radius: 52% 52% 19px 19px / 14% 14% 19px 19px; background: #df947c; }
.landscape { width: 100%; height: 100%; object-fit: cover; }
.hero-nawa { position: absolute; width: 40%; height: auto; left: 20%; bottom: 6%; filter: drop-shadow(4px 12px 11px #61291d52); }

.experience { padding-bottom: clamp(68px,8vw,115px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.section-heading > p { max-width: 35ch; color: var(--muted); padding-bottom: 3px; }
.eyebrow { margin-bottom: 10px; font-size: .77rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.section-heading .eyebrow { color: var(--accent); }
.section-heading h2, .story-copy h2, .faq h2, .closing h2 { font-size: clamp(40px,4.45vw,67px); }
.feature-grid, .notes-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.tone-0 { background: #f3dcd3; }
.tone-1 { background: #eae5cf; }
.tone-2 { background: #e3e8d9; }
.feature { min-width: 0; display: flex; align-items: flex-start; flex-direction: column; padding: 22px clamp(18px,2.4vw,34px) 16px; border-radius: 20px; }
.feature-icon { width: 59px; height: 63px; object-fit: contain; margin-bottom: 17px; }
.feature-card-art { width: 44px; height: 63px; object-fit: cover; margin: 0 0 17px 5px; border-radius: 5px; transform: rotate(-9deg); }
.feature h3, .note h3 { font-size: clamp(22px,2.1vw,31px); }
.feature p, .note p { margin: .7rem 0 .5rem; color: #494c3f; }
.feature .text-link { margin-top: auto; }

.card-story { overflow: hidden; background: var(--dark); color: var(--paper); }
.story-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); align-items: center; gap: 30px; padding-block: clamp(55px,7.6vw,110px); }
.story-copy { max-width: 430px; }
.story-copy .eyebrow { color: #f5bb99; }
.story-copy p:not(.eyebrow) { margin: 22px 0 12px; font-size: 1.07rem; color: #efe7d8; max-width: 36ch; }
.story-copy a:hover { color: #ffccaf; }
.deck { min-width: 0; }
.deck-art { position: relative; aspect-ratio: 1.7; width: min(100%,530px); margin: auto; touch-action: pan-y pinch-zoom; }
.deck-art img { position: absolute; left: 50%; top: 1%; width: 33%; height: auto; border-radius: 7%; box-shadow: 0 12px 30px #131b1780; user-select: none; -webkit-user-drag: none; }
.deck-art .deck-left { transform: translate(-104%,11%) rotate(-17deg) scale(.93); z-index: 1; }
.deck-art .deck-right { transform: translate(4%,11%) rotate(17deg) scale(.93); z-index: 1; }
.deck-art .selected { transform: translateX(-50%); z-index: 2; }
.deck-controls { margin-top: 3px; display: flex; gap: 14px; align-items: center; justify-content: center; }
.deck-controls button { display: grid; place-items: center; border: 1px solid #a4ad95; background: transparent; color: inherit; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; }
.deck-controls button:hover { background: #414d3b; }
.deck-controls [data-count] { font-variant-numeric: tabular-nums; }
.card-story :focus-visible { outline-color: #f5bb99; }

.notes-section { padding-block: clamp(65px,8vw,115px); }
.note { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; background: #fffbf2; }
.note:hover { border-color: var(--accent); }
.note:hover h3 { text-decoration: underline; text-underline-offset: .21em; }
.note-art { display: grid; place-items: center; min-height: 128px; }
.note-art img { width: 72px; height: 72px; object-fit: contain; }
.note-text { position: relative; padding: 22px 44px 23px 22px; flex: 1; }
.note-text p { margin-bottom: 0; }
.note-text .arrow { position: absolute; top: 24px; right: 19px; color: var(--accent); }

.faq { border-top: 1px solid var(--border); display: grid; grid-template-columns: .72fr 1fr; gap: 40px; padding-block: 54px 70px; }
details { border-bottom: 1px solid var(--border); }
summary { position: relative; display: flex; gap: 20px; justify-content: space-between; cursor: pointer; align-items: center; padding: 15px 1px; min-height: 50px; font-size: 1.05rem; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span::before { content: '+'; font-size: 1.33rem; }
details[open] summary span::before { content: '−'; }
details p { max-width: 63ch; padding: 0 28px 18px 1px; color: var(--muted); }
.closing { display: flex; justify-content: space-between; align-items: center; gap: 22px; background: #f3dacf; border-radius: 23px; padding: clamp(25px,5vw,68px); }
.closing h2 { font-size: clamp(36px,4vw,57px); }
.closing .button { flex: none; }

.footer { min-height: 110px; margin-top: 48px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.footer nav { flex-wrap: wrap; }
.footer > a:last-child { flex: none; }
.document { padding-block: clamp(46px,7vw,100px) 40px; }
.document-intro { max-width: 940px; margin-bottom: 38px; }
.document-intro h1 { font-size: clamp(43px,6.1vw,87px); }
.document-intro p { margin-top: 19px; max-width: 58ch; color: var(--muted); font-size: 1.22rem; }
.document-intro p.date { font-size: .88rem; }
.document-body { display: grid; gap: clamp(30px,5vw,70px); }
.with-contents { grid-template-columns: minmax(190px,250px) minmax(0,1fr); }
.contents { align-self: start; padding: 15px 19px; background: #ebe7d8; border-radius: 16px; }
.contents a { display: flex; min-height: 44px; }
.contents p { font-weight: 700; margin-bottom: 5px; }
.prose { max-width: 740px; font-size: 1.05rem; }
.prose section + section { margin-top: 33px; }
.prose h2 { font-size: clamp(27px,3.4vw,43px); margin: 0 0 .8rem; }
.prose > :is(h2,h3,h4):not(:first-child) { margin-top: 1.5rem; }
.prose p + p { margin-top: .82rem; }
.prose li + li { margin-top: .45rem; }
.prose > :is(p,ul,ol) { margin-top: .82rem; }
.prose .document-card { display: block; position: relative; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; text-decoration: none; padding: 20px 51px 20px 20px; }
.prose .document-card:hover { border-color: var(--accent); }
.document-card h2 { font-size: 1.5rem; }
.document-card .arrow { position: absolute; top: 23px; right: 18px; }
.guide-help { margin-top: 18px; }

@media (max-width: 950px) {
  .wrap { width: calc(100% - 60px); }
  .header { gap: 14px; }
  .primary { gap: 16px; }
  .header-actions { gap: 12px; }
  .hero { gap: 28px; }
  .hero h1 { font-size: clamp(45px,7.9vw,75px); }
  .hero-actions { gap: 6px 16px; }
}
@media (max-width: 720px) {
  .wrap { width: calc(100% - 36px); }
  .header { grid-template-columns: 1fr auto; min-height: 0; gap: 0 8px; padding-top: 10px; }
  .primary { grid-row: 2; grid-column: 1/-1; gap: 22px; padding-top: 3px; }
  .brand { font-size: 1.12rem; gap: 6px; }
  .brand img { width: 31px; height: 31px; }
  .header-actions .button { padding: 8px 11px; font-size: .79rem; gap: 4px; min-height: 44px; }
  .header-actions { gap: 8px; }
  .hero, .story-layout, .faq { grid-template-columns: 1fr; }
  .hero { gap: 24px; padding-top: 32px; padding-bottom: 52px; }
  .hero h1 { font-size: clamp(52px,10.9vw,75px); }
  .hero-copy > p { margin-block: 18px 14px; max-width: 35ch; }
  .hero-art { aspect-ratio: 1.47; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .feature-grid, .notes-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature { padding: 17px 20px 11px; }
  .feature-icon, .feature-card-art { margin-bottom: 10px; }
  .story-layout { gap: 30px; }
  .deck { margin-inline: auto; width: min(100%,450px); }
  .note { flex-direction: row; min-height: 108px; }
  .note-art { flex: 0 0 24%; min-height: unset; }
  .note-art img { width: 48px; height: 48px; }
  .note-text { padding: 16px 38px 16px 14px; }
  .note-text .arrow { top: 16px; right: 13px; }
  .note-text p { margin-top: .4rem; }
  .faq { gap: 16px; padding-block: 37px 46px; }
  .closing { align-items: start; flex-direction: column; }
  .footer { align-items: start; flex-wrap: wrap; margin-top: 32px; padding-block: 18px; gap: 0 18px; }
  .footer nav { order: 3; width: 100%; gap: 14px; }
  .with-contents { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  html[lang=zh-CN] .hero h1 { font-size: 43px; }
  .header .brand { font-size: 1rem; }
  .header .brand img { width: 26px; height: 26px; }
  .header .language { font-size: .75rem; }
  .header-actions .button { font-size: .74rem; padding-inline: .55rem; }
  .header-actions .button .arrow { display: none; }
  .primary { gap: 16px; }
}
@keyframes scene-enter {
  from { opacity: .5; transform: scale(.975) translateY(14px); }
}
@keyframes nawa-enter {
  from { opacity: .45; transform: translate(-6%, 10%) rotate(-4deg); }
}
@keyframes copy-enter {
  from { opacity: .65; transform: translateY(13px); }
}
@keyframes sunlight {
  0%, 100% { opacity: 0; }
  48% { opacity: .45; }
}
@keyframes answer-enter {
  from { opacity: .65; transform: translateY(-5px); }
}
@keyframes flower-turn {
  to { rotate: 1turn; }
}
@keyframes word-in { from { transform: translateY(95%); opacity: 0; } }
@keyframes word-out { to { transform: translateY(-95%); opacity: 0; } }
.flower-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  width: 26px;
  height: 26px;
  z-index: 100;
  pointer-events: none;
  contain: layout style;
}
.flower-cursor img { filter: drop-shadow(0 1px 1px #6d45202b); }
.flower-cursor.pressed img { scale: .86; }
@media (hover: hover) and (pointer: fine) {
  body { cursor: url('/assets/flower.svg') 13 13, auto; }
  :is(a, button, summary) { cursor: url('/assets/flower.svg') 13 13, pointer; }
  .flower-cursor-active, .flower-cursor-active :is(a, button, summary) { cursor: none; }
  :is(input,textarea,[contenteditable]:not([contenteditable="false"])) { cursor: text; }
  :is(:disabled,[aria-disabled="true"]) { cursor: not-allowed; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: scene-enter 760ms cubic-bezier(.18,.75,.28,1) both; }
  .hero-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 61% 30%, #fff2b57a, transparent 65%);
    opacity: 0;
    pointer-events: none;
    animation: sunlight 1.6s 180ms ease-out;
  }
  .hero-nawa { animation: nawa-enter 880ms 90ms cubic-bezier(.16,.76,.29,1) both; }
  .hero-copy > * { animation: copy-enter 590ms cubic-bezier(.18,.75,.28,1); }
  .hero-copy.motion-ready .hero-flower { animation: flower-turn 9s linear infinite; }
  .hero-copy.headline-paused .hero-flower { animation-play-state: paused; }
  .hero-words > .entering { animation: word-in 540ms cubic-bezier(.22,.75,.3,1) both; }
  .hero-words > .leaving { animation: word-out 540ms cubic-bezier(.22,.75,.3,1) both; }
  .flower-cursor img { animation: flower-turn 14s linear infinite; }
  .hero-copy > p { animation-delay: 85ms; }
  .hero-actions { animation-delay: 160ms; }
  .arriving:not(:focus-within) { animation: copy-enter 550ms cubic-bezier(.18,.75,.28,1); }
  .arriving:nth-child(2) { animation-delay: 65ms; }
  .arriving:nth-child(3) { animation-delay: 120ms; }
  .deck-art img { transition: transform 520ms cubic-bezier(.24,.81,.33,1.12); }
  .button, .deck-controls button { transition: background-color 160ms ease, scale 160ms ease; }
  :is(.button, .deck-controls button):active { scale: .96; }
  details[open] p { animation: answer-enter 240ms ease-out; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .landscape, .hero-nawa { transition: translate 240ms cubic-bezier(.2,.7,.35,1); }
  .landscape { scale: 1.05; translate: calc(var(--hero-x, 0) * -12px) calc(var(--hero-y, 0) * -10px); }
  .hero-nawa { translate: calc(var(--hero-x, 0) * 22px) calc(var(--hero-y, 0) * 16px); }
  .feature :is(.feature-icon, .feature-card-art), .note-art img { transition: translate 240ms ease, rotate 240ms ease; }
  .feature:hover :is(.feature-icon, .feature-card-art), .note:hover .note-art img { translate: 0 -5px; rotate: -5deg; }
  .note { transition: border-color 180ms ease, translate 250ms ease; }
  .note:hover { translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}