:root{--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
 --panel-w:clamp(320px,24vw,440px);--bar-h:clamp(84px,9.2vh,104px);--gap:clamp(14px,1.6vw,28px);
 --ink:#eaf3ff;--muted:#9fb6d6;--line:rgba(150,200,255,.22);--glass:rgba(10,24,52,.62);
 --gold:#ffbf4d;--blue:#46b6ff;--red:#ff5a4e;--fs:clamp(15px,1.02vw,19px);
 color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;overflow:hidden;background:#030914;color:var(--ink);font:var(--fs)/1.55 "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
#course{position:fixed;inset:0}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
header{position:absolute;left:calc(var(--gap) + var(--safe-l));top:calc(var(--gap)*.8 + var(--safe-t));pointer-events:none;max-width:calc(100vw - var(--panel-w) - 360px)}
.eyebrow{margin:0;color:var(--muted);font-size:.86em;letter-spacing:.08em}
h1{margin:.1em 0 0;font-size:clamp(26px,2.15vw,42px);line-height:1.2;font-weight:700;letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,30,90,.8)}
.subtitle{margin:.25em 0 0;color:#c4d6f0;font-size:1.02em}
.tabs{position:absolute;left:calc(var(--gap) + var(--safe-l));top:calc(var(--gap)*.8 + clamp(98px,10.5vh,132px) + var(--safe-t));display:flex;gap:8px}
.tabs button{display:flex;align-items:center;gap:.45em;min-height:44px;padding:.35em .95em;border-radius:999px;border:1px solid var(--line);background:rgba(8,22,48,.55);backdrop-filter:blur(10px);font-size:.95em;color:#cfe0f7}
.tabs button b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:rgba(120,170,255,.18);font-size:.9em}
.tabs button[aria-selected=true]{background:linear-gradient(180deg,rgba(60,140,255,.42),rgba(24,80,190,.42));border-color:rgba(130,200,255,.7);color:#fff}
.tabs button[aria-selected=true] b{background:var(--gold);color:#2a1700}
.top-tools{position:absolute;right:calc(var(--gap) + var(--safe-r));top:calc(var(--gap)*.8 + var(--safe-t));display:flex;gap:10px}
.top-tools button{min-height:46px;padding:0 1em;border-radius:12px;border:1px solid var(--line);background:rgba(8,22,48,.6);backdrop-filter:blur(10px);display:flex;align-items:center;gap:.5em}
.top-tools svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8}
#fullscreen{width:46px;justify-content:center;padding:0;font-size:1.2em}
#panel{position:absolute;right:calc(var(--gap) + var(--safe-r));top:calc(var(--gap)*.8 + 62px + var(--safe-t));bottom:calc(var(--bar-h) + var(--gap)*1.4 + var(--safe-b));width:var(--panel-w);overflow:auto;padding:clamp(16px,1.3vw,24px);border-radius:18px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 18px 50px rgba(0,0,0,.35);scrollbar-width:thin}
#panel h2{margin:0 0 .4em;font-size:1.22em;line-height:1.3}
#panel h3{margin:1em 0 .35em;font-size:1.05em;color:#d9e8ff}
#panel p{margin:.35em 0;color:#d0def2}
#panel .note{font-size:.84em;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:.35em;padding:.1em .6em;border-radius:999px;font-size:.85em;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.dot{display:inline-block;width:.75em;height:.75em;border-radius:50%}
.dot.gold{background:radial-gradient(circle,#ffe2a0,#ff9a1a);box-shadow:0 0 8px #ffb340}
.dot.blue{background:radial-gradient(circle,#bff0ff,#1aa0ff);box-shadow:0 0 8px #3ab0ff}
.dot.green{background:radial-gradient(circle,#c8ffd8,#22c06a);box-shadow:0 0 8px #3ad07a}
.stage-list{display:grid;gap:6px;margin:.6em 0}
.stage-list button{display:grid;grid-template-columns:2em 1fr;align-items:center;text-align:left;min-height:44px;padding:.3em .6em;border-radius:10px;border:1px solid transparent;background:rgba(255,255,255,.04);color:#c7d7ee}
.stage-list button i{font-style:normal;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:rgba(120,170,255,.16);font-size:.85em}
.stage-list button.active{border-color:rgba(255,191,77,.6);background:rgba(255,180,60,.12);color:#fff}
.stage-list button.active i{background:var(--gold);color:#2a1700}
.stage-list button.done i{background:rgba(255,191,77,.35)}
.callout{margin-top:.7em;padding:.75em .9em;border-radius:12px;background:rgba(255,255,255,.05);border-left:3px solid var(--gold)}
.callout.blue{border-left-color:var(--blue)}
.callout.red{border-left-color:var(--red)}
.pair-bars{display:grid;gap:.5em;margin:.6em 0}
.pair-bars div{display:grid;grid-template-columns:7.2em 1fr;align-items:center;gap:.6em;font-size:.88em;color:#c7d7ee}
.pair-bars span{height:.62em;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.pair-bars span i{display:block;height:100%;border-radius:99px;width:0}
.pick-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:.5em 0}
.pick-list button{min-height:52px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:.3em .5em;text-align:left;line-height:1.3}
.pick-list button small{display:block;color:var(--muted);font-size:.78em}
.pick-list button.active{border-color:var(--gold);background:rgba(255,180,60,.13)}
.pick-list.three{grid-template-columns:1fr 1fr 1fr}
table.vals{width:100%;border-collapse:collapse;font-size:.86em;margin:.4em 0}
table.vals td,table.vals th{padding:.3em .4em;border-bottom:1px solid rgba(150,200,255,.14);text-align:left}
table.vals th{color:var(--muted);font-weight:500}
#controls{position:absolute;left:calc(var(--gap) + var(--safe-l));right:calc(var(--panel-w) + var(--gap)*2 + var(--safe-r));bottom:calc(var(--gap)*.8 + var(--safe-b));min-height:var(--bar-h);display:flex;align-items:center;gap:clamp(8px,.8vw,14px);padding:.6em 1em;border-radius:18px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px);flex-wrap:wrap}
#controls .group{display:flex;align-items:center;gap:6px}
#controls .sep{width:1px;align-self:stretch;margin:.4em .2em;background:var(--line)}
#controls button{min-height:46px;padding:0 .95em;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);white-space:nowrap}
#controls button[aria-pressed=true]{background:rgba(70,160,255,.3);border-color:rgba(130,200,255,.7)}
#controls button.primary{background:linear-gradient(180deg,#ffcf6a,#f59a1e);color:#2a1700;border-color:transparent;font-weight:700;min-width:5.4em}
#controls label{display:flex;align-items:center;gap:.5em;white-space:nowrap;color:#c7d7ee}
#controls input[type=range]{accent-color:var(--gold);width:clamp(120px,14vw,300px);height:30px}
#controls .grow{flex:1;min-width:180px}
#controls .grow input{width:100%}
#controls output{min-width:3.2em;font-variant-numeric:tabular-nums;color:#fff}
.hint{position:absolute;left:calc(var(--gap) + var(--safe-l));bottom:calc(var(--bar-h) + var(--gap)*1.4 + var(--safe-b));margin:0;font-size:.8em;color:rgba(190,210,240,.65);pointer-events:none}
.atom-label{position:absolute;left:0;top:0;padding:.08em .5em;border-radius:8px;font-size:clamp(14px,1vw,19px);font-weight:700;white-space:nowrap;color:#fff;text-shadow:0 1px 6px #000,0 0 2px #000;will-change:transform}
.atom-label.tag{font-weight:600;font-size:clamp(13px,.92vw,17px);background:rgba(6,18,40,.72);border:1px solid var(--line)}
.atom-label.gold{color:#ffd88a;border-color:rgba(255,191,77,.6)}
.atom-label.ph{font-size:clamp(18px,1.25vw,24px);font-weight:800;color:#eaf3ff}
.atom-label.blue{color:#9fdcff;border-color:rgba(100,190,255,.6)}
.atom-label.green{color:#9ff0bd;border-color:rgba(80,210,130,.6)}
.atom-label.num{display:grid;place-items:center;width:1.9em;height:1.9em;padding:0;border-radius:50%;background:rgba(255,191,77,.94);color:#2a1700;text-shadow:none;font-size:clamp(16px,1.15vw,22px);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 18px rgba(255,180,60,.6);pointer-events:auto;cursor:pointer}
.atom-label.num.weak{background:rgba(150,200,255,.94)}
.atom-label.num.active{outline:3px solid #fff}
.atom-label.charge{font-size:clamp(16px,1.15vw,22px)}
.colorbar{margin:.5em 0 .2em}
.colorbar .bar{height:16px;border-radius:6px;background:linear-gradient(90deg,#d7261e,#f08a5d 25%,#fbf6f2 50%,#6fa6e6 75%,#1f4fd1);border:1px solid rgba(255,255,255,.25)}
.colorbar .ticks{display:flex;justify-content:space-between;font-size:.8em;color:#c7d7ee;font-variant-numeric:tabular-nums;margin-top:.15em}
.colorbar .means{display:flex;justify-content:space-between;font-size:.84em;margin-top:.1em}
.colorbar .means span:first-child{color:#ff8a7a}.colorbar .means span:last-child{color:#8fbaff}
dialog{max-width:min(860px,88vw);max-height:84vh;padding:0;border-radius:18px;border:1px solid var(--line);background:rgba(8,20,44,.96);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,6,18,.6);backdrop-filter:blur(3px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:1em 1.4em .4em}
.dialog-head h2{margin:0;font-size:1.3em}
.dialog-head button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:1.4em}
#knowledge-body{padding:0 1.4em 1.4em;overflow:auto;max-height:calc(84vh - 80px)}
#knowledge-body h3{margin:1em 0 .3em;color:var(--gold)}
#knowledge-body p,#knowledge-body li{color:#d0def2}
#failure{position:absolute;inset:40% 20% auto;padding:1em;border-radius:12px;background:#401010;text-align:center}
[hidden]{display:none!important}
/* 模块四/六新增：关键数字卡片、选项列表副标题、拖动提示 */
.kcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:.6em 0}
.kcards.two{grid-template-columns:1fr 1fr}
.kcards div{padding:.45em .55em;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);line-height:1.2}
.kcards small{display:block;color:var(--muted);font-size:.74em}
.kcards b{display:block;font-size:1.45em;font-variant-numeric:tabular-nums;color:#fff;margin-top:.15em}
.kcards i{font-style:normal;font-size:.72em;color:var(--muted)}
.stage-list.opts button{min-height:50px;line-height:1.25}
.stage-list.opts button small{display:block;color:var(--muted);font-size:.78em}
.stage-list.opts button.active small{color:#ffe1a6}
p.lead{margin:.2em 0 .5em;font-size:.92em}
.atom-label.tag.drag{border-style:dashed;color:#ffe1a6;font-weight:500}
.atom-label.tag.drag.on{border-color:rgba(255,195,90,.9);background:rgba(90,52,0,.72)}
@media (max-aspect-ratio:3/2){
 :root{--panel-w:clamp(300px,30vw,400px);--fs:clamp(14px,1.25vw,18px)}
 :root{--tabs-y:calc(var(--gap)*.8 + clamp(98px,10.5vh,132px) + var(--safe-t))}
 #panel{top:calc(var(--tabs-y) + 54px)}
 header{max-width:calc(100vw - var(--panel-w) - 120px)}
/* 1105b：iPad / 4:3 也把模块标签放在顶部（标题下方一排，可横向滑动），不再放左下角；看板整体下移到标签行之下 */
 .tabs{top:var(--tabs-y);bottom:auto;right:calc(var(--gap) + var(--safe-r));display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:6px;padding:2px 0 4px;-webkit-overflow-scrolling:touch}
 .tabs::-webkit-scrollbar{display:none}
 .tabs button{flex:none;min-height:40px;padding:.2em .8em .2em .45em;font-size:.86em;white-space:nowrap}
 #controls{right:calc(var(--gap) + var(--safe-r))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v3 反馈 1101：看板内分段切换（静电势/电子云、并排/离域前/离域后） */
#panel .seg{display:flex;gap:6px;margin:.3em 0 .7em}#panel .seg button{flex:1;padding:.5em .6em;border-radius:10px;border:1px solid rgba(160,210,255,.35);background:rgba(20,60,120,.35);color:#dceeff;font:inherit;font-size:.92em;cursor:pointer}#panel .seg button[aria-pressed=true]{background:linear-gradient(180deg,rgba(255,206,110,.55),rgba(240,150,40,.4));border-color:rgba(255,226,160,.95);color:#fff}
/* 反馈 1105：iPad「添加到主屏幕」独立窗口（standalone）——内容按安全区下移；高度用动态视口，避免首帧尺寸不准 */
/* 反馈 1105b：真机 iPad 上 env(safe-area-inset-*) 可能为 0（状态栏仍压住标题、列表与底栏贴边）。
   独立窗口下安全距离一律取 max(env, 兜底值)：顶 24px（状态栏高）、左右 12px、底 16px（圆角与横条）。
   JS 标记 html.standalone 与 CSS 媒体查询 display-mode 双保险，任一生效即可；普通 Safari / 电脑端不受影响。 */
html.standalone{--safe-t:max(env(safe-area-inset-top,0px),24px);--safe-r:max(env(safe-area-inset-right,0px),12px);--safe-b:max(env(safe-area-inset-bottom,0px),16px);--safe-l:max(env(safe-area-inset-left,0px),12px);--sa-t:var(--safe-t);--sa-r:var(--safe-r);--sa-b:var(--safe-b);--sa-l:var(--safe-l)}
@media (display-mode:standalone),(display-mode:fullscreen){html:root{--safe-t:max(env(safe-area-inset-top,0px),24px);--safe-r:max(env(safe-area-inset-right,0px),12px);--safe-b:max(env(safe-area-inset-bottom,0px),16px);--safe-l:max(env(safe-area-inset-left,0px),12px);--sa-t:var(--safe-t);--sa-r:var(--safe-r);--sa-b:var(--safe-b);--sa-l:var(--safe-l)}}
html.standalone,html.standalone body{height:100%;min-height:-webkit-fill-available}
@supports (height:100dvh){html.standalone,html.standalone body{height:100dvh}}