:root { --bg:#070b16; --panel:#0d1425; --raised:#151f36; --line:rgba(148,163,184,.17); --text:#edf3ff; --muted:#92a0b8; --green:#22d3ee; --cyan:#22d3ee; --success:#34d399; --pink:#f472b6; --amber:#fbbf24; --red:#fb7185; --violet:#a78bfa; --gradient:linear-gradient(135deg,#8b5cf6 0%,#6366f1 45%,#22d3ee 100%); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 8% 0,rgba(139,92,246,.18),transparent 31rem),radial-gradient(circle at 94% 18%,rgba(34,211,238,.1),transparent 28rem),var(--bg); color-scheme:dark; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { color:var(--text); border:1px solid var(--line); border-radius:8px; background:var(--raised); cursor:pointer; }
button:hover { border-color:rgba(34,211,238,.55); }
.primary { color:#fff; border-color:transparent; background:var(--gradient); box-shadow:0 8px 22px rgba(99,102,241,.2); font-weight:850; }
.danger { color:#fda4af; }
.topbar { min-height:68px; padding:8px max(22px,calc((100vw - 1600px)/2)); position:sticky; top:0; z-index:20; display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr); align-items:center; gap:18px; border-bottom:1px solid var(--line); background:rgba(7,11,22,.82); backdrop-filter:blur(20px) saturate(145%); }
.brand { width:max-content; display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }.brand .product-brand-mark { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--gradient);font-size:9px;font-weight:900;box-shadow:0 9px 24px rgba(99,102,241,.25); }.brand strong { display:flex;align-items:baseline;gap:5px;font-size:14px;letter-spacing:-.03em; }.brand strong em { color:var(--cyan);font:800 9px/1 Inter,sans-serif;font-style:normal;text-transform:uppercase; }
.topbar .global-tool-nav { justify-self:center; }.topbar .global-auth-actions { justify-self:end; }.webhook-page .global-tool-nav { --header-ink:#151f36;--header-muted:#92a0b8;--header-surface:#151f36;--header-active-ink:#fff;--header-accent:#22d3ee; }.webhook-page .global-auth-actions { --header-ink:#edf3ff;--header-muted:#92a0b8;--header-surface:#151f36;--header-line:rgba(148,163,184,.2);--header-accent:#22d3ee; }
.eyebrow { margin:0 0 5px;color:var(--green);font-size:8px;font-weight:900;letter-spacing:.17em; }
.csrf-token { display:none; }
.app-shell { width:min(1600px,calc(100% - 36px)); height:calc(100vh - 68px); margin:0 auto; padding-bottom:14px; display:flex; flex-direction:column; overflow:hidden; }
.product-strip { padding:12px 2px 10px; flex:none; display:flex;align-items:center;justify-content:space-between;gap:24px; }.product-strip h1 { margin:0;font-size:clamp(21px,2vw,30px);line-height:1;letter-spacing:-.045em; }.live-state { padding:8px 11px;display:grid;grid-template-columns:auto auto;gap:1px 7px;align-items:center;border:1px solid rgba(52,211,153,.2);border-radius:9px;background:rgba(52,211,153,.05); }.live-state>span { width:7px;height:7px;grid-row:1/3;border-radius:50%;background:var(--success);box-shadow:0 0 12px var(--success); }.live-state strong { font-size:10px; }.live-state small { color:var(--muted);font-size:8px; }
.app-flow-guide { flex:none;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;background:rgba(16,24,43,.86);overflow:hidden; }.app-flow-guide>summary { min-height:38px;padding:7px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none; }.app-flow-guide>summary::-webkit-details-marker { display:none; }.app-flow-guide>summary>span { min-width:0;display:flex;align-items:baseline;gap:9px; }.app-flow-guide>summary strong { font-size:10px; }.app-flow-guide>summary small { overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap; }.app-flow-guide>summary>b { flex:none;color:var(--cyan);font-size:8px; }.app-flow-guide[open]>summary { border-bottom:1px solid var(--line); }.app-flow-track { padding:8px 10px;display:grid;grid-template-columns:minmax(150px,.9fr) minmax(60px,.35fr) minmax(190px,1.1fr) minmax(60px,.35fr) minmax(260px,1.4fr);align-items:center;gap:8px; }.app-flow-node { min-width:0;min-height:46px;padding:7px 9px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025); }.app-flow-node>span { width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;color:var(--cyan);border-radius:8px;background:rgba(34,211,238,.07);font-size:12px; }.app-flow-node div { min-width:0;display:grid;gap:2px; }.app-flow-node strong,.app-flow-destinations>strong { font-size:10px; }.app-flow-node small { overflow:hidden;color:var(--muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap; }.app-flow-link { height:38px;position:relative;display:grid;align-items:end;justify-items:center; }.app-flow-link::before { content:"";height:1px;position:absolute;top:13px;right:0;left:0;background:repeating-linear-gradient(90deg,rgba(34,211,238,.5) 0 5px,transparent 5px 10px); }.app-flow-link i { width:9px;height:9px;position:absolute;top:9px;left:0;z-index:1;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.1),0 0 14px rgba(34,211,238,.65);opacity:0; }.app-capture-link i { animation:webhook-packet-capture 7.2s ease-in-out infinite; }.app-replay-link i { animation:webhook-packet-replay 7.2s ease-in-out infinite; }.app-flow-link small { color:var(--muted);font:700 6.5px ui-monospace,monospace; }.app-flow-capture { animation:webhook-inbox 7.2s ease-in-out infinite; }.app-flow-destinations { min-width:0;min-height:46px;padding:7px 9px;display:grid;gap:5px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);animation:webhook-target 7.2s ease-in-out infinite; }.app-flow-destinations>div { display:flex;align-items:center;gap:7px; }.app-flow-destinations span { min-width:0;padding:5px 7px;flex:1;overflow:hidden;border:1px solid rgba(34,211,238,.16);border-radius:6px;color:var(--text);font:9px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap; }.app-flow-destinations span b { color:var(--cyan);font-size:9px; }.app-flow-destinations em { color:var(--muted);font-size:8px; }
.capture-bar { min-height:56px;padding:8px 10px;flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-bottom:0;background:rgba(16,24,43,.86); }.app-flow-guide:not([open])+.capture-bar { border-radius:0; }.capture-bar>label { color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase; }.capture-bar select { max-width:180px;height:36px;padding:0 28px 0 10px;color:var(--text);border:1px solid var(--line);border-radius:8px;background:var(--raised);font-size:10px;font-weight:750; }.capture-url { min-width:0;height:36px;padding:5px 10px;flex:1;display:grid;align-content:center;gap:1px;border:1px solid var(--line);border-radius:8px;background:#080d19; }.capture-url span { color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.1em; }.capture-url code { overflow:hidden;color:var(--cyan);font:10px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap; }.capture-bar button { min-height:36px;padding:0 12px;font-size:9px;font-weight:800; }
.workbench { min-height:0;flex:1;display:grid;grid-template-columns:minmax(240px,.72fr) minmax(430px,1.7fr) minmax(270px,.82fr);border:1px solid var(--line);border-radius:0 0 14px 14px;overflow:hidden;box-shadow:0 22px 65px rgba(0,0,0,.2); }.panel { min-width:0;min-height:0;display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(17,26,46,.95),rgba(10,16,30,.97)); }.panel+.panel { border-left:1px solid var(--line); }.panel-heading { min-height:61px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line); }.panel-heading h2 { margin:0;font-size:14px;letter-spacing:-.025em; }.panel-heading>span { min-width:25px;height:25px;padding:0 7px;display:grid;place-items:center;color:var(--cyan);border:1px solid rgba(34,211,238,.18);border-radius:7px;background:rgba(34,211,238,.06);font:800 9px ui-monospace,monospace; }
.event-filter { padding:9px;border-bottom:1px solid var(--line); }.event-filter input { width:100%;height:34px;padding:0 10px;color:var(--text);border:1px solid var(--line);border-radius:8px;background:#080d19;outline:0;font-size:10px; }.event-filter input:focus,.replay-form input:focus,.replay-form select:focus { border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.07); }.event-list { min-height:0;flex:1;overflow:auto;padding:7px; }.event-item { width:100%;padding:10px;margin-bottom:5px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 8px;text-align:left;background:transparent; }.event-item:hover,.event-item.active { border-color:rgba(34,211,238,.26);background:rgba(34,211,238,.06); }.event-item .method { min-width:38px;padding:3px 5px;align-self:start;color:var(--cyan);border-radius:5px;background:rgba(34,211,238,.08);font:850 8px ui-monospace,monospace;text-align:center; }.event-item strong { overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap; }.event-item small { grid-column:2;color:var(--muted);font-size:8px; }.event-empty { padding:42px 20px;color:var(--muted);font-size:10px;line-height:1.6;text-align:center; }
.inspector-panel { position:relative; }.empty-state { max-width:370px;margin:auto;padding:30px;text-align:center; }.pulse-mark { width:54px;height:54px;margin:0 auto 18px;display:grid;place-items:center;color:var(--cyan);border:1px solid rgba(34,211,238,.2);border-radius:17px;background:rgba(34,211,238,.06);font-size:24px;box-shadow:0 0 40px rgba(34,211,238,.08); }.empty-state h2 { margin:0;font-size:22px;letter-spacing:-.04em; }.empty-state p { margin:10px 0 18px;color:var(--muted);font-size:11px;line-height:1.6; }.empty-state button { min-height:34px;padding:0 13px;font-size:9px;font-weight:800; }
.inspector-content { min-height:0;flex:1;display:flex;flex-direction:column; }.request-heading { min-height:61px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line); }.request-heading>div { min-width:0;display:flex;align-items:center;gap:9px; }.request-heading h2 { overflow:hidden;margin:0;font:700 13px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap; }.method-badge { padding:5px 7px;color:#07111f;border-radius:6px;background:var(--cyan);font:900 8px ui-monospace,monospace; }.request-actions { flex:none; }.request-actions button { min-height:30px;padding:0 8px;font-size:8px;font-weight:800; }.request-meta { margin:0;padding:10px 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border-bottom:1px solid var(--line); }.request-meta div { min-width:0; }.request-meta dt { margin-bottom:3px;color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.1em; }.request-meta dd { overflow:hidden;margin:0;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
.inspector-tabs { padding:0 13px;display:flex;gap:4px;border-bottom:1px solid var(--line); }.inspector-tabs button { min-height:38px;padding:0 9px;color:var(--muted);border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font-size:9px;font-weight:800; }.inspector-tabs button.active { color:var(--text);border-bottom-color:var(--cyan); }.inspector-tabs span { color:var(--cyan); }.tab-content { min-height:0;flex:1;overflow:auto;background:rgba(4,8,18,.5); }.code-view { min-height:100%;margin:0;padding:17px;color:#cbd5e1;white-space:pre-wrap;overflow-wrap:anywhere;font:11.5px/1.7 "SFMono-Regular",Consolas,monospace; }.token-key { color:#f9a8d4; }.token-string { color:#86efac; }.token-number { color:#fcd34d; }.token-boolean { color:#67e8f9; }.token-null { color:#c4b5fd; }.key-values { padding:10px 14px; }.key-value { padding:9px 0;display:grid;grid-template-columns:minmax(100px,.4fr) minmax(0,1fr);gap:12px;border-bottom:1px solid var(--line);font:10px/1.5 ui-monospace,monospace; }.key-value strong { overflow-wrap:anywhere;color:var(--pink); }.key-value span { overflow-wrap:anywhere;color:#cbd5e1; }.replay-history { padding:10px; }.replay-entry { padding:11px;margin-bottom:7px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02); }.replay-entry header { display:flex;justify-content:space-between;gap:8px; }.replay-entry strong { color:var(--success);font-size:10px; }.replay-entry small,.replay-entry p { color:var(--muted);font-size:8px; }.replay-entry p { overflow:hidden;margin:6px 0 0;text-overflow:ellipsis;white-space:nowrap; }
.replay-form { padding:14px;display:grid;gap:7px;border-bottom:1px solid var(--line); }.replay-form label { margin-top:4px;color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }.replay-form select,.replay-form input { width:100%;height:36px;padding:0 10px;color:var(--text);border:1px solid var(--line);border-radius:8px;background:#080d19;outline:0;font-size:10px; }.replay-form p { margin:2px 0 6px;color:var(--muted);font-size:8.5px;line-height:1.5; }.replay-form button { min-height:38px;font-size:9px; }.replay-form button:disabled { opacity:.42;cursor:not-allowed; }.replay-result { margin:12px;padding:11px;border:1px solid var(--line);border-radius:9px;background:#080d19; }.replay-result header { display:flex;align-items:center;justify-content:space-between; }.replay-result header span { color:var(--success);font:850 10px ui-monospace,monospace; }.replay-result header small { color:var(--muted);font-size:8px; }.replay-result>p { color:var(--red);font-size:9px;line-height:1.5; }.replay-result pre { max-height:170px;overflow:auto;margin:9px 0 0;padding-top:9px;border-top:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font:9px/1.6 ui-monospace,monospace; }.retention-note { margin:auto 14px 14px;padding:11px;display:grid;gap:4px;border:1px solid rgba(34,211,238,.12);border-radius:9px;background:rgba(34,211,238,.04); }.retention-note strong { color:var(--cyan);font-size:9px; }.retention-note span { color:var(--muted);font-size:8px;line-height:1.5; }
.replay-form .forwarding-toggle { min-height:48px;margin:2px 0;padding:8px 9px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);text-transform:none;letter-spacing:0;cursor:pointer; }.forwarding-toggle>span { min-width:0;display:grid;gap:3px; }.forwarding-toggle strong { font-size:10px; }.forwarding-toggle small { color:var(--muted);font-size:8px;font-weight:500; }.replay-form .forwarding-toggle input { width:1px;height:1px;margin:0;padding:0;position:absolute;opacity:0;pointer-events:none; }.forwarding-toggle>i { width:38px;height:22px;flex:0 0 38px;position:relative;border:1px solid var(--line);border-radius:999px;background:#334155;transition:background .18s ease,border-color .18s ease; }.forwarding-toggle>i::after { content:"";width:16px;height:16px;position:absolute;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .18s ease; }.forwarding-toggle input:checked+i { border-color:var(--success);background:var(--success); }.forwarding-toggle input:checked+i::after { transform:translateX(16px); }.forwarding-toggle input:focus-visible+i { outline:2px solid var(--cyan);outline-offset:2px; }.forwarding-toggle:has(input:disabled) { opacity:.55;cursor:not-allowed; }
.forwarding-status { min-height:30px;padding:0 9px;display:flex;align-items:center;gap:7px;color:var(--muted);border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);font-size:8.5px; }.forwarding-status span { width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#64748b; }.forwarding-status.active { color:var(--success);border-color:rgba(52,211,153,.22);background:rgba(52,211,153,.05); }.forwarding-status.active span { background:var(--success);box-shadow:0 0 0 3px rgba(52,211,153,.1); }.forwarding-status.saving span { background:var(--cyan);animation:forwarding-pulse .8s ease-in-out infinite alternate; }@keyframes forwarding-pulse{to{opacity:.35}}
.inbox-dialog { width:min(430px,calc(100% - 28px));padding:0;color:var(--text);border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.5); }.inbox-dialog::backdrop { background:rgba(3,6,14,.78);backdrop-filter:blur(6px); }.inbox-dialog form { padding:20px; }.inbox-dialog header { display:flex;align-items:start;justify-content:space-between; }.inbox-dialog h2 { margin:0;font-size:20px;letter-spacing:-.04em; }.inbox-dialog header button { width:31px;height:31px;font-size:18px; }.inbox-dialog label { margin:20px 0 7px;display:block;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase; }.inbox-dialog input { width:100%;height:42px;padding:0 11px;color:var(--text);border:1px solid var(--line);border-radius:8px;background:#080d19;outline:0; }.inbox-dialog form>div { margin-top:18px;display:flex;justify-content:flex-end;gap:8px; }.inbox-dialog form>div button { min-height:36px;padding:0 13px;font-size:9px;font-weight:800; }.toast { position:fixed;right:20px;bottom:20px;z-index:40;padding:10px 13px;color:var(--text);border:1px solid var(--line);border-radius:8px;background:#172137;box-shadow:0 15px 40px rgba(0,0,0,.35);font-size:9px; }
.landing-shell { width:min(1180px,calc(100% - 40px));margin:0 auto;padding:90px 0; }.landing-hero { max-width:850px; }.landing-hero h1 { margin:0;font-size:clamp(50px,7vw,90px);line-height:.92;letter-spacing:-.065em; }.landing-hero h1 em { color:transparent;background:var(--gradient);background-clip:text;font-style:normal; }.landing-hero>p:not(.eyebrow) { max-width:690px;margin:25px 0;color:var(--muted);font-size:15px;line-height:1.7; }.landing-hero>div { display:flex;align-items:center;gap:16px; }.landing-hero>div span { color:var(--muted);font-size:9px; }.primary-link { padding:13px 17px;color:#fff;border-radius:9px;background:var(--gradient);box-shadow:0 10px 28px rgba(99,102,241,.22);font-size:11px;font-weight:850;text-decoration:none; }
.webhook-explainer { margin-top:90px;padding:30px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(17,26,46,.94),rgba(8,14,27,.97));box-shadow:0 28px 80px rgba(0,0,0,.22);overflow:hidden; }.explainer-heading { display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);align-items:end;gap:40px; }.explainer-heading h2 { max-width:650px;margin:0;font-size:clamp(28px,4vw,44px);line-height:1.03;letter-spacing:-.05em; }.explainer-heading>p { margin:0;color:var(--muted);font-size:11px;line-height:1.7; }.webhook-flow-demo { margin-top:34px;display:grid;grid-template-columns:minmax(190px,.9fr) minmax(70px,.3fr) minmax(230px,1.05fr) minmax(80px,.34fr) minmax(270px,1.35fr);align-items:center;gap:10px; }.flow-card { min-width:0;min-height:230px;padding:16px;position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;background:rgba(6,11,22,.72);box-shadow:0 18px 45px rgba(0,0,0,.16); }.flow-card-top { margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:10px; }.flow-icon { width:34px;height:34px;display:grid;place-items:center;color:var(--cyan);border:1px solid rgba(34,211,238,.2);border-radius:10px;background:rgba(34,211,238,.07);font:800 11px ui-monospace,monospace; }.flow-state { padding:5px 7px;color:var(--muted);border:1px solid var(--line);border-radius:999px;font:800 7px ui-monospace,monospace;letter-spacing:.08em; }.flow-card>strong { font-size:13px;letter-spacing:-.02em; }.flow-card>small { margin-top:4px;color:var(--muted);font-size:8.5px;line-height:1.5; }.source-event,.target-response { margin-top:auto;padding:10px;display:grid;gap:6px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);font:8px ui-monospace,monospace; }.source-event { grid-template-columns:minmax(0,1fr) auto;align-items:center; }.source-event span,.target-response span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.source-event code { color:var(--violet);font-weight:900; }.captured-request { margin-top:auto;padding:10px;display:grid;gap:7px;border:1px solid rgba(34,211,238,.15);border-radius:9px;background:rgba(34,211,238,.035);font:8px/1.45 ui-monospace,monospace; }.captured-request span b { margin-right:5px;color:var(--cyan); }.captured-request code { overflow:hidden;color:#86efac;text-overflow:ellipsis;white-space:nowrap; }.captured-request em { color:var(--muted);font-style:normal; }.target-routes { margin-top:12px;display:grid;grid-template-columns:1fr;gap:5px; }.target-routes>em { color:var(--muted);font:italic 8px ui-monospace,monospace;text-align:center; }.target-route { min-width:0;padding:9px 10px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);font:9px ui-monospace,monospace; }.target-route b { color:var(--cyan);font-size:8px;letter-spacing:.06em;white-space:nowrap; }.target-route span { overflow:hidden;color:var(--text);font-size:9px;text-overflow:ellipsis;white-space:nowrap; }.tunnel-route { animation:webhook-route-tunnel 14.4s ease-in-out infinite; }.custom-route { animation:webhook-route-custom 14.4s ease-in-out infinite; }.target-response { margin-top:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;font-size:8.5px; }.target-response b { color:var(--success); }.flow-connector { height:58px;position:relative;display:grid;place-items:end center; }.flow-connector::before { content:"";height:1px;position:absolute;top:22px;right:0;left:0;background:repeating-linear-gradient(90deg,rgba(34,211,238,.5) 0 6px,transparent 6px 12px); }.flow-connector small { color:var(--muted);font:700 6.5px ui-monospace,monospace;text-align:center;letter-spacing:.05em; }.flow-packet { width:12px;height:12px;position:absolute;top:16px;left:0;z-index:1;display:grid;place-items:center;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(34,211,238,.1),0 0 18px rgba(34,211,238,.8);opacity:0; }.flow-packet i { width:3px;height:3px;border-radius:50%;background:#fff; }.connector-capture .flow-packet { animation:webhook-packet-capture 7.2s ease-in-out infinite; }.connector-replay .flow-packet { animation:webhook-packet-replay 7.2s ease-in-out infinite; }.flow-source { animation:webhook-source 7.2s ease-in-out infinite; }.flow-inbox { animation:webhook-inbox 7.2s ease-in-out infinite; }.flow-target { animation:webhook-target 7.2s ease-in-out infinite; }.flow-progress { height:3px;margin-top:26px;overflow:hidden;border-radius:999px;background:rgba(148,163,184,.1); }.flow-progress span { width:100%;height:100%;display:block;background:var(--gradient);transform-origin:left;animation:webhook-progress 7.2s linear infinite; }.flow-explanation { margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none; }.flow-explanation li { display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px; }.flow-explanation li>span { width:25px;height:25px;display:grid;place-items:center;color:var(--cyan);border:1px solid rgba(34,211,238,.18);border-radius:7px;background:rgba(34,211,238,.05);font:800 8px ui-monospace,monospace; }.flow-explanation strong { display:block;font-size:10px; }.flow-explanation p { margin:3px 0 0;color:var(--muted);font-size:8.5px;line-height:1.55; }
.flow-target>strong { font-size:16px; }.flow-target>small { font-size:10.5px; }.flow-target .flow-state { font-size:9px; }.target-routes { gap:7px; }.target-routes>em { font-size:10px; }.target-route { padding:10px 11px;grid-template-columns:1fr;gap:4px; }.target-route b { font-size:10px; }.target-route span { overflow:visible;font-size:11px;line-height:1.4;text-overflow:clip;white-space:normal;overflow-wrap:anywhere; }.target-response { padding:9px 11px;font-size:10px; }
@keyframes webhook-packet-capture { 0%,6% { left:0;opacity:0; } 10% { opacity:1; } 31% { left:calc(100% - 12px);opacity:1; } 35%,100% { left:calc(100% - 12px);opacity:0; } }
@keyframes webhook-packet-replay { 0%,52% { left:0;opacity:0; } 57% { opacity:1; } 79% { left:calc(100% - 12px);opacity:1; } 84%,100% { left:calc(100% - 12px);opacity:0; } }
@keyframes webhook-source { 0%,32%,100% { border-color:var(--line);box-shadow:0 18px 45px rgba(0,0,0,.16); } 8%,20% { border-color:rgba(167,139,250,.5);box-shadow:0 0 0 4px rgba(167,139,250,.06),0 18px 45px rgba(0,0,0,.16); } }
@keyframes webhook-inbox { 0%,25%,62%,100% { border-color:var(--line);box-shadow:0 18px 45px rgba(0,0,0,.16); } 34%,50% { border-color:rgba(34,211,238,.55);box-shadow:0 0 0 4px rgba(34,211,238,.06),0 18px 45px rgba(0,0,0,.16); } }
@keyframes webhook-target { 0%,73%,100% { border-color:var(--line);box-shadow:0 18px 45px rgba(0,0,0,.16); } 82%,94% { border-color:rgba(52,211,153,.55);box-shadow:0 0 0 4px rgba(52,211,153,.06),0 18px 45px rgba(0,0,0,.16); } }
@keyframes webhook-route-tunnel { 0%,6%,46%,100% { border-color:var(--line);background:rgba(255,255,255,.02); } 10%,42% { border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.08); } }
@keyframes webhook-route-custom { 0%,50%,96%,100% { border-color:var(--line);background:rgba(255,255,255,.02); } 56%,92% { border-color:rgba(167,139,250,.55);background:rgba(167,139,250,.08); } }
@keyframes webhook-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.landing-shell>.seo-content { width:100%;margin:70px 0 0; }
:root[data-theme="light"] { --bg:#f4f6fb;--panel:#fff;--raised:#f5f1fa;--line:rgba(71,85,105,.18);--text:#172033;--muted:#68748a; }.webhook-page[data-theme="light"] body,:root[data-theme="light"] body { background:radial-gradient(circle at 8% 0,rgba(139,92,246,.1),transparent 31rem),radial-gradient(circle at 94% 18%,rgba(34,211,238,.07),transparent 28rem),var(--bg); }.webhook-page[data-theme="light"] .topbar,:root[data-theme="light"] .topbar { background:rgba(255,255,255,.84); }.webhook-page[data-theme="light"] .panel,:root[data-theme="light"] .panel { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,248,252,.98)); }.webhook-page[data-theme="light"] .capture-bar,:root[data-theme="light"] .capture-bar { background:#f8f9fc; }.webhook-page[data-theme="light"] .capture-url,.webhook-page[data-theme="light"] .event-filter input,.webhook-page[data-theme="light"] .replay-form input,.webhook-page[data-theme="light"] .replay-form select,.webhook-page[data-theme="light"] .inbox-dialog input,.webhook-page[data-theme="light"] .replay-result,:root[data-theme="light"] .capture-url,:root[data-theme="light"] .event-filter input,:root[data-theme="light"] .replay-form input,:root[data-theme="light"] .replay-form select,:root[data-theme="light"] .inbox-dialog input,:root[data-theme="light"] .replay-result { background:#fff; }.webhook-page[data-theme="light"] .tab-content,:root[data-theme="light"] .tab-content { background:#edf1f7; }.webhook-page[data-theme="light"] .code-view,:root[data-theme="light"] .code-view { color:#334155; }.webhook-page[data-theme="light"] .token-key,:root[data-theme="light"] .token-key { color:#9d174d;font-weight:700; }.webhook-page[data-theme="light"] .token-string,:root[data-theme="light"] .token-string { color:#166534; }.webhook-page[data-theme="light"] .token-number,:root[data-theme="light"] .token-number { color:#a74408; }.webhook-page[data-theme="light"] .token-boolean,:root[data-theme="light"] .token-boolean { color:#0369a1;font-weight:700; }.webhook-page[data-theme="light"] .token-null,:root[data-theme="light"] .token-null { color:#6d28d9;font-weight:700; }.webhook-page[data-theme="light"] .webhook-explainer,:root[data-theme="light"] .webhook-explainer { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,247,252,.98));box-shadow:0 28px 70px rgba(76,62,100,.1); }.webhook-page[data-theme="light"] .flow-card,:root[data-theme="light"] .flow-card { background:rgba(255,255,255,.88); }.webhook-page[data-theme="light"] .source-event,.webhook-page[data-theme="light"] .target-response,:root[data-theme="light"] .source-event,:root[data-theme="light"] .target-response { background:#f8fafc; }.webhook-page[data-theme="light"] .captured-request,:root[data-theme="light"] .captured-request { background:#edf8fb; }.webhook-page[data-theme="light"] .captured-request code,:root[data-theme="light"] .captured-request code { color:#166534; }.webhook-page[data-theme="light"] .forwarding-toggle,:root[data-theme="light"] .forwarding-toggle { background:#fff; }.webhook-page[data-theme="light"] .webhook-page .global-tool-nav,:root[data-theme="light"] .webhook-page .global-tool-nav { --header-ink:#272038;--header-muted:#68748a;--header-surface:#eeeaf3;--header-active-ink:#fff; }.webhook-page[data-theme="light"] .webhook-page .global-auth-actions,:root[data-theme="light"] .webhook-page .global-auth-actions { --header-ink:#172033;--header-muted:#68748a;--header-surface:#eeeaf3;--header-line:rgba(71,85,105,.18); }
:root[data-theme="light"] body { color-scheme: light; }
 :root[data-theme="light"] .app-flow-guide { background:#f8f9fc; }.webhook-page[data-theme="light"] .app-flow-node,.webhook-page[data-theme="light"] .app-flow-destinations,:root[data-theme="light"] .app-flow-node,:root[data-theme="light"] .app-flow-destinations { background:#fff; }
@media(max-width:1180px) { body { min-height:100vh;overflow:auto; }.app-shell { height:auto;overflow:visible;padding-bottom:30px; }.workbench { grid-template-columns:280px minmax(0,1fr); }.events-panel,.inspector-panel { min-height:650px; }.replay-panel { min-height:360px;grid-column:1/-1;border-top:1px solid var(--line);border-left:0!important; }.capture-bar { flex-wrap:wrap; }.capture-url { min-width:50%; }.topbar { grid-template-columns:1fr auto; }.topbar .global-tool-nav { grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start;overflow:visible; } }
@media(max-width:900px) { .explainer-heading { grid-template-columns:1fr;gap:15px; }.webhook-flow-demo { grid-template-columns:1fr;gap:0; }.flow-card { min-height:170px; }.flow-connector { width:100%;height:58px;place-items:center end; }.flow-connector::before { width:1px;height:auto;top:0;right:auto;bottom:0;left:50%;background:repeating-linear-gradient(180deg,rgba(34,211,238,.5) 0 6px,transparent 6px 12px); }.flow-connector small { padding:4px 7px;background:var(--panel); }.flow-packet { top:0;left:calc(50% - 6px); }.connector-capture .flow-packet { animation-name:webhook-packet-capture-vertical; }.connector-replay .flow-packet { animation-name:webhook-packet-replay-vertical; }.flow-explanation { grid-template-columns:1fr;gap:13px; } }
@keyframes webhook-packet-capture-vertical { 0%,6% { top:0;opacity:0; } 10% { opacity:1; } 31% { top:calc(100% - 12px);opacity:1; } 35%,100% { top:calc(100% - 12px);opacity:0; } }
@keyframes webhook-packet-replay-vertical { 0%,52% { top:0;opacity:0; } 57% { opacity:1; } 79% { top:calc(100% - 12px);opacity:1; } 84%,100% { top:calc(100% - 12px);opacity:0; } }
@media(max-width:720px) { .app-shell { width:calc(100% - 20px); }.product-strip { align-items:start; }.live-state small { display:none; }.app-flow-guide>summary>span { align-items:start;flex-direction:column;gap:2px; }.app-flow-guide>summary>b { display:none; }.app-flow-track { grid-template-columns:1fr; }.app-flow-link { height:34px; }.app-flow-link::before { width:1px;height:auto;top:0;right:auto;bottom:0;left:50%;background:repeating-linear-gradient(180deg,rgba(34,211,238,.5) 0 5px,transparent 5px 10px); }.app-flow-link i { top:0;left:calc(50% - 4px); }.app-capture-link i { animation-name:webhook-packet-capture-vertical; }.app-replay-link i { animation-name:webhook-packet-replay-vertical; }.app-flow-link small { justify-self:end;align-self:center; }.app-flow-destinations>div { align-items:stretch;flex-direction:column; }.app-flow-destinations em { text-align:center; }.app-flow-destinations span { flex:none;white-space:normal; }.capture-bar>label { display:none; }.capture-bar select { max-width:none;flex:1; }.capture-url { min-width:100%;order:3; }.workbench { display:block;overflow:visible; }.events-panel { min-height:380px;max-height:480px; }.inspector-panel { min-height:650px;border-top:1px solid var(--line);border-left:0!important; }.replay-panel { min-height:380px; }.request-heading { align-items:flex-start;flex-direction:column; }.request-actions { width:100%;flex-wrap:wrap; }.request-actions button { flex:1; }.request-meta { grid-template-columns:repeat(2,1fr); }.landing-shell { width:min(100% - 24px,1180px);padding:60px 0; }.landing-hero h1 { font-size:52px; }.landing-hero>div { align-items:flex-start;flex-direction:column; }.webhook-explainer { margin-top:60px;padding:20px 15px; }.explainer-heading h2 { font-size:31px; } }
@media(prefers-reduced-motion:reduce) { .flow-packet,.flow-source,.flow-inbox,.flow-target,.target-route,.flow-progress span,.app-flow-link i,.app-flow-capture,.app-flow-destinations { animation:none!important; }.flow-packet { left:calc(50% - 6px);opacity:1; }.app-flow-link i { left:calc(50% - 4px);opacity:1; }.flow-target,.app-flow-destinations { border-color:rgba(52,211,153,.55); }.target-route { border-color:rgba(34,211,238,.35); }.flow-progress span { transform:none; } }