:root {
      color-scheme: light;
      --cream: #f8eddf;
      --ivory: #fffaf1;
      --ink: #684b38;
      --ink-soft: #8a6a50;
      --orange: #c9784e;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    * { box-sizing: border-box; }
    html { min-width: 320px; min-height: 100%; }
    body {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(ellipse 54% 42% at 12% 12%, rgba(255, 249, 232, .96), transparent 72%),
        radial-gradient(ellipse 42% 36% at 88% 82%, rgba(231, 167, 126, .27), transparent 76%),
        linear-gradient(138deg, #fbf0e1 0%, #f5dfca 48%, #f0d1b7 100%);
    }
    body::before {
      content: "";
      position: fixed;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      opacity: .2;
      background-image: repeating-linear-gradient(0deg, rgba(130, 93, 63, .04) 0 1px, transparent 1px 5px), repeating-linear-gradient(93deg, rgba(255,255,255,.2) 0 1px, transparent 1px 7px);

    }
    body::after {
      content: "";
      position: fixed;
      z-index: 0;
      inset: -8%;
      pointer-events: none;
      opacity: .16;
      background-image:
        radial-gradient(circle at 17% 28%, rgba(255,250,235,.58) 0 1px, transparent 2px),
        radial-gradient(circle at 77% 22%, rgba(181,113,76,.19) 0 1px, transparent 2px),
        radial-gradient(circle at 66% 72%, rgba(255,248,232,.48) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 31% 83%, rgba(183,115,77,.16) 0 1px, transparent 2px);
      background-size: 240px 220px, 310px 270px, 360px 320px, 280px 260px;
      animation: none;
      transform: translate3d(0,0,0);
    }
    .page { position: relative; z-index: 1; width: min(100% - 34px, 860px); margin: 0 auto; padding: clamp(34px, 7vw, 76px) 0 48px; }
    .top-mark { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 18px; color: rgba(163,111,79,.72); }
    .top-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
    h1 { margin: 0; color: #684b38; font-family: "Songti SC", "Noto Serif CJK SC", "STSong", Georgia, serif; font-size: clamp(27px, 5vw, 39px); font-weight: 600; letter-spacing: .07em; text-align: center; }
    .subtitle { margin: 13px 0 0; color: #8a6a50; font-size: 14px; line-height: 1.8; letter-spacing: .035em; text-align: center; }
    .divider { display: flex; align-items: center; gap: 13px; width: min(100%, 340px); margin: 26px auto 29px; color: #bc805d; }
    .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(182,127,88,.4)); }
    .divider::after { transform: scaleX(-1); }
    .divider span { font-size: 14px; }
    .original-preview { margin: 0 0 24px; overflow: hidden; border: 1px solid rgba(174,121,82,.25); border-radius: 14px; color: var(--ink); background: rgba(255,250,241,.72); box-shadow: 0 8px 24px rgba(119,74,45,.08), inset 0 0 0 3px rgba(255,255,255,.24); }
    .original-preview summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; color: #795b42; font-size: 13px; font-weight: 600; letter-spacing: .04em; list-style: none; cursor: pointer; }
    .original-preview summary::-webkit-details-marker { display: none; }
    .original-preview summary::after { content: "+"; display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(174,121,82,.22); border-radius: 50%; color: var(--orange); font-size: 18px; font-weight: 400; transition: transform 180ms ease, background-color 180ms ease; }
    .original-preview[open] summary { border-bottom: 1px solid rgba(174,121,82,.16); }
    .original-preview[open] summary::after { content: "−"; background: rgba(244,225,204,.55); }
    .original-preview summary:focus-visible { outline: 2px solid rgba(145,77,47,.58); outline-offset: -3px; }
    .original-letter-copy { padding: 19px 21px 22px; color: #684b38; font-size: 14px; line-height: 1.95; }
    .original-letter-copy p { margin: 0 0 13px; }
    .original-letter-copy p:last-child { margin-bottom: 0; }
    .original-letter-copy .salutation { margin-bottom: 15px; color: #8b5d40; font-size: 16px; font-weight: 650; }
    .list-status { min-height: 1.6em; margin: 0 auto 12px; color: #92755e; font-size: 12px; text-align: center; }
    .pull-hint { height: 0; margin: 0; overflow: hidden; color: #a06e4d; font-size: 12px; line-height: 1.5; opacity: 0; text-align: center; transition: height 180ms ease, margin 180ms ease, opacity 180ms ease; }
    .pull-hint.is-visible { height: 19px; margin: 0 0 8px; opacity: 1; }
    .reply-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin: 0; padding: 0; list-style: none; }
    .reply-note {
      position: relative;
      min-height: 150px;
      padding: 23px 23px 21px;
      border: 1px solid rgba(190,143,77,.28);
      border-radius: 4px 6px 5px 4px;
      background-color: #f8e9bd;
      background-image: radial-gradient(ellipse at 8% 2%, rgba(255,255,241,.54), transparent 52%), repeating-linear-gradient(0deg, rgba(144,108,56,.035) 0 1px, transparent 1px 5px);
      box-shadow: 1px 3px 0 rgba(138,91,51,.07), 0 11px 25px rgba(129,83,42,.13), inset 0 0 0 4px rgba(255,251,228,.18);
      transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .reply-note::before { content: ""; position: absolute; top: -8px; left: 50%; width: 58px; height: 16px; border: 1px solid rgba(198,145,100,.12); background: rgba(239,200,159,.66); transform: translateX(-50%) rotate(-2deg); }
    .reply-note:nth-child(4n + 1) { transform: rotate(-.55deg); }
    .reply-note:nth-child(4n + 2) { transform: rotate(.42deg); background-color: #f7ebc8; }
    .reply-note:nth-child(4n + 3) { transform: rotate(.24deg); background-color: #f5e2b4; }
    .reply-note:nth-child(4n) { transform: rotate(-.28deg); background-color: #faedca; }
    .reply-note:active, .reply-note.touch-tilt { transform: rotate(0) scale(.995); }
    .reply-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(160,117,76,.17); color: #8b6749; }
    .reply-author { font-size: 12px; font-weight: 650; letter-spacing: .04em; }
    .reply-date { flex: 0 0 auto; color: #a58a6f; font-size: 10px; }
    .reply-content { margin: 0; color: #634b37; font-size: 15px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
    .empty-state { grid-column: 1 / -1; padding: 36px 16px; border: 1px solid rgba(150,109,76,.18); border-radius: 12px; color: #92755e; background: rgba(255,250,241,.62); box-shadow: 0 10px 28px rgba(119,74,45,.08); font-size: 14px; text-align: center; }
    .bottom-return { display: flex; width: fit-content; min-width: 172px; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin: 30px auto 0; padding: 10px 20px; border: 1px solid rgba(174,121,82,.32); border-radius: 999px; color: #865b41; background: rgba(255,249,238,.78); box-shadow: 0 5px 14px rgba(126,78,45,.08); font: inherit; font-size: 13px; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
    .bottom-return:hover { transform: translateY(-2px); background: #fff9ef; box-shadow: 0 9px 20px rgba(126,78,45,.13); }
    .toast { position: fixed; z-index: 10; right: 18px; bottom: 24px; display: flex; align-items: center; gap: 10px; max-width: min(390px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border: 1px solid rgba(167,112,74,.25); border-radius: 12px; color: #684b38; background: rgba(255,249,238,.96); box-shadow: 0 12px 30px rgba(101,61,38,.16); opacity: 0; transform: translate3d(0,10px,0); transition: opacity 180ms ease, transform 180ms ease; }
    .toast[hidden] { display: none; }
    .toast.is-visible { opacity: 1; transform: translate3d(0,0,0); }
    .toast.is-leaving { opacity: 0; transform: translate3d(22px,0,0); }
    .toast button { flex: 0 0 48px; min-width: 48px; min-height: 48px; border: 0; border-radius: 50%; color: #865b41; background: rgba(233,204,176,.46); font: inherit; font-size: 20px; cursor: pointer; }
    .refreshable { transition: transform 220ms cubic-bezier(.2,.7,.3,1); }
    .refreshable.is-pulling { transform: translateY(7px); }
    .lightbox[hidden] { display: none !important; }
    .lightbox { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(72,49,36,.74); opacity: 0; transition: opacity 200ms ease; }
    .lightbox.is-open { opacity: 1; }
    .lightbox-backdrop { position: absolute; inset: 0; border: 0; background: transparent; }
    .lightbox-inner { position: relative; z-index: 1; max-width: min(92vw,1000px); max-height: 88svh; padding: 10px; border: 1px solid rgba(255,245,228,.45); border-radius: 13px; background: #fff8ec; box-shadow: 0 24px 70px rgba(35,22,14,.3); }
    .lightbox-inner img { display: block; max-width: 100%; max-height: calc(88svh - 20px); border-radius: 7px; object-fit: contain; }
    .lightbox-close { position: absolute; top: 13px; right: 13px; z-index: 2; min-width: 48px; min-height: 48px; border: 1px solid rgba(135,94,63,.22); border-radius: 50%; color: #684b38; background: rgba(255,250,241,.93); font: inherit; font-size: 22px; cursor: pointer; }
    @keyframes drift { from { opacity: .09; transform: translate3d(-.5%,-.4%,0); } to { opacity: .25; transform: translate3d(.6%,.5%,0); } }
    @media (min-width: 768px) {
      .reply-note:hover { transform: translateY(-3px) rotate(0); box-shadow: 2px 7px 0 rgba(138,91,51,.06), 0 17px 31px rgba(129,83,42,.16), inset 0 0 0 4px rgba(255,251,228,.22); }
    }
    @media (max-width: 767px) {
      .page { width: min(100% - 26px, 620px); padding: 34px 0 calc(32px + env(safe-area-inset-bottom)); }
      .original-preview { margin-bottom: 21px; }
      .original-preview summary { min-height: 52px; padding: 11px 15px; }
      .original-letter-copy { padding: 16px 16px 19px; font-size: 14px; line-height: 1.9; }
      .reply-list { grid-template-columns: 1fr; gap: 14px; }
      .reply-note { min-height: 136px; padding: 22px 19px 19px; }
      .bottom-return { min-height: 50px; }
      .toast { right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 12px; justify-content: space-between; max-width: none; }
      .lightbox { padding: 10px; }
      .lightbox-inner { width: 100%; padding: 7px; }
      .lightbox-close { top: 10px; right: 10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
  /* 回信独立分页，沿用原稿回信纸张与颜色。 */
.reply-page { padding-top: 30px; }
.reply-tools { margin: 0 0 23px; }
.reply-tools .form-label { margin-bottom: 8px; }
.reply-compose { margin-bottom: 30px; }
.reply-compose h2 { margin: 0 0 10px; font-size: 18px; }
.reply-compose > .form-status { margin-bottom: 20px; }
.reply-compose textarea { min-height: 160px; }
.reply-note { display: flex; flex-direction: column; }
.reply-content { flex: 1; }
.reply-original-link { align-self: flex-start; margin-top: 20px; font-size: 12px; overflow-wrap: anywhere; }
.original-title { margin: 0 0 15px; font-size: 18px; }
.new-reply { animation: note-land 500ms ease var(--delay,0ms) both; }
.original-preview[open] .original-letter-copy { animation: page-rise 250ms ease; }
.top-mark svg { animation: sticker-sway 1200ms ease-in-out 1; }
.top-mark svg:last-child { animation-delay: -3s; }
@media (max-width:767px) { .reply-page { width: 100%; padding-top: 25px; } .reply-compose { padding: 23px 19px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }