:root {
      color-scheme: light;
      --cream: #f8eddf;
      --apricot: #f3ddc8;
      --peach: #edc5a7;
      --ivory: #fffaf1;
      --ink: #684b38;
      --ink-soft: #80634d;
      --orange: #c9784e;
      --kraft: #c9956e;
      --kraft-light: #dfb18b;
      --kraft-deep: #ad7652;
      --paper-edge: rgba(135, 94, 63, .18);
      --warm-shadow: rgba(120, 70, 38, .16);
      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 {
      min-height: 100vh;
      min-height: 100svh;
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(ellipse 52% 45% at 14% 18%, rgba(255, 247, 230, .94), transparent 72%),
        radial-gradient(ellipse 46% 42% at 88% 79%, rgba(231, 167, 126, .30), transparent 75%),
        radial-gradient(ellipse 34% 28% at 77% 12%, rgba(255, 232, 204, .62), transparent 76%),
        linear-gradient(135deg, #f9edde 0%, #f5dfca 43%, #f1d2ba 100%);
    }

    body::before {
      content: "";
      position: fixed;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      opacity: .23;
      background-image:
        repeating-linear-gradient(0deg, rgba(130, 93, 63, .045) 0, rgba(130, 93, 63, .045) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(93deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .22) 1px, transparent 1px, transparent 6px);

    }

    body::after {
      content: "";
      position: fixed;
      z-index: 0;
      inset: -8%;
      pointer-events: none;
      opacity: 0;
      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;
      transform: translate3d(0, 0, 0);
      animation: none;
    }

    .app-shell { position: relative; z-index: 1; min-height: 100vh; padding: 16px clamp(14px, 3vw, 34px) 30px; }

    .view-nav {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      gap: 5px;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto 10px;
      padding: 6px;
      border: 1px solid rgba(160, 111, 75, .2);
      border-radius: 999px;
      background: rgba(255, 248, 236, .64);
      box-shadow: 0 5px 18px rgba(126, 78, 45, .07);
    }

    .view-tab {
      min-height: 40px;
      padding: 9px 17px;
      border: 0;
      border-radius: 999px;
      color: #806148;
      background: transparent;
      font: inherit;
      font-size: 13px;
      letter-spacing: .035em;
      white-space: nowrap;
      cursor: pointer;
      transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    }

    .view-tab[aria-selected="true"] {
      color: #70472f;
      background: #fff9ef;
      box-shadow: 0 2px 8px rgba(126, 78, 45, .11), inset 0 0 0 1px rgba(176, 128, 87, .15);
    }

    .view-tab:focus-visible { outline: 2px solid #a96743; outline-offset: 2px; }

    .view-panel { max-width: 1240px; margin: 0 auto; animation: view-appear 260ms ease both; }
    .view-panel[hidden] { display: none !important; }

    .page-view {
      width: min(100%, 960px);
      min-height: calc(100svh - 116px);
      margin: 0 auto;
      padding: clamp(30px, 6vh, 62px) 10px 60px;
    }

    .view-heading { margin: 4px auto 25px; text-align: center; }
    .view-kicker { margin: 0 0 9px; color: #a87554; font-size: 11px; letter-spacing: .18em; }
    .view-heading h1 { margin: 0; color: #684b38; font-size: clamp(24px, 4vw, 32px); font-weight: 620; letter-spacing: .08em; }
    .view-heading p:last-child { margin: 10px auto 0; color: #8d715a; font-size: 14px; line-height: 1.8; }

    .sticker-row { display: flex; align-items: center; justify-content: center; gap: 21px; margin: 10px auto 20px; color: rgba(163, 111, 79, .72); }
    .sticker-row svg { display: block; width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
    .sticker-row svg:nth-child(odd) { transform: rotate(-7deg); }
    .sticker-row svg:nth-child(even) { transform: rotate(6deg); }
    .showcase-stickers { margin: 14px auto 0; }

    .content-card {
      border: 1px solid rgba(150, 109, 76, .18);
      border-radius: 12px;
      padding: clamp(21px, 4vw, 36px);
      background-color: rgba(255, 250, 241, .88);
      background-image: repeating-linear-gradient(0deg, rgba(126, 89, 57, .018) 0, rgba(126, 89, 57, .018) 1px, transparent 1px, transparent 5px);
      box-shadow: 0 14px 38px rgba(119, 74, 45, .11), inset 0 0 0 4px rgba(255, 255, 255, .2);
    }

    .compose-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); gap: 19px; align-items: start; }
    .compose-card h2, .saved-card h2 { margin: 0 0 18px; color: #74543c; font-size: 16px; font-weight: 650; letter-spacing: .04em; }
    .form-stack { display: grid; gap: 15px; }
    .form-label { display: grid; gap: 7px; color: #795b42; font-size: 13px; font-weight: 600; }
    .form-field {
      width: 100%;
      border: 1px solid rgba(160, 118, 75, .25);
      border-radius: 6px;
      padding: 11px 12px;
      color: #624936;
      background: rgba(255, 252, 244, .9);
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.7;
      outline: none;
    }

    .form-field:focus { border-color: rgba(185, 112, 67, .68); box-shadow: 0 0 0 3px rgba(201, 120, 78, .12); }
    textarea.form-field { min-height: 320px; resize: vertical; }
    .upload-control { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .upload-button {
      display: inline-flex;
      align-items: center;
      min-height: 39px;
      padding: 8px 13px;
      border: 1px solid rgba(174, 121, 82, .3);
      border-radius: 999px;
      color: #865b41;
      background: rgba(248, 233, 213, .7);
      font-size: 13px;
      cursor: pointer;
    }

    .upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .upload-hint { margin: 0; color: #977b62; font-size: 12px; line-height: 1.6; }
    .form-submit {
      justify-self: start;
      min-height: 41px;
      padding: 9px 19px;
      border: 1px solid rgba(152, 83, 50, .24);
      border-radius: 999px;
      color: #fff8ec;
      background: linear-gradient(145deg, #cc8057, #b86e4a);
      box-shadow: 0 3px 8px rgba(130, 77, 46, .14);
      font: inherit;
      font-size: 13px;
      cursor: pointer;
    }

    .form-submit:hover { background: linear-gradient(145deg, #d18a61, #bf7651); }
    .form-submit:focus-visible { outline: 2px solid #9d5839; outline-offset: 3px; }
    .form-submit:disabled { cursor: wait; opacity: .65; }
    .form-status { min-height: 1.6em; margin: 0; color: #85684e; font-size: 12px; line-height: 1.6; }
    .saved-list, .shared-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .saved-item, .shared-item { padding: 13px 14px; border: 1px solid rgba(165, 126, 75, .16); border-radius: 5px; background: rgba(255, 250, 231, .62); box-shadow: 0 3px 8px rgba(120, 78, 40, .05); }
    .saved-item h3 { margin: 0 0 5px; color: #75563f; font-size: 14px; font-weight: 650; }
    .record-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #8f684a; font-size: 11px; }
    .record-date { flex: 0 0 auto; color: #aa8c70; }
    .record-content { margin: 0; color: #634b37; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
    .list-empty { padding: 12px 3px; color: #95775e; font-size: 13px; text-align: center; }
    .record-image-frame { margin: 12px 0 0; overflow: hidden; border: 1px solid rgba(201, 120, 78, .28); border-radius: 8px; background: rgba(247, 226, 205, .72); }
    .record-image-preview { display: block; width: 100%; max-height: 320px; object-fit: cover; cursor: zoom-in; }
    .record-image-preview:focus-visible { outline: 3px solid rgba(201, 120, 78, .58); outline-offset: -3px; }
    .pull-refresh-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-refresh-hint.is-visible { height: 19px; margin: 0 0 7px; opacity: 1; }
    .refreshable-list { transition: transform 220ms cubic-bezier(.2, .7, .3, 1); }
    .refreshable-list.is-pulling { transform: translateY(7px); }
    .touch-tilt { transform: rotate(-.5deg) scale(.995); }
    .touch-toast[hidden], .photo-lightbox[hidden] { display: none !important; }
    .touch-toast { position: fixed; z-index: 40; 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; }
    .touch-toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
    .touch-toast.is-leaving { opacity: 0; transform: translate3d(22px, 0, 0); }
    .touch-toast button { flex: 0 0 40px; min-width: 40px; min-height: 40px; border: 0; border-radius: 50%; color: #865b41; background: rgba(233, 204, 176, .46); font: inherit; font-size: 20px; cursor: pointer; }
    .photo-lightbox { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(72, 49, 36, .74); opacity: 0; transition: opacity 200ms ease; }
    .photo-lightbox.is-open { opacity: 1; }
    .photo-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: zoom-out; }
    .photo-lightbox-dialog { position: relative; z-index: 1; width: min(92vw, 1080px); 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); transform: scale(.985); transition: transform 200ms ease; }
    .photo-lightbox.is-open .photo-lightbox-dialog { transform: scale(1); }
    .photo-lightbox-dialog img { display: block; max-width: 100%; max-height: calc(88svh - 20px); margin: auto; border-radius: 7px; object-fit: contain; }
    .photo-lightbox-close { position: absolute; z-index: 2; top: 13px; right: 13px; min-width: 44px; min-height: 44px; border: 1px solid rgba(135, 94, 63, .22); border-radius: 50%; color: #684b38; background: rgba(255, 250, 241, .93); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }

    .short-form { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
    .reply-form { grid-template-columns: minmax(0, 1fr) auto; }
    .short-form .form-field { min-height: 43px; }
    .short-form textarea.form-field { min-height: 90px; }
    .short-form .form-submit { align-self: start; }
    .short-form-status { margin: 13px 0 16px; }

    .free-board {
      position: relative;
      width: min(100%, 740px);
      margin: 3px auto 0;
      padding: clamp(24px, 5vw, 42px);
      border: 1px solid rgba(190, 143, 77, .29);
      border-radius: 4px 5px 3px 6px;
      color: #654b37;
      background-color: #f9e8b9;
      background-image: radial-gradient(ellipse at 8% 2%, rgba(255,255,241,.55),transparent 52%), repeating-linear-gradient(0deg,rgba(144,108,56,.045) 0,rgba(144,108,56,.045) 1px,transparent 1px,transparent 5px);
      box-shadow: 2px 11px 26px rgba(129, 83, 42, .15), inset 0 0 0 4px rgba(255, 251, 228, .18);
      transform: rotate(-.45deg);
    }

    .free-board::before { content: ""; position: absolute; top: -9px; left: 50%; width: 68px; height: 18px; border: 1px solid rgba(198,145,100,.13); background: rgba(239,200,159,.66); transform: translateX(-50%) rotate(-2deg); }
    .free-board h2 { margin: 0 58px 7px 0; color: #684b38; font-size: 19px; letter-spacing: .05em; }
    .free-board > p { margin: 0 0 20px; color: #8d7053; font-size: 13px; line-height: 1.7; }
    .sticky-open-button { position: absolute; top: 17px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(174,121,82,.32); border-radius: 50%; color: #865b41; background: rgba(255,249,238,.86); box-shadow: 0 4px 12px rgba(126,78,45,.1); font: inherit; font-size: 27px; line-height: 1; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
    .sticky-open-button:hover { transform: translateY(-2px) rotate(4deg); background: #fff9ef; box-shadow: 0 8px 17px rgba(126,78,45,.14); }
    .sticky-open-button:focus-visible, .sticky-dialog-close:focus-visible { outline: 2px solid rgba(145,77,47,.72); outline-offset: 3px; }
    .sticky-dialog { width: min(460px, calc(100% - 30px)); max-height: min(88vh, 700px); padding: 0; overflow: auto; border: 1px solid rgba(174,121,82,.34); border-radius: 17px; color: #684b38; background: #fffaf1; box-shadow: 0 22px 60px rgba(77,49,31,.24), inset 0 0 0 4px rgba(255,255,255,.36); }
    .sticky-dialog::backdrop { background: rgba(72,49,36,.36); }
    .sticky-dialog-inner { padding: 23px; background-image: radial-gradient(ellipse at 8% 2%, rgba(255,255,255,.78), transparent 54%), repeating-linear-gradient(0deg, rgba(144,108,56,.025) 0 1px, transparent 1px 6px); }
    .sticky-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 17px; }
    .sticky-dialog-heading h2 { margin: 0; color: #684b38; font-size: 18px; letter-spacing: .04em; }
    .sticky-dialog-close { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid rgba(174,121,82,.25); border-radius: 50%; color: #865b41; background: rgba(244,225,204,.62); font: inherit; font-size: 23px; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease; }
    .sticky-dialog-close:hover { transform: rotate(6deg); background: rgba(238,211,183,.78); }
    .sticky-dialog .form-field { background: rgba(255,251,236,.9); }
    .sticky-dialog textarea.form-field { min-height: 115px; }

    @keyframes view-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ambient-drift { from { opacity: .11; transform: translate3d(-.5%, -.4%, 0); } to { opacity: .28; transform: translate3d(.6%, .5%, 0); } }

    .scene {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
      padding: clamp(30px, 6vh, 64px) 20px;
      isolation: isolate;
    }

    @media (min-width: 769px) {
      .content-card { position: relative; box-shadow: 1px 3px 0 rgba(160, 113, 76, .06), 0 16px 42px rgba(119, 74, 45, .12), inset 0 0 0 4px rgba(255, 255, 255, .22); transition: transform 220ms ease, box-shadow 220ms ease; }
      .content-card:hover { transform: none; }
      .saved-item, .shared-item { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
      .saved-item:hover, .shared-item:hover { transform: translateY(-2px) rotate(-.18deg); border-color: rgba(165, 126, 75, .26); box-shadow: 0 8px 19px rgba(120, 78, 40, .1); }
      .form-submit, .upload-button, .reply-entry-button, .view-tab { transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
      .form-submit:hover, .upload-button:hover { transform: translateY(-1px); box-shadow: 0 7px 14px rgba(130, 77, 46, .16); }
      body::after { opacity: .14; }
    }

    .ornament {
      position: absolute;
      z-index: -1;
      color: rgba(174, 106, 70, .34);
      pointer-events: none;
      user-select: none;
    }

    .ornament-heart {
      top: 12%;
      right: max(8%, calc((100vw - 1040px) / 2));
      color: rgba(193, 111, 73, .5);
      font-size: 17px;
      animation: heartbeat 4.8s ease-in-out infinite;
    }

    .ornament-star {
      top: 22%;
      left: max(11%, calc((100vw - 1000px) / 2));
      font-size: 10px;
      opacity: .48;
    }

    .ornament-line {
      right: max(9%, calc((100vw - 1080px) / 2));
      bottom: 16%;
      width: 27px;
      height: 12px;
      border-top: 1px solid rgba(174, 106, 70, .33);
      border-radius: 50%;
      transform: rotate(-19deg);
    }

    .letter-shell {
      display: grid;
      grid-template-rows: 0fr;
      width: min(100%, 780px);
      margin: 0 auto;
      opacity: 0;
      transition: grid-template-rows 850ms cubic-bezier(.22, .72, .25, 1), opacity 500ms ease, margin 850ms ease;
    }

    .letter-clip { min-height: 0; overflow: hidden; }

    .letter-paper {
      position: relative;
      padding: clamp(30px, 6vw, 62px) clamp(25px, 7.2vw, 74px) clamp(32px, 5vw, 50px);
      overflow: hidden;
      border: 1px solid var(--paper-edge);
      border-radius: 9px 11px 8px 10px;
      background-color: var(--ivory);
      background-image:
        radial-gradient(ellipse at 13% 5%, rgba(232, 194, 155, .20), transparent 43%),
        radial-gradient(ellipse at 95% 94%, rgba(222, 181, 140, .15), transparent 42%),
        repeating-linear-gradient(0deg, rgba(126, 89, 57, .025) 0, rgba(126, 89, 57, .025) 1px, transparent 1px, transparent 5px),
        repeating-linear-gradient(91deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .24) 1px, transparent 1px, transparent 7px);
      box-shadow: 0 18px 52px rgba(119, 74, 45, .14), 0 4px 13px rgba(119, 74, 45, .08), inset 0 0 0 5px rgba(255, 255, 255, .28);
      transform: translateY(25px) scale(.99);
      opacity: 0;
      transition: transform 750ms cubic-bezier(.2, .74, .28, 1), opacity 600ms ease;
    }

    .letter-paper::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(174, 135, 99, .13);
      border-radius: 4px;
      pointer-events: none;
    }

    .letter-paper::after {
      content: "";
      position: absolute;
      top: 0;
      left: 10%;
      width: 42%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(189, 144, 101, .28), transparent);
      pointer-events: none;
    }

    .letter-copy {
      position: relative;
      z-index: 1;
      font-size: clamp(16px, 1.8vw, 18px);
      line-height: 2.02;
      letter-spacing: .025em;
      word-break: break-word;
    }

    .letter-copy p { margin: 0 0 1.22em; }
    .letter-copy .salutation { margin-bottom: 1.15em; font-weight: 650; }

    .keepsake-figure {
      margin: 18px 0 0;
      padding: 9px;
      border: 1px solid rgba(164, 124, 88, .2);
      border-radius: 9px;
      background: rgba(255, 247, 234, .72);
      box-shadow: 0 7px 18px rgba(130, 81, 49, .08);
      transform-origin: top center;
      animation: picture-reveal 420ms ease both;
    }

    .keepsake-figure[hidden] { display: none; }

    .photo-preview-frame {
      width: min(100%, 720px);
      margin: 22px auto 0;
    }

    .photo-preview-surface {
      position: relative;
      width: 100%;
      aspect-ratio: 720 / 340;
      overflow: hidden;
      border-radius: 5px;
      background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 248, 232, .92), transparent 58%),
        linear-gradient(140deg, #f5dfc8, #efd0b6);
    }

    .photo-preview-image { display: block; width: 100%; height: 100%; object-fit: cover; }
    .photo-preview-image[hidden], .photo-placeholder-hint[hidden] { display: none; }

    .photo-placeholder-hint {
      position: absolute;
      inset: 0;
      display: grid;
      align-content: center;
      justify-items: center;
      color: #986f52;
      text-align: center;
    }

    .photo-placeholder-hint > span { color: #c57a50; font-size: 23px; line-height: 1.1; }
    .photo-placeholder-hint p { margin: 8px 0 0; color: #92735b; font-size: 13px; letter-spacing: .04em; }

    .reply-entry-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      min-height: 42px;
      margin: 13px auto 0;
      padding: 9px 19px;
      border: 1px solid rgba(174, 121, 82, .32);
      border-radius: 999px;
      color: #865b41;
      background: rgba(248, 233, 213, .72);
      font: inherit;
      font-size: 13px;
      letter-spacing: .035em;
      cursor: pointer;
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .reply-entry-button:hover { background: rgba(244, 222, 197, .9); transform: translateY(-1px); }
    .reply-entry-button:focus-visible { outline: 2px solid rgba(145, 77, 47, .72); outline-offset: 3px; }

    .reply-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 21px 0 0;
      padding: 8px 12px;
      border: 1px solid rgba(174, 121, 82, .24);
      border-radius: 999px;
      color: #865b41;
      background: rgba(248, 233, 213, .48);
      font: inherit;
      font-size: 13px;
      letter-spacing: .035em;
      cursor: pointer;
      transition: background-color 220ms ease, border-color 220ms ease;
    }

    .reply-toggle:hover { border-color: rgba(174, 121, 82, .46); background: rgba(244, 222, 197, .72); }
    .reply-toggle:focus-visible { outline: 2px solid rgba(145, 77, 47, .72); outline-offset: 3px; }
    .reply-toggle-mark { color: var(--orange); font-size: 15px; }

    .reply-board[hidden] { display: none; }

    .reply-board {
      position: relative;
      margin: 19px 2px 0;
      padding: 24px clamp(18px, 4.5vw, 36px) 26px;
      border: 1px solid rgba(190, 143, 77, .29);
      border-radius: 4px 5px 3px 6px;
      color: #654b37;
      background-color: #f9e8b9;
      background-image:
        radial-gradient(ellipse at 8% 2%, rgba(255, 255, 241, .55), transparent 52%),
        repeating-linear-gradient(0deg, rgba(144, 108, 56, .045) 0, rgba(144, 108, 56, .045) 1px, transparent 1px, transparent 5px);
      box-shadow: 2px 9px 20px rgba(129, 83, 42, .13), inset 0 0 0 4px rgba(255, 251, 228, .18);
      transform: rotate(-.45deg);
      transform-origin: center top;
      animation: picture-reveal 450ms ease both;
    }

    .reply-board::before {
      content: "";
      position: absolute;
      top: -9px;
      left: 50%;
      width: 64px;
      height: 18px;
      border: 1px solid rgba(198, 145, 100, .13);
      background: rgba(239, 200, 159, .66);
      box-shadow: 0 1px 2px rgba(123, 79, 49, .06);
      transform: translateX(-50%) rotate(-2deg);
    }

    .reply-board h2 { margin: 0 0 5px; font-size: 17px; font-weight: 650; letter-spacing: .05em; }
    .reply-board-intro { margin: 0 0 17px; color: #8d7053; font-size: 12px; line-height: 1.7; }

    .note-form { display: grid; gap: 12px; }
    .note-form label { display: grid; gap: 6px; color: #795b42; font-size: 12px; font-weight: 600; letter-spacing: .035em; }
    .note-form input, .note-form textarea {
      width: 100%;
      border: 1px solid rgba(160, 118, 75, .25);
      border-radius: 5px;
      padding: 10px 11px;
      color: #624936;
      background: rgba(255, 251, 236, .78);
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: normal;
      outline: none;
    }

    .note-form input:focus, .note-form textarea:focus { border-color: rgba(185, 112, 67, .68); box-shadow: 0 0 0 3px rgba(201, 120, 78, .12); }
    .note-form textarea { min-height: 86px; resize: vertical; line-height: 1.7; }

    .note-submit {
      justify-self: end;
      border: 1px solid rgba(152, 83, 50, .24);
      border-radius: 999px;
      padding: 9px 17px;
      color: #fff8ec;
      background: linear-gradient(145deg, #cc8057, #b86e4a);
      box-shadow: 0 3px 8px rgba(130, 77, 46, .14);
      font: inherit;
      font-size: 13px;
      cursor: pointer;
    }

    .note-submit:hover { background: linear-gradient(145deg, #d18a61, #bf7651); }
    .note-submit:focus-visible { outline: 2px solid #9d5839; outline-offset: 3px; }
    .note-submit:disabled { cursor: wait; opacity: .65; }

    .note-status { min-height: 1.6em; margin: 13px 0 0; color: #85684e; font-size: 12px; line-height: 1.6; }
    .note-list { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }

    .note-item {
      padding: 11px 13px;
      border: 1px solid rgba(165, 126, 75, .16);
      border-radius: 3px 5px 4px 3px;
      background: rgba(255, 250, 231, .63);
      box-shadow: 0 3px 8px rgba(120, 78, 40, .06);
    }

    .note-item:nth-child(odd) { transform: rotate(.25deg); }
    .note-item:nth-child(even) { transform: rotate(-.2deg); }
    .note-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; color: #8f684a; font-size: 11px; }
    .note-author { font-weight: 650; }
    .note-date { flex: 0 0 auto; color: #aa8c70; }
    .note-content { margin: 0; color: #634b37; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
    .note-empty { padding: 9px 2px 0; color: #95775e; font-size: 12px; text-align: center; }

    .envelope-wrap {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      width: min(430px, calc(100vw - 52px));
      aspect-ratio: 1.56;
      margin-top: 0;
      filter: drop-shadow(0 17px 19px rgba(118, 67, 39, .15));
      animation: envelope-arrive 1100ms cubic-bezier(.2, .72, .25, 1) both;
      transition: transform 750ms cubic-bezier(.2, .72, .25, 1), margin 800ms ease;
    }

    .envelope-button {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(111, 69, 43, .30);
      border-radius: 8px 9px 7px 8px;
      background-color: var(--kraft);
      background-image:
        radial-gradient(ellipse at 21% 18%, rgba(255, 239, 216, .28), transparent 43%),
        radial-gradient(ellipse at 82% 92%, rgba(119, 68, 42, .15), transparent 50%),
        repeating-linear-gradient(0deg, rgba(91, 59, 39, .075) 0, rgba(91, 59, 39, .075) 1px, transparent 1px, transparent 5px),
        repeating-linear-gradient(88deg, rgba(255, 239, 216, .14) 0, rgba(255, 239, 216, .14) 1px, transparent 1px, transparent 7px);
      box-shadow: inset 0 0 0 5px rgba(255, 241, 220, .19), inset 0 0 25px rgba(98, 57, 34, .13);
      cursor: pointer;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    .envelope-button:focus-visible {
      outline: 3px solid rgba(145, 77, 47, .76);
      outline-offset: 6px;
    }

    .envelope-button:disabled { cursor: default; }

    .envelope-button::before {
      content: "";
      position: absolute;
      z-index: 5;
      inset: 3px;
      border: 1px dashed rgba(104, 65, 43, .17);
      border-radius: 6px;
      pointer-events: none;
    }

    .envelope-pocket {
      position: absolute;
      z-index: 2;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(148deg, rgba(239, 200, 163, .98), #d5a078 52%, #c88f68);
      clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
      filter: drop-shadow(0 -1px 1px rgba(94, 54, 33, .2));
    }

    .envelope-pocket::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, transparent 48.5%, rgba(107, 67, 43, .18) 49%, transparent 49.5%), linear-gradient(35deg, transparent 48.5%, rgba(255, 235, 211, .24) 49%, transparent 49.5%);
      clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
    }

    .envelope-flap {
      position: absolute;
      z-index: 3;
      inset: 0 0 auto;
      height: 69%;
      background:
        linear-gradient(170deg, #e4b891 0%, var(--kraft-light) 54%, #d09a72 100%);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      transform-origin: 50% 0;
      transform-style: preserve-3d;
      transition: transform 780ms cubic-bezier(.34, .02, .25, 1), filter 780ms ease;
      filter: drop-shadow(0 3px 3px rgba(98, 58, 36, .16));
      backface-visibility: hidden;
    }

    .seal {
      position: absolute;
      z-index: 4;
      top: 43%;
      left: 50%;
      display: grid;
      width: 47px;
      aspect-ratio: 1;
      place-items: center;
      border: 1px solid rgba(255, 236, 215, .6);
      border-radius: 50%;
      color: #fff2e4;
      background: linear-gradient(145deg, #d18158, #bd6d4a);
      box-shadow: 0 3px 9px rgba(91, 49, 30, .24), inset 0 1px 3px rgba(255, 248, 229, .4);
      font-size: 17px;
      line-height: 1;
      transform: translate(-50%, -50%);
      transition: opacity 260ms ease, transform 350ms ease;
    }

    .open-hint {
      margin: 17px 0 0;
      color: rgba(111, 79, 58, .76);
      font-size: 13px;
      letter-spacing: .08em;
      transition: opacity 300ms ease;
    }

    .scene.is-open .letter-shell {
      grid-template-rows: 1fr;
      margin-bottom: 2px;
      opacity: 1;
    }

    .scene.is-open .letter-paper {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .scene.is-open .letter-copy > * {
      animation: copy-reveal 520ms ease both;
    }

    .scene.is-open .letter-copy > *:nth-child(1) { animation-delay: 150ms; }
    .scene.is-open .letter-copy > *:nth-child(2) { animation-delay: 205ms; }
    .scene.is-open .letter-copy > *:nth-child(3) { animation-delay: 260ms; }
    .scene.is-open .letter-copy > *:nth-child(4) { animation-delay: 315ms; }
    .scene.is-open .letter-copy > *:nth-child(5) { animation-delay: 370ms; }
    .scene.is-open .letter-copy > *:nth-child(6) { animation-delay: 425ms; }
    .scene.is-open .letter-copy > *:nth-child(7) { animation-delay: 480ms; }
    .scene.is-open .letter-copy > *:nth-child(8) { animation-delay: 535ms; }
    .scene.is-open .letter-copy > *:nth-child(9) { animation-delay: 590ms; }

    .scene.is-open .envelope-wrap {
      margin-top: 22px;
      transform: translateY(11px);
      animation: none;
    }

    .scene.is-open .envelope-flap {
      z-index: 1;
      transform: rotateX(180deg);
      filter: brightness(.96);
    }

    .scene.is-open .seal {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.8);
    }

    .scene.is-open .open-hint { opacity: 0; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @keyframes envelope-arrive {
      from { opacity: 0; transform: translateY(17px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes envelope-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -7px; }
    }

    @keyframes heartbeat {
      0%, 84%, 100% { transform: scale(1); }
      88% { transform: scale(1.13); }
      92% { transform: scale(1); }
      96% { transform: scale(1.08); }
    }

    @keyframes copy-reveal {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes picture-reveal {
      from { opacity: 0; transform: translateY(7px) scale(.99); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .showcase-view .scene { min-height: calc(100vh - 88px); min-height: calc(100svh - 88px); padding-top: 26px; }

    @media (max-width: 768px) {
      body::after { opacity: .1; animation-duration: 70s; }
      .app-shell { padding: 12px 14px calc(88px + env(safe-area-inset-bottom)); }
      .view-nav {
        position: fixed;
        right: 10px;
        bottom: max(9px, env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        justify-content: space-around;
        gap: 3px;
        margin: 0;
        padding: 5px;
        border-radius: 18px;
        background: rgba(255, 248, 236, .94);
        box-shadow: 0 6px 24px rgba(109, 67, 42, .18);

      }
      .view-tab { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 7px 3px; font-size: 12px; letter-spacing: .01em; }
      .form-field, .form-submit, .upload-button, .reply-entry-button { min-height: 48px; }
      .short-form .form-field { min-height: 48px; }
      .photo-lightbox { padding: 10px; }
      .photo-lightbox-dialog { width: 100%; padding: 7px; }
      .photo-lightbox-close { top: 10px; right: 10px; min-width: 48px; min-height: 48px; }
      .touch-toast { right: 12px; bottom: calc(94px + env(safe-area-inset-bottom)); left: 12px; justify-content: space-between; max-width: none; }
      .touch-toast button { min-width: 48px; min-height: 48px; }
      .showcase-view .scene { min-height: calc(100svh - 72px); padding: 23px 10px 34px; }
      .page-view { min-height: calc(100svh - 60px); padding: 22px 0 35px; }
      .compose-grid { grid-template-columns: 1fr; }
      .short-form { grid-template-columns: 1fr; }
      .short-form .form-submit { justify-self: end; }
      textarea.form-field { min-height: 260px; }
      .free-board { transform: rotate(-.25deg); }
      .sticky-open-button { top: 16px; right: 16px; }
      .sticky-dialog-inner { padding: 19px; }
      .sticker-row { gap: 16px; margin: 8px auto 17px; }
      .sticker-row svg { width: 17px; height: 17px; }
    }

    @media (max-width: 560px) {
      .scene { justify-content: center; padding: 24px 14px 32px; }
      .letter-shell { width: 100%; }
      .letter-paper { padding: 30px 23px 32px; border-radius: 8px; }
      .letter-paper::before { inset: 9px; }
      .letter-copy { font-size: 16px; line-height: 1.98; letter-spacing: .015em; }
      .letter-copy p { margin-bottom: 1.15em; }
      .envelope-wrap { width: min(390px, calc(100vw - 42px)); }
      .scene.is-open .envelope-wrap { margin-top: 16px; }
      .ornament-heart { top: 7%; right: 12%; }
      .ornament-star { top: 15%; left: 9%; }
      .ornament-line { right: 10%; bottom: 7%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

/* 原稿色值与贴纸不变；以下仅扩展布局、纸张层次与交互。 */
[hidden] { display: none !important; }
a { color: inherit; }
.view-nav { width: max-content; max-width: 100%; margin-bottom: 18px; }
a.view-tab { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.view-tab[aria-current="page"] { color: #70472f; background: #fff9ef; box-shadow: 0 2px 8px rgba(126,78,45,.11), inset 0 0 0 1px rgba(176,128,87,.15); }
.scene { min-height: calc(100svh - 108px); padding-top: 24px; }
.text-link { display: inline-block; border: 0; padding: 6px 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; text-decoration: underline; text-decoration-color: rgba(174,121,82,.35); text-underline-offset: 5px; cursor: pointer; }
.text-link:hover { color: var(--orange); }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #a96743; outline-offset: 4px; }
.saved-card { position: sticky; top: 22px; }
.saved-card > .text-link { margin: -8px 0 16px; }
.saved-list { margin-top: 12px; }
.recent-link { display: block; padding: 6px 0; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere; }
.saved-item { border-radius: 8px; }
.saved-item .record-date { margin: 4px 0 0; }
.form-stack { position: relative; }
.form-field { transition: border-color 180ms ease, box-shadow 180ms ease; }
.form-field:disabled { opacity: .65; }
.character-count { margin: -6px 0 0; text-align: right; color: var(--ink-soft); font-size: 11px; font-weight: 400; }
.free-board { width: 100%; min-height: 300px; padding: clamp(24px,4vw,40px); transform: none; }
.free-board > p { margin-bottom: 18px; }
#stickyList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 22px; padding-top: 8px; align-items: start; }
.sticky-note { position: relative; min-height: 170px; padding: 26px 21px 25px; border-radius: 2px 3px 18px 3px; background: rgba(255,250,231,.85); box-shadow: 2px 5px 0 rgba(138,91,51,.06),0 12px 24px rgba(129,83,42,.10); transform: rotate(-1deg); transition: transform 250ms ease, box-shadow 250ms ease; overflow-wrap: anywhere; }
.sticky-note:nth-child(3n + 2) { transform: rotate(1deg); background: #faedca; }
.sticky-note:nth-child(3n) { transform: rotate(-.4deg); background: #f7ebc8; }
.sticky-note::before { content: ""; position: absolute; top: -8px; left: calc(50% - 27px); width: 54px; height: 18px; border: 1px solid rgba(198,145,100,.13); background: rgba(239,200,159,.66); transform: rotate(-4deg); }
.sticky-note .record-meta { flex-wrap: wrap; gap: 7px; margin-bottom: 15px; padding-bottom: 9px; border-bottom: 1px dashed rgba(165,126,75,.22); }
.sticky-note .record-content { font-size: 15px; line-height: 1.95; }
.note-corner { position: absolute; bottom: 0; right: 0; width: 21px; height: 21px; border-radius: 3px 0 15px 0; background: linear-gradient(135deg,rgba(174,121,82,.14),rgba(255,250,231,.92) 52%); pointer-events: none; }
.sticky-note.is-new { animation: note-land 620ms cubic-bezier(.2,.75,.3,1) var(--delay,0ms) both; }
.sticky-dialog[open] { animation: dialog-unfold 280ms cubic-bezier(.2,.8,.3,1); }
.sticky-dialog[open]::backdrop { animation: backdrop-in 220ms ease; }
.sticker-row svg { transform-origin: center; animation: sticker-sway 1200ms ease-in-out 1; }
.sticker-row svg:nth-child(even) { animation-delay: -3s; animation-direction: reverse; }
.sticky-open-button { animation: invite-breathe 1400ms ease-in-out 2; }
.sticky-open-button:hover { animation-play-state: paused; transform: rotate(90deg); }
.library-page { width: min(100%,1060px); }
.library-tools { display: grid; grid-template-columns: 1fr minmax(150px,220px); gap: 18px; margin: 26px 0 15px; }
.letter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 14px 0 0; margin: 0; list-style: none; }
.letter-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 260px; padding: 25px 22px 20px; border: 1px solid var(--paper-edge); border-radius: 8px 10px 8px 9px; background: var(--ivory); box-shadow: 0 7px 22px var(--warm-shadow); animation: page-rise 480ms ease var(--delay,0ms) both; transition: transform 230ms ease,box-shadow 230ms ease; }
.letter-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(174,135,99,.13); border-radius: 4px; pointer-events: none; }
.letter-card-top { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: 11px; letter-spacing: .08em; }
.letter-mark { color: var(--orange); font-size: 22px; }
.letter-card h2 { margin: 19px 0 12px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.letter-title-link { text-decoration: none; }
.letter-title-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.letter-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 22px; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.letter-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(165,126,75,.16); }
.letter-card-footer a { position: relative; z-index: 1; }
.library-empty { grid-column: 1/-1; padding: 45px 15px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin: 30px 0 12px; }
.pagination:empty { display: none; }
.page-button { min-height: 44px; padding: 8px 17px; border: 1px solid rgba(174,121,82,.3); border-radius: 999px; background: var(--ivory); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; transition: transform 180ms ease; }
.page-button:hover:not(:disabled) { transform: translateY(-2px); }
.page-button:disabled { opacity: .45; cursor: default; }
.page-position { font-size: 12px; color: var(--ink-soft); }
.reader-paper { max-width: 780px; margin: 25px auto 0; opacity: 1; transform: none; animation: page-rise 550ms ease both; }
.reader-heading { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(165,126,75,.2); }
.reader-heading h1 { font-size: clamp(23px,4vw,32px); line-height: 1.6; overflow-wrap: anywhere; }
.reader-heading .record-meta { margin: 12px 0 0; }
.reader-content, .original-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-paper .reply-entry-button { text-decoration: none; }
.image-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.reader-lightbox { max-width: min(96vw,1100px); max-height: 94svh; padding: 10px; border: 1px solid var(--paper-edge); border-radius: 12px; background: var(--ivory); }
.reader-lightbox::backdrop { background: rgba(72,49,36,.74); }
.reader-lightbox img { display: block; max-width: 100%; max-height: 85svh; object-fit: contain; }
.reader-lightbox .sticky-dialog-close { position: absolute; top: 18px; right: 18px; }
.celebration-heart { position: fixed; z-index: 100; pointer-events: none; color: var(--orange); font-size: 18px; animation: heart-fly 1000ms ease-out both; }
@keyframes note-land { from { opacity: 0; translate: 0 20px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes page-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes dialog-unfold { from { opacity: 0; transform: translateY(16px) rotate(-1deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sticker-sway { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes invite-breathe { 0%,80%,100% { box-shadow: 0 4px 12px rgba(126,78,45,.1); } 90% { box-shadow: 0 4px 12px rgba(126,78,45,.1),0 0 0 7px rgba(201,120,78,.08); } }
@keyframes heart-fly { from { opacity: .9; transform: translate(-50%,-50%) scale(.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)),-100px) rotate(var(--turn)) scale(1.1); } }
@media (hover:hover) and (pointer:fine) {
  .sticky-note:hover { z-index: 2; transform: translateY(-5px) rotate(0deg); box-shadow: 2px 9px 0 rgba(138,91,51,.06),0 18px 30px rgba(129,83,42,.15); }
  .letter-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 13px 30px var(--warm-shadow); }
}
@media (max-width:960px) { .letter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) {
  .app-shell { padding: 14px 13px calc(88px + env(safe-area-inset-bottom)); }
  .view-nav { gap: 1px; padding: 4px; width: auto; max-width: calc(100% - 20px); margin: 0; }
  .view-tab { min-width: 0; min-height: 44px; flex: 1 1 auto; padding: 7px 6px; font-size: 12px; letter-spacing: 0; }
  .view-tab:first-child { font-size: 11px; }
  .page-view { padding: 26px 2px 36px; }
  .saved-card { position: static; }
  .free-board { padding: 26px 17px; }
  #stickyList { grid-template-columns: 1fr; gap: 27px; padding: 10px 3px; }
  .sticky-note { min-height: 150px; padding: 25px 20px; }
  .library-tools { grid-template-columns: 1fr; gap: 12px; }
  .letter-grid { grid-template-columns: 1fr; gap: 20px; }
  .letter-card { min-height: 240px; padding: 24px 23px; }
  .reader-paper { padding: 32px 24px; }
  .reader-heading h1 { font-size: 25px; }
  .photo-lightbox-dialog { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.letter-card-footer .record-date { font-size: 11px; line-height: 1.7; }

/* 有限书架：每次六封/六张，月份归档。 */
.library-tools { grid-template-columns: minmax(0,1fr) minmax(135px,180px) minmax(135px,180px); }
.board-tools { display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,210px);gap:16px;margin:28px 0 12px; }
.note-excerpt { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden; }
.note-read { background:none;border:0;padding:12px 0 0;cursor:pointer;font:inherit; }
.note-reader { max-height:85dvh;overflow:auto; }
.note-reader .record-content { white-space:pre-wrap;overflow-wrap:anywhere; }
.note-reader:not([open]) { display:none; }
@media(max-width:700px){.library-tools,.board-tools{grid-template-columns:1fr;gap:12px}.board-tools{margin-top:24px}.free-board{overflow:visible}}