/* 分离液态空气制氧 · 版式（工厂课件统一升级：复制自钛白粉 / 合成氨的蓝色磨砂玻璃面板，末尾为本课件专用补充）
   左侧：3D 工厂 + 左上标题 + 底部三阶段导航；右侧：一块蓝色磨砂玻璃知识面板，分区可折叠，整块面板可收起。
   舞台按 1920 宽缩放；--u = 屏幕上的 1px（1280×720 时约 1.5 舞台像素），字号和间距都用 --u，
   这样任何分辨率下屏幕字号都不小于 16px，间距保持 8pt 网格。 */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-family:var(--font);color:#0b2545;font-synthesis:none;-webkit-font-smoothing:antialiased;
  --ink:#0b2545;--ink2:#3d5a7a;--muted:#6a819b;--blue:#0a6cff;--hair:rgba(16,46,88,.12);
}
*{box-sizing:border-box}
html,body{margin:0;width:100vw;height:100vh;overflow:hidden;background:#c9d6e2}
button,input,output{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid #0a84ff;outline-offset:2px}
[hidden]{display:none!important}

.stage{
  --u:max(1px, calc(1px / var(--scale, 1)));
  --s1:calc(8 * var(--u));--s2:calc(16 * var(--u));--s3:calc(24 * var(--u));
  --m:calc(16 * var(--u));                       /* 外边距：1280 宽时 24 舞台像素 */
  --pw:calc(475 * var(--u));                     /* 面板宽（380 × 1.25） */
  --floor:calc(16 * var(--u));
  position:absolute;left:50%;top:50%;width:1920px;height:var(--stage-height,1080px);
  transform:translate(-50%,-50%) scale(var(--scale,1));overflow:hidden;isolation:isolate;
  background:radial-gradient(80% 70% at 32% 30%,#fbfdff 0%,#e3ebf2 55%,#cbd8e4 100%)}
@media (max-aspect-ratio:3/2){.stage{--pw:calc(430 * var(--u))}}

/* 统一的蓝色磨砂玻璃 */
.glass,.views,.panel,.panel-tab,.round{
  background:linear-gradient(160deg,rgba(240,247,255,.82),rgba(208,228,252,.70));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 calc(12 * var(--u)) calc(40 * var(--u)) rgba(18,48,90,.16),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6)}

/* ---------- 3D 场景 ---------- */
.scene{position:absolute;inset:0}
#apparatus{position:absolute;left:0;top:0;width:1920px;height:100%;display:block;cursor:grab}
#apparatus:active{cursor:grabbing}
.labels{position:absolute;inset:0;pointer-events:none}
.webgl-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:20px 28px;background:#fff;border-radius:14px;font-size:var(--floor)}

/* 左上标题：与合成氨 / Luna glass-blue-v1 标题卡一致，样式在本课件内独立实现。 */
.scene-header{position:absolute;left:var(--m);top:var(--m);z-index:5;pointer-events:none;max-width:calc(100% - var(--pw) - 3 * var(--m));font-family:"PingFang SC","Microsoft YaHei",sans-serif}
.course-title-card{position:relative;isolation:isolate;width:max-content;max-width:100%;font-size:calc(20 * var(--u));padding:.55em 1em .65em;border-radius:1.25em;border:1px solid #ffffffb8;
  background:linear-gradient(145deg,#f1f7fff7,#dbe9f8f5);box-shadow:inset 0 1px 1px #fff,0 3px 20px #176dd323;color:#09235d}
.header-meta{display:flex;align-items:center;gap:.65em;font-size:.9em;line-height:1.35;font-weight:700;white-space:normal;flex-wrap:wrap;color:#142e76;letter-spacing:.04em}
.subject-badge{display:inline-block;flex:none;padding:.35em 1em;border-radius:999px;background:linear-gradient(180deg,#69d1ff 0%,#2798ff 40%,#1479ef 100%);box-shadow:inset 0 2px 3px #ffffff9c,0 2px 9px #4caeff80;border:1px solid #bceeff;color:#fff;font-size:1em;font-weight:700;text-shadow:0 1px 2px #147ac566}
.scene-header h1{margin:.12em 0 .04em;padding:0;font-size:2.25em;line-height:1.15;font-weight:800;letter-spacing:.035em;color:#081f5c;text-shadow:0 1px 0 #ffffffb3;white-space:normal}
.subtitle{margin:0;padding:0;border:0;font-size:1.2em;line-height:1.4;letter-spacing:.06em;font-weight:600;color:#0863c8;text-shadow:0 1px 0 #ffffff80}
.scene-hint{margin:calc(8 * var(--u)) 0 0;font-size:var(--floor);line-height:1.4;color:#29435c;background:#ffffffc9;border-radius:99px;width:max-content;padding:5px 12px}

/* 底部三阶段导航：居中在面板左侧的场景区 */
.stagebar{position:absolute;z-index:6;left:var(--m);right:calc(var(--pw) + 2 * var(--m));bottom:var(--m);
  display:flex;align-items:center;justify-content:center;gap:var(--s1);pointer-events:none;transition:right .36s cubic-bezier(.3,.7,.2,1)}
.stagebar>*{pointer-events:auto}
.round{flex:none;width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;font-size:calc(26 * var(--u));line-height:1;font-weight:500;color:#164a86;display:grid;place-items:center;padding:0 0 calc(3 * var(--u))}
.round.primary{background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff;border-color:rgba(255,255,255,.6)}
.round:disabled{opacity:.4;cursor:default}
.views{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:calc(4 * var(--u)) var(--s1);
  padding:calc(6 * var(--u)) calc(10 * var(--u));border-radius:calc(20 * var(--u));min-width:0}
.views button{border:0;background:transparent;padding:calc(5 * var(--u)) calc(7 * var(--u));border-radius:calc(11 * var(--u));
  font-size:var(--floor);font-weight:500;line-height:1.2;color:#25507e;white-space:nowrap}
.views button:hover{background:rgba(255,255,255,.55)}
.views button[aria-pressed=true]{background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(10,99,216,.3)}
.views>button{align-self:center}
.stage-group{display:flex;flex-direction:column;gap:2px;padding-left:var(--s1);border-left:1px solid var(--hair)}
.stage-group b{font-size:var(--floor);font-weight:600;color:var(--muted);line-height:1.2;padding-left:calc(7 * var(--u))}
.stage-group:has(button[aria-pressed=true]) b{color:var(--blue)}
.stage-group span{display:flex;gap:2px}

/* ---------- 右侧知识面板 ---------- */
.panel{position:absolute;z-index:7;top:var(--m);right:var(--m);bottom:var(--m);width:var(--pw);
  --pf:1.5;--ff:calc(var(--u) * var(--pf));--floor:calc(16 * var(--ff));
  display:flex;flex-direction:column;border-radius:calc(24 * var(--u));overflow:hidden;
  transition:transform .36s cubic-bezier(.3,.7,.2,1),opacity .3s}
.stage.panel-collapsed .panel{transform:translateX(calc(100% + 2 * var(--m)));opacity:0;pointer-events:none}
.stage.panel-collapsed .stagebar{right:calc(48 * var(--u) + 2 * var(--m))}
.panel-tab{position:absolute;z-index:7;right:var(--m);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:var(--s1);padding:var(--s2) calc(10 * var(--u));
  border-radius:calc(16 * var(--u));font-size:var(--floor);font-weight:600;color:#164a86;letter-spacing:.2em}
.panel-tab span{writing-mode:horizontal-tb;font-size:calc(22 * var(--u));line-height:1}

.panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s2) var(--s1) var(--s3)}
.panel-title{margin:0;font-size:calc(22 * var(--ff));font-weight:700;letter-spacing:.01em;color:#06204a;display:flex;align-items:baseline;gap:var(--s1);min-width:0}
.panel-step{font-size:var(--floor);font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:50%;border:0;background:rgba(10,60,120,.08);
  color:#25507e;font-size:calc(20 * var(--ff));line-height:1;display:grid;place-items:center;padding:0 0 calc(2 * var(--u))}
.icon-btn:hover{background:rgba(10,60,120,.14)}

/* 状态：四格数字 */
.live-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);margin:0 var(--s2) var(--s1);padding:var(--s1);
  border-radius:calc(16 * var(--u));background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}
.live-chips>span{display:flex;flex-direction:column;align-items:flex-start;padding:0 calc(4 * var(--u));min-width:0}
.live-chips>span+span{border-left:1px solid var(--hair);padding-left:var(--s1)}
.live-chips small{font-size:var(--floor);color:var(--muted);white-space:nowrap}
.live-chips b{font-size:calc(19 * var(--ff));font-weight:600;font-variant-numeric:tabular-nums;color:#0b2f5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.panel-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 var(--s3);scrollbar-width:thin;scrollbar-color:rgba(16,46,88,.25) transparent}
.acc{border-top:1px solid var(--hair)}
.acc:first-child{border-top:0}
.acc-head{display:flex;align-items:center;gap:var(--s1);width:100%;border:0;background:none;text-align:left;
  padding:calc(14 * var(--u)) 0;font-size:calc(18 * var(--ff));font-weight:600;color:#0b2545}
.acc-title{flex:1;min-width:0;line-height:1.3}
.chev{flex:none;width:calc(10 * var(--u));height:calc(10 * var(--u));border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-25%) rotate(45deg);transition:transform .28s ease;margin-right:calc(4 * var(--u))}
.acc[data-open=false] .chev{transform:rotate(-45deg)}
.acc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s cubic-bezier(.3,.7,.2,1)}
.acc[data-open=false] .acc-body{grid-template-rows:0fr}
.acc-inner{min-height:0;overflow:hidden;padding-bottom:var(--s2)}
.acc[data-open=false] .acc-inner{padding-bottom:0;visibility:hidden;transition:visibility 0s .32s}
.badge{flex:none;display:inline-grid;place-items:center;min-width:calc(30 * var(--u));height:calc(28 * var(--u));padding:0 var(--s1);border-radius:calc(9 * var(--u));
  background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff;font-size:var(--floor);font-weight:600}
.state{flex:none;font-size:var(--floor);font-weight:500;color:var(--ink2);background:rgba(10,60,120,.08);border-radius:999px;padding:calc(2 * var(--u)) calc(10 * var(--u))}
.state:empty{display:none}

.desc{margin:0;font-size:calc(17 * var(--ff));line-height:1.6;color:var(--ink2)}
.feedback{margin-top:var(--s2);padding:calc(12 * var(--u)) var(--s2);border-radius:calc(14 * var(--u));background:rgba(255,255,255,.55);border-left:calc(4 * var(--u)) solid #9ab3c9}
.feedback[data-state=ok]{border-left-color:#0a84ff}
.feedback[data-state=warn]{border-left-color:#f0a020;background:rgba(255,246,228,.7)}
.feedback[data-state=bad]{border-left-color:#e2453a;background:rgba(255,236,233,.8)}
.feedback>b{display:block;font-size:var(--floor);font-weight:600;color:#0b2545}
.feedback p{margin:calc(4 * var(--u)) 0 0;font-size:var(--floor);line-height:1.55;color:var(--ink2)}
.feedback #boom-reset{margin-top:var(--s1)}
b.bad{color:#d23a2a}b.ok{color:#0a6cff}

/* 调节：滑块 */
.controls{display:flex;flex-direction:column;gap:var(--s2)}
.control-head{display:flex;justify-content:space-between;align-items:baseline}
.control-head label{font-size:var(--floor);font-weight:600;color:#0b2545}
.control-head output{font-size:calc(20 * var(--ff));font-weight:600;font-variant-numeric:tabular-nums;color:#0a56c4}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:calc(6 * var(--u));border-radius:999px;margin:calc(10 * var(--u)) 0 calc(6 * var(--u));
  background:linear-gradient(90deg,#0a84ff var(--fill,50%),rgba(16,46,88,.16) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.08)}
input[type=range]::-moz-range-thumb{width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.scale{position:relative;display:flex;justify-content:space-between;font-size:var(--floor);color:var(--muted);height:calc(22 * var(--u));line-height:1}
.scale .band{position:absolute;left:var(--a);width:calc(var(--b) - var(--a));top:calc(-4 * var(--u));padding-top:calc(4 * var(--u));text-align:center;white-space:nowrap;
  color:#0a56c4;border-top:3px solid rgba(10,132,255,.45);font-size:var(--floor)}
.module-actions{display:flex;margin-top:var(--s2)}
.controls:empty+.module-actions,#m-controls[hidden]+.module-actions{margin-top:0}
.primary{border:0;background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff}
.module-actions button{flex:1;border:0;border-radius:999px;padding:calc(10 * var(--u)) var(--s2);font-size:calc(17 * var(--ff));font-weight:600;box-shadow:0 4px 14px rgba(10,99,216,.28)}
.progress{height:calc(4 * var(--u));border-radius:999px;background:rgba(16,46,88,.12);overflow:hidden;margin-top:var(--s2)}
.progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ac8fa,#0a84ff);transition:width .2s linear}

/* 方程式：长等号 / 可逆半箭头，条件写在上下 */
.eqs{display:flex;flex-direction:column;gap:var(--s1)}
.eq{font-size:calc(17 * var(--ff));font-weight:500;color:#0b2f5c;padding:calc(10 * var(--u)) var(--s2);border-radius:calc(12 * var(--u));background:rgba(255,255,255,.55)}
.rxn{display:flex;align-items:center;gap:calc(10 * var(--u));flex-wrap:nowrap;font-size:calc(19 * var(--ff))}
.rxn-side{white-space:nowrap;font-weight:600;color:#0b2f5c}
.rxn-arr{display:flex;flex-direction:column;align-items:center;flex:none;line-height:1}
.rxn-cond{display:block;min-height:1.15em;text-align:center;font-size:var(--floor);font-weight:500;color:#9a5a10;white-space:nowrap;line-height:1.15}
.rxn-equal{display:block;width:3em;height:calc(8 * var(--u));margin:calc(4 * var(--u)) 0;border-top:calc(1.5 * var(--u)) solid currentColor;border-bottom:calc(1.5 * var(--u)) solid currentColor;color:#0b2f5c}
.rxn-rev{display:flex;flex-direction:column;gap:calc(3 * var(--u));width:3em;margin:calc(3 * var(--u)) 0;color:#0b2f5c}
.rxn-arrow{display:flex;width:100%}
.rxn-arrow.up{align-items:flex-end}.rxn-arrow.down{align-items:flex-start}
.rxn-line{flex:1;height:0;border-top:calc(1.5 * var(--u)) solid currentColor}
.rxn-arrow.up .rxn-line{margin-bottom:0}
.rxn-head{flex:none;width:calc(12 * var(--u));height:calc(8 * var(--u));fill:currentColor;display:block}
.rxn-arrow.up .rxn-head{margin-left:calc(-2 * var(--u));margin-bottom:-1px}
.rxn-arrow.down .rxn-head{margin-right:calc(-2 * var(--u));margin-top:-1px}

/* 要点 */
.trap ul{margin:0;padding-left:1.2em}
.trap li{font-size:calc(17 * var(--ff));line-height:1.6;color:var(--ink2)}
.trap li::marker{color:#e08a1c}

/* 实时数据 */
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
.kpi span{display:flex;flex-direction:column;padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));background:rgba(255,255,255,.55)}
.kpi small{font-size:var(--floor);color:var(--muted)}
.kpi b{font-size:calc(22 * var(--ff));font-weight:600;line-height:1.25;color:#0b2f5c;font-variant-numeric:tabular-nums}
.kpi b small{font-size:var(--floor);margin-left:2px}
.kpi span.bad{background:rgba(255,236,224,.75)}.kpi span.bad b{color:#d9661f}
.chart{margin-top:var(--s1);padding:var(--s1);border-radius:calc(12 * var(--u));background:rgba(255,255,255,.55)}
#chart-cv{display:block;width:100%;height:calc(120 * var(--u))}

/* 气体图例 */
.hint{margin:0 0 var(--s1);font-size:var(--floor);color:var(--muted)}
#legend{display:flex;flex-wrap:wrap;gap:var(--s1)}
#legend button{display:flex;align-items:center;gap:calc(6 * var(--u));border:1px solid rgba(16,46,88,.12);background:rgba(255,255,255,.6);
  padding:calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));border-radius:999px;font-size:var(--floor);font-weight:500;color:#25496f}
#legend button .mol-ico{width:calc(34 * var(--u));height:calc(34 * var(--u));margin:calc(-6 * var(--u)) 0;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(6,32,74,.25))}
#legend button[aria-pressed=true] .mol-ico{filter:drop-shadow(0 0 2px rgba(255,255,255,.7))}
#legend button i{width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
#legend button[aria-pressed=true]{background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff;border-color:transparent}
.trace-btn{margin-top:var(--s2);border:0;background:rgba(10,60,120,.08);color:#1d5da6;padding:calc(6 * var(--u)) calc(14 * var(--u));border-radius:999px;font-weight:600;font-size:var(--floor)}
.trace-btn[aria-pressed=true]{background:linear-gradient(140deg,#f5b53a,#f08a24);color:#fff}

/* 显示选项：iOS 开关 */
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s2)}
.switch{display:flex;align-items:center;gap:calc(10 * var(--u));font-size:var(--floor);font-weight:500;color:#0b2545;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch span{flex:none;position:relative;width:calc(42 * var(--u));height:calc(26 * var(--u));border-radius:999px;background:rgba(16,46,88,.18);transition:background .2s}
.switch span::after{content:'';position:absolute;left:2px;top:2px;width:calc(26 * var(--u) - 4px);height:calc(26 * var(--u) - 4px);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked+span{background:#34c759}
.switch input:checked+span::after{transform:translateX(calc(16 * var(--u)))}
.switch input:focus-visible+span{outline:3px solid #0a84ff;outline-offset:2px}

/* 原理 */
.theory .kicker{margin:0 0 var(--s1);font-size:var(--floor);letter-spacing:.12em;color:var(--muted)}
.theory .cond{margin:0 0 var(--s1);font-size:var(--floor);line-height:1.6;color:var(--ink2)}
.theory h3{margin:var(--s2) 0 calc(4 * var(--u));font-size:var(--floor);font-weight:600;color:#0b2545}
.theory p{margin:0;font-size:var(--floor);line-height:1.65;color:var(--ink2)}
.model-note{margin-top:var(--s2);padding:calc(12 * var(--u)) var(--s2);border-radius:calc(12 * var(--u));background:rgba(255,255,255,.5)}
.model-note b{font-size:var(--floor);font-weight:600}

/* 面板底部：次要操作 */
.panel-foot{display:flex;gap:var(--s1);padding:calc(12 * var(--u)) var(--s3) var(--s2);border-top:1px solid var(--hair)}
.panel-foot button{flex:1;border:0;border-radius:999px;padding:calc(8 * var(--u)) var(--s1);background:rgba(255,255,255,.6);
  font-size:var(--floor);font-weight:500;color:#164a86;white-space:nowrap}
.panel-foot button:hover{background:rgba(255,255,255,.85)}
#mute-btn[aria-pressed=true]{opacity:.6}

/* 爆炸提示（保留结构，信息走面板里的现象卡） */
.boom-banner{position:absolute;left:var(--m);top:40%;z-index:6;padding:var(--s2) var(--s3);border-radius:calc(18 * var(--u));background:#7a1010ee;color:#fff;display:flex;flex-direction:column;gap:var(--s1);max-width:calc(360 * var(--u))}
.boom-banner b{font-size:calc(22 * var(--u))}.boom-banner span{font-size:var(--floor)}
.boom-banner button,#boom-reset{align-self:flex-start;padding:calc(8 * var(--u)) var(--s3);border-radius:999px;border:0;background:#fff;color:#7a1010;font-weight:700;font-size:var(--floor);pointer-events:auto}
.feedback #boom-reset{background:linear-gradient(140deg,#ff5a4f,#d42c22);color:#fff}

/* ---------- 3D 场景标注 ---------- */
.scene-label{position:absolute;left:0;top:0;white-space:nowrap;padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:calc(9 * var(--u));
  font-size:var(--floor);font-weight:600;color:#17324f;background:rgba(255,255,255,.9);border:1px solid #dbe7f2;box-shadow:0 4px 14px rgba(30,61,92,.12);transition:opacity .2s;will-change:transform}
.scene-label i{font-style:normal;color:#0a6cff;margin-left:4px}
.scene-label.unit{z-index:3;display:flex;flex-direction:column;align-items:center;font-size:calc(17 * var(--u));background:linear-gradient(110deg,rgba(28,58,80,.92),rgba(18,44,64,.9));color:#fff;border-color:rgba(160,192,205,.7)}
.scene-label.unit small{font-size:var(--floor);font-weight:500;opacity:.88;margin-top:1px}
.scene-label.unit.small{font-size:var(--floor)}
.labels.overview .scene-label small{display:none}
.labels.overview .scene-label.unit{font-size:var(--floor);padding:calc(3 * var(--u)) calc(9 * var(--u));background:rgba(16,32,51,.72)}
.scene-label.gas{z-index:2;font-size:var(--floor);padding:calc(3 * var(--u)) calc(9 * var(--u));background:rgba(20,48,74,.9);color:#fff;border-color:rgba(255,255,255,.25)}
.scene-label.gas.loop{background:linear-gradient(105deg,#b87408ee,#e09a1cee)}
.scene-label.trace{background:linear-gradient(105deg,#e8a21ef2,#d9801aee);border-color:#fff3;display:flex;flex-direction:column;align-items:center;font-size:var(--floor)}
.scene-label.trace small{font-size:var(--floor);font-weight:500}
.scene-label.micro{font-size:var(--floor)}
.scene-label.zone{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--floor);padding:calc(4 * var(--u)) calc(10 * var(--u));color:#fff;background:rgba(20,32,44,.8);border:1px solid rgba(255,255,255,.33);box-shadow:0 4px 14px #0006}
.scene-label.zone small{font-size:var(--floor);font-weight:500;opacity:.85;margin-top:1px}
.scene-label.reading{display:flex;gap:8px;padding:5px 8px;background:#0e161dee;border:2px solid #56626e;border-radius:7px;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:var(--floor);font-weight:700}
.scene-label.reading span{color:#ff4a55}.scene-label.reading span+span{color:#5fe3ff}
.scene-label.status{display:flex;align-items:center;gap:7px;font-size:var(--floor);background:#101a24dd;color:#fff}
.scene-label.stamp{font-size:calc(24 * var(--u));font-weight:800;color:#fff;background:linear-gradient(110deg,#0a7bfff2,#0b5fc8e8);border:2px solid #bfe3ff;padding:8px 18px}

/* ---------- 合成步骤 · 微观卡片：与右侧知识面板同一套玻璃、分区标题、箭头和折叠动画 ---------- */
.micro-card{position:absolute;z-index:4;left:0;top:0;width:calc(340 * var(--u));pointer-events:auto;
  --pf:1.5;--ff:calc(var(--u) * var(--pf));--floor:calc(16 * var(--ff));
  display:flex;flex-direction:column;border-radius:calc(24 * var(--u));overflow:hidden;padding:0 var(--s2)}
/* 折叠：沿用看板 .acc 的同一套规则 */
.micro-card[data-open=false] .chev{transform:rotate(-45deg)}
.micro-card[data-open=false] .acc-body{grid-template-rows:0fr}
.micro-card[data-open=false] .acc-inner{padding-bottom:0;visibility:hidden;transition:visibility 0s .32s}
@media (max-aspect-ratio:3/2){.micro-card{width:calc(290 * var(--u))}}
.micro-card .acc-body{min-height:0}
.micro-card .acc-head{padding:calc(12 * var(--u)) 0}
.micro-card .acc-title{white-space:normal}
/* 3D 视窗：面板里一块深色内嵌井 */
.mc-view{position:relative;aspect-ratio:2/1;flex:none;border-radius:calc(14 * var(--u));overflow:hidden;background:#0b2746;
  box-shadow:inset 0 0 0 1px rgba(16,46,88,.25),inset 0 2px 6px rgba(0,0,0,.35)}
.mc-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.mc-tag{position:absolute;left:0;top:0;white-space:nowrap;font-size:calc(16 * var(--u));font-weight:600;line-height:1.15;padding:1px calc(6 * var(--u));border-radius:calc(7 * var(--u));
  background:rgba(8,22,42,.78);border:1px solid rgba(255,255,255,.35);color:#fff;transition:opacity .25s;opacity:0;pointer-events:none}
.mc-tag.fe{color:#ffd9b8;border-color:rgba(255,190,140,.55);transform:translate(-50%,-100%)}
.mc-tag.n2{color:#a9c4ff}.mc-tag.nh3{color:#cdf5ff;border-color:rgba(160,230,255,.7)}
/* 五步芯片：与看板顶部状态格同一种白色磨砂小卡；当前步用看板的蓝色徽标 */
.mc-steps{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(6 * var(--u))}
.mc-steps li{position:relative;display:flex;flex-direction:column;align-items:center;padding:calc(4 * var(--u)) 0 calc(6 * var(--u));border-radius:calc(12 * var(--u));overflow:hidden;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);color:var(--muted);transition:background .3s,color .3s,border-color .3s}
.mc-steps i{font-style:normal;font-size:calc(16 * var(--u));font-weight:700;line-height:1.1}
.mc-steps span{font-size:var(--floor);font-weight:600;line-height:1.2;text-align:center;white-space:nowrap}
.mc-steps em{position:absolute;left:0;bottom:0;height:calc(3 * var(--u));width:0;background:currentColor;opacity:.85}
.mc-steps li.on em{width:var(--p,0%)}
.mc-steps li.done{color:#25507e}
.mc-steps li.on{background:linear-gradient(140deg,#2b8cff,#0a63d8);border-color:rgba(255,255,255,.6);color:#fff}
/* ③ 红＝断键吸热；④ 绿＝成键稳定（不在进行时也带浅色，便于对照） */
.mc-steps li.hot{background:rgba(255,236,233,.8);border-color:#f3b8ad;color:#d23a2a}
.mc-steps li.hot.on{background:linear-gradient(140deg,#ff6a55,#d42c22);border-color:rgba(255,255,255,.6);color:#fff}
.mc-steps li.cool{background:rgba(226,248,236,.85);border-color:#a8e2c2;color:#16884c}
.mc-steps li.cool.on{background:linear-gradient(140deg,#34c77b,#16884c);border-color:rgba(255,255,255,.6);color:#fff}
/* 一句话说明：同看板「现象」卡 */
.mc-cap{margin:var(--s1) 0 0;padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:calc(14 * var(--u));background:rgba(255,255,255,.55);border-left:calc(4 * var(--u)) solid #0a84ff;
  font-size:var(--floor);line-height:1.4;color:var(--ink2);min-height:calc(2.8em + 16 * var(--u))}
.mc-cap b{margin-right:calc(6 * var(--u));color:#0b2545;font-weight:700}
/* 钛白粉·PFS：条件 chips 允许两行；微观机理卡 */
.live-chips b{white-space:normal;font-size:calc(17 * var(--ff));line-height:1.3;overflow:visible;overflow-wrap:anywhere;max-width:100%}
.micro-cv{display:block;width:100%;height:calc(300 * var(--u));border-radius:calc(12 * var(--u));background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.85),rgba(214,226,238,.6))}
.micro-eq{margin:var(--s1) 0 0;font-size:calc(18 * var(--ff))}
.micro-cap{margin:calc(6 * var(--u)) 0 0}

/* 全局剖切开关 */
.panel-foot #cut-all{flex:1.35;font-weight:600}
.panel-foot #cut-all[aria-pressed=true]{background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff;box-shadow:0 2px 8px rgba(10,99,216,.3)}

/* R5 知识卡：pH 数轴 / 教材数据 / 推导 / 两种氧化方案对比 */
.kcard{display:flex;flex-direction:column;gap:var(--s2)}
.phline{padding:calc(12 * var(--u)) var(--s2) calc(10 * var(--u));border-radius:calc(14 * var(--u));background:rgba(255,255,255,.55)}
.ph-track{position:relative;height:calc(14 * var(--u));margin:calc(34 * var(--u)) calc(10 * var(--u)) 0;border-radius:999px;
  background:linear-gradient(90deg,#e2453a 0%,#f08a24 14%,#f3c33a 28%,#8fd27a 50%,#3fa7d6 72%,#3a5fd6 86%,#5a3fc0 100%);box-shadow:inset 0 0 0 1px rgba(16,46,88,.18)}
.ph-win{position:absolute;top:calc(-6 * var(--u));bottom:calc(-6 * var(--u));left:var(--a);width:calc(var(--b) - var(--a));border-radius:calc(6 * var(--u));
  border:calc(3 * var(--u)) solid #0a6cff;background:rgba(10,108,255,.14);box-shadow:0 0 0 calc(3 * var(--u)) rgba(255,255,255,.75)}
.ph-mark{position:absolute;left:var(--x);bottom:calc(100% + 8 * var(--u));display:flex;flex-direction:column;font-size:var(--floor);font-weight:600;line-height:1.2;color:#0b2f5c;white-space:nowrap}
.ph-mark em{font-style:normal;color:#0a56c4;font-weight:700}
.ph-mark.lo{transform:translateX(-50%);align-items:center}
.ph-mark.hi{transform:translateX(-8%);align-items:flex-start}
.ph-mark::after{content:'';position:absolute;top:100%;left:var(--tick,50%);height:calc(8 * var(--u));border-left:2px solid #0a6cff}
.ph-mark.hi::after{left:8%}
.ph-now{position:absolute;left:var(--x);top:calc(100% + 2 * var(--u));transform:translateX(-50%);width:0;height:0;
  border-left:calc(8 * var(--u)) solid transparent;border-right:calc(8 * var(--u)) solid transparent;border-bottom:calc(11 * var(--u)) solid #0b2545;transition:left .2s}
.ph-now.off{border-bottom-color:#e2453a}
.ph-ticks{position:relative;height:calc(22 * var(--u));margin:calc(14 * var(--u)) calc(6 * var(--u)) 0}
.ph-ticks span{position:absolute;left:var(--x);transform:translateX(-50%);font-size:var(--floor);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.ph-cap{margin:calc(8 * var(--u)) 0 0;font-size:var(--floor);line-height:1.5;color:var(--ink2)}
.ph-cap b{color:#0a56c4}
.kdata{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);margin:0}
.kdata div{padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(12 * var(--u));background:rgba(255,255,255,.55);min-width:0}
.kdata dt{font-size:var(--floor);color:var(--muted);white-space:nowrap}
.kdata dd{margin:calc(2 * var(--u)) 0 0;font-size:var(--floor);font-weight:600;color:#0b2f5c;overflow-wrap:anywhere}
.kcalc{margin:0;padding:calc(10 * var(--u)) var(--s2) calc(10 * var(--u)) calc(34 * var(--u));border-radius:calc(12 * var(--u));background:rgba(255,255,255,.55);
  font-size:var(--floor);line-height:1.55;color:var(--ink2)}
.kcalc li+li{margin-top:calc(4 * var(--u))}
.kcalc b{color:#0a56c4;white-space:nowrap}
.cmp{display:flex;flex-direction:column;border-radius:calc(14 * var(--u));overflow:hidden;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7)}
.cmp-row{display:grid;grid-template-columns:calc(92 * var(--ff) / 1.5) minmax(0,1fr) minmax(0,1.15fr)}
.cmp-row+.cmp-row{border-top:1px solid var(--hair)}
.cmp-row>span{padding:calc(8 * var(--u)) calc(10 * var(--u));font-size:var(--floor);line-height:1.45;color:var(--ink2);min-width:0}
.cmp-row>span+span{border-left:1px solid var(--hair)}
.cmp-row>span[role=rowheader]{font-weight:600;color:#0b2545}
.cmp-h>span{font-weight:700;color:#0b2545;background:rgba(10,60,120,.06)}
.cmp-h .win{background:linear-gradient(140deg,rgba(43,140,255,.18),rgba(10,99,216,.12));color:#0a56c4}
.cmp-h .win em{display:block;font-style:normal;font-weight:600;font-size:var(--floor);color:#0a6cff}
.cmp .good{color:#16784a;font-weight:600}
.cmp .bad{color:#b4462c}
.cmp .na{color:var(--muted)}
.cmp-eq{font-size:var(--floor)}
.cmp-eq .rxn-side{font-size:var(--floor)}

.ph-flag{position:absolute;left:var(--x);bottom:calc(100% + 8 * var(--u));transform:translateX(-50%);font-size:calc(18 * var(--ff));font-weight:700;color:#0a56c4;line-height:1}
.ph-ticks{margin-left:calc(10 * var(--u));margin-right:calc(10 * var(--u))}
.ph-legend{list-style:none;margin:calc(6 * var(--u)) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:calc(4 * var(--u)) var(--s2)}
.ph-legend li{font-size:var(--floor);color:var(--ink2);white-space:nowrap}
.ph-legend b{color:#0a56c4;margin-right:calc(6 * var(--u))}
.kdata{grid-template-columns:1fr;gap:0;border-radius:calc(12 * var(--u));overflow:hidden;background:rgba(255,255,255,.55)}
.kdata div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s1);border-radius:0;background:none;padding:calc(6 * var(--u)) calc(12 * var(--u))}
.kdata div+div{border-top:1px solid var(--hair)}
.kdata dt{white-space:normal}
.kdata dd{margin:0;white-space:nowrap}

/* R5b：化学式不在式内断行；4:3 时步骤栏用短标签，压到 2 行 */
.nw,.live-chips b .nw{white-space:nowrap}
@media (max-aspect-ratio:3/2){
  .views{gap:calc(2 * var(--u)) calc(4 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u))}
  .views button{padding:calc(4 * var(--u)) calc(5 * var(--u))}
  .views button[data-s] .lf{display:none}
  .views button[data-s]::after{content:attr(data-s)}
  .stage-group{padding-left:calc(5 * var(--u))}
}

/* R6：片头期间隐藏全部 UI，录屏画面干净 */
.stage.intro-on .scene-header,.stage.intro-on .stagebar,.stage.intro-on .labels,.stage.intro-on #labels{opacity:0!important;pointer-events:none!important;transition:none!important}

/* R7：步骤内事故演示按钮（③ / ⑫）+ 演示期间的字幕与「跳过」 */
.demo-box{margin:0 0 var(--s2);padding:calc(12 * var(--u)) var(--s2) calc(10 * var(--u));border-radius:calc(14 * var(--u));
  background:linear-gradient(140deg,rgba(255,236,230,.9),rgba(255,246,236,.85));border:1px solid rgba(214,52,36,.28);border-left:calc(4 * var(--u)) solid #d42c22}
.demo-btn{display:block;width:100%;border:0;border-radius:999px;padding:calc(8 * var(--ff)) var(--s2);cursor:pointer;
  background:linear-gradient(140deg,#ff5a4f,#c9271d);color:#fff;font-size:calc(17 * var(--ff));font-weight:700;letter-spacing:.04em;
  box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(201,39,29,.32);transition:filter .15s,transform .15s}
.demo-btn:hover{filter:brightness(1.07)}.demo-btn:active{transform:scale(.98)}
.demo-btn:disabled{opacity:.55;cursor:default;filter:grayscale(.3)}
.demo-cap{margin:calc(8 * var(--u)) 0 0;font-size:var(--floor);line-height:1.55;color:#6b1a12}
.demo-ui{position:absolute;inset:0;z-index:61;pointer-events:none}
.demo-ui[hidden]{display:none}
.demo-sub{position:absolute;left:50%;bottom:calc(40 * var(--u));transform:translateX(-50%);margin:0;max-width:min(calc(1240 * var(--u)), calc(100% - 4 * var(--m)));width:max-content;box-sizing:border-box;
  padding:calc(10 * var(--u)) calc(26 * var(--u));border-radius:calc(12 * var(--u));background:rgba(12,16,24,.72);color:#fff;
  font-size:calc(26 * var(--u));line-height:1.5;font-weight:600;text-align:center;box-shadow:0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.35)}
.demo-skip{position:absolute;right:calc(28 * var(--u));top:calc(26 * var(--u));pointer-events:auto;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:calc(8 * var(--u)) calc(24 * var(--u));background:rgba(12,16,24,.55);color:#fff;font-size:calc(20 * var(--u));font-weight:600;cursor:pointer}
.demo-skip:hover{background:rgba(12,16,24,.75)}

/* ---------- 分子式标签层（显示选项「分子式」，默认开；?formula=0 关闭）---------- */
.formula-layer{position:absolute;inset:0;pointer-events:none;z-index:2}
.formula{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity;
  padding:calc(2 * var(--u)) calc(9 * var(--u));border-radius:999px;font-size:calc(19 * var(--u));font-weight:700;letter-spacing:.01em;
  font-family:"Cambria Math","STIX Two Math","Times New Roman",var(--font);
  color:#fff;background:rgba(8,74,148,.86);border:1px solid rgba(160,214,255,.75);box-shadow:0 3px 10px rgba(6,30,60,.3)}
.formula-out{background:rgba(14,112,72,.88);border-color:rgba(170,240,200,.7)}
.formula-gas{background:rgba(80,92,108,.86);border-color:rgba(230,236,244,.7)}
.formula-solid{background:rgba(250,250,246,.94);color:#17324f;border-color:#c9d6e2}
.formula-ion{background:rgba(118,52,150,.86);border-color:rgba(222,190,255,.7)}
.formula-warn{background:rgba(196,40,28,.9);border-color:rgba(255,200,190,.8)}

/* ================= 本课件专用补充（沿用侯氏制碱法同引擎版式） ================= */
.scene-label.active{outline:calc(3 * var(--u)) solid #ffcf4a;box-shadow:0 0 18px #ffcf4acc;z-index:4}
.scene-label.unit.active{background:linear-gradient(110deg,#d97a12f2,#b85a0ae8);border-color:#ffe2a8}
.scene-label.stream{font-size:var(--floor);color:#1b66b0;background:rgba(230,242,255,.92)}
.scene-label.stream.green{color:#1d7a4e;background:rgba(233,249,240,.94);border-color:#bfe8d2}
.scene-label.note{font-size:var(--floor);color:#fff;background:rgba(20,32,44,.8);border:1px solid rgba(255,255,255,.33)}
.labels.overview .scene-label.unit.active{background:rgba(16,32,51,.72);outline:0;box-shadow:none}
.dbg-info{position:absolute;left:40px;bottom:120px;z-index:8;max-width:760px;max-height:300px;overflow:auto;margin:0;padding:10px 14px;font:16px/1.5 Menlo,Consolas,monospace;color:#ffe;background:#101820d8;border-radius:10px;white-space:pre-wrap}
.views .step-btn i{font-style:normal;margin-right:calc(3 * var(--u));opacity:.7}
.hstats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin-top:var(--s2)}
.hstats:empty{display:none}
.hstats>span{display:flex;flex-direction:column;padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));background:rgba(255,255,255,.55)}
.hstats small{font-size:var(--floor);color:var(--muted)}
.hstats b{font-size:calc(17 * var(--ff));font-weight:600;color:#0b2f5c}
.module-actions{gap:var(--s1)}
.module-actions #auto{flex:0 0 auto;background:rgba(255,255,255,.7);color:#164a86;box-shadow:none;border:1px solid rgba(16,46,88,.14)}
.module-actions #auto[aria-pressed=true]{background:linear-gradient(140deg,#2b8cff,#0a63d8);color:#fff}
.rxn-note{display:block;margin-top:calc(4 * var(--u));font-size:var(--floor);color:var(--muted);font-weight:500}
.eq-wrap{display:flex;flex-direction:column}
.trap .desc b,.desc b{color:#0b2f5c}
.theory h2{margin:0 0 var(--s1);font-size:calc(20 * var(--u));color:#0b2545}
.theory .equation-bar{display:flex;align-items:center;gap:calc(10 * var(--u));margin:calc(6 * var(--u)) 0;font-size:calc(18 * var(--ff));font-weight:600;color:#0b2f5c;white-space:nowrap}
.theory .equation-bar .cond{display:inline-flex;flex-direction:column;align-items:center;font-style:normal;color:#9a5a10;min-width:3em;line-height:1.1}
.theory .equation-bar .cond small{font-size:var(--floor);min-height:1.1em}
.theory .equation-bar .cond u{display:block;width:3em;height:calc(8 * var(--u));border-top:calc(1.5 * var(--u)) solid #0b2f5c;border-bottom:calc(1.5 * var(--u)) solid #0b2f5c;margin:calc(3 * var(--u)) 0 calc(1.1em + 3 * var(--u))}
.theory .equation-bar .cond small:empty+u{margin-top:calc(1.1em + 3 * var(--u))}
.theory b{color:#0b2545}
.eq-wrap .rxn{flex-wrap:wrap;row-gap:calc(4 * var(--u));font-size:calc(18 * var(--ff))}
.eq-wrap .rxn-side{white-space:normal}
/* 顶部三格 chips：窄格（4:3）里单个化学式也放得下；屏幕字号仍 ≥ 16px（14 × 1.5 = 21 屏幕 px） */
.live-chips b{font-size:calc(14 * var(--ff))}
.live-chips b .dot{white-space:nowrap}

/* 行内方程式（字幕 / 徽标 / 演示说明）：长等号，条件写在等号上方——⟦左|条件|右⟧ */
.eqi{white-space:normal}
.eqi-s{white-space:nowrap}
.eqi-arr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .28em;line-height:1}
.eqi-arr small{display:block;font-size:.64em;line-height:1.05;min-height:1.05em;font-weight:600;color:inherit;opacity:.92;white-space:nowrap}
.eqi-arr i{display:block;width:2.6em;height:.32em;border-top:.09em solid currentColor;border-bottom:.09em solid currentColor}

/* 4:3 等窄屏：底部步骤条保持一行——未选中的工序只显示序号（悬停提示全名），当前工序显示全名 */
@media (max-aspect-ratio:3/2){
  .views{flex-wrap:nowrap}
  .views button:not([aria-pressed=true]) .nm{display:none}
  .views .step-btn:not([aria-pressed=true]) i{margin-right:0;opacity:1}
}

/* 面板滚动：底部留白 + 未到底时渐隐提示（最后一条方程式不会被硬切） */
.panel-body{padding-bottom:var(--s3)}
.panel-body.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}

/* 物理变化 / 流程步骤：箭头代替等号（eqs 第 5 项为 '→'） */
.rxn-to{position:relative;display:block;width:3.2em;height:calc(1.5 * var(--u));margin:calc(7 * var(--u)) 0;background:#0b2f5c}
.rxn-to::after{content:"";position:absolute;right:calc(-2 * var(--u));top:50%;transform:translateY(-50%);border-left:calc(10 * var(--u)) solid #0b2f5c;border-top:calc(5 * var(--u)) solid transparent;border-bottom:calc(5 * var(--u)) solid transparent}

/* ===== 接触法制硫酸：分组内按钮名不被 .stage-group span 改成 flex；理论区可逆号 ===== */
.stage-group .nm{display:inline}
.theory .equation-bar .cond b.rv{display:block;font-size:1.5em;line-height:1;font-weight:500;color:#0b2f5c;margin:calc(1 * var(--u)) 0}

/* R8：⑦ 接触室「催化床入口温度」滑块（对标合成氨压强滑块：调过头 → 飞温爆裂） */
.sim-box{margin:0 0 var(--s2);padding:calc(12 * var(--u)) var(--s2) calc(12 * var(--u));border-radius:calc(14 * var(--u));background:rgba(255,255,255,.5);border:1px solid rgba(16,46,88,.1)}
.sim-box[hidden]{display:none}
.control-head{display:flex;justify-content:space-between;align-items:baseline}
.control-head label{font-size:var(--floor);font-weight:600;color:#0b2545}
.control-head output{font-size:calc(22 * var(--ff));font-weight:700;font-variant-numeric:tabular-nums;color:#0a56c4}
.sim-box[data-state=warn] .control-head output{color:#c47500}.sim-box[data-state=bad] .control-head output,.sim-box[data-state=hot] .control-head output{color:#d23a2a}
#sl-T{-webkit-appearance:none;appearance:none;width:100%;height:calc(6 * var(--u));border-radius:999px;margin:calc(12 * var(--u)) 0 calc(8 * var(--u));
  background:linear-gradient(90deg,#0a84ff var(--fill,28%),rgba(16,46,88,.16) var(--fill,28%))}
.sim-box[data-state=hot] #sl-T,.sim-box[data-state=bad] #sl-T{background:linear-gradient(90deg,#0a84ff 0,#f0a020 57%,#e2453a var(--fill,28%),rgba(16,46,88,.16) var(--fill,28%))}
#sl-T::-webkit-slider-thumb{-webkit-appearance:none;width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.08)}
#sl-T::-moz-range-thumb{width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.sim-box .scale{position:relative;display:flex;justify-content:space-between;font-size:calc(14 * var(--ff));color:var(--muted);height:calc(24 * var(--u));line-height:1;margin-top:calc(6 * var(--u))}
.sim-box .scale .band{position:absolute;left:var(--a);width:calc(var(--b) - var(--a));top:calc(-6 * var(--u));padding-top:calc(5 * var(--u));text-align:center;white-space:nowrap;
  color:#0a56c4;border-top:3px solid rgba(10,132,255,.5);font-size:calc(14 * var(--ff))}
.sim-box .scale .band.hot{color:#b86a00;border-top-color:rgba(240,160,32,.7)}
.sim-box .scale .band.boom{color:#c42a20;border-top-color:rgba(226,69,58,.8)}
.sim-box .scale>span:not(.band){position:relative;top:calc(14 * var(--u))}
.sim-box .scale{height:calc(36 * var(--u))}
.sim-read{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin-top:calc(4 * var(--u))}
.sim-read span{display:flex;flex-direction:column;padding:calc(6 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u));background:rgba(255,255,255,.6)}
.sim-read small{font-size:calc(14 * var(--ff));color:var(--muted)}
.sim-read b{font-size:calc(20 * var(--ff));font-weight:700;color:#0a56c4;font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-read b.warn{color:#c47500}.sim-read b.bad{color:#d23a2a}
.conv-bar{height:calc(6 * var(--u));border-radius:999px;background:rgba(16,46,88,.12);overflow:hidden;margin-top:calc(8 * var(--u))}
.conv-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ac8fa,#0a84ff);transition:width .25s}
.conv-bar b.warn{background:linear-gradient(90deg,#ffd27a,#f0a020)}.conv-bar b.bad{background:linear-gradient(90deg,#ff8a7a,#e2453a)}
.sim-box .feedback{margin-top:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));background:rgba(255,255,255,.6);border-left:calc(4 * var(--u)) solid #9ab3c9}
.sim-box .feedback[data-state=ok]{border-left-color:#0a84ff}
.sim-box .feedback[data-state=warn]{border-left-color:#f0a020;background:rgba(255,246,228,.85)}
.sim-box .feedback[data-state=bad]{border-left-color:#e2453a;background:rgba(255,236,233,.92)}
.sim-box .feedback>b{display:block;font-size:var(--floor);font-weight:700;color:#0b2545}
.sim-box .feedback[data-state=bad]>b{color:#b0201a}
.sim-box .feedback p{margin:calc(4 * var(--u)) 0 0;font-size:var(--floor);line-height:1.55;color:var(--ink2)}
#boom-reset{margin-top:calc(10 * var(--u));padding:calc(8 * var(--u)) calc(20 * var(--u));border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:var(--floor);
  background:linear-gradient(140deg,#ff5a4f,#d42c22);color:#fff;box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(201,39,29,.3)}
#boom-reset[hidden]{display:none}
#mute-btn[aria-pressed=true]{opacity:.6}
.boom-flash{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at var(--fx,40%) var(--fy,45%),rgba(255,236,190,.95),rgba(255,140,40,.55) 30%,rgba(120,20,0,0) 70%);opacity:0}
.boom-flash.go{animation:boomFlash .6s ease-out}
@keyframes boomFlash{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}
.panel-foot{gap:calc(6 * var(--u));padding-left:var(--s2);padding-right:var(--s2)}
.panel-foot button{min-width:0;white-space:nowrap;padding-left:calc(4 * var(--u));padding-right:calc(4 * var(--u))}
.panel-foot #cut-all{flex:1.5}


/* R2: 小屏常压塔标签少挤 */
@media (max-aspect-ratio: 5/4) {
  .scene-label.note.small { display: none !important; }
  .scene-label.unit.small small { display: none !important; }
}

/* ---------- 运行大按钮（工厂课件统一）：固定在面板底排上方，不随面板滚动 / 区块折叠消失 ---------- */
.run-dock{flex:none;display:flex;align-items:stretch;gap:var(--s1);padding:calc(12 * var(--u)) var(--s2) 0;border-top:1px solid var(--hair)}
.run-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));border:0;border-radius:999px;
  min-height:calc(60 * var(--u));padding:0 var(--s2);font-size:calc(19 * var(--ff));font-weight:800;letter-spacing:.06em;color:#fff;white-space:nowrap;
  background:linear-gradient(140deg,#2f93ff,#0a5fd6);box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(10,99,216,.38),inset 0 1px 0 rgba(255,255,255,.35);
  transition:background .25s,box-shadow .25s,transform .12s}
.run-btn:active{transform:scale(.98)}
.run-btn[data-state=idle]{animation:runBreath 2.6s ease-in-out infinite}
@keyframes runBreath{0%,100%{box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(10,99,216,.34),0 0 0 0 rgba(47,147,255,.0)}
  50%{box-shadow:0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(10,99,216,.5),0 0 0 calc(6 * var(--u)) rgba(47,147,255,.22)}}
.run-btn[data-state=run]{background:linear-gradient(140deg,#ff5a4f,#d42c22);box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(201,39,29,.36),inset 0 1px 0 rgba(255,255,255,.3)}
.run-btn[data-state=lock]{background:linear-gradient(140deg,#aab6c4,#8794a4);box-shadow:none;cursor:not-allowed;animation:none;font-size:calc(17 * var(--ff))}
.run-dot{display:none;flex:none;width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%;background:#fff;box-shadow:0 0 calc(8 * var(--u)) #fff}
.run-btn[data-state=run] .run-dot{display:block;animation:runBlink 1s steps(1) infinite}
@keyframes runBlink{50%{opacity:.15}}
.run-time{font-size:calc(15 * var(--ff));font-weight:600;letter-spacing:.02em;opacity:.92;font-variant-numeric:tabular-nums;padding-left:calc(10 * var(--u));border-left:1px solid rgba(255,255,255,.45)}
.auto-mini{flex:none;align-self:center;border:1px solid rgba(16,46,88,.16);border-radius:999px;padding:calc(7 * var(--u)) calc(12 * var(--u));
  background:rgba(255,255,255,.62);color:#164a86;font-size:calc(14 * var(--ff));font-weight:600;white-space:nowrap}
.auto-mini[aria-pressed=true]{background:#dcebff;border-color:#2b8cff;color:#0a5fd6}
/* 底排工具按钮：样式保留，更淡 */
.panel-foot.transport{border-top:0;padding-top:calc(10 * var(--u))}
.panel-foot.transport button{background:rgba(255,255,255,.34);color:#4a6889;font-weight:500;box-shadow:none}
.panel-foot.transport button:hover{background:rgba(255,255,255,.7);color:#164a86}
.panel-foot #cut-all[aria-pressed=true]{background:rgba(43,140,255,.16);color:#1a5fae;box-shadow:none;font-weight:600}
/* 面板收起：右下角悬浮圆钮 */
.run-fab{display:none;position:absolute;z-index:8;right:var(--m);bottom:var(--m);width:calc(84 * var(--u));height:calc(84 * var(--u));border-radius:50%;border:2px solid rgba(255,255,255,.75);
  flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--u));color:#fff;padding:0;
  background:linear-gradient(140deg,#2f93ff,#0a5fd6);box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(10,99,216,.42)}
.stage.panel-collapsed .run-fab{display:flex}
.stage.panel-collapsed .stagebar{right:calc(84 * var(--u) + 3 * var(--m))}
.run-fab .fab-ic{font-size:calc(30 * var(--u));line-height:1}
.run-fab .fab-t{font-size:calc(14 * var(--u));font-weight:700;font-variant-numeric:tabular-nums}
.run-fab[data-state=idle]{animation:runBreath 2.6s ease-in-out infinite}
.run-fab[data-state=run]{background:linear-gradient(140deg,#ff5a4f,#d42c22);box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(201,39,29,.42)}
.run-fab[data-state=lock]{background:linear-gradient(140deg,#aab6c4,#8794a4);cursor:not-allowed}
.run-btn{min-height:calc(64 * var(--u));overflow:hidden;line-height:1.15}
.run-btn[data-state=run]{flex-direction:column;gap:calc(3 * var(--u))}
.run-time{display:flex;align-items:center;gap:calc(7 * var(--u));border-left:0;padding-left:0;font-size:calc(13 * var(--ff))}
.run-dot{display:block;width:calc(10 * var(--u));height:calc(10 * var(--u));background:#fff;animation:runBlink 1s steps(1) infinite}
.stage.boomed #labels{opacity:.18;transition:opacity .6s}



/* ===== 1030：底栏密集化（全名始终可见，不隐藏 .nm） =====
   面板展开可用宽变窄：收紧字号/padding/间距，尽量单行全名；
   玻璃条贴合内容（不拉满留空）；折行时左对齐，避免第二行大留白。 */
.stage:not(.panel-collapsed) .views{
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-end;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  column-gap:calc(4 * var(--u));
  row-gap:calc(2 * var(--u));
  padding:calc(3 * var(--u)) calc(8 * var(--u));
}
.stage:not(.panel-collapsed) .views button{
  padding:calc(2 * var(--u)) calc(3 * var(--u));
  font-size:calc(16 * var(--u)); /* 1030d：步骤名屏上 ≥16px */
  line-height:1.1;
  border-radius:calc(9 * var(--u));
}
.stage:not(.panel-collapsed) .views .step-btn i{
  margin-right:calc(2 * var(--u));
}
.stage:not(.panel-collapsed) .stage-group{
  padding-left:calc(4 * var(--u));
  gap:0;
}
.stage:not(.panel-collapsed) .stage-group b{
  font-size:calc(14 * var(--u)); /* 1030d：分组名屏上 ≥14px */
  padding-left:calc(3 * var(--u));
  line-height:1.05;
  letter-spacing:0;
}
.stage:not(.panel-collapsed) .stage-group span{gap:1px}
/* 1030d：字号放大后 1280×720 面板展开仍需单行——序号圈缩小、间距再收紧（步骤名本身保持 16px） */
.stage:not(.panel-collapsed) .views{column-gap:calc(2 * var(--u));padding:calc(3 * var(--u)) calc(6 * var(--u))}
.stage:not(.panel-collapsed) .views button{padding:calc(2 * var(--u)) calc(2 * var(--u))}
.stage:not(.panel-collapsed) .views .step-btn i{font-size:calc(12 * var(--u));margin-right:calc(1 * var(--u))}
.stage:not(.panel-collapsed) .stage-group{padding-left:calc(3 * var(--u))}
.stage:not(.panel-collapsed) .stage-group b{padding-left:calc(2 * var(--u))}

.stage.panel-collapsed .views{
  justify-content:center;
  column-gap:calc(8 * var(--u));
  row-gap:calc(3 * var(--u));
  padding:calc(4 * var(--u)) calc(10 * var(--u));
}
.stage.panel-collapsed .views button{
  padding:calc(4 * var(--u)) calc(6 * var(--u));
}
.stage.panel-collapsed .stage-group{padding-left:calc(8 * var(--u));gap:1px}
.stage.panel-collapsed .stage-group b{font-size:calc(14 * var(--u));line-height:1.05;padding-left:calc(4 * var(--u))} /* 1030d */
.stage.panel-collapsed .stage-group span{gap:2px}

/* ===== 1029 对齐线上「石油炼制」标题层级（移植自 luna 适配层 styles.css） ===== */
/* Approved cover hierarchy: compact, left-aligned text over a soft fade. */
.scene-header .course-title-card {
  width:max-content; max-width:100%; padding:calc(4 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u));
  border:0; border-left:calc(3 * var(--u)) solid #29aff3; border-radius:0;
  background:transparent; box-shadow:none; text-align:left;
}
.scene-header .course-title-card::before {
  content:""; position:absolute; inset:calc(-12 * var(--u)) calc(-40 * var(--u)) calc(-12 * var(--u)) calc(-10 * var(--u));
  z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,rgba(245,250,255,.94),rgba(245,250,255,.74) 60%,rgba(245,250,255,0));
  filter:blur(calc(10 * var(--u)));
}
.scene-header .header-meta { justify-content:flex-start; font-size:calc(20 * var(--u)); gap:calc(12 * var(--u)); letter-spacing:0; }
.scene-header .subject-badge { font-size:calc(22 * var(--u)); padding:.24em .65em; }
.scene-header h1 { font-size:calc(56 * var(--u)); line-height:1.15; margin:calc(9 * var(--u)) 0; letter-spacing:0; }
.scene-header h1::after { content:""; display:block; width:calc(42 * var(--u)); height:calc(3 * var(--u)); margin-top:calc(6 * var(--u)); border-radius:99px; background:linear-gradient(90deg,#146cf2,#1ebdef); }
.scene-header .subtitle { font-size:calc(24 * var(--u)); line-height:1.3; letter-spacing:0; }
.scene-header .subtitle-lead { display:block; font-weight:700; margin-bottom:calc(7 * var(--u)); }
.scene-header .subtitle-detail { display:block; font-size:calc(17 * var(--u)); line-height:1.45; font-weight:600; color:#486c91; }

/* Keep the pointer independent of WebGL/main-thread rendering. Override the
   shell's image cursors in normal and fullscreen modes, including child spans. */
html:root, html:root * { cursor: auto !important; }
html:root :is(button, a[href], label, summary, input, [role="button"]),
html:root :is(button, a[href], label, summary, [role="button"]) * { cursor: pointer !important; }
html:root #apparatus { cursor: grab !important; }
html:root #apparatus:active { cursor: grabbing !important; }
html:root button:disabled, html:root button:disabled * { cursor: default !important; }
html:root button[data-state="lock"], html:root button[data-state="lock"] * { cursor: not-allowed !important; }

/* ===== 1030 右侧知识面板：层级 / 间距 / 关键事实 chips ===== */
/* 1030b：正文字号下调（body ~13.5ff / label ~12ff / title 略强）；全景加流程+切割图 */
.panel{
  /* 面板内可读下限仍走 --floor；正文改用更小阶 */
}
.live-chips{margin:0 var(--s2) calc(6 * var(--u)); padding:calc(6 * var(--u)) var(--s1)}
.live-chips small{font-size:calc(12 * var(--ff)); color:var(--muted)}
.live-chips b{font-size:calc(13 * var(--ff)); font-weight:600; line-height:1.25; white-space:normal}

/* stats chips first; compact key facts */
.hstats{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(6 * var(--u));
  margin:0 0 var(--s2);
}
.hstats>span{
  padding:calc(6 * var(--u)) calc(9 * var(--u));
  border-radius:calc(11 * var(--u));
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16,46,88,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.hstats small{font-size:calc(12 * var(--ff)); color:var(--muted); letter-spacing:.02em}
.hstats b{font-size:calc(14 * var(--ff)); font-weight:700; color:#0b2f5c; line-height:1.2}

/* body */
.acc-body .desc{
  margin:0 0 var(--s2);
  font-size:calc(13.5 * var(--ff));
  line-height:1.42;
  color:var(--ink2);
}
.trap .desc b, .desc b{color:#0b2f5c}

/* section titles stay stronger than body */
.acc{border-top:1px solid var(--hair); margin-top:calc(2 * var(--u))}
.acc:first-child{border-top:0; margin-top:0}
.acc-head{
  padding:calc(12 * var(--u)) 0 calc(8 * var(--u));
  font-size:calc(16 * var(--ff));
  font-weight:700;
  color:#0b2545;
}
.acc-title{flex:1; min-width:0; line-height:1.25; letter-spacing:.01em}
.acc-body .acc-inner{padding-bottom:calc(10 * var(--u))}
.badge{font-size:calc(12 * var(--ff)); min-width:calc(28 * var(--u)); height:calc(24 * var(--u))}

/* tip denser */
.feedback{
  margin-top:var(--s1);
  padding:calc(8 * var(--u)) calc(10 * var(--u));
  border-radius:calc(11 * var(--u));
  font-size:calc(13 * var(--ff));
  line-height:1.4;
}
.eq-wrap{margin-top:var(--s1); gap:calc(6 * var(--u))}
.rxn{font-size:calc(14.5 * var(--ff))}

.panel-body{padding:calc(2 * var(--u)) var(--s3) var(--s2)}

/* ---- overview visuals (compact: fit first screen) ---- */
.mod-viz{display:flex; flex-direction:column; gap:calc(4 * var(--u)); margin:0 0 calc(4 * var(--u))}
.mod-viz[hidden]{display:none !important}
.viz-block{
  padding:calc(5 * var(--u)) calc(7 * var(--u));
  border-radius:calc(9 * var(--u));
  background:rgba(255,255,255,.55);
  border:1px solid rgba(16,46,88,.10);
}
.viz-cap{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:calc(2 * var(--u)) calc(6 * var(--u));
  font-size:calc(11 * var(--ff));
  font-weight:600;
  color:var(--muted);
  margin:0 0 calc(3 * var(--u));
  letter-spacing:.02em;
}
.viz-cap span{font-weight:500; opacity:.9}
.viz-cap-end{margin-left:auto; color:var(--ink2)}
.viz-cap-end b{color:#8a3a08; font-weight:700}

.viz-flow{
  display:flex; align-items:stretch; justify-content:space-between; gap:calc(2 * var(--u));
}
.vf-node{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(3 * var(--u)) calc(2 * var(--u));
  border-radius:calc(7 * var(--u));
  background:rgba(10,108,255,.06);
  border:1px solid rgba(10,108,255,.14);
}
.vf-node b{font-size:calc(11.5 * var(--ff)); font-weight:700; color:#0b2f5c; line-height:1.1}
.vf-node small{font-size:calc(10 * var(--ff)); color:var(--muted); margin-top:0; line-height:1.1}
.vf-phys{background:rgba(14,140,90,.07); border-color:rgba(14,140,90,.2)}
.vf-phys b{color:#0b5c3a}
.vf-chem{background:rgba(200,90,20,.08); border-color:rgba(200,90,20,.22)}
.vf-chem b{color:#8a3a08}
.vf-arr{
  flex:none; align-self:center;
  width:calc(7 * var(--u)); height:calc(7 * var(--u));
  border-right:2px solid rgba(16,46,88,.35);
  border-bottom:2px solid rgba(16,46,88,.35);
  transform:rotate(-45deg);
  margin:0;
}

.viz-cap-bars{margin-top:calc(4 * var(--u))}
.viz-bars{display:flex; flex-direction:column; gap:calc(3 * var(--u))}
.vb-row{
  display:grid;
  grid-template-columns:5.2em minmax(0,1fr) 4.8em;
  align-items:center; gap:calc(5 * var(--u));
}
.vb-lab{
  font-size:calc(11 * var(--ff)); font-weight:700; color:#0b2545;
  line-height:1.15; white-space:nowrap;
}
.vb-track{
  position:relative; height:calc(11 * var(--u));
  border-radius:calc(6 * var(--u));
  background:rgba(16,46,88,.07);
  border:1px solid rgba(16,46,88,.08);
  overflow:hidden;
}
.vb-fill{display:block; height:100%; border-radius:inherit; min-width:2px}
.vb-dist{background:linear-gradient(90deg,#7eb6ef,#3a7fd4)}
.vb-fcc{background:linear-gradient(90deg,#f0a050,#d46818)}
.vb-val{
  font-size:calc(11 * var(--ff)); font-weight:700;
  color:#0b2f5c; white-space:nowrap; text-align:right;
}
.vb-axis{
  display:flex; justify-content:space-between;
  margin:0 4.8em 0 calc(5.2em + 5 * var(--u));
  font-size:calc(9 * var(--ff)); color:var(--muted);
}

/* ===== 1030e：字号整体上调一档（用户反馈字小；默认按 3:2 查看）=====
   3D 标注：主名 17→19、副行/小标注 16→17、分子式 19→20；底栏步骤名 16→18、分组名 14→15；
   看板正文 24→25（适度，仅 +1px）；场景提示 16→17。
   另：≤3:2 媒体查询里会隐藏未选中步骤的 .nm——底栏要求始终全名，这里强制显示。 */
.labels{--floor:calc(17 * var(--u))}
.scene-label.unit{font-size:calc(19 * var(--u))}
.labels.overview .scene-label.unit{font-size:calc(17 * var(--u))}
.formula{font-size:calc(20 * var(--u))}
.scene-hint{font-size:calc(17 * var(--u))}
.panel{--pf:1.5625}
.stage .views button .nm{display:inline}
.stage .views .step-btn:not([aria-pressed=true]) i{margin-right:calc(1 * var(--u));opacity:.7}
.stage:not(.panel-collapsed) .views button,.stage.panel-collapsed .views button{font-size:calc(18 * var(--u))}
.stage:not(.panel-collapsed) .stage-group b,.stage.panel-collapsed .stage-group b{font-size:calc(15 * var(--u))}
.stage .views .step-btn i{font-size:calc(13 * var(--u))}
/* 1030e：看板字号 +1px 后「≈45–50%」在 3:2 被右缘裁掉——数值列改按 --u 定宽（原 4.8em 跟随固定 16px 父字号、不随舞台缩放），刻度右边距同步 */
.vb-row{grid-template-columns:5.2em minmax(0,1fr) calc(90 * var(--u))}
.vb-axis{margin-right:calc(90 * var(--u))}
/* 1030e：「原油→各种馏分→更多汽油」流程式横排超出看板右缘（改前就超 ~30–70px），允许折行 */
.theory .equation-bar.phys{flex-wrap:wrap;row-gap:calc(4 * var(--u))}
/* ===== 1030f：底部工序条字号 ×1.5（用户：「下方的这个」再大一点）：步骤名 18→27，分组名 15→22.5，序号圈 13→19.5 ===== */
.stage:not(.panel-collapsed) .views button,.stage.panel-collapsed .views button{font-size:calc(27 * var(--u))}
.stage:not(.panel-collapsed) .stage-group b,.stage.panel-collapsed .stage-group b{font-size:calc(22.5 * var(--u))}
.stage:not(.panel-collapsed) .views .step-btn i,.stage.panel-collapsed .views .step-btn i{font-size:calc(19.5 * var(--u))} /* 压过 1030d 面板展开时的 12u */
/* ===== 1030h：底部工序条留白（用户：更均衡、不局促；字号 27/22.5 不变，全名不裁）=====
   离屏幕底 16→24；收起面板时 4:3 单行（余量约 110px 内加宽留白）；展开面板时 4:3 单行放不下（需 944px，可用 858px）→ 两行，行居中、行距加大。 */
.stagebar{bottom:calc(24 * var(--u))}
.stage.panel-collapsed .views{padding:calc(9 * var(--u)) calc(18 * var(--u));column-gap:calc(10 * var(--u));border-radius:calc(22 * var(--u))}
.stage.panel-collapsed .views button{padding:calc(5 * var(--u)) calc(9 * var(--u))}
.stage.panel-collapsed .stage-group{padding-left:calc(10 * var(--u));gap:calc(3 * var(--u))}
.stage.panel-collapsed .stage-group b{padding-left:calc(9 * var(--u))}
.stage:not(.panel-collapsed) .views{justify-content:center;padding:calc(9 * var(--u)) calc(16 * var(--u));column-gap:calc(8 * var(--u));row-gap:calc(8 * var(--u));border-radius:calc(22 * var(--u))}
.stage:not(.panel-collapsed) .views button{padding:calc(5 * var(--u)) calc(7 * var(--u))}
.stage:not(.panel-collapsed) .stage-group{padding-left:calc(8 * var(--u));gap:calc(3 * var(--u))}
.stage:not(.panel-collapsed) .stage-group b{padding-left:calc(7 * var(--u))}
.stage .stage-group span{gap:calc(2 * var(--u))}
/* ===== 1030i：底栏贴左（用户：居中不好看，贴左侧）——整组从标题卡同一左边距（--m）起排，两行时都从左起 ===== */
.stagebar{justify-content:flex-start}
.stage:not(.panel-collapsed) .views,.stage.panel-collapsed .views{justify-content:flex-start}
/* 1030i：面板展开两行时玻璃条收窄贴合内容（flex 折行会撑满可用宽、右侧大块留白）——改两行网格：全景跨两行居左，两行分组都从同一左线起 */
.stage:not(.panel-collapsed) .views{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;width:max-content;max-width:100%;justify-content:start;align-items:end;justify-items:start}
.stage:not(.panel-collapsed) .views>button:first-child{grid-column:1;grid-row:1 / 3;align-self:center}
.stage:not(.panel-collapsed) .views>.stage-group:nth-child(2){grid-column:2 / 4;grid-row:1}
.stage:not(.panel-collapsed) .views>.stage-group:nth-child(3){grid-column:2;grid-row:2}
.stage:not(.panel-collapsed) .views>.stage-group:nth-child(4){grid-column:3;grid-row:2}
/* TiCl4 first-section adaptations; preserve refinery 1030f/h/i visual scale. */
.scene-header h1{font-size:2.25em}
.stage:not(.panel-collapsed) .views{display:flex;align-items:stretch;max-width:100%;min-width:0}
.stage:not(.panel-collapsed) .views>button:first-child{align-self:center;flex:none}
.stage:not(.panel-collapsed) .views>.stage-group{min-width:0;grid-column:auto;grid-row:auto}
.stage:not(.panel-collapsed) .stage-group>span{display:grid;grid-template-columns:repeat(4,max-content);gap:calc(8 * var(--u)) calc(5 * var(--u))}
.stage:not(.panel-collapsed) .stage-group b{padding-bottom:calc(2 * var(--u))}
.stage.panel-collapsed .views{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:thin;align-items:center}
.stage.panel-collapsed .stage-group>span{display:flex;flex-wrap:nowrap}
.stage.panel-collapsed .stage-group{flex-shrink:0}
.stage .views .step-btn{white-space:nowrap}
.stage .views .step-btn i{font-style:normal;margin-right:calc(2 * var(--u))}
.stage .views button{flex-shrink:0}
.stagebar{gap:calc(7 * var(--u))}
.live-chips b{white-space:normal;font-size:calc(17 * var(--ff));line-height:1.3}
.live-chips small{font-size:calc(16 * var(--u))}
.panel-title{font-size:calc(21 * var(--ff))}
.panel-step{font-size:calc(16 * var(--u))}
.hstats b{font-size:calc(22 * var(--u))}
#chip-b{font-size:calc(19 * var(--u))}
#chip-a{font-size:calc(21 * var(--u))}
#chip-c{font-size:calc(21 * var(--u))}
.eq{display:flex;justify-content:center;align-items:center;gap:calc(18 * var(--u))}
.phase-arrow{display:flex;flex-direction:column;align-items:center;font-size:calc(32 * var(--u));line-height:1.1}
.phase-arrow small{font-size:calc(18 * var(--u));color:#ad6b24}
.phase-note{display:block;text-align:center;color:#59758c;font-size:calc(17 * var(--u));margin-top:calc(8 * var(--u))}
.thermal-row{display:grid;grid-template-columns:5.4em 1fr 5em;align-items:center;gap:calc(6 * var(--u));font-size:calc(16 * var(--u));margin-top:calc(8 * var(--u))}
.thermal-row>i{display:block;height:calc(10 * var(--u));background:#6e8a9b26;border-radius:8px;position:relative}
.thermal-row b{position:absolute;height:100%;background:#e89a4d;border-radius:8px}
.shower-row b{background:#3b9db5}
.thermal-row strong{text-align:right;font-size:calc(16 * var(--u))}
.thermal-axis{display:flex;justify-content:space-between;margin:calc(4 * var(--u)) 5em 0 5.7em;font-size:calc(12 * var(--u));color:#61778a}
.scene-label.heat{background:rgba(18,94,123,.9)}
.scene-label.phase{background:rgba(113,128,27,.92)}
#boot{position:fixed;z-index:99;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#e1e9e4;color:#09235d;font:22px var(--font)}
#boot b{font-size:48px;border-left:4px solid #1aa1ff;padding-left:18px}
/* Full equipment names remain visible in the single collapsed row at 4:3. */
@media(max-aspect-ratio:3/2){
 .stage.panel-collapsed .views{column-gap:calc(4 * var(--u));padding:calc(9 * var(--u)) calc(8 * var(--u))}
 .stage.panel-collapsed .views button{padding:calc(5 * var(--u)) 0}
 .stage.panel-collapsed .views>button:first-child{padding-inline:calc(3 * var(--u))}
 .stage.panel-collapsed .stage-group{padding-left:calc(4 * var(--u))}
 .stage.panel-collapsed .stage-group>span{gap:0}
}
@media(max-aspect-ratio:3/2){
 .stage.panel-collapsed .views button{font-size:calc(25 * var(--u));padding-inline:calc(3 * var(--u))}
 .stage.panel-collapsed .stage-group>span{gap:calc(2 * var(--u))}
}
/* Five sections, full device names, two rows when the teaching board is open. */
.views#steps{display:flex!important;align-items:stretch;gap:calc(14 * var(--u));overflow:hidden;max-width:100%;padding:calc(12 * var(--u)) calc(18 * var(--u));}
#steps .overview-btn{flex:0 0 auto;align-self:stretch;padding:calc(8 * var(--u)) calc(12 * var(--u));}
.process-nav{min-width:0;flex:1;display:flex;flex-direction:column;gap:calc(7 * var(--u));}
#steps .group-tabs{display:flex;gap:calc(18 * var(--u));border-bottom:1px solid #54788f30;padding-bottom:calc(6 * var(--u));}
#steps .group-tabs button{font-size:calc(27 * var(--u));font-weight:750;padding:0 calc(4 * var(--u));border:0;border-radius:0;background:none;color:#617a8a;white-space:nowrap;}
#steps .group-tabs button[aria-pressed=true]{color:#0879a6;box-shadow:0 2px #2da0c2;}
#steps .device-steps{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:calc(8 * var(--u)) calc(14 * var(--u));overflow-x:auto;scrollbar-width:thin;scrollbar-color:#7896a26b transparent;padding-bottom:calc(2 * var(--u));}
#steps .device-steps button{font-size:calc(32 * var(--u));padding:calc(5 * var(--u)) calc(8 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));white-space:nowrap;}
#steps .device-steps i{font-style:normal;font-size:calc(23 * var(--u));min-width:calc(31 * var(--u));height:calc(31 * var(--u));border:1px solid currentColor;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;}
.stage.panel-collapsed #steps .device-steps{grid-template-rows:auto;}
.stage.panel-collapsed #steps .group-tabs button{font-size:calc(25 * var(--u));}
.flow-legend{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u));font-size:calc(19 * var(--u));}
.flow-legend span:before{content:'';display:inline-block;width:calc(23 * var(--u));height:calc(7 * var(--u));margin-right:calc(8 * var(--u));background:var(--c);border-radius:4px;vertical-align:middle;}

/* Step labels switch atomically with the board; no stale equipment name during camera changes. */
.scene-label{transition:none!important;}

/* Same translucent HTML controls as the refinery overlay. */
.site-views{display:flex;gap:8px;margin-top:10px;pointer-events:auto}.site-views button{border:1px solid #ffffffa8;border-radius:18px;padding:7px 17px;background:#eef6f2c9;color:#36596c;font:600 17px inherit;cursor:pointer;backdrop-filter:blur(10px)}.site-views button[aria-pressed="true"]{background:#167de8;color:white;border-color:#52b5ff}.site-views button:focus-visible{outline:3px solid #005aad;outline-offset:3px}

/* Keep the familiar translucent DIV overlay neutral against the forest. */
.panel{background:rgba(240,246,251,.93)}
.stagebar .views{background:rgba(236,244,250,.94)}
.site-views button{font-family:var(--font);font-size:calc(17 * var(--u));font-weight:600}