.demo{gap:var(--space-6);display:grid}.demo-bar{gap:var(--space-6);grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;display:grid}.demo-volume{gap:var(--space-3);display:grid}.demo-volume input[type=range]{width:100%;accent-color:var(--volt);height:28px}.demo-scenarios{gap:var(--space-2);border:0;margin:0;padding:0;display:grid}.demo-scenarios legend{margin-bottom:var(--space-2)}.toggle{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-raised);cursor:pointer;align-items:flex-start;gap:12px;padding:10px 12px;display:flex}.toggle.on{border-color:var(--volt);background:var(--volt-soft)}.toggle input{width:18px;height:18px;accent-color:var(--volt);flex:none;margin-top:2px}.toggle b{font-size:15px;line-height:20px;display:block}.toggle small{color:var(--ink-muted);font-size:13px;line-height:19px;display:block}.demo-main{gap:var(--space-6);grid-template-columns:minmax(0,1fr) 340px;align-items:start;display:grid}.demo-canvas{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-4);position:relative;overflow:hidden}.demo-canvas svg{width:100%;height:auto;display:block}.demo-loading{font:400 17px/22px var(--font-note);color:var(--ink-muted);min-height:22px;transition:color .3s var(--ease)}.demo-loading.done{font:600 12px/22px var(--font-text);letter-spacing:.04em}.edge{stroke:var(--line-strong);stroke-width:1.5px;fill:none}.edge.agent{stroke:var(--volt);stroke-dasharray:5 4}.gnode .box{fill:var(--surface-raised);stroke:var(--line);stroke-width:1px;transition:stroke .2s var(--ease)}.gnode.agent .box{stroke:var(--volt);stroke-width:1.5px}.gnode.warn .box{stroke:var(--load-warn)}.gnode.critical .box{stroke:var(--load-critical);stroke-width:2px}.gnode .gt{font:600 10px/1 var(--font-text);letter-spacing:.08em;fill:var(--ink-muted)}.gnode.agent .gt{fill:var(--volt)}.gnode .gn{font:600 14px/1 var(--font-display);fill:var(--ink)}.gnode .gd{font:400 12px/1 var(--font-text);fill:var(--ink-muted)}.gnode .gv{font:500 13px/1 var(--font-mono)}.gv.ok,.shape.ok{fill:var(--load-ok)}.gv.warn,.shape.warn{fill:var(--load-warn)}.gv.critical,.shape.critical{fill:var(--load-critical)}.bar-bg{fill:var(--line)}.bar{transition:width .4s var(--ease)}.bar.ok{fill:var(--load-ok)}.bar.warn{fill:var(--load-warn)}.bar.critical{fill:var(--load-critical)}.pulse{fill:none;stroke:var(--load-critical);stroke-width:2px;animation:pulse 1.6s var(--ease) infinite;transform-box:fill-box;transform-origin:50%}@keyframes pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}.crit-label{font:700 11px/1 var(--font-text);letter-spacing:.08em;fill:var(--load-critical)}.ghost{cursor:pointer}.ghost rect{fill:none;stroke:var(--line-strong);stroke-dasharray:5 5}.ghost text{font:600 13px/1 var(--font-text);fill:var(--ink-muted)}.ghost:hover rect{stroke:var(--volt)}.ghost:hover text{fill:var(--volt)}.demo-list{gap:8px;margin:0;padding:0;list-style:none;display:none}.demo-list li{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-m);justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.demo-list b{font-size:14px}.demo-kpis{gap:var(--space-4);display:grid}.kpi-critical{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface-raised);padding:var(--space-4);justify-items:start;gap:8px;display:grid}.kpi-critical.critical{border-color:var(--load-critical)}.kpi-table{border:1px solid var(--line);border-radius:var(--radius-l);border-collapse:separate;border-spacing:0;min-width:0;font-size:13px;overflow:hidden}.kpi-table th,.kpi-table td{padding:9px 10px}.kpi-table thead th{font:600 11px/14px var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);position:static}.kpi-table tbody th{color:var(--ink-muted);font-weight:500}.kpi-table td:last-child{color:var(--volt);font-weight:600}.kpi-table tr:last-child>*{border-bottom:0}.demo.compact .demo-bar{grid-template-columns:1fr}@media (max-width:1080px){.demo-main,.demo-bar{grid-template-columns:1fr}}@media (max-width:760px){.demo-canvas svg{display:none}.demo-list{margin-top:var(--space-3);display:grid}}@media (prefers-reduced-motion:reduce){.pulse{opacity:.8;animation:none}}.demo-companies{gap:var(--space-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.company-tab{text-align:left;border-radius:var(--radius-m);border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .16s var(--ease), background-color .16s var(--ease);gap:2px;padding:12px 14px;display:grid}.company-tab b{font:600 15px/20px var(--font-display)}.company-tab small{color:var(--ink-muted);font-size:12px;line-height:16px}.company-tab:hover{border-color:var(--line-strong)}.company-tab[aria-selected=true]{border-color:var(--volt);background:var(--volt-soft)}.company-tab[aria-selected=true] b{color:var(--volt)}.demo-story{color:var(--ink-muted);flex-wrap:wrap;align-items:center;gap:10px;display:flex}@media (max-width:900px){.demo-companies{grid-template-columns:repeat(2,minmax(0,1fr))}}.demo-graph .gnode{animation:node-in .42s var(--ease) both;animation-delay:calc(var(--i) * 35ms);transform-box:fill-box;transform-origin:50%}.demo-graph .edge{animation:edge-in .6s var(--ease) both .25s}@keyframes node-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}@keyframes edge-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.demo-graph .gnode,.demo-graph .edge{animation:none}}