/*!
 * iModel 教程演示引擎 - 样式
 * 由 page-tutorial.php 只在教程页加载。全部规则作用域在 .imdemo 之下，
 * 不影响主题与任何已有页面。
 */
.imdemo{--ink:#101a26;--ink-2:#4a5766;--ink-3:#7b8798;--paper:#f2f4f7;--surface:#ffffff;--line:#dfe4ea;--line-2:#eef1f5;--amber:#E8A33D;--amber-soft:#fdf3e2;--navy:#0d1b2e;--red:#c8382f;--yellow:#f0b323;--green:#3f9e4d;--node:#FFCC00;--node-line:#8a7000;--shadow:0 1px 2px rgba(16,26,38,.06), 0 8px 24px rgba(16,26,38,.06);--radius:10px;--sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Consolas","Microsoft YaHei",monospace;font-family:var(--sans);color:var(--ink);margin:34px 0 10px}.imdemo *{box-sizing:border-box}@media (prefers-reduced-motion:reduce){.imdemo *{transition-duration:.01ms!important;animation-duration:.01ms!important}}.imdemo .demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:22px 0 8px;overflow:hidden}.imdemo .demo-head{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-3);background:var(--surface)}.imdemo .demo-head .t{color:var(--ink-2);font-weight:600}.imdemo .demo-head .spacer{flex:1}.imdemo .stage{position:relative;background:#f0f0f0;color:#1b1b1b;overflow:hidden;font-size:13px;line-height:1.5}.imdemo .stage,.imdemo .stage *{font-family:var(--sans)}.imdemo .screen{position:absolute;top:0;left:0;width:980px;height:430px;transform-origin:top left;transform:scale(var(--k,1)) translate(var(--ox,0),0);background:#f0f0f0;overflow:hidden}.imdemo .demo.zoom{position:fixed;inset:0;z-index:200;margin:0;border-radius:0;border:0;display:flex;flex-direction:column;background:var(--surface)}.imdemo .demo.zoom .stage{flex:1;display:grid;place-items:center;background:#33383f}.imdemo .demo.zoom .cap{min-height:88px}.imdemo .demo.zoom .cap .d{font-size:17px}.imdemo .demo.zoom .cap .t{font-size:17px}.imdemo body.zoomed{overflow:hidden}.imdemo .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line-2);flex-wrap:wrap}.imdemo .bar button{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px 13px;font-size:13.5px;color:var(--ink-2)}.imdemo .bar button:hover:not(:disabled){border-color:var(--amber);color:var(--ink)}.imdemo .bar button:disabled{opacity:.4;cursor:default}.imdemo .bar .play{background:var(--ink);color:var(--surface);border-color:var(--ink);font-weight:600;min-width:92px}.imdemo .bar .play:hover{background:var(--amber);border-color:var(--amber);color:#2a1d05}.imdemo .bar .spacer{flex:1}.imdemo .bar .pos{font:500 12.5px/1 var(--mono);color:var(--ink-3)}.imdemo .dots{display:flex;gap:5px;align-items:center}.imdemo .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}.imdemo .dots i.done{background:var(--green)}.imdemo .dots i.cur{background:var(--yellow);transform:scale(1.5);box-shadow:0 0 0 3px rgb(240 179 35 / .2)}.imdemo .cap{padding:13px 16px 15px;border-top:1px solid var(--line-2);background:var(--line-2);min-height:74px}.imdemo .cap .k{font-size:12px;font-weight:600;color:var(--amber);margin-bottom:3px;font-family:var(--mono)}.imdemo .cap .t{font-weight:650;margin-right:8px}.imdemo .cap .d{color:var(--ink-2);font-size:14.5px}.imdemo .ui{position:absolute;inset:0;display:flex;flex-direction:column;background:#f0f0f0}.imdemo .ui-menu{display:flex;gap:2px;padding:4px 8px;background:#f0f0f0;border-bottom:1px solid #d6d6d6;font-size:12.5px;position:relative;z-index:5}.imdemo .ui-menu span{padding:2px 9px;border-radius:3px;color:#222;transition:.2s}.imdemo .ui-menu span.hot{background:#cfe3ff;box-shadow:0 0 0 1px #6ba4ef}.imdemo .ui-tool{display:flex;gap:6px;align-items:center;padding:4px 8px;background:#f7f7f7;border-bottom:1px solid #d6d6d6}.imdemo .ui-tool i{width:16px;height:16px;border-radius:3px;background:#dcdcdc;display:block}.imdemo .ui-tool i.y{background:var(--node)}.imdemo .ui-body{flex:1;display:flex;min-height:0}.imdemo .ui-left{width:206px;border-right:1px solid #d6d6d6;background:#fafafa;display:flex;flex-direction:column;min-height:0;transition:box-shadow .3s}.imdemo .ui-panel-t{background:#e8eef7;border-bottom:1px solid #d6d6d6;padding:3px 8px;font-size:12px;font-weight:600;color:#20364f;display:flex;align-items:center;gap:5px}.imdemo .ui-panel-t::before{content:"";width:9px;height:9px;background:var(--node);border:1px solid #8a7000;border-radius:2px;display:block}.imdemo .ui-search{margin:6px;padding:3px 7px;border:1px solid #b9c0cb;background:#fff;border-radius:3px;font-size:12px;color:#888;display:flex;align-items:center;gap:5px}.imdemo .ui-search .q{color:#111}.imdemo .ui-search .caret{width:1px;height:12px;background:#111;animation:blink 1s steps(1) infinite}.imdemo .tree{padding:2px 0 8px;overflow:auto;font-size:12.5px;flex:1}.imdemo .tree div{padding:2px 8px 2px 0;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:.25s}.imdemo .tree .l1{padding-left:8px;font-weight:600}.imdemo .tree .l2{padding-left:22px}.imdemo .tree .l3{padding-left:36px}.imdemo .tree .ico{width:13px;height:13px;border-radius:2px;background:#cbd3dd;flex:none}.imdemo .tree .ico.y{background:var(--node);border:1px solid #8a7000}.imdemo .tree .dim{opacity:.22}.imdemo .tree .hit{background:#fff4d6;box-shadow:inset 0 0 0 1px var(--amber);border-radius:3px}.imdemo .ui-canvas{flex:1;position:relative;background:#fff;overflow:hidden;min-width:0}.imdemo .ui-tabs{display:flex;gap:1px;background:#e9e9e9;border-bottom:1px solid #d6d6d6;padding:3px 4px 0}.imdemo .ui-tabs span{padding:3px 12px;font-size:12px;background:#dcdcdc;border-radius:4px 4px 0 0;color:#444;transition:.25s}.imdemo .ui-tabs span.on{background:#fff;color:#111;font-weight:600;box-shadow:0 -1px 0 #d6d6d6 inset}.imdemo .ui-bottom{height:104px;border-top:1px solid #d6d6d6;background:#fafafa;display:flex;flex-direction:column;transition:height .35s}.imdemo .ui-bottom.tall{height:150px}.imdemo .ui-btabs{display:flex;gap:10px;padding:3px 10px;background:#eef1f5;border-bottom:1px solid #d6d6d6;font-size:12px}.imdemo .ui-btabs span{padding:1px 6px;border-radius:3px;color:#555}.imdemo .ui-btabs span.on{background:#fff;color:#111;font-weight:600;box-shadow:0 0 0 1px #d6d6d6}.imdemo .ui-bcontent{flex:1;overflow:hidden;padding:6px 10px;font-size:12px;color:#333;position:relative}.imdemo .node{position:absolute;width:78px;text-align:center;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .35s}.imdemo .node .cap-t{font-size:11.5px;font-weight:600;color:#111;margin-bottom:2px;white-space:nowrap;line-height:1.2}.imdemo .node .box{display:flex;align-items:center;justify-content:center;gap:2px}.imdemo .node .glyph{width:34px;height:34px;border-radius:4px;background:var(--node);border:1px solid #8a7000;display:grid;place-items:center;font:700 13px/1 var(--mono);color:#241d00;position:relative}.imdemo .node[data-kind="read"] .glyph{background:#f2913c;border-color:#a35a13;color:#fff}.imdemo .node[data-kind="rule"] .glyph{background:#5cc08a;border-color:#2c7a4d;color:#0e3a20}.imdemo .node .port{width:0;height:0;border:5px solid #fff0;border-left-color:#111;border-right:0}.imdemo .node .port.in{border-left-color:#fff0;border-left:0;border-right:5px solid #111}.imdemo .node[data-kind="read"] .port.in{opacity:0}.imdemo .node .lamps{display:flex;gap:3px;justify-content:center;margin-top:3px;padding:2px 4px;background:#e8e8e8;border-radius:3px;width:fit-content;margin-inline:auto;border:1px solid #cfcfcf}.imdemo .node .lamps i{width:7px;height:7px;border-radius:50%;background:#cfcfcf;transition:background .3s,box-shadow .3s}.imdemo .node .lamps{position:relative}.imdemo .node[data-state="idle"] .lamps i:nth-child(1){background:var(--red)}.imdemo .node[data-state="ready"] .lamps i:nth-child(2){background:var(--yellow)}.imdemo .node[data-state="run"] .lamps i:nth-child(2){background:var(--yellow);box-shadow:0 0 0 3px rgb(240 179 35 / .3);animation:pulse .9s infinite}.imdemo .node[data-state="ok"] .lamps i:nth-child(3){background:var(--green)}.imdemo .node[data-state="fail"] .lamps i:nth-child(1){background:var(--red);box-shadow:0 0 0 3px rgb(200 56 47 / .25)}.imdemo .node[data-state="run"] .lamps::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--yellow) 38%,#d9dde2 38%);background-size:260% 100%;animation:prog 1.1s linear infinite}.imdemo .node .nm{font:11px/1.3 var(--mono);color:#444;margin-top:2px}.imdemo .node .badge{position:absolute;right:-7px;bottom:-4px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;opacity:0;transform:scale(.5);transition:.3s}.imdemo .node[data-state="fail"] .badge{opacity:1;transform:scale(1);background:var(--red)}.imdemo .node.sel .glyph{box-shadow:0 0 0 2px #1a6fd4,0 0 0 5px rgb(26 111 212 / .2)}.imdemo .node.ghost{opacity:.55;filter:saturate(.6)}.imdemo .wire{position:absolute;height:2px;background:#8c8c8c;transform-origin:left center;transition:width .5s ease}.imdemo .wire.flow{background:linear-gradient(90deg,#8c8c8c 50%,transparent 0) repeat-x;background-size:10px 2px;animation:march .6s linear infinite}.imdemo .cursor{position:absolute;width:20px;height:26px;left:0;top:0;z-index:30;pointer-events:none;transition:transform .75s cubic-bezier(.35,.1,.25,1),opacity .3s;opacity:0}.imdemo .cursor svg{filter:drop-shadow(0 1px 2px rgb(0 0 0 / .45))}.imdemo .cursor.on{opacity:1}.imdemo .cursor.click::after{content:"";position:absolute;left:-9px;top:-9px;width:34px;height:34px;border-radius:50%;border:2px solid var(--amber);animation:ping .55s ease-out}.imdemo .tip{position:absolute;z-index:28;background:#101a26;color:#fff;font-size:12.5px;line-height:1.5;padding:7px 11px;border-radius:7px;max-width:230px;box-shadow:0 6px 20px rgb(0 0 0 / .28);opacity:0;transform:translateY(6px);transition:.3s;pointer-events:none}.imdemo .tip.on{opacity:1;transform:translateY(0)}.imdemo .tip::after{content:"";position:absolute;left:18px;bottom:-5px;width:10px;height:10px;background:#101a26;transform:rotate(45deg)}.imdemo .tip.up::after{bottom:auto;top:-5px}.imdemo .ring{position:absolute;border:2.5px solid var(--red);border-radius:50%;z-index:26;pointer-events:none;opacity:0;transform:scale(.9);transition:.35s}.imdemo .ring.on{opacity:1;transform:scale(1)}.imdemo .ring.rect{border-radius:5px}.imdemo .dlg{position:absolute;background:#fff;border:1px solid #9aa3ae;border-radius:6px;z-index:20;box-shadow:0 14px 44px rgb(0 0 0 / .3);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(10px) scale(.98);transition:.32s;pointer-events:none}.imdemo .dlg.on{opacity:1;transform:none}.imdemo .dlg-t{background:#e9edf2;border-bottom:1px solid #cdd3db;padding:5px 10px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;color:#1b2733}.imdemo .dlg-t .x{margin-left:auto;color:#666;font-weight:400}.imdemo .dlg-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid #d6d6d6;font-size:12px;flex-wrap:wrap}.imdemo .dlg-tabs span{padding:3px 9px;border-radius:4px 4px 0 0;color:#555;border:1px solid #fff0;border-bottom:0;white-space:nowrap;transition:.2s}.imdemo .dlg-tabs span.on{background:#fff;color:#111;font-weight:600;border-color:#d6d6d6;box-shadow:0 1px 0 #fff}.imdemo .dlg-body{flex:1;padding:10px 12px;overflow:hidden;font-size:12.5px;position:relative}.imdemo .fld{display:flex;align-items:center;gap:7px;margin-bottom:9px}.imdemo .fld label{color:#444;white-space:nowrap}.imdemo .fld .inp{flex:1;border:1px solid #b9c0cb;border-radius:3px;background:#fff;padding:3px 7px;min-height:23px;color:#111;transition:.25s}.imdemo .fld .btn{border:1px solid #b9c0cb;border-radius:3px;background:#f2f2f2;padding:3px 10px;color:#222}.imdemo .fld .num{width:56px;border:1px solid #b9c0cb;border-radius:3px;padding:2px 6px;background:#fff;text-align:center;transition:.25s}.imdemo .hi{box-shadow:0 0 0 2px var(--amber);border-color:var(--amber)!important}.imdemo .chk{display:inline-flex;align-items:center;gap:5px;margin-right:14px;color:#333}.imdemo .chk .bx{width:13px;height:13px;border:1px solid #7a8493;border-radius:2px;background:#fff;display:grid;place-items:center;font-size:10px;color:#fff;transition:.2s}.imdemo .chk.on .bx{background:#1a6fd4;border-color:#1a6fd4}.imdemo .chk.on .bx::after{content:"✓"}.imdemo .grp{border:1px solid #dcdfe4;border-radius:5px;padding:9px 10px 6px;margin-bottom:10px;position:relative}.imdemo .grp>.gt{position:absolute;top:-9px;left:9px;background:#fff;padding:0 5px;font-size:11.5px;color:#5a6472}.imdemo .tb{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}.imdemo .tb th,.imdemo .tb td{border:1px solid #d3d8de;padding:2px 6px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.imdemo .tb th{background:#eef1f5;font-weight:600;color:#20364f}.imdemo .tb .rid{background:#f5f5f5;color:#a33;font-weight:600;width:52px}.imdemo .tb tr{transition:opacity .4s,background .3s}.imdemo .tb tr.gone{opacity:.28}.imdemo .tb tr.gone td{text-decoration:line-through;color:#98a1ac}.imdemo .tb tr.mark{background:#ffe9e6}.imdemo .tb tr.head-row{background:#fff8e0}.imdemo .tb td.miss{color:#c8382f;text-align:center}.imdemo .tb-wrap{border:1px solid #d3d8de;overflow:hidden;border-radius:3px;background:#fff}.imdemo .ctb{display:flex;border:1px solid #d3d8de;background:#fff;border-radius:3px;overflow:hidden}.imdemo .ctb .col{flex:1 1 0%;min-width:0;transition:flex-basis .5s,flex-grow .5s,opacity .4s,padding .5s;overflow:hidden}.imdemo .ctb .col.gone{flex-grow:0;flex-basis:0%;opacity:0}.imdemo .ctb .col .ch{background:#eef1f5;font-weight:600;color:#20364f;font-size:11.5px;padding:3px 6px;border-bottom:1px solid #d3d8de;white-space:nowrap}.imdemo .ctb .col .cc{font-size:11.5px;padding:2px 6px;border-bottom:1px solid #eceff3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.imdemo .ctb .col+.col{border-left:1px solid #e6e9ee}.imdemo .twin{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;align-items:stretch}.imdemo .twin .lst{border:1px solid #c6ccd4;border-radius:4px;background:#fff;min-height:112px;padding:3px;position:relative;overflow:hidden}.imdemo .twin .lh{font-size:11.5px;color:#5a6472;margin-bottom:3px}.imdemo .twin .it{font-size:11.5px;padding:2px 6px;border-radius:3px;transition:.4s;background:#fff}.imdemo .twin .it.sel{background:#cfe3ff;box-shadow:inset 0 0 0 1px #6ba4ef}.imdemo .twin .it.hide{opacity:0;height:0;padding:0;overflow:hidden}.imdemo .twin .mid{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center}.imdemo .twin .mid b{width:26px;height:22px;border:1px solid #c6ccd4;border-radius:3px;display:grid;place-items:center;font-size:12px;color:#555;background:#f7f7f7;transition:.25s}.imdemo .twin .mid b.hot{background:var(--amber);border-color:var(--amber);color:#2a1d05}.imdemo .twin .empty{color:#98a1ac;font-style:italic;font-size:11.5px;text-align:center;padding-top:36px;transition:.3s}.imdemo [data-from]{opacity:0;transition:opacity .35s ease,transform .35s ease}.imdemo [data-from].on{opacity:1}.imdemo [data-from].rise{transform:translateY(8px)}.imdemo [data-from].rise.on{transform:none}.imdemo [data-from].pop{transform:scale(.94)}.imdemo [data-from].pop.on{transform:none}@keyframes blink{50%{opacity:0}}@keyframes pulse{50%{box-shadow:0 0 0 6px #fff0}}@keyframes prog{from{background-position:100% 0}to{background-position:-70% 0}}@keyframes march{to{background-position:10px 0}}@keyframes ping{from{transform:scale(.3);opacity:1}to{transform:scale(1.15);opacity:0}}.imdemo .auto-flag{font-size:12px;color:var(--ink-3);padding:2px 10px;border-radius:999px;background:var(--line-2);display:none;align-items:center;gap:6px}.imdemo.is-auto:not(.is-manual) .auto-flag{display:inline-flex}.imdemo .auto-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);animation:imdemo-blink 1.6s ease-in-out infinite}.imdemo.is-auto:not(.is-manual) .demo{border-color:#e3e8ef}.imdemo .demo-head .tbtn{background:#fff0;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:13px;color:var(--ink-2);cursor:pointer;font-family:inherit}.imdemo .demo-head .tbtn:hover{border-color:var(--amber);color:var(--ink)}.imdemo .bar button{font-family:inherit}body.imdemo-zoomed{overflow:hidden}@keyframes imdemo-blink{0%,100%{opacity:1}50%{opacity:.25}}.imdemo.is-auto:not(.is-manual) .demo:hover .auto-flag::before{animation:none;background:var(--yellow)}.imdemo.is-auto:not(.is-manual) .demo:hover .auto-flag{color:var(--ink-2)}