@charset "utf-8";
/* ==========================================================
   追光廿二载 · 青春正当燃 —— 视觉系统
   设计稿 750 × 1624，主体内容放在中央 750 × 1206 安全区（.safe）
   1rem = 设计稿 100px（JS 按屏幕宽高动态换算，宽高取较紧的一边）
   ========================================================== */
:root{
  --red:#8B1A1A; --red-2:#B3242A; --red-deep:#4A0B10; --navy:#16213E; --navy-deep:#0B1026;
  --gold:#E8C27A; --gold-hi:#FFF1C9; --gold-2:#F3CB78; --gold-3:#C9913A; --cream:#F8EBD3;
  --serif:"NJSerif","Noto Serif SC","Source Han Serif SC","Source Han Serif CN","Songti SC","STSong","SimSun",serif;
  --sans:"NJSans","Noto Sans SC","Source Han Sans SC","Source Han Sans CN","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --vh:100vh;
}
*{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:var(--red)}
body{font-family:var(--sans);color:var(--cream);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;outline:none}
img{display:block;-webkit-user-drag:none}
ol,ul{list-style:none}

/* ---------- 舞台 ---------- */
#app{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--red);touch-action:none;
  /* 安全区上下边缘到屏幕边缘的距离：公共元素对齐安全区，同时不进刘海/手势条 */
  --bt:max(var(--sat),calc((var(--vh) - 12.06rem) / 2));--bb:max(var(--sab),calc((var(--vh) - 12.06rem) / 2))}
#stage{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}
body.framed{background:radial-gradient(ellipse 70% 60% at 50% 42%,#4a121a 0%,#1d080c 60%,#0e0406 100%)}
body.framed #app{--sat:0px;--sab:0px;border-radius:26px;box-shadow:0 0 0 9px #111,0 0 0 10px #3a3a3a,0 40px 90px rgba(0,0,0,.55)}
#desk{display:none;position:fixed;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:12px;
  color:rgba(248,235,211,.7);font:13px/1.4 var(--sans);letter-spacing:2px}
#desk img{width:132px;height:132px;border-radius:10px;background:#fff;padding:8px}
body.framed #desk{display:flex}

.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;visibility:hidden;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.page.off{display:none}
.page .bg{position:absolute;top:0;right:0;bottom:0;left:0}
.page .bg>i,.page .bg>b{position:absolute;display:block}
.page canvas.fx{position:absolute;left:0;top:0;pointer-events:none}
.page.lift{box-shadow:0 -.1rem .5rem rgba(0,0,0,.45)}   /* 正在滑动的那一页，边缘一道淡阴影，层次更清楚 */
.page .dim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:#000;opacity:0;pointer-events:none}
.safe{position:absolute;left:50%;top:50%;width:7.5rem;height:12.06rem;margin:-6.03rem 0 0 -3.75rem}

/* 入场动画：页面变为 active 时依次浮现 */
.ani{opacity:0}
.page.active .ani{animation:aniIn 1s var(--ease-out) var(--d,0s) both}
@keyframes aniIn{from{opacity:0;transform:translate3d(0,.32rem,0)}to{opacity:1;transform:none}}
.page:not(.active) *{animation-play-state:paused!important}   /* 不在当前页的循环动画全部暂停，省电 */

/* 行尾全角标点（，。；！）字形只占左半格：只算半个字宽，居中时整行不再显得偏左 */
.pe{font-style:normal;margin-right:-.5em}

/* 统一页头：章节标签（对应策划案“开篇 / 故事 / 结尾”）+ 标题 + 副标题；金色只做点缀，标题用米白 */
.head{position:absolute;left:0;right:0;top:.92rem;text-align:center}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:.16rem;font:400 .19rem/1 var(--serif);letter-spacing:.3em;color:rgba(232,194,122,.92)}
.eyebrow span{padding-left:.3em}
.eyebrow i{display:block;width:.56rem;height:1px;background:linear-gradient(90deg,rgba(232,194,122,0),rgba(232,194,122,.8))}
.eyebrow i:last-child{background:linear-gradient(90deg,rgba(232,194,122,.8),rgba(232,194,122,0))}
.eyebrow.top{position:absolute;left:0;right:0;top:.92rem}
.head h2{margin-top:.2rem;font:700 .58rem/1.2 var(--serif);letter-spacing:.22em;padding-left:.22em;color:#F7EBD6;text-shadow:0 .02rem .18rem rgba(0,0,0,.25)}
.head .sub{margin-top:.14rem;font-size:.23rem;letter-spacing:.22em;padding-left:.22em;color:rgba(245,235,221,.62)}

/* 标题逐字浮现（字被 JS 拆成 .ch） */
.split .ch{display:inline-block;opacity:0;transform:translate3d(0,.3em,0);filter:blur(.06rem)}
.page.active .split .ch{animation:chIn .9s var(--ease-out) calc(var(--d,0s) + var(--i) * 55ms) both}
@keyframes chIn{from{opacity:0;transform:translate3d(0,.3em,0);filter:blur(.06rem)}to{opacity:1;transform:none;filter:blur(0)}}
.gold-ch .ch{background:linear-gradient(180deg,#FFF7DE 8%,#F7D894 44%,#D9A04C 74%,#F7DC9C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- 公共元素 HUD（所有页面坐标一致） ---------- */
#hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none}
#hud>*{position:absolute;transition:opacity .5s ease}
.hud-logo{left:.6rem;top:calc(var(--bt) + .08rem);height:.54rem;display:flex;align-items:center;gap:.1rem}
.hud-logo img{width:.54rem;height:.54rem}
.hud-logo img.wm{width:auto;height:.3rem}
.hud-music{pointer-events:auto;right:.6rem;top:calc(var(--bt) + .06rem);width:.58rem;height:.58rem;border-radius:50%;
  background:rgba(20,6,8,.28);box-shadow:0 0 0 1px rgba(243,203,120,.6)}
.hud-music .disc{position:absolute;top:.08rem;right:.08rem;bottom:.08rem;left:.08rem;border-radius:50%;
  background:repeating-radial-gradient(circle,#2a1a10 0 1px,#3b2716 1px 2.5px);box-shadow:inset 0 0 0 1px rgba(243,203,120,.5)}
.hud-music .disc::after{content:"";position:absolute;left:50%;top:50%;width:.16rem;height:.16rem;margin:-.08rem 0 0 -.08rem;border-radius:50%;background:radial-gradient(circle,#FFF1C9 0 18%,#E8B45C 20% 100%)}
.hud-music.on .disc{animation:spin 3.2s linear infinite}
.hud-music.muted::after{content:"";position:absolute;left:50%;top:50%;width:.66rem;height:2px;margin:-1px 0 0 -.33rem;background:var(--gold-2);transform:rotate(-45deg);box-shadow:0 0 0 1px rgba(40,8,10,.6)}
@keyframes spin{to{transform:rotate(360deg)}}
/* 底部公共元素加深色柔光，P5 照片、P7 日出等亮背景上也看得清 */
.hud-page,.hud-22,.hud-next{filter:drop-shadow(0 0 .05rem rgba(30,8,20,.55)) drop-shadow(0 1px 2px rgba(30,8,20,.45))}
.hud-page{left:.6rem;bottom:calc(var(--bb) + .36rem);display:flex;align-items:center;gap:.12rem;color:rgba(248,235,211,.7)}
.hud-page b{font:700 .28rem/1 var(--serif);color:var(--gold-2);letter-spacing:.02em}
.hud-page span{font:400 .18rem/1 var(--serif);letter-spacing:.04em}
.hud-page .bar{position:relative;display:block;width:.9rem;height:1px;background:rgba(248,235,211,.25)}
.hud-page .bar i{position:absolute;left:0;top:-.5px;height:2px;width:calc(var(--prog,.125) * 100%);background:var(--gold-2);box-shadow:0 0 .06rem rgba(243,203,120,.8);transition:width .6s var(--ease)}
/* “22”角标：月桂周年徽标（两侧月桂枝 + 22 + 周年） */
.hud-22{right:.6rem;bottom:calc(var(--bb) + .24rem);width:1.16rem;height:.6rem;color:var(--gold-2)}
.hud-22 .laurel{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:.9}
.hud-22 b{position:absolute;left:0;right:0;top:.07rem;text-align:center;font:700 .3rem/1 var(--serif);letter-spacing:.01em;color:var(--gold-2)}
.hud-22 span{position:absolute;left:0;right:0;top:.385rem;text-align:center;font:400 .145rem/1 var(--serif);letter-spacing:.14em;padding-left:.14em;color:rgba(248,235,211,.9)}
.hud-next{pointer-events:auto;left:50%;width:1.6rem;margin-left:-.8rem;bottom:calc(var(--bb) + .2rem);height:.86rem;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.hud-next .txt{display:none;margin-bottom:.06rem;font-size:.2rem;letter-spacing:.32em;padding-left:.32em;color:rgba(255,240,214,.82)}
.hud-next i{width:.2rem;height:.2rem;border-left:2px solid var(--gold-2);border-top:2px solid var(--gold-2);transform:rotate(45deg);margin-top:-.06rem;opacity:0;animation:chev 1.8s ease-in-out infinite}
.hud-next i:last-child{animation-delay:.25s}
@keyframes chev{0%{opacity:0;transform:translateY(.12rem) rotate(45deg)}40%{opacity:1}100%{opacity:0;transform:translateY(-.1rem) rotate(45deg)}}
#app[data-page="1"] .hud-next .txt{display:block}
#app[data-page="1"] .hud-logo,#app[data-page="1"] .hud-page,#app[data-page="1"] .hud-22,
#app[data-page="8"] .hud-logo,#app[data-page="8"] .hud-page,#app[data-page="8"] .hud-22,#app[data-page="8"] .hud-next{opacity:0;pointer-events:none}
/* P7 日出后底部变亮：页码、角标、箭头随天色换成深酒红（坐标不变） */
.hud-page b,.hud-page span,.hud-22 b,.hud-22 span{transition:color 2s ease}
.hud-page .bar,.hud-page .bar i{transition:background-color 2s ease}
.hud-22{transition:opacity .5s ease,color 2s ease}
.hud-next i{transition:border-color 2s ease}
#app[data-page="7"] .hud-page b,#app[data-page="7"] .hud-22 b{color:#7A1E2C;transition-delay:1.6s}
#app[data-page="7"] .hud-page span,#app[data-page="7"] .hud-22 span{color:rgba(90,24,38,.8);transition-delay:1.6s}
#app[data-page="7"] .hud-page .bar{background-color:rgba(90,24,38,.35);transition-delay:1.6s}
#app[data-page="7"] .hud-22{color:#7A1E2C;transition-delay:0s,1.6s}
#app[data-page="7"] .hud-page .bar i{background-color:#8B1A1A;box-shadow:none;transition-delay:1.6s}
#app[data-page="7"] .hud-next i{border-color:#8B1A1A;transition-delay:1.6s}
#app[data-page="7"] .hud-page,#app[data-page="7"] .hud-22,#app[data-page="7"] .hud-next{filter:drop-shadow(0 0 .05rem rgba(255,240,215,.6))}
#app.booting #hud{opacity:0}
#hud{transition:opacity .8s ease}

/* ---------- P1 封面 ---------- */
.p1{background-color:#8B1A1A}
.p1 .bg{background:radial-gradient(ellipse 95% 58% at 50% 40%,#C62E33 0%,#A6222A 28%,#8B1A1A 52%,#5C0E15 80%,#3A070C 100%)}
.p1 .beam{top:-12%;width:75%;height:125%;transform-origin:50% 0;opacity:.85;
  background:conic-gradient(from 166deg at 50% 0,rgba(255,226,165,0) 0deg,rgba(255,226,165,.30) 14deg,rgba(255,226,165,0) 28deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,0) 85%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,0) 85%)}
.p1 .beam.l{left:-32%;transform:rotate(-26deg);animation:sweepL 9s ease-in-out infinite alternate}
.p1 .beam.r{right:-32%;transform:rotate(26deg);animation:sweepR 11s ease-in-out infinite alternate}
@keyframes sweepL{from{transform:rotate(-30deg)}to{transform:rotate(-16deg)}}
@keyframes sweepR{from{transform:rotate(30deg)}to{transform:rotate(17deg)}}
.p1 .halo{left:50%;top:calc(50% - 1.62rem);width:7.6rem;height:7.6rem;margin:-3.8rem 0 0 -3.8rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,110,.38) 0%,rgba(255,160,80,.14) 38%,rgba(255,140,60,0) 66%);animation:breathe 4s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.p1 .badge{position:absolute;left:50%;top:1.02rem;width:1.1rem;height:1.1rem;margin-left:-.55rem;filter:drop-shadow(0 0 .1rem rgba(255,200,110,.4))}
.num22{position:absolute;left:.55rem;top:2.34rem;width:6.4rem;height:4rem;opacity:0}
.num22 svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.n22-glow{opacity:0}
.p1.active .num22{animation:focusIn 2s var(--ease-out) .35s both}
@keyframes focusIn{0%{opacity:0;filter:blur(.22rem);transform:scale(.88)}55%{opacity:1}100%{opacity:1;filter:blur(0);transform:none}}
.g2{fill:none;stroke-linejoin:round}
.film-band{stroke:url(#gGold);stroke-width:64}
.film-holes{stroke:#3A0A0F;stroke-width:52;stroke-dasharray:7 9;animation:holes .5s linear infinite}
.film-mid{stroke:url(#gGold);stroke-width:36}
.film-frames{stroke:#5E0F16;stroke-opacity:.9;stroke-width:28;stroke-dasharray:34 4;animation:frames 1.1875s linear infinite}
@keyframes holes{to{stroke-dashoffset:-16}}
@keyframes frames{to{stroke-dashoffset:-38}}
.beam-glow{stroke:#FFB347;stroke-width:46;stroke-linecap:round;filter:url(#fGlow);opacity:.6}
.beam-tube{stroke:url(#gBeam);stroke-width:22;stroke-linecap:round}
.beam-core{stroke:#FFFDF4;stroke-width:7;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.beam-tail{fill:none;stroke:url(#gBeamTail);stroke-width:12;stroke-linecap:round}
.p1.active .beam-core{animation:draw 1.6s var(--ease) 1.1s forwards}
.p1.active .n22-glow{animation:glowIn 1.4s ease 2s forwards,glowPulse 2.6s ease-in-out 3.4s infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes glowIn{to{opacity:1}}
@keyframes glowPulse{from{opacity:1}to{opacity:.55}}
.spark path{transform-box:fill-box;transform-origin:center;animation:twinkle 2.6s ease-in-out infinite}
.spark .s2{animation-delay:.9s}.spark .s3{animation-delay:1.7s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
/* 取景框：传媒学院的镜头语言 */
.vf{position:absolute;left:.6rem;right:.6rem;top:2.3rem;height:8.3rem;pointer-events:none}
.vf .c{position:absolute;width:.3rem;height:.3rem;border:0 solid rgba(246,213,142,.75)}
.vf .tl{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}.vf .tr{right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.vf .bl{left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}.vf .br{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.vf-meta{position:absolute;left:0;right:0;top:.14rem;display:flex;justify-content:center;align-items:center;gap:.18rem}
.vf .rec,.vf .tc{font:400 .165rem/1 var(--sans);letter-spacing:.2em;color:rgba(255,236,205,.78)}
.vf .rec{display:flex;align-items:center;gap:.07rem}
.vf .rec b{display:block;width:.09rem;height:.09rem;border-radius:50%;background:#FF3B3B;box-shadow:0 0 .08rem #FF3B3B;animation:blink 1.2s steps(1) infinite}
.vf .tc{font-family:var(--serif);letter-spacing:.08em}
@keyframes blink{50%{opacity:0}}
.p1 .rings{position:absolute;left:50%;top:calc(50% - 1.7rem);width:6.6rem;height:6.6rem;margin:-3.3rem 0 0 -3.3rem;animation:spin 90s linear infinite}
.p1 .rings circle{fill:none;stroke:rgba(255,214,150,.13);stroke-width:1}
.p1 .rings .d{stroke-dasharray:2 7;stroke:rgba(255,214,150,.22)}
.cover-title{position:absolute;left:0;right:0;top:6.6rem;text-align:center;font-family:var(--serif);font-weight:700;filter:drop-shadow(0 .04rem .14rem rgba(70,6,10,.55))}
.cover-title .line{display:block;font-size:.8rem;line-height:1.14;letter-spacing:.14em;padding-left:.14em;white-space:nowrap}
.cover-title .sep{display:flex;align-items:center;justify-content:center;gap:.16rem;height:.36rem;font-size:.3rem;line-height:1;color:var(--gold-2)}
.cover-title .sep i{display:block;width:1rem;height:1px;background:linear-gradient(90deg,rgba(243,203,120,0),#F3CB78)}
.cover-title .sep i:last-child{background:linear-gradient(90deg,#F3CB78,rgba(243,203,120,0))}
.cover-sub{position:absolute;left:0;right:0;top:9.2rem;text-align:center;font-size:.27rem;letter-spacing:.3em;padding-left:.3em;color:rgba(255,241,216,.92)}
.cover-years,.p8 .years{display:flex;align-items:center;justify-content:center;gap:.14rem;font:400 .3rem/1 var(--serif);letter-spacing:.14em;color:var(--gold-2)}
.cover-years{position:absolute;left:0;right:0;top:9.86rem}
.cover-years i,.p8 .years i{display:block;width:.56rem;height:1px;background:rgba(243,203,120,.6)}
.cover-years b,.p8 .years b{font-weight:400;opacity:.7}

/* ---------- P2 时光引入 ---------- */
.p2{background-color:#16213E}
.p2 .bg{background:linear-gradient(180deg,#060A1A 0%,#0C1330 34%,#16213E 68%,#22305C 100%)}
.p2 .moon{right:-1.2rem;top:-1.4rem;width:4.6rem;height:4.6rem;border-radius:50%;background:radial-gradient(circle,rgba(160,180,255,.16) 0%,rgba(120,140,230,.05) 45%,rgba(0,0,0,0) 70%)}
.poem{position:absolute;left:0;right:0;text-align:center;font-family:var(--serif);font-weight:400;color:#F1E6D2}
.poem p{font-size:.46rem;line-height:1.74;letter-spacing:.14em;padding-left:.14em;text-shadow:0 0 .2rem rgba(120,150,255,.25)}
.poem p b{font-weight:700;color:#F6D58E;text-shadow:0 0 .2rem rgba(255,190,100,.4)}
.poem .yr-line{font-weight:700;font-size:.32rem;line-height:1.6;letter-spacing:.24em;color:var(--gold-2);text-shadow:0 0 .16rem rgba(255,190,100,.45)}
.poem-a{top:1.62rem}
.poem-b{top:6.02rem}
.timeline-light{position:absolute;left:0;right:0;top:calc(50% - 6.03rem + 4.96rem);height:.8rem;margin-top:-.4rem}
.timeline-light .track,.timeline-light .trail{position:absolute;left:.6rem;right:.6rem;top:50%;height:1px;margin-top:-.5px}
.timeline-light .track{background:rgba(255,226,170,.16)}
.timeline-light .trail{height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(255,214,140,.15),#FFD58A 70%,#FFF6DC);box-shadow:0 0 .12rem rgba(255,200,110,.8);transform:scaleX(0);transform-origin:0 50%}
.p2.active .trail{animation:trail 1.9s cubic-bezier(.5,0,.2,1) .55s forwards}
@keyframes trail{to{transform:scaleX(1)}}
.timeline-light .comet{position:absolute;left:.6rem;top:50%;width:1.2rem;height:.08rem;margin:-.04rem 0 0 -1.2rem;border-radius:.04rem;opacity:0;
  background:linear-gradient(90deg,rgba(255,226,170,0),rgba(255,226,170,.7) 60%,#fff);box-shadow:0 0 .16rem .04rem rgba(255,210,130,.7)}
.timeline-light .comet::after{content:"";position:absolute;right:-.12rem;top:50%;width:.3rem;height:.3rem;margin-top:-.15rem;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(255,220,150,.6) 30%,rgba(255,200,120,0) 70%)}
.p2.active .comet{animation:comet 1.9s cubic-bezier(.5,0,.2,1) .55s forwards}
@keyframes comet{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--W,375px) - 1.2rem))}}
.timeline-light .yr{position:absolute;top:.52rem;font:400 .22rem/1 var(--serif);letter-spacing:.12em;color:rgba(255,226,170,.8);opacity:0}
.timeline-light .yr.l{left:.6rem}.timeline-light .yr.r{right:.6rem}
.p2.active .yr.l{animation:fadeIn .8s ease .5s forwards}
.p2.active .yr.r{animation:fadeIn .8s ease 2.3s forwards}
.ticks i{position:absolute;top:50%;width:2px;height:.1rem;margin:-.05rem 0 0 -1px;background:rgba(255,226,170,.3);border-radius:1px}
.ticks i.big{height:.2rem;margin-top:-.1rem}
.p2.active .ticks i{animation:tick .5s ease forwards}
@keyframes tick{to{background:#FFE2A3;box-shadow:0 0 .08rem rgba(255,200,110,.9)}}
@keyframes fadeIn{to{opacity:1}}
.campus{position:absolute;left:0;bottom:0;width:100%;height:3.3rem;pointer-events:none}
.p2 .mount{fill:#131C3A}
.p2 .town{fill:#070B19}
.campus .lights{fill:#FFC86B}
.campus .lights>*:nth-child(3n){animation:winLight 3.6s ease-in-out infinite alternate}
.campus .lights>*:nth-child(6n){animation-delay:-1.8s;animation-duration:2.6s}
@keyframes winLight{from{opacity:.95}to{opacity:.35}}

/* ---------- P3 校史沿革 ---------- */
.p3{background-color:#3D0A10}
.p3 .bg{background:radial-gradient(ellipse 110% 62% at 50% 22%,#701520 0%,#4C0D14 44%,#2C070C 100%)}
.film-deco{position:absolute;width:4rem;height:1.14rem;color:rgba(232,180,95,.2)}
.film-deco.tr{right:-1.5rem;top:calc(50% - 6.03rem + 2.5rem);transform:rotate(-20deg)}
.film-deco.bl{left:-1.7rem;bottom:calc(50% - 6.03rem + 1.6rem);transform:rotate(16deg)}
.silk{position:absolute;left:0;top:.55rem;width:7.5rem;height:12.06rem;overflow:visible;pointer-events:none}
.silk path{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.silk-shadow{stroke:#FF3B47;stroke-width:34;opacity:.22;filter:url(#fSoft)}
.silk-main{stroke:url(#gSilk);stroke-width:13}
.silk-hi{stroke:#FFD8CC;stroke-width:2.5;opacity:.75;transform:translate(-3px,-3px)}
.p3.active .silk path{animation:draw 2.5s cubic-bezier(.45,.05,.35,1) .3s forwards}
.nodes{position:absolute;top:0;right:0;bottom:0;left:0}
.node{position:absolute;left:0;right:0;text-align:center}
.node.n1{top:2.65rem}.node.n2{top:5.5rem}.node.n3{top:8.35rem}
.medal{position:relative;width:1.2rem;height:1.2rem;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#5C131B,#2A060B);box-shadow:inset 0 0 0 2px rgba(243,203,120,.4)}
.medal::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;opacity:0;transform:scale(.6);
  background:radial-gradient(circle closest-side,rgba(0,0,0,0) 83%,rgba(140,88,24,.55) 84.5%,rgba(255,246,214,.6) 86.5%,rgba(0,0,0,0) 88%),radial-gradient(circle at 35% 28%,#FFF4CF 0%,#F2C672 45%,#B5792A 100%);box-shadow:0 0 .34rem rgba(255,190,90,.65),inset 0 0 0 2px #FFE7A8}
.medal::after{content:"";position:absolute;top:-.12rem;right:-.12rem;bottom:-.12rem;left:-.12rem;border-radius:50%;border:1px solid rgba(255,215,140,.7);opacity:0}
.medal span{position:relative;z-index:1;font:700 .3rem/1 var(--serif);letter-spacing:.02em;color:rgba(243,203,120,.5);transition:color .5s ease var(--t)}
.p3.active .medal::before{animation:medalOn .7s var(--ease-out) var(--t) forwards}
.p3.active .medal::after{animation:ring 1.6s ease-out var(--t) forwards}
.p3.active .medal span{color:#6E0F17}
@keyframes medalOn{to{opacity:1;transform:scale(1)}}
@keyframes ring{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
.node h3,.node p{opacity:0}
.node h3{margin-top:.2rem;font:700 .34rem/1.4 var(--serif);letter-spacing:.08em;color:#FBE9C6}
.node p{margin-top:.06rem;font-size:.23rem;letter-spacing:.1em;color:rgba(251,233,198,.68)}
.p3.active .node h3{animation:aniIn .9s var(--ease-out) calc(var(--t) + .15s) both}
.p3.active .node p{animation:aniIn .9s var(--ease-out) calc(var(--t) + .3s) both}

/* ---------- P4 数字南传 ---------- */
.p4{background-color:#16213E}
.p4 .bg{background:radial-gradient(ellipse 90% 50% at 50% 0%,#24346B 0%,#18234A 45%,#121B38 75%,#0C1329 100%)}
/* 像放映机打下来的一束柔光 */
.p4 .projector{left:50%;top:-6%;width:9rem;height:80%;margin-left:-4.5rem;opacity:.9;
  background:conic-gradient(from 160deg at 50% 0,rgba(255,236,200,0) 0deg,rgba(255,236,200,.10) 12deg,rgba(255,236,200,.16) 20deg,rgba(255,236,200,.10) 28deg,rgba(255,236,200,0) 40deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,0) 100%)}
.ticket{position:relative;height:3.6rem;text-align:center}
.ticket .tk{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.tk-body{fill:rgba(255,232,190,.055);stroke:rgba(232,194,122,.62);stroke-width:1;vector-effect:non-scaling-stroke}
.tk-perf{fill:none;stroke:rgba(232,194,122,.5);stroke-width:1;stroke-dasharray:6 7;vector-effect:non-scaling-stroke}
.tk-top{position:absolute;left:0;right:0;top:0;height:59.4%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:.06rem}
.tk-bot{position:absolute;left:0;right:0;top:59.4%;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tk-tag{margin-bottom:.22rem;font:400 .19rem/1 var(--serif);letter-spacing:.32em;padding-left:.32em;color:rgba(232,194,122,.88)}
.ticket .big{font-size:.66rem;color:#F2D59A;text-shadow:none}
.ticket .big.word{font-size:.6rem}
.ticket.motto .big.word{font-size:.4rem}
.ticket h3{font:700 .26rem/1.3 var(--serif);letter-spacing:.16em;padding-left:.16em;color:#F5E8D2}
.ticket p{margin-top:.08rem;font-size:.2rem;letter-spacing:.1em;padding-left:.1em;color:rgba(236,226,206,.6)}
.cards{position:absolute;left:.6rem;right:.6rem;top:2.78rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
.big{display:flex;align-items:flex-start;justify-content:center;font:700 .62rem/1 var(--serif);color:#F7DA9C;text-shadow:0 0 .24rem rgba(255,190,90,.22)}
.big sup{font-size:.32rem;line-height:1;margin-left:.02rem}
.odo{display:inline-flex}
.odo .d{display:inline-block;height:1.1em;line-height:1.1em;overflow:hidden}
.odo .s{display:block;will-change:transform}
.odo .s i{display:block;height:1.1em;font-style:normal;text-align:center}
.odo .c{display:inline-block;height:1.1em;line-height:1.1em}
.big.word{font-size:.58rem;letter-spacing:.06em}
.motto .big.word{display:grid;grid-template-columns:auto auto;gap:.06rem .22rem;font-size:.42rem;line-height:1.15}
.motto .big.word span{opacity:.25;transition:opacity .6s ease,text-shadow .6s ease}
.p4.active .motto .big.word span{opacity:1;text-shadow:0 0 .22rem rgba(255,200,110,.5)}
.p4.active .motto .big.word span:nth-child(1){transition-delay:1.2s}
.p4.active .motto .big.word span:nth-child(2){transition-delay:1.45s}
.p4.active .motto .big.word span:nth-child(3){transition-delay:1.7s}
.p4.active .motto .big.word span:nth-child(4){transition-delay:1.95s}

/* ---------- P5 校园地标 ---------- */
.p5{background-color:#14161C}
.slides{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none}
.slide{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}
/* 照片完整显示在中间（3:2，上下边缘柔和过渡），背后铺一层同一张照片的放大柔焦，整屏仍是这张照片 */
.slide .blur{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;opacity:0;transition:opacity .9s ease;
  filter:blur(.32rem) brightness(.6) saturate(1.2)}
.slide .main{position:absolute;left:50%;top:calc(50% - .72rem);width:7.5rem;height:5rem;margin-left:-3.75rem;object-fit:cover;opacity:0;transition:opacity .9s ease;
  transform:translateY(-50%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 9%,#000 91%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 9%,#000 91%,rgba(0,0,0,0) 100%)}
.slide.loaded .blur,.slide.loaded .main{opacity:1}
.slide.loaded .main{animation:kb 16s ease-in-out infinite alternate}
.page:not(.active) .slide .main{animation-play-state:paused}
@keyframes kb{from{transform:translateY(-50%) scale(1)}to{transform:translateY(-50%) scale(1.05)}}
.slide .wait{position:absolute;left:50%;top:44%;width:.5rem;height:.5rem;margin-left:-.25rem;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin 1s linear infinite}
.slide.loaded .wait,.slide.failed .wait{display:none}
.p5 .shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,18,.62) 0%,rgba(8,10,18,.12) 24%,rgba(8,10,18,0) 40%,rgba(8,10,18,0) 66%,rgba(8,10,18,.5) 100%)}
.p5 .head h2{filter:drop-shadow(0 .02rem .08rem rgba(0,0,0,.5))}
.p5 .head p{color:rgba(255,248,235,.9);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tag{position:absolute;left:.6rem;right:.6rem;top:7.46rem;padding:.24rem .3rem .2rem;border-radius:.1rem;text-align:center;
  background:rgba(255,255,255,.76);box-shadow:0 .1rem .4rem rgba(0,0,0,.25)}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .tag{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
}
.tag-no{display:block;font:400 .18rem/1 var(--serif);font-style:normal;letter-spacing:.2em;color:#B3242A}
.tag-name{margin-top:.08rem;font:700 .4rem/1.25 var(--serif);letter-spacing:.18em;padding-left:.18em;color:#6E0F17}
.tag-desc{margin-top:.1rem;font-size:.21rem;letter-spacing:.06em;color:rgba(50,22,22,.72)}
.tag-text.swap{animation:tagSwap .55s var(--ease-out)}
@keyframes tagSwap{from{opacity:0;transform:translate3d(0,.12rem,0)}to{opacity:1;transform:none}}
.dots{display:flex;justify-content:center;gap:.1rem;margin-top:.16rem;pointer-events:auto}
.dots i{display:block;width:.12rem;height:.12rem;border-radius:.06rem;background:rgba(122,18,24,.24);transition:width .4s var(--ease),background .4s}
.dots i.on{width:.36rem;background:#B3242A}
.swipe-tip{margin-top:.1rem;font-size:.19rem;letter-spacing:.2em;padding-left:.2em;color:rgba(60,28,28,.45)}

/* ---------- P6 青春祝福 ---------- */
.p6{background-color:#8B1A1A}
.p6 .bg{background:radial-gradient(ellipse 100% 70% at 50% 42%,#B5262C 0%,#8B1A1A 50%,#560D13 100%)}
.p6 .rays{left:50%;top:42%;width:12rem;height:12rem;margin:-6rem 0 0 -6rem;opacity:.16;animation:spin 60s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,170,.9) 0deg 4deg,rgba(255,226,170,0) 4deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,0) 62%);mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,0) 62%)}
.p6 .ghost22{left:0;right:0;top:calc(50% - 2.9rem);text-align:center;font:700 5.4rem/1 var(--serif);color:transparent;-webkit-text-stroke:2px rgba(255,215,140,.13)}
.danmaku{position:absolute;left:0;right:0;top:calc(50% - 6.03rem + 2.78rem);height:6.6rem;overflow:hidden}
.bullet{position:absolute;left:0;top:0;white-space:nowrap;height:.58rem;line-height:.56rem;padding:0 .24rem;border-radius:.29rem;
  font-size:.26rem;letter-spacing:.04em;color:#FFF3DC;background:rgba(255,236,210,.12);border:1px solid rgba(255,230,190,.2)}
/* 景深：远处的弹幕小而淡，近处的大而亮 */
.bullet.far{height:.46rem;line-height:.44rem;font-size:.21rem;padding:0 .16rem;color:rgba(255,243,220,.55);background:none;border-color:transparent}
.bullet.near{height:.66rem;line-height:.64rem;font-size:.29rem;padding:0 .28rem;background:rgba(255,236,210,.16);border-color:rgba(255,230,190,.28)}
.bullet.b1{background:linear-gradient(90deg,#FBE3A6,#E6B35C);color:#6E0F17;border-color:transparent;box-shadow:0 .04rem .14rem rgba(80,10,14,.35)}
.bullet.b2{background:rgba(40,4,8,.22);border-color:rgba(243,203,120,.55);color:#F7D894}
.bullet.b3{background:rgba(255,255,255,.9);color:#8B1A1A;border-color:transparent}
.bullet.mine{background:linear-gradient(90deg,#FFFFFF,#FFE6AE);color:#8B1A1A;border-color:transparent;box-shadow:0 0 .22rem rgba(255,220,150,.9)}
.bullet.picked{box-shadow:0 0 0 2px #FFF1C9,0 0 .3rem rgba(255,220,150,.9)}
.btn-wish{position:absolute;left:0;right:0;top:9.72rem;width:3rem;height:.76rem;margin:0 auto;border-radius:.38rem;
  font:700 .28rem/.76rem var(--serif);letter-spacing:.16em;padding-left:.16em;color:#7A1218;
  background:linear-gradient(180deg,#FFF2C9,#EBB960);box-shadow:0 .06rem .24rem rgba(40,4,8,.35),inset 0 -2px 0 rgba(150,90,20,.35)}
.btn-wish:active{filter:brightness(.94)}
.wish-zoom,.wish-sheet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:45;display:flex;justify-content:center}
.wish-zoom[hidden],.wish-sheet[hidden]{display:none}
.wish-zoom{align-items:center;background:rgba(36,4,8,.58)}
.zoom-card{width:5.7rem;padding:.5rem .44rem .4rem;border-radius:.26rem;text-align:center;color:#7A1218;
  background:linear-gradient(170deg,#FFF9EC,#F5E0B6);box-shadow:0 .2rem .6rem rgba(0,0,0,.4),inset 0 0 0 1px rgba(201,145,58,.4);animation:pop .45s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.zoom-card .q{display:block;height:.5rem;font:700 1.1rem/1 var(--serif);font-style:normal;color:rgba(179,36,42,.28)}
.zoom-text{font-size:.44rem;line-height:1.55;letter-spacing:.06em;word-break:break-all}
.zoom-from{margin-top:.3rem;font-size:.21rem;letter-spacing:.12em;color:rgba(122,18,24,.6)}
.zoom-tip{margin-top:.14rem;font-size:.19rem;letter-spacing:.14em;color:rgba(122,18,24,.38)}
.wish-sheet{align-items:flex-start;padding-top:calc(var(--bt) + 1.5rem);background:rgba(28,3,6,.62)}
.sheet-card{width:6.3rem;padding:.36rem .34rem .3rem;border-radius:.24rem;background:#FFF8EA;color:#5a1a1a;box-shadow:0 .2rem .6rem rgba(0,0,0,.4);animation:pop .4s var(--ease-out)}
.sheet-card h3{text-align:center;font:700 .32rem/1.3 var(--serif);letter-spacing:.12em;color:#7A1218}
.sheet-card textarea{display:block;width:100%;margin-top:.22rem;padding:.14rem .18rem;border:1px solid rgba(179,36,42,.3);border-radius:.12rem;
  font:max(16px,.28rem)/1.5 var(--sans);color:#3a1a1a;background:#fff;resize:none;outline:none;-webkit-user-select:text;user-select:text;-webkit-appearance:none}
.sheet-card textarea:focus{border-color:#B3242A}
.quick{display:flex;flex-wrap:wrap;gap:.12rem;margin-top:.18rem}
.quick button{height:.48rem;padding:0 .18rem;border-radius:.24rem;font-size:.2rem;color:#8B1A1A;background:rgba(179,36,42,.08);border:1px solid rgba(179,36,42,.2)}
.sheet-btns{display:flex;gap:.2rem;margin-top:.26rem}
.sheet-btns button{flex:1;height:.7rem;border-radius:.35rem;font-size:.26rem;letter-spacing:.1em}
.sheet-btns .cancel{color:#8B1A1A;background:rgba(139,26,26,.08)}
.sheet-btns .send{color:#FFF3DC;background:linear-gradient(180deg,#C8323A,#8B1A1A)}

/* ---------- P7 展望结尾 ---------- */
.p7{background-color:#16213E}
.p7 .night{top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#070B1C 0%,#111A38 44%,#1E2A54 78%,#2B3868 100%)}
.p7 .dawn{top:0;right:0;bottom:0;left:0;opacity:0;background:linear-gradient(180deg,#1A2250 0%,#363C7A 20%,#7C5590 42%,#D9806F 62%,#F5AE5F 77%,#FFD488 90%,#FFE8B4 100%)}
.p7.active .dawn{animation:fadeIn 4.2s ease-in-out .3s forwards}
.p7 .sun{left:50%;bottom:1.55rem;width:2.1rem;height:2.1rem;margin-left:-1.05rem;border-radius:50%;transform:translate3d(0,1.9rem,0);
  background:radial-gradient(circle,#FFFDF0 0%,#FFEDB4 40%,#FFC968 68%,rgba(255,180,90,0) 71%)}
.p7.active .sun{animation:sunRise 4.6s var(--ease-out) .5s forwards}
@keyframes sunRise{to{transform:none}}
.p7 .sun-halo{left:50%;bottom:-1.6rem;width:9.6rem;height:9.6rem;margin-left:-4.8rem;border-radius:50%;opacity:0;transform:scale(.55);
  background:radial-gradient(circle,rgba(255,226,160,.62) 0%,rgba(255,180,100,.26) 30%,rgba(255,150,80,0) 60%)}
.p7.active .sun-halo{animation:halo 5.2s ease-out .6s forwards,breathe 4s ease-in-out 6s infinite alternate}
@keyframes halo{to{opacity:1;transform:scale(1.1)}}
.p7 .rays{left:50%;bottom:-3.2rem;width:12rem;height:12rem;margin-left:-6rem;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,190,.55) 0deg 3deg,rgba(255,236,190,0) 3deg 12deg);
  -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 60%);mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 60%)}
.p7.active .rays{animation:raysIn 3s ease 2.2s forwards,spin 80s linear 2.2s infinite}
@keyframes raysIn{to{opacity:.32}}
.p7 .campus .mount{fill:#2A2142;transition:fill 4s ease .4s}
.p7 .campus .town{fill:#120B1C;transition:fill 4s ease .4s}
.p7.active .campus .mount{fill:#5A3A5C}
.p7.active .campus .town{fill:#2A1426}
.p7 .campus .lights{transition:opacity 4s ease 1s}
.p7.active .campus .lights{opacity:.35}
.vision{position:absolute;left:0;right:0;top:3rem;text-align:center}
.vision h2>span{display:block;font:700 .7rem/1.38 var(--serif);letter-spacing:.14em;padding-left:.14em;white-space:nowrap}
.vision .gold-ch .ch{background-image:linear-gradient(180deg,#FFFFFF 10%,#FFF0CC 50%,#F6D18A 100%)}
.vision h2{filter:drop-shadow(0 .03rem .12rem rgba(20,10,50,.45))}
.vision .wish{margin-top:.42rem;font-size:.3rem;line-height:1.9;letter-spacing:.14em;padding-left:.14em;color:rgba(255,247,232,.94);text-shadow:0 1px 8px rgba(20,10,50,.4)}
.chips{display:flex;justify-content:center;align-items:center;margin:.46rem auto 0;width:6.3rem;height:.62rem;
  border-top:1px solid rgba(255,226,170,.5);border-bottom:1px solid rgba(255,226,170,.5)}
.chips li{display:flex;align-items:center;font:700 .25rem/1 var(--serif);letter-spacing:.12em;color:#FFEBC2;text-shadow:0 1px 6px rgba(20,10,50,.35)}
.chips li+li::before{content:"";display:block;width:.07rem;height:.07rem;margin:0 .19rem;background:#FFD98A;transform:rotate(45deg)}

/* ---------- P8 尾页署名 ---------- */
/* 与封面同一套深红渐变（策划案：简洁深色底 + 金色细线框），中心比封面略收，保持简洁 */
.p8{background-color:#7A161C}
.p8 .bg{background:radial-gradient(ellipse 95% 58% at 50% 42%,#B4262C 0%,#98202A 28%,#7E1820 52%,#561016 80%,#36080C 100%)}
.p8 .frame{position:absolute;left:.6rem;right:.6rem;top:calc(var(--bt) + 1.12rem);bottom:calc(var(--bb) + .44rem);border:1px solid rgba(232,194,122,.6);pointer-events:none}
.p8 .frame::after{content:"";position:absolute;top:.08rem;right:.08rem;bottom:.08rem;left:.08rem;border:1px solid rgba(232,194,122,.24)}
.p8 .frame .c{position:absolute;width:.32rem;height:.32rem;border:2px solid #E8C27A}
.p8 .frame .tl{left:-.06rem;top:-.06rem;border-right:0;border-bottom:0}
.p8 .frame .tr{right:-.06rem;top:-.06rem;border-left:0;border-bottom:0}
.p8 .frame .bl{left:-.06rem;bottom:-.06rem;border-right:0;border-top:0}
.p8 .frame .br{right:-.06rem;bottom:-.06rem;border-left:0;border-top:0}
.finale{position:absolute;left:0;right:0;top:1.85rem;text-align:center}
.finale .badge{width:1.36rem;height:1.36rem;margin:0 auto;filter:drop-shadow(0 0 .14rem rgba(255,200,110,.35))}
.p8 .years{margin-top:.34rem}
.finale h2{margin-top:.5rem;font-family:var(--serif);font-weight:700}
.finale .s1{display:block;font-size:.5rem;line-height:1.4;font-weight:400;letter-spacing:.18em;padding-left:.18em;color:#F3E6CF}
.finale .s2{display:block;margin-top:.12rem;font-size:.74rem;line-height:1.3;letter-spacing:.06em;padding-left:.06em;white-space:nowrap;filter:drop-shadow(0 0 .16rem rgba(255,190,90,.3))}
.btn-replay{display:inline-flex;align-items:center;gap:.08rem;margin-top:.62rem;height:.62rem;padding:0 .36rem;border-radius:.31rem;
  font-size:.23rem;letter-spacing:.2em;color:var(--gold-2);border:1px solid rgba(232,194,122,.6);background:rgba(232,194,122,.06)}
.btn-replay::before{content:"";width:.2rem;height:.2rem;border:2px solid var(--gold-2);border-right-color:transparent;border-radius:50%}
.sign{position:absolute;left:0;right:0;bottom:calc(var(--bb) + 1rem);text-align:center;opacity:0}
.p8.active .sign{animation:fadeIn 1.6s ease 2.4s forwards}
.sign-line{position:relative;display:block;width:1.2rem;height:1px;margin:0 auto .2rem;background:linear-gradient(90deg,rgba(232,194,122,0),#E8C27A,rgba(232,194,122,0))}
.sign-line::after{content:"";position:absolute;left:50%;top:50%;width:.08rem;height:.08rem;margin:-.04rem 0 0 -.04rem;background:#E8C27A;transform:rotate(45deg)}
.sign p{font-size:.22rem;line-height:1.75;letter-spacing:.14em;padding-left:.14em;color:rgba(243,214,160,.8)}

/* ---------- 其他 ---------- */
#toast{position:absolute;left:50%;bottom:calc(var(--bb) + 1.6rem);z-index:80;transform:translate(-50%,.2rem);opacity:0;pointer-events:none;white-space:nowrap;
  padding:.14rem .3rem;border-radius:.3rem;font-size:.24rem;letter-spacing:.06em;color:#FFF3DC;background:rgba(20,4,6,.78);transition:opacity .3s,transform .3s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#rotate{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;align-items:center;justify-content:center;background:#8B1A1A;color:#F8EBD3;font-size:16px;letter-spacing:3px}
@media (orientation:landscape) and (max-height:500px){#rotate{display:flex}}
@media (prefers-reduced-motion:reduce){
  .p1 .beam,.p1 .halo,.p1 .rings,.p6 .rays,.campus .lights>*{animation:none!important}
}