/* =========================================================
   午后茶叙 · 样式
   米白 / 浅粉 / 抹茶绿
   ========================================================= */

:root{
  --cream:#FBF5E9;
  --cream-2:#F5EAD6;
  --paper:#FFFCF4;
  --paper-2:#FFF8EC;
  --pink:#F6C9CE;
  --pink-d:#E9A7B0;
  --rose:#C2555E;
  --matcha:#A9C08B;
  --matcha-d:#7E9B5E;
  --ink:#6B5748;
  --ink-2:#8E7867;
  --ink-3:#BCAB98;
  --butter:#F2D08A;
  --mint:#BFD8CF;
  --sky:#CFE0EC;
  --cocoa:#B87A45;
  --line:rgba(107,87,72,.85);
  --shadow-soft:0 18px 34px -20px rgba(107,87,72,.55);
  --shadow-card:0 26px 48px -26px rgba(107,87,72,.6);
  --radius:22px;
  --font-body:"Klee One","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-disp:"YouYuan","幼圆","Yuanti SC","STYuanti","Klee One","PingFang SC","Hiragino Maru Gothic ProN","Microsoft YaHei",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  letter-spacing:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:0}
h1,h2,h3,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:3px dashed var(--rose);outline-offset:3px;border-radius:12px}

.narrow-only{display:none}

/* =========================================================
   1. 背景：拼布桌布
   ========================================================= */
.quilt{
  position:fixed;
  inset:0;
  z-index:-3;
  display:grid;
  background:#EFE2CC;
  box-shadow:inset 0 0 120px rgba(107,87,72,.18);
}
.patch{
  position:relative;
  border:2px dashed rgba(107,87,72,.16);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 10px 18px -14px rgba(107,87,72,.5);
}
.patch::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1.5px dashed rgba(255,255,255,.55);
  border-radius:2px;
}
.p-dots{background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.75) 2.6px, transparent 3px);background-size:16px 16px}
.p-stripe{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.42) 0 6px, transparent 6px 13px)}
.p-check{background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.34) 0 5px, transparent 5px 12px),repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 5px, transparent 5px 12px)}
.p-wave{background-image:radial-gradient(circle at 50% 100%, rgba(255,255,255,.6) 5px, transparent 5.4px),radial-gradient(circle at 50% 0, rgba(255,255,255,.6) 5px, transparent 5.4px);background-size:22px 11px;background-position:0 0,11px 5.5px}
.p-leaf{background-image:radial-gradient(ellipse 5px 3px at 30% 30%, rgba(255,255,255,.7), transparent 70%),radial-gradient(ellipse 5px 3px at 70% 70%, rgba(255,255,255,.7), transparent 70%);background-size:26px 26px}
.p-plain{background-image:radial-gradient(circle at 30% 20%, rgba(255,255,255,.4), transparent 60%)}

.quilt-vignette{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(107,87,72,.2) 100%),
    linear-gradient(180deg, rgba(255,252,244,.35), transparent 22%, transparent 78%, rgba(107,87,72,.14));
}
.paper-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* =========================================================
   2. 顶栏
   ========================================================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(10px,1.6vw,16px) clamp(12px,3vw,30px);
  pointer-events:none;
}
.topbar>*{pointer-events:auto}
.tb-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px 9px 12px;
  background:var(--paper);
  border:2px solid rgba(107,87,72,.7);
  border-radius:99px;
  box-shadow:0 8px 16px -10px rgba(107,87,72,.7), inset 0 -2px 0 rgba(107,87,72,.08);
  font-size:14px;font-weight:700;color:var(--ink);
  transition:transform .25s cubic-bezier(.34,1.4,.5,1), box-shadow .25s, background .25s;
}
.tb-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 14px 22px -12px rgba(107,87,72,.75);background:#fff}
.tb-btn:active{transform:translateY(0) scale(.97)}
.tb-btn--home{background:var(--paper)}
.tb-btn--sound .ic-off{display:none}
.tb-btn--sound:not(.is-on) .ic-on{display:none}
.tb-btn--sound:not(.is-on) .ic-off{display:block}
.tb-btn--sound:not(.is-on){color:var(--ink-3);background:#F6EFE2}

.tb-brand{
  text-align:center;line-height:1.15;
  opacity:0;transform:translateY(-6px);
  transition:opacity .45s, transform .45s;
  pointer-events:none;
}
body:not([data-view="home"]) .tb-brand{opacity:1;transform:none}
.tb-brand__cn{display:block;font-family:var(--font-disp);font-size:17px;font-weight:700;color:var(--ink)}
.tb-brand__en{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}

/* =========================================================
   3. 视图切换
   ========================================================= */
.stage{position:relative;width:100%}
.view{
  display:none;
  width:100%;
  min-height:100vh;
  padding:clamp(84px,11vh,120px) clamp(16px,4vw,48px) clamp(48px,7vh,80px);
  justify-content:center;
  align-items:flex-start;
}
.view.is-active{display:flex;animation:view-in .58s cubic-bezier(.2,.85,.3,1) both}
.view.is-leaving{display:flex;animation:view-out .3s ease forwards;pointer-events:none}
@keyframes view-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes view-out{to{opacity:0;transform:translateY(-12px) scale(.99)}}

.view-inner{width:min(1240px,100%)}

/* =========================================================
   4. 首页
   ========================================================= */
.view--home{align-items:center}
.home-inner{
  width:min(1180px,100%);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.4vw,16px);
}
.home-eyebrow{
  font-size:clamp(12px,1.5vw,14px);color:var(--ink-2);
  letter-spacing:.16em;
  opacity:0;animation:view-in .7s .05s both;
}

/* --- 盘子标题 --- */
.plate-wrap{
  position:relative;
  width:min(640px,94vw);
  display:grid;place-items:center;
  margin-top:clamp(2px,1vw,10px);
  --pop-scale:1;
}
.plate{
  position:relative;
  width:100%;
  aspect-ratio:560/380;
  display:grid;place-items:center;
  transition:transform .6s cubic-bezier(.34,1.3,.5,1);
}
.plate-svg{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 26px 26px rgba(107,87,72,.26));
}
.plate-wrap:hover .plate,
.plate-wrap:focus-within .plate{transform:translateY(-6px) rotate(-1.2deg) scale(1.025)}

.plate-text{
  position:relative;z-index:2;width:74%;text-align:center;
}
.plate-kicker{
  font-size:clamp(10px,1.3vw,12px);
  letter-spacing:.36em;text-transform:uppercase;color:var(--rose);
  margin-bottom:6px;
}
.plate-title{
  font-family:var(--font-disp);
  font-size:clamp(30px,6.2vw,60px);
  font-weight:700;line-height:1.05;
  color:var(--ink);
  text-shadow:0 2px 0 #FFF9EC, 0 6px 12px rgba(107,87,72,.16);
}
.plate-sub{
  margin-top:10px;
  font-size:clamp(12px,1.6vw,15px);
  line-height:1.75;color:var(--ink-2);
}
.hover-hint{
  position:relative;z-index:3;
  margin-top:10px;
  padding:5px 13px;
  font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:.04em;
  background:rgba(255,251,240,.9);
  border:1px dashed rgba(226,121,127,.55);
  border-radius:999px;
  box-shadow:0 5px 14px -9px rgba(107,87,72,.8);
  transition:opacity .3s;
}
.plate-wrap:hover .hover-hint{opacity:0}

/* --- 悬停弹出的小甜点 --- */
.desserts{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  transform:scale(var(--pop-scale));
  transition:transform .4s;
}
.pop{
  position:absolute;
  left:calc(50% + var(--x));
  top:calc(50% + var(--y));
  width:clamp(84px,10.6vw,128px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.15) rotate(-24deg);
  transition:opacity .28s ease, transform .78s cubic-bezier(.2,1.72,.42,1);
  transition-delay:var(--d);
  filter:drop-shadow(0 11px 13px rgba(107,87,72,.3));
  will-change:transform,opacity;
}
.pop::before{
  content:"";position:absolute;inset:-28%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,251,240,.95), rgba(255,251,240,0) 70%);
  opacity:0;transition:opacity .4s .1s;
}
.pop svg{position:relative;width:100%;height:auto;overflow:visible;animation:bob 3.6s ease-in-out infinite}
.pop--berry svg{animation-delay:-.6s}
.pop--cupcake svg{animation-delay:-1.2s}
.pop--cookie svg{animation-delay:-1.8s}
.pop--tea svg{animation-delay:-2.4s}
.pop--cherry svg{animation-delay:-3s}
.pop--sugar svg{animation-delay:-.9s}
@keyframes bob{0%,100%{transform:translateY(-3px) rotate(-2deg)}50%{transform:translateY(3px) rotate(2deg)}}

.plate-wrap:hover .pop,
.plate-wrap:focus-within .pop{
  opacity:1;
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1.18) rotate(var(--rot,0deg));
}
.plate-wrap:hover .pop::before{opacity:1}

/* --- 两个入口 --- */
.entrances{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2.4vw,28px);
  width:min(880px,100%);
  margin-top:clamp(10px,2vw,22px);
}
.entrance{
  position:relative;
  display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);
  padding:clamp(14px,2vw,20px) clamp(16px,2.4vw,26px);
  text-align:left;
  background:linear-gradient(160deg,var(--paper),var(--paper-2));
  border:2.5px solid rgba(107,87,72,.75);
  border-radius:26px;
  box-shadow:0 16px 30px -20px rgba(107,87,72,.85), inset 0 -3px 0 rgba(107,87,72,.07);
  transition:transform .4s cubic-bezier(.34,1.35,.5,1), box-shadow .4s, border-color .3s;
  overflow:hidden;
}
.entrance::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background-image:repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px);
  opacity:.5;transition:opacity .3s;
}
.entrance--tea{--accent:var(--matcha)}
.entrance--cake{--accent:var(--pink-d)}
.entrance:hover{transform:translateY(-7px) rotate(-.8deg);box-shadow:0 26px 38px -22px rgba(107,87,72,.9)}
.entrance--cake:hover{transform:translateY(-7px) rotate(.8deg)}
.entrance:hover::after{opacity:.95}
.entrance:active{transform:translateY(-2px) scale(.99)}

.entrance-art{flex:0 0 auto;width:clamp(74px,11vw,118px)}
.entrance-art svg{display:block;width:95%;height:auto;margin-right:auto;margin-left:auto;transition:transform .45s cubic-bezier(.34,1.5,.5,1)}
.entrance:hover .entrance-art svg{transform:translateY(-5px) rotate(-3deg) scale(1.05)}
.entrance--cake:hover .entrance-art svg{transform:translateY(-5px) rotate(3deg) scale(1.05)}
.entrance .steam path{opacity:.45;animation:steam-rise 3s ease-in-out infinite}
.entrance:hover .steam path{opacity:1}
.steam path:nth-child(2){animation-delay:-1.5s}
@keyframes steam-rise{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-6px);opacity:.95}}

.entrance-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.entrance-num{
  font-size:13px;font-weight:700;color:#fff;background:var(--accent);
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid rgba(107,87,72,.55);
  margin-bottom:2px;
}
.entrance-title{font-family:var(--font-disp);font-size:clamp(16px,2vw,21px);font-weight:700;line-height:1.3}
.entrance-sub{font-size:clamp(12px,1.35vw,13.5px);color:var(--ink-2);line-height:1.5}
.entrance-prompt{
  display:inline-block;align-self:flex-start;
  margin-top:4px;padding:2px 8px;
  font-size:11.5px;font-weight:700;line-height:1.45;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,#FFFDF8);
  border-radius:999px;
}

.home-foot{
  font-size:12.5px;color:var(--ink-2);
  letter-spacing:.1em;
  margin-top:clamp(6px,1.4vw,14px);
}

/* =========================================================
   5. 选择页（茶杯 / 蛋糕）
   ========================================================= */
.pick-head{text-align:center;margin-bottom:clamp(22px,4vw,42px)}
.pick-kicker{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--rose);
  margin-bottom:8px;
}
.pick-head h2{
  font-family:var(--font-disp);
  font-size:clamp(28px,4.6vw,46px);
  font-weight:700;line-height:1.2;
  text-shadow:0 2px 0 #FFFBF0;
}
.pick-sub{margin-top:10px;font-size:clamp(13px,1.6vw,15px);color:var(--ink-2);line-height:1.7}

/* --- 茶杯 --- */
.tea-table{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(8px,1.6vw,20px);
  justify-items:center;
}
.tea-card{
  position:relative;
  width:100%;max-width:256px;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(8px,1.4vw,16px) 8px clamp(10px,1.6vw,16px);
  border-radius:26px;
  transition:transform .42s cubic-bezier(.34,1.4,.5,1), background .35s, box-shadow .4s;
}
.tea-card:hover,.tea-card:focus-visible{
  background:rgba(255,252,244,.72);
  box-shadow:0 20px 34px -24px rgba(107,87,72,.9), inset 0 0 0 2px rgba(107,87,72,.16);
  transform:translateY(-8px);
}
.tea-card__cup{display:block;width:100%;position:relative}
.tea-card__cup svg{width:100%;height:auto}
.tea-card .steam path{
  opacity:.3;
  animation:steam-rise 3.2s ease-in-out infinite;
}
.tea-card .steam path:nth-child(2){animation-delay:-1.1s}
.tea-card .steam path:nth-child(3){animation-delay:-2.2s}
.tea-card:hover .steam path{opacity:.95}
.tea-card__saucer-shadow{transition:opacity .35s}
.tea-card:hover .tea-card__cup{padding-bottom:2px}
.tea-card__label{display:block;width:100%;margin-top:10px;text-align:center;line-height:1.35}
.tea-card__label b{
  display:block;font-family:var(--font-disp);font-size:17px;font-weight:700;color:var(--ink);
  max-width:100%;overflow-wrap:anywhere;
}
.tea-card:nth-child(1) .tea-card__label b{color:#49352B}
.tea-card__label small{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.tea-card__cupname{
  display:inline-block;margin-top:7px;
  font-size:10.5px;letter-spacing:.12em;color:#fff;
  background:var(--chip,#E9A7B0);
  border:1.5px solid rgba(107,87,72,.45);
  padding:2.5px 10px;border-radius:99px;
}
.tea-card__go{
  display:block;
  margin-top:9px;font-size:11.5px;color:var(--ink-2);
  opacity:0;transform:translateY(4px);transition:opacity .3s, transform .3s;
}
.tea-card:hover .tea-card__go,.tea-card:focus-visible .tea-card__go{opacity:1;transform:none}

/* --- 蛋糕 --- */
.cake-table{
  display:grid;
  grid-template-columns:minmax(280px,1.05fr) minmax(240px,.85fr);
  gap:clamp(16px,3vw,48px);
  align-items:center;
  justify-items:center;
}
.cake-stage{width:min(460px,84vw)}
.cake-stage svg{width:100%;height:auto;overflow:visible}
.cake-slice{
  cursor:pointer;
  transform:translate(var(--tx,0px),var(--ty,0px));
  transition:transform .42s cubic-bezier(.34,1.45,.5,1), filter .35s;
}
.cake-slice:hover,.cake-slice.is-hot{filter:drop-shadow(0 10px 14px rgba(107,87,72,.4))}
.cake-slice__label{opacity:0;transition:opacity .3s}
.cake-slice:hover .cake-slice__label,.cake-slice.is-hot .cake-slice__label{opacity:1}
.cake-slice.is-picked .cake-slice__body{animation:slice-pop .55s cubic-bezier(.34,1.5,.5,1)}
@keyframes slice-pop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}

.cake-legend{display:flex;flex-direction:column;gap:10px;width:100%}
.cake-legend li{width:100%}
.cake-leg{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;
  background:rgba(255,252,244,.8);
  border:2px solid rgba(107,87,72,.28);
  border-radius:18px;
  text-align:left;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .3s, border-color .3s, box-shadow .3s;
}
.cake-leg:hover,.cake-leg.is-hot{
  transform:translateX(6px);
  background:var(--paper);
  border-color:var(--accent);
  box-shadow:0 14px 24px -20px rgba(107,87,72,.95);
}
.cake-leg__dot{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--accent);
  border:2px solid rgba(107,87,72,.5);
  box-shadow:inset 0 -3px 0 rgba(107,87,72,.16);
}
.cake-leg__txt{flex:1 1 auto;min-width:0}
.cake-leg__txt b{display:block;font-family:var(--font-disp);font-size:15.5px;font-weight:700}
.cake-leg__txt small{display:block;font-size:11px;color:var(--ink-2);margin-top:1px}
.cake-leg svg{width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.cake-leg:hover svg{transform:translateX(3px);stroke:var(--rose)}

.pick-foot{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(26px,4vw,44px);
}

/* =========================================================
   6. 通用按钮
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  border:2px solid rgba(107,87,72,.7);
  border-radius:99px;
  font-size:14px;font-weight:700;
  background:var(--paper);
  box-shadow:0 12px 22px -16px rgba(107,87,72,.9);
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .3s, box-shadow .3s;
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 26px -18px rgba(107,87,72,.95)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn--ghost{background:rgba(255,252,244,.86)}
.btn--solid{background:var(--matcha);color:#fff;text-shadow:0 1px 0 rgba(107,87,72,.4)}
.btn--solid:hover{background:var(--matcha-d)}

/* =========================================================
   7. 作品详情：托盘 + 蕾丝卡片
   ========================================================= */
.view--detail .detail-stage{width:min(1080px,100%)}

.tray{
  position:relative;
  padding:clamp(16px,2.6vw,30px);
  border-radius:46px;
  background:linear-gradient(155deg,#FFFDF7,#F3E6D1 55%,#E3D2B8);
  border:2px solid rgba(107,87,72,.3);
  box-shadow:
    inset 0 2px 0 #FFFCF3,
    inset 0 -9px 18px rgba(107,87,72,.16),
    0 34px 54px -30px rgba(107,87,72,.95);
}
.tray::before{
  content:"";position:absolute;inset:8px;border-radius:40px;
  border:2px dashed rgba(107,87,72,.16);pointer-events:none;
}
.tray-handle{
  position:absolute;top:50%;width:36px;height:88px;
  transform:translateY(-50%);
  background:linear-gradient(180deg,#FFFDF7,#EADCC4);
  border:2px solid rgba(107,87,72,.34);
  box-shadow:0 12px 18px -14px rgba(107,87,72,.9);
}
.tray-handle--l{left:-16px;border-radius:50% 30% 30% 50%/50%}
.tray-handle--r{right:-16px;border-radius:30% 50% 50% 30%/50%}

/* 蕾丝边框 */
.lace-frame{position:relative;--sc:15px}
.lace-body{
  position:relative;
  background:var(--paper);
  border:2px solid rgba(107,87,72,.26);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px #fff, inset 0 -14px 26px -22px rgba(107,87,72,.6);
  padding:clamp(16px,2.6vw,30px);
}
.lace-frame::before,
.lace-frame::after,
.lace-body::before,
.lace-body::after{
  content:"";position:absolute;pointer-events:none;
}
/* 上缘 */
.lace-frame::before{
  left:0;right:0;height:var(--sc);top:calc(var(--sc) * -1);
  background-image:radial-gradient(circle at 50% 100%, var(--paper) var(--sc), transparent calc(var(--sc) + 1px));
  background-size:calc(var(--sc) * 2) var(--sc);
  background-repeat:repeat-x;
  filter:drop-shadow(0 -1px 0 rgba(107,87,72,.2));
}
/* 下缘 */
.lace-frame::after{
  left:0;right:0;height:var(--sc);bottom:calc(var(--sc) * -1);
  background-image:radial-gradient(circle at 50% 0, var(--paper) var(--sc), transparent calc(var(--sc) + 1px));
  background-size:calc(var(--sc) * 2) var(--sc);
  background-repeat:repeat-x;
  filter:drop-shadow(0 1px 0 rgba(107,87,72,.2));
}
/* 左缘 */
.lace-body::before{
  top:0;bottom:0;width:var(--sc);left:calc(var(--sc) * -1);
  background-image:radial-gradient(circle at 100% 50%, var(--paper) var(--sc), transparent calc(var(--sc) + 1px));
  background-size:var(--sc) calc(var(--sc) * 2);
  background-repeat:repeat-y;
}
/* 右缘 */
.lace-body::after{
  top:0;bottom:0;width:var(--sc);right:calc(var(--sc) * -1);
  background-image:radial-gradient(circle at 0 50%, var(--paper) var(--sc), transparent calc(var(--sc) + 1px));
  background-size:var(--sc) calc(var(--sc) * 2);
  background-repeat:repeat-y;
}
.lace-stitch{
  position:absolute;inset:9px;border-radius:20px;
  border:2px dashed rgba(107,87,72,.2);
  pointer-events:none;
}

/* 卡片内容 */
.detail-card{position:relative}
.detail-head{text-align:center;padding:2px 6px clamp(12px,2vw,20px)}
.detail-kicker{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);
  margin-bottom:8px;
}
.detail-title{
  font-family:var(--font-disp);
  font-size:clamp(26px,4.2vw,42px);font-weight:700;line-height:1.2;
}
.detail-en{
  margin-top:5px;font-size:12.5px;letter-spacing:.14em;color:var(--ink-2);
}
.detail-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin-top:14px;
}
.detail-tags li{
  font-size:11.5px;color:var(--ink);
  background:var(--tagbg,#F6EFE2);
  border:1.5px solid rgba(107,87,72,.4);
  border-radius:99px;padding:4px 12px;
}

/* --- 自动放映的短片 --- */
.film-player{
  position:relative;
  margin-top:clamp(8px,1.6vw,14px);
  padding:clamp(10px,1.4vw,16px);
  border-radius:24px;
  background:linear-gradient(160deg,#4A3E33,#2E2620);
  border:2px solid rgba(107,87,72,.9);
  box-shadow:0 20px 34px -24px rgba(30,22,16,.95), inset 0 2px 0 rgba(255,255,255,.14);
}
.film-window{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#241D18;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.4);
}
.film{position:absolute;inset:0}
.film svg{width:100%;height:100%}
.film.is-paused *{animation-play-state:paused !important}
.film-badge{
  position:absolute;z-index:5;
  top:22px;left:26px;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:99px;
  font-size:10px;letter-spacing:.14em;
  color:#FFF3E0;background:rgba(38,30,24,.5);
  border:1px solid rgba(255,243,224,.32);
  backdrop-filter:blur(4px);
}
.film-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#F3A0A8;
  animation:glow-pulse 1.8s ease-in-out infinite;
}
.film-sprocket{
  position:absolute;top:0;bottom:0;width:14px;z-index:4;
  display:flex;flex-direction:column;justify-content:space-around;align-items:center;
  padding:8px 0;pointer-events:none;
}
.film-sprocket--l{left:0;background:linear-gradient(90deg,rgba(20,15,12,.72),transparent)}
.film-sprocket--r{right:0;background:linear-gradient(270deg,rgba(20,15,12,.72),transparent)}
.film-sprocket i{width:5px;height:8px;border-radius:2px;background:rgba(255,244,228,.34)}

.film-bar{
  display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:0 4px;
  color:#F5E8D6;
}
.film-btn{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1.6px solid rgba(255,243,224,.3);
  color:#FFF3E2;
  transition:background .25s, transform .25s;
}
.film-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.film-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.film-track{
  flex:1 1 auto;height:6px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.16);
}
.film-fill{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--butter),var(--matcha));
}
.film-time{
  flex:0 0 auto;min-width:40px;text-align:right;
  font-size:11.5px;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:rgba(245,232,214,.8);
}

/* --- 短片动画 --- */
.film .f-ken{transform-box:fill-box;transform-origin:center;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.4%,-2%)}}
.film .f-drift{animation:f-drift 26s linear infinite}
@keyframes f-drift{from{transform:translateX(-190px)}to{transform:translateX(830px)}}
.film .f-sway{transform-box:fill-box;transform-origin:bottom center;animation:f-sway 4.6s ease-in-out infinite}
@keyframes f-sway{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg)}}
.film .f-spin{transform-box:fill-box;transform-origin:center;animation:f-spin 20s linear infinite}
@keyframes f-spin{to{transform:rotate(360deg)}}
.film .f-rise{animation:f-rise 5s ease-out infinite}
@keyframes f-rise{0%{transform:translateY(6px);opacity:0}18%{opacity:.85}100%{transform:translateY(-88px);opacity:0}}
.film .f-twinkle{transform-box:fill-box;transform-origin:center;animation:f-twinkle 2.8s ease-in-out infinite}
@keyframes f-twinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
.film .f-drip{transform-box:fill-box;transform-origin:top center;animation:f-drip 3.6s ease-in infinite}
@keyframes f-drip{0%{transform:translateY(-4px) scaleY(.5);opacity:0}25%{opacity:1}100%{transform:translateY(56px) scaleY(1.5);opacity:0}}
.film .f-pulse{animation:glow-pulse 3s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.film .f-slide-in{animation:f-slide-in 1.2s cubic-bezier(.2,.85,.3,1) both}
@keyframes f-slide-in{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.film .f-thread{animation:f-thread 5.5s ease-in-out infinite}
@keyframes f-thread{0%{stroke-dashoffset:420}65%,100%{stroke-dashoffset:0}}

/* --- 详情正文 --- */
.detail-body{
  max-width:70ch;margin:clamp(16px,2.4vw,26px) auto 0;
  text-align:center;
}
.detail-blurb{
  font-family:var(--font-disp);
  font-size:clamp(15px,2vw,19px);line-height:1.7;color:var(--ink);
}
.detail-blurb::before,.detail-blurb::after{content:"～";color:var(--pink-d);margin:0 6px}
.detail-p{
  margin-top:14px;font-size:clamp(13.5px,1.6vw,15.5px);
  line-height:2;color:var(--ink-2);text-align:left;
  text-indent:2em;
}
.detail-sep{
  width:min(260px,60%);height:16px;margin:clamp(16px,2.4vw,26px) auto 0;
  background-image:radial-gradient(circle at 50% 50%, rgba(107,87,72,.32) 2.4px, transparent 3px);
  background-size:16px 6px;
  background-repeat:repeat-x;
  background-position:center;
}
.detail-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-top:clamp(18px,2.6vw,30px);
}
.detail-sign{font-size:12px;color:var(--ink-3);letter-spacing:.12em}

/* =========================================================
   8. 倒茶动画
   ========================================================= */
.pour{
  position:fixed;inset:0;z-index:90;
  display:none;
  place-items:center;
  align-content:center;
  gap:4px;
}
.pour.is-open{display:grid;animation:view-in .3s ease both}
.pour.is-closing{animation:view-out .34s ease forwards}
.pour-dim{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%, rgba(74,58,45,.5), rgba(48,36,28,.72));
  backdrop-filter:blur(7px);
}
.pour-scene{
  position:relative;width:min(440px,86vw);
  filter:drop-shadow(0 30px 40px rgba(20,12,8,.5));
}
.pour-scene svg{width:100%;height:auto}
.pour-caption{
  position:relative;margin-top:18px;text-align:center;
  color:#FFF3E2;font-family:var(--font-disp);
  font-size:clamp(15px,2.2vw,20px);
  letter-spacing:.06em;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.pour-caption small{display:block;margin-top:6px;font-size:12px;letter-spacing:.2em;color:rgba(255,243,226,.7)}

.p-stream{
  stroke-dasharray:260;
  stroke-dashoffset:260;
  animation:pour-stream 1.25s .3s cubic-bezier(.4,0,.5,1) forwards;
}
@keyframes pour-stream{to{stroke-dashoffset:0}}
.p-stream-drop{opacity:0;animation:pour-drop 1.4s 1.45s ease-in infinite}
@keyframes pour-drop{0%{opacity:0;transform:translateY(-6px)}30%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
.p-fill{
  transform-box:fill-box;transform-origin:bottom center;
  transform:scaleY(0);
  animation:pour-fill 1.3s 1.15s cubic-bezier(.36,.9,.4,1) forwards;
}
@keyframes pour-fill{to{transform:scaleY(1)}}
.p-pot{transform-box:fill-box;transform-origin:80% 70%;animation:pour-tilt 2.6s cubic-bezier(.3,.9,.4,1) both}
@keyframes pour-tilt{0%{transform:rotate(0)}22%{transform:rotate(-13deg)}78%{transform:rotate(-13deg)}100%{transform:rotate(-2deg)}}
.p-steam path{opacity:0;animation:f-rise 2.6s 1.9s ease-out infinite}
.p-steam path:nth-child(2){animation-delay:2.3s}
.p-steam path:nth-child(3){animation-delay:2.7s}
.p-ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:pour-ripple 1.8s 1.5s ease-out infinite}
@keyframes pour-ripple{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.p-sparkle{transform-box:fill-box;transform-origin:center;animation:f-twinkle 1.6s ease-in-out infinite}

/* =========================================================
   9. 小提示
   ========================================================= */
.toast{
  position:fixed;z-index:95;
  left:50%;bottom:34px;transform:translate(-50%,20px);
  padding:10px 20px;border-radius:99px;
  background:rgba(255,252,244,.96);
  border:2px solid rgba(107,87,72,.6);
  box-shadow:0 16px 26px -18px rgba(107,87,72,.95);
  font-size:13px;color:var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity .35s, transform .45s cubic-bezier(.34,1.4,.5,1);
}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   10. 响应式
   ========================================================= */
@media (max-width:980px){
  .cake-table{grid-template-columns:1fr;gap:22px}
  .cake-legend{max-width:520px}
}
@media (max-width:820px){
  .entrances{grid-template-columns:1fr;width:min(520px,100%)}
  .entrance{flex-direction:row}
  .tb-brand{display:none}
}
@media (max-width:720px){
  .plate-wrap{--pop-scale:.72}
  .narrow-only{display:inline}
  .view{padding-left:14px;padding-right:14px}
  .tray{padding:12px;border-radius:34px}
  .tray::before{inset:6px;border-radius:28px}
  .tray-handle{width:22px;height:64px}
  .tray-handle--l{left:-9px}
  .tray-handle--r{right:-9px}
  .lace-frame{--sc:10px}
  .lace-body{border-radius:20px;padding:14px}
  .lace-stitch{inset:7px;border-radius:14px}
  .tb-btn span{display:none}
  .tb-btn{padding:10px;border-radius:50%}
  .detail-foot{justify-content:center;text-align:center}
  .detail-sign{width:100%}
}
@media (max-width:520px){
  .tea-table{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .entrance-art{width:78px}
  .entrance-title{font-size:15px}
}
@media (hover:none){
  .plate-wrap .pop{opacity:1;transform:translate(-50%,-50%) scale(.96) rotate(0deg)}
  .hover-hint{opacity:0}
  .tea-card__go,.cake-slice__label{opacity:1}
}

/* =========================================================
   11. 减少动态效果
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .view.is-active,.view.is-leaving{animation:none}
  .plate-wrap .pop{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* =========================================================
   12. 新增：留言簿与下午茶茶签小游戏
   ========================================================= */
body.modal-open{overflow:hidden}

/* --- 新增首页入口：沿用原有 entrance 卡片语法 --- */
.entrances--extras{margin-top:clamp(8px,1.3vw,16px)}
.entrance--guestbook{--accent:#C97F55}
.entrance--game{--accent:#7E9B5E}
.entrance--guestbook .entrance-num,
.entrance--game .entrance-num{border-color:rgba(107,87,72,.62)}
.entrance--guestbook .entrance-prompt{background:rgba(201,127,85,.12)}
.entrance--game .entrance-prompt{background:rgba(126,155,94,.13)}

/* --- 新增弹窗共同结构 --- */
.tea-modal{
  position:fixed;inset:0;z-index:110;
  display:grid;place-items:center;
  padding:clamp(18px,4vw,52px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,visibility .32s ease;
}
.tea-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.tea-modal__dim{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,248,237,.18), rgba(74,58,45,.64) 74%),
    rgba(74,58,45,.26);
  backdrop-filter:blur(6px);
}
.tea-modal__panel{
  position:relative;z-index:1;
  width:min(920px,100%);
  max-height:calc(100vh - clamp(36px,8vw,104px));
  opacity:0;
  transform:translateY(28px) scale(.95) rotate(-.45deg);
  transform-origin:50% 72%;
}
.tea-modal.is-open .tea-modal__panel{
  /* 先保证内容可见，再由动画覆盖起始状态，避免缓存/减少动态效果时出现空弹窗。 */
  opacity:1;
  transform:none;
  animation:tea-modal-bloom .62s cubic-bezier(.2,.9,.28,1.08) forwards;
}
.tea-modal.is-closing .tea-modal__panel{animation:tea-modal-fold .3s ease forwards}
@keyframes tea-modal-bloom{
  0%{opacity:0;transform:translateY(28px) scale(.95) rotate(-.45deg)}
  62%{opacity:1;transform:translateY(-4px) scale(1.008) rotate(.15deg)}
  100%{opacity:1;transform:none}
}
@keyframes tea-modal-fold{
  to{opacity:0;transform:translateY(18px) scale(.97) rotate(.3deg)}
}
.tea-modal__close{
  position:absolute;z-index:5;top:-10px;right:-6px;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper);
  border:2px solid rgba(107,87,72,.68);
  color:var(--ink);
  box-shadow:0 12px 22px -14px rgba(107,87,72,.95);
  transition:transform .3s cubic-bezier(.34,1.4,.5,1),background .25s;
}
.tea-modal__close:hover{transform:rotate(8deg) scale(1.06);background:#fff}
.tea-modal__close:active{transform:scale(.96)}
.tea-modal__close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.modal-head{text-align:center;margin:6px auto clamp(18px,3vw,30px);max-width:620px}
.modal-kicker{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--rose);
  margin-bottom:7px;
}
.modal-head h2{
  font-family:var(--font-disp);
  font-size:clamp(25px,4vw,40px);
  line-height:1.2;font-weight:700;color:var(--ink);
}
.modal-head p:last-child{
  margin-top:9px;font-size:clamp(12.5px,1.5vw,14.5px);
  line-height:1.75;color:var(--ink-2);
}

/* --- 新增：手绘留言簿 --- */
.guestbook-modal{width:min(980px,100%)}
.guestbook-lace{--sc:12px}
.guestbook-paper{
  position:relative;
  max-height:calc(100vh - 118px);
  overflow:auto;
  padding:clamp(30px,4.5vw,50px) clamp(18px,4vw,44px) clamp(22px,3.5vw,36px);
  border-radius:28px;
  background:url("note-bg1.png") center/contain no-repeat;
  scrollbar-width:thin;
  scrollbar-color:rgba(107,87,72,.34) transparent;
}
.book-rings{
  position:absolute;top:10px;left:50%;
  display:flex;gap:clamp(10px,2.6vw,28px);
  transform:translateX(-50%);
  pointer-events:none;
}
.book-rings i{
  width:clamp(28px,4vw,42px);height:9px;
  border:2px solid rgba(107,87,72,.45);
  border-radius:99px;
  background:linear-gradient(180deg,#F7E6D4,#D9C1A7);
  box-shadow:0 4px 6px -4px rgba(107,87,72,.9),inset 0 1px 0 #fff;
}
.guestbook-grid{
  display:grid;
  grid-template-columns:minmax(260px,.88fr) minmax(300px,1.12fr);
  gap:clamp(18px,3.2vw,34px);
  align-items:start;
}
.guestbook-form{
  padding:clamp(16px,2.5vw,24px);
  background:rgba(255,252,244,.82);
  border:2px solid rgba(107,87,72,.25);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px #fff,0 16px 28px -26px rgba(107,87,72,.9);
}
.field{display:block}
.field+.field{margin-top:16px}
.field>span{
  display:block;margin-bottom:7px;
  font-size:12px;font-weight:700;color:var(--ink);
  letter-spacing:.08em;
}
.field input,.field textarea{
  display:block;width:100%;
  border:2px solid rgba(107,87,72,.28);
  border-radius:14px;
  background:rgba(255,253,247,.94);
  color:var(--ink);
  font:inherit;font-size:14px;line-height:1.7;
  padding:11px 13px;
  box-shadow:inset 0 2px 5px rgba(107,87,72,.06);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{resize:vertical;min-height:128px}
.field input::placeholder,.field textarea::placeholder{color:#BCAB98}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--matcha-d);
  background:#fff;
  box-shadow:0 0 0 4px rgba(169,192,139,.18),inset 0 2px 5px rgba(107,87,72,.04);
}
.guestbook-form-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:17px;
}
.guestbook-form-foot small{max-width:210px;font-size:10.5px;line-height:1.55;color:var(--ink-3)}
.guestbook-submit{flex:0 0 auto;padding:10px 17px;font-size:13px}
.guestbook-board{
  min-height:410px;
  padding:clamp(15px,2.2vw,21px);
  border:2px solid rgba(107,87,72,.24);
  border-radius:20px;
  background:rgba(255,248,236,.78);
  box-shadow:inset 0 0 0 1px #fff;
}
.guestbook-board-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:2px dashed rgba(107,87,72,.2);
}
.guestbook-board-head h3{font-family:var(--font-disp);font-size:19px}
.guestbook-board-head span{
  font-size:11px;color:var(--ink-2);
  background:rgba(246,201,206,.5);
  border:1.5px solid rgba(107,87,72,.25);
  border-radius:99px;padding:3px 9px;
}
.guestbook-list{
  display:flex;flex-direction:column;gap:12px;
  max-height:min(43vh,430px);margin-top:14px;
  padding:2px 4px 4px 2px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(107,87,72,.34) transparent;
}
.guestbook-note{
  position:relative;
  padding:13px 15px 12px;
  background:rgba(255,253,247,.96);
  border:1.8px solid rgba(107,87,72,.25);
  border-radius:16px;
  box-shadow:0 12px 22px -20px rgba(107,87,72,.95);
  animation:guest-note-in .6s cubic-bezier(.2,.9,.3,1.08) both;
}
.guestbook-note::before{
  content:"";position:absolute;right:18px;top:-6px;
  width:38px;height:11px;
  background:rgba(246,201,206,.65);
  border:1px solid rgba(107,87,72,.18);
  border-radius:3px;
  transform:rotate(3deg);
}
.guestbook-note:nth-child(2n)::before{background:rgba(169,192,139,.48);transform:rotate(-3deg)}
.guestbook-note-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.guestbook-note-name{
  font-family:var(--font-disp);font-size:14.5px;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere;
}
.guestbook-note-time{flex:0 0 auto;font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.guestbook-note p{
  margin-top:7px;font-size:13px;line-height:1.75;color:var(--ink-2);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.guestbook-empty{
  min-height:280px;
  display:grid;place-items:center;
  padding:24px;text-align:center;
  color:var(--ink-3);font-size:13px;line-height:1.8;
}
.guestbook-empty svg{width:70px;height:70px;margin:0 auto 12px;fill:none;stroke:#B9A794;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes guest-note-in{from{opacity:0;transform:translateY(12px) rotate(-.6deg) scale(.97)}to{opacity:1;transform:none}}

/* --- 新增：茶签抽签小游戏 --- */
.fortune-modal{width:min(940px,100%)}
.fortune-lace{--sc:12px}
.fortune-paper{
  max-height:calc(100vh - 118px);
  overflow:auto;
  padding:clamp(22px,3.8vw,42px);
  border-radius:28px;
  background:
    radial-gradient(circle at 13% 18%,rgba(246,201,206,.18),transparent 27%),
    radial-gradient(circle at 88% 76%,rgba(169,192,139,.2),transparent 28%),
    var(--paper);
  scrollbar-width:thin;
  scrollbar-color:rgba(107,87,72,.34) transparent;
}
.fortune-stage{
  display:grid;
  grid-template-columns:minmax(230px,.82fr) minmax(320px,1.18fr);
  gap:clamp(18px,3.5vw,44px);
  align-items:center;
}
.fortune-picker{
  display:grid;justify-items:center;
  padding:clamp(10px,2vw,20px);
}
.fortune-tip{
  margin-bottom:8px;
  font-size:12px;font-weight:700;color:var(--ink-2);
  letter-spacing:.08em;
}
.fortune-pot{
  position:relative;
  width:min(240px,64vw);
  padding:0;
  background:transparent;
  border:0;
  filter:drop-shadow(0 20px 18px rgba(107,87,72,.25));
  transition:transform .35s cubic-bezier(.34,1.4,.5,1),filter .3s;
}
.fortune-pot:hover{transform:translateY(-7px) rotate(-1.2deg);filter:drop-shadow(0 25px 22px rgba(107,87,72,.32))}
.fortune-pot:active{transform:translateY(-2px) scale(.99)}
.fortune-pot svg{width:100%;height:auto;overflow:visible}
.fortune-pot.is-shaking{animation:fortune-shake .72s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fortune-shake{
  0%,100%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-9px) rotate(-3deg)}
  28%{transform:translateX(8px) rotate(2.5deg)}
  44%{transform:translateX(-7px) rotate(-2deg)}
  60%{transform:translateX(6px) rotate(2deg)}
  76%{transform:translateX(-3px) rotate(-1deg)}
}
.fortune-spark{transform-box:fill-box;transform-origin:center;animation:f-twinkle 2.6s ease-in-out infinite}
.fortune-spark:nth-child(2){animation-delay:-.9s}
.fortune-spark:nth-child(3){animation-delay:-1.7s}

.fortune-result{
  position:relative;
  min-height:370px;
  display:grid;place-items:center;
}
.fortune-card-empty{
  max-width:290px;
  text-align:center;
  color:var(--ink-3);
  font-size:13px;line-height:1.9;
  transition:opacity .35s,transform .45s;
}
.fortune-empty-leaf{
  display:block;
  width:54px;height:34px;margin:0 auto 15px;
  border:2.5px solid #A9C08B;
  border-radius:70% 18% 70% 18%;
  transform:rotate(-18deg);
  position:relative;
}
.fortune-empty-leaf::after{
  content:"";position:absolute;left:7px;top:15px;
  width:41px;height:2px;background:#7E9B5E;
  transform:rotate(29deg);transform-origin:left center;
}
.fortune-result.is-revealed .fortune-card-empty{opacity:0;transform:translateY(-10px) scale(.95)}
.fortune-card{
  position:absolute;
  width:min(360px,100%);
  min-height:330px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,38px);
  text-align:center;
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),transparent 45%),
    linear-gradient(160deg,#FFFCF4,#FFF4E4);
  border:2.5px solid rgba(107,87,72,.68);
  border-radius:22px;
  box-shadow:0 28px 42px -30px rgba(107,87,72,.95),inset 0 0 0 6px rgba(246,201,206,.2);
  opacity:0;
  transform:translateY(38px) scale(.72) rotate(3deg);
  transform-origin:50% 100%;
  pointer-events:none;
}
.fortune-card::before{
  content:"";position:absolute;inset:9px;
  border:2px dashed rgba(107,87,72,.22);
  border-radius:15px;pointer-events:none;
}
.fortune-card::after{
  content:"";position:absolute;left:50%;bottom:-9px;
  width:68px;height:18px;
  background:rgba(169,192,139,.42);
  border:1px solid rgba(107,87,72,.18);
  border-radius:3px;
  transform:translateX(-50%) rotate(-2deg);
}
.fortune-result.is-revealed .fortune-card{
  animation:fortune-unfold .82s cubic-bezier(.18,.96,.3,1.12) forwards;
  pointer-events:auto;
}
@keyframes fortune-unfold{
  0%{opacity:0;transform:translateY(38px) scale(.72) rotate(3deg)}
  58%{opacity:1;transform:translateY(-8px) scale(1.035) rotate(-.7deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
.fortune-no{
  position:relative;z-index:1;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);
}
.fortune-card-mark{position:relative;z-index:1;margin:16px 0 13px}
.fortune-card-mark svg{width:50px;height:50px;fill:#F6C9CE;stroke:#6B5748;stroke-width:2.5}
.fortune-text{
  position:relative;z-index:1;
  font-family:var(--font-disp);
  font-size:clamp(17px,2.4vw,23px);
  line-height:1.75;color:var(--ink);
}
.fortune-note{
  position:relative;z-index:1;
  margin-top:15px;font-size:11px;line-height:1.65;color:var(--ink-3);
  letter-spacing:.06em;
}
.fortune-actions{display:flex;justify-content:center;margin-top:clamp(14px,2.4vw,24px)}
#fortune-again{transition:opacity .3s,transform .3s,background .3s,box-shadow .3s}
#fortune-again:disabled{opacity:.42;cursor:default;transform:none}

@media (max-width:760px){
  .tea-modal{padding:14px}
  .tea-modal__close{top:-7px;right:-2px;width:38px;height:38px}
  .guestbook-paper,.fortune-paper{max-height:calc(100vh - 58px)}
  .guestbook-grid,.fortune-stage{grid-template-columns:1fr}
  .guestbook-board{min-height:250px}
  .guestbook-list{max-height:280px}
  .fortune-stage{gap:4px}
  .fortune-picker{padding-bottom:0}
  .fortune-pot{width:min(205px,58vw)}
  .fortune-result{min-height:345px}
}

@media (max-width:520px){
  .entrances--extras{width:100%}
  .guestbook-form-foot{align-items:stretch;flex-direction:column}
  .guestbook-form-foot small{max-width:none}
  .guestbook-submit{justify-content:center}
  .guestbook-paper,.fortune-paper{padding:24px 14px 18px}
  .book-rings{gap:12px}
  .book-rings i{width:29px}
  .modal-head{margin-bottom:16px}
  .fortune-result{min-height:330px}
  .fortune-card{min-height:300px;padding:22px 17px}
}

/* 新增动效同样尊重系统的“减少动态效果”设置。 */
@media (prefers-reduced-motion:reduce){
  .guestbook-note,
  .fortune-pot.is-shaking,
  .fortune-result.is-revealed .fortune-card{
    animation:none !important;
  }
  .tea-modal.is-open .tea-modal__panel{
    animation:none !important;
    opacity:1;
    transform:none;
  }
  .tea-modal.is-closing .tea-modal__panel{
    animation:none !important;
    opacity:0;
    transform:translateY(10px);
  }
  .fortune-result.is-revealed .fortune-card{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   13. 新增：灵宝茶茶签（独立增量，不改动旧签筒样式）
   ========================================================= */
.lingbao-fortune-panel{
  display:none;
  width:min(980px,100%);
}
#modal-fortune.is-lingbao-ready > .fortune-modal{display:none}
#modal-fortune.is-lingbao-ready > .lingbao-fortune-panel{display:block}

.lingbao-fortune-lace{--sc:12px}
.lingbao-fortune-paper{
  max-height:calc(100vh - 118px);
  overflow:auto;
  padding:clamp(22px,3.8vw,42px);
  border-radius:28px;
  background:
    radial-gradient(circle at 11% 14%,rgba(242,208,138,.2),transparent 28%),
    radial-gradient(circle at 89% 80%,rgba(169,192,139,.22),transparent 29%),
    radial-gradient(circle at 76% 12%,rgba(246,201,206,.16),transparent 24%),
    var(--paper);
  scrollbar-width:thin;
  scrollbar-color:rgba(107,87,72,.34) transparent;
}

.lingbao-fortune-stage{
  display:grid;
  grid-template-columns:minmax(230px,.82fr) minmax(320px,1.18fr);
  gap:clamp(18px,3.5vw,44px);
  align-items:center;
}
.lingbao-fortune-picker{
  display:grid;
  justify-items:center;
  padding:clamp(10px,2vw,20px);
}
.lingbao-fortune-tip{
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-2);
  letter-spacing:.08em;
  text-align:center;
}
.lingbao-fortune-pot{
  position:relative;
  width:min(240px,64vw);
  padding:0;
  background:transparent;
  border:0;
  filter:drop-shadow(0 20px 18px rgba(107,87,72,.25));
  transition:transform .35s cubic-bezier(.34,1.4,.5,1),filter .3s;
}
.lingbao-fortune-pot:hover{
  transform:translateY(-7px) rotate(-1.2deg);
  filter:drop-shadow(0 25px 22px rgba(107,87,72,.32));
}
.lingbao-fortune-pot:active{transform:translateY(-2px) scale(.99)}
.lingbao-fortune-pot:disabled{cursor:default}
.lingbao-fortune-pot svg{width:100%;height:auto;overflow:visible}
.lingbao-fortune-pot.is-shaking{animation:lingbao-pot-shake .74s cubic-bezier(.36,.07,.19,.97) both}
@keyframes lingbao-pot-shake{
  0%,100%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-9px) rotate(-3deg)}
  28%{transform:translateX(8px) rotate(2.5deg)}
  44%{transform:translateX(-7px) rotate(-2deg)}
  60%{transform:translateX(6px) rotate(2deg)}
  76%{transform:translateX(-3px) rotate(-1deg)}
}
.lingbao-fortune-spark{
  transform-box:fill-box;
  transform-origin:center;
  animation:f-twinkle 2.6s ease-in-out infinite;
}
.lingbao-fortune-spark:nth-child(2){animation-delay:-.9s}
.lingbao-fortune-spark:nth-child(3){animation-delay:-1.7s}

.lingbao-fortune-result{
  position:relative;
  min-height:390px;
  display:grid;
  place-items:center;
}
.lingbao-fortune-placeholder{
  max-width:300px;
  text-align:center;
  color:var(--ink-3);
  font-size:13px;
  line-height:1.9;
  transition:opacity .35s,transform .45s;
}
.lingbao-fortune-placeholder-mark{
  display:block;
  margin-bottom:12px;
  font-size:34px;
  line-height:1;
  color:#D6A23F;
  animation:lingbao-star-breathe 3s ease-in-out infinite;
}
@keyframes lingbao-star-breathe{
  0%,100%{transform:rotate(-5deg) scale(.92);opacity:.72}
  50%{transform:rotate(5deg) scale(1.08);opacity:1}
}
.lingbao-fortune-result.is-revealed .lingbao-fortune-placeholder{
  opacity:0;
  transform:translateY(-10px) scale(.95);
}

.lingbao-fortune-card{
  position:absolute;
  width:min(390px,100%);
  min-height:350px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,4vw,40px);
  text-align:center;
  border:2.5px solid rgba(107,87,72,.62);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),transparent 45%),
    linear-gradient(160deg,#FFFCF4,#FFF4E4);
  box-shadow:
    0 28px 42px -30px rgba(107,87,72,.95),
    inset 0 0 0 6px rgba(246,201,206,.17);
  opacity:0;
  transform:translateY(38px) scale(.72) rotate(3deg);
  transform-origin:50% 100%;
  pointer-events:none;
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.lingbao-fortune-card[data-level="upper"]{
  border-color:rgba(184,137,45,.68);
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),transparent 43%),
    linear-gradient(160deg,#FFFDF2,#F8E9B9);
  box-shadow:
    0 28px 44px -30px rgba(128,91,25,.8),
    inset 0 0 0 6px rgba(242,208,138,.26);
}
.lingbao-fortune-card[data-level="good"]{
  border-color:rgba(111,146,88,.68);
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),transparent 43%),
    linear-gradient(160deg,#F3FBF2,#DFF1E1);
  box-shadow:
    0 28px 44px -30px rgba(78,116,66,.8),
    inset 0 0 0 6px rgba(169,192,139,.24);
}
.lingbao-fortune-card[data-level="peace"]{
  border-color:rgba(150,127,101,.58);
  background:
    linear-gradient(145deg,rgba(255,255,255,.86),transparent 43%),
    linear-gradient(160deg,#FFFEF9,#F8F0E6);
  box-shadow:
    0 28px 44px -30px rgba(107,87,72,.72),
    inset 0 0 0 6px rgba(245,234,214,.36);
}
.lingbao-fortune-card::before{
  content:"";
  position:absolute;
  inset:9px;
  border:2px dashed rgba(107,87,72,.2);
  border-radius:15px;
  pointer-events:none;
}
.lingbao-fortune-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:68px;
  height:18px;
  background:rgba(242,208,138,.42);
  border:1px solid rgba(107,87,72,.18);
  border-radius:3px;
  transform:translateX(-50%) rotate(-2deg);
}
.lingbao-fortune-card[data-level="good"]::after{background:rgba(169,192,139,.42)}
.lingbao-fortune-card[data-level="peace"]::after{background:rgba(246,201,206,.36)}
.lingbao-fortune-result.is-revealed .lingbao-fortune-card{
  animation:lingbao-card-unfold .86s cubic-bezier(.18,.96,.3,1.12) forwards;
  pointer-events:auto;
}
@keyframes lingbao-card-unfold{
  0%{opacity:0;transform:translateY(38px) scale(.72) rotate(3deg)}
  58%{opacity:1;transform:translateY(-8px) scale(1.035) rotate(-.7deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
.lingbao-fortune-level{
  position:relative;
  z-index:1;
  font-family:var(--font-disp);
  font-size:clamp(20px,3vw,29px);
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}
.lingbao-fortune-card[data-level="upper"] .lingbao-fortune-level{color:#9A6E18}
.lingbao-fortune-card[data-level="good"] .lingbao-fortune-level{color:#5F824C}
.lingbao-fortune-card[data-level="peace"] .lingbao-fortune-level{color:#756454}
.lingbao-fortune-poem{
  position:relative;
  z-index:1;
  margin-top:18px;
  font-family:var(--font-disp);
  font-size:clamp(17px,2.3vw,22px);
  line-height:1.85;
  color:var(--ink);
  white-space:pre-line;
}
.lingbao-fortune-note{
  position:relative;
  z-index:1;
  display:block;
  margin-top:17px;
  padding-top:14px;
  font-size:11.5px;
  line-height:1.75;
  color:var(--ink-2);
  letter-spacing:.05em;
}
.lingbao-fortune-note::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(150px,55%);
  height:1px;
  background:repeating-linear-gradient(90deg,rgba(107,87,72,.32) 0 5px,transparent 5px 10px);
  transform:translateX(-50%);
}

.lingbao-fortune-actions{
  display:flex;
  justify-content:center;
  margin-top:clamp(14px,2.4vw,24px);
}
#lingbao-fortune-again{
  transition:opacity .3s,transform .3s,background .3s,box-shadow .3s;
}
#lingbao-fortune-again:disabled{
  opacity:.42;
  cursor:default;
  transform:none;
}
.lingbao-fortune-footer{
  position:sticky;
  z-index:4;
  bottom:0;
  margin:clamp(16px,2.6vw,24px) auto 0;
  padding:11px 18px 5px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  line-height:1.6;
  color:var(--ink-2);
  letter-spacing:.08em;
  background:linear-gradient(180deg,rgba(255,252,244,0),rgba(255,252,244,.96) 32%);
  border-top:2px dashed rgba(107,87,72,.16);
}

@media (max-width:760px){
  .lingbao-fortune-panel{width:min(760px,100%)}
  .lingbao-fortune-paper{max-height:calc(100vh - 58px)}
  .lingbao-fortune-stage{grid-template-columns:1fr;gap:4px}
  .lingbao-fortune-picker{padding-bottom:0}
  .lingbao-fortune-pot{width:min(205px,58vw)}
  .lingbao-fortune-result{min-height:365px}
}

@media (max-width:520px){
  .lingbao-fortune-paper{padding:16px 10px 12px}
  .lingbao-fortune-tip{margin-bottom:3px;font-size:10.5px}
  .lingbao-fortune-pot{width:min(154px,44vw)}
  .lingbao-fortune-result{min-height:255px}
  .lingbao-fortune-card{width:min(320px,100%);min-height:238px;padding:16px 12px}
  .lingbao-fortune-level{font-size:18px}
  .lingbao-fortune-poem{margin-top:10px;font-size:15px;line-height:1.55}
  .lingbao-fortune-note{margin-top:10px;padding-top:9px;font-size:10.5px;line-height:1.5}
  .lingbao-fortune-actions{margin-top:8px}
  .lingbao-fortune-footer{
    position:static;
    margin-top:8px;
    padding:6px 8px 0;
    font-size:11px;
    background:none;
  }
}

@media (max-width:520px) and (max-height:700px){
  .lingbao-fortune-pot{width:min(132px,38vw)}
  .lingbao-fortune-result{min-height:222px}
  .lingbao-fortune-card{
    min-height:210px;
    padding:12px 10px;
  }
  .lingbao-fortune-level{font-size:17px}
  .lingbao-fortune-poem{
    margin-top:8px;
    font-size:14px;
    line-height:1.45;
  }
  .lingbao-fortune-note{
    margin-top:7px;
    padding-top:7px;
    font-size:10px;
    line-height:1.4;
  }
  .lingbao-fortune-actions{margin-top:5px}
  #lingbao-fortune-again{padding:8px 15px;font-size:13px}
  .lingbao-fortune-footer{
    margin-top:5px;
    padding-top:4px;
  }
}

@media (prefers-reduced-motion:reduce){
  .lingbao-fortune-pot.is-shaking,
  .lingbao-fortune-placeholder-mark,
  .lingbao-fortune-spark,
  .lingbao-fortune-result.is-revealed .lingbao-fortune-card{
    animation:none !important;
  }
  .lingbao-fortune-result.is-revealed .lingbao-fortune-card{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   14. 新增：茶杯 / 蛋糕详情页“返回茶桌”按钮
   ========================================================= */
.detail-tier-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.detail-back-tier{
  border-color:rgba(107,87,72,.58);
  background:rgba(255,252,244,.92);
}
.detail-back-tier:hover{
  background:rgba(246,201,206,.34);
}
.detail-back-tier:active{
  transform:translateY(1px) scale(.99);
}

@media (max-width:720px){
  .detail-tier-actions{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   15. 彩虹手账视觉升级（仅视觉覆盖，不改结构与交互）
   ========================================================= */
:root{
  --cream:#FFF4C9;
  --cream-2:#FFE7A8;
  --paper:#FFFCF5;
  --paper-2:#FFF3D2;
  --pink:#FFB7C8;
  --pink-d:#F47C9B;
  --rose:#D7486B;
  --matcha:#8FD29A;
  --matcha-d:#5DAA6F;
  --ink:#5B4738;
  --ink-2:#795F4E;
  --ink-3:#A38671;
  --butter:#FFD86B;
  --mint:#9BE0CF;
  --sky:#9CD8F3;
  --cocoa:#D77A3F;
  --line:rgba(91,71,56,.78);
  --shadow-soft:0 18px 34px -20px rgba(142,87,62,.38);
  --shadow-card:0 26px 48px -26px rgba(142,87,62,.42);
}

body{
  background:
    linear-gradient(135deg,#FFF5CB 0%,#FFE9D0 36%,#EAF6D8 68%,#DFF2FA 100%);
}

/* --- 彩虹拼布桌布 --- */
.quilt{
  background:#FBE4B5;
  box-shadow:
    inset 0 0 140px rgba(176,91,61,.14),
    inset 0 0 0 1px rgba(255,255,255,.52);
}
.patch{
  border-color:rgba(116,75,52,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 10px 18px -14px rgba(116,75,52,.28);
}
.patch::after{
  border-color:rgba(255,255,255,.78);
}
.patch:nth-child(12n+1){background-color:#FFF2B1 !important}
.patch:nth-child(12n+2){background-color:#FFB8CA !important}
.patch:nth-child(12n+3){background-color:#A9E1B6 !important}
.patch:nth-child(12n+4){background-color:#A6DCF4 !important}
.patch:nth-child(12n+5){background-color:#FFD1A3 !important}
.patch:nth-child(12n+6){background-color:#D9C6F2 !important}
.patch:nth-child(12n+7){background-color:#FFE48D !important}
.patch:nth-child(12n+8){background-color:#B8E8D6 !important}
.patch:nth-child(12n+9){background-color:#FFC1B1 !important}
.patch:nth-child(12n+10){background-color:#C9E39B !important}
.patch:nth-child(12n+11){background-color:#FFC9DC !important}
.patch:nth-child(12n+12){background-color:#B9D9FF !important}
.p-dots{
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 2.8px,transparent 3.2px);
}
.p-stripe{
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.58) 0 6px,transparent 6px 13px);
}
.p-check{
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.48) 0 5px,transparent 5px 12px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.48) 0 5px,transparent 5px 12px);
}
.p-wave{
  background-image:
    radial-gradient(circle at 50% 100%,rgba(255,255,255,.78) 5px,transparent 5.4px),
    radial-gradient(circle at 50% 0,rgba(255,255,255,.78) 5px,transparent 5.4px);
}
.p-leaf{
  background-image:
    radial-gradient(ellipse 5px 3px at 30% 30%,rgba(255,255,255,.88),transparent 70%),
    radial-gradient(ellipse 5px 3px at 70% 70%,rgba(255,255,255,.88),transparent 70%);
}
.quilt-vignette{
  background:
    radial-gradient(120% 90% at 50% 42%,transparent 45%,rgba(116,75,52,.1) 100%),
    linear-gradient(180deg,rgba(255,252,236,.28),transparent 22%,transparent 78%,rgba(116,75,52,.06));
}
.paper-grain{
  opacity:.16;
  mix-blend-mode:soft-light;
}

/* --- 顶栏与首页标题 --- */
.tb-btn{
  border-color:rgba(91,71,56,.58);
  box-shadow:
    0 9px 18px -11px rgba(123,78,56,.72),
    inset 0 -2px 0 rgba(91,71,56,.07);
}
.tb-btn--home{
  background:linear-gradient(160deg,#FFF7C5,#FFD86C);
}
.tb-btn--sound{
  background:linear-gradient(160deg,#EDFFF6,#A8E6D4);
}
.tb-btn--sound:not(.is-on){
  background:linear-gradient(160deg,#F4F5EC,#D9DED1);
}
.tb-btn:hover{
  background-color:#FFFDF5;
  box-shadow:0 15px 24px -12px rgba(123,78,56,.58);
}
.home-eyebrow{
  color:#B55270;
  font-weight:700;
  text-shadow:0 1px 0 #FFFDF7;
}

/* --- 餐盘主视觉与彩色小装饰 --- */
.home-inner{
  position:relative;
  isolation:isolate;
}
.home-inner::before{
  content:"✦   ♡   ✦";
  position:absolute;
  z-index:-1;
  left:-1.5%;
  top:3%;
  color:#FF8FA9;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(17px,2vw,26px);
  font-weight:700;
  line-height:1;
  letter-spacing:.62em;
  text-shadow:
    .22em .05em 0 #FFD44F,
    .44em .02em 0 #78CE8B;
  opacity:.9;
  transform:rotate(-7deg);
  pointer-events:none;
  white-space:nowrap;
}
.home-inner::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-2%;
  top:31%;
  width:104px;
  height:132px;
  background:
    radial-gradient(ellipse 10px 5px at 26% 9%,#71C985 0 99%,transparent 100%),
    radial-gradient(circle at 26% 18%,#FF718F 0 7px,transparent 7.5px),
    radial-gradient(ellipse 9px 4px at 74% 48%,#71C985 0 99%,transparent 100%),
    radial-gradient(circle at 74% 56%,#FF9D4D 0 7px,transparent 7.5px),
    radial-gradient(ellipse 8px 4px at 36% 88%,#71C985 0 99%,transparent 100%),
    radial-gradient(circle at 36% 96%,#F27DA2 0 6px,transparent 6.5px);
  opacity:.86;
  transform:rotate(8deg);
  pointer-events:none;
}
.plate-wrap::before{
  content:"✦";
  position:absolute;
  z-index:0;
  left:-2%;
  top:12%;
  color:#FFD044;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1;
  text-shadow:
    2.6em 2.3em 0 #FF86A4,
    10.8em .8em 0 #83D596,
    13.2em 2.7em 0 #76C7E5;
  opacity:.92;
  transform:rotate(-8deg);
  pointer-events:none;
}
.plate-wrap::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-4% -6%;
  background:
    radial-gradient(ellipse 10px 5px at 8% 68%,#72C885 0 99%,transparent 100%),
    radial-gradient(circle at 8% 76%,#FF718F 0 7px,transparent 7.5px),
    radial-gradient(ellipse 9px 4px at 92% 31%,#72C885 0 99%,transparent 100%),
    radial-gradient(circle at 92% 39%,#FF9C4A 0 7px,transparent 7.5px),
    radial-gradient(ellipse 8px 4px at 17% 14%,#72C885 0 99%,transparent 100%),
    radial-gradient(circle at 17% 22%,#F47C9B 0 6px,transparent 6.5px);
  opacity:.82;
  pointer-events:none;
}
.plate-svg{
  filter:drop-shadow(0 26px 25px rgba(143,83,60,.24)) saturate(1.18) contrast(1.025);
}
#plateWell stop:first-child{stop-color:#FFFDF2}
#plateWell stop:nth-child(2){stop-color:#FFF4D5}
#plateWell stop:nth-child(3){stop-color:#FFE6B6}
#plateRim stop:first-child{stop-color:#FFFDF6}
#plateRim stop:nth-child(2){stop-color:#FFF3D7}
#plateRim stop:nth-child(3){stop-color:#F6D5AA}
.plate-svg ellipse[opacity=".55"]{fill:#F6BE85}
.plate-svg ellipse[stroke="#E9A7B0"]{stroke:#F47C9B}
.plate-svg g[fill="#A9C08B"] path{fill:#83D295}
.plate-svg g[fill="#F6C9CE"] circle{fill:#FF8DAA}
.plate-title{
  color:#5B4738;
  text-shadow:
    0 2px 0 #FFFDF7,
    0 5px 0 rgba(255,216,107,.38),
    0 8px 14px rgba(123,78,56,.13);
}
.plate-kicker{color:#D7486B}
.plate-sub{color:#795F4E}
.hover-hint{
  color:#654B3C;
  background:linear-gradient(150deg,#FFFDF4,#FFE89C);
  border:1.5px solid #E989A5;
  box-shadow:
    0 7px 16px -9px rgba(123,78,56,.72),
    inset 0 -2px 0 rgba(231,123,151,.14);
}
.pop svg{
  filter:saturate(1.14) contrast(1.025);
}
.pop::before{
  background:
    radial-gradient(circle,rgba(255,247,194,.96),rgba(255,214,107,.32) 42%,transparent 72%);
}

/* --- 首页四类入口：薄荷 / 草莓 / 奶油 / 天蓝 --- */
.entrance{
  border-color:rgba(91,71,56,.54);
  box-shadow:
    0 17px 32px -21px rgba(123,78,56,.72),
    inset 0 -3px 0 rgba(91,71,56,.055),
    inset 0 1px 0 rgba(255,255,255,.78);
}
.entrance--tea{
  --accent:#57B46E;
  background:linear-gradient(145deg,#FBFFF5 0%,#DDF5D9 55%,#BDE9C8 100%);
  border-color:rgba(79,153,96,.58);
}
.entrance--cake{
  --accent:#E36689;
  background:linear-gradient(145deg,#FFF9F5 0%,#FFDDE5 55%,#FFC0D0 100%);
  border-color:rgba(211,95,129,.56);
}
.entrance--guestbook{
  --accent:#C88922;
  background:linear-gradient(145deg,#FFFDF2 0%,#FFF0B5 55%,#FFD978 100%);
  border-color:rgba(197,140,39,.56);
}
.entrance--game{
  --accent:#3F96B8;
  background:linear-gradient(145deg,#F8FDFF 0%,#D9F2FA 55%,#B5E2F3 100%);
  border-color:rgba(76,160,192,.56);
}
.entrance:hover{
  box-shadow:
    0 28px 42px -23px rgba(123,78,56,.65),
    inset 0 1px 0 rgba(255,255,255,.88);
}
.entrance-num{
  border-color:rgba(91,71,56,.48);
  box-shadow:
    0 3px 0 rgba(91,71,56,.14),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.entrance-prompt{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,#FFFDF6);
}
.entrance-sub{color:#755A49}
.home-foot{color:#8B684F}

/* --- 选择页与作品卡片 --- */
.pick-kicker,
.modal-kicker,
.detail-kicker{color:#D7486B}
.pick-head h2{
  color:#5B4738;
  text-shadow:
    0 2px 0 #FFFDF7,
    0 5px 0 rgba(255,216,107,.28);
}
.tea-card:hover,
.tea-card:focus-visible{
  background:linear-gradient(160deg,rgba(255,253,245,.96),rgba(255,226,235,.8));
  box-shadow:
    0 22px 38px -24px rgba(123,78,56,.68),
    inset 0 0 0 2px rgba(244,124,155,.22);
}
.tea-card__cup svg,
.cake-stage svg{
  filter:saturate(1.14) contrast(1.025);
}
.tea-card__cupname{
  border-color:rgba(91,71,56,.38);
  box-shadow:0 4px 9px -7px rgba(91,71,56,.75);
}
.cake-leg{
  background:linear-gradient(145deg,rgba(255,253,245,.96),rgba(255,241,200,.88));
  border-color:rgba(91,71,56,.24);
}
.cake-legend li:nth-child(4n+1) .cake-leg{background:linear-gradient(145deg,#FFFBEA,#FFF0B8)}
.cake-legend li:nth-child(4n+2) .cake-leg{background:linear-gradient(145deg,#FFF9FA,#FFDCE5)}
.cake-legend li:nth-child(4n+3) .cake-leg{background:linear-gradient(145deg,#F7FFF7,#DDF3DE)}
.cake-legend li:nth-child(4n+4) .cake-leg{background:linear-gradient(145deg,#F8FDFF,#D8EFFA)}
.cake-leg:hover,
.cake-leg.is-hot{
  background:var(--paper);
  box-shadow:0 16px 27px -20px rgba(123,78,56,.72);
}

/* --- 通用按钮 --- */
.btn{
  border-color:rgba(91,71,56,.58);
  box-shadow:
    0 12px 22px -16px rgba(123,78,56,.72),
    inset 0 1px 0 rgba(255,255,255,.72);
}
.btn--ghost{
  background:linear-gradient(150deg,rgba(255,253,244,.98),rgba(255,226,151,.92));
}
.btn--solid{
  color:#FFFDF7;
  background:linear-gradient(145deg,#78C98A,#4FA969);
  text-shadow:0 1px 0 rgba(70,91,54,.36);
}
.btn--solid:hover{
  background:linear-gradient(145deg,#65BB77,#3E9459);
}
.detail-back-tier{
  background:linear-gradient(150deg,#FFFDF4,#FFE39A);
  border-color:rgba(178,119,37,.5);
}
.detail-back-tier:hover{
  background:linear-gradient(150deg,#FFFCEF,#FFD86B);
}

/* --- 详情托盘与蕾丝卡片 --- */
.tray{
  background:linear-gradient(155deg,#FFF9E8 0%,#FFE2B7 54%,#F3C488 100%);
  border-color:rgba(164,91,48,.4);
  box-shadow:
    inset 0 2px 0 #FFFDF7,
    inset 0 -9px 18px rgba(143,83,52,.14),
    0 34px 54px -30px rgba(123,78,56,.7);
}
.tray::before{border-color:rgba(164,91,48,.18)}
.tray-handle{
  background:linear-gradient(180deg,#FFF9E8,#F0C88F);
  border-color:rgba(164,91,48,.38);
}
.lace-body{
  background:linear-gradient(155deg,#FFFDF8 0%,#FFF9E9 68%,#FFF2D2 100%);
  border-color:rgba(211,117,125,.38);
  box-shadow:
    inset 0 0 0 1px #FFF,
    inset 0 -14px 26px -22px rgba(123,78,56,.44);
}
.lace-stitch{border-color:rgba(211,117,125,.28)}
.detail-tags li{
  border-color:rgba(91,71,56,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
.film-fill{
  background:linear-gradient(90deg,#F47C9B,#FFD447,#7CD18D,#74C8E4);
}

/* --- 弹窗共同外观 --- */
.tea-modal__dim{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,213,83,.25),transparent 32%),
    radial-gradient(circle at 82% 78%,rgba(150,214,239,.24),transparent 34%),
    radial-gradient(circle at 75% 18%,rgba(255,160,185,.2),transparent 30%),
    rgba(91,71,56,.3);
}
.tea-modal__close{
  background:linear-gradient(145deg,#FFF9EE,#FFD4DE);
  border-color:rgba(91,71,56,.52);
  box-shadow:0 13px 23px -14px rgba(123,78,56,.78);
}
.tea-modal__close:hover{
  background:linear-gradient(145deg,#FFFDF7,#FFE28F);
}

/* --- 茶桌留言簿 --- */
.guestbook-paper{
  background:url("note-bg1.png") center/contain no-repeat;
}
.book-rings i{
  background:linear-gradient(180deg,#FFD1DC,#E8A2B5);
  border-color:rgba(91,71,56,.4);
}
.book-rings i:nth-child(2n){background:linear-gradient(180deg,#FFE9A0,#D9B74F)}
.book-rings i:nth-child(3n){background:linear-gradient(180deg,#BDEBCB,#78BC88)}
.guestbook-form{
  background:
    radial-gradient(circle at 90% 8%,rgba(143,210,154,.18),transparent 32%),
    linear-gradient(150deg,rgba(255,253,247,.98),rgba(255,238,194,.84));
  border-color:rgba(205,145,46,.36);
  box-shadow:
    inset 0 0 0 1px #FFF,
    0 16px 28px -26px rgba(123,78,56,.72);
}
.field input,
.field textarea{
  border-color:rgba(91,71,56,.25);
  background:rgba(255,254,248,.98);
}
.field input:focus,
.field textarea:focus{
  border-color:#5DAA6F;
  box-shadow:0 0 0 4px rgba(143,210,154,.2),inset 0 2px 5px rgba(91,71,56,.035);
}
.guestbook-board{
  background:
    linear-gradient(145deg,rgba(243,255,244,.92),rgba(221,245,232,.86));
  border-color:rgba(93,170,111,.34);
  box-shadow:
    inset 0 0 0 1px #FFF,
    inset 0 12px 24px -24px rgba(91,71,56,.28);
}
.guestbook-board-head span{
  background:linear-gradient(145deg,#FFE4EB,#FFB7C8);
  border-color:rgba(215,72,107,.3);
}
.guestbook-note{
  border-color:rgba(91,71,56,.22);
  box-shadow:0 13px 23px -20px rgba(123,78,56,.7);
}
.guestbook-note:nth-child(4n+1){background:linear-gradient(145deg,#FFFDF2,#FFF3C5)}
.guestbook-note:nth-child(4n+2){background:linear-gradient(145deg,#FFFAFB,#FFE2EA)}
.guestbook-note:nth-child(4n+3){background:linear-gradient(145deg,#F9FFFA,#DFF4E4)}
.guestbook-note:nth-child(4n+4){background:linear-gradient(145deg,#F9FDFF,#DDF1FA)}
.guestbook-note::before{background:rgba(255,154,181,.7)}
.guestbook-note:nth-child(2n)::before{background:rgba(126,208,148,.62)}
.guestbook-note:nth-child(3n)::before{background:rgba(255,212,80,.72)}
.guestbook-note:nth-child(4n)::before{background:rgba(112,194,229,.62)}

/* --- 下午茶茶签与灵宝茶茶签 --- */
.fortune-paper{
  background:
    radial-gradient(circle at 13% 18%,rgba(255,157,185,.24),transparent 28%),
    radial-gradient(circle at 88% 76%,rgba(126,207,151,.25),transparent 29%),
    radial-gradient(circle at 84% 12%,rgba(126,200,232,.2),transparent 24%),
    linear-gradient(150deg,#FFFDF6,#FFF2CF);
}
.fortune-card,
.lingbao-fortune-card{
  border-color:rgba(91,71,56,.5);
}
.fortune-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),transparent 45%),
    linear-gradient(160deg,#FFFDF5,#FFEBD0);
  box-shadow:
    0 28px 42px -30px rgba(123,78,56,.72),
    inset 0 0 0 6px rgba(255,158,184,.24);
}
.fortune-card-mark svg{
  fill:#FF9EB9;
  stroke:#5B4738;
}
.lingbao-fortune-paper{
  background:
    radial-gradient(circle at 11% 14%,rgba(255,211,83,.25),transparent 28%),
    radial-gradient(circle at 89% 80%,rgba(126,207,151,.26),transparent 29%),
    radial-gradient(circle at 76% 12%,rgba(255,156,183,.22),transparent 24%),
    linear-gradient(150deg,#FFFDF6,#FFF2CF);
}
.lingbao-fortune-pot svg{
  filter:saturate(1.16) contrast(1.025);
}
.lingbao-fortune-spark{
  fill:#FFC83D;
}
.lingbao-fortune-placeholder-mark{color:#E1A82A}
.lingbao-fortune-card[data-level="upper"]{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),transparent 43%),
    linear-gradient(160deg,#FFF8CE,#FFE48B);
  box-shadow:
    0 28px 44px -30px rgba(151,109,27,.62),
    inset 0 0 0 6px rgba(255,211,83,.32);
}
.lingbao-fortune-card[data-level="good"]{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),transparent 43%),
    linear-gradient(160deg,#EFFAEC,#C5EBCB);
  box-shadow:
    0 28px 44px -30px rgba(79,134,88,.58),
    inset 0 0 0 6px rgba(126,207,151,.3);
}
.lingbao-fortune-card[data-level="peace"]{
  background:
    linear-gradient(145deg,rgba(255,255,255,.9),transparent 43%),
    linear-gradient(160deg,#FFFEF7,#FFF0D6);
  box-shadow:
    0 28px 44px -30px rgba(123,78,56,.56),
    inset 0 0 0 6px rgba(255,227,174,.42);
}
.lingbao-fortune-card[data-level="upper"]::after{background:rgba(255,211,83,.68)}
.lingbao-fortune-card[data-level="good"]::after{background:rgba(126,207,151,.64)}
.lingbao-fortune-card[data-level="peace"]::after{background:rgba(255,170,188,.58)}
.lingbao-fortune-footer{
  background:linear-gradient(180deg,rgba(255,251,235,0),rgba(255,248,220,.98) 32%);
  border-top-color:rgba(183,112,92,.2);
}

@media (max-width:760px){
  .home-inner::before{
    left:-4%;
    top:2%;
    font-size:16px;
    letter-spacing:.38em;
  }
  .home-inner::after{
    right:-5%;
    top:28%;
    transform:scale(.78) rotate(8deg);
    transform-origin:right center;
  }
  .plate-wrap::before{
    left:-4%;
    text-shadow:
      2.3em 2.5em 0 #FF86A4,
      9.2em .9em 0 #83D596,
      11.4em 3.1em 0 #76C7E5;
  }
  .plate-wrap::after{
    inset:-5% -8%;
    opacity:.72;
  }
}

@media (max-width:520px){
  .home-inner::before{
    opacity:.72;
  }
  .home-inner::after{
    top:25%;
  }
  .plate-wrap::before{
    top:9%;
    font-size:16px;
  }
  .plate-wrap::after{
    opacity:.62;
  }
}

/* =========================================================
   16. 复古彩色手帐餐盘：中央南瓜猫咪布丁与七枚甜品贴纸
   仅追加上层视觉，不改餐盘结构、位置变量与任何交互逻辑。
   ========================================================= */
.paper-grain{
  opacity:.2;
  mix-blend-mode:soft-light;
  background-image:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.34) 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 66%,rgba(121,91,69,.2) 0 .7px,transparent 1.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.24'/%3E%3C/svg%3E");
  background-size:11px 11px,17px 17px,180px 180px;
}

/* 餐盘内层：柔彩纸张拼贴、纤维颗粒、胶带与小水果。 */
.plate::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:5.5% 5%;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(ellipse 19% 17% at 19% 61%,rgba(255,183,200,.25) 0 98%,transparent 100%),
    radial-gradient(ellipse 20% 15% at 80% 39%,rgba(156,216,243,.25) 0 98%,transparent 100%),
    radial-gradient(ellipse 22% 17% at 52% 78%,rgba(155,224,207,.22) 0 98%,transparent 100%),
    repeating-linear-gradient(7deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(93deg,rgba(124,91,64,.035) 0 .7px,transparent .7px 7px),
    radial-gradient(circle,rgba(112,83,60,.08) 0 .7px,transparent 1px);
  background-size:auto,auto,auto,auto,auto,9px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 12px 28px rgba(255,255,255,.2),
    inset 0 -20px 30px rgba(183,115,81,.09);
  mix-blend-mode:multiply;
  opacity:.88;
}
.plate::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:4% 3%;
  border:1.5px dashed rgba(215,111,140,.42);
  border-radius:50%;
  pointer-events:none;
  background:
    linear-gradient(102deg,rgba(255,246,190,.94),rgba(255,238,158,.9)) 8% 13%/72px 20px no-repeat,
    linear-gradient(82deg,rgba(255,207,220,.9),rgba(255,179,199,.82)) 87% 79%/62px 18px no-repeat,
    linear-gradient(96deg,rgba(191,237,211,.9),rgba(153,223,191,.82)) 77% 18%/50px 16px no-repeat,
    radial-gradient(ellipse 8px 3px at 11% 77%,#7DCE8D 0 99%,transparent 100%),
    radial-gradient(circle at 11% 84%,#F2748D 0 5px,transparent 5.5px),
    radial-gradient(ellipse 8px 3px at 89% 27%,#7DCE8D 0 99%,transparent 100%),
    radial-gradient(circle at 89% 34%,#F5A43F 0 5px,transparent 5.5px),
    radial-gradient(circle at 22% 18%,#FFD44F 0 3px,transparent 3.4px),
    radial-gradient(circle at 76% 84%,#B79BE7 0 3px,transparent 3.4px);
  filter:drop-shadow(0 3px 1px rgba(105,76,56,.09));
  transform:rotate(-1.2deg);
  opacity:.88;
}

/* 中央纸卡：布丁是主视觉，标题与文案仍保持深色、清晰、可读。 */
.plate-text{
  z-index:3;
  width:75%;
  padding:clamp(10px,1.5vw,18px) clamp(16px,2.6vw,32px) clamp(13px,1.8vw,21px);
  border:1.7px dashed rgba(213,104,137,.4);
  border-radius:26px 22px 28px 21px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.9),transparent 44%),
    radial-gradient(circle at 82% 16%,rgba(255,211,83,.15),transparent 30%),
    radial-gradient(circle at 18% 86%,rgba(143,210,154,.14),transparent 31%),
    repeating-linear-gradient(7deg,rgba(110,85,65,.018) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#FFFDF8,#FFF8E7 68%,#FFF1D1);
  box-shadow:
    0 14px 24px -20px rgba(115,74,51,.72),
    inset 0 0 0 1px rgba(255,255,255,.92),
    inset 0 -8px 15px -14px rgba(115,74,51,.22);
  transform:translateY(5.5%) rotate(-.65deg);
}
.plate-text::before{
  content:"";
  display:block;
  width:clamp(102px,14.6vw,154px);
  aspect-ratio:1;
  margin:-2px auto 1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23FFE07A'/%3E%3Cstop offset='1' stop-color='%23F5AE42'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23D98B45'/%3E%3Cstop offset='1' stop-color='%23A95E2F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M31 14C61 1 117 3 147 17c23 12 30 48 24 83-7 38-38 67-78 67-45 0-78-22-84-62-5-35 2-77 22-91z' fill='%23FFFDF7' stroke='%236B5748' stroke-width='3.5'/%3E%3Cpath d='M39 42c12-8 23-9 34-3 8 4 17 4 25 0 12-6 24-4 35 4' fill='none' stroke='%23F5B5C5' stroke-width='3' stroke-linecap='round' opacity='.72'/%3E%3Cellipse cx='90' cy='153' rx='50' ry='8' fill='%236B5748' opacity='.13'/%3E%3Cpath d='M35 88 31 48l30 20c18-8 40-8 58 0l30-20-5 41c14 17 18 36 9 53-10 19-32 27-62 27-31 0-54-9-63-28-8-17-3-36 7-53z' fill='url(%23p)' stroke='%236B5748' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M34 89c5-17 20-22 34-12 18-13 41-10 55 1 12-9 27-3 31 14-7 9-19 10-28 6-7 8-18 10-28 4-9 8-22 8-32 0-8 6-20 4-27-2-6 5-14 5-19-1-4-4-3-8-1-10z' fill='url(%23c)' stroke='%236B5748' stroke-width='3.6' stroke-linejoin='round'/%3E%3Cpath d='M62 65c3-14 14-19 24-12 8-13 24-12 31 1 13-6 25 5 19 20-3 8-13 11-22 6-8 10-23 10-31 0-11 7-24 0-21-15z' fill='%23FFFDF5' stroke='%236B5748' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M73 75c7-8 18-5 21 2 6-8 17-8 23-2' fill='none' stroke='%23FFE5A2' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M138 48c5-8 15-10 22-5-4 8-11 12-22 12z' fill='%2374C986' stroke='%236B5748' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='143' cy='48' r='9.5' fill='%23EF536B' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M143 39c3-6 8-8 12-7' fill='none' stroke='%23FFF0C9' stroke-width='2.4' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%235B4738' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M65 113q6-10 12 0'/%3E%3Cpath d='M103 113q6-10 12 0'/%3E%3C/g%3E%3Cpath d='M87 120c4 0 6 2 6 4.5 0 3-2.7 5-6 5s-6-2-6-5c0-2.5 2-4.5 6-4.5z' fill='%235B4738'/%3E%3Cpath d='M82 132q8 8 16 0' fill='none' stroke='%235B4738' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M91 126c8 0 12 4 17 8M90 128c-8 1-13 5-18 9' fill='none' stroke='%236B5748' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M50 116c-10 0-15 3-20 7M50 124c-9 1-14 4-18 8M130 116c10 0 15 3 20 7M130 124c9 1 14 4 18 8' fill='none' stroke='%236B5748' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='m28 67 5-1 2-5 3 5 5 1-4 3 1 5-5-3-4 3 1-5z' fill='%23F26F91'/%3E%3Cpath d='m145 96 4-1 2-4 2 4 4 1-3 3 1 4-4-2-4 2 1-4z' fill='%239BD8F3'/%3E%3Cpath d='m101 42 4-1 2-4 2 4 4 1-3 3 1 4-4-2-4 2 1-4z' fill='%23FFD44F'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:
    drop-shadow(0 0 1.6px rgba(255,255,255,.98))
    drop-shadow(0 0 1.6px rgba(255,255,255,.98))
    drop-shadow(0 6px 5px rgba(115,74,51,.16));
}
.plate-text::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-11px;
  left:50%;
  width:88px;
  height:22px;
  border:1px solid rgba(181,125,62,.2);
  background:
    linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.58),rgba(255,255,255,.13)),
    rgba(255,225,144,.72);
  box-shadow:0 3px 6px -3px rgba(115,74,51,.35);
  transform:translateX(-50%) rotate(-2.3deg);
  clip-path:polygon(0 8%,96% 0,100% 78%,4% 100%);
}
.plate-kicker{
  margin-bottom:4px;
  letter-spacing:.34em;
}
.plate-title{
  font-size:clamp(28px,5.2vw,48px);
  white-space:nowrap;
}
.plate-sub{
  margin-top:7px;
}

/* 七枚贴纸使用独立插画，隐藏旧 SVG，但保留原有 hover / focus 触发层。 */
.desserts .pop{
  --label-rot:-3deg;
}
.desserts .pop svg{
  visibility:hidden;
}
.desserts .pop::before{
  inset:-10%;
  border-radius:0;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:1;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.9s ease-in-out infinite;
}
.desserts .pop::after{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:calc(100% + 2px);
  min-width:max-content;
  padding:4px 8px 5px;
  color:#654B3C;
  font-family:"Kaiti SC","STKaiti","KaiTi","Microsoft YaHei",sans-serif;
  font-size:clamp(9px,1.05vw,12px);
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  background:var(--label-bg,#FFF1B8);
  border:1.2px solid rgba(91,71,56,.5);
  border-radius:7px 9px 6px 10px;
  box-shadow:
    0 4px 8px -5px rgba(91,71,56,.72),
    inset 0 -2px 0 rgba(91,71,56,.06);
  transform:translateX(-50%) rotate(var(--label-rot));
  transform-origin:50% 0;
}
.desserts .pop:hover::after,
.plate-wrap:hover .desserts .pop::after{
  animation:label-soft-in .38s cubic-bezier(.2,1.45,.45,1) both;
}

/* 1. 草莓奶油蛋糕。 */
.desserts .pop--macaron{
  --label-bg:#FFF0B0;
  --label-rot:-5deg;
}
.desserts .pop--macaron::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M19 58h62l-5 24c-.8 4-4 7-8 7H32c-4 0-7-3-8-7z' fill='%23FFF8E7' stroke='%236B5748' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M20 57c1-8 6-12 11-8 4-8 14-8 18-2 5-7 15-5 17 2 5-3 10 1 10 8z' fill='%23FFB1C5' stroke='%236B5748' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M27 52q8 8 15 0t15 0q8 8 15 0' fill='none' stroke='%23FFFDF7' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M49 28c4-12 16-15 21-13-2 10-9 17-21 18z' fill='%2385D392' stroke='%236B5748' stroke-width='2.4'/%3E%3Cpath d='M49 28c-4-10-14-13-20-11 3 9 10 15 20 16z' fill='%23A6DEA1' stroke='%236B5748' stroke-width='2.4'/%3E%3Ccircle cx='50' cy='28' r='9' fill='%23F56E86' stroke='%236B5748' stroke-width='2.8'/%3E%3Cpath d='M25 62h50M31 69h38M34 78h32' stroke='%23F5D8A5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.desserts .pop--macaron::after{
  content:"草莓奶油蛋糕";
  left:4%;
  top:auto;
  bottom:-22%;
  transform:rotate(var(--label-rot));
}

/* 2. 樱桃小蛋糕。 */
.desserts .pop--berry{
  --label-bg:#FFD7E2;
  --label-rot:-3deg;
}
.desserts .pop--berry::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 62h64l-6 21c-1 4-4 6-8 6H32c-4 0-7-2-8-6z' fill='%23FFB7C8' stroke='%236B5748' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M19 61c0-16 12-25 31-25s31 9 31 25c0 6-4 9-10 9H29c-6 0-10-3-10-9z' fill='%23FFF9ED' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M23 58q8 6 16 0t16 0 16 0' fill='none' stroke='%23F58CA8' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 38c3-11 12-15 19-13-2 9-8 14-19 15z' fill='%2379CC89' stroke='%236B5748' stroke-width='2.5'/%3E%3Ccircle cx='51' cy='34' r='9' fill='%23E94B62' stroke='%236B5748' stroke-width='2.8'/%3E%3Cpath d='M48 26c2-5 7-7 11-6' fill='none' stroke='%23FFF2D1' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M30 72h40M27 82h46' stroke='%23E66F91' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.desserts .pop--berry::after{
  content:"樱桃小蛋糕";
  right:88%;
  top:32%;
  transform:rotate(var(--label-rot));
}

/* 3. 抹茶甜点。 */
.desserts .pop--cupcake{
  --label-bg:#DDF3D7;
  --label-rot:4deg;
}
.desserts .pop--cupcake::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M26 51h48l-5 29c-1 4-4 7-8 7H39c-4 0-7-3-8-7z' fill='%23F0D6A8' stroke='%236B5748' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M25 47c1-18 13-28 25-28s24 10 25 28c0 6-5 9-12 9H37c-7 0-12-3-12-9z' fill='%238DD79A' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M31 45q8 8 17 0t17 0q7 7 14 0' fill='none' stroke='%23DDF7DF' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%23FFF8E8' stroke='%236B5748' stroke-width='1.5'%3E%3Ccircle cx='39' cy='39' r='2.3'/%3E%3Ccircle cx='50' cy='35' r='2.3'/%3E%3Ccircle cx='61' cy='39' r='2.3'/%3E%3C/g%3E%3Cpath d='M53 25c5-7 13-8 17-6-3 7-9 11-17 11z' fill='%2371C985' stroke='%236B5748' stroke-width='2.3'/%3E%3Cpath d='M39 58h30M37 70h34M40 81h28' stroke='%23D1AA72' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.desserts .pop--cupcake::after{
  content:"抹茶甜点";
  left:88%;
  top:36%;
  transform:rotate(var(--label-rot));
}

/* 4. 柠檬塔。 */
.desserts .pop--cookie{
  --label-bg:#D9EEFF;
  --label-rot:3deg;
}
.desserts .pop--cookie::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M16 57c0-8 7-14 15-14h38c8 0 15 6 15 14l-8 25c-1 4-5 7-9 7H33c-4 0-8-3-9-7z' fill='%23E9BE76' stroke='%236B5748' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M20 57c0-7 6-12 13-12h34c7 0 13 5 13 12 0 9-8 15-17 15H37c-9 0-17-6-17-15z' fill='%23FFE06C' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M26 55q12-8 24 0t24 0' fill='none' stroke='%23FFF4A9' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='49' r='6' fill='%23FFF8D2' stroke='%236B5748' stroke-width='2.2'/%3E%3Cpath d='M46 24c3-9 11-13 17-11-2 8-8 13-17 14z' fill='%2387D292' stroke='%236B5748' stroke-width='2.3'/%3E%3Cpath d='M20 65h60M28 75h44' stroke='%23BD8A55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.desserts .pop--cookie::after{
  content:"柠檬塔";
  left:72%;
  top:76%;
  transform:rotate(var(--label-rot));
}

/* 5. 奶油饼干。 */
.desserts .pop--tea{
  --label-bg:#E9DCF7;
  --label-rot:-2deg;
}
.desserts .pop--tea::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 27h60c5 0 8 4 7 9l-9 36c-1 5-5 8-10 8H32c-5 0-9-3-10-8l-9-36c-1-5 2-9 7-9z' fill='%23D8A66A' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M17 46h66l-7 28c-1 4-4 6-8 6H32c-4 0-7-2-8-6z' fill='%23EAC18E' stroke='%236B5748' stroke-width='2.8'/%3E%3Cpath d='M24 45q6-10 13 0t13 0 13 0 13 0' fill='%23FFF9EB' stroke='%236B5748' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M28 59h44M31 70h38M35 81h30' stroke='%23A9794A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg fill='%23714D38'%3E%3Ccircle cx='29' cy='35' r='2.5'/%3E%3Ccircle cx='43' cy='31' r='2.3'/%3E%3Ccircle cx='57' cy='34' r='2.5'/%3E%3Ccircle cx='70' cy='30' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}
.desserts .pop--tea::after{
  content:"奶油饼干";
  left:72%;
  top:58%;
  bottom:auto;
  transform:translateX(-50%) rotate(var(--label-rot));
}

/* 6. 草莓泡芙。 */
.desserts .pop--cherry{
  --label-bg:#FFE1C8;
  --label-rot:-4deg;
}
.desserts .pop--cherry::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M21 44c2-16 14-25 29-25s27 9 29 25c3 22-12 38-29 38S18 66 21 44z' fill='%23FFC0D0' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M28 47c1-11 10-17 22-17s21 6 22 17c2 15-9 26-22 26s-24-11-22-26z' fill='%23FFF5E5' stroke='%236B5748' stroke-width='2.7'/%3E%3Cpath d='M33 46q6 6 12 0t12 0 12 0' fill='none' stroke='%23F58CA8' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M49 24c4-10 12-13 18-11-2 8-8 13-18 14z' fill='%2382D08F' stroke='%236B5748' stroke-width='2.3'/%3E%3Ccircle cx='50' cy='22' r='8' fill='%23EF536B' stroke='%236B5748' stroke-width='2.7'/%3E%3Cpath d='M35 62q15-10 30 0' fill='none' stroke='%23EBAEC0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.desserts .pop--cherry::after{
  content:"草莓泡芙";
  right:84%;
  top:54%;
  transform:rotate(var(--label-rot));
}

/* 7. 焦糖布丁。 */
.desserts .pop--sugar{
  --label-bg:#FFF0BF;
  --label-rot:4deg;
}
.desserts .pop--sugar::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 47h50l-6 34c-.8 5-5 8-10 8H41c-5 0-9-3-10-8z' fill='%23FFD86F' stroke='%236B5748' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M23 47c0-8 9-13 27-13s27 5 27 13c0 6-7 9-27 9s-27-3-27-9z' fill='%23C77A3E' stroke='%236B5748' stroke-width='3'/%3E%3Cpath d='M28 49q10 8 22 0t22 0' fill='none' stroke='%23F2B36F' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M47 26c4-9 12-12 18-10-2 8-8 12-18 13z' fill='%2382D08F' stroke='%236B5748' stroke-width='2.3'/%3E%3Ccircle cx='48' cy='23' r='7' fill='%23E94E65' stroke='%236B5748' stroke-width='2.5'/%3E%3Cpath d='M34 62c5-4 10-4 15 0M50 62c5-4 10-4 15 0' fill='none' stroke='%23FFEAA2' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.desserts .pop--sugar::after{
  content:"焦糖布丁";
  left:82%;
  top:56%;
  transform:rotate(var(--label-rot));
}

@keyframes label-soft-in{
  from{opacity:.15;transform:translateX(-50%) rotate(var(--label-rot)) scale(.82)}
  to{opacity:1;transform:translateX(-50%) rotate(var(--label-rot)) scale(1)}
}

@media (max-width:760px){
  .plate-text{
    width:72%;
    padding:8px 14px 12px;
    transform:translateY(4.5%) rotate(-.45deg);
  }
  .plate-text::before{
    width:92px;
  }
  .plate::before{
    inset:5% 4%;
  }
  .plate::after{
    inset:3.5% 1.5%;
    background-size:58px 16px,50px 15px,42px 14px,auto,auto,auto,auto,auto,auto;
    opacity:.76;
  }
  .desserts .pop::after{
    padding:3px 6px 4px;
    font-size:9px;
  }
}

@media (max-width:520px){
  .plate-text{
    width:74%;
    padding:7px 10px 10px;
    border-radius:20px 17px 22px 18px;
  }
  .plate-text::before{
    width:82px;
  }
  .plate-text::after{
    top:-8px;
    width:64px;
    height:17px;
  }
  .plate-title{
    font-size:clamp(25px,7.4vw,34px);
  }
  .plate-sub{
    font-size:11px;
    line-height:1.55;
  }
  .desserts .pop::after{
    font-size:8px;
    padding:3px 5px;
  }
  .desserts .pop--macaron::after{
    left:0;
    bottom:-16%;
  }
  .desserts .pop--berry::after{
    right:auto;
    left:8%;
    top:20%;
  }
  .desserts .pop--cupcake::after{
    right:78%;
    left:auto;
    top:26%;
  }
  .desserts .pop--cookie::after{
    left:52%;
    top:72%;
  }
  .desserts .pop--tea::after{
    top:60%;
    bottom:auto;
  }
  .desserts .pop--cherry::after{
    right:70%;
    top:52%;
  }
  .desserts .pop--sugar::after{
    left:68%;
    top:50%;
  }
}

/* =========================================================
   17. Incremental retro scrapbook plate polish
   Visual-only override for the round plate. It does not
   change markup, positions, modal layers, or interactions.
   ========================================================= */
.paper-grain{
  opacity:.205;
  background-image:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.4) 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 68%,rgba(121,91,69,.16) 0 .7px,transparent 1.3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.2'/%3E%3C/svg%3E");
  background-size:11px 11px,19px 19px,210px 210px;
}

.plate-wrap .plate-svg{
  filter:
    drop-shadow(0 26px 25px rgba(143,83,60,.24))
    drop-shadow(0 8px 0 rgba(255,250,231,.28))
    saturate(1.2)
    contrast(1.025);
}

.plate-wrap .plate::before{
  inset:5% 4.6%;
  background:
    radial-gradient(ellipse 20% 17% at 18% 63%,rgba(255,177,195,.31) 0 98%,transparent 100%),
    radial-gradient(ellipse 20% 15% at 82% 37%,rgba(151,216,241,.27) 0 98%,transparent 100%),
    radial-gradient(ellipse 23% 17% at 52% 79%,rgba(147,222,199,.27) 0 98%,transparent 100%),
    repeating-linear-gradient(7deg,rgba(255,255,255,.14) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(93deg,rgba(124,91,64,.038) 0 .7px,transparent .7px 7px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.13'/%3E%3C/svg%3E");
  background-size:auto,auto,auto,auto,auto,180px 180px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.84),
    inset 0 12px 30px rgba(255,255,255,.23),
    inset 0 -22px 34px rgba(183,115,81,.1);
  opacity:.93;
}

.plate-wrap .plate::after{
  inset:3.7% 2.7%;
  border:1.5px dashed rgba(212,103,137,.5);
  background:
    linear-gradient(102deg,rgba(255,246,184,.96),rgba(255,232,137,.92)) 7% 13%/76px 21px no-repeat,
    linear-gradient(82deg,rgba(255,205,220,.94),rgba(255,174,197,.88)) 88% 79%/66px 19px no-repeat,
    linear-gradient(96deg,rgba(190,237,210,.94),rgba(147,220,188,.86)) 78% 17%/54px 17px no-repeat,
    radial-gradient(ellipse 9px 3px at 10% 76%,#76C985 0 99%,transparent 100%),
    radial-gradient(circle at 10% 84%,#F26D8C 0 5.4px,transparent 5.9px),
    radial-gradient(ellipse 9px 3px at 89% 27%,#76C985 0 99%,transparent 100%),
    radial-gradient(circle at 89% 35%,#F4A13D 0 5.4px,transparent 5.9px),
    radial-gradient(circle at 22% 17%,#FFD44F 0 3.4px,transparent 3.8px),
    radial-gradient(circle at 77% 84%,#B79BE7 0 3.4px,transparent 3.8px),
    radial-gradient(circle at 44% 9%,#8CCBEA 0 2.8px,transparent 3.2px),
    radial-gradient(circle at 57% 91%,#F284A2 0 3px,transparent 3.4px);
  box-shadow:
    0 0 0 4px rgba(255,253,245,.25),
    0 5px 9px -7px rgba(105,76,56,.7);
  filter:drop-shadow(0 3px 1px rgba(105,76,56,.1));
  transform:rotate(-1.2deg);
  opacity:.94;
}

.plate-wrap .plate-text{
  width:75%;
  border-color:rgba(213,104,137,.44);
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),transparent 45%),
    radial-gradient(circle at 82% 15%,rgba(255,211,83,.18),transparent 31%),
    radial-gradient(circle at 17% 86%,rgba(143,210,154,.17),transparent 32%),
    repeating-linear-gradient(7deg,rgba(110,85,65,.018) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#FFFDF8,#FFF8E6 68%,#FFF0CF);
  box-shadow:
    0 15px 25px -20px rgba(115,74,51,.76),
    inset 0 0 0 1px rgba(255,255,255,.96),
    inset 0 -8px 15px -14px rgba(115,74,51,.24),
    0 0 0 5px rgba(255,231,155,.16);
}

.plate-wrap .plate-text::before{
  width:clamp(106px,15.1vw,160px);
  margin:-3px auto 1px;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.99))
    drop-shadow(0 0 2px rgba(255,255,255,.99))
    drop-shadow(0 7px 5px rgba(115,74,51,.17));
}

.plate-wrap .plate-text::after{
  top:-12px;
  width:96px;
  height:24px;
  border:1px solid rgba(181,125,62,.2);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.6),rgba(255,255,255,.13)),
    rgba(255,224,138,.76);
  box-shadow:0 3px 7px -3px rgba(115,74,51,.38);
  transform:translateX(-50%) rotate(-2.3deg);
  clip-path:polygon(0 8%,96% 0,100% 78%,4% 100%);
}

.plate-wrap .desserts .pop{
  --label-rot:2deg;
}

.plate-wrap .desserts .pop::before{
  inset:-11%;
  opacity:1;
  filter:
    drop-shadow(0 0 1.7px #FFFDF7)
    drop-shadow(0 0 1.7px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.98))
    drop-shadow(0 8px 5px rgba(115,74,51,.17))
    saturate(1.06);
  animation:bob 3.9s ease-in-out infinite;
}

.plate-wrap .desserts .pop::after{
  content:"";
  position:absolute;
  z-index:3;
  right:auto;
  bottom:auto;
  min-width:max-content;
  max-width:none;
  padding:4px 8px 5px;
  color:#5E4739;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS","Kaiti SC","STKaiti","KaiTi",cursive;
  font-size:clamp(8px,.9vw,10.5px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  background:
    linear-gradient(145deg,rgba(255,255,255,.42),transparent 56%),
    var(--label-bg,#FFF1B8);
  border:1px dashed rgba(91,71,56,.48);
  border-radius:8px 4px 9px 5px;
  box-shadow:
    0 4px 8px -5px rgba(91,71,56,.76),
    inset 0 0 0 2px rgba(255,255,255,.34);
  transform-origin:50% 50%;
  clip-path:polygon(0 5%,100% 0,98% 96%,2% 100%);
}

.plate-wrap .desserts .pop--macaron{
  --label-bg:#FFF0B0;
  --label-rot:-2.2deg;
  --rot:2.2deg !important;
}
.plate-wrap .desserts .pop--macaron::after{
  content:"Strawberry Shortcake";
  left:4%;
  top:calc(100% - 1px);
  transform:translateX(-10%) rotate(-2.2deg);
}

.plate-wrap .desserts .pop--berry{
  --label-bg:#FFD7E2;
  --label-rot:2.6deg;
  --rot:-2.6deg !important;
}
.plate-wrap .desserts .pop--berry::after{
  content:"Cherry Cake";
  left:-30%;
  top:27%;
  transform:translateX(-50%) rotate(2.6deg);
}

.plate-wrap .desserts .pop--cupcake{
  --label-bg:#DDF3D7;
  --label-rot:2.8deg;
  --rot:2.8deg !important;
}
.plate-wrap .desserts .pop--cupcake::after{
  content:"Matcha Sweet";
  left:100%;
  top:25%;
  transform:translateX(-5%) rotate(2.8deg);
}

.plate-wrap .desserts .pop--cookie{
  --label-bg:#D9EEFF;
  --label-rot:-2.2deg;
  --rot:-2.2deg !important;
}
.plate-wrap .desserts .pop--cookie::after{
  content:"Lemon Tart";
  left:110%;
  top:55%;
  transform:translateX(-50%) rotate(-2.2deg);
}

.plate-wrap .desserts .pop--tea{
  --label-bg:#E9DCF7;
  --label-rot:1.6deg;
  --rot:1.6deg !important;
}
.plate-wrap .desserts .pop--tea::after{
  content:"Butter Cookie";
  left:92%;
  top:34%;
  transform:translateX(-8%) rotate(1.6deg);
}

.plate-wrap .desserts .pop--cherry{
  --label-bg:#FFE1C8;
  --label-rot:-2.8deg;
  --rot:-2.8deg !important;
}
.plate-wrap .desserts .pop--cherry::after{
  content:"Strawberry Puff";
  left:-20%;
  top:58%;
  transform:translateX(-50%) rotate(-2.8deg);
}

.plate-wrap .desserts .pop--sugar{
  --label-bg:#FFF0BF;
  --label-rot:2.4deg;
  --rot:2.4deg !important;
}
.plate-wrap .desserts .pop--sugar::after{
  content:"Caramel Pudding";
  left:112%;
  top:57%;
  transform:translateX(-50%) rotate(2.4deg);
}

@media (max-width:720px){
  .plate-wrap .plate-text::before{
    width:96px;
  }
  .plate-wrap .desserts .pop::after{
    padding:3px 5px 4px;
    font-size:9.5px;
    letter-spacing:-.025em;
  }
  .plate-wrap .desserts .pop--macaron::after{
    left:88%;
    top:calc(100% - 3px);
    transform:translateX(-8%) rotate(-2.2deg);
  }
  .plate-wrap .desserts .pop--berry::after{
    right:auto;
    left:92%;
    top:24%;
    transform:translateX(-8%) rotate(2.6deg);
  }
  .plate-wrap .desserts .pop--cupcake::after{
    right:36%;
    left:auto;
    top:24%;
    transform:rotate(2.8deg);
  }
  .plate-wrap .desserts .pop--cookie::after{
    right:40%;
    left:auto;
    top:56%;
    transform:rotate(-2.2deg);
  }
  .plate-wrap .desserts .pop--tea::after{
    left:94%;
    top:34%;
    transform:translateX(-8%) rotate(1.6deg);
  }
  .plate-wrap .desserts .pop--cherry::after{
    right:auto;
    left:28%;
    top:58%;
    transform:translateX(-14%) rotate(-2.8deg);
  }
  .plate-wrap .desserts .pop--sugar::after{
    right:38%;
    left:auto;
    top:57%;
    transform:rotate(2.4deg);
  }
}

/* =========================================================
   18. Incremental plate layering and independent dessert hover
   Only overrides the plate text order, sticker positions, and
   the single-sticker hover transform. Other interactions stay
   on their original selectors and JavaScript handlers.
   ========================================================= */
.plate-wrap .plate-text{
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* The pseudo-element stays inside the existing card and moves after
   the kicker, title, and subtitle in the flex order. */
.plate-wrap .plate-text::before{
  order:5;
  width:clamp(104px,14.7vw,156px);
  margin:8px auto -4px;
}

.plate-wrap .desserts{
  z-index:5;
}

/* Keep the original plate-wide reveal, but stop that selector from
   applying the destination displacement. The individual hover below
   is the only rule that adds --dx / --dy. */
.plate-wrap:hover .pop,
.plate-wrap:focus-within .pop{
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg));
}

.plate-wrap .desserts .pop{
  pointer-events:auto;
}

.plate-wrap:hover .pop:hover,
.plate-wrap:focus-within .pop:hover{
  opacity:1;
  transform:translate(
    calc(-50% + var(--dx,0px)),
    calc(-50% + var(--dy,0px))
  ) scale(1.18) rotate(var(--rot,0deg));
  transition-delay:0ms;
}

.plate-wrap:hover .pop:hover::before{
  opacity:1;
}

/* Move the seven existing stickers toward the outside of the plate.
   The var overrides are intentional because the original coordinates
   remain in the HTML as the fallback and source of --dx / --dy. */
.plate-wrap .desserts .pop--macaron{
  --x:-330px !important;
  --y:-165px !important;
}

.plate-wrap .desserts .pop--berry{
  --x:-330px !important;
  --y:0px !important;
}

.plate-wrap .desserts .pop--cupcake{
  --x:330px !important;
  --y:-165px !important;
}

.plate-wrap .desserts .pop--cookie{
  --x:330px !important;
  --y:0px !important;
}

.plate-wrap .desserts .pop--tea{
  --x:0px !important;
  --y:-215px !important;
}

.plate-wrap .desserts .pop--cherry{
  --x:-330px !important;
  --y:175px !important;
}

.plate-wrap .desserts .pop--sugar{
  --x:330px !important;
  --y:175px !important;
}

/* Labels are visual notes, not hit targets. This keeps a label from
   blocking the sticker underneath it while preserving its placement. */
.plate-wrap .desserts .pop::after{
  pointer-events:none;
}

/* On medium-width screens the right-side notes would otherwise meet
   the viewport edge. They flip inward without moving the artwork. */
@media (min-width:721px) and (max-width:1000px){
  .plate-wrap .desserts .pop--cupcake::after,
  .plate-wrap .desserts .pop--cookie::after,
  .plate-wrap .desserts .pop--sugar::after{
    right:100%;
    left:auto;
    transform:translateX(8%) rotate(var(--label-rot));
  }
}

@media (max-width:720px){
  .plate-wrap .plate-text{
    width:70%;
  }

  .plate-wrap .plate-text::before{
    width:92px;
    margin:6px auto -3px;
  }

  .plate-wrap .desserts .pop--macaron{
    --x:-228px !important;
    --y:-140px !important;
  }
  .plate-wrap .desserts .pop--macaron::after{
    right:auto;
    left:0;
    top:calc(100% - 3px);
    transform:rotate(-2.2deg);
  }

  .plate-wrap .desserts .pop--berry{
    --x:-228px !important;
    --y:82px !important;
  }
  .plate-wrap .desserts .pop--berry::after{
    right:auto;
    left:0;
    top:calc(100% - 2px);
    transform:rotate(2.6deg);
  }

  .plate-wrap .desserts .pop--cupcake{
    --x:228px !important;
    --y:-140px !important;
  }
  .plate-wrap .desserts .pop--cupcake::after{
    right:0;
    left:auto;
    top:calc(100% - 3px);
    transform:rotate(2.8deg);
  }

  .plate-wrap .desserts .pop--cookie{
    --x:228px !important;
    --y:100px !important;
  }
  .plate-wrap .desserts .pop--cookie::after{
    right:0;
    left:auto;
    top:calc(100% - 3px);
    transform:rotate(-2.2deg);
  }

  .plate-wrap .desserts .pop--tea{
    --x:0px !important;
    --y:-205px !important;
  }

  .plate-wrap .desserts .pop--cherry{
    --x:-228px !important;
    --y:180px !important;
  }
  .plate-wrap .desserts .pop--cherry::after{
    right:auto;
    left:0;
    top:-2px;
    transform:translateY(-100%) rotate(-2.8deg);
  }

  .plate-wrap .desserts .pop--sugar{
    --x:228px !important;
    --y:180px !important;
  }
  .plate-wrap .desserts .pop--sugar::after{
    right:0;
    left:auto;
    top:-2px;
    transform:translateY(-100%) rotate(2.4deg);
  }
}

@media (hover:none){
  .plate-wrap .pop,
  .plate-wrap:hover .pop,
  .plate-wrap:focus-within .pop{
    opacity:1;
    transform:translate(-50%,-50%) scale(.96) rotate(var(--rot,0deg));
  }

  .plate-wrap .desserts .pop{
    pointer-events:none;
  }
}

/* =========================================================
   19. Incremental edge-safe labels for the outer dessert ring
   The left-side stickers sit close to the viewport on medium
   and narrow screens. Shift only their handwritten notes inward;
   artwork positions, stacking, and hover behavior stay unchanged.
   ========================================================= */
@keyframes label-soft-in-edge-left{
  from{
    opacity:.15;
    transform:translateX(0) rotate(var(--label-rot)) scale(.82);
  }
  to{
    opacity:1;
    transform:translateX(var(--edge-label-shift,16px)) rotate(var(--label-rot)) scale(1);
  }
}

@media (min-width:721px) and (max-width:1000px){
  .plate-wrap .desserts .pop--macaron::after,
  .plate-wrap .desserts .pop--berry::after,
  .plate-wrap .desserts .pop--cherry::after{
    --edge-label-shift:18px;
    transform:translateX(18px) rotate(var(--label-rot));
  }

  .plate-wrap:hover .desserts .pop--macaron::after,
  .plate-wrap:hover .desserts .pop--berry::after,
  .plate-wrap:hover .desserts .pop--cherry::after{
    animation-name:label-soft-in-edge-left;
  }
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--macaron::after,
  .plate-wrap .desserts .pop--berry::after,
  .plate-wrap .desserts .pop--cherry::after{
    --edge-label-shift:0px;
    width:62px;
    min-width:0;
    max-width:62px;
    white-space:normal;
    line-height:1.12;
    text-align:center;
    transform:translateX(0) rotate(var(--label-rot));
  }

  .plate-wrap:hover .desserts .pop--macaron::after,
  .plate-wrap:hover .desserts .pop--berry::after,
  .plate-wrap:hover .desserts .pop--cherry::after{
    animation-name:label-soft-in-edge-left;
  }
}

/* =========================================================
   20. Incremental pastel cat-paw cursors
   Two small inline SVG cursors:
   - cream paw for the general page
   - pink paw for clickable controls and desserts
   These only set the cursor property and do not affect layout,
   artwork, animation, or interaction behavior.
   ========================================================= */
:root{
  --paw-cursor-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 28 28'%3E%3Cellipse cx='7.2' cy='12.3' rx='3.1' ry='4' transform='rotate(-24 7.2 12.3)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.7'/%3E%3Cellipse cx='11.3' cy='7.8' rx='3.2' ry='4.1' transform='rotate(-8 11.3 7.8)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.7'/%3E%3Cellipse cx='16.7' cy='7.8' rx='3.2' ry='4.1' transform='rotate(8 16.7 7.8)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.7'/%3E%3Cellipse cx='20.8' cy='12.3' rx='3.1' ry='4' transform='rotate(24 20.8 12.3)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.7'/%3E%3Cpath d='M14 16.4c-4.8 0-8.1 3.1-8.1 6.1 0 2.6 2.6 4.1 5.4 4.1 1.4 0 2.2-.6 2.7-.6s1.3.6 2.7.6c2.8 0 5.4-1.5 5.4-4.1 0-3-3.3-6.1-8.1-6.1z' fill='%23FFF4D6' stroke='%238B624E' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='14' cy='21.2' r='2.1' fill='%23FFD8E6'/%3E%3C/svg%3E") 7 6,auto;
  --paw-cursor-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 28 28'%3E%3Cellipse cx='7.2' cy='12.3' rx='3.1' ry='4' transform='rotate(-24 7.2 12.3)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.7'/%3E%3Cellipse cx='11.3' cy='7.8' rx='3.2' ry='4.1' transform='rotate(-8 11.3 7.8)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.7'/%3E%3Cellipse cx='16.7' cy='7.8' rx='3.2' ry='4.1' transform='rotate(8 16.7 7.8)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.7'/%3E%3Cellipse cx='20.8' cy='12.3' rx='3.1' ry='4' transform='rotate(24 20.8 12.3)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.7'/%3E%3Cpath d='M14 16.4c-4.8 0-8.1 3.1-8.1 6.1 0 2.6 2.6 4.1 5.4 4.1 1.4 0 2.2-.6 2.7-.6s1.3.6 2.7.6c2.8 0 5.4-1.5 5.4-4.1 0-3-3.3-6.1-8.1-6.1z' fill='%23FFD8E6' stroke='%23A75E72' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='14' cy='21.2' r='2.1' fill='%23FFF8FC'/%3E%3Cpath d='M23.1 4.9l.6 1.5 1.5.6-1.5.6-.6 1.5-.6-1.5-1.5-.6 1.5-.6z' fill='%23FFF0A8'/%3E%3C/svg%3E") 7 6,pointer;
}

html,
body{
  cursor:var(--paw-cursor-cream);
}

a[href],
button:not(:disabled),
summary,
label[for],
input:not(:disabled),
textarea:not(:disabled),
select:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[role="link"]:not([aria-disabled="true"]),
[data-goto],
[data-panel-open],
[data-modal-close],
.pop,
.tea-card,
.cake-slice,
.entrance{
  cursor:var(--paw-cursor-pink);
}

.pop *,
.entrance *{
  cursor:inherit;
}

/* =========================================================
   21. Incremental smile, oval dessert ring, and rounder paws
   Visual-only overrides:
   - the central pudding cat already uses the smiling face above
   - seven existing stickers move along an outer oval track
   - both paw cursors grow to 34 x 34 with softer pad shapes
   No markup, modal, sound, or event-binding code is changed.
   ========================================================= */
.plate-wrap .desserts .pop--tea{
  --x:0px !important;
  --y:-225px !important;
}

.plate-wrap .desserts .pop--macaron{
  --x:-250px !important;
  --y:-175px !important;
}

.plate-wrap .desserts .pop--cupcake{
  --x:250px !important;
  --y:-175px !important;
}

.plate-wrap .desserts .pop--berry{
  --x:-330px !important;
  --y:35px !important;
}

.plate-wrap .desserts .pop--cookie{
  --x:330px !important;
  --y:35px !important;
}

.plate-wrap .desserts .pop--cherry{
  --x:-235px !important;
  --y:245px !important;
}

.plate-wrap .desserts .pop--sugar{
  --x:235px !important;
  --y:245px !important;
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--tea{
    --x:0px !important;
    --y:-205px !important;
  }

  .plate-wrap .desserts .pop--macaron{
    --x:-228px !important;
    --y:-175px !important;
  }

  .plate-wrap .desserts .pop--cupcake{
    --x:228px !important;
    --y:-175px !important;
  }

  .plate-wrap .desserts .pop--berry{
    --x:-228px !important;
    --y:35px !important;
  }

  .plate-wrap .desserts .pop--cookie{
    --x:228px !important;
    --y:35px !important;
  }

  .plate-wrap .desserts .pop--cherry{
    --x:-205px !important;
    --y:215px !important;
  }

  .plate-wrap .desserts .pop--sugar{
    --x:205px !important;
    --y:215px !important;
  }
}

:root{
  --paw-cursor-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 28 28'%3E%3Cellipse cx='6.6' cy='12.7' rx='3.55' ry='4.45' transform='rotate(-25 6.6 12.7)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.8'/%3E%3Cellipse cx='10.8' cy='7.6' rx='3.65' ry='4.6' transform='rotate(-9 10.8 7.6)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.8'/%3E%3Cellipse cx='17.2' cy='7.6' rx='3.65' ry='4.6' transform='rotate(9 17.2 7.6)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.8'/%3E%3Cellipse cx='21.4' cy='12.7' rx='3.55' ry='4.45' transform='rotate(25 21.4 12.7)' fill='%23FFF7E4' stroke='%238B624E' stroke-width='1.8'/%3E%3Cellipse cx='14' cy='20.5' rx='7.35' ry='6.1' fill='%23FFF4D6' stroke='%238B624E' stroke-width='1.9'/%3E%3Cellipse cx='14' cy='21.3' rx='3' ry='2.45' fill='%23FFD8E6'/%3E%3C/svg%3E") 11 10,auto;
  --paw-cursor-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 28 28'%3E%3Cellipse cx='6.6' cy='12.7' rx='3.55' ry='4.45' transform='rotate(-25 6.6 12.7)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.8'/%3E%3Cellipse cx='10.8' cy='7.6' rx='3.65' ry='4.6' transform='rotate(-9 10.8 7.6)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.8'/%3E%3Cellipse cx='17.2' cy='7.6' rx='3.65' ry='4.6' transform='rotate(9 17.2 7.6)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.8'/%3E%3Cellipse cx='21.4' cy='12.7' rx='3.55' ry='4.45' transform='rotate(25 21.4 12.7)' fill='%23FFE0EC' stroke='%23A75E72' stroke-width='1.8'/%3E%3Cellipse cx='14' cy='20.5' rx='7.35' ry='6.1' fill='%23FFD8E6' stroke='%23A75E72' stroke-width='1.9'/%3E%3Cellipse cx='14' cy='21.3' rx='3' ry='2.45' fill='%23FFF8FC'/%3E%3Cpath d='M23.1 4.9l.6 1.5 1.5.6-1.5.6-.6 1.5-.6-1.5-1.5-.6 1.5-.6z' fill='%23FFF0A8'/%3E%3C/svg%3E") 11 10,pointer;
}

/* =========================================================
   22. Incremental dessert-ring balance
   Visual-only position overrides:
   - Butter Cookie moves from the top center to the lower ring
     beneath the central pudding cat.
   - The other six stickers keep their artwork, labels, rotation,
     shadows, textures, and independent hover behavior.
   No markup, modal, sound, or event-binding code is changed.
   ========================================================= */
.plate-wrap .desserts .pop--tea{
  --x:0px !important;
  --y:220px !important;
}

.plate-wrap .desserts .pop--macaron{
  --x:-270px !important;
  --y:-175px !important;
}

.plate-wrap .desserts .pop--cupcake{
  --x:270px !important;
  --y:-175px !important;
}

.plate-wrap .desserts .pop--berry{
  --x:-335px !important;
  --y:20px !important;
}

.plate-wrap .desserts .pop--cookie{
  --x:335px !important;
  --y:20px !important;
}

.plate-wrap .desserts .pop--cherry{
  --x:-245px !important;
  --y:220px !important;
}

.plate-wrap .desserts .pop--sugar{
  --x:245px !important;
  --y:220px !important;
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--tea{
    --x:0px !important;
    --y:150px !important;
  }

  .plate-wrap .desserts .pop--macaron{
    --x:-218px !important;
    --y:-168px !important;
  }

  .plate-wrap .desserts .pop--cupcake{
    --x:218px !important;
    --y:-168px !important;
  }

  .plate-wrap .desserts .pop--berry{
    --x:-228px !important;
    --y:20px !important;
  }

  .plate-wrap .desserts .pop--cookie{
    --x:228px !important;
    --y:20px !important;
  }

  .plate-wrap .desserts .pop--cherry{
    --x:-205px !important;
    --y:180px !important;
  }

  .plate-wrap .desserts .pop--sugar{
    --x:205px !important;
    --y:180px !important;
  }
}

/* =========================================================
   23. Incremental inner-plate dessert ring
   Visual-only position overrides:
   - all seven existing stickers stay inside the oval plate
   - Butter Cookie remains the lower-center sticker
   - artwork, labels, rotation, shadows, textures, cursors, and
     the independent hover behavior are left untouched
   ========================================================= */
.plate-wrap .desserts .pop--macaron{
  --x:-270px !important;
  --y:-175px !important;
}

.plate-wrap .desserts .pop--cupcake{
  --x:270px !important;
  --y:-175px !important;
}

.plate-wrap .desserts .pop--berry{
  --x:-265px !important;
  --y:20px !important;
}

.plate-wrap .desserts .pop--cookie{
  --x:265px !important;
  --y:20px !important;
}

.plate-wrap .desserts .pop--cherry{
  --x:-245px !important;
  --y:155px !important;
}

.plate-wrap .desserts .pop--tea{
  --x:0px !important;
  --y:165px !important;
}

.plate-wrap .desserts .pop--sugar{
  --x:245px !important;
  --y:155px !important;
}

@media (min-width:721px) and (max-width:1000px){
  .plate-wrap .desserts .pop--berry{
    --x:-255px !important;
  }

  .plate-wrap .desserts .pop--cookie{
    --x:255px !important;
  }

  .plate-wrap .desserts .pop--cherry{
    --x:-225px !important;
    --y:120px !important;
  }

  .plate-wrap .desserts .pop--tea{
    --x:0px !important;
    --y:120px !important;
  }

  .plate-wrap .desserts .pop--sugar{
    --x:225px !important;
    --y:120px !important;
  }
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--macaron{
    --x:-218px !important;
    --y:-140px !important;
  }

  .plate-wrap .desserts .pop--cupcake{
    --x:218px !important;
    --y:-140px !important;
  }

  .plate-wrap .desserts .pop--berry{
    --x:-205px !important;
    --y:20px !important;
  }

  .plate-wrap .desserts .pop--cookie{
    --x:205px !important;
    --y:20px !important;
  }

  .plate-wrap .desserts .pop--cherry{
    --x:-185px !important;
    --y:115px !important;
  }

  .plate-wrap .desserts .pop--tea{
    --x:0px !important;
    --y:128px !important;
  }

  .plate-wrap .desserts .pop--sugar{
    --x:185px !important;
    --y:115px !important;
  }
}

/* =========================================================
   24. Incremental rubber-stamp tool
   Additive only:
   - a compact scrapbook stamp deck in the lower-left
   - a pointer-transparent layer for the stamped marks
   - no existing selector, position, animation, or event is altered
   ========================================================= */
.stamp-deck{
  position:fixed;
  left:max(16px,env(safe-area-inset-left));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:105;
  width:216px;
  padding:14px;
  border:2px solid rgba(128,94,74,.32);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(255,251,235,.97),rgba(255,240,224,.98) 55%,rgba(255,228,235,.96)),
    repeating-linear-gradient(0deg,rgba(123,92,70,.04) 0 1px,transparent 1px 5px);
  box-shadow:
    0 12px 28px rgba(92,65,53,.18),
    inset 0 1px 0 rgba(255,255,255,.92);
  color:#725747;
  isolation:isolate;
}

.stamp-deck::before{
  content:"";
  position:absolute;
  top:-8px;
  left:22px;
  width:58px;
  height:18px;
  z-index:-1;
  border-radius:3px;
  background:rgba(255,223,157,.72);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  transform:rotate(-3deg);
  pointer-events:none;
}

.stamp-deck__title{
  margin:0 0 10px;
  color:#795944;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
}

.stamp-deck__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

.stamp-tool{
  display:flex;
  min-width:0;
  height:58px;
  padding:6px 2px 5px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:2px;
  border:1.5px dashed rgba(114,85,67,.32);
  border-radius:13px;
  background:rgba(255,255,255,.62);
  color:#896957;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.stamp-tool svg{
  width:25px;
  height:25px;
  overflow:visible;
}

.stamp-tool svg path,
.stamp-tool svg circle,
.stamp-tool svg ellipse{
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stamp-tool[data-stamp="paw"] svg path,
.stamp-tool[data-stamp="paw"] svg ellipse{
  fill:currentColor;
  stroke:none;
}

.stamp-tool span{
  overflow:hidden;
  max-width:100%;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:10px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stamp-tool[data-stamp="heart"]{color:#cf7082}
.stamp-tool[data-stamp="star"]{color:#bc9137}
.stamp-tool[data-stamp="flower"]{color:#a96c45}
.stamp-tool[data-stamp="paw"]{color:#8a6652}

.stamp-tool:hover,
.stamp-tool:focus-visible{
  border-color:rgba(133,91,67,.58);
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(105,78,62,.12);
  transform:translateY(-2px) rotate(-1deg);
}

.stamp-tool.is-selected{
  border-style:solid;
  border-color:currentColor;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.76),
    0 5px 11px rgba(101,70,55,.15);
  transform:translateY(-1px);
}

.stamp-deck__clear{
  display:flex;
  width:100%;
  min-height:39px;
  margin-top:10px;
  padding:7px 10px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1.5px solid rgba(149,94,104,.38);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,238,241,.96),rgba(255,220,228,.9));
  color:#8c5964;
  cursor:pointer;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:12px;
  font-weight:700;
  touch-action:manipulation;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}

.stamp-deck__clear svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stamp-deck__clear:hover:not(:disabled),
.stamp-deck__clear:focus-visible:not(:disabled){
  box-shadow:0 5px 12px rgba(126,71,83,.14);
  transform:translateY(-1px);
}

.stamp-deck__clear:disabled{
  cursor:default;
  opacity:.45;
}

.stamp-tool:focus-visible,
.stamp-deck__clear:focus-visible{
  outline:2px solid rgba(197,117,93,.58);
  outline-offset:2px;
}

.stamp-layer{
  position:absolute;
  inset:0 0 auto;
  width:100%;
  min-height:100vh;
  z-index:70;
  overflow:visible;
  pointer-events:none;
}

.stamp-mark{
  position:absolute;
  display:block;
  width:42px;
  height:42px;
  opacity:.56;
  mix-blend-mode:multiply;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--stamp-rot,0deg));
  transform-origin:50% 50%;
  animation:stamp-ink-in .32s cubic-bezier(.2,.82,.3,1.08) both;
  filter:saturate(.92) contrast(.96);
}

.stamp-mark::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:46% 54% 48% 52%;
  background-image:
    radial-gradient(circle at 18% 25%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 66%,rgba(255,255,255,.42) 0 1px,transparent 1.5px);
  background-size:7px 7px,9px 9px;
  opacity:.26;
  pointer-events:none;
}

.stamp-mark svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.stamp-mark svg path,
.stamp-mark svg circle,
.stamp-mark svg ellipse{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stamp-mark[data-stamp="paw"] svg path,
.stamp-mark[data-stamp="paw"] svg ellipse{
  fill:currentColor;
  stroke:none;
}

.stamp-mark--heart{color:#cf7082}
.stamp-mark--star{color:#bc9137}
.stamp-mark--flower{color:#b77a50}
.stamp-mark--paw{color:#8a6652}

@keyframes stamp-ink-in{
  from{opacity:0;transform:translate(-50%,-50%) rotate(var(--stamp-rot,0deg)) scale(1.18)}
  to{opacity:.56;transform:translate(-50%,-50%) rotate(var(--stamp-rot,0deg)) scale(1)}
}

body.modal-open .stamp-deck{
  opacity:.28;
  pointer-events:none;
}

@media (max-width:1360px){
  .stamp-deck{
    position:relative;
    left:auto;
    bottom:auto;
    width:min(520px,calc(100% - 24px));
    margin:18px max(12px,calc((100% - 1180px) / 2 + 12px)) 30px;
  }
}

@media (max-width:720px){
  .stamp-deck{
    width:calc(100% - 24px);
    margin:14px 12px 28px;
    padding:12px;
    border-radius:18px;
  }

  .stamp-deck__grid{
    gap:6px;
  }

  .stamp-tool{
    height:54px;
  }

  .stamp-mark{
    width:38px;
    height:38px;
  }
}

@media (prefers-reduced-motion:reduce){
  .stamp-tool,
  .stamp-deck__clear{
    transition:none;
  }

  .stamp-mark{
    animation:none;
  }
}

/* =========================================================
   25. Incremental autumn leaves
   Background-only layer and a standalone toggle.
   No existing selector or interaction is modified.
   ========================================================= */
.leaf-fall-layer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
  contain:layout paint style;
}

/* Keep all original page content above the autumn background layer. */
.stage{
  z-index:2;
}

.falling-leaf{
  position:absolute;
  top:-12vh;
  left:var(--leaf-x,50%);
  width:var(--leaf-size,32px);
  height:var(--leaf-size,32px);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
  animation:leaf-fall var(--leaf-duration,18s) linear infinite;
  animation-delay:var(--leaf-delay,0s);
}

.falling-leaf__sway{
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% 20%;
  animation:leaf-sway var(--leaf-sway-duration,5.5s) ease-in-out infinite alternate;
  animation-delay:var(--leaf-sway-delay,0s);
}

.falling-leaf__art{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  opacity:var(--leaf-opacity,.5);
  filter:
    saturate(1.2)
    contrast(1.08)
    drop-shadow(0 1px 0 rgba(255,255,255,.68))
    drop-shadow(0 2px 2px rgba(123,78,56,.22));
}

.falling-leaf__art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.leaf-fall-layer.is-paused .falling-leaf,
.leaf-fall-layer.is-paused .falling-leaf__sway{
  animation-play-state:paused;
}

.leaf-fall-layer.is-paused .falling-leaf{
  visibility:hidden;
  opacity:0 !important;
}

.leaf-toggle{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:104;
  display:flex;
  min-width:158px;
  min-height:52px;
  padding:8px 13px 8px 10px;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:2px solid rgba(128,94,74,.32);
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(255,251,235,.97),rgba(255,231,205,.96) 62%,rgba(255,213,184,.94)),
    repeating-linear-gradient(0deg,rgba(123,92,70,.04) 0 1px,transparent 1px 5px);
  box-shadow:
    0 12px 25px rgba(92,65,53,.17),
    inset 0 1px 0 rgba(255,255,255,.92);
  color:#8e5e43;
  cursor:pointer;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  touch-action:manipulation;
  isolation:isolate;
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease,filter .2s ease;
}

.leaf-toggle::before{
  content:"";
  position:absolute;
  top:-7px;
  right:22px;
  width:45px;
  height:15px;
  z-index:-1;
  border-radius:3px;
  background:rgba(255,210,138,.74);
  box-shadow:0 2px 5px rgba(112,84,64,.09);
  transform:rotate(3deg);
  pointer-events:none;
}

.leaf-toggle > svg{
  width:30px;
  height:30px;
  flex:0 0 auto;
  fill:none;
  stroke:#a96c45;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.leaf-toggle__text{
  display:flex;
  min-width:0;
  align-items:flex-start;
  flex-direction:column;
  gap:1px;
  text-align:left;
}

.leaf-toggle__text b{
  font-size:13px;
  line-height:1.2;
}

.leaf-toggle__text small{
  color:#a5765d;
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}

.leaf-toggle:hover,
.leaf-toggle:focus-visible{
  box-shadow:
    0 15px 29px rgba(92,65,53,.2),
    inset 0 1px 0 rgba(255,255,255,.96);
  transform:translateY(-2px) rotate(-.6deg);
}

.leaf-toggle:focus-visible{
  outline:2px solid rgba(197,117,93,.58);
  outline-offset:2px;
}

.leaf-toggle.is-paused{
  opacity:.76;
  filter:saturate(.74);
}

body.modal-open .leaf-toggle{
  opacity:.25;
  pointer-events:none;
}

@keyframes leaf-fall{
  0%{
    opacity:0;
    transform:translate3d(0,-10vh,0) rotate(var(--leaf-start-rot,-18deg));
  }
  3%,
  92%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate3d(var(--leaf-drift,26px),124vh,0) rotate(var(--leaf-end-rot,240deg));
  }
}

@keyframes leaf-sway{
  0%{
    transform:translateX(calc(var(--leaf-sway,7px) * -1)) rotate(-7deg);
  }
  100%{
    transform:translateX(var(--leaf-sway,7px)) rotate(7deg);
  }
}

@media (max-width:1360px){
  .leaf-toggle{
    position:relative;
    right:auto;
    bottom:auto;
    margin:0 max(12px,calc((100% - 1180px) / 2 + 12px)) 30px auto;
  }
}

@media (max-width:720px){
  .leaf-toggle{
    min-width:150px;
    margin:0 12px 28px auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .leaf-toggle{
    transition:none;
  }

  .falling-leaf,
  .falling-leaf__sway{
    animation:none !important;
  }

  .falling-leaf{
    top:var(--leaf-static-top,28%) !important;
    opacity:1 !important;
    transform:rotate(var(--leaf-static-rot,0deg)) !important;
    visibility:visible !important;
  }

  .leaf-fall-layer.is-paused .falling-leaf{
    opacity:0 !important;
    visibility:hidden;
  }
}

/* =========================================================
   26. Incremental sticky-note message board
   Additive only:
   - a warm scrapbook board in the stage
   - temporary notes created and dragged in the browser
   - no existing selector, position, animation, or event is altered
   ========================================================= */
.sticky-board{
  position:fixed;
  top:auto;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));
  z-index:1;
  box-sizing:border-box;
  width:min(256px,calc(35vw - 4px));
  max-height:45vh;
  padding:12px 10px 10px;
  border:2px solid rgba(125,92,69,.38);
  border-radius:18px 15px 20px 16px;
  background:
    linear-gradient(rgba(255,252,235,.62),rgba(255,248,229,.72)),
    url("note-bg.png") center/contain no-repeat;
  background-color:#fff8e9;
  box-shadow:
    0 14px 27px rgba(88,63,49,.19),
    inset 0 1px 0 rgba(255,255,255,.96);
  color:#725747;
  cursor:grab;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  transform:rotate(.25deg);
  transform-origin:100% 100%;
  isolation:isolate;
  overflow:hidden;
  touch-action:none;
  transition:box-shadow .18s ease,opacity .18s ease;
  will-change:left,top;
}

.sticky-board::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:-1;
  border:1px dashed rgba(146,105,73,.25);
  border-radius:16px 13px 18px 14px;
  pointer-events:none;
}

.sticky-board__tape{
  position:absolute;
  top:5px;
  width:48px;
  height:14px;
  z-index:3;
  border-radius:3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.18) 0 5px,transparent 5px 10px),
    rgba(255,210,139,.72);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  pointer-events:none;
}

.sticky-board__tape--left{
  left:20px;
  transform:rotate(-4deg);
}

.sticky-board__tape--right{
  right:18px;
  transform:rotate(4deg);
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.18) 0 5px,transparent 5px 10px),
    rgba(248,185,197,.62);
}

.sticky-board__head{
  position:relative;
  z-index:1;
  padding:2px 4px 8px;
  border-bottom:1.5px dashed rgba(146,105,73,.27);
  cursor:grab;
  touch-action:none;
}

.sticky-board__eyebrow{
  display:block;
  margin-bottom:2px;
  color:#b27669;
  font-family:Georgia,"Times New Roman",serif;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.sticky-board__head h2{
  margin:0;
  color:#795442;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:18px;
  line-height:1.15;
}

.sticky-board__head p{
  margin:3px 0 0;
  color:#9b7560;
  font-size:11px;
  line-height:1.55;
}

.sticky-board__form{
  position:relative;
  z-index:1;
  display:grid;
  gap:6px;
  padding:8px 2px 0;
  cursor:default;
}

.sticky-board__field{
  display:grid;
  gap:2px;
  color:#896653;
  font-size:11px;
  font-weight:700;
}

.sticky-board__field input,
.sticky-board__field textarea{
  display:block;
  width:100%;
  min-width:0;
  border:1.5px dashed rgba(137,103,78,.35);
  border-radius:11px 9px 12px 10px;
  background:rgba(255,255,255,.66);
  box-shadow:inset 0 1px 2px rgba(108,77,58,.06);
  color:#674d40;
  font-family:inherit;
  font-size:12px;
  line-height:1.5;
  outline:none;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.sticky-board__field input{
  height:34px;
  padding:5px 10px;
}

.sticky-board__field textarea{
  min-height:48px;
  padding:6px 8px;
  resize:none;
}

.sticky-board__field input::placeholder,
.sticky-board__field textarea::placeholder{
  color:#b59b88;
}

.sticky-board__field input:focus,
.sticky-board__field textarea:focus{
  border-color:rgba(174,105,88,.68);
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 3px rgba(245,180,160,.16);
}

.sticky-board__form-foot{
  display:flex;
  min-height:30px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.sticky-board__count{
  color:#a18473;
  font-size:9px;
  white-space:nowrap;
}

.sticky-board__submit{
  min-height:30px;
  padding:5px 10px;
  border:1.5px solid rgba(154,104,79,.43);
  border-radius:12px 10px 13px 11px;
  background:linear-gradient(180deg,rgba(255,248,222,.98),rgba(255,218,181,.92));
  box-shadow:0 5px 11px rgba(116,78,58,.12),inset 0 1px 0 rgba(255,255,255,.86);
  color:#845a45;
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  touch-action:manipulation;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.sticky-board__submit:hover,
.sticky-board__submit:focus-visible{
  box-shadow:0 8px 15px rgba(116,78,58,.17),inset 0 1px 0 rgba(255,255,255,.94);
  filter:saturate(1.08);
  transform:translateY(-1px) rotate(-.8deg);
}

.sticky-board__submit:focus-visible,
.sticky-board__field input:focus-visible,
.sticky-board__field textarea:focus-visible{
  outline:2px solid rgba(197,117,93,.54);
  outline-offset:2px;
}

.sticky-board__status{
  min-height:12px;
  margin:-1px 1px 0;
  color:#b16d64;
  font-size:9px;
  line-height:1.35;
}

.sticky-board__canvas{
  position:relative;
  height:clamp(84px,15vh,150px);
  margin-top:8px;
  overflow:hidden;
  border:2px solid rgba(85,74,58,.42);
  border-radius:15px 12px 17px 13px;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.07) 0 1px,transparent 1.4px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px),
    linear-gradient(145deg,#65705d,#535c4c 62%,#485142);
  background-size:23px 23px,auto,auto;
  box-shadow:
    inset 0 3px 12px rgba(23,29,22,.22),
    inset 0 -2px 0 rgba(255,255,255,.08),
    0 7px 13px rgba(102,77,58,.1);
  cursor:default;
  touch-action:pan-y;
}

.sticky-board__canvas::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:0;
  border:1px dashed rgba(249,239,211,.31);
  border-radius:10px 9px 12px 8px;
  pointer-events:none;
}

.sticky-board__canvas::after{
  content:"☁  ☕  ♡";
  position:absolute;
  right:12px;
  bottom:8px;
  z-index:1;
  color:rgba(255,245,218,.36);
  font-family:Georgia,serif;
  font-size:12px;
  letter-spacing:.18em;
  pointer-events:none;
}

.sticky-board__empty{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  width:78%;
  color:rgba(255,247,220,.7);
  font-size:11px;
  line-height:1.6;
  text-align:center;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-1deg);
}

.sticky-board__canvas.has-notes .sticky-board__empty{
  display:none;
}

.sticky-note{
  --note-paper:#fff6d9;
  --note-paper-2:#ffe9b7;
  --note-accent:#a96f57;
  position:absolute;
  z-index:2;
  display:flex;
  width:min(168px,calc(100% - 12px));
  min-height:96px;
  padding:18px 14px 12px;
  flex-direction:column;
  clip-path:polygon(0 4%,4% 0,95% 1%,100% 6%,98% 94%,94% 100%,4% 99%,0 94%);
  background:
    radial-gradient(circle at 20% 22%,rgba(255,255,255,.5) 0 1px,transparent 1.4px),
    radial-gradient(circle at 72% 76%,rgba(126,89,63,.08) 0 1px,transparent 1.4px),
    linear-gradient(145deg,var(--note-paper),var(--note-paper-2));
  background-size:22px 22px,29px 29px,auto;
  box-shadow:0 9px 15px rgba(40,41,30,.22);
  color:#6e5043;
  cursor:grab;
  filter:drop-shadow(0 4px 4px rgba(39,37,27,.13));
  touch-action:none;
  transform:rotate(var(--note-rot,0deg));
  transform-origin:50% 50%;
  user-select:none;
  -webkit-user-select:none;
  will-change:left,top,transform;
  transition:filter .18s ease,box-shadow .18s ease;
}

.sticky-note[data-tone="1"]{
  --note-paper:#fff0d1;
  --note-paper-2:#ffdca7;
  --note-accent:#b77a48;
}

.sticky-note[data-tone="2"]{
  --note-paper:#eaf5d5;
  --note-paper-2:#cfe8bd;
  --note-accent:#658a58;
}

.sticky-note[data-tone="3"]{
  --note-paper:#fbe5e7;
  --note-paper-2:#f4cbd3;
  --note-accent:#ae636f;
}

.sticky-note.is-dragging{
  z-index:6;
  cursor:grabbing;
  filter:drop-shadow(0 14px 11px rgba(34,35,26,.26));
}

.sticky-note__grip{
  position:absolute;
  top:7px;
  left:14px;
  width:18px;
  height:3px;
  border-radius:99px;
  background:var(--note-accent);
  box-shadow:0 5px 0 var(--note-accent),0 10px 0 var(--note-accent);
  opacity:.23;
  pointer-events:none;
}

.sticky-note__close{
  position:absolute;
  top:5px;
  right:6px;
  z-index:4;
  display:grid;
  width:20px;
  height:20px;
  padding:0;
  place-items:center;
  border:1.5px solid rgba(132,86,72,.35);
  border-radius:50%;
  background:rgba(255,255,255,.55);
  color:#9d6770;
  cursor:pointer;
  font-family:Arial,sans-serif;
  font-size:14px;
  line-height:1;
  touch-action:manipulation;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}

.sticky-note__close:hover,
.sticky-note__close:focus-visible{
  background:rgba(255,255,255,.93);
  color:#b3485c;
  transform:scale(1.08) rotate(7deg);
}

.sticky-note__close:focus-visible{
  outline:2px solid rgba(197,117,93,.62);
  outline-offset:2px;
}

.sticky-note__message{
  position:relative;
  z-index:1;
  max-height:45px;
  margin:6px 0 7px;
  overflow:hidden;
  overflow-wrap:anywhere;
  color:#654a3e;
  font-size:11px;
  line-height:1.62;
  white-space:pre-wrap;
}

.sticky-note__time{
  position:relative;
  z-index:1;
  margin-top:auto;
  color:rgba(109,77,62,.68);
  font-family:Georgia,"Times New Roman",serif;
  font-size:8px;
  letter-spacing:.03em;
}

body.modal-open .sticky-board{
  opacity:.25;
  pointer-events:none;
}

.sticky-board.is-dragging{
  cursor:grabbing;
  box-shadow:
    0 22px 38px rgba(69,48,37,.28),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.sticky-board.is-dragging .sticky-board__head,
.sticky-board.is-dragging,
.sticky-board.is-dragging *{
  cursor:grabbing;
}

.sticky-board.is-dragging input,
.sticky-board.is-dragging textarea,
.sticky-board.is-dragging button{
  pointer-events:none;
}

@media (max-width:1360px){
  .sticky-board{
    width:min(236px,35vw);
    transform:rotate(.15deg);
  }
}

@media (max-width:720px){
  .sticky-board{
    width:calc(35vw - 4px);
    padding:9px 7px 8px;
    border-radius:16px 13px 17px 14px;
  }

  .sticky-board__head h2{
    font-size:16px;
  }

  .sticky-board__eyebrow,
  .sticky-board__head p,
  .sticky-board__field,
  .sticky-board__status{
    font-size:8px;
  }

  .sticky-board__field textarea{
    min-height:42px;
    padding:5px 6px;
  }

  .sticky-board__submit{
    min-height:27px;
    padding:4px 6px;
    font-size:9px;
  }

  .sticky-board__canvas{
    height:clamp(80px,15vh,132px);
  }
}

@media (max-height:760px){
  .sticky-board{
    max-height:calc(45vh - 4px);
    padding:8px 8px 7px;
  }

  .sticky-board__head{
    padding:0 3px 5px;
  }

  .sticky-board__head h2{
    font-size:16px;
  }

  .sticky-board__head p{
    margin-top:1px;
    font-size:9px;
    line-height:1.35;
  }

  .sticky-board__form{
    gap:4px;
    padding-top:5px;
  }

  .sticky-board__field textarea{
    min-height:36px;
  }

  .sticky-board__form-foot{
    min-height:24px;
  }

  .sticky-board__canvas{
    height:clamp(88px,13vh,100px);
    margin-top:5px;
  }

  .sticky-note{
    width:min(146px,calc(100% - 10px));
    min-height:78px;
    padding:15px 11px 9px;
  }

  .sticky-note__grip{
    top:6px;
    left:11px;
    transform:scale(.86);
    transform-origin:left top;
  }

  .sticky-note__close{
    top:4px;
    right:5px;
    width:18px;
    height:18px;
    font-size:12px;
  }

  .sticky-note__message{
    max-height:36px;
    margin:4px 0 5px;
    font-size:10px;
    line-height:1.55;
  }

  .sticky-note__time{
    font-size:7px;
  }
}

@media (prefers-reduced-motion:reduce){
  .sticky-board__submit,
  .sticky-board__field input,
  .sticky-board__field textarea,
  .sticky-note,
  .sticky-note__close{
    transition:none;
  }
}

/* =========================================================
   28. Incremental scrapbook background themes
   Additive only:
   - a compact theme switch panel
   - three color treatments for the existing bottom background layer
   - no page content, popup, stamp, leaf, cursor, or sticky-note style is changed
   ========================================================= */
.bg-theme-panel{
  position:fixed;
  top:max(8px,env(safe-area-inset-top));
  right:max(104px,calc(env(safe-area-inset-right) + 94px));
  z-index:45;
  width:184px;
  box-sizing:border-box;
  padding:9px 9px 8px;
  border:2px solid rgba(128,94,74,.3);
  border-radius:18px 15px 20px 16px;
  background:
    radial-gradient(circle at 16% 12%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(255,252,238,.98),rgba(255,238,218,.97) 58%,rgba(244,230,246,.96));
  background-size:22px 22px,auto;
  box-shadow:
    0 13px 27px rgba(92,65,53,.16),
    inset 0 1px 0 rgba(255,255,255,.94);
  color:#795b49;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  isolation:isolate;
  transition:box-shadow .2s ease,opacity .2s ease,transform .2s ease;
}

.bg-theme-panel::before{
  content:"";
  position:absolute;
  inset:6px;
  z-index:-1;
  border:1px dashed rgba(146,105,73,.23);
  border-radius:15px 12px 17px 13px;
  pointer-events:none;
}

.bg-theme-panel__tape{
  position:absolute;
  top:-7px;
  right:22px;
  width:52px;
  height:15px;
  border-radius:3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.2) 0 5px,transparent 5px 10px),
    rgba(255,210,139,.72);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  transform:rotate(3deg);
  pointer-events:none;
}

.bg-theme-panel__title{
  margin:0 0 9px;
  color:#795944;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
}

.bg-theme-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}

.bg-theme-option{
  display:flex;
  min-width:0;
  min-height:50px;
  padding:5px 2px 4px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  border:1.5px dashed rgba(114,85,67,.3);
  border-radius:13px;
  background:rgba(255,255,255,.62);
  color:#896957;
  cursor:pointer;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:9px;
  line-height:1.15;
  white-space:nowrap;
  touch-action:manipulation;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.bg-theme-option__swatch{
  display:block;
  width:24px;
  height:24px;
  border:1.5px solid rgba(103,77,60,.3);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.55),
    0 2px 5px rgba(91,66,52,.13);
}

.bg-theme-option[data-bg-theme="original"] .bg-theme-option__swatch{
  background:conic-gradient(#FFF2B1 0 25%,#FFB8CA 0 50%,#A9E1B6 0 75%,#A6DCF4 0);
}

.bg-theme-option[data-bg-theme="autumn"] .bg-theme-option__swatch{
  background:conic-gradient(#E5C79D 0 25%,#C99F74 0 50%,#B98B63 0 75%,#E7D2B1 0);
}

.bg-theme-option[data-bg-theme="morandi"] .bg-theme-option__swatch{
  background:conic-gradient(#D9D2CA 0 25%,#C8D2CF 0 50%,#D3C1BE 0 75%,#C9C4D2 0);
}

.bg-theme-option:hover,
.bg-theme-option:focus-visible{
  border-color:rgba(133,91,67,.58);
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(105,78,62,.12);
  transform:translateY(-2px) rotate(-1deg);
}

.bg-theme-option.is-active{
  border-style:solid;
  border-color:rgba(167,111,82,.68);
  background:rgba(255,255,255,.96);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.76),
    0 5px 11px rgba(101,70,55,.15);
  transform:translateY(-1px);
}

.bg-theme-option:focus-visible{
  outline:2px solid rgba(197,117,93,.58);
  outline-offset:2px;
}

body.modal-open .bg-theme-panel{
  opacity:.24;
  pointer-events:none;
}

/* Keep the change confined to the existing fixed background layers. */
body[data-bg-theme="original"]{
  background:linear-gradient(135deg,#FFF5CB 0%,#FFE9D0 36%,#EAF6D8 68%,#DFF2FA 100%);
}

body[data-bg-theme="autumn"]{
  background:linear-gradient(135deg,#F4E7D2 0%,#E8CFAD 36%,#DFC5A2 68%,#EFE0C9 100%);
}

body[data-bg-theme="morandi"]{
  background:linear-gradient(135deg,#E9E5DF 0%,#DCE3DF 36%,#E7DDDB 68%,#DDD8E1 100%);
}

body[data-bg-theme="autumn"] .quilt{
  background:#D9B98F;
  box-shadow:
    inset 0 0 140px rgba(114,75,48,.15),
    inset 0 0 0 1px rgba(255,250,241,.46);
}

body[data-bg-theme="morandi"] .quilt{
  background:#D5D0C8;
  box-shadow:
    inset 0 0 140px rgba(91,83,78,.11),
    inset 0 0 0 1px rgba(255,255,255,.5);
}

body[data-bg-theme="autumn"] .patch:nth-child(12n+1){background-color:#D9B98F !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+2){background-color:#C99F74 !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+3){background-color:#E5C79D !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+4){background-color:#B98B63 !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+5){background-color:#D9A97E !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+6){background-color:#E7D2B1 !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+7){background-color:#C7A177 !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+8){background-color:#D6B088 !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+9){background-color:#BE936D !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+10){background-color:#E4C49B !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+11){background-color:#D1AB82 !important}
body[data-bg-theme="autumn"] .patch:nth-child(12n+12){background-color:#C39A75 !important}

body[data-bg-theme="morandi"] .patch:nth-child(12n+1){background-color:#D9D2CA !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+2){background-color:#C8D2CF !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+3){background-color:#D3C1BE !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+4){background-color:#C9C4D2 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+5){background-color:#D7D0C4 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+6){background-color:#BFCBC5 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+7){background-color:#DCCFC0 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+8){background-color:#C7BDB9 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+9){background-color:#D8C8C8 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+10){background-color:#C4D0C7 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+11){background-color:#D1C4D0 !important}
body[data-bg-theme="morandi"] .patch:nth-child(12n+12){background-color:#C8C3B8 !important}

body[data-bg-theme="autumn"] .quilt-vignette{
  background:
    radial-gradient(120% 90% at 50% 42%,transparent 45%,rgba(112,72,47,.12) 100%),
    linear-gradient(180deg,rgba(255,248,235,.26),transparent 22%,transparent 78%,rgba(112,72,47,.08));
}

body[data-bg-theme="morandi"] .quilt-vignette{
  background:
    radial-gradient(120% 90% at 50% 42%,transparent 48%,rgba(80,76,78,.09) 100%),
    linear-gradient(180deg,rgba(255,255,255,.24),transparent 22%,transparent 78%,rgba(80,76,78,.06));
}

.quilt,
.quilt-vignette,
.patch{
  transition:background-color .55s ease,box-shadow .45s ease,border-color .45s ease;
}

@media (max-width:720px){
  .bg-theme-panel{
    right:max(98px,calc(env(safe-area-inset-right) + 88px));
    width:164px;
    padding:7px 7px 6px;
  }

  .bg-theme-panel__title{
    display:none;
  }

  .bg-theme-option{
    min-height:46px;
    padding:4px 1px 3px;
    font-size:8px;
  }

  .bg-theme-option__swatch{
    width:22px;
    height:22px;
  }
}

@media (max-width:420px){
  .bg-theme-panel{
    right:max(86px,calc(env(safe-area-inset-right) + 78px));
    width:154px;
  }
}

@media (prefers-reduced-motion:reduce){
  .quilt,
  .quilt-vignette,
  .patch,
  .bg-theme-panel,
  .bg-theme-option{
    transition:none;
  }
}

/* =========================================================
   29. Incremental central dessert image replacement
   Swaps only the existing central artwork to the local asset.
   Position, paper card, sticker shadow, and plate hover motion
   remain controlled by the existing plate styles.
   ========================================================= */
.plate-text::before{
  content:none;
}

.plate-central-dessert{
  display:block;
  order:5;
  width:clamp(102px,14.6vw,154px);
  height:auto;
  aspect-ratio:1;
  margin:-2px auto 1px;
  object-fit:contain;
  object-position:center;
  filter:
    drop-shadow(0 0 1.6px rgba(255,255,255,.98))
    drop-shadow(0 0 1.6px rgba(255,255,255,.98))
    drop-shadow(0 6px 5px rgba(115,74,51,.16));
}

@media (max-width:760px){
  .plate-central-dessert{
    width:92px;
  }
}

/* =========================================================
   30. Incremental central note image replacement
   The local torn-paper image becomes the text-note background.
   Existing text and central dessert remain overlaid in place.
   ========================================================= */
.plate-wrap .plate-text{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.plate-wrap .plate-text::after{
  content:none;
}

.plate-note-image{
  position:absolute;
  z-index:0;
  top:-9px;
  left:-11px;
  width:calc(100% + 22px);
  height:calc(100% + 20px);
  object-fit:fill;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.2px rgba(255,255,255,.96))
    drop-shadow(0 0 1px rgba(107,87,72,.42))
    drop-shadow(0 12px 10px rgba(115,74,51,.24));
}

.plate-text > :not(.plate-note-image){
  position:relative;
  z-index:1;
}

/* =========================================================
   31. Incremental ZCOOL KuaiLe typography for the central note
   Only the two central note text lines are restyled so they
   stay inside the existing note image.
   ========================================================= */
.plate-wrap .plate-title,
.plate-wrap .plate-sub{
  font-family:"ZCOOL KuaiLe","站酷快乐体","STKaiti","KaiTi",cursive;
  font-style:normal;
  font-weight:400;
}

.plate-wrap .plate-title{
  max-width:96%;
  margin:0 auto;
  font-size:clamp(34px,6.8vw,62px);
  line-height:.98;
  letter-spacing:.012em;
  transform:translateY(1px);
}

.plate-wrap .plate-sub{
  max-width:88%;
  margin:clamp(4px,.7vw,7px) auto 0;
  font-size:clamp(13px,1.75vw,18px);
  line-height:1.35;
  letter-spacing:.055em;
}

@media (max-width:760px){
  .plate-wrap .plate-title{
    font-size:clamp(31px,8.4vw,38px);
  }

  .plate-wrap .plate-sub{
    max-width:94%;
    margin-top:5px;
    font-size:clamp(12.5px,3.1vw,14px);
  }
}

/* =========================================================
   32. Incremental Strawberry Shortcake artwork replacement
   Only the first outer dessert switches to the local s1.png
   asset. Its existing container, label, position, sticker
   effects, and independent hover behavior remain unchanged.
   ========================================================= */
.plate-wrap .desserts .pop--macaron::before{
  background-image:none;
}

.plate-wrap .desserts .pop--macaron .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.9s ease-in-out infinite;
}

/* =========================================================
   33. Incremental Cherry Cake artwork replacement
   Only the left-middle dessert switches to the local s2.png
   asset. Its existing container, label, position, sticker
   effects, and independent hover behavior remain unchanged.
   ========================================================= */
.plate-wrap .desserts .pop--berry::before{
  background-image:none;
}

.plate-wrap .desserts .pop--berry .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.9s ease-in-out infinite;
}

/* =========================================================
   34. Incremental Cherry Cake label position only
   The s2.png artwork, label text, label styling, dessert
   positions, and all interaction behavior remain unchanged.
   Only the label offset is adjusted to keep it clear of the
   Cherry Cake artwork.
   ========================================================= */
.plate-wrap .desserts .pop--berry::after{
  left:-68%;
  top:44%;
  transform:translateX(-50%) rotate(2.6deg);
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--berry::after{
    right:auto;
    left:74px;
    top:calc(100% + 8px);
    transform:rotate(2.6deg);
  }
}

/* =========================================================
   35. Incremental Strawberry Puff artwork and label position
   Only the left-bottom dessert switches to the local s3.png
   asset. Its existing label text and styling, sticker effects,
   position, and independent hover behavior remain unchanged;
   only the label offset is adjusted to stay clear of s3.png.
   ========================================================= */
.plate-wrap .desserts .pop--cherry::before{
  background-image:none;
}

.plate-wrap .desserts .pop--cherry .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.9s ease-in-out infinite;
}

.plate-wrap .desserts .pop--cherry::after{
  left:-48%;
  top:68%;
  transform:translateX(-50%) rotate(-2.8deg);
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--cherry::after{
    right:auto;
    left:calc(100% + 4px);
    top:55%;
    transform:rotate(-2.8deg);
  }
}

/* =========================================================
   36. Incremental Butter Cookie artwork and label position
   Only the lower-center dessert switches to the local s4.png
   asset. Its existing label text and styling, sticker effects,
   position, and independent hover behavior remain unchanged;
   only the label offset is adjusted to stay clear of s4.png.
   ========================================================= */
.plate-wrap .desserts .pop--tea::before{
  background-image:none;
}

.plate-wrap .desserts .pop--tea .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.9s ease-in-out infinite;
}

.plate-wrap .desserts .pop--tea::after{
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%) rotate(1.6deg);
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--tea::after{
    right:auto;
    left:50%;
    top:calc(100% + 7px);
    transform:translateX(-50%) rotate(1.6deg);
  }
}

/* =========================================================
   37. Incremental Caramel Pudding artwork and label position
   Only the right-bottom dessert switches to the local s5.png
   asset. Its existing label text and styling, sticker effects,
   position, and independent hover behavior remain unchanged;
   only the label offset is adjusted to stay clear of s5.png.
   ========================================================= */
.plate-wrap .desserts .pop--sugar::before{
  background-image:none;
}

.plate-wrap .desserts .pop--sugar .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.9s ease-in-out infinite;
}

.plate-wrap .desserts .pop--sugar::after{
  right:auto;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) rotate(2.4deg);
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--sugar::after{
    right:auto;
    left:50%;
    top:-8px;
    transform:translate(-50%,-100%) rotate(2.4deg);
  }
}

/* =========================================================
   38. Incremental Lemon Tart artwork and label position
   Only the right-middle dessert switches to the local s6.png
   asset. Its existing label text and styling, sticker effects,
   position, and independent hover behavior remain unchanged;
   only the label offset is adjusted to stay clear of s6.png.
   ========================================================= */
.plate-wrap .desserts .pop--cookie::before{
  background-image:none;
}

.plate-wrap .desserts .pop--cookie .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 4.2s ease-in-out infinite;
}

.plate-wrap .desserts .pop--cookie::after{
  right:auto;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) rotate(-2.2deg);
}

@media (min-width:721px) and (max-width:1000px){
  .plate-wrap .desserts .pop--cookie::after{
    right:auto;
    left:50%;
    top:-8px;
    transform:translate(-50%,-100%) rotate(-2.2deg);
  }
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--cookie::after{
    right:auto;
    left:50%;
    top:-8px;
    transform:translate(-50%,-100%) rotate(-2.2deg);
  }
}

/* =========================================================
   39. Incremental Matcha Sweet artwork and label position
   Only the right-top dessert switches to the local s7.png
   asset. Its existing label text and styling, sticker effects,
   position, and independent hover behavior remain unchanged;
   only the label offset is adjusted to stay clear of s7.png.
   ========================================================= */
.plate-wrap .desserts .pop--cupcake::before{
  background-image:none;
}

.plate-wrap .desserts .pop--cupcake .pop-art-image{
  position:absolute;
  z-index:1;
  top:-10%;
  left:-10%;
  display:block;
  width:120%;
  height:120%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(0 0 1.5px #FFFDF7)
    drop-shadow(2px 3px 0 rgba(255,253,247,.96))
    drop-shadow(0 8px 5px rgba(115,74,51,.16));
  animation:bob 3.8s ease-in-out infinite;
}

.plate-wrap .desserts .pop--cupcake::after{
  right:auto;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) rotate(2.8deg);
}

@media (min-width:721px) and (max-width:1000px){
  .plate-wrap .desserts .pop--cupcake::after{
    right:auto;
    left:50%;
    top:-8px;
    transform:translate(-50%,-100%) rotate(2.8deg);
  }
}

@media (max-width:720px){
  .plate-wrap .desserts .pop--cupcake::after{
    right:auto;
    left:50%;
    top:-8px;
    transform:translate(-50%,-100%) rotate(2.8deg);
  }
}

/* =========================================================
   40. Incremental plate dessert reveal interaction
   The seven outer desserts stay behind the center note by default.
   Entering the plate reveals only their visibility and moves their
   existing layer above the note; every artwork, label, position, and
   individual hover transform remains owned by the existing rules.
   ========================================================= */
.plate-wrap .desserts{
  z-index:5;
  transition:transform .4s;
}

.plate-wrap .desserts .pop{
  opacity:0;
  pointer-events:none;
  transition-duration:.42s,.78s;
}

.plate-wrap:hover .desserts,
.plate-wrap:focus-within .desserts{
  z-index:9;
  transition-delay:0s,0s;
}

.plate-wrap:hover .desserts .pop,
.plate-wrap:focus-within .desserts .pop{
  opacity:1;
  pointer-events:auto;
}

/* =========================================================
   41. Incremental background theme panel position
   Moves only the existing background theme switch below the
   top-right sound control. Size, appearance, layers, themes,
   and all interactions remain owned by the existing rules.
   ========================================================= */
.bg-theme-panel{
  top:max(74px,calc(env(safe-area-inset-top) + 66px));
  right:max(18px,calc(env(safe-area-inset-right) + 14px));
}

@media (max-width:720px){
  .bg-theme-panel{
    top:max(70px,calc(env(safe-area-inset-top) + 62px));
    right:max(12px,calc(env(safe-area-inset-right) + 10px));
  }
}

@media (max-width:420px){
  .bg-theme-panel{
    top:max(70px,calc(env(safe-area-inset-top) + 62px));
    right:max(10px,calc(env(safe-area-inset-right) + 8px));
  }
}

/* =========================================================
   42. Incremental dessert card collection
   Additive only:
   - a compact scrapbook album for the seven outer desserts
   - existing dessert nodes, labels, positions, reveal, and hover
     behavior remain owned by the existing rules
   ========================================================= */
.dessert-collection{
  position:fixed;
  top:112px;
  left:max(16px,env(safe-area-inset-left));
  z-index:103;
  box-sizing:border-box;
  width:216px;
  padding:13px 11px 10px;
  border:2px solid rgba(128,94,74,.32);
  border-radius:20px 17px 22px 17px;
  background:
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 72%,rgba(167,121,83,.065) 0 1px,transparent 1.4px),
    linear-gradient(145deg,rgba(255,252,239,.98),rgba(255,237,218,.98) 56%,rgba(250,230,241,.96));
  background-size:25px 25px,31px 31px,auto;
  box-shadow:
    0 13px 28px rgba(92,65,53,.18),
    inset 0 1px 0 rgba(255,255,255,.94);
  color:#725747;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
  isolation:isolate;
}

.dessert-collection::before{
  content:"";
  position:absolute;
  inset:6px;
  z-index:-1;
  border:1.5px dashed rgba(146,105,73,.24);
  border-radius:16px 14px 18px 14px;
  pointer-events:none;
}

.dessert-collection__tape{
  position:absolute;
  top:-8px;
  left:24px;
  width:66px;
  height:17px;
  z-index:-1;
  border-radius:3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.2) 0 5px,transparent 5px 10px),
    rgba(255,212,145,.76);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  transform:rotate(-3deg);
  pointer-events:none;
}

.dessert-collection__head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:3px 8px;
  margin:0 2px 9px;
  padding-bottom:7px;
  border-bottom:1.5px dashed rgba(146,105,73,.27);
}

.dessert-collection__eyebrow{
  grid-column:1 / -1;
  color:#b27669;
  font-family:Georgia,"Times New Roman",serif;
  font-size:8px;
  letter-spacing:.18em;
  line-height:1;
}

.dessert-collection__head h2{
  min-width:0;
  margin:0;
  color:#795442;
  font-size:17px;
  line-height:1.15;
}

.dessert-collection__count{
  align-self:center;
  padding:2px 6px;
  border:1px solid rgba(164,105,86,.22);
  border-radius:99px;
  background:rgba(255,255,255,.58);
  color:#a4695f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:9px;
  line-height:1.2;
  white-space:nowrap;
}

.dessert-collection__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.dessert-card-slot{
  position:relative;
  display:grid;
  min-width:0;
  min-height:66px;
  box-sizing:border-box;
  grid-template-rows:minmax(36px,1fr) auto;
  padding:5px 4px 4px;
  overflow:hidden;
  border:1.5px dashed rgba(137,103,78,.3);
  border-radius:12px 10px 13px 11px;
  background:rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.66);
  transform:rotate(var(--card-rot,0deg));
  transition:
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    transform .3s cubic-bezier(.2,.82,.3,1.08);
}

.dessert-card-slot:nth-child(2n){
  --card-rot:.7deg;
}

.dessert-card-slot:nth-child(3n){
  --card-rot:-.8deg;
}

.dessert-card-slot__empty{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:rgba(145,111,88,.38);
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
  letter-spacing:.06em;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}

.dessert-card-slot__image{
  z-index:1;
  display:block;
  width:100%;
  height:40px;
  min-width:0;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  transform:scale(.68) rotate(-3deg);
  transition:opacity .32s ease,transform .34s cubic-bezier(.2,.82,.3,1.08);
}

.dessert-card-slot__name{
  z-index:1;
  min-width:0;
  margin-top:1px;
  overflow:hidden;
  color:#8c6654;
  font-family:Georgia,"Times New Roman",serif;
  font-size:7px;
  font-weight:700;
  line-height:1.05;
  text-align:center;
  text-overflow:ellipsis;
  opacity:0;
  transition:opacity .24s ease;
}

.dessert-card-slot.is-collected{
  border-style:solid;
  border-color:rgba(176,111,92,.38);
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.75) 0 1px,transparent 1.4px),
    linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,235,211,.88));
  background-size:21px 21px,auto;
  box-shadow:
    0 5px 10px rgba(108,77,58,.12),
    inset 0 1px 0 rgba(255,255,255,.94);
  transform:rotate(calc(var(--card-rot,0deg) * .6)) translateY(-1px);
}

.dessert-card-slot.is-collected .dessert-card-slot__empty{
  opacity:0;
  transform:scale(1.2);
}

.dessert-card-slot.is-collected .dessert-card-slot__image{
  opacity:1;
  transform:scale(1) rotate(0deg);
}

.dessert-card-slot.is-collected .dessert-card-slot__name{
  opacity:1;
}

.dessert-collection__complete{
  max-height:0;
  margin:0;
  overflow:hidden;
  color:#a35d5f;
  font-family:"ZCOOL KuaiLe","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:14px;
  line-height:1.35;
  text-align:center;
  opacity:0;
  transform:translateY(5px) rotate(-1deg);
  transition:max-height .32s ease,margin .32s ease,opacity .32s ease,transform .32s ease;
}

.dessert-collection.is-complete .dessert-collection__complete{
  max-height:44px;
  margin-top:9px;
  opacity:1;
  transform:translateY(0) rotate(-1deg);
}

.plate-wrap .desserts .pop{
  cursor:pointer;
}

body.modal-open .dessert-collection{
  opacity:.24;
  pointer-events:none;
}

@media (max-width:1360px){
  .dessert-collection{
    top:max(78px,calc(env(safe-area-inset-top) + 70px));
    left:max(12px,calc(env(safe-area-inset-left) + 10px));
    width:184px;
    padding:10px 8px 8px;
  }

  .dessert-collection__head{
    margin-bottom:7px;
    padding-bottom:5px;
  }

  .dessert-collection__head h2{
    font-size:15px;
  }

  .dessert-card-slot{
    min-height:56px;
    grid-template-rows:minmax(28px,1fr) auto;
    padding:4px 3px 3px;
  }

  .dessert-card-slot__image{
    height:30px;
  }

  .dessert-card-slot__name{
    font-size:6.5px;
  }

  .dessert-collection__complete{
    font-size:12px;
  }
}

@media (max-width:720px){
  .dessert-collection{
    top:auto;
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 10px));
    left:max(10px,calc(env(safe-area-inset-left) + 8px));
    width:172px;
    padding:9px 8px 8px;
  }

  .dessert-collection__eyebrow{
    font-size:7px;
  }

  .dessert-collection__head h2{
    font-size:14px;
  }

  .dessert-collection__grid{
    gap:5px;
  }

  .dessert-card-slot{
    min-height:52px;
  }

  .dessert-card-slot__image{
    height:27px;
  }
}

@media (max-width:420px){
  .dessert-collection{
    width:158px;
  }

  .dessert-card-slot__name{
    font-size:6px;
  }
}

@media (prefers-reduced-motion:reduce){
  .dessert-card-slot,
  .dessert-card-slot__empty,
  .dessert-card-slot__image,
  .dessert-card-slot__name,
  .dessert-collection__complete{
    transition:none;
  }
}

/* =========================================================
   43. Incremental multi-state Miffy cursors
   Cursor-only overrides:
   - default page: miffy-default.png, aligned by the nose
   - text selection and fields: miffy-text.png
   - clickable desserts, buttons, and links: miffy-link.png
   - active sticky-note dragging: miffy-move.png
   The originals are preserved; 48px transparent derivatives keep
   browser cursor loading reliable without changing any interaction.
   ========================================================= */
:root{
  --miffy-cursor-default:url("miffy-default-cursor.png") 32 24,default;
  --miffy-cursor-text:url("miffy-text-cursor.png") 10 9,text;
  --miffy-cursor-link:url("miffy-link-cursor.png") 16 9,pointer;
  --miffy-cursor-move:url("miffy-move-cursor.png") 21 24,grabbing;
}

html,
body,
body *{
  cursor:var(--miffy-cursor-default) !important;
}

p,
p *,
span,
small,
strong,
em,
b,
i,
time,
li,
dt,
dd,
blockquote,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea,
[contenteditable="true"],
[contenteditable="plaintext-only"],
[contenteditable=""]{
  cursor:var(--miffy-cursor-text) !important;
}

a[href],
a[href] *,
button:not(:disabled),
button:not(:disabled) *,
summary,
summary *,
label[for],
label[for] *,
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
select:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]) *,
[role="link"]:not([aria-disabled="true"]),
[role="link"]:not([aria-disabled="true"]) *,
[data-goto],
[data-goto] *,
[data-panel-open],
[data-panel-open] *,
[data-modal-close],
[data-modal-close] *,
.pop,
.pop *,
.tea-card,
.tea-card *,
.cake-slice,
.cake-slice *,
.entrance,
.entrance *{
  cursor:var(--miffy-cursor-link) !important;
}

.sticky-note.is-dragging,
.sticky-note.is-dragging *,
.sticky-board.is-dragging,
.sticky-board.is-dragging *{
  cursor:var(--miffy-cursor-move) !important;
}

/* =========================================================
   44. Incremental panel toggles
   - three independent scrapbook buttons
   - popup open/close states for the collection, stamp, and note panels
   - existing panel internals, interactions, and data stay untouched
   ========================================================= */
.panel-toggle-stack{
  position:fixed;
  top:50%;
  z-index:130;
  display:flex;
  flex-direction:column;
  gap:12px;
  transform:translateY(-50%);
  pointer-events:none;
}

.panel-toggle-stack--left{
  left:max(18px,env(safe-area-inset-left));
}

.panel-toggle-stack--right{
  right:max(18px,env(safe-area-inset-right));
}

.panel-toggle{
  position:relative;
  display:flex;
  width:96px;
  min-height:76px;
  box-sizing:border-box;
  padding:9px 7px 8px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  border:1.8px solid rgba(125,92,69,.34);
  border-radius:15px 12px 16px 13px;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(255,252,237,.98),rgba(255,231,211,.98));
  background-size:20px 20px,auto;
  box-shadow:
    0 8px 18px rgba(92,65,53,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
  color:#755443;
  cursor:pointer;
  font:700 11px/1.15 "LXGW WenKai","Kaiti SC","STKaiti",serif;
  letter-spacing:.02em;
  text-align:center;
  pointer-events:auto;
  transform:rotate(var(--toggle-rot,0deg));
  transform-origin:50% 70%;
  transition:
    transform .2s cubic-bezier(.2,.8,.3,1.15),
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.panel-toggle::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  width:36px;
  height:11px;
  border-radius:2px;
  background:rgba(255,216,148,.72);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  transform:translateX(-50%) rotate(-2deg);
  pointer-events:none;
}

.panel-toggle span:first-child{
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1;
  color:#b06b63;
}

.panel-toggle--album{
  --toggle-rot:-1.2deg;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(255,250,205,.99),rgba(255,221,145,.98));
}

.panel-toggle--stamp{
  --toggle-rot:1.1deg;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(255,238,239,.99),rgba(247,206,222,.98));
}

.panel-toggle--note{
  --toggle-rot:1.3deg;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(240,255,235,.99),rgba(198,231,205,.98));
}

.panel-toggle:hover,
.panel-toggle:focus-visible{
  border-color:rgba(164,105,86,.5);
  box-shadow:
    0 12px 24px rgba(92,65,53,.22),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform:rotate(var(--toggle-rot,0deg)) translateY(-4px) scale(1.045);
}

.panel-toggle.is-active{
  border-color:rgba(164,105,86,.58);
  box-shadow:
    0 10px 22px rgba(92,65,53,.2),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.panel-toggle.is-active span:first-child{
  color:#a95c58;
}

.dessert-collection,
.stamp-deck,
.sticky-board{
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .32s cubic-bezier(.2,.8,.3,1.05),
    box-shadow .2s ease;
}

.dessert-collection{
  top:max(86px,12vh);
  left:max(122px,calc(env(safe-area-inset-left) + 104px));
  width:216px;
  max-height:min(42vh,420px);
  margin:0;
  overflow:auto;
  transform:rotate(-.35deg);
  transform-origin:left top;
}

.stamp-deck{
  position:fixed;
  top:auto;
  bottom:max(90px,13vh);
  left:max(122px,calc(env(safe-area-inset-left) + 104px));
  width:216px;
  max-height:min(30vh,240px);
  box-sizing:border-box;
  margin:0;
  overflow:auto;
  transform:rotate(.35deg);
  transform-origin:left bottom;
}

.sticky-board{
  top:50%;
  right:max(122px,calc(env(safe-area-inset-right) + 104px));
  bottom:auto;
  width:min(256px,calc(100vw - 260px));
  max-height:min(68vh,660px);
  transform:translateY(-50%) rotate(.25deg);
  transform-origin:right center;
}

.dessert-collection.is-panel-collapsed,
.stamp-deck.is-panel-collapsed,
.sticky-board.is-panel-collapsed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.dessert-collection.is-panel-collapsed,
.stamp-deck.is-panel-collapsed{
  transform:translateX(-14px) scale(.94) rotate(-1deg);
}

.sticky-board.is-panel-collapsed{
  transform:translate(14px,-50%) scale(.94) rotate(1deg);
}

body.modal-open .dessert-collection,
body.modal-open .stamp-deck,
body.modal-open .sticky-board{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (max-width:1200px){
  .dessert-collection,
  .stamp-deck{
    width:clamp(140px,14vw,190px);
    left:max(112px,calc(env(safe-area-inset-left) + 96px));
  }

  .dessert-collection{
    top:max(86px,12vh);
  }

  .stamp-deck{
    top:auto;
    bottom:max(90px,13vh);
  }

  .sticky-board{
    right:max(112px,calc(env(safe-area-inset-right) + 96px));
    width:clamp(140px,16vw,190px);
  }

  .panel-toggle{
    width:88px;
    min-height:70px;
    font-size:10px;
  }
}

@media (min-width:721px) and (max-width:1200px){
  .dessert-collection,
  .stamp-deck,
  .sticky-board{
    top:max(70vh,calc(100vh - 230px));
    bottom:auto;
    width:clamp(140px,calc((100vw - 272px) / 3),190px);
    max-height:22vh;
    overflow:auto;
    transform-origin:center bottom;
  }

  .dessert-collection{
    left:max(112px,calc(env(safe-area-inset-left) + 96px));
    transform:rotate(-.35deg);
  }

  .stamp-deck{
    right:auto;
    left:50%;
    transform:translateX(-50%) rotate(.35deg);
  }

  .sticky-board{
    right:max(112px,calc(env(safe-area-inset-right) + 96px));
    left:auto;
    transform:rotate(.25deg);
  }

  .dessert-collection.is-panel-collapsed,
  .stamp-deck.is-panel-collapsed,
  .sticky-board.is-panel-collapsed{
    transform:translateY(16px) scale(.95) rotate(-.6deg);
  }

  .stamp-deck.is-panel-collapsed{
    transform:translate(-50%,16px) scale(.95) rotate(.6deg);
  }
}

@media (max-width:720px){
  .panel-toggle-stack{
    top:50%;
    bottom:auto;
    flex-direction:column;
    gap:8px;
    transform:translateY(-50%);
  }

  .panel-toggle-stack--left{
    left:max(10px,calc(env(safe-area-inset-left) + 8px));
  }

  .panel-toggle-stack--right{
    right:max(10px,calc(env(safe-area-inset-right) + 8px));
  }

  .panel-toggle{
    width:76px;
    min-height:60px;
    padding:7px 5px 6px;
    border-radius:13px 11px 14px 12px;
    font-size:9px;
  }

  .panel-toggle span:first-child{
    font-size:14px;
  }

  .dessert-collection,
  .stamp-deck,
  .sticky-board{
    max-height:22vh;
    overflow:auto;
    transform-origin:center top;
  }

  .sticky-board{
    top:47vh;
    right:max(94px,calc(env(safe-area-inset-right) + 86px));
    bottom:auto;
    left:max(94px,calc(env(safe-area-inset-left) + 86px));
    width:auto;
    transform:rotate(.25deg);
  }

  .dessert-collection{
    top:71vh;
    bottom:auto;
    left:max(8px,calc(env(safe-area-inset-left) + 6px));
    width:calc(43vw - 6px);
    transform:rotate(-.3deg);
  }

  .stamp-deck{
    top:71vh;
    right:max(8px,calc(env(safe-area-inset-right) + 6px));
    bottom:auto;
    left:auto;
    width:calc(43vw - 6px);
    transform:rotate(.3deg);
  }

  .sticky-board{
    margin:0;
  }

  .dessert-collection.is-panel-collapsed,
  .stamp-deck.is-panel-collapsed,
  .sticky-board.is-panel-collapsed{
    transform:translateY(16px) scale(.95) rotate(-.6deg);
  }
}

@media (max-width:420px){
  .panel-toggle{
    width:68px;
    min-height:56px;
    font-size:8.5px;
  }

  .dessert-collection{
    left:max(6px,calc(env(safe-area-inset-left) + 4px));
    width:calc(43vw - 6px);
  }

  .stamp-deck{
    right:max(6px,calc(env(safe-area-inset-right) + 4px));
    left:auto;
    width:calc(43vw - 6px);
  }

  .sticky-board{
    right:max(82px,calc(env(safe-area-inset-right) + 80px));
    left:max(82px,calc(env(safe-area-inset-left) + 80px));
    width:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .panel-toggle,
  .dessert-collection,
  .stamp-deck,
  .sticky-board{
    transition:none;
  }
}

/* =========================================================
   45. Draggable collection and stamp panels
   - only the title bars start dragging
   - internal cards, stamp tools, and clear button stay clickable
   - concise visual feedback is limited to the active panel
   ========================================================= */
.dessert-collection__head,
.stamp-deck__title{
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.dessert-collection.is-panel-dragging,
.stamp-deck.is-panel-dragging{
  z-index:150;
  cursor:grabbing;
  box-shadow:
    0 18px 38px rgba(92,65,53,.24),
    0 0 0 3px rgba(255,244,216,.48),
    inset 0 1px 0 rgba(255,255,255,.96);
  filter:saturate(1.04);
}

.dessert-collection.is-panel-dragging .dessert-collection__head,
.stamp-deck.is-panel-dragging .stamp-deck__title{
  cursor:grabbing;
}

@media (prefers-reduced-motion:reduce){
  .dessert-collection.is-panel-dragging,
  .stamp-deck.is-panel-dragging{
    filter:none;
  }
}

/* =========================================================
   46. Incremental birthday blessing entry and page
   Additive only:
   - one scrapbook link on the home page
   - a standalone blessing page that reuses the existing
     paper, sticky-note, and Miffy cursor language
   - no existing selector, position, animation, script event,
     or panel state is altered
   ========================================================= */
.home-blessing-entry{
  display:flex;
  margin:14px auto 4px;
  justify-content:center;
  pointer-events:none;
}

.birthday-blessing-entry{
  position:relative;
  display:inline-flex;
  box-sizing:border-box;
  max-width:min(360px,calc(100vw - 48px));
  min-height:44px;
  padding:10px 22px 11px;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(125,92,69,.4);
  border-radius:16px 13px 18px 14px;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.82) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(255,250,221,.99),rgba(255,220,178,.97) 62%,rgba(248,201,206,.96));
  background-size:22px 22px,auto;
  box-shadow:
    0 10px 20px rgba(92,65,53,.17),
    inset 0 1px 0 rgba(255,255,255,.94);
  color:#8a5847 !important;
  font-family:"ZCOOL KuaiLe","LXGW WenKai","Kaiti SC","STKaiti",serif !important;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.02em;
  text-align:center;
  text-decoration:none !important;
  pointer-events:auto;
  transform:rotate(-1.1deg);
  transform-origin:50% 60%;
  transition:transform .2s cubic-bezier(.2,.8,.3,1.15),box-shadow .2s ease,border-color .2s ease;
}

.birthday-blessing-entry::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  width:52px;
  height:13px;
  border-radius:3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px),
    rgba(255,205,132,.72);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  transform:translateX(-50%) rotate(2deg);
  pointer-events:none;
}

.birthday-blessing-entry:hover,
.birthday-blessing-entry:focus-visible{
  border-color:rgba(164,105,86,.58);
  box-shadow:
    0 14px 25px rgba(92,65,53,.22),
    inset 0 1px 0 rgba(255,255,255,.96);
  transform:rotate(1.2deg) translateY(-3px) scale(1.03);
}

.birthday-blessing-entry:focus-visible{
  outline:3px solid rgba(197,117,93,.5);
  outline-offset:3px;
}

body.modal-open .home-blessing-entry{
  pointer-events:none;
}

@media (max-width:720px){
  .home-blessing-entry{
    margin:12px auto 10px;
  }

  .birthday-blessing-entry{
    min-height:40px;
    padding:9px 16px 10px;
    font-size:13px;
  }
}

@media (prefers-reduced-motion:reduce){
  .birthday-blessing-entry{
    transition:none;
  }
}

/* ---- In-plate birthday greeting from blessing.html ---- */
.birthday-hint-layer{
  position:absolute;
  inset:0;
  z-index:9;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:26px;
  pointer-events:none;
}

.birthday-hint{
  max-width:min(430px,86%);
  box-sizing:border-box;
  padding:12px 20px 13px;
  border:2px solid rgba(125,92,69,.34);
  border-radius:17px 14px 19px 15px;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.85) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(255,250,230,.99),rgba(255,224,196,.98));
  background-size:22px 22px,auto;
  box-shadow:
    0 12px 24px rgba(92,65,53,.2),
    inset 0 1px 0 rgba(255,255,255,.95);
  color:#8a5847;
  font-family:"ZCOOL KuaiLe","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:15px;
  line-height:1.5;
  text-align:center;
  transform:rotate(-.8deg);
  animation:birthday-hint-in .5s cubic-bezier(.2,.8,.3,1.1) both;
  transition:opacity .5s ease,transform .5s ease;
}

.birthday-hint.is-leaving{
  opacity:0;
  transform:rotate(.6deg) translateY(-12px) scale(.97);
}

@keyframes birthday-hint-in{
  from{
    opacity:0;
    transform:rotate(-3deg) translateY(12px) scale(.94);
  }
  to{
    opacity:1;
    transform:rotate(-.8deg) translateY(0) scale(1);
  }
}

@media (max-width:720px){
  .birthday-hint-layer{
    padding-top:16px;
  }

  .birthday-hint{
    padding:10px 14px 11px;
    font-size:13px;
  }
}

/* ---- Standalone blessing page ---- */
.blessing-page-body{
  min-height:100vh;
  margin:0;
  background:linear-gradient(150deg,#fbf2e1,#f6e7dd 46%,#eef3e2);
  color:#6e5043;
  font-family:"LXGW WenKai","Kaiti SC","STKaiti",serif;
}

.blessing-topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  min-height:56px;
  padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(255,251,240,.9);
  box-shadow:0 6px 16px rgba(104,78,60,.12);
  backdrop-filter:blur(6px);
}

.blessing-topbar__eyebrow{
  display:block;
  color:#b27669;
  font-family:Georgia,"Times New Roman",serif;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.blessing-topbar__title{
  margin:1px 0 0;
  color:#7d5745;
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
}

.blessing-home-link{
  display:inline-flex;
  box-sizing:border-box;
  min-height:36px;
  padding:7px 14px;
  align-items:center;
  border:1.8px solid rgba(125,92,69,.36);
  border-radius:13px 11px 14px 12px;
  background:linear-gradient(145deg,rgba(255,252,235,.98),rgba(255,226,207,.98));
  box-shadow:0 6px 13px rgba(92,65,53,.14),inset 0 1px 0 rgba(255,255,255,.9);
  color:#8a5847 !important;
  font-size:12px;
  font-weight:700;
  text-decoration:none !important;
  white-space:nowrap;
  transform:rotate(.8deg);
  transition:transform .18s ease,box-shadow .18s ease;
}

.blessing-home-link:hover,
.blessing-home-link:focus-visible{
  box-shadow:0 10px 18px rgba(92,65,53,.2),inset 0 1px 0 rgba(255,255,255,.95);
  transform:rotate(-1deg) translateY(-2px);
}

.blessing-main{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:min(100%,calc(100vw - 32px));
  margin:0 auto;
  padding:26px 0 40px;
}

.blessing-heading{
  width:min(620px,100%);
  margin:0 auto 18px;
  text-align:center;
}

.blessing-heading__tape{
  display:block;
  width:88px;
  height:15px;
  margin:0 auto 10px;
  border-radius:3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.2) 0 5px,transparent 5px 10px),
    rgba(255,203,132,.72);
  box-shadow:0 2px 5px rgba(112,84,64,.1);
  transform:rotate(-2deg);
}

.blessing-heading h1{
  margin:0;
  color:#8a5847;
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:clamp(20px,4vw,30px);
  font-weight:400;
  line-height:1.32;
  letter-spacing:.01em;
}

.blessing-heading p{
  margin:9px 0 0;
  color:#9b7560;
  font-size:12px;
  line-height:1.7;
}

.blessing-panel{
  position:relative;
  z-index:4;
  box-sizing:border-box;
  width:min(520px,100%);
  margin:0 auto;
  padding:18px 18px 16px;
  border:2px solid rgba(125,92,69,.36);
  border-radius:20px 17px 22px 18px;
  background:
    radial-gradient(circle at 16% 14%,rgba(255,255,255,.84) 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 70%,rgba(167,121,83,.06) 0 1px,transparent 1.4px),
    linear-gradient(145deg,rgba(255,252,237,.99),rgba(255,239,213,.98) 62%,rgba(252,226,216,.97));
  background-size:24px 24px,31px 31px,auto;
  box-shadow:0 16px 30px rgba(88,63,49,.18),inset 0 1px 0 rgba(255,255,255,.95);
  transform:rotate(-.2deg);
}

.blessing-panel::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:-1;
  border:1.5px dashed rgba(146,105,73,.24);
  border-radius:17px 14px 19px 15px;
  pointer-events:none;
}

.blessing-form{
  display:grid;
  gap:11px;
}

.blessing-field{
  display:grid;
  gap:4px;
  color:#896653;
  font-size:12px;
  font-weight:700;
}

.blessing-field input,
.blessing-field textarea{
  display:block;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  padding:9px 12px;
  border:1.6px dashed rgba(137,103,78,.36);
  border-radius:13px 11px 14px 12px;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 2px rgba(108,77,58,.06);
  color:#674d40;
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:13px;
  line-height:1.55;
  outline:none;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.blessing-field input{
  height:42px;
}

.blessing-field textarea{
  min-height:112px;
  resize:vertical;
}

.blessing-field input::placeholder,
.blessing-field textarea::placeholder{
  color:#b59b88;
}

.blessing-field input:focus,
.blessing-field textarea:focus{
  border-color:rgba(174,105,88,.66);
  background:rgba(255,255,255,.94);
  box-shadow:0 0 0 3px rgba(245,180,160,.16);
}

.blessing-palette{
  display:grid;
  gap:6px;
  color:#896653;
  font-size:12px;
  font-weight:700;
}

.blessing-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.blessing-swatch{
  position:relative;
  display:inline-flex;
  width:38px;
  height:38px;
  padding:0;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(125,92,69,.28);
  border-radius:12px 10px 13px 11px;
  background:var(--swatch-bg,linear-gradient(145deg,#fff6d9,#ffe9b7));
  box-shadow:0 5px 10px rgba(100,72,55,.14),inset 0 1px 0 rgba(255,255,255,.7);
  cursor:pointer;
  transform:rotate(var(--swatch-rot,0deg));
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.blessing-swatch:nth-child(odd){--swatch-rot:-2deg;}
.blessing-swatch:nth-child(even){--swatch-rot:1.6deg;}

.blessing-swatch::after{
  content:"";
  width:11px;
  height:11px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 2px rgba(125,92,69,.18);
  opacity:0;
  transition:opacity .16s ease;
}

.blessing-swatch:hover,
.blessing-swatch:focus-visible{
  border-color:rgba(164,105,86,.5);
  box-shadow:0 8px 14px rgba(100,72,55,.2),inset 0 1px 0 rgba(255,255,255,.8);
  transform:rotate(0deg) translateY(-2px);
}

.blessing-swatch.is-selected{
  border-color:rgba(164,105,86,.72);
  box-shadow:0 0 0 3px rgba(245,180,160,.26),0 8px 14px rgba(100,72,55,.18);
}

.blessing-swatch.is-selected::after{
  opacity:1;
}

.blessing-actions{
  display:flex;
  margin-top:2px;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.blessing-button{
  display:inline-flex;
  min-height:42px;
  padding:9px 18px;
  align-items:center;
  justify-content:center;
  border:1.8px solid rgba(154,104,79,.42);
  border-radius:14px 12px 15px 13px;
  background:linear-gradient(180deg,rgba(255,249,224,.99),rgba(255,215,175,.95));
  box-shadow:0 7px 14px rgba(116,78,58,.15),inset 0 1px 0 rgba(255,255,255,.88);
  color:#845a45;
  cursor:pointer;
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:13px;
  font-weight:400;
  text-decoration:none;
  touch-action:manipulation;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.blessing-button:hover,
.blessing-button:focus-visible{
  box-shadow:0 11px 19px rgba(116,78,58,.2),inset 0 1px 0 rgba(255,255,255,.94);
  filter:saturate(1.06);
  transform:translateY(-2px) rotate(-.7deg);
}

.blessing-button--ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,233,220,.86));
  color:#8d6a58;
}

.blessing-status{
  min-height:14px;
  margin:2px 0 0;
  color:#b16d64;
  font-size:11px;
  line-height:1.5;
}

.blessing-history{
  width:min(680px,100%);
  margin:24px auto 0;
}

.blessing-history__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding:0 4px;
}

.blessing-history__head h2{
  margin:0;
  color:#7d5745;
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:17px;
  font-weight:400;
}

.blessing-history__note{
  color:#a18473;
  font-size:10px;
  line-height:1.5;
}

.blessing-history__area{
  position:relative;
  min-height:210px;
  padding:14px;
  border:2px dashed rgba(125,92,69,.3);
  border-radius:18px 15px 20px 16px;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.5) 0 1px,transparent 1.4px),
    linear-gradient(145deg,rgba(255,252,240,.8),rgba(248,236,216,.72));
  background-size:24px 24px,auto;
}

.blessing-history__empty{
  margin:58px 10px 0;
  color:#a98d7b;
  font-size:12px;
  line-height:1.7;
  text-align:center;
}

.blessing-history__area.has-notes .blessing-history__empty{
  display:none;
}

.blessing-note{
  --note-paper:#fff6d9;
  --note-paper-2:#ffe9b7;
  --note-accent:#a96f57;
  box-sizing:border-box;
  width:100%;
  min-height:104px;
  cursor:grab;
}

.blessing-note[data-tone="4"]{
  --note-paper:#eaf6fb;
  --note-paper-2:#c9e5f3;
  --note-accent:#668ba2;
}

.blessing-note[data-tone="5"]{
  --note-paper:#f2ecfb;
  --note-paper-2:#d8cbef;
  --note-accent:#8873a6;
}

.blessing-note .sticky-note__message{
  max-height:96px;
  margin-top:8px;
}

.blessing-note .sticky-note__nickname{
  position:relative;
  z-index:1;
  color:var(--note-accent);
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:11px;
  line-height:1.3;
}

.blessing-note .sticky-note__time{
  margin-top:8px;
}

/* Desktop / tablet: notes live in side lanes around the central form. */
.blessing-note-layer{
  position:fixed;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.blessing-note-wrap{
  position:absolute;
  width:var(--note-width,178px);
  pointer-events:auto;
}

.blessing-note-wrap .sticky-note{
  position:relative;
  display:flex;
  width:100%;
  min-height:0;
}

.blessing-note-wrap .sticky-note__message{
  max-height:110px;
}

.blessing-note-wrap.is-dragging,
.blessing-note-wrap.is-dragging *{
  cursor:var(--miffy-cursor-move) !important;
}

.blessing-note-layer.is-restricted .blessing-history__area{
  border-color:rgba(197,117,93,.5);
}

.blessing-restrict-hint{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:60;
  box-sizing:border-box;
  max-width:calc(100vw - 40px);
  padding:9px 16px;
  border:1.6px dashed rgba(137,103,78,.42);
  border-radius:13px 11px 14px 12px;
  background:rgba(255,249,233,.97);
  box-shadow:0 9px 18px rgba(92,65,53,.18);
  color:#9a5f56;
  font-family:"ZCOOL KuaiLe","LXGW WenKai",serif;
  font-size:12px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  text-align:center;
  transform:translate(-50%,12px) rotate(-.6deg);
  transition:opacity .24s ease,transform .24s ease;
}

.blessing-restrict-hint.is-visible{
  opacity:1;
  transform:translate(-50%,0) rotate(-.6deg);
}

/* Narrow screens: notes become a friendly stack under the form. */
@media (max-width:900px){
  .blessing-note-layer{
    position:static;
    overflow:visible;
    pointer-events:auto;
  }

  .blessing-note-wrap{
    position:relative !important;
    display:block;
    top:auto !important;
    left:auto !important;
    width:min(300px,100%) !important;
    margin:0 auto 12px;
  }

  .blessing-note-wrap:last-child{
    margin-bottom:0;
  }

  .blessing-history__area{
    display:flex;
    min-height:120px;
    flex-direction:column;
    gap:12px;
  }

  .blessing-history__empty{
    margin:24px 10px;
  }
}

@media (max-width:520px){
  .blessing-topbar{
    align-items:flex-start;
  }

  .blessing-topbar__title{
    font-size:14px;
  }

  .blessing-main{
    width:min(100%,calc(100vw - 20px));
    padding-top:18px;
  }

  .blessing-panel{
    padding:15px 12px 13px;
  }

  .blessing-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .blessing-button{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .birthday-blessing-entry,
  .blessing-home-link,
  .blessing-swatch,
  .blessing-button,
  .birthday-hint,
  .blessing-restrict-hint{
    transition:none;
  }

  .birthday-hint{
    animation:none;
  }
}

/* =========================================================
   47. Incremental birthday wish popover
   Clicking the central dessert opens one random wish in a
   scrapbook-style floating note. Positioning is calculated
   in app.js so the note stays outside the plate body.
   ========================================================= */
.plate-central-dessert{
  cursor:var(--miffy-cursor-link) !important;
}

.birthday-wish-popover{
  position:fixed;
  left:0;
  top:0;
  z-index:150;
  width:min(274px,calc(100vw - 32px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.96) rotate(-1.2deg);
  transform-origin:50% 100%;
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.2,1.35,.42,1),
    visibility 0s linear .34s;
}

.birthday-wish-popover.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1) rotate(-1.2deg);
  transition-delay:0s;
}

.birthday-wish-popover__paper{
  position:relative;
  box-sizing:border-box;
  width:100%;
  padding:24px 22px 21px;
  border:1.8px dashed rgba(184,105,104,.58);
  border-radius:15px 19px 14px 21px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.78),transparent 43%),
    radial-gradient(circle at 88% 17%,rgba(255,204,106,.28),transparent 28%),
    radial-gradient(circle at 12% 88%,rgba(145,211,170,.2),transparent 30%),
    repeating-linear-gradient(7deg,rgba(105,77,58,.024) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#FFFDF7,#FFF3D6 72%,#FFE9D5);
  box-shadow:
    0 14px 27px -16px rgba(100,66,49,.62),
    0 3px 0 rgba(255,255,255,.76) inset,
    0 0 0 5px rgba(255,228,164,.17);
  color:#654B3C;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  text-align:center;
}

.birthday-wish-popover__paper::before{
  content:"✦";
  position:absolute;
  right:18px;
  bottom:12px;
  color:#E99A67;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1;
  opacity:.78;
  transform:rotate(10deg);
}

.birthday-wish-popover__tape{
  position:absolute;
  z-index:1;
  top:-10px;
  left:50%;
  width:74px;
  height:20px;
  border:1px solid rgba(166,112,63,.2);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.62),rgba(255,255,255,.18)),
    rgba(255,220,137,.75);
  box-shadow:0 3px 6px -3px rgba(105,73,51,.34);
  clip-path:polygon(0 10%,97% 0,100% 78%,3% 100%);
  transform:translateX(-50%) rotate(-2.4deg);
}

.birthday-wish-popover__close{
  position:absolute;
  z-index:3;
  top:7px;
  right:8px;
  display:grid;
  width:26px;
  height:26px;
  padding:0;
  place-items:center;
  border:1px solid rgba(150,91,83,.38);
  border-radius:50%;
  background:rgba(255,251,237,.92);
  color:#A56063;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  line-height:1;
  box-shadow:0 3px 7px -5px rgba(91,71,56,.74);
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}

.birthday-wish-popover__close:hover,
.birthday-wish-popover__close:focus-visible{
  background:#FFE8B8;
  color:#7D4B4D;
  outline:none;
  transform:rotate(8deg) scale(1.08);
}

.birthday-wish-popover__eyebrow{
  position:relative;
  z-index:2;
  margin:0 0 9px;
  color:#C4776D;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.2;
}

.birthday-wish-popover__text{
  position:relative;
  z-index:2;
  margin:0;
  color:#654B3C;
  font-size:16px;
  line-height:1.62;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

@media (max-width:520px){
  .birthday-wish-popover{
    width:min(256px,calc(100vw - 28px));
  }

  .birthday-wish-popover__paper{
    padding:22px 17px 18px;
  }

  .birthday-wish-popover__text{
    font-size:15px;
  }
}

@media (max-width:900px) and (max-height:760px){
  .birthday-wish-popover__paper{
    padding:18px 20px 15px;
  }

  .birthday-wish-popover__eyebrow{
    margin-bottom:6px;
  }

  .birthday-wish-popover__text{
    font-size:15px;
    line-height:1.45;
  }
}

@media (prefers-reduced-motion:reduce){
  .birthday-wish-popover,
  .birthday-wish-popover__close{
    transition:none;
  }
}

/* =========================================================
   48. Incremental fixed birthday tea title
   A non-interactive scrapbook sticker pinned to the top edge.
   It stays below the topbar controls, ignores pointer events,
   and leaves the plate and all existing interactions untouched.
   ========================================================= */
.birthday-tea-banner{
  position:fixed;
  top:8px;
  left:50%;
  z-index:59;
  box-sizing:border-box;
  width:min(600px,calc(100vw - 180px));
  margin:0;
  padding:0 42px;
  pointer-events:none;
  transform:translateX(-50%);
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-weight:400;
  letter-spacing:0;
}

.birthday-tea-banner__copy{
  position:relative;
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:8px 22px 9px;
  border:2px dashed rgba(181,104,105,.46);
  border-radius:17px 21px 16px 20px;
  background:
    radial-gradient(circle at 13% 22%,rgba(255,255,255,.74) 0 1px,transparent 1.5px),
    radial-gradient(circle at 84% 73%,rgba(178,121,87,.06) 0 1px,transparent 1.4px),
    repeating-linear-gradient(7deg,rgba(110,78,58,.02) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,rgba(255,253,239,.98),rgba(255,234,191,.96) 56%,rgba(255,220,218,.96));
  background-size:24px 24px,29px 29px,auto,auto;
  box-shadow:
    0 10px 20px -13px rgba(105,70,51,.64),
    0 2px 0 rgba(255,255,255,.78) inset,
    0 0 0 5px rgba(255,226,160,.15);
  color:#b55270;
  font-size:26px;
  line-height:1.2;
  text-align:center;
  text-shadow:
    0 1px 0 rgba(255,255,255,.94),
    0 0 8px rgba(255,255,255,.48);
  transform:rotate(-.45deg);
}

.birthday-tea-banner__tape{
  position:absolute;
  z-index:2;
  top:-6px;
  left:50%;
  width:78px;
  height:17px;
  border:1px solid rgba(162,105,65,.18);
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.2) 0 5px,transparent 5px 10px),
    rgba(255,206,137,.72);
  box-shadow:0 3px 6px -4px rgba(103,72,51,.56);
  clip-path:polygon(0 10%,97% 0,100% 78%,3% 100%);
  transform:translateX(-50%) rotate(-2.2deg);
}

.birthday-tea-banner__cake{
  position:absolute;
  top:50%;
  z-index:3;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1.8px solid rgba(145,96,68,.42);
  border-radius:48% 43% 52% 45%;
  background:
    radial-gradient(circle at 34% 28%,#fff 0 2px,transparent 2.5px),
    linear-gradient(145deg,#FFFDF2,#FFE5B5);
  box-shadow:
    0 6px 10px -7px rgba(99,67,49,.72),
    inset 0 1px 0 rgba(255,255,255,.9);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8));
}

.birthday-tea-banner__cake--left{
  left:0;
  transform:translateY(-50%) rotate(-7deg);
}

.birthday-tea-banner__cake--right{
  right:0;
  transform:translateY(-50%) rotate(7deg);
}

@media (max-width:900px){
  .birthday-tea-banner{
    width:min(560px,calc(100vw - 150px));
    padding:0 36px;
  }

  .birthday-tea-banner__copy{
    padding:7px 16px 8px;
    font-size:20px;
  }

  .birthday-tea-banner__cake{
    width:31px;
    height:31px;
    font-size:18px;
  }
}

@media (max-width:520px){
  .birthday-tea-banner{
    top:7px;
    width:calc(100vw - 118px);
    padding:0 31px;
  }

  .birthday-tea-banner__tape{
    top:-5px;
    width:62px;
    height:15px;
  }

  .birthday-tea-banner__copy{
    padding:6px 9px 7px;
    border-radius:14px 17px 13px 16px;
    font-size:17px;
    line-height:1.26;
  }

  .birthday-tea-banner__cake{
    width:27px;
    height:27px;
    font-size:15px;
  }
}

@media (max-width:370px){
  .birthday-tea-banner{
    width:calc(100vw - 108px);
    padding:0 28px;
  }

  .birthday-tea-banner__copy{
    font-size:15px;
  }

  .birthday-tea-banner__cake{
    width:25px;
    height:25px;
    font-size:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .birthday-tea-banner__copy,
  .birthday-tea-banner__cake{
    animation:none;
  }
}

/* =========================================================
   49. Incremental wish button inside Lingbao fortune panel
   The button, input dialog, success note, and lightweight
   particles are isolated from the existing fortune flow.
   ========================================================= */
.lingbao-fortune-actions{
  gap:12px;
  flex-wrap:wrap;
}

.lingbao-wish-button{
  position:relative;
  border-color:rgba(181,104,105,.58);
  background:
    radial-gradient(circle at 11% 23%,rgba(255,255,255,.76) 0 1px,transparent 1.5px),
    repeating-linear-gradient(8deg,rgba(110,78,58,.025) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#FFFCF1,#FFE8C8 58%,#FAD9DD);
  background-size:21px 21px,auto,auto;
  color:#9C5661;
  box-shadow:
    0 11px 18px -14px rgba(105,70,51,.72),
    inset 0 1px 0 rgba(255,255,255,.9);
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
}

.lingbao-wish-button:hover,
.lingbao-wish-button:focus-visible{
  border-color:rgba(181,104,105,.76);
  background:
    radial-gradient(circle at 11% 23%,rgba(255,255,255,.82) 0 1px,transparent 1.5px),
    repeating-linear-gradient(8deg,rgba(110,78,58,.025) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#FFFDF6,#FFDEB8 58%,#F7CDD4);
  background-size:21px 21px,auto,auto;
  color:#87454F;
  outline:none;
  transform:translateY(-2px) rotate(-1deg);
}

.lingbao-wish-button:active{
  transform:translateY(0) scale(.98);
}

.tea-wish-modal{
  position:fixed;
  inset:0;
  z-index:180;
  display:grid;
  padding:clamp(18px,4vw,52px);
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .26s ease,visibility .26s ease;
}

.tea-wish-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.tea-wish-modal__dim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 43%,rgba(255,249,237,.2),rgba(74,58,45,.66) 76%),
    rgba(74,58,45,.22);
  backdrop-filter:blur(5px);
}

.tea-wish-modal__paper{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(470px,100%);
  padding:35px clamp(22px,5vw,42px) 31px;
  border:2px dashed rgba(181,104,105,.55);
  border-radius:22px 27px 20px 26px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.78) 0 1px,transparent 1.6px),
    radial-gradient(circle at 84% 74%,rgba(180,121,87,.065) 0 1px,transparent 1.5px),
    repeating-linear-gradient(7deg,rgba(105,77,58,.024) 0 1px,transparent 1px 5px),
    linear-gradient(150deg,#FFFDF5,#FFF2D8 62%,#FFE9DC);
  background-size:24px 24px,29px 29px,auto,auto;
  box-shadow:
    0 27px 49px -27px rgba(93,60,43,.8),
    inset 0 1px 0 rgba(255,255,255,.94),
    0 0 0 6px rgba(255,226,160,.14);
  color:#654B3C;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  text-align:center;
  transform:translateY(22px) scale(.94) rotate(-1.3deg);
  transition:transform .38s cubic-bezier(.2,1.35,.42,1);
}

.tea-wish-modal.is-open .tea-wish-modal__paper{
  transform:translateY(0) scale(1) rotate(-.4deg);
}

.tea-wish-modal__tape{
  position:absolute;
  z-index:2;
  top:-11px;
  left:50%;
  width:88px;
  height:22px;
  border:1px solid rgba(166,112,63,.2);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.64),rgba(255,255,255,.2)),
    rgba(255,220,137,.76);
  box-shadow:0 4px 7px -4px rgba(105,73,51,.42);
  clip-path:polygon(0 10%,97% 0,100% 78%,3% 100%);
  transform:translateX(-50%) rotate(-2.2deg);
}

.tea-wish-modal__close{
  position:absolute;
  z-index:4;
  top:10px;
  right:11px;
  display:grid;
  width:31px;
  height:31px;
  padding:0;
  place-items:center;
  border:1px solid rgba(150,91,83,.4);
  border-radius:50%;
  background:rgba(255,251,237,.94);
  color:#A56063;
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  line-height:1;
  box-shadow:0 4px 8px -6px rgba(91,71,56,.78);
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}

.tea-wish-modal__close:hover,
.tea-wish-modal__close:focus-visible{
  background:#FFE8B8;
  color:#7D4B4D;
  outline:none;
  transform:rotate(8deg) scale(1.08);
}

.tea-wish-modal__eyebrow{
  position:relative;
  z-index:2;
  margin:0 0 9px;
  color:#C4776D;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2;
}

.tea-wish-modal h2{
  position:relative;
  z-index:2;
  margin:0;
  color:#9C4F65;
  font-size:clamp(22px,4vw,30px);
  font-weight:400;
  line-height:1.32;
  text-shadow:0 1px 0 rgba(255,255,255,.92);
}

.tea-wish-form{
  position:relative;
  z-index:2;
  margin-top:21px;
  text-align:left;
}

.tea-wish-form__label{
  display:block;
  margin:0 3px 7px;
  color:#8D6554;
  font-size:14px;
}

.tea-wish-form textarea{
  box-sizing:border-box;
  width:100%;
  min-height:122px;
  padding:13px 14px;
  resize:vertical;
  border:1.7px solid rgba(157,108,81,.45);
  border-radius:14px 17px 13px 16px;
  background:
    repeating-linear-gradient(0deg,rgba(115,84,62,.035) 0 1px,transparent 1px 27px),
    rgba(255,253,244,.9);
  color:#654B3C;
  font:inherit;
  font-size:15px;
  line-height:1.75;
  outline:none;
  box-shadow:inset 0 3px 8px -8px rgba(91,71,56,.64);
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}

.tea-wish-form textarea::placeholder{
  color:rgba(112,84,66,.5);
}

.tea-wish-form textarea:focus{
  border-color:rgba(195,108,112,.72);
  background-color:rgba(255,254,248,.98);
  box-shadow:
    inset 0 3px 8px -8px rgba(91,71,56,.64),
    0 0 0 3px rgba(255,205,151,.2);
}

.tea-wish-form__hint{
  min-height:19px;
  margin:6px 3px 0;
  color:#B35C64;
  font-size:12.5px;
  line-height:1.45;
}

.tea-wish-form__submit{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:12px auto 0;
  padding:11px 20px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid rgba(157,87,92,.58);
  border-radius:999px;
  background:
    radial-gradient(circle at 13% 23%,rgba(255,255,255,.78) 0 1px,transparent 1.5px),
    linear-gradient(145deg,#FFF8EB,#FFD9B8 58%,#F7C7D0);
  color:#8F4A58;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:15px;
  box-shadow:
    0 10px 17px -13px rgba(105,70,51,.75),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .25s cubic-bezier(.2,1.3,.42,1),background-color .2s ease,color .2s ease;
}

.tea-wish-form__submit:hover,
.tea-wish-form__submit:focus-visible{
  background:
    radial-gradient(circle at 13% 23%,rgba(255,255,255,.84) 0 1px,transparent 1.5px),
    linear-gradient(145deg,#FFFDF6,#FFD0AA 58%,#F4BBC7);
  color:#7E3F4D;
  outline:none;
  transform:translateY(-2px) rotate(-.8deg);
}

.tea-wish-form__submit:active{
  transform:translateY(0) scale(.98);
}

.tea-wish-particles{
  position:fixed;
  inset:0;
  z-index:185;
  overflow:hidden;
  pointer-events:none;
}

.tea-wish-particle{
  position:absolute;
  display:block;
  font-size:var(--wish-size,18px);
  line-height:1;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(105,70,51,.22));
  animation:tea-wish-particle-burst .98s cubic-bezier(.18,.7,.24,1) var(--wish-delay,0ms) forwards;
}

.tea-wish-particle--cake{
  color:#D77A74;
}

.tea-wish-particle--star{
  color:#E5A93A;
}

@keyframes tea-wish-particle-burst{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.18) rotate(0deg);
  }
  18%{
    opacity:.95;
  }
  100%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--wish-x,0px)),
        calc(-50% + var(--wish-y,-80px))
      )
      scale(1.06)
      rotate(var(--wish-rot,24deg));
  }
}

.tea-wish-success{
  position:fixed;
  top:22%;
  left:50%;
  z-index:190;
  box-sizing:border-box;
  width:max-content;
  max-width:calc(100vw - 36px);
  margin:0;
  padding:14px 24px;
  border:2px dashed rgba(181,104,105,.58);
  border-radius:16px 20px 15px 19px;
  background:
    repeating-linear-gradient(7deg,rgba(105,77,58,.024) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#FFFDF6,#FFE8C5 62%,#F9D6DD);
  color:#934C5C;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:clamp(18px,3vw,23px);
  line-height:1.4;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.92);
  box-shadow:
    0 19px 31px -22px rgba(93,60,43,.75),
    0 0 0 5px rgba(255,226,160,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px) scale(.94) rotate(-1.2deg);
  transition:opacity .25s ease,transform .38s cubic-bezier(.2,1.35,.42,1),visibility .25s ease;
}

.tea-wish-success.is-show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1) rotate(-1.2deg);
}

@media (max-width:520px){
  .lingbao-fortune-actions{
    gap:8px;
  }

  .tea-wish-modal{
    padding:14px;
  }

  .tea-wish-modal__paper{
    padding:31px 17px 24px;
  }

  .tea-wish-form{
    margin-top:17px;
  }

  .tea-wish-form textarea{
    min-height:108px;
  }
}

@media (prefers-reduced-motion:reduce){
  .tea-wish-modal,
  .tea-wish-modal__paper,
  .tea-wish-modal__close,
  .tea-wish-success,
  .tea-wish-form__submit{
    transition:none;
  }

  .tea-wish-particle{
    animation-duration:.45s;
  }
}

/* =========================================================
   50. Incremental birthday memorial stamp
   Additive only:
   - unlocks after all seven existing dessert cards are collected
   - hidden until unlocked, then persisted through localStorage
   - rest in the blank corner of the existing plate, layered below
     the centered note card and below the dessert reveal layer so
     it never covers the title, the artwork, or the seven stickers
   ========================================================= */
.birthday-memorial-stamp{
  position:absolute;
  top:-4%;
  left:50%;
  z-index:2;
  display:grid;
  box-sizing:border-box;
  width:92px;
  height:92px;
  min-width:0;
  min-height:0;
  max-width:92px;
  max-height:92px;
  aspect-ratio:1;
  place-items:center;
  padding:9px;
  overflow:hidden;
  border:2.5px solid rgba(191,96,116,.6);
  border-radius:50%;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,255,255,.74) 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 74%,rgba(178,120,86,.09) 0 1px,transparent 1.5px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.028) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 50% 50%,
      rgba(255,247,229,.97) 0 56%,
      rgba(252,231,208,.94) 74%,
      rgba(248,214,222,.9) 100%);
  background-size:19px 19px,23px 23px,auto,auto;
  box-shadow:
    0 10px 20px -14px rgba(95,64,48,.75),
    inset 0 0 0 4px rgba(255,255,255,.62),
    inset 0 0 0 6px rgba(191,96,116,.3),
    0 0 0 4px rgba(255,236,196,.22);
  color:#A9546A;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:12px;
  font-weight:400;
  line-height:1.22;
  letter-spacing:.02em;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) rotate(7deg) scale(.8);
  transition:
    opacity .5s ease,
    transform .58s cubic-bezier(.2,1.35,.42,1),
    visibility .5s ease;
}

.birthday-memorial-stamp::before{
  content:"";
  position:absolute;
  inset:11%;
  border:1.5px dashed rgba(191,96,116,.46);
  border-radius:50%;
  pointer-events:none;
}

.birthday-memorial-stamp::after{
  content:"★";
  position:absolute;
  left:50%;
  bottom:10%;
  z-index:1;
  color:#D9839A;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.72em;
  line-height:1;
  transform:translateX(-50%);
  opacity:.85;
}

.birthday-memorial-stamp__text{
  position:relative;
  z-index:1;
  display:block;
  width:88%;
  transform:translateY(-8%);
}

.birthday-memorial-stamp.is-unlocked{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) rotate(-7deg) scale(1);
}

.birthday-memorial-notice{
  position:fixed;
  top:max(74px,calc(env(safe-area-inset-top) + 66px));
  left:50%;
  z-index:190;
  box-sizing:border-box;
  width:max-content;
  max-width:calc(100vw - 34px);
  margin:0;
  padding:12px 22px;
  border:2px dashed rgba(181,104,105,.58);
  border-radius:16px 20px 15px 19px;
  background:
    repeating-linear-gradient(7deg,rgba(105,77,58,.024) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#FFFDF6,#FFE8C5 62%,#F9D6DD);
  color:#934C5C;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:clamp(15px,2.6vw,20px);
  line-height:1.4;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.92);
  box-shadow:
    0 19px 31px -22px rgba(93,60,43,.75),
    0 0 0 5px rgba(255,226,160,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px) scale(.94) rotate(-1.2deg);
  transition:
    opacity .25s ease,
    transform .38s cubic-bezier(.2,1.35,.42,1),
    visibility .25s ease;
}

.birthday-memorial-notice.is-show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1) rotate(-1.2deg);
}

@media (max-width:760px){
  .birthday-memorial-stamp{
    top:1.5%;
    left:1.5%;
    width:clamp(56px,15vw,64px);
    height:clamp(56px,15vw,64px);
    font-size:clamp(8px,2.25vw,9.5px);
    transform:rotate(7deg) scale(.8);
  }

  .birthday-memorial-stamp.is-unlocked{
    transform:rotate(-7deg) scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  .birthday-memorial-stamp,
  .birthday-memorial-notice{
    transition:none;
  }
}

/* =========================================================
   47. Incremental tea landing photo wall
   Only the body of the tea detail view is replaced. The tray,
   header, footer, return button, and all existing app behavior
   remain in place.
   ========================================================= */
.photo-wall{
  position:relative;
  margin-top:clamp(12px,2vw,20px);
  padding:clamp(17px,2.8vw,30px) clamp(12px,2.2vw,24px) clamp(13px,2vw,22px);
  overflow:hidden;
  border:1.5px dashed rgba(164,105,86,.38);
  border-radius:24px 21px 26px 20px;
  background:
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.78) 0 1.3px,transparent 1.6px),
    repeating-linear-gradient(8deg,rgba(110,80,60,.027) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,rgba(255,253,246,.96),rgba(255,236,207,.86) 58%,rgba(247,216,224,.78));
  background-size:18px 18px,auto,auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -16px 26px -24px rgba(123,78,56,.32),
    0 16px 30px -26px rgba(123,78,56,.65);
}

.photo-wall::before,
.photo-wall::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.photo-wall::before{
  inset:8px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:18px 16px 20px 15px;
}

.photo-wall::after{
  top:0;
  left:50%;
  width:92px;
  height:18px;
  border-radius:2px 3px 2px 3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.28) 0 5px,transparent 5px 10px),
    rgba(248,195,135,.68);
  box-shadow:0 3px 7px rgba(112,84,64,.12);
  transform:translate(-50%,-9px) rotate(-1.2deg);
}

.photo-wall__head{
  position:relative;
  z-index:2;
  max-width:720px;
  margin:0 auto clamp(15px,2.2vw,23px);
  text-align:center;
}

.photo-wall__eyebrow{
  margin:0 0 3px;
  color:#B66D66;
  font-size:10px;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
}

.photo-wall__title{
  margin:0;
  color:#805E50;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:clamp(28px,4.6vw,48px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:.025em;
  text-shadow:0 2px 0 rgba(255,255,255,.94),0 4px 0 rgba(229,158,126,.14);
  transform:rotate(-.7deg);
}

.photo-wall__meta{
  margin:7px 0 0;
  color:#9A7563;
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",serif;
  font-size:12px;
  letter-spacing:.05em;
}

.photo-wall__grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  gap:clamp(14px,2.3vw,26px);
  align-items:start;
  padding:5px 3px 8px;
}

.photo-card{
  position:relative;
  display:flex;
  min-width:0;
  margin:0;
  padding:8px 8px 1px;
  overflow:visible;
  border:2px solid rgba(107,87,72,.22);
  border-radius:4px 7px 5px 6px;
  background:
    radial-gradient(circle at 17% 17%,rgba(255,255,255,.68) 0 1px,transparent 1.3px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.025) 0 1px,transparent 1px 4px),
    #FFFDF7;
  box-shadow:
    0 4px 0 rgba(255,255,255,.72) inset,
    0 13px 20px -15px rgba(111,77,57,.78),
    0 2px 4px rgba(111,77,57,.11);
  transform:rotate(var(--photo-rot,0deg));
  transform-origin:50% 58%;
  transition:transform .35s cubic-bezier(.2,.8,.35,1.25),box-shadow .35s ease;
}

.photo-card:nth-child(3n+2){
  top:clamp(2px,.5vw,8px);
}

.photo-card:nth-child(4n+3){
  top:clamp(5px,1vw,13px);
}

.photo-card:hover,
.photo-card:focus-within{
  z-index:8;
  box-shadow:
    0 4px 0 rgba(255,255,255,.78) inset,
    0 21px 29px -18px rgba(111,77,57,.82),
    0 2px 4px rgba(111,77,57,.1);
  transform:rotate(0deg) translateY(-5px) scale(1.035);
}

.photo-card__preview{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:2px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.photo-card__window{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid rgba(107,87,72,.25);
  border-radius:2px 4px 3px 2px;
  background:#F4E5D5;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.34);
}

.photo-card__window::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.25),transparent 36%),
    radial-gradient(circle at 77% 78%,rgba(255,213,138,.18),transparent 34%);
  pointer-events:none;
}

.photo-card__window img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.35,1);
}

.photo-card:hover .photo-card__window img,
.photo-card:focus-within .photo-card__window img{
  transform:scale(1.045);
}

.photo-caption{
  display:block;
  min-height:2.1em;
  padding:8px 4px 9px;
  color:#836A5D;
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:11.5px;
  line-height:1.35;
  letter-spacing:.035em;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.92);
}

.photo-card--empty{
  min-height:162px;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  border-style:dashed;
  border-color:rgba(164,105,86,.34);
  background:
    repeating-linear-gradient(8deg,rgba(110,80,60,.024) 0 1px,transparent 1px 5px),
    rgba(255,250,238,.74);
  box-shadow:
    0 3px 0 rgba(255,255,255,.65) inset,
    0 10px 17px -16px rgba(111,77,57,.55);
}

.photo-card--empty .photo-caption{
  padding-top:7px;
  color:#A88775;
  font-size:10.5px;
}

.photo-card__empty-mark{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1.5px dashed rgba(164,105,86,.48);
  border-radius:50%;
  color:#C78475;
  font-family:"Klee One","Kaiti SC","STKaiti",cursive;
  font-size:23px;
  line-height:1;
  transform:rotate(-4deg);
}

.photo-wall__hint{
  position:relative;
  z-index:2;
  margin:12px 0 0;
  color:#A47D68;
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:11.5px;
  text-align:center;
  letter-spacing:.06em;
}

.photo-wall__doodle{
  position:absolute;
  z-index:4;
  display:block;
  color:#C78874;
  pointer-events:none;
  opacity:.82;
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.72));
}

.photo-wall__doodle svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.photo-wall__doodle--star{
  top:12px;
  left:14px;
  width:34px;
  height:34px;
  color:#D49B66;
  transform:rotate(-12deg);
}

.photo-wall__doodle--cake{
  right:15px;
  bottom:66px;
  width:38px;
  height:38px;
  color:#C98378;
  transform:rotate(9deg);
}

.photo-wall__doodle--cup{
  top:19px;
  right:19px;
  width:38px;
  height:38px;
  color:#8CA9A0;
  transform:rotate(-7deg);
}

.photo-lightbox{
  position:fixed;
  inset:0;
  z-index:180;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,48px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}

.photo-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.photo-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,213,132,.2),transparent 32%),
    radial-gradient(circle at 80% 80%,rgba(157,215,225,.18),transparent 34%),
    rgba(70,52,43,.58);
  backdrop-filter:blur(5px);
}

.photo-lightbox__paper{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(88vh,760px);
  padding:clamp(12px,2vw,20px) clamp(12px,2vw,20px) 14px;
  overflow:auto;
  border:2px solid rgba(107,87,72,.38);
  border-radius:8px 11px 9px 7px;
  background:
    repeating-linear-gradient(7deg,rgba(110,80,60,.025) 0 1px,transparent 1px 5px),
    #FFFDF7;
  box-shadow:
    0 28px 50px -26px rgba(50,35,27,.95),
    0 0 0 7px rgba(255,248,225,.16);
  transform:translateY(10px) rotate(-.35deg) scale(.97);
  transition:transform .35s cubic-bezier(.2,1.3,.35,1);
}

.photo-lightbox.is-open .photo-lightbox__paper{
  transform:translateY(0) rotate(-.35deg) scale(1);
}

.photo-lightbox__image{
  display:block;
  width:100%;
  max-height:min(68vh,620px);
  object-fit:contain;
  border:1px solid rgba(107,87,72,.24);
  border-radius:4px 6px 4px 5px;
  background:#F4E5D5;
}

.photo-lightbox__caption{
  min-height:1.4em;
  margin:11px 42px 0;
  color:#80665A;
  font-family:"ZCOOL KuaiLe","站酷快乐体","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:clamp(15px,2.2vw,19px);
  line-height:1.4;
  text-align:center;
}

.photo-lightbox__close{
  position:absolute;
  top:10px;
  right:11px;
  z-index:2;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  padding:0;
  border:1.5px solid rgba(107,87,72,.38);
  border-radius:50%;
  background:#FFF9E9;
  color:#84685A;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 14px -10px rgba(107,87,72,.8);
  transition:transform .25s ease,background .25s ease;
}

.photo-lightbox__close:hover{
  background:#FFE2B4;
  transform:rotate(7deg) scale(1.06);
}

@media (max-width:720px){
  .photo-wall{
    padding:19px 10px 14px;
    border-radius:19px;
  }

  .photo-wall::before{
    inset:6px;
    border-radius:14px;
  }

  .photo-wall::after{
    width:70px;
    height:15px;
  }

  .photo-wall__title{
    font-size:clamp(26px,8vw,35px);
  }

  .photo-wall__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 11px;
  }

  .photo-card{
    padding:6px 6px 0;
  }

  .photo-card--empty{
    min-height:132px;
  }

  .photo-caption{
    font-size:10px;
    padding:7px 2px 8px;
  }

  .photo-wall__doodle--cake{
    right:7px;
    bottom:48px;
    width:30px;
    height:30px;
  }

  .photo-wall__doodle--cup{
    top:12px;
    right:10px;
    width:30px;
    height:30px;
  }

  .photo-wall__doodle--star{
    top:8px;
    left:8px;
    width:28px;
    height:28px;
  }

  .photo-lightbox{
    padding:12px;
  }

  .photo-lightbox__paper{
    padding:10px 10px 12px;
  }

  .photo-lightbox__caption{
    margin:9px 34px 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .photo-card,
  .photo-card__window img,
  .photo-lightbox,
  .photo-lightbox__paper,
  .photo-lightbox__close{
    transition:none;
  }
}

/* =========================================================
   48. First tea landing cork photo board
   Scoped to tea-1 only; all other tea landing pages continue
   to use the original paper-grid photo wall above.
   ========================================================= */
.photo-wall.photo-wall--cork{
  --cork-frame:#9B6A42;
  --cork-frame-light:#C99667;
  --cork-card:#FFFCF5;
  position:relative;
  margin-top:clamp(10px,1.6vw,18px);
  padding:clamp(18px,2.2vw,28px) clamp(16px,2.4vw,30px) clamp(42px,5vw,58px);
  overflow:hidden;
  border:clamp(9px,1.2vw,15px) solid var(--cork-frame);
  border-radius:7px 9px 6px 8px;
  background:
    radial-gradient(circle at 3px 4px,rgba(79,45,21,.2) 0 1.05px,transparent 1.35px),
    radial-gradient(circle at 9px 8px,rgba(255,239,209,.15) 0 .9px,transparent 1.2px),
    repeating-linear-gradient(17deg,rgba(91,52,28,.055) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(103deg,rgba(255,232,197,.045) 0 1px,transparent 1px 9px),
    linear-gradient(145deg,#D7AF80 0%,#C48E5A 48%,#D5AA78 100%);
  background-size:12px 11px,17px 16px,auto,auto,auto;
  box-shadow:
    inset 0 0 0 2px rgba(255,231,192,.42),
    inset 0 0 0 7px rgba(89,50,25,.16),
    inset 0 -18px 34px -24px rgba(61,34,17,.65),
    0 18px 32px -25px rgba(76,46,27,.82),
    0 3px 0 rgba(255,255,255,.38);
  isolation:isolate;
}

.photo-wall.photo-wall--cork::before{
  inset:5px;
  z-index:0;
  border:2px solid rgba(255,231,194,.44);
  border-radius:3px 5px 3px 4px;
  box-shadow:
    inset 0 0 0 1px rgba(83,45,22,.25),
    inset 0 0 22px rgba(77,43,20,.14);
}

.photo-wall.photo-wall--cork::after{
  inset:10px;
  z-index:0;
  width:auto;
  height:auto;
  border:1px dashed rgba(255,238,207,.23);
  border-radius:2px 3px 2px 3px;
  background:none;
  box-shadow:none;
  transform:none;
}

.photo-wall--cork .photo-wall__head{
  z-index:14;
  width:min(620px,88%);
  max-width:620px;
  margin:0 auto clamp(10px,1.2vw,16px);
  padding:clamp(9px,.95vw,14px) clamp(27px,3.7vw,48px) clamp(8px,.85vw,12px);
  border:1px solid rgba(119,78,49,.3);
  border-radius:4px 7px 5px 6px;
  background:
    radial-gradient(circle at 17% 24%,rgba(255,255,255,.68) 0 1px,transparent 1.3px),
    repeating-linear-gradient(8deg,rgba(110,80,60,.025) 0 1px,transparent 1px 5px),
    #FFF9EA;
  background-size:18px 18px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.68) inset,
    0 11px 17px -14px rgba(65,38,20,.82),
    0 2px 3px rgba(65,38,20,.14);
  transform:rotate(-.42deg);
}

.photo-wall--cork .photo-wall__head::before,
.photo-wall--cork .photo-wall__head::after{
  content:"";
  position:absolute;
  top:-7px;
  width:54px;
  height:15px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.32) 0 5px,transparent 5px 10px),
    rgba(239,189,128,.72);
  box-shadow:0 2px 4px rgba(73,42,22,.18);
  pointer-events:none;
}

.photo-wall--cork .photo-wall__head::before{
  left:13%;
  transform:rotate(-4deg);
}

.photo-wall--cork .photo-wall__head::after{
  right:12%;
  transform:rotate(4deg);
}

.photo-wall--cork .photo-wall__eyebrow{
  color:#A26350;
  font-size:9.5px;
}

.photo-wall--cork .photo-wall__title{
  color:#6F4B3A;
  font-size:clamp(28px,4.15vw,45px);
  text-shadow:0 2px 0 rgba(255,255,255,.9),0 4px 0 rgba(195,116,81,.1);
}

.photo-wall--cork .photo-wall__meta{
  color:#8B6652;
}

.photo-wall--cork .photo-wall__story{
  position:relative;
  z-index:13;
  width:min(850px,92%);
  margin:clamp(16px,2.4vw,28px) auto 10px;
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px) clamp(20px,2.7vw,30px);
  border:1px solid rgba(119,78,49,.32);
  border-radius:5px 8px 6px 7px;
  color:#624A3D;
  background:
    radial-gradient(circle at 17% 24%,rgba(255,255,255,.7) 0 1px,transparent 1.3px),
    repeating-linear-gradient(8deg,rgba(110,80,60,.025) 0 1px,transparent 1px 5px),
    #FFF9EA;
  background-size:18px 18px,auto,auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 15px 22px -18px rgba(65,38,20,.86),
    0 2px 4px rgba(65,38,20,.12);
  transform:rotate(-.2deg);
}

.photo-wall--cork .photo-wall__story::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:74px;
  height:17px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),
    rgba(239,189,128,.72);
  box-shadow:0 2px 4px rgba(73,42,22,.16);
  transform:translateX(-50%) rotate(-1.5deg);
  pointer-events:none;
}

.photo-wall--cork .photo-wall__story-title{
  margin:0 0 10px;
  color:#8B5D48;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(16px,1.8vw,20px);
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
}

.photo-wall--cork .photo-wall__story p:not(.photo-wall__story-title){
  margin:0;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(12px,1.35vw,14px);
  line-height:1.95;
  text-align:justify;
}

.photo-wall--cork .photo-wall__story p:not(.photo-wall__story-title) + p{
  margin-top:11px;
}

.photo-wall--cork .photo-wall__grid--cork{
  position:relative;
  z-index:3;
  display:block;
  min-height:clamp(650px,58vw,800px);
  margin:0;
  padding:0;
  overflow:visible;
}

.photo-wall--cork .photo-card--cork{
  position:absolute;
  display:block;
  min-width:0;
  margin:0;
  padding:clamp(6px,.78vw,10px);
  overflow:visible;
  border:2px solid rgba(95,69,54,.25);
  border-radius:2px 4px 3px 3px;
  background:
    radial-gradient(circle at 19% 18%,rgba(255,255,255,.75) 0 .8px,transparent 1.1px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.022) 0 1px,transparent 1px 4px),
    var(--cork-card);
  background-size:15px 15px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.74) inset,
    0 18px 25px -19px rgba(53,31,18,.9),
    0 3px 6px rgba(53,31,18,.17);
  transform:rotate(var(--photo-rot,0deg)) scale(1);
  transform-origin:50% 54%;
  transition:transform .34s cubic-bezier(.2,.8,.35,1.2),box-shadow .34s ease;
  will-change:transform;
}

.photo-wall--cork .photo-card--cork:nth-child(1){
  top:2.8%;
  left:1.5%;
  z-index:3;
  width:30%;
}

.photo-wall--cork .photo-card--cork:nth-child(2){
  top:.7%;
  left:28.5%;
  z-index:7;
  width:29%;
}

.photo-wall--cork .photo-card--cork:nth-child(3){
  top:5%;
  left:52%;
  right:auto;
  z-index:4;
  width:30%;
}

.photo-wall--cork .photo-card--cork:nth-child(4){
  top:43%;
  left:.8%;
  z-index:2;
  width:29%;
}

.photo-wall--cork .photo-card--cork:nth-child(5){
  top:37%;
  left:29%;
  z-index:8;
  width:31%;
}

.photo-wall--cork .photo-card--cork:nth-child(6){
  top:58%;
  left:58%;
  right:auto;
  z-index:5;
  width:30%;
}

.photo-wall--cork .photo-card--cork:nth-child(2) .photo-card__window{
  aspect-ratio:1/1;
}

.photo-wall--cork .photo-card--cork:nth-child(3) .photo-card__window{
  aspect-ratio:5/4;
}

.photo-wall--cork .photo-card--cork:nth-child(5) .photo-card__window{
  aspect-ratio:5/4;
}

.photo-wall--cork .photo-card--cork:hover,
.photo-wall--cork .photo-card--cork:focus-within{
  z-index:16;
  box-shadow:
    0 3px 0 rgba(255,255,255,.8) inset,
    0 27px 35px -21px rgba(53,31,18,.96),
    0 4px 7px rgba(53,31,18,.15);
  transform:rotate(0deg) translateY(-6px) scale(1.035);
}

.photo-wall--cork .photo-card__window{
  border:1px solid rgba(95,69,54,.24);
  border-radius:1px;
  background:#E7D3BB;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42);
}

.photo-wall--cork .photo-card__preview{
  cursor:pointer;
}

.cork-fixation{
  position:absolute;
  z-index:12;
  width:clamp(9px,.95vw,12px);
  height:clamp(9px,.95vw,12px);
  border:1px solid rgba(91,63,49,.36);
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%,#FFFDF7 0 22%,#D8B08B 27%,#B87A55 62%,#8D5A3E 100%);
  box-shadow:
    0 2px 3px rgba(55,31,18,.32),
    inset 0 1px 0 rgba(255,255,255,.58);
  pointer-events:none;
}

.cork-fixation::after{
  content:"";
  position:absolute;
  top:2px;
  left:3px;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.78);
}

.cork-fixation--tl{
  top:-4px;
  left:-4px;
}

.cork-fixation--tr{
  top:-4px;
  right:-4px;
}

.cork-fixation--bl{
  bottom:-4px;
  left:-4px;
}

.cork-fixation--br{
  right:-4px;
  bottom:-4px;
}

.photo-card--clip .cork-fixation{
  width:clamp(10px,1vw,13px);
  height:clamp(17px,1.55vw,21px);
  border:1.8px solid #B08B6B;
  border-radius:5px 5px 7px 7px;
  background:transparent;
  box-shadow:0 2px 3px rgba(55,31,18,.2);
}

.photo-card--clip .cork-fixation::after{
  top:3px;
  left:50%;
  width:5px;
  height:11px;
  border:1.5px solid rgba(137,101,75,.76);
  border-top:0;
  border-radius:0 0 4px 4px;
  background:transparent;
  transform:translateX(-50%);
}

.photo-card--clip .cork-fixation--bl,
.photo-card--clip .cork-fixation--br{
  transform:rotate(180deg);
}

.photo-wall--cork .photo-card--cork-empty{
  position:absolute;
  display:flex;
  width:17%;
  min-height:0;
  aspect-ratio:1/.82;
  padding:clamp(7px,.9vw,11px);
  justify-content:center;
  align-items:center;
  flex-direction:column;
  overflow:visible;
  border:1.5px dashed rgba(123,78,49,.54);
  border-radius:3px 5px 3px 4px;
  background:
    repeating-linear-gradient(8deg,rgba(110,80,60,.025) 0 1px,transparent 1px 5px),
    rgba(255,248,230,.92);
  box-shadow:
    0 3px 0 rgba(255,255,255,.66) inset,
    0 11px 16px -15px rgba(55,31,18,.8);
  transform:rotate(var(--photo-rot,0deg));
}

.photo-wall--cork .photo-card--cork-empty:nth-child(7){
  top:84%;
  left:19%;
  z-index:11;
}

.photo-wall--cork .photo-card--cork-empty:nth-child(8){
  top:84%;
  left:44%;
  z-index:10;
}

.photo-wall--cork .photo-card--cork-empty:nth-child(9){
  top:84%;
  right:14%;
  z-index:9;
  width:16%;
}

.photo-wall--cork .photo-card--cork-empty:hover,
.photo-wall--cork .photo-card--cork-empty:focus-within{
  z-index:16;
  transform:rotate(0deg) translateY(-3px);
}

.photo-wall--cork .photo-card--cork-empty .photo-card__empty-mark{
  width:clamp(28px,2.6vw,35px);
  height:clamp(28px,2.6vw,35px);
  border-color:rgba(157,105,73,.48);
  color:#B87C65;
  font-size:clamp(19px,1.8vw,23px);
}

.photo-wall--cork .photo-card--cork-empty .photo-caption{
  min-height:0;
  padding:5px 0 0;
  color:#98745F;
  font-size:clamp(8px,.75vw,10px);
  line-height:1.25;
}

.cork-empty-tape{
  position:absolute;
  top:-8px;
  left:50%;
  width:44px;
  height:15px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.28) 0 5px,transparent 5px 10px),
    rgba(236,205,151,.72);
  box-shadow:0 2px 4px rgba(63,38,23,.14);
  transform:translateX(-50%) rotate(-2deg);
  pointer-events:none;
}

.photo-wall--cork .photo-wall__doodle{
  z-index:9;
  color:#A76E58;
  opacity:.9;
  filter:drop-shadow(0 2px 1px rgba(255,244,220,.46));
}

.photo-wall--cork .photo-wall__doodle--cork-star{
  top:21px;
  left:22px;
  width:39px;
  height:39px;
  color:#D58D55;
  transform:rotate(-11deg);
}

.photo-wall--cork .photo-wall__doodle--cork-heart{
  top:25%;
  left:7%;
  width:34px;
  height:34px;
  color:#C97178;
  transform:rotate(9deg);
}

.photo-wall--cork .photo-wall__doodle--cork-note{
  top:26%;
  right:5%;
  width:42px;
  height:42px;
  color:#8D9F82;
  transform:rotate(-8deg);
}

.photo-wall--cork .photo-wall__doodle--cork-tape{
  top:50%;
  left:39%;
  width:49px;
  height:45px;
  color:#C38A63;
  opacity:.72;
  transform:rotate(4deg);
}

.photo-wall--cork .photo-wall__doodle--cork-cat{
  top:69%;
  left:10%;
  width:56px;
  height:50px;
  color:#4E3B35;
  transform:rotate(-5deg);
}

.photo-wall--cork .photo-wall__doodle--cork-music{
  top:43%;
  right:4%;
  width:44px;
  height:44px;
  color:#768EA2;
  transform:rotate(8deg);
}

.photo-wall--cork .photo-wall__doodle--cork-bow{
  top:31%;
  left:46%;
  width:46px;
  height:41px;
  color:#B77FA4;
  transform:rotate(-6deg);
}

.photo-wall--cork .photo-wall__doodle--cork-cat svg path:first-child{
  fill:#4E3B35;
  stroke:#4E3B35;
}

.photo-wall--cork .photo-wall__doodle--cork-cat svg path:nth-child(3){
  stroke:#FFF4DC;
  stroke-width:2.4;
}

.photo-wall--cork .photo-wall__hint{
  position:absolute;
  bottom:12px;
  left:50%;
  z-index:15;
  margin:0;
  padding:4px 12px 5px;
  border:1px solid rgba(116,76,49,.25);
  border-radius:3px 5px 3px 4px;
  background:rgba(255,250,237,.88);
  color:#8D6854;
  font-size:10px;
  box-shadow:0 4px 8px -7px rgba(55,31,18,.8);
  transform:translateX(-50%) rotate(-.5deg);
}

@media (max-width:980px){
  .photo-wall--cork .photo-wall__grid--cork{
    min-height:clamp(610px,74vw,745px);
  }

  .photo-wall--cork .photo-card--cork{
    width:31%;
  }

  .photo-wall--cork .photo-card--cork:nth-child(5){
    width:32%;
  }

  .photo-wall--cork .photo-card--cork-empty{
    width:18%;
  }

  .photo-wall--cork .photo-card--cork-empty:nth-child(9){
    width:17%;
  }
}

@media (max-width:720px){
  .photo-wall.photo-wall--cork{
    margin-top:9px;
    padding:16px 11px 30px;
    border-width:8px;
    border-radius:5px 7px 5px 6px;
  }

  .photo-wall.photo-wall--cork::before{
    inset:3px;
    border-width:1px;
  }

  .photo-wall.photo-wall--cork::after{
    inset:7px;
  }

  .photo-wall--cork .photo-wall__head{
    width:94%;
    margin-bottom:8px;
    padding:9px 24px 8px;
  }

  .photo-wall--cork .photo-wall__head::before,
  .photo-wall--cork .photo-wall__head::after{
    width:42px;
    height:13px;
  }

  .photo-wall--cork .photo-wall__title{
    font-size:clamp(27px,8vw,34px);
  }

  .photo-wall--cork .photo-wall__meta{
    font-size:10px;
  }

  .photo-wall--cork .photo-wall__grid--cork{
    min-height:1220px;
  }

  .photo-wall--cork .photo-card--cork:nth-child(n){
    width:62%;
    padding:6px;
  }

  .photo-wall--cork .photo-card--cork:nth-child(1){
    top:1%;
    left:1%;
  }

  .photo-wall--cork .photo-card--cork:nth-child(2){
    top:11%;
    right:1%;
    left:auto;
  }

  .photo-wall--cork .photo-card--cork:nth-child(3){
    top:23%;
    left:2%;
    right:auto;
  }

  .photo-wall--cork .photo-card--cork:nth-child(4){
    top:34%;
    right:2%;
    left:auto;
  }

  .photo-wall--cork .photo-card--cork:nth-child(5){
    top:45%;
    left:1%;
    right:auto;
  }

  .photo-wall--cork .photo-card--cork:nth-child(6){
    top:56%;
    right:1%;
    left:auto;
  }

  .photo-wall--cork .photo-card--cork-empty,
  .photo-wall--cork .photo-card--cork-empty:nth-child(9){
    width:40%;
    aspect-ratio:1/.86;
  }

  .photo-wall--cork .photo-card--cork-empty:nth-child(7){
    top:75%;
    left:3%;
  }

  .photo-wall--cork .photo-card--cork-empty:nth-child(8){
    top:75%;
    right:3%;
    left:auto;
  }

  .photo-wall--cork .photo-card--cork-empty:nth-child(9){
    top:87%;
    left:30%;
    right:auto;
  }

  .photo-wall--cork .photo-wall__doodle--cork-star{
    top:14px;
    left:10px;
    width:29px;
    height:29px;
  }

  .photo-wall--cork .photo-wall__doodle--cork-heart{
    top:34%;
    left:1%;
    width:25px;
    height:25px;
  }

  .photo-wall--cork .photo-wall__doodle--cork-note{
    top:26%;
    right:1%;
    width:29px;
    height:29px;
  }

  .photo-wall--cork .photo-wall__doodle--cork-tape{
    top:48%;
    left:45%;
    width:32px;
    height:30px;
  }

  .photo-wall--cork .photo-wall__doodle--cork-cat{
    top:69%;
    left:1%;
    width:37px;
    height:33px;
  }

  .photo-wall--cork .photo-wall__doodle--cork-music{
    top:46%;
    right:1%;
    width:30px;
    height:30px;
  }

  .photo-wall--cork .photo-wall__doodle--cork-bow{
    top:35%;
    left:46%;
    width:31px;
    height:28px;
  }

  .photo-wall--cork .photo-wall__hint{
    bottom:8px;
    max-width:92%;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .photo-wall--cork .photo-card,
  .photo-wall--cork .photo-card__window img{
    transition:none;
  }
}

/* Nine-photo cork wall, scoped to the second tea landing page. */
.photo-wall--cork-nine .photo-wall__grid--cork{
  min-height:clamp(900px,82vw,1040px);
}

.photo-wall--cork-nine .photo-card--cork:nth-child(1){
  top:2%;
  left:1.5%;
  z-index:4;
  width:27%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(2){
  top:4%;
  left:27.5%;
  z-index:9;
  width:29%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(3){
  top:0;
  left:57%;
  right:auto;
  z-index:5;
  width:28%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(4){
  top:21%;
  left:0;
  z-index:3;
  width:29%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(5){
  top:25%;
  left:30%;
  z-index:10;
  width:27%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(6){
  top:20%;
  left:58%;
  right:auto;
  z-index:6;
  width:28%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(7){
  top:43%;
  left:5%;
  z-index:5;
  width:29%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(8){
  top:48%;
  left:34%;
  z-index:11;
  width:26%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(9){
  top:44%;
  left:60%;
  right:auto;
  z-index:6;
  width:30%;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(1) .photo-card__window,
.photo-wall--cork-nine .photo-card--cork:nth-child(4) .photo-card__window,
.photo-wall--cork-nine .photo-card--cork:nth-child(7) .photo-card__window{
  aspect-ratio:4/3;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(2) .photo-card__window,
.photo-wall--cork-nine .photo-card--cork:nth-child(5) .photo-card__window,
.photo-wall--cork-nine .photo-card--cork:nth-child(8) .photo-card__window{
  aspect-ratio:1/1;
}

.photo-wall--cork-nine .photo-card--cork:nth-child(3) .photo-card__window,
.photo-wall--cork-nine .photo-card--cork:nth-child(6) .photo-card__window,
.photo-wall--cork-nine .photo-card--cork:nth-child(9) .photo-card__window{
  aspect-ratio:5/4;
}

.photo-wall--cork-nine .photo-card--cork-empty:nth-child(10){
  top:78%;
  left:17%;
  z-index:12;
}

.photo-wall--cork-nine .photo-card--cork-empty:nth-child(11){
  top:79%;
  left:43%;
  z-index:11;
}

.photo-wall--cork-nine .photo-card--cork-empty:nth-child(12){
  top:79%;
  right:15%;
  left:auto;
  z-index:10;
  width:16%;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-star{
  top:18px;
  left:22px;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-heart{
  top:17%;
  left:1.5%;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-note{
  top:17%;
  right:1.5%;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-tape{
  top:38%;
  left:11%;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-cat{
  top:65%;
  left:1.5%;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-music{
  top:36%;
  right:1.5%;
}

.photo-wall--cork-nine .photo-wall__doodle--cork-bow{
  top:34%;
  left:45%;
}

@media (max-width:980px){
  .photo-wall--cork-nine .photo-wall__grid--cork{
    min-height:clamp(840px,92vw,940px);
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(1),
  .photo-wall--cork-nine .photo-card--cork:nth-child(4),
  .photo-wall--cork-nine .photo-card--cork:nth-child(7){
    width:29%;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(2),
  .photo-wall--cork-nine .photo-card--cork:nth-child(5){
    width:31%;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(8){
    width:28%;
  }
}

@media (max-width:720px){
  .photo-wall--cork-nine .photo-wall__grid--cork{
    min-height:1500px;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(n){
    width:65%;
    padding:6px;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(n) .photo-card__window{
    aspect-ratio:4/3;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(1){
    top:1%;
    left:0;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(2){
    top:10%;
    right:0;
    left:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(3){
    top:19%;
    left:2%;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(4){
    top:28%;
    right:1%;
    left:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(5){
    top:37%;
    left:0;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(6){
    top:46%;
    right:1%;
    left:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(7){
    top:55%;
    left:2%;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(8){
    top:64%;
    right:0;
    left:auto;
  }

  .photo-wall--cork-nine .photo-card--cork:nth-child(9){
    top:73%;
    left:1%;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork-empty,
  .photo-wall--cork-nine .photo-card--cork-empty:nth-child(12){
    top:83%;
    width:29%;
    aspect-ratio:1/.82;
  }

  .photo-wall--cork-nine .photo-card--cork-empty:nth-child(10){
    left:2%;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork-empty:nth-child(11){
    left:35.5%;
    right:auto;
  }

  .photo-wall--cork-nine .photo-card--cork-empty:nth-child(12){
    right:2%;
    left:auto;
  }

  .photo-wall--cork-nine .photo-wall__doodle--cork-heart{
    top:16%;
    left:12px;
  }

  .photo-wall--cork-nine .photo-wall__doodle--cork-note{
    top:24%;
    right:12px;
  }

  .photo-wall--cork-nine .photo-wall__doodle--cork-tape{
    top:34%;
    left:43%;
  }

  .photo-wall--cork-nine .photo-wall__doodle--cork-cat{
    top:61%;
    left:12px;
  }

  .photo-wall--cork-nine .photo-wall__doodle--cork-music{
    top:43%;
    right:12px;
  }

  .photo-wall--cork-nine .photo-wall__doodle--cork-bow{
    top:51%;
    left:43%;
  }
}

/* =========================================================
   49. Third tea landing red envelope letter collage
   Scoped to tea-3 only; the homepage, tea selection, tea-1,
   tea-2, tea-4 and tea-5 keep their existing layouts.
   ========================================================= */
.photo-wall.photo-wall--envelope{
  --envelope-red:#C84646;
  --envelope-red-deep:#A9323B;
  --envelope-red-light:#E56A61;
  --envelope-kraft:#D8B88E;
  --envelope-ink:#7B3A36;
  position:relative;
  margin-top:clamp(10px,1.6vw,18px);
  padding:clamp(20px,2.5vw,34px) clamp(14px,2.5vw,32px) clamp(44px,5vw,62px);
  overflow:hidden;
  border:clamp(9px,1.2vw,15px) solid #8F6844;
  border-radius:5px 8px 5px 7px;
  background:
    radial-gradient(circle at 3px 4px,rgba(92,60,35,.14) 0 1px,transparent 1.35px),
    radial-gradient(circle at 9px 8px,rgba(255,247,224,.2) 0 .8px,transparent 1.15px),
    repeating-linear-gradient(18deg,rgba(93,60,34,.048) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(101deg,rgba(255,244,216,.05) 0 1px,transparent 1px 10px),
    linear-gradient(145deg,#E0C39D 0%,#D2B187 49%,#E0C39D 100%);
  background-size:12px 11px,17px 16px,auto,auto,auto;
  box-shadow:
    inset 0 0 0 2px rgba(255,242,211,.36),
    inset 0 0 0 7px rgba(101,64,36,.13),
    inset 0 -20px 36px -26px rgba(72,43,23,.62),
    0 18px 32px -25px rgba(72,43,23,.86),
    0 3px 0 rgba(255,255,255,.42);
  isolation:isolate;
}

.photo-wall.photo-wall--envelope::before{
  inset:6px;
  z-index:0;
  border:1px solid rgba(255,240,210,.48);
  border-radius:3px 6px 3px 5px;
  box-shadow:
    inset 0 0 0 1px rgba(91,57,34,.22),
    inset 0 0 24px rgba(82,50,28,.1);
}

.photo-wall.photo-wall--envelope::after{
  top:19px;
  right:22px;
  bottom:auto;
  left:auto;
  width:84px;
  height:18px;
  border-radius:2px 3px 2px 3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.32) 0 5px,transparent 5px 10px),
    rgba(197,72,70,.72);
  box-shadow:0 3px 7px rgba(79,42,26,.16);
  transform:rotate(4deg);
}

.photo-wall--envelope .photo-wall__head{
  position:relative;
  z-index:24;
  width:min(620px,86%);
  max-width:620px;
  margin:0 auto clamp(10px,1.4vw,17px);
  padding:clamp(10px,1vw,15px) clamp(29px,4vw,51px) clamp(9px,.95vw,14px);
  border:1px solid rgba(123,72,52,.3);
  border-radius:4px 7px 5px 6px;
  background:
    radial-gradient(circle at 17% 24%,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    repeating-linear-gradient(8deg,rgba(110,80,60,.026) 0 1px,transparent 1px 5px),
    #FFF9EC;
  background-size:18px 18px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.7) inset,
    0 12px 18px -15px rgba(74,38,28,.82),
    0 2px 3px rgba(74,38,28,.14);
  transform:rotate(.55deg);
}

.photo-wall--envelope .photo-wall__head::before,
.photo-wall--envelope .photo-wall__head::after{
  content:"";
  position:absolute;
  top:-8px;
  width:58px;
  height:16px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),
    rgba(214,86,82,.7);
  box-shadow:0 2px 4px rgba(78,41,27,.18);
  pointer-events:none;
}

.photo-wall--envelope .photo-wall__head::before{
  left:12%;
  transform:rotate(-4deg);
}

.photo-wall--envelope .photo-wall__head::after{
  right:11%;
  transform:rotate(5deg);
}

.photo-wall--envelope .photo-wall__eyebrow{
  color:#B64D50;
  font-size:9.5px;
}

.photo-wall--envelope .photo-wall__title{
  color:#833C40;
  font-size:clamp(28px,4.15vw,45px);
  text-shadow:0 2px 0 rgba(255,255,255,.92),0 4px 0 rgba(197,70,70,.11);
}

.photo-wall--envelope .photo-wall__meta{
  color:#95695A;
}

.photo-wall--envelope .photo-wall__story{
  position:relative;
  z-index:24;
  width:min(780px,90%);
  margin:clamp(14px,2.2vw,26px) auto 26px;
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px) clamp(20px,2.7vw,30px);
  border:1px solid rgba(146,74,66,.3);
  border-radius:5px 8px 6px 7px;
  color:#6E4B41;
  background:
    radial-gradient(circle at 17% 24%,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    repeating-linear-gradient(8deg,rgba(110,80,60,.026) 0 1px,transparent 1px 5px),
    #FFF9EC;
  background-size:18px 18px,auto,auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 15px 22px -18px rgba(74,38,28,.82),
    0 2px 4px rgba(74,38,28,.12);
  transform:rotate(.25deg);
}

.photo-wall--envelope .photo-wall__story::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:74px;
  height:17px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),
    rgba(214,86,82,.7);
  box-shadow:0 2px 4px rgba(78,41,27,.18);
  transform:translateX(-50%) rotate(-1.5deg);
  pointer-events:none;
}

.photo-wall--envelope .photo-wall__story-title{
  margin:0 0 10px;
  color:#A2413F;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(16px,1.8vw,20px);
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
}

.photo-wall--envelope .photo-wall__story p:not(.photo-wall__story-title){
  margin:0;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(12px,1.35vw,14px);
  line-height:1.95;
  text-align:justify;
}

.photo-wall--envelope .photo-wall__story p:not(.photo-wall__story-title) + p{
  margin-top:11px;
}

.photo-wall--envelope .photo-wall__grid--envelope{
  position:relative;
  z-index:3;
  display:block;
  min-height:clamp(880px,76vw,1080px);
  margin:0;
  padding:0;
  overflow:visible;
}

.envelope-collage{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.envelope-collage__back,
.envelope-collage__paper,
.envelope-collage__flap,
.envelope-collage__front,
.envelope-collage__seal,
.envelope-collage__string,
.envelope-collage__star,
.envelope-collage__heart,
.envelope-collage__note{
  position:absolute;
  display:block;
}

.envelope-collage__back{
  top:19%;
  left:18%;
  z-index:1;
  width:64%;
  height:42%;
  overflow:hidden;
  border:2px solid rgba(116,32,38,.55);
  border-radius:5px 8px 5px 7px;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,216,190,.2) 0 1px,transparent 1.4px),
    repeating-linear-gradient(13deg,rgba(105,30,32,.075) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#D45650 0%,#B8373D 55%,#C94746 100%);
  background-size:15px 15px,auto,auto;
  box-shadow:
    inset 0 0 0 5px rgba(255,190,166,.09),
    inset 0 -18px 28px -20px rgba(92,25,29,.65),
    0 19px 31px -21px rgba(70,32,25,.82),
    0 4px 7px rgba(70,32,25,.16);
  transform:rotate(-1.25deg);
}

.envelope-collage__back::before,
.envelope-collage__back::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,226,200,.18);
  border-radius:3px 5px 3px 5px;
}

.envelope-collage__back::after{
  inset:auto 0 0;
  height:34%;
  border:0;
  background:linear-gradient(180deg,transparent,rgba(105,25,31,.16));
}

.envelope-collage__paper{
  top:20%;
  left:21%;
  z-index:2;
  width:58%;
  height:36%;
  border:1px solid rgba(125,83,57,.22);
  border-radius:3px 6px 4px 5px;
  background:
    repeating-linear-gradient(0deg,rgba(126,85,61,.08) 0 1px,transparent 1px 27px),
    linear-gradient(145deg,#FFF8E9,#F4E3C8);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.4),
    0 8px 15px -13px rgba(85,45,27,.7);
  transform:rotate(1.1deg);
}

.envelope-collage__flap{
  top:17%;
  left:18%;
  z-index:3;
  width:64%;
  height:27%;
  clip-path:polygon(0 0,50% 70%,100% 0);
  background:
    linear-gradient(145deg,rgba(255,169,145,.2),transparent 45%),
    linear-gradient(180deg,#D95A53,#AF343C);
  filter:drop-shadow(0 6px 5px rgba(77,32,26,.18));
  transform:rotate(-1.25deg);
  transform-origin:50% 0;
}

.envelope-collage__flap::after{
  content:"";
  position:absolute;
  inset:0;
  clip-path:inherit;
  border:2px solid rgba(128,32,38,.38);
  border-top:0;
}

.envelope-collage__front{
  top:19%;
  left:18%;
  z-index:8;
  width:64%;
  height:42%;
  clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);
  background:
    linear-gradient(150deg,rgba(255,200,173,.18),transparent 36%),
    repeating-linear-gradient(105deg,rgba(120,32,35,.055) 0 1px,transparent 1px 9px),
    linear-gradient(145deg,#CF4A49,#B5323A 58%,#C94245);
  filter:drop-shadow(0 -4px 5px rgba(103,32,32,.18));
  transform:rotate(-1.25deg);
}

.envelope-collage__front::before,
.envelope-collage__front::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(121,30,35,.22);
}

.envelope-collage__front::before{
  left:50%;
}

.envelope-collage__front::after{
  left:0;
  right:0;
  bottom:6px;
  width:auto;
  border-bottom:1px solid rgba(255,211,184,.18);
}

.envelope-collage__seal{
  top:39%;
  left:49.1%;
  z-index:13;
  width:clamp(36px,4vw,52px);
  height:clamp(36px,4vw,52px);
  color:#F6D5A0;
  filter:drop-shadow(0 4px 5px rgba(82,27,30,.38));
  transform:translate(-50%,-50%) rotate(-6deg);
}

.envelope-collage__seal::before,
.envelope-collage__seal::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 27%,#E78571,#B83A40 68%);
  box-shadow:inset 0 0 0 2px rgba(255,222,181,.52);
}

.envelope-collage__seal::after{
  inset:17%;
  border:1px dashed rgba(255,226,182,.58);
  background:none;
  box-shadow:none;
}

.envelope-collage__seal svg{
  position:absolute;
  inset:26%;
  z-index:1;
  width:48%;
  height:48%;
  fill:#FFE4B8;
  stroke:none;
}

.envelope-collage__string{
  top:12%;
  right:2%;
  z-index:14;
  width:31%;
  height:28%;
  color:#B2383D;
  opacity:.9;
  transform:rotate(6deg);
}

.envelope-collage__string svg,
.envelope-collage__star svg,
.envelope-collage__heart svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.envelope-collage__star{
  width:clamp(31px,3.3vw,46px);
  height:clamp(31px,3.3vw,46px);
  color:#C83940;
  filter:drop-shadow(0 2px 1px rgba(255,239,205,.7));
}

.envelope-collage__star svg{
  fill:currentColor;
  stroke-width:2;
}

.envelope-collage__star--one{
  top:12%;
  left:8%;
  transform:rotate(-13deg);
}

.envelope-collage__star--two{
  top:58%;
  right:8%;
  width:clamp(27px,2.8vw,40px);
  height:clamp(27px,2.8vw,40px);
  transform:rotate(11deg);
}

.envelope-collage__heart{
  top:31%;
  left:8%;
  z-index:14;
  width:clamp(35px,3.8vw,52px);
  height:clamp(35px,3.8vw,52px);
  color:#D74C5A;
  filter:drop-shadow(0 3px 3px rgba(102,32,39,.28));
  transform:rotate(9deg);
}

.envelope-collage__heart svg{
  fill:rgba(225,78,90,.9);
  stroke:#A92D3B;
  stroke-width:2.3;
}

.envelope-collage__heart svg path:last-child{
  fill:none;
  stroke:rgba(255,228,212,.85);
  stroke-width:2;
}

.envelope-collage__note{
  top:47%;
  right:2.5%;
  z-index:15;
  width:clamp(138px,15vw,218px);
  padding:10px 13px 12px;
  color:#9D3C42;
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:clamp(12px,1.35vw,19px);
  line-height:1.42;
  text-align:center;
  transform:rotate(5deg);
}

.envelope-collage__note::before,
.envelope-collage__note::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:rgba(167,62,65,.42);
  transform:rotate(-2deg);
}

.envelope-collage__note::after{
  right:5px;
  bottom:5px;
  left:13px;
  background:rgba(167,62,65,.22);
  transform:rotate(1.4deg);
}

.photo-wall--envelope .photo-card--envelope{
  position:absolute;
  display:block;
  min-width:0;
  margin:0;
  padding:clamp(7px,.8vw,10px);
  overflow:visible;
  border:2px solid rgba(86,47,37,.34);
  border-radius:4px 7px 5px 6px;
  background:
    radial-gradient(circle at 19% 18%,rgba(255,255,255,.76) 0 .8px,transparent 1.1px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.022) 0 1px,transparent 1px 4px),
    #FFFCF3;
  background-size:15px 15px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.76) inset,
    0 20px 28px -19px rgba(70,35,25,.9),
    0 3px 6px rgba(70,35,25,.16);
  transform:rotate(var(--photo-rot,0deg));
  transform-origin:50% 54%;
  transition:transform .34s cubic-bezier(.2,.8,.35,1.2),box-shadow .34s ease;
  will-change:transform;
}

.photo-wall--envelope .photo-card--envelope:hover,
.photo-wall--envelope .photo-card--envelope:focus-within{
  z-index:22;
  box-shadow:
    0 3px 0 rgba(255,255,255,.82) inset,
    0 28px 36px -21px rgba(70,35,25,.96),
    0 4px 7px rgba(70,35,25,.15);
  transform:rotate(0deg) translateY(-6px) scale(1.035);
}

.photo-wall--envelope .photo-card--envelope .photo-card__window{
  border:1px solid rgba(92,57,41,.24);
  border-radius:2px;
  background:#F3E3CF;
  box-shadow:
    inset 0 0 0 3px #FFFDF6,
    inset 0 0 0 4px rgba(117,73,51,.15);
}

.photo-wall--envelope .photo-card--envelope .photo-card__window::after{
  background:
    linear-gradient(135deg,rgba(255,255,255,.3),transparent 33%),
    radial-gradient(circle at 78% 76%,rgba(225,76,78,.1),transparent 34%);
}

.photo-wall--envelope .photo-card--envelope .photo-card__preview{
  cursor:pointer;
}

.photo-wall--envelope .photo-card--envelope .photo-card__window img{
  object-fit:contain;
  object-position:center;
}

.photo-wall--envelope .photo-card--envelope:hover .photo-card__window img,
.photo-wall--envelope .photo-card--envelope:focus-within .photo-card__window img{
  transform:none;
}

.envelope-photo__clip{
  position:absolute;
  top:-11px;
  left:50%;
  z-index:20;
  width:clamp(36px,4vw,56px);
  height:clamp(14px,1.35vw,19px);
  border:1px solid rgba(123,52,53,.22);
  border-radius:2px 3px 2px 3px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),
    rgba(220,92,82,.82);
  box-shadow:0 2px 4px rgba(76,37,27,.18);
  transform:translateX(-50%) rotate(-2deg);
  pointer-events:none;
}

.photo-wall--envelope .photo-card--envelope:nth-child(even) .envelope-photo__clip{
  transform:translateX(-50%) rotate(3deg);
}

.photo-wall--envelope .photo-card--envelope-1{
  top:8%;
  left:26%;
  z-index:6;
  width:48%;
}

.photo-wall--envelope .photo-card--envelope-2{
  top:47%;
  left:1%;
  z-index:11;
  width:27%;
}

.photo-wall--envelope .photo-card--envelope-3{
  top:57%;
  left:27.5%;
  z-index:9;
  width:25%;
}

.photo-wall--envelope .photo-card--envelope-4{
  top:48%;
  left:52.5%;
  z-index:16;
  width:28%;
}

.photo-wall--envelope .photo-card--envelope-5{
  top:69%;
  left:46%;
  z-index:12;
  width:25%;
}

.photo-wall--envelope .photo-card--envelope-6{
  top:72%;
  left:73%;
  z-index:7;
  width:24%;
}

.photo-wall--envelope .photo-card--envelope-2 .photo-card__window{
  aspect-ratio:5/4;
}

.photo-wall--envelope .photo-card--envelope-3 .photo-card__window{
  aspect-ratio:1/1;
}

.photo-wall--envelope .photo-card--envelope-5 .photo-card__window{
  aspect-ratio:1/1;
}

.photo-wall--envelope .photo-card--envelope-reserve{
  position:absolute;
  display:flex;
  width:16.5%;
  min-height:0;
  aspect-ratio:1/.84;
  padding:clamp(7px,.9vw,11px);
  justify-content:center;
  align-items:center;
  flex-direction:column;
  overflow:visible;
  border:1.5px dashed rgba(148,54,56,.54);
  border-radius:3px 5px 3px 4px;
  background:
    repeating-linear-gradient(8deg,rgba(110,80,60,.025) 0 1px,transparent 1px 5px),
    rgba(255,248,231,.92);
  box-shadow:
    0 3px 0 rgba(255,255,255,.66) inset,
    0 12px 17px -15px rgba(70,35,25,.8);
  transform:rotate(var(--photo-rot,0deg));
}

.photo-wall--envelope .photo-card--envelope-reserve:hover,
.photo-wall--envelope .photo-card--envelope-reserve:focus-within{
  z-index:22;
  transform:rotate(0deg) translateY(-3px);
}

.photo-wall--envelope .photo-card--envelope-reserve-1{
  top:82%;
  left:3%;
  z-index:15;
}

.photo-wall--envelope .photo-card--envelope-reserve-2{
  top:86%;
  left:41%;
  z-index:14;
}

.photo-wall--envelope .photo-card--envelope-reserve-3{
  top:91%;
  right:3%;
  z-index:5;
}

.envelope-reserve__tape{
  position:absolute;
  top:-8px;
  left:50%;
  width:48px;
  height:15px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),
    rgba(213,82,79,.72);
  box-shadow:0 2px 4px rgba(70,35,25,.15);
  transform:translateX(-50%) rotate(-2deg);
  pointer-events:none;
}

.photo-wall--envelope .photo-card--envelope-reserve .photo-card__empty-mark{
  width:clamp(29px,2.8vw,38px);
  height:clamp(29px,2.8vw,38px);
  border-color:rgba(172,60,63,.48);
  color:#B33F46;
  font-size:clamp(19px,1.9vw,25px);
}

.photo-wall--envelope .photo-card--envelope-reserve .photo-caption{
  min-height:0;
  padding:6px 0 0;
  color:#9D685B;
  font-size:clamp(8px,.78vw,10.5px);
  line-height:1.25;
}

.photo-wall--envelope .photo-wall__hint{
  position:absolute;
  bottom:13px;
  left:50%;
  z-index:24;
  margin:0;
  padding:4px 13px 5px;
  border:1px solid rgba(137,54,55,.24);
  border-radius:3px 5px 3px 4px;
  background:rgba(255,249,235,.88);
  color:#985B54;
  font-size:10px;
  box-shadow:0 4px 8px -7px rgba(70,35,25,.8);
  transform:translateX(-50%) rotate(-.5deg);
}

@media (max-width:980px){
  .photo-wall--envelope .photo-wall__grid--envelope{
    min-height:clamp(860px,91vw,980px);
  }

  .envelope-collage__back,
  .envelope-collage__front{
    left:14%;
    width:72%;
  }

  .envelope-collage__paper{
    left:17%;
    width:66%;
  }

  .envelope-collage__flap{
    left:14%;
    width:72%;
  }

  .envelope-collage__seal{
    left:50%;
  }

  .envelope-collage__note{
    right:1%;
    width:clamp(126px,17vw,176px);
  }

  .photo-wall--envelope .photo-card--envelope-1{
    left:18%;
    width:64%;
  }

  .photo-wall--envelope .photo-card--envelope-2{
    width:30%;
  }

  .photo-wall--envelope .photo-card--envelope-3{
    left:29%;
    width:29%;
  }

  .photo-wall--envelope .photo-card--envelope-4{
    left:53%;
    width:30%;
  }

  .photo-wall--envelope .photo-card--envelope-5{
    left:47%;
    width:29%;
  }

  .photo-wall--envelope .photo-card--envelope-6{
    top:70%;
    left:72%;
    z-index:7;
    width:27%;
  }
}

@media (max-width:720px){
  .photo-wall.photo-wall--envelope{
    margin-top:9px;
    padding:17px 11px 31px;
    border-width:8px;
    border-radius:5px 7px 5px 6px;
  }

  .photo-wall.photo-wall--envelope::before{
    inset:3px;
  }

  .photo-wall.photo-wall--envelope::after{
    top:14px;
    right:13px;
    width:64px;
    height:15px;
  }

  .photo-wall--envelope .photo-wall__head{
    width:95%;
    margin-bottom:8px;
    padding:9px 24px 8px;
  }

  .photo-wall--envelope .photo-wall__head::before,
  .photo-wall--envelope .photo-wall__head::after{
    width:43px;
    height:13px;
  }

  .photo-wall--envelope .photo-wall__title{
    font-size:clamp(27px,8vw,34px);
  }

  .photo-wall--envelope .photo-wall__meta{
    font-size:10px;
  }

  .photo-wall--envelope .photo-wall__grid--envelope{
    min-height:1450px;
  }

  .envelope-collage__back,
  .envelope-collage__front{
    top:12%;
    left:6%;
    width:88%;
    height:31%;
  }

  .envelope-collage__paper{
    top:13%;
    left:9%;
    width:82%;
    height:26%;
  }

  .envelope-collage__flap{
    top:10%;
    left:6%;
    width:88%;
    height:20%;
  }

  .envelope-collage__seal{
    top:30%;
    left:50%;
  }

  .envelope-collage__string{
    top:8%;
    right:7%;
    width:34%;
    height:24%;
  }

  .envelope-collage__star--one{
    top:8%;
    left:4%;
  }

  .envelope-collage__star--two{
    top:49%;
    right:4%;
  }

  .envelope-collage__heart{
    top:26%;
    left:4%;
  }

  .envelope-collage__note{
    top:45%;
    right:1%;
    width:132px;
    padding:8px 10px 10px;
    font-size:12px;
  }

  .photo-wall--envelope .photo-card--envelope{
    padding:6px;
  }

  .photo-wall--envelope .photo-card--envelope-1{
    top:9%;
    left:15%;
    width:70%;
  }

  .photo-wall--envelope .photo-card--envelope-2{
    top:31%;
    left:1%;
    width:67%;
  }

  .photo-wall--envelope .photo-card--envelope-3{
    top:44%;
    right:1%;
    left:auto;
    width:64%;
  }

  .photo-wall--envelope .photo-card--envelope-4{
    top:57%;
    left:2%;
    width:67%;
  }

  .photo-wall--envelope .photo-card--envelope-5{
    top:70%;
    right:2%;
    left:auto;
    width:64%;
  }

  .photo-wall--envelope .photo-card--envelope-6{
    top:83%;
    left:5%;
    width:66%;
  }

  .photo-wall--envelope .photo-card--envelope-2 .photo-card__window,
  .photo-wall--envelope .photo-card--envelope-3 .photo-card__window,
  .photo-wall--envelope .photo-card--envelope-5 .photo-card__window{
    aspect-ratio:4/3;
  }

  .photo-wall--envelope .photo-card--envelope-reserve{
    top:96%;
    width:28%;
    aspect-ratio:1/.84;
  }

  .photo-wall--envelope .photo-card--envelope-reserve-1{
    left:2%;
    right:auto;
  }

  .photo-wall--envelope .photo-card--envelope-reserve-2{
    left:35%;
    right:auto;
  }

  .photo-wall--envelope .photo-card--envelope-reserve-3{
    right:2%;
    left:auto;
  }

  .photo-wall--envelope .photo-wall__hint{
    bottom:8px;
    max-width:92%;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .photo-wall--envelope .photo-card,
  .photo-wall--envelope .photo-card__window img{
    transition:none;
  }
}

/* =========================================================
   50. Fourth tea landing spiral notebook album
   Scoped to tea-4 only. Every other page keeps its own
   existing layout, colors and interactions.
   ========================================================= */
.photo-wall.photo-wall--spiral{
  --spiral-ink:#6B4B36;
  --spiral-cream:#FFF8EA;
  --spiral-tape:rgba(178,132,88,.82);
  position:relative;
  margin-top:clamp(10px,1.6vw,18px);
  padding:clamp(18px,2.2vw,30px) clamp(12px,2vw,26px) clamp(38px,4.4vw,56px);
  overflow:visible;
  border:clamp(8px,1.05vw,14px) solid #7A5636;
  border-radius:6px 9px 6px 8px;
  background:
    radial-gradient(circle at 3px 4px,rgba(92,60,35,.2) 0 1px,transparent 1.4px),
    radial-gradient(circle at 11px 9px,rgba(255,241,214,.12) 0 .8px,transparent 1.2px),
    repeating-linear-gradient(18deg,rgba(60,38,22,.1) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(101deg,rgba(255,240,214,.05) 0 1px,transparent 1px 11px),
    linear-gradient(150deg,#57402C 0%,#463225 52%,#5B4430 100%);
  background-size:13px 12px,19px 17px,auto,auto,auto;
  box-shadow:
    inset 0 0 0 2px rgba(255,238,205,.24),
    inset 0 0 0 9px rgba(43,30,20,.24),
    inset 0 -22px 40px -28px rgba(30,19,11,.9),
    0 20px 34px -26px rgba(58,38,22,.92),
    0 3px 0 rgba(255,255,255,.26);
  isolation:isolate;
}

.photo-wall.photo-wall--spiral::before{
  inset:6px;
  z-index:0;
  border:1px solid rgba(255,236,200,.28);
  border-radius:4px 7px 4px 6px;
  box-shadow:inset 0 0 0 1px rgba(52,35,22,.26);
}

.photo-wall.photo-wall--spiral::after{
  top:17px;
  right:20px;
  bottom:auto;
  left:auto;
  width:82px;
  height:18px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(104deg,rgba(255,255,255,.26) 0 5px,transparent 5px 10px),
    rgba(198,150,100,.78);
  box-shadow:0 3px 7px rgba(52,33,20,.28);
  transform:rotate(4deg);
}

.photo-wall--spiral .photo-wall__head{
  position:relative;
  z-index:12;
  width:min(560px,88%);
  max-width:560px;
  margin:0 auto clamp(14px,1.8vw,22px);
  padding:clamp(9px,.95vw,14px) clamp(24px,3vw,40px);
  border:1px solid rgba(107,75,54,.3);
  border-radius:3px 6px 3px 5px;
  background:
    radial-gradient(circle at 16% 22%,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.026) 0 1px,transparent 1px 5px),
    #FFF7E6;
  background-size:18px 18px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.7) inset,
    0 12px 18px -15px rgba(60,36,20,.9),
    0 2px 3px rgba(60,36,20,.14);
  transform:rotate(-.5deg);
}

.photo-wall--spiral .photo-wall__eyebrow{
  color:#A2703F;
  font-size:9.5px;
  letter-spacing:.28em;
}

.photo-wall--spiral .photo-wall__title{
  color:#6E4A2E;
  font-size:clamp(26px,3.9vw,42px);
  text-shadow:0 2px 0 rgba(255,255,255,.94),0 4px 0 rgba(160,112,63,.14);
}

.photo-wall--spiral .photo-wall__hint{
  position:relative;
  z-index:12;
}

.photo-wall--spiral .photo-wall__story{
  position:relative;
  z-index:12;
  width:min(780px,92%);
  margin:clamp(18px,2.4vw,30px) auto clamp(12px,1.8vw,20px);
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px) clamp(20px,2.7vw,30px);
  border:1px solid rgba(107,75,54,.3);
  border-radius:5px 8px 6px 7px;
  color:#5F4433;
  background:
    radial-gradient(circle at 16% 22%,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.026) 0 1px,transparent 1px 5px),
    #FFF8EA;
  background-size:18px 18px,auto,auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 16px 24px -18px rgba(30,19,11,.9),
    0 2px 4px rgba(30,19,11,.16);
  transform:rotate(-.35deg);
}

.photo-wall--spiral .photo-wall__story::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:74px;
  height:17px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(104deg,rgba(255,255,255,.26) 0 5px,transparent 5px 10px),
    rgba(198,150,100,.82);
  box-shadow:0 2px 4px rgba(52,33,20,.28);
  transform:translateX(-50%) rotate(1.5deg);
  pointer-events:none;
}

.photo-wall--spiral .photo-wall__story-title{
  margin:0 0 10px;
  color:#8A5A32;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(16px,1.8vw,20px);
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
}

.photo-wall--spiral .photo-wall__story p:not(.photo-wall__story-title){
  margin:0;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(12px,1.35vw,14px);
  line-height:1.95;
  text-align:justify;
}

.photo-wall--spiral .photo-wall__story p:not(.photo-wall__story-title) + p{
  margin-top:11px;
}

.photo-wall--spiral .spiral-album{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  border-radius:5px;
  box-shadow:0 20px 32px -26px rgba(28,17,9,.95);
}

.photo-wall--spiral .spiral-page{
  position:relative;
  min-width:0;
  padding:clamp(28px,3.4vw,52px);
  background:
    radial-gradient(circle at 4px 5px,rgba(120,84,52,.1) 0 1px,transparent 1.4px),
    radial-gradient(circle at 13px 11px,rgba(255,247,226,.16) 0 .8px,transparent 1.2px),
    repeating-linear-gradient(93deg,rgba(121,84,52,.045) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(6deg,rgba(255,247,228,.055) 0 1px,transparent 1px 10px),
    linear-gradient(150deg,#EFDBB9 0%,#E0C59C 52%,#EED9B6 100%);
  background-size:14px 13px,19px 17px,auto,auto,auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,246,226,.52),
    inset 0 0 28px rgba(120,84,52,.16);
}

.photo-wall--spiral .spiral-page--left{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(30px,3.6vw,58px) clamp(50px,6vw,90px) clamp(30px,3.6vw,58px) clamp(26px,3.2vw,50px);
  border-radius:4px 0 0 4px;
}

.photo-wall--spiral .spiral-page--right{
  padding:clamp(30px,3.6vw,58px) clamp(26px,3.2vw,50px) clamp(30px,3.6vw,58px) clamp(50px,6vw,90px);
  border-radius:0 4px 4px 0;
}

.photo-wall--spiral .spiral-page--right::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(107,75,54,.34) 8%,rgba(107,75,54,.34) 92%,transparent);
  pointer-events:none;
}

.photo-wall--spiral .photo-card--spiral{
  padding:clamp(7px,.85vw,11px) clamp(7px,.85vw,11px) clamp(9px,1vw,14px);
  border:2px solid rgba(107,75,54,.3);
  border-radius:3px 5px 4px 4px;
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.72) 0 1px,transparent 1.35px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.024) 0 1px,transparent 1px 4px),
    var(--spiral-cream);
  background-size:17px 17px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.72) inset,
    0 16px 24px -18px rgba(84,56,36,.8),
    0 2px 4px rgba(84,56,36,.13);
}

.photo-wall--spiral .photo-card--spiral .photo-card__window{
  border:1px solid rgba(107,75,54,.32);
  border-radius:2px;
  background:#EFE0C8;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.42);
}

.photo-wall--spiral .photo-card--spiral .photo-card__window::after{
  background:
    linear-gradient(135deg,rgba(255,255,255,.24),transparent 40%),
    radial-gradient(circle at 76% 78%,rgba(255,213,138,.14),transparent 34%);
}

.photo-wall--spiral .photo-card--spiral .photo-card__window img{
  object-fit:contain;
  background:#F7ECD8;
}

.photo-wall--spiral .photo-card--spiral:hover .photo-card__window img,
.photo-wall--spiral .photo-card--spiral:focus-within .photo-card__window img{
  transform:none;
}

.photo-wall--spiral .photo-card--spiral-main{
  width:min(86%,420px);
  margin:auto;
}

.photo-wall--spiral .photo-card--spiral-main .photo-card__window{
  aspect-ratio:4/5;
}

.photo-wall--spiral .spiral-grid{
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.7vw,26px) clamp(10px,1.2vw,18px);
  align-items:start;
}

.photo-wall--spiral .photo-card--spiral-r1{grid-column:1 / span 3;}
.photo-wall--spiral .photo-card--spiral-r2{grid-column:4 / span 3;margin-top:clamp(10px,1.5vw,22px);}
.photo-wall--spiral .photo-card--spiral-r3{grid-column:1 / span 2;}
.photo-wall--spiral .photo-card--spiral-r4{grid-column:3 / span 2;margin-top:clamp(12px,1.8vw,26px);}
.photo-wall--spiral .photo-card--spiral-r5{grid-column:5 / span 2;margin-top:clamp(4px,.6vw,10px);}
.photo-wall--spiral .photo-card--spiral-r6{grid-column:1 / span 3;margin-top:clamp(8px,1.2vw,18px);}
.photo-wall--spiral .photo-card--spiral-r7{grid-column:4 / span 3;margin-top:clamp(2px,.4vw,8px);}
.photo-wall--spiral .photo-card--spiral-r8{grid-column:2 / span 4;margin-top:clamp(6px,1vw,16px);}

.photo-wall--spiral .photo-card--spiral-r1 .photo-card__window{aspect-ratio:5/4;}
.photo-wall--spiral .photo-card--spiral-r2 .photo-card__window{aspect-ratio:4/5;}
.photo-wall--spiral .photo-card--spiral-r3 .photo-card__window{aspect-ratio:1/1;}
.photo-wall--spiral .photo-card--spiral-r4 .photo-card__window{aspect-ratio:4/5;}
.photo-wall--spiral .photo-card--spiral-r5 .photo-card__window{aspect-ratio:1/1;}
.photo-wall--spiral .photo-card--spiral-r6 .photo-card__window{aspect-ratio:5/4;}
.photo-wall--spiral .photo-card--spiral-r7 .photo-card__window{aspect-ratio:4/3;}
.photo-wall--spiral .photo-card--spiral-r8 .photo-card__window{aspect-ratio:16/10;}

.photo-wall--spiral .photo-card--spiral{
  transform-origin:50% 55%;
  transition:transform .38s cubic-bezier(.2,.8,.35,1.22),box-shadow .38s ease;
}

.photo-wall--spiral .photo-card--spiral:hover,
.photo-wall--spiral .photo-card--spiral:focus-within{
  z-index:40;
  transform:rotate(0deg) translateY(-14px) scale(1.4);
  box-shadow:
    0 4px 0 rgba(255,255,255,.78) inset,
    0 30px 38px -20px rgba(70,44,28,.86),
    0 3px 6px rgba(70,44,28,.18);
}

.photo-wall--spiral .spiral-tape{
  position:absolute;
  z-index:9;
  width:clamp(38px,4vw,52px);
  height:clamp(13px,1.4vw,17px);
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(104deg,rgba(255,255,255,.22) 0 4px,transparent 4px 9px),
    linear-gradient(180deg,rgba(204,160,112,.9),rgba(166,122,78,.9));
  box-shadow:0 2px 4px rgba(78,50,30,.24);
  pointer-events:none;
}

.photo-wall--spiral .spiral-tape--tl{top:-8px;left:9%;transform:rotate(-6deg);}
.photo-wall--spiral .spiral-tape--tr{top:-8px;right:9%;transform:rotate(6deg);}

.photo-wall--spiral .spiral-pin{
  position:absolute;
  z-index:9;
  width:clamp(15px,1.6vw,20px);
  height:clamp(15px,1.6vw,20px);
  border:1.5px solid rgba(120,66,74,.5);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.82) 0 2px,transparent 2.6px),
    linear-gradient(150deg,#F2A9B4,#DB7C8E);
  box-shadow:0 2px 4px rgba(90,52,40,.3);
  pointer-events:none;
}

.photo-wall--spiral .spiral-pin--br{right:-6px;bottom:-6px;}

.photo-wall--spiral .spiral-collage{
  position:absolute;
  inset:0;
  z-index:3;
  color:#332E29;
  pointer-events:none;
}

.photo-wall--spiral .spiral-doodle{
  position:absolute;
  display:block;
  color:#3B342D;
  opacity:.6;
}

.photo-wall--spiral .spiral-doodle svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.photo-wall--spiral .spiral-doodle--star-a{top:3%;left:3%;width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);transform:rotate(-9deg);}
.photo-wall--spiral .spiral-doodle--star-b{top:22%;right:4%;width:clamp(14px,1.6vw,21px);height:clamp(14px,1.6vw,21px);transform:rotate(12deg);}
.photo-wall--spiral .spiral-doodle--star-c{bottom:26%;left:46%;width:clamp(13px,1.4vw,19px);height:clamp(13px,1.4vw,19px);transform:rotate(-14deg);}
.photo-wall--spiral .spiral-doodle--star-d{bottom:5%;right:6%;width:clamp(17px,1.9vw,25px);height:clamp(17px,1.9vw,25px);transform:rotate(8deg);}
.photo-wall--spiral .spiral-doodle--heart-a{bottom:8%;left:5%;width:clamp(20px,2.2vw,29px);height:clamp(20px,2.2vw,29px);color:#B2565E;opacity:.62;transform:rotate(-7deg);}
.photo-wall--spiral .spiral-doodle--heart-b{top:6%;left:49%;width:clamp(15px,1.7vw,22px);height:clamp(15px,1.7vw,22px);color:#B2565E;opacity:.58;transform:rotate(9deg);}
.photo-wall--spiral .spiral-doodle--coffee{bottom:2.5%;right:47%;width:clamp(30px,3.3vw,44px);height:clamp(30px,3.3vw,44px);opacity:.86;transform:rotate(-5deg);}
.photo-wall--spiral .spiral-doodle--cake{top:2.5%;right:47%;width:clamp(30px,3.3vw,44px);height:clamp(30px,3.3vw,44px);opacity:.86;transform:rotate(6deg);}

.photo-wall--spiral .spiral-note{
  position:absolute;
  display:block;
  color:rgba(88,60,40,.62);
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:clamp(10px,.95vw,12.5px);
  letter-spacing:.08em;
  white-space:nowrap;
}

.photo-wall--spiral .spiral-note--a{top:12%;left:5%;transform:rotate(-6deg);}
.photo-wall--spiral .spiral-note--b{bottom:12%;right:5%;transform:rotate(4deg);}
.photo-wall--spiral .spiral-note--c{bottom:3.5%;left:3%;transform:rotate(-3deg);}

.photo-wall--spiral .spiral-binding{
  position:absolute;
  top:calc(-1 * clamp(8px,1.05vw,14px));
  bottom:calc(-1 * clamp(8px,1.05vw,14px));
  left:50%;
  z-index:7;
  width:0;
  transform:translateX(-50%);
  pointer-events:none;
}

.photo-wall--spiral .spiral-ring{
  position:absolute;
  left:50%;
  width:clamp(34px,3.6vw,52px);
  height:clamp(14px,1.5vw,20px);
  border:clamp(2px,.28vw,3.6px) solid #201D1A;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 1px 2px rgba(0,0,0,.42),
    0 clamp(2px,.3vw,4px) 5px rgba(34,22,12,.36);
  transform:translate(-50%,-50%) rotate(-6deg);
}

.photo-wall--spiral .spiral-ring::after{
  content:"";
  position:absolute;
  top:calc(-1 * clamp(3px,.35vw,5px));
  right:18%;
  width:26%;
  height:46%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0));
  opacity:.5;
}

@media (max-width:720px){
  .photo-wall.photo-wall--spiral{
    padding:14px 10px 30px;
    border-width:7px;
  }

  .photo-wall--spiral .photo-wall__head{
    width:92%;
    padding:9px 16px 10px;
  }

  .photo-wall--spiral .spiral-album{
    grid-template-columns:1fr;
  }

  .photo-wall--spiral .spiral-page--left{
    border-radius:4px 4px 0 0;
    padding:24px 18px 28px;
  }

  .photo-wall--spiral .spiral-page--right{
    border-radius:0 0 4px 4px;
    padding:28px 18px 24px;
  }

  .photo-wall--spiral .spiral-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px 10px;
  }

  .photo-wall--spiral .photo-card--spiral-r1{grid-column:1 / span 2;}
  .photo-wall--spiral .photo-card--spiral-r2{grid-column:3 / span 2;margin-top:10px;}
  .photo-wall--spiral .photo-card--spiral-r3{grid-column:1 / span 2;}
  .photo-wall--spiral .photo-card--spiral-r4{grid-column:3 / span 2;margin-top:12px;}
  .photo-wall--spiral .photo-card--spiral-r5{grid-column:1 / span 2;margin-top:0;}
  .photo-wall--spiral .photo-card--spiral-r6{grid-column:3 / span 2;margin-top:10px;}
  .photo-wall--spiral .photo-card--spiral-r7{grid-column:1 / span 2;margin-top:0;}
  .photo-wall--spiral .photo-card--spiral-r8{grid-column:2 / span 2;margin-top:10px;}

  .photo-wall--spiral .photo-card--spiral:hover,
  .photo-wall--spiral .photo-card--spiral:focus-within{
    transform:rotate(0deg) translateY(-8px) scale(1.28);
  }

  .photo-wall--spiral .spiral-binding{
    top:50%;
    right:8px;
    bottom:auto;
    left:8px;
    width:auto;
    height:0;
    border-top:3px dotted rgba(32,29,26,.5);
    transform:none;
  }

  .photo-wall--spiral .spiral-ring{
    display:none;
  }

  .photo-wall--spiral .spiral-doodle--coffee,
  .photo-wall--spiral .spiral-doodle--cake{
    width:30px;
    height:30px;
  }

  .photo-wall--spiral .spiral-note--c{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .photo-wall--spiral .photo-card--spiral,
  .photo-wall--spiral .photo-card--spiral .photo-card__window img{
    transition:none;
  }
}

/* =========================================================
   51. Fifth tea landing spiral notebook collage
   Scoped to tea-5 only. All other album layouts remain intact.
   ========================================================= */
.photo-wall.photo-wall--birthday-spiral{
  position:relative;
  margin-top:clamp(10px,1.6vw,18px);
  padding:clamp(18px,2.2vw,30px) clamp(12px,2vw,26px) clamp(34px,4vw,52px);
  overflow:visible;
  border:clamp(8px,1vw,13px) solid #896646;
  border-radius:9px 11px 8px 10px;
  background:
    repeating-linear-gradient(92deg,rgba(255,244,220,.07) 0 2px,transparent 2px 10px),
    repeating-linear-gradient(3deg,rgba(52,29,15,.12) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#8B6746,#6C4D34 48%,#8A6647);
  background-size:auto,auto,auto;
  box-shadow:
    inset 0 0 0 2px rgba(255,238,205,.24),
    inset 0 0 0 9px rgba(43,30,20,.2),
    inset 0 -20px 38px -28px rgba(30,19,11,.88),
    0 20px 34px -26px rgba(58,38,22,.92),
    0 3px 0 rgba(255,255,255,.24);
  isolation:isolate;
}

.photo-wall.photo-wall--birthday-spiral::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(255,236,200,.24);
  border-radius:4px 7px 4px 6px;
  box-shadow:inset 0 0 0 1px rgba(52,35,22,.24);
  pointer-events:none;
}

.photo-wall--birthday-spiral .birthday-spiral-album{
  position:relative;
  z-index:2;
  display:block;
}

.photo-wall--birthday-spiral .birthday-spiral-page{
  position:relative;
  z-index:2;
  min-height:clamp(1080px,105vw,1320px);
  padding:clamp(26px,3vw,44px) clamp(28px,3.6vw,52px) clamp(40px,4.4vw,62px) clamp(74px,7.4vw,112px);
  overflow:hidden;
  border:1px solid rgba(116,88,61,.34);
  border-radius:3px 17px 16px 4px;
  background:
    radial-gradient(circle at 17px 19px,rgba(125,94,62,.08) 0 1px,transparent 1.35px),
    radial-gradient(circle at 9px 8px,rgba(255,255,255,.7) 0 .8px,transparent 1.15px),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(93,132,161,.14) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(93,132,161,.1) 27px 28px),
    linear-gradient(90deg,transparent 0 67px,rgba(211,112,104,.22) 67px 68px,transparent 68px),
    linear-gradient(145deg,#FFFEF8 0%,#FFFBF1 54%,#FCF7EA 100%);
  background-size:22px 21px,15px 14px,auto,auto,auto,auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.76),
    inset 10px 0 18px -18px rgba(76,51,31,.8),
    inset 0 0 34px rgba(121,88,54,.1),
    0 20px 32px -26px rgba(28,17,9,.96),
    0 2px 3px rgba(49,31,19,.28);
}

.photo-wall--birthday-spiral .birthday-spiral-page::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(116,83,54,.08),transparent 10%,transparent 90%,rgba(116,83,54,.05)),
    radial-gradient(circle at 96% 4%,rgba(244,205,143,.24),transparent 19%);
  pointer-events:none;
}

.photo-wall--birthday-spiral .birthday-spiral-binding{
  position:absolute;
  top:clamp(22px,2.2vw,34px);
  bottom:clamp(24px,2.5vw,38px);
  left:0;
  z-index:9;
  width:clamp(42px,4.6vw,66px);
  pointer-events:none;
}

.photo-wall--birthday-spiral .birthday-spiral-ring{
  position:absolute;
  left:0;
  width:clamp(40px,4.3vw,60px);
  height:clamp(15px,1.5vw,21px);
  border:clamp(2.4px,.24vw,3.4px) solid #211E1B;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 1px 2px rgba(0,0,0,.45),
    0 3px 5px rgba(34,22,12,.34);
  transform:translate(-19%,-50%) rotate(-7deg);
}

.photo-wall--birthday-spiral .birthday-spiral-ring::after{
  content:"";
  position:absolute;
  top:22%;
  right:14%;
  width:29%;
  height:42%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  opacity:.5;
}

.photo-wall--birthday-spiral .birthday-spiral-head{
  position:relative;
  z-index:6;
  width:min(590px,92%);
  max-width:590px;
  margin:0 auto clamp(18px,2vw,28px);
  padding:clamp(10px,1vw,15px) clamp(24px,3.2vw,48px);
  border:1px solid rgba(120,88,60,.34);
  border-radius:3px 7px 4px 6px;
  background:
    radial-gradient(circle at 18% 23%,rgba(255,255,255,.78) 0 1px,transparent 1.35px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.026) 0 1px,transparent 1px 5px),
    #FFF9E9;
  background-size:18px 18px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.76) inset,
    0 14px 20px -16px rgba(60,36,20,.9),
    0 2px 3px rgba(60,36,20,.12);
  transform:rotate(-.55deg);
}

.photo-wall--birthday-spiral .photo-wall__eyebrow{
  color:#A56D3D;
  font-size:9.5px;
  letter-spacing:.27em;
}

.photo-wall--birthday-spiral .photo-wall__title{
  color:#6F4A2E;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(27px,3.9vw,43px);
  text-shadow:0 2px 0 rgba(255,255,255,.96),0 4px 0 rgba(160,112,63,.13);
}

.photo-wall--birthday-spiral .birthday-spiral-grid{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(38px,3.75vw,54px);
  gap:clamp(10px,1vw,16px);
  align-items:stretch;
  margin-top:clamp(18px,2vw,28px);
}

.photo-wall--birthday-spiral .birthday-photo-1{grid-column:1 / span 6;grid-row:1 / span 7;}
.photo-wall--birthday-spiral .birthday-photo-2{grid-column:8 / span 5;grid-row:1 / span 5;}
.photo-wall--birthday-spiral .birthday-photo-3{grid-column:8 / span 5;grid-row:6 / span 6;}
.photo-wall--birthday-spiral .birthday-photo-4{grid-column:1 / span 3;grid-row:8 / span 6;}
.photo-wall--birthday-spiral .birthday-photo-5{grid-column:4 / span 4;grid-row:8 / span 6;}
.photo-wall--birthday-spiral .birthday-photo-6{grid-column:2 / span 9;grid-row:14 / span 5;}

.photo-wall--birthday-spiral .photo-card--birthday-spiral{
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  justify-self:stretch;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:clamp(7px,.72vw,10px) clamp(7px,.72vw,10px) clamp(6px,.62vw,9px);
  overflow:visible;
  border:1.5px solid rgba(107,87,72,.32);
  border-radius:3px 5px 4px 5px;
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.76) 0 1px,transparent 1.35px),
    repeating-linear-gradient(7deg,rgba(110,80,60,.024) 0 1px,transparent 1px 4px),
    #FFFEF9;
  background-size:17px 17px,auto,auto;
  box-shadow:
    0 3px 0 rgba(255,255,255,.78) inset,
    0 16px 24px -18px rgba(84,56,36,.8),
    0 2px 4px rgba(84,56,36,.13);
  transform:translate(var(--photo-shift-x),var(--photo-shift-y)) rotate(var(--photo-rot));
  transform-origin:50% 55%;
  transition:transform .38s cubic-bezier(.2,.8,.35,1.2),box-shadow .38s ease;
}

.photo-wall--birthday-spiral .photo-card--birthday-spiral .photo-card__preview{
  display:flex;
  flex:1;
  min-height:0;
  overflow:visible;
}

.photo-wall--birthday-spiral .photo-card--birthday-spiral .photo-card__window{
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  overflow:hidden;
  border:1px solid rgba(107,87,72,.32);
  border-radius:2px;
  background:#F1E7D8;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.42);
}

.photo-wall--birthday-spiral .photo-card--birthday-spiral .photo-card__window::after{
  background:
    linear-gradient(135deg,rgba(255,255,255,.2),transparent 40%),
    radial-gradient(circle at 76% 78%,rgba(255,213,138,.1),transparent 34%);
}

.photo-wall--birthday-spiral .photo-card--birthday-spiral .photo-card__window img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#F8F1E5;
  transform:none;
}

.photo-wall--birthday-spiral .photo-card--birthday-spiral:hover,
.photo-wall--birthday-spiral .photo-card--birthday-spiral:focus-within{
  z-index:50;
  transform:translate(var(--photo-shift-x),calc(var(--photo-shift-y) - 8px)) rotate(0deg) scale(1.1);
  box-shadow:
    0 4px 0 rgba(255,255,255,.82) inset,
    0 28px 36px -20px rgba(70,44,28,.84),
    0 3px 6px rgba(70,44,28,.18);
}

.photo-wall--birthday-spiral .photo-card--birthday-spiral:hover .photo-card__window img,
.photo-wall--birthday-spiral .photo-card--birthday-spiral:focus-within .photo-card__window img{
  transform:none;
}

.photo-wall--birthday-spiral .birthday-photo__caption{
  min-height:1.35em;
  margin:5px 3px 0;
  overflow:hidden;
  color:rgba(104,75,52,.76);
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:clamp(9px,.82vw,11.5px);
  line-height:1.32;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.photo-wall--birthday-spiral .birthday-tape{
  position:absolute;
  z-index:10;
  width:clamp(38px,4.1vw,56px);
  height:clamp(12px,1.2vw,16px);
  border-radius:1px 2px 1px 2px;
  opacity:.9;
  background:var(--birthday-tape-bg);
  box-shadow:0 2px 4px rgba(78,50,30,.22);
  pointer-events:none;
}

.photo-wall--birthday-spiral .birthday-tape--yellow{
  --birthday-tape-bg:repeating-linear-gradient(104deg,rgba(255,255,255,.24) 0 4px,transparent 4px 9px),linear-gradient(180deg,#F5DC78,#EBC85A);
}

.photo-wall--birthday-spiral .birthday-tape--pink{
  --birthday-tape-bg:repeating-linear-gradient(104deg,rgba(255,255,255,.24) 0 4px,transparent 4px 9px),linear-gradient(180deg,#F4B4C9,#E993B1);
}

.photo-wall--birthday-spiral .birthday-tape--red{
  --birthday-tape-bg:repeating-linear-gradient(104deg,rgba(255,255,255,.22) 0 4px,transparent 4px 9px),linear-gradient(180deg,#E98E84,#D96B61);
}

.photo-wall--birthday-spiral .birthday-tape--blue{
  --birthday-tape-bg:repeating-linear-gradient(104deg,rgba(255,255,255,.24) 0 4px,transparent 4px 9px),linear-gradient(180deg,#A8D5DF,#80B9C8);
}

.photo-wall--birthday-spiral .birthday-tape--corner-1{top:-7px;left:-5%;transform:rotate(-8deg);}
.photo-wall--birthday-spiral .birthday-tape--corner-2{top:-7px;right:-5%;transform:rotate(7deg);}
.photo-wall--birthday-spiral .birthday-tape--corner-3{bottom:-7px;left:-5%;transform:rotate(6deg);}
.photo-wall--birthday-spiral .birthday-tape--corner-4{bottom:-7px;right:-5%;transform:rotate(-7deg);}

.photo-wall--birthday-spiral .birthday-spiral-decor{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  color:#5C4A3B;
  pointer-events:none;
}

.photo-wall--birthday-spiral .birthday-doodle{
  position:absolute;
  display:block;
  opacity:.62;
}

.photo-wall--birthday-spiral .birthday-doodle svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.photo-wall--birthday-spiral .birthday-doodle--star-a{top:4.2%;left:9%;width:clamp(18px,2vw,27px);height:clamp(18px,2vw,27px);color:#D7A34B;transform:rotate(-10deg);}
.photo-wall--birthday-spiral .birthday-doodle--star-b{top:21%;right:5.2%;width:clamp(15px,1.7vw,23px);height:clamp(15px,1.7vw,23px);color:#D7A34B;transform:rotate(11deg);}
.photo-wall--birthday-spiral .birthday-doodle--heart{bottom:17%;left:7%;width:clamp(20px,2.2vw,31px);height:clamp(20px,2.2vw,31px);color:#C45F69;opacity:.6;transform:rotate(-8deg);}
.photo-wall--birthday-spiral .birthday-doodle--smile{right:6%;bottom:14%;width:clamp(24px,2.6vw,36px);height:clamp(24px,2.6vw,36px);color:#D9954D;opacity:.68;transform:rotate(8deg);}
.photo-wall--birthday-spiral .birthday-doodle--cup{right:5%;bottom:3%;width:clamp(31px,3.3vw,47px);height:clamp(31px,3.3vw,47px);color:#9B7152;opacity:.54;transform:rotate(-5deg);}
.photo-wall--birthday-spiral .birthday-doodle--cake{left:8%;bottom:4%;width:clamp(31px,3.3vw,47px);height:clamp(31px,3.3vw,47px);color:#B78362;opacity:.56;transform:rotate(6deg);}

.photo-wall--birthday-spiral .birthday-note{
  position:absolute;
  display:block;
  font-family:"Klee One","LXGW WenKai","Kaiti SC","STKaiti",cursive;
  font-size:clamp(10px,.92vw,13px);
  letter-spacing:.07em;
  white-space:nowrap;
}

.photo-wall--birthday-spiral .birthday-note--happy{top:4.2%;right:7%;color:rgba(184,82,82,.72);transform:rotate(5deg);}
.photo-wall--birthday-spiral .birthday-note--tea{top:34%;left:8%;color:rgba(85,119,130,.7);transform:rotate(-6deg);}
.photo-wall--birthday-spiral .birthday-note--friends{top:52%;right:7.5%;color:rgba(117,102,148,.7);transform:rotate(4deg);}
.photo-wall--birthday-spiral .birthday-note--sweet{bottom:8.5%;left:11%;color:rgba(168,104,69,.72);transform:rotate(-4deg);}

.photo-wall--birthday-spiral .photo-wall__hint{
  position:relative;
  z-index:12;
}

.photo-wall--birthday-spiral .photo-wall__story{
  position:relative;
  z-index:12;
  width:min(760px,92%);
  margin:clamp(18px,2.4vw,30px) auto clamp(12px,1.8vw,20px);
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px) clamp(20px,2.7vw,30px);
  border:1px solid rgba(116,88,61,.32);
  border-radius:5px 8px 6px 7px;
  color:#5D4433;
  background:
    radial-gradient(circle at 17px 19px,rgba(125,94,62,.08) 0 1px,transparent 1.35px),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(93,132,161,.12) 27px 28px),
    linear-gradient(90deg,transparent 0 27px,rgba(211,112,104,.18) 27px 28px,transparent 28px),
    linear-gradient(145deg,#FFFEF8 0%,#FFFBF1 54%,#FCF7EA 100%);
  background-size:22px 21px,auto,auto,auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.76),
    0 16px 26px -19px rgba(28,17,9,.94),
    0 2px 4px rgba(49,31,19,.22);
  transform:rotate(.4deg);
}

.photo-wall--birthday-spiral .photo-wall__story::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:74px;
  height:17px;
  border-radius:1px 2px 1px 2px;
  background:
    repeating-linear-gradient(104deg,rgba(255,255,255,.34) 0 5px,transparent 5px 10px),
    rgba(214,138,152,.74);
  box-shadow:0 2px 4px rgba(52,33,20,.22);
  transform:translateX(-50%) rotate(-1.5deg);
  pointer-events:none;
}

.photo-wall--birthday-spiral .photo-wall__story-title{
  margin:0 0 10px;
  color:#B0524F;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(16px,1.8vw,20px);
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
}

.photo-wall--birthday-spiral .photo-wall__story p:not(.photo-wall__story-title){
  margin:0;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(12px,1.35vw,14px);
  line-height:1.95;
  text-align:justify;
}

.photo-wall--birthday-spiral .photo-wall__story p:not(.photo-wall__story-title) + p{
  margin-top:11px;
}

@media (max-width:720px){
  .photo-wall.photo-wall--birthday-spiral{
    padding:14px 10px 32px;
    border-width:7px;
  }

  .photo-wall--birthday-spiral .birthday-spiral-page{
    min-height:0;
    padding:20px 14px 32px 54px;
    border-radius:3px 12px 12px 4px;
    background:
      radial-gradient(circle at 17px 19px,rgba(125,94,62,.08) 0 1px,transparent 1.35px),
      radial-gradient(circle at 9px 8px,rgba(255,255,255,.7) 0 .8px,transparent 1.15px),
      repeating-linear-gradient(0deg,transparent 0 25px,rgba(93,132,161,.14) 25px 26px),
      repeating-linear-gradient(90deg,transparent 0 25px,rgba(93,132,161,.1) 25px 26px),
      linear-gradient(90deg,transparent 0 47px,rgba(211,112,104,.22) 47px 48px,transparent 48px),
      linear-gradient(145deg,#FFFEF8 0%,#FFFBF1 54%,#FCF7EA 100%);
    background-size:22px 21px,15px 14px,auto,auto,auto,auto;
  }

  .photo-wall--birthday-spiral .birthday-spiral-binding{
    top:18px;
    bottom:20px;
    width:38px;
  }

  .photo-wall--birthday-spiral .birthday-spiral-ring{
    width:35px;
    height:12px;
    border-width:2px;
    transform:translate(-18%,-50%) rotate(-7deg);
  }

  .photo-wall--birthday-spiral .birthday-spiral-head{
    width:100%;
    margin-bottom:19px;
    padding:9px 14px 10px;
  }

  .photo-wall--birthday-spiral .photo-wall__title{
    font-size:clamp(22px,7.1vw,31px);
  }

  .photo-wall--birthday-spiral .birthday-spiral-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:clamp(34px,11.5vw,48px);
    gap:10px 8px;
    margin-top:16px;
  }

  .photo-wall--birthday-spiral .birthday-photo-1{grid-column:1 / span 2;grid-row:1 / span 5;}
  .photo-wall--birthday-spiral .birthday-photo-2{grid-column:3 / span 2;grid-row:1 / span 4;}
  .photo-wall--birthday-spiral .birthday-photo-3{grid-column:1 / span 2;grid-row:5 / span 5;}
  .photo-wall--birthday-spiral .birthday-photo-4{grid-column:3 / span 2;grid-row:4 / span 5;}
  .photo-wall--birthday-spiral .birthday-photo-5{grid-column:1 / span 2;grid-row:10 / span 4;}
  .photo-wall--birthday-spiral .birthday-photo-6{grid-column:3 / span 2;grid-row:9 / span 5;}

  .photo-wall--birthday-spiral .photo-card--birthday-spiral{
    padding:6px 6px 5px;
  }

  .photo-wall--birthday-spiral .photo-card--birthday-spiral:hover,
  .photo-wall--birthday-spiral .photo-card--birthday-spiral:focus-within{
    transform:translate(var(--photo-shift-x),calc(var(--photo-shift-y) - 6px)) rotate(0deg) scale(1.055);
  }

  .photo-wall--birthday-spiral .birthday-photo__caption{
    margin-top:4px;
    font-size:9px;
  }

  .photo-wall--birthday-spiral .birthday-tape{
    width:32px;
    height:11px;
  }

  .photo-wall--birthday-spiral .birthday-note{
    font-size:9px;
  }

  .photo-wall--birthday-spiral .birthday-note--friends{
    right:4%;
  }

  .photo-wall--birthday-spiral .birthday-note--sweet{
    left:7%;
  }
}

@media (max-width:430px){
  .photo-wall--birthday-spiral .birthday-spiral-page{
    padding-right:10px;
    padding-left:48px;
  }

  .photo-wall--birthday-spiral .birthday-spiral-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:clamp(32px,12vw,44px);
    gap:9px 7px;
  }

  .photo-wall--birthday-spiral .birthday-note--tea,
  .photo-wall--birthday-spiral .birthday-note--sweet{
    display:none;
  }

  .photo-wall--birthday-spiral .birthday-doodle--cup,
  .photo-wall--birthday-spiral .birthday-doodle--cake{
    width:29px;
    height:29px;
  }
}

@media (prefers-reduced-motion:reduce){
  .photo-wall--birthday-spiral .photo-card--birthday-spiral,
  .photo-wall--birthday-spiral .photo-card--birthday-spiral .photo-card__window img{
    transition:none;
  }
}

/* =========================================================
   51. 水滴蛋糕详情页：温柔语录翻页卡片
   ========================================================= */
.quote-book{
  position:relative;
  margin-top:clamp(14px,2.2vw,24px);
}

.quote-book__pages{
  display:grid;
  isolation:isolate;
}

.quote-book__page{
  grid-area:1 / 1;
  position:relative;
  min-height:clamp(300px,38vw,430px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(48px,6vw,78px) clamp(28px,7vw,84px);
  overflow:hidden;
  border:2px solid rgba(107,87,72,.3);
  border-radius:20px;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.8) 0 1px,transparent 1.3px),
    radial-gradient(circle at 82% 88%,rgba(107,87,72,.075) 0 1px,transparent 1.3px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(107,87,72,.035) 31px 32px),
    linear-gradient(145deg,#FFFDF5 0%,#FFF9E9 52%,#FCF3DF 100%);
  background-size:17px 17px,21px 21px,auto,auto;
  box-shadow:
    0 20px 34px -28px rgba(107,87,72,.85),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -13px 24px -22px rgba(107,87,72,.45);
  opacity:0;
  visibility:hidden;
  transform:translateX(12px) rotate(.25deg);
  transition:opacity .34s ease,transform .38s cubic-bezier(.22,.8,.32,1),visibility 0s linear .38s;
}

.quote-book__page::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1.5px dashed rgba(121,94,74,.28);
  border-radius:13px;
  pointer-events:none;
}

.quote-book__page::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(229,176,119,.18);
  border-radius:10px;
  pointer-events:none;
}

.quote-book__page.is-active{
  opacity:1;
  visibility:visible;
  transform:translateX(0) rotate(0);
  transition-delay:0s;
}

.quote-book__text{
  position:relative;
  z-index:2;
  max-width:44em;
  margin:0;
  color:#6B5748;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(16px,1.55vw,20px);
  font-weight:600;
  line-height:2.05;
  letter-spacing:.015em;
  text-align:left;
  text-indent:2em;
  text-wrap:pretty;
}

.quote-book__page-mark{
  position:absolute;
  right:24px;
  bottom:17px;
  z-index:2;
  color:rgba(121,94,74,.42);
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:11px;
  letter-spacing:.16em;
}

.quote-book__doodle{
  position:absolute;
  z-index:1;
  pointer-events:none;
  user-select:none;
}

.quote-book__doodle--star-a{
  top:18px;
  left:24px;
  color:#E4B65F;
  font-size:18px;
  opacity:.56;
  transform:rotate(-12deg);
}

.quote-book__doodle--star-b{
  right:26px;
  top:22px;
  color:#D98E99;
  font-size:15px;
  opacity:.48;
  transform:rotate(11deg);
}

.quote-book__doodle--dot-a,
.quote-book__doodle--dot-b{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#E9B5BC;
  box-shadow:0 0 0 3px rgba(233,181,188,.13);
}

.quote-book__doodle--dot-a{
  left:31px;
  bottom:29px;
}

.quote-book__doodle--dot-b{
  right:31px;
  bottom:43px;
  width:5px;
  height:5px;
  background:#E3C06C;
  box-shadow:0 0 0 3px rgba(227,192,108,.13);
}

.quote-book__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,4vw,42px);
  margin-top:18px;
}

.quote-book__button{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:2px solid rgba(107,87,72,.46);
  border-radius:50%;
  color:#6B5748;
  background:linear-gradient(145deg,#FFFDF5,#F8E8D2);
  box-shadow:0 9px 16px -13px rgba(107,87,72,.9),inset 0 1px 0 #fff;
  transition:transform .25s cubic-bezier(.34,1.4,.5,1),background .25s,box-shadow .25s,opacity .25s;
}

.quote-book__button svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.quote-book__button:hover:not(:disabled){
  transform:translateY(-3px) scale(1.04);
  color:#B87958;
  background:linear-gradient(145deg,#FFFDF5,#F7D8DE);
  box-shadow:0 13px 20px -15px rgba(107,87,72,.95),inset 0 1px 0 #fff;
}

.quote-book__button:disabled{
  opacity:.32;
  cursor:not-allowed;
}

.quote-book__count{
  min-width:72px;
  color:#8D6A58;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:13px;
  letter-spacing:.12em;
  text-align:center;
}

@media (max-width:720px){
  .quote-book__page{
    min-height:360px;
    padding:54px 30px 64px;
    border-radius:16px;
  }

  .quote-book__page::before{
    inset:8px;
  }

  .quote-book__page::after{
    inset:14px;
  }

  .quote-book__text{
    font-size:clamp(15px,4.3vw,18px);
    line-height:2;
  }
}

@media (max-width:430px){
  .quote-book__page{
    min-height:390px;
    padding:50px 23px 60px;
  }

  .quote-book__doodle--star-a{
    left:19px;
  }

  .quote-book__doodle--star-b{
    right:19px;
  }

  .quote-book__page-mark{
    right:19px;
  }
}

@media (prefers-reduced-motion:reduce){
  .quote-book__page,
  .quote-book__button{
    transition:none;
  }
}

/* =========================================================
   52. 糖霜日记详情页：密码好友留言簿
   ========================================================= */
.friend-book{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  margin-top:clamp(14px,2.2vw,24px);
  filter:drop-shadow(0 24px 30px rgba(95,71,55,.16));
}

.friend-book [hidden]{
  display:none !important;
}

.friend-book__binding{
  position:relative;
  z-index:3;
  min-height:100%;
  border:3px solid #3D342E;
  border-right:0;
  border-radius:20px 0 0 20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.1),transparent 38%),
    linear-gradient(145deg,#554940,#2D2824 74%);
  box-shadow:inset -12px 0 20px -17px #000;
}

.friend-book__binding::before{
  content:"";
  position:absolute;
  inset:18px 9px 18px auto;
  width:8px;
  border-radius:9px;
  background:linear-gradient(90deg,#1E1A17,#5C5148,#1D1916);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.friend-book__ring{
  position:absolute;
  left:50%;
  width:57px;
  height:16px;
  border:4px solid #25211E;
  border-left-color:#5E544C;
  border-radius:999px;
  background:linear-gradient(180deg,#71675E,#302A26);
  box-shadow:0 2px 0 rgba(255,255,255,.16),0 5px 9px rgba(0,0,0,.28);
  transform:translate(-44%,-50%) rotate(-3deg);
}

.friend-book__ring::after{
  content:"";
  position:absolute;
  inset:3px 6px;
  border-top:2px solid rgba(255,255,255,.24);
  border-radius:999px;
}

.friend-book__paper{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(30px,5vw,58px) clamp(20px,5vw,58px) clamp(34px,5vw,56px);
  border:2px solid rgba(107,87,72,.27);
  border-left:2px solid rgba(107,87,72,.18);
  border-radius:0 20px 20px 0;
  background:
    radial-gradient(circle at 22px 20px,rgba(131,99,78,.09) 0 1px,transparent 1.35px),
    radial-gradient(circle at 14px 9px,rgba(255,255,255,.9) 0 .8px,transparent 1.15px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(100,144,171,.11) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(100,144,171,.08) 31px 32px),
    linear-gradient(145deg,#FFFEF9 0%,#FFFBF1 56%,#FCF3E1 100%);
  background-size:25px 24px,17px 16px,auto,auto,auto;
}

.friend-book__paper::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.24;
  background-image:
    repeating-linear-gradient(115deg,rgba(107,87,72,.035) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(25deg,rgba(255,255,255,.22) 0 1px,transparent 1px 7px);
  mix-blend-mode:multiply;
}

.friend-book__paper > *{
  position:relative;
  z-index:2;
}

.friend-book__head{
  max-width:720px;
  margin:0 auto clamp(24px,4vw,38px);
  text-align:center;
}

.friend-book__eyebrow{
  margin:0 0 8px;
  color:#D56F87;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.friend-book__head h3{
  margin:0;
  color:#5D493E;
  font-family:var(--font-disp);
  font-size:clamp(24px,3.7vw,38px);
  font-weight:700;
  line-height:1.3;
}

.friend-book__head > p:last-child{
  margin:9px 0 0;
  color:#8E7364;
  font-size:clamp(13px,1.7vw,15px);
  line-height:1.8;
}

.friend-book__lock{
  position:relative;
  width:min(560px,100%);
  margin:0 auto;
  padding:clamp(26px,4.5vw,40px);
  border:2px solid rgba(107,87,72,.32);
  border-radius:20px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(137,102,85,.04) 26px 27px),
    linear-gradient(145deg,#FFF4F4,#F8DDE2);
  background-size:20px 20px,auto,auto;
  box-shadow:
    0 20px 32px -29px rgba(101,79,67,.95),
    inset 0 1px 0 #fff,
    inset 0 -12px 22px -21px rgba(101,79,67,.55);
  transform:rotate(-.25deg);
}

.friend-book__lock::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  width:104px;
  height:23px;
  border-radius:3px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px),
    rgba(232,194,132,.72);
  box-shadow:0 2px 4px rgba(101,79,67,.1);
  transform:translateX(-50%) rotate(-1.1deg);
  pointer-events:none;
}

.friend-book__lock::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1.5px dashed rgba(151,102,92,.27);
  border-radius:13px;
  pointer-events:none;
}

.friend-book__lock.is-wrong{
  animation:friend-note-shake .38s ease;
}

@keyframes friend-note-shake{
  0%,100%{transform:translateX(0) rotate(-.25deg)}
  28%{transform:translateX(-7px) rotate(-.75deg)}
  58%{transform:translateX(6px) rotate(.2deg)}
  82%{transform:translateX(-2px) rotate(-.45deg)}
}

.friend-book__lock-icon{
  position:relative;
  z-index:1;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border:2px solid rgba(101,79,67,.38);
  border-radius:50%;
  color:#A96C77;
  background:linear-gradient(145deg,#FFFDF6,#F4D5DC);
  box-shadow:inset 0 2px 0 #fff,0 10px 16px -15px rgba(101,79,67,.9);
}

.friend-book__lock-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.friend-book__lock-copy{
  position:relative;
  z-index:1;
  max-width:480px;
  margin:0 auto 22px;
  color:#765B4F;
  font-size:14.5px;
  line-height:1.9;
  text-align:center;
}

.friend-book__password-form{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  max-width:460px;
  margin:0 auto;
}

.friend-book__input,
.friend-book__textarea{
  width:100%;
  color:#654F43;
  border:2px solid rgba(101,79,67,.34);
  background:rgba(255,253,246,.94);
  box-shadow:inset 0 3px 8px -8px rgba(101,79,67,.7),0 1px 0 #fff;
  transition:border-color .25s,box-shadow .25s,background .25s;
}

.friend-book__input{
  min-height:48px;
  padding:10px 15px;
  border-radius:13px;
  letter-spacing:.14em;
}

.friend-book__textarea{
  display:block;
  min-height:142px;
  resize:vertical;
  padding:14px 16px;
  border-radius:15px;
  font-size:15px;
  line-height:1.85;
}

.friend-book__input::placeholder,
.friend-book__textarea::placeholder{
  color:#A78E80;
  letter-spacing:0;
}

.friend-book__input:focus,
.friend-book__textarea:focus{
  border-color:rgba(196,116,129,.78);
  background:#FFFEFB;
  box-shadow:0 0 0 4px rgba(225,162,173,.16),inset 0 3px 8px -8px rgba(101,79,67,.7);
}

.friend-book__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:9px 19px;
  color:#FFFDF8;
  border:2px solid rgba(101,79,67,.48);
  border-radius:999px;
  background:linear-gradient(145deg,#D99AA5,#C97D89);
  box-shadow:0 11px 18px -14px rgba(101,79,67,.95),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s cubic-bezier(.34,1.4,.5,1),filter .25s;
}

.friend-book__button:hover{
  transform:translateY(-2px) rotate(-.4deg);
  filter:saturate(1.06) brightness(1.02);
}

.friend-book__message{
  min-height:24px;
  margin:12px auto 0;
  color:#A25E6A;
  font-size:13px;
  line-height:1.7;
  text-align:center;
}

.friend-book__board{
  animation:friend-board-in .45s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes friend-board-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.friend-book__welcome{
  position:relative;
  width:min(680px,100%);
  margin:0 auto 22px;
  padding:19px 24px;
  border:2px solid rgba(101,79,67,.3);
  border-radius:17px;
  background:
    repeating-linear-gradient(0deg,transparent 0 28px,rgba(101,79,67,.035) 28px 29px),
    linear-gradient(145deg,#FFFDF4,#F8E9C7);
  box-shadow:0 17px 27px -25px rgba(101,79,67,.95),inset 0 1px 0 #fff;
  text-align:center;
  transform:rotate(.2deg);
}

.friend-book__welcome::before,
.friend-book__write::before,
.friend-book__note::before{
  content:"";
  position:absolute;
  pointer-events:none;
}

.friend-book__welcome::before{
  top:-11px;
  left:50%;
  width:88px;
  height:22px;
  border-radius:3px;
  background:rgba(202,224,189,.8);
  transform:translateX(-50%) rotate(1deg);
  box-shadow:0 2px 4px rgba(101,79,67,.1);
}

.friend-book__welcome h4,
.friend-book__notes-head h4{
  margin:0;
  color:#76574A;
  font-size:clamp(17px,2.5vw,22px);
  font-weight:700;
  line-height:1.55;
}

.friend-book__welcome p{
  margin:8px 0 0;
  color:#A07761;
  font-size:12.5px;
  line-height:1.7;
}

.friend-book__write{
  position:relative;
  width:min(680px,100%);
  margin:0 auto 29px;
  padding:clamp(21px,4vw,31px);
  border:2px solid rgba(101,79,67,.3);
  border-radius:20px;
  background:
    radial-gradient(circle at 16px 15px,rgba(130,95,71,.07) 0 1px,transparent 1.3px),
    repeating-linear-gradient(0deg,transparent 0 30px,rgba(112,88,72,.045) 30px 31px),
    linear-gradient(145deg,#FFFDF5,#F8E8C4);
  background-size:22px 22px,auto,auto;
  box-shadow:
    0 20px 31px -28px rgba(101,79,67,.95),
    inset 0 1px 0 #fff,
    inset 0 -12px 22px -22px rgba(101,79,67,.48);
}

.friend-book__write::before{
  width:100px;
  height:24px;
  margin:-35px 0 0 15px;
  border-radius:3px;
  background:rgba(222,180,132,.65);
  transform:rotate(-2deg);
  box-shadow:0 2px 4px rgba(101,79,67,.1);
}

.friend-book__write label{
  display:block;
  margin:0 0 10px;
  color:#705548;
  font-size:15px;
}

.friend-book__tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:12px;
}

.friend-book__tools > span{
  color:#9C806F;
  font-size:12px;
}

.friend-book__notes-head{
  width:min(690px,100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:0 auto 14px;
}

.friend-book__notes-head span{
  color:#A07E6C;
  font-size:12px;
}

.friend-book__empty{
  width:min(680px,100%);
  margin:0 auto;
  padding:27px 22px;
  color:#9C7D6B;
  border:2px dashed rgba(101,79,67,.26);
  border-radius:17px;
  background:rgba(255,253,246,.64);
  text-align:center;
}

.friend-book__list{
  width:min(720px,100%);
  display:grid;
  gap:17px;
  margin:0 auto;
  padding:0;
  list-style:none;
}

.friend-book__note{
  position:relative;
  padding:24px 24px 20px;
  overflow:visible;
  border:2px solid rgba(101,79,67,.28);
  border-radius:7px 16px 10px 15px;
  background:
    radial-gradient(circle at 18px 16px,rgba(130,95,71,.075) 0 1px,transparent 1.3px),
    repeating-linear-gradient(0deg,transparent 0 28px,rgba(108,89,77,.045) 28px 29px),
    linear-gradient(145deg,#FFFDF5,#F8EFD8);
  background-size:21px 21px,auto,auto;
  box-shadow:0 18px 27px -26px rgba(101,79,67,.95),inset 0 1px 0 #fff;
  transform:rotate(var(--friend-tilt,0deg));
  transition:transform .26s ease,box-shadow .26s ease;
}

.friend-book__note-item:nth-child(3n+1) .friend-book__note{--friend-tilt:-.38deg}
.friend-book__note-item:nth-child(3n+2) .friend-book__note{--friend-tilt:.3deg}

.friend-book__note:hover{
  transform:translateY(-3px) rotate(0);
  box-shadow:0 23px 32px -28px rgba(101,79,67,.98),inset 0 1px 0 #fff;
}

.friend-book__note::before{
  top:-11px;
  left:50%;
  width:102px;
  height:23px;
  border-radius:3px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px),
    rgba(225,190,136,.7);
  box-shadow:0 2px 4px rgba(101,79,67,.11);
  transform:translateX(-50%) rotate(-1deg);
}

.friend-book__note p{
  margin:0;
  color:#654F43;
  font-size:15px;
  line-height:1.95;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.friend-book__note > span{
  display:block;
  margin-top:12px;
  color:#A07F6D;
  font-size:11.5px;
  text-align:right;
}

.friend-book__doodle{
  position:absolute;
  z-index:1;
  pointer-events:none;
  user-select:none;
  opacity:.58;
}

.friend-book__doodle--star-a{
  top:24px;
  right:34px;
  color:#D9A955;
  font-size:25px;
  transform:rotate(12deg);
}

.friend-book__doodle--star-b{
  left:42px;
  bottom:40px;
  color:#D7909A;
  font-size:20px;
  transform:rotate(-13deg);
}

.friend-book__doodle--dot-a,
.friend-book__doodle--dot-b{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#E3B8C0;
  box-shadow:0 0 0 4px rgba(227,184,192,.13);
}

.friend-book__doodle--dot-a{
  top:98px;
  left:28px;
}

.friend-book__doodle--dot-b{
  right:44px;
  bottom:82px;
  background:#DCC276;
  box-shadow:0 0 0 4px rgba(220,194,118,.14);
}

@media (max-width:720px){
  .friend-book{
    grid-template-columns:43px minmax(0,1fr);
  }

  .friend-book__binding{
    border-width:2px;
    border-radius:15px 0 0 15px;
  }

  .friend-book__binding::before{
    inset:16px 7px 16px auto;
    width:6px;
  }

  .friend-book__ring{
    width:40px;
    height:13px;
    border-width:3px;
  }

  .friend-book__paper{
    padding:30px 16px 38px 19px;
    border-radius:0 15px 15px 0;
  }

  .friend-book__password-form{
    grid-template-columns:1fr;
  }

  .friend-book__password-form .friend-book__button{
    width:100%;
  }

  .friend-book__notes-head{
    align-items:flex-end;
  }
}

@media (max-width:430px){
  .friend-book{
    grid-template-columns:37px minmax(0,1fr);
  }

  .friend-book__paper{
    padding:27px 13px 34px 16px;
  }

  .friend-book__lock,
  .friend-book__write{
    padding:25px 16px;
  }

  .friend-book__note{
    padding:24px 17px 19px;
  }

  .friend-book__doodle--star-a{
    right:20px;
  }

  .friend-book__doodle--star-b{
    left:25px;
  }
}

@media (prefers-reduced-motion:reduce){
  .friend-book__lock,
  .friend-book__button,
  .friend-book__note{
    transition:none;
  }

  .friend-book__lock.is-wrong,
  .friend-book__board{
    animation:none;
  }
}

/* =========================================================
   53. 层叠的夏天详情页：夏日待办清单
   ========================================================= */
.summer-book{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  margin-top:clamp(14px,2.2vw,24px);
  filter:drop-shadow(0 24px 30px rgba(95,71,55,.16));
}

.summer-book__binding{
  position:relative;
  z-index:3;
  min-height:100%;
  border:3px solid #3D342E;
  border-right:0;
  border-radius:20px 0 0 20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.1),transparent 38%),
    linear-gradient(145deg,#554940,#2D2824 74%);
  box-shadow:inset -12px 0 20px -17px #000;
}

.summer-book__binding::before{
  content:"";
  position:absolute;
  inset:18px 9px 18px auto;
  width:8px;
  border-radius:9px;
  background:linear-gradient(90deg,#1E1A17,#5C5148,#1D1916);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.summer-book__ring{
  position:absolute;
  left:50%;
  width:57px;
  height:16px;
  border:4px solid #25211E;
  border-left-color:#5E544C;
  border-radius:999px;
  background:linear-gradient(180deg,#71675E,#302A26);
  box-shadow:0 2px 0 rgba(255,255,255,.16),0 5px 9px rgba(0,0,0,.28);
  transform:translate(-44%,-50%) rotate(-3deg);
}

.summer-book__ring::after{
  content:"";
  position:absolute;
  inset:3px 6px;
  border-top:2px solid rgba(255,255,255,.24);
  border-radius:999px;
}

.summer-book__paper{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(30px,5vw,58px) clamp(20px,5vw,58px) clamp(34px,5vw,56px);
  border:2px solid rgba(107,87,72,.27);
  border-left:2px solid rgba(107,87,72,.18);
  border-radius:0 20px 20px 0;
  background:
    radial-gradient(circle at 22px 20px,rgba(131,99,78,.09) 0 1px,transparent 1.35px),
    radial-gradient(circle at 14px 9px,rgba(255,255,255,.9) 0 .8px,transparent 1.15px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(100,144,171,.11) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(100,144,171,.08) 31px 32px),
    linear-gradient(145deg,#FFFEF9 0%,#FFFBF1 56%,#FCF3E1 100%);
  background-size:25px 24px,17px 16px,auto,auto,auto;
}

.summer-book__paper::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.24;
  background-image:
    repeating-linear-gradient(115deg,rgba(107,87,72,.035) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(25deg,rgba(255,255,255,.22) 0 1px,transparent 1px 7px);
  mix-blend-mode:multiply;
}

.summer-book__paper > *{
  position:relative;
  z-index:2;
}

.summer-book__head{
  max-width:720px;
  margin:0 auto clamp(22px,3.4vw,34px);
  text-align:center;
}

.summer-book__eyebrow{
  margin:0 0 8px;
  color:#7FB5C6;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.summer-book__title{
  margin:0;
  color:#5D493E;
  font-family:var(--font-disp);
  font-size:clamp(26px,4.2vw,42px);
  font-weight:700;
  line-height:1.25;
}

.summer-book__subtitle{
  margin:10px auto 0;
  max-width:560px;
  color:#8E7364;
  font-size:clamp(13px,1.7vw,15px);
  line-height:1.8;
}

.summer-book__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.7vw,18px);
  max-width:820px;
  margin:0 auto;
  list-style:none;
}

.summer-book__item{
  position:relative;
  border:1.6px solid rgba(107,87,72,.2);
  border-radius:11px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.62) 0 1px,transparent 1.3px),
    linear-gradient(160deg,#FFFDF7,#FBF1DF);
  background-size:19px 19px,auto;
  box-shadow:
    0 12px 20px -18px rgba(101,79,67,.9),
    inset 0 1px 0 rgba(255,255,255,.7);
  transform:rotate(-.5deg);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease;
}

.summer-book__item--t1{
  transform:rotate(.6deg);
}

.summer-book__item--t2{
  transform:rotate(-.15deg);
}

.summer-book__item::before{
  content:"";
  position:absolute;
  top:-8px;
  left:14px;
  width:58px;
  height:17px;
  border-radius:2px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.34) 0 5px,transparent 5px 10px),
    rgba(158,206,228,.72);
  box-shadow:0 2px 5px rgba(101,79,67,.12);
  transform:rotate(-3.2deg);
  pointer-events:none;
}

.summer-book__item--t1::before{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.34) 0 5px,transparent 5px 10px),
    rgba(168,213,183,.74);
  transform:rotate(2.8deg);
}

.summer-book__item--t2::before{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.34) 0 5px,transparent 5px 10px),
    rgba(242,214,150,.76);
  transform:rotate(-1.6deg);
}

.summer-book__wish{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px 18px 16px;
  cursor:pointer;
}

.summer-book__check{
  position:relative;
  flex:0 0 auto;
  width:23px;
  height:23px;
  margin:1px 0 0;
  border:2.2px solid rgba(107,87,72,.62);
  border-radius:7px 9px 8px 7px;
  background:linear-gradient(150deg,#FFFDF7,#FBF1DF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.summer-book__check::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.8 12.6 10.2 18 19.4 7.4' fill='none' stroke='%23FFF9F0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:15px 15px;
  background-position:center;
  background-repeat:no-repeat;
  transition:opacity .18s ease;
}

.summer-book__check:checked{
  border-color:#8FBF9F;
  background:linear-gradient(145deg,#A6D8B4,#7FB68F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 9px -6px rgba(95,134,104,.9);
}

.summer-book__check:checked::after{
  opacity:1;
}

.summer-book__check:focus-visible{
  outline:3px solid rgba(127,181,198,.6);
  outline-offset:3px;
}

.summer-book__text{
  color:#66513F;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(14px,1.75vw,16px);
  line-height:1.66;
  transition:color .22s ease,opacity .22s ease;
}

.summer-book__text::after{
  content:"";
  display:block;
  width:0;
  height:1.6px;
  margin-top:5px;
  border-radius:2px;
  background:rgba(107,87,72,.55);
  transition:width .3s ease;
}

.summer-book__item.is-done{
  border-color:rgba(143,191,159,.5);
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.6) 0 1px,transparent 1.3px),
    linear-gradient(160deg,#FBFDF7,#EFF4E6);
}

.summer-book__item.is-done .summer-book__text{
  color:#9A8B78;
}

.summer-book__item.is-done .summer-book__text::after{
  width:100%;
}

.summer-book__foot{
  display:flex;
  justify-content:center;
  margin:clamp(22px,3.4vw,34px) 0 0;
}

.summer-book__progress{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border:1.6px dashed rgba(127,181,198,.62);
  border-radius:999px;
  color:#5E7B87;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(13px,1.6vw,15px);
  background:linear-gradient(145deg,#F4FAFC,#E6F2F6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}

.summer-book__progress::before{
  content:"✿";
  font-size:.95em;
  color:#A6D0DD;
}

.summer-book__progress.is-complete{
  border-color:rgba(242,201,130,.85);
  color:#9A7A44;
  background:linear-gradient(145deg,#FFF9E9,#FBEBC4);
}

.summer-book__progress.is-complete::before{
  content:"🎉";
}

.summer-book__doodle{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.62;
}

.summer-book__doodle svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.summer-book__doodle--star-a{
  top:5%;
  left:11%;
  width:26px;
  height:26px;
  color:#E8B84E;
  transform:rotate(-14deg);
}

.summer-book__doodle--star-a svg{
  fill:rgba(242,208,138,.42);
  stroke:none;
}

.summer-book__doodle--cloud{
  top:9%;
  right:7%;
  width:58px;
  height:38px;
  color:#9CC7D8;
  transform:rotate(4deg);
}

.summer-book__doodle--sunflower{
  top:34%;
  right:3.4%;
  width:38px;
  height:38px;
  color:#DDA83F;
  transform:rotate(8deg);
}

.summer-book__doodle--soda{
  bottom:16%;
  left:3.4%;
  width:38px;
  height:38px;
  color:#7FB5C6;
  transform:rotate(-7deg);
}

.summer-book__doodle--melon{
  bottom:6%;
  right:5%;
  width:44px;
  height:44px;
  color:#8FBF9F;
  transform:rotate(6deg);
}

.summer-book__doodle--star-b{
  bottom:29%;
  right:11%;
  width:20px;
  height:20px;
  color:#E9A7B0;
  transform:rotate(16deg);
}

.summer-book__doodle--star-b svg{
  fill:rgba(233,167,176,.4);
  stroke:none;
}

@media (max-width:860px){
  .summer-book__doodle--sunflower,
  .summer-book__doodle--star-b{
    display:none;
  }
}

@media (max-width:720px){
  .summer-book{
    grid-template-columns:46px minmax(0,1fr);
  }

  .summer-book__binding::before{
    inset:14px 7px 14px auto;
    width:6px;
  }

  .summer-book__ring{
    width:42px;
    height:13px;
    border-width:3px;
  }

  .summer-book__paper{
    padding:30px 18px 38px 20px;
    border-radius:0 15px 15px 0;
  }

  .summer-book__list{
    grid-template-columns:1fr;
    gap:26px;
  }

  .summer-book__doodle--cloud{
    width:46px;
    height:31px;
  }
}

@media (max-width:430px){
  .summer-book{
    grid-template-columns:37px minmax(0,1fr);
  }

  .summer-book__paper{
    padding:27px 13px 34px 16px;
  }

  .summer-book__title{
    font-size:24px;
  }

  .summer-book__wish{
    gap:10px;
    padding:16px 15px 15px;
  }

  .summer-book__doodle--star-a{
    left:22px;
  }

  .summer-book__doodle--melon{
    width:36px;
    height:36px;
  }
}

@media (prefers-reduced-motion:reduce){
  .summer-book__item,
  .summer-book__text,
  .summer-book__text::after,
  .summer-book__check,
  .summer-book__check::after{
    transition:none;
  }
}

/* =========================================================
   54. 酸酸的傍晚详情页：赛博蛋糕组装台
   ========================================================= */
.cyber-book{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  margin-top:clamp(14px,2.2vw,24px);
  filter:drop-shadow(0 24px 30px rgba(95,71,55,.16));
}

.cyber-book [hidden]{
  display:none !important;
}

.cyber-book__binding{
  position:relative;
  z-index:3;
  min-height:100%;
  border:3px solid #3D342E;
  border-right:0;
  border-radius:20px 0 0 20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.1),transparent 38%),
    linear-gradient(145deg,#554940,#2D2824 74%);
  box-shadow:inset -12px 0 20px -17px #000;
}

.cyber-book__binding::before{
  content:"";
  position:absolute;
  inset:18px 9px 18px auto;
  width:8px;
  border-radius:9px;
  background:linear-gradient(90deg,#1E1A17,#5C5148,#1D1916);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.cyber-book__ring{
  position:absolute;
  left:50%;
  width:57px;
  height:16px;
  border:4px solid #25211E;
  border-left-color:#5E544C;
  border-radius:999px;
  background:linear-gradient(180deg,#71675E,#302A26);
  box-shadow:0 2px 0 rgba(255,255,255,.16),0 5px 9px rgba(0,0,0,.28);
  transform:translate(-44%,-50%) rotate(-3deg);
}

.cyber-book__ring::after{
  content:"";
  position:absolute;
  inset:3px 6px;
  border-top:2px solid rgba(255,255,255,.24);
  border-radius:999px;
}

.cyber-book__paper{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(30px,5vw,58px) clamp(20px,5vw,58px) clamp(34px,5vw,56px);
  border:2px solid rgba(107,87,72,.27);
  border-left:2px solid rgba(107,87,72,.18);
  border-radius:0 20px 20px 0;
  background:
    radial-gradient(circle at 22px 20px,rgba(131,99,78,.09) 0 1px,transparent 1.35px),
    radial-gradient(circle at 14px 9px,rgba(255,255,255,.9) 0 .8px,transparent 1.15px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(157,127,155,.08) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(157,127,155,.06) 31px 32px),
    linear-gradient(145deg,#FFFEF9 0%,#FFF9F0 58%,#FAEBCD 100%);
  background-size:25px 24px,17px 16px,auto,auto,auto;
}

.cyber-book__paper::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.22;
  background-image:
    repeating-linear-gradient(115deg,rgba(107,87,72,.035) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(25deg,rgba(255,255,255,.22) 0 1px,transparent 1px 7px);
  mix-blend-mode:multiply;
}

.cyber-book__paper > *{
  position:relative;
  z-index:2;
}

.cyber-book__head{
  max-width:720px;
  margin:0 auto clamp(22px,3.4vw,34px);
  text-align:center;
}

.cyber-book__eyebrow{
  margin:0 0 8px;
  color:#A777A0;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.cyber-book__title{
  margin:0;
  color:#5D493E;
  font-family:var(--font-disp);
  font-size:clamp(26px,4.2vw,42px);
  font-weight:700;
  line-height:1.25;
}

.cyber-book__subtitle{
  margin:10px auto 0;
  max-width:590px;
  color:#8E7364;
  font-size:clamp(13px,1.7vw,15px);
  line-height:1.8;
}

.cyber-book__display{
  position:relative;
  width:min(620px,100%);
  margin:0 auto;
  padding:clamp(18px,3vw,30px) clamp(12px,3vw,26px) clamp(15px,2.6vw,22px);
  border:1.7px dashed rgba(154,111,151,.38);
  border-radius:18px;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    linear-gradient(160deg,rgba(255,252,246,.88),rgba(246,226,239,.58));
  background-size:20px 20px,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.cyber-book__display::before,
.cyber-book__display::after{
  content:"";
  position:absolute;
  top:-9px;
  width:72px;
  height:19px;
  border-radius:2px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px),
    rgba(226,188,214,.64);
  box-shadow:0 2px 5px rgba(101,79,67,.1);
  pointer-events:none;
}

.cyber-book__display::before{
  left:26px;
  transform:rotate(-3deg);
}

.cyber-book__display::after{
  right:26px;
  transform:rotate(2.5deg);
}

.cyber-book__display-label{
  margin:0 0 2px;
  color:rgba(126,91,119,.62);
  font-size:10px;
  letter-spacing:.19em;
  text-align:center;
  text-transform:uppercase;
}

.cyber-book__cake{
  display:grid;
  place-items:center;
  min-height:clamp(220px,31vw,335px);
  padding:0 clamp(2px,1.6vw,15px);
}

.cyber-cake__art{
  display:block;
  width:min(100%,470px);
  height:auto;
  overflow:visible;
}

.cyber-cake__art--result{
  width:100%;
}

.cyber-cake__layer{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.98))
    drop-shadow(0 0 2.2px rgba(255,255,255,.96))
    drop-shadow(0 7px 5px rgba(91,63,84,.14));
}

.cyber-cake__base-sticker{
  filter:
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 0 2.3px rgba(255,255,255,.98))
    drop-shadow(0 9px 6px rgba(91,63,84,.13));
}

.cyber-cake__dusk{
  fill:none;
  stroke:rgba(171,119,161,.52);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-dasharray:2 7;
}

.cyber-cake__shadow{
  fill:rgba(104,72,94,.16);
  filter:blur(3px);
}

.cyber-cake__plate{
  fill:url(#cyberCakePlate);
  stroke:#FFFFFF;
  stroke-width:5.8;
  paint-order:stroke fill;
}

.cyber-cake__plate-inner{
  fill:rgba(229,209,232,.44);
  stroke:rgba(139,105,137,.48);
  stroke-width:1.4;
}

.cyber-cake__plate-highlight{
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:3.2;
  stroke-linecap:round;
}

.cyber-cake__body{
  fill:url(#cyberCakeBody);
  stroke:#8E6D8C;
  stroke-width:2.35;
  stroke-linejoin:round;
}

.cyber-cake__body-top{
  fill:rgba(255,248,239,.84);
  stroke:rgba(255,255,255,.82);
  stroke-width:1.3;
}

.cyber-cake__cream-band{
  fill:url(#cyberCakeFrosting);
  stroke:rgba(159,105,151,.44);
  stroke-width:1.35;
}

.cyber-cake__sponge-band{
  fill:#E4B99E;
  stroke:rgba(154,102,104,.34);
  stroke-width:1.15;
}

.cyber-cake__base-detail{
  fill:none;
  stroke:rgba(157,107,148,.46);
  stroke-width:1.55;
  stroke-linecap:round;
}

.cyber-cake__base-highlight{
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:3;
  stroke-linecap:round;
}

.cyber-cake__sour{
  fill:url(#cyberCakeFrosting);
  stroke:#A879A2;
  stroke-width:1.9;
  stroke-linejoin:round;
}

.cyber-cake__sour-line,
.cyber-cake__drip,
.cyber-cake__sour-texture{
  fill:none;
  stroke:rgba(147,101,143,.66);
  stroke-width:1.7;
  stroke-linecap:round;
}

.cyber-cake__sour-highlight{
  fill:none;
  stroke:rgba(255,255,255,.9);
  stroke-width:2.5;
  stroke-linecap:round;
}

.cyber-cake__sour-pearl{
  fill:#FFFDFC;
  stroke:rgba(161,111,155,.38);
  stroke-width:.75;
}

.cyber-cake__fruit-shadow{
  fill:rgba(94,62,88,.18);
  filter:blur(1.3px);
}

.cyber-cake__fruit-leaf{
  fill:#9DC28E;
  stroke:#688260;
  stroke-width:1.45;
  stroke-linejoin:round;
}

.cyber-cake__berry{
  fill:url(#cyberCakeRaspberry);
  stroke:#955E78;
  stroke-width:1.6;
}

.cyber-cake__blackberry{
  fill:url(#cyberCakeBlackberry);
  stroke:#49394F;
  stroke-width:1.6;
}

.cyber-cake__berry-dots{
  fill:none;
  stroke:rgba(255,239,244,.82);
  stroke-width:2;
  stroke-linecap:round;
}

.cyber-cake__berry-shine{
  fill:none;
  stroke:rgba(255,245,247,.78);
  stroke-width:1.65;
  stroke-linecap:round;
}

.cyber-cake__lime-shadow{
  fill:rgba(82,105,63,.16);
  filter:blur(1.3px);
}

.cyber-cake__lime-rind{
  fill:url(#cyberCakeLime);
  stroke:#789260;
  stroke-width:1.7;
}

.cyber-cake__lime-flesh{
  fill:rgba(242,248,178,.76);
  stroke:rgba(116,143,82,.52);
  stroke-width:1.1;
}

.cyber-cake__lime-segments{
  fill:none;
  stroke:rgba(119,145,86,.72);
  stroke-width:1.2;
  stroke-linecap:round;
}

.cyber-cake__lime-center{
  fill:#FBFDE4;
  stroke:rgba(119,145,86,.68);
  stroke-width:.9;
}

.cyber-cake__lime-shine{
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:2.1;
  stroke-linecap:round;
}

.cyber-cake__juice-drop{
  fill:rgba(218,235,154,.8);
  stroke:#879D65;
  stroke-width:1.25;
}

.cyber-cake__juice-drop--small{
  fill:rgba(229,240,179,.74);
}

.cyber-cake__lime{
  fill:url(#cyberCakeLime);
  stroke:#76916A;
  stroke-width:1.7;
  stroke-linejoin:round;
}

.cyber-cake__lime-line{
  fill:none;
  stroke:#76916A;
  stroke-width:1.4;
  stroke-linecap:round;
}

.cyber-cake__mint-glow{
  fill:rgba(154,218,146,.25);
  stroke:rgba(255,255,255,.72);
  stroke-width:2.4;
  filter:blur(.35px);
}

.cyber-cake__mint{
  fill:url(#cyberCakeMint);
  stroke:#668363;
  stroke-width:1.6;
  stroke-linejoin:round;
}

.cyber-cake__mint-vein{
  fill:none;
  stroke:rgba(88,126,86,.72);
  stroke-width:1.35;
  stroke-linecap:round;
}

.cyber-cake__mint-shine{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:1.9;
  stroke-linecap:round;
}

.cyber-book__summary{
  min-height:24px;
  margin:4px auto 0;
  color:#765B6F;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(13px,1.5vw,15px);
  line-height:1.65;
  text-align:center;
}

.cyber-book__ingredients{
  width:min(820px,100%);
  margin:clamp(25px,4vw,38px) auto 0;
}

.cyber-book__ingredients-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
}

.cyber-book__ingredients-head h4{
  margin:0;
  color:#684F5E;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(15px,2vw,18px);
}

.cyber-book__ingredients-head span{
  color:#A07894;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:12px;
}

.cyber-book__ingredient-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(9px,1.5vw,14px);
}

.cyber-book__ingredient{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 13px;
  border:1.7px solid rgba(132,98,123,.35);
  border-radius:12px;
  color:#735A69;
  background:
    radial-gradient(circle at 17% 22%,rgba(255,255,255,.7) 0 1px,transparent 1.25px),
    linear-gradient(150deg,#FFFDF7,#F8E9EF);
  background-size:18px 18px,auto;
  box-shadow:0 9px 15px -16px rgba(101,79,67,.9),inset 0 1px 0 rgba(255,255,255,.85);
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(13px,1.45vw,15px);
  line-height:1.3;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;
}

.cyber-book__ingredient:hover{
  transform:translateY(-2px);
  border-color:rgba(162,106,150,.55);
}

.cyber-book__ingredient.is-selected{
  color:#66425E;
  border-color:rgba(157,91,145,.67);
  background:
    radial-gradient(circle at 17% 22%,rgba(255,255,255,.78) 0 1px,transparent 1.25px),
    linear-gradient(150deg,#F9EAF7,#E9D1EC);
  box-shadow:0 8px 16px -15px rgba(101,79,67,.95),inset 0 0 0 2px rgba(255,255,255,.56);
}

.cyber-book__ingredient-icon{
  position:relative;
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.98))
    drop-shadow(0 0 1.8px rgba(255,255,255,.98))
    drop-shadow(0 4px 3px rgba(83,57,75,.16));
  transform:rotate(-1deg);
  transition:transform .22s ease,filter .22s ease;
}

.cyber-book__ingredient-icon svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.cyber-book__ingredient-icon--base svg{
  transform:rotate(-3deg) scale(.92);
}

.cyber-book__ingredient-icon--raspberry svg{
  transform:rotate(3deg) scale(.94);
}

.cyber-book__ingredient-icon--lime svg{
  transform:rotate(-7deg) scale(.92);
}

.cyber-book__ingredient-icon--frosting svg{
  transform:rotate(2deg) scale(.96);
}

.cyber-book__ingredient-icon--blackberry svg{
  transform:rotate(-4deg) scale(.94);
}

.cyber-book__ingredient-icon--mint svg{
  transform:rotate(6deg) scale(.94);
}

.cyber-book__ingredient.is-selected .cyber-book__ingredient-icon{
  filter:
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 0 2.2px rgba(255,255,255,1))
    drop-shadow(0 5px 4px rgba(112,70,104,.2));
  transform:translateY(-1px) scale(1.05) rotate(0);
}

.cyber-icon__shadow{
  fill:rgba(91,63,84,.16);
  filter:blur(.8px);
}

.cyber-icon__base,
.cyber-icon__raspberry,
.cyber-icon__blackberry,
.cyber-icon__frosting{
  stroke-width:1.25;
}

.cyber-icon__base{
  fill:url(#cyberCakeBody);
  stroke:#8E6D8C;
}

.cyber-icon__base-top{
  fill:rgba(255,249,241,.84);
  stroke:rgba(255,255,255,.82);
  stroke-width:.8;
}

.cyber-icon__base-cream{
  fill:url(#cyberCakeFrosting);
  stroke:rgba(159,105,151,.38);
  stroke-width:.8;
}

.cyber-icon__base-line,
.cyber-icon__frosting-line,
.cyber-icon__mint-vein{
  fill:none;
  stroke:rgba(136,91,131,.64);
  stroke-width:1.05;
  stroke-linecap:round;
}

.cyber-icon__leaf{
  fill:#9DC28E;
  stroke:#688260;
  stroke-width:1.05;
  stroke-linejoin:round;
}

.cyber-icon__raspberry{
  fill:url(#cyberCakeRaspberry);
  stroke:#955E78;
}

.cyber-icon__blackberry{
  fill:url(#cyberCakeBlackberry);
  stroke:#49394F;
}

.cyber-icon__lime-rind{
  fill:url(#cyberCakeLime);
  stroke:#789260;
  stroke-width:1.2;
}

.cyber-icon__lime-flesh{
  fill:rgba(243,249,184,.78);
  stroke:rgba(116,143,82,.52);
  stroke-width:.85;
}

.cyber-icon__lime-lines{
  fill:none;
  stroke:rgba(119,145,86,.76);
  stroke-width:.95;
  stroke-linecap:round;
}

.cyber-icon__lime-center{
  fill:#FCFDE7;
  stroke:rgba(119,145,86,.68);
  stroke-width:.7;
}

.cyber-icon__frosting{
  fill:url(#cyberCakeFrosting);
  stroke:#A879A2;
}

.cyber-icon__frosting-drip{
  fill:none;
  stroke:rgba(147,101,143,.68);
  stroke-width:1.1;
  stroke-linecap:round;
}

.cyber-icon__mint-glow{
  fill:rgba(154,218,146,.25);
  stroke:rgba(255,255,255,.74);
  stroke-width:1.35;
}

.cyber-icon__mint{
  fill:url(#cyberCakeMint);
  stroke:#668363;
  stroke-width:1.05;
  stroke-linejoin:round;
}

.cyber-icon__shine{
  fill:none;
  stroke:rgba(255,255,255,.9);
  stroke-width:1.4;
  stroke-linecap:round;
}

.cyber-icon__dots{
  fill:none;
  stroke:rgba(255,239,244,.84);
  stroke-width:1.4;
  stroke-linecap:round;
}

.cyber-icon__drop{
  fill:rgba(220,237,157,.82);
  stroke:#879D65;
  stroke-width:.85;
}

.cyber-book__ingredient:focus-visible,
.cyber-book__assemble:focus-visible,
.cyber-book__close:focus-visible,
.cyber-book__result-button:focus-visible{
  outline:3px solid rgba(180,125,177,.56);
  outline-offset:3px;
}

.cyber-book__assemble{
  width:min(420px,100%);
  min-height:51px;
  display:block;
  margin:clamp(18px,2.8vw,26px) auto 0;
  padding:11px 22px;
  border:2px solid #765B74;
  border-radius:999px;
  color:#FFF9F4;
  background:linear-gradient(145deg,#B07BA6,#775567);
  box-shadow:
    0 12px 20px -17px rgba(91,59,84,.95),
    inset 0 1px 0 rgba(255,255,255,.45);
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(14px,1.7vw,16px);
  cursor:pointer;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}

.cyber-book__assemble:hover{
  transform:translateY(-3px);
  background:linear-gradient(145deg,#C08AB5,#815C70);
  box-shadow:
    0 15px 23px -18px rgba(91,59,84,.98),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.cyber-book__doodle{
  position:absolute;
  z-index:1;
  pointer-events:none;
  user-select:none;
  opacity:.62;
}

.cyber-book__doodle svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cyber-book__doodle--berry{
  top:4.8%;
  left:11%;
  width:39px;
  height:36px;
  color:#AE718E;
  transform:rotate(-8deg);
}

.cyber-book__doodle--sprinkles{
  top:8%;
  right:5.6%;
  width:52px;
  height:42px;
  color:#C69A67;
  transform:rotate(5deg);
}

.cyber-book__doodle--dusk-a{
  top:37%;
  left:2.8%;
  width:74px;
  height:28px;
  color:#AD82A6;
  transform:rotate(-4deg);
}

.cyber-book__doodle--dusk-b{
  right:2.4%;
  bottom:13.5%;
  width:82px;
  height:29px;
  color:#C1869F;
  transform:rotate(3deg);
}

.cyber-book__modal{
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:24px;
  border-radius:20px;
  background:rgba(72,50,66,.24);
  opacity:0;
  backdrop-filter:blur(3px);
  transition:opacity .23s ease;
}

.cyber-book__modal.is-open{
  opacity:1;
}

.cyber-book__result{
  position:relative;
  width:min(440px,100%);
  padding:clamp(30px,5vw,44px) clamp(23px,5vw,42px) clamp(26px,4vw,36px);
  border:2px solid rgba(107,87,72,.32);
  border-radius:19px;
  text-align:center;
  background:
    radial-gradient(circle at 17% 14%,rgba(255,255,255,.8) 0 1px,transparent 1.3px),
    repeating-linear-gradient(0deg,transparent 0 28px,rgba(157,127,155,.06) 28px 29px),
    linear-gradient(145deg,#FFFDF7,#F9E6EF 70%,#F4D9E8);
  background-size:20px 20px,auto,auto;
  box-shadow:
    0 24px 38px -28px rgba(86,57,78,.95),
    inset 0 1px 0 #fff,
    inset 0 -13px 24px -22px rgba(107,87,72,.45);
  transform:translateY(12px) scale(.96) rotate(-.35deg);
  transition:transform .28s cubic-bezier(.2,.85,.32,1.15);
}

.cyber-book__modal.is-open .cyber-book__result{
  transform:translateY(0) scale(1) rotate(-.35deg);
}

.cyber-book__result::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1.5px dashed rgba(158,112,151,.28);
  border-radius:13px;
  pointer-events:none;
}

.cyber-book__close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1.6px solid rgba(107,87,72,.34);
  border-radius:50%;
  color:#765B69;
  background:rgba(255,253,247,.82);
  font-size:21px;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}

.cyber-book__close:hover{
  transform:rotate(8deg) scale(1.04);
  background:#FFF9F4;
}

.cyber-book__result-cake{
  position:relative;
  z-index:1;
  width:min(238px,72%);
  margin:-4px auto 14px;
  filter:drop-shadow(0 10px 8px rgba(91,63,84,.12));
}

.cyber-book__result-eyebrow{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  color:#A777A0;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.cyber-book__result h4{
  position:relative;
  z-index:1;
  margin:0;
  color:#634B5C;
  font-family:var(--font-disp);
  font-size:clamp(23px,3.8vw,34px);
  line-height:1.38;
}

.cyber-book__result-note{
  position:relative;
  z-index:1;
  margin:13px auto 0;
  color:#7D5F6D;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  font-size:clamp(14px,1.8vw,16px);
  line-height:1.85;
}

.cyber-book__result-button{
  position:relative;
  z-index:1;
  min-height:43px;
  margin-top:22px;
  padding:9px 22px;
  border:1.7px solid rgba(118,91,116,.52);
  border-radius:999px;
  color:#6C4C60;
  background:linear-gradient(145deg,#FFFDF8,#F2DDEB);
  box-shadow:0 9px 15px -15px rgba(101,79,67,.9),inset 0 1px 0 #fff;
  font-family:"Klee One","LXGW WenKai","ZCOOL KuaiLe","Kaiti SC","STKaiti",cursive;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}

.cyber-book__result-button:hover{
  transform:translateY(-2px);
  background:linear-gradient(145deg,#FFFDF8,#EBCDE2);
}

@media (max-width:860px){
  .cyber-book__doodle--dusk-a,
  .cyber-book__doodle--dusk-b{
    display:none;
  }
}

@media (max-width:720px){
  .cyber-book{
    grid-template-columns:46px minmax(0,1fr);
  }

  .cyber-book__binding::before{
    inset:14px 7px 14px auto;
    width:6px;
  }

  .cyber-book__ring{
    width:42px;
    height:13px;
    border-width:3px;
  }

  .cyber-book__paper{
    padding:30px 18px 38px 20px;
    border-radius:0 15px 15px 0;
  }

  .cyber-book__ingredient-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cyber-book__doodle--berry{
    left:20px;
  }

  .cyber-book__doodle--sprinkles{
    width:43px;
    height:35px;
  }
}

@media (max-width:430px){
  .cyber-book{
    grid-template-columns:37px minmax(0,1fr);
  }

  .cyber-book__paper{
    padding:27px 13px 34px 16px;
  }

  .cyber-book__title{
    font-size:24px;
  }

  .cyber-book__display{
    padding-right:8px;
    padding-left:8px;
  }

  .cyber-book__cake{
    min-height:190px;
  }

  .cyber-book__ingredients-head{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .cyber-book__ingredient{
    min-height:48px;
    padding:8px 9px;
    font-size:12.5px;
  }

  .cyber-book__ingredient-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .cyber-book__result-cake{
    width:min(200px,78%);
    margin-bottom:10px;
  }

  .cyber-book__modal{
    padding:17px 12px;
  }

  .cyber-book__doodle--sprinkles{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .cyber-book__ingredient,
  .cyber-book__assemble,
  .cyber-book__close,
  .cyber-book__result-button,
  .cyber-book__modal,
  .cyber-book__result{
    transition:none;
  }
}

/* =========================================================
   留言簿弹窗：note-bg1.png 纸张与白色椭圆内容区
   ========================================================= */
.guestbook-modal{
  width:min(920px,100%,calc(77.36vh - 91.3px));
}

.guestbook-paper{
  width:100%;
  aspect-ratio:1179/1524;
  max-height:none;
  overflow:hidden;
  padding:0;
  border-radius:28px;
  background-color:transparent;
  background-image:url("note-bg1.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.guestbook-paper .book-rings{
  display:none;
}

.guestbook-paper .modal-head{
  position:absolute;
  z-index:2;
  top:11%;
  left:17%;
  right:17%;
  margin:0;
}

.guestbook-paper .modal-kicker{
  margin-bottom:3px;
  font-size:clamp(7px,.9vw,10px);
  letter-spacing:.22em;
}

.guestbook-paper .modal-head h2{
  font-size:clamp(18px,2.8vw,32px);
  line-height:1.15;
}

.guestbook-paper .modal-head p:last-child{
  max-width:92%;
  margin:4px auto 0;
  font-size:clamp(9px,1.1vw,12px);
  line-height:1.45;
}

.guestbook-paper .guestbook-grid{
  position:absolute;
  z-index:2;
  top:23%;
  right:17%;
  bottom:39%;
  left:17%;
  display:block;
}

.guestbook-paper .guestbook-form{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.guestbook-paper .guestbook-board{
  display:none;
}

.guestbook-paper .field+.field{
  margin-top:clamp(7px,1.4vh,13px);
}

.guestbook-paper .field>span{
  margin-bottom:3px;
  font-size:clamp(9px,1.05vw,12px);
  letter-spacing:.04em;
}

.guestbook-paper .field input,
.guestbook-paper .field textarea{
  border:1.5px solid rgba(126,102,87,.26);
  border-radius:12px;
  background:rgba(255,255,255,.42);
  color:#4f443d;
  font-size:clamp(10.5px,1.08vw,13px);
  line-height:1.45;
  padding:6px 10px;
  box-shadow:
    inset 0 1px 2px rgba(91,71,56,.04),
    0 2px 8px rgba(91,71,56,.035);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

.guestbook-paper .field textarea{
  min-height:clamp(48px,7.2vh,82px);
  max-height:100px;
  resize:none;
}

.guestbook-paper .field input::placeholder,
.guestbook-paper .field textarea::placeholder{
  color:rgba(111,91,78,.56);
}

.guestbook-paper .field input:focus,
.guestbook-paper .field textarea:focus{
  border-color:rgba(173,118,105,.52);
  background:rgba(255,255,255,.68);
  box-shadow:
    0 0 0 3px rgba(227,181,171,.15),
    inset 0 1px 2px rgba(91,71,56,.04);
}

.guestbook-paper .guestbook-form-foot{
  justify-content:center;
  margin-top:clamp(8px,1.4vh,13px);
}

.guestbook-paper .guestbook-form-foot small{
  display:none;
}

.guestbook-paper .guestbook-submit{
  padding:8px 15px;
  font-size:clamp(10.5px,1.05vw,12.5px);
}

@media (max-width:520px){
  .guestbook-paper .modal-head{
    top:10.5%;
    left:13%;
    right:13%;
  }

  .guestbook-paper .modal-kicker{
    display:none;
  }

  .guestbook-paper .modal-head h2{
    font-size:clamp(15px,5vw,20px);
  }

  .guestbook-paper .modal-head p:last-child{
    display:none;
  }

  .guestbook-paper .guestbook-grid{
    top:22.5%;
    right:14%;
    bottom:38%;
    left:14%;
  }

  .guestbook-paper .field>span{
    margin-bottom:2px;
    font-size:9px;
  }

  .guestbook-paper .field input,
  .guestbook-paper .field textarea{
    border-radius:9px;
    font-size:10px;
    padding:4px 7px;
  }

  .guestbook-paper .field textarea{
    min-height:44px;
    max-height:58px;
  }

  .guestbook-paper .field+.field{
    margin-top:5px;
  }

  .guestbook-paper .guestbook-form-foot{
    margin-top:5px;
  }

  .guestbook-paper .guestbook-submit{
    width:100%;
    justify-content:center;
    padding:6px 9px;
    font-size:10px;
  }
}

/* =========================================================
   53. 切片蛋糕精致化收尾
   Visual-only refinements for the existing selectable SVG:
   cream piping, layer arcs, sprinkles, character toppers,
   and a small hover lift. Interaction and data stay unchanged.
   ========================================================= */
.cake-stage svg{
  filter:saturate(1.14) contrast(1.025) drop-shadow(0 18px 22px rgba(99,69,48,.16));
}

.cake-slice__body{
  transform-box:fill-box;
  transform-origin:center;
}

.cake-slice__topper-art,
.cake-slice__sparkle{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .36s cubic-bezier(.34,1.45,.5,1), opacity .28s;
}

.cake-slice__sparkle{
  opacity:.78;
}

.cake-slice:hover .cake-slice__topper-art,
.cake-slice:focus-visible .cake-slice__topper-art,
.cake-slice.is-hot .cake-slice__topper-art{
  transform:translateY(-2px) rotate(-1.8deg) scale(1.045);
}

.cake-slice:hover .cake-slice__sparkle,
.cake-slice:focus-visible .cake-slice__sparkle,
.cake-slice.is-hot .cake-slice__sparkle{
  opacity:1;
  transform:scale(1.08);
}

.cake-slice.is-picked .cake-slice__topper-art{
  animation:cake-topper-bounce .58s cubic-bezier(.34,1.5,.5,1);
}

@keyframes cake-topper-bounce{
  0%{transform:translateY(0) rotate(0) scale(1)}
  46%{transform:translateY(-4px) rotate(-3deg) scale(1.08)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .cake-slice__topper-art,
  .cake-slice__sparkle{
    transition:none;
  }

  .cake-slice.is-picked .cake-slice__topper-art{
    animation:none;
  }
}

/* =========================================================
   54. 留言簿排版与按钮收尾
   ========================================================= */
@media (min-width:521px){
  .guestbook-paper .guestbook-grid{
    top:28%;
    bottom:38%;
  }
}

.guestbook-paper .guestbook-submit{
  color:#6B5748;
  border-color:rgba(190,112,130,.48);
  background:linear-gradient(145deg,#FBE2E8,#F5C3D0);
  text-shadow:none;
  box-shadow:
    0 12px 22px -16px rgba(176,95,116,.58),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.guestbook-paper .guestbook-submit:hover{
  background:linear-gradient(145deg,#F9D6DE,#EFA9BC);
}

.guestbook-paper .guestbook-submit:focus-visible{
  outline:3px solid rgba(238,166,184,.38);
  outline-offset:2px;
}

/* =========================================================
   55. Larger text in the five tea photo albums
   ========================================================= */
.photo-wall--cork .photo-wall__eyebrow,
.photo-wall--envelope .photo-wall__eyebrow,
.photo-wall--spiral .photo-wall__eyebrow,
.photo-wall--birthday-spiral .photo-wall__eyebrow{
  font-size:10.5px;
}

.photo-wall--cork .photo-wall__story-title,
.photo-wall--envelope .photo-wall__story-title,
.photo-wall--spiral .photo-wall__story-title,
.photo-wall--birthday-spiral .photo-wall__story-title{
  font-size:clamp(18px,2vw,23px);
}

.photo-wall--cork .photo-wall__story p:not(.photo-wall__story-title),
.photo-wall--envelope .photo-wall__story p:not(.photo-wall__story-title),
.photo-wall--spiral .photo-wall__story p:not(.photo-wall__story-title),
.photo-wall--birthday-spiral .photo-wall__story p:not(.photo-wall__story-title){
  font-size:clamp(14px,1.55vw,17px);
  line-height:1.92;
}

.photo-wall--cork .photo-caption,
.photo-wall--cork .photo-card--cork-empty .photo-caption,
.photo-wall--envelope .photo-caption,
.photo-wall--envelope .photo-card--envelope-reserve .photo-caption,
.photo-wall--spiral .photo-caption{
  font-size:clamp(12px,1.15vw,14px);
  line-height:1.45;
}

.photo-wall--birthday-spiral .birthday-photo__caption{
  font-size:clamp(11px,1vw,13px);
  line-height:1.38;
}

.photo-wall--cork .photo-wall__meta,
.photo-wall--envelope .photo-wall__meta,
.photo-wall--spiral .photo-wall__meta,
.photo-wall--birthday-spiral .photo-wall__meta,
.photo-wall--cork .photo-wall__hint,
.photo-wall--envelope .photo-wall__hint,
.photo-wall--spiral .photo-wall__hint,
.photo-wall--birthday-spiral .photo-wall__hint{
  font-size:clamp(12px,1.05vw,13.5px);
}

.photo-wall--birthday-spiral .birthday-note{
  font-size:clamp(11px,1vw,14px);
}

.photo-lightbox__caption{
  font-size:clamp(17px,2.4vw,22px);
}

/* =========================================================
   56. Fortune-page background only
   Asset source: outputs/nyanko_party.png
   ========================================================= */
#modal-fortune .fortune-paper,
#modal-fortune .lingbao-fortune-paper{
  background-color:#FFFCF4;
  background-image:
    linear-gradient(rgba(255,252,244,.6),rgba(255,252,244,.6)),
    url("nyanko_party.png");
  background-position:center,center;
  background-size:100% 100%,contain;
  background-repeat:no-repeat,no-repeat;
  background-attachment:scroll,scroll;
}