/* Prometheus Plan — 原创闯关式学习主题（无第三方品牌参照）
   配色：靛蓝主色 + 多彩分区条；白底、粗描边、轻阴影。
   内联 SVG + 系统字体；无 emoji、无紫粉渐变、无位图。 */

:root{
  --primary:#6366f1; --primary-d:#4f46e5; --primary-x:#a5b4fc; --primary-l:#eef2ff;
  --green:#22c55e; --green-d:#16a34a; --green-x:#86efac; --green-l:#dcfce7;
  --blue:#1cb0f6; --blue-d:#1899d6;
  --violet:#8b5cf6; --violet-d:#7c3aed;
  --teal:#14b8a6; --teal-d:#0d9488;
  --amber:#f59e0b; --amber-d:#d97706;
  --rose:#f43f5e; --rose-d:#e11d48;
  --orange:#f97316; --orange-d:#ea580c;
  --yellow:#eab308; --yellow-d:#ca8a04;
  --red:#ef4444; --red-d:#dc2626;
  --ink:#3c3c3c; --ink-soft:#777; --line:#e5e5e5; --line-d:#cfcfcf;
  --bg:#ffffff; --surface:#f7f7f7;
  --radius:16px;
  --accent:#0ea5e9; --danger:#ef4444;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;}
a{color:var(--blue);text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:.2px}
.muted{color:var(--ink-soft);font-size:14px}
.center{text-align:center}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#fff;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;column-gap:8px;row-gap:1px;font-weight:800;color:var(--ink);font-size:17px}
.topbar .mark{width:30px;height:30px;color:var(--primary);display:inline-flex}
.topbar .mark svg{width:30px;height:30px}
.topbar .brand-name{font-size:17px;font-weight:800;color:var(--ink);line-height:1.1}
/* 品牌副文案：像一束阳光照在 Prometheus 上、投下的暖色阴影（无暗色杂背景，纯色轻提示） */
.topbar .brand-tag{flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:.4px;line-height:1.2;position:relative;padding-left:3px;
  background:linear-gradient(95deg,#d97706,#f59e0b 45%,#fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 1px rgba(245,158,11,.16)}
.topbar .brand-tag::before{content:"";position:absolute;left:7px;top:-15px;width:3px;height:15px;
  background:linear-gradient(180deg,rgba(245,158,11,0),rgba(245,158,11,.35));border-radius:2px;pointer-events:none}
.topbar .spacer{flex:1}
.stat-pill{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px}
.stat-pill svg{width:18px;height:18px}
.stat-pill:nth-of-type(1) svg{color:var(--amber)}
.stat-pill:nth-of-type(2) svg{color:var(--orange)}

/* ---------- 通用按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:15px;
  border:2px solid var(--line-d);background:#fff;color:var(--ink);border-radius:14px;padding:11px 18px;cursor:pointer;
  box-shadow:0 4px 0 var(--line-d);transition:transform .05s,box-shadow .05s;text-align:center}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line-d)}
.btn.primary{background:var(--primary);border-color:var(--primary-d);color:#fff;box-shadow:0 4px 0 var(--primary-d)}
.btn.primary:active{box-shadow:0 1px 0 var(--primary-d)}
.btn.blue{background:var(--blue);border-color:var(--blue-d);color:#fff;box-shadow:0 4px 0 var(--blue-d)}
.btn.ghost{background:#fff;border-color:var(--line-d);color:var(--blue);box-shadow:0 4px 0 var(--line-d)}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:0 4px 0 var(--line-d)}

/* ---------- 容器 ---------- */
.wrap{max-width:680px;margin:0 auto;padding:18px 16px 120px}

/* ================= 学习路径 ================= */
.path-page{padding-bottom:60px}
.path-intro{max-width:680px;margin:18px auto 6px;padding:0 16px}
.path-intro h1{font-size:24px}
.path-intro .muted{margin-top:4px}

/* 分区标题条 */
.section{margin:26px auto 0;max-width:680px;padding:0 16px}
.section-head{display:flex;align-items:center;gap:12px;color:#fff;border-radius:var(--radius);padding:14px 18px;
  box-shadow:0 4px 0 rgba(0,0,0,.08)}
.section-head.indigo{background:var(--primary);box-shadow:0 4px 0 var(--primary-d)}
.section-head.violet{background:var(--violet);box-shadow:0 4px 0 var(--violet-d)}
.section-head.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-d)}
.section-head.teal{background:var(--teal);box-shadow:0 4px 0 var(--teal-d)}
.section-head.amber{background:var(--amber);box-shadow:0 4px 0 var(--amber-d)}
.section-head.rose{background:var(--rose);box-shadow:0 4px 0 var(--rose-d)}
.section-head.orange{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.section-head.yellow{background:var(--yellow);box-shadow:0 4px 0 var(--yellow-d)}
.section-head.green{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.section-head .t{font-weight:800}
.section-head .t .big{font-size:18px;display:block}
.section-head .t .sub{font-size:13px;font-weight:600;opacity:.92}
.section-head .guide{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;
  background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);border-radius:12px;padding:7px 12px;cursor:pointer;color:#fff}
.section-head .guide svg{width:18px;height:18px}
/* 限时置顶标识：仅一个红点 + 「置顶」文字，不加任何动效/无关注意力 */
.section-head .pin-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  color:#fff;margin-bottom:6px}
.section-head .pin-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block;flex:0 0 auto}

/* 单元标题下的副文案（banner 内，对齐 a.html 的 .banner .s：前 12 字 + 省略号） */
.section-head .t .s{display:block;font-size:12px;font-weight:600;opacity:.92;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 学习路径/单元内 横向步骤条（方案 A：严格对齐 proto/a.html 的 .nav-a .chip
   —— 彩色块纯填充无边框，只有 locked 套浅灰边；单行纯文本、无图标、无进度弧） */
.cp-strip{display:flex;gap:6px;max-width:560px;margin:12px auto 0;padding:0 4px;overflow:hidden}
.cp-block{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:12px;padding:12px 2px;font-size:12px;font-weight:700;background:var(--surface);color:var(--ink-soft);line-height:1.2;border:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.cp-block.current{background:var(--primary);color:#fff;cursor:pointer}
.cp-block.done{background:var(--green);color:#fff;cursor:pointer}
.cp-block.locked{background:var(--surface);border-color:var(--line);color:var(--ink-soft);cursor:not-allowed}

/* 章节进度徽章（多邻国风格：白底半透 chip） */
.section-head .prog-badge{margin-left:12px;display:inline-flex;align-items:center;gap:6px;
  font-weight:800;font-size:13px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);
  border-radius:999px;padding:5px 12px;color:#fff;flex:0 0 auto}
.section-head .prog-badge::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#fde047;box-shadow:0 0 0 2px rgba(255,255,255,.4)}

/* 漂浮吉祥物（原创小龙，原创动效，非多邻国） */
.mascot{position:fixed;right:18px;bottom:90px;width:104px;height:104px;z-index:5;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));
  animation:dragon-bob 3.4s ease-in-out infinite;transform-origin:center bottom}
.mascot .drag{width:100%;height:100%}
.drag *{transform-box:fill-box}
.drag-wing-l{transform-origin:90% 50%;animation:drag-flap-l 2.4s ease-in-out infinite}
.drag-wing-r{transform-origin:10% 50%;animation:drag-flap-r 2.4s ease-in-out infinite}
.drag-eye{transform-origin:center;animation:drag-blink 5s infinite}
.drag-tail{transform-origin:0% 80%;animation:drag-tail 2.8s ease-in-out infinite}
.drag-spark{transform-origin:center;animation:drag-spark 1.8s ease-in-out infinite}
.drag-body{transform-origin:center;animation:drag-breath 3s ease-in-out infinite}
@keyframes dragon-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes drag-flap-l{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
@keyframes drag-flap-r{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
@keyframes drag-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
@keyframes drag-tail{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes drag-spark{0%,100%{opacity:.55;transform:scale(.85) rotate(-10deg)}50%{opacity:1;transform:scale(1.2) rotate(10deg)}}
@keyframes drag-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* ================= 单元课程页 ================= */
.unit-wrap{max-width:640px;margin:0 auto;padding:0 16px 120px}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--blue);padding:10px 0;cursor:pointer;font-size:15px}
.back svg{width:18px;height:18px}

/* 顶部进度条 */
.d-progress{display:flex;gap:4px;margin:6px 0 18px}
.d-progress .seg{flex:1;height:14px;background:var(--line);border-radius:999px;overflow:hidden}
.d-progress .seg i{display:block;height:100%;width:0;background:var(--primary);border-radius:999px;transition:width .3s}
.d-progress .seg.lit i{width:100%}

/* 关卡卡片 */
.less-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:18px;margin:16px 0;box-shadow:0 2px 0 var(--line)}
.less-card .lc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.less-card .lc-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--primary);border:2px solid var(--line)}
.less-card .lc-ic svg{width:20px;height:20px}
.less-card .lc-t{font-weight:800;font-size:17px}
.less-card .lc-s{font-size:13px;color:var(--ink-soft);font-weight:600}

/* 词卡 */
.eng-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.eng-card{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;transition:background .1s}
.eng-card:hover{background:var(--surface)}
.eng-card.show{background:var(--primary-l)}
.eng-card .ew{font-weight:800;font-size:16px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.eng-card .ipa{font-size:12px;color:var(--ink-soft);font-weight:600}
.eng-card .pos{font-size:11px;color:var(--blue);font-weight:800;background:#eaf6ff;border-radius:6px;padding:1px 6px}
.eng-card .zh{font-weight:700;margin-top:6px}
.eng-card .ex{font-size:13px;color:var(--ink-soft);margin-top:4px}
.eng-card .hint,.anchors-hint{font-size:12px;color:var(--ink-soft);margin-top:6px;font-style:italic}

/* 论文动画网格 */
.viz-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
.viz{border:2px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.viz-title{font-weight:800;font-size:15px;padding:10px 12px 0}
.viz-stage{width:100%;height:240px;background:var(--surface)}
.viz-stage canvas{width:100%;height:100%;display:block}
.viz-cap{font-size:13px;color:var(--ink-soft);padding:8px 12px 12px}
/* —— 关卡二 交互控件（anim2.js） —— */
.viz-controls{border-top:1px dashed var(--line);background:#fcfdfe;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.viz-controls .pp-hint{width:100%;margin:0 0 4px;font-size:12px;color:var(--ink-soft)}
.pp-btn{border:1.5px solid var(--primary);background:#fff;color:var(--primary-d);border-radius:9px;padding:6px 12px;font-size:13px;cursor:pointer;font-weight:700}
.pp-btn:hover{background:var(--primary);color:#fff}
.pp-btn.off{border-color:var(--line);color:var(--ink-soft);background:#fff}
.pp-slider{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px 8px}
.pp-slider input[type=range]{width:120px}
.pp-slider-v{font-weight:700;color:var(--primary-d);min-width:30px;text-align:right}
.pp-toggle-l{font-size:12px;color:var(--ink-soft)}
.pp-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.pp-chip{border:1.5px solid var(--primary);background:#fff;color:var(--primary-d);border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer;font-weight:700}
.pp-chip.sel{background:var(--primary);color:#fff}
.pp-chip.done{opacity:.5;cursor:default;text-decoration:line-through}
.pp-slots{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.pp-slot{border:2px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink-soft);min-width:140px;flex:1;cursor:pointer;background:#fff}
.pp-slot.ok{border-color:var(--ok);color:var(--ok);border-style:solid;font-weight:700}
.pp-slot.bad{border-color:var(--danger);background:#fff5f5;animation:ppShake .4s}
@keyframes ppShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}


/* 锚点卡 */
.anchor{border:2px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;background:#fff}
.anchor .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.anchor .concept{font-weight:800;font-size:15px}
.anchor .grade{font-size:12px;color:var(--blue);background:#eaf6ff;border-radius:6px;padding:2px 8px;font-weight:700}
.anchor .lv{font-size:12px;font-weight:800;border-radius:6px;padding:2px 8px;color:#fff}
.anchor .lv.A{background:var(--green)} .anchor .lv.B{background:var(--blue)} .anchor .lv.C{background:var(--orange)}
.anchor .bridge{font-size:14px;margin-top:8px;line-height:1.6;color:var(--ink)}
/* 锚点卡「我懂了」按钮：默认醒目蓝色，确认后转绿 */
.anchor .ack-btn{margin-top:10px;background:#fff;color:var(--blue);border:2px solid var(--blue-d);box-shadow:0 4px 0 var(--blue-d);font-size:15px}
.anchor .ack-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.anchor .ack-btn.acked{background:var(--green);border-color:var(--green-d);color:#fff;box-shadow:0 4px 0 var(--green-d)}
.anchor .ack-btn.acked:active{box-shadow:0 1px 0 var(--green-d)}

/* 五层讲解 + 题 */
.step{border-left:4px solid var(--primary);padding:4px 0 4px 12px;margin:10px 0}
.step h3{font-size:15px;font-weight:800}
.step p{font-size:14px;line-height:1.6;margin:4px 0 0}
.desc{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:6px 0}

/* 选择题 */
.q{border:2px solid var(--line);border-radius:14px;padding:14px;margin:12px 0;background:#fff}
.q .prompt{font-weight:800;font-size:15px;margin-bottom:10px;line-height:1.5}
.q .opts{display:grid;gap:8px}
.q .opt{border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;background:#fff;transition:background .1s,border-color .1s,transform .08s}
.q .opt:hover{background:var(--surface);border-color:var(--line-d)}
.q .opt:active{transform:translateY(1px)}
.q .opt.correct{background:var(--green-l);border-color:var(--green)}
.q .opt.wrong{background:#ffdfe0;border-color:var(--red)}
.q .opt .mk{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-d);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--ink-soft);font-weight:800;font-size:14px;background:#fff;
  transition:background .1s,border-color .1s,color .1s}
.q .opt:hover .mk{border-color:var(--primary-x);color:var(--primary-d)}
.q .opt.correct .mk{background:var(--green);border-color:var(--green-d);color:#fff}
.q .opt.wrong .mk{background:var(--red);border-color:var(--red-d);color:#fff}
.q .explain{margin-top:10px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:700;line-height:1.5;display:none}
.q .explain.show{display:block}
.q .explain.ok{background:var(--green-l);color:#15803d}
.q .explain.no{background:#ffdfe0;color:var(--red-d)}

/* 视频奖励区 */
.bonus-q{margin-top:10px}

/* 底部检查/继续条 */
.d-action{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--line);padding:14px 16px;z-index:15;display:flex;justify-content:center}
.d-action .inner{max-width:640px;width:100%;display:flex;gap:10px;justify-content:flex-end}
.d-action .hint-line{margin-right:auto;align-self:center;color:var(--ink-soft);font-weight:700;font-size:14px}

/* 反馈条 */
.feedback{position:fixed;left:0;right:0;bottom:74px;background:#fff;border-top:2px solid var(--line);padding:14px 16px;z-index:16;display:none}
.feedback.show{display:block}
.feedback .inner{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:12px}
.feedback.ok{border-top-color:var(--green)}
.feedback.no{border-top-color:var(--red)}
.feedback .txt{font-weight:800;font-size:17px}
.feedback.ok .txt{color:var(--green-d)}
.feedback.no .txt{color:var(--red-d)}
.feedback .ex{font-size:13px;color:var(--ink-soft);font-weight:600}

/* 完成庆祝屏 */
.win-screen{position:fixed;inset:0;background:var(--primary);color:#fff;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.win-screen.show{display:flex}
.win-screen .win-dragon{width:140px;height:140px;margin-bottom:8px;animation:dragon-bob 2.4s ease-in-out infinite}
.win-screen .drag-celebrate{width:100%;height:100%;animation:drag-celebrate 1.4s ease-in-out infinite}
@keyframes drag-celebrate{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.win-screen h2{font-size:30px}
.win-screen .xp{font-weight:800;font-size:22px;margin:8px 0 18px}
.win-screen .btn{background:#fff;color:var(--primary-d);border-color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.15)}

/* ---------- 付费墙弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-mask.show{display:flex}
.modal{background:#fff;border:2px solid var(--line);border-radius:var(--radius);max-width:440px;width:100%;padding:24px;box-shadow:0 8px 0 rgba(0,0,0,.12)}
.modal h2{font-size:22px;margin-bottom:6px}
.modal .lead{color:var(--ink-soft);font-size:14px;line-height:1.6;margin:0 0 14px}
.modal .field{width:100%;border:2px solid var(--line-d);border-radius:12px;padding:12px;font-size:15px;font-weight:700;margin-bottom:12px;outline:none}
.modal .field:focus{border-color:var(--blue)}
.tier-pick{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.tier-pick label{display:flex;align-items:center;gap:8px;font-weight:700;border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.tier-pick label:has(input:checked){border-color:var(--blue);background:#eaf6ff}
.modal .note{color:var(--ink-soft);font-size:13px;text-align:center;margin-top:12px;cursor:pointer}
#pp-thanks{margin-top:6px}
#pp-thanks h2{font-size:20px;color:var(--primary-d)}
#pp-thanks .lead{color:var(--ink-soft);font-size:14px}
#pp-thanks .note{color:var(--ink-soft);font-size:12px;margin-top:8px}

/* 卡片通用 */
.card{border:2px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;margin:14px 0}

/* 实验台等场景组件需避开底部固定动作条（.cp-foot z-index:15），
   否则 240px 高的 #box 下半部分会被遮住、拖拽鼠/诱饵点不到 */
#content{padding-bottom:120px}

/* CTA */
.cta{text-align:center;margin:30px auto;max-width:680px;padding:0 16px}

/* ================= 学习路径动态 ================= */
/* 分区入场：自下而上错峰淡入 */
.section{animation:sec-in .55s ease both}
.section:nth-child(1){animation-delay:.04s}
.section:nth-child(2){animation-delay:.12s}
.section:nth-child(3){animation-delay:.20s}
.section:nth-child(4){animation-delay:.28s}
.section:nth-child(5){animation-delay:.36s}
.section:nth-child(6){animation-delay:.44s}
.section:nth-child(7){animation-delay:.52s}
@keyframes sec-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* 尊重无障碍：减少动态 */
@media (prefers-reduced-motion: reduce){
  .section,
  .mascot,.drag-wing-l,.drag-wing-r,.drag-eye,.drag-tail,.drag-spark,.drag-body,
  .win-screen .win-dragon,.drag-celebrate{animation:none!important}
}

/* 响应式 */
@media (max-width:560px){
  .cp-strip{gap:4px}
  .cp-block{padding:10px 2px;font-size:11px}
  .mascot{width:72px;height:72px;right:8px;bottom:80px}
  .topbar .brand small{display:none}
  .viz-stage{height:200px}
}

/* 实验游戏 step 进度条（修复 bug2：stepHead 不再"卡住"） */
.sp-rail{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.sp-dot{flex:1;min-width:18px;height:6px;background:var(--line);border-radius:999px;transition:background .25s}
.sp-dot.cur{background:linear-gradient(90deg,var(--primary),var(--primary-d));box-shadow:0 0 8px rgba(99,102,241,.4);animation:sp-pulse 1.6s ease-in-out infinite}
.sp-dot.done{background:var(--green)}
@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* 实验游戏情境卡引导（修复 bug3：第五步无引导） */
.scenario-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--line-d)}
.scenario-card:hover .scenario-hint{opacity:1;transform:translateX(0)}
.scenario-hint{position:absolute;right:10px;bottom:10px;font-size:12px;font-weight:800;color:var(--ink-soft);background:#fff;border:2px solid var(--line);border-radius:999px;padding:3px 8px;opacity:.7;transition:opacity .15s,transform .15s;transform:translateX(4px);animation:hint-pulse 1.4s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.5)}50%{box-shadow:0 0 0 6px rgba(99,102,241,0)}}

/* 诱饵脉冲（★ 原来只写了 animation:baitPulse，keyframes 从未定义 → 静默失效）
   只动 box-shadow，不动 transform，避免和 JS 的定位打架 */
@keyframes baitPulse{
  0%,100%{box-shadow:0 0 8px rgba(239,68,68,.6)}
  50%{box-shadow:0 0 18px 4px rgba(239,68,68,.85)}
}

/* 结论填空（修复 bug3：问题与选项成组，移动端一屏可见） */
.blank-card{border-color:var(--primary);background:#fff}
.blank-card-head{font-weight:800;color:var(--primary-d);font-size:14px;margin-bottom:10px;line-height:1.5}
.blank-row{margin:10px 0;padding:10px;border:2px solid var(--line);border-radius:12px;background:var(--surface)}
.blank-q{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;line-height:1.5}
.blank-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:800}
.blank-mark{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap}
.blank-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.opt-chip{flex:1 1 auto;min-width:84px;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff;font-weight:700;font-size:14px;transition:border-color .15s,background .15s}
.opt-chip:hover{border-color:var(--primary);background:var(--primary-l)}
.opt-chip:has(input:checked){border-color:var(--primary-d);background:var(--primary-l);color:var(--primary-d)}
.opt-chip input{margin:0;accent-color:var(--primary-d)}

/* ================= 落地页（index）· 借鉴多邻国着陆页机制，保持原创清爽风格 ================= */
/* Hero */
.hero{text-align:center;padding:26px 0 10px}
.hero .kicker{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.3px;color:#fff;
  background:var(--primary);border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 var(--primary-d)}
.hero h1{font-size:30px;line-height:1.25;margin:16px auto 12px;max-width:560px;letter-spacing:.2px}
.hero .sub{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:560px;margin:0 auto 18px}
.hero .sub strong{color:var(--ink)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.cta-row .btn{font-size:16px;padding:13px 22px}
/* 证据条（7 期视频） */
.proof{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:600px;margin:0 auto}
.proof .chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);
  background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 12px}
.proof .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}

/* 区块通用 */
.block{margin:40px auto 0;max-width:680px;padding:0 16px}
.block-h{font-size:22px;text-align:center;margin-bottom:6px;letter-spacing:.2px}
.block .desc{text-align:center;max-width:560px;margin:0 auto 18px}

/* 价值点（3 列） */
.value{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.v-item{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:16px 14px;text-align:center;box-shadow:0 2px 0 var(--line)}
.v-ic{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary-l);color:var(--primary-d);margin-bottom:8px}
.v-ic svg{width:26px;height:26px}
.v-item h3{font-size:15px;margin-bottom:6px}
.v-item p{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0}

/* 3 步怎么学 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:18px 14px;box-shadow:0 2px 0 var(--line)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--primary);color:#fff;font-weight:800;font-size:16px;margin-bottom:10px}
.step-card h3{font-size:15px;margin-bottom:6px}
.step-card p{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0}

/* 单元预览网格 */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.unit-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;box-shadow:0 2px 0 var(--line)}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.pill{font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px;color:var(--ink-soft);background:var(--surface);border:2px solid var(--line)}
.pill-free{color:#167a5f;background:#eaf6f1;border-color:#bfe6d6}
.pill-lock{color:#b9742a;background:#fff3e0;border-color:#f3d9b0}
.unit-card h3{font-size:17px;margin:8px 0 6px}
.unit-card .muted{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 14px;flex:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.unit-card .btn{margin-top:auto}

/* 定价 */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;margin-top:4px}
.plan{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:18px 16px;
  display:flex;flex-direction:column;box-shadow:0 2px 0 var(--line);position:relative}
.plan .tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;color:var(--ink-soft);
  background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:3px 10px;margin-bottom:8px}
.plan.feature{border-color:var(--primary);border-width:3px;box-shadow:0 6px 0 var(--primary-d);transform:translateY(-6px);padding-top:20px}
.plan.feature .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);color:#fff;background:var(--primary);
  border:2px solid var(--primary-d);margin:0}
.plan .amt{font-size:28px;font-weight:800;color:var(--ink);line-height:1.1}
.plan .amt small{font-size:13px;font-weight:700;color:var(--ink-soft);margin-left:3px}
.plan-name{font-weight:700;font-size:14px;margin:4px 0 10px;color:var(--ink)}
.plan ul{list-style:none;padding:0;margin:0 0 14px;flex:1}
.plan li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--ink);margin-bottom:8px}
.plan li .mk{width:19px;height:19px;color:var(--green);flex:0 0 auto;margin-top:1px}
.plan li .mk svg{width:19px;height:19px;display:block}
.plan .btn{margin-top:auto}
.note{color:var(--ink-soft);font-size:13px;text-align:center;line-height:1.6}

/* FAQ */
.faq{display:grid;gap:10px}
.faq-item{background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px 16px}
.faq-item h3{font-size:15px;margin-bottom:4px}
.faq-item p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0}

/* 底部 CTA 条 */
.cta-band{margin:44px auto 0;max-width:680px;padding:26px 16px;text-align:center;
  background:var(--primary-l);border:2px solid var(--primary-x);border-radius:var(--radius)}
.cta-band h2{font-size:22px;margin-bottom:6px}
.cta-band .desc{margin-bottom:14px}

/* 落地页响应式：移动端网格堆叠为单列 */
@media (max-width:560px){
  .hero h1{font-size:24px}
  .value,.steps,.grid2,.price-grid{grid-template-columns:1fr}
  .plan.feature{transform:none;padding-top:18px}
  .plan.feature .tag{top:-14px}
}