/* =========================================================
 * style.css — 孟德尔遗传实验 · 网页视频样式
 * 舞台固定 1920×1080 逻辑像素，按窗口等比缩放（见 player.js fit）
 * --beat 由音乐节拍实时驱动（0~1），用于呼吸式发光
 * ========================================================= */
*{box-sizing:border-box}
:root{
  --beat:0;
  --cy:#3ef0ff;--pk:#ff4fd8;--gd:#ffd34e;--gr:#5dff9a;--vi:#b18cff;--or:#ff9f43;--tl:#3fe0c5;--rd:#ff5d7a;
  --tx:#eaf2ff;--mu:#93a6c9;
}
html,body{margin:0;height:100%;background:#02040b;overflow:hidden;color:var(--tx);
  font-family:"HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  user-select:none;-webkit-font-smoothing:antialiased}
#bg{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;z-index:1;overflow:hidden}
.scene{position:absolute;inset:0;display:none;transform-origin:50% 50%}
.abs{position:absolute}
.scene [data-fx="grow"]{transform-origin:50% 100%}
.scene [data-fx="growx"]{transform-origin:0 50%}
svg [data-in]{transform-box:fill-box;transform-origin:center}

/* ---------- 颜色 / 发光 ---------- */
.c-cy{color:var(--cy)}.c-pk{color:var(--pk)}.c-gd{color:var(--gd)}.c-gr{color:var(--gr)}
.c-vi{color:var(--vi)}.c-or{color:var(--or)}.c-tl{color:var(--tl)}.c-rd{color:var(--rd)}.c-mu{color:var(--mu)}
.gl{text-shadow:0 0 8px currentColor,0 0 24px currentColor}
.gl2{text-shadow:0 0 6px currentColor,0 0 calc(14px + 30px*var(--beat)) currentColor}
.small{font-size:.8em}

/* ---------- 基因符号 / 分数 ---------- */
.g{font-family:"Times New Roman",Georgia,"Cambria",serif;font-style:italic;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.g b{font-weight:700}
.g .U{color:#ffe07a;text-shadow:0 0 10px rgba(255,210,70,.75)}
.g .L{color:#8ff0ff;text-shadow:0 0 10px rgba(62,240,255,.75)}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;
  font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-weight:700;font-size:.8em}
.fr>span:first-child{border-bottom:2px solid currentColor;padding:0 .18em .06em}
.fr>span:last-child{padding:.06em .18em 0}

/* ---------- 标题栏 ---------- */
.hdr{position:absolute;left:110px;top:52px;display:flex;align-items:baseline;gap:24px;white-space:nowrap}
.hdr .num{font:900 64px/1 "Segoe UI","Microsoft YaHei",sans-serif;color:transparent;-webkit-text-stroke:1.6px var(--cy);
  filter:drop-shadow(0 0 10px rgba(62,240,255,.8))}
.hdr .ttl{font-size:52px;font-weight:900;letter-spacing:3px;background:linear-gradient(90deg,#fff,#c4f4ff 55%,#ffc4f1);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(62,240,255,.5))}
.hdr .sub{font-size:25px;color:var(--mu);letter-spacing:3px}
.hline{position:absolute;left:110px;top:138px;width:1700px;height:2px;
  background:linear-gradient(90deg,var(--cy),var(--pk) 35%,rgba(177,140,255,.4) 70%,transparent);box-shadow:0 0 12px var(--cy)}

/* ---------- 卡片 / 标签 ---------- */
.card{position:absolute;padding:24px 30px;border-radius:22px;font-size:28px;line-height:1.55;
  background:linear-gradient(150deg,rgba(60,110,210,.22),rgba(12,18,46,.62) 55%,rgba(50,22,90,.38));
  border:1px solid rgba(120,210,255,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 26px rgba(62,240,255,.10),inset 0 1px 0 rgba(255,255,255,.10)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(120deg,rgba(62,240,255,.85),transparent 32%,transparent 66%,rgba(255,79,216,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card .ct{font-size:34px;font-weight:800;margin-bottom:10px;color:#fff;text-shadow:0 0 14px rgba(62,240,255,.55)}
.card .ct .no{color:var(--cy);margin-right:6px}
.beat{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 calc(16px + 46px*var(--beat)) rgba(62,240,255,calc(.14 + .32*var(--beat))),inset 0 0 22px rgba(62,240,255,.07)}
.chip{position:absolute;padding:13px 24px;border-radius:16px;font-size:26px;line-height:1.45;
  background:rgba(8,16,42,.78);border:1px solid rgba(62,240,255,.38);box-shadow:0 0 20px rgba(62,240,255,.16)}
.chip.rel{position:relative}
.chip.warn{border-color:rgba(255,159,67,.65);box-shadow:0 0 24px rgba(255,159,67,.28)}
.chip.pkb{border-color:rgba(255,79,216,.55);box-shadow:0 0 24px rgba(255,79,216,.25)}
.lbl{display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:52px;padding:0 14px;border-radius:12px;
  font:800 28px "Segoe UI","Microsoft YaHei",sans-serif;color:#061020;background:linear-gradient(135deg,var(--cy),#8a7dff);
  box-shadow:0 0 18px rgba(62,240,255,.55);flex:none}
.x-sym,.x-s{color:var(--pk);font-weight:300;text-shadow:0 0 10px var(--pk),0 0 26px var(--pk)}
.x-sym{font-size:66px;line-height:1}
.x-s{font-size:44px;margin:0 10px}
.gen-l{position:absolute;display:flex;align-items:center;gap:14px;font-size:28px;color:var(--mu)}
.plab{position:absolute;text-align:center;font-size:28px;color:#dfe9ff}
.plab.big{font-size:32px}
.plant{filter:drop-shadow(0 0 8px rgba(93,255,154,.5))}

/* ---------- 箭头 ---------- */
.arr{position:relative;display:inline-block}
.arr svg{display:block;overflow:visible}
.arr path{fill:none;stroke:var(--cy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px var(--cy))}
.arr path.flow{stroke-dasharray:7 8;animation:flow .7s linear infinite}
@keyframes flow{to{stroke-dashoffset:-15}}
.arr-l{position:absolute;bottom:100%;left:-40px;right:-40px;text-align:center;font-size:24px;color:var(--pk);margin-bottom:6px;white-space:nowrap;text-shadow:0 0 10px rgba(255,79,216,.7)}
.arr-d .arr-l{left:38px;right:auto;bottom:auto;top:50%;transform:translateY(-50%);text-align:left;margin:0}

/* ---------- 遗传图解元素 ---------- */
.gbox{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px;padding:8px 20px;border-radius:16px;
  font-size:46px;line-height:1.2;background:rgba(20,30,70,.65);border:1.5px solid rgba(255,211,78,.6);
  box-shadow:0 0 22px rgba(255,211,78,.25),inset 0 0 18px rgba(255,211,78,.08)}
.gbox small{font-size:22px;color:var(--mu);margin-top:2px;font-weight:400}
.gbox.r{border-color:rgba(62,240,255,.65);box-shadow:0 0 22px rgba(62,240,255,.25),inset 0 0 18px rgba(62,240,255,.08)}
.gam{width:84px;height:84px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:36px;flex:none;
  border:2px solid rgba(62,240,255,.85);background:radial-gradient(circle at 35% 30%,rgba(62,240,255,.38),rgba(10,20,50,.7));
  box-shadow:0 0 18px rgba(62,240,255,.55),inset 0 0 14px rgba(62,240,255,.35)}
.gam.f{border-color:rgba(255,79,216,.85);background:radial-gradient(circle at 35% 30%,rgba(255,79,216,.38),rgba(30,10,45,.7));
  box-shadow:0 0 18px rgba(255,79,216,.55),inset 0 0 14px rgba(255,79,216,.35)}
.gam.sm{width:70px;height:70px;font-size:26px}
.corner{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--mu)}
.pc{width:124px;height:124px}
.cell{position:relative;width:100%;height:100%;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:28px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1.5px solid var(--hc,#3ef0ff);
  box-shadow:0 0 12px color-mix(in srgb,var(--hc,#3ef0ff) 35%,transparent),inset 0 0 16px color-mix(in srgb,var(--hc,#3ef0ff) 15%,transparent);
  transition:opacity .45s,transform .45s,box-shadow .45s,background .45s,border-color .45s}
.cell.dim{opacity:.16;transform:scale(.94)}
.cell.hl{transform:scale(1.07);background:color-mix(in srgb,var(--hc) 22%,rgba(10,15,40,.7));
  box-shadow:0 0 34px var(--hc),inset 0 0 26px color-mix(in srgb,var(--hc) 45%,transparent)}
.cell.x::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;color:var(--rd);
  text-shadow:0 0 18px var(--rd);font-style:normal}
.cell .ph{font-size:20px;color:var(--mu)}
.pea{display:block}

/* ---------- 片头 ---------- */
.tag{display:inline-block;font-size:28px;letter-spacing:6px;color:var(--cy);padding:8px 26px;border:1px solid rgba(62,240,255,.45);
  border-radius:40px;background:rgba(62,240,255,.06);box-shadow:0 0 22px rgba(62,240,255,.25);margin-bottom:22px}
.title-xl{font-size:120px;font-weight:900;letter-spacing:10px;line-height:1.2;
  filter:drop-shadow(0 0 16px rgba(62,240,255,.6)) drop-shadow(0 0 46px rgba(255,79,216,.35))}
.title-xl .ch{background:linear-gradient(180deg,#ffffff 18%,#a5f5ff 58%,#e6a8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.title-sub{font-size:36px;letter-spacing:8px;color:#d9e6ff;margin-top:18px;text-shadow:0 0 14px rgba(177,140,255,.8)}
.hint{font-size:24px;color:var(--mu);letter-spacing:4px}

/* 逐字打出效果 */
.ch{opacity:0}
.ch.on{opacity:1;transition:opacity .25s,text-shadow .7s}
.ch.hot{text-shadow:0 0 12px #fff,0 0 30px var(--cy)}

/* ---------- 第 1 幕：时间线 ---------- */
.em-name{font-size:54px;font-weight:900;letter-spacing:10px;text-shadow:0 0 18px rgba(62,240,255,.7)}
.em-sub{font-size:24px;color:var(--mu);margin-top:6px;letter-spacing:2px}
.spin{animation:spin 30s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.tl-line{position:absolute;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cy),var(--vi),var(--pk));box-shadow:0 0 14px var(--cy)}
.tl-spark{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 20%,rgba(62,240,255,.9) 40%,rgba(62,240,255,0) 72%);
  box-shadow:0 0 30px 10px rgba(62,240,255,.55)}
.tl-dot{position:absolute;width:26px;height:26px;border-radius:50%;background:#071230;border:3px solid var(--gd);box-shadow:0 0 18px var(--gd)}
.tl-stem{position:absolute;width:2px;background:linear-gradient(var(--gd),rgba(255,211,78,.1))}
.tl-card{padding:16px 18px;text-align:center;font-size:23px;line-height:1.45}
.tl-card .yr{font:900 42px/1.1 "Segoe UI",sans-serif;color:var(--gd);text-shadow:0 0 16px rgba(255,211,78,.8);margin-bottom:6px}
.quote{position:absolute;text-align:center;font-size:34px;letter-spacing:3px;color:#dbe6ff;padding:18px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}

/* ---------- 第 2 幕 ---------- */
.def{font-size:28px;color:#dbe6ff}
.ex-row{display:flex;gap:46px;margin:12px 0 8px}
.ex{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 22px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.exi{display:flex;align-items:flex-end;gap:12px;height:104px}
.exl{font-size:24px;color:var(--mu)}
.pf-lab line{stroke:#ffffff;stroke-opacity:.55;stroke-width:1.3}
.pf-lab text{fill:#fff;font-size:22px;font-weight:700;paint-order:stroke;stroke:#000;stroke-width:3px;stroke-opacity:.4}
.pf-lab text.s{font-size:15px;font-weight:400;fill:#d6c6ff}
.pollen{fill:#ffd34e;filter:drop-shadow(0 0 4px #ffd34e);animation:tw 1.4s ease-in-out infinite alternate}
.pollen:nth-child(2n){animation-delay:-.7s}
@keyframes tw{from{opacity:.35}to{opacity:1}}

/* ---------- 第 3 幕：步骤 ---------- */
.step{text-align:center;padding-top:28px}
.step-ic{display:flex;justify-content:center;margin-bottom:6px}
.ico{filter:drop-shadow(0 0 8px var(--cy))}
.ico path,.ico circle,.ico ellipse{fill:none;stroke:var(--cy);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ico .pf{fill:var(--gd);stroke:none;filter:drop-shadow(0 0 4px var(--gd))}
.ico .ok{stroke:var(--gr)}
.ico .bud{stroke:var(--pk)}
.step-no{font:800 20px "Segoe UI",sans-serif;letter-spacing:4px;color:var(--pk)}
.step-n{font-size:44px;font-weight:900;margin:4px 0 10px;text-shadow:0 0 16px rgba(62,240,255,.6)}
.step-d{font-size:25px;color:#cfdbf5;line-height:1.5}

/* ---------- 第 4/11 幕：比例 ---------- */
.ratio-card{text-align:center;font-size:36px;padding:16px 20px;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
.big-msg{font-size:40px;font-weight:800;letter-spacing:2px}

/* ---------- 第 5 幕：表格 ---------- */
.tbl{border-radius:22px;overflow:hidden;background:rgba(8,14,38,.55);border:1px solid rgba(120,210,255,.18);box-shadow:0 0 30px rgba(62,240,255,.08)}
.tr{display:grid;grid-template-columns:200px 140px 140px 180px 180px 140px 1fr;align-items:center;height:74px;padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:30px;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
.tr.th{height:60px;font-size:23px;color:var(--mu);background:rgba(62,240,255,.07)}
.barc{position:relative;height:24px}
.bar{height:22px;border-radius:11px;background:linear-gradient(90deg,var(--cy),var(--vi),var(--pk));box-shadow:0 0 14px rgba(62,240,255,.6)}
.mark3{position:absolute;width:0;border-left:2px dashed var(--gd);filter:drop-shadow(0 0 6px var(--gd))}

/* ---------- 第 6 幕：流程 ---------- */
.node{text-align:center;padding:30px 18px;transition:border-color .4s,box-shadow .4s,background .4s}
.node.act{border-color:rgba(255,211,78,.8);background:linear-gradient(150deg,rgba(255,211,78,.20),rgba(12,18,46,.7));
  box-shadow:0 0 40px rgba(255,211,78,.45),inset 0 0 30px rgba(255,211,78,.15)}
.nd-no{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:900 32px "Segoe UI",sans-serif;color:#061020;background:linear-gradient(135deg,var(--cy),var(--vi));box-shadow:0 0 20px rgba(62,240,255,.6)}
.node.act .nd-no{background:linear-gradient(135deg,var(--gd),var(--or));box-shadow:0 0 26px rgba(255,211,78,.8)}
.nd-t{font-size:34px;font-weight:900;line-height:1.35;margin-bottom:16px}
.nd-d{font-size:24px;color:var(--gd);line-height:1.45}

/* ---------- 结果卡 ---------- */
.res{text-align:center;padding:18px}
.res .small{color:var(--mu);font-size:22px}
.res .big{font:900 58px/1.2 "Segoe UI",sans-serif}

/* ---------- 第 8 幕：模拟实验 ---------- */
.bl{font:italic 700 17px "Times New Roman",serif;fill:#071020}
.bowl{filter:drop-shadow(0 0 10px #3ef0ff)}
.mball{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:italic 700 26px "Times New Roman",serif;color:#071020}
.mball.dom{background:radial-gradient(circle at 35% 30%,#fff6c8,#e0a800);box-shadow:0 0 20px #ffd34e}
.mball.rec{background:radial-gradient(circle at 35% 30%,#e0fdff,#18b6d6);box-shadow:0 0 20px #3ef0ff}
.combo{text-align:center;font-size:56px}
.sbar{position:absolute;width:150px;border-radius:14px 14px 4px 4px}
.sbar.k0{background:linear-gradient(0deg,rgba(255,211,78,.25),#ffd34e);box-shadow:0 0 24px rgba(255,211,78,.6)}
.sbar.k1{background:linear-gradient(0deg,rgba(93,255,154,.25),#5dff9a);box-shadow:0 0 24px rgba(93,255,154,.6)}
.sbar.k2{background:linear-gradient(0deg,rgba(62,240,255,.25),#3ef0ff);box-shadow:0 0 24px rgba(62,240,255,.6)}
.theo{position:absolute;width:190px;border-top:2px dashed rgba(255,255,255,.55)}
.theo span{position:absolute;right:0;top:-28px;font-size:18px;color:var(--mu)}
.scnt{position:absolute;width:150px;text-align:center;font:800 34px "Segoe UI",sans-serif}
.slab{position:absolute;width:150px;text-align:center;font-size:34px}
.cnt-n{font-size:30px;color:var(--mu)}
.cnt-n b{font:900 40px "Segoe UI",sans-serif}

/* ---------- 第 9 幕 ---------- */
.frow{display:flex;align-items:center;gap:20px;margin:6px 0}
.frow .lbl{min-width:96px}
.sep{width:2px;height:70px;background:rgba(255,255,255,.3);margin:0 12px}
.ratio{font:800 40px "Segoe UI",sans-serif;color:var(--gd);text-shadow:0 0 14px rgba(255,211,78,.7)}
.arrow-row{display:flex;justify-content:center;width:100%;margin:2px 0}
.hbar-row{display:flex;align-items:center;gap:20px;margin:26px 0}
.hbar-row .nm{width:80px;font-size:30px;font-weight:700}
.hbar-row b{font:900 54px "Segoe UI",sans-serif}
.hbar{height:46px;border-radius:12px}
.hbar.gd{background:linear-gradient(90deg,rgba(255,211,78,.3),#ffd34e);box-shadow:0 0 22px rgba(255,211,78,.55)}
.hbar.cy{background:linear-gradient(90deg,rgba(62,240,255,.3),#3ef0ff);box-shadow:0 0 22px rgba(62,240,255,.55)}
.verdict{text-align:center;font:800 48px "Segoe UI","Microsoft YaHei",sans-serif;margin-top:30px}
.verdict .ok{font-size:30px;color:var(--gr);margin-top:12px;text-shadow:0 0 14px rgba(93,255,154,.7)}

/* ---------- 定律卡 ---------- */
.law{padding:34px 50px}
.law-t{font-size:56px;font-weight:900;letter-spacing:6px;color:#fff;text-shadow:0 0 18px var(--cy),0 0 40px rgba(62,240,255,.6);margin-bottom:16px}
.law-e{font:italic 400 26px Georgia,serif;letter-spacing:1px;color:var(--mu);margin-left:16px;text-shadow:none}
.law-x{font-size:36px;line-height:1.7;letter-spacing:1px}
.kw{color:var(--gd);font-weight:800;text-shadow:0 0 14px rgba(255,211,78,.75)}
.spc{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;
  border:2px dashed rgba(177,140,255,.8);background:radial-gradient(circle,rgba(177,140,255,.25),rgba(10,10,40,.5));box-shadow:0 0 30px rgba(177,140,255,.5)}

/* ---------- 第 11 幕 ---------- */
.pea-b{width:150px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pn{font-size:24px;color:#dfe9ff;white-space:nowrap}
.sb{position:absolute;width:150px;border-radius:14px 14px 4px 4px}
.cnum{position:absolute;width:220px;text-align:center;font:800 40px "Segoe UI",sans-serif}
.rnum{position:absolute;width:220px;text-align:center;font:900 76px/1 "Segoe UI",sans-serif}
.rsep{position:absolute;width:40px;text-align:center;font:300 60px/1 "Segoe UI",sans-serif;color:var(--mu)}

/* ---------- 第 12 幕 ---------- */
.dline{display:flex;align-items:center;gap:16px;font-size:36px;white-space:nowrap}
.lg{padding:14px 20px;font-size:24px;transition:box-shadow .4s,border-color .4s,background .4s}
.lg.act{background:linear-gradient(150deg,color-mix(in srgb,var(--hc) 26%,transparent),rgba(12,18,46,.7));box-shadow:0 0 36px color-mix(in srgb,var(--hc) 60%,transparent)}
.lg-h{display:flex;align-items:center;gap:14px;font-size:30px;font-weight:800}
.lg-n{margin-left:auto;font:900 52px/1 "Segoe UI",sans-serif;color:var(--hc);text-shadow:0 0 16px var(--hc)}
.lg-l{margin-top:6px;font-size:26px;color:#cfdbf5;line-height:1.5}
.lg-l .g{margin-right:4px}

/* ---------- 第 13 幕 ---------- */
.off{display:flex;flex-direction:column;align-items:center;gap:4px;width:158px;padding:12px 6px;border-radius:16px;font-size:30px;
  background:rgba(255,255,255,.04);border:1.5px solid var(--hc);box-shadow:0 0 16px color-mix(in srgb,var(--hc) 40%,transparent)}
.off span{font-size:21px;color:var(--mu)}
.dt{display:grid;grid-template-columns:190px repeat(4,1fr);align-items:center;text-align:center;font:700 34px "Segoe UI","Microsoft YaHei",sans-serif}
.dt>div{padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.dt .h{font-size:24px;color:var(--mu);font-weight:400}
.dt .rh{font-size:24px;color:#dfe9ff;text-align:left;font-weight:400}

/* ---------- 第 14 幕：对比表 ---------- */
.ctbl{display:grid;grid-template-columns:260px 1fr 1fr;border-radius:20px;overflow:hidden;border:1px solid rgba(120,210,255,.2);background:rgba(8,14,38,.6)}
.ctbl>div{padding:11px 20px;font-size:27px;border-bottom:1px solid rgba(255,255,255,.07)}
.ctbl .h{background:rgba(62,240,255,.10);font-weight:800;font-size:28px}
.ctbl .k{color:var(--mu)}

/* ---------- 第 15 幕 ---------- */
.rc{padding:22px 26px}
.rc-n{font:900 46px/1 "Segoe UI",sans-serif;color:transparent;-webkit-text-stroke:1.4px var(--gd);filter:drop-shadow(0 0 8px rgba(255,211,78,.8))}
.rc-t{font-size:34px;font-weight:900;margin:10px 0 8px}
.rc-d{font-size:23px;color:#cfdbf5;line-height:1.5}
.tm{display:flex;align-items:center;gap:20px;padding:16px 24px;font-size:26px}
.tm-k{flex:none;width:150px;font-size:32px;font-weight:900}

/* ---------- 例题 ---------- */
.prob{font-size:28px;line-height:1.6;padding:20px 30px}
.prob .q{color:var(--gd);font-weight:800;margin-right:8px}
.ans{padding:16px 26px;font-size:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ans .an{flex:none;font:800 28px "Segoe UI",sans-serif;color:var(--cy)}
.ans .res-v{font-size:36px;font-weight:900;color:var(--gd);text-shadow:0 0 16px rgba(255,211,78,.75)}
.mband{text-align:center;font-size:34px;font-weight:800;letter-spacing:2px}
.split{text-align:center;padding:22px 20px}
.split .sh{font-size:44px;margin-bottom:10px}
.split .sl{font-size:26px;color:#cfdbf5;line-height:1.7}
.rcard{text-align:center;padding:20px 14px}
.rcard .rk{font-size:24px;color:var(--mu);margin-bottom:8px}
.rcard .rf{font-size:28px;line-height:1.7}
.rcard .rv{font:900 46px/1.2 "Segoe UI","Microsoft YaHei",sans-serif;color:var(--gd);text-shadow:0 0 16px rgba(255,211,78,.75)}
.gcell{position:absolute;width:96px;height:96px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:21px;
  --hc:#b18cff;background:color-mix(in srgb,var(--hc) 18%,rgba(10,14,40,.7));border:1.5px solid var(--hc);
  box-shadow:0 0 14px color-mix(in srgb,var(--hc) 45%,transparent);transition:all .5s}
.gcell[data-g="1"]{--hc:#ff9f43}.gcell[data-g="2"]{--hc:#3fe0c5}.gcell[data-g="3"]{--hc:#8aa0c8}
.gcell.w{--hc:#f2f6ff;background:rgba(240,245,255,.10)}
.gcell.hl{transform:scale(1.1);box-shadow:0 0 34px var(--hc),inset 0 0 22px color-mix(in srgb,var(--hc) 50%,transparent);border-width:3px}
.gcell.dim{opacity:.2}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;margin-top:10px}
.vc{padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(177,140,255,.4);font:700 26px "Segoe UI","Microsoft YaHei",sans-serif;text-align:center}
.vc i{font-style:normal;color:var(--mu);margin:0 8px}
.vc b{color:var(--pk)}
.ftbl{display:grid;grid-template-columns:140px 1fr 1fr 1fr;align-items:center;text-align:center}
.ftbl>div{padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.08);font-size:30px;min-height:80px;display:flex;align-items:center;justify-content:center}
.ftbl .h{font-size:23px;color:var(--mu);min-height:56px}
.chart .gridl{stroke:rgba(255,255,255,.12);stroke-dasharray:4 6}
.chart .ax{stroke:rgba(255,255,255,.6);stroke-width:2}
.chart .axt{fill:var(--mu);font:22px "Segoe UI","Microsoft YaHei",sans-serif}
.chart .cv{fill:none;stroke-width:5;stroke-linecap:round}
.chart .c1{stroke:var(--cy);filter:drop-shadow(0 0 8px var(--cy))}
.chart .c2{stroke:var(--pk);filter:drop-shadow(0 0 8px var(--pk))}
.chart .c3{stroke:var(--gd);stroke-dasharray:none;filter:drop-shadow(0 0 8px var(--gd))}
.chart .ptl{font:700 24px "Microsoft YaHei",sans-serif}

/* ---------- 总结 ---------- */
.mm-c{position:absolute;width:260px;height:260px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:40px;font-weight:900;line-height:1.35;letter-spacing:3px;
  background:radial-gradient(circle at 40% 35%,rgba(62,240,255,.45),rgba(60,30,140,.55) 60%,rgba(10,10,40,.8));
  border:2px solid rgba(62,240,255,.8);box-shadow:0 0 calc(40px + 50px*var(--beat)) rgba(62,240,255,.6),inset 0 0 40px rgba(62,240,255,.4);text-shadow:0 0 16px #3ef0ff}
.mm-n{text-align:center;padding:16px 20px}
.mm-n .t{font-size:34px;font-weight:900;margin-bottom:4px}
.mm-n .d{font-size:24px;color:#cfdbf5;line-height:1.5}
.mm-l{fill:none;stroke-width:2.5;stroke-linecap:round}
.end-t{font-size:150px;font-weight:900;letter-spacing:24px;color:#fff;
  text-shadow:0 0 20px var(--cy),0 0 60px var(--cy),0 0 calc(90px + 60px*var(--beat)) var(--pk)}
.end-s{font-size:36px;letter-spacing:10px;color:var(--mu);margin-top:16px}

/* ---------- 叠加层：扫光 / 字幕 / 角标 ---------- */
#sweep{position:absolute;top:0;left:0;width:460px;height:1080px;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(62,240,255,.10) 30%,rgba(255,255,255,.22) 50%,rgba(255,79,216,.10) 70%,transparent);filter:blur(6px)}
#sub{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);max-width:1560px;min-height:10px;padding:14px 44px;
  font-size:34px;line-height:1.5;text-align:center;letter-spacing:1px;color:#fff;border-radius:14px;
  background:linear-gradient(90deg,rgba(4,8,26,0),rgba(4,8,26,.78) 12%,rgba(4,8,26,.78) 88%,rgba(4,8,26,0));
  text-shadow:0 2px 8px #000;pointer-events:none;width:max-content}
#sub:empty{display:none}
body.nosub #sub{display:none}
#wm{position:absolute;right:56px;top:58px;font-size:22px;letter-spacing:3px;color:rgba(200,215,255,.5)}

/* ---------- 控制栏 ---------- */
#ctl{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:40px 26px 14px;background:linear-gradient(transparent,rgba(0,0,0,.82));
  transition:opacity .4s;font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif}
body.idle #ctl{opacity:0}
body.idle{cursor:none}
#bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.16);cursor:pointer;margin-bottom:12px;transition:height .15s}
#bar:hover,#bar.drag{height:10px}
#fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,var(--cy),var(--pk));box-shadow:0 0 12px var(--cy)}
#knob{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--cy)}
.tick{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.55)}
#tip{position:absolute;bottom:22px;transform:translateX(-50%);padding:6px 12px;border-radius:8px;background:rgba(10,16,40,.95);
  border:1px solid rgba(62,240,255,.4);font-size:14px;white-space:nowrap;pointer-events:none;display:none;color:#e9f1ff}
#bar:hover #tip{display:block}
.row{display:flex;align-items:center;gap:10px;color:#e9f1ff;font-size:15px}
.row .sp{flex:1}
button{font-family:inherit}
.ic{width:40px;height:40px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ic svg{width:24px;height:24px;fill:currentColor}
.ic:hover{background:rgba(255,255,255,.12);color:var(--cy)}
.ic.big svg{width:30px;height:30px}
.tx{height:32px;padding:0 12px;border-radius:16px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#e9f1ff;cursor:pointer;font-size:14px}
.tx:hover{border-color:var(--cy);color:var(--cy)}
.tx.on{border-color:rgba(62,240,255,.7);color:var(--cy);box-shadow:0 0 10px rgba(62,240,255,.3)}
#time{font-variant-numeric:tabular-nums;margin-left:6px;color:#cfdcf5}
#chap{margin-left:14px;color:var(--cy);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vol{width:90px;accent-color:#3ef0ff}
#menu{position:fixed;right:24px;bottom:96px;z-index:11;width:320px;max-height:70vh;overflow:auto;padding:10px;border-radius:14px;
  background:rgba(8,12,32,.96);border:1px solid rgba(62,240,255,.35);box-shadow:0 0 30px rgba(62,240,255,.2);display:none;
  font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif}
#menu.show{display:block}
#menu div{padding:9px 12px;border-radius:8px;font-size:14px;color:#dbe6ff;cursor:pointer;display:flex;gap:10px}
#menu div:hover{background:rgba(62,240,255,.12)}
#menu div.cur{color:var(--cy);background:rgba(62,240,255,.08)}
#menu div i{font-style:normal;color:var(--mu);width:56px;flex:none;font-variant-numeric:tabular-nums}

/* ---------- 开始遮罩 ---------- */
#start{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(circle at 50% 45%,rgba(20,30,80,.35),rgba(0,0,0,.75));transition:opacity .6s}
#start.hide{opacity:0;pointer-events:none}
.st-ring{width:170px;height:170px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--cy);box-shadow:0 0 40px rgba(62,240,255,.7),inset 0 0 30px rgba(62,240,255,.4);animation:breathe 2.2s ease-in-out infinite}
.st-ring svg{width:64px;height:64px;fill:#fff;margin-left:10px;filter:drop-shadow(0 0 10px var(--cy))}
@keyframes breathe{50%{box-shadow:0 0 80px rgba(62,240,255,.9),inset 0 0 40px rgba(62,240,255,.6);transform:scale(1.05)}}
.st-t{margin-top:40px;font-size:46px;font-weight:900;letter-spacing:8px;text-shadow:0 0 20px var(--cy)}
.st-s{margin-top:14px;font-size:18px;letter-spacing:3px;color:var(--mu)}