*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#04060f}
body{font-family:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",Georgia,serif}
#scene{position:fixed;inset:0;display:block}

/* 标题：浮现几秒后淡出，之后长时间隐去，再缓缓浮现 */
#title{
  position:fixed;left:7vw;top:16vh;z-index:2;
  font-size:clamp(30px,4.4vw,68px);font-weight:400;
  color:#fdf8ec;letter-spacing:.42em;text-indent:.42em;white-space:nowrap;
  opacity:0;pointer-events:none;user-select:none;
  text-shadow:0 0 26px rgba(200,216,255,.50),0 0 76px rgba(126,162,255,.26);
  animation:titleCycle 30s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes titleCycle{
  0%   {opacity:0;   letter-spacing:.95em; filter:blur(9px)}
  12%  {opacity:.93; letter-spacing:.42em; filter:blur(0)}
  26%  {opacity:.93; letter-spacing:.44em; filter:blur(0)}
  36%  {opacity:0;   letter-spacing:.62em; filter:blur(7px)}
  100% {opacity:0;   letter-spacing:.95em; filter:blur(9px)}
}
@media (prefers-reduced-motion:reduce){ #title{animation-duration:48s} }

/* 声音开关：默认就是开的，右下角只留一枚小图标。
   浏览器不放行自动播放时（state 还是 suspended）才多出一行提示，
   点过任意地方接上之后就收掉 */
#snd{
  position:fixed;right:22px;bottom:20px;z-index:3;
  display:flex;align-items:center;gap:8px;
  padding:7px 11px;border:1px solid rgba(196,216,255,.20);border-radius:999px;
  background:rgba(6,14,42,.30);color:#e6eeff;
  font:inherit;font-size:13px;letter-spacing:.12em;
  opacity:.46;cursor:pointer;user-select:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .5s ease,border-color .5s ease,transform .35s ease;
}
#snd:hover,#snd:focus-visible{opacity:.94;border-color:rgba(214,230,255,.42);outline:none}
#snd:active{transform:scale(.97)}
#snd svg{width:19px;height:19px;flex:none}
#snd .lbl{display:none;white-space:nowrap}
#snd.wait .lbl{display:inline}
#snd .w1,#snd .w2{opacity:0;transition:opacity .6s ease}
#snd.on .w1{opacity:.95}
#snd.on .w2{opacity:.62}