@charset "utf-8";
/* ==========================================================
   江宁 · 此处即江南  —— 视觉系统
   1rem = 设计稿 10px（375 宽基准，JS 按屏幕动态换算）
   ========================================================== */
:root{
  --paper:#F3EEE3; --paper-2:#EAE2D2; --paper-3:#F8F5EE;
  --ink:#2A2A28; --ink-2:rgba(42,42,40,.7); --ink-3:rgba(42,42,40,.42);
  --zhu:#B33A2B; --zhu-2:#97301F; --gold:#C9A45C;
  --spring:#7FA88B; --summer:#5FA8A6; --autumn:#C9923E; --winter:#2E3B55; --lamp:#F0A04B;
  --accent:var(--zhu);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --brush:"Ma Shan Zheng","STXingkai","Xingkai SC","STKaiti","KaiTi",serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --top:calc(var(--safe-t) + 6.4rem);
  --bottom:calc(max(var(--safe-b),1.2rem) + 1.4rem);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#1c1a17}
body{display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body.framed{background:radial-gradient(ellipse at 50% 35%,#3b352c 0%,#17140f 70%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}

#app{position:relative;width:var(--w,100vw);height:var(--h,100vh);overflow:hidden;background:var(--paper);touch-action:none;isolation:isolate}
body.framed #app{border-radius:4.6rem;box-shadow:0 0 0 1rem #0d0c0a,0 0 0 1.12rem #4a4339,0 4rem 10rem rgba(0,0,0,.65)}
/* 宣纸纹理 */
#app::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:95;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#desk-tip{display:none;position:fixed;left:0;right:0;bottom:12px;text-align:center;color:rgba(243,238,227,.4);font-size:12px;letter-spacing:.3em}
body.framed #desk-tip{display:block}
#rotate{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  #rotate{display:flex;position:fixed;inset:0;z-index:999;background:var(--paper);align-items:center;justify-content:center;font-size:16px;letter-spacing:.3em;color:var(--ink)}
}

/* ---------- 通用排版 ---------- */
.brush{font-family:var(--brush);font-weight:400}
.vtitle{writing-mode:vertical-rl;font-family:var(--brush);font-weight:400;font-size:min(5.4rem,calc(var(--h) * .064));line-height:1;letter-spacing:.45rem;color:var(--ink)}
.vpoem{writing-mode:vertical-rl;font-size:1.45rem;line-height:1.5;letter-spacing:.7rem;color:var(--ink-2)}

/* 印章 */
.seal{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--zhu);color:#F7EFE3;font-family:var(--brush);font-style:normal;
  line-height:1.05;border-radius:.35rem;position:relative;filter:url(#rough);flex:none}
.seal::after{content:"";position:absolute;inset:.22rem;border:.1rem solid rgba(247,239,227,.85);border-radius:.15rem;pointer-events:none}
.seal.sm{width:3.4rem;height:3.4rem;font-size:1.25rem}
.seal.md{width:4.2rem;height:4.2rem;font-size:2.7rem}
.seal.lg{width:7.2rem;height:7.2rem;font-size:4.6rem}
.seal.round{border-radius:50%}.seal.round::after{border-radius:50%}

/* 按钮 */
.btn-zhu{display:inline-flex;align-items:center;justify-content:center;min-height:4.6rem;padding:0 2.8rem;background:var(--zhu);color:#F7EFE3;
  font-size:1.5rem;letter-spacing:.3em;position:relative;box-shadow:0 .6rem 1.6rem rgba(179,58,43,.28)}
.btn-zhu::before{content:"";position:absolute;inset:.3rem;border:1px solid rgba(247,239,227,.55);pointer-events:none}
.btn-zhu.big{min-height:5.2rem;font-size:1.6rem;padding:0 3.2rem}
.btn-zhu:active{transform:scale(.97)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:4.4rem;padding:0 2rem;font-size:1.35rem;letter-spacing:.2em;color:var(--ink-2);border-bottom:1px solid var(--ink-3)}

/* ---------- 动效 ---------- */
@keyframes inkIn{from{opacity:0;filter:blur(.8rem);transform:translateY(1.2rem)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes stampIn{0%{opacity:0;transform:scale(2.4) rotate(-14deg)}55%{opacity:1;transform:scale(.9) rotate(-5deg)}100%{opacity:1;transform:scale(1) rotate(-5deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1rem)}}
@keyframes breathe{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.25);opacity:1}}
@keyframes drift{0%,100%{transform:translateX(-14px)}50%{transform:translateX(18px)}}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
@keyframes nudge{0%,100%{transform:translateY(0) rotate(45deg);opacity:.4}50%{transform:translateY(-.6rem) rotate(45deg);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes flash{0%{opacity:0}22%{opacity:.95}100%{opacity:0}}
@keyframes fly{0%{transform:translate(-14px,0)}100%{transform:translate(420px,-60px)}}
@keyframes steam{0%{opacity:0;transform:translateY(10px)}40%{opacity:.7}100%{opacity:0;transform:translateY(-26px)}}
@keyframes ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,146,62,.6)}100%{box-shadow:0 0 0 1.6rem rgba(201,146,62,0)}}
.drift{animation:drift 9s ease-in-out infinite}
.shimmer{animation:shimmer 3.2s ease-in-out infinite}
.birds{animation:fly 26s linear infinite}
.steam path{animation:steam 3.6s ease-in-out infinite;transform-box:fill-box}
.steam path:nth-child(2){animation-delay:-1.2s}.steam path:nth-child(3){animation-delay:-2.4s}
.ripples ellipse{transform-box:fill-box;transform-origin:center;animation:ripple 4s ease-out infinite}
.ripples ellipse:nth-child(2){animation-delay:-1.3s}.ripples ellipse:nth-child(3){animation-delay:-2.6s}

/* ---------- 页面与转场 ---------- */
.page{position:absolute;inset:0;overflow:hidden;visibility:hidden;z-index:1;background:var(--paper)}
.page.active{visibility:visible;z-index:2}
.page.leaving{visibility:visible;z-index:2;transition:filter 1s var(--ease)}
.page.entering{visibility:visible;z-index:3}
.bg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}

/* 季节标题：入场动画 */
.season-head{position:absolute;top:var(--top);display:flex;align-items:flex-start;gap:1.1rem;z-index:5;pointer-events:none}
.season-head.right{right:2.6rem;flex-direction:row-reverse}
.season-head.left{left:2.6rem}
.season-head .col{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.season-head .vpoem{margin-top:5.8rem}
.season-head .seal,.season-head .vtitle,.season-head .vpoem{opacity:0}
.page.in .season-head .seal{animation:stampIn .8s .35s var(--ease) both}
.page.in .season-head .vtitle{animation:inkIn 1.3s .55s var(--ease) both}
.page.in .season-head .vpoem{animation:inkIn 1.3s 1s var(--ease) both}

/* ---------- 加载页 ---------- */
#loader{position:absolute;inset:0;z-index:200;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;transition:opacity .9s var(--ease)}
#loader.done{opacity:0;pointer-events:none}
.ld-seal{width:9rem;height:9rem;position:relative;overflow:hidden;border:.2rem solid var(--zhu);border-radius:.6rem;filter:url(#rough)}
.ld-fill{position:absolute;inset:0;background:var(--zhu);clip-path:inset(100% 0 0 0)}
.ld-fill .ld-ch{color:#F7EFE3}
.ld-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--brush);font-size:3.4rem;line-height:1.05;color:var(--zhu);mix-blend-mode:normal}
.ld-txt{font-size:1.25rem;letter-spacing:.5em;color:var(--ink-2)}
.ld-txt b{font-weight:400;color:var(--zhu);letter-spacing:.1em}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:60;transition:opacity .8s}
#app.closed #hud{opacity:0}
#seals{position:absolute;top:calc(var(--safe-t) + 1.6rem);left:1.8rem;display:flex;gap:.5rem}
#seals i{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-family:var(--brush);font-style:normal;font-size:1.45rem;color:var(--ink-3);
  border:1px dashed var(--ink-3);border-radius:.3rem;transition:all .5s var(--ease)}
#seals i.got{background:var(--zhu);border:0;color:#F7EFE3;filter:url(#rough);animation:stampIn .6s var(--ease) both;transform:rotate(-5deg)}
#music{position:absolute;top:calc(var(--safe-t) + 1.4rem);right:1.6rem;width:3.4rem;height:3.4rem;pointer-events:auto;display:flex;align-items:center;justify-content:center}
#music svg{width:2.6rem;height:2.6rem;fill:none;stroke:var(--ink-2);stroke-width:1.2}
#music.on svg{animation:spin 6s linear infinite}
#music .bars{position:absolute;bottom:-.6rem;display:flex;gap:.2rem;opacity:0}
#music.on .bars{opacity:1}
#music .bars i{width:.2rem;height:.6rem;background:var(--zhu);animation:breathe 1s ease-in-out infinite}
#music .bars i:nth-child(2){animation-delay:-.3s}#music .bars i:nth-child(3){animation-delay:-.6s}
#music:not(.on)::after{content:"";position:absolute;width:2.8rem;height:1px;background:var(--ink-2);transform:rotate(-45deg)}
#dots{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.7rem;pointer-events:auto}
#dots button{width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center}
#dots button::before{content:"";width:.3rem;height:.3rem;border-radius:50%;background:var(--ink-3);transition:all .4s var(--ease)}
#dots button.on::before{height:1.4rem;border-radius:.2rem;background:var(--zhu)}
#hint{position:absolute;left:0;right:0;bottom:var(--bottom);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--ink-2);transition:opacity .5s}
#hint em{font-style:normal;font-size:1.2rem;letter-spacing:.35em;padding-left:.35em}
#hint .arrow{width:1rem;height:1rem;border-left:1px solid currentColor;border-top:1px solid currentColor;animation:nudge 1.8s ease-in-out infinite}
#hint.none{opacity:0}
#app.night #seals i:not(.got){color:rgba(243,238,227,.5);border-color:rgba(243,238,227,.4)}
#app.night #music svg{stroke:rgba(243,238,227,.8)}
#app.night #music:not(.on)::after{background:rgba(243,238,227,.8)}
#app.night #dots button::before{background:rgba(243,238,227,.4)}
#app.night #dots button.on::before{background:var(--lamp)}
#app.night #hint{color:rgba(243,238,227,.75)}

/* ---------- P1 开篇 ---------- */
.p1 .scene{position:absolute;inset:0;transform:scale(1.14);transform-origin:50% 60%}
.p1.opened .scene{transform:scale(1);transition:transform 3.2s var(--ease)}
.p1-title{position:absolute;top:calc(var(--top) + 1rem);right:3rem;display:flex;flex-direction:row-reverse;gap:1.4rem;opacity:0}
.p1.opened .p1-title{animation:inkIn 1.8s 1.1s var(--ease) both}
.vtitle.big{font-size:min(6.6rem,calc(var(--h) * .08));letter-spacing:.7rem}
.p1-side{display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding-top:.6rem}
.p1-side .seal{transform:rotate(-4deg)}
.p1-side .vpoem{font-size:1.4rem}

.door{position:absolute;inset:0;perspective:90rem;z-index:8;cursor:pointer}
.leaf{position:absolute;top:0;bottom:0;width:50.2%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg,rgba(255,240,220,.025) 0 2px,rgba(0,0,0,.05) 2px 6px),
    linear-gradient(180deg,#3c2b22,#251a14);
  box-shadow:inset 0 0 0 .7rem #1c130e,inset 0 0 0 .82rem rgba(201,164,92,.28);
  transition:transform 2s var(--ease),filter 2s var(--ease)}
.leaf::before{content:"";position:absolute;left:1.6rem;right:1.6rem;top:14rem;bottom:3rem;border:1px solid rgba(201,164,92,.18);box-shadow:inset 0 0 3rem rgba(0,0,0,.35)}
.leaf.l{left:0;transform-origin:0 50%}
.leaf.r{right:0;transform-origin:100% 50%}
.door.open{pointer-events:none}
.door.open .leaf.l{transform:rotateY(-104deg);filter:brightness(.4)}
.door.open .leaf.r{transform:rotateY(104deg);filter:brightness(.4)}
.couplet{position:absolute;top:calc(var(--h) * .22);left:50%;transform:translateX(-50%);writing-mode:vertical-rl;padding:1.6rem .9rem;
  background:linear-gradient(180deg,#B5392B,#9A2C20);color:#2a140e;font-family:var(--brush);font-size:min(3rem,calc(var(--h) * .036));letter-spacing:.8rem;
  box-shadow:0 .4rem 1.2rem rgba(0,0,0,.4);filter:url(#rough)}
.couplet::after{content:"";position:absolute;inset:.35rem;border:1px solid rgba(232,190,110,.45)}
.leaf .ring{position:absolute;top:58%;width:4.2rem;height:4.2rem;border-radius:50%;border:.42rem solid var(--gold);box-shadow:0 .4rem .6rem rgba(0,0,0,.55),inset 0 0 .3rem rgba(0,0,0,.4)}
.leaf .ring::before{content:"";position:absolute;left:50%;top:-1.9rem;width:2.4rem;height:2.4rem;margin-left:-1.2rem;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#E8CF8E,#A88440 70%);box-shadow:0 .2rem .4rem rgba(0,0,0,.5)}
.leaf.l .ring{right:1.4rem}.leaf.r .ring{left:1.4rem}
.lintel{position:absolute;left:0;right:0;top:0;height:calc(var(--safe-t) + 11rem);display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.6rem;
  background:linear-gradient(180deg,#1b1410 0 30%,#2c201a 30% 100%);box-shadow:0 .6rem 1.6rem rgba(0,0,0,.5);transition:transform 1.4s var(--ease),opacity 1.4s}
.lintel::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:repeating-linear-gradient(90deg,#14100d 0 1.4rem,#2a221d 1.4rem 1.6rem);opacity:.9}
.plaque{position:relative;padding:.6rem 2.4rem;background:linear-gradient(180deg,#2a1d16,#1a120d);border:.25rem solid var(--gold);color:var(--gold);font-family:var(--brush);font-size:2.6rem;letter-spacing:.4em}
.door.open .lintel{transform:translateY(-110%);opacity:0}
.knock{position:absolute;left:0;right:0;bottom:calc(var(--h) * .16);display:flex;flex-direction:column;align-items:center;gap:1.2rem;color:rgba(243,232,210,.85);font-size:1.3rem;letter-spacing:.3em;transition:opacity .6s}
.knock i{width:1.4rem;height:1.4rem;border-radius:50%;background:#F4D9A0;box-shadow:0 0 1.6rem .4rem rgba(244,217,160,.7);animation:breathe 2.2s ease-in-out infinite}
.door.open .knock{opacity:0}
.flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,#FFFDF6 0%,rgba(255,250,236,.75) 40%,rgba(255,250,236,0) 75%)}
.p1.opened .flash{animation:flash 1.6s .35s ease-out both}

/* ---------- P2 春 ---------- */
.p2{--accent:var(--spring)}
.p2 .branch{position:absolute;left:-1rem;top:calc(var(--safe-t) + 3rem);width:20rem;height:20rem;z-index:3;transform-origin:0 0;pointer-events:none}
.petal{position:absolute;top:-2rem;width:1rem;height:.7rem;border-radius:60% 40% 60% 40%;background:#F2B6BF;opacity:.85}
.flips{position:absolute;left:0;right:0;top:calc(var(--h) * .5);display:flex;justify-content:center;gap:1.6rem;z-index:5;opacity:0}
.page.in .flips{animation:fadeUp 1.1s 1.1s var(--ease) both}
.flip{width:13.8rem;height:min(18.4rem,calc(var(--h) * .27));perspective:80rem;animation:float 6s ease-in-out infinite;cursor:pointer}
.flip:nth-child(1){transform:rotate(-3deg)}
.flip:nth-child(2){margin-top:3.2rem;animation-delay:-3s}
.flip .inner{position:relative;width:100%;height:100%;transition:transform 1s var(--ease);transform-style:preserve-3d}
.flip.on .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:.8rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:rgba(250,248,241,.94);box-shadow:0 1.2rem 3rem rgba(64,90,70,.18),0 0 0 1px rgba(127,168,139,.35) inset}
.face.front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.face.front::after{content:"";position:absolute;inset:.6rem;border:1px solid rgba(127,168,139,.35);border-radius:.4rem;pointer-events:none}
.face .ico{width:3.4rem;height:3.4rem;fill:none;stroke:var(--spring);stroke-width:1.6;stroke-linejoin:round}
.vname{font-family:var(--brush);font-weight:400;font-size:2.2rem;white-space:nowrap;writing-mode:vertical-rl;letter-spacing:.3rem;line-height:1}
.tap{font-size:1rem;letter-spacing:.3em;color:var(--ink-3)}
.face.back{transform:rotateY(180deg);padding:.8rem;display:flex;flex-direction:column}
.face.back h4{font-size:1.3rem;font-weight:600;margin:.8rem .4rem .4rem;color:var(--ink)}
.face.back p{font-size:1.12rem;line-height:1.7;color:var(--ink-2);margin:0 .4rem;text-align:justify}
.photo{height:40%;border-radius:.4rem;position:relative;flex:none}
.photo.spring{background:linear-gradient(160deg,#cfe0c9,#8db295 70%,#6f9a7b)}
.photo.spring2{background:linear-gradient(170deg,#e9efe3,#b3cbae 55%,#7fa88b)}
.has-photo{background-size:cover!important;background-position:center!important}
.has-photo>svg{display:none}
.has-photo .ph-tag{left:.4rem;right:auto;top:auto;bottom:.4rem;font-size:.75rem;padding:.1rem .4rem;letter-spacing:0;background:rgba(0,0,0,.4);color:rgba(255,255,255,.85);max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-photo{display:none;height:15rem;margin:-.8rem -.8rem 1.4rem;border-radius:.8rem;position:relative}
.sheet-photo.has-photo{display:block}
.credits .pic-credit{font-size:.85rem;letter-spacing:.04em;color:rgba(42,42,40,.4);line-height:1.5}
.ph-tag{position:absolute;left:.6rem;top:.6rem;font-size:.95rem;letter-spacing:.15em;padding:.2rem .6rem;border-radius:.2rem;background:rgba(255,255,255,.7);color:var(--ink-2);z-index:2}

/* ---------- P3 夏 ---------- */
.p3{--accent:var(--summer)}
.carousel{position:absolute;left:0;right:0;top:calc(var(--h) * .37);height:calc(var(--h) * .43);perspective:110rem;z-index:5;opacity:0}
.page.in .carousel{animation:fadeUp 1.1s 1s var(--ease) both}
.card{position:absolute;left:50%;top:0;width:23rem;margin-left:-11.5rem;height:100%;border-radius:1.2rem;overflow:hidden;background:var(--paper-3);
  box-shadow:0 1.6rem 4rem rgba(40,90,88,.22);display:flex;flex-direction:column;transition:transform .7s var(--ease),opacity .7s var(--ease);will-change:transform}
.card .pic{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.card .pic svg{position:absolute;inset:0;width:100%;height:100%}
.pic-a{background:linear-gradient(180deg,#d6ece8,#a9d3cd)}
.pic-b{background:linear-gradient(180deg,#e2f1ee,#b4dbd5)}
.pic-c{background:linear-gradient(180deg,#e9e5dc,#c9d8d0)}
.card .txt{padding:1.2rem 1.6rem 1.4rem;position:relative}
.card h3{font-family:var(--brush);font-weight:400;font-size:2.4rem;line-height:1.1}
.card p{font-size:1.2rem;line-height:1.7;color:var(--ink-2);margin:.4rem 0 1rem}
.want{min-height:3.6rem;padding:0 1.6rem;border:1px solid var(--summer);color:var(--summer);border-radius:.3rem;font-size:1.2rem;letter-spacing:.2em;position:relative}
.card.wanted .want{background:var(--summer);color:#fff}
.card .mark{position:absolute;right:1.4rem;top:-2.6rem;width:5.4rem;height:5.4rem;font-size:1.5rem;line-height:1.1;opacity:0;transform:scale(2) rotate(-12deg);transition:all .5s var(--ease)}
.card.wanted .mark{opacity:.95;transform:scale(1) rotate(-12deg)}
.cdots{position:absolute;left:0;right:0;top:calc(var(--h) * .82);display:flex;justify-content:center;gap:.8rem;z-index:5}
.cdots i{width:.6rem;height:.6rem;border-radius:50%;background:rgba(95,168,166,.35);transition:all .4s var(--ease)}
.cdots i.on{width:2rem;border-radius:.3rem;background:var(--summer)}

/* ---------- P4 秋 ---------- */
.p4{--accent:var(--autumn)}
.p4 .vtitle{font-size:min(4.8rem,calc(var(--h) * .05))}
.p4 .season-head .vpoem{margin-top:4.6rem}
.p4 .leaves{z-index:6}
.p4 .leaf-el{position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;color:#E2B04A;pointer-events:none}
.p4 .leaf-el svg{width:100%;height:100%;display:block}
.p4 .leaf-el.know{width:4.4rem;height:4.4rem;color:#F2C35A;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 0 .8rem rgba(255,206,110,.95))}
.p4 .leaf-el.know::after{content:"";position:absolute;inset:-.4rem;border-radius:50%;animation:pulse 1.6s ease-out infinite}
/* P4 短视频：挂轴样式 */
@keyframes hang{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes playPulse{0%{box-shadow:0 0 0 0 rgba(179,58,43,.45)}100%{box-shadow:0 0 0 1rem rgba(179,58,43,0)}}
.video-card{position:absolute;left:2.8rem;top:calc(var(--top) + 2.4rem);width:8rem;padding:0 .55rem;display:flex;flex-direction:column;gap:.45rem;z-index:5;
  background:#F8F3E8;box-shadow:0 1rem 2rem rgba(120,90,40,.2);transform-origin:50% -2.2rem;animation:hang 6s ease-in-out infinite;opacity:0}
.page.in .video-card{animation:fadeIn 1.1s 1.3s var(--ease) both,hang 6s ease-in-out infinite}
.vc-cord{position:absolute;left:50%;top:-2.2rem;width:4rem;height:2.2rem;margin-left:-2rem}
.vc-rod{display:block;height:.55rem;margin:0 -1rem;border-radius:.3rem;background:linear-gradient(180deg,#6a4a38,#3b2a20);box-shadow:0 .15rem .3rem rgba(0,0,0,.25)}
.vc-mat{position:relative;display:block;height:12rem;overflow:hidden;background:#e9dcc0;box-shadow:inset 0 0 0 1px rgba(42,42,40,.15)}
.vc-cover{position:absolute;inset:0;background-size:cover;background-position:center;filter:sepia(.2) saturate(.9)}
.vc-play{position:absolute;right:.5rem;bottom:.5rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--zhu);animation:playPulse 2s ease-out infinite}
.vc-play::after{content:"";position:absolute;left:1rem;top:.75rem;border-left:.85rem solid #F7EFE3;border-top:.55rem solid transparent;border-bottom:.55rem solid transparent}
.vc-label{display:block;text-align:center;font-size:1rem;letter-spacing:.12em;color:var(--ink-2);white-space:nowrap;padding:.05rem 0 .1rem}
.video-box{position:absolute;left:50%;top:50%;width:min(28rem,calc(var(--h) * .5 * 9 / 16));transform:translate(-50%,-50%) scale(.96);opacity:0;transition:all .45s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:1rem}
.modal.show .video-box{opacity:1;transform:translate(-50%,-50%)}
#videoModal.landscape .video-box{width:calc(var(--w) - 2.4rem)}
.video-box video{width:100%;aspect-ratio:9/16;background:#000;border-radius:.8rem;object-fit:contain;box-shadow:0 2rem 5rem rgba(0,0,0,.5)}
.video-box .vtip{color:#F3EEE3;font-size:1.2rem;line-height:1.7;text-align:center;letter-spacing:.08em;min-height:1em}
.video-box .btn-line{color:#F3EEE3;border-color:rgba(243,238,227,.5)}
.shake-zone{position:absolute;left:0;right:0;top:calc(var(--h) * .5);display:flex;flex-direction:column;align-items:center;gap:1.2rem;z-index:5;opacity:0}
.page.in .shake-zone{animation:fadeUp 1.1s 1.1s var(--ease) both}
.shake{width:10rem;height:10rem;border-radius:50%;background:rgba(250,246,236,.86);box-shadow:0 1rem 3rem rgba(150,100,30,.2),inset 0 0 0 .5rem rgba(201,146,62,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--autumn)}
.shake svg{width:3.8rem;height:3.8rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;animation:wiggle 2.4s ease-in-out infinite;transform-origin:50% 60%}
.shake b{font-family:var(--brush);font-weight:400;font-size:2rem;color:var(--ink)}
.shake-sub{font-size:1.15rem;letter-spacing:.15em;color:var(--ink-2);background:rgba(246,238,223,.7);padding:.4rem 1rem;border-radius:2rem}
.shake-sub em{font-style:normal;color:var(--autumn);margin-left:.4rem}

/* ---------- P5 冬 ---------- */
.p5{--accent:var(--lamp);background:#121828;color:var(--paper)}
.p5 .warm{opacity:0;transition:opacity 2.4s var(--ease)}
.p5.allLit .warm{opacity:1}
.p5 .win rect{fill:#2B3247;transition:fill 1.6s var(--ease)}
.p5.allLit .win rect{fill:#F0A04B}
.p5 .reflect{transition:opacity 2s 1s}
.p5.allLit .reflect{opacity:.6}
.p5 .stars circle,.p5 .cliff-lights circle{animation:shimmer 3s ease-in-out infinite}
.p5 .cliff-lights{opacity:.5;transition:opacity 2s}.p5.allLit .cliff-lights{opacity:1}
.p5 .stars circle:nth-child(2n){animation-delay:-1.5s}
.p5 .season-head.low{top:calc(var(--h) * .36)}
.p5 .vtitle{color:#F3EEE3}
.p5 .vpoem{color:rgba(243,238,227,.7)}
.sparks{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.lanterns{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 4.6rem);height:calc(var(--h) * .3);z-index:6}
.lanterns .rope{position:absolute;left:0;top:0;width:100%;height:12rem}
.lantern{position:absolute;width:4.8rem;transform:translateX(-50%);transform-origin:50% 0;animation:sway 3.6s ease-in-out infinite;cursor:pointer;padding-top:var(--len)}
.lantern::before{content:"";position:absolute;left:50%;top:0;width:1px;height:var(--len);background:#6B5A4A}
.lantern svg{width:100%;display:block;overflow:visible}
.lantern .body{fill:#4A3F45;transition:fill .6s}
.lantern .rib{stroke:rgba(0,0,0,.25);fill:none}
.lantern .cap{fill:#2E2524}
.lantern .tassel{stroke:#6B4F3C;transition:stroke .6s}
.lantern .halo{fill:#F0A04B;opacity:0;transition:opacity .8s}
.lantern.lit .body{fill:#D8432D}
.lantern.lit .tassel{stroke:#E7B04E}
.lantern.lit .halo{opacity:.55}
.lantern.lit .cap{fill:#B88A3A}
.kml{position:absolute;bottom:-6rem;width:2.6rem;height:3.4rem;border-radius:.6rem .6rem 1rem 1rem;background:radial-gradient(ellipse at 50% 80%,#FFE2A0,#F0A04B 55%,#C5582A);
  box-shadow:0 0 2.4rem .6rem rgba(240,160,75,.55);opacity:.95}
.quote{position:absolute;right:2.8rem;top:calc(var(--h) * .36);display:flex;flex-direction:row-reverse;gap:1.2rem;z-index:6;pointer-events:none}
.quote span{writing-mode:vertical-rl;font-family:var(--brush);font-size:min(3.8rem,calc(var(--h) * .046));letter-spacing:.6rem;color:#F7D58A;opacity:0;text-shadow:0 0 1.6rem rgba(240,160,75,.75)}
.quote span:nth-child(2){margin-top:4rem}
.p5.allLit .quote span{animation:inkIn 1.6s 1.2s var(--ease) both}
.p5.allLit .quote span:nth-child(2){animation-delay:1.8s}
.lit-progress{position:absolute;left:0;right:0;bottom:calc(var(--bottom) + 6.4rem);display:flex;flex-direction:column;align-items:center;gap:.8rem;z-index:6;color:rgba(243,238,227,.85);font-size:1.25rem;letter-spacing:.25em;transition:opacity .8s}
.lit-progress b{font-weight:400;color:var(--lamp);font-size:1.6rem}
.lit-progress .bar{width:16rem;height:.3rem;background:rgba(243,238,227,.18);border-radius:.2rem;overflow:hidden}
.lit-progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#F0A04B,#F7D58A);transition:width .6s var(--ease)}
.p5.allLit .lit-progress{opacity:0}

/* ---------- P6 地图 ---------- */
.map-head{position:absolute;left:0;right:0;top:var(--top);display:flex;flex-direction:column;align-items:center;gap:.6rem;z-index:5;opacity:0}
.page.in .map-head{animation:inkIn 1.2s .4s var(--ease) both}
.map-head .seal{transform:rotate(-5deg);margin-bottom:.4rem}
.map-head h2{font-size:3.2rem;letter-spacing:.3rem}
.map-head p{font-size:1.2rem;letter-spacing:.35em;color:var(--ink-2)}
.map-wrap{position:absolute;left:0;right:0;top:calc(var(--top) + 13.6rem);bottom:calc(var(--bottom) + 13rem);overflow:hidden;z-index:4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);opacity:0}
.page.in .map-wrap{animation:fadeUp 1.2s .7s var(--ease) both}
.map{position:relative;height:100%;width:calc(var(--mapw,750px));transition:transform .9s var(--ease);cursor:grab;touch-action:none}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .route{animation:dash 30s linear infinite}
@keyframes dash{to{stroke-dashoffset:-260}}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:4.4rem;min-height:4.4rem;justify-content:center}
.pin i{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--zhu);box-shadow:0 0 0 .3rem rgba(179,58,43,.2);position:relative}
.pin i::after{content:"";position:absolute;inset:-.5rem;border-radius:50%;border:1px solid var(--zhu);animation:ripple 2s ease-out infinite}
.pin span{font-family:var(--brush);font-size:1.7rem;color:var(--ink);background:rgba(246,240,226,.9);padding:.1rem .6rem;border-radius:.2rem;white-space:nowrap}
.map-cta{position:absolute;left:0;right:0;bottom:calc(var(--bottom) + 6rem);display:flex;justify-content:center;z-index:5;opacity:0}
.page.in .map-cta{animation:fadeUp 1s 1s var(--ease) both}

/* ---------- P7 数据 ---------- */
.p7{background:var(--paper)}
.p7 .scrollable{position:absolute;left:0;right:0;top:0;bottom:calc(var(--bottom) + 3.4rem);-webkit-mask-image:linear-gradient(180deg,#000 95%,transparent);mask-image:linear-gradient(180deg,#000 95%,transparent);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  padding:calc(var(--top) - 1.8rem) 2.8rem 1.2rem}
.p7 .scrollable::-webkit-scrollbar{display:none}
/* 内容不满一屏时，空白按上 1 : 下 4 分配（略偏上）；满屏时自动退回顶部对齐 */
.p7 .scrollable{display:flex;flex-direction:column}
.p7 .scrollable>*{flex:none}
.p7 .scrollable::before,.p7 .scrollable::after{content:"";flex:1 1 0}
.p7 .scrollable::after{flex-grow:4}
.p7 .stats,.p7 .seasons-row{margin-bottom:.4rem}
.data-head{text-align:left;margin-bottom:1rem}
.eyebrow{font-size:1rem;letter-spacing:.4em;color:var(--zhu)}
.data-head h2{font-size:3rem;line-height:1.15;margin-top:.1rem}
.data-head h2::after{content:"";display:block;width:3.2rem;height:.3rem;background:var(--zhu);margin-top:.8rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink-3)}
.stat{padding:1rem .2rem .8rem;text-align:center;opacity:0;white-space:nowrap}
.stat+.stat{border-left:1px solid var(--ink-3)}
.page.in .stat{animation:fadeUp .9s var(--ease) both}
.stat .num{font-size:2.8rem;font-weight:700;color:var(--zhu);line-height:1.1;font-variant-numeric:tabular-nums}
.stat .num b{font-weight:700}
.stat .num small{font-size:1.1rem;font-weight:400;color:var(--ink-2);margin-left:.2rem}
.stat .num small.pre{margin:0 .2rem 0 0}
.stat .num.empty{font-size:1.6rem;font-weight:400;color:var(--ink-3);letter-spacing:.2em;border-bottom:1px dashed var(--ink-3);display:inline-block;padding:0 .4rem;margin:.6rem 0 .4rem}
.stat .unit{font-size:1.05rem;color:var(--zhu);letter-spacing:.15em;margin-top:.2rem}
.stat .lab{font-size:1.1rem;color:var(--ink-2);letter-spacing:.1em;margin-top:.2rem}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:1.2rem 0 .5rem;font-weight:600;font-size:1.5rem;letter-spacing:.2em}
.sec span::before{content:"";display:inline-block;width:.6rem;height:.6rem;background:var(--zhu);margin-right:.8rem;vertical-align:middle;transform:rotate(45deg)}
.sec em{font-style:normal;font-weight:400;font-size:1.05rem;letter-spacing:.1em;color:var(--ink-3)}
.seasons-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.seasons-row li{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.4rem;padding:.8rem 0;background:var(--paper-3);border-radius:.4rem;opacity:0}
.page.in .seasons-row li{animation:fadeUp .8s var(--ease) both}
.seasons-row li:nth-child(1){--c:var(--spring)}.seasons-row li:nth-child(2){--c:var(--summer)}.seasons-row li:nth-child(3){--c:var(--autumn)}.seasons-row li:nth-child(4){--c:var(--winter)}
.seasons-row svg{width:2.2rem;height:2.2rem;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.seasons-row b{font-family:var(--brush);font-weight:400;font-size:1.6rem;line-height:1}
.seasons-row span{font-size:1.05rem;color:var(--ink-2);letter-spacing:.05em}
.top5{list-style:none;counter-reset:t}
.top5 li{display:flex;align-items:center;gap:1rem;padding:.4rem 0;border-bottom:1px solid rgba(42,42,40,.12);opacity:0}
.page.in .top5 li{animation:fadeUp .8s var(--ease) both}
.top5 .no{font-family:var(--serif);font-weight:700;font-style:italic;font-size:1.8rem;width:2rem;color:var(--ink-3);line-height:1}
.top5 li:nth-child(-n+3) .no{color:var(--zhu)}
.top5 .nm{flex:1;font-size:1.35rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top5 .nm small{font-size:1rem;color:var(--ink-3);letter-spacing:.05em;margin-left:.6rem}
.vote{min-width:6rem;min-height:2.8rem;padding:0 .9rem;font-size:1.15rem;letter-spacing:.1em;border:1px solid var(--ink-3);border-radius:2rem;color:var(--ink-2);transition:all .3s}
.vote.on{border-color:var(--zhu);background:var(--zhu);color:#F7EFE3}
.vote .plus{display:inline-block}
.vote.bump .plus{animation:stampIn .5s var(--ease)}
.source{margin-top:.8rem;font-size:.95rem;line-height:1.6;color:var(--ink-3);letter-spacing:.05em}

/* ---------- P8 结尾 ---------- */
.end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--top) - .6rem) 2.4rem calc(var(--safe-b) + 1.6rem);z-index:5}
.end-seals{text-align:center;opacity:0}
.page.in .end-seals{animation:fadeUp 1s .3s var(--ease) both}
.end-seals .label{font-size:1.2rem;letter-spacing:.35em;color:var(--ink-2);margin-bottom:1.4rem}
.end-seals .label b{color:var(--zhu);font-weight:600}
.slots{display:flex;gap:1.4rem;justify-content:center}
.slot{width:6.2rem;height:6.2rem;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed var(--ink-3);border-radius:.4rem;color:var(--ink-3);font-family:var(--brush);font-size:2.8rem;line-height:1}
.slot small{font-family:var(--serif);font-size:.9rem;letter-spacing:.1em;margin-top:.4rem}
.slot.got{border:0}
.slot.got .seal{width:6.2rem;height:6.2rem;font-size:3.6rem}
.slot:nth-child(odd).got .seal{transform:rotate(-6deg)}.slot:nth-child(even).got .seal{transform:rotate(4deg)}
.slogan{margin-top:auto;text-align:center;opacity:0}
.page.in .slogan{animation:inkIn 1.4s .7s var(--ease) both}
.slogan h2{font-size:min(4rem,calc(var(--h) * .05));letter-spacing:.2rem;line-height:1.2;white-space:nowrap}
.slogan p{font-size:1.5rem;letter-spacing:.5em;color:var(--ink-2);margin-top:1.2rem;padding-left:.5em}
.actions{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:0}
.page.in .actions{animation:fadeUp 1s 1.1s var(--ease) both}
.replay{font-size:1.1rem;letter-spacing:.2em;color:var(--ink-3);min-height:3.6rem;padding:0 1.6rem}
.egg{position:absolute;right:2.2rem;bottom:calc(var(--safe-b) + 14.5rem);display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:4.4rem}
.egg .seal{width:4.4rem;height:4.4rem;font-size:1.2rem;transform:rotate(8deg);box-shadow:0 0 0 0 rgba(179,58,43,.4);animation:float 4s ease-in-out infinite}
.egg em{font-style:normal;font-size:.95rem;color:var(--ink-3);letter-spacing:.2em}
.egg.talk .seal{animation:wiggle .8s ease-in-out}
.credits{margin-top:auto;padding-top:1.6rem;text-align:center;font-size:1.05rem;line-height:1.85;letter-spacing:.12em;color:rgba(42,42,40,.58);width:100%;opacity:0}
.page.in .credits{animation:fadeUp 1s 1.4s var(--ease) both}
.credits::before{content:"";display:block;width:4rem;height:1px;background:var(--ink-3);margin:0 auto 1rem}
.credits .org{color:rgba(42,42,40,.45)}
.credits .team{color:rgba(42,42,40,.66)}
.credits .team span{display:block;font-size:1rem;letter-spacing:.3em;color:var(--zhu);opacity:.8}

/* ---------- 弹层 ---------- */
.modal{position:absolute;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.modal.show{visibility:visible;pointer-events:auto}
.modal .mask{position:absolute;inset:0;background:rgba(28,24,20,.5);opacity:0;transition:opacity .4s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modal.show .mask{opacity:1}
.sheet{position:absolute;left:1.2rem;right:1.2rem;bottom:calc(var(--safe-b) + 1.2rem);background:var(--paper-3);border-radius:1.2rem;padding:2.4rem 2.4rem 1.6rem;
  transform:translateY(120%);transition:transform .55s var(--ease);box-shadow:0 -1rem 4rem rgba(0,0,0,.2)}
.modal.show .sheet{transform:none}
.sheet::before{content:"";position:absolute;left:50%;top:.8rem;width:3.6rem;height:.35rem;margin-left:-1.8rem;border-radius:.2rem;background:var(--ink-3);opacity:.5}
.sheet .tag{position:absolute;right:2.4rem;top:-1.6rem;transform:rotate(-6deg)}
.sheet.with-photo .tag{top:18.2rem;right:2.6rem}
.sheet h3{font-size:3rem;line-height:1.2}
.sheet .desc{font-size:1.35rem;line-height:1.85;color:var(--ink-2);margin:1rem 0 1.8rem;text-align:justify}
.sheet .photo-ph{height:12rem;border-radius:.6rem;margin-bottom:1.4rem;position:relative;background:linear-gradient(160deg,var(--paper-2),#d9cfb9)}
.sheet-btns{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sheet-btns .btn-zhu{flex:1}
.sheet-btns.no-nav{justify-content:center}
.sheet-btns.no-nav .btn-line{min-width:12rem}
.poster-box{position:absolute;left:50%;top:50%;width:31rem;transform:translate(-50%,-46%) scale(.96);opacity:0;transition:all .5s var(--ease);text-align:center}
.modal.show .poster-box{opacity:1;transform:translate(-50%,-50%)}
.step1{background:var(--paper-3);border-radius:1.2rem;padding:3rem 2.4rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.step1 h3{font-size:3rem}
.step1 p{font-size:1.25rem;color:var(--ink-2);letter-spacing:.1em}
.step1 input{width:100%;margin:1rem 0 .8rem;min-height:4.6rem;text-align:center;font:inherit;font-size:1.7rem;letter-spacing:.2em;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);outline:none;-webkit-user-select:text;user-select:text}
.step1 .btn-zhu{width:100%}
.step2{display:none;flex-direction:column;align-items:center;gap:1.2rem}
.poster-box.ready .step1{display:none}
.poster-box.ready .step2{display:flex}
.step2 img{width:100%;border-radius:.6rem;box-shadow:0 2rem 5rem rgba(0,0,0,.45);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;pointer-events:auto}
.step2 .tip{color:#F3EEE3;font-size:1.3rem;letter-spacing:.3em}
.step2 .row{display:flex;gap:1.2rem;align-items:center}
.step2 .btn-line{color:#F3EEE3;border-color:rgba(243,238,227,.5)}

/* 收集印章的“落章”时刻 */
.thud{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;pointer-events:none;
  background:radial-gradient(circle,rgba(243,238,227,.55),rgba(243,238,227,0) 60%)}
.thud .seal{animation:stampIn .7s var(--ease) both}
.thud p{font-size:1.3rem;letter-spacing:.4em;color:var(--ink);background:rgba(248,245,238,.85);padding:.5rem 1.4rem;border-radius:2rem;animation:fadeUp .6s .3s var(--ease) both}
.thud.go{transition:opacity .7s .2s,transform .9s var(--ease);opacity:0;transform:translate(-36%,-42%) scale(.3)}
.p5 .thud{background:radial-gradient(circle,rgba(20,24,38,.5),rgba(20,24,38,0) 60%)}

#toast{position:absolute;left:50%;top:44%;z-index:150;transform:translate(-50%,-50%);padding:1rem 2rem;border-radius:2.4rem;background:rgba(42,42,40,.85);color:#F3EEE3;font-size:1.4rem;letter-spacing:.2em;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1}

@media (prefers-reduced-motion:reduce){
  .drift,.birds,.shimmer,.flip,.lantern,.steam path,.ripples ellipse{animation:none!important}
}