/* 学习路线（逻辑 assets/path.js，TFS.pathMap）：path.html 页面 + 首页嵌入共用。只用亮色。
   结构：[.pa-head 顶部切换（页面模式）] + .pa-map（[.pa-bar 嵌入时的紧凑进度条] + .pa-cv 地图画布：SVG 景色 + 节点按钮 + 课名牌）
   地图配色全部是下面的 --pm-* 变量（四种风格各一套），节点 / 山 / 树 / 路 / 徽章都跟着风格变；底部弹出的步骤面板也用这些变量。 */

/* ---------- 配色：经典（默认）---------- */
:root{
 /* 天空 → 山腰 → 山脚 */
 --pm-sky:#CFE3EC;--pm-sky-2:#E3EEE6;--pm-g1:#DDE9CB;--pm-g2:#D3E3B8;--pm-g3:#DCE6BC;--pm-g4:#EAE3C6;
 --pm-sun:#F6D98F;--pm-sun-g:rgba(243,210,142,.3);--pm-cloud:#fff;--pm-bird:#5B4636;
 --pm-pk0:#7E9DB2;--pm-pk1:#A9C0C4;--pm-pk2:#C9D8C6;--pm-snow:#fff;--pm-rg0:#8FAEC0;--pm-rg1:#8DAF7A;
 /* 景物 */
 --pm-pine-0:#3E7346;--pm-pine-1:#356A3F;--pm-pine-2:#47804C;--pm-pine2-0:#5C8A3A;--pm-pine2-1:#6B9A45;
 --pm-tree-0:#79A85A;--pm-tree-1:#8DB766;--pm-tree-2:#E0A93E;--pm-tree-3:#D9824A;--pm-bush-0:#86AE5E;--pm-bush-1:#73A052;
 --pm-flw-0:#E07A9A;--pm-flw-1:#F3D28E;--pm-flw-2:#FFFFFF;--pm-flw-3:#E5735A;--pm-flc:#C25A34;--pm-stem:#5C8A3A;--pm-grass:#6E9A48;
 --pm-trunk:#6B4A2E;--pm-rock:#A79D8E;--pm-rock2:#8E8374;--pm-srock:#9AA3A8;--pm-srock2:#7F8A90;
 --pm-wall:#FBF3E2;--pm-door:#7A5434;--pm-win:#C9A54E;--pm-roof:#B23A2A;--pm-roof2:#8E2C20;
 --pm-gate:#B23A2A;--pm-gate2:#8E2C20;--pm-gtop:#24463C;--pm-plq:#E0A93E;
 /* 路 */
 --pm-road:#F1E5C6;--pm-road-ed:#C8AF80;--pm-road-sh:rgba(70,50,20,.12);--pm-road-dot:#fff;--pm-trail:#E0A93E;
 /* 节点：完成 / 当前 / 已解锁 / 未解锁 */
 --pm-done-1:#FBE3A0;--pm-done-2:#E8B34C;--pm-done-3:#C98A22;--pm-done-ink:#fff;--pm-done-sh:rgba(120,70,0,.45);
 --pm-cur-1:#2B86A8;--pm-cur-2:#143C5B;--pm-cur-bd:#F3D28E;--pm-cur-glow:rgba(224,169,62,.55);--pm-ring:rgba(224,169,62,.85);
 --pm-open-bg:#fff;--pm-open-ink:#143C5B;--pm-open-bd:#BCD3DF;
 --pm-lock-bg:#D9D3C7;--pm-lock-ink:#9A9083;--pm-lock-bd:#EEE9DF;
 --pm-star:#F2B632;--pm-star-bd:#A86F0C;--pm-hl:#E0A93E;
 /* 山顶徽章 */
 --pm-pb-ring:#E0A93E;--pm-pb-track:rgba(255,255,255,.75);--pm-pb-1:#24597A;--pm-pb-2:#0D263B;--pm-pb-ink:#fff;--pm-pb-hi:#F3D28E;
 --pm-label:rgba(255,252,245,.94);
}
/* ---------- 简白：浅灰蓝天空、留白多、蓝色主色 ---------- */
:root[data-theme="white"]{
 --pm-sky:#EAF1FD;--pm-sky-2:#F3F7FE;--pm-g1:#EFF6F2;--pm-g2:#EAF3EC;--pm-g3:#F0F6EE;--pm-g4:#F8F9F6;
 --pm-sun:#FDE68A;--pm-sun-g:rgba(253,230,138,.35);--pm-cloud:#fff;--pm-bird:#94A3B8;
 --pm-pk0:#B4C6E2;--pm-pk1:#CFDCEE;--pm-pk2:#E4ECF5;--pm-snow:#fff;--pm-rg0:#BCCCE6;--pm-rg1:#B5D4C4;
 --pm-pine-0:#5E9C80;--pm-pine-1:#4F8F73;--pm-pine-2:#6EAA8E;--pm-pine2-0:#7DB39A;--pm-pine2-1:#8FC0A8;
 --pm-tree-0:#8CC3A6;--pm-tree-1:#A3D0B7;--pm-tree-2:#F5C26B;--pm-tree-3:#93B7E8;--pm-bush-0:#A9D3BC;--pm-bush-1:#94C7AC;
 --pm-flw-0:#F59EB5;--pm-flw-1:#FCD34D;--pm-flw-2:#FFFFFF;--pm-flw-3:#93C5FD;--pm-flc:#F59E0B;--pm-stem:#7DB39A;--pm-grass:#8FC0A8;
 --pm-trunk:#A08672;--pm-rock:#CBD2DB;--pm-rock2:#B3BCC7;--pm-srock:#C9D2DD;--pm-srock2:#AEB9C6;
 --pm-wall:#FFFFFF;--pm-door:#94A3B8;--pm-win:#BFDBFE;--pm-roof:#3B82F6;--pm-roof2:#1D4ED8;
 --pm-gate:#3B82F6;--pm-gate2:#1D4ED8;--pm-gtop:#1E293B;--pm-plq:#FCD34D;
 --pm-road:#FFFFFF;--pm-road-ed:#D8E0EC;--pm-road-sh:rgba(15,23,42,.05);--pm-road-dot:rgba(37,99,235,.28);--pm-trail:#3B82F6;
 --pm-done-1:#FDE68A;--pm-done-2:#F59E0B;--pm-done-3:#D97706;--pm-done-ink:#fff;--pm-done-sh:rgba(146,64,14,.4);
 --pm-cur-1:#60A5FA;--pm-cur-2:#1D4ED8;--pm-cur-bd:#DBEAFE;--pm-cur-glow:rgba(37,99,235,.38);--pm-ring:rgba(37,99,235,.6);
 --pm-open-bg:#fff;--pm-open-ink:#2563EB;--pm-open-bd:#D6E4FB;
 --pm-lock-bg:#E7EBF0;--pm-lock-ink:#A3AEBD;--pm-lock-bd:#F8FAFC;
 --pm-star:#F59E0B;--pm-star-bd:#B45309;--pm-hl:#2563EB;
 --pm-pb-ring:#2563EB;--pm-pb-track:#E3E9F3;--pm-pb-1:#3B82F6;--pm-pb-2:#1E3A8A;--pm-pb-ink:#fff;--pm-pb-hi:#BFDBFE;
 --pm-label:rgba(255,255,255,.95);
}
/* ---------- 清新：薄荷绿 ---------- */
:root[data-theme="fresh"]{
 --pm-sky:#D6F1E5;--pm-sky-2:#E5F6EE;--pm-g1:#DCF1E2;--pm-g2:#D0ECD8;--pm-g3:#DAF0E0;--pm-g4:#EEF8F2;
 --pm-sun:#F7D488;--pm-sun-g:rgba(247,212,136,.35);--pm-cloud:#fff;--pm-bird:#466B62;
 --pm-pk0:#93C9B4;--pm-pk1:#B9E0CF;--pm-pk2:#D5EEE2;--pm-snow:#fff;--pm-rg0:#93C9B4;--pm-rg1:#A3D6A0;
 --pm-pine-0:#2E8E6B;--pm-pine-1:#257F5F;--pm-pine-2:#3A9C78;--pm-pine2-0:#46A77F;--pm-pine2-1:#5AB58D;
 --pm-tree-0:#5FBF8F;--pm-tree-1:#79CC9F;--pm-tree-2:#F7C35F;--pm-tree-3:#F39A6B;--pm-bush-0:#7FCB9F;--pm-bush-1:#69BE8E;
 --pm-flw-0:#F48FB1;--pm-flw-1:#F7D488;--pm-flw-2:#FFFFFF;--pm-flw-3:#F28B6E;--pm-flc:#E8704A;--pm-stem:#3A9C78;--pm-grass:#4FAF7F;
 --pm-trunk:#8A6A4F;--pm-rock:#B9C6BF;--pm-rock2:#A1B0A8;--pm-srock:#BCCAC3;--pm-srock2:#9FAFA7;
 --pm-wall:#FFFFFF;--pm-door:#8A6A4F;--pm-win:#F7D488;--pm-roof:#E8704A;--pm-roof2:#C9553A;
 --pm-gate:#0E8C6B;--pm-gate2:#0B6E54;--pm-gtop:#12302A;--pm-plq:#F7D488;
 --pm-road:#FFFFFF;--pm-road-ed:#BFE3D2;--pm-road-sh:rgba(18,48,42,.07);--pm-road-dot:rgba(14,140,107,.35);--pm-trail:#14A37F;
 --pm-done-1:#FDE7A5;--pm-done-2:#F0B23C;--pm-done-3:#D18E12;--pm-done-ink:#fff;--pm-done-sh:rgba(140,80,0,.4);
 --pm-cur-1:#2BC498;--pm-cur-2:#0B6E54;--pm-cur-bd:#CDF3E3;--pm-cur-glow:rgba(14,140,107,.4);--pm-ring:rgba(14,140,107,.6);
 --pm-open-bg:#fff;--pm-open-ink:#0E8C6B;--pm-open-bd:#C3E8D8;
 --pm-lock-bg:#DAE7E0;--pm-lock-ink:#93ACA3;--pm-lock-bd:#F1F8F4;
 --pm-star:#F0B23C;--pm-star-bd:#A86F0C;--pm-hl:#0E8C6B;
 --pm-pb-ring:#0E8C6B;--pm-pb-track:#D8EEE4;--pm-pb-1:#14A37F;--pm-pb-2:#0B5E48;--pm-pb-ink:#fff;--pm-pb-hi:#D1FAE5;
 --pm-label:rgba(255,255,255,.95);
}
/* ---------- 中国风：宣纸、水墨山、朱红印章 ---------- */
:root[data-theme="ink"]{
 --pm-sky:#F1EBDF;--pm-sky-2:#F6F1E7;--pm-g1:#F3EDE1;--pm-g2:#EEE7D9;--pm-g3:#F1EBDF;--pm-g4:#F7F2E8;
 --pm-sun:#D9634F;--pm-sun-g:rgba(179,52,46,.12);--pm-cloud:#FFFDF8;--pm-bird:#5A5148;
 --pm-pk0:#6F685E;--pm-pk1:#A39C90;--pm-pk2:#D6CFC2;--pm-snow:#FAF6EE;--pm-rg0:#8C857A;--pm-rg1:#9A9C8A;
 --pm-pine-0:#3B3A35;--pm-pine-1:#2F2E2A;--pm-pine-2:#4A4843;--pm-pine2-0:#5E6157;--pm-pine2-1:#6E7166;
 --pm-tree-0:#6F7A66;--pm-tree-1:#88917D;--pm-tree-2:#B8893B;--pm-tree-3:#B3342E;--pm-bush-0:#8A9180;--pm-bush-1:#7A8170;
 --pm-flw-0:#B3342E;--pm-flw-1:#DCC189;--pm-flw-2:#FFFDF8;--pm-flw-3:#C9564F;--pm-flc:#B8893B;--pm-stem:#6E7166;--pm-grass:#7A8170;
 --pm-trunk:#3B2F26;--pm-rock:#A39C90;--pm-rock2:#8A8377;--pm-srock:#B5AEA2;--pm-srock2:#9B9488;
 --pm-wall:#FFFDF8;--pm-door:#5A5148;--pm-win:#DCC189;--pm-roof:#2B2724;--pm-roof2:#1E1B18;
 --pm-gate:#B3342E;--pm-gate2:#8E2620;--pm-gtop:#2B2724;--pm-plq:#DCC189;
 --pm-road:#FFFDF8;--pm-road-ed:#D9CDB5;--pm-road-sh:rgba(30,27,24,.07);--pm-road-dot:rgba(30,27,24,.26);--pm-trail:#B3342E;
 --pm-done-1:#D9645B;--pm-done-2:#B3342E;--pm-done-3:#8E2620;--pm-done-ink:#FFFDF8;--pm-done-sh:rgba(80,10,6,.4);
 --pm-cur-1:#5A5148;--pm-cur-2:#1E1B18;--pm-cur-bd:#DCC189;--pm-cur-glow:rgba(179,52,46,.35);--pm-ring:rgba(179,52,46,.6);
 --pm-open-bg:#FFFDF8;--pm-open-ink:#1E1B18;--pm-open-bd:#D9CDB5;
 --pm-lock-bg:#E6DFD2;--pm-lock-ink:#A39C90;--pm-lock-bd:#F7F1E5;
 --pm-star:#C9A04A;--pm-star-bd:#8A6A22;--pm-hl:#B3342E;
 --pm-pb-ring:#B3342E;--pm-pb-track:#EBE2D0;--pm-pb-1:#4A4540;--pm-pb-2:#1E1B18;--pm-pb-ink:#FFFDF8;--pm-pb-hi:#DCC189;
 --pm-label:rgba(255,253,248,.95);
}

/* ---------- 顶部（页面模式 / 传了 head）：横幅 ---------- */
.pa-head{position:relative;z-index:2;color:var(--hero-ink);background:var(--hero-bg);border-bottom:1px solid var(--hero-line)}
.ph-in{max-width:920px;margin:0 auto;display:grid;gap:12px;padding:16px max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left))}
@media (min-width:760px){.ph-in{padding:22px 24px 24px;gap:14px}}
.ph-tr{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--hero-glass);border:1px solid var(--hero-line)}
.ph-tr button{flex:1;min-width:0;border:0;background:none;color:var(--hero-ink-2);border-radius:11px;padding:8px 8px;font-size:14px;font-weight:900;cursor:pointer;line-height:1.2;transition:background-color .15s,color .15s}
.ph-tr button small{display:block;font-size:11px;font-weight:700;opacity:.8}
.ph-tr button:hover{color:var(--hero-ink)}
.ph-tr button.on{background:var(--hero-btn-bg);color:var(--hero-btn-ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ph-lv{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
@media (min-width:760px){.ph-lv{gap:8px}}
.ph-lv button{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.05;border:1px solid var(--hero-line);background:var(--hero-glass);
 color:var(--hero-ink);border-radius:14px;padding:8px 4px 12px;cursor:pointer;transition:background-color .15s,transform .15s}
.ph-lv button:hover{background:var(--hero-glass-2);transform:translateY(-1px)}
.ph-lv small{font-family:var(--latin);font-size:9.5px;font-weight:800;letter-spacing:.08em;opacity:.7}
.ph-lv b{font-family:var(--latin);font-size:20px;font-weight:900}
.ph-lv i{position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:2px;background:var(--hero-line);overflow:hidden}
.ph-lv u{display:block;height:100%;background:var(--hero-hi)}
.ph-lv button.on{background:var(--hero-btn-bg);color:var(--hero-btn-ink);border-color:transparent;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.ph-lv button.on i{background:color-mix(in srgb,var(--hero-btn-ink) 22%,transparent)}
.ph-lv button.on u{background:var(--hero-btn-ink)}
.ph-sum{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 12px 12px 16px;border-radius:18px;background:var(--hero-glass);border:1px solid var(--hero-line)}
.ph-st{flex:1 1 220px;min-width:0}
.ph-nm b{font-family:var(--serif);font-size:20px;font-weight:900}
.ph-nm b rt{color:var(--hero-ink-3)}
.ph-nm small{margin-left:8px;font-size:13px;font-weight:800;color:var(--hero-hi)}
.ph-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin-top:2px;font-size:12.5px;color:var(--hero-ink-2)}
.ph-n em{font-style:normal;font-weight:900;font-size:15px;color:var(--hero-hi);font-family:var(--latin)}
.ph-n span{font-family:var(--latin);font-weight:700}
.ph-n i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;align-self:center}
.ph-bar{height:6px;border-radius:3px;margin-top:8px;background:var(--hero-line);overflow:hidden}
.ph-bar u{display:block;height:100%;border-radius:3px;background:var(--hero-hi)}
/* 全部解锁开关（顶部 .ph-sw / 嵌入条 .pab-sw 共用 .psw-*） */
.ph-sw,.pab-sw{flex:0 1 auto;display:flex;align-items:center;gap:10px;max-width:100%;cursor:pointer;text-align:left;font:inherit}
.ph-sw{border:1px solid var(--hero-line);background:var(--hero-glass-2);color:var(--hero-ink);border-radius:14px;padding:8px 10px}
.psw-ic{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 9%,transparent)}
.psw-ic svg{width:19px;height:19px;display:block}
.psw-tx{min-width:0}
.psw-tx b{display:block;font-size:13px;font-weight:900}
.psw-tx small{display:block;font-size:11px;line-height:1.3;opacity:.72}
.ph-sw .sw{background:var(--hero-line)}
.ph-sw.on .sw,.pab-sw.on .sw{background:var(--jade)}
.ph-sw.on .sw i,.pab-sw.on .sw i{transform:translateX(18px)}
.ph-sw.on .psw-ic,.pab-sw.on .psw-ic{background:color-mix(in srgb,var(--jade) 18%,transparent);color:var(--jade)}
@media (max-width:560px){.ph-sw{flex:1 1 100%}.ph-sw .psw-tx{flex:1}}

/* ---------- 地图容器 ---------- */
.pa-map{position:relative;overflow:hidden;min-height:320px;background:var(--pm-sky)}
@media (min-width:980px){.pa-map:not(.pa-embed){max-width:920px;margin:24px auto 36px;border-radius:28px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}}
.pa-embed{border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow)}
.pa-cv{position:relative;overflow:hidden;min-height:320px;
 background:linear-gradient(180deg,var(--pm-sky) 0,var(--pm-sky-2) 190px,var(--pm-g1) 330px,var(--pm-g2) 55%,var(--pm-g3) 84%,var(--pm-g4) 100%)}
.pa-cv>.loading,.pa-cv>.empty{position:relative;z-index:2}

/* 嵌入时的紧凑条：本级进度 + 星星 + 全部解锁 */
.pa-bar{position:relative;z-index:4;padding:12px 12px 0;background:var(--pm-sky)}
.pab-in{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 86%,transparent);
 border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pab-st{flex:1;min-width:0}
.pab-t{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.pab-t small{font-family:var(--latin);font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--pm-hl)}
.pab-t b{font-family:var(--serif);font-size:15.5px;font-weight:900;color:var(--ink)}
.pab-t span{font-size:12px;font-weight:700;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.pab-n{display:flex;align-items:baseline;gap:2px 6px;margin-top:1px;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden}
.pab-n em{font-style:normal;font-family:var(--latin);font-size:14px;font-weight:900;color:var(--pm-star-bd)}
.pab-n span{font-family:var(--latin);font-weight:700}
.pab-n i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;align-self:center;flex:0 0 auto}
.pab-p{margin-left:auto;font-family:var(--latin);font-size:12.5px;font-weight:900;color:var(--ink)}
.pab-bar{height:6px;border-radius:3px;margin-top:6px;background:var(--paper-2);overflow:hidden}
.pab-bar u{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--pm-star),var(--pm-hl))}
.pab-sw{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:6px 8px;font-size:12px}
.pab-sw .psw-ic{width:28px;height:28px;border-radius:9px}
.pab-sw .psw-ic svg{width:17px;height:17px}
.pab-sw .psw-tx{font-size:12px;font-weight:800;line-height:1.2}
.pab-sw .l2 small{font-size:.86em}
@media (max-width:420px){.pab-t span{display:none}.pab-sw .psw-tx{display:none}.pab-in{gap:10px}}

/* ---------- 地图画布：SVG 景色 ---------- */
.pa-svg{position:absolute;left:0;top:0;display:block;pointer-events:none}
.s-rg0{stop-color:var(--pm-rg0)}.s-rg1{stop-color:var(--pm-rg1)}
.s-pk0{stop-color:var(--pm-pk0)}.s-pk1{stop-color:var(--pm-pk1)}.s-pk2{stop-color:var(--pm-pk2)}
.c-sun{fill:var(--pm-sun)}.c-sun-g{fill:var(--pm-sun-g)}.c-snow{fill:var(--pm-snow)}.c-cloud{fill:var(--pm-cloud)}.c-bird{fill:none;stroke:var(--pm-bird);opacity:.55}
.c-trunk{fill:var(--pm-trunk)}.c-rock{fill:var(--pm-rock)}.c-rock2{fill:var(--pm-rock2)}.c-srock{fill:var(--pm-srock)}.c-srock2{fill:var(--pm-srock2)}
.c-stem{stroke:var(--pm-stem)}.c-flc{fill:var(--pm-flc)}.c-grass{stroke:var(--pm-grass)}
.c-wall{fill:var(--pm-wall)}.c-door{fill:var(--pm-door)}.c-win{fill:var(--pm-win)}.c-roof{fill:var(--pm-roof)}.c-roof2{fill:var(--pm-roof2)}
.c-gate{fill:var(--pm-gate)}.c-gate2{fill:var(--pm-gate2)}.c-gtop{fill:var(--pm-gtop)}.c-plq{fill:var(--pm-plq)}
.sc-pine.v0{fill:var(--pm-pine-0)}.sc-pine.v1{fill:var(--pm-pine-1)}.sc-pine.v2{fill:var(--pm-pine-2)}
.sc-pine2.v0{fill:var(--pm-pine2-0)}.sc-pine2.v1{fill:var(--pm-pine2-1)}
.sc-tree.v0{fill:var(--pm-tree-0)}.sc-tree.v1{fill:var(--pm-tree-1)}.sc-tree.v2{fill:var(--pm-tree-2)}.sc-tree.v3{fill:var(--pm-tree-3)}
.sc-bush.v0{fill:var(--pm-bush-0)}.sc-bush.v1{fill:var(--pm-bush-1)}
.sc-flw.v0{fill:var(--pm-flw-0)}.sc-flw.v1{fill:var(--pm-flw-1)}.sc-flw.v2{fill:var(--pm-flw-2)}.sc-flw.v3{fill:var(--pm-flw-3)}
.rd-sh{fill:none;stroke:var(--pm-road-sh);stroke-linecap:round;stroke-linejoin:round}
.rd-ed{fill:none;stroke:var(--pm-road-ed);stroke-linecap:round;stroke-linejoin:round}
.rd{fill:none;stroke:var(--pm-road);stroke-linecap:round;stroke-linejoin:round}
.rd-dot{fill:none;stroke:var(--pm-road-dot);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.1 13}
.rd-gold{fill:none;stroke:var(--pm-trail);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.pa-cl{animation:paDrift 26s ease-in-out infinite alternate}
@keyframes paDrift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

/* 节点：left/top 是圆心（用 margin 退回半径，transform 留给动画） */
.pn{position:absolute;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pn-c{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-family:var(--latin);border:4px solid #fff;
 box-shadow:inset 0 -5px 0 rgba(0,0,0,.16),0 6px 14px rgba(20,12,8,.22);transition:transform .15s}
.pn:hover .pn-c{transform:translateY(-2px)}
.pn:active .pn-c{transform:translateY(1px)}
.pn:focus-visible{outline:none}
.pn:focus-visible .pn-c{outline:3px solid var(--pm-hl);outline-offset:3px}
.pn-c b{font-size:23px;font-weight:900;line-height:1}
.pn.st-done .pn-c{background:radial-gradient(circle at 35% 30%,var(--pm-done-1),var(--pm-done-2) 55%,var(--pm-done-3));color:var(--pm-done-ink);text-shadow:0 1px 2px var(--pm-done-sh)}
.pn-ok{position:absolute;right:-6px;bottom:-4px;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--jade);color:#fff;box-shadow:0 0 0 2.5px #fff}
.pn.st-cur .pn-c{background:radial-gradient(circle at 35% 30%,var(--pm-cur-1),var(--pm-cur-2) 72%);color:#fff;border-color:var(--pm-cur-bd);
 box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 0 0 5px color-mix(in srgb,var(--pm-ring) 40%,transparent),0 8px 24px var(--pm-cur-glow)}
.pn.st-open .pn-c{background:var(--pm-open-bg);color:var(--pm-open-ink);border-color:var(--pm-open-bd);box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--pm-open-ink) 12%,transparent),0 6px 14px rgba(20,12,8,.16)}
.pn.st-lock .pn-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--pm-lock-bg);color:var(--pm-lock-ink);border-color:var(--pm-lock-bd);
 box-shadow:inset 0 -5px 0 rgba(0,0,0,.07),0 4px 10px rgba(20,12,8,.1)}
.pn.st-lock .pn-c svg{display:block;width:21px;height:21px}
.pn.st-lock .pn-c small{font-size:11px;font-weight:900;line-height:1}
/* 中国风：完成的课像一方朱红印章（圆角方形） */
:root[data-theme="ink"] .pn.st-done .pn-c{border-radius:16px;transform:rotate(-4deg)}
:root[data-theme="ink"] .pn.st-done:hover .pn-c{transform:rotate(-4deg) translateY(-2px)}
/* 节点上的三颗星（满星的 1/3、2/3、全满） */
.pn-cr{position:absolute;z-index:2;left:50%;top:-15px;transform:translateX(-50%);display:flex;pointer-events:none}
.pn-cr i{font-style:normal;font-size:16px;line-height:1;color:rgba(255,255,255,.92);-webkit-text-stroke:1px rgba(120,90,40,.35);text-shadow:0 1px 2px rgba(0,0,0,.12)}
.pn-cr i:nth-child(2){font-size:19px;transform:translateY(-4px)}
.pn-cr i.on{color:var(--pm-star);-webkit-text-stroke:1px var(--pm-star-bd)}
/* 当前这课：轻轻上下跳 + 一圈光往外扩 */
.pn.st-cur{animation:paBob 2.4s ease-in-out infinite}
@keyframes paBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.pn-ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--pm-ring);pointer-events:none;animation:paPulse 2.4s ease-out infinite}
@keyframes paPulse{0%{transform:scale(.9);opacity:.9}80%,100%{transform:scale(1.45);opacity:0}}

/* 课名牌：在节点没有路的那一侧 */
.pl{position:absolute;z-index:2;transform:translateY(-50%);min-width:0;cursor:pointer;background:var(--pm-label);border:1px solid var(--line);
 border-radius:14px;padding:7px 12px 8px;box-shadow:0 4px 14px rgba(20,12,8,.08);transition:border-color .15s,box-shadow .15s}
.pl:hover{border-color:color-mix(in srgb,var(--pm-hl) 50%,var(--line))}
.pl.l{text-align:right}
.pl small{display:block;font-size:11px;font-weight:800;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl small em{font-style:normal;color:var(--pm-star-bd);font-family:var(--latin)}
.pl b{display:block;font-family:var(--serif);font-weight:900;font-size:15px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.pl-e{display:inline-block;margin-right:5px;font-size:.92em;font-family:var(--sans);font-weight:400;vertical-align:.02em}
.pl-tr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:1px;font-size:11.5px;line-height:1.3;color:var(--ink-soft)}
.pl.st-done{border-color:color-mix(in srgb,var(--pm-done-2) 45%,var(--line))}
.pl.st-cur{border:1.5px solid var(--pm-hl);box-shadow:0 8px 22px color-mix(in srgb,var(--pm-hl) 26%,transparent)}
.pl.st-lock{opacity:.7;box-shadow:none}
.pl-go{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 6px;margin-top:8px;border-radius:999px;padding:7px 14px 7px 10px;
 background:var(--accent);color:#fff;font-size:13px;font-weight:900;line-height:1.2;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent);transition:filter .15s,transform .15s}
.pl-gi{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);font-size:9px}
.pl-go small{display:inline;font-size:11px;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap}
.pl-go:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* 山顶徽章：外圈 = 本级进度 */
.pa-top{position:absolute;z-index:3;width:250px;margin:-62px 0 0 -125px;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.pb{width:124px;height:124px;border-radius:50%;padding:7px;background:conic-gradient(var(--pm-pb-ring) calc(var(--p) * 1%),var(--pm-pb-track) 0);
 box-shadow:0 0 0 4px #fff,0 12px 30px rgba(20,40,60,.22)}
.pb-in{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:var(--latin);
 color:var(--pm-pb-ink);background:radial-gradient(circle at 35% 28%,var(--pm-pb-1),var(--pm-pb-2) 75%)}
.pb-in small{font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--pm-pb-hi)}
.pb-in b{font-size:44px;font-weight:900;margin:3px 0 2px}
.pb-in span{font-size:13px;font-weight:900;opacity:.88}
.pb-t{margin-top:10px;max-width:100%;background:var(--pm-label);border:1px solid var(--line);border-radius:999px;padding:4px 14px;box-shadow:0 4px 12px rgba(20,12,8,.08)}
.pb-t b{font-family:var(--serif);font-size:15px;font-weight:900;color:var(--ink)}
.pb-t small{margin-left:6px;font-size:12px;font-weight:800;color:var(--ink-soft)}
.pa-top.win .pb{background:conic-gradient(var(--pm-done-3) calc(var(--p) * 1%),var(--pm-done-1) 0);box-shadow:0 0 0 4px #fff,0 0 36px color-mix(in srgb,var(--pm-done-2) 80%,transparent)}
.pa-top.win .pb-in{color:var(--pm-done-ink);background:radial-gradient(circle at 35% 28%,var(--pm-done-1),var(--pm-done-2) 60%,var(--pm-done-3));text-shadow:0 1px 2px var(--pm-done-sh)}
.pa-top.win .pb-in small,.pa-top.win .pb-in span{color:inherit}
.pb-win{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:10px;white-space:nowrap;border-radius:999px;padding:4px 12px;
 background:var(--card);border:1px solid color-mix(in srgb,var(--pm-done-2) 50%,var(--line));color:var(--ink);font-size:13.5px;font-weight:900;box-shadow:var(--shadow)}
/* 起点 */
.pa-start{position:absolute;z-index:2;transform:translateX(-50%);display:flex;align-items:center;gap:5px;white-space:nowrap;border-radius:999px;padding:4px 12px 4px 9px;
 background:var(--pm-gate);color:#fff;font-size:12.5px;font-weight:900;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.pa-start svg{width:15px;height:15px;display:block}
/* 回到当前（挂在 body 上：fixed 不受容器 transform 影响；贴底导航上面） */
.pa-here{position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + var(--navh) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;
 border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 10px;background:var(--card);color:var(--ink);font-size:13px;font-weight:900;cursor:pointer;
 box-shadow:var(--shadow-lg);animation:paIn .18s ease-out}
@keyframes paIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pa-here[hidden]{display:none}
.pa-here .ph-pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--pm-hl) 14%,var(--card));color:var(--pm-hl)}
.pa-here .ph-pin svg{width:16px;height:16px;display:block}
.pa-here .l2{align-items:flex-start;text-align:left}
.pa-here i{font-style:normal;min-width:30px;height:28px;padding:0 9px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;font-family:var(--latin)}
.pa-here i::before{content:"↓ ";font-size:11px}
.pa-here.up i::before{content:"↑ "}

/* ---------- 底部弹出：这课的步骤 ---------- */
.sheet.ps-sheet{max-width:600px}
.ps-hd{display:flex;align-items:center;gap:14px;margin:0 44px 14px 0}
.ps-no{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--latin);font-size:21px;font-weight:900;
 border:3px solid #fff;box-shadow:0 4px 12px rgba(20,12,8,.16)}
.ps-no svg{width:22px;height:22px;display:block}
.ps-no.st-done{background:radial-gradient(circle at 35% 30%,var(--pm-done-1),var(--pm-done-2) 55%,var(--pm-done-3));color:var(--pm-done-ink)}
.ps-no.st-cur{background:radial-gradient(circle at 35% 30%,var(--pm-cur-1),var(--pm-cur-2) 72%);color:#fff;border-color:var(--pm-cur-bd)}
.ps-no.st-open{background:var(--pm-open-bg);color:var(--pm-open-ink);border-color:var(--pm-open-bd)}
.ps-no.st-lock{background:var(--pm-lock-bg);color:var(--pm-lock-ink)}
.ps-tt{min-width:0}
.ps-tt small{display:block;font-size:12px;font-weight:800;color:var(--ink-mute)}
.ps-tt h3{margin:2px 0 0;font-family:var(--serif);font-size:20px;font-weight:900;line-height:1.4}
@media (max-width:420px){.ps-tt h3{font-size:18px}}
.ps-tt p{margin:2px 0 0;font-size:13.5px;color:var(--ink-soft)}
.ps-tot{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.ps-badge{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:900;background:var(--paper-2);color:var(--ink-soft)}
.ps-badge.st-done{background:color-mix(in srgb,var(--pm-done-2) 18%,var(--card));color:var(--pm-done-3)}
.ps-badge.st-cur{background:var(--cobalt);color:#fff}
.ps-badge.st-open{background:color-mix(in srgb,var(--cobalt) 10%,var(--card));color:var(--cobalt)}
.ps-cr,.pst-cr{display:flex;flex:0 0 auto}
.ps-cr i,.pst-cr i{font-style:normal;font-size:18px;line-height:1;color:color-mix(in srgb,var(--ink) 14%,transparent)}
.ps-cr i.on,.pst-cr i.on{color:var(--pm-star);text-shadow:0 1px 0 var(--pm-star-bd)}
.ps-n{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.ps-n b{font-family:var(--latin);font-size:16px;color:var(--pm-star-bd)}
.ps-bar{flex:1 0 100%;height:6px;border-radius:3px;overflow:hidden;background:var(--paper-2)}
.ps-bar u{display:block;height:100%;background:linear-gradient(90deg,var(--pm-star),var(--pm-hl))}
.ps-lock{margin-bottom:12px;padding:12px 14px;border:1.5px dashed color-mix(in srgb,var(--pm-hl) 55%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--pm-hl) 6%,var(--card))}
.ps-lock p{margin:0 0 10px;font-size:14px;font-weight:800}
.ps-lock div{display:flex;gap:8px;flex-wrap:wrap}
.ps-lock .btn.pri{background:var(--accent);border-color:var(--accent)}
.ps-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pst{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;color:var(--ink);background:var(--card);border:1px solid var(--line);
 border-radius:16px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
a.pst:hover{border-color:var(--c);transform:translateY(-1px)}
.pst.rec{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 30%,transparent),var(--shadow)}
.pst-l{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px}
.pst-l .pst-cr i{font-size:14px}
.pst-ic{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--card))}
.pst-ic svg{width:23px;height:23px;display:block}
.pst-ic i{position:absolute;left:-6px;top:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--latin);
 font-size:11px;font-weight:900;color:#fff;background:var(--c);border:2px solid var(--card)}
.pst-tx{flex:1;min-width:0}
.pst-tx b{display:block;font-size:15px;font-weight:900}
.pst-tx b em{font-style:normal;margin-left:4px;vertical-align:2px;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:900;color:#fff;background:var(--c)}
.pst-tx small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink-soft)}
.pst-tx .pst-st{font-size:12.5px;font-weight:800;color:var(--ink)}
.pst.full .pst-st{color:var(--jade)}
.pst .go{flex:0 0 auto;font-size:20px;color:var(--ink-mute)}
.ps-steps.dis .pst{opacity:.55;box-shadow:none}
.ps-how{margin-top:12px;padding:12px 14px;background:var(--card-2);border:1px solid var(--line);border-radius:14px}
.ps-how summary{cursor:pointer;font-size:14px;font-weight:900}
.ps-how summary small{font-weight:700;color:var(--ink-soft)}
.ps-how ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.ps-how li b{display:flex;align-items:center;gap:6px;font-size:13.5px}
.ps-how .ph-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--card))}
.ps-how .ph-ic svg{width:15px;height:15px;display:block}
.ps-how li small{display:block;margin:2px 0;font-size:12px;color:var(--ink-mute)}
.ps-how li span{display:block;font-size:12.5px;color:var(--ink-soft)}
.ps-how li span i{display:inline-block;min-width:3.4em;font-style:normal;color:var(--pm-star)}
.ps-how p{margin:10px 0 0;font-size:12.5px;font-weight:800}
.ps-nav{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.ps-nav .btn{flex:0 1 auto;min-width:0;white-space:normal;box-shadow:none}
@media print{.pa-here,.pa-head{display:none!important}}
@media (prefers-reduced-motion:reduce){.pn.st-cur,.pn-ring,.pa-cl{animation:none}}