/* shared explainer visuals (engine/viz.js). Colours come from the scene palette vars. */
.viz-field .fs{fill:var(--f4);opacity:.35}.viz-field .fs.on{fill:var(--yel);opacity:1;filter:drop-shadow(0 0 10px var(--yel))}
.viz-field .fm{fill:var(--hi)}.viz-field .fc{fill:var(--mut);font-size:18px}
.viz-train .tk{stroke:var(--ln);stroke-width:4}.viz-train .st{fill:none;stroke:var(--mut);stroke-width:2;stroke-dasharray:6 5}.viz-train .stl{fill:var(--mut);font-size:18px}
.viz-train .car rect{fill:var(--node);stroke:var(--f4);stroke-width:3}.viz-train .car text{fill:var(--hi);font-size:22px}.viz-train .car .tag{fill:var(--yel);font-size:18px}
.viz-train .car.chk rect{stroke:var(--yel)}.viz-train .car.bad rect{stroke:var(--red,#BF616A);fill:rgba(191,97,106,.15)}.viz-train .car.fix rect{stroke:var(--yel);stroke-dasharray:8 5}.viz-train .car.ok rect{stroke:var(--grn)}
.viz-hub .sp{stroke:var(--f4);stroke-width:2}.viz-hub .cs{stroke:var(--f2);stroke-width:2}
.viz-hub .sb{fill:var(--node);stroke:var(--f4);stroke-width:2}.viz-hub .sbt{fill:var(--hi);font-size:18px}
.viz-hub .hb{fill:var(--node);stroke:var(--f2);stroke-width:4}.viz-hub .hbt{fill:var(--hi);font-size:22px;font-weight:600}.viz-hub .hbs{fill:var(--yel);font-size:18px}
.viz-hub .cl rect{fill:var(--node);stroke:var(--f2);stroke-width:2}.viz-hub .cl text{fill:var(--hi);font-size:19px}.viz-hub .cl.hot rect{stroke:var(--yel);fill:rgba(255,209,102,.18)}
.viz-hub .pk2{fill:var(--yel)}
.vb{display:flex;flex-direction:column;gap:14px;padding:10px 0;width:1100px}
.vb-r{display:grid;grid-template-columns:330px 1fr 90px;align-items:center;gap:18px;font:600 30px var(--mono);color:var(--tx,var(--fg))}
.vb-r i{height:22px;display:block;background:var(--node);border:2px solid var(--f4);border-radius:11px;overflow:hidden}
.vb-r u{display:block;height:100%;width:0;background:var(--f4)}
.vb-r b{text-align:right;color:var(--mut)}
.vb-r.win span,.vb-r.win b{color:var(--yel)}.vb-r.win u{background:var(--yel)}
.vb-rc{font:700 32px var(--mono);color:var(--grn);min-height:40px;margin-top:6px}
.vl{display:grid;grid-template-columns:repeat(10,28px);gap:6px;float:left}
.vl i{width:28px;height:28px;border-radius:5px;background:var(--yel);box-shadow:0 0 12px var(--yel)}
.vl-cap{position:absolute;left:380px;top:120px;font:500 30px var(--mono);color:var(--hi)}
.vk{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,545px);gap:20px}
.vk-col b{display:block;font:700 22px var(--mono);letter-spacing:6px;color:var(--mut);padding:8px 20px;border-bottom:2px solid var(--f4)}
.vk-card{position:absolute;left:0;top:0;width:500px;height:36px;border:2px solid var(--f4);border-radius:6px;background:var(--node);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:500 20px var(--mono);color:var(--hi)}
.vk-card em{font-style:normal;color:var(--yel)}.vk-card.c2{border-color:var(--grn);opacity:.75}.vk-card.c1{border-color:var(--yel)}
.vf-cmd{font:600 32px var(--mono);color:var(--hi);margin-bottom:18px}
.vf{display:grid;grid-template-columns:repeat(15,1fr);gap:10px;width:1650px}
.vf-m{height:88px;border:2px solid var(--f4);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:.35}
.vf-m i{width:30px;height:20px;border:3px solid currentColor;border-radius:3px;color:var(--mut)}
.vf-m span{font:500 13px var(--mono);color:var(--mut)}
.vf-m.on{opacity:1;border-color:var(--grn)}.vf-m.on i{color:var(--grn)}.vf-m.on span{color:var(--hi)}
.vx{position:absolute;left:0;top:0;width:820px;height:330px;overflow:hidden;border:2px solid var(--f4);border-radius:8px}
.vx img{width:100%;height:100%;object-fit:cover;object-position:0 0;opacity:.8}
.vx-h{position:absolute;left:0;right:0;height:2px;background:var(--yel);box-shadow:0 0 10px var(--yel)}
.vx-v{position:absolute;top:0;bottom:0;width:2px;background:var(--yel);box-shadow:0 0 10px var(--yel)}
.vx-p{position:absolute;width:44px;height:44px;border:4px solid var(--yel);border-radius:50%}
.vx-c{position:absolute;left:860px;top:130px;width:800px;font:600 34px var(--mono);color:var(--hi);white-space:nowrap}
.vr{position:absolute;inset:0}
.vr-ring{position:absolute;left:30px;top:20px;width:260px;height:260px;border-radius:50%;border:22px solid var(--f4)}
.vr-ring i{position:absolute;left:50%;top:-34px;width:34px;height:34px;margin-left:-17px;border-radius:8px;background:var(--yel);box-shadow:0 0 20px var(--yel)}
.vr-list{position:absolute;left:380px;top:40px;font:600 34px/1.7 var(--mono);color:var(--mut)}
.vr-list div{padding:0 16px;border-radius:6px}.vr-list div.on{color:var(--hi);background:var(--node);outline:2px solid var(--f4)}.vr-list div.pick{outline-color:var(--yel);color:var(--yel)}
.vr-say{position:absolute;left:1080px;top:130px;font:italic 400 38px var(--serif);color:var(--yel)}