:root {
  color-scheme: light;
  --paper: #faf6ef;
  --ink: #352b26;
  --muted: #807267;
  --red: #d93b30;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button[hidden] { display: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
::selection { background: #edc3a5; color: var(--ink); }

.paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 51% 44%, #fffdf7 0, #faf6ef 54%, #f2e9dc 100%);
}
.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23907b65' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.frame { position: fixed; inset: 22px; z-index: 2; border: 1px solid #9e78521c; pointer-events: none; }
.frame::before, .frame::after { content: "+"; position: absolute; color: #b4a28b; background: var(--paper); font: 16px/12px monospace; width: 12px; height: 12px; text-align: center; }
.frame::before { top: -6px; left: -6px; }
.frame::after { bottom: -6px; right: -6px; }
.branch { position: fixed; width: min(42vw, 610px); right: 0; top: -14px; pointer-events: none; opacity: .8; }
#leaves { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.page { min-height: 100svh; display: flex; flex-direction: column; position: relative; z-index: 3; padding: 45px 66px 37px; }
.header, .footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header { min-height: 61px; }
.brand { display: block; width: 130px; flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: auto; }
.site-status { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .12em; color: #6c5e53; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #a54e35; box-shadow: 0 0 0 4px #d67a4e10; }
.main { flex: 1; display: grid; place-items: center; min-height: 520px; padding: 35px 0 65px; text-align: center; }
.hero { position: relative; animation: appear 1.3s ease both; }
.hero-mark { display: block; width: 88px; height: 88px; margin: 0 auto 33px; }
.eyebrow { margin: 0 0 22px; color: #9d6651; font: 10px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .27em; }
h1 { margin: 0; padding-left: .14em; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(58px, 6.8vw, 98px); line-height: 1.3; font-weight: 500; letter-spacing: .14em; }
.heading-dot { color: var(--red); display: inline-block; width: .55em; margin-left: -.05em; letter-spacing: 0; }
.description { color: #716258; font-size: 14px; letter-spacing: .16em; line-height: 2; margin: 22px 0 0; }
.waiting { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 38px auto 21px; }
.waiting span { display: block; width: 33px; height: 1px; background: #c7b8a780; }
.waiting i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #be6851; }
.footnote { font-size: 11px; letter-spacing: .16em; line-height: 2; color: #8c7b6b; margin: 0; }
.footer { min-height: 36px; font-size: 10px; letter-spacing: .04em; color: #83766a; }
.copyright { margin: 0; }
.separator { padding: 0 6px; color: #a89a8a; }
.wind-note { display: flex; align-items: center; gap: 9px; position: absolute; left: 50%; transform: translateX(-50%); margin: 0; color: #8c7b69; font-size: 10px; letter-spacing: .1em; }
.wind-symbol { font-size: 21px; line-height: 1; color: #b29374; }
.touch-hint { display: none; }
.motion-toggle { border: 1px solid #bba58b52; color: #716357; background: #faf6ef8c; border-radius: 30px; padding: 8px 12px 8px 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; cursor: pointer; min-height: 36px; transition: border-color .2s, background .2s; }
.motion-toggle:hover { background: #f3e8dc; border-color: #bba58b; }
.motion-toggle svg { width: 17px; height: 17px; }
.play-icon { display: none; }
.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }
.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) { .page { padding: 52px 85px 44px; } .main { padding-bottom: 85px; } }
@media (max-width: 760px) {
  .frame { inset: 13px; }
  .page { padding: 29px 31px 24px; }
  .brand { width: 105px; }
  .header { min-height: 50px; }
  .site-status { font-size: 10px; gap: 7px; letter-spacing: .06em; }
  .branch { width: 67vw; right: -35px; top: 69px; opacity: .56; }
  .main { min-height: 500px; padding: 55px 0 75px; }
  .hero-mark { width: 76px; height: 76px; margin-bottom: 30px; }
  .eyebrow { font-size: 8px; letter-spacing: .23em; margin-bottom: 21px; }
  h1 { font-size: clamp(45px, 10.5vw, 76px); letter-spacing: .1em; }
  .description { font-size: 12px; letter-spacing: .07em; margin-top: 19px; }
  .waiting { margin-top: 31px; }
  .footnote { font-size: 10px; letter-spacing: .07em; }
  .footer { flex-wrap: wrap; gap: 12px; font-size: 9px; }
  .wind-note { position: static; transform: none; order: 3; width: 100%; justify-content: center; margin: 13px 0 0; font-size: 9px; }
}
@media (hover: none) { .desktop-hint { display: none; } .touch-hint { display: inline; } }
@media (max-height: 680px) and (min-width: 761px) {
  .page { padding-top: 30px; padding-bottom: 26px; }
  .main { min-height: 400px; padding: 20px 0 35px; }
  .hero-mark { width: 64px; height: 64px; margin-bottom: 18px; }
  h1 { font-size: 70px; }
  .waiting { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } * { scroll-behavior: auto !important; } }