/* ============================================================
   FM56.0 · 中华民族共有精神家园电台
   视觉：一台老式收音机 / 深棕 · 暖黄 · 青铜
   ============================================================ */

:root{
  --ink:#0d0805;
  --ink2:#150d07;
  --wood1:#241509;
  --wood2:#3d2614;
  --wood3:#5b3a1f;
  --wood4:#7a5228;
  --brass:#b8912f;
  --brass-lt:#f2d894;
  --brass-dk:#6d4f16;
  --glow:#ffcf7a;
  --glow-hot:#ffe6b0;
  --paper:#f3e7d0;
  --paper2:#e2d0ad;
  --cream:#efe3cb;
  --red:#b8341d;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC","STSong","SimSun",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* [hidden] 必须压过组件自己的 display，否则“全频段接收”“持续聆听”会在不该出现时露出来 */
[hidden]{display:none!important}

html,body{height:100%;overflow:hidden}
body{
  background:#050302;
  font-family:var(--sans);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:manipulation;
}

#phone{
  position:relative;
  width:100%;max-width:440px;
  height:100dvh;
  margin:0 auto;
  /* overflow:clip —— 不能用 hidden：hidden 会留下可编程滚动的溢出区，
     元素一旦被聚焦（点旋钮、Tab 键、scrollIntoView）整个页面就会被滚走且回不来 */
  overflow:hidden;
  overflow:clip;
  background:
    radial-gradient(120% 90% at 50% 0%,#2a1b10 0%,#120b06 55%,#070403 100%),
    #070403;
  isolation:isolate;
}
/* 底部一线漆红：像器物的暗衬 */
#phone::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(96,24,12,.16) 78%,rgba(96,24,12,.26));
}
/* 广播涟漪：等待时能看见声音的形状 */
#bgRipple{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#bgRipple i{
  position:absolute;left:50%;top:24%;
  width:70px;height:70px;margin:-35px 0 0 -35px;
  border:1px solid rgba(255,207,122,.16);border-radius:50%;
  opacity:0;
  animation:bgRipple 12s linear infinite;
}
#bgRipple i:nth-child(2){animation-delay:3s}
#bgRipple i:nth-child(3){animation-delay:6s}
#bgRipple i:nth-child(4){animation-delay:9s}
@keyframes bgRipple{
  0%{transform:scale(.35);opacity:0}
  9%{opacity:1}
  100%{transform:scale(9.5);opacity:0}
}
/* 巨字水印 */
#bgMark{
  position:absolute;right:-34px;top:27%;z-index:0;
  font-family:var(--serif);font-size:330px;line-height:1;
  color:rgba(242,216,148,.048);pointer-events:none;
  user-select:none;
}
@media (min-width:520px) and (min-height:700px){
  body{display:flex;align-items:center;justify-content:center;
       background:radial-gradient(80% 80% at 50% 40%,#241a12 0%,#080504 100%)}
  #phone{height:min(94dvh,900px);border-radius:34px;
         box-shadow:0 40px 120px rgba(0,0,0,.85),0 0 0 1px rgba(184,145,47,.18)}
}

/* ── 展签式四角框线：整个作品像一件被装裱的展品 ── */
#corners{
  position:absolute;left:10px;right:10px;
  top:calc(var(--sat) + 10px);bottom:calc(var(--sab) + 10px);
  z-index:58;pointer-events:none;
}
#corners i{position:absolute;width:16px;height:16px;border:1px solid rgba(242,216,148,.34)}
#corners i:nth-child(1){left:0;top:0;border-right:none;border-bottom:none}
#corners i:nth-child(2){right:0;top:0;border-left:none;border-bottom:none}
#corners i:nth-child(3){left:0;bottom:0;border-right:none;border-top:none}
#corners i:nth-child(4){right:0;bottom:0;border-left:none;border-top:none}

/* ── 全局质感：颗粒 + 暗角 ─────────────────────────────
   颗粒层比 #phone 略大一圈，被 overflow:clip 裁掉：
   位移走合成器（transform）而不是背景位移（background-position）——
   后者每一帧都要把整屏的噪点重新光栅化，手机上就是肉眼可见的一顿一顿 */
#grain{
  position:absolute;inset:-5%;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-repeat:repeat;
  will-change:transform;
  animation:grainShift 1.1s steps(3,end) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-17px,11px,0)}
  66%{transform:translate3d(13px,-8px,0)}
  100%{transform:translate3d(0,0,0)}
}
#vignette{
  position:absolute;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(115% 78% at 50% 46%,transparent 40%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.72) 100%);
}

/* ── 顶部工具 ─────────────────────────────────────── */
#tools{
  position:absolute;top:calc(var(--sat) + 10px);right:12px;z-index:70;
  display:flex;gap:8px;
}
.tool{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  color:rgba(242,216,148,.5);
  background:rgba(20,12,7,.6);
  border:1px solid rgba(184,145,47,.28);
  border-radius:999px;padding:5px 11px;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:.25s;
}
.tool:active{transform:scale(.94)}
.tool[aria-pressed="true"]{color:var(--ink);background:var(--brass-lt);border-color:var(--brass-lt)}
#muteBtn .tool__off{display:none}
#muteBtn[aria-pressed="true"] .tool__on{display:none}
#muteBtn[aria-pressed="true"] .tool__off{display:inline}

/* ── 屏幕系统 ─────────────────────────────────────── */
#stage{position:absolute;inset:0}
.screen{
  position:absolute;inset:0;z-index:1;
  opacity:0;pointer-events:none;
  transform:scale(1.012);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.screen.is-active{opacity:1;pointer-events:auto;transform:none;z-index:2}
.screen.is-leaving{opacity:0;transform:scale(.985)}
/* 已经离场的页不再参与绘制、也不再跑动画：
   手机上省下的是整屏的合成 + 一组常驻动画（它们原本一直空转）。
   伪元素要单独写一行 —— 通配符选择器管不到 ::before / ::after 上的动画 */
.screen:not(.is-active):not(.is-leaving){visibility:hidden}
.screen:not(.is-active):not(.is-leaving) *,
.screen:not(.is-active):not(.is-leaving) *::before,
.screen:not(.is-active):not(.is-leaving) *::after{animation-play-state:paused!important}

/* ══════════════════════════════════════════════════
   1 · 封面
   ══════════════════════════════════════════════════ */
.cover{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(var(--sat) + 44px) 22px calc(var(--sab) + 18px);
  gap:14px;
}
/* 展柜射灯与浮尘：让封面像陈列在灯下的一件旧物 */
.cover__spot{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cover__spot::before{
  content:"";position:absolute;left:50%;top:-8%;
  width:170%;height:76%;transform:translateX(-50%);
  background:radial-gradient(56% 60% at 50% 26%,rgba(255,214,150,.15),rgba(255,214,150,.045) 46%,transparent 72%);
}
.cover__spot i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#ffd9a0;opacity:0;
  animation:dustFloat 10s ease-in-out infinite;
}
.cover__spot i:nth-child(1){left:26%;top:34%;animation-delay:0s}
.cover__spot i:nth-child(2){left:68%;top:26%;animation-delay:2.2s}
.cover__spot i:nth-child(3){left:42%;top:48%;animation-delay:4.4s}
.cover__spot i:nth-child(4){left:78%;top:44%;animation-delay:6.1s}
.cover__spot i:nth-child(5){left:56%;top:18%;animation-delay:7.8s}
@keyframes dustFloat{
  0%{transform:translate(0,0);opacity:0}
  18%{opacity:.55}
  55%{transform:translate(9px,-30px);opacity:.22}
  100%{transform:translate(-7px,-62px);opacity:0}
}

.cover__head{text-align:center;opacity:0;animation:fadeUp .9s .2s forwards}
.kicker{font-size:10.5px;letter-spacing:.22em;color:rgba(242,216,148,.58)}
.kicker--dim{margin-top:5px;color:rgba(242,216,148,.32);letter-spacing:.16em}

/* 收音机 */
.radio{
  position:relative;width:min(300px,80vw);margin-top:auto;
  opacity:0;animation:fadeUp 1s .4s forwards;
}
.radio__cab{
  position:relative;border-radius:14px;padding:14px 14px 18px;
  background:
    linear-gradient(160deg,rgba(255,255,255,.10) 0%,transparent 30%),
    repeating-linear-gradient(92deg,rgba(0,0,0,.22) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(88deg,rgba(255,220,170,.05) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(93deg,rgba(0,0,0,.30) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),
    linear-gradient(178deg,var(--wood4) 0%,var(--wood3) 22%,var(--wood2) 62%,var(--wood1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,.30),
    inset 0 -3px 8px rgba(0,0,0,.55),
    inset 3px 0 6px rgba(0,0,0,.35),
    inset -3px 0 6px rgba(0,0,0,.35),
    0 22px 44px rgba(0,0,0,.72);
  border:1px solid rgba(0,0,0,.55);
}
/* 木质机脚 */
.radio__feet{display:flex;justify-content:space-between;padding:0 30px;margin-top:-3px;position:relative}
.radio__feet i{
  width:26px;height:9px;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#1a1008,#0b0603);
  box-shadow:0 4px 8px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,220,160,.12);
}
.radio__shadow{
  position:absolute;left:6%;right:6%;bottom:-20px;height:26px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.7),transparent 72%);
  filter:blur(6px);z-index:-1;
}
.radio__plate{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:2px 4px 10px;
}
.radio__brand{
  font-family:var(--mono);font-size:15px;letter-spacing:.16em;font-weight:600;
  color:var(--brass-lt);
  text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 14px rgba(255,207,122,.35);
}
.radio__model{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:rgba(242,216,148,.34)}

/* 刻度盘：底纹是竖排调谐格栅，底边是频率刻度 */
.dial,.tn__dial{
  position:relative;overflow:hidden;border-radius:7px;
  background-image:
    repeating-linear-gradient(90deg,rgba(242,216,148,.085) 0 1px,transparent 1px 100%),
    repeating-linear-gradient(90deg,rgba(242,216,148,.15) 0 1.5px,transparent 1.5px 100%),
    linear-gradient(180deg,#1b1206 0%,#0e0904 48%,#150e05 100%);
  background-size:2.5% 60%,12.5% 60%,100% 100%;
  background-repeat:repeat-x,repeat-x,no-repeat;
  background-position:left 16%,left 16%,left top;
  border:1px solid rgba(0,0,0,.7);
  box-shadow:
    inset 0 0 0 1px rgba(184,145,47,.20),
    inset 0 6px 14px rgba(0,0,0,.75),
    inset 0 -4px 10px rgba(0,0,0,.6),
    0 0 0 2.5px rgba(139,100,32,.55),
    0 0 0 3.5px rgba(0,0,0,.6),
    0 3px 8px rgba(0,0,0,.5);
}
/* 电源指示灯：开机点亮 */
.dial__lamp{
  position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;
  background:#3d2410;z-index:7;
  box-shadow:inset 0 0 2px rgba(0,0,0,.9),inset 0 1px 1px rgba(255,220,160,.15);
  transition:background .7s,box-shadow .7s;
}
.radio.is-on .dial__lamp{
  background:#ffb84a;
  box-shadow:0 0 10px #ff9a3c,0 0 24px rgba(255,154,60,.5);
}
.dial__glass::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(70% 130% at 50% 100%,rgba(255,190,110,0),transparent 72%);
  transition:background 1.2s;
}
.radio.is-on .dial__glass::after{
  background:radial-gradient(70% 130% at 50% 100%,rgba(255,190,110,.22),transparent 74%);
}
.dial{height:64px;margin-bottom:12px}
.dial__glass,.tn__glass{
  position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;
  background:linear-gradient(168deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 26%,transparent 46%);
}
/* 刻度带：左右各留 2.2%，与指针/光点的 pctOf 一致 */
.dial__band,.tn__band{
  position:absolute;left:2.2%;right:2.2%;bottom:0;height:100%;
}
.dial__band::before,.tn__band::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22px;
  background:repeating-linear-gradient(90deg,rgba(184,145,47,.55) 0 1px,transparent 1px 100%);
  background-size:2.5% 100%;background-repeat:repeat-x;
}
.dial__band::after,.tn__band::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40px;
  background:repeating-linear-gradient(90deg,rgba(242,216,148,.92) 0 2px,transparent 2px 100%);
  background-size:12.5% 100%;background-repeat:repeat-x;
}
.dial__band i,.tn__band i{
  position:absolute;bottom:46px;font-family:var(--mono);font-size:9px;
  color:rgba(242,216,148,.55);transform:translateX(-50%);font-style:normal;
}
/* 封面小度盘太矮：隐藏刻度标签，只留读数，避免与 56.0MHz 重叠 */
.dial .dial__band i{display:none}
.dial__needle,.tn__needle{
  position:absolute;top:4px;bottom:4px;width:2px;z-index:5;
  background:linear-gradient(180deg,transparent,var(--glow-hot) 22%,var(--glow-hot) 78%,transparent);
  box-shadow:0 0 8px var(--glow),0 0 20px rgba(255,207,122,.55);
  transition:left .08s linear;
}
.dial__readout{
  position:absolute;top:6px;left:9px;z-index:5;
  font-family:var(--mono);font-size:10px;color:var(--brass-lt);letter-spacing:.1em;
  text-shadow:0 0 10px rgba(255,207,122,.5);
}
.dial__readout i{font-style:normal;font-size:7px;opacity:.55;margin-left:3px}

/* 旋钮 */
.knob{
  position:relative;border-radius:50%;cursor:grab;touch-action:none;
  background:
    radial-gradient(circle at 34% 28%,#f6e3ab 0%,#d3b054 18%,#96742a 46%,#5a4112 76%,#2e2008 100%);
  box-shadow:
    0 5px 12px rgba(0,0,0,.72),
    inset 0 -2px 5px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,236,180,.45),
    0 0 0 1px rgba(0,0,0,.5);
}
.knob:active{cursor:grabbing}
.knob__grip{
  position:absolute;inset:17%;border-radius:50%;
  background:conic-gradient(from 0deg,#3a2a0d,#6d5420,#3a2a0d,#6d5420,#3a2a0d);
  box-shadow:inset 0 0 6px rgba(0,0,0,.7);
}
.knob__mark{
  position:absolute;left:50%;top:7%;width:2px;height:24%;border-radius:2px;margin-left:-1px;
  background:var(--glow-hot);
  box-shadow:0 0 7px var(--glow);transform-origin:50% 186%;
}
.knob--big{width:64px;height:64px}
.knob--big::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(255,207,122,.35);
  animation:pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.16);opacity:0}100%{opacity:0}
}
.knob--tune{width:58px;height:58px}

.radio__foot{display:flex;align-items:center;gap:14px;padding:0 4px}
.grille{
  flex:1;height:62px;border-radius:6px;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.55) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.55) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#1d1208,#0b0603);
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,220,160,.12),
    0 0 0 1.5px rgba(139,100,32,.45),
    0 0 0 2.5px rgba(0,0,0,.55);
}

/* 竖排引文：作品缘起的那句《周易》 */
.cover__quote{
  position:absolute;left:13px;top:118px;z-index:3;
  writing-mode:vertical-rl;
  font-family:var(--serif);font-size:13px;letter-spacing:.42em;line-height:2;
  color:rgba(242,216,148,.4);
  opacity:0;animation:fadeUp 1.4s 1.3s forwards;
}
.cover__quote small{
  font-size:9px;letter-spacing:.34em;
  color:rgba(242,216,148,.26);margin-top:6px;
}
/* 引文末尾的小印 */
.cover__quote::after{
  content:"文";
  display:inline-block;margin-top:16px;
  width:20px;height:20px;line-height:20px;text-align:center;
  font-family:var(--serif);font-size:12px;letter-spacing:0;
  color:#f2e3cf;background:#a8371f;border-radius:2px;
  transform:rotate(3deg);opacity:.9;
  box-shadow:0 2px 6px rgba(40,12,4,.5),inset 0 0 0 1px rgba(255,240,220,.35);
}
@media (max-width:379px){.cover__quote{display:none}}

.cover__title{text-align:center;opacity:0;animation:fadeUp 1.1s .9s forwards}
.cover__title h1{
  font-family:var(--mono);font-size:38px;letter-spacing:.13em;font-weight:600;
  color:var(--brass-lt);
  text-shadow:0 0 26px rgba(255,207,122,.45),0 2px 0 rgba(0,0,0,.8);
}
/* 饰线：题目与副题之间 */
.cover__title .orn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:9px;
}
.cover__title .orn i{
  width:46px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,216,148,.5));
}
.cover__title .orn i:last-child{transform:scaleX(-1)}
.cover__title .orn b{
  width:5px;height:5px;transform:rotate(45deg);
  background:rgba(242,216,148,.65);
  box-shadow:0 0 6px rgba(255,207,122,.4);
}
.cover__title h2{
  margin-top:7px;font-family:var(--serif);font-size:15.5px;font-weight:400;
  letter-spacing:.2em;color:rgba(243,231,208,.82);
}
.cover__cue{
  margin-top:2px;font-size:12px;letter-spacing:.2em;color:rgba(242,216,148,.7);
  opacity:0;animation:fadeUp .9s 1.5s forwards,blink 2.6s 2.4s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.34}}
.cover__foot{
  margin-top:auto;text-align:center;font-size:10px;line-height:1.9;
  letter-spacing:.1em;color:rgba(243,231,208,.4);
  opacity:0;animation:fadeUp 1s 1.9s forwards;
}
.cover__foot .dim{color:rgba(243,231,208,.24)}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════
   2 · 调频台
   ══════════════════════════════════════════════════ */
#s-tuner{padding:calc(var(--sat) + 40px) 0 calc(var(--sab) + 12px)}
.tn__hd{text-align:center;padding:0 22px}
.tn__readout{
  font-family:var(--mono);font-size:42px;letter-spacing:.05em;font-weight:600;
  color:var(--glow-hot);
  text-shadow:0 0 30px rgba(255,207,122,.5);
  font-variant-numeric:tabular-nums;
  transition:text-shadow .3s;
}
.tn__readout i{font-style:normal;font-size:11px;opacity:.42;margin-left:6px;letter-spacing:.16em}
/* is-lock 加在 #freqVal（span）上，不是加在 .tn__readout 上 */
#freqVal.is-lock{color:#fff6df;text-shadow:0 0 42px rgba(255,207,122,.95),0 0 90px rgba(255,180,80,.5)}
/* 锁定后的呼吸灯：信号已被接住 */
#freqVal.is-lock::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:12px;
  border-radius:50%;background:var(--glow-hot);
  box-shadow:0 0 10px var(--glow);vertical-align:middle;
  animation:sigBreathe 1.6s ease-in-out infinite;
}
.tn__hint{margin-top:5px;font-size:11.5px;letter-spacing:.15em;color:rgba(243,231,208,.5);min-height:17px}
.tn__stage{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:6px 20px;touch-action:none;
}
.tn__dial{width:100%;height:285px;border-radius:9px;flex:0 0 auto}
.tn__band{height:100%}
.tn__glow{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(60% 130% at var(--gx,50%) 50%,rgba(255,207,122,.30),transparent 70%);
  transition:opacity .35s;
}
.tn__wave{
  position:relative;width:100%;height:30px;pointer-events:none;opacity:.62;flex:0 0 auto;
}
.tn__wave span{
  position:absolute;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,207,122,.85),rgba(255,207,122,.1));
  transform-origin:bottom center;
}

.tn__signals{position:absolute;inset:0;z-index:3}
.sig{
  position:absolute;bottom:70px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:rgba(255,207,122,.20);border:1px solid rgba(255,207,122,.42);
  transition:.35s;
}
.sig.is-hit{animation:sigPing .7s ease-out}
@keyframes sigPing{0%{transform:scale(1)}40%{transform:scale(3.4);background:rgba(255,230,176,.95)}100%{transform:scale(1)}}
.sig.is-found{
  background:var(--glow-hot);border-color:var(--glow-hot);
  box-shadow:0 0 12px var(--glow),0 0 26px rgba(255,207,122,.7);
  animation:sigBreathe 2.4s ease-in-out infinite;
}
@keyframes sigBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

.tn__hold{
  position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 100% at 50% 50%,rgba(0,0,0,.7),rgba(0,0,0,.35));
  backdrop-filter:blur(2px);
}
.tn__hold svg{width:132px;height:132px;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(255,207,122,.16);stroke-width:3}
.ring__fg{
  fill:none;stroke:var(--glow-hot);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  filter:drop-shadow(0 0 6px var(--glow));
}
.tn__holdtxt{
  position:absolute;font-family:var(--serif);font-size:13px;letter-spacing:.16em;
  color:rgba(243,231,208,.85);text-align:center;line-height:1.8;
}
.tn__holdtxt b{font-family:var(--mono);font-size:20px;color:var(--glow-hot);display:block}

.tn__knobrow{display:flex;align-items:center;justify-content:center;gap:26px;padding:4px 0 2px}
.tn__arrow{
  width:38px;height:38px;border-radius:50%;font-size:12px;cursor:pointer;
  color:rgba(242,216,148,.7);background:rgba(30,19,10,.7);
  border:1px solid rgba(184,145,47,.3);
  transition:.2s;
}
.tn__arrow:active{transform:scale(.9);color:var(--glow-hot);border-color:var(--glow)}

.tn__found{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:10px 18px 0;
}
.chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  padding:4px 9px;border-radius:99px;cursor:pointer;transition:.3s;
  color:rgba(243,231,208,.22);border:1px solid rgba(184,145,47,.16);
  background:rgba(0,0,0,.28);
}
.chip.is-found{
  color:#231607;background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  border-color:var(--glow);box-shadow:0 0 14px rgba(255,207,122,.34);
}
/* 已找到的签条：钤一点朱红 */
.chip.is-found::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#a8371f;margin-right:5px;vertical-align:1px;
}
.tn__count{
  text-align:center;margin-top:9px;font-size:11px;letter-spacing:.16em;
  color:rgba(243,231,208,.45);
}
.tn__count b{font-family:var(--mono);font-size:15px;color:var(--glow-hot)}
.tn__all{
  display:block;margin:9px auto 0;padding:11px 26px;border-radius:99px;cursor:pointer;
  font-family:var(--serif);font-size:13.5px;letter-spacing:.2em;color:#231607;
  background:linear-gradient(180deg,var(--glow-hot),var(--brass));
  border:none;box-shadow:0 0 28px rgba(255,207,122,.5);
  animation:fadeUp .6s both;
}
.tn__toast{
  position:absolute;left:50%;top:calc(var(--sat) + 116px);transform:translate(-50%,-8px);
  z-index:20;pointer-events:none;opacity:0;transition:.35s;
  padding:8px 18px;border-radius:99px;white-space:nowrap;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.12em;
  color:var(--glow-hot);background:rgba(14,8,4,.88);
  border:1px solid rgba(255,207,122,.35);box-shadow:0 0 24px rgba(0,0,0,.7);
}
.tn__toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════
   3—9 · 频率页
   ══════════════════════════════════════════════════ */
#s-freq{display:block;overflow:hidden}
.fx__scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.fx__scene svg{width:100%;height:100%;display:block}
/* 场景压暗层：上端给返回键留一点暗，中段保持通透，下段压黑给文字让位 */
.fx__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,5,3,.54) 0%,
    rgba(8,5,3,.08) 15%,
    rgba(8,5,3,.12) 36%,
    rgba(8,5,3,.70) 52%,
    rgba(6,4,2,.95) 76%,
    rgba(6,4,2,.98) 100%);
}
/* 竖排题签：一字印 + 气质词，像展品右上角的签条 */
.fx__spine{
  position:absolute;right:13px;top:calc(var(--sat) + 62px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;opacity:0;animation:fadeUp 1s .8s forwards;
}
.fx__seal{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;color:#f2e3cf;
  background:#a8371f;border-radius:3px;transform:rotate(3deg);
  box-shadow:0 2px 8px rgba(60,20,8,.4),inset 0 0 0 1.2px rgba(255,240,220,.4);
  opacity:.92;
}
.fx__vtext{
  writing-mode:vertical-rl;font-family:var(--serif);font-size:14px;
  letter-spacing:.4em;color:rgba(255,230,176,.6);
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}
@media (max-width:359px){.fx__spine{display:none}}

.fx__back{
  position:absolute;top:calc(var(--sat) + 12px);left:14px;z-index:12;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  color:rgba(243,231,208,.62);background:rgba(14,9,5,.55);
  border:1px solid rgba(184,145,47,.24);border-radius:99px;
  padding:6px 14px;cursor:pointer;backdrop-filter:blur(6px);transition:.25s;
}
.fx__back:active{transform:scale(.94);color:var(--glow-hot)}

.fx__body{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  padding:0 24px calc(var(--sab) + 28px);
  max-height:88%;overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26px);
          mask-image:linear-gradient(180deg,transparent 0,#000 26px);
  padding-top:34px;
}
/* 频率号 · 单位 · 播放指示灯 */
.fx__head{
  display:flex;align-items:center;gap:9px;
  opacity:0;animation:fadeUp .7s .1s forwards;
}
.fx__no{
  font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:var(--glow);
  text-shadow:0 0 14px rgba(255,207,122,.6);
}
.fx__unit{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  color:rgba(242,216,148,.4);margin-left:-4px;
}
.fx__live{
  width:6px;height:6px;border-radius:50%;margin-left:3px;
  background:var(--glow-hot);box-shadow:0 0 9px var(--glow);
  animation:sigBreathe 1.9s ease-in-out infinite;
}
.fx__title{
  font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:.07em;
  margin-top:7px;color:#fdf4e2;text-shadow:0 2px 18px rgba(0,0,0,.9);
  opacity:0;animation:fadeUp .8s .22s forwards;
}
.fx__sub{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.14em;margin-top:5px;
  color:rgba(243,231,208,.55);
  opacity:0;animation:fadeUp .8s .34s forwards;
}
/* 署名与注脚：这段录音是谁、背后有什么 */
.fx__meta{
  margin-top:11px;
  opacity:0;animation:fadeUp .8s .48s forwards;
}
.fx__meta .cr{
  font-family:var(--serif);font-size:11.5px;letter-spacing:.14em;
  color:rgba(242,216,148,.62);
}
.fx__meta .nt{
  font-family:var(--serif);margin-top:4px;font-size:11px;line-height:1.75;
  letter-spacing:.05em;color:rgba(243,231,208,.44);
}
.fx__meta .cr::before{
  content:"";display:inline-block;width:14px;height:1px;
  background:rgba(242,216,148,.45);vertical-align:middle;margin-right:8px;
}
.fx__narr{
  margin-top:20px;padding-left:14px;border-left:1px solid rgba(255,207,122,.3);
  font-family:var(--serif);font-size:13.5px;line-height:2.05;
  letter-spacing:.05em;color:rgba(243,231,208,.86);
}
.fx__narr p{opacity:0;transform:translateY(10px);transition:opacity .9s,transform .9s}
.fx__narr p.is-on{opacity:1;transform:none}

.fx__card{
  margin-top:20px;padding:19px 18px 21px;border-radius:4px;
  /* 笺纸：上下两道回纹 + 暖纸渐变 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10'><path d='M1 9V1H17V9H9V5H13' fill='none' stroke='%237a4a1a' stroke-opacity='.4' stroke-width='1.4'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10'><path d='M1 9V1H17V9H9V5H13' fill='none' stroke='%237a4a1a' stroke-opacity='.4' stroke-width='1.4'/></svg>"),
    linear-gradient(160deg,var(--paper),var(--paper2));
  background-position:top 6px center,bottom 6px center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:108px 10px,108px 10px,100% 100%;
  color:#2b1d0e;font-family:var(--serif);font-size:13px;line-height:2;
  letter-spacing:.05em;
  box-shadow:0 14px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.5);
  opacity:0;transform:translateY(16px);transition:opacity .9s .35s,transform .9s .35s;
  position:relative;
}
.fx__card::after{
  content:"";position:absolute;inset:4px;border:1px solid rgba(43,29,14,.14);
  border-radius:2px;pointer-events:none;
}
/* 「闻」印：像收藏者盖在纸角的一方小印 */
.fx__card::before{
  content:"闻";
  position:absolute;top:12px;right:13px;width:30px;height:30px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:17px;color:#f2e3cf;
  background:#a8371f;border-radius:3px;transform:rotate(4deg);
  box-shadow:0 2px 8px rgba(60,20,8,.35),inset 0 0 0 1.5px rgba(255,240,220,.4);
  opacity:.92;
}
.fx__card.is-on{opacity:1;transform:none}
.fx__card p+p{margin-top:2px}
.fx__card p:last-child{color:#7a3d1a}

.fx__story{
  margin-top:14px;padding:14px 16px;border-radius:4px;
  font-family:var(--serif);font-size:12px;line-height:1.95;letter-spacing:.04em;
  color:rgba(243,231,208,.78);
  background:rgba(20,12,7,.72);border:1px solid rgba(184,145,47,.22);
  backdrop-filter:blur(5px);
  animation:fadeUp .5s both;
}
.fx__story b{display:block;color:var(--glow-hot);font-weight:400;letter-spacing:.16em;margin-bottom:6px;font-size:11px}

/* 按钮常驻在可视区底部：卡片浮现把内容撑长时也不会被顶出屏幕 */
.fx__acts{
  display:flex;gap:10px;flex-wrap:wrap;
  position:sticky;bottom:0;z-index:3;
  margin-top:22px;padding:16px 0 4px;
  background:linear-gradient(180deg,rgba(10,6,3,0),rgba(10,6,3,.92) 36%,#0a0603 100%);
}
.btn{
  font-family:var(--serif);font-size:13px;letter-spacing:.16em;cursor:pointer;
  padding:12px 24px;border-radius:99px;transition:.25s;border:1px solid transparent;
}
.btn:active{transform:scale(.96)}
.btn--warm{color:#231607;background:linear-gradient(180deg,var(--glow-hot),var(--brass));
  box-shadow:0 0 22px rgba(255,207,122,.36)}
.btn--ghost{color:rgba(243,231,208,.8);background:rgba(20,12,7,.6);
  border-color:rgba(184,145,47,.32);backdrop-filter:blur(5px)}
.btn--ghost:active{color:var(--glow-hot);border-color:var(--glow)}
.fx__acts .btn{flex:1;text-align:center;white-space:nowrap}

/* 长按聆听（56.7）—— 独占一行，避免文案被挤成三行 */
.holdbtn{
  position:relative;overflow:hidden;flex:1 0 100%;
  font-family:var(--serif);font-size:13px;letter-spacing:.16em;
  padding:13px 24px;border-radius:99px;cursor:pointer;
  color:rgba(243,231,208,.72);background:rgba(20,12,7,.7);
  border:1px solid rgba(184,145,47,.32);user-select:none;touch-action:none;
}
.holdbtn__fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,rgba(255,207,122,.30),rgba(255,207,122,.62));
}
.holdbtn span{position:relative;z-index:2}
.holdbtn.is-done{color:#231607;background:linear-gradient(180deg,var(--glow-hot),var(--brass));border-color:transparent}

/* 场景动画基元 */
@keyframes drift{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
@keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
@keyframes flicker{0%,100%{opacity:.85}40%{opacity:.55}70%{opacity:.95}}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-14px)}}
@keyframes inkPulse{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes redIn{0%{opacity:.35}100%{opacity:.85}}
@keyframes fireSway{0%,100%{transform:scaleY(1) rotate(-1deg)}50%{transform:scaleY(1.12) rotate(1.5deg)}}
@keyframes snowShimmer{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes smokeRise{0%{transform:translateY(2px);opacity:0}30%{opacity:.42}100%{transform:translateY(-12px);opacity:0}}
@keyframes haloPulse{0%,100%{opacity:.22}50%{opacity:.6}}
@keyframes scratchFlicker{0%{opacity:.02}14%{opacity:.1}26%{opacity:.03}55%{opacity:.11}72%{opacity:.04}100%{opacity:.02}}
/* 缓推镜头：每个场景进场时轻轻向前推近 */
@keyframes sceneIn{from{transform:scale(1.055)}to{transform:scale(1)}}

.fx__scene svg .an-drift{animation:drift 11s ease-in-out infinite alternate}
.fx__scene svg .an-sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5.5s ease-in-out infinite}
.fx__scene svg .an-tw{animation:twinkle 3.4s ease-in-out infinite}
.fx__scene svg .an-flutter{transform-box:fill-box;transform-origin:50% 0;animation:sway 3.6s ease-in-out infinite}
.fx__scene svg .an-flow{animation:flow 7s linear infinite}
.fx__scene svg .an-ink{animation:inkPulse 7s ease-in-out infinite}
.fx__scene svg .an-flag{transform-box:fill-box;transform-origin:0 50%;animation:sway 2.8s ease-in-out infinite}
.fx__scene svg .an-red{animation:redIn 7s ease-in-out infinite alternate}
.fx__scene svg .an-spark{animation:flicker 1.1s steps(2) infinite}
.fx__scene svg .an-rise{animation:rise 5s ease-in-out infinite alternate}
.fx__scene svg .an-fire{transform-box:fill-box;transform-origin:50% 100%;animation:fireSway 1.7s ease-in-out infinite}
.fx__scene svg .an-snow{animation:snowShimmer 6s ease-in-out infinite}
.fx__scene svg .an-smoke{animation:smokeRise 4.6s ease-in-out infinite}
.fx__scene svg .an-smoke.s2{animation-delay:2.3s}
.fx__scene svg .an-halo{transform-box:fill-box;transform-origin:50% 50%;animation:haloPulse 6s ease-in-out infinite}
.fx__scene svg .an-scratch{animation:scratchFlicker 2.7s steps(6,end) infinite}
.fx__scene svg{animation:sceneIn 9s ease-out both;transform-origin:50% 38%}

/* 合鸣页：地图上的频率标签（跟随地图坐标缩放） */
.ch__map text{
  font-family:var(--serif);font-size:4.1px;text-anchor:middle;
  fill:rgba(255,230,176,0);transition:fill 1.4s .35s;
  paint-order:stroke;stroke:rgba(8,5,3,.88);stroke-width:.9;   /* 描边让字在星图上立得住 */
  letter-spacing:.02em;
}
#s-chorus.is-formed .ch__map text{fill:rgba(255,242,212,.97)}
.ch__map text tspan.k{
  font-family:var(--mono);font-size:3.2px;
  fill:rgba(255,207,122,0);transition:fill 1.4s .35s;
}
#s-chorus.is-formed .ch__map text tspan.k{fill:rgba(255,216,146,.9)}

/* ══════════════════════════════════════════════════
   10 · 全频段合鸣
   ══════════════════════════════════════════════════ */
/* 用垂直流式布局：地图 / 标题 / 旁白 / 底部按钮各占一段，
   屏幕高矮不同都不会互相压住 */
#s-chorus{display:flex;flex-direction:column;overflow:hidden}
.ch__sky{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 70% at 50% 78%,#1a1208 0%,#0c0805 48%,#060403 100%);
  transition:background 4s ease;
}
#s-chorus.is-dawn .ch__sky{
  background:radial-gradient(95% 72% at 50% 84%,#5a3a18 0%,#2e1f11 34%,#120c07 66%,#070504 100%);
}
.ch__mapwrap{
  position:relative;z-index:2;flex:0 0 35%;min-height:0;
  padding-top:calc(var(--sat) + 16px);
  display:flex;align-items:center;justify-content:center;
}
/* 星图背后的柔光：给整幅图一个纵深，比逐个元素加滤镜省得多 */
.ch__mapwrap::before{
  content:"";position:absolute;left:10%;right:10%;top:4%;bottom:2%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,207,122,.14),rgba(255,190,110,.05) 52%,transparent 76%);
}
.ch__map{width:84%;height:100%;overflow:visible}
.ch__stars circle{fill:rgba(255,238,200,.7)}
.ch__stars circle.tw{animation:starTw 4.6s ease-in-out infinite}
@keyframes starTw{0%,100%{opacity:.18}50%{opacity:.8}}
.ch__land{
  fill:url(#chLandFill);
  stroke:rgba(255,228,172,.8);stroke-width:.5;stroke-linejoin:round;
  stroke-dasharray:0 1000;opacity:0;
  transition:stroke-dasharray 5.4s ease,opacity 2s ease;
}
/* 外圈柔光：同一条轮廓再描一遍（不用 drop-shadow 滤镜，手机上便宜得多） */
.ch__land-glow{
  fill:none;
  stroke:rgba(255,206,124,.2);stroke-width:2.4;stroke-linejoin:round;
  stroke-dasharray:0 1000;opacity:0;
  transition:stroke-dasharray 5.4s ease,opacity 2.6s ease;
}
#s-chorus.is-formed .ch__land{stroke-dasharray:1000 0;opacity:1}
#s-chorus.is-formed .ch__land-glow{stroke-dasharray:1000 0;opacity:1}
.ch__lines path{
  fill:none;
  stroke:url(#chLineGrad);stroke-width:.34;stroke-linecap:round;
  stroke-dasharray:0 200;opacity:0;
}
#s-chorus.is-formed .ch__lines path{
  stroke-dasharray:200 0;opacity:1;
  transition:stroke-dasharray 1.6s ease,opacity .9s ease;
}
.ch__dots .dot{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.2)}
.ch__dots .dot .core{fill:#ffe6b0}
.ch__dots .dot .halo{fill:url(#chDotHalo);opacity:0;transition:opacity 1.8s .3s}
#s-chorus.is-formed .ch__dots .dot .halo{opacity:1}
.ch__dots .dot.is-on{
  animation:dotIn .9s both,dotGlow 3s 1s ease-in-out infinite;
}
@keyframes dotIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes dotGlow{0%,100%{opacity:.72}50%{opacity:1}}

.ch__center{
  position:relative;z-index:5;flex:0 0 auto;
  text-align:center;pointer-events:none;padding:4px 0 2px;
}
.ch__recv{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.32em;
  color:rgba(255,207,122,.0);transition:color 1s;
}
.ch__big{
  font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:.2em;
  color:rgba(255,240,210,0);text-shadow:0 0 46px rgba(255,207,122,.75);
  transform:scale(.96);
  transition:color 1.6s .3s,transform 2s .3s cubic-bezier(.22,1,.36,1);
  margin-right:-.2em;line-height:1.35;
}
#s-chorus.is-formed .ch__recv{color:rgba(255,207,122,.72)}
#s-chorus.is-formed .ch__big{color:#fff6e2;transform:none}

.ch__lines2{
  position:relative;z-index:6;flex:1 1 auto;min-height:0;overflow-y:auto;
  /* 句子从上往下依次浮现（像一段慢慢写完的话），不往上顶 */
  padding:16px 26px 6px;text-align:center;
  font-family:var(--serif);font-size:13.6px;line-height:1.95;letter-spacing:.055em;
  color:rgba(243,231,208,.92);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px);
          mask-image:linear-gradient(180deg,transparent 0,#000 14px);
}
.ch__lines2 p{
  opacity:0;transform:translateY(9px);transition:opacity 1.1s,transform 1.1s;
  text-shadow:0 2px 14px rgba(0,0,0,.95);
}
.ch__lines2 p.is-on{opacity:1;transform:none}
.ch__lines2 p.gap{margin-top:12px}
.ch__lines2 p.strong{color:#fff6e2;font-size:15.5px;letter-spacing:.12em}
.ch__lines2 p.quote{color:var(--glow-hot);font-size:16px;letter-spacing:.12em}
.ch__lines2 p.credit{font-size:10px;letter-spacing:.1em;color:rgba(243,231,208,.36);margin-top:3px}

.ch__foot{
  position:relative;z-index:7;flex:0 0 auto;text-align:center;
  padding:10px 0 calc(var(--sab) + 20px);
  opacity:0;transition:opacity .8s;
}
.ch__foot.is-on{opacity:1}
/* 回纹：收束处的装饰线 */
.ch__meander{
  width:108px;height:10px;margin:0 auto 11px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10'><path d='M1 9V1H17V9H9V5H13' fill='none' stroke='%23b8912f' stroke-opacity='.55' stroke-width='1.4'/></svg>") repeat-x;
  background-size:18px 10px;
  opacity:.6;
}
.ch__tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  color:rgba(255,207,122,.66);margin-bottom:11px;
}
/* 放左上角：右上角被"旁白/静音"两个开关占着，会挡住点击 */
.ch__skip{
  position:absolute;top:calc(var(--sat) + 12px);left:14px;z-index:9;
  font-size:11px;letter-spacing:.16em;padding:6px 12px;border-radius:99px;cursor:pointer;
  color:rgba(243,231,208,.42);background:rgba(14,9,5,.5);
  border:1px solid rgba(184,145,47,.2);
  backdrop-filter:blur(6px);
}
.ch__skip[hidden]{display:none}

/* ══════════════════════════════════════════════════
   11 · 收听卡
   ══════════════════════════════════════════════════ */
#s-card{padding:calc(var(--sat) + 24px) 0 calc(var(--sab) + 16px);overflow-y:auto}
.cd__wrap{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:0 22px 20px;margin:auto 0;
}
.cd__lead{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.2em;
  color:rgba(243,231,208,.55);opacity:0;animation:fadeUp .8s .1s forwards;
}
.cd__frame{
  width:100%;max-width:290px;border-radius:5px;overflow:hidden;
  box-shadow:0 22px 46px rgba(0,0,0,.75),0 0 0 1px rgba(184,145,47,.3);
  opacity:0;transform:translateY(20px) scale(.97);
  animation:cardIn 1s .25s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cardIn{to{opacity:1;transform:none}}
.cd__frame canvas{width:100%;height:auto;display:block}
.cd__no{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:rgba(243,231,208,.42);opacity:0;animation:fadeUp .8s .6s forwards;
}
.cd__no b{color:var(--glow-hot);font-weight:600}
.cd__acts{display:flex;gap:10px;width:100%;max-width:290px;opacity:0;animation:fadeUp .8s .75s forwards}
.cd__acts .btn{flex:1;text-align:center;padding:12px 8px;font-size:12.5px}
.cd__replay{
  font-size:11px;letter-spacing:.14em;color:rgba(243,231,208,.34);
  background:none;border:none;cursor:pointer;padding:6px;
  opacity:0;animation:fadeUp .8s .9s forwards;
}
.cd__replay:active{color:var(--glow-hot)}
.cd__credit{
  text-align:center;font-size:9px;line-height:1.9;letter-spacing:.1em;
  color:rgba(243,231,208,.24);
  opacity:0;animation:fadeUp .8s 1s forwards;
}

/* 分享遮罩 */
#shareMask{
  position:absolute;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(4,2,1,.93);backdrop-filter:blur(8px);padding:24px;
  animation:fadeUp .35s both;
}
#shareMask[hidden]{display:none}
.share__box{display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.share__box img{max-width:100%;max-height:74dvh;border-radius:5px;
  box-shadow:0 20px 50px rgba(0,0,0,.8),0 0 0 1px rgba(184,145,47,.35)}
#shareTip{font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:rgba(243,231,208,.6)}

/* ── 真实录音载入提示 ─────────────────────────────── */
#loadNote{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--sab) + 8px);z-index:80;pointer-events:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  color:rgba(242,216,148,.42);white-space:nowrap;
  transition:opacity .6s;
}
#loadNote.is-done{opacity:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.15s!important}
}

/* ── 小屏（手机）：大面积毛玻璃与整屏缩放最吃 GPU，
      把“面积大”的那几处换成更实的底，小药丸保留磨砂质感 ── */
@media (max-width:560px){
  .fx__story{background:rgba(20,12,7,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
  .tn__hold{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:radial-gradient(60% 100% at 50% 50%,rgba(0,0,0,.82),rgba(0,0,0,.52))}
  #shareMask{background:rgba(4,2,1,.96);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* 整幅 SVG 的进场缩放：9 秒的矢量重光栅在手机上太贵，缩到 1.7 秒 */
  .fx__scene svg{animation-duration:1.7s}
}