:root{--live:#22c55e;--dead:#8796b3;--pw:#c026d3}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:#1f2430;color:#e5e7eb;-webkit-text-size-adjust:100%}
header{padding:8px 14px;font-size:14px;color:#cbd5e1}
header b{color:#fff}
#wrap{display:flex;flex-wrap:wrap;gap:10px;padding:0 10px 14px}
#sheet{flex:1 1 820px;min-width:300px;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 4px 18px #0006}
svg{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#side{flex:0 1 320px;min-width:280px;display:flex;flex-direction:column;gap:10px}
.card{background:#2b3242;border-radius:6px;padding:10px}
.card h3{margin:0 0 8px;font-size:13px;letter-spacing:.05em;color:#94a3b8;text-transform:uppercase}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
button{font:inherit;font-size:14px;padding:10px 6px;border-radius:6px;border:1px solid #475569;background:#3b4457;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent}
button.on{background:#15803d;border-color:#22c55e}
button.red{background:#991b1b;border-color:#ef4444}
button.red.on{background:#ef4444}
button.held{background:#ca8a04!important}
.stat{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px}
.pill{padding:1px 8px;border-radius:9px;background:#475569;font-size:12px;text-align:center}
.pill.on{background:#16a34a}.pill.bad{background:#dc2626}
#log{height:180px;overflow:auto;font:12px ui-monospace,Menlo,monospace;background:#151922;border-radius:4px;padding:6px;white-space:pre-wrap}
.hint{font-size:12px;color:#94a3b8;margin-top:6px}
/* svg */
.w{fill:none;stroke-width:.45;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.w.dead{stroke:var(--dead)} .w.live{stroke:var(--live);stroke-width:.65}
.halo{fill:none;stroke:#4ade80;stroke-width:2.4;stroke-opacity:0;stroke-linecap:round;stroke-linejoin:round;transition:stroke-opacity .2s}.halo.live{stroke-opacity:.35}
.w.neut{stroke:#3b5bdb}
.p.dead{stroke:#c9a3d1} .p.live{stroke:var(--live);stroke-width:.75}
.sym{fill:none;stroke:#111;stroke-width:.35}
.dash{stroke-dasharray:1.2 .8}
.txt{fill:#111;font-family:Helvetica,Arial,sans-serif}
.q{fill:#dc2626}
.coil{fill:#fff;stroke:#111;stroke-width:.4;transition:fill .15s}
.coil.on{fill:#bbf7d0;stroke:#15803d;stroke-width:.6;filter:url(#glow)}
.lamp{fill:#fff;stroke:#111;stroke-width:.35}
.lamp.on{fill:#fde68a;stroke:#b45309;filter:url(#glow)}
.hit{fill:transparent;cursor:pointer;touch-action:none}
.hot{fill:#2563eb22;stroke:#2563eb66;stroke-width:.25;stroke-dasharray:.8 .6}
.dot{fill:#1d4ed8}
textarea{width:100%;font:16px -apple-system,Helvetica,Arial,sans-serif;border-radius:6px;border:1px solid #475569;background:#151922;color:#fff;padding:8px;resize:vertical}
#cList{max-height:260px;overflow:auto;-webkit-overflow-scrolling:touch}
.cm{border-top:1px solid #3b4457;padding:6px 0;font-size:13px;white-space:pre-wrap;word-wrap:break-word}.cm small{display:block;color:#94a3b8;font-size:11px}
.hit,.hot{}svg.notemode{cursor:crosshair}svg.notemode .hit{pointer-events:none}
.nm{cursor:grab;touch-action:none}.nm rect{fill:#fde047;stroke:#a16207;stroke-width:.3}.nm text{font:2.4px Helvetica,Arial,sans-serif;fill:#422006}
#ned{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;z-index:9;padding:12px}
#ned .box{background:#2b3242;border-radius:8px;padding:12px;width:100%;max-width:420px}
#bNote.on{background:#ca8a04;border-color:#facc15}

.pen{background:none;border:none;color:#94a3b8;font-size:15px;padding:2px 6px;cursor:pointer}
header a{color:#93c5fd;text-decoration:none}

.nm.res rect{fill:#e5e7eb;stroke:#9ca3af}.nm.res text{fill:#6b7280;text-decoration:line-through}
.cm.res .ct{text-decoration:line-through;color:#94a3b8}.cm .rn{color:#86efac}.cm .rs{font-size:11px;padding:0;margin-top:2px;display:block}

button.force{border-color:#c2410c}button.force.on{background:#c2410c;border-color:#f97316}.pill.force{background:#f97316}
.ntrash{font-size:3.2px}
.nm.res text.ntrash{text-decoration:none;fill:#b91c1c}

/* tabs + Page 1 drawing mode */
#tabs{display:flex;gap:4px;padding:0 10px 8px}#tabs a{padding:7px 14px;border-radius:6px 6px 0 0;background:#2b3242;color:#cbd5e1;text-decoration:none;font-size:14px;border-bottom:2px solid transparent}
#tabs a.act{background:#3b4457;color:#fff;border-bottom-color:#22c55e;font-weight:bold}
#p1wrap{display:none;padding:0 10px 10px}body.showP1 #p1wrap{display:block}body.showP1 #wrap{display:none}
#p1frame{width:100%;height:calc(100vh - 90px);min-height:600px;border:0;border-radius:6px;background:#1f2430}
body.p1 header,body.p1 #tabs,body.p1 #statCard,body.p1 #logCard{display:none}body.p1 #wrap{padding-top:10px}
svg.static .w,svg.static .w.dead,svg.static .w.live{stroke:#111!important;stroke-width:.45!important}svg.static .w.p{stroke:#c026d3!important}svg.static .w.neut{stroke:#3b5bdb!important}
svg.static .halo,svg.static .hit,svg.static .hot{display:none}svg.static .coil{fill:#fff!important;stroke:#111!important;stroke-width:.4!important;filter:none!important}svg.static .lamp{fill:#fff!important;stroke:#111!important;filter:none!important}
.pdfo{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;color:#cbd5e1}.pdfo label{display:flex;flex-direction:column;gap:2px}.pdfo label.ck{grid-column:1/3;flex-direction:row;align-items:center;gap:6px}
.pdfo select{font:inherit;font-size:13px;padding:5px;border-radius:5px;background:#151922;color:#fff;border:1px solid #475569}