.ehd-root{background:var(--surface);border:1px solid var(--border);margin:32px 0;font-family:var(--font-mono)}.ehd-root.ehd-stale{border-color:var(--red);box-shadow:0 0 24px var(--glow-red)}.ehd-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.ehd-title{font-size:12px;letter-spacing:.15em;color:var(--text-dim)}.ehd-controls{display:flex;gap:8px;flex-wrap:wrap}.ehd-controls button{border:1px solid var(--border);background:transparent;color:var(--text);padding:6px 12px;font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .2s}.ehd-controls button:hover{border-color:var(--orange);color:var(--orange)}.ehd-section{padding:24px 20px;border-bottom:1px solid var(--border)}.ehd-section:last-of-type{border-bottom:none}.ehd-section-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}.ehd-timeline{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}.ehd-node{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--bg);min-width:120px;max-width:160px;flex:1;transition:border-color .2s,box-shadow .2s}.ehd-node-btn{border:none;background:transparent;color:var(--text);padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);text-align:left}.ehd-node-label{font-size:12px;color:var(--text);word-break:break-all}.ehd-node-kind{font-size:9px;color:var(--text-dim);letter-spacing:.05em}.ehd-node.ehd-observer .ehd-node-kind{color:var(--purple)}.ehd-node.ehd-interceptor .ehd-node-kind{color:var(--orange)}.ehd-node.ehd-transformer .ehd-node-kind{color:var(--green)}.ehd-node.ehd-observer{border-top:2px solid var(--purple)}.ehd-node.ehd-interceptor{border-top:2px solid var(--orange)}.ehd-node.ehd-transformer{border-top:2px solid var(--green)}.ehd-node.active{box-shadow:0 0 16px var(--shadow)}.ehd-node.ehd-observer.active{border-color:var(--purple);box-shadow:0 0 16px #a855f759}.ehd-node.ehd-interceptor.active{border-color:var(--orange);box-shadow:0 0 16px var(--glow-orange)}.ehd-node.ehd-transformer.active{border-color:var(--green);box-shadow:0 0 16px #00ff664d}.ehd-node.selected{border-color:var(--text)}.ehd-signature{border-top:1px solid var(--border);padding:8px 10px;font-size:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px}.ehd-sig-prefix{color:var(--text-dim);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.ehd-signature code{color:var(--green);word-break:break-all}.ehd-legend{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}.ehd-leg{font-size:10px;padding:4px 10px;border:1px solid var(--border);letter-spacing:.05em}.ehd-leg.ehd-observer{color:var(--purple);border-color:var(--purple)}.ehd-leg.ehd-interceptor{color:var(--orange);border-color:var(--orange)}.ehd-leg.ehd-transformer{color:var(--green);border-color:var(--green)}.ehd-error-demo{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}.ehd-ext{border:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1;max-width:220px;transition:border-color .2s,box-shadow .2s}.ehd-ext-name{font-size:12px;color:var(--text)}.ehd-ext-status{font-size:10px;color:var(--text-dim);letter-spacing:.05em;text-transform:uppercase}.ehd-ext.ehd-ext-pending{border-color:var(--border);opacity:.5}.ehd-ext.ehd-ext-running{border-color:var(--orange);box-shadow:0 0 12px var(--glow-orange);animation:ehd-pulse 1s ease-in-out infinite}.ehd-ext.ehd-ext-running .ehd-ext-status{color:var(--orange)}.ehd-ext.ehd-ext-error{border-color:var(--red);box-shadow:0 0 12px var(--glow-red)}.ehd-ext.ehd-ext-error .ehd-ext-status{color:var(--red)}.ehd-ext.ehd-ext-ok{border-color:var(--green);box-shadow:0 0 12px var(--glow-green)}.ehd-ext.ehd-ext-ok .ehd-ext-status{color:var(--green)}@keyframes ehd-pulse{0%,to{opacity:1}50%{opacity:.6}}.ehd-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;padding:12px;border:1px dashed var(--border);background:var(--bg)}.ehd-flow-error{color:var(--red)}.ehd-flow-step{color:var(--text-dim)}.ehd-flow-ok{color:var(--green)}.ehd-flow .ehd-arrow{color:var(--text-dim);font-size:14px}.ehd-footer{border-top:1px solid var(--border);padding:12px 20px;text-align:center;font-size:11px;color:var(--text-dim);min-height:20px}.ehd-stale-msg{color:var(--red);font-weight:700}
