/* ==========================================================================
   官网 · 暖玻璃外观（11/03 · 跟网页版定稿 A「暖玻璃」统一画风）
   来源：web-design/proto/themes/warm-glass.css（token 数值逐个照抄，名字对到官网的 token）
   放在 site.css / home.css 后面加载；@layer glass 排在所有层最后 → 只覆盖外观，不碰结构、动效、文字
   配方（和网页版同一套）：
   ① 背景：象牙底 + 桃 / 杏 / 腮红 / 淡紫几团环境光 + 极淡的水彩纸晕染（11/04 去掉斜向窗光） · 固定在屏幕上（iPhone 也不断层）
   ② 玻璃：半透明暖白 + 1px 亮边 + 顶部内高光 + 暖粉远影；真模糊只给「浮在上面的」顶栏 / 底部胶囊 / 弹层，
      页面里的一堆卡片是「假玻璃」（半透明 + 高光，不做模糊）—— 背景本来就柔，模糊看不出差别，省手机 GPU
   ③ 强调：珊瑚渐变主按钮 + 外发光；选中 = 白玻璃胶囊 + 珊瑚描边 + 珊瑚字
   ④ 深色 =「夜晚暖玻璃」：烟熏可可底 + 余烬橙 / 梅子紫光，玻璃是暖褐半透明
   ⑤ 文章那张「纸」（首屏书页 / 听全文 / 巧思书页 / 最后一页）保持实色纸面，只换成玻璃那套阴影和亮边
   ⑥ 不支持毛玻璃 / 系统「降低透明度」→ 全部换实色暖卡
   ========================================================================== */
@layer glass{

/* ---------- token · 浅色「午后暖玻璃」 ---------- */
:root{
  --paper:#F8EEE6; --paper-2:#F8EAE0; --card:#FFFBF8; --rule:rgba(166,98,68,.17);
  /* 玻璃后面是桃色光：小号灰字 / 橙字压深一档，最饱和的光斑上也过 AA 4.5（同网页版做法：层级靠字号，不靠变淡） */
  --ink-3:#5F554B; --brand-ink:#A3321A;
  --ambient-base:#F8EEE6;
  --ambient:
    radial-gradient(820px 600px at 2% -12%,rgba(255,168,118,.58),transparent 62%),
    radial-gradient(640px 520px at 98% -10%,rgba(255,204,156,.66),transparent 64%),
    radial-gradient(560px 520px at 74% 44%,rgba(255,176,160,.52),transparent 66%),
    radial-gradient(440px 420px at 92% 30%,rgba(255,214,176,.50),transparent 68%),
    radial-gradient(700px 600px at -6% 92%,rgba(255,172,192,.52),transparent 64%),
    radial-gradient(420px 520px at 6% 48%,rgba(255,196,170,.50),transparent 66%),
    radial-gradient(620px 520px at 104% 104%,rgba(214,188,252,.30),transparent 64%),
    radial-gradient(600px 520px at -10% 114%,rgba(204,182,248,.30),transparent 62%),
    radial-gradient(760px 520px at 44% 38%,rgba(255,248,238,.85),transparent 70%);
  /* 11/04 · 原来的「斜向窗光」两道竖条去掉（Jason：像镜子影子、没意义）→ 换成极淡的水彩纸晕染：
     看不出形状、不抢内容，只让底色有一点手工纸的层次；纸纹颗粒仍由 site.css 的 body::before 负责 */
  --window:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0026 .0034' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .80 0 0 0 0 .46 0 0 0 0 .30 .55 0 0 0 -.27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0/960px 960px repeat;
  --glow:none;
  /* 玻璃 */
  --g-fill:linear-gradient(165deg,rgba(255,255,255,.62) 0%,rgba(255,251,247,.42) 55%,rgba(255,246,240,.36) 100%);
  --g-fill-strong:linear-gradient(165deg,rgba(255,255,255,.76) 0%,rgba(255,252,248,.58) 60%,rgba(255,247,241,.50) 100%);
  --g-faux:linear-gradient(165deg,rgba(255,255,255,.80) 0%,rgba(255,250,246,.66) 55%,rgba(255,243,236,.62) 100%);
  --g-bar:linear-gradient(180deg,rgba(255,251,248,.86),rgba(255,246,240,.80));
  --g-solid:#FFF8F3; --g-solid-strong:#FFFBF8;
  --g-blur:blur(22px) saturate(1.6);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.42);
  --g-ring:0 0 0 1px rgba(178,104,74,.13);
  --g-drop:0 2px 6px rgba(176,92,62,.06),0 22px 46px -22px rgba(196,98,66,.30);
  --g-drop-hi:0 4px 10px rgba(176,92,62,.08),0 36px 70px -26px rgba(196,98,66,.40);
  --g-sunk:rgba(255,240,232,.62);
  --shadow-1:var(--g-hi),var(--g-ring),var(--g-drop);
  --shadow-2:var(--g-hi),var(--g-ring),var(--g-drop-hi);
  --shadow-3:var(--g-hi),0 0 0 1px rgba(178,104,74,.16),0 6px 14px rgba(176,92,62,.10),0 50px 100px -30px rgba(196,98,66,.45);
  --spine:inset 18px 0 24px -18px rgba(150,80,50,.16);
  --glass:rgba(255,248,243,.66);
  --grain-opacity:.13;
  /* 珊瑚主按钮：底色压深保白字 4.5，发光靠外层 */
  --brand-grad:linear-gradient(180deg,#E8582F 0%,#C93E16 50%,#B83512 100%);
  --brand-grad-hover:linear-gradient(180deg,#F46A44 0%,#D94C20 50%,#C8401A 100%);
  --brand-glow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(150,40,10,.22),0 2px 4px -1px rgba(210,70,30,.35),0 12px 28px -8px rgba(255,98,56,.60),0 0 22px -6px rgba(255,140,100,.55);
  --brand-on:#fff;
  /* 选中 */
  --sel-bg:linear-gradient(100deg,rgba(255,150,110,.22) 0%,rgba(255,236,226,.88) 60%,rgba(255,245,239,.92) 100%);
  --sel-ring:0 0 0 1px rgba(226,88,50,.55);
  --sel-glow:0 6px 16px -6px rgba(240,100,60,.35),0 0 24px -4px rgba(255,120,80,.45);
  --sel-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --sel-ink:#B23A16;
  --mat:#FFFBF8;
}

/* ---------- token · 深色「夜晚暖玻璃」（两份：手动选深色 + 跟随系统） ---------- */
:root[data-theme="dark"]{
  --paper:#170F0D; --paper-2:#2E2420; --card:#2A201C; --rule:rgba(255,214,184,.12);
  --ink-3:#BDB1A2; --brand-ink:#FF9A7E;
  --ambient-base:#170F0D;
  --ambient:
    radial-gradient(820px 620px at 4% -10%,rgba(255,118,72,.30),transparent 64%),
    radial-gradient(760px 460px at 52% -12%,rgba(255,140,80,.20),transparent 66%),
    radial-gradient(560px 520px at 72% 46%,rgba(170,84,70,.20),transparent 66%),
    radial-gradient(800px 720px at -10% 106%,rgba(126,74,130,.24),transparent 66%),
    radial-gradient(820px 640px at 106% 98%,rgba(170,70,90,.18),transparent 64%),
    radial-gradient(140% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.35) 100%);
  --window:radial-gradient(560px 560px at 92% -6%,rgba(255,150,90,.12),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0026 .0034' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .34 0 0 0 0 .24 .36 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0/960px 960px repeat;
  --g-fill:linear-gradient(165deg,rgba(70,50,43,.54) 0%,rgba(44,32,28,.44) 60%,rgba(37,26,24,.42) 100%);
  --g-fill-strong:linear-gradient(165deg,rgba(78,57,48,.62) 0%,rgba(48,35,31,.54) 60%,rgba(40,29,26,.52) 100%);
  --g-faux:linear-gradient(165deg,rgba(70,51,44,.58) 0%,rgba(46,34,30,.52) 60%,rgba(40,29,26,.52) 100%);
  --g-bar:linear-gradient(180deg,rgba(44,32,28,.88),rgba(36,26,23,.84));
  --g-solid:#2A1F1B; --g-solid-strong:#30241F;
  --g-blur:blur(24px) saturate(1.35);
  --g-hi:inset 0 1px 0 rgba(255,232,206,.14),inset 0 0 0 1px rgba(255,226,200,.05);
  --g-ring:0 0 0 1px rgba(255,214,184,.11);
  --g-drop:0 2px 6px rgba(0,0,0,.30),0 24px 50px -24px rgba(0,0,0,.70);
  --g-drop-hi:0 4px 10px rgba(0,0,0,.35),0 38px 76px -26px rgba(0,0,0,.80),0 0 46px -22px rgba(255,130,86,.28);
  --g-sunk:rgba(20,13,11,.40);
  --shadow-3:var(--g-hi),0 0 0 1px rgba(255,214,184,.14),0 6px 14px rgba(0,0,0,.4),0 56px 110px -30px rgba(0,0,0,.85);
  --spine:inset 18px 0 24px -18px rgba(0,0,0,.55);
  --glass:rgba(34,25,22,.70);
  --grain-opacity:.06;
  --brand-grad:linear-gradient(180deg,#E8582F 0%,#C93E16 55%,#B83512 100%);
  --brand-grad-hover:linear-gradient(180deg,#F0643A 0%,#D94C20 55%,#C8401A 100%);
  --brand-glow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 4px rgba(0,0,0,.4),0 10px 26px -8px rgba(255,116,82,.55),0 0 24px -6px rgba(255,130,90,.45);
  --brand-on:#fff;
  --sel-bg:linear-gradient(100deg,rgba(255,140,100,.24),rgba(255,140,100,.12));
  --sel-ring:0 0 0 1px rgba(255,140,100,.62);
  --sel-glow:0 0 24px -4px rgba(255,120,80,.45);
  --sel-hi:inset 0 1px 0 rgba(255,236,214,.16);
  --sel-ink:#FFB497;
  --mat:#2A201C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#170F0D; --paper-2:#2E2420; --card:#2A201C; --rule:rgba(255,214,184,.12);
    --ink-3:#BDB1A2; --brand-ink:#FF9A7E;
    --ambient-base:#170F0D;
    --ambient:
      radial-gradient(820px 620px at 4% -10%,rgba(255,118,72,.30),transparent 64%),
      radial-gradient(760px 460px at 52% -12%,rgba(255,140,80,.20),transparent 66%),
      radial-gradient(560px 520px at 72% 46%,rgba(170,84,70,.20),transparent 66%),
      radial-gradient(800px 720px at -10% 106%,rgba(126,74,130,.24),transparent 66%),
      radial-gradient(820px 640px at 106% 98%,rgba(170,70,90,.18),transparent 64%),
      radial-gradient(140% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.35) 100%);
    --window:radial-gradient(560px 560px at 92% -6%,rgba(255,150,90,.12),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0026 .0034' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .34 0 0 0 0 .24 .36 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0/960px 960px repeat;
    --g-fill:linear-gradient(165deg,rgba(70,50,43,.54) 0%,rgba(44,32,28,.44) 60%,rgba(37,26,24,.42) 100%);
    --g-fill-strong:linear-gradient(165deg,rgba(78,57,48,.62) 0%,rgba(48,35,31,.54) 60%,rgba(40,29,26,.52) 100%);
    --g-faux:linear-gradient(165deg,rgba(70,51,44,.58) 0%,rgba(46,34,30,.52) 60%,rgba(40,29,26,.52) 100%);
    --g-bar:linear-gradient(180deg,rgba(44,32,28,.88),rgba(36,26,23,.84));
    --g-solid:#2A1F1B; --g-solid-strong:#30241F;
    --g-blur:blur(24px) saturate(1.35);
    --g-hi:inset 0 1px 0 rgba(255,232,206,.14),inset 0 0 0 1px rgba(255,226,200,.05);
    --g-ring:0 0 0 1px rgba(255,214,184,.11);
    --g-drop:0 2px 6px rgba(0,0,0,.30),0 24px 50px -24px rgba(0,0,0,.70);
    --g-drop-hi:0 4px 10px rgba(0,0,0,.35),0 38px 76px -26px rgba(0,0,0,.80),0 0 46px -22px rgba(255,130,86,.28);
    --g-sunk:rgba(20,13,11,.40);
    --shadow-3:var(--g-hi),0 0 0 1px rgba(255,214,184,.14),0 6px 14px rgba(0,0,0,.4),0 56px 110px -30px rgba(0,0,0,.85);
    --spine:inset 18px 0 24px -18px rgba(0,0,0,.55);
    --glass:rgba(34,25,22,.70);
    --grain-opacity:.06;
    --brand-grad:linear-gradient(180deg,#E8582F 0%,#C93E16 55%,#B83512 100%);
    --brand-grad-hover:linear-gradient(180deg,#F0643A 0%,#D94C20 55%,#C8401A 100%);
    --brand-glow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 4px rgba(0,0,0,.4),0 10px 26px -8px rgba(255,116,82,.55),0 0 24px -6px rgba(255,130,90,.45);
    --brand-on:#fff;
    --sel-bg:linear-gradient(100deg,rgba(255,140,100,.24),rgba(255,140,100,.12));
    --sel-ring:0 0 0 1px rgba(255,140,100,.62);
    --sel-glow:0 0 24px -4px rgba(255,120,80,.45);
    --sel-hi:inset 0 1px 0 rgba(255,236,214,.16);
    --sel-ink:#FFB497;
    --mat:#2A201C;
  }
}

/* ==========================================================================
   ① 背景：一层固定在屏幕上的环境光（伪元素 + position:fixed，iPhone 不支持 background-attachment:fixed 也不会断层）
   ========================================================================== */
html{background:var(--ambient-base)}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--window),var(--ambient),var(--ambient-base)}
body{background:transparent}
/* 手机：光团跟屏幕一起缩小，构图和电脑一致 */
@media (max-width:760px){
  :root[data-theme="light"],:root:not([data-theme]){--ambient:
    radial-gradient(420px 360px at 0% -6%,rgba(255,168,118,.56),transparent 64%),
    radial-gradient(360px 320px at 100% 6%,rgba(255,204,156,.62),transparent 66%),
    radial-gradient(340px 320px at 90% 52%,rgba(255,176,160,.46),transparent 66%),
    radial-gradient(380px 360px at -6% 70%,rgba(255,172,192,.46),transparent 64%),
    radial-gradient(360px 320px at 104% 102%,rgba(214,188,252,.30),transparent 64%),
    radial-gradient(420px 360px at 40% 36%,rgba(255,248,238,.80),transparent 70%)}
}
/* 上面那条在「跟随系统 + 系统深色」时也会命中 → 深色光在手机上再写一遍（排在后面，覆盖它） */
@media (max-width:760px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ambient:
    radial-gradient(460px 400px at 0% -6%,rgba(255,118,72,.30),transparent 64%),
    radial-gradient(420px 320px at 70% -8%,rgba(255,140,80,.20),transparent 66%),
    radial-gradient(360px 340px at 90% 50%,rgba(170,84,70,.20),transparent 66%),
    radial-gradient(440px 420px at -10% 100%,rgba(126,74,130,.24),transparent 66%),
    radial-gradient(140% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.35) 100%)}
}

/* ==========================================================================
   ② 顶栏：悬浮的磨砂玻璃胶囊（和网页版的侧栏 / 顶栏同一套参数）
   ========================================================================== */
.masthead{height:76px;padding-top:12px}
.masthead.is-scrolled{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.masthead__in{height:52px;padding:0 8px 0 14px;border-radius:22px;
  transition:background-color var(--t-in) var(--ease-out),box-shadow var(--t-in) var(--ease-out)}
/* 胶囊上方那条缝：渐隐的底色，滚过去的字不会从缝里露出来 */
.masthead::before{content:"";position:absolute;inset:0 0 auto;height:calc(100% - 10px);pointer-events:none;opacity:0;
  background:linear-gradient(var(--ambient-base) 40%,transparent);transition:opacity var(--t-in) var(--ease-out)}
.masthead.is-scrolled::before{opacity:.92}
.masthead__in{position:relative}
.masthead.is-scrolled .masthead__in{background:var(--g-bar);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
@media (max-width:899px){.masthead{height:66px;padding-top:8px}.masthead__in{height:50px;padding:0 4px 0 12px}}
@media (max-width:419px){.masthead{height:64px}.masthead__in{width:calc(100% - 20px);padding:0 2px 0 10px}}
.brand img{border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 6px 14px -6px rgba(240,90,50,.55)}
/* 右侧章节竖条：编号是导航链接，灰字也要过 AA */
.rail a{color:var(--ink-3)}
.rail a[aria-current="true"]{color:var(--sel-ink)}
.rail span{background:var(--g-solid-strong);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop)}
/* 章节目录：当前项 = 玻璃胶囊（不再画荧光条） */
.toc-inline a{border-radius:var(--pill);padding:8px 13px}
.toc-inline a[aria-current="true"]{color:var(--sel-ink);background:var(--sel-bg);box-shadow:var(--sel-hi),var(--sel-ring),var(--sel-glow)}
.toc-inline__bar{display:none}
.seg{background:var(--g-sunk);box-shadow:inset 0 1px 2px rgba(150,80,50,.10),var(--g-ring)}
.seg [aria-current="true"],.seg [aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-ink);box-shadow:var(--sel-hi),var(--sel-ring)}
@media (hover:hover){.icon-btn:hover{background:var(--g-fill-strong);box-shadow:var(--g-hi),var(--g-ring)}}
.toc-drawer{background:var(--ambient-base)}
.toc-drawer::backdrop{background:rgba(60,30,20,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lang-hint{background:var(--g-faux);border-bottom:0;box-shadow:var(--g-ring)}

/* ==========================================================================
   ③ 按钮
   ========================================================================== */
.btn--brand{background:var(--brand-grad);color:var(--brand-on);box-shadow:var(--brand-glow);text-shadow:0 1px 1px rgba(120,30,8,.35)}
@media (hover:hover){.btn--brand:hover{background:var(--brand-grad-hover);box-shadow:var(--brand-glow),0 0 0 1px rgba(255,140,100,.30)}}
.btn--ghost,.btn--line{background:var(--g-fill-strong);border:0;color:var(--ink);box-shadow:var(--g-hi),var(--g-ring),0 6px 14px -10px rgba(196,98,66,.4)}
@media (hover:hover){.btn--ghost:hover,.btn--line:hover{background:var(--g-fill-strong);box-shadow:var(--g-hi),0 0 0 1px rgba(255,160,120,.4),0 8px 18px -10px rgba(240,100,60,.45)}}
.tag{background:color-mix(in oklab,var(--brand) 10%,transparent)}
.tag--quiet{background:var(--g-sunk)}
.tick{background:color-mix(in oklab,var(--brand) 16%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* ==========================================================================
   ④ 卡片 = 假玻璃（半透明 + 亮边 + 暖远影，不做模糊）
   ========================================================================== */
:is(.act__card,.tile,.fcard,.price,.safety,.tsheet,.legal-toc-m,.seen,.art-card){
  background:var(--g-faux);border-color:transparent;box-shadow:var(--g-hi),var(--g-ring),var(--g-drop)}
:is(.act__card){box-shadow:var(--g-hi),var(--g-ring),var(--g-drop),inset 0 3px 0 color-mix(in oklab,var(--c) 70%,transparent)}
.act__card.is-playing{box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi),inset 0 3px 0 var(--c)}
.price--pro{background:var(--g-fill-strong);box-shadow:var(--g-hi),0 0 0 1px rgba(226,88,50,.30),var(--g-drop-hi),0 0 40px -14px rgba(255,120,80,.45)}
.tile--eight{background:var(--g-fill);box-shadow:var(--g-hi),var(--g-ring)}
.adults__card{background:var(--g-fill);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi)}
.safety{border-radius:28px}
/* 卡片里的「凹槽」：半透明暖色，别再是一块实色米黄 */
:is(.fcard__demo,.opts li,.wcard__tip,.tw-card__def,.ts-card__tr,.tw-card__spk){background:var(--g-sunk)}
:is(.mods li,.poke__chip,.pk__side,.board li,.fshare__title,.coop__bar,.rings__legend){background:var(--g-faux);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--g-ring)}
.rings__legend{box-shadow:none;background:transparent}
.tpoints li{background:var(--g-fill);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--g-ring)}
.flip__face{background:var(--g-fill-strong);border-color:transparent;box-shadow:var(--g-hi),var(--g-ring),var(--g-drop)}
.flip__back{background:var(--g-solid)}
.friends__rule{background:var(--g-fill);border-color:transparent;box-shadow:var(--g-hi),var(--g-ring)}
.notes__h{border-bottom-color:var(--rule)}
/* 宠物书架上的插画、贴在书页上的插画：亮白边 + 暖远影 */
.cell img{background:var(--g-faux);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop)}
.plate{background:var(--g-solid-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--g-ring),var(--g-drop-hi)}
.shelf__toggle{background:var(--g-fill-strong);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}

/* 一词四演：tab 换成玻璃胶囊（和网页版的「选中」一样） */
.act__tabs{gap:6px;padding:6px 4px}
.act__tabs [role="tab"]{padding:6px 16px 8px;border-radius:var(--pill);transition:color var(--t-hover) var(--ease-out),background-color var(--t-hover) var(--ease-out),box-shadow 240ms var(--ease-out)}
.act__tabs [role="tab"]::after{display:none}
.act__tabs [aria-selected="true"]{color:var(--sel-ink);background:var(--sel-bg);box-shadow:var(--sel-hi),var(--sel-ring),var(--sel-glow)}
@media (hover:hover){.act__tabs [role="tab"]:not([aria-selected="true"]):hover{background:var(--g-fill-strong);box-shadow:var(--g-hi),var(--g-ring)}}

/* ==========================================================================
   ⑤ 文章那张「纸」：实色纸面（保专注），换成玻璃那套亮边 + 层次阴影；下面几页纸变成玻璃
   ========================================================================== */
:is(.book,.page,.finale__page,.tdemo__page){background:var(--card);border-color:transparent;box-shadow:var(--shadow-3),var(--spine)}
.book-wrap::before{background:var(--g-fill-strong);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi)}
/* 书后面一团暖光：首屏有「光从书后面透出来」的层次 */
.book-wrap{isolation:isolate}
.book-wrap::after{content:"";position:absolute;z-index:-2;inset:-14% -10% -18% -12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,150,110,.40),rgba(255,190,150,.16) 55%,transparent 75%)}
@media (max-width:899px){.book-wrap::after{inset:-8% 0 -10% 0}}
:root[data-theme="dark"] .book-wrap::after{background:radial-gradient(closest-side,rgba(255,120,72,.22),rgba(255,120,72,.06) 55%,transparent 75%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .book-wrap::after{background:radial-gradient(closest-side,rgba(255,120,72,.22),rgba(255,120,72,.06) 55%,transparent 75%)}}
.book__corner{background:linear-gradient(135deg,transparent 50%,var(--paper-2) 50%)}
/* 听全文这一章原来是一整块米色底 → 换成一团暖光 */
.listen::before{background:radial-gradient(900px 520px at 50% 50%,rgba(255,190,150,.34),transparent 70%)}
:root[data-theme="dark"] .listen::before{background:radial-gradient(900px 520px at 50% 50%,rgba(255,130,80,.12),transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .listen::before{background:radial-gradient(900px 520px at 50% 50%,rgba(255,130,80,.12),transparent 70%)}}
.player__play{background:var(--brand-grad);color:#fff;box-shadow:var(--brand-glow)}
.player__track{background:var(--g-sunk)}
.player__track i{background:linear-gradient(90deg,#FFC08A 0%,#FF8A5E 45%,#F25C33 100%)}
/* 词卡（电脑浮层 / 手机底部抽屉）：真玻璃，浮在书页上 */
.wcard{background:var(--g-fill-strong);border-color:transparent;box-shadow:var(--shadow-3);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.wcard:modal{background:var(--g-solid-strong)}
.wcard::backdrop{background:rgba(60,30,20,.30)}
/* 成长时间线后面的光 */
.stage__glow{background:radial-gradient(closest-side,color-mix(in oklab,var(--pet-glow) 34%,transparent),rgba(255,190,150,.18) 60%,transparent)}
.gs__fig::after{background:var(--card)}
.eggs [aria-checked="true"]{background:var(--sel-bg);box-shadow:var(--sel-hi),var(--sel-ring);color:var(--sel-ink)}
.wcard__pets [aria-checked="true"]{color:var(--sel-ink)}
/* 价格卡的书签条 → 珊瑚渐变 */
.price__mark{background:var(--brand-grad)}
/* 常见问题：放进一张玻璃面板 */
.faq{padding:clamp(20px,3vw,36px) clamp(18px,3vw,40px);border-radius:28px;background:var(--g-faux);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop)}
.faq details:first-of-type{border-top:0}
.faq details:last-of-type{border-bottom:0}

/* ==========================================================================
   ⑥ 手机底部下载胶囊 + 页脚
   ========================================================================== */
.dock{background:var(--g-bar);border:0;box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.colophon{border-top:0;padding-top:var(--s7)}
.colophon > .wrap.colophon__grid{padding:clamp(24px,3.5vw,44px);border-radius:28px;background:var(--g-fill);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi)}
@media (max-width:600px){.colophon__end{font-size:22px;gap:4px 10px}}
.colophon__brand img{border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 6px 14px -6px rgba(240,90,50,.55)}
.colophon__brand .colophon__title{background:linear-gradient(100deg,var(--ink) 0 55%,#E0552E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .colophon__brand .colophon__title{background:linear-gradient(100deg,var(--ink) 0 55%,#FF9A78 100%);-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .colophon__brand .colophon__title{background:linear-gradient(100deg,var(--ink) 0 55%,#FF9A78 100%);-webkit-background-clip:text;background-clip:text}}

/* ==========================================================================
   ⑦ 法律页 / 404：正文放进一张玻璃面板（字是实色底，读起来安静）
   ========================================================================== */
body[data-page="legal"] .prose{padding:clamp(22px,4vw,52px);border-radius:28px;background:var(--g-faux);box-shadow:var(--g-hi),var(--g-ring),var(--g-drop-hi)}
@media (max-width:600px){body[data-page="legal"] .prose{margin-inline:-6px;padding:20px 18px;border-radius:22px}}
.prose th,.prose code,.prose [class*="bg-"],.legal-en-note{background:var(--g-sunk)!important}
.legal-toc a.is-current{color:var(--sel-ink);border-left-color:var(--brand)}
.notfound > *{position:relative}
.notfound img{filter:drop-shadow(0 18px 24px rgba(196,98,66,.28))}

/* ==========================================================================
   ⑧ 降级：不支持毛玻璃 / 系统开了「降低透明度」→ 实色暖卡
   ========================================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root:not(#x){--g-bar:var(--g-solid-strong);--g-fill-strong:var(--g-solid-strong)}
}
@media (prefers-reduced-transparency:reduce){
  :root:not(#x){--g-fill:var(--g-solid);--g-fill-strong:var(--g-solid-strong);--g-faux:var(--g-solid);--g-bar:var(--g-solid-strong);--g-blur:none}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media print{*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}html::before{content:none}}
}