/* 桃乐丝电路模拟器：跟网站同一套暖灰 + 铁锈红；通电的线是琥珀色并且在流动 */
:root{
  --bg:#12120F;--grid:#22211D;--panel:#1A1A18;--panel2:#20201D;--sunk:#161614;--line:#2E2E2B;--line2:#3A3934;
  --ink:#E5E0D8;--ink2:#CFC9BF;--muted:#8C8679;--faint:#57534B;
  --rust:#CD412B;--rust-hi:#E24E36;--amber:#E3B341;--live:#79A03F;--water:#4F9FD8;--ind:#B8862F;--off:#4A4842;
  --font:"Barlow","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--head:"Oswald","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;overflow:hidden;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
a{color:var(--ink2)}

.ck{display:grid;grid-template-rows:52px 1fr;height:100vh;height:100dvh}
.ck-top{display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);min-width:0}
.ck-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:10px;flex:none}
.ck-brand svg{width:26px;height:26px;color:var(--amber)}
.ck-brand b{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:.02em}
.ck-brand small{display:block;font-size:11px;color:var(--muted);margin-top:-2px}
.ck-btn{height:34px;padding:0 12px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.ck-btn:hover{border-color:#55534C;background:#26261F}
.ck-btn svg{width:16px;height:16px}
.ck-btn-p{background:var(--rust);border-color:var(--rust);color:#FFF5F0}.ck-btn-p:hover{background:var(--rust-hi);border-color:var(--rust-hi)}
.ck-btn[disabled]{opacity:.45;cursor:default}
.ck-sep{width:1px;height:24px;background:var(--line);margin:0 4px;flex:none}
.ck-run{display:flex;align-items:center;border:1px solid var(--line2);border-radius:6px;overflow:hidden;flex:none}
.ck-run button{height:32px;min-width:38px;padding:0 9px;border:0;background:var(--panel2);border-right:1px solid var(--line)}
.ck-run button:last-child{border-right:0}
.ck-run button[aria-pressed=true]{background:#2E2B20;color:var(--amber)}
.ck-run svg{width:15px;height:15px;vertical-align:-2px}
.ck-clock{font-size:12px;color:var(--muted);padding:0 8px;white-space:nowrap}
.ck-sp{flex:1}
.ck-who{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink2);flex:none;max-width:180px}
.ck-who img{width:28px;height:28px;border-radius:50%}
.ck-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-name{height:34px;width:180px;padding:0 10px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--ink)}
.ck-name:hover,.ck-name:focus{border-color:var(--line2);background:var(--sunk);outline:0}

.ck-main{display:grid;grid-template-columns:248px 1fr 300px;min-height:0}
.ck-parts{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ck-q{margin:10px;height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--line2);background:var(--sunk)}
.ck-plist{overflow-y:auto;flex:1;padding:0 6px 16px}
.ck-cat{margin-top:6px}
.ck-cat>button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 8px;border:0;background:none;color:var(--ink2);font-family:var(--head);font-size:14px;letter-spacing:.02em;text-align:left}
.ck-cat>button i{width:8px;height:8px;border-radius:2px;flex:none}
.ck-cat>button small{margin-left:auto;color:var(--faint);font-family:var(--font)}
.ck-cat[data-closed] .ck-pi{display:none}
.ck-pi{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid transparent;border-radius:6px;background:none;text-align:left;touch-action:none;user-select:none}
.ck-pi:hover{background:var(--panel2);border-color:var(--line)}
.ck-pi svg{width:22px;height:22px;flex:none}
.ck-pi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-pi em{font-style:normal;font-size:12px;color:var(--muted)}
.ck-pi em.g{color:var(--live)}

.ck-board{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--bg)}
.ck-svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;display:block}
.ck-svg text{font-family:var(--font)}
.ck-hint{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);pointer-events:none;max-width:380px;line-height:1.6}
.ck-hint b{display:block;color:var(--ink2);font-family:var(--head);font-size:20px;font-weight:500;margin-bottom:6px}
.ck-status{position:absolute;left:12px;bottom:10px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);pointer-events:none}
.ck-status b{font-weight:500;color:var(--ink2)}
.ck-status .warn{color:var(--amber)}
.ck-zoom{position:absolute;right:12px;bottom:10px;display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--panel)}
.ck-zoom button{min-width:34px;height:30px;border:0;background:none;padding:0 6px}
.ck-zoom button:hover{background:var(--panel2)}
.ck-toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:#2B2721;border:1px solid var(--line2);border-left:3px solid var(--amber);padding:9px 14px;border-radius:6px;max-width:min(560px,90%);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:5}
.ck-toast.err{border-left-color:var(--rust)}

/* 元件 */
.nd .bd{fill:var(--panel);stroke:var(--line2);stroke-width:1}
.nd.on .bd{stroke:#5A5440}
.nd.sel .bd{stroke:var(--rust);stroke-width:2}
.nd .hd{fill:var(--panel2)}
.nd .ttl{fill:var(--ink);font-size:13px;font-weight:600}
.nd .sub{fill:var(--muted);font-size:11px}
.nd .pl{fill:var(--ink2);font-size:11px}
.nd .pv{font-size:11px;font-weight:600}
.nd .pt{stroke:var(--bg);stroke-width:2;cursor:crosshair}
.nd .pt:hover,.nd .pt.hot{stroke:var(--ink);stroke-width:2.5}
.nd .st{font-size:11.5px}
.nd .lamp{stroke:var(--bg);stroke-width:1.5}
.nd .ctl rect{fill:#2B2924;stroke:var(--line2);cursor:pointer}
.nd .ctl:hover rect{fill:#353129}
.nd .ctl text{fill:var(--ink);font-size:11.5px;font-weight:600;pointer-events:none}
.nd .ctl.act rect{fill:#3B3420;stroke:var(--amber)}
.nd .bar{fill:#2B2924}.nd .barf{fill:var(--live)}
.wr{fill:none;stroke-width:3;stroke-linecap:round}
.wr.e{stroke:var(--off)}.wr.e.v{stroke:var(--amber)}
.wr.w{stroke:#2C4A60}.wr.w.v{stroke:var(--water)}
.wr.i{stroke:var(--ind);stroke-dasharray:6 5;opacity:.6}
.wr.flow{stroke-dasharray:2 10;stroke-width:3;opacity:.9;animation:flow 0.9s linear infinite}
.wr.flow.e{stroke:#FFF1C6}.wr.flow.w{stroke:#CFE8FA}
.wr.sel{stroke:var(--rust)!important}
.whit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.wtag rect{fill:#2B2721;stroke:#5A5440}
.wtag text{fill:var(--amber);font-size:11px;font-weight:600}
.wtag.w rect{stroke:#2C4A60}.wtag.w text{fill:#9FCDF0}
.wtag.z text{fill:var(--muted)}
.ghost{fill:none;stroke:var(--ink2);stroke-width:2;stroke-dasharray:5 5}
.box{fill:rgba(205,65,43,.08);stroke:var(--rust);stroke-dasharray:4 3}
@keyframes flow{to{stroke-dashoffset:-12}}
@media (prefers-reduced-motion:reduce){.wr.flow{animation:none;display:none}}

/* 右侧 */
.ck-side{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:16px 16px 28px;min-height:0}
.ck-side h2{font-family:var(--head);font-weight:500;font-size:20px;margin:0 0 2px;line-height:1.2}
.ck-side .en{color:var(--muted);font-size:12px;margin:0 0 12px}
.ck-side h3{font-size:13px;font-weight:600;color:var(--ink2);margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.ck-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;margin:0}
.ck-kv dt{color:var(--muted)}.ck-kv dd{margin:0;text-align:right}
.ck-kv dd.g{color:var(--live)}.ck-kv dd.a{color:var(--amber)}.ck-kv dd.r{color:var(--rust-hi)}
.ck-f{display:block;margin:10px 0}
.ck-f span{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);margin-bottom:6px}
.ck-f input[type=number],.ck-f select{width:100%;height:34px;padding:0 10px;border-radius:6px;border:1px solid var(--line2);background:var(--sunk)}
.ck-f input[type=range]{width:100%;accent-color:var(--amber)}
.ck-chk{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px}
.ck-chk input{accent-color:var(--amber);width:16px;height:16px}
.ck-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ck-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:8px 0 0}
.ck-ports{list-style:none;padding:0;margin:0;font-size:13px}
.ck-ports li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line)}
.ck-ports li:last-child{border-bottom:0}
.ck-ports b{font-weight:500}
.ck-ing{list-style:none;padding:0;margin:0;font-size:13px}
.ck-ing li{display:flex;justify-content:space-between;padding:3px 0}
.ck-tips{font-size:13px;color:var(--ink2);line-height:1.7;padding-left:18px;margin:8px 0}
.ck-tips kbd{font-family:var(--font);background:var(--sunk);border:1px solid var(--line2);border-radius:4px;padding:0 5px;font-size:12px}

/* 弹窗 */
.ck-dlg{position:fixed;inset:0;background:rgba(10,10,8,.66);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.ck-dlg[hidden]{display:none}
.ck-dlg>div{background:var(--panel);border:1px solid var(--line2);border-radius:10px;width:min(560px,100%);max-height:86vh;overflow:auto;padding:20px 22px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ck-dlg h2{font-family:var(--head);font-weight:500;font-size:22px;margin:0 0 12px}
.ck-dlg .x{float:right;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:2px 6px}
.ck-ex{display:grid;gap:8px}
.ck-ex button{display:block;text-align:left;padding:12px 14px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2)}
.ck-ex button:hover{border-color:var(--amber)}
.ck-ex b{display:block;font-weight:600;margin-bottom:3px}
.ck-ex span{color:var(--muted);font-size:13px}
.ck-sv{list-style:none;padding:0;margin:0}
.ck-sv li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ck-sv li>button:first-child{flex:1;text-align:left;border:0;background:none;padding:0}
.ck-sv small{display:block;color:var(--muted);font-size:12px}
.ck-copy{display:flex;gap:8px;margin:10px 0}
.ck-copy input{flex:1;height:36px;padding:0 10px;border-radius:6px;border:1px solid var(--line2);background:var(--sunk)}
.ck-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ck-tbl td{padding:5px 0;border-bottom:1px solid var(--line)}
.ck-tbl td:last-child{text-align:right}
.ck-mob{display:none}

@media (max-width:1100px){.ck-main{grid-template-columns:220px 1fr 260px}.ck-name{width:130px}.ck-hide-m{display:none}}
@media (max-width:820px){
  .ck-main{grid-template-columns:1fr;position:relative}
  .ck-parts,.ck-side{position:absolute;top:0;bottom:0;z-index:6;width:min(300px,86vw);box-shadow:0 0 40px rgba(0,0,0,.6);transform:translateX(-105%);transition:transform .2s}
  .ck-side{right:0;left:auto;transform:translateX(105%)}
  .ck-main[data-open=parts] .ck-parts,.ck-main[data-open=side] .ck-side{transform:none}
  .ck-mob{display:inline-flex}
  .ck-top{overflow-x:auto}
  .ck-brand small,.ck-name,.ck-clock{display:none}
}
.ck-dlg h3{font-size:13px;font-weight:600;color:var(--ink2);margin:16px 0 6px}
.ck-dlg .ck-note{font-size:13px;color:var(--muted);line-height:1.6}

.ck-pi img{width:26px;height:26px;flex:none;object-fit:contain;-webkit-user-drag:none}
.ck-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.ck-head img{width:56px;height:56px;flex:none;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:4px}
.ck-head .en{margin:0}
.ck-desc{font-size:13px;color:var(--ink2);line-height:1.6;margin:0 0 12px}
.ck-ing span{display:flex;align-items:center;gap:8px}
.ck-ing img,.ck-tbl img{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-right:8px}
.ck-tbl td:first-child{display:flex;align-items:center}