:root{  --ink:#f2f4f6;
  --ink-dim:#8a93a0;
  --ink-faint:#525a66;
  --accent:#5b8dee;
  --panel:rgba(10,12,16,.55);
  --panel-line:rgba(255,255,255,.10);
  --panel-line-strong:rgba(91,141,238,.55);
  --font-serif:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Noto Sans SC",sans-serif;
  --font-song:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Noto Sans SC",sans-serif;
  --font-sans:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Noto Sans SC",sans-serif;
  --font-latin-serif:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Noto Sans SC","Segoe UI",sans-serif;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;color:var(--ink);font-family:var(--font-song);}
html{
  background:radial-gradient(1200px 800px at 50% 42%, rgba(8,10,14,.95) 0%, rgba(2,3,5,.99) 55%, #000 100%);
}

/* ===== 深空星尘层（底层） ===== */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.42) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 64%, rgba(233,237,247,.34) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 12%, rgba(201,166,255,.36) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 78%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 68% 34%, rgba(255,223,158,.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 58%, rgba(233,237,247,.36) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 20%, rgba(201,166,255,.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.26) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 36% 42%, rgba(255,223,158,.26) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 90%, rgba(233,237,247,.26) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 6%, rgba(255,255,255,.24) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 88% 46%, rgba(255,223,158,.24) 0%, transparent 100%),
    radial-gradient(1px 1px at 4% 38%, rgba(201,166,255,.24) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 22% 6%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 92%, rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(1.1px 1.1px at 78% 74%, rgba(233,237,247,.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 30%, rgba(201,166,255,.22) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 6% 56%, rgba(255,255,255,.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 52%, rgba(255,223,158,.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 84%, rgba(255,255,255,.18) 0%, transparent 100%);
  background-repeat:repeat;
}
body{
  background:radial-gradient(1200px 800px at 50% 42%, #05070a 0%, #020304 52%, #000 100%);
}
#stageWrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
#aura{
  position:absolute;left:50%;top:50%;width:min(1500px, 96vw);height:min(1500px, 96vh);z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,207,122,.10) 0%, rgba(143,107,255,.06) 30%, transparent 62%);
  border-radius:50%;
  animation:auraPulse 7s ease-in-out infinite;
}
@keyframes auraPulse{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}
#stage{
  position:relative;z-index:1;
  width:1920px;height:1080px;
  flex:0 0 auto;
  transform-origin:center center;
  will-change:transform;
  transition:transform .38s cubic-bezier(.2,.9,.3,1);
}
#c{position:absolute;inset:0;width:1920px;height:1080px;display:block;}

/* ===== 顶部标题 ===== */
#titleBlock{
  position:absolute;top:44px;left:54px;
  user-select:none;pointer-events:none;
}
#titleBlock h1{
  font-family:var(--font-serif);
  font-size:56px;font-weight:700;letter-spacing:.14em;text-indent:.14em;
  line-height:1.12;
  background:linear-gradient(180deg,#fff8e8 30%,#ffdf9e 70%,#c9a6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,207,122,.35));
  position:relative;
}
#titleBlock h1.en{
  font-family:var(--font-latin-serif);
  font-size:44px;font-weight:400;letter-spacing:.22em;text-indent:0;
  line-height:1.2;
  background:linear-gradient(180deg,#f4f8ff 30%,#dce7ff 70%,#9db4ef 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(125,165,250,.35));
  position:relative;
}
#titleBlock .sub.en{
  font-family:var(--font-latin-serif);
  font-weight:300;color:#8fa0c4;letter-spacing:.22em;font-size:13px;
}
#titleBlock.lang-swap h1,#titleBlock.lang-swap .sub{
  animation:hudLang .5s cubic-bezier(.2,.85,.3,1) backwards;
}
@keyframes hudLang{
  from{opacity:0; transform:translateY(7px);}
  to{opacity:1; transform:translateY(0);}
}
/* 20261005 全局中英切换微动效：工具栏翻译后，各面板/卡片/画中画统一一次轻淡入，
   克制不抢戏——仅 opacity 过渡，无位移，避免打扰正在进行的视角动效 */
.langSw{animation:langSwIn .28s ease-out backwards;}
@keyframes langSwIn{from{opacity:.86;}to{opacity:1;}}
#titleBlock h1::after{
  content:'';position:absolute;left:0;bottom:-13px;height:1px;width:236px;
  background:linear-gradient(90deg,rgba(255,207,122,.8),rgba(255,207,122,.25) 55%,transparent);
  box-shadow:0 0 12px rgba(255,207,122,.45);
}
#titleBlock .sub{
  margin-top:25px;font-family:var(--font-song);font-size:14px;letter-spacing:.3em;
  color:var(--ink-dim);white-space:nowrap;
}
/* ===== T10-5 工具栏（八项优化⑥：底部边缘滑入，无收拢小钮） ===== */
#toolbar{
  position:absolute;left:38px;bottom:38px;display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:999px;z-index:940;
  background:linear-gradient(135deg,rgba(12,16,30,.86),rgba(8,10,20,.92));
  border:1px solid rgba(91,141,238,.30);
  box-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 0 20px rgba(90,120,220,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  max-width:360px;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .32s cubic-bezier(.25,.9,.3,1), transform .32s cubic-bezier(.25,.9,.3,1);
}
#toolbar.open{opacity:1;transform:translateY(0);pointer-events:auto;}
#toolbar .tbBtn{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(91,141,238,.34);
  background:rgba(91,141,238,.08);
  color:#9db6ff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .22s;user-select:none;
}
#toolbar .tbBtn:hover{background:rgba(91,141,238,.22); box-shadow:0 0 16px rgba(91,141,238,.35); color:#fff;}
#toolbar .tbBtn.off{opacity:.4; border-color:rgba(91,141,238,.14);}
#toolbar .tbBtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#toolbar .tbDiv{flex:0 0 auto;width:1px;height:22px;background:rgba(91,141,238,.22);}
#tbVol{
  flex:0 0 auto;width:84px;height:3px;appearance:none;-webkit-appearance:none;
  background:rgba(91,141,238,.22);border-radius:2px;outline:none;cursor:pointer;
}
#tbVol::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#9db6ff;box-shadow:0 0 10px rgba(91,141,238,.6);cursor:pointer;
}
#tbLbl{
  flex:0 0 auto;font:11px/1 var(--font-latin-serif);color:rgba(155,180,240,.62);
  letter-spacing:.12em;min-width:30px;text-align:center;
}
#infoBtn{font-family:var(--font-latin-serif);font-style:italic;font-size:15px;}

#panel .pTitle::before{
  content:"";width:3px;height:12px;border-radius:2px;margin-right:9px;flex:0 0 auto;
  background:linear-gradient(180deg,#7aa4f5,#4a7ce0);
  box-shadow:0 0 10px rgba(91,141,238,.65);
}
#panel .pTitle .miniStatus{font-family:var(--font-sans);letter-spacing:.1em;font-size:11px;color:var(--ink);}
.row{display:flex;align-items:center;justify-content:space-between;margin:9px 0;}
.row label{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.14em;color:#e2e7f5;}
/* 开关 */
.switch{position:relative;width:38px;height:20px;flex:0 0 auto;cursor:pointer;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .track{
  position:absolute;inset:0;border-radius:20px;
  background:rgba(255,255,255,.08);border:1px solid var(--panel-line);
  transition:background .25s,border-color .25s;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#6b7496;transition:transform .25s,background .25s;
}
.switch input:checked + .track{background:rgba(255,207,122,.16);border-color:var(--panel-line-strong);}
.switch input:checked + .track::after{transform:translateX(18px);background:var(--accent);box-shadow:0 0 8px rgba(91,141,238,.7);}
/* 滑杆 */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:118px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.12);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px rgba(91,141,238,.6);
}
input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border:none;border-radius:50%;background:var(--accent);
}
/* 视角 */
#viewGroup{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;}
.viewBtn{
  border:1px solid rgba(255,207,122,.30);border-radius:12px;background:rgba(255,207,122,.06);
  color:var(--ink);font-size:11.5px;letter-spacing:.12em;padding:7px 0;cursor:pointer;
  font-family:var(--font-sans);transition:all .2s;
}
.viewBtn:hover{color:#fff8e8;border-color:var(--panel-line-strong);background:rgba(255,207,122,.14);box-shadow:0 0 14px rgba(255,207,122,.28);}
.viewBtn.on{color:#14121f;background:linear-gradient(135deg,#ffdf9e,#c9a6ff);border-color:transparent;font-weight:700;box-shadow:0 0 16px rgba(255,207,122,.45);}
.viewBtn:active{transform:translateY(1px) scale(.97);}
.viewBtn{transition:color .18s,background .18s,border-color .18s,box-shadow .18s,transform .12s;}

/* ===== 字族徽章 ===== */
#famBadge{
  display:flex;visibility:hidden;opacity:0;
  position:absolute;top:36px;left:50%;transform:translateX(-50%);
  z-index:16;flex-direction:column;align-items:center;gap:6px;
  width:min(520px, 78vw);box-sizing:border-box;
  padding:14px 34px 14px;
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,223,158,.18),rgba(143,107,255,.18));
  border:1px solid rgba(255,223,158,.45);
  box-shadow:0 0 22px rgba(255,207,122,.25);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-sans);letter-spacing:.14em;
  transition:opacity .28s ease,visibility .28s ease;
}
#famBadge.show{visibility:visible;opacity:1;animation:badgeIn .45s cubic-bezier(.2,.9,.3,1.1);}
#famBadge .fbName{color:var(--accent);font-size:17px;font-weight:700;letter-spacing:.24em;text-indent:.24em;}
#famBadge .fbDesc{font-family:var(--font-serif);font-size:14px;line-height:1.5;letter-spacing:.02em;color:var(--ink);text-align:center;white-space:nowrap;}
@keyframes badgeIn{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.94);filter:blur(3px);}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0);}}

/* ===== 星族册页（右侧圆角面板） ===== */
#famSheet{
  position:absolute;top:36px;right:16px;bottom:26px;z-index:28;
  width:min(300px, 34vw);
  background:linear-gradient(160deg,rgba(12,14,24,.92),rgba(8,9,16,.88));
  border:1px solid rgba(255,223,158,.28);
  border-radius:20px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;
  transition:transform .52s cubic-bezier(.2,.9,.3,1),opacity .38s,visibility .38s;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 0 60px rgba(143,107,255,.05);
}
#famSheet.show{transform:translateX(0);opacity:1;visibility:visible;}
#famSheet .fsHead{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;gap:10px;}
#famSheet .fsName{font-family:var(--font-serif);font-size:26px;color:#fff3dd;letter-spacing:.12em;}
#famSheet .fsClose{width:30px;height:30px;flex:0 0 auto;border:none;cursor:pointer;background:rgba(255,255,255,.07);border-radius:50%;color:var(--ink-dim);font-size:14px;font-family:var(--font-sans);}
#famSheet .fsClose:hover{color:#fff;background:rgba(91,141,238,.24);}
#famSheet .fsHeadDiv{border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:16px;}
#famSheet .fsDesc{margin:14px 24px 14px;font-family:var(--font-serif);font-size:14.5px;line-height:1.7;letter-spacing:.04em;color:var(--ink);border-left:2px solid rgba(255,207,122,.35);padding-left:13px;}
#famSheet .fsList{flex:1;overflow-y:auto;padding:2px 16px 16px;scrollbar-width:thin;scrollbar-color:rgba(91,141,238,.55) rgba(255,255,255,.03);}
#famSheet .fsList::-webkit-scrollbar{width:7px;}
#famSheet .fsList::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:999px;}
#famSheet .fsList::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(91,141,238,.62),rgba(91,141,238,.30),rgba(91,141,238,.62));
  border:1px solid rgba(125,165,250,.5);border-radius:999px;
  box-shadow:0 0 8px rgba(91,141,238,.28),inset 0 0 4px rgba(125,165,250,.18);
}
#famSheet .fsList::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(125,170,250,.82),rgba(91,141,238,.5),rgba(125,170,250,.82));
  box-shadow:0 0 12px rgba(91,141,238,.45),inset 0 0 4px rgba(125,165,250,.22);
}
#famSheet .fsList::-webkit-scrollbar{width:5px;}
#famSheet .fsList::-webkit-scrollbar-thumb{background:rgba(91,141,238,.5);border-radius:3px;}
#famSheet .fsItem{display:flex;align-items:center;gap:13px;padding:9px 13px 9px 11px;border-radius:12px;cursor:pointer;position:relative;transition:background .16s;margin-bottom:3px;animation:fsItemIn .34s cubic-bezier(.2,.9,.3,1) both;}
@keyframes fsItemIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
#famSheet .fsItem::before{
  content:'';position:absolute;left:0;top:24%;bottom:24%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),rgba(201,166,255,.5));
  opacity:0;transition:opacity .16s;
}
#famSheet .fsItem:hover{background:rgba(255,223,158,.08);}
#famSheet .fsItem:hover::before{opacity:1;}
#famSheet .fsItem.active{background:linear-gradient(120deg,rgba(255,207,122,.16),rgba(201,166,255,.05));}
#famSheet .fsItem.active::before{opacity:1;}
#famSheet .fsItem .fsCh{font-family:var(--font-serif);font-size:20px;color:#fff6e6;width:30px;text-align:center;transition:color .16s,text-shadow .16s;}
#famSheet .fsItem.active .fsCh{color:#ffdf9e;text-shadow:0 0 12px rgba(255,207,122,.6);}
#famSheet .fsItem .fsPy{font-family:var(--font-latin-serif);font-size:13px;letter-spacing:.1em;color:rgba(185,203,240,.95);flex:1;font-synthesis:none;}
#famSheet .fsItem .fsNo{font-family:var(--font-latin-serif);font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.12em;}
#famSheet .fsItem.active .fsNo{color:var(--accent);}
#famSheet .fsFoot{padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.06);}
#famSheet .fsBack{width:100%;padding:11px 0;border:1px solid rgba(255,223,158,.35);border-radius:999px;background:rgba(255,223,158,.08);color:var(--accent);font-size:12px;letter-spacing:.18em;cursor:pointer;font-family:var(--font-sans);transition:background .16s,border-color .16s;text-indent:.18em;}
#famSheet .fsBack:hover{background:rgba(255,223,158,.17);border-color:rgba(255,223,158,.6);}

/* ===== 悬停浮标 ===== */
#tooltip{
  display:flex;visibility:hidden;opacity:0;
  position:absolute;left:0;top:0;z-index:20;
  align-items:center;gap:10px;
  padding:8px 14px 8px 10px;border-radius:9px;
  background:var(--panel);border:1px solid var(--panel-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  pointer-events:none;
  transform:translate(-50%,-116%) scale(.92);
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.9,.3,1.15),visibility .2s ease;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
#tooltip.show{opacity:1;visibility:visible;transform:translate(-50%,-120%) scale(1);}
@keyframes ttIn{from{opacity:0;transform:translate(-50%,-116%) scale(.92);}to{opacity:1;transform:translate(-50%,-120%) scale(1);}}
#tooltip .ttChar{
  font-family:var(--font-serif);font-size:30px;line-height:1;color:#fff8e8;
  text-shadow:0 0 16px rgba(255,207,122,.8);
}
#tooltip .ttMeta{font-size:11.5px;letter-spacing:.18em;color:var(--ink-dim);line-height:1.6;font-family:var(--font-serif);}
#tooltip .ttMeta b{font-family:var(--font-latin-serif);color:var(--accent);font-weight:600;}

/* ===== 字的世界 · 底部信息条（不遮星云） ===== */
#card{
  position:absolute;left:50%;bottom:26px;z-index:30;
  transform:translate(-50%,14px) scale(.97);transform-origin:bottom center;
  width:min(600px, calc(100vw - 48px));
  background:linear-gradient(150deg,rgba(14,16,28,.94),rgba(8,9,16,.9));
  border:1px solid rgba(255,223,158,.24);
  border-radius:15px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,207,122,.08);
  display:flex;flex-direction:column;
  padding:14px 22px 16px;
  opacity:0;visibility:hidden;
  transition:opacity .3s,transform .3s,visibility .3s;
}
#card.show{
  opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,207,122,.16),0 0 44px rgba(255,207,122,.10);
}
#card.show .cardLead{animation:cardLift .5s cubic-bezier(.2,.9,.3,1.15) both;}
#card.show .cardBody{animation:cardLift .5s cubic-bezier(.2,.9,.3,1.15) .08s both;}
@keyframes cardLift{from{opacity:0;transform:translateY(14px);filter:blur(5px);}to{opacity:1;transform:none;filter:blur(0);}}
#card .cardHead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
#card .cardClose{
  width:30px;height:30px;flex:0 0 auto;border:none;cursor:pointer;
  background:rgba(255,255,255,.06);border-radius:50%;color:var(--ink-dim);font-size:14px;
  font-family:var(--font-sans);transition:color .16s,background .16s;
}
#card .cardClose:hover{color:var(--ink);background:rgba(255,255,255,.14);}
#card .cardLead{display:flex;align-items:center;gap:14px;}
#card .cardChar{
  font-family:var(--font-serif);font-size:56px;line-height:1;color:#fff8e8;
  text-shadow:0 0 30px rgba(255,207,122,.8),0 3px 8px rgba(0,0,0,.5);
}
#card .cardPy{
  font-family:var(--font-latin-serif);
  font-size:18px;font-weight:400;font-synthesis:none;
  letter-spacing:.12em;color:#f0d9a6;margin-bottom:4px;
}
/* 拼音读音按钮：风格蓝胶囊（与 BACK TO NEBULA 一致），电子辞典式点击朗读 */
#card .cardSpeak{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:30px;min-width:38px;padding:0 10px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(91,141,238,.45);background:linear-gradient(135deg,rgba(91,141,238,.14),rgba(143,107,255,.10));
  color:#8fb2f0;font-family:var(--font-latin-serif);font-size:13px;line-height:1;letter-spacing:.04em;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .12s;
}
#card .cardSpeak:hover{
  background:linear-gradient(135deg,rgba(91,141,238,.30),rgba(143,107,255,.22));border-color:rgba(122,164,245,.75);color:#fff;
  box-shadow:0 0 14px rgba(91,141,238,.45);
}
#card .cardSpeak:active{transform:scale(.92);}


#cruisePanel{position:fixed; top:36px; left:50%; transform:translateX(-50%) translateY(-10px) scale(.92); z-index:900;
  background:linear-gradient(160deg,rgba(24,18,10,.93),rgba(12,10,7,.91));
  border:1px solid rgba(255,207,122,.38); border-radius:16px; padding:16px 22px 15px;
  box-shadow:0 0 36px rgba(255,207,122,.16),0 24px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0; pointer-events:none; transition:opacity .32s,transform .32s,visibility .32s; text-align:center; width:min(560px,76vw); box-sizing:border-box;}
#cruisePanel.show{opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto;}
#cruiseTitle{display:flex; align-items:baseline; justify-content:center; gap:12px; margin-bottom:12px; padding:0 26px; text-align:center;}
#cruiseTitle .ctTitle{font-family:var(--font-sans);color:#ffd9a0;font-size:15px;font-weight:300;letter-spacing:.26em;text-indent:.26em;text-shadow:0 0 10px rgba(255,207,122,.25);}
#cruiseTitle .ctSep{font-family:var(--font-sans);color:rgba(255,217,160,.72);font-size:14px;font-weight:300;letter-spacing:.12em;}
#cruiseTitle .ctChar{font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;font-size:19px;color:#fff;letter-spacing:.1em;}
#cruiseBody{font:30px/1.9 "KaiTi","STKaiti","KaiTi_GB2312",serif; color:rgba(200,212,238,.6); letter-spacing:.14em; white-space:nowrap;}
#cruiseBody .cpCh{display:inline-block; transition:color .5s, text-shadow .5s, transform .5s;}
#cruiseBody .cpCh.cur{color:#fff4dc; text-shadow:0 0 24px rgba(255,210,130,.8); transform:scale(1.14);}
#cruiseBody .cpCh.done{color:#ffdf9e; text-shadow:0 0 10px rgba(255,207,122,.35);}
#cruiseBody .cpPunc{color:rgba(200,212,238,.4); transition:color .5s; font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;}
#cruiseBody .cpPunc.cur{color:#fff4dc; text-shadow:0 0 10px rgba(255,210,130,.6);}
#cruiseBody .cpPunc.done{color:#ffdf9e; text-shadow:0 0 6px rgba(255,207,122,.3);}
#cruiseBody .cpPunc.todo{color:rgba(200,212,238,.4);}
#cruiseSrc{display:flex;align-items:baseline;justify-content:center;margin-top:11px;
  font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;font-size:15px;
  color:rgba(206,220,246,.9);letter-spacing:.08em;text-shadow:0 0 8px rgba(140,175,255,.12);
  white-space:nowrap;min-height:23px;}
#cruisePanel.done{box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 34px rgba(255,207,122,.22);
  border-color:rgba(255,207,122,.5);}
#cruiseSum{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,207,122,.16);
  font:12px/1.6 var(--font-sans);
  letter-spacing:.16em;color:rgba(180,200,255,.7);white-space:nowrap;
}
#cruiseSum .csBtn,#cruiseSum .csPause{
  border:1px solid rgba(255,207,122,.3);border-radius:999px;color:#ffe9c4;
  background:rgba(255,207,122,.08);padding:0 12px;cursor:pointer;letter-spacing:.2em;
  min-width:150px;text-align:center;height:30px;display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:all .22s;
}
#cruiseSum .csBtn:hover,#cruiseSum .csPause:hover{border-color:#ffd9a0;background:rgba(255,207,122,.18);color:#fff;box-shadow:0 0 14px rgba(255,207,122,.3);}
#cruiseSum .csBtn.ctGold{border-color:rgba(255,213,140,.45);color:#ffdf9e;background:rgba(255,207,122,.12);}
#cruiseSum .csBtn.ctGold:hover{background:rgba(255,207,122,.24);color:#fff4dc;box-shadow:0 0 16px rgba(255,207,122,.4);}
/* 巡航面板自制悬停提示：样式化替换原生 title，金蓝风格与面板一致 */
#cruiseTip.csTip{
  position:absolute;left:50%;bottom:-38px;transform:translateX(-50%) translateY(-6px) scale(.94);
  padding:5px 12px;white-space:nowrap;pointer-events:none;z-index:910;
  font-family:var(--font-sans);font-size:11.5px;font-weight:300;letter-spacing:.14em;color:#d8e2f5;
  background:linear-gradient(150deg,rgba(20,16,10,.96),rgba(10,9,6,.94));
  border:1px solid rgba(255,207,122,.4);border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 12px rgba(255,207,122,.14);
  opacity:0;transition:opacity .22s ease,transform .22s ease;
}
#cruiseTip.csTip.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
#cruiseSum .csPause{display:inline-flex;align-items:center;gap:6px;
  transition:all .22s;}
#cruiseSum .csPause:hover{border-color:#ffd9a0;background:rgba(255,207,122,.18);color:#fff;box-shadow:0 0 14px rgba(255,207,122,.3);}
#cruiseSum .csPause.paused{color:#ffe1a6;border-color:rgba(255,213,140,.4);background:rgba(255,207,122,.10);}


#cruiseTag{display:none; margin:8px 0 4px; font:11px/1.5 var(--font-latin-serif); letter-spacing:.18em; text-indent:.18em; color:#ffdf9e; background:rgba(255,207,122,.10); border:1px solid rgba(255,213,140,.30); border-radius:10px; padding:7px 12px;}
#cruiseTag.show{display:block;}
#card .lkHead{display:flex; align-items:center; gap:0;}
#card .lkHead .cruiseBtn{margin-left:auto;}
#card .lkHead::before,#card .defHead::before{
  content:"";width:3px;height:12px;border-radius:2px;margin-right:9px;flex:0 0 auto;
  background:linear-gradient(180deg,#8fb0f2,#5b8dee);
  box-shadow:0 0 8px rgba(91,141,238,.5);
}
.cruiseBtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:300 13px/1 var(--font-sans); letter-spacing:.18em; text-indent:.08em; color:#ffd9a0; background:rgba(255,207,122,.10); border:1px solid rgba(255,213,140,.34); border-radius:999px; padding:7px 16px; min-width:150px; cursor:pointer; transition:all .22s; flex:0 0 auto;}
.cruiseBtn .cbIcon{font-family:var(--font-sans);font-size:15px;line-height:1;color:#ffdfa8;}
.cruiseBtn:hover{background:rgba(255,207,122,.22); color:#fff4dc; box-shadow:0 0 14px rgba(255,207,122,.3);}

#card .cardLinks{display:none; margin-top:10px; padding-top:10px; border-top:1px solid rgba(91,141,238,.18);}
#card .cardLinks.show{display:block;}
#card .lkHead{font:13px/1.6 var(--font-latin-serif); letter-spacing:.2em; color:#5b8dee; margin-bottom:8px;}
#card .defHead{display:flex;align-items:center;font:13px/1.6 var(--font-latin-serif); letter-spacing:.2em; color:#5b8dee; margin-bottom:6px;}
#card .lkRow{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 4px; margin:0 0 8px; padding-left:0;}
#card .lkSrc{font:12.5px/1.7 var(--font-song); color:#a9c2f8; letter-spacing:.05em; margin:3px 0 2px;}
#card .lkArr{color:#ffdf9e; font:14.5px/1.7 var(--font-song); letter-spacing:.03em; margin:0 1px;}
#card .lkBtn{background:none; border:none; padding:0; margin:0; color:#ffdf9e; font:14.5px/1.7 var(--font-song); cursor:pointer; letter-spacing:.03em; text-decoration:underline; text-decoration-color:rgba(255,223,158,.30); text-underline-offset:3px;}
#card .lkRow .lkBtn:first-child{padding-left:0;}
#card .lkBtn:hover{color:#fff; text-shadow:0 0 7px rgba(255,223,158,.85); text-decoration-color:rgba(255,255,255,.75);}
#card .lkBtn.cur{color:#fff; text-shadow:0 0 9px rgba(255,236,200,.95);}
#card .defTx .lkJump{background:none; border:none; padding:0; margin:0; color:#ffdf9e; font:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(255,223,158,.35); text-underline-offset:3px;}
#card .defTx .lkJump:hover{color:#fff; text-decoration-color:rgba(255,255,255,.8); text-shadow:0 0 6px rgba(255,223,158,.6);}




#bottle{position:fixed; left:50%; top:50%; transform:translate(-50%,-46%) scale(.82); width:430px; max-width:88vw;
  background:linear-gradient(165deg, rgba(16,20,36,.94), rgba(8,10,20,.96));
  border:1px solid rgba(255,213,140,.30); border-radius:18px; padding:28px 32px 24px;
  box-shadow:0 24px 80px rgba(0,0,0,.6), inset 0 0 40px rgba(90,120,220,.06), 0 0 0 1px rgba(120,150,255,.06);
  opacity:0; pointer-events:none; z-index:1200; transition:opacity .45s ease, transform .55s cubic-bezier(.18,.9,.28,1.15); text-align:center;}
#bottle.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
.btHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.btTitle{font:400 15px/1 var(--font-latin-serif); letter-spacing:.32em; text-indent:.32em; color:rgba(255,213,140,.78);}
.btClose{width:30px;height:30px;flex:0 0 auto;border:none;cursor:pointer;background:rgba(91,141,238,.10);border-radius:50%;color:#8a93a0;font-size:14px;font-family:var(--font-sans);transition:color .16s,background .16s;}
.btClose:hover{color:#fff;background:rgba(91,141,238,.24);}
.btStage{display:none;}
.btStage.show{display:block; animation:btFade .5s ease;}
@keyframes btFade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.guaDisc{position:relative; width:182px; height:182px; margin:10px auto 18px;
  transform-style:preserve-3d; transform:rotateX(10deg);
  animation:guaEnter .55s cubic-bezier(.2,.9,.3,1.15) both;}
@keyframes guaEnter{from{opacity:0; transform:rotateX(10deg) scale(.82);} to{opacity:1; transform:rotateX(10deg) scale(1);}}
.guaDisc::before{content:''; position:absolute; inset:-12px; border-radius:50%;
  border:1px solid rgba(91,141,238,.16); box-shadow:0 0 26px rgba(91,141,238,.14), inset 0 0 18px rgba(91,141,238,.08);
  animation:guaHalo 4.5s ease-in-out infinite;}
@keyframes guaHalo{0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:1; transform:scale(1.025);}}
.guaDust{position:absolute; inset:0; pointer-events:none;}
.guaDust span{position:absolute; width:2px; height:2px; border-radius:50%; background:#cfe0ff;
  box-shadow:0 0 7px rgba(143,176,242,.95); opacity:0;
  animation:guaDust var(--d-dur,4.4s) ease-in-out var(--d-delay,0s) infinite;}
@keyframes guaDust{0%,100%{opacity:0; transform:translate(0,0) scale(.55);}
  35%{opacity:.85;} 60%{opacity:.6; transform:translate(var(--d-x,9px),var(--d-y,-9px)) scale(1);}}
.guaRing{position:absolute; inset:0;}
.guaRing svg{width:100%; height:100%; animation:ringSpin var(--ring-dur,3.2s) linear infinite; filter:drop-shadow(0 0 16px rgba(255,207,122,.3));}
@keyframes ringSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
.guaTai{position:absolute; left:50%; top:50%; width:118px; height:118px; margin:-59px 0 0 -59px; animation:taiSpin var(--tai-dur,5.6s) linear infinite;}
@keyframes taiSpin{from{transform:rotate(0deg);} to{transform:rotate(-360deg);}}
.guaTai svg{width:100%; height:100%;}
.guaYaoLine{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:8px; width:96px; align-items:center;}
.guaYaoLine i{display:block; height:3px; border-radius:2px; width:96px;
  opacity:0; transform:scaleX(.2); box-shadow:0 0 14px rgba(255,213,140,.55);}
.guaYaoLine i.yang{background:linear-gradient(90deg, rgba(255,224,160,.95), rgba(255,242,210,.98));}
.guaYaoLine i.yin{background:linear-gradient(90deg, rgba(255,224,160,.95) 0 42%, transparent 42% 58%, rgba(255,224,160,.95) 58% 100%);}
.guaYaoLine i.arr{animation:yaoIn .34s cubic-bezier(.2,.9,.3,1.2) forwards;}
@keyframes yaoIn{from{opacity:0; transform:scaleX(.2);} to{opacity:1; transform:scaleX(1);}}
.guaHint{font:13px/1.7 "KaiTi","STKaiti",serif; letter-spacing:.42em; text-indent:.42em; color:rgba(230,238,255,.75); animation:btFade 1.2s ease .4s backwards;}
.guaPic{display:flex; flex-direction:column; gap:7px; width:110px; margin:0 auto 14px; align-items:center; opacity:0; animation:btFade .5s ease .15s forwards;
  position:relative; padding:12px 16px; border:1px solid rgba(91,141,238,.30); border-radius:2px;
  box-shadow:0 0 20px rgba(91,141,238,.22), inset 0 0 14px rgba(91,141,238,.10);}
.guaPic::before,.guaPic::after{content:''; position:absolute; width:10px; height:10px; border:1px solid rgba(143,176,242,.75);}
.guaPic::before{left:-1px; top:-1px; border-right:none; border-bottom:none;}
.guaPic::after{right:-1px; bottom:-1px; border-left:none; border-top:none;}
.guaPic i{display:block; height:3.5px; border-radius:2px; width:110px; box-shadow:0 0 14px rgba(255,213,140,.5);}
.guaPic i.yang{background:linear-gradient(90deg, rgba(255,224,160,.95), rgba(255,242,210,.98));}
.guaPic i.yin{background:linear-gradient(90deg, rgba(255,224,160,.95) 0 42%, transparent 42% 58%, rgba(255,224,160,.95) 58% 100%);}
.guaName{font:40px/1.3 "KaiTi","STKaiti","KaiTi_GB2312",serif; color:#fff4dc; text-shadow:0 0 30px rgba(255,210,130,.5); margin-bottom:6px; letter-spacing:.1em;}
.guaYao{font:12px/1.6 var(--font-latin-serif); letter-spacing:.2em; color:rgba(255,213,140,.72); margin-bottom:14px;}
.guaCi{font:16px/1.9 "KaiTi","STKaiti","KaiTi_GB2312",serif; color:rgba(226,232,248,.88); padding:0 10px; margin-bottom:6px;}
.btChar{font:84px/1.15 "KaiTi","STKaiti","KaiTi_GB2312",serif; color:#fff4dc; text-shadow:0 0 34px rgba(255,210,130,.55), 0 0 80px rgba(255,180,100,.25); margin-bottom:8px; letter-spacing:.06em;}
.btPy{font:300 18px/1.5 var(--font-latin-serif); letter-spacing:.16em; color:rgba(228,238,255,.95); margin-bottom:12px; font-synthesis:none;}
.btDef{display:none;}
.btStar.en-lang{font-family:var(--font-latin-serif); font-weight:300; letter-spacing:.08em;}
.btStar{font:15.5px/1.9 "KaiTi","STKaiti",serif; letter-spacing:.1em; color:rgba(255,222,160,.95);}
.btStarRow{display:flex; align-items:baseline; gap:12px; border-top:1px solid rgba(255,213,140,.18); border-bottom:1px solid rgba(255,213,140,.18); padding:12px 6px; margin-bottom:16px; text-align:left;}
.btMeta{display:flex; align-items:baseline; gap:12px; margin:0 6px 10px; font-synthesis:none;}
.btLabel{flex:none; width:60px; text-align:left; white-space:nowrap; font:15px/1.9 "KaiTi","STKaiti",serif; letter-spacing:.24em; color:rgba(200,168,110,.88);}
.btMetaTxt{font:300 15px/1.9 var(--font-latin-serif); letter-spacing:.14em; color:rgba(228,238,255,.95); font-synthesis:none;}
.btFoot{display:flex; gap:10px; justify-content:center;}
.btTake,.btRelease{font:14px/1 "KaiTi","STKaiti",serif; letter-spacing:.18em; color:#fff4dc; background:rgba(255,207,122,.12); border:1px solid rgba(255,213,140,.4); border-radius:12px; padding:10px 12px; min-width:150px; text-align:center; cursor:pointer; transition:all .2s;}
.btTake:hover,.btRelease:hover{background:rgba(255,207,122,.24); box-shadow:0 0 16px rgba(255,207,122,.3); transform:translateY(-1px);}
.encRow{margin-top:10px; border-top:1px solid rgba(255,213,140,.14); padding-top:10px;}
#encBtn{width:100%; font:14px/1 "KaiTi","STKaiti",serif; letter-spacing:.22em; color:#ffdf9e; background:rgba(255,207,122,.10); border:1px solid rgba(255,213,140,.34); border-radius:999px; padding:9px 0; cursor:pointer; transition:all .2s;}
#encBtn:hover{background:rgba(255,207,122,.22); box-shadow:0 0 14px rgba(255,207,122,.28);}

#card .cardBody{
  display:flex;flex-direction:column;gap:9px;
  border-top:1px solid rgba(255,207,122,.22);
  margin-top:11px;padding-top:12px;
}
#card .cardDef{
  font-size:14.5px;line-height:1.7;letter-spacing:.04em;color:var(--ink);
  text-align:left;margin:0;padding:0 16px 0 0;
  display:flex;flex-direction:column;justify-content:flex-start;
  height:auto;min-height:74px;max-height:124px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(91,141,238,.55) rgba(255,255,255,.03);
}
/* 释义区保证约 3 行中文高度（14px×1.7×3≈71.4px→74px）：
   默认英文一行时版面均衡不塌陷；切换中文后内容超限由滚动条承载（追加7） */
#card .cardDef.threeLine{min-height:74px;}
#card .cardDef::-webkit-scrollbar{width:7px;}
#card .cardDef::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:999px;}
#card .cardDef::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(91,141,238,.62),rgba(91,141,238,.30),rgba(91,141,238,.62));
  border:1px solid rgba(125,165,250,.5);border-radius:999px;
  box-shadow:0 0 8px rgba(91,141,238,.28),inset 0 0 4px rgba(125,165,250,.18);
}
#card .cardDef::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(125,170,250,.82),rgba(91,141,238,.5),rgba(125,170,250,.82));
  box-shadow:0 0 12px rgba(91,141,238,.45),inset 0 0 4px rgba(125,165,250,.22);
}
#card .cardDef .defLine{display:flex;align-items:baseline;gap:9px;opacity:0;animation:defIn .42s cubic-bezier(.2,.8,.3,1) forwards;}
#card .cardDef .defLine + .defLine{margin-top:4px;}
#card .cardDef .defLine > span:last-child{flex:1;min-width:0;overflow-wrap:break-word;}
#card .cardDef.scroll{
  height:auto;max-height:124px;justify-content:flex-start;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(91,141,238,.55) rgba(255,255,255,.03);
}
#card .cardDef.scroll::-webkit-scrollbar{width:7px;}
#card .cardDef.scroll::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:999px;}
#card .cardDef.scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(91,141,238,.62),rgba(91,141,238,.30),rgba(91,141,238,.62));
  border:1px solid rgba(125,165,250,.5);border-radius:999px;
  box-shadow:0 0 8px rgba(91,141,238,.28),inset 0 0 4px rgba(125,165,250,.18);
}
#card .cardDef.scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(125,170,250,.82),rgba(91,141,238,.5),rgba(125,170,250,.82));
  box-shadow:0 0 12px rgba(91,141,238,.45),inset 0 0 4px rgba(125,165,250,.22);
}
#card .cardDef.scroll .defLine + .defLine{margin-top:3px;}
@keyframes defIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
#card .cardDef .defDot{color:#5b8dee;font-size:8px;line-height:1;flex:0 0 auto;transform:translateY(-1px);text-shadow:0 0 2px rgba(91,141,238,.22);}
#card .cardDef .defSep{color:rgba(120,140,170,.55);}
#card .cardMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.06);margin-top:13px;
  height:42px;box-sizing:border-box;}
#card .cardNo{font-size:11.5px;letter-spacing:.2em;color:var(--ink-dim);font-family:var(--font-serif);
  margin-left:auto;}
#card .cardNo b{font-family:var(--font-latin-serif);color:var(--accent);font-weight:600;}
#card .cardFam{
  display:none;align-items:center;
  padding:6px 15px;
  border:1px solid rgba(255,207,122,.34);
  border-radius:999px;
  background:linear-gradient(120deg, rgba(255,207,122,.13), rgba(201,166,255,.06));
  box-shadow:inset 0 0 14px rgba(255,207,122,.05), 0 0 20px rgba(255,207,122,.07);
  font-family:var(--font-serif);font-size:13px;letter-spacing:.24em;
}
#card .cardFam.show{display:inline-flex;animation:cardLift .45s cubic-bezier(.2,.9,.3,1.15) .06s both;}
#card .cardFam .cfName{color:#ffdf9e;font-weight:600;letter-spacing:.24em;text-indent:.24em;}

/* ===== 点亮进度遮罩（极简冷调封面） ===== */
#veil{
  position:absolute;inset:0;z-index:40;overflow:hidden;
  background:radial-gradient(1100px 700px at 50% 46%, #0a0d18 0%, #020308 78%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .9s ease .08s, transform .9s cubic-bezier(.3,.7,.2,1) .08s;
  cursor:pointer;
}
#veil.done{opacity:0;transform:scale(1.045);pointer-events:none;
  transition:opacity .55s ease .02s, transform .55s cubic-bezier(.3,.7,.2,1) .02s;}
/* 转跳序列退：点击进入后，封面元素自下而上依次淡出，星云随之显露 */
#veil.done .vStars,#veil.done .vTitle,#veil.done .vEn,#veil.done .vLine,#veil.done .vDiv{
  opacity:0 !important;transform:translateY(-14px);
}
#veil.done .vStars{transition:opacity .42s ease .01s;}
#veil.done .vTitle{transition:opacity .3s ease .04s,transform .3s ease .04s;}
#veil.done .vEn{transition:opacity .28s ease .08s,transform .28s ease .08s;}
#veil.done .vLine{transition:opacity .24s ease .12s,transform .24s ease .12s;}
#veil.done .vDiv{transition:opacity .22s ease .16s,transform .22s ease .16s;}
/* 点击瞬间反馈：进度条与标题微亮，消除"无响应"硬切感 */
#veil.clk .vTitle span{filter:drop-shadow(0 0 26px rgba(91,141,238,.5)) brightness(1.12);}
#veil.clk .vBar{background:rgba(255,255,255,.16);}
#veil.clk .vBar i{box-shadow:0 0 16px rgba(91,141,238,.85);}
/* 呼吸星点：冷调宇宙背景中的白色星屑 */
.vStars{position:absolute;inset:0;pointer-events:none;}
.vStar{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--td,3.8s) ease-in-out var(--dl,0s) infinite;
}
/* 呼吸星点：冷调宇宙背景中的白色星屑 */
.vStars{position:absolute;inset:0;pointer-events:none;}
.vStar{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--td,4.2s) ease-in-out var(--dl,0s) infinite;
}
@keyframes twinkle{0%,100%{opacity:.05;transform:scale(.78);}50%{opacity:1;transform:scale(1.24);}}
@keyframes vUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes vChUp{from{opacity:0;transform:translateY(26px) scale(.94);}to{opacity:1;transform:none;}}
/* ENTER 引导：进度满后蓝光呼吸 + 微浮，暗示可点击进入 */
@keyframes vPulse{
  0%,100%{box-shadow:0 0 18px rgba(91,141,238,.30);transform:translateY(0);}
  50%{box-shadow:0 0 34px rgba(110,160,255,.55);transform:translateY(-3px);}
}
/* 进度完成闪光：满条后光晕脉冲一次 */
@keyframes vFlash{0%{filter:brightness(1);}40%{filter:brightness(1.9);}100%{filter:brightness(1.15);}}
#veil .vTitle{
  display:flex;gap:.22em;
  font-family:var(--font-sans);font-size:92px;line-height:1;font-weight:300;
  letter-spacing:.3em;text-indent:.3em;
}
#veil .vTitle span{
  background:linear-gradient(180deg,#ffffff 40%,#c7d3e6 78%,#7fa6ef 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(91,141,238,.32));
  animation:vChUp .9s cubic-bezier(.2,.9,.3,1) both;
}
#veil .vTitle .vT1{animation-delay:.10s;}
#veil .vTitle .vT2{animation-delay:.18s;filter:drop-shadow(0 0 34px rgba(91,141,238,.6));}
#veil .vTitle .vT3{animation-delay:.26s;}
#veil .vTitle .vT4{animation-delay:.34s;}
#veil .vEn{
  margin-top:22px;font-family:var(--font-latin-serif);
  font-size:15px;letter-spacing:.14em;font-weight:400;
  color:#9fb2d2;text-shadow:0 0 16px rgba(91,141,238,.25);
  animation:vUp 1.1s ease .22s both;
  white-space:nowrap;
}
#veil .vBottom{position:absolute;bottom:12vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;}
#veil .vLine{display:flex;flex-direction:column;align-items:center;gap:12px;animation:vUp 1.1s ease .34s both;}
#veil .vBar{width:min(340px,64vw);height:3px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden;}
#veil .vBar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#5b8dee,#a9c2f6);border-radius:3px;box-shadow:0 0 10px rgba(91,141,238,.55);}
#veil .vCount{font-family:var(--font-latin-serif);font-size:13px;letter-spacing:.14em;color:#6d7a8f;text-align:center;transition:color .5s;}
#veil .vCount #vCountT{color:#dbe4f5;font-size:15px;text-shadow:0 0 10px rgba(91,141,238,.35);}
/* 进度区与进入区分隔线：极淡蓝光 */
#veil .vDiv{width:min(340px,60vw);height:1px;margin-top:22px;
  background:linear-gradient(90deg,transparent,rgba(143,176,242,.55),transparent);
  box-shadow:0 0 12px rgba(143,176,242,.4);animation:vUp 1.1s ease .4s both;}
#veil #vEnter{
  margin-top:18px;padding:12px 64px;border:1px solid rgba(91,141,238,.55);border-radius:999px;
  background:rgba(91,141,238,.07);color:#cfe0ff;font-family:var(--font-latin-serif);
  font-size:15px;letter-spacing:.42em;text-indent:.42em;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,background .2s,border-color .2s,box-shadow .2s;
}
#veil.ent #vEnter{opacity:1;pointer-events:auto;transform:none;animation:vPulse 2.6s ease-in-out infinite;}
#veil.ent .vCount{color:#aab6cc;}
#veil.ent .vBar i{animation:vFlash .9s ease .05s 1;}
#veil #vEnter:hover{background:rgba(91,141,238,.16);border-color:#7fa6ef;box-shadow:0 0 22px rgba(91,141,238,.35);color:#fff;}
#veil #vEnter:active{transform:translateY(1px);}
#veil.done #vEnter{opacity:0;pointer-events:none;transition:opacity .24s ease .12s;}

/* WebGL 不可用时的兜底 */
#fallback{
  display:none;position:absolute;inset:0;z-index:60;align-items:center;justify-content:center;
  text-align:center;letter-spacing:.2em;color:var(--ink-dim);font-size:15px;line-height:2;
}

/* ===== 画中画 · 单字微世界显示器 ===== */
#pip{
  position:absolute;left:46px;top:50%;transform:translateY(-50%);
  width:408px;z-index:12;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1);
}
#pip.show{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(6px);}
.pipFrame{
  position:relative;border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56,66,148,.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(15,20,40,.86), rgba(9,12,26,.92));
  border:1px solid rgba(148,163,255,.30);
  box-shadow:
    0 0 56px rgba(143,107,255,.18),
    0 0 24px rgba(61,74,172,.14),
    inset 0 0 70px rgba(4,6,14,.62),
    inset 0 0 0 1px rgba(148,163,255,.06);
  padding:18px;
}
.pipFrame::before{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(148,163,255,.15);border-radius:13px;pointer-events:none;
}
.pipCtrl{
  position:relative;z-index:3;
  display:flex;flex-direction:column;gap:3px;
  margin-top:12px;padding:6px 6px;
  border:1px solid rgba(91,141,238,.26);border-radius:12px;
  background:rgba(8,12,26,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pipCtrl .pcRow{display:flex;align-items:stretch;gap:6px;}
.pipCtrl .pGroup{flex:1;display:flex;align-items:center;gap:3px;padding:3px 4px;justify-content:flex-start;}
.pipCtrl .pSep{width:1px;align-self:stretch;margin:4px 0;background:rgba(91,141,238,.16);}
.pipCtrl .pLbl{font-size:10.5px;letter-spacing:.1em;color:#8a93a0;font-family:var(--font-latin-serif);margin-right:2px;min-width:56px;height:24px;display:inline-flex;align-items:center;justify-content:flex-start;white-space:nowrap;}
.pipCtrl .pipBtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:24px;padding:0 8px;border:1px solid rgba(91,141,238,.26);border-radius:7px;
  background:rgba(91,141,238,.05);color:#aab3c0;font-size:11px;line-height:1;
  cursor:pointer;font-family:var(--font-latin-serif);letter-spacing:.04em;
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s;
}
.pipCtrl .pipBtn:hover{border-color:#5b8dee;color:#fff;background:rgba(91,141,238,.16);}
.pipCtrl .pipBtn:active{transform:translateY(1px);}
.pipCtrl .pipBtn.on{
  background:#5b8dee;border-color:#5b8dee;color:#fff;
  box-shadow:0 0 12px rgba(91,141,238,.45);
}
.pipCtrl .pipVal{min-width:34px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#dfe7ff;font-family:var(--font-latin-serif);letter-spacing:.03em;}
.pipCtrl .pPoseG .pipBtn{flex:1;min-width:0;padding:0 6px;font-size:11.5px;}
.pipFrame::after{
  content:'';position:absolute;inset:0;border-radius:18px;
  border:1px solid rgba(255,207,122,.20);
  mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 18%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.25) 82%,#000 100%);
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 18%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.25) 82%,#000 100%);
  pointer-events:none;
}
#pipC{
  display:block;width:100%;height:360px;border-radius:10px;
  background:radial-gradient(260px 220px at 50% 46%, rgba(24,32,72,.6) 0%, rgba(7,10,24,.9) 70%, #05060f 100%);
}
/* 四角刻度 */
.pipCorners{position:absolute;inset:0;pointer-events:none;z-index:2;}
.pipCorners i{position:absolute;width:22px;height:22px;pointer-events:none;}
.pipCorners i:nth-child(1){left:28px;top:26px;border-left:2px solid rgba(91,141,238,.85);border-top:2px solid rgba(91,141,238,.85);border-top-left-radius:6px;}
.pipCorners i:nth-child(2){right:28px;top:26px;border-right:2px solid rgba(91,141,238,.85);border-top:2px solid rgba(91,141,238,.85);border-top-right-radius:6px;}
.pipCorners i:nth-child(3){left:28px;bottom:118px;border-left:2px solid rgba(91,141,238,.85);border-bottom:2px solid rgba(91,141,238,.85);border-bottom-left-radius:6px;}
.pipCorners i:nth-child(4){right:28px;bottom:118px;border-right:2px solid rgba(91,141,238,.85);border-bottom:2px solid rgba(91,141,238,.85);border-bottom-right-radius:6px;}
/* 扫描线 */
.pipScan{
  position:absolute;left:18px;right:18px;height:50px;pointer-events:none;
  top:0;
  background:linear-gradient(180deg,transparent,rgba(148,163,255,.05) 46%,rgba(148,163,255,.12) 52%,transparent);
  animation:pipScan 6s linear infinite;
  opacity:.7;
}
@keyframes pipScan{from{transform:translateY(0);}to{transform:translateY(370px);}}

/* ===== SpaceX · 05 极简深空（Minimal Deep Space）===== */
#titleBlock h1{font-family:var(--font-sans);font-weight:300;letter-spacing:.34em;text-indent:.34em;font-size:52px;
  background:linear-gradient(180deg,#ffffff 40%,#c7d3e6 100%);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 16px rgba(91,141,238,.25));}
#titleBlock h1::after{background:linear-gradient(90deg,rgba(255,255,255,.6),transparent);
  box-shadow:none;width:180px;}
#titleBlock .sub{font-family:var(--font-sans);font-weight:300;color:#8a93a0;letter-spacing:.4em;}
#infoBtn{border-radius:999px;border:1px solid rgba(91,141,238,.5);background:rgba(91,141,238,.08);
  color:#c7d3e6;font-family:var(--font-latin-serif);letter-spacing:.24em;
  box-shadow:0 0 22px rgba(91,141,238,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
#infoBtn:hover{border-color:#5b8dee;color:#fff;background:rgba(91,141,238,.16);box-shadow:0 0 28px rgba(91,141,238,.30);}
/* ===== 右下控制面板（定位基座；外观由下方极简深空覆盖） ===== */
#panel{
  position:absolute;right:54px;bottom:44px;width:288px;
  padding:16px 16px 14px;
  user-select:none;
}
#panel{border-radius:14px;border:1px solid rgba(91,141,238,.28);
  background:linear-gradient(160deg,rgba(16,20,32,.92),rgba(10,12,18,.88));
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 32px rgba(91,141,238,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
/* 进入字族/单字视角时，右侧搜索与控制面板淡出让位（P3） */
#searchPanel,#panel{transition:opacity .38s ease, transform .45s cubic-bezier(.2,.9,.3,1);}
#searchPanel.uiHide,#panel.uiHide{opacity:0; transform:translateX(30px); pointer-events:none;}
#panel .pTitle{border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:10px;
  font-family:var(--font-sans);font-size:14px;letter-spacing:.28em;color:#e8ecf2;
  text-shadow:0 0 12px rgba(143,176,242,.35);
  margin-bottom:12px;display:flex;align-items:center;}
#panel .pTitle .miniStatus{margin-left:auto;font-family:var(--font-sans);letter-spacing:.1em;font-size:13px;color:#8a93a0;}
#panel .row{column-gap:12px;}
#panel .row label{font-family:var(--font-sans);letter-spacing:.14em;color:#b6bfcc;font-size:14px;}
#panel .row label{font-family:var(--font-sans);letter-spacing:.14em;color:#b6bfcc;}
#panel input[type=range]{accent-color:#5b8dee;}
#panel input[type=number]{
  width:58px;padding:4px 6px;border:1px solid rgba(91,141,238,.26);border-radius:8px;
  background:rgba(91,141,238,.05);color:#dfe7ff;font-family:var(--font-sans);
  font-size:15px;text-align:center;outline:none;
  -moz-appearance:textfield;appearance:textfield;
}
#panel input[type=number]::-webkit-inner-spin-button,#panel input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#panel input[type=number]:focus{border-color:#5b8dee;box-shadow:0 0 10px rgba(91,141,238,.25);}
#viewGroup{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#viewGroup .viewBtn{border:1px solid rgba(91,141,238,.26);border-radius:999px;padding:8px 0;
  background:rgba(91,141,238,.05);color:#aab3c0;font-family:var(--font-sans);font-size:14px;letter-spacing:.1em;
  cursor:pointer;transition:background .16s,border-color .16s,color .16s;}
#viewGroup .viewBtn.on{background:rgba(91,141,238,.24);color:#e3ecff;border-color:#5b8dee;
  box-shadow:0 0 12px rgba(91,141,238,.40);font-weight:600;}
#viewGroup .viewBtn:hover{border-color:#5b8dee;color:#fff;}
#viewGroup .viewBtn.on:hover{background:rgba(91,141,238,.34);color:#fff;border-color:#7aa4f5;
  box-shadow:0 0 16px rgba(91,141,238,.55);}
#panel .switch .track{background:rgba(255,255,255,.14);}
#panel .switch input:checked + .track{background:rgba(91,141,238,.8);}
#panel .switch input:checked + .track::after{background:#fff;}
/* ===== 搜索面板（独立于控制面板，同宽同风格） ===== */
#searchPanel{
  position:absolute;right:54px;bottom:326px;width:288px;
  padding:16px 16px 14px;
  border-radius:14px;border:1px solid rgba(91,141,238,.28);
  background:linear-gradient(160deg,rgba(16,20,32,.92),rgba(10,12,18,.88));
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 32px rgba(91,141,238,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  user-select:none;z-index:6;
}
#searchPanel .pTitle{
  font-family:var(--font-sans);font-size:14px;letter-spacing:.28em;color:#e8ecf2;
  text-shadow:0 0 12px rgba(143,176,242,.35);
  margin-bottom:12px;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:10px;
}
#searchPanel .pTitle::before{
  content:"";width:3px;height:12px;border-radius:2px;margin-right:9px;flex:0 0 auto;
  background:linear-gradient(180deg,#7aa4f5,#4a7ce0);
  box-shadow:0 0 10px rgba(91,141,238,.65);
}
#searchPanel .pTitle .miniStatus{margin-left:auto;font-family:var(--font-sans);letter-spacing:.1em;font-size:13px;color:#8a93a0;}
.searchRow{display:flex;gap:8px;align-items:center;}
#searchInput{
  flex:1;min-width:0;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(91,141,238,.26);background:rgba(255,255,255,.05);
  color:#e8ecf2;font-family:var(--font-sans);font-size:15px;outline:none;
  transition:border-color .16s,box-shadow .16s;
}
  color:var(--ink);font-family:var(--font-serif);font-size:15px;letter-spacing:.06em;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
#searchInput::placeholder{color:rgba(255,255,255,.32);font-size:13px;letter-spacing:.04em;}
#searchInput:focus{border-color:#5b8dee;box-shadow:0 0 10px rgba(91,141,238,.25);}
#searchBtn{
  flex:0 0 66px;height:28px;min-width:66px;padding:0 10px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border:1px solid rgba(91,141,238,.5);background:rgba(91,141,238,.14);
  color:#bcd3ff;font-family:var(--font-sans);font-size:14px;letter-spacing:.08em;
  transition:background .16s,border-color .16s,color .16s;
}
#searchBtn:hover{background:rgba(91,141,238,.28);border-color:#7aa4f5;color:#fff;}
#searchClear{
  flex:0 0 66px;height:28px;min-width:66px;padding:0 10px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border:1px solid rgba(91,141,238,.26);background:rgba(91,141,238,.05);
  color:#aab3c0;font-family:var(--font-sans);font-size:14px;letter-spacing:.08em;
  transition:background .16s,border-color .16s,color .16s;
}
#searchClear:hover{background:rgba(91,141,238,.14);border-color:#5b8dee;color:#fff;}
#searchHint{
  display:none;margin-top:11px;padding:9px 11px 9px 13px;border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--font-sans);font-size:14px;line-height:1.6;letter-spacing:.04em;
  border-radius:8px;background:rgba(255,255,255,.03);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#searchHint.err{color:#ff9a8f;border-left:3px solid rgba(255,154,143,.7);}
#searchHint.ok{color:#ffcf7a;border-left:3px solid rgba(255,207,122,.7);}
#famBadge{border:1px solid rgba(91,141,238,.32);background:rgba(10,12,18,.88);
  box-shadow:0 0 26px rgba(91,141,238,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
#famBadge .fbName{color:#8fb0f2;font-family:var(--font-sans);font-weight:300;letter-spacing:.18em;font-size:16px;}
#famBadge .fbDesc{font-family:var(--font-sans);font-weight:300;color:#d6dce4;font-size:14px;white-space:nowrap;}
#famSheet{background:linear-gradient(160deg,rgba(13,16,26,.97),rgba(9,11,18,.95));border:1px solid rgba(91,141,238,.30);border-radius:20px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 40px rgba(91,141,238,.12);}
#famSheet .fsName{font-family:var(--font-sans);font-weight:300;letter-spacing:.22em;color:#8fb0f2;}
#famSheet .fsDesc{font-family:var(--font-sans);font-weight:300;border-left:1px solid rgba(91,141,238,.5);}
#famSheet .fsItem:hover{background:rgba(255,255,255,.04);}
#famSheet .fsItem::before{background:linear-gradient(180deg,#5b8dee,transparent);width:1px;}
#famSheet .fsItem.active{background:rgba(91,141,238,.10);}
#famSheet .fsItem.active .fsCh{color:#9db8f2;}
#famSheet .fsItem .fsCh{font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;font-weight:400;color:#f0f3f7;
  font-size:24px;width:34px;text-align:center;line-height:1.2;}
/* 字族面板滚动条与释义卡统一：主题蓝细滚动条 */
#famSheet .fsList{scrollbar-color:rgba(91,141,238,.55) rgba(255,255,255,.03);}
#famSheet .fsList::-webkit-scrollbar{width:7px;}
#famSheet .fsList::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:999px;}
#famSheet .fsList::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(91,141,238,.75),rgba(91,141,238,.4));border-radius:999px;border:2px solid rgba(10,12,18,.6);}
#famSheet .fsList::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7ba6f2,#5b8dee);}
#famSheet .fsBack{border:1px solid rgba(91,141,238,.5);border-radius:999px;
  background:linear-gradient(135deg,rgba(91,141,238,.14),rgba(143,107,255,.10));
  color:#6ea0ff;font-family:var(--font-sans);font-size:13px;font-weight:300;
  letter-spacing:.34em;text-indent:.34em;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:background .25s,border-color .25s,color .25s,box-shadow .25s;}
#famSheet .fsBack:hover{border-color:#7aa4f5;color:#fff;
  background:linear-gradient(135deg,rgba(91,141,238,.30),rgba(143,107,255,.22));
  box-shadow:0 0 20px rgba(110,160,255,.4),0 10px 30px rgba(0,0,0,.4);}
#famSheet .fsClose{background:rgba(91,141,238,.10);border-radius:50%;color:#8a93a0;}
#tooltip{border:1px solid rgba(91,141,238,.30);border-radius:10px;background:rgba(10,12,18,.94);
  box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 18px rgba(91,141,238,.10);}
#tooltip .ttChar{font-family:var(--font-sans);color:#fff;}
#tooltip .ttMeta b{color:#8fb0f2;}
/* ===== 共鸣 v2：聆听按钮 + 聚焦遮罩 + 聆听面板（T18） ===== */
#resoListenBtn{
  display:flex;align-items:center;justify-content:center;gap:7px;position:absolute;z-index:17;
  padding:7px 16px;border-radius:999px;cursor:pointer;border:none;
  border:1px solid rgba(255,207,122,.5);background:rgba(22,17,10,.9);
  color:#ffd9a0;font-family:var(--font-sans);font-size:13px;font-weight:300;letter-spacing:.18em;text-indent:.08em;
  min-width:150px;
  box-shadow:0 0 20px rgba(255,207,122,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
#resoListenBtn .rlIcon{font-family:var(--font-sans);font-size:15px;line-height:1;color:#ffdfa8;}
#resoListenBtn.show{opacity:1;visibility:visible;transform:translateY(0);}
#resoListenBtn:hover{border-color:#ffd9a0;background:rgba(42,32,16,.94);color:#fff;
  box-shadow:0 0 26px rgba(255,207,122,.46);}
#resoVeil{position:fixed;inset:0;z-index:12;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,13,22,0) 0%,rgba(5,7,13,.72) 100%);
  opacity:0;transition:opacity .55s ease;}
#resoVeil.on{opacity:1;}
#resoPanel{
  position:absolute;top:36px;left:50%;transform:translateX(-50%) translateY(-10px);
  z-index:16;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:min(560px,76vw);box-sizing:border-box;padding:16px 22px 15px;
  border-radius:16px;border:1px solid rgba(255,207,122,.38);
  background:linear-gradient(160deg,rgba(24,18,10,.93),rgba(12,10,7,.91));
  box-shadow:0 0 36px rgba(255,207,122,.16),0 24px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .32s,transform .32s,visibility .32s;
}
#resoPanel.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
#resoPanel .rpHead{display:flex;align-items:baseline;gap:12px;padding:0 26px;}
#resoPanel .rpTitle{font-family:var(--font-sans);color:#ffd9a0;font-size:15px;font-weight:300;letter-spacing:.26em;text-indent:.26em;}
#resoPanel .rpChar{font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;font-size:19px;color:#fff;letter-spacing:.1em;}
#resoPanel .rpCount{font-family:var(--font-sans);color:rgba(255,217,160,.72);font-size:14px;font-weight:300;font-style:normal;letter-spacing:.12em;}
#resoPanel .rpClose{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,207,122,.10);color:#a89f86;font-size:13px;font-family:var(--font-sans);line-height:1;
  transition:background .16s,color .16s;}
#resoPanel .rpClose:hover{color:#fff;background:rgba(255,207,122,.28);}
#resoPanel .rpPeers{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-height:80px;overflow-y:auto;padding:2px 4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,207,122,.38) rgba(255,255,255,.03);}
#resoPanel .rpPeers::-webkit-scrollbar{width:5px;}
#resoPanel .rpPeers::-webkit-scrollbar-thumb{background:rgba(255,207,122,.4);border-radius:999px;}
#resoPanel .rpPeer{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,207,122,.3);background:rgba(255,207,122,.06);
  color:#ffe9c4;font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;font-size:18px;line-height:1;
  transition:background .16s,border-color .16s,transform .12s,box-shadow .16s;}
#resoPanel .rpPeer:hover{border-color:#ffd9a0;background:rgba(255,207,122,.18);transform:translateY(-2px);}
#resoPanel .rpPeer.cur{border-color:#ffd9a0;background:rgba(255,207,122,.26);color:#fff;box-shadow:0 0 14px rgba(255,207,122,.4);}
#card{border:1px solid rgba(91,141,238,.28);border-radius:15px;
  background:linear-gradient(150deg,rgba(15,18,30,.96),rgba(9,11,18,.93));
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 36px rgba(91,141,238,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
#card.show{box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(91,141,238,.25),0 0 44px rgba(91,141,238,.14);}
#card .cardClose{background:rgba(91,141,238,.10);border-radius:50%;color:#8a93a0;}
#card .cardClose:hover{color:#fff;background:rgba(91,141,238,.24);}
#card .cardChar{font-family:"KaiTi","STKaiti","KaiTi_GB2312",serif;font-weight:400;color:#fff;
  font-size:62px;line-height:1.1;
  text-shadow:0 0 26px rgba(255,207,122,.55),0 0 60px rgba(255,190,120,.18);}
#card .cardPy{font-family:var(--font-latin-serif);color:#b8cdfa;
  font-size:20px;font-weight:300;letter-spacing:.12em;font-synthesis:none;
  text-shadow:0 0 12px rgba(91,141,238,.3);}
#card .cardBody{border-top:1px solid rgba(255,255,255,.12);}
#card .cardDef{font-family:var(--font-sans);font-weight:300;color:#d6dce4;font-size:14px;}
#card .cardDef .defDot{color:#5b8dee;}
#card .cardMeta{border-top:1px solid rgba(255,255,255,.08);}
#card .cardNo{font-family:var(--font-latin-serif);color:#8a93a0;}
#card .cardNo b{color:#8fb0f2;}
#card .cardFam{border:1px solid rgba(91,141,238,.34);border-radius:999px;
  background:rgba(91,141,238,.08);box-shadow:none;font-family:var(--font-song);
  font-size:13px;letter-spacing:.12em;}
#card .cardFam .cfName{color:#8fb0f2;font-weight:500;letter-spacing:.12em;text-indent:.12em;}
.pipFrame{border-color:rgba(91,141,238,.32);box-shadow:0 0 60px rgba(91,141,238,.18),0 0 24px rgba(61,74,172,.16), inset 0 0 60px rgba(0,0,0,.6);}
.pipFrame::after{border-color:rgba(91,141,238,.26);}
.pipCorners i{border-color:rgba(91,141,238,.60);}
#pipC{background:radial-gradient(260px 220px at 50% 46%, rgba(16,22,34,.5) 0%, rgba(5,7,10,.9) 70%, #000 100%);}
#aura{background:radial-gradient(circle, rgba(91,141,238,.07) 0%, transparent 62%);}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:0;}