:root{--bg:#0d1117;--card:#161b22;--line:#30363d;--fg:#e6edf3;--mut:#8b949e;--acc:#f2b84b;--acc2:#58a6ff;--ok:#3fb950;--bad:#ff5d5d}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:#0b0f14;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}.logo{font-size:24px;background:var(--acc);color:#000;border-radius:10px;width:38px;height:38px;display:grid;place-items:center}
h1{font-size:17px;margin:0}small{color:var(--mut)}
nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}nav::-webkit-scrollbar{display:none}
nav button,.btn{background:transparent;color:var(--mut);border:1px solid transparent;border-radius:999px;padding:6px 14px;font:inherit;cursor:pointer;white-space:nowrap}
nav button.on{background:var(--card);color:var(--fg);border-color:var(--line)}
main{display:grid;grid-template-columns:1fr 380px;height:calc(100vh - 60px)}
#stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#1a2230,#0b0f14 70%);touch-action:none}
#board{width:100%;height:100%;display:block;cursor:grab}
aside{border-left:1px solid var(--line);overflow:auto;padding:16px 18px;background:var(--card)}
aside h2{font-size:18px;margin:4px 0 8px}aside h3{font-size:14px;margin:16px 0 6px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
aside p{margin:6px 0 10px;color:#c9d1d9}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pill{border:1px solid var(--line);background:#0d1117;color:var(--fg);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.pill.on{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600}
.chips{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 20px)}
.chips label{background:#0d1117cc;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;backdrop-filter:blur(4px);user-select:none}
.chips input{vertical-align:-2px;margin-right:4px}
.zoombar{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.zoombar button,.schbar button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#0d1117cc;color:var(--fg);font-size:18px;cursor:pointer}
#tip{position:absolute;pointer-events:none;background:#000d;border:1px solid var(--line);padding:4px 8px;border-radius:6px;font-size:12px}
.card{background:#0d1117;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0}
.card b{color:var(--acc)}.mut{color:var(--mut);font-size:13px}
.legend{display:grid;grid-template-columns:18px 1fr;gap:6px 8px;align-items:center;font-size:13px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.ledrow{display:flex;gap:10px;margin:8px 0}.ledbox{flex:1;text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 4px;font-size:12px}
.ledbox i{display:block;width:16px;height:16px;border-radius:50%;margin:0 auto 4px;background:#333}
table{border-collapse:collapse;width:100%;font-size:13px}td,th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
.bad{color:var(--bad)}.ok{color:var(--ok)}
#sch{position:absolute;inset:0;background:#f5f4ef;display:flex;flex-direction:column}
#sch[hidden]{display:none}
.schbar{display:flex;gap:6px;padding:8px;background:#0d1117}.schbar select{flex:1;background:#161b22;color:var(--fg);border:1px solid var(--line);border-radius:8px}
#schwrap{flex:1;overflow:auto}#schimg{display:block;width:100%;max-width:none}
/* board styling */
.outline{fill:none;stroke:#e8d27a;stroke-width:.25}
.sub{fill:#0e3b2a}
.cu-F{color:#c8873a}.cu-B{color:#3f7fd9}.cu-In1{color:#b36bd6}.cu-In2{color:#3fb9a8}
.cu path,.cu line{vector-effect:none}
.silkF{color:#f1f1f1}.silkB{color:#a8b3ff}
.dim{opacity:.22;transition:opacity .3s}
.hl line{stroke:#ffe27a!important}.hl path{fill:#ffe27a!important}
.part{fill:transparent;stroke:transparent;cursor:pointer}
.part:hover{stroke:#fff8;stroke-width:.15}
.part.sel{stroke:#ffd23f;stroke-width:.3;fill:#ffd23f22}
.part.focus{stroke:#ffd23faa;stroke-width:.18;stroke-dasharray:.5 .3}
.lbl{font:600 1.6px system-ui;fill:#fff;paint-order:stroke;stroke:#000;stroke-width:.35;pointer-events:none}
.lbl.big{font-size:2.4px}
@media (max-width:820px){
 main{grid-template-columns:1fr;grid-template-rows:56vh auto;height:auto}
 #stage{height:56vh}aside{border-left:0;border-top:1px solid var(--line)}
 header{padding:8px 10px;gap:8px}h1{font-size:15px}nav{flex-basis:100%}
}
@media (max-width:820px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;left:6px;right:6px;bottom:6px}.chips label{font-size:11px;white-space:nowrap}}
body.live #layers{display:none}