:root {
  --sky-top: #f2f8fd;
  --sky-mid: #eaf6ff;
  --sky-bottom: #cbe6f6;
  --paper: #efefeb;
  --paper-ink: #34322f;
  --envelope: #d9c5a4;
  --envelope-deep: #c8ad85;
  --ui: #161b25;
  --shadow: 0 14px 34px rgba(77, 98, 117, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ui);
  background: #ddecf6;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.view {
  min-height: 100svh;
  position: relative;
  background:
    radial-gradient(78% 74% at 7% 11%, rgba(255, 250, 215, .90) 0%, rgba(255, 249, 208, .47) 28%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-bottom) 100%);
}
.view::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .065;
  background-image: url("assets/paper-noise.png");
  mix-blend-mode: multiply;
  z-index: 2;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 94px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 34px 15px;
  background: linear-gradient(180deg, rgba(247,251,254,.95), rgba(247,251,254,.54) 80%, rgba(247,251,254,0));
  backdrop-filter: blur(5px);
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #0d1014;
  text-decoration: none;
  font-family: "Bradley Hand", "Comic Sans MS", "Segoe Print", cursive;
  font-weight: 700;
  font-size: clamp(21px, 1.45vw, 29px);
  letter-spacing: -.8px;
}
.brand-flower { width: 29px; height: 36px; flex: 0 0 auto; }
.center-pill {
  justify-self: center;
  min-width: 250px;
  max-width: min(44vw, 430px);
  height: 54px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 6px 18px rgba(34,45,55,.08), inset 0 1px 0 rgba(255,255,255,.90);
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.globe { font-size: 18px; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 13px; }
.icon-btn, .theme-toggle { border: 0; background: transparent; cursor: pointer; }
.icon-btn.more { width: 47px; height: 47px; border-radius: 50%; font-size: 24px; letter-spacing: 2px; }
.theme-toggle {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 5px 16px rgba(30,40,50,.12), inset 0 0 0 1px rgba(40,50,60,.08);
}
.theme-toggle span {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 23px; transition: .25s ease;
}
.theme-toggle .sun { background: white; box-shadow: 0 2px 8px rgba(0,0,0,.09); }
.theme-toggle .moon { opacity: .55; font-size: 19px; }

/* ---------- garden ---------- */
.garden-shell {
  width: min(100%, 2048px);
  margin: 0 auto;
  padding: 58px 28px 170px;
  position: relative;
  z-index: 4;
}
.letter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  column-gap: clamp(30px, 4.1vw, 92px);
  row-gap: 86px;
  align-items: start;
}
.letter-card {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  min-height: 468px;
  cursor: pointer;
  perspective: 1100px;
  position: relative;
  outline: none;
  --stage-rx: 0deg;
  --stage-ry: 0deg;
  --stage-rz: 0deg;
  --flower-x: 0px;
  --flower-y: 0px;
  --flower-r: 0deg;
  --paper-x: 0px;
  --paper-y: 0px;
  --paper-r: 0deg;
  --env-x: 0px;
  --env-y: 0px;
  --env-r: 0deg;
}
.letter-card:focus-visible .card-stage { outline: 3px solid rgba(58,126,180,.32); outline-offset: 10px; border-radius: 18px; }
.card-stage {
  width: min(100%, 372px);
  height: 468px;
  margin: 0 auto;
  position: relative;
  transform-style: flat;
  transform: rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) rotateZ(var(--stage-rz));
  transition: transform .22s cubic-bezier(.2,.7,.25,1);
}

/* Flower remains behind the paper/envelope; the nested element handles idle sway. */
.flower-tilt {
  position: absolute;
  width: 125%;
  left: -12.5%;
  top: -48px;
  z-index: 1;
  transform-origin: 50% 88%;
  transform: translate(var(--flower-x), var(--flower-y)) rotate(var(--flower-r));
  pointer-events: none;
  will-change: transform;
}
.flower-sway {
  transform-origin: 50% 91%;
  animation: flowerSway 5.4s ease-in-out infinite alternate;
  will-change: transform;
}
.flower-sway img {
  width: 100%;
  display: block;
  user-select: none;
  filter: drop-shadow(0 4px 3px rgba(86,90,61,.025));
}
@keyframes flowerSway {
  0%   { transform: rotate(-1.15deg) translate3d(-1px, 1px, 0); }
  45%  { transform: rotate(.15deg) translate3d(1px, -2px, 0); }
  100% { transform: rotate(1.30deg) translate3d(2px, -4px, 0); }
}

.envelope {
  position: absolute;
  left: 6.2%;
  right: 6.2%;
  top: 157px;
  height: 290px;
  z-index: 5;
  transform: translate(var(--env-x), var(--env-y)) rotate(var(--env-r));
  transition: filter .25s ease;
  will-change: transform;
}
.envelope-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 1px;
  background:
    linear-gradient(100deg, rgba(226,207,176,.90), rgba(214,191,155,.97)),
    url("assets/kraft-noise.png");
  background-blend-mode: multiply, normal;
  box-shadow: 0 8px 18px rgba(89,84,74,.055);
  overflow: hidden;
}
.envelope-back::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0; height:62%;
  background: linear-gradient(180deg, rgba(242,225,198,.82), rgba(221,198,163,.67));
  clip-path: polygon(0 0,100% 0,50% 84%);
  opacity: .75;
}
.paper {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -70px;
  height: 240px;
  z-index: 3;
  padding: 28px 26px 50px;
  overflow: hidden;
  color: var(--paper-ink);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  background:
    linear-gradient(rgba(245,245,241,.96), rgba(237,237,232,.98)),
    url("assets/paper-noise.png");
  background-blend-mode: normal, multiply;
  box-shadow: 0 5px 16px rgba(60,60,54,.085), inset 0 0 0 1px rgba(80,80,70,.025);
  transform: translate(var(--paper-x), var(--paper-y)) rotate(var(--paper-r));
  transition: top .34s cubic-bezier(.2,.82,.18,1), box-shadow .34s ease;
  will-change: transform, top;
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper {
  top: -88px;
  box-shadow: 0 14px 28px rgba(60,60,54,.11), inset 0 0 0 1px rgba(80,80,70,.02);
}
.envelope-front {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  clip-path: polygon(0 0, 50% 36%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(100deg, rgba(221,199,164,.99), rgba(207,179,137,.99)),
    url("assets/kraft-noise.png");
  background-blend-mode: multiply, normal;
}
.envelope-front::before,
.envelope-front::after {
  content:"";
  position:absolute;
  top:0;
  width:54%;
  height:61%;
  z-index:2;
}
.envelope-front::before {
  left:0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background:
    linear-gradient(135deg, rgba(230,212,182,.98), rgba(204,177,137,.98)),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
}
.envelope-front::after {
  right:0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(225deg, rgba(229,211,181,.98), rgba(201,173,132,.98)),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
}
.envelope-front .front-bottom {
  position:absolute;
  inset:0;
}

.preview-message {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", "Segoe Print", cursive;
  font-size: clamp(16px, 1.02vw, 21px);
  line-height: 1.28;
  letter-spacing: .18px;
  transform: rotate(-.25deg);
}
.preview-author {
  margin-top: 8px;
  text-align: right;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 17px;
  opacity: .73;
}
.recipient {
  position: absolute;
  left: 34px;
  bottom: 20px;
  z-index: 9;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 17px;
  color: rgba(74,64,54,.70);
  transform: rotate(-2deg);
  pointer-events: none;
}
.letter-card.is-pressing .paper { top: -92px; }
.letter-card.is-pressing .card-stage { transform: scale(.985) rotateX(var(--stage-rx)) rotateY(var(--stage-ry)); }

.search-dock {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 40px));
  height: 68px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.84);
  background: rgba(237, 223, 201, .78);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(76,90,99,.13), inset 0 1px 0 rgba(255,255,255,.55);
}
.search-icon { font-size: 26px; opacity: .55; }
.search-dock input { width:100%; border:0; outline:0; background:transparent; font-size:19px; color:#5d6267; }
.search-dock input::placeholder { color:#8d9298; }
.empty-state { grid-column:1/-1; text-align:center; padding:80px 20px; font-size:20px; opacity:.65; }

/* ---------- detail page ---------- */
.detail-view {
  overflow: hidden;
  min-height: 100svh;
}
.back-button {
  position: fixed;
  left: 34px;
  top: 22px;
  z-index: 50;
  border: 0;
  background: transparent;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  padding: 12px 14px;
}
.detail-stage-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 10;
  padding: 105px 24px 50px;
}
.detail-stage {
  width: min(560px, 78vw);
  height: min(720px, 76vh);
  min-height: 570px;
  position: relative;
  perspective: 1200px;
  outline: none;
  cursor: pointer;
  --detail-rx: 0deg;
  --detail-ry: 0deg;
  --detail-rz: 0deg;
  --dfx: 0px;
  --dfy: 0px;
  --dfr: 0deg;
  --dpx: 0px;
  --dpy: 0px;
  --dpr: 0deg;
  --dex: 0px;
  --dey: 0px;
  --der: 0deg;
  transform: rotateX(var(--detail-rx)) rotateY(var(--detail-ry)) rotateZ(var(--detail-rz));
  transform-style: flat;
  will-change: transform;
}
.detail-stage:focus-visible { outline: 3px solid rgba(58,126,180,.32); outline-offset: 12px; border-radius: 24px; }
.detail-flower-tilt {
  position: absolute;
  z-index: 1;
  width: 112%;
  left: -6%;
  top: -78px;
  pointer-events: none;
  transform-origin: 50% 89%;
  transform: translate(var(--dfx), var(--dfy)) rotate(var(--dfr));
  will-change: transform;
}
.detail-flower-sway {
  animation: detailFlowerSway 5.8s ease-in-out infinite alternate;
  transform-origin: 50% 88%;
  will-change: transform;
}
.detail-flower-sway img { width:100%; display:block; }
@keyframes detailFlowerSway {
  0%   { transform: rotate(-1.20deg) translate3d(-1px,1px,0); }
  50%  { transform: rotate(.12deg) translate3d(1px,-3px,0); }
  100% { transform: rotate(1.35deg) translate3d(2px,-5px,0); }
}
.detail-envelope-shell {
  position: absolute;
  z-index: 5;
  left: 9%;
  right: 9%;
  top: 238px;
  height: 350px;
  transform: translate(var(--dex), var(--dey)) rotate(var(--der));
  transition: top .48s cubic-bezier(.2,.75,.2,1), transform .1s linear;
  will-change: transform, top;
}
.detail-envelope-back {
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(100deg, rgba(225,205,174,.97), rgba(211,186,149,.98)),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
  box-shadow: 0 18px 34px rgba(95,90,78,.055);
  overflow:hidden;
}
.detail-envelope-back::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0; height:62%;
  background: linear-gradient(180deg, rgba(242,225,198,.86), rgba(217,193,156,.70));
  clip-path: polygon(0 0,100% 0,50% 84%);
}
.detail-paper {
  position:absolute;
  z-index:3;
  left:8%; right:8%;
  top:-148px;
  height:330px;
  padding: 43px 40px 70px;
  clip-path: polygon(0 0,100% 0,100% 69%,50% 100%,0 69%);
  background:
    linear-gradient(rgba(246,246,242,.995), rgba(237,237,232,.995)),
    url("assets/paper-noise.png");
  background-blend-mode:normal,multiply;
  box-shadow: 0 12px 25px rgba(68,67,58,.085), inset 0 0 0 1px rgba(70,70,60,.025);
  transform: translate(var(--dpx), var(--dpy)) rotate(var(--dpr));
  transform-origin: 50% 90%;
  transition:
    top .52s cubic-bezier(.2,.78,.18,1),
    left .52s cubic-bezier(.2,.78,.18,1),
    right .52s cubic-bezier(.2,.78,.18,1),
    height .52s cubic-bezier(.2,.78,.18,1),
    padding .52s cubic-bezier(.2,.78,.18,1),
    clip-path .42s ease,
    box-shadow .52s ease,
    border-radius .42s ease;
  overflow: hidden;
  will-change: transform, top, height;
}
.detail-paper-inner { min-height:100%; }
.detail-message {
  max-height: 205px;
  overflow: hidden;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", "Segoe Print", cursive;
  font-size: var(--detail-font, 23px);
  line-height: 1.38;
  letter-spacing: .22px;
  color: #34322f;
  text-align: left;
  white-space: pre-wrap;
}
.detail-author {
  margin-top: 10px;
  text-align: right;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 21px;
  color: rgba(55,52,48,.70);
}
.detail-envelope-front {
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
  clip-path: polygon(0 0, 50% 36%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(100deg, rgba(221,199,164,.99), rgba(205,176,133,.99)),
    url("assets/kraft-noise.png");
  background-blend-mode: multiply, normal;
}
.detail-envelope-front::before,
.detail-envelope-front::after {
  content:"";
  position:absolute;
  top:0;
  width:54%; height:62%;
  z-index:2;
}
.detail-envelope-front::before {
  left:0;
  clip-path:polygon(0 0,100% 100%,0 100%);
  background:
    linear-gradient(135deg,#e2cfb1,#cdb28a),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
}
.detail-envelope-front::after {
  right:0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:
    linear-gradient(225deg,#dfccae,#c7aa81),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
}
.detail-recipient {
  position:absolute;
  z-index:7;
  left: 46px;
  bottom: 34px;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 20px;
  color: rgba(74,63,51,.63);
  transform: rotate(-2deg);
}

/* hover on detail: paper rises a little. Flower never crosses the paper because no z-axis transforms are used. */
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper {
  top: -166px;
  box-shadow: 0 18px 32px rgba(68,67,58,.105), inset 0 0 0 1px rgba(70,70,60,.02);
}

/* Second click: pull the full rectangular sheet completely out of the envelope. */
.detail-stage.is-open { cursor: zoom-out; }
.detail-stage.is-open .detail-envelope-shell {
  top: 310px;
}
.detail-stage.is-open .detail-paper {
  z-index: 12;
  left: -5%;
  right: -5%;
  top: -280px;
  height: min(70svh, 670px);
  min-height: 480px;
  padding: 52px 52px 58px;
  clip-path: inset(0 round 2px);
  border-radius: 2px;
  overflow: auto;
  scrollbar-width: thin;
  box-shadow: 0 24px 52px rgba(63,67,65,.16), inset 0 0 0 1px rgba(70,70,60,.025);
}
.detail-stage.is-open .detail-message {
  max-height: none;
  overflow: visible;
  font-size: var(--detail-open-font, 23px);
  line-height: 1.5;
}
.detail-stage.is-open .detail-author { margin-top: 26px; }
.detail-stage.is-open .detail-flower-tilt { opacity:.92; }

.detail-decoration {
  position: fixed;
  z-index: 4;
  bottom: -46px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: foregroundSway 7.0s ease-in-out infinite alternate;
  will-change: transform;
}
.detail-decoration img { display:block; width:100%; }
.detail-decoration-left { left:-3vw; width:min(47vw,820px); }
.detail-decoration-right { right:-2vw; width:min(42vw,720px); animation-delay:-2.6s; }
@keyframes foregroundSway {
  0%   { transform: rotate(-.72deg) translate3d(-2px,0,0); }
  50%  { transform: rotate(.06deg) translate3d(1px,-2px,0); }
  100% { transform: rotate(.78deg) translate3d(3px,3px,0); }
}

/* page transition */
.detail-view:not([hidden]) .detail-stage { animation: detailEnter .52s cubic-bezier(.2,.75,.2,1) both; }
.detail-view:not([hidden]) .detail-decoration-left { animation-name: foregroundSway, leftEnter; animation-duration:7s,.7s; animation-iteration-count:infinite,1; }
.detail-view:not([hidden]) .detail-decoration-right { animation-name: foregroundSway, rightEnter; animation-duration:7s,.7s; animation-iteration-count:infinite,1; }
@keyframes detailEnter { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes leftEnter { from { opacity:0; translate:-28px 12px; } to { opacity:1; translate:0 0; } }
@keyframes rightEnter { from { opacity:0; translate:28px 12px; } to { opacity:1; translate:0 0; } }

body.dark {
  --sky-top:#263444;
  --sky-mid:#1d3140;
  --sky-bottom:#152a35;
  --ui:#edf3f7;
}
body.dark .view {
  background:
    radial-gradient(70% 70% at 8% 10%, rgba(84,76,45,.40), transparent 55%),
    linear-gradient(180deg,var(--sky-top),var(--sky-mid) 58%,var(--sky-bottom));
}
body.dark .topbar { background:linear-gradient(180deg,rgba(29,41,52,.94),rgba(29,41,52,.18),transparent); }
body.dark .brand { color:#f7f4e9; }
body.dark .center-pill, body.dark .theme-toggle { background:rgba(16,26,34,.58); color:#edf3f7; }
body.dark .theme-toggle .sun { background:transparent; box-shadow:none; opacity:.5; }
body.dark .theme-toggle .moon { background:rgba(255,255,255,.16); opacity:1; }
body.dark .back-button { color:#f0f4f6; }

@media (max-width:1250px) {
  .letter-grid { grid-template-columns:repeat(3,minmax(230px,1fr)); column-gap:34px; }
}
@media (max-width:900px) {
  .topbar { grid-template-columns:1fr auto; height:88px; padding:16px 20px; }
  .center-pill { display:none; }
  .top-actions { grid-column:2; }
  .garden-shell { padding:38px 18px 140px; }
  .letter-grid { grid-template-columns:repeat(2,minmax(210px,1fr)); row-gap:48px; column-gap:14px; }
  .letter-card { min-height:420px; }
  .card-stage { height:420px; transform:scale(.93) rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) rotateZ(var(--stage-rz)); }
  .detail-decoration-left { width:62vw; left:-23vw; }
  .detail-decoration-right { width:55vw; right:-20vw; }
  .back-button { left:18px; top:18px; }
  .detail-stage { width:min(540px,84vw); }
}
@media (max-width:600px) {
  .brand { font-size:22px; }
  .top-actions .more { display:none; }
  .theme-toggle { height:44px; }
  .theme-toggle span { width:35px; height:35px; font-size:20px; }
  .letter-grid { grid-template-columns:1fr; }
  .letter-card { min-height:430px; }
  .card-stage { width:min(340px,92vw); transform:rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) rotateZ(var(--stage-rz)); }
  .search-dock { height:60px; }
  .detail-stage-wrap { padding:82px 12px 28px; }
  .detail-stage { width:min(500px,94vw); height:650px; min-height:560px; }
  .detail-envelope-shell { left:6%; right:6%; top:226px; height:340px; }
  .detail-paper { top:-138px; padding:36px 29px 62px; }
  .detail-message { max-height:205px; }
  .detail-recipient { left:36px; bottom:31px; font-size:18px; }
  .detail-flower-tilt { width:124%; left:-12%; top:-62px; }
  .detail-decoration-left { width:76vw; left:-36vw; opacity:.94; }
  .detail-decoration-right { width:70vw; right:-36vw; opacity:.94; }
  .back-button span { display:none; }
  .detail-stage.is-open .detail-envelope-shell { top:330px; }
  .detail-stage.is-open .detail-paper {
    left:-1%; right:-1%; top:-292px;
    height:min(72svh,620px); min-height:440px;
    padding:42px 32px 50px;
  }
}

@media (hover:none), (pointer:coarse) {
  .letter-card .paper { transition:top .24s ease, box-shadow .24s ease; }
  .letter-card:active .paper { top:-88px; }
  .detail-stage { transform:none !important; }
  .detail-stage:active:not(.is-open) .detail-paper { top:-160px; }
}

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

/* ==========================================================
   v4 refinements — compact envelopes + simplified Chinese UI
   ========================================================== */

/* Header: only keep the centered Teacher's Day title. */
.topbar {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 12px;
}
.brand,
.top-actions { display: none !important; }
.center-pill {
  display: flex !important;
  min-width: 286px;
  max-width: min(70vw, 430px);
  height: 52px;
  padding: 0 28px;
}

/* Crop the original flower image before the source screenshot's letter begins.
   This keeps only the watercolor flowers/stems and removes the stray paper/envelope residue. */
.flower-tilt,
.detail-flower-tilt {
  overflow: hidden;
  aspect-ratio: 500 / 270;
}
.flower-sway img,
.detail-flower-sway img {
  width: 100%;
  height: auto;
  display: block;
}

/* Garden cards: make the envelope broader and noticeably less tall. */
.letter-card { min-height: 405px; }
.card-stage {
  height: 405px;
  width: min(100%, 372px);
}
.flower-tilt {
  width: 124%;
  left: -12%;
  top: -16px;
  z-index: 1;
}
.envelope {
  left: 5.6%;
  right: 5.6%;
  top: 156px;
  height: 238px;
}
.paper {
  left: 8.5%;
  right: 8.5%;
  top: -62px;
  height: 218px;
  padding: 25px 25px 46px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper { top: -78px; }
.letter-card.is-pressing .paper { top: -83px; }
.envelope-front {
  clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 0 100%);
}
.envelope-front::before,
.envelope-front::after { height: 64%; }
.recipient {
  left: 31px;
  bottom: 17px;
  font-size: 16px;
}
.garden-shell { padding-top: 47px; }
.letter-grid { row-gap: 68px; }

/* Detail page: shorter envelope, slightly roomier proportions. */
.back-button {
  left: 34px;
  top: 22px;
  font-size: 18px;
  padding: 11px 10px;
}
.detail-stage {
  width: min(570px, 79vw);
  height: min(675px, 74vh);
  min-height: 555px;
}
.detail-flower-tilt {
  width: 112%;
  left: -6%;
  top: -38px;
  z-index: 1;
}
.detail-envelope-shell {
  left: 8%;
  right: 8%;
  top: 250px;
  height: 270px;
}
.detail-paper {
  left: 8.5%;
  right: 8.5%;
  top: -132px;
  height: 292px;
  padding: 38px 38px 64px;
  clip-path: polygon(0 0,100% 0,100% 71%,50% 100%,0 71%);
}
.detail-message { max-height: 187px; }
.detail-envelope-front {
  clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 0 100%);
}
.detail-envelope-front::before,
.detail-envelope-front::after { height: 65%; }
.detail-recipient {
  left: 42px;
  bottom: 24px;
  font-size: 19px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper { top: -149px; }

/* Opened sheet still clears the now-shorter envelope. */
.detail-stage.is-open .detail-envelope-shell { top: 336px; }
.detail-stage.is-open .detail-paper {
  top: -314px;
  left: -5%;
  right: -5%;
  height: min(70svh, 660px);
  min-height: 470px;
}

@media (max-width: 900px) {
  .topbar { height: 82px; padding: 14px 18px 10px; }
  .center-pill { display:flex !important; min-width: 260px; max-width: 74vw; }
  .letter-card { min-height: 390px; }
  .card-stage { height: 390px; transform:scale(.93) rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) rotateZ(var(--stage-rz)); }
  .garden-shell { padding-top: 34px; }
  .detail-stage { width:min(550px,86vw); }
}

@media (max-width: 600px) {
  .topbar { height: 76px; padding: 12px 12px 8px; }
  .center-pill {
    min-width: 0;
    width: min(82vw, 330px);
    height: 48px;
    font-size: 16px;
    padding: 0 18px;
  }
  .letter-card { min-height: 392px; }
  .card-stage { height: 392px; width:min(340px,92vw); transform:rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) rotateZ(var(--stage-rz)); }
  .envelope { top: 151px; height: 228px; }
  .flower-tilt { top: -12px; }
  .detail-stage-wrap { padding-top: 74px; }
  .detail-stage { width:min(500px,94vw); height:610px; min-height:525px; }
  .detail-envelope-shell { left:6%; right:6%; top:232px; height:255px; }
  .detail-paper { top:-123px; height:278px; padding:34px 28px 58px; }
  .detail-message { max-height:178px; }
  .detail-recipient { left:34px; bottom:22px; font-size:18px; }
  .detail-flower-tilt { width:122%; left:-11%; top:-31px; }
  .detail-stage:not(.is-open):hover .detail-paper,
  .detail-stage:not(.is-open):focus-visible .detail-paper { top:-137px; }
  .detail-stage.is-open .detail-envelope-shell { top:315px; }
  .detail-stage.is-open .detail-paper {
    left:-1%; right:-1%; top:-286px;
    height:min(72svh,610px); min-height:430px;
    padding:42px 32px 50px;
  }
}

@media (hover:none), (pointer:coarse) {
  .letter-card:active .paper { top:-78px; }
  .detail-stage:active:not(.is-open) .detail-paper { top:-143px; }
}

/* ===== v5 refinements: wider envelopes + clean floral crop ===== */
/* The source floral cluster contains a piece of the original reference card at its bottom.
   Crop that region completely and rebuild the lower botanical continuation with leaves. */
.flower-tilt {
  height: 325px;
  overflow: hidden;
}
.flower-sway img {
  min-height: 0;
}
.leaf-fill,
.detail-leaf-fill {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.leaf-fill {
  left: 11%; right: 11%; top: 195px; height: 175px;
}
.leaf-fill i,
.detail-leaf-fill i {
  position: absolute;
  display: block;
  width: 24px;
  height: 150px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(90deg, rgba(102,171,83,.96), rgba(146,197,105,.95) 55%, rgba(76,146,69,.95));
  box-shadow: inset 2px 0 0 rgba(255,255,255,.18);
  opacity: .9;
}
.leaf-fill i:nth-child(1) { left: 20%; top: 0; transform: rotate(-24deg) scale(.88); }
.leaf-fill i:nth-child(2) { left: 50%; top: 8px; transform: translateX(-50%) rotate(7deg) scale(.82); }
.leaf-fill i:nth-child(3) { right: 18%; top: 2px; transform: rotate(24deg) scale(.92); }

/* Home gallery: make the envelope distinctly wider and lower, matching the detail-page proportions. */
.letter-card { min-height: 400px; }
.card-stage { width: min(100%, 410px); height: 400px; }
.envelope {
  left: 3.5%;
  right: 3.5%;
  top: 150px;
  height: 220px;
}
.paper {
  left: 8%;
  right: 8%;
  top: -68px;
  height: 205px;
  padding: 24px 24px 46px;
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper { top: -84px; }
.letter-card.is-pressing .paper { top: -88px; }
.envelope-back::before { height: 72%; }
.envelope-front { clip-path: polygon(0 0, 50% 43%, 100% 0, 100% 100%, 0 100%); }
.recipient { bottom: 15px; }

/* Detail page: crop the unwanted source-card fragment before it can appear below the envelope. */
.detail-flower-tilt {
  height: 355px;
  overflow: hidden;
}
.detail-leaf-fill {
  left: 12%; right: 12%; top: 205px; height: 250px;
  transform: translate(var(--dfx), var(--dfy)) rotate(var(--dfr));
  animation: detailLeafSway 6.2s ease-in-out infinite alternate;
}
.detail-leaf-fill i:nth-child(1) { left: 13%; top: 6px; transform: rotate(-28deg) scale(1.05); }
.detail-leaf-fill i:nth-child(2) { left: 50%; top: 14px; transform: translateX(-50%) rotate(5deg) scale(.95); }
.detail-leaf-fill i:nth-child(3) { right: 10%; top: 0; transform: rotate(29deg) scale(1.08); }
@keyframes detailLeafSway {
  from { rotate: -.45deg; translate: -1px 1px; }
  to   { rotate: .55deg; translate: 2px -2px; }
}

/* Slightly wider / lower detail envelope. */
.detail-stage { width: min(610px, 82vw); }
.detail-envelope-shell {
  left: 5%;
  right: 5%;
  top: 255px;
  height: 285px;
}
.detail-paper {
  left: 9%;
  right: 9%;
  top: -142px;
  height: 300px;
  padding: 40px 40px 66px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper { top: -158px; }
.detail-envelope-front { clip-path: polygon(0 0, 50% 43%, 100% 0, 100% 100%, 0 100%); }
.detail-recipient { bottom: 26px; }
.detail-stage.is-open .detail-envelope-shell { top: 330px; }

@media (max-width: 900px) {
  .card-stage { width: min(100%, 390px); }
  .envelope { height: 215px; }
}


/* ===== v6 refinements: follow the generated mock more closely ===== */

/* Home screen: 3-column layout like the approved mock, slightly shorter cards so two rows fit better. */
.garden-shell {
  padding: 34px 22px 138px;
}
.letter-grid {
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  column-gap: clamp(30px, 3.4vw, 56px);
  row-gap: 44px;
}
.letter-card {
  min-height: 352px;
}
.card-stage {
  width: min(100%, 340px);
  height: 352px;
}
/* Only show the flowers above the note; hide the original source note and remove the synthetic leaf overlay. */
.flower-tilt {
  width: 124%;
  left: -12%;
  top: -2px;
  height: 148px;
  overflow: hidden;
}
.leaf-fill,
.detail-leaf-fill {
  display: none !important;
}
.envelope {
  left: 4%;
  right: 4%;
  top: 132px;
  height: 210px;
}
.envelope-back::before {
  height: 74%;
}
.paper {
  left: 9%;
  right: 9%;
  top: -65px;
  height: 198px;
  padding: 21px 22px 42px;
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper { top: -78px; }
.letter-card.is-pressing .paper { top: -81px; }
.preview-message {
  -webkit-line-clamp: 5;
  font-size: clamp(15px, .92vw, 19px);
  line-height: 1.3;
}
.preview-author {
  margin-top: 6px;
  font-size: 15px;
}
.recipient {
  left: 28px;
  bottom: 14px;
  font-size: 15px;
}
.search-dock {
  width: min(520px, calc(100vw - 42px));
}

/* Detail view: use floral side decorations rather than grassy filler. */
.detail-view {
  overflow: hidden;
}
.detail-stage-wrap {
  padding: 88px 20px 34px;
}
.detail-stage {
  width: min(610px, 84vw);
  height: min(690px, 76vh);
  min-height: 540px;
}
.detail-flower-tilt {
  width: 114%;
  left: -7%;
  top: -6px;
  height: 155px;
  overflow: hidden;
}
.detail-envelope-shell {
  left: 6%;
  right: 6%;
  top: 218px;
  height: 292px;
}
.detail-paper {
  left: 10%;
  right: 10%;
  top: -126px;
  height: 280px;
  padding: 34px 36px 56px;
}
.detail-message {
  max-height: 172px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper {
  top: -140px;
}
.detail-recipient {
  left: 38px;
  bottom: 22px;
  font-size: 18px;
}
/* Expanded full letter stays functional. */
.detail-stage.is-open .detail-envelope-shell { top: 314px; }
.detail-stage.is-open .detail-paper {
  top: -296px;
  left: -3%;
  right: -3%;
  height: min(70svh, 640px);
  min-height: 450px;
  padding: 44px 42px 50px;
}

/* Cleaned, floral side backgrounds similar to the generated reference. */
.detail-decoration {
  z-index: 3;
  bottom: -18px;
}
.detail-decoration-left {
  left: -2vw;
  width: min(28vw, 440px);
}
.detail-decoration-right {
  right: -1.5vw;
  width: min(25vw, 390px);
}
.detail-decoration img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .letter-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    max-width: 820px;
  }
}
@media (max-width: 700px) {
  .garden-shell {
    padding-top: 24px;
  }
  .letter-grid {
    grid-template-columns: 1fr;
    row-gap: 30px;
    max-width: 360px;
  }
  .letter-card { min-height: 360px; }
  .card-stage { height: 360px; width: min(340px, 92vw); }
  .envelope { top: 138px; height: 214px; }
  .paper { height: 200px; }

  .detail-stage-wrap { padding-top: 72px; }
  .detail-stage { width: min(500px, 94vw); height: 600px; min-height: 510px; }
  .detail-flower-tilt { width: 122%; left: -11%; top: -2px; height: 145px; }
  .detail-envelope-shell { left: 5%; right: 5%; top: 208px; height: 270px; }
  .detail-paper { left: 9%; right: 9%; top: -118px; height: 262px; padding: 30px 28px 52px; }
  .detail-stage:not(.is-open):hover .detail-paper,
  .detail-stage:not(.is-open):focus-visible .detail-paper { top: -130px; }
  .detail-decoration-left { width: 44vw; left: -10vw; bottom: -12px; }
  .detail-decoration-right { width: 40vw; right: -10vw; bottom: -12px; }
}


/* ===== v7 refinements: flowers higher + detail page restored closer to mock ===== */

/* 1) Make the flowers behind every home-card envelope clearly visible. */
.flower-tilt {
  top: -32px !important;
  height: 165px !important;
}
.letter-card {
  min-height: 360px;
}
.card-stage {
  height: 360px;
}
.envelope {
  top: 142px;
}
.paper {
  top: -61px;
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper { top: -75px; }
.letter-card.is-pressing .paper { top: -79px; }

/* 2) Restore the detail page to a softer composition similar to the approved mock. */
.detail-stage-wrap {
  padding: 100px 22px 42px;
}
.detail-stage {
  width: min(610px, 82vw);
  height: min(700px, 77vh);
  min-height: 560px;
}
.detail-flower-tilt {
  top: -30px !important;
  height: 175px !important;
}
.detail-envelope-shell {
  left: 7%;
  right: 7%;
  top: 238px;
  height: 292px;
}
.detail-paper {
  left: 9%;
  right: 9%;
  top: -136px;
  height: 288px;
  padding: 37px 38px 58px;
}
.detail-message {
  max-height: 178px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper {
  top: -150px;
}
.detail-stage.is-open .detail-envelope-shell {
  top: 326px;
}
.detail-stage.is-open .detail-paper {
  top: -304px;
  left: -4%;
  right: -4%;
  height: min(70svh, 650px);
  min-height: 455px;
}

/* 3) Detail decorations: remove the ugly rectangular screenshot background and use clean cutout flowers/grass. */
.detail-decoration {
  z-index: 3;
  bottom: -18px;
}
.detail-decoration-left {
  left: -2.5vw;
  width: min(30vw, 440px);
}
.detail-decoration-right {
  right: -1.8vw;
  width: min(24vw, 350px);
}
.detail-decoration img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .flower-tilt {
    top: -26px !important;
    height: 160px !important;
  }
  .envelope { top: 145px; }

  .detail-stage-wrap { padding-top: 76px; }
  .detail-stage { width: min(500px, 94vw); height: 612px; min-height: 520px; }
  .detail-flower-tilt {
    top: -24px !important;
    height: 165px !important;
  }
  .detail-envelope-shell { left: 5%; right: 5%; top: 224px; height: 272px; }
  .detail-paper { left: 9%; right: 9%; top: -124px; height: 270px; padding: 31px 29px 53px; }
  .detail-stage:not(.is-open):hover .detail-paper,
  .detail-stage:not(.is-open):focus-visible .detail-paper { top: -136px; }
  .detail-decoration-left { width: 44vw; left: -11vw; }
  .detail-decoration-right { width: 36vw; right: -10vw; }
}


/* ===== v9 final alignment ===== */
/* Move all bouquet clusters much higher, matching the approved reference more closely. */
.letter-card { min-height: 378px; }
.card-stage { height: 378px; }
.flower-tilt {
  top: -64px !important;
  height: 214px !important;
  width: 126%;
  left: -13%;
}
.envelope {
  top: 160px;
  height: 214px;
}
.paper {
  top: -62px;
  height: 198px;
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper { top: -76px; }
.letter-card.is-pressing .paper { top: -80px; }

/* Detail main bouquet behind the envelope also moves up to the same level as the mock. */
.detail-flower-tilt {
  top: -60px !important;
  height: 220px !important;
  width: 116%;
  left: -8%;
}
.detail-envelope-shell {
  top: 242px;
  height: 290px;
}
.detail-paper {
  top: -132px;
  height: 286px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper { top: -146px; }
.detail-stage.is-open .detail-envelope-shell { top: 322px; }

/* Make the left/right floral decorations blend into the page with no mismatched rectangular block. */
.detail-decoration {
  z-index: 2;
  bottom: -12px;
}
.detail-decoration-left {
  left: -2vw;
  width: min(29vw, 380px);
}
.detail-decoration-right {
  right: -1vw;
  width: min(24vw, 318px);
}
.detail-decoration img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .letter-card { min-height: 382px; }
  .card-stage { height: 382px; }
  .flower-tilt {
    top: -58px !important;
    height: 205px !important;
  }
  .envelope { top: 160px; }

  .detail-flower-tilt {
    top: -50px !important;
    height: 206px !important;
    width: 122%;
    left: -11%;
  }
  .detail-envelope-shell { top: 232px; }
  .detail-paper { top: -124px; }
  .detail-stage:not(.is-open):hover .detail-paper,
  .detail-stage:not(.is-open):focus-visible .detail-paper { top: -136px; }
  .detail-decoration-left { width: 36vw; left: -5vw; }
  .detail-decoration-right { width: 31vw; right: -5vw; }
}


/* ===== v10: align bouquet bottoms with envelope tops on home; unify detail-view background ===== */
/* Home cards */
.letter-card { min-height: 386px; }
.card-stage { height: 386px; }
.flower-tilt {
  top: -72px !important;
  height: 228px !important;
  width: 126%;
  left: -13%;
}
.envelope {
  top: 158px;
  height: 218px;
}
.paper {
  top: -64px;
  height: 200px;
}
.letter-card:hover .paper,
.letter-card:focus-visible .paper { top: -78px; }
.letter-card.is-pressing .paper { top: -82px; }

/* Detail page: keep the nicer flower position, but make the whole background visually continuous. */
.detail-view {
  background:
    radial-gradient(78% 74% at 7% 11%, rgba(255, 250, 215, .90) 0%, rgba(255, 249, 208, .47) 28%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-bottom) 100%) !important;
}
.detail-stage-wrap,
.detail-stage {
  background: transparent !important;
}
.detail-decoration {
  z-index: 2;
  bottom: -10px;
  background: transparent !important;
}
.detail-decoration-left {
  left: -2vw;
  width: min(30vw, 400px);
}
.detail-decoration-right {
  right: -1vw;
  width: min(24vw, 320px);
}
.detail-decoration img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
}

/* Slight tidy for detail main stage, preserving the improved bouquet height. */
.detail-flower-tilt {
  top: -58px !important;
  height: 220px !important;
}
.detail-envelope-shell { top: 242px; }

@media (max-width: 700px) {
  .letter-card { min-height: 388px; }
  .card-stage { height: 388px; }
  .flower-tilt {
    top: -64px !important;
    height: 220px !important;
  }
  .envelope { top: 160px; }

  .detail-decoration-left { width: 38vw; left: -7vw; }
  .detail-decoration-right { width: 31vw; right: -6vw; }
}


/* ===== v13: v10 homepage + v5 detail page ===== */
.detail-view {
  overflow: hidden;
  min-height: 100svh;
}
.back-button {
  position: fixed;
  left: 34px;
  top: 22px;
  z-index: 50;
  border: 0;
  background: transparent;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  padding: 12px 14px;
}
.detail-stage-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 10;
  padding: 105px 24px 50px;
}
.detail-stage {
  width: min(560px, 78vw);
  height: min(720px, 76vh);
  min-height: 570px;
  position: relative;
  perspective: 1200px;
  outline: none;
  cursor: pointer;
  --detail-rx: 0deg;
  --detail-ry: 0deg;
  --detail-rz: 0deg;
  --dfx: 0px;
  --dfy: 0px;
  --dfr: 0deg;
  --dpx: 0px;
  --dpy: 0px;
  --dpr: 0deg;
  --dex: 0px;
  --dey: 0px;
  --der: 0deg;
  transform: rotateX(var(--detail-rx)) rotateY(var(--detail-ry)) rotateZ(var(--detail-rz));
  transform-style: flat;
  will-change: transform;
}
.detail-stage:focus-visible { outline: 3px solid rgba(58,126,180,.32); outline-offset: 12px; border-radius: 24px; }
.detail-flower-tilt {
  position: absolute;
  z-index: 1;
  width: 112%;
  left: -6%;
  top: -78px;
  pointer-events: none;
  transform-origin: 50% 89%;
  transform: translate(var(--dfx), var(--dfy)) rotate(var(--dfr));
  will-change: transform;
}
.detail-flower-sway {
  animation: detailFlowerSway 5.8s ease-in-out infinite alternate;
  transform-origin: 50% 88%;
  will-change: transform;
}
.detail-flower-sway img { width:100%; display:block; }
@keyframes detailFlowerSway {
  0%   { transform: rotate(-1.20deg) translate3d(-1px,1px,0); }
  50%  { transform: rotate(.12deg) translate3d(1px,-3px,0); }
  100% { transform: rotate(1.35deg) translate3d(2px,-5px,0); }
}
.detail-envelope-shell {
  position: absolute;
  z-index: 5;
  left: 9%;
  right: 9%;
  top: 238px;
  height: 350px;
  transform: translate(var(--dex), var(--dey)) rotate(var(--der));
  transition: top .48s cubic-bezier(.2,.75,.2,1), transform .1s linear;
  will-change: transform, top;
}
.detail-envelope-back {
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(100deg, rgba(225,205,174,.97), rgba(211,186,149,.98)),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
  box-shadow: 0 18px 34px rgba(95,90,78,.055);
  overflow:hidden;
}
.detail-envelope-back::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0; height:62%;
  background: linear-gradient(180deg, rgba(242,225,198,.86), rgba(217,193,156,.70));
  clip-path: polygon(0 0,100% 0,50% 84%);
}
.detail-paper {
  position:absolute;
  z-index:3;
  left:8%; right:8%;
  top:-148px;
  height:330px;
  padding: 43px 40px 70px;
  clip-path: polygon(0 0,100% 0,100% 69%,50% 100%,0 69%);
  background:
    linear-gradient(rgba(246,246,242,.995), rgba(237,237,232,.995)),
    url("assets/paper-noise.png");
  background-blend-mode:normal,multiply;
  box-shadow: 0 12px 25px rgba(68,67,58,.085), inset 0 0 0 1px rgba(70,70,60,.025);
  transform: translate(var(--dpx), var(--dpy)) rotate(var(--dpr));
  transform-origin: 50% 90%;
  transition:
    top .52s cubic-bezier(.2,.78,.18,1),
    left .52s cubic-bezier(.2,.78,.18,1),
    right .52s cubic-bezier(.2,.78,.18,1),
    height .52s cubic-bezier(.2,.78,.18,1),
    padding .52s cubic-bezier(.2,.78,.18,1),
    clip-path .42s ease,
    box-shadow .52s ease,
    border-radius .42s ease;
  overflow: hidden;
  will-change: transform, top, height;
}
.detail-paper-inner { min-height:100%; }
.detail-message {
  max-height: 205px;
  overflow: hidden;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", "Segoe Print", cursive;
  font-size: var(--detail-font, 23px);
  line-height: 1.38;
  letter-spacing: .22px;
  color: #34322f;
  text-align: left;
  white-space: pre-wrap;
}
.detail-author {
  margin-top: 10px;
  text-align: right;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 21px;
  color: rgba(55,52,48,.70);
}
.detail-envelope-front {
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
  clip-path: polygon(0 0, 50% 36%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(100deg, rgba(221,199,164,.99), rgba(205,176,133,.99)),
    url("assets/kraft-noise.png");
  background-blend-mode: multiply, normal;
}
.detail-envelope-front::before,
.detail-envelope-front::after {
  content:"";
  position:absolute;
  top:0;
  width:54%; height:62%;
  z-index:2;
}
.detail-envelope-front::before {
  left:0;
  clip-path:polygon(0 0,100% 100%,0 100%);
  background:
    linear-gradient(135deg,#e2cfb1,#cdb28a),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
}
.detail-envelope-front::after {
  right:0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:
    linear-gradient(225deg,#dfccae,#c7aa81),
    url("assets/kraft-noise.png");
  background-blend-mode:multiply,normal;
}
.detail-recipient {
  position:absolute;
  z-index:7;
  left: 46px;
  bottom: 34px;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 20px;
  color: rgba(74,63,51,.63);
  transform: rotate(-2deg);
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper {
  top: -166px;
  box-shadow: 0 18px 32px rgba(68,67,58,.105), inset 0 0 0 1px rgba(70,70,60,.02);
}
.detail-stage.is-open { cursor: zoom-out; }
.detail-stage.is-open .detail-envelope-shell {
  top: 310px;
}
.detail-stage.is-open .detail-paper {
  z-index: 12;
  left: -5%;
  right: -5%;
  top: -280px;
  height: min(70svh, 670px);
  min-height: 480px;
  padding: 52px 52px 58px;
  clip-path: inset(0 round 2px);
  border-radius: 2px;
  overflow: auto;
  scrollbar-width: thin;
  box-shadow: 0 24px 52px rgba(63,67,65,.16), inset 0 0 0 1px rgba(70,70,60,.025);
}
.detail-stage.is-open .detail-message {
  max-height: none;
  overflow: visible;
  font-size: var(--detail-open-font, 23px);
  line-height: 1.5;
}
.detail-stage.is-open .detail-author { margin-top: 26px; }
.detail-stage.is-open .detail-flower-tilt { opacity:.92; }
.detail-decoration {
  position: fixed;
  z-index: 4;
  bottom: -46px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: foregroundSway 7.0s ease-in-out infinite alternate;
  will-change: transform;
}
.detail-decoration img { display:block; width:100%; }
.detail-decoration-left { left:-3vw; width:min(47vw,820px); }
.detail-decoration-right { right:-2vw; width:min(42vw,720px); animation-delay:-2.6s; }
@keyframes foregroundSway {
  0%   { transform: rotate(-.72deg) translate3d(-2px,0,0); }
  50%  { transform: rotate(.06deg) translate3d(1px,-2px,0); }
  100% { transform: rotate(.78deg) translate3d(3px,3px,0); }
}
.detail-view:not([hidden]) .detail-stage { animation: detailEnter .52s cubic-bezier(.2,.75,.2,1) both; }
.detail-view:not([hidden]) .detail-decoration-left { animation-name: foregroundSway, leftEnter; animation-duration:7s,.7s; animation-iteration-count:infinite,1; }
.detail-view:not([hidden]) .detail-decoration-right { animation-name: foregroundSway, rightEnter; animation-duration:7s,.7s; animation-iteration-count:infinite,1; }
@keyframes detailEnter { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes leftEnter { from { opacity:0; translate:-28px 12px; } to { opacity:1; translate:0 0; } }
@keyframes rightEnter { from { opacity:0; translate:28px 12px; } to { opacity:1; translate:0 0; } }
body.dark .back-button { color:#f0f4f6; }
@media (max-width:900px) {
.detail-decoration-left { width:62vw; left:-23vw; }
.detail-decoration-right { width:55vw; right:-20vw; }
.back-button { left:18px; top:18px; }
.detail-stage { width:min(540px,84vw); }
}
@media (max-width:600px) {
.detail-stage-wrap { padding:82px 12px 28px; }
.detail-stage { width:min(500px,94vw); height:650px; min-height:560px; }
.detail-envelope-shell { left:6%; right:6%; top:226px; height:340px; }
.detail-paper { top:-138px; padding:36px 29px 62px; }
.detail-message { max-height:205px; }
.detail-recipient { left:36px; bottom:31px; font-size:18px; }
.detail-flower-tilt { width:124%; left:-12%; top:-62px; }
.detail-decoration-left { width:76vw; left:-36vw; opacity:.94; }
.detail-decoration-right { width:70vw; right:-36vw; opacity:.94; }
.back-button span { display:none; }
.detail-stage.is-open .detail-envelope-shell { top:330px; }
.detail-stage.is-open .detail-paper {
    left:-1%; right:-1%; top:-292px;
    height:min(72svh,620px); min-height:440px;
    padding:42px 32px 50px;
  }
}
@media (hover:none), (pointer:coarse) {
.detail-stage { transform:none !important; }
.detail-stage:active:not(.is-open) .detail-paper { top:-160px; }
}
.flower-tilt,
.detail-flower-tilt {
  overflow: hidden;
  aspect-ratio: 500 / 270;
}
.flower-sway img,
.detail-flower-sway img {
  width: 100%;
  height: auto;
  display: block;
}
.back-button {
  left: 34px;
  top: 22px;
  font-size: 18px;
  padding: 11px 10px;
}
.detail-stage {
  width: min(570px, 79vw);
  height: min(675px, 74vh);
  min-height: 555px;
}
.detail-flower-tilt {
  width: 112%;
  left: -6%;
  top: -38px;
  z-index: 1;
}
.detail-envelope-shell {
  left: 8%;
  right: 8%;
  top: 250px;
  height: 270px;
}
.detail-paper {
  left: 8.5%;
  right: 8.5%;
  top: -132px;
  height: 292px;
  padding: 38px 38px 64px;
  clip-path: polygon(0 0,100% 0,100% 71%,50% 100%,0 71%);
}
.detail-message { max-height: 187px; }
.detail-envelope-front {
  clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 0 100%);
}
.detail-envelope-front::before,
.detail-envelope-front::after { height: 65%; }
.detail-recipient {
  left: 42px;
  bottom: 24px;
  font-size: 19px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper { top: -149px; }
.detail-stage.is-open .detail-envelope-shell { top: 336px; }
.detail-stage.is-open .detail-paper {
  top: -314px;
  left: -5%;
  right: -5%;
  height: min(70svh, 660px);
  min-height: 470px;
}
@media (max-width: 900px) {
.detail-stage { width:min(550px,86vw); }
}
@media (max-width: 600px) {
.detail-stage-wrap { padding-top: 74px; }
.detail-stage { width:min(500px,94vw); height:610px; min-height:525px; }
.detail-envelope-shell { left:6%; right:6%; top:232px; height:255px; }
.detail-paper { top:-123px; height:278px; padding:34px 28px 58px; }
.detail-message { max-height:178px; }
.detail-recipient { left:34px; bottom:22px; font-size:18px; }
.detail-flower-tilt { width:122%; left:-11%; top:-31px; }
.detail-stage:not(.is-open):hover .detail-paper,
  .detail-stage:not(.is-open):focus-visible .detail-paper { top:-137px; }
.detail-stage.is-open .detail-envelope-shell { top:315px; }
.detail-stage.is-open .detail-paper {
    left:-1%; right:-1%; top:-286px;
    height:min(72svh,610px); min-height:430px;
    padding:42px 32px 50px;
  }
}
@media (hover:none), (pointer:coarse) {
.detail-stage:active:not(.is-open) .detail-paper { top:-143px; }
}
.leaf-fill,
.detail-leaf-fill {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.leaf-fill i,
.detail-leaf-fill i {
  position: absolute;
  display: block;
  width: 24px;
  height: 150px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(90deg, rgba(102,171,83,.96), rgba(146,197,105,.95) 55%, rgba(76,146,69,.95));
  box-shadow: inset 2px 0 0 rgba(255,255,255,.18);
  opacity: .9;
}
.detail-flower-tilt {
  height: 355px;
  overflow: hidden;
}
.detail-leaf-fill {
  left: 12%; right: 12%; top: 205px; height: 250px;
  transform: translate(var(--dfx), var(--dfy)) rotate(var(--dfr));
  animation: detailLeafSway 6.2s ease-in-out infinite alternate;
}
.detail-leaf-fill i:nth-child(1) { left: 13%; top: 6px; transform: rotate(-28deg) scale(1.05); }
.detail-leaf-fill i:nth-child(2) { left: 50%; top: 14px; transform: translateX(-50%) rotate(5deg) scale(.95); }
.detail-leaf-fill i:nth-child(3) { right: 10%; top: 0; transform: rotate(29deg) scale(1.08); }
@keyframes detailLeafSway {
  from { rotate: -.45deg; translate: -1px 1px; }
  to   { rotate: .55deg; translate: 2px -2px; }
}
.detail-stage { width: min(610px, 82vw); }
.detail-envelope-shell {
  left: 5%;
  right: 5%;
  top: 255px;
  height: 285px;
}
.detail-paper {
  left: 9%;
  right: 9%;
  top: -142px;
  height: 300px;
  padding: 40px 40px 66px;
}
.detail-stage:not(.is-open):hover .detail-paper,
.detail-stage:not(.is-open):focus-visible .detail-paper { top: -158px; }
.detail-envelope-front { clip-path: polygon(0 0, 50% 43%, 100% 0, 100% 100%, 0 100%); }
.detail-recipient { bottom: 26px; }
.detail-stage.is-open .detail-envelope-shell { top: 330px; }


/* ===== v19: match detail-page left flower to user screenshot ===== */
.detail-decoration-left{width:min(26vw,360px)!important;left:0.2vw!important;bottom:-4px!important;opacity:1!important;}
.detail-decoration-left img{width:100%!important;height:auto!important;display:block!important;}
.detail-decoration-right{bottom:-4px!important;}


/* ===== v20: fix detail-page color mismatch + mobile polish ===== */
.detail-view{position:relative;overflow:hidden;min-height:100svh;background:radial-gradient(78% 74% at 7% 11%, rgba(255,250,215,.90) 0%, rgba(255,249,208,.47) 28%, rgba(255,255,255,0) 56%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-bottom) 100%) !important;}
.detail-stage-wrap,.detail-stage,.detail-decoration{background:transparent !important;box-shadow:none !important;}
.detail-stage{isolation:isolate;}
.detail-decoration-left{width:min(23vw,310px)!important;left:0.3vw!important;bottom:-6px!important;opacity:1!important;}
.detail-decoration-right{width:min(22vw,300px)!important;right:-0.8vw!important;bottom:-6px!important;opacity:1!important;}
.detail-decoration-left img,.detail-decoration-right img{display:block;width:100%;height:auto;background:transparent !important;}
.detail-flower-tilt,.detail-flower-sway,.detail-leaf-fill{background:transparent !important;}
@media (max-width: 700px){
  .back-button{left:16px !important;top:14px !important;font-size:17px !important;padding:10px 10px !important;}
  .detail-stage-wrap{padding:76px 10px 22px !important;}
  .detail-stage{width:min(500px,94vw) !important;height:592px !important;min-height:500px !important;}
  .detail-envelope-shell{left:6% !important;right:6% !important;top:230px !important;height:258px !important;}
  .detail-paper{left:8% !important;right:8% !important;top:-124px !important;height:270px !important;padding:34px 28px 58px !important;}
  .detail-flower-tilt{width:116% !important;left:-8% !important;top:-28px !important;height:150px !important;}
  .detail-decoration-left{width:min(34vw,180px) !important;left:-1vw !important;bottom:-6px !important;}
  .detail-decoration-right{width:min(31vw,170px) !important;right:-2vw !important;bottom:-6px !important;}
}


/* ===== v21: enlarge both side flowers ===== */
.detail-decoration-left{width:min(30vw,420px)!important;left:-0.5vw!important;bottom:-8px!important;}
.detail-decoration-right{width:min(28vw,390px)!important;right:-1.2vw!important;bottom:-8px!important;}
@media (max-width: 700px){
  .detail-decoration-left{width:min(42vw,230px)!important;left:-4vw!important;bottom:-8px!important;}
  .detail-decoration-right{width:min(39vw,220px)!important;right:-5vw!important;bottom:-8px!important;}
}


/* ===== v22: enlarge right flower further ===== */
.detail-decoration-right{width:min(33vw,460px)!important;right:-1.8vw!important;bottom:-10px!important;}
@media (max-width: 700px){
  .detail-decoration-right{width:min(45vw,260px)!important;right:-7vw!important;bottom:-10px!important;}
}


/* ===== v23: make right flower same size as left ===== */
.detail-decoration-right{width:min(30vw,420px)!important;right:-0.5vw!important;bottom:-8px!important;}
@media (max-width: 700px){
  .detail-decoration-right{width:min(42vw,230px)!important;right:-4vw!important;bottom:-8px!important;}
}


/* ===== v24: add Happy Teacher's Day under envelope ===== */
.detail-stage-wrap{position:relative;}
.detail-greeting{position:absolute;left:50%;transform:translateX(-50%);top:540px;width:min(430px,38vw);z-index:1;pointer-events:none;opacity:0.98;}
.detail-greeting img{display:block;width:100%;height:auto;}
.detail-stage{position:relative;z-index:2;}
@media (max-width: 900px){.detail-greeting{top:520px;width:min(360px,48vw);}}
@media (max-width: 700px){.detail-greeting{top:480px;width:min(250px,62vw);}}


/* ===== v25: move Happy Teacher's Day downward ===== */
.detail-greeting{top:590px!important;}
@media (max-width: 900px){.detail-greeting{top:565px!important;}}
@media (max-width: 700px){.detail-greeting{top:515px!important;}}


/* ===== v26: move greeting further down and shrink slightly so it is fully visible ===== */
.detail-greeting{top:638px!important;width:min(360px,32vw)!important;}
@media (max-width: 900px){.detail-greeting{top:604px!important;width:min(320px,42vw)!important;}}
@media (max-width: 700px){.detail-greeting{top:548px!important;width:min(220px,56vw)!important;}}


/* ===== v27: move greeting a bit further down so it is fully visible ===== */
.detail-greeting{top:662px!important;width:min(350px,31vw)!important;}
@media (max-width: 900px){.detail-greeting{top:626px!important;width:min(310px,40vw)!important;}}
@media (max-width: 700px){.detail-greeting{top:570px!important;width:min(210px,54vw)!important;}}


/* ===== v28: move greeting further down again ===== */
.detail-greeting{top:700px!important;width:min(340px,30vw)!important;}
@media (max-width: 900px){.detail-greeting{top:660px!important;width:min(300px,39vw)!important;}}
@media (max-width: 700px){.detail-greeting{top:596px!important;width:min(200px,52vw)!important;}}


/* ===== v29: move greeting slightly upward ===== */
.detail-greeting{top:684px!important;}
@media (max-width: 900px){.detail-greeting{top:645px!important;}}
@media (max-width: 700px){.detail-greeting{top:584px!important;}}


/* ===== v30: move greeting slightly downward ===== */
.detail-greeting{top:694px!important;width:min(342px,30vw)!important;}
@media (max-width: 900px){.detail-greeting{top:654px!important;width:min(302px,39vw)!important;}}
@media (max-width: 700px){.detail-greeting{top:590px!important;width:min(202px,52vw)!important;}}


/* ===== v31: move greeting slightly upward from v30, but still lower than v29 ===== */
.detail-greeting{top:692px!important;width:min(342px,30vw)!important;}
@media (max-width: 900px){.detail-greeting{top:652px!important;width:min(302px,39vw)!important;}}
@media (max-width: 700px){.detail-greeting{top:588px!important;width:min(202px,52vw)!important;}}


/* ===== v32: mobile typography polish ===== */
/* Make the note text use a more print/handwritten Chinese look, closer to the desktop reference. */
.preview-message,
.detail-message,
.detail-stage.is-open .detail-message {
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "STSong", serif !important;
  font-size: clamp(15px, .92vw, 19px) !important;
  line-height: 1.30 !important;
  letter-spacing: .10px !important;
  font-weight: 400 !important;
}
.preview-author,
.detail-author {
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "STSong", serif !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* On phones, keep all note text compact and consistent before/after opening. */
@media (max-width: 700px) {
  .preview-message,
  .detail-message,
  .detail-stage.is-open .detail-message {
    font-size: 13.5px !important;
    line-height: 1.34 !important;
    letter-spacing: .05px !important;
  }
  .preview-author,
  .detail-author {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}


/* ===== v33: increase note typography for easier reading ===== */
.preview-message,.detail-message,.detail-stage.is-open .detail-message{font-size:clamp(16px,1vw,20px)!important;line-height:1.32!important;}
.preview-author,.detail-author{font-size:15.5px!important;}
@media (max-width:700px){
  .preview-message,.detail-message,.detail-stage.is-open .detail-message{font-size:15.5px!important;line-height:1.36!important;}
  .preview-author,.detail-author{font-size:14.5px!important;line-height:1.28!important;}
}


/* ===== v34: editable From field on envelope ===== */
.sender {
  position: absolute;
  right: 31px;
  bottom: 17px;
  z-index: 9;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 16px;
  color: rgba(74,64,54,.70);
  transform: rotate(2deg);
  pointer-events: none;
  text-align: right;
  max-width: 44%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-sender {
  position: absolute;
  z-index: 7;
  right: 42px;
  bottom: 26px;
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive;
  font-size: 19px;
  color: rgba(74,63,51,.63);
  transform: rotate(2deg);
  pointer-events: none;
  text-align: right;
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .sender {
    right: 24px;
    bottom: 16px;
    font-size: 15px;
    max-width: 42%;
  }
  .detail-sender {
    right: 30px;
    bottom: 22px;
    font-size: 17px;
    max-width: 42%;
  }
}


/* ===== v35: rounder envelope To/From typography ===== */

.recipient,
.sender,
.detail-recipient,
.detail-sender {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .25px !important;
}
.recipient,
.sender {
  font-size: 15.5px !important;
}
.detail-recipient,
.detail-sender {
  font-size: 18px !important;
}
@media (max-width:700px){
  .recipient,.sender{font-size:14.5px !important;}
  .detail-recipient,.detail-sender{font-size:16.5px !important;}
}


/* ===== v36: rounder LETTER BODY typography; restore envelope labels ===== */

/* Restore v34-style envelope To/From font (v35's rounded envelope override is cancelled). */
.recipient,
.sender,
.detail-recipient,
.detail-sender {
  font-family: "Bradley Hand", "Kaiti SC", "STKaiti", cursive !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
.recipient,
.sender {
  font-size: 16px !important;
}
.detail-recipient,
.detail-sender {
  font-size: 19px !important;
}
@media (max-width:700px){
  .recipient,.sender{font-size:15px !important;}
  .detail-recipient,.detail-sender{font-size:17px !important;}
}

/* Change the actual letter text to a softer, rounder Chinese font.
   Apple devices will prefer Yuanti SC; other devices fall back gracefully. */
.preview-message,
.detail-message,
.detail-stage.is-open .detail-message {
  font-family: "Yuanti SC", "STYuanti-SC-Regular", "STYuanti-SC-Light",
               "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei",
               sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .18px !important;
}

/* Keep signature distinct, but slightly softer. */
.preview-author,
.detail-author {
  font-family: "Yuanti SC", "STYuanti-SC-Regular", "Kaiti SC",
               "STKaiti", "PingFang SC", sans-serif !important;
  font-weight: 400 !important;
}