/* Extracted from viz-ripple.html for CSP compliance (S239) */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--color-surface2);flex-shrink:0;gap:10px}
.hdr-title{font-family:'Arial Black',Arial;font-size:15px;color:var(--color-accent-c);letter-spacing:1px;white-space:nowrap}
.hdr-count{font-size:10px;color:var(--color-text-dim);white-space:nowrap;flex:1;text-align:center}
.zbtns{display:flex;gap:4px}
.zbtn{background:var(--color-surface2);border:1px solid var(--color-surface2);color:var(--color-accent-c);width:28px;height:28px;border-radius:5px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:border-color .2s;user-select:none}
.zbtn:hover{border-color:var(--color-accent-c)}
#wrap{flex:1;position:relative;overflow:hidden;cursor:grab;background:#080D14}
#wrap.dragging{cursor:grabbing}
#svg{display:block;touch-action:none;background:#080D14}
.rtrack{fill:none;stroke-dasharray:none;pointer-events:none;opacity:.18}
.cpulse{fill:none;stroke:var(--color-accent-c);pointer-events:none;animation:cp 3s ease-in-out infinite}
@keyframes cp{0%,100%{r:28;opacity:.25}50%{r:40;opacity:.08}}
.pnode{cursor:pointer}
.pnode:hover .pcirc{filter:brightness(1.4)}
.pcirc{transition:filter .2s}
.plbl{font-size:9px;fill:var(--color-text-dim);pointer-events:none;font-family:Arial,sans-serif}
.plbl-self{font-size:10px;fill:var(--color-accent-c);text-anchor:middle;pointer-events:none;font-family:'Arial Black',Arial;font-weight:700}
#fbar{padding:8px 12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--color-surface2);flex-shrink:0;background:var(--color-bg)}
.chip{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:16px;border:1px solid var(--color-surface2);background:var(--color-surface2);color:var(--color-text-dim);font-size:10px;cursor:pointer;transition:all .2s;user-select:none;font-family:Arial,sans-serif}
.chip.on{border-color:var(--cc);color:var(--cc);background:rgba(0,170,255,.05)}
.chip:hover:not([disabled]){border-color:var(--color-text-dim);color:var(--color-text-dim)}
.chip[disabled]{opacity:.3;pointer-events:none}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--cc);opacity:0;transition:opacity .2s}
.chip.on .dot{opacity:1}
.chip .nb{background:var(--color-border);border-radius:6px;padding:0 4px;font-size:9px}
#ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;background:var(--color-bg)}
.sp{width:28px;height:28px;border:2px solid var(--color-accent-c);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#tip{position:fixed;background:var(--color-surface2);border:1px solid rgba(0,170,255,.2);border-radius:8px;padding:10px 13px;font-size:11px;color:var(--color-text-dim);pointer-events:auto;opacity:0;transition:opacity .12s;z-index:100;min-width:150px;max-width:260px}
#tip .tip-name{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:12px;margin-bottom:2px}
#tip .tip-detail{font-size:11px;color:var(--color-text-dim);line-height:1.5}
#tip .tip-link{display:block;margin-top:6px;font-size:11px;color:var(--color-accent-c);text-decoration:none;font-weight:700}
#tip .tip-hint{margin-top:5px;font-size:10px;color:var(--color-text-dim);border-top:1px solid var(--color-surface2);padding-top:5px}/* ── Group filter bar (S309) ─────────────────────── */
#gbar{padding:5px 12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--color-surface2);flex-shrink:0;background:var(--color-bg)}
.chip--group{font-size:10px}
.chip--group.on{border-color:var(--color-accent-c);color:var(--color-accent-c);background:rgba(0,170,255,.08)}