:root{--bg:#f2efe7;--paper:#fbf8f1;--ink:#1d1d1b;--mute:#8a8577;--line:#d9d3c4;--red:#d6452f;--green:#3fae66;--sun:#f3c33b;--dark:#1f2a27;--term:#9be3b4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
aside h1{font-size:14px;margin:0 0 4px}
aside p{color:var(--mute);margin:0 0 10px;font-size:12px}
.grp{font-size:10px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin:16px 0 6px}
.fig{display:block;padding:7px 9px;border-radius:6px;margin-bottom:4px;color:inherit;text-decoration:none}
.fig b{display:block;font-weight:600}
.fig small{color:var(--mute)}
.fig.on{background:var(--ink);color:var(--paper)}
.fig.on small{color:#c9c3b3}
.fig.soon{opacity:.5}
main{padding:20px 32px 60px;max-width:1200px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.head h2{font-size:15px;margin:0}
.kicker{color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.stats{display:grid;grid-template-columns:repeat(4,auto);gap:4px 22px;text-align:right}
.stat span{display:block;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.stat b{font-size:19px}
.stat b.bad{color:var(--red)}
.stage{position:relative;margin-top:4px}
.actions{position:absolute;left:0;top:6px;display:flex;flex-direction:column;gap:7px;z-index:2;width:215px}
.btn{font:inherit;font-size:12px;font-weight:600;background:var(--paper);border:1.6px solid var(--ink);border-radius:14px;padding:4px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);text-align:left;color:var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn.on{background:var(--ink);color:var(--paper)}
.btn.warn{border-color:var(--red);color:var(--red);box-shadow:2px 2px 0 var(--red)}
.row{display:flex;gap:6px;flex-wrap:wrap}
.dd{position:relative}
.menu{display:none;position:absolute;left:0;top:calc(100% + 4px);background:var(--paper);border:1.6px solid var(--ink);border-radius:10px;padding:4px;z-index:5;min-width:240px;box-shadow:3px 3px 0 var(--ink)}
.menu.open{display:block}
.menu button{display:block;width:100%;font:inherit;font-size:12px;text-align:left;background:none;border:0;padding:6px 8px;border-radius:6px;cursor:pointer;color:var(--ink)}
.menu button:hover{background:var(--bg)}
.hint{background:var(--paper);border:1.6px solid var(--ink);border-radius:10px;padding:7px 10px;font-size:11px;text-transform:uppercase;font-weight:600;box-shadow:2px 2px 0 var(--ink)}
.hint.bad{border-color:var(--red);color:var(--red);box-shadow:2px 2px 0 var(--red)}
svg#fig{width:100%;height:auto;display:block}
.ink{stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.wire{fill:none;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.wire.off{opacity:.18;stroke-dasharray:4 5}
.flow{fill:none;stroke:#fff;stroke-width:1.4;stroke-dasharray:2 10;opacity:0;stroke-linecap:round}
.flow.live{opacity:.95;animation:flow .9s linear infinite}
.flow.live.rev{animation-direction:reverse}
@keyframes flow{to{stroke-dashoffset:-24}}
.spin{animation:spin .35s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lbl{cursor:pointer}
.lbl rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.lbl text{font:700 10px ui-monospace,Menlo,monospace;letter-spacing:.04em}
.lbl.sel rect{fill:#bcd3f5}
.lbl.hot rect{fill:#f7dfa0}
.part{cursor:pointer}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.ctl span{display:block;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.ctl input[type=range]{width:100%;accent-color:var(--ink)}
select{font:inherit;font-size:12px;background:var(--paper);border:1.4px solid var(--ink);border-radius:8px;padding:2px 6px}
.sw{width:20px;height:20px;border-radius:50%;border:1.6px solid var(--ink);display:inline-block;cursor:pointer;margin-right:4px}
.sw.on{outline:2px solid var(--ink);outline-offset:2px}
.cols{display:grid;grid-template-columns:300px 1fr;gap:32px;margin-top:28px}
h3{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin:22px 0 8px}
h3:first-child{margin-top:0}
.card{background:var(--paper);border:1.6px solid var(--ink);border-radius:12px;padding:10px 12px;box-shadow:2px 2px 0 var(--ink)}
.card .k{color:var(--mute);font-size:11px;text-transform:uppercase}
.card table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.card td{padding:2px 0;vertical-align:top}
.card td:first-child{color:var(--mute);width:42%}
.chip{font:inherit;font-size:11px;font-weight:700;background:var(--paper);border:1.6px solid var(--ink);border-radius:9px;padding:2px 8px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);margin:0 6px 8px 0}
.chip.sel{background:#bcd3f5}
.log{background:var(--dark);color:var(--term);border-radius:12px;padding:12px 14px;height:190px;overflow:auto;font-size:12px;white-space:pre-wrap}
.log .w{color:#f6c56b}
.log .e{color:#ff8a7a}
.q{margin-bottom:14px}
.q p{margin:0 0 6px}
.q .ans{font-size:12px;margin-top:2px;min-height:18px}
.chip.right{background:#c6ecd2}
.chip.wrong{background:#f7c9c1}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding:3px 0}
ul.check li::before{content:"[ ] ";color:var(--mute)}
ul.check li.done::before{content:"[x] ";color:var(--green);font-weight:700}
ul.check li.done{color:var(--mute)}
ol.steps{padding-left:18px;margin:6px 0}
.note{color:#4b4840}
.viewopt{display:block;font-size:12px;padding:3px 9px;cursor:pointer}
.viewopt input{accent-color:var(--ink);margin-right:6px}
body.hide-labels .lbl{display:none!important}
body.hide-off .off{display:none!important}