:root{--bg:#07080c;--ink:#d7dae0;--mute:#6b7280;--line:#1f2430;--acc:#ff7a1a;--mono:ui-monospace,"JetBrains Mono","DejaVu Sans Mono",Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13px/1.4 var(--mono);overflow:hidden}
canvas#c{position:fixed;inset:0;display:block;cursor:grab}
canvas#c.hover{cursor:pointer}
header#top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:8px 14px;background:linear-gradient(#0a0c12f0,#0a0c1200);pointer-events:none;z-index:5}
header#top>*{pointer-events:auto}
.brand{font-weight:700;letter-spacing:.14em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .sub{font-weight:400;color:var(--mute);letter-spacing:.06em;font-size:11px}
.hex{width:14px;height:14px;background:var(--acc);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);display:inline-block}
nav#views{display:flex;gap:2px;border:1px solid var(--line);border-radius:6px;padding:2px}
button{font:inherit;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 9px;cursor:pointer;letter-spacing:.08em;font-size:11px}
button:hover{border-color:var(--line);background:#11141c}
nav#views button.on{background:var(--acc);color:#000;font-weight:700}
.stats{color:var(--mute);font-size:11px;letter-spacing:.06em;white-space:nowrap;margin-left:auto}
.tools{display:flex;gap:6px;align-items:center}
.tog{border-color:var(--line)}.tog.on{color:var(--acc);border-color:var(--acc)}
input#q{font:inherit;background:#0e1118;border:1px solid var(--line);color:var(--ink);padding:5px 9px;border-radius:4px;width:190px;outline:none}
input#q:focus{border-color:var(--acc)}
#chips{position:fixed;top:44px;left:14px;z-index:5;display:flex;flex-direction:column;gap:6px}
#chips .crow{display:flex;flex-wrap:nowrap;gap:6px;max-width:calc(100vw - 28px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#chips .crow::-webkit-scrollbar{display:none}
@media (min-width:1101px){body.panels #chips{left:330px}body.panels #chips .crow{max-width:calc(100vw - 760px)}}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;background:#0a0c12cc;letter-spacing:.04em;user-select:none}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c,#888)}
.chip .n{color:var(--mute)}
.chip.on{border-color:var(--c,var(--acc));color:#fff;box-shadow:0 0 0 1px var(--c,var(--acc)) inset}
.chip.k .dot{border-radius:1px}
#results{position:fixed;top:44px;right:14px;width:360px;max-height:60vh;overflow:auto;background:#0b0e15f2;border:1px solid var(--line);border-radius:6px;z-index:7;padding:4px}
#results div{padding:6px 8px;border-radius:4px;cursor:pointer;display:flex;gap:8px;align-items:baseline}
#results div:hover,#results div.sel{background:#161a24}
#results .k{color:var(--mute);font-size:10px;width:60px;flex:none;letter-spacing:.08em}
#results .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
aside#card{position:fixed;right:14px;top:44px;bottom:28px;width:380px;background:#0b0e15f2;border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow:auto;z-index:6}
aside#card h2{font-size:14px;margin:4px 0 10px;line-height:1.35;font-weight:600}
aside#card h3{font-size:10px;letter-spacing:.14em;color:var(--mute);margin:14px 0 6px;font-weight:600}
aside#card .kind{font-size:10px;letter-spacing:.16em;color:var(--acc)}
aside#card #close{position:absolute;right:8px;top:6px;font-size:16px;padding:0 6px}
dl{display:grid;grid-template-columns:62px 1fr;gap:3px 8px;margin:0;font-size:12px}
dt{color:var(--mute)}dd{margin:0;word-break:break-all}
.mono{font-family:var(--mono)}
#cMeta{font-size:11px;color:var(--mute);margin:8px 0;white-space:pre-wrap;word-break:break-all}
.btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.btns button{border-color:var(--line)}.btns .primary{background:var(--acc);color:#000;font-weight:700;border-color:var(--acc)}
#cLinks{list-style:none;margin:0;padding:0;font-size:12px}
#cLinks li{padding:3px 0;cursor:pointer;display:flex;gap:8px;border-bottom:1px solid #12151d}
#cLinks li:hover{color:#fff}
#cLinks .r{color:var(--mute);font-size:10px;width:72px;flex:none;letter-spacing:.06em;padding-top:2px}
#cLinks .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
footer#hint{position:fixed;bottom:0;left:0;right:0;padding:14px 14px 6px;font-size:10px;letter-spacing:.14em;color:#5b6273;text-align:center;pointer-events:none;background:linear-gradient(to bottom,rgba(10,12,17,0),rgba(10,12,17,.92) 45%)}
@media (max-width:800px){footer#hint{font-size:8px;letter-spacing:.06em;line-height:1.5;padding:16px 10px 5px;background:linear-gradient(to bottom,rgba(10,12,17,0),rgba(10,12,17,.96) 35%)}}
@media (max-width:800px){header#top{flex-wrap:wrap;gap:8px}.stats{display:none}#chips .crow{max-width:95vw}aside#card,#results{left:8px;right:8px;width:auto}input#q{width:120px}}

/* ---- panels (lane 3): read from data/pulse.json, store nothing ---- */
.panel{position:fixed;top:44px;bottom:28px;width:300px;z-index:4;display:flex;flex-direction:column;gap:10px;overflow:auto;scrollbar-width:thin;padding:0 2px}
#left{left:14px}#right{right:14px;width:380px}
body:not(.panels) .panel{display:none}
.panel section{background:#0b0e15e8;border:1px solid var(--line);border-radius:8px;padding:10px 12px;flex:none}
.ph{font-size:11px;letter-spacing:.16em;color:#cfd3dc;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ph.small{font-size:9px;color:var(--mute);margin:12px 0 6px}
.ph .ico{color:var(--acc);font-size:13px}.ph .sub{font-weight:400;color:var(--mute);letter-spacing:.06em;font-size:10px;margin-left:auto}
.ph .count{background:var(--acc);color:#000;border-radius:3px;padding:0 6px;font-size:11px}
.clock{font-size:34px;font-weight:700;letter-spacing:.04em;line-height:1}
.date{color:var(--mute);font-size:11px;margin:4px 0 10px;letter-spacing:.08em}
.kv{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;border-top:1px solid #12151d}.kv span{color:var(--mute)}
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.tile{background:#0e1118;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.tile b{display:block;font-size:18px;line-height:1.1}.tile span{font-size:9px;color:var(--mute);letter-spacing:.08em}
.bars div{display:grid;grid-template-columns:1fr 36px;align-items:center;font-size:10px;gap:6px;padding:2px 0}
.bars i{display:block;height:5px;border-radius:2px;background:var(--c,#555)}
.bars em{font-style:normal;color:var(--mute);text-align:right}
.bars .lab{color:#aab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
pre.ship{font:10px/1.45 var(--mono);color:#aab;white-space:pre-wrap;word-break:break-word;margin:0;max-height:260px;overflow:auto}
#nkList{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;font-size:11px}
#nkList li{padding:5px 0;border-top:1px solid #12151d;cursor:pointer;display:flex;gap:8px;align-items:baseline}
#nkList li:hover{color:#fff}#nkList .n{color:var(--acc);flex:none}#nkList .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nkList .lab{flex:none;font-size:9px;color:var(--mute);letter-spacing:.06em}
table#rtTable{width:100%;border-collapse:collapse;font-size:11px}
#rtTable th{text-align:left;color:var(--mute);font-weight:400;font-size:9px;letter-spacing:.12em;padding:2px 4px;border-bottom:1px solid var(--line)}
#rtTable td{padding:4px 4px;border-bottom:1px solid #12151d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#rtTable td.host span{border:1px solid var(--line);border-radius:3px;padding:0 4px;font-size:9px;color:var(--mute);letter-spacing:.08em}
.st{font-weight:700;letter-spacing:.08em;font-size:10px}.st.fired{color:#4ade80}.st.due{color:#fbbf24}.st.missed{color:#f87171}.st.nolog,.st.quiet{color:#4b5263}
tr.now td{background:#161a24}
.deck{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sk{background:#0e1118;border:1px solid var(--line);border-radius:6px;padding:8px;font-size:10px}
.sk b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk span{color:var(--mute);display:block;margin:2px 0 6px}
.sk button{border-color:var(--line);padding:2px 7px;font-size:10px}
@media (max-width:1100px){.panel{display:none !important}}
.sess{border:1px solid #2a2f3d;border-left:3px solid var(--acc);border-radius:4px;padding:6px 8px;margin:8px 0;font-size:11px}
.sess b{display:block;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sess span{color:var(--mute)}