/* 外壳与画布样式。外观照贴图版原型（prototype/iron-lab-assets/style.css），这是 2026-10-22 定的美术基准。 */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{color:#294539;background:var(--canvas-wall);font:14px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;display:flex;flex-direction:column}

/* ---- 顶栏：白底，不随画布主题变 ---- */
header{height:72px;flex:0 0 72px;display:flex;align-items:center;gap:30px;padding:0 30px;background:#fff;border-bottom:1px solid #dfe7df;z-index:4}
.brand{display:flex;align-items:center;gap:10px;color:#284e3d;text-decoration:none;font-size:25px;font-weight:650;white-space:nowrap}
.brand-icon{font-size:34px;font-weight:400}
.brand small{font-size:9px;letter-spacing:1.8px;margin-left:8px}
.crumb{display:flex;align-items:center;gap:17px;min-width:0;flex:0 1 auto;color:#8b9789;font-size:12px}
.crumb i{font-style:normal;color:#bcc6b8}
h1{font:600 16px/1.4 "Microsoft YaHei",sans-serif;color:#365644;margin:0;white-space:nowrap}
.toolbar{margin-left:auto;display:flex;gap:10px;flex-shrink:0}
button{cursor:pointer;color:#56704f;background:#fff;border:1px solid #dbe4d6;border-radius:6px;padding:9px 14px;font:12px/1.5 "Microsoft YaHei",sans-serif;white-space:nowrap}
button:hover{background:#eff4eb}
button:focus-visible,a:focus-visible{outline:3px solid #9cb38a;outline-offset:3px}
.primary{background:#355d48;color:#fff;border-color:#355d48}
.primary:hover{background:#274b38}
.toolbar button:disabled{opacity:.5;cursor:wait}

/* 实验标题菜单 */
.experiment-picker{position:relative;min-width:0}
#experiment-title{display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:8px 3px;color:#81937c;max-width:100%;min-width:0}
#experiment-title:hover{background:#f2f6ed}
#experiment-title h1{overflow:hidden;text-overflow:ellipsis;max-width:36vw;min-width:0}
/* 顶栏放不下时标题让位（按钮条不缩）：标题跟着可用宽度省略，不压到按钮上 */
.experiment-picker{max-width:100%}
#experiment-menu{position:absolute;top:calc(100% + 16px);left:-16px;width:320px;padding:10px;background:#fff;border:1px solid #dce6d6;border-radius:10px;box-shadow:0 14px 45px #29473522;z-index:10}
#experiment-menu[hidden]{display:none}
.menu-label{font-size:10px;color:#94a18e;padding:5px 12px 9px;letter-spacing:1px}
#experiment-menu>button{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;text-align:left;border:0;background:transparent;padding:13px 12px}
#experiment-menu>button:hover{background:#f4f7ef}
#experiment-menu>button[aria-checked=true]{background:#ecf3e7}
#experiment-menu strong{display:block;font-size:13px;font-weight:600}
#experiment-menu small{display:block;font-size:10px;color:#92a186;margin-top:4px}
#experiment-menu i{font-style:normal;color:#6e8b5e}

/* 主题切换钮：圆点左半深、右半浅 */
.theme-toggle{display:flex;align-items:center;gap:7px;margin-left:6px}
.theme-toggle i{width:14px;height:14px;border-radius:50%;border:1.5px solid #7f9a8f;background:linear-gradient(90deg,#1d2724 50%,#f2f6f3 50%)}
.theme-toggle[aria-pressed=false] i{background:linear-gradient(90deg,#f2f6f3 50%,#1d2724 50%)}

/* 喇叭：主题切换钮左边；点喇叭静音，小箭头弹出音量滑条。顶栏白底不随画布主题变，深浅主题下一样清楚 */
.sound-ctl{position:relative;display:flex;align-items:stretch}
.sound-ctl>button{display:flex;align-items:center;justify-content:center}
#sound-toggle{border-radius:6px 0 0 6px;padding:7px 10px;color:#3f6450}
#sound-toggle svg{width:18px;height:18px;display:block}
#sound-more{border-radius:0 6px 6px 0;border-left:0;padding:7px 7px;color:#81937c}
.sound-ctl.muted #sound-toggle{color:#a3ae9f}
#sound-panel{position:absolute;top:calc(100% + 10px);right:0;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid #dce6d6;border-radius:10px;box-shadow:0 14px 45px #29473522;z-index:10;white-space:nowrap;font-size:12px;color:#56704f}
#sound-panel[hidden]{display:none}
#sound-panel input{width:140px;accent-color:#355d48}
#sound-panel output{min-width:34px;text-align:right;color:#365644}

/* ---- 画布 ---- */
/* 画布主题（画布主题规格第 2 节）：默认深色，同色系深灰绿；只换画布，界面件不变 */
:root{--canvas-wall:#1d2724;--canvas-bench:#26322d;--canvas-edge:#3b4a43;--canvas-grid:#2f3c36;--canvas-caption:#a3b5aa;--canvas-label:#60776b;--water-alpha:.55;--water-top:#bee1e6;--water-line:#dff3f6}
:root[data-theme=light]{--canvas-wall:#f2f6f3;--canvas-bench:#e5ece8;--canvas-edge:#d0dbd5;--canvas-grid:#d9e3dc;--canvas-caption:#8b9b8f;--canvas-label:#60776b;--water-alpha:.7;--water-top:#9cd5db;--water-line:#72a8af}
.stage-wrap{position:relative;flex:1;min-height:0;width:100%;overflow:hidden;background:var(--canvas-wall)}
#stage{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
#stage .wall{fill:var(--canvas-wall)}
#stage .bench{fill:var(--canvas-bench)}
#stage .bench-edge{stroke:var(--canvas-edge)}
#stage .bench-grid{stroke:var(--canvas-grid)}
#stage .obj-caption{font:10px "Microsoft YaHei",sans-serif;fill:var(--canvas-caption);letter-spacing:1px}
#stage .svg-label{font:12px "Microsoft YaHei",sans-serif;fill:var(--canvas-label)}
/* 深色画布上玻璃内腔要通透（画布主题规格；主会话 10-23 要求）：S-00 玻璃贴图内腔有一层 alpha 很低的白色噪点，
   浅底上看不出来，深底上像一层毛玻璃。深色下用 #dark-glass：玻璃轮廓与高光（alpha ≥ 0.6）不动，其余柔化、减淡，内腔的雾去掉（见 src/lab/stage.mjs）。
   只管玻璃器身；杯壁水雾、光晕、粒子、裂纹、遮罩图不动。浅色主题照旧。 */
:root:not([data-theme=light]) #stage image:is([href*="gas-bottle"],[href*="narrow-bottle"],[href*="wide-bottle"],[href*="amber-bottle"],[href*="beaker-100"],[href*="water-trough"],[href*="test-tube"],[href*="hofmann-glass"],[href*="alcohol-burner"],[href*="stopper"]):not([href*="crack"]):not([href*="fog"]):not([href*="mask"]){filter:url(#dark-glass)}
/* 461 霍夫曼电解器的管壁是近黑色的线：深色下用提亮版，气体段的管壁才看得见（主会话 10-24，用户反馈左管看不清） */
:root:not([data-theme=light]) #stage image[href*="hofmann-glass"]:not([href*="mask"]){filter:url(#dark-glass-lit)!important}
#stage [data-id]{cursor:grab}
#stage.dragging,#stage.dragging [data-id]{cursor:grabbing}

/* 提示条、演示字幕、现象记录：白底界面件 */
#toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);max-width:90%;padding:9px 16px;border-radius:6px;background:#355b48ed;color:#fff;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
#toast.show{opacity:1}
#demo-caption{position:absolute;left:24px;top:22px;background:#fffffff0;padding:9px 14px;color:#516d42;font-size:12px;border:1px solid #d9e4ce;border-radius:5px;pointer-events:none;z-index:3}

/* 缩放控件（画布缩放规格 3.4）：画布右上角；窄屏移到右下角 */
.zoom-ctl{position:absolute;right:16px;top:14px;display:flex;align-items:center;background:#ffffffeb;border:1px solid #d9e4ce;border-radius:8px;box-shadow:0 4px 14px #0002;overflow:hidden;z-index:3}
.zoom-ctl button{border:0;border-radius:0;background:transparent;color:#466452;padding:6px 11px;font:600 14px/1.2 "Segoe UI","Microsoft YaHei",sans-serif;min-width:34px}
.zoom-ctl button:hover:not(:disabled){background:#eef4ea}
.zoom-ctl button:disabled{opacity:.35;cursor:default}
.zoom-ctl .zoom-pct{font-weight:500;font-size:12px;min-width:52px;border-left:1px solid #e3eadf;border-right:1px solid #e3eadf}
.zoom-ctl.zoomed .zoom-pct{color:#2f6b4a;font-weight:700}

@media(max-width:1000px){header{gap:20px;padding:0 20px}.brand small{display:none}.crumb{gap:10px}h1{font-size:14px}button{padding:8px 11px}}
@media(max-width:700px){
  header{height:60px;flex-basis:60px;gap:12px;padding:0 12px}
  .brand{font-size:18px;gap:5px}.brand-icon{font-size:25px}
  .crumb{gap:6px;font-size:10px}.crumb>span,.crumb>i{display:none}
  h1{font-size:12px}.toolbar{gap:6px}button{font-size:10px;padding:7px 9px}
  #demo-caption{top:12px;left:12px;right:12px;font-size:11px}
  #experiment-title{gap:4px}#experiment-title h1{max-width:33vw}
  #experiment-menu{left:auto;right:-20px;width:min(310px,90vw);top:calc(100% + 13px)}
  .theme-toggle span{display:none}.theme-toggle{padding:7px 8px;margin-left:0}
  #sound-toggle{padding:6px 7px}#sound-toggle svg{width:15px;height:15px}#sound-more{padding:6px 5px}#sound-panel input{width:110px}
  .zoom-ctl{top:auto;bottom:12px;right:12px}.zoom-ctl button{padding:5px 8px;min-width:28px}.zoom-ctl .zoom-pct{min-width:44px}
}
@media(max-width:440px){.brand{font-size:0;gap:0}.brand-icon{font-size:24px}header{gap:9px}h1{font-size:11px}button{padding:7px}.toolbar{gap:4px}}